/* ═══════════════════════════════════════════════════════════════════════
   HUB — die Bausteine des Hub-Design-Guides
   Rail links, Kopfleiste oben, Arbeitsfläche darunter.

   ── DIE HALTUNG ───────────────────────────────────────────────────────
   Draussen baut sich eine Seite beim Scrollen auf und will beeindrucken.
   Hier steht alles still, bis jemand etwas anklickt. Wer im Hub arbeitet,
   kommt mit einer Absicht und soll sie in zwei Klicks erreichen.

   ⚠ **Nichts bewegt sich von allein.** Kein Scroll-Aufbau, kein Laufband,
     kein Schweben. Die einzige Dauerbewegung ist der Punkt an der Glocke,
     und auch der nur, wenn wirklich etwas ungelesen ist.
   ⚠ **Jede Bewegung ist eine Antwort.** Nach Klick, Hover oder Tastendruck
     darf sich etwas bewegen — und zwar so, dass man sieht, WAS sich
     geaendert hat.

   ── DIE ZWEI KURVEN ───────────────────────────────────────────────────
   Mehr gibt es nicht. `--ah-sachlich` fuer alles, was erscheint, waechst
   oder gedrueckt wird. `--ah-federnd` nur fuer Indikatoren, die eine
   Strecke zuruecklegen — sie schiessen leicht ueber und rasten ein.
   ═════════════════════════════════════════════════════════════════════ */

@layer besonderes {

:root {
  --ah-sachlich: cubic-bezier(.2, .8, .2, 1);
  --ah-federnd:  cubic-bezier(.3, 1.3, .4, 1);
  --ah-druck:    .08s;   /* gedrueckt */
  --ah-hover:    .18s;
  --ah-farbe:    .3s;    /* Farbwechsel */
  --ah-weg:      .42s;   /* Positionswechsel, Panel-Eintritt */
  --rail:        #0F0E12;
  --hover:       rgba(230, 230, 230, .05);
  /* ⚠ EIGENES Label-Grau, nicht `--text-still` (#6b6577). Das Label ist
       das Arbeitspferd des Hubs — Metazeilen, Zeitstempel, Spaltenkoepfe,
       Statuschips — und es ist immer 11 px gross. Bei 11 px gilt 4,5:1,
       und `--text-still` kam auf 3,33:1 gegen die Kartenflaeche. Gemessen
       waren es 25 Verstoesse auf der Uebersicht allein.
       #8B8698 ist der Wert des Hub-Design-Guides fuer `--text-3` und
       schafft 5,29:1 auf der Karte, 4,88:1 auf der Karte in der Karte.
     ⚠ Im hellen Theme nennt der Guide #8A8794 — das sind nur 3,52:1 auf
       Weiss. Die Regel schlaegt hier die Tabelle: #706D7A, der kleinste
       Schritt, der 4,5:1 haelt (5,05:1 auf Weiss). */
  --ah-label:    #8B8698;
}
.th-light {
  --rail:  #FFFFFF;
  --hover: rgba(26, 24, 34, .04);
  --ah-label: #706D7A;
}

/* ═══════════════ RAIL ═══════════════════════════════════════════════
   64 px breit, volle Hoehe. Hoechstens zehn Eintraege — was nicht
   hineinpasst, gehoert in die Tabs, nicht in die Rail. Jedes Icon traegt
   `title` und `aria-label`, weil kein Text danebensteht. */
.ah-rail {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: 64px; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 18px 0;
  background: var(--rail); border-right: 1px solid var(--linie);
}
.ah-rail-logo {
  width: 30px; height: 30px; border-radius: 7px; background: var(--marke);
  margin-bottom: 14px; flex: none;
}
.ah-rail-icon {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 6px; color: var(--ah-label);
  transition: background var(--ah-farbe) var(--ah-sachlich),
              color var(--ah-farbe) var(--ah-sachlich);
}
.ah-rail-icon .pn-ic { width: 18px; height: 18px; stroke-width: 1.8; }
.ah-rail-icon:hover { background: var(--hover); color: var(--text); }
.ah-rail-icon.aktiv { background: var(--marke); color: #fff; }
.ah-rail-fuss { margin-top: auto; }
.ah-rail-icon:focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 2px; }

/* ═══════════════ KOPFLEISTE ═════════════════════════════════════════ */
.ah-kopf {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  min-height: 66px; padding: 0 26px; margin-left: 64px;
  background: var(--bg); border-bottom: 1px solid var(--linie);
}
.ah-hubname {
  margin: 0; font-family: var(--font-display); font-size: 19px;
  text-transform: uppercase; letter-spacing: .01em; color: var(--text);
}
.ah-luecke { flex: 1; }
/* Ohne Rail rueckt die Kopfleiste an den linken Rand — sonst klaffte dort
   die Luecke einer Leiste, die gar nicht da ist. */
.ah-kopf.ohne-rail { margin-left: 0; }
.ah-burger { display: none; }

/* ── Tabs mit gleitendem Indikator ───────────────────────────────────
   ⚠ Der Indikator liegt HINTER den Links (`z-index: 1` auf den Links) und
     faehrt per `translateX`. Seine Breite ist 1/n der Zeile, seine
     Position `index × Breite` — beides kommt als Variable aus PHP, weil
     jede Seite neu laedt und es kein SPA gibt.
   ⚠ Beim ersten Versuch lag er ueber den Links: Dann war der aktive Tab
     rot UEBERMALT statt rot unterlegt. */
.ah-tabs {
  position: relative; display: flex; align-items: center; gap: 0;
  padding: 4px; border-radius: var(--r-full);
  background: var(--flaeche-2); flex: none;
}
/* ⚠ Ohne JavaScript ist der Indikator UNSICHTBAR und der aktive Tab traegt
     selbst die rote Flaeche. Erst `hub.js` setzt `js` auf die Zeile, misst
     die echten Tabbreiten und laesst ihn gleiten. Der Grund: Die Tabs
     heissen „Seiten" und „Latest Content" — gleich breit sind sie nie, und
     eine Rechnung „Zeilenbreite durch Anzahl" setzte ihn 17 px daneben. */
.ah-ind { display: none; }
/* ⚠ `left: 0`, nicht `left: 4px`. `offsetLeft` des Tabs enthaelt den
     Innenabstand der Zeile bereits — mit beidem stand der Indikator
     4 px zu weit rechts. */
.ah-tabs.js .ah-ind {
  display: block;
  position: absolute; top: 4px; bottom: 4px; left: 0;
  background: var(--marke); border-radius: var(--r-full);
  transition: transform var(--ah-weg) var(--ah-federnd),
              width var(--ah-weg) var(--ah-federnd);
}
.ah-tab.aktiv { background: var(--marke); }
/* ⚠ Im `.js`-Zustand traegt der gleitende Indikator die Flaeche unter dem
     aktiven Tab — er liegt direkt dahinter (`z-index: 1` auf den Tabs).
     Ein statischer Kontrastpruefer sieht das nicht und meldet „weiss auf
     hell"; im Bild stimmt es. Der Indikator wird in derselben Bildfolge
     gesetzt, in der `js` dazukommt, es gibt also kein Fenster dazwischen. */
.ah-tabs.js .ah-tab.aktiv { background: none; }
.ah-tab {
  position: relative; z-index: 1;
  flex: 0 0 auto; text-align: center; white-space: nowrap;
  padding: 7px 16px; border-radius: var(--r-full);
  font: 600 13px/1 var(--font-body); color: var(--ah-label);
  text-decoration: none;
  transition: color var(--ah-farbe) var(--ah-sachlich);
}
.ah-tab.aktiv { color: #fff; }
.ah-tab:hover { color: var(--text); }
.ah-tab.aktiv:hover { color: #fff; }
.ah-tab:focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 2px; }

/* ── Werkzeuge rechts ────────────────────────────────────────────────
   Suche, Glocke, Theme und Konto sitzen alle auf derselben Flaeche mit
   demselben Rahmen — vier Dinge, eine Gruppe. */
.ah-werkzeug {
  position: relative; display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: var(--r-s);
  background: var(--flaeche); border: 1px solid var(--linie);
  color: var(--text-leise);
  transition: color var(--ah-farbe) var(--ah-sachlich),
              border-color var(--ah-farbe) var(--ah-sachlich);
}
.ah-werkzeug:hover { color: var(--text); border-color: var(--linie-stark); }
.ah-werkzeug:focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 2px; }
.ah-werkzeug .pn-ic { width: 16px; height: 16px; }

/* ⚠ Die EINZIGE Dauerbewegung im Hub. Sie steht nur im Markup, wenn
     wirklich etwas ungelesen ist — ein Punkt, der immer pulsiert, waere
     eine Benachrichtigung, die nichts bedeutet. */
.ah-punkt {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--marke); box-shadow: 0 0 0 2px var(--flaeche);
  animation: ah-pulse 1.6s ease-in-out infinite;
}
@keyframes ah-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: .55; }
}

