/* ═══════════════════════════════════════════════════════════════════════
   02 — BAUSTEINE
   Der Baukasten: Modul, Zeile, Tabelle, Formular, Knopf, Zeichen,
   Anzeigetafel, Schrittleiste. Alles, was an mehr als einer Stelle
   vorkommt.

   ── DER GRUNDGEDANKE ──────────────────────────────────────────────────
   Alles auf einer Seite ist ein **Modul**: eine Fläche mit farbiger Kante
   links, einer kleinen Überschrift und Inhalt. Die Kante trägt den
   Zustand — rot heisst „ihr seid dran", grün fertig, bernstein wartet,
   nichts heisst neutral.

   Damit verschwindet die Karte in der Karte, an der man vorher nicht
   sehen konnte, was zu was gehört.
   ═════════════════════════════════════════════════════════════════════ */

@layer bausteine {

/* ── Symbole ──────────────────────────────────────────────────────────
   Erben die Textfarbe. Ohne Grundgrösse füllt ein einzelnes SVG die
   halbe Seite — das ist genau einmal passiert. */
.pn-hub .pn-ic { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.16em; }
.pn-hub .ic-green  { color: var(--ok-500); }
.pn-hub .ic-red    { color: var(--err-500); }
.pn-hub .ic-gold   { color: var(--warn-500); }
.pn-hub .ic-orange { color: var(--warn-500); }

/* ── Modul ────────────────────────────────────────────────────────────
   Heisst im Markup weiterhin `.pn-karte`, weil das an 83 Stellen steht.
   Was sich ändert, ist alles andere. */
.pn-hub .pn-karte {
  min-width: 0;                       /* Rasterkinder schrumpfen sonst nicht */
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: var(--kante) solid var(--linie-stark);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: var(--s-5);
}
.pn-hub .pn-karte > h2 {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin: 0 0 var(--s-4);
  font-size: var(--t-h2); font-weight: 600;
}
.pn-hub .pn-karte > h2 .pn-ic { color: var(--text-still); }
.pn-hub .pn-karte > h2 + .pn-leer { margin-top: calc(-1 * var(--s-2)); }
.pn-hub .pn-karte > h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }

/* Zustände. Dieselben Wörter wie in `cfl_match_schritte()` — die Farbe
   ist damit keine Designentscheidung mehr, sondern eine Datenabbildung. */
.pn-hub .pn-karte.dran {
  border-left-color: var(--marke);
  background: linear-gradient(90deg, var(--marke-weich), transparent 32%), var(--flaeche);
}
.pn-hub .pn-karte.fertig   { border-left-color: var(--ok-500); }
.pn-hub .pn-karte.wartet   { border-left-color: var(--warn-500); }
.pn-hub .pn-karte.gefahr   { border-left-color: var(--err-500); }
.pn-hub .pn-karte.gesperrt { border-left-color: transparent; background: var(--bg-weich); }
.pn-hub .pn-karte.gesperrt > * { opacity: .55; }

/* ── Leerzustände ─────────────────────────────────────────────────────
   Ein leerer Bereich sagt, WARUM er leer ist — nicht „keine Daten". */
.pn-hub .pn-leer { color: var(--text-leise); font-size: var(--t-klein); margin: 0; }
.pn-hub .pn-leer + .pn-leer { margin-top: var(--s-2); }
.pn-hub .pn-nichts {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-5); color: var(--text-leise); font-size: var(--t-klein);
  background: var(--flaeche); border: 1px dashed var(--linie-stark);
  border-radius: var(--r-m);
}
.pn-hub .pn-nichts .pn-ic { width: 18px; height: 18px; color: var(--ok-500); }

/* ── Kleine Überschrift innerhalb eines Moduls ───────────────────────── */
.pn-hub .pn-block { margin-bottom: var(--s-5); }
.pn-hub .pn-block:last-child { margin-bottom: 0; }
.pn-hub .pn-block .titel {
  display: block; margin-bottom: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-winzig);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-still);
}

/* ── Knöpfe ───────────────────────────────────────────────────────────
   Eine Hauptaktion je Bereich. Gefahr ist Umriss statt Fläche — so bleibt
   sie von der Hauptaktion unterscheidbar, auch wenn beide rot sind. */
