/* Consent-Fenster (Klaro) in CI (Patrick 14.9.2026): Frage „Dürfen wir?" als Fenster in der
   Mitte, Seite dahinter abgedunkelt und weichgezeichnet, zwei gleich große Knöpfe „Nein"
   (creme, links) und „Ja, gerne" (rot, rechts), darunter „Einstellungen" als Textlink.
   Die Bibliothek bringt ihr Layout in klaro-0.7.21.min.css mit; hier Variablen und
   die Abweichungen. Mobile-first. */
.klaro {
    --font-family: var(--font-ui);
    --title-font-family: var(--font-display);
    --font-size: 15px;
    --border-radius: 16px;
    --border-width: 0;
    --box-shadow-color: rgba(25, 18, 12, 0.35);
    --light1: var(--tinte);
    --light2: var(--sattel);
    --light3: var(--stein);
    --dark1: var(--papier);
    --dark2: var(--weiss-warm);
    --dark3: var(--creme);
    --white2: var(--creme);
    --white3: var(--linie);
    --green1: var(--rot);
    --green2: var(--rot-tief);
    --green3: var(--rot-tief);
    --blue1: var(--rot);
    --blue2: var(--rot-tief);
    --button-text-color: var(--weiss-warm);
}
/* Abdunkelung + Weichzeichner hinter Hinweis und Einstellungen */
.klaro .cookie-modal .cm-bg { background: rgba(25, 18, 12, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Hinweis als Fenster: zentrierter Text, Knöpfe gleich groß nebeneinander, Link darunter.
   Unter 400px setzt Klaro das Fenster an den linken Rand — deshalb dort links wie rechts 16px. */
.klaro .cookie-notice.cookie-modal-notice { max-width: 560px; width: calc(100% - 32px); padding: 8px 4px; text-align: center; box-shadow: 0 12px 40px var(--box-shadow-color); }
@media (max-width: 400px) {
    .klaro .cookie-notice.cookie-modal-notice { left: 16px; right: 16px; width: auto; }
}
.klaro .cookie-notice .cn-body { padding: 24px 20px 20px; }
.klaro .cookie-notice .cn-body h2 { font-size: 24px; margin-bottom: 10px; }
.klaro .cookie-notice .cn-body p { font-size: 16px; line-height: 1.6; color: var(--text-standard); margin: 0; }
.klaro .cookie-notice .cn-body p.cn-changes { color: var(--text-neben); }
.klaro .cookie-notice .cn-ok { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 22px; }
.klaro .cookie-notice .cn-buttons { display: flex; gap: 12px; width: 100%; justify-content: center; }
.klaro .cookie-notice .cn-buttons .cm-btn { flex: 1 1 0; max-width: 200px; margin: 0; }
/* Knöpfe beider Ebenen als Pillen. Der Selektor muss Klaros „.klaro .cookie-notice .cm-btn"
   schlagen — „.klaro .cm-btn" allein verliert, dann bleiben Klaros 6px Polster und 16px Radius. */
.klaro .cookie-modal .cm-btn, .klaro .cookie-notice .cm-btn { border-radius: 999px; font-weight: 700; font-size: 16px; padding: 13px 22px; margin: 0; }
.klaro .cookie-modal .cm-btn.cm-btn-danger, .klaro .cookie-notice .cn-decline { background: var(--creme); color: var(--tinte); }
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover, .klaro .cookie-notice .cn-decline:hover { background: var(--linie); }
.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-notice .cn-ok .cm-btn.cm-btn-info { background: none; box-shadow: none; padding: 0; color: var(--rot); font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.klaro .cookie-notice .cn-ok .cm-btn.cm-btn-info:hover { color: var(--rot-tief); background: none; }
.klaro .cookie-modal a, .klaro .cookie-notice a { color: var(--rot); }

/* Einstellungsfenster „Eure Einstellungen": Klaro färbt „(erforderlich)" mit --dark2 und die
   Beschreibungen mit --dark3 — auf Papier unsichtbar. Im Körper beide auf Nebentext drehen. */
.klaro .cookie-modal .cm-modal .cm-body { --dark2: var(--sattel); --dark3: var(--sattel); padding: 8px 20px 16px; }
.klaro .cookie-modal .cm-modal .cm-header { padding: 24px 20px 12px; }
.klaro .cookie-modal .cm-modal .cm-header h1 { font-size: 26px; color: var(--tinte); }
.klaro .cookie-modal .cm-modal .cm-header p { color: var(--text-standard); line-height: 1.6; }
.klaro .cookie-modal .cm-list-title { color: var(--tinte); font-size: 15px; }
.klaro .cookie-modal .cm-list-description { font-size: 14px; line-height: 1.5; }
/* Fußzeile mobil: „Auswahl speichern" als Umriss volle Breite, darunter „Alle ablehnen" | „Alle erlauben" —
   drei Pillen brauchen 398px, bei 390px sind 360 frei. */
.klaro .cookie-modal .cm-modal .cm-footer { padding: 12px 20px 20px; }
.klaro .cookie-modal .cm-modal .cm-footer-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.klaro .cookie-modal .cm-footer-buttons .cm-btn-accept { order: -1; flex: 1 1 100%; background: none; box-shadow: inset 0 0 0 2px var(--rot); color: var(--rot); }
.klaro .cookie-modal .cm-footer-buttons .cm-btn-accept:hover { background: var(--creme); }
/* Nach einer Entscheidung zeigt Klaro nur noch „Speichern" — allein steht er rot, nicht als Umriss. */
.klaro .cookie-modal .cm-footer-buttons .cm-btn-accept:only-child { background: var(--rot); color: var(--weiss-warm); box-shadow: none; }
.klaro .cookie-modal .cm-footer-buttons .cm-btn-accept:only-child:hover { background: var(--rot-tief); }
.klaro .cookie-modal .cm-footer-buttons .cn-decline,
.klaro .cookie-modal .cm-footer-buttons .cm-btn-accept-all { flex: 1 1 0; }
@media (min-width: 760px) {
    .klaro .cookie-notice .cn-body { padding: 32px 36px 28px; }
    .klaro .cookie-modal .cm-modal .cm-header { padding: 32px 36px 12px; }
    .klaro .cookie-modal .cm-modal .cm-body { padding: 8px 36px 16px; }
    .klaro .cookie-modal .cm-modal .cm-footer { padding: 12px 36px 28px; }
    .klaro .cookie-modal .cm-modal .cm-footer-buttons { flex-wrap: nowrap; justify-content: space-between; }
    .klaro .cookie-modal .cm-footer-buttons .cm-btn-accept { order: 0; flex: 0 0 auto; }
    .klaro .cookie-modal .cm-footer-buttons .cn-decline,
    .klaro .cookie-modal .cm-footer-buttons .cm-btn-accept-all { flex: 0 0 auto; min-width: 140px; }
}