.ah-konto > button {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px; border-radius: var(--r-s);
  background: var(--flaeche); border: 1px solid var(--linie);
  color: var(--text); cursor: pointer;
  transition: border-color var(--ah-farbe) var(--ah-sachlich);
}
.ah-konto > button:hover { border-color: var(--linie-stark); }
.ah-konto-bild {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--r-m); background: var(--flaeche-2); color: var(--text-leise);
}
.ah-konto-bild .pn-ic { width: 14px; height: 14px; }
.ah-konto-text { display: grid; gap: 1px; text-align: left; line-height: 1.1; }
.ah-konto-text strong { font: 500 13px/1.2 var(--font-body); }

/* Das Arbeitspferd des Hubs: Metazeilen, Badges, Zeitstempel, Spaltenköpfe. */
.ah-lab {
  font: 600 11px/1.2 var(--font-body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ah-label);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════ ARBEITSFLÄCHE ══════════════════════════════════════
   ⚠ `grid-template-columns` muss ausdruecklich zurueckgenommen werden.
     `03-geruest.css` setzt `200px minmax(0,1fr)` fuer die alte
     Seitenleiste; ohne sie landete der ganze Inhalt in der 200-px-Spalte
     und stand als schmaler Streifen am linken Rand. Eine Regel, die nur
     den Aussenabstand setzt, reicht dafuer nicht — der Bestand muss
     Eigenschaft fuer Eigenschaft geloest werden. */
.pn-hub .pn-rumpf.ah-mit-rail {
  display: block; grid-template-columns: none;
  margin-left: 64px;
}
.pn-hub .pn-rumpf.ah-mit-rail > .pn-inhalt {
  max-width: 1440px; margin-inline: auto;
  padding: 28px 26px 32px;
}

/* ⚠ Der Panel-Eintritt laeuft beim LADEN einmal — kein SPA, keine
     Ueberblendung. Er kommt 10 px von unten und ist nach 0,42 s fertig. */
.pn-hub .pn-rumpf.ah-mit-rail > .pn-inhalt { animation: ah-enter var(--ah-weg) var(--ah-sachlich) both; }
@keyframes ah-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.ah-skip:focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 2px; }

