/* Consent-Banner und Einwilligungs-Dialog.
   Zentrale Quelle - zuvor lag dieser Block inline in 14 HTML-Dateien.
   Die zugehoerige Logik steht in assets/js/consent.js. */

.consent-banner[hidden], .consent-customize[hidden] { display: none !important; }
.consent-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--navy); color: var(--on-navy-soft); border-top: 2px solid var(--cta); box-shadow: 0 -18px 44px -14px rgba(11,18,32,0.45); padding: 1.35rem 1rem; }
.consent-banner-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 1.2rem 2rem; align-items: center; }
.consent-banner-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--on-navy); margin: 0 0 0.35rem; letter-spacing: -0.015em; }
.consent-banner-title::before { content: "// DSGVO / TTDSG"; display: block; font-family: var(--font-mono); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.1em; color: var(--amber-on-dark); margin-bottom: 7px; }
.consent-banner-text { color: var(--on-navy-mute); font-size: 0.88rem; margin: 0; line-height: 1.55; max-width: 70ch; }
.consent-banner-text a { color: var(--amber-on-dark); text-decoration: underline; text-underline-offset: 2px; }
.consent-banner-actions { display: flex; gap: 0.6rem; flex-shrink: 0; flex-wrap: wrap; align-items: center; }
.consent-btn { padding: 0.66rem 1.15rem; border-radius: var(--radius-btn); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; border: 1px solid; transition: background var(--tr-micro), color var(--tr-micro), border-color var(--tr-micro); white-space: nowrap; }
.consent-btn--ghost { background: transparent; border-color: var(--navy-border-2); color: var(--on-navy); }
.consent-btn--ghost:hover { background: rgba(255,255,255,0.07); border-color: var(--on-navy-soft); }
.consent-btn--primary { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); }
.consent-btn--primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.consent-customize { position: fixed; inset: 0; z-index: 10000; background: rgba(11,18,32,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.consent-customize-content { background: var(--surface); border: 1px solid var(--border-strong); border-top: 3px solid var(--cta); border-radius: 10px; padding: 2rem; max-width: 560px; width: 100%; box-shadow: var(--shadow-lift); }
.consent-customize-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin: 0 0 1rem; font-size: 1.25rem; letter-spacing: -0.015em; }
.consent-customize-title::before { content: "// COOKIE-KATEGORIEN"; display: block; font-family: var(--font-mono); font-weight: 500; font-size: 0.64rem; letter-spacing: 0.1em; color: var(--amber-text); margin-bottom: 8px; }
.consent-row { padding: 0.8rem 0; border-bottom: 1px solid var(--border); }
.consent-row:last-child { border-bottom: none; }
.consent-label { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; }
.consent-label input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--cta); }
.consent-label-text { color: var(--ink); font-size: 0.9rem; line-height: 1.5; }
.consent-label-text small { color: var(--ink-mute); }
.consent-customize-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1.5rem; flex-wrap: wrap; }
.consent-customize .consent-btn--ghost { border-color: var(--border-strong); color: var(--ink); }
.consent-customize .consent-btn--ghost:hover { background: var(--surface-alt); border-color: var(--ink-soft); }
@media (max-width: 760px) {
    /* Kompaktere Innenabstaende: die Buttons brauchen mobil zwei Zeilen (s. u.),
       das Banner darf dadurch nicht den halben Viewport belegen. */
    .consent-banner { padding: 1rem; }
    .consent-banner-content { grid-template-columns: 1fr; gap: 0.75rem; }
    .consent-banner-title { margin-bottom: 0.2rem; }
    .consent-banner-text { font-size: 0.84rem; line-height: 1.5; }
    /* min-width: max-content verhindert, dass die Buttons unter ihre Textbreite
       schrumpfen. Mit dem frueheren min-width: 0 wurde die Beschriftung von
       "Alle akzeptieren" und "Nur notwendige" auf jedem mobilen Viewport
       abgeschnitten (bis zu 43 px). Sie brechen jetzt lieber um.
       Die Beschriftungen bleiben unveraendert - sie sind Teil der Einwilligung. */
    .consent-banner-actions { width: 100%; flex-wrap: wrap; gap: 0.5rem; }
    .consent-banner-actions .consent-btn { flex: 1 1 auto; min-width: max-content; min-height: 44px; }
}