/*
 * Einwilligungsbanner (we_cookie_consent / Klaro) in den Kundenfarben, unten rechts.
 * 13.10.2026
 *
 * Laedt NACH dem Stylesheet von we_cookie_consent (setup.typoscript, ganz unten).
 * Dessen Regeln beginnen mit "#klaro" und setzen Knoepfe, Fussleiste und Fenster
 * absolut, mit festen Hoehen und Breiten. Jeder Selektor hier beginnt deshalb mit
 * "#klaro#klaro" (zwei IDs schlagen eine, ohne !important), und die Positionierungen
 * der Extension werden ausdruecklich zurueckgesetzt (position, height, max-width, order).
 *
 * VORGABE, KEIN GESCHMACK: Alle Knoepfe - im Hinweis "Ablehnen", "Einstellungen
 * bearbeiten", "Alle zulassen", im Fenster "Ablehnen", "Einstellungen speichern",
 * "Alle akzeptieren" - sehen GLEICH aus: gleiche Groesse, Farbe, Schrift, Kontrast.
 * Ein hervorgehobener Zustimmen-Knopf ist ein Dark Pattern und macht die Einwilligung
 * angreifbar. Nicht beim Feinschliff "schoener" machen.
 */

#klaro#klaro {
    --kb-black: #1a171b;   /* Logo-Schwarz (Favicon) */
    --kb-yellow: #ffed00;  /* Logo-Gelb, auf der Seite die Hausfarbe */
    --kb-white: #ffffff;
    --kb-grey: #bdbdbd;
    --kb-line: #4a464b;
}

/* ================= Lage: schwebender Kasten unten rechts ================= */

#klaro#klaro .klaro .cookie-notice:not(.cookie-modal-notice),
#klaro#klaro .klaro .cookie-modal .cm-modal.cm-klaro {
    position: fixed;
    top: auto;
    left: auto;
    right: 20px;
    bottom: 20px;
    width: 420px;
    max-width: calc(100vw - 32px);
    height: auto;
    max-height: calc(100vh - 40px);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    transform: none;
    border-radius: 6px;
    border-top: 4px solid var(--kb-yellow);
    background: var(--kb-black);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    z-index: 1000;
}

#klaro#klaro .klaro .cookie-modal .cm-modal.cm-klaro {
    width: 480px;
}

@media (max-width: 575px) {
    #klaro#klaro .klaro .cookie-notice:not(.cookie-modal-notice),
    #klaro#klaro .klaro .cookie-modal .cm-modal.cm-klaro {
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 32px);
    }
}

/* ================= Flaechen und Text ================= */

#klaro#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 22px 22px 24px;
    overflow: visible;
    background: transparent;
}

#klaro#klaro .klaro .cookie-modal .cm-modal .cm-header,
#klaro#klaro .klaro .cookie-modal .cm-modal .cm-body,
#klaro#klaro .klaro .cookie-modal .cm-modal .cm-footer {
    background: var(--kb-black);
    border-color: var(--kb-line);
}

#klaro#klaro .klaro .cookie-modal .cm-modal .cm-header {
    padding: 22px 22px 8px;
}
#klaro#klaro .klaro .cookie-modal .cm-modal .cm-body {
    padding: 0 22px;
}

#klaro#klaro .klaro .cookie-notice p,
#klaro#klaro .klaro .cookie-modal p,
#klaro#klaro .klaro .cookie-modal h1,
#klaro#klaro .klaro .cookie-modal li,
#klaro#klaro .klaro .cookie-modal span,
#klaro#klaro .klaro .cookie-modal label,
#klaro#klaro .klaro .cookie-modal .cm-list-title {
    color: var(--kb-white);
}

#klaro#klaro .klaro .cookie-modal h1 {
    font-size: 22px;
    line-height: 1.25;
    margin: 0 0 10px;
}

#klaro#klaro .klaro .cookie-notice p,
#klaro#klaro .klaro .cookie-modal p {
    font-size: 14px;
    line-height: 1.55;
}
#klaro#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
    margin: 0 0 16px !important; /* die Extension setzt hier selbst !important */
}

/* Links im Text (Datenschutzerklaerung, "1 service") */
#klaro#klaro .klaro .cookie-notice p a,
#klaro#klaro .klaro .cookie-modal .cm-header a,
#klaro#klaro .klaro .cookie-modal .cm-body a {
    color: var(--kb-yellow);
}

/* Trennlinien in der Liste */
#klaro#klaro .klaro .cookie-modal .cm-purpose,
#klaro#klaro .klaro .cookie-modal .cm-modal.cm-klaro .cm-body ul.cm-purposes li.cm-purpose.cm-toggle-all {
    border-top-color: var(--kb-line);
}

/* Schliessen-Kreuz im Fenster */
#klaro#klaro .klaro .cookie-modal .cm-header button.hide svg {
    stroke: var(--kb-white);
}

/* ================= Knoepfe: Anordnung ================= */

/* Hinweis: untereinander, volle Breite. "Einstellungen bearbeiten" ist ein Link,
   der hier genauso aussieht wie die zwei Knoepfe. Reihenfolge wie bisher:
   Ablehnen, Einstellungen bearbeiten, Alle zulassen. */
