/* ═══════════════════════════════════════════════════════════════════════
   01 — BASIS
   Reset, Grundtypografie, Fokus, Bewegung. Gilt für alles und kennt keine
   einzige Klasse aus dem Baukasten.

   Alles hier steht in der Ebene `basis` und wird deshalb von jedem
   Baustein geschlagen — ohne dass ein Baustein dafür spezifischer sein
   muss. Genau das war vorher die Fehlerquelle.
   ═════════════════════════════════════════════════════════════════════ */

@layer basis {

*, *::before, *::after { box-sizing: border-box; }

html.pn-hub { color-scheme: dark; }

.pn-hub body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pn-hub h1, .pn-hub h2, .pn-hub h3, .pn-hub h4 {
  margin: 0;
  line-height: 1.25;
  text-wrap: balance;
}
.pn-hub p { margin: 0; }
.pn-hub ul, .pn-hub ol { margin: 0; padding: 0; }
.pn-hub img, .pn-hub svg { display: block; max-width: 100%; }
.pn-hub a { color: inherit; }
.pn-hub hr { border: 0; border-top: 1px solid var(--linie); margin: var(--s-5) 0; }

/* Zahlen stehen untereinander — überall, ohne dass es jemand anfordern muss. */
.pn-hub table, .pn-hub time, .pn-hub .zahl, .pn-hub .wert {
  font-variant-numeric: tabular-nums;
}

/* ── Fokus ────────────────────────────────────────────────────────────
   Sichtbar, und zwar deutlich. Wer mit der Tastatur arbeitet, muss sehen,
   wo er ist — auf einem dunklen Grund reicht ein dünner Ring nicht. */
.pn-hub :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-s);
}
.pn-hub :focus:not(:focus-visible) { outline: none; }

/* ── Sprungmarke ─────────────────────────────────────────────────────── */
.pn-hub .pn-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--marke); color: #fff; text-decoration: none;
  font-size: var(--t-klein); font-weight: 600;
}
.pn-hub .pn-skip:focus { left: 0; }

/* ── Bewegung ────────────────────────────────────────────────────────
   Wer sie abstellt, meint es. Dann fällt sie vollständig weg, nicht
   „größtenteils". */
@media (prefers-reduced-motion: reduce) {
  .pn-hub *, .pn-hub *::before, .pn-hub *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Auswahl ─────────────────────────────────────────────────────────── */
.pn-hub ::selection { background: var(--marke); color: #fff; }

/* ── Bildlaufleisten ──────────────────────────────────────────────────
   Die hellen Standard-Leisten reissen auf dunklem Grund Löcher. */
.pn-hub * { scrollbar-width: thin; scrollbar-color: var(--flaeche-3) transparent; }
.pn-hub ::-webkit-scrollbar { width: 10px; height: 10px; }
.pn-hub ::-webkit-scrollbar-track { background: transparent; }
.pn-hub ::-webkit-scrollbar-thumb {
  background: var(--flaeche-3); border-radius: var(--r-full);
  border: 3px solid transparent; background-clip: content-box;
}
.pn-hub ::-webkit-scrollbar-thumb:hover { background: var(--n-60); background-clip: content-box; }

}