.pn-hub .pn-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 34px; padding: 0 var(--s-4);
  border: 1px solid var(--linie-stark); border-radius: var(--r-m);
  background: var(--flaeche-2); color: var(--text);
  font: inherit; font-size: var(--t-klein); font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dauer-schnell) var(--kurve),
              border-color var(--dauer-schnell) var(--kurve);
}
.pn-hub .pn-knopf:hover { background: var(--flaeche-3); }
.pn-hub .pn-knopf:active { transform: translateY(1px); }
.pn-hub .pn-knopf .pn-ic { width: 15px; height: 15px; }
.pn-hub .pn-knopf.haupt {
  background: var(--marke); border-color: var(--marke); color: #fff; font-weight: 600;
}
.pn-hub .pn-knopf.haupt:hover { background: var(--marke-hell); border-color: var(--marke-hell); }
.pn-hub .pn-knopf.still { background: transparent; border-color: transparent; color: var(--text-leise); }
.pn-hub .pn-knopf.still:hover { background: var(--flaeche-2); color: var(--text); }
.pn-hub .pn-knopf.gefahr {
  background: transparent; border-color: rgba(255, 95, 109, .4); color: var(--err-500);
}
.pn-hub .pn-knopf.gefahr:hover { background: var(--err-bg); border-color: var(--err-500); }
.pn-hub .pn-knopf[disabled], .pn-hub .pn-knopf:disabled { opacity: .45; cursor: not-allowed; }

/* ── Eingaben ─────────────────────────────────────────────────────────
   Steht in `bausteine`, nicht in `basis` — damit eine Ausnahme im
   Gerüst (etwa das Suchfeld mit Platz für die Lupe) sie schlagen kann,
   ohne spezifischer sein zu müssen. Genau daran ist es vorher zweimal
   schiefgegangen. */
.pn-hub input[type=text], .pn-hub input[type=search], .pn-hub input[type=email],
.pn-hub input[type=password], .pn-hub input[type=number], .pn-hub input[type=url],
.pn-hub input[type=date], .pn-hub input[type=datetime-local], .pn-hub input[type=time],
.pn-hub select, .pn-hub textarea {
  width: 100%; min-height: 36px; padding: var(--s-2) var(--s-3);
  background: var(--bg-weich); border: 1px solid var(--linie-stark); border-radius: var(--r-m);
  color: var(--text); font: inherit; font-size: var(--t-klein);
}
.pn-hub textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.pn-hub input::placeholder, .pn-hub textarea::placeholder { color: var(--text-still); }
.pn-hub input:focus, .pn-hub select:focus, .pn-hub textarea:focus {
  outline: none; border-color: var(--marke); box-shadow: 0 0 0 3px var(--marke-weich);
}
.pn-hub input[type=file] { padding: var(--s-2); font-size: var(--t-mikro); }
.pn-hub input[type=checkbox], .pn-hub input[type=radio] {
  width: auto; min-height: 0; accent-color: var(--marke);
}

/* ── Formular ─────────────────────────────────────────────────────────
   Beschriftung klein und in Versalien darüber, Feld darunter. Zwei
   Spalten, ein Feld darf `breit` sein. */
.pn-hub .pn-form-raster, .pn-hub .pn-felder {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4);
}
.pn-hub .pn-form-raster .breit, .pn-hub .pn-felder .breit { grid-column: 1 / -1; }
.pn-hub .pn-form-raster > label, .pn-hub .pn-felder > label, .pn-hub .pn-feld {
  display: grid; gap: 6px; min-width: 0;
  font-family: var(--font-mono); font-size: var(--t-winzig);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-still);
}
.pn-hub .pn-feld > label {
  font-family: var(--font-mono); font-size: var(--t-winzig);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-still);
}
.pn-hub .pn-form-raster label .hinweis, .pn-hub .pn-felder label .hinweis,
.pn-hub .pn-feld .hinweis {
  font-family: var(--font-body); text-transform: none; letter-spacing: 0;
  font-size: var(--t-mikro); color: var(--text-still);
}
.pn-hub .pn-form-raster input, .pn-hub .pn-form-raster select, .pn-hub .pn-form-raster textarea,
.pn-hub .pn-felder input, .pn-hub .pn-felder select, .pn-hub .pn-felder textarea,
.pn-hub .pn-feld input, .pn-hub .pn-feld select, .pn-hub .pn-feld textarea {
  font-family: var(--font-body); text-transform: none; letter-spacing: 0;
  font-size: var(--t-klein); color: var(--text);
}
@media (max-width: 700px) {
  .pn-hub .pn-form-raster, .pn-hub .pn-felder { grid-template-columns: minmax(0, 1fr); }
}

