/* ═══════════════════════════════════════════════════════════════════════
   05 — BRÜCKE
   Das Markup der verbliebenen CRM-Seiten im neuen Baukasten.

   Diese Seiten hängen seit Phase 3.5 unter `/hub/...`, sahen aber aus wie
   ein anderes Produkt: eigene Seitenleiste, eigenes Stylesheet, eigene
   Radien, eigene Rot-Töne. Wer im Adminhub auf „Liga → Divisionen" klickte,
   landete sichtbar woanders.

   Seit dem Umbau rendern sie in der Hub-Shell. Was fehlte, war ihr INHALT:
   `crm-card`, `crm-list`, `crm-row` und dreissig weitere Klassen kannte das
   neue System nicht. Diese Datei übersetzt sie — nicht, indem sie das alte
   Aussehen nachbaut, sondern indem sie jede Klasse auf den passenden
   Baustein abbildet. `.crm-card` IST `.pn-karte`, `.crm-row` IST `.pn-zeile`.

   ⚠ Warum eine eigene Ebene und nicht `bausteine`: Der Baukasten ist die
     Sprache, in der neue Seiten geschrieben werden. Die Brücke ist eine
     Übersetzung für Bestand — sie soll verschwinden, wenn die Seiten
     umgezogen sind, und bis dahin nichts überschreiben, was das Gerüst sagt.
     Deshalb steht sie NACH `bausteine` und VOR `geruest`.

   ⚠ `crm.css` wird im Hub nicht mehr geladen. Es bleibt für die
     Anmeldeseiten (`/login`, `/passwort-vergessen`), die keine Hub-Seiten
     sind und ihr eigenes, schlichtes Layout haben.
   ═════════════════════════════════════════════════════════════════════ */

@layer bruecke {

/* ── Die Namen von damals ─────────────────────────────────────────────
   ⚠ Das hier ist der wichtigste Block der Datei.

   Die CRM-Seiten tragen **292 Inline-Stile**, die auf ihre eigenen
   Variablennamen zeigen: `var(--text-muted)`, `var(--accent)`,
   `var(--bg-soft)`. Die kamen aus `crm.css` und sind mit ihm weg. Ohne
   Ersatz zeigen 180 Textstellen auf ein Nichts — sie erben dann irgendeine
   Farbe, Hintergründe und Ränder verschwinden ganz, und die Seite sieht
   nicht falsch aus, sondern **halb da**. Das ist der unangenehmere Fehler:
   Man sucht ihn nicht, weil nichts kaputt wirkt.

   Also bekommen die alten Namen die neuen Werte. Kein Zeichen in den
   Seiten muss dafür angefasst werden — und wenn eine Seite eines Tages
   umzieht, fällt ihr Name hier einfach weg. */
.pn-hub {
  --bg:          var(--n-99);
  --bg-soft:     var(--flaeche);
  --surface:     var(--flaeche);
  --surface-2:   var(--flaeche-2);
  --surface-3:   var(--flaeche-3);
  --sidebar:     var(--chrome);

  --text-muted:  var(--text-leise);
  --text-dim:    var(--text-still);

  --line:        var(--linie);
  --line-strong: var(--linie-stark);

  --accent:       var(--marke);
  --accent-hover: var(--marke-dunkel);
  --accent-weak:  var(--marke-weich);
  --accent-line:  var(--marke-linie);

  --ok:     var(--ok-500);   --ok-weak:     var(--ok-bg);
  --warn:   var(--warn-500); --warn-weak:   var(--warn-bg);
  --danger: var(--err-500);  --danger-weak: var(--err-bg);

  --dark:   var(--n-99); --dark-2: var(--n-90); --dark-3: var(--n-80);

  --radius-s: var(--r-s); --radius-m: var(--r-m); --radius-l: var(--r-l);
  --shadow-s: var(--heben-1); --shadow-m: var(--heben-2); --shadow-l: var(--heben-3);
  --ease: var(--kurve);
}

/* ── Karten ──────────────────────────────────────────────────────────── */
.pn-hub .crm-card {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
  box-shadow: var(--heben-1);
}
.pn-hub .crm-card > h2, .pn-hub .crm-card > h3 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
  display: flex; align-items: center; gap: var(--s-2);
}
.pn-hub .crm-card > h3 { font-size: var(--t-h3); }
.pn-hub .crm-card > p  { color: var(--text-leise); }
.pn-hub .crm-card > p + p { margin-top: var(--s-3); }

