/* Einwilligungsbanner (12.11.2026).
   Gestaltung bewusst wie die Seite: dunkle Tafel, Gold als Akzent, Poppins.
   Wichtig an den Knoepfen: "Nur notwendige" ist genauso gross, genauso deutlich
   und genauso leicht zu treffen wie "Alle akzeptieren". Ein Ablehnen, das
   schwerer faellt als ein Annehmen, ist keine freie Einwilligung. */
/* Leiste, keine Sperrtafel. Die Seite bleibt lesbar und bedienbar, waehrend die
   Frage offen ist. Das darf sie auch: Es laedt ja ohnehin nichts, solange niemand
   geklickt hat. Eine graue Tafel ueber dem Einstiegsfilm wuerde genau den ersten
   Eindruck zudecken, von dem diese Seite handelt. */
.ew-huelle{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:none;
  padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));pointer-events:none}
.ew-huelle.auf{display:block}
@media(min-width:760px){.ew-huelle{padding:18px}}

.ew-tafel{pointer-events:auto;width:100%;max-width:620px;margin-inline:auto;
  background:#161412;color:#F3EFE8;
  border:1px solid #332F2A;border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.6);
  font:400 15px/1.6 "Poppins","Helvetica Neue",Arial,sans-serif;
  max-height:calc(100dvh - 90px);overflow-y:auto;
  padding:24px 22px calc(22px + env(safe-area-inset-bottom,0px))}
@media(min-width:760px){.ew-tafel{padding:30px 32px}}

.ew-tafel h2{font:600 22px/1.25 "Lora",Georgia,serif;margin:0 0 10px;color:#fff}
.ew-tafel p{margin:0 0 14px;color:#C9C3B9}
.ew-tafel a{color:#D4AF37}

.ew-knopfreihe{display:flex;flex-direction:column;gap:10px;margin-top:20px}
@media(min-width:560px){.ew-knopfreihe{flex-direction:row}}
.ew-knopf{flex:1 1 0;min-height:48px;padding:13px 18px;border-radius:3px;cursor:pointer;
  font:600 15px/1.2 "Poppins","Helvetica Neue",Arial,sans-serif;text-align:center;
  border:1px solid #4A443C;background:#201D1A;color:#F3EFE8}
@media(hover:hover){.ew-knopf:hover{border-color:#D4AF37}}
.ew-knopf.ja{background:#F97316;border-color:#F97316;color:#1A0F00}
@media(hover:hover){.ew-knopf.ja:hover{filter:brightness(1.07)}}
.ew-schmal{flex:0 0 auto;background:none;border:0;color:#C9C3B9;text-decoration:underline;
  text-underline-offset:3px;min-height:44px;padding:10px 4px;cursor:pointer;
  font:400 14px/1.2 "Poppins","Helvetica Neue",Arial,sans-serif}
@media(hover:hover){.ew-schmal:hover{color:#fff}}

.ew-liste{margin:18px 0 0;border-top:1px solid #332F2A}
.ew-reihe{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid #332F2A}
.ew-reihe h3{font:600 15px/1.4 "Poppins",Arial,sans-serif;margin:0 0 3px;color:#fff}
.ew-reihe p{margin:0;font-size:13.5px;color:#9A938A}
.ew-schalter{flex:0 0 auto;position:relative;width:46px;height:26px;margin-top:2px}
.ew-schalter input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ew-bahn{position:absolute;inset:0;border-radius:999px;background:#3A352F;transition:background .18s}
.ew-bahn::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:transform .18s}
.ew-schalter input:checked + .ew-bahn{background:#F97316}
.ew-schalter input:checked + .ew-bahn::after{transform:translateX(20px)}
.ew-schalter input:disabled + .ew-bahn{background:#D4AF37;opacity:.55}
.ew-schalter input:focus-visible + .ew-bahn{outline:2px solid #D4AF37;outline-offset:2px}

/* Link in der Fusszeile, um die Auswahl spaeter zu aendern. Das Zuruecknehmen
   muss genauso einfach sein wie das Erteilen. */
.ew-aendern{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;
  text-decoration:none;border-bottom:1px solid transparent}
@media(hover:hover){.ew-aendern:hover{border-bottom-color:#D4AF37}}