/* Ein Feld ausserhalb des Rasters, das die ganze Breite nimmt — ein
   Freitext, der neben einem Eingabefeld halb so breit stehen müsste, wird
   sonst zum Schlitz. Dieselbe Beschriftung wie im Raster, damit ein Formular
   nicht aus zwei Handschriften besteht. */
.pn-hub .pn-voll {
  display: grid; gap: 6px; margin-top: var(--s-4); min-width: 0;
  font-family: var(--font-mono); font-size: var(--t-winzig);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-still);
}
.pn-hub .pn-voll small {
  font-family: var(--font-body); text-transform: none; letter-spacing: 0;
  font-size: var(--t-mikro); color: var(--text-still);
}
.pn-hub .pn-voll input, .pn-hub .pn-voll textarea, .pn-hub .pn-voll select {
  width: 100%; padding: var(--s-2) var(--s-3);
  font-family: var(--font-body); font-size: var(--t-body);
  letter-spacing: 0; text-transform: none; color: var(--text);
  background: var(--flaeche-2); border: 1px solid var(--linie-stark);
  border-radius: var(--r-m);
}
.pn-hub .pn-voll textarea { resize: vertical; }

/* Angaben lesen, nicht ändern: Beschriftung links, Wert rechts. Auf schmalen
   Fenstern untereinander — zwei Spalten auf 375 px ergeben zwei Schlitze. */
.pn-hub .pn-daten {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-2) var(--s-5); margin: var(--s-4) 0;
}
.pn-hub .pn-daten dt {
  font-family: var(--font-mono); font-size: var(--t-winzig);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-still);
}
.pn-hub .pn-daten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .pn-hub .pn-daten { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .pn-hub .pn-daten dd { margin-bottom: var(--s-3); }
}

.pn-hub .pn-schalter { display: grid; gap: var(--s-3); }
.pn-hub .pn-schalter .zeile {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-family: var(--font-body); font-size: var(--t-klein);
  text-transform: none; letter-spacing: 0; color: var(--text);
}
.pn-hub .pn-schalter input[type=checkbox] { margin-top: 3px; }
.pn-hub .pn-schalter small { display: block; color: var(--text-still); font-size: var(--t-mikro); }

/* ── Meldungen ────────────────────────────────────────────────────────
   Kante links, Symbol, Text. Farbe allein ist keine Aussage, wenn jemand
   sie nicht unterscheiden kann. */
.pn-hub .pn-meldung {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  background: var(--flaeche-2);
  border-left: var(--kante) solid var(--linie-stark);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  font-size: var(--t-klein);
}
.pn-hub .pn-meldung .pn-ic { width: 18px; height: 18px; }
.pn-hub .pn-meldung.ok  { background: var(--ok-bg);  border-left-color: var(--ok-500); }
.pn-hub .pn-meldung.ok .pn-ic { color: var(--ok-500); }
.pn-hub .pn-meldung.err { background: var(--err-bg); border-left-color: var(--err-500); }
.pn-hub .pn-meldung.err .pn-ic { color: var(--err-500); }

/* ── Zeichen (kleine Marken) ──────────────────────────────────────────
   Heissen im Markup `.pn-tag`. Klein, in Versalien, mit Zahlenschrift —
   damit sie sich nicht mit Text verwechseln lassen. */
.pn-hub .pn-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px; border-radius: var(--r-s);
  background: var(--flaeche-2); color: var(--text-leise);
  font-family: var(--font-mono); font-size: var(--t-winzig); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
  white-space: nowrap;
}
.pn-hub .pn-tag .pn-ic { width: 12px; height: 12px; }
.pn-hub .pn-tag.akzent   { background: var(--marke-weich); color: var(--marke-hell); }
.pn-hub .pn-tag.gut      { background: var(--ok-bg);   color: var(--ok-500); }
.pn-hub .pn-tag.warnt    { background: var(--warn-bg); color: var(--warn-500); }
.pn-hub .pn-tag.gesperrt { background: var(--err-bg);  color: var(--err-500); }

/* ── Zeilen: das Arbeitspferd ─────────────────────────────────────────
   Eine Zeile ist eine Zeile. Keine Karte in der Karte. */