/* ═══════════════ SEITENKOPF ═════════════════════════════════════════
   Titel in Anton, darunter eine Zeile, die sagt, wofuer die Seite da ist.
   Beide wechseln mit dem Tab. */
.ah-seitenkopf { margin-bottom: 18px; }
.ah-seitenkopf h1 {
  margin: 0; font-family: var(--font-display); font-size: 38px; line-height: .96;
  text-transform: uppercase; color: var(--text);
}
.ah-seitenkopf p { margin: 8px 0 0; font-size: 14px; color: var(--text-leise); }

/* ═══════════════ ZEILEN UND KARTEN ══════════════════════════════════
   ⚠ Das Verhaeltnis ist immer 1,45 zu 1. Dadurch bricht die Zeile bei
     etwa 860 px von selbst um — ohne Media Query. Das ist der Trick des
     Guides: Die Umbruchbreite steht in der `flex-basis`, nicht in einer
     Abfrage, die jemand beim naechsten Umbau vergisst. */
.ah-zeile { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.ah-zeile:last-child { margin-bottom: 0; }
.ah-breit  { flex: 1.45 1 480px; min-width: 0; }
.ah-schmal { flex: 1 1 340px; min-width: 0; }

.ah-card {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-m); padding: 22px; height: 100%;
}
.ah-card > h2 {
  margin: 0 0 14px; font-family: var(--font-display); font-size: 18px;
  text-transform: uppercase; color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
/* Listenkarten gehen bis an den Rand — deshalb kein Innenabstand an der
   Karte selbst, sondern an ihren Zeilen. */
.ah-card.liste { padding: 0; overflow: hidden; }
.ah-card.liste > h2 { margin: 0; padding: 16px 22px; border-bottom: 1px solid var(--linie); }

/* ═══════════════ KENNZAHL-KARTE ═════════════════════════════════════
   Die EINZIGE farbige Flaeche der Seite. Sobald eine zweite Karte rot
   wird, verliert die erste ihre Bedeutung. */
.ah-kennzahl {
  display: grid; align-content: start; gap: 10px;
  min-height: 236px; padding: 26px; border-radius: var(--r-m);
  background: linear-gradient(135deg, #E0093C 0%, #8A0525 72%);
  color: #fff;
}
.ah-kennzahl .kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ah-kennzahl .badge {
  padding: 5px 11px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .16); color: #fff;
  font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
}
.ah-kennzahl .notiz { color: #FFC2CE; font: 600 11px/1 var(--font-body);
                      letter-spacing: .14em; text-transform: uppercase; }
.ah-kennzahl .zahl {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display); font-size: 62px; line-height: .9;
  font-variant-numeric: tabular-nums;
}
.ah-kennzahl .einheit { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: #FFC2CE; }
.ah-kennzahl .unter { margin: 0; font-size: 13px; color: #FFC2CE; }
.ah-kennzahl .knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

/* ⚠ Der Balken waechst beim Laden von links — und NIE rueckwaerts. Ein
     Fortschritt, der sich zurueckzieht, liest sich als Verlust. */
.ah-balken { height: 6px; border-radius: var(--r-full); background: rgba(255, 255, 255, .25); overflow: hidden; }
.ah-balken > i {
  display: block; height: 100%; border-radius: var(--r-full); background: #fff;
  width: var(--anteil, 0%);
  animation: ah-grow .9s var(--ah-sachlich) both;
}
@keyframes ah-grow { from { width: 0; } to { width: var(--anteil, 0%); } }

/* ═══════════════ BUTTONS ════════════════════════════════════════════
   Genau ein Primaerbutton pro Karte. Auf der roten Karte dreht er sich
   um: weisse Flaeche, rote Schrift. */
.ah-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--r-s); border: 1px solid transparent;
  font: 400 14px/1 var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  cursor: pointer; text-decoration: none; color: var(--text);
  transition: transform var(--ah-hover) var(--ah-sachlich),
              filter var(--ah-hover) var(--ah-sachlich),
              border-color var(--ah-hover) var(--ah-sachlich);
}
.ah-btn:hover  { transform: translateY(-1px); filter: brightness(1.07); }
/* ⚠ Die kuerzere Dauer im `:active` ist entscheidend — ohne sie fuehlt
     sich der Knopf gummiartig an. */
