/*
 * fhs-exit: Grundoptik des Exit-Buttons, theme-unabhaengig.
 *
 * Werte aus CLAUDE.md 4.1 bis 4.3 und 5.2. Hier stehen nur die Farben und
 * Masse des Buttons selbst. Die Platzierung (Header, Sticky-Leiste, Abstaende,
 * z-index) steuert das Theme ueber eigene Klassen.
 *
 * Farben und Radius stehen als CSS-Variablen mit festem Rueckfallwert: Ohne
 * Child-Theme sieht der Button korrekt aus (Graphit, Radius 12 px), ein Theme
 * kann ihn ueber --fhs-exit-flaeche, --fhs-exit-schrift und --fhs-exit-radius an
 * seine Palette angleichen. Nie Orange.
 *
 * Audit 08.09.2026 (Befund 4, Button-Hoehen): Auch Hoehe, Innenabstand,
 * Schriftgroesse und Zeilenhoehe sind Variablen (--fhs-exit-hoehe,
 * --fhs-exit-innen, --fhs-exit-schriftgroesse, --fhs-exit-zeilenhoehe), damit
 * ein Theme den Exit ohne Spezifitaets-Tricks auf die Hoehe seiner uebrigen
 * Buttons bringt. Rueckfall bleibt 48 px, 10/20 px, 18 px, 1,2.
 */

a.fhs-exit,
.fhs-exit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	box-sizing: border-box;
	min-height: var(--fhs-exit-hoehe, 48px);
	min-width: 48px;
	padding: var(--fhs-exit-innen, 10px 20px);
	margin: 0;
	background-color: var(--fhs-exit-flaeche, #3E3E3E);
	color: var(--fhs-exit-schrift, #FFFFFF);
	font-family: inherit;
	font-size: var(--fhs-exit-schriftgroesse, 1.125rem); /* 18 px bei 16 px Wurzelschrift, waechst mit dem Theme */
	font-weight: 600;
	line-height: var(--fhs-exit-zeilenhoehe, 1.2);
	letter-spacing: 0;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	border: 0;
	border-radius: var(--fhs-exit-radius, 12px);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

a.fhs-exit:link,
a.fhs-exit:visited {
	color: var(--fhs-exit-schrift, #FFFFFF);
	background-color: var(--fhs-exit-flaeche, #3E3E3E);
}

a.fhs-exit:hover,
a.fhs-exit:active,
.fhs-exit:hover,
.fhs-exit:active {
	background-color: #2B2B2B;
	color: var(--fhs-exit-schrift, #FFFFFF);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Fokus: 2 px orange-dark mit 2 px Offset (CLAUDE.md 7). */
a.fhs-exit:focus,
.fhs-exit:focus {
	outline: 2px solid #A34C0C;
	outline-offset: 2px;
}

a.fhs-exit:focus:not(:focus-visible),
.fhs-exit:focus:not(:focus-visible) {
	outline: none;
}

a.fhs-exit:focus-visible,
.fhs-exit:focus-visible {
	outline: 2px solid #A34C0C;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #FFFFFF; /* heller Rand, damit der Fokus auch auf dunklem Grund sichtbar bleibt */
}

/* Varianten: nur kleine Anpassungen, Platzierung bleibt Theme-Sache. */
.fhs-exit--sticky {
	padding-left: 16px;
	padding-right: 16px;
}

.fhs-exit__label {
	display: inline-block;
}

.fhs-exit__hint {
	display: inline-block;
	font-size: 1rem; /* mindestens 16 px, CLAUDE.md 4.2 */
	font-weight: 400;
	opacity: 0.85;
}

/* Bewegung nur, wenn erlaubt (CLAUDE.md 7). */
@media (prefers-reduced-motion: no-preference) {
	a.fhs-exit,
	.fhs-exit {
		transition: background-color 0.15s ease;
	}
}

/* Hoher Kontrast / erzwungene Farben: Rahmen, damit der Button eine Form behaelt. */
@media (forced-colors: active) {
	a.fhs-exit,
	.fhs-exit {
		border: 2px solid currentColor;
	}
}

/* Editor-Platzhalter (block/editor.js): sieht aus wie der Button, ist aber kein Link. */
.fhs-exit-editor-wrap {
	display: inline-block;
}

.fhs-exit-editor-wrap .fhs-exit {
	pointer-events: none;
}