/* ═══════════════════════════════════════════════════════════════════════
   04 — BESONDERES
   Nur was wirklich nur an EINER Stelle vorkommt: das Live-Terminal des
   Casters, die Overlay-Liste, die Map-Zeilen im Veto, die Ampel im
   Adminhub, die Marktkarten.

   Diese Ebene gewinnt gegen `bausteine` — deshalb steht hier nichts, was
   sich mit dem Baukasten überschneidet. Wer hier etwas ergänzt und merkt,
   dass er dasselbe an zweiter Stelle braucht: Dann gehört es nach 03.

   Die Regeln sind aus der alten `hub.css` übernommen. Sie ändern ihr
   Aussehen trotzdem mit — sie benutzen ausschliesslich Token, und die
   sind neu. Genau dafür gibt es Token.
   ═════════════════════════════════════════════════════════════════════ */

@layer besonderes {

.pn-hakerl { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) 0; font-size: var(--t-klein); }
/* ── Raster ───────────────────────────────────────────────────────────── */
.pn-spalten-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; }
/* ── System-Ampel (Kap. 07.1) ─────────────────────────────────────────── */
.pn-ampel { display: inline-block; width: 9px; height: 9px; border-radius: var(--r-full); flex: none; }
.pn-ampel.ok        { background: var(--ok-500); }
.pn-ampel.warnung   { background: var(--warn-500); }
.pn-ampel.fehler    { background: var(--err-500); }
.pn-ampel.unbekannt { background: var(--text-still); }
.pn-checks { display: grid; }
.pn-check { 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-check:last-child { border-bottom: 0; }
.pn-check .punkt { width: 8px; height: 8px; border-radius: var(--r-full); flex: none; }
.pn-check.ok        .punkt { background: var(--ok-500); }
.pn-check.warnung   .punkt { background: var(--warn-500); }
.pn-check.fehler    .punkt { background: var(--err-500); }
.pn-check.unbekannt .punkt { background: var(--text-still); }
.pn-check .name { flex: none; width: 150px; font-weight: 600; }
.pn-check .text { flex: 1 1 auto; color: var(--text-leise); }
.pn-check.fehler  .text { color: var(--err-500); }
.pn-check.warnung .text { color: var(--warn-500); }
.pn-check a { color: var(--akzent); text-decoration: none; font-size: var(--t-mikro); }
/* ── Freigaben (Kap. 07.2) ────────────────────────────────────────────── */
.pn-antrag {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-top-color: var(--linie-licht); border-radius: var(--r-m);
  box-shadow: var(--heben-2); padding: var(--s-5); margin-bottom: var(--s-3);
}
/* Ein Antrag mit Warnung bekommt keine bunte Kante, sondern eine Tönung —
   die Warnung selbst steht als Zeile drin und sagt, worum es geht. */
.pn-antrag.hat-warnung { background: linear-gradient(180deg, rgba(217,119,6,.06), transparent 120px), var(--flaeche); }
.pn-antrag .kopf { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.pn-antrag .art { display: flex; align-items: center; gap: var(--s-2);
                  color: var(--text-still); font-size: var(--t-mikro);
                  text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.pn-antrag .titel { font-size: 17px; font-weight: 700; }
.pn-antrag .alter { margin-left: auto; color: var(--text-still); font-size: var(--t-mikro); }
.pn-antrag .inhalt { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3) var(--s-5); }
.pn-antrag .feld { font-size: var(--t-klein); }
.pn-antrag .feld.breit { grid-column: 1 / -1; }
.pn-antrag .feld span { display: block; color: var(--text-still); font-size: var(--t-mikro);
                        text-transform: uppercase; letter-spacing: .06em; font-weight: 800; margin-bottom: 1px; }
.pn-antrag .vorher-nachher {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  margin-top: var(--s-1); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-s); background: var(--bg-weich);
}
.pn-antrag .vorher-nachher > div { font-size: var(--t-klein); font-weight: 700; }
.pn-antrag .vorher-nachher span { display: block; color: var(--text-still); font-size: var(--t-mikro);
                                  text-transform: uppercase; letter-spacing: .06em; }
.pn-antrag .raus  { color: var(--err-500); }
.pn-antrag .rein  { color: var(--ok-500); }
.pn-antrag .pfeil { color: var(--text-still); }
.pn-antrag .warnung { display: flex; gap: var(--s-2); align-items: flex-start;
                      margin-top: var(--s-3); padding: var(--s-2) var(--s-3);
                      border-radius: var(--r-s); background: var(--warn-bg);
                      color: var(--warn-500); font-size: var(--t-klein); }
.pn-antrag .notizen { margin-top: var(--s-4); display: grid; gap: var(--s-1); }
.pn-antrag .notiz { font-size: var(--t-klein); color: var(--text-leise); }
.pn-antrag .notiz strong { color: var(--text); margin-right: var(--s-2); }
.pn-antrag .notiz span { color: var(--text-still); font-size: var(--t-mikro); margin-left: var(--s-2); }
.pn-antrag .aktionen { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center;
                       margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--linie); }
.pn-antrag .mit-grund { display: flex; gap: var(--s-1); flex: 1 1 280px; min-width: 0; }
.pn-antrag .mit-grund input { flex: 1 1 auto; min-width: 0; }
.pn-antrag .entschieden { margin-top: var(--s-4); padding-top: var(--s-3);
                          border-top: 1px solid var(--linie);
                          color: var(--text-still); font-size: var(--t-mikro); }
/* ── Freigabe-Übersicht auf dem Dashboard ─────────────────────────────── */
.pn-freigabe-zeile { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pn-freigabe-zeile a {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-s);
  background: var(--bg-weich); color: var(--text); text-decoration: none; font-size: var(--t-klein);
}
.pn-freigabe-zeile a:hover { background: var(--flaeche-2); }
.pn-freigabe-zeile strong { font-size: 20px; font-weight: 700; color: var(--akzent); font-variant-numeric: tabular-nums; }
/* ── Bereichsliste (Liga, Website) ────────────────────────────────────────
   Früher ein Raster gleich grosser Kacheln aus Symbol, Titel und Zeile — das
   ist der bequeme Container, nicht die passende Form. Als Liste ist es
   dichter, schneller zu überfliegen und sagt mehr. */
