/* ══════════════════════════════════════════════════════════════════════════
   TOBEY NIZE — GESTALTUNG DER EINWILLIGUNG
   Angelegt 2026-08-10. Gehört zu assets/js/consent.js.

   🔍 FÜR DICH ERKLÄRT
   Ein Einwilligungsfenster ist zwangsläufig ein Kasten — man kann es nicht
   „wegdesignen". Also wird es ein Kasten in DIESER Bildsprache. Diese Seite
   kennt genau eine Form: eine Fläche, die an einer Wasserlinie bricht und
   darunter Licht trägt. Genau das ist das Fenster — eine Fläche, die aus dem
   dunklen Wasser aufsteigt, mit einer hellen Wasserlinie als Oberkante und
   ihrem Nachleuchten darunter. Es hat keine Ecken und keinen Rahmen.

   ── DREI BAUREGELN DIESES HAUSES, HIER EINGEHALTEN ────────────────────────
   1 · KEINE `border`. Nirgends. Jede Kante ist ein Verlauf oder ein Licht —
       genau wie im Rest der Seite. Die Abnahme misst „sichtbare CSS-border
       = 0", und das bleibt so.
   2 · KEIN `mask-image` in dieser Datei. Die weiche Oberkante ist ein
       Hintergrund-Verlauf. Grund: Maske und Animation vertragen sich nicht
       (Chrome verwirft die Maske auf animierten Ebenen), und Maske plus
       Schatten kappt den Schatten zum Rechteck — daraus entstehen die
       „billigen Kästen". Ein Verlauf hat beide Probleme nicht.
   3 · Alles liegt `position:fixed` über der Seite. Es wird keine einzige
       Zeile Inhalt verschoben — das freigegebene Layout bleibt unberührt,
       und Google misst keinen Layout-Sprung (CLS bleibt bei 0).
   ══════════════════════════════════════════════════════════════════════ */

/* Werte 1:1 aus style.css :root übernommen. Hier noch einmal notiert, damit
   dieses Fenster auch dann stimmt, wenn es allein geladen wird (Prüfstand,
   404-Seite).
   ⚠ Sie stehen auf :root und NICHT auf .cq — gemessen am 2026-08-10: Der
   Platzhalter (.cq-embed) sitzt mitten im Seiteninhalt, also außerhalb des
   Banners. Standen die Werte auf .cq, waren sie dort unbekannt (ungültige
   var() ohne Rückfallwert löscht die Eigenschaft). */
:root{
  --cq-void:  #01050c;
  --cq-abyss: #020a15;
  --cq-night: #06172b;
  --cq-deep:  #04101f;
  --cq-aqua:      #7fe6f0;
  --cq-aqua-hot:  #cdf8ff;
  --cq-aqua-mid:  #3fa9bd;
  --cq-aqua-deep: #1a6379;
  --cq-foam: #e6f6f9;
  --cq-haze: #8ea9b6;
  --cq-dim:  #4a6674;
  --cq-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --cq-mass: "Archivo Black", "Arial Black", sans-serif;
}

.cq{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:flex-end; justify-content:center;
  font-family:var(--cq-mono);
}

/* Der Scrim ist tiefes Wasser: die Seite bleibt sichtbar, tritt aber zurück. */
.cq__scrim{
  position:absolute; inset:0;
  background:radial-gradient(130% 100% at 50% 100%, rgba(6,23,43,.72), rgba(1,5,12,.9) 72%);
  backdrop-filter:blur(3px) saturate(.9);
  -webkit-backdrop-filter:blur(3px) saturate(.9);
}

/* ── DIE FLÄCHE ────────────────────────────────────────────────────────
   Vier Verläufe übereinander, von oben nach unten gelesen:
   1 · die Wasserlinie selbst — 1 px Aqua, die hellste Kante des Fensters
   2 · ihr Nachleuchten, das nach ~90 px vollständig ausläuft
   3 · die weiche Oberkante: das Dunkel setzt erst nach 1 px voll ein
   4 · die Tiefe darunter
   Keine Ecke, keine Linie, kein Rahmen — nur Licht auf Wasser.           */
.cq__box{
  position:relative;
  width:min(720px,100%);
  padding:clamp(1.5rem,3.4vw,2.4rem) clamp(1.2rem,3.2vw,2.2rem) clamp(1.2rem,2.6vw,1.8rem);
  color:var(--cq-foam);
  background:
    linear-gradient(180deg, var(--cq-aqua) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(127,230,240,.16), rgba(127,230,240,0) 90px),
    linear-gradient(180deg, rgba(6,23,43,.0) 0, var(--cq-night) 1px, var(--cq-deep) 46%, var(--cq-abyss) 100%);
  animation:cq-auf .46s cubic-bezier(.16,.84,.24,1) both;
}

@keyframes cq-auf{
  from{ transform:translateY(18px); opacity:0; }
  to  { transform:none;             opacity:1; }
}
/* Das Fenster bekommt beim Öffnen den Fokus (damit Screenreader es vorlesen).
   Es ist per Tabulator nicht erreichbar, deshalb braucht es keinen Ring —
   und darf keinen haben, sonst sähe es aus wie ein anklickbares Feld. */
.cq__box:focus{ outline:none; }

