/* ═══════════════════════════════════════════════════════════════════════
   06 — CONTENTAREA
   Der Baukasten der Contentarea: Spiele (Kap. 05.2), Contentplan
   (Kap. 05.3) und Medienbibliothek (Kap. 05.6).

   ── WARUM DIESE DATEI ÜBERHAUPT EXISTIERT ─────────────────────────────
   Vorher brachte JEDES der zehn Spielmodule seinen eigenen <style>-Block
   mit: `.ww-q { max-width: 640px }`, `.cn-grid { max-width: 760px }`,
   `.bz-btn { width: min(280px, 70vw) }`. Zehn Spiele, zehn kleine
   Designsysteme — und alle drei Werte oben sind in einer 450 px breiten
   Aufnahmefläche falsch.

   ── DIE EINE REGEL ────────────────────────────────────────────────────
   Nichts hier misst sich am FENSTER. Alles misst sich am KASTEN:
   `.sp-buehne` setzt `container-type: inline-size`, und jede Größe darin
   rechnet in `cqw` (Prozent der Kastenbreite). Dasselbe Spielmodul läuft
   damit unverändert in der 760 px breiten Desktopansicht und in der
   450 px schmalen 9:16-Fläche. Ein `vw` in dieser Datei ist ein Fehler.

   ── DIE AUFNAHMEFLÄCHE ────────────────────────────────────────────────
   Wir nehmen die Spiele als Bildschirmaufnahme auf und legen im Schnitt
   eine Facecam darüber. Deshalb ist das Seitenverhältnis 9:16 und das
   OBERE DRITTEL bleibt leer — dort liegt später das Gesicht. Die
   Regieleiste steht ausserhalb der Fläche, sonst wäre sie mit im Bild.
   ═══════════════════════════════════════════════════════════════════════ */

@layer contentarea {

/* ═══ 1 · DAS REGAL ══════════════════════════════════════════════════ */

.pn-hub .sp-regal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-3);
}

.pn-hub .sp-kachel {
  --sp-farbe: var(--marke);
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) var(--s-5);
  border-radius: var(--r-l);
  border: 1px solid var(--linie);
  border-left: var(--kante) solid var(--sp-farbe);
  background: var(--flaeche);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dauer-schnell) var(--kurve),
              background var(--dauer-schnell) var(--kurve);
}
.pn-hub a.sp-kachel:hover { background: var(--flaeche-2); border-color: var(--linie-stark); border-left-color: var(--sp-farbe); }
.pn-hub .sp-kachel .pn-ic { width: 22px; height: 22px; color: var(--sp-farbe); }
.pn-hub .sp-kachel h3 { margin: 0; font-family: var(--font-display); font-size: var(--t-h2);
                        text-transform: uppercase; letter-spacing: .01em; font-weight: 400; }
.pn-hub .sp-kachel p { margin: 0; font-size: var(--t-klein); color: var(--text-leise); }
.pn-hub .sp-kachel .sp-fuss { display: flex; align-items: center; gap: var(--s-2);
                              margin-top: var(--s-1); font-family: var(--font-mono);
                              font-size: var(--t-winzig); letter-spacing: .1em;
                              text-transform: uppercase; color: var(--text-still); }
.pn-hub .sp-kachel .sp-offen { color: var(--sp-farbe); font-weight: 700; }

/* Die Zwischenüberschrift über einem Abschnitt: kleine Marke, dünne Linie.
   Eine <h2> wäre hier zu laut — das sind Regalbretter, keine Kapitel. */
