/* ============================================================
   Cookie-Banner und Platzhalter fuer gesperrte Inhalte
   Farben aus der Seite uebernommen (Schwarz/Weiss mit Lila-Akzent).
   ============================================================ */

.cc-banner{
  position:fixed; inset:auto 0 0 0;
  z-index:9999;
  display:none;
  padding:16px;
  background:rgba(8,8,10,.97);
  border-top:2px solid #7a2ff2;
  box-shadow:0 -12px 40px rgba(0,0,0,.6);
  color:#f2f2f4;
  font-family:'Inter',system-ui,sans-serif;
  animation:ccRein .25s ease-out;
}
.cc-banner.cc-an{display:block}
@keyframes ccRein{from{transform:translateY(100%)}to{transform:translateY(0)}}

.cc-box{max-width:900px; margin:0 auto}

.cc-titel{
  margin:0 0 .4em;
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-size:clamp(20px,2.4vw,28px);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.cc-text{
  margin:0 0 1em;
  font-size:clamp(13px,1.1vw,15px);
  line-height:1.5;
  color:#c9c9d2;
}

/* Auswahl */
.cc-wahl{margin:0 0 1em; display:grid; gap:.6em}
.cc-wahl[hidden]{display:none}
.cc-zeile{
  display:flex; gap:.7em; align-items:flex-start;
  padding:.7em .9em;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  font-size:13px; line-height:1.45;
  cursor:pointer;
}
.cc-zeile input{margin-top:.2em; accent-color:#7a2ff2; width:16px; height:16px; flex:0 0 auto}
.cc-zeile b{color:#fff}
.cc-fest{opacity:.7; cursor:default}

/* Knoepfe: "Ablehnen" und "Akzeptieren" sind bewusst GLEICH gross und
   gleich auffaellig. Ein hervorgehobenes "Akzeptieren" neben einem blassen
   "Ablehnen" gilt als unzulaessige Beeinflussung. */
.cc-knoepfe{display:flex; gap:.7em; flex-wrap:wrap}
.cc-knopf{
  flex:1 1 200px;
  padding:.85em 1.4em;
  border:2px solid #7a2ff2;
  border-radius:8px;
  background:#7a2ff2;
  color:#fff;
  font-family:inherit;
  font-size:clamp(13px,1.1vw,15px);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  cursor:pointer;
  transition:filter .15s ease, transform .12s ease;
}
.cc-knopf:hover{filter:brightness(1.15)}
.cc-knopf:active{transform:translateY(1px)}

.cc-zweitzeile{
  display:flex; gap:1.2em; flex-wrap:wrap;
  margin-top:.9em;
  font-size:13px;
}
.cc-link{
  background:none; border:0; padding:0;
  color:#a98cff;
  font-family:inherit; font-size:13px;
  text-decoration:underline;
  cursor:pointer;
}
.cc-link:hover{color:#fff}
.cc-link[hidden]{display:none}

/* ---------- Platzhalter statt gesperrter Einbettung ---------- */

.cc-gesperrt{position:relative; min-height:200px; background:#141418}
.cc-gesperrt iframe{visibility:hidden}

.cc-platzhalter{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.5em;
  padding:1.2em;
  text-align:center;
  background:#141418;
  border:1px dashed rgba(255,255,255,.2);
  border-radius:10px;
  color:#c9c9d2;
  font-family:'Inter',system-ui,sans-serif;
}
.cc-ph-titel{
  margin:0;
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-size:18px; font-weight:900; text-transform:uppercase;
  color:#fff;
}
.cc-ph-text{margin:0; font-size:12.5px; line-height:1.45; max-width:38ch}
.cc-ph-knopf{
  margin-top:.3em;
  padding:.6em 1.3em;
  border:0; border-radius:7px;
  background:#7a2ff2; color:#fff;
  font-family:inherit; font-size:13px; font-weight:800;
  text-transform:uppercase; cursor:pointer;
}
.cc-ph-knopf:hover{filter:brightness(1.15)}
.cc-ph-immer{
  background:none; border:0; padding:0;
  color:#a98cff; font-family:inherit; font-size:12px;
  text-decoration:underline; cursor:pointer;
}
.cc-ph-immer:hover{color:#fff}

@media (max-width:600px){
  .cc-knopf{flex:1 1 100%}
}

/* ---------- Dauerhaft sichtbarer Schalter (Widerruf) ----------
   Art. 7 Abs. 3 DSGVO: Der Widerruf muss "jederzeit" und "ebenso einfach"
   moeglich sein wie die Einwilligung. Die Einwilligung kam ueber ein Feld,
   das von selbst aufging — deshalb hier ein auf jeder Seite sichtbarer
   Schalter, nicht nur ein Link in der Fusszeile. Bewusst klein und unten
   links, damit er nicht mit dem Twitch-Kasten (oben rechts) kollidiert. */
.cc-schalter{
  position:fixed; left:16px; bottom:16px;
  z-index:9998;
  display:flex; align-items:center; gap:0;
  padding:9px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(18,18,22,.92);
  color:#d8d8e2;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  transition:gap .2s ease, padding .2s ease, background .2s ease, color .2s ease;
}
.cc-schalter svg{
  width:20px; height:20px; flex:0 0 auto;
  fill:currentColor;
}
/* Beschriftung faehrt erst beim Zeigen aus — dauerhaft ausgeschrieben waere
   der Schalter auf dem Handy im Weg. */
.cc-schalter span{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-family:'Inter',system-ui,sans-serif;
  font-size:13px; font-weight:600;
  transition:max-width .25s ease;
}
.cc-schalter:hover,
.cc-schalter:focus-visible{
  gap:8px; padding:9px 14px 9px 11px;
  background:#7a2ff2; color:#fff;
  outline:none;
}
.cc-schalter:hover span,
.cc-schalter:focus-visible span{max-width:190px}

/* Waehrend das Banner offen ist, waere der Schalter doppelt gemoppelt. */
body.cc-banner-auf .cc-schalter{display:none}