/*
 * Consent-Hinweis im Corporate Design — DESKTOP.
 *
 * ── WARUM ES DIESE DATEI GIBT ─────────────────────────────────────────────
 * `assets/css/klaro.css` ist die Vendor-Datei von Klaro. Sie bleibt
 * unangetastet, damit ein Update des Consent-Werkzeugs nicht unsere
 * Gestaltung mitnimmt. Diese Datei wird in `inc/klaro-config.php` direkt
 * NACH klaro.css eingebunden und ueberschreibt deren Regeln.
 *
 * Der naheliegende Ort waere `assets/css/style.css` — der ist eine Falle:
 * geladen wird `style.min.css`, Aenderungen an der Quelldatei greifen live
 * nicht. Deshalb eine eigene Datei mit eigenem <link>.
 *
 * ── WARUM ALLES AUF body.wb-desktop LIEGT ─────────────────────────────────
 * `inc/klaro-config.php` bedient beide Fassungen. Die Mobilgestaltung steht
 * seit Welle 1 in `mobile/assets/css/mobile.css` unter `body.wb-mobile` und
 * ist erprobt. Ohne diese Klammer wuerde sie hier ueberschrieben. Die
 * Klassen setzt `inc/mobile/device.php`.
 *
 * ── FARBEN, NACHGERECHNET ─────────────────────────────────────────────────
 * Corporate Design: weiss, sand, schwarz. Keine neue Farbe.
 *   #333333 auf #ffffff  = 12,6:1   (Text, Links)
 *   #ffffff auf #333333  = 12,6:1   (Schaltflaechen)
 * Beides weit ueber AA. #e3ddd8 ist die Sandfarbe des Themes und wird NUR
 * als Trennlinie verwendet — als Rahmen eines Bedienelements waere ihr
 * Kontrast zu schwach (Projektregel: antippbar braucht eine kraeftige
 * Kante, nur trennend darf zart sein).
 *
 * ── DIE SCHALTFLAECHEN SIND ABSICHTLICH IDENTISCH ─────────────────────────
 * "Zustimmen" und "Ablehnen" haben dieselbe Groesse, dieselbe Farbe, dasselbe
 * Gewicht. Vorher war Zustimmen gruen und kraeftig, Ablehnen blassgrau und
 * an den linken Rand geschoben. Ungleiche Prominenz ist ein Dark Pattern und
 * angreifbar. Wer hier eine Schaltflaeche hervorhebt, macht die Einwilligung
 * anfechtbar — das ist keine Gestaltungsfrage.
 *
 * @package weserburg
 */

/* ── Die Leiste ──────────────────────────────────────────────────────── */

body.wb-desktop #klaro .cookie-notice {
	position: fixed;
	inset: auto 0 0 0;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100%;
	max-width: none;
	margin: 0;
	/*
	 * Ohne border-box zaehlt der Innenabstand ZUSAETZLICH zu width:100% —
	 * gemessen: 1488px Leiste in einem 1440px-Fenster, also 48px Ueberhang
	 * und ein horizontaler Scrollbalken auf jeder Seite. Der Inhalt sass
	 * dadurch auch nicht mittig (164px links gegen 116px rechts), weil er
	 * in der zu breiten Leiste zentriert war statt im Fenster.
	 */
	box-sizing: border-box;
	padding: 20px 24px;
	background: #ffffff;
	color: #333333;
	border: 0;
	border-top: 1px solid #e3ddd8;
	border-radius: 0;
	box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06);
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	z-index: 1000;
}

/*
 * Der Inhalt wird auf die Inhaltsbreite des Themes begrenzt (1160px, wie
 * .container-content). Die Leiste selbst bleibt randlos ueber die volle
 * Breite — sonst schwebt auf einem breiten Schirm ein Kasten im Nichts.
 */
body.wb-desktop #klaro .cookie-notice .cn-body {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 28px;
}

body.wb-desktop #klaro .cookie-notice .cn-body > p {
	margin: 0;
	color: #333333;
}

