/*
 * Akzentfarben fuer hervorgehobene Buttons (Aufgabenliste 04.09.2026, Punkt 5.1)
 *
 * Verwendung im Editor - Klasse zusaetzlich zu btn setzen:
 *   <a class="btn cta-bernstein"  href="/preiskalkulator">Buchpreis kalkulieren</a>
 *   <a class="btn cta-terracotta" href="/manuskript">Manuskript einreichen</a>
 *   <a class="btn cta-petrol"     href="/preisrechner">Preiskalkulator</a>
 *
 * Regeln aus der Abstimmung:
 *   - nur Buttons mit konkreter Aktion hervorheben, reine Infolinks bleiben blau
 *   - hoechstens EIN hervorgehobener Button pro Sichtbereich
 *   - auf dem Navy der Kopf-/Fussleiste wirken Bernstein und Petrolgruen,
 *     auf hellem Grund zusaetzlich Terracotta
 *
 * Warum die Selektoren so aussehen:
 * Das Template faerbt jedes .btn / button global mit
 * "background-color: #2a517f !important" und den Hover mit "#90A6BE !important"
 * (basics-template-mainmenu-overwrite-responsive-animate.css). Eine einfache
 * Klasse kaeme dagegen nicht an. Darum jeweils zwei Klassen bzw. Element +
 * Klasse - das schlaegt die globale Regel unabhaengig von der Ladereihenfolge.
 *
 * Kontrast (weisse Schrift):
 *   Terracotta  4,6:1  - erfuellt WCAG AA auch fuer normalen Text
 *   Petrolgruen 4,3:1  - knapp darunter, unkritisch fuer kurze Buttonlabels
 *   Bernstein   3,0:1  - reicht fuer grosse/fette Schrift; bei kleinen Buttons
 *                        besser Terracotta oder Petrolgruen waehlen
 *
 * @copyright reDim GmbH | @link https://www.redim.de | @contact team@redim.de
 */

/* ---------- Grundform ---------- */
.btn.cta,
.btn.cta-bernstein,
.btn.cta-terracotta,
.btn.cta-petrol,
a.cta-bernstein,
a.cta-terracotta,
a.cta-petrol,
button.cta-bernstein,
button.cta-terracotta,
button.cta-petrol {
	display: inline-block;
	padding: 12px 28px !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none;
	color: #fff !important;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
	line-height: 14px;
	transition: background-color .15s ease-in-out;
}

/* ---------- Bernstein ---------- */
.btn.cta-bernstein,
a.cta-bernstein,
button.cta-bernstein {
	background-color: #E07B26 !important;
}

.btn.cta-bernstein:hover,
.btn.cta-bernstein:focus,
.btn.cta-bernstein:active,
a.cta-bernstein:hover,
a.cta-bernstein:focus,
a.cta-bernstein:active,
button.cta-bernstein:hover,
button.cta-bernstein:focus,
button.cta-bernstein:active {
	background-color: #C46A1D !important;
	color: #fff !important;
}

/* ---------- Terracotta ---------- */
.btn.cta-terracotta,
a.cta-terracotta,
button.cta-terracotta {
	background-color: #C8501F !important;
}

.btn.cta-terracotta:hover,
.btn.cta-terracotta:focus,
.btn.cta-terracotta:active,
a.cta-terracotta:hover,
a.cta-terracotta:focus,
a.cta-terracotta:active,
button.cta-terracotta:hover,
button.cta-terracotta:focus,
button.cta-terracotta:active {
	background-color: #A94217 !important;
	color: #fff !important;
}

/* ---------- Petrolgruen ---------- */
.btn.cta-petrol,
a.cta-petrol,
button.cta-petrol {
	background-color: #0F8A6B !important;
}

.btn.cta-petrol:hover,
.btn.cta-petrol:focus,
.btn.cta-petrol:active,
a.cta-petrol:hover,
a.cta-petrol:focus,
a.cta-petrol:active,
button.cta-petrol:hover,
button.cta-petrol:focus,
button.cta-petrol:active {
	background-color: #0C7157 !important;
	color: #fff !important;
}

/* ---------- Tastaturbedienung ----------
   Der Hover faerbt nur um; wer mit der Tastatur navigiert, braucht einen
   sichtbaren Fokusrahmen. Weiss aussen, damit er auf hellem UND auf dem
   Navy-Hintergrund zu sehen ist. */
.btn.cta-bernstein:focus-visible,
.btn.cta-terracotta:focus-visible,
.btn.cta-petrol:focus-visible,
a.cta-bernstein:focus-visible,
a.cta-terracotta:focus-visible,
a.cta-petrol:focus-visible,
button.cta-bernstein:focus-visible,
button.cta-terracotta:focus-visible,
button.cta-petrol:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .35);
}