/* =====================================================================
   HORANOS - COOKIE-HINWEIS UND COOKIE-EINSTELLUNGEN (Klaro)
   ---------------------------------------------------------------------
   Klaro bringt ein eigenes Stylesheet mit (css/klaro-0.7.22.min.css,
   unveraendert aus dem npm-Paket, damit es sich beim naechsten Update
   einfach ersetzen laesst). Diese Datei legt das Theme darueber: Farben,
   Schrift, Radius, Knoepfe und Schalter aus tokens.css.

   Geladen wird sie in header.tpl direkt nach dem Klaro-Stylesheet. Jede
   Regel beginnt mit #klaro - die ID hebt sie ueber alle Klaro-Regeln
   (die nur Klassen benutzen), ohne !important.

   Bewusst eingehalten:
     * "Ablehnen" und "Akzeptieren" sehen gleich aus. Eine Einwilligung
       zaehlt nur, wenn Ablehnen genauso leicht ist wie Zustimmen - ein
       grauer oder kleinerer Ablehnen-Knopf waere genau das Gegenteil.
     * Hover aendert nur Farben, nie Groesse oder Lage.

   Einstellungen und Texte: js/consent-config.js.
   ===================================================================== */

#klaro {
    font-family: var(--hz-font);
    font-size: var(--hz-fs-small);
    line-height: var(--hz-lh-body);
    color: var(--hz-text);
}

/* Klaro faerbt Text hell (fuer seinen dunklen Kasten), setzt ihn links
   und gibt jedem Absatz einen Abstand nach oben. */
#klaro :is(p, strong, h1, h2, ul, li) {
    color: inherit;
    text-align: start;
    margin: 0;
    padding: 0;
}

#klaro a {
    color: var(--hz-link);
    font-weight: var(--hz-fw-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: var(--hz-transition-color);
}

#klaro a:hover {
    color: var(--hz-link-hover);
}

/* Arabisch: das Theme laeuft (noch) links nach rechts, siehe header.tpl.
   Der Hinweis selbst ist reiner Text und liest sich nur von rechts. */
html[lang="ar"] #klaro {
    direction: rtl;
}


/* ---------------------------------------------------------------------
   1. Knoepfe
   Alle Klaro-Knoepfe gleich: Ablehnen, Akzeptieren, Auswahl speichern.
   --------------------------------------------------------------------- */
#klaro .cm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--hz-h-md);
    margin: 0;
    padding: 0 var(--hz-space-4);
    border: 1px solid var(--hz-primary);
    border-radius: var(--hz-radius);
    background: var(--hz-primary);
    color: var(--hz-on-dark);
    font-family: inherit;
    font-size: var(--hz-fs-control);
    font-weight: var(--hz-fw-semibold);
    line-height: var(--hz-lh-snug);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--hz-transition-color);
}

#klaro .cm-btn:hover {
    background: var(--hz-primary-hover);
    border-color: var(--hz-primary-hover);
}

/* Bootstrap zeichnet bei jedem :focus einen dunklen 5px-Ring. Klaro setzt
   den Fokus beim Oeffnen selbst auf "Schliessen" - der Ring stand damit
   auch bei Mausbedienung da. Bei Tastaturbedienung (:focus-visible) gilt
   der rote Fokusrahmen aus components.css (B4). */
#klaro button:focus:not(:focus-visible) {
    outline: none;
}

#klaro .cm-btn:disabled {
    opacity: .6;
    cursor: default;
}


/* ---------------------------------------------------------------------
   2. Hinweis beim ersten Besuch
   PC: Karte unten links, auch im Arabischen. Unten rechts liegen
   #syFloatingAlert bzw. die Glocke (components.css, B8) und spaeter der
   Chat-Knopf. Darunter: ueber die ganze Breite mit Rand.
   --------------------------------------------------------------------- */
#klaro .cookie-notice:not(.cookie-modal-notice) {
    /* Ueber allem, auch ueber #syFloatingAlert (99999) und dem
       Chat-Widget (2000000000). */
    z-index: 2147483000;
    top: auto;
    right: auto;
    bottom: var(--hz-space-5);
    left: var(--hz-space-5);
    width: auto;
    max-width: 440px;
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius);
    background: var(--hz-surface);
    box-shadow: var(--hz-shadow-lg);
}

#klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    padding: var(--hz-space-5);
}

#klaro .cookie-notice h2 {
    margin-bottom: var(--hz-space-2);
    color: var(--hz-navy);
    font-family: inherit;
    font-size: var(--hz-fs-h4);
    font-weight: var(--hz-fw-bold);
    line-height: var(--hz-lh-tight);
}

#klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
    margin: 0;
}

#klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p.cn-changes {
    margin-top: var(--hz-space-2);
    text-decoration: none;
    font-weight: var(--hz-fw-semibold);
}

/* Fusszeile des Hinweises: "Einstellungen" links, die beiden Knoepfe
   rechts. Klaro arbeitet hier mit negativen Raendern, die fallen weg. */
#klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hz-space-3);
    margin-top: var(--hz-space-4);
}

#klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok :is(a, div) {
    margin: 0;
}

#klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
    flex-grow: 0;
}

#klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    display: flex;
    flex: 1 0 auto;
    justify-content: flex-end;
    gap: var(--hz-space-2);
    width: auto;
    margin: 0;
}

#klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn {
    width: auto;
    margin: 0;
}

