/* Namen bewusst deutsch und ohne „cookie"/„consent" — Begruendung im Kopf
   von js/einwilligung.js: `##.cc-banner` ist eine generische Regel der
   Blockerlisten und hat die Tafel auf jedem Geraet mit Blocker ausgeblendet. */
/* BOBO Cookie-Consent — abgestimmt auf das Broadcast-Design */
.ew-wurzel { --ew-lime: #c8ff4c; --ew-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ── Banner ───────────────────────────────────────────────────────────────── */
/* Die Tafel ist **standardmaessig sichtbar**. Das ist Absicht und der Kern der
   Korrektur vom 09.10.2026: Vorher stand hier `transform: translateY(110%)`, und
   sichtbar wurde sie erst, wenn JavaScript in einem requestAnimationFrame die
   Klasse `is-visible` setzte. Faellt dieser eine Frame aus — Seite aus dem
   Vor-/Zurueck-Speicher geholt, im Hintergrund geladen, Energiesparmodus, iOS
   drosselt — bleibt sie fuer immer 110 % unter dem Bildschirm: im DOM vorhanden,
   auf dem Schirm nichts. Jetzt faehrt sie per Animation herein; deren Endzustand
   ist der sichtbare, und ohne Animation ist sie sofort da. Kein Zustand mehr, in
   dem sie unsichtbar haengen bleibt.

   Kein backdrop-filter mehr: der Grund ist zu 98 % deckend, der Weichzeichner war
   nicht zu sehen — kostete aber auf schwachen Mobil-Grafikeinheiten Darstellung. */
.ew-tafel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000;
  background: #0b0d0f;
  border-top: 2px solid var(--ew-lime);
  box-shadow: 0 -10px 40px rgba(0,0,0,.5);
  color: #fff;
  /* Platz fuer die Gestenleiste des iPhone — sonst liegen die Knoepfe darunter. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: ew-herein .3s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes ew-herein { from { transform: translateY(110%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ew-tafel { animation: none; } }
/* `is-visible` setzt das Skript weiterhin; sie ist jetzt nur noch Beiwerk. */
.ew-tafel.is-visible { transform: none; }
.ew-tafel-innen {
  max-width: 1560px; margin: 0 auto; padding: 24px 32px;
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
}
.ew-titel { font-size: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: -.2px; margin: 0 0 8px; }
.ew-beschreibung { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.72); margin: 0; max-width: 880px; }
.ew-beschreibung a { color: var(--ew-lime); }
.ew-knoepfe { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ── Buttons (Akzeptieren & Ablehnen gleich groß = gleichwertig) ──────────── */
.ew-knopf {
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 13px 22px; border: 1px solid transparent; min-width: 150px;
  text-align: center; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 94% 100%, 0 100%);
}
.ew-knopf:hover { transform: translateY(-1px); }
.ew-knopf--ja  { background: var(--ew-lime); color: #000; border-color: var(--ew-lime); }
.ew-knopf--ja:hover { background: #fff; border-color: #fff; }
.ew-knopf--nein  { background: #2a2e33; color: #fff; border-color: rgba(255,255,255,.25); }
.ew-knopf--nein:hover { background: #3a3f45; border-color: rgba(255,255,255,.45); }
.ew-knopf--wahl { background: transparent; color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.2); min-width: 0; }
.ew-knopf--wahl:hover { color: #fff; border-color: rgba(255,255,255,.4); }

/* ── Einstellungen-Modal ──────────────────────────────────────────────────── */
/* Dieselbe Haertung wie bei der Tafel: standardmaessig sichtbar, Einblenden per
   Animation. Vorher stand hier `opacity: 0` — blieb der eine Frame aus, war das
   Einstellungsfenster unsichtbar und der Rest der Seite trotzdem gesperrt. */
.ew-schicht {
  position: fixed; inset: 0; z-index: 2147483001;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: ew-aufblenden .25s ease both;
}
@keyframes ew-aufblenden { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ew-schicht { animation: none; } }
.ew-schicht.is-visible { opacity: 1; }
.ew-fenster {
  background: #0f1215; border: 1px solid rgba(255,255,255,.12);
  border-top: 2px solid var(--ew-lime);
  max-width: 620px; width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 32px; color: #fff;
}
.ew-schicht.is-visible .ew-fenster { transform: translateY(0); }
.ew-fenster-titel { font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: -.3px; margin: 0 0 10px; }
.ew-fenster-text { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.7); margin: 0 0 24px; }
.ew-fenster-text a { color: var(--ew-lime); }

.ew-gruppe { border: 1px solid rgba(255,255,255,.1); background: #0b0d0f; padding: 18px 20px; margin-bottom: 14px; }
.ew-gruppe-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.ew-gruppe-name { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.ew-gruppe-text { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.6); margin: 0; }
.ew-gruppe-stand--fest { font-family: var(--ew-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ew-lime); border: 1px solid rgba(200,255,76,.3); padding: 4px 8px; }

/* Toggle-Switch */
.ew-schalter { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; }
.ew-schalter input { opacity: 0; width: 0; height: 0; }
.ew-regler { position: absolute; inset: 0; background: #2a2e33; border: 1px solid rgba(255,255,255,.2); transition: background .2s ease; }
.ew-regler::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; transition: transform .2s ease; }
.ew-schalter input:checked + .ew-regler { background: var(--ew-lime); border-color: var(--ew-lime); }
.ew-schalter input:checked + .ew-regler::before { transform: translateX(20px); background: #000; }
.ew-schalter input:focus-visible + .ew-regler { outline: 2px solid var(--ew-lime); outline-offset: 2px; }

.ew-fenster-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.ew-fenster-knoepfe .ew-knopf { flex: 1; min-width: 140px; }

/* ── Mobil ────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .ew-tafel-innen { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; }
  .ew-knoepfe { justify-content: stretch; }
  .ew-knoepfe .ew-knopf { flex: 1; }
  .ew-knopf { min-width: 0; }
  .ew-fenster { padding: 24px 20px; }
  .ew-fenster-knoepfe { flex-direction: column; }
}

/* Unter 560px standen drei Knoepfe nebeneinander: `flex: 1` teilt die Breite
   gleichmaessig auf, ohne nach dem Inhalt zu fragen — das Wort „Einstellungen"
   passte nicht und lief aus seinem Kasten heraus. Jetzt teilen sich Ablehnen
   und Akzeptieren die obere Zeile (gleich gross, wie es sein muss), und die
   Einstellungen stehen in voller Breite darunter. */
@media (max-width: 560px) {
  .ew-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ew-knoepfe .ew-knopf { flex: none; padding: 13px 10px; }
  .ew-knoepfe .ew-knopf--wahl { grid-column: 1 / -1; }
}