/* ============================================================
   quiz-kahoot.css — Kahoot-Parity-Schicht des Quiz-Studios.
   Teil 1: Struktur der neuen Phasen-Screens (Intro, Scoreboard,
           Podium) und Sammel-Typen (Word Cloud, Offene Frage).
   Teil 2 (unten, „SKIN"): der eigentliche Kahoot-Look, gescopet
           unter body.qz-kahoot — aktiv nur in Live-/Solo-Spielszenen
           (app.js setzt die Klasse), Bibliothek/Editor bleiben im
           DenkRaum-Theme. Lädt NACH quiz.css.

   Design-Token-Map (aus Kahoot-Markenwerten, /design-mirror-Fallback
   ohne Scrape — Screenshots/CSS waren nicht extrahierbar):
     Hintergrund Spiel:  #46178F (Kahoot-Lila), Verlauf bis #2E0E6B
     Kacheln:            #E21B3C ▲  #1368CE ◆  #FFA602 ●  #26890C ■
     Schrift:            Montserrat 700/800 (lokal, OFL), Fallback system-ui
     Formen:             kleine Radien (4–8px), harte 0 4px 0-Schatten
     Text auf Lila:      #fff (+ leichte Text-Schatten auf Gelb-Kachel)
   BEWUSSTE 1:1-Abweichung von tokens.js-Kontrastdisziplin: Die
   Gelb-Kachel #FFA602 mit weißem Text entspricht dem Original,
   verfehlt aber WCAG AA — nur im Skin-Scope, per Text-Schatten
   abgemildert. Nicht „korrigieren", ohne den Look-Auftrag zu kennen.
   ============================================================ */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-var.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