@media (max-width: 1023px) {
    #klaro .cookie-notice:not(.cookie-modal-notice) {
        right: var(--hz-space-3);
        bottom: var(--hz-space-3);
        left: var(--hz-space-3);
        max-width: none;
    }

    /* #syFloatingAlert und die Glocke liegen sonst unter dem Hinweis
       und schauen an seinen Raendern hervor. Beide kommen wieder,
       sobald eine Wahl getroffen ist. */
    body:has(#klaro .cookie-notice:not(.cookie-notice-hidden, .cookie-modal-notice)) :is(#syFloatingAlert, .sy-alert-bell) {
        display: none !important;
    }
}

@media (max-width: 575px) {
    #klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
        padding: var(--hz-space-4);
    }

    /* Beide Knoepfe gleich breit in eigener Zeile, "Einstellungen"
       darueber. */
    #klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
        flex-basis: 100%;
    }

    #klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn {
        flex: 1 1 0;
    }
}


/* ---------------------------------------------------------------------
   3. Dialog "Cookie-Einstellungen"
   Oeffnet ueber "Einstellungen" im Hinweis und ueber den Link im Footer.
   --------------------------------------------------------------------- */
#klaro .cookie-modal {
    z-index: 2147483000;
}

#klaro .cookie-modal .cm-bg {
    background: rgb(var(--hz-navy-900-rgb) / .55);
}

#klaro .cookie-modal .cm-modal.cm-klaro {
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius);
    background: var(--hz-surface);
    color: var(--hz-text);
    box-shadow: var(--hz-shadow-lg);
}

@media (max-width: 659px) {
    #klaro .cookie-modal .cm-modal.cm-klaro {
        right: var(--hz-space-3);
        left: var(--hz-space-3);
        width: auto;
    }
}

#klaro .cookie-modal .cm-modal .cm-header {
    padding: var(--hz-space-5);
    padding-inline-end: calc(var(--hz-space-5) + var(--hz-h-sm) + var(--hz-space-2));
    border-bottom: 1px solid var(--hz-line);
}

/* .title in custom.css zentriert - hier nicht. */
#klaro .cookie-modal .cm-modal .cm-header h1.title {
    padding: 0;
    color: var(--hz-navy);
    font-family: inherit;
    font-size: var(--hz-fs-h3);
    font-weight: var(--hz-fw-bold);
    line-height: var(--hz-lh-tight);
    text-align: start;
}

#klaro .cookie-modal .cm-modal .cm-header p {
    margin-top: var(--hz-space-2);
}

#klaro .cookie-modal .cm-modal .hide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: var(--hz-space-4);
    right: auto;
    inset-inline-end: var(--hz-space-4);
    width: var(--hz-h-sm);
    height: var(--hz-h-sm);
    padding: 0;
    border-radius: var(--hz-radius);
    background: transparent;
    transition: var(--hz-transition-color);
}

#klaro .cookie-modal .cm-modal .hide:hover {
    background: var(--hz-surface-2);
}

#klaro .cookie-modal .cm-modal .hide svg {
    width: 14px;
    height: 14px;
    stroke: var(--hz-muted);
}

#klaro .cookie-modal .cm-modal .cm-body {
    padding: var(--hz-space-4) var(--hz-space-5);
}

/* Eintraege mit Schalter. Klaro setzt Schalter und Einrueckung links;
   ueber die logischen Angaben stehen sie im Arabischen rechts. */
#klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service {
    min-height: 30px;
    padding-left: 0;
    padding-inline-start: 66px;
}

#klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service + li.cm-service {
    margin-top: var(--hz-space-4);
}

#klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-toggle-all {
    padding-top: var(--hz-space-4);
    border-top: 1px solid var(--hz-line);
}

#klaro .cookie-modal .cm-list-input,
#klaro .cookie-modal .cm-list-label .cm-switch {
    left: auto;
    inset-inline-start: 0;
}

#klaro .cookie-modal .cm-list-title {
    color: var(--hz-navy);
    font-size: var(--hz-fs-body);
    font-weight: var(--hz-fw-semibold);
}

#klaro .cookie-modal .cm-list-description {
    padding-top: var(--hz-space-1);
    color: var(--hz-text);
    font-size: var(--hz-fs-small);
}

#klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p.purposes,
#klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service :is(span.cm-required, span.cm-opt-out) {
    color: var(--hz-muted);
    font-size: var(--hz-fs-mini);
}

/* Schalter: aus grau, an in Markenrot */
#klaro .cookie-modal .cm-list-label .slider {
    background: var(--hz-line-strong);
    box-shadow: none;
}

#klaro .cookie-modal .cm-list-label .slider::before {
    background: var(--hz-surface);
    box-shadow: var(--hz-shadow-sm);
}

#klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
#klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider,
#klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider,
#klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider {
    background: var(--hz-primary);
}

#klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider {
    box-shadow: none;
}

#klaro .cookie-modal .cm-list-input:focus-visible + .cm-list-label .slider {
    box-shadow: var(--hz-focus-ring);
}

#klaro .cookie-modal .cm-modal .cm-footer {
    padding: var(--hz-space-4) var(--hz-space-5);
    border-top: 1px solid var(--hz-line);
}

#klaro .cookie-modal .cm-modal .cm-footer-buttons {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--hz-space-2);
}

@media (max-width: 575px) {
    #klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn {
        flex: 1 1 auto;
    }
}