/* ============================================================
   Cookie-Consent — Zwei-Stufen-UI

   Markup: <div id="cookie-consent" data-view="bar|detail">
             <section data-cookie-view="bar">    ← Bottom-Bar (default)
             <section data-cookie-view="detail"> ← Detail-Modal mit Backdrop

   Bar = nicht-blockierend, sticky bottom. Page bleibt nutzbar.
   Detail = klassisches Modal mit Backdrop, nur nach Klick auf "Einstellungen".

   Begründung: rechtlich ist ein Show-Stopper-Modal nicht erforderlich
   (TTDSG/DSGVO verlangen nur Consent VOR dem Setzen non-essentieller Cookies).
   "Ablehnen" muss genauso einfach sein wie "Annehmen" — beide Buttons stehen
   in der Bar gleichwertig nebeneinander.
   ============================================================ */

#cookie-consent {
    position: fixed;
    inset: 0;
    z-index: 999999;
    /* Default = transparent + pointer-events:none → Page-Klicks gehen durch
       (Bar-View). Beim Switch auf 'detail' setzen wir Backdrop + pointer-events
       per CSS-Override. */
    background: transparent;
    pointer-events: none;
}

#cookie-consent[hidden] {
    display: none;
}

/* === Bar-View: schmaler Bottom-Banner === */

/* Im bar-Modus ist die Detail-Section ausgeblendet (kein HTML-[hidden] mehr —
   Sichtbarkeit komplett über data-view + CSS gesteuert). */
#cookie-consent[data-view="bar"] [data-cookie-view="detail"] {
    display: none;
}

#cookie-consent[data-view="bar"] [data-cookie-view="bar"] {
    /* Sticky bottom, slide-up. Visuell deutlich abgesetzt von der Page:
       dunkler Akzentstreifen oben (--color-primary), Schatten weit nach oben,
       Container leicht nach innen abgesetzt mit margin + radius — soll wie
       eine "schwebende Karte" am unteren Rand wirken, nicht wie ein flacher
       Footer-Strip der mit der Page verschmilzt. */
    position: fixed;
    bottom: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    pointer-events: auto;
    background: var(--color-bg);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.15), 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    padding: var(--padding-card);
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    flex-wrap: wrap;
    animation: cookie-bar-slide-up 0.4s ease-out;
    max-width: var(--content-width);
    margin-inline: auto;
}

@keyframes cookie-bar-slide-up {
    from { transform: translateY(calc(100% + var(--space-3))); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

#cookie-consent .cookie-bar-text {
    flex: 1 1 20rem;
}

#cookie-consent .cookie-bar-text strong {
    display: block;
    font-size: var(--text-base);
    margin-block-end: var(--space-1);
}

#cookie-consent .cookie-bar-text p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading);
}

/* Inline-Link im Cookie-Banner: Underline pflicht damit er sich nicht
   nur durch Farbe vom Fließtext unterscheidet (WCAG 1.4.1 "Use of Color"). */
#cookie-consent .cookie-bar-text a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

#cookie-consent [data-cookie-view="bar"] menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    flex-shrink: 0;
}

/* Mobile: Bar wird Stack — Text oben, Buttons als Column drunter */
@media (max-width: 44.999rem) {
    #cookie-consent[data-view="bar"] [data-cookie-view="bar"] {
        flex-direction: column;
        align-items: stretch;
    }
    /* Text-Container darf in Column-Direction NICHT wachsen — sonst wird
       flex-basis 20rem zur Mindesthöhe und der Container dehnt sich vertikal,
       was eine riesige Lücke zwischen Text und Buttons erzeugt. */
    #cookie-consent[data-view="bar"] .cookie-bar-text {
        flex: 0 0 auto;
    }
    #cookie-consent [data-cookie-view="bar"] menu {
        flex-direction: column;
    }
    #cookie-consent [data-cookie-view="bar"] menu .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Tablet: Text in eigene Zeile (volle Breite), darunter Buttons als Row
   gleichmäßig über die volle Bar-Breite verteilt (flex:1 pro Button). */
@media (min-width: 45rem) and (max-width: 79.499rem) {
    #cookie-consent[data-view="bar"] [data-cookie-view="bar"] {
        flex-wrap: wrap;
    }
    #cookie-consent[data-view="bar"] .cookie-bar-text {
        flex: 1 1 100%;
    }
    #cookie-consent [data-cookie-view="bar"] menu {
        width: 100%;
    }
    #cookie-consent [data-cookie-view="bar"] menu .btn {
        flex: 1;
        justify-content: center;
    }
}

/* === Detail-View: vollwertiges Modal mit Backdrop === */

#cookie-consent[data-view="detail"] {
    background: var(--overlay-bg);
    backdrop-filter: blur(var(--overlay-blur));
    -webkit-backdrop-filter: blur(var(--overlay-blur));
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-card);
}

#cookie-consent[data-view="detail"] [data-cookie-view="bar"] {
    display: none;
}

/* Override des HTML-[hidden]-Attributs: wenn data-view auf detail steht,
   wird die Detail-Section sichtbar gemacht (Specificity 0,2,2,1 schlägt
   das standard [hidden]-Mapping 0,0,1,0). */
#cookie-consent[data-view="detail"] [data-cookie-view="detail"] {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    width: min(95vw, 50rem);
    max-height: min(90vh, 90dvh);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
}

#cookie-consent [data-cookie-view="detail"] header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gap-inline) var(--padding-card);
    border-bottom: 0.0625rem solid var(--color-border);
    background: var(--color-bg);
    margin: 0;
    gap: var(--space-3);
    flex-shrink: 0;
}

#cookie-consent [data-cookie-view="detail"] h2 {
    margin: 0;
    font-size: var(--text-xl);
}

#cookie-consent .cookie-detail-body {
    padding: var(--padding-card);
    overflow-y: auto;
}

#cookie-consent .cookie-detail-body > p:first-child {
    margin: 0 0 var(--gap-inline);
    color: var(--color-text-muted);
    line-height: var(--leading);
}

/* === Shared: Cookie-Kategorien (Checkbox-Karten) === */

#cookie-consent fieldset {
    border: none;
    padding: 0;
    margin: 0 0 var(--gap-inline);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

#cookie-consent label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

#cookie-consent label:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-primary);
}

#cookie-consent label:has(input:disabled) {
    cursor: default;
}

#cookie-consent label:has(input:disabled):hover {
    background: transparent;
    border-color: var(--color-border);
}

#cookie-consent label input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--color-primary);
}

#cookie-consent label strong {
    font-size: var(--text-base);
}

#cookie-consent label span {
    width: 100%;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding-left: 1.6rem;
}

/* Detail-Buttons immer untereinander */
#cookie-consent [data-cookie-view="detail"] menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--gap-inline);
    padding: 0;
    list-style: none;
}

#cookie-consent [data-cookie-view="detail"] menu .btn {
    width: 100%;
    justify-content: center;
}

#cookie-consent nav ul {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--text-sm);
}

#cookie-consent nav a {
    color: var(--color-text-muted);
}

/* X-Button im Detail-Header — analog [data-closes] */
#cookie-consent [data-cookie-show-bar] {
    padding: var(--space-2);
    border: none;
    background: none;
    font-size: var(--text-xl);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition);
}

#cookie-consent [data-cookie-show-bar]:hover {
    color: var(--color-text);
}

#cookie-consent [data-cookie-show-bar]::before {
    content: '\00d7';
}