.pn-bereiche { display: grid; }
.pn-bereich {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-3); margin-inline: calc(-1 * var(--s-3));
  border-radius: var(--r-s); border-bottom: 1px solid var(--linie);
  color: var(--text); text-decoration: none;
}
.pn-bereich:last-child { border-bottom: 0; }
.pn-bereich:hover { background: var(--flaeche-2); }
.pn-bereich .ic { color: var(--text-still); flex: none; }
.pn-bereich:hover .ic { color: var(--text-leise); }
.pn-bereich .name { flex: none; width: 200px; font-size: var(--t-klein); font-weight: 700; }
.pn-bereich .was  { flex: 1 1 auto; min-width: 0; color: var(--text-leise); font-size: var(--t-mikro); }
.pn-bereich .zahl { flex: none; color: var(--text-still); font-size: var(--t-mikro); font-variant-numeric: tabular-nums; }
.pn-bereich.warnt .zahl { color: var(--warn-500); font-weight: 700; }
/* ── Konten (Kap. 07.10) ──────────────────────────────────────────────── */
.pn-kontofilter { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }
.pn-kontofilter input[type=search] { flex: 1 1 280px; min-width: 0; }
/* ⚠ Die Zeile heisst `pn-kontozeile`, NICHT `pn-konto`: Den Namen hat schon
   das Klappmenü oben rechts im Gerüst. Die Liste blieb dadurch ungestaltet —
   und weil der Name vergeben war, hat auch die Prüfung „keine benutzte Klasse
   ohne Stil" nichts gemerkt. */
.pn-kontoliste { display: grid; gap: var(--s-1); }
.pn-kontozeile {
  display: grid; align-items: center; gap: var(--s-2) var(--s-4);
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) auto auto;
  padding: var(--s-2) var(--s-3);
  border-left: var(--kante) solid transparent; border-radius: var(--r-m);
  color: inherit; text-decoration: none;
}
.pn-kontozeile:hover { background: var(--flaeche-2); border-left-color: var(--linie-stark); }
.pn-kontozeile.offen { background: var(--flaeche-2); border-left-color: var(--marke); }
.pn-kontozeile.gesperrt { opacity: .55; }
.pn-kontozeile .name { font-weight: 600; }
.pn-kontozeile .mail { color: var(--text-still); font-size: var(--t-klein);
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-kontozeile .rollen { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.pn-kontozeile .wann { color: var(--text-still); font-size: var(--t-mikro);
                       font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 860px) {
  .pn-kontozeile { grid-template-columns: 1fr auto; }
  .pn-kontozeile .mail { grid-column: 1 / -1; }
  .pn-kontozeile .rollen { justify-content: flex-start; grid-column: 1 / -1; }
}
/* ═════════════════════════════════════════════════════════════════════════
   CASTERHUB  (Kap. 09)
   ═══════════════════════════════════════════════════════════════════════ */
/* Der nächste Cast ist das einzige Element im Hub, das laut sein darf: Es ist
   die Sache, wegen der man die Seite überhaupt geöffnet hat. */
.pn-buehne {
  position: relative; overflow: hidden;
  background:
    radial-gradient(80% 140% at 12% 0%, rgba(214,0,50,.14), transparent 62%),
    var(--flaeche);
  border: 1px solid var(--linie); border-top-color: var(--linie-licht);
  border-radius: var(--r-l); padding: var(--s-6);
  box-shadow: var(--heben-3); margin-bottom: var(--s-5);
}
.pn-buehne-kopf { display: flex; justify-content: space-between; align-items: baseline;
                  gap: var(--s-3); flex-wrap: wrap; }
.pn-buehne-kopf .marke { color: var(--text-still); font-size: var(--t-mikro);
                         text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.pn-buehne-kopf .countdown { font-variant-numeric: tabular-nums; font-size: var(--t-klein);
                             font-weight: 600; color: var(--text-leise); }
.pn-buehne-kopf .countdown.jetzt { color: #fff; background: var(--akzent);
                                   padding: 1px var(--s-2); border-radius: var(--r-s); font-weight: 800; }
.pn-buehne-paarung {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(24px, 3.6vw, 40px); line-height: 1.05; color: #fff;
  margin: var(--s-3) 0 var(--s-1);
}
.pn-buehne-paarung .vs { color: var(--text-still); font-family: var(--font-body);
                         font-size: var(--t-klein); font-weight: 600; }
.pn-buehne-meta { color: var(--text-leise); font-size: var(--t-klein); }
.pn-buehne-aktionen { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-5); }
/* Spielwahl: hier ist die ZAHL die Hauptsache, nicht ein Symbol. */
.pn-spielwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3); }
.pn-spiel {
  display: block; padding: var(--s-5); border-radius: var(--r-m);
  background: var(--flaeche); border: 1px solid var(--linie); border-top-color: var(--linie-licht);
  box-shadow: var(--heben-2); color: var(--text); text-decoration: none;
  transition: transform var(--dauer-schnell) var(--kurve), border-color var(--dauer-schnell) var(--kurve);
}
.pn-spiel:hover { transform: translateY(-2px); border-color: var(--linie-stark); }
.pn-spiel.fremd { box-shadow: none; background: transparent; }
.pn-spiel.fremd .zahl { color: var(--text-still); }
.pn-spiel .name { display: block; font-size: var(--t-klein); font-weight: 700;
                  color: var(--text-leise); text-transform: uppercase; letter-spacing: .06em; }
.pn-spiel .zahl { display: block; font-size: 40px; font-weight: 700; line-height: 1.05;
                  font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: var(--s-2); }
