/*
 * Cookie-Banner (Klaro) im Stil der Seite. Seit 29.10.2026 lokal, vorher von
 * files.mackstage.de.
 *
 * VORGABE, KEIN GESCHMACK - beim Feinschliff nicht "schoener" machen:
 * Alle Wege sind gleichwertig. "Einstellungen waehlen", "Ablehnen" und
 * "Zustimmen" im Hinweis, "Ablehnen", "Auswahl uebernehmen" und "Alle
 * akzeptieren" im Fenster: gleiche Groesse, gleiche Farbe, gleiche Schrift,
 * gleicher Rahmen. Ein hervorgehobener Zustimmen-Knopf ist ein Dark Pattern und
 * macht die Einwilligung angreifbar.
 *
 * klaro.js haengt sein eigenes CSS zur Laufzeit HINTER alle Stylesheets. Deshalb
 * steht vor jedem Selektor "html body" (hebt die Spezifitaet ohne !important),
 * bei den Knoepfen im Fenster zusaetzlich .cm-btn[class], weil Klaros
 * .cm-btn-success/.cm-btn-info dort sonst gewinnen.
 */

html body .klaro {
    --bacz-gruen: #77a848;
    --bacz-gruen-dunkel: #5e8a35;
    --bacz-blau: #182333;
    --bacz-grau: #8d9297;
    --bacz-hell: #f8f9fa;
    /* Klaros eigene Gruentoene (Schalter "an", "nur Pflicht", "teilweise"):
     * alle auf das Hausgruen. Klaro faerbt damit z. B. .only-required, das
     * keine eigene Regel hier trifft (gemessen: sonst Tuerkis #24cc9a). */
    --green1: #77a848;
    --green2: #77a848;
    --green3: #5e8a35;
    font-family: "Roboto", sans-serif;
}

/* Ueber allem: Die Navigation der Seite steht auf z-index 9999999 (layout.css),
 * Klaro bringt nur 999/1000 mit. Am Handy lag sonst das Band "Ab Mitte
 * Februar ..." ueber dem Fenster. */
html body .klaro .cookie-notice:not(.cookie-modal-notice),
html body .klaro .cookie-modal {
    z-index: 10000000;
}

/* ---------------------------------------------------------------------------
 * Hinweis unten rechts
 * ------------------------------------------------------------------------- */

html body .klaro .cookie-notice:not(.cookie-modal-notice) {
    background: #fff;
    color: var(--bacz-blau);
    border-radius: 6px;
    border-top: 4px solid var(--bacz-gruen);
    box-shadow: 0 10px 40px rgba(24, 35, 51, 0.25);
    /* Breit genug, dass "Einstellungen waehlen" in einen der drei gleich
     * breiten Knoepfe passt (gemessen: 175 px Inhalt bei 15 px Roboto). */
    max-width: 600px;
    right: 20px;
    bottom: 20px;
}

html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    padding: 22px 24px 20px;
}

html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
    color: var(--bacz-blau);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 18px;
}

html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p a {
    color: var(--bacz-gruen-dunkel);
}

/* Drei Knoepfe nebeneinander, gleich breit. Klaro setzt "Einstellungen waehlen"
 * als Link in einen eigenen Block, die beiden anderen in .cn-buttons - beides
 * wird hier zu einer Zeile. */
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: stretch;
    justify-content: stretch;
}

/* display: contents macht alle drei Knoepfe zu Geschwistern in einer Zeile.
 * Mit einem eigenen Flex-Kasten fuer zwei davon (Verhaeltnis 1:2) wurde der
 * einzelne Knopf breiter, weil Innenabstand und Rand nur einmal zaehlten
 * (gemessen: 202 gegen 165 px). */
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok .cn-buttons {
    display: contents;
}