/* ── Kopfzeile einer Seite: Filter links, Aktion rechts ──────────────── */
.pn-hub .crm-head {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--s-5);
}
.pn-hub .crm-head h1 {
  font-family: var(--font-display); font-size: var(--t-h1);
  text-transform: uppercase; margin: 0;
}
.pn-hub .crm-head .crm-sub { color: var(--text-still); font-size: var(--t-klein); }
.pn-hub .crm-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* ── Listen und Zeilen ───────────────────────────────────────────────
   Eine Zeile ist ein Datensatz mit einer Handlung daneben. Die Kante links
   macht sie auf einen Blick als Zeile lesbar — dieselbe Kante wie an jedem
   Modul des Hubs. */
.pn-hub .crm-list { display: grid; gap: var(--s-2); }
.pn-hub .crm-row {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  background: var(--flaeche-2);
  border-left: var(--kante) solid var(--linie-stark);
  border-radius: var(--r-m);
}
.pn-hub .crm-row:hover { background: var(--flaeche-3); }
.pn-hub .crm-row .grow { flex: 1 1 auto; min-width: 0; }
.pn-hub .crm-row .title { display: block; font-weight: 600; }
.pn-hub .crm-row .meta  { display: block; color: var(--text-still); font-size: var(--t-klein); }
.pn-hub .crm-row .row-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.pn-hub .crm-row form { display: inline; }

.pn-hub .crm-grid-2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4);
}

.pn-hub .crm-empty {
  color: var(--text-still); font-size: var(--t-klein);
  padding: var(--s-4); text-align: center;
  border: 1px dashed var(--linie-stark); border-radius: var(--r-m);
}
.pn-hub .crm-empty.big { padding: var(--s-7) var(--s-4); font-size: var(--t-body); }

/* ── Meldungen ───────────────────────────────────────────────────────
   Farbe UND Kante — Farbe allein ist keine Aussage, wenn jemand sie nicht
   unterscheiden kann. */
.pn-hub .crm-alert {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-m);
  border-left: var(--kante) solid var(--info-500);
  background: var(--info-bg); color: var(--text);
  margin-bottom: var(--s-4);
}
.pn-hub .crm-alert.ok  { border-left-color: var(--ok-500);  background: var(--ok-bg); }
.pn-hub .crm-alert.err { border-left-color: var(--err-500); background: var(--err-bg); }
.pn-hub .crm-alert a { text-decoration: underline; }
/* Das Symbol trägt die Farbe der Meldung, nicht seine eigene: Ein goldenes
   Warndreieck in einem roten Fehlerkasten sieht aus, als gehörte es nicht
   dazu. */
.pn-hub .crm-alert .pn-ic { flex: none; color: inherit; margin-top: 2px; }

.pn-hub .crm-badge {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem;
  padding: 0 .35rem; border-radius: var(--r-full);
  background: var(--marke); color: var(--n-00);
  font-family: var(--font-mono); font-size: var(--t-winzig); font-weight: 700;
}

/* ── Formulare ───────────────────────────────────────────────────────
   Die CRM-Seiten benutzen `.field` als Feldhülle und `.form-grid` als
   Raster. Beides bekommt dieselbe Gestalt wie `.pn-form-raster` im
   Baukasten — sonst sieht ein altes Formular neben einem neuen aus wie
   ein Fremdkörper. */