/* Der Satz nimmt den Rest der Zeile, faellt aber unter 380px in die naechste. */
body.wb-desktop #klaro .cookie-notice .cn-body > p:first-child {
	flex: 1 1 380px;
}

body.wb-desktop #klaro .cookie-notice .cn-ok {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
}

body.wb-desktop #klaro .cookie-notice .cn-buttons {
	display: flex;
	gap: 12px;
	margin: 0;
}

/* ── Die beiden Schaltflaechen ───────────────────────────────────────── */

body.wb-desktop #klaro .cookie-notice .cm-btn,
body.wb-desktop #klaro .cookie-notice .cm-btn.cm-btn-success,
body.wb-desktop #klaro .cookie-notice .cm-btn.cm-btn-success-var,
body.wb-desktop #klaro .cookie-notice .cm-btn.cm-btn-decline,
body.wb-desktop #klaro .cookie-notice .cm-btn.cm-btn-danger {
	min-width: 150px;
	margin: 0;
	padding: 12px 22px;
	background: #333333;
	color: #ffffff;
	border: 1px solid #333333;
	border-radius: 0;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	opacity: 1;
}

body.wb-desktop #klaro .cookie-notice .cm-btn:hover,
body.wb-desktop #klaro .cookie-notice .cm-btn.cm-btn-success:hover,
body.wb-desktop #klaro .cookie-notice .cm-btn.cm-btn-decline:hover {
	background: #000000;
	border-color: #000000;
	color: #ffffff;
}

/* ── Der Weg zur zweiten Ebene: ein Textlink, keine Schaltflaeche ────── */

body.wb-desktop #klaro .cookie-notice .cn-learn-more,
body.wb-desktop #klaro .cookie-notice .cm-link,
body.wb-desktop #klaro .cookie-notice a {
	background: none;
	border: 0;
	padding: 0;
	color: #333333;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

body.wb-desktop #klaro .cookie-notice .cn-learn-more:hover,
body.wb-desktop #klaro .cookie-notice .cm-link:hover,
body.wb-desktop #klaro .cookie-notice a:hover {
	color: #000000;
}

/* Tastaturbedienung sichtbar halten — die Leiste ist ein Bedienelement. */
body.wb-desktop #klaro .cookie-notice .cm-btn:focus-visible,
body.wb-desktop #klaro .cookie-notice .cn-learn-more:focus-visible,
body.wb-desktop #klaro .cookie-notice a:focus-visible {
	outline: 2px solid #333333;
	outline-offset: 2px;
}

/* ── Schmale Fenster ─────────────────────────────────────────────────── */
/*
 * Dieser Stil gilt fuer `body.wb-desktop` — und ein Desktop-Fenster laesst
 * sich schmal ziehen. Bei 304px gemessen: die Schaltflaechenzeile war 480px
 * breit, "Zustimmen" lag 200px ausserhalb des Fensters und war nicht mehr
 * anklickbar. Kein Scrollbalken half, weil ein `position: fixed`-Element den
 * Dokumentenfluss nicht verbreitert — der Knopf war schlicht weg.
 *
 * Ein Einwilligungsdialog, dessen Zustimmen-Knopf man nicht erreicht, ist
 * kein Schoenheitsfehler. Ab hier stapelt sich die Leiste.
 */
@media (max-width: 760px) {
	body.wb-desktop #klaro .cookie-notice .cn-body {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * MUSS zurueckgesetzt werden. `flex: 1 1 380px` oben meint die BREITE,
	 * weil die Zeile waagerecht laeuft. In einer Spalte meint dieselbe
	 * Angabe die HOEHE — der Absatz bekam 380px Mindesthoehe, und die
	 * Leiste wuchs auf die halbe Bildschirmhoehe mit einem Loch in der
	 * Mitte. Gemessen, nicht vermutet.
	 */
	body.wb-desktop #klaro .cookie-notice .cn-body > p:first-child {
		flex: 0 0 auto;
	}

	body.wb-desktop #klaro .cookie-notice .cn-ok {
		flex-wrap: wrap;
		gap: 12px;
	}

	body.wb-desktop #klaro .cookie-notice .cn-buttons {
		flex: 1 1 100%;
	}

	/* Beide teilen sich die Zeile zu gleichen Teilen — gleich gross bleibt gleich gross. */
	body.wb-desktop #klaro .cookie-notice .cm-btn {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* ── Zweite Ebene: derselbe Auftritt ─────────────────────────────────── */
