/*
 * Cookie-Consent — Stylesheet der Foundation.
 *
 * Theming ausschliesslich über CSS-Custom-Properties. Alle Variablen
 * tragen den Präfix `--wb-consent-`. Farbwerte stehen NUR in den beiden
 * Schema-Blöcken ganz oben; im restlichen Stylesheet gibt es keinen
 * einzigen harten Farbwert und keine !important-Regel.
 *
 * Überschreiben im Projekt-Stylesheet (ohne Markup-Änderung):
 *
 *   .wb-consent {
 *     --wb-consent-accent: #e60000;
 *     --wb-consent-radius: 0;
 *   }
 *
 * Damit das auch wirklich greift, stehen die mitgelieferten Schemata in
 * `:where()` — Spezifität 0. Ohne das gewönne der Schema-Block gegen die
 * Projekt-Regel und die Theming-Schnittstelle liefe ins Leere.
 *
 * Typografie wird bewusst NICHT konfiguriert, sondern vom Theme geerbt
 * (font-family: inherit), damit das Banner ohne Zutun zur Site passt.
 *
 * Gleichwertigkeit: `.wb-consent__action` ist die EINZIGE Regel für die
 * beiden Entscheidungs-Buttons. Es gibt hier bewusst keine Regel, die
 * `[data-consent-decision]` anspricht — sonst liessen sich Akzeptieren und
 * Ablehnen unterschiedlich gestalten, was rechtlich nicht zulässig ist.
 */

:where(.wb-consent[data-scheme='light'],
.wb-consent-placeholder[data-scheme='light'],
.wb-consent-trigger[data-scheme='light']) {
    --wb-consent-bg: #ffffff;
    --wb-consent-fg: #1b1f24;
    --wb-consent-accent: #14509b;
    --wb-consent-accent-fg: #ffffff;
    --wb-consent-link: #14509b;
    --wb-consent-focus: #0b57d0;
    --wb-consent-border: #e2e6eb;
    --wb-consent-muted: #f1f3f5;
    --wb-consent-muted-fg: #1b1f24;
    --wb-consent-shadow: rgba(15, 23, 32, 0.28);
    --wb-consent-overlay: rgba(0, 0, 0, 0.55);
}

:where(.wb-consent[data-scheme='dark'],
.wb-consent-placeholder[data-scheme='dark'],
.wb-consent-trigger[data-scheme='dark']) {
    --wb-consent-bg: #14181e;
    --wb-consent-fg: #f1f4f8;
    --wb-consent-accent: #9cc4ff;
    --wb-consent-accent-fg: #0c1420;
    --wb-consent-link: #9cc4ff;
    --wb-consent-focus: #9cc4ff;
    --wb-consent-border: #39414d;
    --wb-consent-muted: #262c35;
    --wb-consent-muted-fg: #f1f4f8;
    --wb-consent-shadow: rgba(0, 0, 0, 0.65);
    --wb-consent-overlay: rgba(0, 0, 0, 0.7);
}

/* Auch die Masse stehen in :where() — consent.css wird nach dem
   Theme-Stylesheet eingehängt und gewönne sonst allein über die
   Ladereihenfolge gegen die Projekt-Regel. */
:where(.wb-consent) {
    --wb-consent-radius: 14px;
    --wb-consent-space: 1.5rem;
    --wb-consent-max-width: 44rem;
}

.wb-consent {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--wb-consent-fg);
}

.wb-consent[hidden] {
    display: none;
}

/* Kein hartes Blockieren der Seite: ohne Abdunkelung bleibt der Rest der
   Seite sichtbar und die Leiste fängt nur ihre eigene Fläche ab. */
.wb-consent[data-dim='0'] {
    pointer-events: none;
}

.wb-consent[data-dim='0'] .wb-consent__dialog {
    pointer-events: auto;
}

.wb-consent__overlay {
    position: absolute;
    inset: 0;
    background: var(--wb-consent-overlay);
}

.wb-consent[data-dim='0'] .wb-consent__overlay {
    display: none;
}

.wb-consent__dialog {
    position: relative;
    width: 100%;
    max-width: var(--wb-consent-max-width);
    max-height: 90vh;
    overflow-y: auto;
    margin: auto;
    padding: calc(var(--wb-consent-space) * 1.25);
    background: var(--wb-consent-bg);
    border-radius: var(--wb-consent-radius);
    box-shadow: 0 24px 60px -12px var(--wb-consent-shadow);
}

/* ── Positionen ───────────────────────────────────────────────────── */

.wb-consent[data-position='bar-bottom'] {
    align-items: flex-end;
}

.wb-consent[data-position='bar-bottom'] .wb-consent__dialog,
.wb-consent[data-position='bar-top'] .wb-consent__dialog {
    max-width: none;
    margin: 0;
    border-radius: 0;
}