.pn-hub .crm-form { display: grid; gap: var(--s-4); }
.pn-hub .crm-form .form-grid, .pn-hub .rp-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4);
}
.pn-hub .crm-form .form-grid .full, .pn-hub .rp-grid .full { grid-column: 1 / -1; }
.pn-hub .field { display: grid; gap: 6px; min-width: 0; }
/* Zwei Schreibweisen, eine Gestalt: Die Bestandsseiten schreiben
   `<div class="field"><label>…`, die neuen `<label class="field"><span>…`.
   Beides ist dieselbe Beschriftung — sie darf nicht zweimal aussehen. */
.pn-hub .field > label, .pn-hub .field > span, .pn-hub .filter-bar label {
  font-family: var(--font-mono); font-size: var(--t-winzig);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-still);
}
.pn-hub .field small, .pn-hub .field .hinweis, .pn-hub .field > span small {
  font-family: var(--font-body); text-transform: none; letter-spacing: 0;
  font-size: var(--t-mikro); color: var(--text-still);
}
.pn-hub input[type=text], .pn-hub input[type=email], .pn-hub input[type=url],
.pn-hub input[type=password], .pn-hub input[type=number], .pn-hub input[type=date],
.pn-hub input[type=time], .pn-hub input[type=datetime-local], .pn-hub input[type=search],
.pn-hub select, .pn-hub textarea {
  width: 100%; padding: var(--s-2) var(--s-3);
  font-family: var(--font-body); font-size: var(--t-body); color: var(--text);
  background: var(--flaeche-2); border: 1px solid var(--linie-stark);
  border-radius: var(--r-m);
}
.pn-hub textarea { resize: vertical; min-height: 5rem; }
.pn-hub input:focus, .pn-hub select:focus, .pn-hub textarea:focus { border-color: var(--marke-linie); }
.pn-hub input[type=checkbox], .pn-hub input[type=radio] { accent-color: var(--marke); }
.pn-hub .mm-check { display: flex; align-items: center; gap: var(--s-2); }
.pn-hub .mm-check input { width: auto; }

.pn-hub .filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end;
  margin-bottom: var(--s-4);
}
.pn-hub .filter-bar .field { min-width: 12rem; }

/* ── Knöpfe ──────────────────────────────────────────────────────────
   Die CRM-Seiten nutzen `.btn`, der Hub `.pn-knopf`. Hier wird `.btn` zu
   `.pn-knopf` — mit denselben Maßen, damit ein Formular nicht zwei
   Knopfgrössen hat. */
.pn-hub .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-m);
  border: 1px solid var(--linie-stark); background: var(--flaeche-2); color: var(--text);
  font-family: var(--font-body); font-size: var(--t-klein); font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dauer-schnell) var(--kurve), border-color var(--dauer-schnell) var(--kurve);
}
.pn-hub .btn:hover { background: var(--flaeche-3); border-color: var(--linie-stark); transform: none; }
.pn-hub .btn-primary { background: var(--marke); border-color: var(--marke); color: var(--n-00); box-shadow: none; }
.pn-hub .btn-primary:hover { background: var(--marke-dunkel); border-color: var(--marke-dunkel); }
.pn-hub .btn-dark { background: var(--flaeche-2); border-color: var(--linie-stark); color: var(--text); }
.pn-hub .btn-danger { background: transparent; border-color: var(--err-500); color: var(--err-500); }
.pn-hub .btn-danger:hover { background: var(--err-bg); }
.pn-hub .btn-s { padding: 6px var(--s-3); font-size: var(--t-mikro); }
.pn-hub .btn .pn-ic { width: 1em; height: 1em; }
.pn-hub .quick-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ── Tabellen ───────────────────────────────────────────────────────── */
.pn-hub table { width: 100%; border-collapse: collapse; font-size: var(--t-klein); }
.pn-hub thead th {
  text-align: left; padding: var(--s-2) var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-winzig);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-still);
  border-bottom: 1px solid var(--linie-stark);
}
.pn-hub tbody td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--linie); }
.pn-hub tbody tr:last-child td { border-bottom: 0; }
/* Breite Tabellen scrollen in ihrem eigenen Kasten — die Seite selbst darf
   nie seitwärts laufen. */
