/* ---------------------------------------------------------------
   QuInf-Erklärvideos: Bühne, Layout und Steuerung.
   Gilt für alle Videos — siehe docs/videos/DESIGN-REGELN.md.
   Farben kommen ausschließlich aus den Variablen von styles.css.
   --------------------------------------------------------------- */

:root {
  /* Glas des kanonischen Handys — dieselben Werte wie .tap-telefon */
  --qv-glas: rgba(255, 255, 255, 0.4);
  --qv-glas-rand: rgba(255, 255, 255, 0.6);
  --qv-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --qv-glas: rgba(28, 28, 30, 0.45);
    --qv-glas-rand: rgba(255, 255, 255, 0.18);
  }
}

/* ---------- Rahmen: der Container, auf den die Formate reagieren ---------- */

.qv-rahmen {
  container-type: inline-size;
  position: relative;
  /* Eigener Stapelkontext: nichts aus dem Player kann über den Inhalt
     daneben oder darunter geraten. */
  isolation: isolate;
  border-radius: 18px;
  border: 0.5px solid var(--separator);
  background: var(--bg);
  overflow: hidden;
}

.qv-stapel {
  position: relative;
}

/* ---------- Bühne: 4:5 auf dem Handy, 16:9 ab 560px Containerbreite ---------- */

.qv-buehne {
  /* aspect-ratio reserviert den Platz, bevor JavaScript läuft (CLS = 0) */
  aspect-ratio: 4 / 5;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--bg);
  overflow: hidden;
}

