/* Einwilligung: Platzhalter (.kwbae-cb), Einstellungen (.kwbae-cs), Banner-Tokens.
   Standard „theme": Farben und Schrift vom Theme. Vorlagen: kwbae-consent-presets.css */

.kwbae-cb,
.kwbae-cs,
.kwbae-banner {
    --kwbae-cb-fg: currentColor;
    --kwbae-cb-bg: color-mix(in srgb, currentColor 5%, transparent);
    --kwbae-cb-line: color-mix(in srgb, currentColor 25%, transparent);
    --kwbae-cb-muted: color-mix(in srgb, currentColor 75%, transparent);
    --kwbae-cb-btn-bg: transparent;
    --kwbae-cb-btn-fg: currentColor;
    --kwbae-cb-btn-line: currentColor;
    --kwbae-cb-focus: var(--kwbae-cb-accent, currentColor);
    /* Fläche unter Schaltern; --kwbae-page-bg setzt das Skript aus dem Theme */
    --kwbae-cb-surface: var(--kwbae-page-bg, Canvas);
    /* Gefüllte Knöpfe; --kwbae-cb-ink ist die gemessene Schriftfarbe (ensureContrast). Fest statt
       currentColor: Das würde am Knopf ausgewertet, also an seiner eigenen Schrift. */
    --kwbae-cb-brand: var(--kwbae-cb-accent, var(--wp--preset--color--primary, var(--e-global-color-primary, var(--kwbae-cb-ink, currentColor))));
    --kwbae-cb-fill: var(--kwbae-cb-ink, currentColor);
    --kwbae-cb-on-fill: var(--kwbae-cb-surface);
    --kwbae-cb-radius: 0.5em;
    --kwbae-cb-btn-radius: 0.375em;
    --kwbae-cb-border: 1px solid var(--kwbae-cb-line);
    --kwbae-cb-gap: 0.75em;
    color: var(--kwbae-cb-fg);
    font: inherit;
}

.kwbae-cb {
    box-sizing: border-box;
    width: 100%;
    display: grid;
    place-items: center;
    min-height: 12rem;
    padding: clamp(1rem, 4vw, 2rem);
    background: var(--kwbae-cb-bg);
    border: var(--kwbae-cb-border);
    border-radius: var(--kwbae-cb-radius);
    text-align: center;
}

/* Ohne feste Mindesthöhe wächst eine Box mit Seitenverhältnis mit ihrem Inhalt (320 px: sonst Überlauf) */
.kwbae-cb:is([data-kwbae-consent-kind="video"], [data-kwbae-consent-kind="map"]) { min-height: auto; }
.kwbae-cb[data-kwbae-consent-kind="video"] { aspect-ratio: 16 / 9; }
.kwbae-cb[data-kwbae-consent-kind="map"] { aspect-ratio: 4 / 3; }

/* Block-Embed mit responsive-embeds hält per ::before Platz für das iframe frei – der Platzhalter verdoppelte die Höhe */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:has(.kwbae-cb)::before { content: none; }

.kwbae-cb__box {
    display: grid;
    justify-items: center;
    gap: var(--kwbae-cb-gap);
    max-width: 34rem;
}

.kwbae-cb__title,
.kwbae-cb__text,
.kwbae-cb__error,
.kwbae-cs__title,
.kwbae-cs__text,
.kwbae-cs__note,
.kwbae-cs__status {
    margin: 0;
}

.kwbae-cb__title { font-weight: 700; }
.kwbae-cb__error { font-weight: 600; }

.kwbae-cb__text,
.kwbae-cs__note { font-size: 0.875em; color: var(--kwbae-cb-muted); }

/* Knöpfe färbt kein Theme um: jeder Zustand ausdrücklich, Gewicht 0-2-0 bzw. 0-3-0 über
   Theme-Resets wie Hello ([type=button]:focus 0-2-0, #c36) und Elementors Kit (0-2-1). */
:is(.kwbae-cb, .kwbae-cs, .kwbae-banner) :is(.kwbae-cb__load, .kwbae-cs__btn, .kwbae-banner__btn),
:is(.kwbae-cb, .kwbae-cs, .kwbae-banner) :is(.kwbae-cb__load, .kwbae-cs__btn, .kwbae-banner__btn):is(:hover, :focus, :active) {
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 0.6em var(--kwbae-cb-btn-pad, 1.2em);
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    letter-spacing: normal;
    text-shadow: none;
    color: var(--kwbae-cb-btn-fg);
    background: var(--kwbae-cb-btn-bg);
    border: 2px solid var(--kwbae-cb-btn-line);
    border-radius: var(--kwbae-cb-btn-radius);
    box-shadow: none;
    cursor: pointer;
}

/* Auch Schalter und Textknöpfe sind <button>: Fläche und Rand in allen Zuständen selbst setzen */
:is(.kwbae-cs, .kwbae-banner) .kwbae-cs__switch,
:is(.kwbae-cs, .kwbae-banner) .kwbae-cs__switch:is(:hover, :focus, :active) {
    color: inherit;
    background: transparent;
    border: 2px solid currentColor;
    box-shadow: none;
}

:is(.kwbae-cs, .kwbae-banner) .kwbae-cs__switch[aria-checked="true"],
:is(.kwbae-cs, .kwbae-banner) .kwbae-cs__switch[aria-checked="true"]:is(:hover, :focus, :active) {
    background: var(--kwbae-cb-focus);
    border-color: var(--kwbae-cb-focus);
}