.pn-hub .standings-wrap, .pn-hub .tabelle-wrap { overflow-x: auto; }
.pn-hub .standings-table tbody tr:nth-child(even) { background: var(--flaeche-2); }
.pn-hub .standings-table .col-rank { width: 3rem; font-variant-numeric: tabular-nums; }
.pn-hub .standings-table .col-team { min-width: 12rem; }
.pn-hub .standings-table tbody tr.playoff-rank td:first-child { border-left: var(--kante) solid var(--ok-500); }
.pn-hub .standings-legend { display: flex; flex-wrap: wrap; gap: var(--s-3);
                            font-size: var(--t-mikro); color: var(--text-still); margin-top: var(--s-3); }
.pn-hub .standings-legend .dot { display: inline-block; width: .6rem; height: .6rem;
                                 border-radius: var(--r-full); background: var(--ok-500); margin-right: .35rem; }

/* ── Kennzahlen ──────────────────────────────────────────────────────── */
.pn-hub .kpi-row { display: grid; gap: var(--s-3);
                   grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: var(--s-5); }
.pn-hub .kpi {
  position: relative; display: grid; gap: 2px; padding: var(--s-4);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l);
  border-left: var(--kante) solid var(--linie-stark);
  color: inherit; text-decoration: none;
}
.pn-hub a.kpi:hover { background: var(--flaeche-2); }
.pn-hub .kpi .num { font-family: var(--font-display); font-size: var(--t-display);
                    line-height: 1; font-variant-numeric: tabular-nums; }
.pn-hub .kpi .label { font-family: var(--font-mono); font-size: var(--t-winzig);
                      letter-spacing: .12em; text-transform: uppercase; color: var(--text-still); }
.pn-hub .kpi .go { color: var(--text-still); font-size: var(--t-mikro); }
.pn-hub .kpi.accent { border-left-color: var(--marke); }
.pn-hub .kpi.warn   { border-left-color: var(--warn-500); }
.pn-hub .kpi.warn .num   { color: var(--warn-500); }
.pn-hub .kpi.danger { border-left-color: var(--err-500); }
.pn-hub .kpi.danger .num { color: var(--err-500); }

/* ── „Braucht Aufmerksamkeit" ────────────────────────────────────────── */
.pn-hub .attn-list { display: grid; gap: var(--s-2); }
.pn-hub .attn-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-m);
  background: var(--flaeche-2); border-left: var(--kante) solid var(--linie-stark);
  color: inherit; text-decoration: none;
}
.pn-hub .attn-item:hover { background: var(--flaeche-3); }
.pn-hub .attn-item.info   { border-left-color: var(--info-500); }
.pn-hub .attn-item.warn   { border-left-color: var(--warn-500); }
.pn-hub .attn-item.danger { border-left-color: var(--err-500); }
.pn-hub .attn-item .ai-txt { flex: 1 1 auto; min-width: 0; }
.pn-hub .attn-item .ai-txt small { display: block; color: var(--text-still); font-size: var(--t-mikro); }
.pn-hub .attn-item .ai-go { color: var(--text-still); }

/* ── Matchkarte (Ergebnis melden) ───────────────────────────────────── */
.pn-hub .match-card {
  /* minmax(0, 1fr) — sonst ist die Spalte so breit wie der längste Teamname
     und die Karte sprengt den Inhaltsbereich. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s-4); align-items: center;
  padding: var(--s-5); background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-l);
}
.pn-hub .match-side { display: grid; gap: var(--s-2); justify-items: center; text-align: center; min-width: 0; }
.pn-hub .match-side .tname { font-family: var(--font-display); font-size: var(--t-h2);
                             text-transform: uppercase; }
.pn-hub .match-side .surrender-btn.active { border-color: var(--err-500); color: var(--err-500); }
.pn-hub .match-mid { display: grid; gap: var(--s-2); justify-items: center; }
.pn-hub .match-mid .score-inputs { display: flex; gap: var(--s-2); align-items: center; }
.pn-hub .match-mid input[type=number] { width: 4.5rem; text-align: center;
                                        font-family: var(--font-display); font-size: var(--t-h1); }
.pn-hub .match-meta { color: var(--text-still); font-size: var(--t-klein); text-align: center; }
@media (max-width: 640px) { .pn-hub .match-card { grid-template-columns: 1fr; } }

/* ── Kleinkram, der überall vorkommt ─────────────────────────────────── */
.pn-hub .flag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: 2px .5rem; border-radius: var(--r-full);
  background: var(--flaeche-3); color: var(--text-leise);
  font-family: var(--font-mono); font-size: var(--t-winzig);
  letter-spacing: .08em; text-transform: uppercase;
}
.pn-hub .flag-season   { background: var(--marke-weich); color: var(--marke-hell); }
.pn-hub .flag-division { background: var(--info-bg);     color: var(--info-500); }

