/* ═══════════════════════════════════════════════════════════════════════
   03 — GERÜST
   Das Sendepult: Kopfleiste, Menüspur, Inhaltsfläche, Seitenkopf.
   Der Rahmen — nicht das, was darin steht.
   ═════════════════════════════════════════════════════════════════════ */

@layer geruest {

/* ── Kopfleiste ───────────────────────────────────────────────────────
   Schmal und ruhig. Sie ist ein Ort zum Wechseln, kein Ort zum Arbeiten. */
.pn-hub .pn-top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--s-4);
  height: 52px; padding: 0 var(--s-4);
  background: var(--chrome);
  border-bottom: 1px solid var(--linie);
}

.pn-hub .pn-logo {
  display: flex; align-items: center; flex: none;
  text-decoration: none;
  padding-right: var(--s-4); margin-right: var(--s-1);
  border-right: 1px solid var(--linie);
}
.pn-hub .pn-logo img { width: 26px; height: 26px; }

/* Bereichsanzeige: ein farbiger Punkt und ein Wort. Mehr braucht es nicht,
   um zu sagen, wo man ist. */
.pn-hub .pn-umschalter { position: relative; }
.pn-hub .pn-umschalter > button {
  display: flex; align-items: center; gap: var(--s-2);
  height: 32px; padding: 0 var(--s-3);
  background: none; border: 1px solid transparent; border-radius: var(--r-m);
  color: var(--text-leise); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--t-mikro);
  letter-spacing: .1em; text-transform: uppercase;
  transition: background var(--dauer-schnell) var(--kurve), color var(--dauer-schnell) var(--kurve);
}
.pn-hub .pn-umschalter > button:hover { background: var(--flaeche); color: var(--text); }
.pn-hub .pn-umschalter > button .pn-ic { width: 14px; height: 14px; color: var(--hub-farbe, var(--marke)); }
.pn-hub .pn-umschalter > button svg:last-child { width: 9px; height: 6px; opacity: .5; }

.pn-hub .pn-umschalter-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  min-width: 268px; padding: var(--s-2);
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--r-m); box-shadow: var(--heben-3);
}
.pn-hub .pn-umschalter-menu a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-s);
  color: var(--text); text-decoration: none;
}
.pn-hub .pn-umschalter-menu a:hover { background: var(--flaeche-2); }
.pn-hub .pn-umschalter-menu a[aria-current] { background: var(--flaeche-2); }
.pn-hub .pn-umschalter-menu strong { display: block; font-size: var(--t-klein); font-weight: 600; }
.pn-hub .pn-umschalter-menu small { display: block; color: var(--text-still); font-size: var(--t-mikro); }
.pn-hub .pn-punkt { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pn-hub .pn-alle {
  margin-top: var(--s-1); padding-top: var(--s-2);
  border-top: 1px solid var(--linie);
  font-family: var(--font-mono); font-size: var(--t-mikro);
  letter-spacing: .08em; color: var(--text-still) !important;
}

/* ── Suche ────────────────────────────────────────────────────────────
   Ein Feld, ein Symbol, genug Platz dazwischen. Die Regel steht in der
   Ebene `geruest` — eine allgemeine Eingaberegel aus `basis` kann sie
   nicht mehr überschreiben, egal wie sie aussieht. */
.pn-hub .pn-suche { position: relative; flex: 1 1 auto; max-width: 320px; }
.pn-hub .pn-suche .pn-ic {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-still); pointer-events: none;
}
.pn-hub .pn-suche input {
  width: 100%; height: 32px;
  padding: 0 var(--s-3) 0 36px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  color: var(--text); font: inherit; font-size: var(--t-klein);
}
.pn-hub .pn-suche input::placeholder { color: var(--text-still); }
.pn-hub .pn-suche input:focus { outline: none; border-color: var(--marke); box-shadow: 0 0 0 3px var(--marke-weich); }

