/* Einwilligungs-Banner: kompakte Leiste unten oder Karte in einer unteren Ecke, nicht modal.
   Tokens aus kwbae-consent.css. Der Aufbau folgt der eigenen Breite (Container Query), so zeigt
   auch die Vorschau im Backend das Handy-Layout. */

.kwbae-banner {
    /* Wie das Theme: Seitenfläche leicht zur Schrift getönt, damit der Banner nicht wie ein Abschnitt wirkt.
       In srgb gemischt, damit ensureContrast das Ergebnis lesen kann. */
    --kwbae-banner-surface: var(--kwbae-banner-bg, color-mix(in srgb, var(--kwbae-page-bg, Canvas) 94%, currentColor));
    --kwbae-banner-edge: var(--kwbae-cb-brand);
    --kwbae-cb-surface: var(--kwbae-banner-surface);
    /* Schmaler Innenabstand: „Alle akzeptieren“ passt bei 320 px in eine halbe Zeile */
    --kwbae-cb-btn-pad: 0.75em;
    container: kwbae-banner / inline-size;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--kwbae-z-banner, 99990);
    box-sizing: border-box;
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: var(--kwbae-actions-h, 0px);
    background: var(--kwbae-banner-surface);
    border-top: 3px solid var(--kwbae-banner-edge);
    box-shadow: 0 -0.5rem 2rem color-mix(in srgb, currentColor 22%, transparent);
}

.kwbae-banner[hidden] { display: none; }

/* Vorlagen mit eigener Fläche bringen ihre Farbe mit; Schlank und Rahmen ziehen die Linie in Schriftfarbe */
.kwbae-banner:is([data-kwbae-style="klar"], [data-kwbae-style="ton"], [data-kwbae-style="kontrast"]) {
    --kwbae-banner-surface: var(--kwbae-cb-bg);
}

.kwbae-banner:is([data-kwbae-style="slim"], [data-kwbae-style="rahmen"]) {
    --kwbae-banner-edge: currentColor;
}

/* Knöpfe: Ablehnen und Akzeptieren teilen sich immer eine Form (gleichwertig, DSK OH Rn. 135) */
.kwbae-banner[data-kwbae-buttons="filled"] {
    --kwbae-cb-btn-bg: var(--kwbae-cb-fill);
    --kwbae-cb-btn-fg: var(--kwbae-cb-on-fill);
    --kwbae-cb-btn-line: var(--kwbae-cb-fill);
}

.kwbae-banner[data-kwbae-buttons="outline"] {
    --kwbae-cb-btn-bg: transparent;
    --kwbae-cb-btn-fg: currentColor;
    --kwbae-cb-btn-line: currentColor;
}

/* Unter 4,5:1 gemessen (ensureContrast), etwa durch eine sehr spezifische Theme-Regel: Schrift in
   Bannerfarbe mit Rahmen; deren Kontrast zur Fläche hat das Skript schon gesichert. */
.kwbae-banner[data-kwbae-own-buttons] .kwbae-banner__btn,
.kwbae-banner[data-kwbae-own-buttons] .kwbae-banner__btn:is(:hover, :focus, :active) {
    color: var(--kwbae-cb-fg);
    background: transparent;
    border: 2px solid currentColor;
}

.kwbae-banner__inner {
    display: grid;
    grid-template-areas: "body" "details" "actions" "meta";
    gap: var(--kwbae-cb-gap);
    max-width: 72rem;
    margin-inline: auto;
    padding: 0.75rem 16px max(0.25rem, env(safe-area-inset-bottom));
}

.kwbae-banner p,
.kwbae-banner dl,
.kwbae-banner dd { margin: 0; }

.kwbae-banner__body {
    grid-area: body;
    display: grid;
    gap: 0.25em;
}

/* Überschrift (h2), aber ohne die Überschriften-Stile des Themes */
.kwbae-banner .kwbae-banner__title {
    margin: 0;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.kwbae-banner__title:focus { outline: none; }
.kwbae-banner__text { display: grid; gap: 0.25em; }

.kwbae-banner__purposes,
.kwbae-banner__new,
.kwbae-banner__cat-text,
.kwbae-banner__meta { font-size: 0.875em; }

.kwbae-banner__note,
.kwbae-banner__cat-text { color: var(--kwbae-cb-muted); }
.kwbae-banner__new { font-weight: 600; }
.kwbae-banner__new[hidden] { display: none; }
.kwbae-banner__details { grid-area: details; }
.kwbae-banner__details[hidden] { display: none; }

/* Ablehnen und Akzeptieren nebeneinander, gleich breit; ab 320 px zwei Spalten. Sticky: Scrollt der
   Inhalt, bleiben beide ohne Scrollen sichtbar (DSK OH Rn. 136). */
.kwbae-banner__actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
    gap: 0.5em;
    position: sticky;
    bottom: 0;
    margin-block: calc(var(--kwbae-cb-gap) * -1);
    padding-block: var(--kwbae-cb-gap);
    background: var(--kwbae-banner-surface);
}

