/**
 * consent.css – Leiste und Vorschaltungen.
 *
 * ⚠️ Bewusst eigener Namensraum `wi-`. Enfold bringt eigene Klassen mit, und der Baukasten
 * überschreibt sein CSS-System beim nächsten Speichern. Nichts hier greift in Enfold hinein.
 * Die Schrift wird NICHT gesetzt, sie wird geerbt. So passt die Leiste ohne Zutun zu jeder Seite.
 *
 * ⚠️ „Nur notwendige" und „Alle annehmen" haben dieselbe Größe, denselben Abstand und dieselbe
 * Schrift. Nur die Farbe unterscheidet sie. Eine Ablehnung, die schwerer zu treffen ist als eine
 * Zustimmung, ist keine freie Entscheidung.
 *
 * ── DIE FARBEN, UND WARUM SIE NICHT GENAU DIE DER SEITE SIND ──────────────────────────────
 *
 * Die Marke von Team Walk Tour ist `#57b789`, abgelesen aus den Theme-Einstellungen und an der
 * Live-Seite nachgemessen (Links, Knöpfe, Fußbereich). Als Knopffarbe mit weißer Schrift steht
 * sie bei **2,46:1**. Verlangt sind 4,5:1 für Fließtext und 3,0:1 für große Schrift. Die Seite
 * selbst hat dieses Problem an ihren eigenen Knöpfen.
 *
 * Hier darf es sich nicht wiederholen: Eine Einwilligung setzt voraus, dass man lesen kann,
 * worin man einwilligt. Deshalb ist `--wi-marke-dunkel` derselbe Farbton (151,2°) und dieselbe
 * Sättigung (40 %), nur auf 37 % Helligkeit abgedunkelt: `#398460`, weiß darauf **4,52:1**.
 * Nebeneinander sieht man kaum einen Unterschied, gemessen ist es fast der doppelte Wert.
 *
 * Das helle `#57b789` bleibt als Kante und Akzent erhalten. Dort trägt es keine Schrift, und
 * dort ist es genau richtig: Es sagt auf den ersten Blick, dass die Leiste zu dieser Seite
 * gehört.
 *
 * Für eine weitere Seite reicht es, die Werte in `:root` zu ändern.
 */

:root {
	--wi-marke:        #57b789; /* Markenfarbe, nur als Fläche und Kante */
	--wi-marke-dunkel: #398460; /* derselbe Farbton, trägt weiße Schrift (4,52:1) */
	--wi-marke-tief:   #2f6e50; /* nur für den Mauszeiger-Zustand */
	--wi-text:         #444444; /* Grundschrift der Seite, auf Weiß 9,74:1 */
	--wi-text-leise:   #5c5c5c; /* Nebentext */
	--wi-grund:        #ffffff;
	--wi-flaeche:      #f4f9f6; /* Weiß mit einem Hauch der Marke */
	--wi-kante:        #d9e6df;
	--wi-fokus:        #003e7a; /* das Dunkelblau der Seite */
}

.wi-consent {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 99999;
	background: var(--wi-grund);
	color: var(--wi-text);
	border-top: 4px solid var(--wi-marke);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, .16);
	font-size: 15px;
	line-height: 1.55;
	max-height: 85vh;
	overflow-y: auto;
}
.wi-consent[hidden] { display: none; }

/**
 * ⚠️ Kein Fokusrahmen um die Leiste selbst, und das ist eine begründete Ausnahme.
 *
 * Das JS setzt beim Einblenden den Lesefokus auf den Kasten (`leiste.focus()`), damit Tastatur-
 * und Vorlesenutzer dort landen und die Überschrift vorgelesen bekommt. Der Kasten hat dafür
 * `tabindex="-1"`. Chrome behandelt diesen Fokus als sichtbar und zeichnet seinen eigenen
 * Rahmen, `rgb(0, 95, 204)`, einen Bildpunkt breit rundherum. Auf einer Leiste über die ganze
 * Breite sieht man davon eine blaue Linie oben und unten. Dennis hat sie beim Neuladen gemeldet
 * (28.08.2026), und in einem Screenshot war sie vorher schon zu sehen, ich hatte sie für einen
 * Bildausschnitt gehalten.
 *
 * Einen Fokusrahmen zu entfernen ist sonst falsch. Hier nicht: Der Kasten ist mit der Tabulator-
 * taste nicht erreichbar, er bekommt den Fokus ausschließlich programmgesteuert, und ein Rahmen
 * um einen ganzen Kasten sagt niemandem, wo er ist. Die Anzeige gehört an die Bedienelemente,
 * und die HABEN sie: `.wi-consent__knopf:focus-visible` zeichnet 3 Pixel in `--wi-fokus`.
 * Geprüft wird beides, siehe Punkt 21 in `tools/consent_pruefen.py`.
 */