.pn-hub .pn-zeilen { display: grid; }
.pn-hub .pn-zeile {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-3) var(--s-3);
  margin-inline: calc(-1 * var(--s-3));
  border-bottom: 1px solid var(--linie);
  border-radius: var(--r-s);
  color: var(--text); text-decoration: none;
}
.pn-hub .pn-zeile:last-child { border-bottom: 0; }
.pn-hub a.pn-zeile:hover { background: var(--flaeche-2); }
.pn-hub .pn-zeile .zeit, .pn-hub .pn-zeile .datum {
  flex: none; width: 78px;
  font-family: var(--font-mono); font-size: var(--t-mikro); color: var(--text-still);
}
.pn-hub .pn-zeile .haupt {
  flex: 1 1 200px; min-width: 0;
  font-size: var(--t-klein); font-weight: 600;
}
.pn-hub .pn-zeile .neben {
  display: block; color: var(--text-still); font-size: var(--t-mikro); font-weight: 400;
}
.pn-hub .pn-zeile .rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.pn-hub .pn-zeile .grow { flex: 1 1 auto; min-width: 0; }
.pn-hub .pn-zeile .title { font-size: var(--t-klein); font-weight: 600; }
.pn-hub .pn-zeile .meta { color: var(--text-still); font-size: var(--t-mikro); }

/* Wappen — überall gleich gross, überall gleich gerahmt. */
.pn-hub .pn-wappen {
  flex: none; width: 32px; height: 32px; object-fit: contain;
  background: var(--chrome); border-radius: var(--r-s);
}

/* ── Zahlenband ───────────────────────────────────────────────────────
   Die Zahlen, wegen denen man auf die Seite kommt. */
.pn-hub .pn-zahlen {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--flaeche);
  border: 1px solid var(--linie); border-left: var(--kante) solid var(--linie-stark);
  border-radius: 0 var(--r-m) var(--r-m) 0;
}
.pn-hub .pn-zahl { display: block; color: inherit; text-decoration: none; }
.pn-hub a.pn-zahl:hover .wert { color: var(--marke-hell); }
.pn-hub .pn-zahl .wert {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: 30px; line-height: 1; letter-spacing: .01em;
  transition: color var(--dauer-schnell) var(--kurve);
}
.pn-hub .pn-zahl .was {
  display: block; margin-top: 4px;
  font-family: var(--font-mono); font-size: var(--t-winzig);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-still);
}
.pn-hub .pn-zahl.warnt .wert { color: var(--warn-500); }

/* ── Reiter ───────────────────────────────────────────────────────────── */
.pn-hub .pn-reiter {
  display: flex; gap: var(--s-1); flex-wrap: wrap; align-items: center;
  border-bottom: 1px solid var(--linie);
}
.pn-hub .pn-reiter a {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-still); text-decoration: none;
  font-size: var(--t-klein); font-weight: 500;
}
.pn-hub .pn-reiter a:hover { color: var(--text); }
.pn-hub .pn-reiter a.aktiv { color: var(--text); border-bottom-color: var(--marke); font-weight: 600; }
.pn-hub .pn-reiter a .pn-tag { background: var(--flaeche-2); }
.pn-hub .pn-reiter a.aktiv .pn-tag { background: var(--marke-weich); color: var(--marke-hell); }

/* ── Tabelle ──────────────────────────────────────────────────────────
   Die Hülle scrollt, nicht die Seite. */
.pn-hub .pn-tabelle-huelle { overflow-x: auto; margin-inline: calc(-1 * var(--s-3)); }
.pn-hub .pn-tabelle { width: 100%; border-collapse: collapse; font-size: var(--t-klein); }
.pn-hub .pn-tabelle th {
  text-align: left; padding: var(--s-2) var(--s-3); white-space: nowrap;
  border-bottom: 1px solid var(--linie-stark);
  font-family: var(--font-mono); font-size: var(--t-winzig); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-still);
}
.pn-hub .pn-tabelle td { padding: var(--s-3); border-bottom: 1px solid var(--linie); white-space: nowrap; }
.pn-hub .pn-tabelle tr:last-child td { border-bottom: 0; }
.pn-hub .pn-tabelle .platz { width: 32px; color: var(--text-still); font-family: var(--font-mono); }
.pn-hub .pn-tabelle .zahl { text-align: right; font-family: var(--font-mono); }
.pn-hub .pn-tabelle .punkte { font-weight: 700; color: var(--text); }
.pn-hub .pn-tabelle .team { display: flex; align-items: center; gap: var(--s-3); font-weight: 500; }
.pn-hub .pn-tabelle .team .pn-wappen { width: 22px; height: 22px; }
.pn-hub .pn-tabelle tr.wir td { background: var(--marke-weich); }
.pn-hub .pn-tabelle tr.wir .platz { color: var(--marke-hell); }