/* Als Leiste braucht die Box eine Kante zur Seite hin — als freie Box
   und als Modal übernimmt das der Schatten. */
.wb-consent[data-position='bar-bottom'] .wb-consent__dialog {
    border-top: 1px solid var(--wb-consent-border);
}

.wb-consent[data-position='bar-top'] .wb-consent__dialog {
    border-bottom: 1px solid var(--wb-consent-border);
}

.wb-consent[data-position='bar-top'] {
    align-items: flex-start;
}

.wb-consent[data-position='box-left'] {
    align-items: flex-end;
    justify-content: flex-start;
}

.wb-consent[data-position='box-right'] {
    align-items: flex-end;
    justify-content: flex-end;
}

.wb-consent[data-position='box-left'] .wb-consent__dialog,
.wb-consent[data-position='box-right'] .wb-consent__dialog {
    max-width: 26rem;
    margin: var(--wb-consent-space);
}

.wb-consent[data-position='modal'] {
    align-items: center;
    justify-content: center;
}

.wb-consent[data-position='modal'] .wb-consent__dialog {
    margin: var(--wb-consent-space);
}

/* ── Inhalt ───────────────────────────────────────────────────────── */

.wb-consent__logo {
    display: block;
    max-height: 2.5rem;
    width: auto;
    margin-bottom: calc(var(--wb-consent-space) / 2);
}

.wb-consent__title {
    margin: 0 0 calc(var(--wb-consent-space) / 2);
    font-size: 1.375rem;
    font-weight: 700;
    color: inherit;
}

.wb-consent__intro {
    margin: 0 0 var(--wb-consent-space);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: inherit;
}

/* Datenschutz und Impressum stehen über der Button-Zeile — sie gehören
   zum Text, nicht zur Entscheidung. */
.wb-consent__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--wb-consent-space) / 1.5);
    margin-bottom: var(--wb-consent-space);
}

.wb-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--wb-consent-space) / 2);
}

/* Masse, Schrift und Form aller Buttons — eine einzige Quelle. Der
   sekundäre Button kann die Entscheidungen damit weder überragen noch
   unterbieten; unterschiedlich ist nur die Fläche, auf der er sitzt. */
.wb-consent__action,
.wb-consent__secondary,
.wb-consent__save {
    flex: 1 1 9rem;
    min-height: 3.25rem;
    padding: 0.875rem 0.75rem;
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    text-align: center;
    border: 1px solid transparent;
    border-radius: calc(var(--wb-consent-radius) / 2);
    cursor: pointer;
}

/* Beide Entscheidungs-Buttons — eine Regel, eine Klasse, keine Variante. */
.wb-consent__action {
    color: var(--wb-consent-accent-fg);
    background: var(--wb-consent-accent);
    border-color: var(--wb-consent-accent);
}

.wb-consent__save {
    color: var(--wb-consent-accent-fg);
    background: var(--wb-consent-accent);
    border-color: var(--wb-consent-accent);
}

/* Sekundär: „Einstellungen" ist keine Entscheidung, sondern ein Weg zur
   zweiten Ebene — deshalb ruhige Fläche statt Akzentfarbe. */
.wb-consent__secondary {
    color: var(--wb-consent-muted-fg);
    background: var(--wb-consent-muted);
    border-color: var(--wb-consent-muted);
}

.wb-consent__textlink {
    padding: 0;
    font: inherit;
    color: var(--wb-consent-link);
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

/* ── Einstellungen ────────────────────────────────────────────────── */

.wb-consent__groups {
    margin-bottom: var(--wb-consent-space);
}

.wb-consent__group {
    padding: calc(var(--wb-consent-space) / 2) 0;
    border-top: 1px solid var(--wb-consent-border);
}

.wb-consent__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--wb-consent-space) / 2);
}

.wb-consent__row-label {
    font-weight: 600;
}

.wb-consent__services {
    margin: 0;
    padding: 0 0 0 var(--wb-consent-space);
    list-style: none;
}

.wb-consent__service {
    padding: calc(var(--wb-consent-space) / 2) 0;
}

.wb-consent__service .wb-consent__row-label {
    font-weight: 400;
}

.wb-consent__details > summary {
    display: inline-block;
    margin-top: 0.25rem;
    color: var(--wb-consent-link);
    text-decoration: underline;
    cursor: pointer;
}

.wb-consent__facts {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
}

.wb-consent__facts dt {
    font-weight: 600;
}

.wb-consent__facts dd {
    margin: 0 0 0.5rem;
}

.wb-consent__table {
    width: 100%;
    border-collapse: collapse;
}

.wb-consent__table th,
.wb-consent__table td {
    padding: 0.25rem 0.5rem;
    text-align: left;
    border: 1px solid var(--wb-consent-border);
}

/* ── Schalter ─────────────────────────────────────────────────────── */

