/* Einwilligung zur Statistik: Leiste (unten fest oder im Textfluss oben), Einstellungsfenster, Schalter, Hinweise.
   Ein Block, alle Regeln beieinander. Markup: _vorlagen/einwilligung.html, Verhalten: js/einwilligung.js.
   Vorgaben aus Recht\PRUEFUNG-ANALYTICS.md: Ablehnen und Akzeptieren tragen dieselbe Klasse (.einw__knopf) und
   damit dieselbe Gestaltung, Einstellungen ist ein gleichrangiger dritter Knopf. Keine Farbe, kein Gewicht und keine
   Groesse bevorzugt eine Antwort. Die Leiste ist nicht modal: kein Abdunkeln, die Seite bleibt lesbar. */

/* ---------- Leiste ---------- */
.einw {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70; /* ueber dem klebenden Kopf (60), unter der Menueschublade (80) */
/* Die Hoehe ergibt sich aus dem Inhalt (Handy: 320 x 568 und 375 x 667 je etwa 40 Prozent, gemessen mit
     tests\seite\einwilligung-browser.js, Desktop etwa ein Viertel). Die Grenze ist nur die letzte Rueckfallebene
     (sehr kleine Fenster, grosse Systemschrift): dann scrollt der Banner innen. */
  max-height: 72vh;
  max-height: 72dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--obsidian-2);
  border-top: 2px solid var(--volt);
  color: var(--offwhite);
}
.einw[hidden] { display: none; }
.einw:focus-visible { outline-offset: -5px; }
.einw__innen {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  padding-bottom: 6px;
}
.einw__titel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.einw__text { font-size: 12.5px; line-height: 1.36; text-wrap: pretty; }
.einw__links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; }
.einw__links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px; /* Handy: kompakt (WCAG 2.5.8 verlangt 24 px), ab 560 px wieder 44 px, siehe unten */
  font-size: 13px;
  color: var(--offwhite);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-ui) ease-in-out;
}
@media (hover: hover) { .einw__links a:hover { color: var(--volt); } }
.einw__knoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }

/* Sichtbarer Hinweis, wenn die Auswahl nicht gespeichert werden konnte (Local Storage gesperrt). Der Banner bleibt stehen. */
.einw__hinweis {
  margin: 2px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--volt);
  background: var(--obsidian-3);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}
.einw__hinweis[hidden] { display: none; }

/* Ein Knopf fuer alle Antworten. */
.einw__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px 4px;
  border: 1px solid var(--mist);
  background: transparent;
  color: var(--offwhite);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t-ui) ease-in-out, border-color var(--t-ui) ease-in-out, color var(--t-ui) ease-in-out, transform var(--t-tap) ease-out;
}
.einw__knopf:active { transform: scale(0.97); }
@media (hover: hover) { .einw__knopf:hover { border-color: var(--volt); color: var(--volt); } }

/* Handy (unter 560 px): die Ueberschrift steht als Vorspann in der ersten Zeile des Textes (spart eine Zeile), der
   Linkrow ist schmaler (WCAG 2.5.8 verlangt 24 px) und die Leiste sitzt enger am Rand. Die Knoepfe bleiben 44 px hoch. */
@media (max-width: 559px) {
  /* Schrift und Zeilenhoehe stehen am Block, weil die Zeilenhoehe einer Zeile mit inline gesetzten Kindern vom Block kommt. */
  .einw__innen { display: block; padding: 8px 16px 2px; font-size: 12.5px; line-height: 1.36; }
  .einw__titel { display: inline; margin-right: 6px; font-size: 12px; }
  .einw__text { display: inline; }
  .einw__hinweis { margin: 6px 0 0; }
  .einw__knoepfe { margin-top: 6px; }
  .einw__links a { min-height: 30px; }
}

/* Schmale Handys (bis 389 px, darunter 360 x 640 und 320 x 568): die drei Knoepfe bleiben in einer Reihe (je rund 90 px,
   die Beschriftung darf auf zwei Zeilen umbrechen, die Hoehe bleibt 44 px), denn eine zweite Knopfreihe kostete rund
   50 px und damit fast 9 Prozent der Fensterhoehe. Text 12 px, Rand 12 px. */