.wi-consent:focus,
.wi-consent:focus-visible { outline: none; }
.wi-consent__innen { max-width: 1100px; margin: 0 auto; padding: 18px 20px 20px; }
.wi-consent__titel { margin: 0 0 6px; font-size: 18px; line-height: 1.3; color: var(--wi-text); }
.wi-consent__text { margin: 0 0 14px; color: var(--wi-text); }
.wi-consent__text a,
.wi-gate__text a,
.wi-hinweis a { color: var(--wi-marke-dunkel); text-decoration: underline; }

.wi-consent__details { margin: 0 0 14px; border-top: 1px solid var(--wi-kante); padding-top: 12px; }
.wi-consent__kat { margin: 0 0 12px; }
.wi-consent__kat label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.wi-consent__kat--fest label { cursor: default; }
.wi-consent__kat input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--wi-marke-dunkel); }
.wi-consent__kat-titel { font-size: 15px; }
.wi-consent__kat-text { margin: 4px 0 0 24px; font-size: 13.5px; color: var(--wi-text-leise); }
.wi-consent__kat-dienste { color: var(--wi-text-leise); font-style: italic; }

.wi-consent__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wi-consent__knopf {
	appearance: none;
	font: inherit;
	font-weight: 600;
	padding: 11px 20px;
	border: 2px solid var(--wi-marke-dunkel);
	border-radius: 3px;
	background: var(--wi-grund);
	color: var(--wi-marke-dunkel);
	cursor: pointer;
	min-width: 175px;
	transition: background-color .15s, color .15s;
}
.wi-consent__knopf:hover { background: var(--wi-flaeche); }
.wi-consent__knopf--stark { background: var(--wi-marke-dunkel); color: var(--wi-grund); }
.wi-consent__knopf--stark:hover { background: var(--wi-marke-tief); }
.wi-consent__knopf:focus-visible,
.wi-consent__mehr:focus-visible { outline: 3px solid var(--wi-fokus); outline-offset: 2px; }
.wi-consent__mehr {
	appearance: none; font: inherit; background: none; border: 0;
	color: var(--wi-text); text-decoration: underline; cursor: pointer; padding: 11px 4px;
}

@media (max-width: 620px) {
	.wi-consent__innen { padding: 14px 16px 16px; }
	.wi-consent__knopf { flex: 1 1 100%; min-width: 0; }
	.wi-consent__mehr { flex: 1 1 100%; text-align: center; }
}

/* ── Vorschaltungen ──────────────────────────────────────────────────────────── */
.wi-gate {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	background: var(--wi-flaeche);
	border: 1px solid var(--wi-kante);
	border-radius: 3px;
	overflow: hidden;
}
.wi-gate__hinweis { max-width: 520px; padding: 24px 20px; text-align: center; }
.wi-gate__zeichen { font-size: 30px; margin: 0 0 8px; }
.wi-gate__text { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--wi-text); }

.wi-gate__knopf {
	appearance: none; font: inherit; font-weight: 600;
	padding: 10px 18px; border: 2px solid var(--wi-marke-dunkel); border-radius: 3px;
	background: var(--wi-marke-dunkel); color: var(--wi-grund); cursor: pointer;
}
.wi-gate__knopf:hover { background: var(--wi-marke-tief); }
.wi-gate__knopf:focus-visible { outline: 3px solid var(--wi-fokus); outline-offset: 2px; }
/* Höhere Spezifität als die Themeregeln für iframes: Vor der Einwilligung ist der Rahmen leer
   und darf nicht sichtbar werden. */
.wi-gate .wi-gate__rahmen {
	display: none;
	width: 100%;
	height: var(--wi-gate-h, 480px);
	border: 0;
}
.wi-gate.ist-geladen { display: block; background: none; border: 0; }

.wi-hinweis {
	background: var(--wi-flaeche); border-left: 4px solid var(--wi-marke);
	color: var(--wi-text);
	padding: 10px 14px; font-size: 14px; margin: 0 0 18px;
}
.wi-widerruf { white-space: nowrap; }