.pn-hub .team-logo { object-fit: contain; border-radius: var(--r-s); }
.pn-hub .team-logo-fallback {
  display: inline-grid; place-items: center;
  background: var(--flaeche-3); color: var(--text-still);
  font-family: var(--font-display); border-radius: var(--r-s);
}

.pn-hub .upload-box {
  display: grid; gap: var(--s-2); justify-items: start;
  padding: var(--s-3); border: 1px dashed var(--linie-stark); border-radius: var(--r-m);
}
.pn-hub .upload-box img.preview { max-height: 72px; width: auto; border-radius: var(--r-s); }
.pn-hub .upload-box input { width: auto; }

/* Umbrechen: Bei 234 Matches sind das zwölf Seitenzahlen — in einer Zeile
   schieben die den ganzen Inhaltsbereich über den Rand. */
.pn-hub .pagination { display: flex; flex-wrap: wrap; gap: var(--s-2);
                      align-items: center; margin-top: var(--s-4); }
.pn-hub .pagination a, .pn-hub .pagination span {
  padding: 4px var(--s-3); border-radius: var(--r-m);
  border: 1px solid var(--linie); color: var(--text-leise); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pn-hub .pagination a:hover { border-color: var(--linie-stark); color: var(--text); }
.pn-hub .pagination .current { background: var(--marke); border-color: var(--marke); color: var(--n-00); }

.pn-hub .log-list { display: grid; gap: var(--s-2); }
.pn-hub .log-item { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline;
                    padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--linie); }
.pn-hub .log-item .when { font-family: var(--font-mono); font-size: var(--t-mikro);
                          color: var(--text-still); font-variant-numeric: tabular-nums; }
.pn-hub .log-item .who  { color: var(--text-leise); font-size: var(--t-klein); }