@media (max-width: 389px) {
  .einw__innen { padding: 6px 12px 3px; font-size: 12px; line-height: 1.3; }
  .einw__knoepfe { margin-top: 5px; }
  .einw__text { font-size: 12px; line-height: 1.3; }
  .einw__links a { min-height: 26px; }
  .einw__knopf { font-size: 12px; padding: 2px 2px; }
}
@media (min-width: 560px) {
  .einw__innen { gap: 6px; padding-top: 12px; padding-bottom: 12px; }
  .einw__titel { font-size: 14px; }
  .einw__text { font-size: 14px; line-height: 1.45; }
  .einw__links a { min-height: 44px; }
  .einw__knoepfe { gap: 8px; }
  .einw__knopf { font-size: 14px; padding: 6px 14px; }
  .einw__hinweis { font-size: 14px; }
}
@media (min-width: 960px) {
  .einw__innen {
    grid-template-columns: minmax(0, 1fr) 224px;
    grid-template-areas: "titel knoepfe" "text knoepfe" "hinweis knoepfe" "links knoepfe";
    align-items: start;
    gap: 0 48px; /* keine Zeilenluecke: eine leere Hinweiszeile kostete sonst Hoehe, der Abstand steht als margin-top */
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .einw__titel { grid-area: titel; font-size: 16px; }
  .einw__text { grid-area: text; max-width: 78ch; margin-top: 6px; font-size: 15px; }
  .einw__hinweis { grid-area: hinweis; max-width: 78ch; margin: 6px 0 0; }
  .einw__links { grid-area: links; margin-top: 6px; }
  .einw__knoepfe { grid-area: knoepfe; grid-template-columns: 1fr; align-self: center; }
  .einw__knopf--einstellungen { grid-column: auto; }
}

/* Im Textfluss (data-modus="fluss", Impressum und Datenschutz): der Banner steht oben ueber dem Inhalt statt fest am
   unteren Rand und verdeckt so nie Text. Er scrollt mit der Seite, hat keine Hoehengrenze. */
.einw[data-modus="fluss"] {
  position: static;
  max-height: none;
  overflow: visible;
  border-bottom: 1px solid var(--slate);
}

/* Kurzer Hinweis nach einem Widerruf ohne Neuladen ("Die Statistik ist aus."), unten mittig, nicht modal. */
.einw-notiz {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 71;
  width: max-content;
  max-width: min(92vw, 420px);
  padding: 12px 16px;
  transform: translateX(-50%);
  border: 1px solid var(--volt);
  background: var(--obsidian-2);
  color: var(--offwhite);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
.einw-notiz[hidden] { display: none; }

/* Programmatischer Fokusziel nach einer Entscheidung: die Seite (main) bekommt den Fokus, aber keinen Rahmen. */
#inhalt:focus { outline: none; }

/* ---------- Einstellungsfenster (natives dialog, modal durch Nutzerhandlung) ---------- */
.einw-dialog {
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--slate);
  background: var(--obsidian-2);
  color: var(--offwhite);
}
.einw-dialog[open] { display: flex; flex-direction: column; }
.einw-dialog::backdrop { background: rgba(15, 20, 28, 0.78); }
.einw-dialog__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 16px 4px 20px;
  border-bottom: 1px solid var(--slate);
}
.einw-dialog__titel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.einw__zurueck {
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--offwhite);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-ui) ease-in-out;
}
@media (hover: hover) { .einw__zurueck:hover { color: var(--volt); } }
.einw-dialog__koerper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 20px 8px;
  font-size: 14px;
  line-height: 1.5;
}
.einw-dialog__koerper > p { margin-top: 12px; }
.einw-dialog__vorschau {
  padding: 8px 12px;
  background: var(--obsidian-3);
  border-left: 3px solid var(--volt);
}
.einw-dialog__fuss {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--slate);
}
@media (max-width: 359px) {
  .einw-dialog__fuss { grid-template-columns: 1fr; }
}

/* Kategorien */
.einw-kat { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--slate); }
.einw-kat__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.einw-kat__name { font-size: 16px; font-weight: 600; }
.einw-kat__fest {
  padding: 4px 8px;
  border: 1px solid var(--slate);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}
.einw-kat__text { margin-top: 4px; }
.einw-kat__details { margin-top: 4px; }
.einw-kat__details summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--volt);
  font-size: 14px;
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.einw-kat__details summary::-webkit-details-marker { display: none; }
.einw-kat__details summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-ui) ease-out;
}
.einw-kat__details[open] summary::before { transform: rotate(45deg); }
.einw-dienst { margin-top: 4px; padding: 12px 14px; background: var(--obsidian-3); overflow-wrap: break-word; }
.einw-dienst__name { font-size: 15px; font-weight: 600; }
.einw-dienst__liste { margin: 8px 0 0; }
.einw-dienst__liste dt {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}
.einw-dienst__liste dd { margin: 2px 0 0; font-size: 14px; }
.einw-dienst__cookie { display: block; }
.einw-dienst__cookie code { font-family: var(--font-mono); font-size: 13px; }
.einw__links--dialog { margin-top: 8px; }

/* Schalter: das echte Eingabefeld bleibt fokussierbar (unsichtbar), die Spur zeigt den Zustand.
   Der Zustand steht zusaetzlich als Wort daneben (An oder Aus), nie nur als Farbe. */
.einw-schalter { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.einw-schalter__feld { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.einw-schalter__spur {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 28px;
  border: 1px solid var(--mist);
  transition: background-color var(--t-ui) ease-in-out, border-color var(--t-ui) ease-in-out;
}
.einw-schalter__spur::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--mist);
  transition: transform var(--t-ui) ease-out, background-color var(--t-ui) ease-in-out;
}
.einw-schalter__feld:checked + .einw-schalter__spur { background: var(--volt); border-color: var(--volt); }
.einw-schalter__feld:checked + .einw-schalter__spur::after { background: var(--obsidian); transform: translateX(20px); }
.einw-schalter__feld:focus-visible + .einw-schalter__spur { outline: 3px solid var(--volt); outline-offset: 2px; }
.einw-schalter__zustand { min-width: 2.4em; font-size: 14px; font-weight: 600; }

/* Bewegung nur, wenn erlaubt (der globale Not-Aus in basis.css greift zusaetzlich). */
@media (prefers-reduced-motion: no-preference) {
  .einw:not([hidden]) { animation: einwEin 240ms ease-out both; }
  .einw-notiz:not([hidden]) { animation: einwNotizEin 200ms ease-out both; }
}
@keyframes einwEin {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes einwNotizEin {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media print { .einw, .einw-dialog, .einw-notiz { display: none !important; } }