/* ── Ergebnis ─────────────────────────────────────────────────────────── */
.pn-hub .pn-ergebnis {
  font-family: var(--font-display); font-weight: 400;
  font-size: 17px; letter-spacing: .04em;
}
.pn-hub .pn-ergebnis.sieg { color: var(--ok-500); }
.pn-hub .pn-ergebnis.niederlage { color: var(--text-still); }

/* ── Vier Punkte statt vier Wörter ────────────────────────────────────
   Termin · Veto · Roster · Ergebnis. Was jeder Punkt heisst, sagt sein
   `title` — die Zeile bleibt trotzdem lesbar. */
.pn-hub .pn-fortschritt { display: flex; gap: 4px; flex: none; }
.pn-hub .pn-fortschritt > span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--flaeche-3);
}
.pn-hub .pn-fortschritt > span.fertig   { background: var(--ok-500); }
.pn-hub .pn-fortschritt > span.dran     { background: var(--marke); box-shadow: 0 0 0 3px var(--marke-weich); }
.pn-hub .pn-fortschritt > span.wartet   { background: var(--warn-500); }
.pn-hub .pn-fortschritt > span.offen    { background: var(--text-still); }
.pn-hub .pn-fortschritt > span.gesperrt { background: transparent; box-shadow: inset 0 0 0 1px var(--linie-stark); }
@media (max-width: 560px) { .pn-hub .pn-fortschritt { display: none; } }

