/**
 * bds|architects – Anpassungen für das Klaro-Cookie-Consent.
 *
 * Klaro v0.7 stellt Theming über CSS-Variablen auf `.klaro` bereit. Buttons
 * tragen mehrere Klassen (z. B. `cm-btn-success cm-btn-info`); da `cm-btn-info`
 * in der Quell-Reihenfolge gewinnt, werden Button-Farben hier gezielt per
 * Klasse übersteuert. Wird NACH klaro.css geladen.
 */

.klaro {
	/* Schrift etwas größer (Default 14px). */
	--font-size: 16px;
	--font-family: var(--wp--preset--font-family--sans, inherit);
	--button-text-color: #ffffff;

	/* Eckig, kein Rand-Radius. */
	--border-radius: 0px;

	/* Notice (Desktop) randlos und über volle Breite. */
	--notice-position: fixed;
	--notice-bottom: 0;
	--notice-left: 0;
	--notice-right: 0;
	--notice-max-width: none;
}

/* ===== Notice (unteres Banner) ============================================ */

/* Voll­breit, ohne Abstand zum Rand, ohne abgerundete Ecken/Schatten. */
.klaro .cookie-notice:not(.cookie-modal-notice) {
	left: 0;
	right: 0;
	bottom: 0;
	max-width: none;
	width: 100%;
	border-radius: 0;
}

/* Etwas mehr Innenabstand rundherum. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
	padding: 1.5em 2em;
}

/* Headline „Wir nutzen Cookies" über dem Notice-Text. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .bds-cn-title {
	display: block;
	font-size: 1.15em;
	font-weight: 600;
	margin-bottom: 0.35em;
}

/* Text + Links normal (nicht fett). */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body a {
	font-weight: 400;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
	font-size: var(--font-size, 16px);
	line-height: 1.5;
}

/* Link in der Notice (Datenschutzerklärung) in Rot. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body a {
	color: #c8102e;
	text-decoration: underline;
}

/* Links im Einstellungen-Modal in Rot (Default ist grün). */
.klaro .cookie-modal a {
	color: #c8102e;
}

/* Buttonreihe rechtsbündig, gleiche Schriftlinie. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
	gap: 0.75em;
	align-items: center;
}

/* Ab Desktop: Text links, Buttons rechts daneben (eine Reihe).
   Darunter (Tablet & Mobil) bleibt der Default: Text oben, Buttons darunter. */
@media (min-width: 1024px) {
	.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 1.5em;
	}
	.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body > p {
		flex: 1 1 18em;
		margin: 0;
	}
	.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
		flex: 0 0 auto;
		margin-top: 0;
	}
}

/* „Einstellungen" nicht nach links schieben. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
	flex-grow: 0;
}

/* Notice-Buttons einheitlich (gleiche Größe/Form, normal gewichtet). */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cm-btn {
	box-sizing: border-box;
	min-width: 11em;
	margin: 0;
	padding: 0.7em 1.2em;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	border-radius: 0;
}

/* Abstand zwischen den Buttons. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
	margin-left: 0.5rem;
}

/* ===== Button-Farben (Notice + Modal), gezielt per Klasse ================= */

/* CTA „Akzeptieren" / „Alle akzeptieren" / Erfolg → Markenrot. */
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-accept,
.klaro .cookie-notice .cm-btn.cm-btn-accept-all,
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-accept,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all {
	background-color: #c8102e;
	color: #ffffff;
	border: 1px solid #c8102e;
}

/* „Ablehnen" in der Notice → Rot. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn.cn-decline,
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-danger {
	background-color: #c8102e;
	color: #ffffff;
	border: 1px solid #c8102e;
}

/* Im Einstellungen-Modal: „Ablehnen" und „Auswahl speichern" → Grau. */
.klaro .cookie-modal .cm-btn.cn-decline,
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-success-var {
	background-color: #6b6b6b;
	color: #ffffff;
	border: 1px solid #6b6b6b;
}

/* „Einstellungen" → Button mit roter Outline (transparent). */
.klaro .cookie-notice .cm-btn.cm-btn-lern-more,
.klaro .cookie-modal .cm-btn.cm-btn-lern-more {
	background-color: transparent;
	color: #c8102e;
	border: 1px solid #c8102e;
	font-weight: 400;
	text-decoration: none;
}

.klaro .cookie-notice .cm-btn.cm-btn-lern-more:hover,
.klaro .cookie-modal .cm-btn.cm-btn-lern-more:hover {
	background-color: #c8102e;
	color: #ffffff;
}

/* Button-Innenabstand im Einstellungen-Modal. */
.klaro .cookie-modal .cm-btn {
	padding: 0.4em 1rem;
}

/* ===== Toggle-Schalter ==================================================== */

/* Aus-Zustand: helles Grau statt (fast) Weiß. */
.klaro .cookie-modal .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider {
	background-color: #cfcfcf;
}

.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-label .slider::before {
	background-color: #ffffff;
}