/* cookie-consent.css - DSGVO/TTDSG-Consent-Banner + Einstellungen.
   Theme-aware über die base.css-Tokens. Wird zusammen mit cookie-consent.js
   eingebunden. Sichtbar erst, wenn JS die Klasse .is-open setzt. */

.cc-root { position: fixed; inset: 0; z-index: 2147483000; display: none; }
.cc-root.is-open { display: block; }
/* Erst-Banner: die unsichtbare Vollflächen-Ebene darf keine Klicks schlucken.
   Vorher lag .cc-root (inset:0) transparent über der ganzen Seite - Menü, Links
   und Knöpfe sahen bedienbar aus, reagierten aber nicht („tote Klicks"). Nur das
   Panel selbst nimmt Klicks an; im Einstellungs-Modal fängt der Backdrop sie ab. */
.cc-root:not(.is-settings) { pointer-events: none; }
.cc-panel { pointer-events: auto; }

/* Abdunkeln nur für die Einstellungen (Modal). Das Erst-Banner lässt die
   Seite bedienbar, blockiert aber nichts Rechtliches (es werden vorher keine
   nicht-notwendigen Dienste geladen). */
.cc-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 14, 26, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.cc-root.is-settings .cc-backdrop { opacity: 1; pointer-events: auto; }

.cc-panel {
  position: absolute;
  left: 0; right: 0; margin-inline: auto; bottom: clamp(16px, 4vw, 32px);
  transform: translateY(12px);
  width: min(680px, calc(100% - 32px));   /* 100% statt 100vw → Scrollbar zählt nicht mit */
  box-sizing: border-box;                 /* Innenabstand zählt mit, sonst ragt das Panel am Handy ~10 px über den Rand */
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(var(--shadow-color), 0.28);
  padding: clamp(20px, 3.4vw, 30px);
  /* Kleine Handys / Querformat: das Panel nie höher als der sichtbare Bereich,
     sonst rutscht die Überschrift oben aus dem Bild und ist nicht erreichbar. */
  max-height: calc(100% - 2 * clamp(16px, 4vw, 32px));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity .3s ease, transform .3s var(--ease-out, ease);
}
.cc-root.is-open .cc-panel { opacity: 1; transform: translateY(0); }
.cc-root.is-settings .cc-panel {
  top: 50%; bottom: auto;
  transform: translateY(-50%);
  max-height: min(88vh, 720px);
  overflow-y: auto;
}

.cc-eyebrow {
  margin: 0 0 6px;
  font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.cc-panel h2 {
  margin: 0 0 8px;
  font-family: var(--font-serif, serif);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  line-height: 1.1;
  color: var(--text);
}
.cc-panel p { margin: 0 0 14px; color: var(--text-muted); line-height: 1.6; font-size: .98rem; }
.cc-panel a { color: var(--accent); font-weight: 700; }

/* Button-Reihe - „Alle akzeptieren" und „Nur notwendige" gleichwertig */
.cc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cc-btn {
  appearance: none;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  font: inherit; font-weight: 800;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, filter .16s ease;
}
.cc-btn:active { transform: scale(0.98); }
/* Zustimmen und Ablehnen sind BEWUSST optisch identisch. Vorher war „Alle
   akzeptieren" ein gefüllter Akzent-Knopf mit Schein und „Nur notwendige" nur
   umrandet - beide gleich schnell erreichbar, aber der Blick wurde eindeutig
   gelenkt. Genau das werten Aufsichtsbehörden als „Dark Pattern": Ablehnen muss
   nicht nur gleich einfach, sondern auch gleich sichtbar sein. Der Banner ist
   kein Verkaufsknopf - hier ist Zurückhaltung richtig. Beim Ändern also nicht
   „den Zustimmen-Knopf hervorheben", das ist der Fehler, den es zu vermeiden gilt. */
.cc-btn-accept,
.cc-btn-reject { color: var(--text); background: transparent; border-color: var(--border-strong); }
.cc-btn-accept:hover,
.cc-btn-reject:hover { background: var(--fill-subtle); border-color: var(--accent); }
.cc-btn-ghost { color: var(--text-muted); background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; margin-left: auto; }
.cc-btn-ghost:hover { color: var(--text); }

/* ── Einstellungen (Kategorien) ── */
.cc-cats { display: grid; gap: 12px; margin: 4px 0 20px; }
.cc-cat {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cc-cat-copy { flex: 1; }
.cc-cat-copy strong { display: block; color: var(--text); font-size: 1.02rem; }
.cc-cat-copy span { display: block; margin-top: 3px; color: var(--text-muted); font-size: .9rem; line-height: 1.5; }

/* Umschalter */
.cc-switch { position: relative; flex: 0 0 auto; width: 46px; height: 27px; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-track {
  position: absolute; inset: 0;
  background: var(--fill); border-radius: 999px;
  transition: background .18s ease;
}
.cc-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25);
  transition: transform .2s var(--ease-out, ease);
}
.cc-switch input:checked + .cc-track { background: var(--accent); }
.cc-switch input:checked + .cc-track::after { transform: translateX(19px); }
.cc-switch input:focus-visible + .cc-track { box-shadow: var(--focus); }
.cc-switch input:disabled { cursor: not-allowed; }
.cc-switch input:disabled + .cc-track { background: var(--accent); opacity: .5; }

.cc-settings-only { display: none; }
.cc-root.is-settings .cc-settings-only { display: block; }
/* Die Kategorien sind ein Grid (Abstand zwischen den Karten) - die Regel darüber
   hätte sie auf display:block gesetzt und den Abstand verschluckt. */
.cc-root.is-settings .cc-cats { display: grid; }
.cc-root.is-settings .cc-intro-only { display: none; }

@media (max-width: 520px) {
  .cc-actions { flex-direction: column; align-items: stretch; }
  .cc-btn { width: 100%; }
  .cc-btn-ghost { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-panel, .cc-backdrop, .cc-track::after { transition: none; }
}