.ah-btn:active { transform: translateY(0) scale(.97); transition-duration: var(--ah-druck); }
.ah-btn:focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 2px; }
.ah-btn.haupt { background: var(--marke); color: #fff; }
.ah-btn.rand  { border-color: var(--linie-stark); }
.ah-btn.geist { padding: 0; color: var(--marke-hell); border: 0; background: none; }
.ah-kennzahl .ah-btn.haupt { background: #fff; color: #B30730; }
.ah-kennzahl .ah-btn.rand  { background: rgba(255,255,255,.14); color: #fff;
                             box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); border-color: transparent; }

/* ═══════════════ SEGMENTED CONTROL ══════════════════════════════════ */
.ah-seg {
  position: relative; display: flex; padding: 4px; gap: 0;
  background: var(--flaeche-2); border-radius: var(--r-full);
}
.ah-seg > a, .ah-seg > button {
  position: relative; z-index: 1; flex: 1 1 0;
  padding: 7px 12px; border: 0; background: none; cursor: pointer;
  font: 600 12px/1 var(--font-body); color: var(--ah-label); text-align: center;
  text-decoration: none; border-radius: var(--r-full);
  transition: color var(--ah-farbe) var(--ah-sachlich);
}
.ah-seg > .aktiv { color: #fff; }
.ah-seg > .aktiv:not(.js-ind) { background: var(--marke); }
.ah-seg:focus-within > a:focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 2px; }

/* ═══════════════ CHECKLISTE ═════════════════════════════════════════
   ⚠ Der durchgestrichene Text allein reicht nicht als Zustand — die Box
     traegt ihn mit (Guide, Barrierefreiheit). */
.ah-check { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; }
.ah-check + .ah-check { border-top: 1px solid var(--linie); }
.ah-check .box {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: var(--r-s); border: 1px solid var(--linie-stark);
  transition: background var(--ah-farbe) var(--ah-sachlich),
              border-color var(--ah-farbe) var(--ah-sachlich);
}
.ah-check.fertig .box { background: var(--marke); border-color: var(--marke); }
/* ⚠ Der Haken ZEICHNET sich — `stroke-dashoffset` von 26 auf 0. */
.ah-check .box svg { width: 12px; height: 12px; color: #fff; }
.ah-check .box path { stroke-dasharray: 26; stroke-dashoffset: 26; }
.ah-check.fertig .box path { animation: ah-haken .45s var(--ah-sachlich) both; }
@keyframes ah-haken { to { stroke-dashoffset: 0; } }
.ah-check .text { font-size: 14px; color: var(--text); line-height: 1.35; }
.ah-check.fertig .text { color: var(--ah-label); text-decoration: line-through; }
/* ⚠ Zustandsliste statt Aufgabenliste: Ein bestandener Selbsttest ist
     nichts, was man abgehakt hat — die Durchstreichung waere eine falsche
     Aussage. Der Haken bleibt, der Strich geht. */
.ah-check.still.fertig .text { text-decoration: none; color: var(--text-leise); }

/* ═══════════════ AUFGABENKARTEN ═════════════════════════════════════ */
.ah-aufgaben { display: flex; gap: 14px; flex-wrap: wrap; }
.ah-aufgabe {
  flex: 1 1 180px; min-width: 0; min-height: 150px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-radius: var(--r-m);
  background: var(--flaeche-2); border: 1px solid var(--linie);
  text-decoration: none; color: inherit;
}
.ah-aufgabe .ikon {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--r-m); background: var(--flaeche-3); color: var(--text-leise);
}
.ah-aufgabe .ikon .pn-ic { width: 15px; height: 15px; }
.ah-aufgabe .titel { font: 500 14px/1.3 var(--font-body); color: var(--text); }
.ah-aufgabe .ah-btn { margin-top: auto; align-self: flex-start; }

/* ═══════════════ AKTIVITÄTSLISTE ════════════════════════════════════ */
.ah-akt { display: block; }
/* ⚠ `--linie-licht`, nicht `--linie-2`. Letzteres gibt es in den
     Hub-Token NICHT — es ist der Name aus der oeffentlichen Seite. Eine
     Variable, die es nicht gibt, faellt still auf „nichts" zurueck: Die
     Trenner zwischen den Zeilen waren unsichtbar, ohne dass irgendwo ein
     Fehler stand. Gefunden hat es die Pruefung „jeder benutzte Token ist
     definiert". */
.ah-akt > a, .ah-akt > div {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 22px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--linie-licht);
  transition: background var(--ah-farbe) var(--ah-sachlich),
              padding-left var(--ah-farbe) var(--ah-sachlich);
}
/* „Hover schiebt den Inhalt 8 px ein" (Guide). */
.ah-akt > a:hover { background: var(--hover); padding-left: 30px; }
.ah-akt > :last-child { border-bottom: 0; }
.ah-akt .ikon {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: var(--r-m); background: var(--flaeche-2); color: var(--text-leise);
}
.ah-akt .ikon .pn-ic { width: 14px; height: 14px; }
.ah-akt .haupt { flex: 1; min-width: 0; }
.ah-akt .haupt strong { display: block; font: 500 13px/1.35 var(--font-body); color: var(--text); }
.ah-akt .wert { font: 400 15px/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.ah-kartenfuss { padding: 14px 22px; }

/* ═══════════════ LEER- UND FEHLERZUSTAND ════════════════════════════
   „Leerzustand ist kein Fehler. Er ist der normalste Zustand eines gut
   gefuehrten Hubs." Der Text sagt das auch so. */
.ah-leer { display: grid; justify-items: center; gap: 10px; padding: 26px 22px; text-align: center; }
.ah-leer .pn-ic { width: 24px; height: 24px; color: var(--ah-label); }
.ah-leer p { margin: 0; font-size: 14px; color: var(--text-leise); }

/* ═══════════════════════════════════════════════════════════════════════
   ÜBERSETZUNG DES BESTANDS  (Rollout-Schritt 5)

   Die achtzehn Admin-Seiten sprechen eine kleine, feste Sprache:
   `pn-karte` (36×), `pn-knopf` (54×), `pn-leer` (23×), `pn-form-raster`,
   `pn-feld`, `pn-tag`, `pn-zeile`, `pn-reiter`, `pn-zahl`. Hier bekommt
   jeder dieser Bausteine das Aussehen seines `ah-`-Gegenstücks.

   ⚠ **Das ist Übersetzung, keine neue Sprache.** Wer etwas NEUES baut,
     nimmt die `ah-`-Klassen. Dieser Block existiert, damit der Bestand
     sofort richtig aussieht, statt achtzehn Dateien gleichzeitig
     anzufassen — dasselbe Muster wie `05-bruecke.css` für das alte CRM,
     und aus demselben Grund: Ein halb umgestellter Hub ist unangenehmer
     als ein ganz alter.

   ⚠ Der Block gilt dort, wo umgestellt wurde: in der Arbeitsflaeche mit
     Rail UND auf den schmalen Seiten (Login, Passwort). Was weder das
     eine noch das andere ist, bleibt unberuehrt — halb umgestellt ist
     unangenehmer als ganz alt.
   ⚠ Beim ersten Versuch habe ich `.ah-mit-rail` in der GANZEN Datei
     umbenannt, um die schmalen Seiten mitzunehmen — und damit auch die
     Layoutregeln erwischt, die diese Klasse aus PHP bekommen. Der Name
     steht fuer „hat eine Rail", nicht fuer „ist umgestellt".
   ═════════════════════════════════════════════════════════════════════ */

:is(.ah-mit-rail, .pn-anmeldung) .pn-karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-m); padding: 22px; margin-bottom: 18px;
  box-shadow: none;
}
:is(.ah-mit-rail, .pn-anmeldung) .pn-karte > h2,
:is(.ah-mit-rail, .pn-anmeldung) .pn-kartenkopf > h2 {
  margin: 0 0 14px; font-family: var(--font-display); font-size: 18px;
  text-transform: uppercase; letter-spacing: .01em; color: var(--text);
  display: flex; align-items: center; gap: 10px;
}

