/* Gemeinsame Regeln fuer alle Seiten.
 *
 * Gegenstueck zu den drei seitenspezifischen Stylesheets: home.css fuer die Startseite,
 * blog.css fuers Wissenszentrum, style.css fuer die uebrigen Unterseiten. Die drei belegen
 * dieselben Klassennamen fuer voellig andere Bausteine und schliessen sich deshalb gegenseitig
 * aus. Was auf JEDER Seite gleich aussehen muss, gehoert hierher. Wird vor dem
 * seitenspezifischen Stylesheet geladen, das kann also gezielt ueberschreiben.
 *
 * ============================================================================
 * ACHTUNG, DER DATEINAME MUSS NEUTRAL BLEIBEN. NICHT IN cookie-*.css ODER
 * consent-*.css ODER banner-*.css UMBENENNEN.
 * ============================================================================
 *
 * Grund: Die Regeln standen ab v2.2.0 in styles/cookie-banner.css. AdGuards Filterliste
 * "Cookie Notices" (Filter 18), in Safari-Blockern weit verbreitet, enthaelt die allgemeine
 * Netzregel
 *
 *     /cookie-banner$domain=~github.com|~...
 *
 * Sie blockiert JEDE Adresse, die "/cookie-banner" enthaelt, auf allen Domains ausser einer
 * kurzen Ausnahmeliste. Auf iPhones mit Inhaltsblocker kam das Einwilligungsbanner dadurch
 * voellig ungestaltet an: als Textwueste unterhalb der Fusszeile, ohne Karte, ohne feste
 * Position, Knoepfe 21 statt 44 Pixel hoch. Gemeldet und behoben am 2026-09-10.
 *
 * Geprueft wurden 56.278 Netzregeln aus easylist, easylist-cookie, Fanboy Cookiemonster,
 * AdGuard Cookie Notices und uBlock Annoyances. Auf "base.css" passt keine einzige davon, auf
 * "cookie-banner.css" genau eine. Ein beschreibender Name waere jederzeit wieder angreifbar,
 * ein neutraler ist es nicht: Filterlisten koennen keine generischen Dateinamen sperren, ohne
 * das halbe Netz mitzunehmen.
 *
 * Dasselbe gilt fuer jede kuenftige Datei, die fuer Funktion oder Rechtssicherheit noetig ist:
 * keine Adresse mit cookie, consent, gdpr, banner, ads oder tracking darin.
 */

/* ---------- Einwilligungsbanner ----------
 *
 * Markup und Steuerung: inc_cookies.php.
 *
 * Die Hintergrundflaeche sitzt auf .cc-inner und nicht auf #cc. Das Banner nimmt dadurch nur
 * die Breite ein, die es braucht, statt als Leiste ueber den ganzen Bildschirm zu laufen. #cc
 * traegt deshalb pointer-events:none, sonst finge sein durchsichtiger Randbereich Klicks auf
 * die Seite dahinter ab.
 *
 * Die Farben stehen als eigene Variablen auf #cc und nicht als Projekt-Token, damit die Optik
 * unabhaengig davon ist, welches Stylesheet die jeweilige Seite sonst laedt.
 *
 * Zustimmen und Ablehnen sehen absichtlich gleich aus. Aufsichtsbehoerden verlangen zwar
 * nirgends woertlich gleiche Knoepfe, wohl aber, dass das Ablehnen genauso einfach und genauso
 * sichtbar ist wie das Zustimmen (EDSA-Leitlinien 03/2022 zu manipulativem Design,
 * Orientierungshilfe der DSK). "Konfigurieren" und "Auswahl speichern" duerfen abgesetzt sein,
 * das sind keine Einwilligungsentscheidungen derselben Rangstufe.
 *
 * WICHTIG: das Skript in inc_cookies.php schaltet #cc, .cc-text, .cc-categories, #cc-edit und
 * #cc-save ueber Inline-Styles um. Diese Regeln duerfen 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;
    
    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; }

.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; }
}