/* ── Rechte Seite der Kopfleiste ─────────────────────────────────────── */
.pn-hub .pn-top-rechts { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.pn-hub .pn-icon-knopf {
  position: relative; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--r-m);
  color: var(--text-leise); text-decoration: none;
  transition: background var(--dauer-schnell) var(--kurve), color var(--dauer-schnell) var(--kurve);
}
.pn-hub .pn-icon-knopf:hover { background: var(--flaeche); color: var(--text); }
.pn-hub .pn-icon-knopf .pn-ic { width: 17px; height: 17px; }
.pn-hub .pn-zaehler {
  position: absolute; top: 1px; right: 1px;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: var(--r-full);
  background: var(--marke); color: #fff;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  line-height: 15px; text-align: center;
}
@keyframes pnZaehlerAn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.pn-hub .pn-zaehler.frisch { animation: pnZaehlerAn var(--dauer-normal) var(--kurve); }

/* ── Konto ───────────────────────────────────────────────────────────── */
.pn-hub .pn-konto { position: relative; }
.pn-hub .pn-konto > button {
  display: flex; align-items: center; gap: var(--s-2);
  height: 32px; padding: 0 var(--s-3);
  background: none; border: 0; border-radius: var(--r-m);
  color: var(--text-leise); cursor: pointer; font: inherit; font-size: var(--t-klein);
}
.pn-hub .pn-konto > button:hover { background: var(--flaeche); color: var(--text); }
.pn-hub .pn-konto > button .pn-ic { width: 17px; height: 17px; }
.pn-hub .pn-konto-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 70;
  min-width: 200px; padding: var(--s-2);
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--r-m); box-shadow: var(--heben-3);
}
.pn-hub .pn-konto-menu a {
  display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-s);
  color: var(--text); text-decoration: none; font-size: var(--t-klein);
}
.pn-hub .pn-konto-menu a:hover { background: var(--flaeche-2); }
.pn-hub .pn-abmelden {
  margin-top: var(--s-1); padding-top: var(--s-2) !important;
  border-top: 1px solid var(--linie); color: var(--err-500) !important;
}

/* ── Rumpf: Spur und Inhalt ─────────────────────────────────────────── */
.pn-hub .pn-rumpf { display: grid; grid-template-columns: 200px minmax(0, 1fr); }

.pn-hub .pn-seite {
  position: sticky; top: 52px; align-self: start;
  height: calc(100vh - 52px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-3) var(--s-2);
  background: var(--bg-weich); border-right: 1px solid var(--linie);
}
.pn-hub .pn-seite ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.pn-hub .pn-seite .gruppe {
  padding: var(--s-4) var(--s-3) var(--s-1);
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-still);
}
.pn-hub .pn-seite li:first-child .gruppe { padding-top: 0; }
.pn-hub .pn-seite a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 7px var(--s-3); border-radius: var(--r-m);
  color: var(--text-leise); text-decoration: none; font-size: var(--t-klein);
  transition: background var(--dauer-schnell) var(--kurve), color var(--dauer-schnell) var(--kurve);
}
.pn-hub .pn-seite a .pn-ic { width: 17px; height: 17px; flex: none; }
.pn-hub .pn-seite a:hover { background: var(--flaeche); color: var(--text); }
/* Der aktive Punkt trägt dieselbe rote Kante wie ein Modul, an dem du dran
   bist — dieselbe Sprache an beiden Enden der Seite. */
.pn-hub .pn-seite a.aktiv {
  background: var(--flaeche); color: var(--text); font-weight: 600;
  box-shadow: inset var(--kante) 0 0 var(--marke);
}
.pn-hub .pn-seite .pn-zaehler-menu {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--t-winzig); font-weight: 700;
  background: var(--marke); color: #fff; border-radius: var(--r-full); padding: 1px 6px;
}
.pn-hub .pn-seite-fuss { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--linie); }

.pn-hub .pn-inhalt {
  min-width: 0;
  padding: var(--s-5) var(--s-5) var(--s-9);
  /* ⚠ `minmax(0, 1fr)` statt der Vorgabe `auto`: Eine Grid-Spalte ist sonst
     so breit wie ihr breitestes Kind — ein Formular mit langen Namen oder
     eine breite Tabelle schiebt die ganze Spalte über den Rand hinaus, und
     die Seite läuft seitwärts. Aufgefallen an der Matchliste, deren Karten
     1095 px verlangt haben, obwohl nur 780 da waren. */
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5); align-content: start;
  /* Mittig in dem Platz, der neben der Menüspur übrig bleibt. Ohne das
     `margin-inline: auto` klebt die Spalte auf breiten Schirmen links und
     lässt rechts eine handbreite leere Fläche stehen. 1120 ist die Breite,
     die sich vorher schon bewährt hat. */
  width: 100%; max-width: 1120px; margin-inline: auto;
}