#klaro#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
    margin: 0;
    padding: 0;
    width: 100%;
}
#klaro#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cn-buttons {
    display: contents;
}
#klaro#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cm-btn-danger { order: 1; }
#klaro#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cm-link       { order: 2; }
#klaro#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cm-btn-success { order: 3; }

/* Fenster: Fussleiste im Fluss statt am Bildschirmrand festgeklebt, Knoepfe untereinander */
#klaro#klaro .klaro .cookie-modal .cm-modal.cm-klaro .cm-footer {
    position: static;
    height: auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 16px 22px 22px;
}
#klaro#klaro .klaro .cookie-modal .cm-modal.cm-klaro .cm-footer > .cm-footer-buttons {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
    width: 100%;
    max-width: none;
    margin: 0;
}
#klaro#klaro .klaro .cookie-modal .cm-modal.cm-klaro .cm-footer .cm-btn-decline    { order: 1; }
#klaro#klaro .klaro .cookie-modal .cm-modal.cm-klaro .cm-footer .cm-btn-accept     { order: 2; }
#klaro#klaro .klaro .cookie-modal .cm-modal.cm-klaro .cm-footer .cm-btn-accept-all { order: 3; }

/* "Bereitgestellt von websedit" ausgeblendet (Andreas, 13.10.2026). Die Extension
   reicht Klaros disablePoweredBy nicht durch, und ein leeres poweredBy erzeugt nur
   "[missing translation]" - deshalb hier. */
#klaro#klaro .klaro .cookie-modal .cm-modal.cm-klaro .cm-footer .cm-powered-by {
    display: none;
}

/* ================= Knoepfe: alle gleich (siehe Kopf) ================= */

#klaro#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cm-btn,
#klaro#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cm-link,
#klaro#klaro .klaro .cookie-modal .cm-modal.cm-klaro .cm-footer .cm-btn {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 48px;
    margin: 0;
    padding: 10px 16px;
    border: 2px solid var(--kb-yellow);
    border-radius: 4px;
    background: var(--kb-yellow);
    color: var(--kb-black);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    opacity: 1;
    box-shadow: none;
    cursor: pointer;
}

#klaro#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cm-btn:hover,
#klaro#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cm-link:hover,
#klaro#klaro .klaro .cookie-modal .cm-modal.cm-klaro .cm-footer .cm-btn:hover {
    background: var(--kb-white);
    border-color: var(--kb-white);
    color: var(--kb-black);
    opacity: 1;
}

#klaro#klaro .klaro .cookie-notice .cm-btn:focus-visible,
#klaro#klaro .klaro .cookie-notice .cm-link:focus-visible,
#klaro#klaro .klaro .cookie-notice a:focus-visible,
#klaro#klaro .klaro .cookie-modal .cm-btn:focus-visible,
#klaro#klaro .klaro .cookie-modal a:focus-visible,
#klaro#klaro .klaro .cookie-modal button:focus-visible {
    outline: 3px solid var(--kb-white);
    outline-offset: 3px;
}

/* Symbole der Extension: im Fluss neben dem Text statt absolut darueber, in Schwarz.
   Fuer "Einstellungen speichern" hat die Extension keines - damit die drei Knoepfe im
   Fenster trotzdem gleich aussehen, bekommt keiner dort eines. */
#klaro#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cm-btn::before,
#klaro#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cm-link::before {
    position: static;
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    line-height: 0;
    filter: brightness(0);
}
#klaro#klaro .klaro .cookie-modal .cm-modal.cm-klaro .cm-footer .cm-btn::before {
    content: none;
}

/* ================= Schalter je Dienst ================= */
/* Aus: dunkle Schiene mit hellem Rand, weisser Punkt (sonst grau auf grau). An: Gelb. */
#klaro#klaro .klaro .cookie-modal .cm-list-input + .cm-list-label .slider {
    background-color: var(--kb-black);
    box-shadow: inset 0 0 0 2px var(--kb-grey);
}
#klaro#klaro .klaro .cookie-modal .cm-list-input + .cm-list-label .slider::before {
    background-color: var(--kb-white);
}
/* Nur "an" ist gelb. "half-checked" (Gruppe teilweise an) bleibt dunkel - sonst sieht
   ein Schalter nach Zustimmung aus, obwohl noch nichts erlaubt ist. */
#klaro#klaro .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
    background-color: var(--kb-yellow);
    box-shadow: none;
}
#klaro#klaro .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before {
    background-color: var(--kb-black);
}
/* Die Extension legt ein graues Kreuz bzw. Haekchen auf die Schiene */
#klaro#klaro .klaro .cookie-modal .cm-list-input + .cm-list-label > .cm-list-title + .cm-switch::before {
    filter: invert(1);
}

/* ================= Der "nach oben"-Pfeil ================= */
/* Er sitzt ebenfalls unten rechts. Solange der Hinweis offen ist, weicht er. */
body:has(#klaro .cookie-notice:not(.cookie-modal-notice)) .scroll-top {
    display: none;
}