.pn-hub .pn-punkte { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ── Schrittleiste ────────────────────────────────────────────────────
   Vier Felder, jedes mit Zustand und einer Zeile, die sagt WAS fehlt —
   nicht nur, dass etwas fehlt. */
.pn-hub .pn-schrittleiste {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  list-style: none; margin: 0; padding: 0;
  background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r-m);
  overflow: hidden;
}
.pn-hub .pn-schrittleiste li {
  display: grid; grid-template-areas: "nr was" "nr wie"; grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--s-2); align-content: start;
  padding: var(--s-3) var(--s-4); background: var(--flaeche);
}
.pn-hub .pn-schrittleiste .nr, .pn-hub .pn-schritt .nr {
  grid-area: nr; align-self: center;
  display: inline-grid; place-items: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--flaeche-3); color: var(--text-still);
  font-family: var(--font-mono); font-size: var(--t-winzig); font-weight: 700;
}
.pn-hub .pn-schrittleiste .was { grid-area: was; font-size: var(--t-klein); font-weight: 600; }
.pn-hub .pn-schrittleiste .wie {
  grid-area: wie; font-size: var(--t-mikro); color: var(--text-still);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pn-hub .pn-schrittleiste li.fertig .nr { background: var(--ok-bg);   color: var(--ok-500); }
.pn-hub .pn-schrittleiste li.wartet .nr { background: var(--warn-bg); color: var(--warn-500); }
.pn-hub .pn-schrittleiste li.dran {
  background: linear-gradient(180deg, var(--marke-weich), transparent);
}
.pn-hub .pn-schrittleiste li.dran .nr { background: var(--marke); color: #fff; }
.pn-hub .pn-schrittleiste li.dran .wie { color: var(--marke-hell); }
.pn-hub .pn-schrittleiste li.gesperrt { opacity: .5; }
@media (max-width: 700px) {
  .pn-hub .pn-schrittleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ein einzelner Schritt: offen, zugeklappt oder gesperrt. */
.pn-hub .pn-schritt.jetzt { border-left-color: var(--marke); }
.pn-hub .pn-schritt.jetzt > h2 .nr { background: var(--marke); color: #fff; }
.pn-hub details.pn-schritt { padding: 0; }
.pn-hub details.pn-schritt > summary {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); cursor: pointer; list-style: none;
}
.pn-hub details.pn-schritt > summary::-webkit-details-marker { display: none; }
.pn-hub details.pn-schritt > summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--text-still); border-bottom: 1.5px solid var(--text-still);
  transform: rotate(45deg);
  transition: transform var(--dauer-schnell) var(--kurve);
}
.pn-hub details.pn-schritt[open] > summary::after { transform: rotate(-135deg); }
.pn-hub details.pn-schritt > summary:hover { background: var(--flaeche-2); }
.pn-hub details.pn-schritt > .inhalt { padding: 0 var(--s-5) var(--s-5); }
.pn-hub .pn-schritt .titel { font-size: var(--t-klein); font-weight: 600; }
.pn-hub .pn-schritt .grund { color: var(--text-still); font-size: var(--t-mikro); }
.pn-hub .pn-schritt.zu {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--flaeche); border: 1px solid var(--linie);
  border-left: var(--kante) solid var(--linie-stark); border-radius: 0 var(--r-m) var(--r-m) 0;
}
.pn-hub .pn-schritt.zu.gesperrt { border-left-color: transparent; opacity: .6; }
.pn-hub .pn-schritt.zu .grund { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

/* ── Anzeigetafel ─────────────────────────────────────────────────────
   Das nächste Match, gross. Es ist die Sache, wegen der man die Seite
   überhaupt geöffnet hat — also darf sie laut sein. */
.pn-hub .pn-cfbuehne, .pn-hub .pn-buehne-match {
  position: relative;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background:
    radial-gradient(130% 150% at 50% -20%, var(--marke-weich), transparent 62%),
    var(--flaeche);
  border: 1px solid var(--marke-linie); border-radius: var(--r-l);
  box-shadow: var(--heben-3);
}
.pn-hub .pn-cfbuehne .kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3);
}
.pn-hub .pn-cfbuehne .label {
  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--marke);
}
.pn-hub .pn-cfbuehne .countdown {
  font-family: var(--font-mono); font-size: var(--t-klein); color: var(--text-leise);
}
.pn-hub .pn-cfbuehne .paarung {
  display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(22px, 3.6vw, 36px); line-height: 1.02;
}
.pn-hub .pn-cfbuehne .vs { font-size: .5em; color: var(--text-still); }
.pn-hub .pn-cfbuehne .gegner { color: var(--marke); }
.pn-hub .pn-cfbuehne .wo {
  margin: var(--s-2) 0 var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-mikro);
  letter-spacing: .08em; color: var(--text-still);
}
.pn-hub .pn-cfbuehne .stand {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  list-style: none; margin: 0 0 var(--s-4); padding: 0;
  font-size: var(--t-mikro); color: var(--text-leise);
}
.pn-hub .pn-cfbuehne .stand li { display: flex; align-items: center; gap: 5px; }
.pn-hub .pn-cfbuehne .stand strong {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--t-winzig);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-still);
}
.pn-hub .pn-cfbuehne .stand .pn-ic { width: 13px; height: 13px; }
.pn-hub .pn-cfbuehne .stand .fertig { color: var(--ok-500); }
.pn-hub .pn-cfbuehne .stand .dran   { color: var(--marke-hell); font-weight: 600; }
.pn-hub .pn-cfbuehne .stand .wartet { color: var(--warn-500); }
.pn-hub .pn-cfbuehne .stand .cast .pn-ic { color: var(--c-stream); }

/* Die Tafel im Cockpit: Wappen, Stand, Wappen. */
.pn-hub .pn-buehne-match {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-5);
  align-items: center; text-align: center;
}
.pn-hub .pn-buehne-match .seite { display: grid; gap: 6px; justify-items: center; min-width: 0; }
.pn-hub .pn-buehne-match .seite img { width: 52px; height: 52px; object-fit: contain;
                                      background: var(--chrome); border-radius: var(--r-m); }
.pn-hub .pn-buehne-match .seite strong { font-size: var(--t-klein); font-weight: 600; }
.pn-hub .pn-buehne-match .mitte { display: grid; gap: 4px; }
.pn-hub .pn-buehne-match .stand {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 5vw, 44px); line-height: .95; letter-spacing: .03em;
  color: var(--marke);
}
.pn-hub .pn-buehne-match .wann {
  font-family: var(--font-mono); font-size: var(--t-mikro);
  color: var(--text-still); white-space: nowrap;
}

/* ── Kacheln ──────────────────────────────────────────────────────────
   Grosse Ziele, klar getrennt — auch mit dem Daumen zu treffen. */