.kwbae-cb__remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 44px;
    font-size: 0.875em;
    cursor: pointer;
}

/* wp_kses (post) entfernt das Kästchen, die Beschriftung bliebe allein stehen */
.kwbae-cb__remember:not(:has(input)) { display: none; }

.kwbae-cb__remember input {
    width: 1.15em;
    height: 1.15em;
    margin: 0;
    accent-color: var(--kwbae-cb-focus);
}

/* Explizite Linkfarbe: Elementor 4 färbt Links sonst um (auch bei :focus) */
.kwbae-cb .kwbae-cb__more,
.kwbae-cb .kwbae-cb__more:is(:hover, :focus, :active) {
    font-size: 0.875em;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.kwbae-cs {
    display: grid;
    gap: var(--kwbae-cb-gap);
    margin-block: 2em;
}

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

.kwbae-cs__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding-block: 0.75em;
    border-bottom: var(--kwbae-cb-border);
}

.kwbae-cs__service { display: grid; min-width: 0; }
.kwbae-cs__name { font-weight: 600; }
.kwbae-cs__meta { font-size: 0.8125em; color: var(--kwbae-cb-muted); }

.kwbae-cs__switch {
    position: relative;
    flex: none;
    width: 3.25rem;
    height: 1.875rem;
    margin-block: 0.4375rem;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
}

/* Unsichtbare Klickfläche auf 44 px (Projektregel); der Schalter selbst bleibt 30 px hoch */
.kwbae-cs__switch::before {
    content: "";
    position: absolute;
    inset: -0.4375rem -0.25rem;
}

.kwbae-cs__switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: currentColor;
    transition: translate 160ms ease;
}

.kwbae-cs__switch[aria-checked="true"]::after {
    translate: 1.375rem 0;
    background: var(--kwbae-cb-switch-knob, var(--kwbae-cb-surface));
}

.kwbae-cs__actions { display: flex; flex-wrap: wrap; gap: var(--kwbae-cb-gap); }
/* Leer ohne Rasterabstand, aber nie display: none – sonst fällt die Live-Region aus dem A11y-Baum */
.kwbae-cs__status:empty { position: absolute; }

.kwbae-cb :focus-visible,
.kwbae-cs :focus-visible,
.kwbae-banner :focus-visible {
    outline: 3px solid var(--kwbae-cb-focus);
    outline-offset: 2px;
}

.kwbae-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Markenfarbe für gefüllte Knöpfe, Helligkeit begrenzt: weiße Schrift ≥ 4,5:1, auf dunkler Fläche
   (setzt ensureContrast) heller Knopf mit dunkler Schrift. Das Skript misst trotzdem nach. */
@supports (color: oklch(from red min(l, 0.5) c h)) {
    .kwbae-cb,
    .kwbae-cs,
    .kwbae-banner {
        --kwbae-cb-fill: oklch(from var(--kwbae-cb-brand) min(l, 0.5) c h);
        --kwbae-cb-on-fill: #fff;
    }

    [data-kwbae-surface="dark"] {
        --kwbae-cb-fill: oklch(from var(--kwbae-cb-brand) max(l, 0.78) c h);
        --kwbae-cb-on-fill: #111312;
    }
}

/* Schlank: keine Fläche, keine Rundung, nur Linie */
[data-kwbae-style="slim"] {
    --kwbae-cb-bg: transparent;
    --kwbae-cb-radius: 0;
    --kwbae-cb-btn-radius: 0;
    --kwbae-cb-border: 1px solid currentColor;
}

/* Hover ohne Farbmischung: Der gemessene Kontrast gilt auch hier */
@media (hover: hover) {
    :is(.kwbae-cb, .kwbae-cs, .kwbae-banner) :is(.kwbae-cb__load, .kwbae-cs__btn, .kwbae-banner__btn):hover {
        text-decoration: underline;
        text-underline-offset: 0.2em;
        box-shadow: inset 0 0 0 2px var(--kwbae-cb-btn-fg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kwbae-cs__switch::after { transition: none; }
}

/* Fester Knopf (ReopenButton): Systemfarben Canvas/CanvasText sind immer ein lesbares Paar, auch auf dunklen Themes */
.kwbae-reopen {
    position: fixed;
    inset-block-end: max(1rem, env(safe-area-inset-bottom));
    inset-inline-start: max(1rem, env(safe-area-inset-left));
    z-index: var(--kwbae-z-reopen, 99980);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5em 1em;
    box-sizing: border-box;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    color-scheme: light dark;
    background: Canvas;
    border: 1px solid CanvasText;
    border-radius: 999px;
    box-shadow: 0 2px 8px color-mix(in srgb, CanvasText 25%, transparent);
    text-decoration: none;
}

/* :is() hebt die Spezifität über Theme-Regeln wie a:hover oder a:visited */
.kwbae-reopen,
.kwbae-reopen:is(:link, :visited, :hover, :focus, :active) { color: CanvasText; }
.kwbae-reopen:focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; }

@media (hover: hover) {
    .kwbae-reopen:hover { text-decoration: underline; }
}

/* Solange der Banner offen ist, fragt er selbst */
body:has(.kwbae-banner:not([hidden], [data-kwbae-preview])) .kwbae-reopen { display: none; }

@media print {
    .kwbae-reopen { display: none; }
}