/*
 * Klaro (Cookie-Banner) in den Farben von Siedl & Willareth (16.10.2026),
 * nach dem Vorbild von ghtransporte.de (klaro-ghtransporte.css, 14.10.2026).
 *
 * Wird nach klaro.min.css, klaro-custom.css und siedl-willareth.de.css geladen
 * (main.setup.ts) und setzt nur die Farben der Seite:
 *   Blau        #0073ae  (Knoepfe, Links)   Hover #005a88
 *   Blau hell   #e4f7ff  (Flaechen wie auf der Seite)
 *   Schrift     #333 auf Weiss, Nebentext #555
 *
 * Kontrast nach WCAG: weiss auf #0073ae 5,2 : 1, weiss auf #005a88 7,5 : 1,
 * #0073ae auf weiss 5,2 : 1, #333 auf weiss 12,6 : 1. Das helle Knopf-Blau der
 * Seite (#37c0fb) waere mit weisser Schrift zu schwach (2,2 : 1).
 *
 * Keine Einstellung wird bevorzugt (Andreas, 07.10.2026): Im Hinweis sehen
 * "Ablehnen", "Zustimmen" und "Einstellungen waehlen" gleich aus, im Fenster
 * "Ablehnen", "Auswahl uebernehmen" und "Alle akzeptieren". Ein schwaecherer
 * Ablehnen-Weg macht eine Einwilligung angreifbar - beim Feinschliff nicht
 * "schoener" machen.
 *
 * Die Selektoren beginnen mit "html body": klaro.js haengt eigene Regeln zur
 * Laufzeit hinter dieses Stylesheet, bei gleicher Spezifitaet gewinnen sonst die.
 */
html body .klaro {
    --border-radius: 5px;
    --font-family: 'Source Sans Pro', sans-serif;
    --title-font-family: 'Source Sans Pro', sans-serif;
    /* Hinweis unten rechts (theme bottom/right in config-siedl-willareth.de.js): breit genug,
       dass die drei gleichen Knoepfe nebeneinander passen */
    --notice-max-width: 480px;
}

/* Hinweis und Fenster: weiss, dunkle Schrift, blaue Linie oben */
html body .klaro .cookie-notice:not(.cookie-modal-notice),
html body .klaro .cookie-modal .cm-modal.cm-klaro {
    background-color: #fff;
    color: #333;
    border-top: 4px solid #0073ae;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p,
html body .klaro .cookie-modal .cm-modal.cm-klaro,
html body .klaro .cookie-modal .cm-modal .cm-header h1,
html body .klaro .cookie-modal .cm-list-title,
html body .klaro .cookie-modal p {
    color: #333;
}
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
    font-size: 1em;
    line-height: 1.5;
}
html body .klaro .cookie-modal .cm-list-description,
html body .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
    color: #555;
}
html body .klaro .cookie-modal .cm-modal .cm-header,
html body .klaro .cookie-modal .cm-modal .cm-footer {
    border-color: #ddd;
}
html body .klaro .cookie-modal .cm-modal .hide svg {
    stroke: #333;
}

/* Alle Wege gleich: blaue Flaeche, weisse Schrift. Die Selektoren sind so lang,
   weil Klaro jede Knopfart einzeln faerbt (gruen, grau, blau). */
html body .klaro .cookie-notice .cm-btn.cm-btn-success,
html body .klaro .cookie-notice .cm-btn.cm-btn-danger,
html body .klaro .cookie-notice .cm-link.cn-learn-more,
html body .klaro .cookie-modal .cm-btn.cm-btn-accept-all,
html body .klaro .cookie-modal .cm-btn.cm-btn-accept,
html body .klaro .cookie-modal .cm-btn.cm-btn-decline,
html body .klaro .cookie-modal .cm-btn.cm-btn-success,
html body .klaro .cookie-modal .cm-btn.cm-btn-info,
html body .klaro .cookie-modal .cm-btn.cm-btn-danger {
    background-color: #0073ae;
    color: #fff;
    border: 0;
    border-radius: 5px;
    box-shadow: none;
    font-weight: 600;
    font-size: 1em;
    /* Der Link "Einstellungen waehlen" bekommt die Form der Knoepfe */
    display: inline-block;
    padding: 0.6em 1.1em;
    text-decoration: none;
    line-height: 1.2;
}
html body .klaro .cookie-notice .cm-btn.cm-btn-success:hover,
html body .klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
html body .klaro .cookie-notice .cm-link.cn-learn-more:hover,
html body .klaro .cookie-modal .cm-btn.cm-btn-accept-all:hover,
html body .klaro .cookie-modal .cm-btn.cm-btn-accept:hover,
html body .klaro .cookie-modal .cm-btn.cm-btn-decline:hover,
html body .klaro .cookie-modal .cm-btn.cm-btn-success:hover,
html body .klaro .cookie-modal .cm-btn.cm-btn-info:hover,
html body .klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
html body .klaro .cookie-notice .cm-btn.cm-btn-success:focus,
html body .klaro .cookie-notice .cm-btn.cm-btn-danger:focus,
html body .klaro .cookie-notice .cm-link.cn-learn-more:focus,
html body .klaro .cookie-modal .cm-btn.cm-btn-accept-all:focus,
html body .klaro .cookie-modal .cm-btn.cm-btn-accept:focus,
html body .klaro .cookie-modal .cm-btn.cm-btn-decline:focus,
html body .klaro .cookie-modal .cm-btn.cm-btn-success:focus,
html body .klaro .cookie-modal .cm-btn.cm-btn-info:focus,
html body .klaro .cookie-modal .cm-btn.cm-btn-danger:focus {
    background-color: #005a88;
    color: #fff;
}

/* Tastatur: sichtbarer Fokus */
html body .klaro .cm-btn:focus-visible,
html body .klaro a:focus-visible,
html body .klaro .cm-list-input:focus-visible + .cm-list-label .slider {
    outline: 3px solid #333;
    outline-offset: 2px;
}

/* Klaro laesst "Einstellungen waehlen" den freien Platz fuellen (flex-grow: 1) -
   das waere ein breiterer Knopf als die anderen. Freier Platz kommt davor. */
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
    flex-grow: 0;
    margin-right: auto;
}
@media (max-width: 600px) {
    html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
        flex-direction: column;
        align-items: stretch;
    }
    html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cn-buttons {
        display: flex;
        flex-direction: column;
        margin: 0;
        width: 100%;
    }
    html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cm-btn,
    html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cn-learn-more {
        width: 100%;
        margin: 0.5em 0 0 0;
        text-align: center;
    }
}

/* Links im Text */
html body .klaro .cookie-modal a,
html body .klaro .cookie-notice a:not(.cn-learn-more),
html body .klaro .cookie-modal .cm-caret a {
    color: #0073ae;
}

/* Schalter im Fenster */
html body .klaro .cookie-modal .cm-list-label .slider {
    background-color: #c4c4c4;  /* aus: auf Weiss sonst kaum zu sehen */
}
html body .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
    background-color: #0073ae;
}
/* Immer an (benoetigt, nicht umschaltbar): grau statt blau */
html body .klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
html body .klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider,
html body .klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider {
    background-color: #777;
}

/* Platzhalter an Stelle eines Dienstes ohne Zustimmung (z. B. bng-Newsroom) */
.klaro-platzhalter {
    background-color: #e4f7ff;
    border-left: 4px solid #0073ae;
    padding: 1.5em;
    margin: 1em 0 2em 0;
}
.klaro-platzhalter[hidden] {
    display: none;
}