.pn-spiel .was  { display: block; color: var(--text-still); font-size: var(--t-mikro); }
.pn-spiel .frei { display: inline-block; margin-top: var(--s-3); padding: 1px var(--s-2);
                  border-radius: var(--r-s); background: var(--akzent); color: #fff;
                  font-size: var(--t-mikro); font-weight: 800; }
.pn-spiel .meine { display: block; margin-top: var(--s-2); color: var(--ok-500);
                   font-size: var(--t-mikro); font-weight: 700; }
/* Börse: eine Liste, keine Kartenstapel. */
.pn-boerse { display: grid; }
.pn-boerse-zeile {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-3); margin-inline: calc(-1 * var(--s-3));
  border-radius: var(--r-s); border-bottom: 1px solid var(--linie);
}
.pn-boerse-zeile:last-child { border-bottom: 0; }
.pn-boerse-zeile:hover { background: var(--flaeche-2); }
.pn-boerse-zeile.meins { background: var(--flaeche-2); }
.pn-boerse-zeile .wann { flex: none; width: 84px; font-variant-numeric: tabular-nums; }
.pn-boerse-zeile .wann strong { display: block; font-size: var(--t-klein); font-weight: 700; }
.pn-boerse-zeile .wann span  { display: block; color: var(--text-still); font-size: var(--t-mikro); }
.pn-boerse-zeile .wer { flex: 1 1 240px; min-width: 0; }
.pn-boerse-zeile .paarung { font-size: 15px; font-weight: 600; display: flex;
                            align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.pn-boerse-zeile .paarung small { color: var(--text-still); font-size: var(--t-mikro); font-weight: 600; }
.pn-boerse-zeile .paarung .vs { color: var(--text-still); font-size: var(--t-mikro); font-weight: 400; }
.pn-boerse-zeile .topspiel { background: var(--akzent); color: #fff; border-radius: var(--r-s);
                             padding: 0 var(--s-2); font-size: var(--t-mikro); font-weight: 800; }
.pn-boerse-zeile .meta { color: var(--text-leise); font-size: var(--t-mikro); margin-top: 2px; }
.pn-boerse-zeile .angefragt { color: var(--warn-500); font-weight: 700; }
.pn-boerse-zeile .nachricht { color: var(--text-leise); font-style: italic; }
.pn-boerse-zeile .tun { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; margin-left: auto; }
.pn-boerse-zeile .cast { display: flex; align-items: center; gap: var(--s-2);
                         color: var(--text-leise); font-size: var(--t-mikro); font-weight: 700; }
.pn-boerse-zeile .zuteilen { display: flex; gap: var(--s-1); }
.pn-boerse-zeile.anfrage.knapp .meta .angefragt { color: var(--err-500); }
.pn-boerse-zeile.anfrage.aus { opacity: .6; }
/* Live-Terminal: die Zahlen müssen aus zwei Metern Abstand lesbar sein. */
.pn-live { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: var(--s-4); align-items: start; }
.pn-live-wahl { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.pn-live-wahl label { color: var(--text-still); font-size: var(--t-mikro);
                      text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.pn-live-wahl select { flex: 1 1 auto; }
.pn-live-teams {
  display: flex; align-items: baseline; gap: var(--s-4); justify-content: center;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 22px; color: #fff; margin: var(--s-5) 0;
}
.pn-live-teams .vs { color: var(--text-still); font-family: var(--font-body);
                     font-size: var(--t-mikro); font-weight: 600; }
.pn-maps { display: grid; gap: var(--s-2); }
.pn-map {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-s);
  background: var(--bg-weich); border: 1px solid transparent;
}
.pn-map.laeuft { background: var(--flaeche-2); border-color: var(--akzent-linie); }
.pn-map .wahl { flex: 1 1 auto; display: flex; align-items: baseline; gap: var(--s-2);
                background: none; border: 0; color: var(--text-leise); font: inherit;
                text-align: left; cursor: pointer; padding: 0; }
.pn-map.laeuft .wahl { color: var(--text); }
.pn-map .nr { color: var(--text-still); font-size: var(--t-mikro); width: 1.4em; font-variant-numeric: tabular-nums; }
.pn-map .name { font-weight: 600; font-size: var(--t-klein); }
.pn-map .modus { color: var(--text-still); font-size: var(--t-mikro); }
.pn-map .stand { display: flex; align-items: center; gap: var(--s-2); color: var(--text-still); }
.pn-map .stand input {
  width: 78px; text-align: center; padding: var(--s-2);
  font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700;
  background: var(--flaeche); border-color: var(--linie);
}
.pn-map.laeuft .stand input { border-color: var(--akzent-linie); background: var(--flaeche-3); }
.pn-live-hinweis { display: flex; gap: var(--s-2); align-items: flex-start;
                   color: var(--text-still); font-size: var(--t-mikro); line-height: 1.55;
                   margin: var(--s-5) 0 0; max-width: 62ch; }
.pn-live-hinweis .pn-ic { color: var(--warn-500); }
.pn-ov-liste { display: grid; gap: var(--s-1); }
.pn-ov { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3);
         background: var(--bg-weich); border-radius: var(--r-s); }
.pn-ov .label { font-weight: 600; font-size: var(--t-klein); width: 92px; flex: none; }
.pn-ov .status { flex: 1 1 auto; color: var(--text-still); font-size: var(--t-mikro); font-variant-numeric: tabular-nums; }
.pn-ov .status.ok  { color: var(--ok-500); }
.pn-ov .status.weg { color: var(--err-500); }
/* Caster-Kalender */
.pn-kaltage { display: grid; gap: var(--s-5); }
.pn-kaltag .kopf { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-2);
                   padding-bottom: var(--s-1); border-bottom: 1px solid var(--linie); }
.pn-kaltag.heute .kopf { border-bottom-color: var(--akzent-linie); }
.pn-kaltag .kopf strong { font-size: var(--t-klein); font-weight: 700; }
.pn-kaltag.heute .kopf strong { color: var(--akzent); }
.pn-kaltag .kopf span { color: var(--text-still); font-size: var(--t-mikro); font-variant-numeric: tabular-nums; }
.pn-kaltag .zeile { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
                    padding: var(--s-1) 0; font-size: var(--t-klein); }