/* Ablehnen-mit-Grund. */
.pn-hub .rej-form { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.pn-hub .rej-form .rej-actions { display: flex; gap: var(--s-2); }

/* Roster-Erstanlage: eine Karte je Antrag. */
.pn-hub .rp-card { padding: var(--s-4); background: var(--flaeche-2);
                   border-radius: var(--r-m); margin-bottom: var(--s-3); }
.pn-hub .rp-head { display: flex; flex-wrap: wrap; gap: var(--s-3);
                   align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.pn-hub .rp-head .num { font-family: var(--font-mono); color: var(--text-still); font-size: var(--t-mikro); }
.pn-hub .rp-grid.soc { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Klappblöcke in Formularen. */
.pn-hub details.collapse-3 > summary {
  cursor: pointer; padding: var(--s-2) 0; color: var(--text-leise);
  font-family: var(--font-mono); font-size: var(--t-winzig);
  letter-spacing: .12em; text-transform: uppercase;
}
.pn-hub details.collapse-3 > summary::-webkit-details-marker { display: none; }

/* Playoff-Baum — er steht im Hub UND auf der öffentlichen Seite; hier nur
   die Fassung für den dunklen Grund. */
.pn-hub .po-grid { display: flex; gap: var(--s-5); overflow-x: auto; padding-bottom: var(--s-3); }
.pn-hub .po-match { display: grid; gap: 2px; margin-bottom: var(--s-3);
                    background: var(--flaeche-2); border-radius: var(--r-m); overflow: hidden; }
.pn-hub .po-team { display: flex; align-items: center; gap: var(--s-2);
                   padding: var(--s-2) var(--s-3); font-size: var(--t-klein); }
.pn-hub .po-team.win { background: var(--marke-weich); font-weight: 600; }
.pn-hub .po-team .po-name { flex: 1 1 auto; color: inherit; text-decoration: none; }
.pn-hub .po-team .po-score { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* ── Benachrichtigungen ─────────────────────────────────────────────── */
.pn-hub .pn-notif {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-m);
  background: var(--flaeche-2); border-left: var(--kante) solid transparent;
  margin-bottom: var(--s-2);
}
.pn-hub .pn-notif.unread { border-left-color: var(--marke); background: var(--flaeche-3); }
.pn-hub .pn-notif-ic { flex: none; color: var(--text-still); }
.pn-hub .pn-notif .title a { font-weight: 600; text-decoration: none; }
.pn-hub .pn-notif .title a:hover { color: var(--marke-hell); }
.pn-hub .pn-notif-neu {
  display: inline-block; width: .5rem; height: .5rem; border-radius: var(--r-full);
  background: var(--marke); flex: none; margin-top: .45rem;
}
/* Die Tabelle „was schicken wir wohin" — Kanäle als Spalten. */
.pn-hub .pn-prefs { width: 100%; }
.pn-hub .pn-prefs th, .pn-hub .pn-prefs td { padding: var(--s-2) var(--s-3); }
.pn-hub .pn-prefs th:not(:first-child), .pn-hub .pn-prefs td:not(:first-child) { text-align: center; }
.pn-hub .pn-prefs input[type=checkbox] { width: auto; }
.pn-hub .pn-prefs input:disabled { opacity: .4; }
.pn-hub .pn-prefs-dringend { color: var(--warn-500); font-size: var(--t-mikro); }

/* ── Dashboard: was bei mir liegt ───────────────────────────────────── */
.pn-hub .pn-todo-card h2 { display: flex; align-items: center; gap: var(--s-2); }
.pn-hub .pn-todo-card.leer h2 { color: var(--text-still); }
.pn-hub .pn-todo-n {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
  border-radius: var(--r-full); background: var(--flaeche-3); color: var(--text-leise);
  font-family: var(--font-mono); font-size: var(--t-winzig); font-weight: 700;
}
.pn-hub .pn-todo-gruppe { margin-bottom: var(--s-4); }
.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-gruppe.dringend .pn-todo-label { color: var(--warn-500); }
.pn-hub .pn-todo-zeile {
  display: flex; gap: var(--s-3); align-items: center; justify-content: space-between;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-m);
  color: inherit; text-decoration: none;
}
.pn-hub .pn-todo-zeile:hover { background: var(--flaeche-2); }
.pn-hub .pn-todo-mehr { font-size: var(--t-mikro); color: var(--text-still); }

/* ── Kalender im Hub ────────────────────────────────────────────────── */
.pn-hub .pn-kal-kopf { display: flex; flex-wrap: wrap; gap: var(--s-3);
                       align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.pn-hub .pn-kal-nav { display: flex; gap: var(--s-2); align-items: center; }
.pn-hub .pn-kal-nav strong { font-family: var(--font-display); font-size: var(--t-h2);
                             text-transform: uppercase; }
.pn-hub .pn-kal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
                  background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r-m);
                  overflow: hidden; }
.pn-hub .pn-kal-wt { padding: var(--s-2); background: var(--flaeche);
                     font-family: var(--font-mono); font-size: var(--t-winzig);
                     letter-spacing: .12em; text-transform: uppercase; color: var(--text-still); }
.pn-hub .pn-kal-tag { min-height: 6rem; padding: var(--s-2); background: var(--flaeche); }
.pn-hub .pn-kal-tag.fremd { background: var(--bg-weich); opacity: .45; }
.pn-hub .pn-kal-tag.heute { outline: 2px solid var(--marke); outline-offset: -2px; }
.pn-hub .pn-kal-tag .d, .pn-hub .pn-kal-zahl { font-size: var(--t-mikro); color: var(--text-still);
                                               font-variant-numeric: tabular-nums; }
.pn-hub .pn-kal-tag.heute .d { color: var(--marke-hell); font-weight: 700; }
.pn-hub .pn-kal-ev {
  display: block; margin-top: 2px; padding: 1px var(--s-1) 1px 6px; border-radius: var(--r-s);
  border-left: 3px solid var(--text-still);
  font-size: var(--t-winzig); color: var(--text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pn-hub .pn-kal-ev:hover { background: var(--flaeche-3); }
.pn-hub .pn-kal-ev .z { color: var(--text-still); margin-right: 3px; }
.pn-hub .pn-kal-ev.k-match   { border-left-color: var(--c-match);   background: color-mix(in srgb, var(--c-match) 12%, transparent); }
.pn-hub .pn-kal-ev.k-stream  { border-left-color: var(--c-stream);  background: color-mix(in srgb, var(--c-stream) 12%, transparent); }
.pn-hub .pn-kal-ev.k-content { border-left-color: var(--c-content); background: color-mix(in srgb, var(--c-content) 12%, transparent); }
.pn-hub .pn-kal-ev.k-verein  { border-left-color: var(--c-verein);  background: color-mix(in srgb, var(--c-verein) 12%, transparent); }
.pn-hub .pn-kal-ev.k-frist   { border-left-color: var(--c-frist);   background: color-mix(in srgb, var(--c-frist) 12%, transparent); }

/* ── Mein Konto ─────────────────────────────────────────────────────── */
.pn-hub .pn-konto-form { display: grid; gap: var(--s-3); max-width: 32rem; }
.pn-hub .pn-konto-status {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-m);
  border-left: var(--kante) solid var(--linie-stark); background: var(--flaeche-2);
  margin-bottom: var(--s-3);
}
.pn-hub .pn-konto-status.ok   { border-left-color: var(--ok-500);   background: var(--ok-bg); }
.pn-hub .pn-konto-status.warn { border-left-color: var(--warn-500); background: var(--warn-bg); }
/* Der Abo-Link ist zum Kopieren da, nicht zum Lesen — deshalb Schreibmaschine
   und volle Breite. */
.pn-hub .pn-ics { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.pn-hub .pn-ics input { flex: 1 1 22rem; font-family: var(--font-mono); font-size: var(--t-mikro); }

/* ── Protokoll ──────────────────────────────────────────────────────── */
.pn-hub .pn-prot-filter { display: flex; flex-wrap: wrap; gap: var(--s-2);
                          align-items: flex-end; margin-bottom: var(--s-4); }
.pn-hub .pn-prot-filter input[type=search] { flex: 1 1 18rem; }
.pn-hub .pn-prot { display: grid; gap: var(--s-1); }
.pn-hub .pn-prot-tag {
  display: inline-block; padding: 1px .45rem; border-radius: var(--r-s);
  background: var(--flaeche-3); color: var(--text-leise);
  font-family: var(--font-mono); font-size: var(--t-winzig);
}

/* Live-Einstellungen (Realtime). */
.pn-hub .pn-rt-form { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end; }
.pn-hub .pn-rt-form label { font-family: var(--font-mono); font-size: var(--t-winzig);
                            letter-spacing: .12em; text-transform: uppercase; color: var(--text-still); }
.pn-hub .pn-rt-form input { width: 6rem; }

/* Der Frosch aus dem alten CRM hat im neuen Gerüst keinen Platz mehr. */
.pn-hub .pain-frog { display: none; }

@media (max-width: 720px) {
  .pn-hub .crm-form .form-grid, .pn-hub .rp-grid { grid-template-columns: minmax(0, 1fr); }
  .pn-hub .crm-row { flex-direction: column; align-items: stretch; }
  .pn-hub .crm-row .row-actions { justify-content: flex-start; }
}

}