/* Einwilligungsbanner, gemeinsam für Startseite, Unterseiten und Blog.
 *
 * Eigene Datei statt Regeln in style.css und home.css: das Markup in inc_cookies.php ist für
 * alle Seiten dasselbe, die Optik soll es auch sein. Vorher lagen die Regeln doppelt vor.
 *
 * Optik entspricht dem Banner aus frontend-v2 (src/components/CookieBanner.vue), mit einem
 * Unterschied: die Hintergrundfläche sitzt auf .cc-inner statt auf #cc. Der Banner nimmt
 * dadurch nur die Breite ein, die er wirklich braucht, statt als Leiste über den ganzen
 * Bildschirm zu laufen.
 *
 * Die Farben stehen als eigene Variablen auf #cc und nicht als Projekt-Token, damit die Datei
 * unabhängig davon funktioniert, welches Stylesheet die jeweilige Seite sonst lädt.
 *
 * WICHTIG: das Skript in inc_cookies.php schaltet #cc, .cc-text, .cc-categories, #cc-edit und
 * #cc-save über Inline-Styles um. Diese Regeln dürfen sich bei genau diesen Elementen nicht auf
 * einen eigenen display-Wert verlassen, sonst bricht das Aufklappen.
 */

#cc {
    --ccb-surface: #fff;
    --ccb-ground: #f5f8f8;
    --ccb-ink: #222831;
    --ccb-muted: #5b6e70;
    --ccb-line: #dce6e6;
    --ccb-accent: #3f7377;
    --ccb-accent-dark: #2c5457;

    position: fixed;
    inset: auto 0 0 0;
    z-index: 1500;
    display: none;
    padding: 0 16px 16px;
    color: var(--ccb-ink);
    font-family: inherit;
    /* Der äußere Rahmen ist nur noch Positionierung und trägt keine Fläche mehr. Ohne das
       würde sein durchsichtiger Randbereich Klicks auf die Seite dahinter abfangen. */
    pointer-events: none;
}

.cc-inner {
    pointer-events: auto;
    max-width: 940px;
    margin: 0 auto;
    padding: 18px 24px 20px;
    max-height: 70vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ccb-surface);
    border: 1px solid var(--ccb-line);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(34, 40, 49, .24);
}

.cc-inner .h4 {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--ccb-ink);
}

.cc-text { font-size: 13.5px; line-height: 1.6; color: var(--ccb-muted); }
.cc-text a { color: var(--ccb-accent); font-weight: 600; text-underline-offset: 2px; }

.cc-categories { display: none; }

.cc-category {
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--ccb-line);
    border-radius: 6px;
    background: var(--ccb-ground);
}

.cc-category:last-child { margin-bottom: 0; }

.cc-category-name { font-size: 14px; font-weight: 700; color: var(--ccb-ink); }
.cc-service-name { font-size: 13px; font-weight: 600; color: var(--ccb-ink); }

.cc-category-name label,
.cc-service-name label {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.cc-category-name input,
.cc-service-name input {
    flex: none;
    width: 17px;
    height: 17px;
    accent-color: var(--ccb-accent);
}

.cc-category-name input:disabled,
.cc-service-name input:disabled { opacity: .6; cursor: default; }

.cc-category-description { margin-top: 9px; padding-left: 26px; }
.cc-service + .cc-service { margin-top: 9px; }

.cc-service-description {
    margin: 2px 0 0 26px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ccb-muted);
}

.cc-buttons { display: flex; flex-wrap: wrap; gap: 10px; }

/* Zustimmen und Ablehnen sind absichtlich identisch. Aufsichtsbehörden verlangen zwar nirgends
   wörtlich gleiche Knöpfe, wohl aber, dass das Ablehnen genauso einfach und genauso sichtbar
   ist wie das Zustimmen (EDSA-Leitlinien 03/2022 zu manipulativem Design, Orientierungshilfe
   der DSK). Ein hervorgehobener Zustimmen-Knopf neben einer zurückgenommenen Ablehnen-Option
   ist genau das dort beanstandete Muster. "Konfigurieren" und "Auswahl speichern" dürfen
   abgesetzt sein, das sind keine Einwilligungsentscheidungen derselben Rangstufe. */
.cc-buttons button {
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid var(--ccb-line);
    border-radius: 10px;
    background: transparent;
    color: var(--ccb-ink);
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease;
}

.cc-buttons button:hover { border-color: var(--ccb-muted); background: var(--ccb-ground); }
.cc-buttons button:focus-visible { outline: 2px solid var(--ccb-accent); outline-offset: 2px; }

#cc-accept,
#cc-decline {
    border-color: var(--ccb-accent);
    background: var(--ccb-accent);
    color: #fff;
}

#cc-accept:hover,
#cc-decline:hover {
    border-color: var(--ccb-accent-dark);
    background: var(--ccb-accent-dark);
}

@media (max-width: 760px) {
    #cc { padding: 0 12px 12px; }
    .cc-inner { padding: 16px 18px 18px; max-height: 78vh; }
    .cc-buttons button { flex: 1 1 auto; }
    .cc-category-description { padding-left: 14px; }
    .cc-service-description { margin-left: 26px; }
}