/*
 * Klaro (Cookie-Banner und Google-Maps-Hinweis) in den Farben von GH Transporte (14.10.2026).
 *
 * Wird nach klaro.min.css, klaro-custom.css und ghtransporte.de.css geladen
 * (main.setup.ts) und setzt nur die Farben der Seite:
 *   Rot      #ad181b  (Absenden-Knopf, Links)   Hover #801012
 *   Grau     #f2f2f2 Flaeche, #555 Nebentext
 *   Schwarz  #222 Schrift
 *
 * Kontrast nach WCAG: weiss auf #ad181b 7,2 : 1, #ad181b auf weiss 7,2 : 1,
 * #222 auf #f2f2f2 14 : 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: 3px;
    --font-family: 'Source Sans Pro', sans-serif;
    --title-font-family: 'Source Sans Pro', sans-serif;
    --notice-max-width: 500px;
}

/* Hinweis und Fenster: weiss, schwarze Schrift, rote Linie oben */
html body .klaro .cookie-notice:not(.cookie-modal-notice),
html body .klaro .cookie-modal .cm-modal.cm-klaro {
    background-color: #fff;
    color: #222;
    border-top: 4px solid #ad181b;
    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: #222;
}
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: #222;
}

/* Alle Wege gleich: rote 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,
html body .klaro .context-notice .cm-btn.cm-btn-success,
html body .klaro .context-notice .cm-btn.cm-btn-success-var {
    background-color: #ad181b;
    color: #fff;
    border: 0;
    border-radius: 3px;
    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;
}
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 .context-notice .cm-btn.cm-btn-success:hover,
html body .klaro .context-notice .cm-btn.cm-btn-success-var: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,
html body .klaro .context-notice .cm-btn.cm-btn-success:focus,
html body .klaro .context-notice .cm-btn.cm-btn-success-var:focus {
    background-color: #801012;
    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 #222;
    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: #ad181b;
}

/* 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: #ad181b;
}
/* Immer an (benoetigt, nicht umschaltbar): grau statt rot */
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;
}

/* Google-Maps-Hinweis an Stelle der Karte: graue Flaeche, schwarze Schrift.
   "Ja" und "Immer" sind beides Zustimmungen und sehen gleich aus. */
html body .klaro.cm-as-context-notice {
    background-color: #f2f2f2;
    border: 0;
    border-left: 4px solid #ad181b;
    border-radius: 0;
}
html body .klaro .context-notice {
    background-color: #f2f2f2;
    border: 0;
    color: #222;
}
html body .klaro .context-notice p {
    color: #222;
    font-size: 16px;
}
html body .klaro .context-notice .cm-buttons .cm-btn.cm-btn-success,
html body .klaro .context-notice .cm-buttons .cm-btn.cm-btn-success-var {
    margin: 0 0.3em;
}