.pn-hub .sp-band { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.pn-hub .sp-band b { font-family: var(--font-mono); font-size: var(--t-winzig); font-weight: 700;
                     letter-spacing: .14em; text-transform: uppercase; color: var(--text-still); }
.pn-hub .sp-band .sp-strich { flex: 1 1 auto; height: 1px; background: var(--linie); }
.pn-hub .sp-band small { font-family: var(--font-mono); font-size: var(--t-winzig);
                         letter-spacing: .1em; color: var(--n-60); }
.pn-hub .sp-abschnitt + .sp-abschnitt { margin-top: var(--s-6); }

/* ═══ 2 · DIE BÜHNENLEISTE ═══════════════════════════════════════════
   Alles zur Runde in EINER Zeile, und ganz rechts der Umschalter. Vorher
   stand dieselbe Information als Fließtext über dem Spiel und war je nach
   Modul woanders. */

.pn-hub .sp-leiste {
  --sp-farbe: var(--marke);
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-5); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-l); border: 1px solid var(--linie);
  border-left: var(--kante) solid var(--sp-farbe);
  background: var(--flaeche);
}
.pn-hub .sp-leiste .sp-wer { display: grid; gap: 2px; min-width: 0; }
.pn-hub .sp-leiste .sp-wer strong { font-size: var(--t-body); font-weight: 600; overflow-wrap: anywhere; }
.pn-hub .sp-leiste .sp-wer small { font-family: var(--font-mono); font-size: var(--t-winzig);
                                   letter-spacing: .1em; text-transform: uppercase; color: var(--text-still); }
/* Der Schieber: drückt alles dahinter nach rechts. Steht in der
   Bühnenleiste und in den Dialogfüßen. */
.pn-hub .sp-luecke { flex: 1 1 var(--s-5); }
.pn-hub .sp-koepfe { display: flex; }
.pn-hub .sp-kopf { width: 28px; height: 28px; border-radius: var(--r-full);
                   background: var(--flaeche-3); border: 2px solid var(--flaeche);
                   display: grid; place-items: center; font-family: var(--font-mono);
                   font-size: var(--t-winzig); font-weight: 700; }
.pn-hub .sp-kopf + .sp-kopf { margin-left: -8px; }

/* Der Umschalter zwischen den Formaten. */
.pn-hub .sp-umschalter { display: inline-flex; padding: 3px; gap: 2px;
                         border-radius: var(--r-full); background: var(--bg);
                         border: 1px solid var(--linie-stark); }
.pn-hub .sp-umschalter a { display: inline-flex; align-items: center; gap: var(--s-2);
                           min-height: 32px; padding: 0 var(--s-3); border-radius: var(--r-full);
                           font-size: var(--t-klein); font-weight: 600; color: var(--text-leise);
                           text-decoration: none; white-space: nowrap; }
.pn-hub .sp-umschalter a:hover { color: var(--text); }
.pn-hub .sp-umschalter a[aria-current] { background: var(--marke); color: #fff; }
.pn-hub .sp-umschalter .pn-ic { width: 15px; height: 15px; }

/* ═══ 3 · DIE BÜHNE ══════════════════════════════════════════════════ */

.pn-hub .sp-buehne {
  container-type: inline-size;
  container-name: buehne;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

/* ── Aufnahme 9:16 ──────────────────────────────────────────────────── */

.pn-hub .sp-aufnahme {
  /* Die Höhe der Fläche ist einstellbar, weil sie die Auflösung der Aufnahme
     bestimmt. Voreinstellung: so hoch, wie das Fenster hergibt. */
  --sp-hoehe: min(820px, calc(100vh - 230px));
  display: grid; justify-items: center; gap: var(--s-5);
  padding: var(--s-5) 0 var(--s-6);
  background: #08080a;
  border-radius: var(--r-l);
}
.pn-hub .sp-flaeche {
  position: relative;
  height: var(--sp-hoehe);
  max-width: 100%;
  aspect-ratio: 9 / 16;
  display: flex; flex-direction: column;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--bg-weich);
  box-shadow: 0 0 0 1px var(--linie-stark), var(--heben-3);
}
/* „Rahmen zeigen" aus: nichts als Spiel, keine Kante, kein Schatten. */
.pn-hub .sp-aufnahme.ohne-rahmen { background: none; padding: 0; }
.pn-hub .sp-aufnahme.ohne-rahmen .sp-flaeche { border-radius: 0; box-shadow: none; }

/* Das obere Drittel bleibt frei — hier liegt im Schnitt die Facecam. */
.pn-hub .sp-facecam {
  flex: 0 0 33.333%;
  position: relative;
  display: grid; place-items: center; gap: var(--s-2);
  text-align: center;
  color: var(--n-60);
}
.pn-hub .sp-facecam::before {
  content: ''; position: absolute; inset: 14px;
  border: 1px dashed var(--linie-stark); border-radius: var(--r-l);
}
.pn-hub .sp-cam { display: grid; justify-items: center; gap: var(--s-2); }
.pn-hub .sp-facecam .pn-ic { width: 30px; height: 30px; }
.pn-hub .sp-facecam b { font-family: var(--font-mono); font-size: var(--t-winzig);
                        font-weight: 600; letter-spacing: .14em; }
.pn-hub .sp-facecam small { font-size: var(--t-mikro); color: var(--n-70); }
.pn-hub .sp-facecam .sp-titel-oben { display: grid; gap: var(--s-1); }
.pn-hub .sp-facecam .sp-titel-oben strong { font-family: var(--font-display); font-size: 22px;
                                            text-transform: uppercase; color: var(--text); }

/* Die unteren zwei Drittel: das Spiel. Der Kasten ist hier der Container. */
.pn-hub .sp-flaeche .sp-buehne {
  flex: 1 1 auto; max-width: none; min-height: 0;
  padding: var(--s-4) var(--s-4) var(--s-5);
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s-3);
}