/* ── Seitenkopf ───────────────────────────────────────────────────────
   Titel gross, Kontext klein darunter, Hauptaktion rechts. Keine
   Kleinschrift ÜBER der Überschrift: die schwächt sie nur. */
.pn-hub .pn-kopf {
  display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap;
}
.pn-hub .pn-h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3.4vw, var(--t-display));
  line-height: .95; letter-spacing: .005em;
  text-transform: uppercase; color: #fff;
}
.pn-hub .pn-kopf-wo {
  display: block; margin-top: 5px;
  font-family: var(--font-mono); font-size: var(--t-mikro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-still);
}
.pn-hub .pn-kopf-aktion { margin-left: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ── Adminsicht ───────────────────────────────────────────────────────
   Absichtlich laut. Wer nicht sieht, dass er in ein fremdes Team schaut,
   hält es für sein eigenes. */
.pn-hub .pn-adminsicht {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-5);
  background: var(--warn-bg); border-bottom: 2px solid var(--warn-500);
  font-size: var(--t-klein);
}
.pn-hub .pn-adminsicht .pn-ic { width: 18px; height: 18px; color: var(--warn-500); flex: none; }
.pn-hub .pn-adminsicht form { margin-left: auto; }

/* Teamumschalter der Adminsicht — sitzt in der Kontextzeile, wo auch sonst
   steht, wo man ist. */
.pn-hub .pn-teamwahl { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.pn-hub .pn-teamwahl select { max-width: 220px; }
.pn-hub .pn-teamwahl .pn-leer { margin: 0; }

/* ── Aktionsleiste unten (nur Handy, nur Crossfirehub) ───────────────── */
.pn-hub .pn-untenleiste { display: none; }

/* ── Burger ──────────────────────────────────────────────────────────── */
.pn-hub .pn-burger {
  display: none; place-items: center;
  width: 32px; height: 32px; flex: none;
  background: none; border: 0; border-radius: var(--r-m);
  color: var(--text-leise); cursor: pointer;
}
.pn-hub .pn-burger:hover { background: var(--flaeche); color: var(--text); }
.pn-hub .pn-burger .pn-ic { width: 18px; height: 18px; }

/* ── Schmale Schirme ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .pn-hub .pn-burger { display: grid; }
  .pn-hub .pn-logo { border-right: 0; padding-right: 0; }
  .pn-hub .pn-suche { max-width: none; }
  .pn-hub .pn-rumpf { grid-template-columns: minmax(0, 1fr); }
  .pn-hub .pn-seite {
    position: fixed; inset: 52px auto 0 0; width: 264px; z-index: 55;
    transform: translateX(-100%);
    transition: transform var(--dauer-normal) var(--kurve);
    box-shadow: var(--heben-3);
  }
  .pn-hub.pn-nav-auf .pn-seite, .pn-hub body.pn-nav-auf .pn-seite { transform: none; }
  .pn-hub .pn-inhalt { padding: var(--s-4) var(--s-4) var(--s-9); }

  /* Vier Ziele mit dem Daumen erreichbar, ohne den Burger zu öffnen.
     Nur im Crossfirehub — dort zählen die 20 Sekunden. */
  .pn-hub .pn-untenleiste {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; inset: auto 0 0 0; z-index: 58;
    background: var(--chrome); border-top: 1px solid var(--linie-stark);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .pn-hub .pn-untenleiste a {
    display: grid; justify-items: center; gap: 2px;
    padding: var(--s-2) var(--s-1) var(--s-3);
    color: var(--text-still); text-decoration: none;
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .06em; text-transform: uppercase;
  }
  .pn-hub .pn-untenleiste a .pn-ic { width: 19px; height: 19px; }
  .pn-hub .pn-untenleiste a.aktiv { color: var(--marke); }
  .pn-hub .pn-inhalt { padding-bottom: calc(var(--s-9) + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 640px) {
  .pn-hub .pn-suche { display: none; }
}

}