.pn-hub .pn-kacheln {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: var(--s-3);
}
.pn-hub .pn-kachel {
  position: relative;
  display: grid; gap: var(--s-3); align-content: center; justify-items: start;
  min-height: 96px; padding: var(--s-4);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  color: var(--text); text-decoration: none;
  transition: transform var(--dauer-schnell) var(--kurve),
              border-color var(--dauer-schnell) var(--kurve);
  animation: pnKachelEin var(--dauer-normal) var(--kurve) backwards;
  animation-delay: var(--verzug, 0ms);
}
@keyframes pnKachelEin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pn-hub .pn-kachel .pn-ic { width: 20px; height: 20px; color: var(--text-leise); }
.pn-hub .pn-kachel .was {
  font-family: var(--font-display); font-weight: 400; font-size: 17px;
  text-transform: uppercase; letter-spacing: .015em;
}
.pn-hub .pn-kachel .zahl {
  position: absolute; top: var(--s-3); right: var(--s-3);
  min-width: 19px; padding: 1px 6px; border-radius: var(--r-full);
  background: var(--marke); color: #fff;
  font-family: var(--font-mono); font-size: var(--t-winzig); font-weight: 700; text-align: center;
}
.pn-hub .pn-kachel:hover { border-color: var(--linie-stark); }
/* Der „Cursor": deutlicher Rahmen, leichte Vergrösserung, Akzentglühen. */
.pn-hub .pn-kachel:focus-visible {
  outline: none; border-color: var(--marke); transform: scale(1.02);
  box-shadow: var(--heben-2), 0 0 0 3px var(--marke-weich);
}
@media (prefers-reduced-motion: reduce) {
  .pn-hub .pn-kachel { animation: none; }
  .pn-hub .pn-kachel:focus-visible { transform: none; }
}

/* ── Sofortsuche ──────────────────────────────────────────────────────
   Vier Treffer sichtbar, Rest scrollt bis acht, dann die ganze Seite. */
.pn-hub .pn-such-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  width: max(100%, 420px);
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--r-m); box-shadow: var(--heben-3); overflow: hidden;
}
.pn-hub .pn-such-liste { max-height: calc(4 * 50px); overflow-y: auto; overscroll-behavior: contain; }
.pn-hub .pn-such-treffer {
  display: flex; align-items: center; gap: var(--s-3);
  height: 50px; padding: 0 var(--s-3);
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--linie);
}
.pn-hub .pn-such-treffer:last-child { border-bottom: 0; }
.pn-hub .pn-such-treffer:hover, .pn-hub .pn-such-treffer.gewaehlt { background: var(--flaeche-2); }
.pn-hub .pn-such-art {
  flex: none; min-width: 72px;
  font-family: var(--font-mono); font-size: var(--t-winzig);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-still);
}
.pn-hub .pn-such-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pn-hub .pn-such-text strong { font-weight: 600; font-size: var(--t-klein); }
.pn-hub .pn-such-text strong, .pn-hub .pn-such-text span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pn-hub .pn-such-text span { font-size: var(--t-mikro); color: var(--text-still); }
.pn-hub .pn-such-treffer mark { background: none; color: var(--marke-hell); font-weight: 700; }
.pn-hub .pn-such-mehr {
  display: block; padding: var(--s-2) var(--s-3);
  background: var(--bg-weich); border-top: 1px solid var(--linie);
  font-family: var(--font-mono); font-size: var(--t-mikro); letter-spacing: .06em;
  color: var(--marke-hell); text-decoration: none;
}
.pn-hub .pn-such-mehr:hover { background: var(--flaeche-2); }
.pn-hub .pn-such-leer { margin: 0; padding: var(--s-3); font-size: var(--t-klein); color: var(--text-still); }

/* Trefferseite */
.pn-hub .pn-suche-gross { display: flex; gap: var(--s-2); align-items: center; position: relative; }
.pn-hub .pn-suche-gross .pn-ic {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-still); pointer-events: none;
}
.pn-hub .pn-suche-gross input { flex: 1 1 auto; padding-left: 38px; min-height: 40px; }
.pn-hub .pn-treffer { display: grid; }
.pn-hub .pn-treffer-zeile {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border-bottom: 1px solid var(--linie);
  color: var(--text); text-decoration: none;
}
.pn-hub .pn-treffer-zeile:last-child { border-bottom: 0; }
.pn-hub .pn-treffer-zeile:hover { background: var(--flaeche-2); }
.pn-hub .pn-treffer-zeile .ic { color: var(--text-still); }
.pn-hub .pn-treffer-zeile .tx { flex: 1 1 auto; min-width: 0; }
.pn-hub .pn-treffer-zeile .tx strong { display: block; font-size: var(--t-klein); font-weight: 600; }
.pn-hub .pn-treffer-zeile .tx small { color: var(--text-still); font-size: var(--t-mikro); }
.pn-hub .pn-treffer-zeile .art {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--t-winzig);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-still);
}