.qv-bild {
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.qv-bild svg {
  display: block;
  width: 100%;
  height: 100%;
}

.qv-textfeld {
  padding: 4cqw 5cqw 5cqw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Der Beat-Wechsel blendet nur diesen Wrapper über (250 ms) — das Textfeld
   selbst wird von der Engine animiert (Ausblenden vor der Endkarte). */
.qv-text {
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
  transition: opacity 250ms var(--qv-ease);
}

.qv-k {
  font-size: clamp(11px, 1.4cqw, 15px);
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--label-secondary);
  min-height: 1.2em;
}

.qv-k.ist-loesung {
  color: var(--accent);
}

.qv-ue {
  margin: 0;
  font-size: clamp(22px, 4.2cqw, 48px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.020em;
  color: var(--label);
  text-wrap: balance;
}

.qv-z {
  margin: 0;
  font-size: clamp(15px, 2.2cqw, 22px);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.008em;
  color: var(--label-secondary);
}

@container (min-width: 560px) {
  .qv-buehne {
    aspect-ratio: 16 / 9;
    grid-template-rows: 1fr;
    grid-template-columns: 44% 56%;
  }
  .qv-textfeld {
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    padding: 6cqw 3cqw 6cqw 4cqw;
    gap: 1cqw;
  }
  .qv-bild {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ---------- Text im Bildfeld (SVG) ----------
   Groessen in Nutzereinheiten der 1000er-Zeichenflaeche, abgeleitet aus
   .tap-karte und .tap-benachrichtigung. */

.qv-bild text {
  font-family: inherit;
  font-weight: 500;
}

.qv-s-logo { font-size: 33px; font-weight: 600; letter-spacing: -0.01em; fill: #fff; }
.qv-s-nfc { font-size: 28px; letter-spacing: 0.06em; fill: #fff; fill-opacity: 0.85; }
.qv-s-q { font-size: 26px; font-weight: 600; fill: #fff; }
.qv-s-titel { font-size: 28px; font-weight: 600; fill: var(--label); }
.qv-s-zeile { font-size: 25px; font-weight: 400; fill: var(--label-secondary); }
.qv-s-label { font-size: 26px; font-weight: 500; fill: var(--label-secondary); }
.qv-s-label-hell { font-size: 26px; font-weight: 500; fill: var(--label-tertiary); }
.qv-s-weiss { font-size: 26px; font-weight: 500; fill: #fff; }
.qv-s-gross { font-size: 34px; font-weight: 600; fill: var(--label); }

/* ---------- Logo-Sting und die kleine Wortmarke ---------- */

.qv-sting {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.qv-wortmarke {
  position: absolute;
  top: 2.4cqw;
  left: 3cqw;
  display: flex;
  font-size: clamp(13px, 1.7cqw, 19px);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1;
  white-space: nowrap;
  transform-origin: left top;
  color: var(--label);
  opacity: 0.9;
}

/* „Qu" und „Inf" liegen doppelt übereinander: unten blau, oben in Textfarbe.
   So wird der Farbwechsel im Sting nur über opacity gemacht und die
   CSS-Variablen bleiben erhalten (auch bei Dark Mode). */
.qv-teil {
  position: relative;
  color: var(--accent);
}

.qv-teil b {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--label);
}

.qv-rest,
.qv-luecke {
  display: inline-block;
  overflow: hidden;
  color: var(--label-secondary);
  white-space: pre;
}

/* ---------- Endkarte ---------- */

.qv-ende {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  padding: 6cqw;
  text-align: center;
  background: var(--bg);
  opacity: 0;
}

.qv-ende[inert] {
  pointer-events: none;
}

.qv-ende-marke {
  font-size: clamp(30px, 5.6cqw, 64px);
  font-weight: 600;
  letter-spacing: -0.020em;
  line-height: 1;
  color: var(--label);
}

.qv-ende-ue {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(19px, 3.2cqw, 34px);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--label);
}

.qv-ende-z {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(14px, 2cqw, 20px);
  font-weight: 400;
  letter-spacing: -0.008em;
  color: var(--label-secondary);
}

/* Echter Knopf im Stil von .btn-primaer */
.qv-knopf {
  margin-top: 1cqw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: 50px;
  padding: 0 24px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-size: clamp(15px, 1.9cqw, 17px);
  font-weight: 500;
  letter-spacing: -0.008em;
  transition: transform 100ms var(--qv-ease);
}

.qv-knopf:active {
  transform: scale(0.97);
}

/* ---------- Fläche zum Antippen (Start und Pause) ---------- */

.qv-tap {
  position: absolute;
  inset: 0;
  width: 100%;
  cursor: pointer;
  background: none;
}

.qv-tap:focus-visible,
.qv-knopf:focus-visible,
.qv-spielen:focus-visible,
.qv-marke:focus-visible,
.qv-nochmal:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Standbild vor dem Laden: Play-Zeichen in der Mitte der Bühne */
.qv-tap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 250ms var(--qv-ease);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.qv-rahmen.ist-pause .qv-tap::after {
  opacity: 1;
}

.qv-tap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-40%, -50%);
  opacity: 0;
  transition: opacity 250ms var(--qv-ease);
  z-index: 1;
}

.qv-rahmen.ist-pause .qv-tap::before {
  opacity: 1;
}

/* ---------- Standbild, solange das Video-Skript noch nicht geladen ist ---------- */

.qv-standbild {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.qv-standbild-play {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  display: grid;
  place-items: center;
}

.qv-standbild-play::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}

.qv-standbild-titel {
  font-size: clamp(15px, 2cqw, 20px);
  font-weight: 500;
  color: var(--label-secondary);
}

/* ---------- Steuerleiste ---------- */

.qv-steuerung {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas:
    "fortschritt fortschritt fortschritt"
    "spielen zeit nochmal";
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  min-height: 116px;
  border-top: 0.5px solid var(--separator);
  background: var(--bg-elevated);
}

@container (min-width: 560px) {
  .qv-steuerung {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    grid-template-areas: "spielen fortschritt zeit nochmal";
    min-height: 64px;
  }
}

.qv-spielen {
  grid-area: spielen;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 100ms var(--qv-ease);
}

.qv-spielen:active {
  transform: scale(0.97);
}

.qv-spielen svg {
  width: 20px;
  height: 20px;
}

.qv-fortschritt {
  grid-area: fortschritt;
  display: flex;
  gap: 3px;
}

.qv-marke {
  flex: var(--anteil) 1 0;
  /* 44px Tippfläche, auf sehr schmalen Bühnen etwas weniger, damit die
     Leiste nicht breiter wird als der Player. */
  min-width: min(44px, 18%);
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0;
  cursor: pointer;
}

.qv-marke span {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--separator);
  overflow: hidden;
}

.qv-marke i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.qv-zeit {
  grid-area: zeit;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--label-secondary);
  white-space: nowrap;
  text-align: center;
}

.qv-nochmal {
  grid-area: nochmal;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.qv-nochmal[hidden] {
  display: none !important;
}

/* ---------- Textliste unter dem Player ---------- */

.qv-liste {
  margin-top: 12px;
  font-size: 15px;
  color: var(--label-secondary);
}

.qv-liste summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--label);
  font-weight: 500;
  cursor: pointer;
}

.qv-liste summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.qv-liste ol {
  margin: 0 0 8px;
  padding-left: 22px;
}

.qv-liste li {
  margin-bottom: 4px;
}

/* ---------- Umschalter über dem Player (Startseite) ---------- */

/* Die Knöpfe brechen um — seitlich gescrollt wird auf der Seite nie. */
.qv-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

/* Der aktive Umschalter sieht aus wie ein gewählter .filter-chip.
   (role="tab" verträgt kein aria-pressed, deshalb aria-selected.) */
.qv-wahl .filter-chip[aria-selected="true"] {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

/* ---------- Mehrere Player untereinander ---------- */

.qv + .qv,
.qv-block + .qv-block {
  margin-top: 40px;
}