/* ── Buttons ─────────────────────────────────────────────────────────
   Genau ein Primaerbutton pro Karte; der Rest ist Rahmen oder Geist. */
:is(.ah-mit-rail, .pn-anmeldung) .pn-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--r-s);
  border: 1px solid var(--linie-stark); background: transparent; color: var(--text);
  font: 400 14px/1 var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  box-shadow: none;
  transition: transform var(--ah-hover) var(--ah-sachlich),
              filter var(--ah-hover) var(--ah-sachlich),
              border-color var(--ah-hover) var(--ah-sachlich);
}
:is(.ah-mit-rail, .pn-anmeldung) .pn-knopf:hover  { transform: translateY(-1px); filter: brightness(1.07); }
/* ⚠ Die kuerzere Dauer im `:active` ist entscheidend — ohne sie fuehlt
     sich der Knopf gummiartig an (Guide). */
:is(.ah-mit-rail, .pn-anmeldung) .pn-knopf:active { transform: translateY(0) scale(.97); transition-duration: var(--ah-druck); }
:is(.ah-mit-rail, .pn-anmeldung) .pn-knopf.haupt  { background: var(--marke); border-color: var(--marke); color: #fff; }
:is(.ah-mit-rail, .pn-anmeldung) .pn-knopf.leise  { border-color: transparent; color: var(--ah-label); }
:is(.ah-mit-rail, .pn-anmeldung) .pn-knopf:focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 2px; }

/* ── Zeilenlisten ────────────────────────────────────────────────────
   „Hover schiebt den Inhalt 8 px ein" — derselbe Griff wie bei der
   Aktivitaetszeile, damit eine Liste ueberall gleich reagiert. */
:is(.ah-mit-rail, .pn-anmeldung) .pn-zeilen { display: block; }
:is(.ah-mit-rail, .pn-anmeldung) .pn-zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--linie-licht);
  transition: background var(--ah-farbe) var(--ah-sachlich),
              padding-left var(--ah-farbe) var(--ah-sachlich);
}
:is(.ah-mit-rail, .pn-anmeldung) .pn-zeile:last-child { border-bottom: 0; }
:is(.ah-mit-rail, .pn-anmeldung) .pn-zeile:hover { background: var(--hover); padding-left: 8px; }
:is(.ah-mit-rail, .pn-anmeldung) .pn-zeile .haupt { flex: 1; min-width: 0; }
:is(.ah-mit-rail, .pn-anmeldung) .pn-zeile .neben {
  display: block; margin-top: 3px;
  font: 600 11px/1.2 var(--font-body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ah-label);
}

/* ── Statuschips ─────────────────────────────────────────────────────
   Hoechstens drei Statusfarben: offen/wartend, erledigt, dringend. */