/* ── SCHRIFT ────────────────────────────────────────────────────────── */
.cq__kicker{
  margin:0 0 .6rem;
  font-size:clamp(.56rem,.72vw,.66rem);
  letter-spacing:.36em; text-transform:uppercase;
  color:var(--cq-aqua);
}
.cq__titel{
  margin:0 0 .75rem;
  font-family:var(--cq-mass); font-weight:400;
  font-size:clamp(1rem,2vw,1.36rem); line-height:1.26;
  letter-spacing:-.01em; color:var(--cq-aqua-hot);
}
.cq__text{
  margin:0 0 .6rem;
  font-size:clamp(.76rem,1.02vw,.86rem); line-height:1.66;
  color:rgba(230,246,249,.84);
}
/* Die tatsächlich angefragten Adressen — gerechnet, nicht getippt. */
.cq__hosts{
  margin:0 0 1.2rem;
  font-size:clamp(.62rem,.8vw,.7rem);
  letter-spacing:.08em; color:var(--cq-aqua-mid);
  overflow-wrap:anywhere;
}

/* ── DIE ZWEI KNÖPFE ───────────────────────────────────────────────────
   Baugleich, bewusst. Gleiche Fläche, gleiche Farbe, gleiche Schrift —
   nur der Text unterscheidet sie. Ein hervorgehobenes „Akzeptieren" neben
   einem blassen „Ablehnen" ist die häufigste Abmahnursache überhaupt.
   Der Saum ist ein INNEN liegender Schatten, keine `border`.             */
.cq__reihe{ display:flex; gap:clamp(.5rem,1.2vw,.85rem); flex-wrap:wrap; }

.cq-b{
  flex:1 1 200px;
  padding:.86em 1.15em;
  background:linear-gradient(180deg, rgba(26,99,121,.55), rgba(4,16,31,.9));
  box-shadow:inset 0 0 0 1px rgba(127,230,240,.34);
  color:var(--cq-aqua-hot);
  font-family:var(--cq-mono); font-weight:500;
  font-size:clamp(.7rem,.92vw,.8rem);
  letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer; border:0;
  transition:background .2s ease, box-shadow .2s ease, transform .18s ease;
}
.cq-b:hover{
  background:linear-gradient(180deg, rgba(63,169,189,.6), rgba(6,23,43,.92));
  box-shadow:inset 0 0 0 1px rgba(205,248,255,.6);
}
.cq-b:active{ transform:translateY(1px); }
.cq-b:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--cq-aqua-hot);
  background:linear-gradient(180deg, rgba(63,169,189,.6), rgba(6,23,43,.92));
}

.cq__fein{
  margin:1rem 0 0;
  font-size:clamp(.62rem,.8vw,.7rem); line-height:1.62;
  color:var(--cq-dim);
}
.cq__fein a{ color:var(--cq-aqua-mid); text-decoration:underline; text-underline-offset:2px; }

/* ══ PLATZHALTER STATT FREMDINHALT ═══════════════════════════════════════
   Steht dort, wo später der Player sitzt, und ist exakt so groß wie er —
   deshalb springt beim Laden nichts. Dieselbe Sprache: eine Fläche unter
   Wasser mit einer Lichtlinie oben.                                       */
.cq-embed{
  position:relative;
  aspect-ratio:var(--cq-ar,152/100);
  width:100%;
  background:
    linear-gradient(180deg, rgba(127,230,240,.55) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(127,230,240,.10), rgba(127,230,240,0) 70px),
    linear-gradient(180deg, var(--cq-night), var(--cq-abyss) 80%);
  display:grid; place-items:center;
  overflow:hidden;
}
.cq-embed.is-geladen{ background:none; display:block; }
.cq-embed__frame{ width:100%; height:100%; border:0; display:block; }

.cq-ph{
  font-family:var(--cq-mono);
  text-align:center; padding:1.1rem;
  display:flex; flex-direction:column; align-items:center; gap:.78rem;
}
.cq-ph__k{
  margin:0; font-size:clamp(.56rem,.75vw,.66rem);
  letter-spacing:.32em; text-transform:uppercase; color:var(--cq-aqua);
}
.cq-ph__b{ flex:0 0 auto; }
.cq-ph__t{
  margin:0; max-width:36ch;
  font-size:clamp(.6rem,.8vw,.68rem); line-height:1.58;
  color:var(--cq-dim);
}

/* ══ WIDERRUF IM FUSS ════════════════════════════════════════════════════
   Sitzt als weiterer Listenpunkt in der Legal-Spalte und erbt deren
   Gestaltung — er sieht aus wie ein Geschwister von „Imprint"/„Privacy".  */
.cq-widerruf{ cursor:pointer; }
/* Nur der Notfall-Platz, falls der Fuß einmal umgebaut wird. */
.cq-widerruf--frei{
  position:fixed; right:10px; bottom:8px; z-index:9998;
  padding:.4em .7em; background:rgba(1,5,12,.88); color:var(--cq-haze);
  font-family:var(--cq-mono); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase;
}

/* ══ SCHMALE FASSUNG ════════════════════════════════════════════════════ */
@media (max-width:560px){
  .cq__box{ width:100%; }
  .cq-b{ flex:1 1 100%; }
}

/* ══ RUHE-EINSTELLUNG ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .cq__box{ animation:none; }
  .cq-b{ transition:none; }
}