html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok .cn-learn-more,
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok .cn-buttons .cm-btn {
    flex: 1 1 0;
    /* Ohne min-width: 0 bleibt der Knopf mit dem laengsten Text breiter. */
    min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Ein Knopf-Aussehen fuer alle - Hinweis und Fenster
 * ------------------------------------------------------------------------- */

html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more,
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn,
html body .klaro .cookie-modal .cm-btn[class] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 10px 14px;
    background: var(--bacz-blau);
    color: #fff;
    border: 2px solid var(--bacz-blau);
    border-radius: 4px;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more:hover,
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn:hover,
html body .klaro .cookie-modal .cm-btn[class]:hover,
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more:focus-visible,
html body .klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn:focus-visible,
html body .klaro .cookie-modal .cm-btn[class]:focus-visible {
    background: var(--bacz-gruen-dunkel);
    border-color: var(--bacz-gruen-dunkel);
    color: #fff;
}

html body .klaro .cm-btn:focus-visible,
html body .klaro .cn-learn-more:focus-visible {
    outline: 3px solid var(--bacz-gruen);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Fenster "Einstellungen waehlen"
 * ------------------------------------------------------------------------- */

html body .klaro .cookie-modal .cm-modal.cm-klaro {
    background: #fff;
    color: var(--bacz-blau);
    border-radius: 6px;
    border-top: 4px solid var(--bacz-gruen);
    box-shadow: 0 10px 40px rgba(24, 35, 51, 0.3);
    font-family: "Roboto", sans-serif;
}

html body .klaro .cookie-modal .cm-header,
html body .klaro .cookie-modal .cm-body,
html body .klaro .cookie-modal .cm-footer {
    border-color: #e3e5e8;
}

html body .klaro .cookie-modal .cm-header h1.title {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: var(--bacz-blau);
}

html body .klaro .cookie-modal .cm-header p,
html body .klaro .cookie-modal .cm-body p,
html body .klaro .cookie-modal .cm-list-description,
html body .klaro .cookie-modal .cm-purpose .cm-list-title,
html body .klaro .cookie-modal .cm-service .cm-list-title,
html body .klaro .cookie-modal .cm-services .cm-caret a,
html body .klaro .cookie-modal .cm-required,
html body .klaro .cookie-modal .purposes {
    color: var(--bacz-blau);
}

html body .klaro .cookie-modal .cm-required,
html body .klaro .cookie-modal .purposes,
html body .klaro .cookie-modal .cm-list-description {
    color: #4a5260;
}

html body .klaro .cookie-modal a {
    color: var(--bacz-gruen-dunkel);
}

html body .klaro .cookie-modal .cm-header .hide svg {
    stroke: var(--bacz-blau);
}

/* Schalter: aus = Schiene mittelgrau mit Rand, Punkt weiss (nicht grau auf grau);
 * an = Hausgruen. Pflichtdienst (Cookie-Verwaltung) bleibt gedeckt. */
html body .klaro .cookie-modal .cm-list-input + .cm-list-label .slider {
    background-color: #b7bcc2;
    box-shadow: inset 0 0 0 1px #9aa0a7;
}

html body .klaro .cookie-modal .cm-list-input + .cm-list-label .slider::before {
    background-color: #fff;
}

html body .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
    background-color: var(--bacz-gruen);
    box-shadow: none;
}

html body .klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider {
    background-color: var(--bacz-gruen-dunkel);
    opacity: 0.6;
}

html body .klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider {
    background-color: var(--bacz-gruen);
    opacity: 0.6;
}

/* Knopfleiste im Fenster: drei gleich breite Knoepfe. ".cm-modal" muss im
 * Selektor stehen, sonst gewinnt Klaros .cookie-modal .cm-modal .cm-footer-buttons
 * (flex-flow: row) - am Handy standen die Knoepfe sonst nebeneinander und
 * ragten aus dem Bild. */
html body .klaro .cookie-modal .cm-modal .cm-footer-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}

html body .klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn[class] {
    flex: 1 1 0;
}

/* ---------------------------------------------------------------------------
 * Handy: unten ueber die volle Breite, Knoepfe untereinander
 * ------------------------------------------------------------------------- */

@media (max-width: 599px) {
    html body .klaro .cookie-notice:not(.cookie-modal-notice) {
        max-width: none;
        width: 100%;
        right: 0;
        bottom: 0;
        border-radius: 6px 6px 0 0;
    }

    html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
        padding: 18px 16px 16px;
    }

    html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok,
    html body .klaro .cookie-modal .cm-modal .cm-footer-buttons {
        flex-direction: column;
    }

    html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok .cn-learn-more,
    html body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok .cn-buttons .cm-btn,
    html body .klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn[class] {
        flex: 0 0 auto;
        width: 100%;
    }
}