:is(.ah-mit-rail, .pn-anmeldung) .pn-tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--flaeche-2); color: var(--text-leise);
  font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
}
:is(.ah-mit-rail, .pn-anmeldung) .pn-tag.akzent { background: var(--marke); color: #fff; }

/* ── Formulare ───────────────────────────────────────────────────────
   Feld 40 px, Label DARUEBER in Label-Schrift — nie als Platzhalter im
   Feld. Ein Platzhalter verschwindet beim Tippen, und dann weiss niemand
   mehr, was in dem Feld stehen soll. */
:is(.ah-mit-rail, .pn-anmeldung) .pn-form-raster { display: grid; gap: 14px; max-width: 640px; }
@media (min-width: 720px) { :is(.ah-mit-rail, .pn-anmeldung) .pn-form-raster { grid-template-columns: 1fr 1fr; max-width: 820px; } }
:is(.ah-mit-rail, .pn-anmeldung) .pn-form-raster .weit,
:is(.ah-mit-rail, .pn-anmeldung) .pn-form-raster .voll { grid-column: 1 / -1; }
:is(.ah-mit-rail, .pn-anmeldung) .pn-form-raster > label,
:is(.ah-mit-rail, .pn-anmeldung) .pn-feld {
  display: grid; gap: 6px;
  font: 600 11px/1.2 var(--font-body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ah-label);
}
:is(.ah-mit-rail, .pn-anmeldung) .pn-form-raster > label > small,
:is(.ah-mit-rail, .pn-anmeldung) .pn-feld > small { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
:is(.ah-mit-rail, .pn-anmeldung) :is(.pn-form-raster, .pn-feld) :is(input, select, textarea):not([type=checkbox]):not([type=radio]) {
  width: 100%; min-height: 40px; padding: 10px 12px;
  border-radius: var(--r-s); border: 1px solid var(--linie-stark);
  background: var(--flaeche); color: var(--text);
  font: 400 14px/1.4 var(--font-body); text-transform: none; letter-spacing: 0;
  transition: border-color var(--ah-hover) var(--ah-sachlich),
              box-shadow var(--ah-hover) var(--ah-sachlich);
}
:is(.ah-mit-rail, .pn-anmeldung) :is(.pn-form-raster, .pn-feld) :is(input, select, textarea):focus {
  outline: none; border-color: var(--marke);
  box-shadow: 0 0 0 3px rgba(224, 9, 60, .18);
}
/* Ein Haken bleibt ein Haken — er darf nicht die Feldbreite erben. */
:is(.ah-mit-rail, .pn-anmeldung) .pn-form-raster label.schalter,
:is(.ah-mit-rail, .pn-anmeldung) .pn-feld.schalter { display: flex; align-items: center; gap: 10px; }
:is(.ah-mit-rail, .pn-anmeldung) .pn-form-raster :is([type=checkbox], [type=radio]) { width: auto; min-height: 0; }

/* ── Hinweise und Meldungen ──────────────────────────────────────────
   ⚠ Kein Ampelsystem: Rot ist bei uns die Markenfarbe. Ein Fehler bekommt
     einen roten RAHMEN und roten Text, keine rote Flaeche; ein Erfolg
     bekommt gar keine Farbe, nur einen Haken (Guide). */
:is(.ah-mit-rail, .pn-anmeldung) .pn-hinweis { margin: -4px 0 12px; font-size: 12px; color: var(--ah-label); }
:is(.ah-mit-rail, .pn-anmeldung) .pn-meldung {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r-s); margin-bottom: 18px;
  font-size: 14px; border: 1px solid var(--linie);
  background: var(--flaeche-2); color: var(--text);
}
:is(.ah-mit-rail, .pn-anmeldung) .pn-meldung.err { border-color: var(--marke); color: var(--marke-hell); background: transparent; }

/* ── Leerzustand ─────────────────────────────────────────────────────
   „Leerzustand ist kein Fehler." */
:is(.ah-mit-rail, .pn-anmeldung) .pn-leer, :is(.ah-mit-rail, .pn-anmeldung) .pn-nichts {
  display: grid; justify-items: center; gap: 10px;
  padding: 26px 22px; text-align: center;
  background: none; border: 0; color: var(--text-leise); font-size: 14px;
}
:is(.ah-mit-rail, .pn-anmeldung) :is(.pn-leer, .pn-nichts) .pn-ic { width: 24px; height: 24px; color: var(--ah-label); }
:is(.ah-mit-rail, .pn-anmeldung) :is(.pn-leer, .pn-nichts) h3 {
  margin: 0; font-family: var(--font-display); font-size: 18px; text-transform: uppercase;
}

/* ── Reiter innerhalb einer Seite ────────────────────────────────────
   Dieselbe Pille wie oben in der Kopfleiste, nur kleiner. So heisst
   „umschalten" im ganzen Hub dasselbe. */
:is(.ah-mit-rail, .pn-anmeldung) .pn-reiter {
  display: inline-flex; gap: 0; padding: 4px; margin-bottom: 18px;
  background: var(--flaeche-2); border-radius: var(--r-full); border: 0;
}
:is(.ah-mit-rail, .pn-anmeldung) .pn-reiter > a {
  padding: 7px 14px; border-radius: var(--r-full); border: 0;
  font: 600 12px/1 var(--font-body); color: var(--ah-label); text-decoration: none;
  transition: color var(--ah-farbe) var(--ah-sachlich),
              background var(--ah-farbe) var(--ah-sachlich);
}
:is(.ah-mit-rail, .pn-anmeldung) .pn-reiter > a:hover { color: var(--text); }
:is(.ah-mit-rail, .pn-anmeldung) .pn-reiter > a.aktiv { background: var(--marke); color: #fff; }

/* ── Zahlenreihe ─────────────────────────────────────────────────────
   ⚠ Sie bleibt NEUTRAL. Die eine farbige Flaeche der Seite ist die
     Kennzahl-Karte; eine zweite nimmt ihr die Bedeutung. */
:is(.ah-mit-rail, .pn-anmeldung) .pn-zahlen { display: flex; gap: 14px; flex-wrap: wrap; }
:is(.ah-mit-rail, .pn-anmeldung) .pn-zahl {
  flex: 1 1 150px; display: grid; gap: 4px; padding: 16px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-m); text-decoration: none; color: inherit;
  transition: border-color var(--ah-farbe) var(--ah-sachlich);
}
:is(.ah-mit-rail, .pn-anmeldung) .pn-zahl:hover { border-color: var(--linie-stark); }
:is(.ah-mit-rail, .pn-anmeldung) .pn-zahl .wert {
  font: 400 32px/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums;
}
:is(.ah-mit-rail, .pn-anmeldung) .pn-zahl .was {
  font: 600 11px/1.2 var(--font-body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ah-label);
}

/* ═══════════════════════════════════════════════════════════════════════
   DIE SCHMALEN SEITEN  (Rollout-Schritt 6)
   Anmelden, Passwort vergessen, zuruecksetzen, aendern, Registrieren.

   Keine Rail, keine Kopfleiste — eine zentrierte Karte auf 420 px. Wer
   hier ist, hat genau eine Aufgabe, und alles andere waere Ablenkung.

   ⚠ Felder und Buttons sind DIESELBEN wie im Rest (Guide). Der
     Uebersetzungsblock oben gilt deshalb auch hier; nur der Rahmen ist
     ein anderer.

   ⚠ Alle drei Apps teilen sich diesen Login: `crossfire.painnation.de`
     ist nur eine Weiterleitung, `content.painnation.de` hat keine eigene
     Anmeldung. Was hier steht, gilt also fuer alle drei.
   ═════════════════════════════════════════════════════════════════════ */
/* ⚠ `.pn-hub` davor: `04-besonderes.css` setzt dieselben Selektoren in
     derselben Ebene, und bei gleicher Spezifitaet gewinnt nicht die
     spaetere DATEI, sondern die spaetere REGEL — gemessen behielt der
     Bestand 26 px Ueberschrift und 27 rem Kartenbreite. Ein Klassenname
     mehr entscheidet es eindeutig. */
.pn-hub .pn-anmeldung {
  display: grid; align-content: center; justify-items: center;
  min-height: 100vh; padding: 26px 16px 64px; gap: 0;
  background: var(--bg);
}
.pn-hub .pn-anmeldung .karte {
  display: grid; gap: 16px; width: 100%; max-width: 420px;
  padding: 26px; border-radius: var(--r-m);
  background: var(--flaeche); border: 1px solid var(--linie); box-shadow: none;
}
.pn-hub .pn-anmeldung .karte.breit { max-width: 640px; }

/* ⚠ KEIN rotes Quadrat um das Zeichen. Der Guide nennt eins — aber unsere
     Marke IST ein Wappen in Rot, und in einem roten Quadrat steht Rot auf
     Rot. Gemessen am Zweck des Guides (man soll sehen, wohin man kommt)
     ist das Zeichen allein die bessere Antwort. */
.pn-hub .pn-anmeldung .marke {
  justify-self: center; line-height: 0; background: none; padding: 0;
}
.pn-hub .pn-anmeldung .marke img { width: 44px; height: 44px; }
.pn-hub .pn-anmeldung h1 {
  margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1;
  text-transform: uppercase; text-align: center; color: var(--text);
}
.pn-hub .pn-anmeldung > .karte > p { margin: 0; color: var(--text-leise); font-size: 14px; text-align: center; }
.pn-hub .pn-anmeldung form { display: grid; gap: 14px; }
.pn-hub .pn-anmeldung form .pn-knopf { width: 100%; justify-content: center; }

/* ⚠ Der Theme-Umschalter sitzt in der ECKE, nicht in der Karte: Er gehoert
     zum Fenster, nicht zur Aufgabe. */
.pn-anmelde-theme { position: fixed; top: 16px; right: 16px; z-index: 5; }

.pn-hub .pn-anmelde-fuss {
  margin: 18px 0 0; text-align: center;
  font: 600 11px/1.6 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ah-label);
}
.pn-hub .pn-anmelde-fuss a { color: inherit; text-decoration: none; }
.pn-hub .pn-anmelde-fuss a:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════
   CAPTAIN-PORTAL  (Rollout-Schritt 7)

   Der Guide gibt dem Portal dieselbe Kennzahl-Karte wie dem Adminhub —
   nur zeigt sie hier kein Zaehlergebnis, sondern das NAECHSTE MATCH:
   Gegner, Datum, Uhrzeit, Division als Badge, ein Primaerbutton.

   ⚠ Die Buehne (`.pn-cfbuehne`) gab es schon und rechnet richtig. Sie
     bekommt hier das Aussehen der Kennzahl-Karte, statt dass ich die Seite
     neu schreibe — dieselbe Entscheidung wie in Schritt 5.

   ⚠ **Die einzige Stelle im ganzen Hub, an der die Kennzahl-Karte ihre
     Farbe verliert:** Steht kein Match an, wird sie neutral. Eine rote
     Flaeche, die „nichts liegt an" sagt, ruft nach Aufmerksamkeit fuer
     eine Nichtmeldung. */