.pn-kaltag .zeit { font-variant-numeric: tabular-nums; color: var(--text-still); width: 44px; flex: none; }
.pn-kaltag .paarung { flex: 1 1 200px; min-width: 0; }
.pn-kaltag .wer { display: flex; align-items: center; gap: var(--s-2); color: var(--text-leise);
                  font-size: var(--t-mikro); font-weight: 600; margin-left: auto; }
.pn-kaltag .zeile.frei .paarung { color: var(--warn-500); }
.pn-kaltag .zeile.meins .paarung { font-weight: 700; }
/* Teams & Insights */
.pn-duellwahl { display: flex; gap: var(--s-4); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--s-5); }
.pn-duellwahl label { display: grid; gap: var(--s-1); color: var(--text-still);
                      font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.pn-duellwahl select { min-width: 210px; }
.pn-duellwahl .vs { color: var(--text-still); padding-bottom: var(--s-2); font-size: var(--t-klein); }
.pn-duell { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; }
.pn-bilanz { display: flex; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-5); }
.pn-bilanz .wert { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pn-bilanz .was  { color: var(--text-still); font-size: var(--t-mikro);
                   text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.pn-maptab { width: 100%; border-collapse: collapse; font-size: var(--t-klein); }
.pn-maptab td { padding: var(--s-2) 0; border-bottom: 1px solid var(--linie); }
.pn-maptab tr:last-child td { border-bottom: 0; }
.pn-maptab td small { color: var(--text-still); font-size: var(--t-mikro); }
.pn-maptab .zahl  { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-leise); width: 62px; }
.pn-maptab .quote { text-align: right; font-variant-numeric: tabular-nums; width: 62px; color: var(--text-leise); }
.pn-maptab .quote.gut     { color: var(--ok-500); font-weight: 700; }
.pn-maptab .quote.schwach { color: var(--err-500); }
/* Overlay-Baukasten */
.pn-baukasten { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--s-3); }
.pn-baukasten label { display: grid; gap: var(--s-1); color: var(--text-still);
                      font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.pn-baukasten label.test { flex-direction: row; align-items: center; gap: var(--s-2);
                           text-transform: none; letter-spacing: 0; font-weight: 400;
                           font-size: var(--t-klein); color: var(--text); padding-bottom: var(--s-2); }
.pn-ov-was { color: var(--text-still); font-size: var(--t-mikro); margin: 0 0 var(--s-3); }
.pn-ov-url { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.pn-ov-url input { flex: 1 1 320px; min-width: 0; color: var(--text-leise); font-size: var(--t-mikro); }
.pn-ov-vorschau { margin-top: var(--s-5); }
.pn-ov-vorschau .kopf { display: flex; justify-content: space-between; align-items: center;
                        gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2);
                        color: var(--text-still); font-size: var(--t-mikro); }
.pn-ov-vorschau .rahmen { position: relative; width: 100%; aspect-ratio: 16 / 9;
                          border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--linie-stark);
                          background: repeating-conic-gradient(#232329 0% 25%, #1b1b21 0% 50%) 50% / 20px 20px; }
.pn-ov-vorschau iframe { position: absolute; inset: 0; width: 1920px; height: 1080px;
                         border: 0; transform-origin: 0 0; transform: scale(calc(100 / 1920 * 1vw)); }
.pn-tokenliste { display: grid; gap: var(--s-1); margin-bottom: var(--s-4); }
.pn-token { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
            padding: var(--s-2) var(--s-3); background: var(--bg-weich); border-radius: var(--r-s); }
.pn-token .label { font-weight: 600; font-size: var(--t-klein); }
.pn-token code { font-family: var(--font-mono); font-size: var(--t-mikro); color: var(--text-still); }
.pn-token .seit { color: var(--text-still); font-size: var(--t-mikro); margin-right: auto; }
.pn-token-neu { display: flex; gap: var(--s-2); flex-wrap: wrap; }
/* Die Bühne — der einzige Auftritt der Seite. Exponentielles Auslaufen:
   schnell los, weich an. */
.pn-buehne { animation: pn-auftritt 620ms cubic-bezier(.16, 1, .3, 1) both; }
.pn-buehne-paarung { animation: pn-auftritt 700ms 90ms cubic-bezier(.16, 1, .3, 1) both; }
/* Auswahl mit Begründung: Ohne Wahl erscheinen die Felder gar nicht — genau
   das verhindert halb ausgefüllte Rosterchange-Anträge. */
.pn-hub .pn-wahlkarten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-3); margin: var(--s-4) 0;
}
.pn-hub .pn-wahlkarte {
  position: relative; display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) var(--s-4); cursor: pointer;
  background: var(--flaeche-2); border: 1px solid var(--linie-stark);
  border-radius: var(--r-m); box-shadow: var(--heben-1);
  transition: border-color var(--dauer-schnell) var(--kurve),
              background var(--dauer-schnell) var(--kurve);
}
.pn-hub .pn-wahlkarte:hover { border-color: var(--akzent-linie); }
.pn-hub .pn-wahlkarte input { position: absolute; opacity: 0; pointer-events: none; }
.pn-hub .pn-wahlkarte .ic { flex: none; color: var(--akzent); display: flex; }
.pn-hub .pn-wahlkarte .tx { font-size: var(--t-mikro); line-height: 1.4; color: var(--text-leise); }
.pn-hub .pn-wahlkarte .tx strong {
  display: block; font-size: var(--t-klein); color: var(--text); margin-bottom: 2px;
}
.pn-hub .pn-wahlkarte:has(input:checked) { border-color: var(--akzent); background: var(--akzent-weich); }
.pn-hub .pn-wahlkarte:has(input:checked) .tx { color: var(--text); }
.pn-hub .pn-wahlkarte:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.pn-hub .pn-wahlkarte:has(input:disabled):hover { border-color: var(--linie-stark); }
.pn-hub .pn-kaderzeile {
  display: grid; grid-template-columns: 1.1fr 1fr 1.1fr .9fr .9fr;
  gap: var(--s-2); margin-bottom: var(--s-2);
}
.pn-hub .pn-kaderzeile input, .pn-hub .pn-kaderzeile select { min-width: 0; }
.pn-hub .pn-sozialraster { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); }
.pn-hub .pn-sozialraster input { min-width: 0; }
.pn-hub .pn-flagge { flex: none; font-size: 1.15rem; line-height: 1; }
.pn-hub .pn-teamkopf { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.pn-hub .pn-teamkopf img,
.pn-hub .pn-teamkopf .platzhalter {
  width: 80px; height: 80px; flex: none; object-fit: contain;
  background: var(--chrome); border-radius: var(--r-m);
}
.pn-hub .pn-teamkopf .platzhalter {
  display: grid; place-items: center; color: var(--text-still); font-size: var(--t-mikro);
}
.pn-hub .pn-teamkopf strong { display: block; font-size: var(--t-h3); }
.pn-hub .pn-teamkopf span { color: var(--text-leise); font-size: var(--t-mikro); }
.pn-hub .pn-serienstand {
  margin: var(--s-3) 0; padding: var(--s-2) var(--s-3);
  background: var(--flaeche-2); border-radius: var(--r-s);
  font-size: var(--t-klein); color: var(--text-leise);
}
.pn-hub .pn-serienstand.fehler { background: var(--err-bg); color: var(--err-500); font-weight: 600; }
.pn-hub .pn-mapzeile.fehler { outline: 1px solid var(--err-500); }
/* Aufstellung nach dem Match — nur lesen, kein Formular. */
.pn-hub .pn-aufstellungen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.pn-hub .pn-aufstellung { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.pn-hub .pn-aufstellung li {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-klein); font-weight: 600;
}
.pn-hub .pn-aufstellung .ava {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-s);
  background: var(--flaeche-3); display: grid; place-items: center; overflow: hidden;
  font-size: var(--t-mikro); font-weight: 800; color: var(--text-leise);
}
.pn-hub .pn-aufstellung .ava img { width: 100%; height: 100%; object-fit: cover; }
.pn-hub .pn-klangschalter {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--flaeche-2); border: 1px solid var(--linie-stark);
  color: var(--text-leise); font-size: 14px; line-height: 1; cursor: pointer;
}
.pn-hub .pn-klangschalter:hover { background: var(--flaeche-3); }
/* Der Hinweis steht IM Fluss, nicht darüber — als schwebendes Kästchen
   verdeckte er auf kurzen Bühnen genau den Text, um den es geht. */