/* ---- Intro-Phase (Beamer): erst Frage lesen, dann kommen die Optionen ---- */
.qz-phase-intro {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  text-align: center; padding: 2.2rem 1rem 1.2rem;
}
.qz-phase-intro__count { color: var(--muted); font-weight: 600; }
.qz-phase-intro__type {
  display: inline-block; padding: .3rem .9rem; border-radius: 999px;
  background: var(--panel); color: var(--head, var(--ink)); font-weight: 700;
  border: 1px solid var(--line);
}
.qz-phase-intro__double {
  font-weight: 800; color: var(--warn, #9a6a00);
  animation: qzk-pulse 1s ease-in-out infinite;
}
.qz-phase-intro__q { font-size: clamp(1.6rem, 4.5vw, 3rem); margin: .4rem 0 .8rem; max-width: 22ch; }
.qz-phase-intro__timerbar {
  width: min(480px, 80%); height: 10px; border-radius: 999px;
  background: var(--line); overflow: hidden;
}
.qz-phase-intro__timerfill { height: 100%; width: 0; background: var(--accent); transition: width .1s linear; }
@keyframes qzk-pulse { 50% { transform: scale(1.08); } }

/* ---- Scoreboard-Phase (Beamer): Top 5 mit Serie und Rang-Pfeilen ---- */
.qz-scoreboard { list-style: none; margin: 1rem auto; padding: 0; max-width: 560px; }
.qz-scoreboard__row {
  display: flex; align-items: center; gap: .6rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: .55rem .9rem; margin: .35rem 0; font-size: 1.15rem;
}
.qz-scoreboard__row .rank { font-weight: 800; min-width: 2.2rem; color: var(--head, var(--ink)); }
.qz-scoreboard__row .nm { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-scoreboard__row .sc { font-weight: 800; font-variant-numeric: tabular-nums; }
.qz-scoreboard__arrow { min-width: 1.1rem; text-align: center; }
.qz-scoreboard__arrow.up { color: var(--ok); }
.qz-scoreboard__arrow.down { color: var(--bad); }
.qz-scoreboard__streak { font-weight: 700; color: var(--warn, #9a6a00); }

/* ---- Word Cloud (Beamer-Reveal) ---- */
.qz-wordcloud {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .35em .8em; max-width: 780px; margin: 1.2rem auto; padding: .5rem;
  line-height: 1.25;
}
.qz-wordcloud__word { font-weight: 700; color: var(--head, var(--ink)); }
.qz-wordcloud__word:nth-child(4n+1) { color: var(--k-red, #e21b3c); }
.qz-wordcloud__word:nth-child(4n+2) { color: var(--k-blue, #1368ce); }
.qz-wordcloud__word:nth-child(4n+3) { color: var(--k-green, #26890c); }

/* ---- Offene Antworten (Beamer-Reveal) ---- */
.qz-open-answers {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .7rem; max-width: 860px; margin: 1.2rem auto;
  max-height: 52vh; overflow-y: auto; padding: .3rem;
}
.qz-open-answers__card {
  margin: 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: .7rem .9rem;
}
.qz-open-answers__card blockquote { margin: 0 0 .35rem; font-size: 1.05rem; }
.qz-open-answers__card figcaption { color: var(--muted); font-size: .85rem; font-weight: 600; }

/* ---- Offene Frage: Textarea am Spielergerät ---- */
.qz-open__input {
  width: 100%; resize: vertical; min-height: 6rem;
  border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem;
  font: inherit; background: var(--paper); color: var(--ink);
}
.qz-open__input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- Kurs-Modus: Lobby-Hinweis, Kurs-Select, Avatar-Chips ---- */
.qz-lobby-course {
  text-align: center; font-weight: 600; color: var(--head, var(--ink));
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: .5rem .8rem; max-width: 560px; margin: .6rem auto;
}
.qz-course-bind {
  font: inherit; padding: .35rem .5rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  max-width: 15rem;
}
.person-chip__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; border-radius: 50%; margin-right: .35em;
  font-size: .9em; vertical-align: -.35em;
}

/* ---- Join-Formular: Zufallsname ---- */
.qz-namerow { display: flex; gap: .5rem; align-items: stretch; }
.qz-namerow input { flex: 1; min-width: 0; }
.qz-dice { white-space: nowrap; }

/* ---- Host-Lobby: Spieler entfernen ---- */
.person-chip__kick {
  border: 0; background: transparent; cursor: pointer;
  margin-left: .35em; padding: 0 .25em; border-radius: 6px;
  color: var(--muted); font: inherit; line-height: 1;
  min-width: 1.6em; min-height: 1.6em;
}
.person-chip__kick:hover, .person-chip__kick:focus-visible { color: var(--bad); background: var(--panel); }

/* ---- Player: Intro-/Scoreboard-Screens ---- */
.qz-player-intro__meta { font-weight: 700; }
.qz-player-intro__double { font-weight: 800; color: var(--warn, #9a6a00); }
.qz-player-score .big { font-variant-numeric: tabular-nums; }
.qz-player-score__streak { font-weight: 700; color: var(--warn, #9a6a00); margin: .2rem 0; }

/* ============================================================
   SKIN — Kahoot-Look, nur in Spielszenen (body.qz-kahoot).
   ============================================================ */

/* „html body…": schlägt die (spezifischere) Grundregel „html.dr-ui body"
   aus ui-refresh.css — gleiche Spezifität, aber später geladen. */
html body.qz-kahoot {
  --kq-bg: #46178F;
  --kq-bg-deep: #2E0E6B;
  --kq-ink: #333333;
  --k-yellow: #FFA602;           /* 1:1 Kahoot-Gelb (siehe Token-Map oben) */
  font-family: "Montserrat", system-ui, sans-serif;
  /* Eigener Stacking-Context: nur so malt das ::before-Muster (z-index:-1)
     ÜBER den opaken body-Verlauf statt unsichtbar dahinter (gleiche Falle
     wie beim Podium, s.u.) — und bleibt trotzdem unter allem Inhalt. */
  isolation: isolate;
  background:
    radial-gradient(1100px 620px at 78% -10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(160deg, var(--kq-bg) 0%, var(--kq-bg-deep) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
/* Schwebende Geometrie-Formen (Kahoot-Backdrop) — generierte Kachel
   (assets/img/quiz/bg-tile.png, 512×512, nahtlos), sanft driftend. */
body.qz-kahoot::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--kq-tile-opacity, .6);
  background-image: var(--kq-tile-img, url("/assets/img/quiz/bg-tile.png"));
  background-size: 512px 512px;
  animation: kq-drift 70s linear infinite;
}
@keyframes kq-drift { from { background-position: 0 0; } to { background-position: 512px 512px; } }
@media (prefers-reduced-motion: reduce) { body.qz-kahoot::before { animation: none; } }

/* Chrome (Header/Footer/Hostleiste) dezent auf Lila */
body.qz-kahoot .lesson-header, body.qz-kahoot .lesson-footer { background: rgba(0,0,0,.25); color: #fff; }
body.qz-kahoot .lesson-header a, body.qz-kahoot .lesson-footer a, body.qz-kahoot .area-head span { color: #fff; }
body.qz-kahoot .host-bar {
  background: rgba(0,0,0,.28); color: #fff; border: 0; border-radius: 10px;
  padding: .5rem .8rem; backdrop-filter: blur(4px);
}
body.qz-kahoot .host-bar .qz-muted, body.qz-kahoot .qz-muted { color: rgba(255,255,255,.75); }
body.qz-kahoot .room-code {
  background: #fff; color: var(--kq-bg); border-radius: 8px; padding: .1em .45em;
  font-weight: 800; letter-spacing: .12em;
}

/* Überschriften (ehem. inline color:var(--navy)) — Theme-Farbe außerhalb des Skins */
.qz-head { color: var(--navy, var(--head, var(--ink))); }
body.qz-kahoot .qz-head { color: #fff; }

/* Überschriften/Statustexte auf Lila → weiß */
body.qz-kahoot h2, body.qz-kahoot .qz-center,
body.qz-kahoot .qz-player-state .big, body.qz-kahoot .qz-waiting,
body.qz-kahoot .qz-beamer-q { color: #fff; }
body.qz-kahoot .qz-player-state .good { color: #6bff8f; }
body.qz-kahoot .qz-player-state .bad { color: #ff8fa0; }

/* Beamer-Frage als weiße Karte (Kahoot: Frage-Bar oben) */
body.qz-kahoot .qz-beamer-q, body.qz-kahoot .big-q {
  background: #fff; color: var(--kq-ink); border-radius: 8px;
  padding: .7em 1em; box-shadow: 0 4px 0 rgba(0,0,0,.25);
  font-weight: 800; text-align: center;
  max-width: 1000px; margin: 1rem auto;
  font-size: clamp(1.2rem, 3.6vw, 2.2rem);
}
/* Timer als lila Kreis-Bubble (Kahoot-Timerblase) */
body.qz-kahoot .qz-bigtimer {
  width: 2.4em; height: 2.4em; margin: .3rem auto; display: grid; place-items: center;
  background: var(--kq-accent, #864CBF); color: #fff; border-radius: 50%; box-shadow: 0 3px 0 rgba(0,0,0,.3);
  font-size: clamp(1.4rem, 4.5vw, 2.4rem);
}
body.qz-kahoot .qz-answered { color: #fff; }

/* Kacheln: Kahoot-Radius + Gelb-Lesbarkeit */
body.qz-kahoot .qz-beamer-opt, body.qz-kahoot .play-tile, body.qz-kahoot .qz-opt {
  border-radius: 6px; font-family: inherit;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* Kachelfarben: Custom-Skin (quiz.skin.tiles, s. SCHEMA.md) übersteuert per
   --kq-t0…--kq-t7 die drei Kachelarten gemeinsam; ohne Skin bleiben die
   bisherigen Kahoot-Farben (t0/t1/t3 aus quiz.css/live.css via --k-*,
   t2 = Gelb-Sonderfall, t4–t7 = feste Zusatzfarben). */
body.qz-kahoot .qz-beamer-opt.t0, body.qz-kahoot .play-tile.t0, body.qz-kahoot .qz-opt.t0 { background: var(--kq-t0, var(--k-red)); }
body.qz-kahoot .qz-beamer-opt.t1, body.qz-kahoot .play-tile.t1, body.qz-kahoot .qz-opt.t1 { background: var(--kq-t1, var(--k-blue)); }
body.qz-kahoot .qz-beamer-opt.t2, body.qz-kahoot .play-tile.t2, body.qz-kahoot .qz-opt.t2 { background: var(--kq-t2, var(--k-yellow)); }
body.qz-kahoot .qz-beamer-opt.t3, body.qz-kahoot .play-tile.t3, body.qz-kahoot .qz-opt.t3 { background: var(--kq-t3, var(--k-green)); }
body.qz-kahoot .qz-beamer-opt.t4, body.qz-kahoot .play-tile.t4, body.qz-kahoot .qz-opt.t4 { background: var(--kq-t4, #7d3cc9); }
body.qz-kahoot .qz-beamer-opt.t5, body.qz-kahoot .play-tile.t5, body.qz-kahoot .qz-opt.t5 { background: var(--kq-t5, #0c8e7a); }
body.qz-kahoot .qz-beamer-opt.t6, body.qz-kahoot .play-tile.t6, body.qz-kahoot .qz-opt.t6 { background: var(--kq-t6, #b8860b); }
body.qz-kahoot .qz-beamer-opt.t7, body.qz-kahoot .play-tile.t7, body.qz-kahoot .qz-opt.t7 { background: var(--kq-t7, #3a3326); }

/* Lobby */
body.qz-kahoot .beamer .qr { background: #fff; padding: 10px; border-radius: 10px; display: inline-block; }
body.qz-kahoot .beamer .room-code { font-size: clamp(2rem, 7vw, 3.6rem); display: inline-block; margin: .3rem auto; }
body.qz-kahoot .join-hint { color: rgba(255,255,255,.8); }
body.qz-kahoot .person-chip {
  background: rgba(0,0,0,.3); color: #fff; border: 0; border-radius: 6px;
  font-weight: 800; padding: .35rem .6rem; font-size: 1.05rem;
}
body.qz-kahoot .person-chip__kick { color: rgba(255,255,255,.6); }
body.qz-kahoot .person-chip__kick:hover, body.qz-kahoot .person-chip__kick:focus-visible { color: #fff; background: rgba(226,27,60,.8); }
body.qz-kahoot .qz-lobby-course { background: rgba(0,0,0,.28); border: 0; color: #fff; }

/* Intro-Phase auf Lila */
body.qz-kahoot .qz-phase-intro__q {
  background: #fff; color: var(--kq-ink); border-radius: 8px;
  padding: .5em .9em; box-shadow: 0 4px 0 rgba(0,0,0,.25);
}
body.qz-kahoot .qz-phase-intro__count { color: rgba(255,255,255,.85); }
body.qz-kahoot .qz-phase-intro__type { background: #fff; color: var(--kq-bg); border: 0; font-size: 1.15rem; padding: .4rem 1.2rem; }
body.qz-kahoot .qz-phase-intro__double { color: #FFD766; }
body.qz-kahoot .qz-phase-intro__timerbar { background: rgba(0,0,0,.35); }
body.qz-kahoot .qz-phase-intro__timerfill { background: #fff; }

/* Scoreboard auf Lila */
body.qz-kahoot .qz-scoreboard__row {
  background: rgba(0,0,0,.3); border: 0; color: #fff; font-weight: 800;
}
body.qz-kahoot .qz-scoreboard__row .rank { color: rgba(255,255,255,.8); }
body.qz-kahoot .qz-scoreboard__arrow.up { color: #6bff8f; }
body.qz-kahoot .qz-scoreboard__arrow.down { color: #ff8fa0; }
body.qz-kahoot .qz-scoreboard__streak { color: #FFD766; }

/* Podium (Siegerehrung): 2.–1.–3. als Säulen, gestaffelt einfahrend.
   Statischer Konfetti-Burst (assets/img/quiz/celebrate-confetti.png) liegt
   zentriert HINTER den Säulen — ergänzt, ersetzt nicht die JS-Konfettiregen-
   Animation (confettiBurst() in app.js, fällt über die ganze Seite). */
/* margin-top schafft Platz für die Krone (::before der 1.-Platz-Medaille,
   ragt ~2.6em über die Medaille hinaus) — sonst überlappt sie die Überschrift. */
/* z-index:0 (nicht nur position:relative) erzwingt einen eigenen Stacking-
   Context — sonst „entkommt" das negative z-index des ::before bis hinter
   den body-Hintergrund und ist unsichtbar (klassische CSS-Falle). */
.qz-podium { position: relative; z-index: 0; display: flex; align-items: flex-end; justify-content: center; gap: .8rem; margin: 4.2rem auto .6rem; max-width: 720px; }
.qz-podium::before {
  content: ""; position: absolute; inset: -10% -20% auto -20%; height: 140%; z-index: -1;
  background: url("/assets/img/quiz/celebrate-confetti.png") center top / contain no-repeat;
  opacity: 0; animation: kq-confetti-fade .5s ease-out .5s both;
  pointer-events: none;
}
@keyframes kq-confetti-fade { from { opacity: 0; transform: scale(.85); } to { opacity: .9; transform: none; } }
.qz-podium__col { flex: 1 1 0; max-width: 200px; text-align: center; animation: kq-rise .6s ease-out both; }
.qz-podium__col.p1 { animation-delay: .9s; }
.qz-podium__col.p2 { animation-delay: .45s; }
.qz-podium__col.p3 { animation-delay: 0s; }
.qz-podium__name { font-weight: 800; color: var(--head, var(--ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-podium__score { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.qz-podium__medal { font-size: 2rem; line-height: 1.2; position: relative; }
/* Krone über der 1.-Platz-Medaille (assets/img/quiz/podium-crown.png) —
   erscheint erst nach dem Einfahren der Säule, leichtes Bounce-In. */
.qz-podium__col.p1 .qz-podium__medal::before {
  content: ""; position: absolute; left: 50%; bottom: 100%;
  width: 2.6em; height: 2.6em; transform: translateX(-50%) scale(0);
  background: url("/assets/img/quiz/podium-crown.png") center / contain no-repeat;
  animation: kq-crown-in .5s cubic-bezier(.34,1.56,.64,1) 1.3s both;
}
@keyframes kq-crown-in { to { transform: translateX(-50%) scale(1); } }
.qz-podium__block { border-radius: 10px 10px 0 0; margin-top: .35rem; box-shadow: 0 4px 0 rgba(0,0,0,.25); display: grid; place-items: start center; padding-top: .4rem; color: rgba(0,0,0,.55); font-weight: 900; font-size: 1.6rem; }
.qz-podium__col.p1 .qz-podium__block { height: 9.5rem; background: linear-gradient(180deg, #FFD766, #E8B923); }
.qz-podium__col.p2 .qz-podium__block { height: 7rem; background: linear-gradient(180deg, #E8EDF4, #B9C4D4); }
.qz-podium__col.p3 .qz-podium__block { height: 5.2rem; background: linear-gradient(180deg, #F0BE93, #CD7F32); }
@keyframes kq-rise { from { opacity: 0; transform: translateY(2.2rem); } }
@media (prefers-reduced-motion: reduce) {
  .qz-podium__col { animation: none; }
  .qz-podium::before { animation: none; opacity: .9; }
  .qz-podium__col.p1 .qz-podium__medal::before { animation: none; transform: translateX(-50%) scale(1); }
}
body.qz-kahoot .qz-podium__name { color: #fff; }
body.qz-kahoot .qz-podium__score { color: rgba(255,255,255,.85); }
.qz-podium-rest { list-style: none; margin: .6rem auto; padding: 0; max-width: 460px; }
.qz-podium-rest li { display: flex; gap: .6rem; padding: .3rem .8rem; font-weight: 700; }
body.qz-kahoot .qz-podium-rest li { color: rgba(255,255,255,.92); background: rgba(0,0,0,.22); border-radius: 8px; margin: .25rem 0; }
.qz-podium-rest .rank { min-width: 2.2rem; }
.qz-podium-rest .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Word Cloud / offene Antworten auf Lila */
body.qz-kahoot .qz-wordcloud__word { color: #fff; }
body.qz-kahoot .qz-wordcloud__word:nth-child(4n+1) { color: #ff9fb0; }
body.qz-kahoot .qz-wordcloud__word:nth-child(4n+2) { color: #9fc8ff; }
body.qz-kahoot .qz-wordcloud__word:nth-child(4n+3) { color: #ffd766; }
body.qz-kahoot .qz-open-answers__card { background: rgba(255,255,255,.94); border: 0; }

/* Buttons im Spiel: Kahoot-artig kräftig */
body.qz-kahoot .btn.primary, body.qz-kahoot button.primary {
  font-family: inherit; font-weight: 800;
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
}
body.qz-kahoot .btn.ghost, body.qz-kahoot button.ghost {
  background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4);
}

/* Solo-Spielbühne: weiße Frage-Karte bleibt (quiz.css), nur Umfeld lila */
body.qz-kahoot .qz-bar .qz-pill { background: rgba(0,0,0,.3); color: #fff; }
body.qz-kahoot .qz-score { color: #fff; }
body.qz-kahoot .qz-ring__num { color: #fff; }
body.qz-kahoot .qz-ring__bg { stroke: rgba(255,255,255,.25); }

/* ---- Lesbarkeits-Fixes: dunkle Tinte stand auf Lila (Kontrast-Audit) ---- */
/* Tipp-Hinweis unter den Solo-Kacheln liegt AUSSERHALB der weißen Karte */
body.qz-kahoot .qz-taphint { color: rgba(255,255,255,.85); }
/* Solo-Feedback (Richtig/Falsch/Erklärung) liegt auf dem Lila-Grund →
   als weiße Karte im Kahoot-Look; die farbige Statuskante bleibt. */
body.qz-kahoot .qz-fb {
  background: #fff; color: var(--kq-ink);
  border-radius: 8px; box-shadow: 0 4px 0 rgba(0,0,0,.25);
}
body.qz-kahoot .qz-fb.good { background: #fff; }
body.qz-kahoot .qz-fb.bad { background: #fff; }
body.qz-kahoot .qz-fb.info { background: #fff; }
/* Spieler-Screens (Intro-Meta, „Richtige Antwort", Punkte-Delta): alles weiß */
body.qz-kahoot .qz-player-state { color: #fff; }
body.qz-kahoot .qz-player-intro__meta { color: #fff; }

/* ============================================================
   REVIEW-FIXES 2026-07-09 — Responsive/Lesbarkeit (CSS-Audit vor
   Unterrichtseinsatz). Nummern = Findings des Audits.
   ============================================================ */

/* C1: Solo-Ergebnis-Karte ist hell — die Pauschalregel „body.qz-kahoot h2"
   machte den Bewertungstitel weiß-auf-weiß. */
body.qz-kahoot .qz-result h2 { color: var(--kq-ink, #333); }

/* M4: Host-/Spielerleiste war nie flex — .spacer wirkte nicht, „Beenden"
   rutschte in eine zweite Zeile. */
body.qz-kahoot .host-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.host-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.host-bar .spacer { flex: 1; }

/* M5: Raumcode + QR zentrieren (inline-block + margin:auto zentriert nicht). */
body.qz-kahoot .beamer { text-align: center; }

/* M3: Beamer-Frage und Lobby-Hinweise dürfen auf Projektionsgröße wachsen. */
body.qz-kahoot .qz-beamer-q, body.qz-kahoot .big-q { font-size: clamp(1.3rem, 3.6vw, 3rem); }
body.qz-kahoot .beamer .qz-muted, body.qz-kahoot .join-hint { font-size: clamp(1rem, 1.8vw, 1.4rem); }

/* M6: Scoreboard in Beamer-Größe. */
.qz-scoreboard { max-width: min(720px, 92vw); }
.qz-scoreboard__row { font-size: clamp(1.1rem, 2.2vw, 1.7rem); padding: .65rem 1rem; }

/* m3: Timer-Bubble clippt „120s" nicht mehr (feste Breite → min-width). */
body.qz-kahoot .qz-bigtimer { width: auto; min-width: 2.4em; padding: 0 .35em; border-radius: 999px; }

/* m4: Kick-Knopf auf Tap-Minimum (negative Margins halten den Chip kompakt). */
.person-chip__kick { min-width: 44px; min-height: 44px; margin: -.5em -.35em -.5em 0; }

/* m5: Wortwolke — kleinste Begriffe am Beamer lesbar. */
.qz-wordcloud { font-size: clamp(1.05rem, 1.8vw, 1.5rem); }

/* m7: Solo-Serienanzeige (🔥) stand in Ockergelb auf Lila. */
body.qz-kahoot .qz-streak { color: #FFD766; }

/* m2: lange deutsche Komposita laufen nicht mehr aus Kacheln/Karten. */
.qz-opt span:last-child, .play-tile span:last-child { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.big-q, .qz-beamer-q, .qz-wordcloud__word { overflow-wrap: anywhere; }

/* m9: Notch-Handys — unterste Kachel nicht unter der Home-Bar. */
main#app { padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }

/* Netz-Warnung in Host-/Spielerleiste (JS zeigt sie bei Verbindungsproblemen). */
.qz-netwarn { font-weight: 800; color: #FFD766; }
.qz-netwarn[hidden] { display: none; }