.pn-hub .pn-cfbuehne {
  display: grid; gap: 10px; align-content: start;
  min-height: 236px; padding: 26px; margin-bottom: 18px;
  border-radius: var(--r-m); border: 0;
  background: linear-gradient(135deg, #E0093C 0%, #8A0525 72%);
  color: #fff;
}
.pn-hub .pn-cfbuehne .kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pn-hub .pn-cfbuehne .label {
  padding: 5px 11px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .16); color: #fff;
  font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
}
.pn-hub .pn-cfbuehne .countdown {
  color: #FFC2CE; font: 600 11px/1 var(--font-body);
  letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.pn-hub .pn-cfbuehne .paarung {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-display); font-size: clamp(26px, 4vw, 46px); line-height: .95;
  text-transform: uppercase; color: #fff;
}
.pn-hub .pn-cfbuehne .vs { color: #FFC2CE; font-size: .5em; }
.pn-hub .pn-cfbuehne :is(.stand, .cast, .neben) { color: #FFC2CE; font-size: 13px; }
.pn-hub .pn-cfbuehne .pn-knopf {
  background: #fff; border-color: #fff; color: #B30730;
}
.pn-hub .pn-cfbuehne .pn-knopf:not(.haupt) {
  background: rgba(255,255,255,.14); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); border-color: transparent;
}
/* Kein offenes Match — neutral, nicht rot. */
.pn-hub .pn-cfbuehne.leer {
  background: var(--flaeche); border: 1px solid var(--linie); color: var(--text);
  min-height: 0; place-items: center; text-align: center;
}
.pn-hub .pn-cfbuehne.leer :is(.label, .countdown, .stand, .cast, .neben) {
  background: none; color: var(--ah-label); padding: 0;
}

/* Die Kachelreihe des Portals wird zur Aufgabenreihe des Guides. */
.pn-hub .pn-kacheln { display: flex; gap: 14px; flex-wrap: wrap; }
.pn-hub .pn-kachel {
  flex: 1 1 170px; min-width: 0; min-height: 110px;
  display: flex; flex-direction: column; gap: 8px; justify-content: space-between;
  padding: 16px; border-radius: var(--r-m);
  background: var(--flaeche); border: 1px solid var(--linie);
  text-decoration: none; color: var(--text); box-shadow: none;
  transition: border-color var(--ah-farbe) var(--ah-sachlich),
              background var(--ah-farbe) var(--ah-sachlich);
}
.pn-hub .pn-kachel:hover { border-color: var(--linie-stark); background: var(--flaeche-2); }
.pn-hub .pn-kachel:focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 2px; }
.pn-hub .pn-kachel .pn-ic { width: 18px; height: 18px; color: var(--ah-label); }

