@charset "utf-8";
/* Consent-Dialog (Cookie-Einstellungen), markenuebergreifend.
 *
 * Alles unter #lv-consent bzw. #lv-consent-prefs gescopt. Das ist Pflicht, keine Kosmetik:
 * binect.css/fp.css enthalten Legacy-Regeln (.nav>li>button, .tab-content, .nav-pills>li,
 * frueher auch "#cookienotice div{padding:10px}"), die ungescopt auf Bootstrap-5-Komponenten
 * durchschlagen. Aus demselben Grund traegt das Markup bewusst KEINE .row/.col-/.nav-Klassen.
 *
 * Farben ausschliesslich ueber die --brand-*-Variablen aus _brand_head.jsp mit Hex-Fallback.
 * Traegendes Token ist --brand-cta (Binect #125B9A = 7,03:1, FP #23527C = 8,17:1 gegen weiss) -
 * die CI-Aktionsfarbe, in beiden Marken AA. NICHT verwendbar als Textflaeche: --brand-accent
 * (Binect 2,97:1, FP 2,13:1) und --brand-secondary (2,32:1 / 2,13:1) reissen die Schwelle -
 * genau daran scheiterte der alte btn-secondary-Button des Vorgaengerbanners. --brand-primary
 * waere seit dem CI-Wechsel tragfaehig (11,21:1 / 6,42:1), bleibt hier aber ungenutzt: die
 * Primaerfarbe ist im neuen CI die Icon-/Ueberschriftenfarbe, nicht die Aktionsfarbe.
 *
 * EINE bewusste Ausnahme von dieser Regel: "Auswahl speichern" (.lvcc-btn-accent) traegt auf
 * Designvorgabe die gruene Button-Variante der App, also weisse Schrift auf --brand-accent.
 * Das liegt mit 2,97:1 (Binect) / 2,13:1 (FP) unter AA - dokumentiert an der Regel selbst.
 */

/* ---------------------------------------------------------------- Layer 1: Balken ---------- */

#lv-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* Ueber .fixed-top (1030), aber UNTER modal-backdrop (1050) und .modal (1055). Der alte
	   Banner stand auf 10000 und legte sich damit ueber jeden offenen Dialog. */
	z-index: 1035;
	max-height: 60vh;
	overflow-y: auto;
	background: #fff;
	border-top: 4px solid var(--brand-cta, #125B9A);
	box-shadow: 0 -8px 28px rgba(20, 40, 70, .16);
	/* Reserve, damit der Fokusring des ersten/letzten Buttons nicht vom Scrollrand
	   abgeschnitten wird (WCAG 2.4.11 Focus Not Obscured). */
	padding: 4px 0;
	animation: lvcc-in .22s cubic-bezier(.2, .7, .3, 1) both;
}

#lv-consent .lvcc-inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 1.15rem 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
}

#lv-consent .lvcc-copy {
	flex: 1 1 32rem;
	min-width: 0;
}

#lv-consent p {
	margin: 0 0 .35rem;
}

#lv-consent .lvcc-title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--brand-text, #222222);
}

#lv-consent .lvcc-text,
#lv-consent-prefs .lvcc-text {
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--brand-text, #222222);
	max-width: 64ch;
}

#lv-consent .lvcc-meta,
#lv-consent-prefs .lvcc-meta {
	font-size: .8125rem;
	line-height: 1.5;
	/* Bewusst --brand-text und NICHT --brand-muted: --brand-muted liegt mit #767676 nur knapp
	   ueber AA (4,54:1); fuer Pflichtangaben im Consent-Dialog ist der Puffer zu klein. */
	color: var(--brand-text, #222222);
	max-width: 64ch;
}

#lv-consent .lvcc-links {
	margin-bottom: 0;
	font-size: .8125rem;
}

#lv-consent .lvcc-links a {
	font-weight: 600;
	color: var(--brand-cta, #125B9A);
	/* Pflicht: --brand-cta gegen --brand-text erreicht nur 2,26:1 (Binect) bzw. 1,11:1 (FP).
	   Farbe allein darf den Link nicht kennzeichnen (WCAG 1.4.1). Ueberschreibt bewusst das
	   globale a{text-decoration:none} aus binect.css/fp.css. */
	text-decoration: underline;
}

#lv-consent .lvcc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
}

/* ---------------------------------------------------------------- Buttons ------------------ */