/*
 * Ohne diesen Block springt man aus einer gestalteten Leiste in Klaros
 * dunkelgraues Standardfenster — genau der Bruch, wegen dem der Umbau
 * ueberhaupt begonnen wurde.
 */

body.wb-desktop #klaro .cookie-modal .cm-bg {
	background: rgba(0, 0, 0, 0.5);
}

body.wb-desktop #klaro .cookie-modal .cm-modal {
	background: #ffffff;
	color: #333333;
	border-radius: 0;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
	font-family: Montserrat, sans-serif;
	max-width: 680px;
}

body.wb-desktop #klaro .cookie-modal .cm-header,
body.wb-desktop #klaro .cookie-modal .cm-body,
body.wb-desktop #klaro .cookie-modal .cm-footer {
	background: #ffffff;
	color: #333333;
}

body.wb-desktop #klaro .cookie-modal .cm-header {
	border-bottom: 1px solid #e3ddd8;
}

body.wb-desktop #klaro .cookie-modal .cm-footer {
	border-top: 1px solid #e3ddd8;
}

body.wb-desktop #klaro .cookie-modal .cm-header h1,
body.wb-desktop #klaro .cookie-modal .cm-header h1.title,
body.wb-desktop #klaro .cookie-modal .cm-list-title,
body.wb-desktop #klaro .cookie-modal .cm-list-description,
body.wb-desktop #klaro .cookie-modal .cm-purpose,
body.wb-desktop #klaro .cookie-modal p,
body.wb-desktop #klaro .cookie-modal li {
	color: #333333;
	font-family: Montserrat, sans-serif;
}

body.wb-desktop #klaro .cookie-modal a,
body.wb-desktop #klaro .cookie-modal .cm-link {
	color: #333333;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.wb-desktop #klaro .cookie-modal .cm-btn {
	min-width: 150px;
	padding: 12px 22px;
	background: #333333;
	color: #ffffff;
	border: 1px solid #333333;
	border-radius: 0;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

body.wb-desktop #klaro .cookie-modal .cm-btn:hover {
	background: #000000;
	border-color: #000000;
}

/*
 * Die Schalter. Klaros Gruen (#24cc9a) ist eine Fremdfarbe im Corporate
 * Design. Aus statt an bleibt sandgrau, an wird schwarz.
 *
 * Und ein Nebeneffekt, der beabsichtigt ist: Klaros Sammelschalter traegt
 * die Klasse `only-required` und wurde damit GRUEN gezeichnet, obwohl er
 * ausgeschaltet ist ("nur die erforderlichen Dienste"). Am 26.08.2026 im
 * Browser gemessen — `checked` war false, die Farbe sagte das Gegenteil.
 * Fuer einen Laien sieht das aus wie "alles an". Hier bekommen alle
 * ungesetzten Zustaende dieselbe graue Farbe.
 */
body.wb-desktop #klaro .cookie-modal .cm-list-label .slider {
	background-color: #c9c0b7;
}

body.wb-desktop #klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider,
body.wb-desktop #klaro .cookie-modal .cm-list-input.half-checked + .cm-list-label .slider {
	background-color: #c9c0b7;
	opacity: 1;
}

body.wb-desktop #klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
	background-color: #333333;
}

/* Erforderlich und festgestellt: an, aber sichtbar nicht bedienbar. */
body.wb-desktop #klaro .cookie-modal .cm-list-input.required + .cm-list-label .slider {
	background-color: #847870;
}

body.wb-desktop #klaro .cookie-modal .cm-list-input:focus-visible + .cm-list-label .slider {
	outline: 2px solid #333333;
	outline-offset: 2px;
}

body.wb-desktop #klaro .cm-powered-by {
	display: none;
}