/* ═══════════════════════════════════════════════════════════════════════
   CONTENT-PLATTFORM  (Rollout-Schritt 8)

   ⚠ Die Hub-Seiten der Plattform (Spiele, Runde, Regie) sprechen dieselbe
     Sprache wie der Adminhub — `pn-karte`, `pn-knopf`, `pn-feld`,
     `pn-form-raster`, `pn-meldung`. Sie sind damit bereits durch die
     Uebersetzung aus Schritt 5 abgedeckt; hier steht nur, was der Guide
     EIGENS fuer sie nennt.

   ⚠ „Hover hebt die Karte 2 px — das ist die einzige Hover-Hebung im
     ganzen Hub-System und nur hier erlaubt." Weil es ums Spielen geht. */
.pn-hub .pn-spielraster { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .pn-hub .pn-spielraster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pn-hub .pn-spielraster { grid-template-columns: repeat(3, 1fr); } }
.pn-hub .pn-spielkarte {
  display: grid; gap: 8px; align-content: start; padding: 18px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-m); text-decoration: none; color: inherit;
  transition: transform var(--ah-hover) var(--ah-sachlich),
              border-color var(--ah-hover) var(--ah-sachlich);
}
.pn-hub .pn-spielkarte:hover { transform: translateY(-2px); border-color: var(--linie-stark); }
.pn-hub .pn-spielkarte:focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 2px; }
.pn-hub .pn-spielkarte .ikon {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--r-m); background: var(--flaeche-2); color: var(--ah-label);
}
.pn-hub .pn-spielkarte h3 {
  margin: 0; font-family: var(--font-display); font-size: 18px; text-transform: uppercase;
}

/* ═══════════════ RESPONSIVE ═════════════════════════════════════════
   Unter 768 px wandert die Rail nach unten und wird eine feste Leiste.
   Die Arbeitsflaeche bekommt unten Platz, damit nichts verdeckt wird. */
@media (max-width: 1023px) {
  .ah-tabs { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .ah-tabs::-webkit-scrollbar { display: none; }
  .ah-suche input { width: 150px; }
}
@media (max-width: 767px) {
  .ah-rail {
    inset: auto 0 0 0; width: auto; height: 60px;
    flex-direction: row; justify-content: space-around;
    padding: 0 8px; border-right: 0; border-top: 1px solid var(--linie);
  }
  .ah-rail-logo, .ah-rail-fuss { display: none; }
  /* 44 × 44 ist die Mindestgroesse, unter der man danebentippt. */
  .ah-rail-icon { width: 44px; height: 44px; }
  .ah-kopf { margin-left: 0; padding: 0 16px; flex-wrap: wrap; min-height: 56px; }
  .ah-tabs { order: 10; flex-basis: 100%; margin-bottom: 8px; }
  .ah-suche { display: none; }
  .ah-konto-text { display: none; }
  .pn-hub .pn-rumpf.ah-mit-rail { margin-left: 0; }
  .pn-hub .pn-rumpf.ah-mit-rail > .pn-inhalt { padding: 18px 16px 76px; }
}

/* ═══════════════ ABSCHALTER ═════════════════════════════════════════
   ⚠ Danach muessen alle Zustaende weiterhin sichtbar sein: Der Indikator
     steht an der richtigen Stelle, der Punkt ist da, die Flaeche ist da.
     Abgeschaltet wird der WEG, nicht das Ergebnis. */
@media (prefers-reduced-motion: reduce) {
  .ah-ind, .ah-tabs.js .ah-ind, .ah-tab, .ah-rail-icon,
  .ah-werkzeug, .ah-konto > button { transition: none !important; }
  .ah-punkt { animation: none !important; }
  .pn-hub .pn-rumpf.ah-mit-rail > .pn-inhalt {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

}  /* @layer besonderes */