/* ── „Das liegt bei dir" ──────────────────────────────────────────────── */
.pn-hub .pn-todo-gruppe { margin-bottom: var(--s-4); }
.pn-hub .pn-todo-gruppe:last-child { margin-bottom: 0; }
.pn-hub .pn-todo-label {
  display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-winzig);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-still);
}
.pn-hub .pn-todo-label span {
  background: var(--flaeche-2); border-radius: var(--r-full); padding: 1px 6px; color: var(--text-leise);
}
.pn-hub .pn-todo-gruppe.dringend .pn-todo-label { color: var(--marke); }
.pn-hub .pn-todo-gruppe.dringend .pn-todo-label span { background: var(--marke-weich); color: var(--marke-hell); }
.pn-hub .pn-todo-zeile {
  display: block; padding: var(--s-2) var(--s-3);
  margin-inline: calc(-1 * var(--s-3));
  border-radius: var(--r-s); color: var(--text); text-decoration: none; font-size: var(--t-klein);
}
.pn-hub .pn-todo-zeile:hover { background: var(--flaeche-2); }
.pn-hub .pn-todo-mehr { display: block; padding: var(--s-2) 0; color: var(--text-still); font-size: var(--t-mikro); }

/* ── Termine ──────────────────────────────────────────────────────────── */
.pn-hub .pn-termine { display: grid; }
.pn-hub .pn-termin {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3); margin-inline: calc(-1 * var(--s-3));
  border-bottom: 1px solid var(--linie); border-radius: var(--r-s);
  color: var(--text); text-decoration: none;
}
.pn-hub .pn-termin:last-child { border-bottom: 0; }
.pn-hub .pn-termin:hover { background: var(--flaeche-2); }
.pn-hub .pn-termin .tag {
  flex: none; width: 54px; text-align: center;
  font-family: var(--font-mono); color: var(--text-leise);
}
.pn-hub .pn-termin .tag strong { display: block; font-size: var(--t-klein); color: var(--text); }
.pn-hub .pn-termin .tag small { display: block; font-size: var(--t-winzig); color: var(--text-still); }
.pn-hub .pn-termin .was { min-width: 0; }
.pn-hub .pn-termin .was strong { display: block; font-size: var(--t-klein); font-weight: 600; }
.pn-hub .pn-termin .was small { display: block; color: var(--text-still); font-size: var(--t-mikro); }

/* ── Verlauf ──────────────────────────────────────────────────────────── */
.pn-hub .pn-verlauf { display: grid; }
.pn-hub .pn-verlauf-zeile {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--linie); font-size: var(--t-klein);
}
.pn-hub .pn-verlauf-zeile:last-child { border-bottom: 0; }
.pn-hub .pn-verlauf-zeile .wer { flex: none; width: 116px; color: var(--text-leise); font-weight: 600; }
.pn-hub .pn-verlauf-zeile .was { flex: 1 1 auto; min-width: 0; }
.pn-hub .pn-verlauf-zeile .wann {
  margin-left: auto; flex: none;
  font-family: var(--font-mono); font-size: var(--t-mikro); color: var(--text-still);
}

/* ── Cockpit-Kleinkram ────────────────────────────────────────────────── */
.pn-hub .pn-zurueckzeile {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: calc(-1 * var(--s-2));
  font-family: var(--font-mono); font-size: var(--t-mikro); letter-spacing: .06em;
}
.pn-hub .pn-zurueckzeile a { color: var(--text-still); text-decoration: none; }
.pn-hub .pn-zurueckzeile a:hover { color: var(--text); }

/* Der Beleg-Hinweis: einmal deutlich, ohne Dauerbewegung. Wer ihn zwanzig
   Mal gesehen hat, sieht ihn nicht mehr — und alles daneben auch nicht. */
.pn-hub .pn-beleg {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  background: var(--err-bg); border-left: var(--kante) solid var(--err-500);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  font-size: var(--t-klein); line-height: 1.5;
}
.pn-hub .pn-beleg .pn-ic { width: 18px; height: 18px; color: var(--err-500); margin-top: 2px; }
.pn-hub .pn-beleg strong { display: block; margin-bottom: 2px; }

}