.lvcc-btn {
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	min-height: 44px;
	padding: .6rem 1.1rem;
	border: 2px solid var(--brand-cta, #125B9A);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
}

/* Zustimmen UND Ablehnen sind absichtlich IDENTISCH gestaltet. Gleichwertigkeit in Groesse,
   Farbe, Kontrast und Schriftbild ist die Anforderung; eine farbige Zustimmung neben einem
   grauen Ablehnen ist der klassische Beanstandungsgrund. */
.lvcc-btn-consent {
	background: var(--brand-cta, #125B9A);
	color: #fff;
}

.lvcc-btn-neutral {
	background: #fff;
	color: var(--brand-cta, #125B9A);
}

/* "Auswahl speichern" (nur DIESER Button) in der gruenen Variante der App - --brand-accent wie
   .btn-primary. Bewusst nicht .lvcc-btn-neutral mitgeaendert: die Klasse traegt weiterhin der
   "Einstellungen"-Knopf im Balken.
   Datenschutzseitig ist das die guenstigere Gewichtung: die selbstbestimmte Auswahl ist die
   optisch primaere Aktion, waehrend Zustimmen und Ablehnen unveraendert beide
   .lvcc-btn-consent tragen und untereinander identisch bleiben.
   ACHTUNG Kontrast: weisse Schrift erreicht auf --brand-accent nur 2,97:1 (Binect) bzw.
   2,13:1 (FP) und im Hover 4,40:1 / 3,69:1 - siehe Kopfkommentar. Weiss ist trotzdem die
   bessere Wahl: #222222 waere im Binect-Hover mit 3,62:1 schlechter und wuerde als einzige
   Schriftfarbe im Dialog aus der Reihe fallen. Ein durchgehend AA-taugliches Gruen gibt die
   CI-Palette nicht her, das braeuchte einen dunkleren Ton (z.B. #00703E = 6,20:1). */
.lvcc-btn-accent {
	background: var(--brand-accent, #00AC5F);
	border-color: var(--brand-accent-border, #66CD9F);
	color: #fff;
}

/* Hover ueber das eigene Token --brand-cta-hover (Binect #037fea heller als der Ruhezustand,
   FP #204B72 dunkler - beide mit weisser Schrift). Das bisherige filter:brightness(.92) war
   markenagnostisch, aber nicht steuerbar; ueber das Token folgt der Zustand jeder
   Branding-Aenderung.
   BEIDE Buttons bekommen die identische Hover-Darstellung, die Gleichwertigkeit von Zustimmen
   und Ablehnen bleibt also auch im Hover gewahrt (der Ablehnen-Button wird dabei von der
   Umriss- in die Flaechenform gehoben, wie ein Bootstrap-.btn-outline-*).
   Weisse Schrift: Binect 4,02:1 (ueber der Grosstext-Schwelle 3:1, unter AA fuer Normaltext -
   bewusste Designvorgabe), FP 9,09:1. Der 2px-Rahmen bleibt aus der Basisregel auf
   --brand-cta und traegt im Hover die Abgrenzung. */
.lvcc-btn:hover {
	background: var(--brand-cta-hover, #037fea);
	color: #fff;
}

/* Muss NACH .lvcc-btn:hover stehen: gleiche Spezifitaet (0,2,0), die Quellreihenfolge
   entscheidet - sonst bekaeme der gruene Button den blauen Hover. */
.lvcc-btn-accent:hover {
	background: var(--brand-accent-hover, #008967);
	border-color: var(--brand-accent-border, #66CD9F);
	color: #fff;
}

#lv-consent .lvcc-btn:focus-visible,
#lv-consent-prefs :focus-visible {
	outline: none;
	/* Doppelring: innen weiss fuer Kontrast zur Buttonflaeche, aussen schwarz fuer Kontrast zur
	   Seite. Ein einfacher schwarzer Ring erreicht auf dem FP-CTA (#23527C) nur 2,57:1. */
	box-shadow: 0 0 0 2px #fff, 0 0 0 5px #000;
}

/* ---------------------------------------------------------------- Layer 2: Dialog ---------- */

/* binect.css und fp.css setzen .modal-dialog global auf min-width:min(975px,90vw). Ohne diesen
   Override waere der Einstellungsdialog ein 975-px-Monster und auf Tablets unbrauchbar. */
#lv-consent-prefs .modal-dialog {
	min-width: 0;
	max-width: 640px;
	width: calc(100% - 1.5rem);
}

#lv-consent-prefs .modal-content {
	border: 0;
	border-radius: 12px;
	border-top: 4px solid var(--brand-cta, #125B9A);
	box-shadow: 0 12px 34px rgba(20, 40, 70, .18);
}

#lv-consent-prefs .modal-title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--brand-text, #222222);
}

#lv-consent-prefs .lvcc-modal-footer {
	gap: .6rem;
	justify-content: flex-start;
}

/* Bootstrap gibt Footer-Kindern eine eigene Marge, die mit dem gap doppelt wirkt. */
#lv-consent-prefs .lvcc-modal-footer > * {
	margin: 0;
}

/* ---------------------------------------------------------------- Kategorien --------------- */

.lvcc-cat {
	background: #fbfbfc;
	border: 1px solid #e3e6e8;
	border-left-width: 4px;
	border-radius: 10px;
	padding: 1rem 1.1rem;
	margin-bottom: .9rem;
	transition: background-color .15s ease, border-color .15s ease;
}

.lvcc-cat.is-on {
	border-left-color: var(--brand-cta, #125B9A);
	background: #f5faff;
}

.lvcc-cat.is-off {
	border-left-color: #c9ccce;
}

.lvcc-cat.is-locked {
	border-left-color: var(--brand-cta, #125B9A);
	background: #f5faff;
}

.lvcc-cat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
	margin-bottom: .5rem;
}

.lvcc-cat-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--brand-text, #222222);
}

.lvcc-cat-desc,
.lvcc-cat-detail {
	font-size: .9rem;
	line-height: 1.5;
	color: var(--brand-text, #222222);
	margin: .5rem 0 0;
}

/* Zustandspille. Der Text steht im DOM und aendert sich beim Umschalten mit - der Zustand darf
   nicht allein ueber die Farbe der linken Kante transportiert werden (WCAG 1.4.1). */
.lvcc-state {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .2rem .6rem;
	border-radius: 999px;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease;
}

/* Flaechen/Rahmen auf den CI-Leitern (Secondary 1 fuer AN, Primary 2 fuer NOTWENDIG), jeweils
   auf der bisherigen Helligkeit - die Kontraste bleiben damit praktisch unveraendert. Die
   Schrift der gruenen Pille ist eine Abdunklung von Primary 2 auf 65 % Helligkeit: die
   CI-Leiter kennt nur Aufhellungen und ihr dunkelster Ton #00AC5F erreicht hier nur 1,4:1. */
.lvcc-state-on     { background: #EBF1F7; color: var(--brand-cta, #125B9A); border: 1px solid #C3D6E6; } /* 6,18:1 binect / 7,18:1 fp */
.lvcc-state-off    { background: #eceef0; color: #5b6166; border: 1px solid #dcdedf; } /* 5,39:1 - neutral, nicht CI-gebunden */
.lvcc-state-locked { background: #E3F6EE; color: #00703E; border: 1px solid #A6E2C7; } /* 5,52:1 */

/* Der Schalter selbst bleibt sichtbar, auch der gesperrte "Notwendig"-Schalter. Ein
   ausgeblendeter Schalter verschweigt, dass es die Kategorie ueberhaupt gibt. */
.lvcc-switch {
	margin: 0;
	min-height: 0;
}

.lvcc-switch .form-check-label {
	font-size: .9rem;
	color: var(--brand-text, #222222);
	/* Trefferflaeche fuer Touch: das Label deckt die Beschriftung mit ab. */
	padding: .25rem 0;
	cursor: pointer;
}

.lvcc-switch .form-check-input:disabled + .form-check-label {
	cursor: default;
}

.lvcc-details {
	margin-top: .5rem;
}

.lvcc-details > summary {
	font-size: .875rem;
	font-weight: 600;
	color: var(--brand-cta, #125B9A);
	cursor: pointer;
	/* Native <details>: Tastatur und Screenreader funktionieren ohne aria-expanded-Handarbeit. */
	padding: .25rem 0;
}

.lvcc-revoke {
	margin-top: 1rem;
	margin-bottom: 0;
}

/* Fehlermeldung, wenn das Speichern der Entscheidung fehlschlaegt. #b02a37 auf weiss = 5,93:1,
   also AA-konform; zusaetzlich fett, damit die Meldung nicht allein ueber die Farbe wirkt. */
.lvcc-error {
	margin: .6rem 0 0;
	font-size: .875rem;
	font-weight: 600;
	color: #b02a37;
}

#lv-consent .lvcc-error {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 1.25rem 1rem;
}

/* [hidden] setzt display:none - Bootstrap-Reboot macht das bereits, aber .lvcc-modal-footer ist
   ein Flex-Container und wuerde das Element sonst wieder einblenden. */
.lvcc-error[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- Layout-Kompensation ------ */

/* Ohne das verdeckt der Balken dauerhaft die untersten Zeilen der Seite - und damit ausgerechnet
   die Footer-Links zu Datenschutz und Impressum, die waehrend des Banners erreichbar bleiben
   muessen. Die Hoehe setzt consent.js per ResizeObserver. */
body.lvcc-open {
	padding-bottom: var(--lvcc-h, 0px);
}

/* ---------------------------------------------------------------- Mobil -------------------- */

@media (max-width: 767.98px) {
	#lv-consent .lvcc-inner {
		padding: 1rem;
		gap: .85rem;
	}

	#lv-consent .lvcc-actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	#lv-consent .lvcc-btn {
		width: 100%;
		min-height: 48px;
	}

	#lv-consent-prefs .lvcc-modal-footer {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	#lv-consent-prefs .lvcc-modal-footer .lvcc-btn {
		width: 100%;
		min-height: 48px;
	}
}

/* ---------------------------------------------------------------- Bewegung / Kontrast ------ */

@keyframes lvcc-in {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	#lv-consent,
	.lvcc-cat,
	.lvcc-state {
		animation: none !important;
		transition: none !important;
	}
}

/* Windows-Kontrastmodus: reine box-shadow-Ringe verschwinden dort ersatzlos. */
@media (forced-colors: active) {
	#lv-consent .lvcc-btn:focus-visible,
	#lv-consent-prefs :focus-visible {
		outline: 3px solid CanvasText;
		outline-offset: 2px;
	}

	#lv-consent {
		border-top: 4px solid CanvasText;
	}
}