.wb-consent__switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* Die Checkbox bleibt bedienbar und für Screenreader sichtbar — sie wird
   nur optisch hinter dem Schalter versteckt, nicht per display:none. */
.wb-consent__switch > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.wb-consent__switch-track {
    position: relative;
    display: inline-block;
    flex: none;
    width: 3rem;
    height: 1.75rem;
    background: var(--wb-consent-bg);
    /* Bewusst die Textfarbe statt der Rahmenfarbe: der Schalter ist ein
       Bedienelement und braucht nach WCAG 1.4.11 mindestens 3:1 gegen
       seinen Hintergrund — die dezente Rahmenfarbe reicht dafür nicht. */
    border: 2px solid var(--wb-consent-fg);
    border-radius: 1rem;
}

.wb-consent__switch-knob {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--wb-consent-fg);
    border-radius: 50%;
}

/* Zustand wird nicht allein über Farbe unterschieden: der Knopf wandert,
   ein Haken erscheint und die Beschriftung nennt den Zustand im Text. */
.wb-consent__switch > input:checked + .wb-consent__switch-track {
    background: var(--wb-consent-accent);
    border-color: var(--wb-consent-accent);
}

.wb-consent__switch > input:checked + .wb-consent__switch-track .wb-consent__switch-knob {
    left: auto;
    right: 0.125rem;
    background: var(--wb-consent-accent-fg);
}

.wb-consent__switch > input:checked + .wb-consent__switch-track::after {
    position: absolute;
    top: 0.0625rem;
    left: 0.5rem;
    content: '✓';
    font-size: 0.875rem;
    color: var(--wb-consent-accent-fg);
}

.wb-consent__switch > input:disabled + .wb-consent__switch-track {
    opacity: 0.65;
    cursor: not-allowed;
}

.wb-consent__switch-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Fokus ────────────────────────────────────────────────────────── */

.wb-consent :focus-visible,
.wb-consent__switch > input:focus-visible + .wb-consent__switch-track {
    outline: 3px solid var(--wb-consent-focus);
    outline-offset: 2px;
}

/* ── Platzhalter für externe Inhalte ──────────────────────────────── */

.wb-consent-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 12rem;
    padding: 1.25rem;
    text-align: center;
    color: var(--wb-consent-fg, inherit);
    background: var(--wb-consent-bg, transparent);
    border: 1px dashed var(--wb-consent-border, currentColor);
    border-radius: var(--wb-consent-radius, 14px);
}

.wb-consent-placeholder__button {
    min-height: 3.25rem;
    padding: 0.75rem 1.25rem;
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--wb-consent-accent-fg, inherit);
    background: var(--wb-consent-accent, transparent);
    border: 1px solid var(--wb-consent-accent, currentColor);
    border-radius: calc(var(--wb-consent-radius, 14px) / 2);
    cursor: pointer;
}

@media (max-width: 40rem) {
    .wb-consent__dialog {
        max-height: 96vh;
    }

    .wb-consent__action,
    .wb-consent__secondary,
    .wb-consent__save {
        flex-basis: 100%;
    }
}

/* ── Weg zurück: der Keks im Seitenfuss ───────────────────────────
   Erscheint erst, wenn eine Entscheidung vorliegt (das Skript nimmt
   dann `hidden` weg) und wird vom Skript in den Seitenfuss einsortiert.
   Er steht bewusst IM Textfluss statt schwebend im Sichtfenster: ein
   dauerhaft mitscrollender Knopf verdeckt auf schmalen Geräten Inhalt.
   Sichtbar ist nur das Symbol, die Beschriftung bleibt vorlesbar. */

:where(.wb-consent-trigger) {
    --wb-consent-trigger-offset: 1rem;
}

.wb-consent-trigger {
    position: relative; /* nur damit der z-index unten überhaupt greift */
    z-index: 2147482000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: var(--wb-consent-trigger-offset, 1rem) 0 0;
    padding: 0.625rem;
    font: inherit;
    line-height: 0;
    color: var(--wb-consent-fg, inherit);
    background: var(--wb-consent-bg, transparent);
    border: 1px solid var(--wb-consent-border, currentColor);
    border-radius: 999px;
    box-shadow: 0 8px 24px -10px var(--wb-consent-shadow);
    cursor: pointer;
}

.wb-consent-trigger[hidden] {
    display: none;
}

.wb-consent-trigger:focus-visible {
    outline: 3px solid var(--wb-consent-focus, currentColor);
    outline-offset: 2px;
}

/* Der Name des Knopfes — nur fürs Vorlesen. Weder `display: none` noch
   `visibility: hidden`: beides nähme den Namen auch dem Screenreader,
   der Keks wäre dann ein Knopf ohne Beschriftung. */
.wb-consent-trigger__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.wb-consent-trigger__icon {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
}