/* ═══ 4 · DIE REGIELEISTE ════════════════════════════════════════════ */

.pn-hub .sp-regie {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-top: var(--s-5); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-full); border: 1px solid var(--linie-stark);
  background: var(--flaeche);
}
.pn-hub .sp-aufnahme + .sp-regie,
.pn-hub .sp-aufnahme .sp-regie { margin-top: 0; }
.pn-hub .sp-regie-titel { display: inline-flex; align-items: center; gap: var(--s-2);
                          padding-inline: var(--s-2); font-family: var(--font-mono);
                          font-size: var(--t-winzig); font-weight: 700; letter-spacing: .12em;
                          text-transform: uppercase; color: var(--text-still);
                          border-right: 1px solid var(--linie-stark); }
.pn-hub .sp-regie-tasten { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.pn-hub .sp-regie .pn-knopf { min-height: 32px; padding-inline: var(--s-3); font-size: var(--t-klein); }
.pn-hub .sp-regie label { display: inline-flex; align-items: center; gap: var(--s-2);
                          font-size: var(--t-klein); color: var(--text-leise); cursor: pointer; }
.pn-hub .sp-regie select { min-height: 32px; padding: 0 var(--s-2); font-size: var(--t-klein); }
.pn-hub .sp-regie .sp-wink { font-size: var(--t-mikro); color: var(--text-still); }

/* ═══ 5 · DER BAUKASTEN DER SPIELE ═══════════════════════════════════
   Ab hier misst alles in cqw. Die Werte sind so gewählt, dass sie bei
   760 px (Desktop) und bei 450 px (Aufnahme) beide tragen. */

/* Die Tafel: das große Stück in der Mitte — Frage, Wort, Buchstabe. */
.pn-hub .sp-tafel {
  display: grid; justify-items: center; gap: var(--s-2);
  padding: clamp(16px, 4cqw, 34px) clamp(14px, 3cqw, 28px);
  border-radius: var(--r-l);
  background: var(--bg-weich);
  border: 1px solid var(--linie);
  text-align: center;
}
.pn-hub .sp-tafel .sp-lead { font-family: var(--font-mono); font-size: clamp(9px, 1.5cqw, 11px);
                             font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
                             color: var(--warn-500); }
.pn-hub .sp-tafel h2 { margin: 0; font-family: var(--font-display); font-weight: 400;
                       text-transform: uppercase; line-height: 1.1;
                       font-size: clamp(19px, 5cqw, 38px); text-wrap: balance; }
.pn-hub .sp-tafel p { margin: 0; font-size: clamp(12px, 1.8cqw, 14px); color: var(--text-leise); }

/* Ein einzelnes großes Wort — Anton, so groß wie der Kasten es zulässt. */
.pn-hub .sp-wort { font-family: var(--font-display); font-weight: 400; line-height: .92;
                   letter-spacing: .03em; text-transform: uppercase;
                   font-size: clamp(34px, 13cqw, 84px); }
.pn-hub .sp-wort.marke { color: var(--marke-hell); }

/* Die Wahl: ein Knopf je Mitspieler oder Antwort. */
.pn-hub .sp-wahl { display: grid; gap: var(--s-2);
                   grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.pn-hub .sp-wahl button {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 46px; padding: 0 var(--s-3);
  border-radius: var(--r-full); border: 1px solid var(--linie-stark);
  background: var(--flaeche-2); color: var(--text);
  font-family: inherit; font-size: clamp(13px, 1.9cqw, 15px); font-weight: 600;
  cursor: pointer; overflow-wrap: anywhere;
  transition: background var(--dauer-schnell) var(--kurve), border-color var(--dauer-schnell) var(--kurve);
}
.pn-hub .sp-wahl button:hover { border-color: var(--marke-linie); }
.pn-hub .sp-wahl button.sel { background: var(--marke); border-color: var(--marke); color: #fff; }
.pn-hub .sp-wahl button[disabled] { opacity: .45; cursor: not-allowed; }

/* Ergebnisbalken. */
.pn-hub .sp-balken { display: grid; gap: var(--s-2); }
.pn-hub .sp-balken-zeile { display: grid; grid-template-columns: minmax(64px, 96px) minmax(0, 1fr) 2.4rem;
                           gap: var(--s-3); align-items: center; }
.pn-hub .sp-balken-zeile > span:first-child { font-size: clamp(11px, 1.7cqw, 13px); font-weight: 600;
                                              overflow-wrap: anywhere; }
.pn-hub .sp-spur { height: 10px; border-radius: var(--r-full); background: var(--flaeche-3); overflow: hidden; }
.pn-hub .sp-fuell { display: block; height: 100%; border-radius: var(--r-full);
                    background: var(--marke); min-width: 4px; }
.pn-hub .sp-fuell.still { background: var(--n-50); }
.pn-hub .sp-balken-zeile .sp-zahl { font-family: var(--font-mono); font-size: clamp(11px, 1.6cqw, 12px);
                                    color: var(--text-leise); text-align: right;
                                    font-variant-numeric: tabular-nums; }
.pn-hub .sp-balken-zeile small { grid-column: 1 / -1; font-size: var(--t-mikro); color: var(--text-still);
                                 margin-top: -4px; }

/* Ein Feld-Raster: Jeopardy, Codenames, Tic Tac Toe, das Brett von „Wer bin ich". */
.pn-hub .sp-brett { display: grid; gap: clamp(4px, .9cqw, 8px); }
.pn-hub .sp-brett.fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pn-hub .sp-brett.vier  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pn-hub .sp-brett.auto  { grid-template-columns: repeat(auto-fill, minmax(clamp(74px, 17cqw, 124px), 1fr)); }

.pn-hub .sp-feld {
  display: grid; place-items: center; padding: clamp(6px, 1.4cqw, 14px) 4px;
  border: 1px solid var(--linie); border-radius: var(--r-m);
  background: var(--flaeche-2); color: var(--text);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(13px, 3cqw, 24px); text-align: center; overflow-wrap: anywhere;
}
.pn-hub .sp-feld.kopf { background: var(--bg-weich); color: var(--text-leise);
                        font-size: clamp(9px, 1.7cqw, 13px); text-transform: uppercase;
                        letter-spacing: .06em; min-height: 3rem; }
.pn-hub button.sp-feld { cursor: default; }
.pn-hub button.sp-feld.spielbar { cursor: pointer; color: var(--marke-hell); }
.pn-hub button.sp-feld.spielbar:hover { background: var(--marke); color: #fff; border-color: var(--marke); }
.pn-hub .sp-feld.leer { opacity: .22; }
.pn-hub .sp-feld.belegt { color: #fff; border-color: transparent; font-family: var(--font-body);
                          font-weight: 700; font-size: clamp(10px, 1.9cqw, 14px); }

/* Wortkarten (Codenames) stehen quer und tragen Text, keine Zahl. */
.pn-hub .sp-feld.wort { aspect-ratio: 16 / 10; font-family: var(--font-body); font-weight: 700;
                        font-size: clamp(9px, 2cqw, 15px); background: #efe7d4; color: #3a3325;
                        border: 3px solid transparent; }
.pn-hub .sp-feld.wort.auf { color: #fff; }

/* Bildfelder (Tic Tac Toe, Wer bin ich, Blind Ranking). */
.pn-hub .sp-bildfeld { aspect-ratio: 1; border-radius: var(--r-m); overflow: hidden;
                       background: var(--flaeche-3); }
.pn-hub .sp-bildfeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pn-hub .sp-bildfeld .sp-platzhalter { width: 100%; height: 100%; display: grid; place-items: center;
                                       color: var(--text-still); font-family: var(--font-display);
                                       font-size: clamp(14px, 4cqw, 30px); }

/* Punktestände als Pillen. */
.pn-hub .sp-pillen { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; }
.pn-hub .sp-pille { display: inline-flex; align-items: center; gap: var(--s-2);
                    padding: var(--s-1) var(--s-3); border-radius: var(--r-full);
                    background: var(--flaeche-2); border: 1px solid var(--linie);
                    font-size: clamp(11px, 1.7cqw, 13px); font-weight: 600; }
.pn-hub .sp-pille b { font-family: var(--font-display); font-size: clamp(13px, 2.2cqw, 17px);
                      color: var(--marke-hell); font-weight: 400; }
.pn-hub .sp-punkt { width: 10px; height: 10px; border-radius: var(--r-full); flex: none; }

/* Eine Zeile mit Kopf, Name und Zusatz — „wer ist dran", Leben, Platzierungen. */
.pn-hub .sp-reihe { display: flex; align-items: center; gap: var(--s-3);
                    padding: var(--s-2) var(--s-3); border-radius: var(--r-m);
                    background: var(--flaeche-2); }
.pn-hub .sp-reihe.dran { background: var(--marke-weich); border: 1px solid var(--marke-linie); }
.pn-hub .sp-reihe.raus { opacity: .45; }
.pn-hub .sp-reihe .sp-rang { font-family: var(--font-display); font-size: clamp(14px, 2.6cqw, 20px);
                             color: var(--marke-hell); min-width: 2.1rem; }
.pn-hub .sp-reihe .sp-name { flex: 1 1 auto; min-width: 0; font-size: clamp(12px, 1.8cqw, 14px);
                             font-weight: 600; overflow-wrap: anywhere; }
.pn-hub .sp-reihe .sp-frei { flex: 1 1 auto; color: var(--text-still); font-size: clamp(12px, 1.8cqw, 14px); }
.pn-hub .sp-reihe .pn-knopf { min-height: 32px; padding-inline: var(--s-3); font-size: var(--t-klein); }

/* Der Buzzer. Rund, groß, und im Hochformat trotzdem im Bild. */
.pn-hub .sp-buzzer { width: min(68cqw, 260px); aspect-ratio: 1; margin-inline: auto;
                     display: grid; place-items: center; gap: 2px;
                     border: none; border-radius: var(--r-full); cursor: pointer;
                     background: radial-gradient(circle at 35% 30%, var(--marke-hell), var(--marke) 58%, #7c001e);
                     color: #fff; font-family: var(--font-display); font-weight: 400;
                     font-size: clamp(20px, 6cqw, 34px); text-transform: uppercase; letter-spacing: .06em;
                     box-shadow: 0 14px 34px rgba(224, 9, 60, .42), inset 0 -8px 18px rgba(0, 0, 0, .35);
                     transition: transform .08s var(--kurve); }
.pn-hub .sp-buzzer:active { transform: scale(.94); }
.pn-hub .sp-buzzer[disabled] { filter: grayscale(.85); opacity: .5; cursor: not-allowed; box-shadow: none; }
.pn-hub .sp-buzzer small { font-family: var(--font-mono); font-size: var(--t-winzig); letter-spacing: .2em; }

/* Ein Bild, das die Bühne füllt (Verpixeltes Bild). */
.pn-hub .sp-bild { width: 100%; border-radius: var(--r-l); background: var(--flaeche-3);
                   object-fit: contain; display: block; }

/* Tabellen im Spiel (Stadt Land Fluss, Blind Ranking). */
.pn-hub .sp-tabelle-huelle { overflow-x: auto; }
.pn-hub .sp-tabelle { width: 100%; border-collapse: collapse; font-size: clamp(11px, 1.7cqw, 13.5px); }
.pn-hub .sp-tabelle th, .pn-hub .sp-tabelle td { padding: var(--s-2); text-align: left;
                                                 border-bottom: 1px solid var(--linie); }
.pn-hub .sp-tabelle th { font-family: var(--font-mono); font-size: var(--t-winzig);
                         letter-spacing: .1em; text-transform: uppercase; color: var(--text-still);
                         font-weight: 600; }
.pn-hub .sp-tabelle td.kat { font-weight: 700; }

/* Ein Satz Hinweis unter dem Spiel. */
.pn-hub .sp-wink { font-size: clamp(11px, 1.7cqw, 13px); color: var(--text-still); text-align: center; }
.pn-hub .sp-lage { display: grid; gap: var(--s-2); justify-items: center; text-align: center;
                   padding: var(--s-5) var(--s-4); border-radius: var(--r-l);
                   border: 1px dashed var(--linie-stark); color: var(--text-leise);
                   font-size: clamp(12px, 1.8cqw, 14px); }

/* Eingabefelder im Spiel dürfen größer sein als im Formular — sie werden
   unter Zeitdruck getroffen, oft am Telefon. */
.pn-hub .sp-eingabe { display: grid; gap: var(--s-1); }
.pn-hub .sp-eingabe > span { font-family: var(--font-mono); font-size: var(--t-winzig);
                             font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
                             color: var(--text-still); }
.pn-hub .sp-eingabe input { min-height: 48px; font-size: clamp(14px, 2cqw, 16px); font-weight: 600; }

/* Der Gewinnerbalken. */
.pn-hub .sp-sieg { display: flex; align-items: center; justify-content: center; gap: var(--s-2);
                   padding: var(--s-3) var(--s-4); border-radius: var(--r-l);
                   background: var(--ok-bg); border: 1px solid var(--ok-500);
                   font-weight: 700; font-size: clamp(13px, 2.2cqw, 17px); text-align: center; }

/* Zwei Karten nebeneinander — im Hochformat übereinander. Das „Höher oder
   tiefer"-Duell und alles, was zwei Dinge gegenüberstellt. */
.pn-hub .sp-duell { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-3); align-items: stretch; }
.pn-hub .sp-duell .sp-gegen { display: grid; place-items: center; font-family: var(--font-display);
                              font-size: clamp(12px, 2.4cqw, 18px); color: var(--text-still); }
.pn-hub .sp-duell .sp-tafel { height: 100%; align-content: center; }
.pn-hub .sp-wert { font-family: var(--font-display); font-size: clamp(28px, 9cqw, 62px);
                   line-height: 1; font-variant-numeric: tabular-nums; }
.pn-hub .sp-wert.offen { color: var(--text-still); }
.pn-hub .sp-wert.gut   { color: var(--ok-500); }
.pn-hub .sp-serie { display: inline-flex; align-items: center; gap: var(--s-2);
                    font-family: var(--font-mono); font-size: var(--t-winzig); font-weight: 700;
                    letter-spacing: .12em; text-transform: uppercase; color: var(--warn-500); }

/* ═══ 6 · ENGE KÄSTEN ════════════════════════════════════════════════
   Was bei 760 px nebeneinander passt, passt bei 450 px nicht mehr. Die
   Abfrage gilt dem KASTEN — sie greift in der Aufnahmefläche auch dann,
   wenn das Fenster 2560 px breit ist. */

@container buehne (max-width: 520px) {
  .pn-hub .sp-duell { grid-template-columns: minmax(0, 1fr); }
  .pn-hub .sp-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-hub .sp-wahl button { min-height: 42px; }
  .pn-hub .sp-balken-zeile { grid-template-columns: minmax(56px, 72px) minmax(0, 1fr) 1.8rem; gap: var(--s-2); }
  .pn-hub .sp-pillen { gap: var(--s-1); }
  .pn-hub .sp-reihe { gap: var(--s-2); padding: var(--s-2); }
  .pn-hub .sp-feld.kopf { min-height: 2.2rem; }
}

@container buehne (max-width: 340px) {
  .pn-hub .sp-wahl { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ 7 · DAS FENSTER ════════════════════════════════════════════════
   Auf dem Telefon soll die Aufnahmefläche nicht künstlich klein bleiben:
   Dort IST das Fenster schon hochkant. */

@media (max-width: 620px) {
  .pn-hub .sp-aufnahme { padding: var(--s-3) 0 var(--s-4); gap: var(--s-4); border-radius: var(--r-m); }
  .pn-hub .sp-flaeche { height: auto; width: 100%; }
  .pn-hub .sp-leiste { gap: var(--s-3); }
  .pn-hub .sp-leiste .sp-luecke { flex-basis: 100%; }
  .pn-hub .sp-regie { border-radius: var(--r-l); }
  .pn-hub .sp-regie-titel { border-right: none; }
}

/* Vollbild: die Fläche bekommt die ganze Höhe, alles andere verschwindet.
   Genau das nimmt die Fensteraufnahme dann auf. */
.pn-hub .sp-aufnahme:fullscreen { display: grid; place-content: center; width: 100%; height: 100%;
                                  padding: 0; background: #000; border-radius: 0; }
.pn-hub .sp-aufnahme:fullscreen .sp-flaeche { height: 100vh; max-width: none; aspect-ratio: 9 / 16;
                                              border-radius: 0; box-shadow: none; }
.pn-hub .sp-aufnahme:fullscreen .sp-regie { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   DER CONTENTPLAN  (Kap. 05.3)
   Vier Spalten, Karten zum Ziehen. Anders als die Spiele misst er sich am
   Fenster — er ist ein Werkzeug, keine Bühne.
   ═══════════════════════════════════════════════════════════════════════ */

.pn-hub .cp-brett {
  display: grid; gap: var(--s-3); align-items: start;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) { .pn-hub .cp-brett { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .pn-hub .cp-brett { grid-template-columns: minmax(0, 1fr); } }

.pn-hub .cp-spalte { padding: var(--s-3); border-radius: var(--r-l);
                     background: var(--flaeche); border: 1px solid var(--linie); }
.pn-hub .cp-kopf { display: flex; align-items: center; justify-content: space-between;
                   gap: var(--s-2); margin-bottom: var(--s-3); padding-inline: var(--s-1); }
.pn-hub .cp-kopf b { font-family: var(--font-mono); font-size: var(--t-winzig); font-weight: 700;
                     letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); }
.pn-hub .cp-zahl { font-family: var(--font-mono); font-size: var(--t-winzig); color: var(--text-still);
                   background: var(--flaeche-3); border-radius: var(--r-full); padding: 1px var(--s-2); }

.pn-hub .cp-stapel { display: flex; flex-direction: column; gap: var(--s-2); min-height: 28px; }
.pn-hub .cp-stapel.drueber { outline: 2px dashed var(--marke-linie); outline-offset: 3px;
                             border-radius: var(--r-m); }

.pn-hub .cp-karte { display: grid; gap: var(--s-2); padding: var(--s-3);
                    border-radius: var(--r-m); background: var(--flaeche-2);
                    border: 1px solid var(--linie); cursor: pointer;
                    transition: border-color var(--dauer-schnell) var(--kurve); }
.pn-hub .cp-karte:hover { border-color: var(--linie-stark); }
.pn-hub .cp-karte.zieht { opacity: .4; }
/* Fremde Karten sind LESBAR, nur nicht greifbar (Kap. 05.3.4). Ausgrauen
   wäre falsch: Sie stehen bewusst da, damit man Kollisionen sieht. */
.pn-hub .cp-karte.fremd { cursor: default; border-style: dashed; }
.pn-hub .cp-karte h3 { margin: 0; font-family: var(--font-body); font-size: var(--t-body);
                       font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }

.pn-hub .cp-marken { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.pn-hub .cp-kanal { font-size: var(--t-winzig); font-weight: 700; letter-spacing: .04em;
                    border-radius: var(--r-full); padding: 2px var(--s-2); color: #fff;
                    background: var(--n-60); }
.pn-hub .cp-kanal.stumm { background: none; color: var(--text-still);
                          border: 1px solid var(--linie-stark); font-weight: 600; }
.pn-hub .cp-kanal.k-instagram { background: #c13584; }
.pn-hub .cp-kanal.k-tiktok    { background: #25f4ee; color: #0a090c; }
.pn-hub .cp-kanal.k-youtube   { background: #ff0033; }
.pn-hub .cp-kanal.k-x         { background: #2c2935; }
.pn-hub .cp-kanal.k-twitch    { background: #9146ff; }
.pn-hub .cp-kanal.k-discord   { background: #5865f2; }

.pn-hub .cp-fuss { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
                   font-size: var(--t-mikro); color: var(--text-still); }
.pn-hub .cp-fuss span, .pn-hub .cp-fuss a { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.pn-hub .cp-fuss .pn-ic { width: 12px; height: 12px; }
/* Eine überschrittene Frist ist der einzige Grund, warum diese Zeile
   Aufmerksamkeit verdient. */
.pn-hub .cp-fuss .spaet { color: var(--err-500); font-weight: 600; }

.pn-hub .cp-neu input { width: 100%; margin-top: var(--s-2); min-height: 36px;
                        font-size: var(--t-klein); }

/* Die Karte gross. <dialog> statt eigener Overlay-Bau: Der Browser kümmert
   sich um Fokusfalle, Escape und den Rest. */
.pn-hub .cp-dialog { width: min(640px, calc(100vw - 2 * var(--s-4))); max-height: 88vh;
                     padding: var(--s-5); border: 1px solid var(--linie-stark);
                     border-radius: var(--r-l); background: var(--flaeche);
                     color: var(--text); box-shadow: var(--heben-3); }
.pn-hub .cp-dialog::backdrop { background: rgba(0, 0, 0, .66); }
.pn-hub .cp-dialog h2 { margin: 0 0 var(--s-4); font-family: var(--font-display);
                        font-weight: 400; text-transform: uppercase; font-size: var(--t-h2); }
.pn-hub .cp-dialog fieldset { margin: var(--s-4) 0 0; padding: var(--s-3); border-radius: var(--r-m);
                              border: 1px solid var(--linie); }
.pn-hub .cp-dialog legend { padding-inline: var(--s-2); font-family: var(--font-mono);
                            font-size: var(--t-winzig); font-weight: 700; letter-spacing: .12em;
                            text-transform: uppercase; color: var(--text-still); }
.pn-hub .cp-kanalwahl { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.pn-hub .cp-kanalwahl label { display: inline-flex; align-items: center; gap: var(--s-2);
                              font-size: var(--t-klein); cursor: pointer; }
.pn-hub .cp-schritte { display: grid; gap: var(--s-2); }
.pn-hub .cp-schritte label { display: grid; grid-template-columns: auto minmax(0, 1fr);
                             gap: var(--s-2); align-items: center; }
.pn-hub .cp-schritte input[type=text] { min-height: 34px; font-size: var(--t-klein); }
.pn-hub .cp-schritte .hinweis { margin: 0; font-size: var(--t-mikro); color: var(--text-still); }
.pn-hub .cp-dialog-fuss { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
                          margin-top: var(--s-5); }

/* ═══════════════════════════════════════════════════════════════════════
   DIE MEDIENBIBLIOTHEK  (Kap. 05.6)
   ═══════════════════════════════════════════════════════════════════════ */

.pn-hub .mb-raster { display: grid; gap: var(--s-3);
                     grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.pn-hub .mb-datei { display: grid; gap: var(--s-2); padding: var(--s-2);
                    border-radius: var(--r-m); background: var(--flaeche);
                    border: 1px solid var(--linie); }
.pn-hub .mb-bild { aspect-ratio: 4 / 3; border-radius: var(--r-s); overflow: hidden;
                   background: var(--flaeche-3); display: grid; place-items: center; }
.pn-hub .mb-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pn-hub .mb-bild .mb-art { font-family: var(--font-mono); font-size: var(--t-mikro);
                           letter-spacing: .12em; text-transform: uppercase; color: var(--text-still); }
.pn-hub .mb-name { font-size: var(--t-klein); font-weight: 600; overflow-wrap: anywhere; }
.pn-hub .mb-meta { font-family: var(--font-mono); font-size: var(--t-winzig);
                   color: var(--text-still); letter-spacing: .06em; }
.pn-hub .mb-tasten { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.pn-hub .mb-tasten .pn-knopf { min-height: 30px; padding-inline: var(--s-2); font-size: var(--t-mikro); }

/* ═══ 8 · EINE REGEL, DIE GEWINNEN MUSS ══════════════════════════════
   `hidden` ist eine Browser-Vorgabe (`[hidden] { display: none }`) — und
   jede eigene `display`-Angabe schlägt sie, weil eine Klasse spezifischer
   ist als ein Attribut. Beim „Titel oben einblenden" stand der Titel
   deshalb sichtbar in der Aufnahmefläche, obwohl `hidden` gesetzt war.

   Diese Datei ist die letzte Ebene; hier gewinnt die Regel gegen alles,
   was davor steht. */
.pn-hub [hidden] { display: none !important; }

}