.pn-hub .pn-klangtipp {
  display: block; margin-top: var(--s-4);
  color: var(--text-still); font-size: var(--t-mikro);
}
/* ── Einladung: eine Entscheidung, keine Listenzeile (Kap. 08.4.2) ─────── */
.pn-hub .pn-einladung {
  display: flex; gap: var(--s-4); align-items: flex-start; flex-wrap: wrap;
  padding: var(--s-4); margin-bottom: var(--s-3);
  background: var(--flaeche-2); border: 1px solid var(--linie-stark);
  border-radius: var(--r-m);
}
.pn-hub .pn-einladung .pn-wappen { width: 48px; height: 48px; }
.pn-hub .pn-einladung .was { flex: 1 1 260px; min-width: 0; display: grid; gap: var(--s-1); }
.pn-hub .pn-einladung .was strong { font-size: var(--t-h3); }
.pn-hub .pn-einladung .neben { color: var(--text-leise); font-size: var(--t-mikro); }
.pn-hub .pn-einladung blockquote {
  margin: var(--s-2) 0 0; padding-left: var(--s-3);
  border-left: 2px solid var(--akzent-linie);
  color: var(--text-still); font-size: var(--t-klein);
}
.pn-hub .pn-einladung .frist { color: var(--text-still); font-size: var(--t-mikro); }
.pn-hub .pn-einladung .wahl { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
/* ── Markt (Kap. 08.6) ─────────────────────────────────────────────────── */
.pn-hub .pn-marktfilter {
  display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--s-4);
}
.pn-hub .pn-marktfilter input, .pn-hub .pn-marktfilter select { flex: 0 1 180px; min-width: 0; }
.pn-hub .pn-marktkarten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4);
}
.pn-hub .pn-marktkarte {
  display: grid; gap: var(--s-3); align-content: start;
  padding: var(--s-4);
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-m); box-shadow: var(--heben-1);
}
.pn-hub .pn-marktkarte header { display: grid; gap: 2px; }
.pn-hub .pn-marktkarte header strong { font-size: var(--t-h3); }
.pn-hub .pn-marktkarte .flagge { font-size: 1.1rem; }
.pn-hub .pn-marktkarte .meta { color: var(--text-leise); font-size: var(--t-mikro); }
.pn-hub .pn-marktkarte .text {
  margin: 0; padding-left: var(--s-3); border-left: 2px solid var(--akzent-linie);
  color: var(--text-still); font-size: var(--t-klein);
}
.pn-hub .pn-marktkarte dl { margin: 0; display: grid; gap: var(--s-2); }
.pn-hub .pn-marktkarte dt {
  color: var(--text-still); font-size: var(--t-mikro); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
}
.pn-hub .pn-marktkarte dd { margin: 0; font-size: var(--t-klein); }
.pn-hub .pn-marktkarte footer { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
/* Melden ist da, wenn man es braucht — aber es drängt sich nicht auf. */
.pn-hub .pn-melden > summary,
.pn-hub .pn-anfragen > summary { cursor: pointer; font-size: var(--t-mikro); color: var(--text-still); }
.pn-hub .pn-melden[open] > summary,
.pn-hub .pn-anfragen[open] > summary { margin-bottom: var(--s-2); }
.pn-hub .pn-melden form, .pn-hub .pn-anfragen form {
  display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2);
}
.pn-hub .pn-melden input[type=text], .pn-hub .pn-anfragen input[type=text] { flex: 1 1 180px; min-width: 0; }
.pn-hub .pn-meldungskarte {
  display: flex; gap: var(--s-4); align-items: flex-start; flex-wrap: wrap;
  padding: var(--s-4); margin-bottom: var(--s-3);
  background: var(--flaeche-2); border-left: 3px solid var(--warn-500);
  border-radius: var(--r-s);
}
.pn-hub .pn-meldungskarte .was { flex: 1 1 280px; min-width: 0; display: grid; gap: var(--s-1); }
.pn-hub .pn-meldungskarte .neben { color: var(--text-leise); font-size: var(--t-mikro); }
.pn-hub .pn-meldungskarte blockquote {
  margin: var(--s-2) 0 0; padding-left: var(--s-3);
  border-left: 2px solid var(--linie-stark); color: var(--text-still); font-size: var(--t-klein);
}
.pn-hub .pn-meldungskarte form { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
/* ── Werbefläche (Kap. 08.7) ───────────────────────────────────────────
   Als Anzeige gekennzeichnet, sonst zurückhaltend. Die Fläche existiert im
   HTML nur, wenn sie belegt ist — es gibt hier also keinen Leerzustand zu
   gestalten, und genau das ist der Punkt: kein Layout-Sprung. */
.pn-hub .pn-werbung {
  display: grid; gap: var(--s-1); justify-items: center;
  margin: var(--s-5) 0;
}
.pn-hub .pn-werbung .hinweis {
  align-self: start; justify-self: start;
  color: var(--text-still); font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em;
}
.pn-hub .pn-werbung img { max-width: 100%; height: auto; border-radius: var(--r-s); display: block; }
.pn-hub .pn-werbung a { display: block; max-width: 100%; }
.pn-hub .pn-bannerkarte {
  display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap;
  padding: var(--s-4); margin-bottom: var(--s-4);
  background: var(--flaeche-2); border: 1px solid var(--linie-stark); border-radius: var(--r-m);
}
.pn-hub .pn-bannerkarte img { max-width: 220px; height: auto; border-radius: var(--r-s); }
.pn-hub .pn-bannerkarte .was { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; }
.pn-hub .pn-bannerkarte .neben { color: var(--text-leise); font-size: var(--t-mikro);
                                 overflow: hidden; text-overflow: ellipsis; }
.pn-hub .pn-bannerkarte .zahlen { display: flex; gap: var(--s-5); }
.pn-hub .pn-mehr { cursor: pointer; font-size: var(--t-klein); color: var(--text-leise); }

/* Bilanzstreifen: die letzten Ergebnisse als Kette. */
.pn-form { display: flex; gap: var(--s-1); }
.pn-form span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-s);
                font-family: var(--font-mono); font-size: var(--t-winzig); font-weight: 700; }