.kwbae-banner__btn[hidden] { display: none; }

.kwbae-banner__meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.25em;
}

/* „Einstellungen“ als Textknopf: schwächer als das Paar, aber als Knopf erkennbar (Rn. 137) */
.kwbae-banner .kwbae-banner__settings,
.kwbae-banner .kwbae-banner__settings:is(:hover, :focus, :active) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.kwbae-banner__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25em;
}

/* Explizite Linkfarbe: Elementor 4 färbt Links sonst um (auch bei :focus) */
.kwbae-banner .kwbae-banner__link,
.kwbae-banner .kwbae-banner__link:is(:hover, :focus, :active) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

@media (hover: hover) {
    .kwbae-banner .kwbae-banner__settings:hover,
    .kwbae-banner .kwbae-banner__link:hover { text-decoration-thickness: 2px; }
}

.kwbae-banner__cats {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--kwbae-cb-border);
}

.kwbae-banner__cat {
    display: grid;
    gap: 0.25em;
    padding-block: 0.75em;
    border-bottom: var(--kwbae-cb-border);
}

.kwbae-banner__cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    min-height: 44px;
}

.kwbae-banner__cat-name { font-weight: 600; }
.kwbae-banner__always { font-size: 0.875em; color: var(--kwbae-cb-muted); }

.kwbae-banner__services summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.875em;
    cursor: pointer;
}

.kwbae-banner__service {
    display: grid;
    gap: 0.25em;
    padding: 0.5em 0 0.75em;
    font-size: 0.875em;
}

.kwbae-banner__service-name { font-weight: 600; }

.kwbae-banner__facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.125em 1em;
}

.kwbae-banner__facts dt { color: var(--kwbae-cb-muted); }

/* Breite Leiste: Text links, Paar und Einstellungen rechts. Mit offenen Details wieder untereinander,
   dann bleibt die Knopfreihe beim Scrollen unten stehen. */
@container kwbae-banner (min-width: 48rem) {
    .kwbae-banner:not(:has(.kwbae-banner__details:not([hidden]))) .kwbae-banner__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "body actions" "body meta";
        align-items: center;
        column-gap: 2.5rem;
        row-gap: 0;
        padding-block: 0.75rem max(0.75rem, env(safe-area-inset-bottom));
    }

    .kwbae-banner:not(:has(.kwbae-banner__details:not([hidden]))) .kwbae-banner__actions {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(9rem, 1fr);
        align-self: end;
        position: static;
        margin: 0;
        padding: 0;
    }

    .kwbae-banner:not(:has(.kwbae-banner__details:not([hidden]))) .kwbae-banner__meta {
        justify-content: flex-end;
        align-self: start;
    }
}

/* Fokussierte Elemente nicht unter dem Banner verstecken (WCAG 2.4.11). Der Abstand am body lässt
   auch das Seitenende hinter dem Banner hervorscrollen; --kwbae-body-pad ist der des Themes. */
.kwbae-banner-open { scroll-padding-bottom: var(--kwbae-banner-h, 0px); }
html.kwbae-banner-open body { padding-bottom: calc(var(--kwbae-body-pad, 0px) + var(--kwbae-banner-h, 0px)); }

@media (min-width: 40rem) {
    .kwbae-banner[data-kwbae-position="card"] {
        inset-inline: auto;
        left: 1rem;
        bottom: max(1rem, env(safe-area-inset-bottom));
        width: min(26rem, calc(100vw - 2rem));
        /* Freistehend mit Schatten abgegrenzt; eine dicke Linie oben verzöge sich an den runden Ecken */
        border: var(--kwbae-cb-border);
        border-radius: var(--kwbae-cb-radius);
    }

    .kwbae-banner[data-kwbae-position="card"][data-kwbae-side="right"] {
        left: auto;
        right: 1rem;
    }

    .kwbae-banner[data-kwbae-position="card"] .kwbae-banner__inner { padding: 1.25rem; }
}