.pn-form .sieg   { background: var(--ok-bg);  color: var(--ok-500); }
.pn-form .nieder { background: var(--err-bg); color: var(--err-500); }

/* ── Block-Editor für Beiträge (Kap. 03.2) ─────────────────────────────── */
.pn-bloecke { display: grid; gap: var(--s-3); }
.pn-blockzeile {
  display: grid; gap: var(--s-2);
  padding: var(--s-3); background: var(--bg-weich);
  border: 1px solid var(--linie); border-left: var(--kante) solid var(--linie-stark);
  border-radius: 0 var(--r-m) var(--r-m) 0;
}
.pn-blockzeile .kopf { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.pn-blockzeile .kopf select { flex: 0 1 220px; }
.pn-blockzeile .kopf button { margin-left: 0; }
.pn-blockzeile .kopf [data-weg] { margin-left: auto; }

/* ── Bild wählen: hochladen oder eines nehmen, das schon da ist ──────────
   Entstanden am 30.10.2026. Vorher war das Titelbild ein Textfeld mit dem
   Platzhalter „/uploads/…" — man musste den Pfad kennen und abtippen. */
.pn-hub .pn-bildwahl { display: grid; gap: var(--s-3); }
.pn-hub .pn-bildwahl-titel { font-size: var(--t-mikro); font-weight: 700;
                             letter-spacing: .04em; text-transform: uppercase;
                             color: var(--text-leise); }
.pn-hub .pn-bildwahl-felder { display: grid; gap: var(--s-3);
                              grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pn-hub .pn-bildvorschau { margin: 0; display: grid; gap: var(--s-2); justify-items: start; }
/* Ein Bild mit unbekannten Maßen darf das Formular nicht aufreissen. */
.pn-hub .pn-bildvorschau img {
  max-width: 100%; max-height: 190px; width: auto; height: auto; display: block;
  border: 1px solid var(--linie); border-radius: var(--r-s); background: var(--flaeche-2);
}
.pn-hub .pn-bildvorschau.klein img { max-height: 110px; }
.pn-hub .pn-bildvorschau figcaption { font-family: var(--font-mono); font-size: var(--t-winzig);
                                      color: var(--text-still); word-break: break-all; }
.pn-hub .pn-blockdatei { display: grid; gap: var(--s-1); font-size: var(--t-mikro);
                         color: var(--text-leise); }
/* ⚠ `.pn-blockdatei { display: grid }` wuerde das `hidden` schlagen, das
   bloecke.js setzt — dieselbe Falle wie beim Rundentitel in Etappe 7. Die
   Regel dagegen steht schon: `.pn-hub [hidden]` in `06-contentarea.css`, der
   letzten Ebene. Hier NICHT wiederholen; zwei Regeln fuer dieselbe Sache
   sind eine zu viel. */

}

/* ── Ampel des Social-Abgleichs (Kap. 03.1.6) ──────────────────────────
   Ohne diese Anzeige merkt niemand, dass die Startseite seit Wochen
   dieselben Beiträge zeigt, weil ein Token abgelaufen ist. */
@layer besonderes {
  .pn-hub .pn-stand { display: flex; align-items: center; gap: var(--s-2);
                      padding: var(--s-3); border-radius: var(--r-m); }
  .pn-hub .pn-stand.frisch  { background: var(--ok-bg);   color: var(--ok-500); }
  .pn-hub .pn-stand.lauwarm { background: var(--warn-bg); color: var(--warn-500); }
  .pn-hub .pn-stand.alt     { background: var(--err-bg);  color: var(--err-500); }
}
@layer besonderes {


/* ═════════════════════════════════════════════════════════════════════════
   ANMELDESEITEN  (Kap. 02.5)
   Login, Passwort vergessen, Passwort neu, Registrieren.

   Keine Seitenleiste, kein Umschalter, keine Glocke — wer hier steht, ist
   noch niemand. Eine Karte in der Mitte, mehr braucht es nicht. Sie ist
   trotzdem Teil desselben Systems: dieselben Tokens, derselbe Baukasten,
   dasselbe Rot.
   ═══════════════════════════════════════════════════════════════════════ */
.pn-anmeldung {
  min-height: 100vh;
  display: grid; align-content: center; justify-items: center;
  gap: var(--s-5); padding: var(--s-6) var(--s-4);
  /* Ein Hauch Marke aus der oberen Ecke — dasselbe Mittel wie auf der Bühne
     des Casterhubs, nur leiser. Ohne das ist die Fläche einfach nur schwarz. */
  background:
    radial-gradient(70% 90% at 50% -10%, rgba(224, 9, 60, .10), transparent 60%),
    var(--bg);
}
.pn-anmeldung .karte {
  width: 100%; max-width: 27rem;
  display: grid; gap: var(--s-4);
  padding: var(--s-6);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-top-color: var(--linie-licht);
  border-radius: var(--r-l);
  box-shadow: var(--heben-3);
}
/* Das Registrierungsformular hat drei Wege und zwei Spalten — es braucht
   mehr Platz als ein Passwortfeld. */
.pn-anmeldung .karte.breit { max-width: 40rem; }

.pn-anmeldung .marke { justify-self: center; line-height: 0; }
.pn-anmeldung .marke img { width: 56px; height: 56px; }

.pn-anmeldung h1 {
  font-family: var(--font-display); font-size: var(--t-h1);
  text-transform: uppercase; text-align: center; margin: 0;
}
.pn-anmeldung > .karte > p { margin: 0; color: var(--text-leise); font-size: var(--t-klein); }
.pn-anmeldung form { display: grid; gap: var(--s-4); }
/* Der Knopf nimmt die volle Breite: Auf einer Karte mit einem einzigen Ziel
   ist jede andere Breite eine Frage, die niemand hat. */
.pn-anmeldung form > button { width: 100%; justify-content: center; }

.pn-anmeldung .hinweis, .pn-anmeldung .login-note {
  margin: 0; text-align: center;
  color: var(--text-still); font-size: var(--t-klein);
}
.pn-anmeldung .hinweis.geteilt, .pn-anmeldung .login-note.geteilt {
  display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap;
}
.pn-anmeldung a { color: var(--text-leise); }
.pn-anmeldung a:hover { color: var(--marke-hell); }

.pn-anmelde-fuss { margin: 0; color: var(--text-still); font-size: var(--t-mikro); }

@media (max-width: 480px) {
  .pn-anmeldung { align-content: start; padding-top: var(--s-7); }
  .pn-anmeldung .karte { padding: var(--s-5); }
}


}  /* @layer besonderes */
@layer besonderes {

/* ═══════════════════════════════════════════════════════════════════════
   SEITENBAU  `/hub/admin/seiten`  (21.09.2026)

   Die öffentlichen Seiten als Liste: ziehen, schalten, bearbeiten. Die
   Oberfläche soll sich anfühlen wie eine Liste, nicht wie ein Formular —
   wer eine Seite umstellt, macht das in zehn Sekunden oder gar nicht.
   ═════════════════════════════════════════════════════════════════════ */

.pn-hub .pn-seitenbau { display: grid; gap: var(--s-5); }

.pn-hub .pn-kartenkopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  margin-bottom: var(--s-3);
}
.pn-hub .pn-kartenkopf h2 { margin: 0; }
.pn-hub .pn-kartenkopf > :last-child { margin-left: auto; }
.pn-hub .pn-hinweis { margin: 0 0 var(--s-4); color: var(--text-leise);
                      font-size: var(--t-klein); max-width: 76ch; }

/* ── Die Abschnittsliste ─────────────────────────────────────────────
   ⚠ Der Griff ist NICHT die einzige Art zu sortieren. Daneben stehen zwei
     Pfeile, die ein Formular abschicken: Ziehen braucht JavaScript, eine
     Maus und eine ruhige Hand — und eine Verwaltung, die ohne eines davon
     unbedienbar ist, ist an dem Tag unbedienbar, an dem ein Skript bricht. */
.pn-hub .pn-abschnitte { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.pn-hub .pn-abschnitte > li {
  display: grid; align-items: center; gap: var(--s-4);
  grid-template-columns: 20px minmax(0, 1fr) auto auto auto auto;
  padding: var(--s-3) var(--s-4);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  transition: border-color var(--dauer-schnell) var(--kurve), opacity var(--dauer-schnell) var(--kurve);
}
.pn-hub .pn-abschnitte > li.offen { border-color: var(--marke); box-shadow: 0 0 0 3px var(--marke-weich); }
.pn-hub .pn-abschnitte > li.aus { opacity: .55; }
.pn-hub .pn-abschnitte > li.zieht { opacity: .4; border-style: dashed; }
.pn-hub .pn-abschnitte .griff { color: var(--n-60); cursor: grab; }
.pn-hub .pn-abschnitte .griff .pn-ic { width: 16px; height: 16px; }
.pn-hub .pn-abschnitte .wer { display: grid; gap: 2px; min-width: 0; }
.pn-hub .pn-abschnitte .wer strong { font-size: var(--t-body); font-weight: 600; }
.pn-hub .pn-abschnitte .wer small { color: var(--text-leise); font-size: var(--t-klein);
                                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-hub .pn-abschnitte .marken { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pn-hub .pn-abschnitte .bearbeiten { color: var(--text-leise); font-size: var(--t-klein);
                                     font-weight: 600; text-decoration: none; white-space: nowrap; }
.pn-hub .pn-abschnitte .bearbeiten:hover { color: var(--text); }

.pn-hub .pn-abschnitte .pfeile { display: flex; gap: 2px; }
.pn-hub .pn-abschnitte .pfeile button {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-s); background: none; color: var(--text-still); cursor: pointer;
}
.pn-hub .pn-abschnitte .pfeile button:hover:not(:disabled) { background: var(--flaeche-2); color: var(--text); }
.pn-hub .pn-abschnitte .pfeile button:disabled { opacity: .3; cursor: default; }
.pn-hub .pn-abschnitte .pfeile .pn-ic { width: 15px; height: 15px; }

/* Der Schalter. Er ist ein echter Knopf mit `aria-pressed`, kein Bild von
   einem Schalter — sonst sagt ein Screenreader nicht, ob er an ist. */
.pn-hub .kipp {
  width: 42px; height: 24px; padding: 0; border: 0; border-radius: var(--r-full);
  background: var(--flaeche-3); cursor: pointer; position: relative;
  transition: background var(--dauer-schnell) var(--kurve);
}
.pn-hub .kipp.an { background: var(--marke); }
.pn-hub .kipp span {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: var(--r-full); background: var(--n-30);
  transition: transform var(--dauer-schnell) var(--kurve), background var(--dauer-schnell) var(--kurve);
}
.pn-hub .kipp.an span { transform: translateX(18px); background: #fff; }

/* Die Marken an einer Zeile: Sorte, Zeitfenster, Zielgruppe. */
.pn-hub .pn-marke {
  font-family: var(--font-mono); font-size: var(--t-winzig); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  padding: 2px var(--s-2); border-radius: var(--r-full);
  background: var(--flaeche-3); color: var(--text-leise);
}
.pn-hub .pn-marke.ok    { background: var(--ok-bg);   color: var(--ok-500); }
.pn-hub .pn-marke.warn  { background: var(--warn-bg); color: var(--warn-500); }
.pn-hub .pn-marke.info  { background: var(--info-bg); color: var(--info-500); }
.pn-hub .pn-marke.marke { background: var(--marke-weich); color: var(--marke-hell); }

@media (max-width: 820px) {
  .pn-hub .pn-abschnitte > li { grid-template-columns: 20px minmax(0, 1fr) auto; row-gap: var(--s-3); }
  .pn-hub .pn-abschnitte .marken { grid-column: 2 / -1; }
  .pn-hub .pn-abschnitte .pfeile { grid-column: 2; }
  .pn-hub .pn-abschnitte .bearbeiten { grid-column: 3; }
}

/* ── Der Katalog ─────────────────────────────────────────────────────── */
.pn-hub .pn-katalog { display: grid; gap: var(--s-2);
                      grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.pn-hub .pn-katalog button {
  width: 100%; display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--linie); border-radius: var(--r-m);
  background: var(--flaeche-2); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--dauer-schnell) var(--kurve);
}
.pn-hub .pn-katalog button:hover { border-color: var(--marke-linie); }
.pn-hub .pn-katalog strong { font-size: var(--t-klein); font-weight: 600; }
.pn-hub .pn-katalog small { color: var(--text-still); font-size: var(--t-mikro); line-height: 1.4; }

/* ── Das Formular eines Abschnitts ───────────────────────────────────── */
.pn-hub .pn-abschnittsform { display: grid; gap: var(--s-5); }
.pn-hub .pn-abschnittsform fieldset {
  margin: 0; padding: var(--s-5); border: 1px solid var(--linie); border-radius: var(--r-m);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--s-4);
}
.pn-hub .pn-abschnittsform legend {
  padding: 0 var(--s-2); font-family: var(--font-mono); font-size: var(--t-mikro);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-still);
}
.pn-hub .pn-abschnittsform .pn-feld.voll { grid-column: 1 / -1; }
.pn-hub .pn-abschnittsform .pn-feld.zeile {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--s-3); }
.pn-hub .pn-abschnittsform .pn-feld.zeile span { display: grid; gap: 2px; }
.pn-hub .pn-abschnittsform textarea { resize: vertical; min-height: 4.5rem; line-height: 1.5; }

.pn-hub .pn-haken { display: grid; gap: var(--s-2);
                    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.pn-hub .pn-haken label { display: flex; align-items: center; gap: var(--s-2);
                          font-size: var(--t-klein); cursor: pointer; }

/* Die Farbstimmung als Farbfelder, nicht als Auswahlliste: „Papier" sagt
   niemandem etwas, das Feld daneben schon. */
.pn-hub .pn-toene { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pn-hub .pn-toene label {
  display: grid; gap: var(--s-2); justify-items: center; cursor: pointer;
  font-size: var(--t-winzig); color: var(--text-leise);
}
.pn-hub .pn-toene label::before {
  content: ''; width: 52px; height: 32px; border-radius: var(--r-s);
  border: 2px solid var(--linie-stark);
}
.pn-hub .pn-toene .ton-weiss::before  { background: #ffffff; }
.pn-hub .pn-toene .ton-papier::before { background: #f6f5f8; }
.pn-hub .pn-toene .ton-dunkel::before { background: #0d0c11; }
.pn-hub .pn-toene .ton-marke::before  { background: #e0093c; }
.pn-hub .pn-toene label:has(input:checked)::before { border-color: var(--marke); }
.pn-hub .pn-toene label:has(input:checked) { color: var(--text); }
.pn-hub .pn-toene input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.pn-hub .pn-formfuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.pn-hub .pn-abstand { flex-grow: 1; }

}