/* =============================================================================
   Wiki-Portal — Stylesheet
   Token-Spine: Primitive (OKLCH) -> Semantisch -> Komponente.
   Kein Runtime-Compiler, keine CDN — eine statische Datei, dauerhaft cachebar.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Fonts — lokal ausgeliefert (siehe Dockerfile)
   IBM Plex Sans = „menschliche" Ebene (Prosa, UI-Labels)
   IBM Plex Mono = „Maschinen"-Ebene (Pfade, Ports, Daten, Slugs, Code)
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Sans var";
  src: url("/static/fonts/plex-sans-var.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. Primitive Tokens
   --------------------------------------------------------------------------- */
:root {
  /* Neutral-Rampe — Hauch von Indigo (Hue 275), damit Rahmen und Schatten
     farbtongleich zum Akzent sitzen. Chroma bleibt <= .016: nie „blau". */
  --n-50:  oklch(0.985 0.003 275);
  --n-75:  oklch(0.975 0.004 275);
  --n-100: oklch(0.965 0.005 275);
  --n-150: oklch(0.945 0.006 275);
  --n-200: oklch(0.917 0.008 275);
  --n-300: oklch(0.856 0.010 275);
  --n-350: oklch(0.775 0.012 275);
  --n-400: oklch(0.706 0.014 275);
  --n-450: oklch(0.640 0.015 275);
  --n-500: oklch(0.572 0.016 275);
  --n-600: oklch(0.468 0.016 275);
  --n-700: oklch(0.383 0.016 275);
  --n-800: oklch(0.284 0.015 275);
  --n-850: oklch(0.235 0.014 275);
  --n-900: oklch(0.196 0.013 275);
  --n-950: oklch(0.152 0.012 275);
  --n-990: oklch(0.118 0.010 275);

  /* Akzent — Indigo, die gesetzte netralax-Farbe (#4f46e5 == --a-600),
     nachgezogen als saubere OKLCH-Rampe statt geliehener Utility-Stufen. */
  --a-50:  oklch(0.964 0.018 277);
  --a-100: oklch(0.932 0.038 277);
  --a-200: oklch(0.872 0.072 277);
  --a-300: oklch(0.788 0.118 277);
  --a-400: oklch(0.676 0.182 277);
  --a-500: oklch(0.588 0.234 277);
  --a-600: oklch(0.511 0.262 277);
  --a-700: oklch(0.452 0.240 277);
  --a-800: oklch(0.388 0.196 277);
  --a-900: oklch(0.322 0.148 277);
  --a-950: oklch(0.248 0.108 277);

  /* Funktionale Farben — ausschliesslich für Status (Lint, Audit, Badges). */
  --ok-fg:     oklch(0.480 0.140 150);
  --ok-bg:     oklch(0.955 0.035 150);
  --ok-border: oklch(0.860 0.070 150);
  --warn-fg:     oklch(0.510 0.130 75);
  --warn-bg:     oklch(0.960 0.045 85);
  --warn-border: oklch(0.860 0.080 80);
  --dang-fg:     oklch(0.510 0.180 25);
  --dang-bg:     oklch(0.958 0.030 25);
  --dang-border: oklch(0.868 0.070 25);
  --info-fg:     oklch(0.500 0.130 240);
  --info-bg:     oklch(0.955 0.032 240);
  --info-border: oklch(0.860 0.065 240);

  /* Typografie */
  --font-sans: "IBM Plex Sans var", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono",
               Menlo, Consolas, monospace;

  --t-2xs:  0.6875rem;  /* 11px — Mono-Eyebrows, Sektions-Slugs */
  --t-xs:   0.75rem;    /* 12px — Meta, Badges */
  --t-sm:   0.8125rem;  /* 13px — Sidebar, Tabellenzellen, Code */
  --t-md:   0.875rem;   /* 14px — sekundäre UI */
  --t-base: 1rem;       /* 16px — Fliesstext */
  --t-lg:   1.1875rem;  /* 19px — h3 */
  --t-xl:   1.4375rem;  /* 23px — h2 */
  --t-2xl:  1.875rem;   /* 30px — h1 */
  --t-3xl:  2.25rem;    /* 36px — Login */

  /* Abstände — 4px-Basis */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;    --s-20: 5rem;

  /* Radien — bewusst gestaffelt, nicht überall gleich */
  --r-xs: 3px;    /* Badges, Inline-Code */
  --r-sm: 5px;    /* Inputs, kleine Buttons */
  --r-md: 8px;    /* Karten, Codeblöcke */
  --r-lg: 12px;   /* Panels, Palette */
  --r-full: 999px;

  /* Layout-Masse */
  --header-h: 3.25rem;
  --sidebar-w: 16.5rem;
  --toc-w: 14rem;
  --measure: 74ch;

  /* Motion — Referenzwerkzeug: Tempo ist das Feature. */
  --dur-fast: 110ms;
  --dur:      170ms;
  --dur-slow: 240ms;
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Semantische Tokens: Hell --- */
  color-scheme: light;
  --bg-canvas:  var(--n-75);
  --bg-surface: #fff;
  --bg-raised:  #fff;
  --bg-sunken:  var(--n-100);
  --bg-hover:   var(--n-100);
  --bg-active:  var(--n-150);
  --bg-chrome:  color-mix(in oklab, #fff 82%, var(--n-100));

  /* Tertiär trägt 11–12px-Text (Meta, Pfade, Labels) — dafür reicht ein
     hellgrauer Ton nicht. Die Stufen sind entsprechend dunkler gewählt. */
  --fg-primary:   var(--n-900);
  --fg-secondary: var(--n-700);
  --fg-tertiary:  var(--n-600);
  --fg-on-accent: #fff;

  --border-subtle:  var(--n-150);
  --border-default: var(--n-200);
  --border-strong:  var(--n-300);

  --accent:       var(--a-600);
  --accent-hover: var(--a-700);
  --accent-text:  var(--a-700);
  --accent-tint:  color-mix(in oklab, var(--a-600) 8%, transparent);
  --accent-tint-strong: color-mix(in oklab, var(--a-600) 14%, transparent);

  --code-bg:     var(--n-950);
  --code-fg:     var(--n-150);
  --inline-code-bg: color-mix(in oklab, var(--n-200) 55%, transparent);
  --inline-code-fg: var(--n-800);

  /* Schatten — Umgebungslicht + gerichtetes Licht, farbtongleich */
  --sh-sm: 0 1px 1px oklch(0.2 0.02 275 / 0.04),
           0 1px 2px -1px oklch(0.2 0.02 275 / 0.06);
  --sh-md: 0 1px 2px oklch(0.2 0.02 275 / 0.04),
           0 4px 10px -3px oklch(0.2 0.02 275 / 0.10);
  --sh-lg: 0 2px 4px oklch(0.2 0.02 275 / 0.05),
           0 16px 40px -8px oklch(0.2 0.02 275 / 0.20);
}

/* --- Semantische Tokens: Dunkel (System-Präferenz) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-canvas:  var(--n-990);
    --bg-surface: var(--n-950);
    --bg-raised:  var(--n-900);
    --bg-sunken:  oklch(0.098 0.010 275);
    --bg-hover:   var(--n-900);
    --bg-active:  var(--n-850);
    --bg-chrome:  color-mix(in oklab, var(--n-950) 88%, var(--n-900));

    --fg-primary:   var(--n-150);
    --fg-secondary: var(--n-350);
    --fg-tertiary:  var(--n-450);
    --fg-on-accent: #fff;

    --border-subtle:  var(--n-900);
    --border-default: var(--n-850);
    --border-strong:  var(--n-800);

    --accent:       var(--a-500);
    --accent-hover: var(--a-400);
    --accent-text:  var(--a-300);
    --accent-tint:  color-mix(in oklab, var(--a-400) 14%, transparent);
    --accent-tint-strong: color-mix(in oklab, var(--a-400) 22%, transparent);

    --code-bg: oklch(0.098 0.010 275);
    --code-fg: var(--n-300);
    --inline-code-bg: color-mix(in oklab, var(--n-800) 60%, transparent);
    --inline-code-fg: var(--n-200);

    --ok-fg:     oklch(0.800 0.130 150);
    --ok-bg:     oklch(0.300 0.060 150 / 0.40);
    --ok-border: oklch(0.420 0.080 150);
    --warn-fg:     oklch(0.820 0.120 82);
    --warn-bg:     oklch(0.320 0.055 75 / 0.40);
    --warn-border: oklch(0.440 0.075 78);
    --dang-fg:     oklch(0.760 0.140 25);
    --dang-bg:     oklch(0.310 0.070 25 / 0.40);
    --dang-border: oklch(0.430 0.090 25);
    --info-fg:     oklch(0.800 0.110 240);
    --info-bg:     oklch(0.310 0.055 240 / 0.40);
    --info-border: oklch(0.430 0.075 240);

    --sh-sm: 0 1px 1px oklch(0 0 0 / 0.30), 0 1px 2px -1px oklch(0 0 0 / 0.40);
    --sh-md: 0 1px 2px oklch(0 0 0 / 0.30), 0 4px 12px -3px oklch(0 0 0 / 0.50);
    --sh-lg: 0 2px 6px oklch(0 0 0 / 0.35), 0 20px 48px -10px oklch(0 0 0 / 0.65);
  }
}

/* --- Semantische Tokens: Dunkel (explizit gewählt) --- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas:  var(--n-990);
  --bg-surface: var(--n-950);
  --bg-raised:  var(--n-900);
  --bg-sunken:  oklch(0.098 0.010 275);
  --bg-hover:   var(--n-900);
  --bg-active:  var(--n-850);
  --bg-chrome:  color-mix(in oklab, var(--n-950) 88%, var(--n-900));

  --fg-primary:   var(--n-150);
  --fg-secondary: var(--n-350);
  --fg-tertiary:  var(--n-450);
  --fg-on-accent: #fff;

  --border-subtle:  var(--n-900);
  --border-default: var(--n-850);
  --border-strong:  var(--n-800);

  --accent:       var(--a-500);
  --accent-hover: var(--a-400);
  --accent-text:  var(--a-300);
  --accent-tint:  color-mix(in oklab, var(--a-400) 14%, transparent);
  --accent-tint-strong: color-mix(in oklab, var(--a-400) 22%, transparent);

  --code-bg: oklch(0.098 0.010 275);
  --code-fg: var(--n-300);
  --inline-code-bg: color-mix(in oklab, var(--n-800) 60%, transparent);
  --inline-code-fg: var(--n-200);

  --ok-fg:     oklch(0.800 0.130 150);
  --ok-bg:     oklch(0.300 0.060 150 / 0.40);
  --ok-border: oklch(0.420 0.080 150);
  --warn-fg:     oklch(0.820 0.120 82);
  --warn-bg:     oklch(0.320 0.055 75 / 0.40);
  --warn-border: oklch(0.440 0.075 78);
  --dang-fg:     oklch(0.760 0.140 25);
  --dang-bg:     oklch(0.310 0.070 25 / 0.40);
  --dang-border: oklch(0.430 0.090 25);
  --info-fg:     oklch(0.800 0.110 240);
  --info-bg:     oklch(0.310 0.055 240 / 0.40);
  --info-border: oklch(0.430 0.075 240);

  --sh-sm: 0 1px 1px oklch(0 0 0 / 0.30), 0 1px 2px -1px oklch(0 0 0 / 0.40);
  --sh-md: 0 1px 2px oklch(0 0 0 / 0.30), 0 4px 12px -3px oklch(0 0 0 / 0.50);
  --sh-lg: 0 2px 6px oklch(0 0 0 / 0.35), 0 20px 48px -10px oklch(0 0 0 / 0.65);
}

/* ---------------------------------------------------------------------------
   3. Reset & Basis
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--fg-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

img, svg { display: block; max-width: 100%; }
svg { flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Ein Fokus-Ring für alles — Tastaturnutzung ist nie unsichtbar. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent-tint-strong); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: var(--s-2); left: var(--s-2); z-index: 200;
  transform: translateY(-200%);
  background: var(--accent); color: var(--fg-on-accent);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-sm);
  font-size: var(--t-md); font-weight: 500; box-shadow: var(--sh-md);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ---------------------------------------------------------------------------
   4. Header
   --------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-4);
  background: color-mix(in oklab, var(--bg-chrome) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border-default);
}

.brand {
  display: flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--t-md);
  letter-spacing: -0.011em; white-space: nowrap;
  padding: var(--s-1) var(--s-1);
  border-radius: var(--r-sm);
}
.brand:hover { color: var(--accent-text); }
.brand__mark { color: var(--accent); }
.brand__sub {
  font-family: var(--font-mono); font-size: var(--t-2xs);
  color: var(--fg-tertiary); font-weight: 400;
  letter-spacing: 0; padding-top: 1px;
}

.header__spacer { flex: 1; }

/* Suche-Trigger — öffnet die Befehlspalette */
.search-trigger {
  display: flex; align-items: center; gap: var(--s-2);
  min-width: 13rem; max-width: 22rem; flex: 1;
  height: 2rem; padding: 0 var(--s-2) 0 var(--s-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  color: var(--fg-tertiary);
  font-size: var(--t-md);
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.search-trigger:hover {
  border-color: var(--border-strong);
  color: var(--fg-secondary);
}
.search-trigger__label { flex: 1; text-align: left; }
.kbd {
  font-family: var(--font-mono); font-size: var(--t-2xs);
  line-height: 1; padding: 0.25rem 0.35rem;
  border: 1px solid var(--border-default);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  background: var(--bg-sunken); color: var(--fg-tertiary);
  white-space: nowrap;
}

.header__actions { display: flex; align-items: center; gap: var(--s-1); }

.icon-btn {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: var(--r-sm);
  color: var(--fg-secondary);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--fg-primary); }

.user-chip {
  display: flex; align-items: center; gap: var(--s-2);
  height: 2rem; padding: 0 var(--s-2) 0 var(--s-1);
  border-radius: var(--r-sm);
  font-size: var(--t-md); color: var(--fg-secondary);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.user-chip:hover { background: var(--bg-hover); color: var(--fg-primary); }
.user-chip__avatar {
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: var(--r-full);
  background: var(--accent-tint); color: var(--accent-text);
  font-size: var(--t-2xs); font-weight: 600; text-transform: uppercase;
}
.user-chip__name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }

.theme-toggle__icon { display: none; }
:root:not([data-theme]) .theme-toggle__icon--system,
:root[data-theme="system"] .theme-toggle__icon--system,
:root[data-theme="light"] .theme-toggle__icon--light,
:root[data-theme="dark"] .theme-toggle__icon--dark { display: block; }

.nav-toggle { display: none; }

/* ---------------------------------------------------------------------------
   5. Shell-Layout: Sidebar | Inhalt | Inhaltsverzeichnis
   --------------------------------------------------------------------------- */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
  max-width: 96rem; margin-inline: auto;
}
.shell--with-toc { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); }
.shell--plain { grid-template-columns: minmax(0, 1fr); max-width: 100%; }

.sidebar {
  position: sticky; top: var(--header-h);
  height: calc(100dvh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-5) var(--s-3) var(--s-10) var(--s-4);
  border-right: 1px solid var(--border-subtle);
  scrollbar-width: thin;
}

.main { min-width: 0; padding: var(--s-6) var(--s-8) var(--s-20); }
.main--narrow { max-width: 56rem; margin-inline: auto; }

.toc-rail {
  position: sticky; top: var(--header-h);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-6) var(--s-4) var(--s-10) 0;
  scrollbar-width: thin;
}

/* ---------------------------------------------------------------------------
   6. Sidebar-Navigation
   --------------------------------------------------------------------------- */
.nav-section { margin-bottom: var(--s-5); }

.nav-section__head {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: 0.055em; text-transform: uppercase;
  color: var(--fg-tertiary);
  transition: color var(--dur-fast) var(--ease);
}
.nav-section__head:hover { color: var(--fg-secondary); }
.nav-section__count {
  margin-left: auto; font-family: var(--font-mono);
  font-size: var(--t-2xs); font-weight: 400; letter-spacing: 0;
  color: var(--fg-tertiary); opacity: 0.7;
}

.nav-list { list-style: none; padding: 0; margin: var(--s-1) 0 0; }

.nav-link {
  position: relative;
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0.3125rem var(--s-2) 0.3125rem var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm); line-height: 1.4;
  color: var(--fg-secondary);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.nav-link:hover { background: var(--bg-hover); color: var(--fg-primary); }

/* Signatur: der aktive Eintrag trägt einen Akzentbalken links —
   systemweit dasselbe Zeichen, in Sidebar wie Inhaltsverzeichnis. */
.nav-link[aria-current="page"] {
  background: var(--accent-tint);
  color: var(--accent-text);
  font-weight: 500;
}
.nav-link[aria-current="page"]::before {
  content: ""; position: absolute;
  left: 0; top: 50%; translate: 0 -50%;
  width: 2px; height: 1.05rem;
  border-radius: var(--r-full);
  background: var(--accent);
}

.nav-group { margin-top: var(--s-1); }
.nav-group__head {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; padding: 0.3125rem var(--s-2) 0.3125rem var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 500;
  color: var(--fg-secondary); text-align: left;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.nav-group__head:hover { background: var(--bg-hover); color: var(--fg-primary); }
.nav-group__body {
  margin-left: var(--s-3); padding-left: var(--s-2);
  border-left: 1px solid var(--border-subtle);
}
.nav-group[data-has-current="1"] > .nav-group__head { color: var(--fg-primary); }

.chev {
  flex: none; width: 0.75rem; height: 0.75rem;
  color: var(--fg-tertiary);
  transition: rotate var(--dur-fast) var(--ease);
}
details[open] > * > .chev,
details[open] > .nav-section__head .chev,
details[open] > .nav-group__head .chev { rotate: 90deg; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

.sidebar__foot {
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: var(--t-2xs);
  color: var(--fg-tertiary); line-height: 1.6;
}
.sidebar__foot a { color: var(--fg-secondary); }
.sidebar__foot a:hover { color: var(--accent-text); }

/* ---------------------------------------------------------------------------
   7. Seitenkopf: Breadcrumb, Titel, Metazeile
   --------------------------------------------------------------------------- */
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem;
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--fg-tertiary); margin-bottom: var(--s-3);
}
.breadcrumb a { color: var(--fg-secondary); border-radius: var(--r-xs); }
.breadcrumb a:hover { color: var(--accent-text); }
.breadcrumb__sep { opacity: 0.45; }
.breadcrumb__current { color: var(--fg-secondary); }

.page-title {
  font-size: var(--t-2xl); font-weight: 600;
  letter-spacing: -0.022em; line-height: 1.15;
  text-wrap: balance;
}

.page-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  margin-top: var(--s-3); padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--t-xs); color: var(--fg-tertiary);
}
.page-meta__item { display: flex; align-items: center; gap: 0.375rem; }
.page-meta time,
.page-meta__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.page-meta__subject {
  max-width: 24rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

.dot {
  width: 0.4375rem; height: 0.4375rem; border-radius: var(--r-full);
  background: currentColor; flex: none;
}
.dot--ok    { color: var(--ok-fg); }
.dot--warn  { color: var(--warn-fg); }
.dot--muted { color: var(--fg-tertiary); opacity: 0.5; }

/* ---------------------------------------------------------------------------
   8. Prosa (gerendertes Markdown)
   --------------------------------------------------------------------------- */
.prose {
  padding-top: var(--s-6);
  font-size: var(--t-base);
  line-height: 1.68;
  color: var(--fg-primary);
}
.prose > * { max-width: var(--measure); }
/* Tabellen, Code und Diagramme dürfen die Lesebreite überschreiten. */
.prose > .table-wrap,
.prose > pre,
.prose > .mermaid { max-width: none; }

.prose > :first-child { margin-top: 0; }

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-weight: 600; letter-spacing: -0.015em;
  line-height: 1.25; scroll-margin-top: calc(var(--header-h) + var(--s-4));
  text-wrap: balance;
}
/* Das Markdown-H1 wird als Seitentitel oben gerendert — im Fliesstext
   erscheint es nicht doppelt (siehe wiki.py: _strip_leading_h1). */
.prose h2 {
  font-size: var(--t-xl); margin: var(--s-10) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
}
.prose h3 { font-size: var(--t-lg); margin: var(--s-8) 0 var(--s-2); }
.prose h4 {
  font-size: var(--t-base); margin: var(--s-6) 0 var(--s-2);
  color: var(--fg-secondary);
}
.prose h5, .prose h6 {
  font-size: var(--t-md); margin: var(--s-5) 0 var(--s-2);
  color: var(--fg-secondary);
}

.prose p { margin: var(--s-4) 0; }
.prose ul, .prose ol { margin: var(--s-4) 0; padding-left: 1.35rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 0.3rem 0; }
.prose li::marker { color: var(--fg-tertiary); }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin: 0.3rem 0; }

.prose a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--accent) 35%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
  border-radius: var(--r-xs);
}
.prose a:hover { text-decoration-color: var(--accent); }

/* Link in einen gesperrten Bereich — sichtbar tot, ohne Inhaltsleak. */
.locked-link {
  color: var(--fg-tertiary);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
  cursor: not-allowed;
}

.prose strong { font-weight: 600; color: var(--fg-primary); }
.prose em { font-style: italic; }

.prose code {
  font-family: var(--font-mono); font-size: 0.855em;
  background: var(--inline-code-bg); color: var(--inline-code-fg);
  padding: 0.12em 0.34em; border-radius: var(--r-xs);
  word-break: break-word;
}
.prose a code { color: inherit; }

.prose pre {
  position: relative;
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-4);
  background: var(--code-bg); color: var(--code-fg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: var(--t-sm); line-height: 1.6;
  scrollbar-width: thin;
}
.prose pre code {
  background: none; padding: 0; color: inherit;
  font-size: inherit; word-break: normal;
}

.copy-btn {
  position: absolute; top: var(--s-2); right: var(--s-2);
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--n-100) 12%, transparent);
  color: var(--n-400);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease),
                          background-color var(--dur-fast) var(--ease),
                          color var(--dur-fast) var(--ease);
}
pre:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { background: color-mix(in oklab, var(--n-100) 20%, transparent); color: var(--n-200); }
.copy-btn[data-copied="1"] { opacity: 1; color: var(--ok-fg); }

.prose blockquote {
  margin: var(--s-5) 0;
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--accent-tint);
  color: var(--fg-secondary);
}
.prose blockquote > :first-child { margin-top: 0; }
.prose blockquote > :last-child { margin-bottom: 0; }

.table-wrap {
  margin: var(--s-5) 0;
  overflow-x: auto; scrollbar-width: thin;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-surface);
}
.prose table {
  width: 100%; border-collapse: collapse;
  font-size: var(--t-sm); line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
/* Kein position:sticky auf diesen Kopfzeilen: der Wrapper scrollt nur
   horizontal, ist also vertikal kein Scroll-Container — sticky hätte hier
   keine Wirkung. Wiki-Tabellen sind ausserdem kurz. Wo es wirkt, siehe
   .data-table-wrap--tall. */
.prose th {
  background: var(--bg-sunken);
  font-weight: 600; text-align: left; white-space: nowrap;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-default);
  color: var(--fg-secondary);
}
.prose td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: none; }
.prose tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.prose tbody tr:hover { background: var(--bg-hover); }
.prose table code { font-size: 0.9em; }

.prose hr {
  margin: var(--s-8) 0; border: none;
  border-top: 1px solid var(--border-default);
}
.prose img { border-radius: var(--r-md); border: 1px solid var(--border-subtle); }

/* Überschriften-Anker — erscheint beim Hovern links neben der Überschrift */
.prose .headerlink {
  margin-left: 0.4em;
  color: var(--fg-tertiary);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.prose h2:hover .headerlink,
.prose h3:hover .headerlink,
.prose h4:hover .headerlink,
.prose .headerlink:focus-visible { opacity: 1; }
.prose .headerlink:hover { color: var(--accent-text); }

.prose .mermaid {
  margin: var(--s-5) 0; padding: var(--s-4);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow-x: auto;
}

/* ---------------------------------------------------------------------------
   9. Inhaltsverzeichnis (rechte Schiene)
   --------------------------------------------------------------------------- */
.toc__title {
  font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: 0.055em; text-transform: uppercase;
  color: var(--fg-tertiary); margin-bottom: var(--s-3);
}
.toc__list { list-style: none; padding: 0; margin: 0; }
.toc__link {
  position: relative; display: block;
  padding: 0.25rem 0 0.25rem var(--s-3);
  border-left: 2px solid var(--border-subtle);
  font-size: var(--t-sm); line-height: 1.45;
  color: var(--fg-tertiary);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.toc__link:hover { color: var(--fg-primary); border-color: var(--border-strong); }
.toc__link--h3 { padding-left: var(--s-6); font-size: var(--t-xs); }
.toc__link[aria-current="true"] {
  color: var(--accent-text); border-color: var(--accent); font-weight: 500;
}

/* Auf schmalen Viewports klappt das Verzeichnis über den Inhalt. */
.toc-inline {
  margin: var(--s-5) 0 0;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  display: none;
}
.toc-inline > summary {
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-md); font-weight: 500;
  display: flex; align-items: center; gap: var(--s-2);
}
.toc-inline > div { padding: 0 var(--s-4) var(--s-3); }

/* ---------------------------------------------------------------------------
   10. Vorherige / nächste Seite
   --------------------------------------------------------------------------- */
.pager {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s-12); padding-top: var(--s-6);
  border-top: 1px solid var(--border-subtle);
}
.pager__link {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.pager__link:hover { border-color: var(--accent); box-shadow: var(--sh-sm); }
.pager__link--next { text-align: right; grid-column: 2; }
.pager__dir {
  font-size: var(--t-xs); color: var(--fg-tertiary);
}
.pager__title {
  font-size: var(--t-md); font-weight: 500; color: var(--fg-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pager__link:hover .pager__title { color: var(--accent-text); }

/* ---------------------------------------------------------------------------
   11. Befehlspalette (Signature) — ⌘K
   --------------------------------------------------------------------------- */
.palette {
  border: none; padding: 0; background: none;
  max-width: 40rem; width: calc(100vw - 2rem);
  margin: 12vh auto auto;
  border-radius: var(--r-lg);
  overflow: visible;
}
.palette::backdrop {
  background: oklch(0.15 0.01 275 / 0.45);
  backdrop-filter: blur(2px);
}
.palette[open] { animation: palette-in var(--dur) var(--ease-out); }
.palette[open]::backdrop { animation: fade-in var(--dur) var(--ease-out); }
@keyframes palette-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.palette__inner {
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.palette__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--fg-tertiary);
}
/* Ein Ring rund um das Eingabefeld sähe in der Kopfzeile falsch aus — der
   Fokus wird stattdessen an der Trennlinie der Kopfzeile gezeigt. Ersatz,
   nicht Wegfall: ohne Fokusanzeige wäre die Palette per Tastatur blind. */
.palette__input {
  flex: 1; border: none; background: none; outline: none;
  font-size: var(--t-md); color: var(--fg-primary);
}
.palette__input:focus-visible { outline: none; }
.palette__head:has(.palette__input:focus-visible) {
  border-bottom-color: var(--accent);
}
.palette__input::placeholder { color: var(--fg-tertiary); }

.palette__results {
  max-height: min(24rem, 55vh);
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-2);
  scrollbar-width: thin;
}
.palette__group {
  padding: var(--s-2) var(--s-2) var(--s-1);
  font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: 0.055em; text-transform: uppercase;
  color: var(--fg-tertiary);
}
.palette__item {
  display: flex; align-items: baseline; gap: var(--s-3);
  width: 100%; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm); text-align: left;
  color: var(--fg-secondary);
  scroll-margin: var(--s-2);
}
.palette__item[data-active="1"] { background: var(--accent-tint); color: var(--accent-text); }
.palette__item-title {
  font-size: var(--t-md); font-weight: 500; color: var(--fg-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.palette__item[data-active="1"] .palette__item-title { color: var(--accent-text); }
.palette__item-path {
  margin-left: auto; flex: none;
  font-family: var(--font-mono); font-size: var(--t-2xs);
  color: var(--fg-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 45%;
}
.palette__item-snippet {
  display: block; width: 100%;
  font-size: var(--t-xs); color: var(--fg-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.palette__empty {
  padding: var(--s-8) var(--s-4); text-align: center;
  font-size: var(--t-md); color: var(--fg-tertiary);
}
.palette__foot {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-sunken);
  font-size: var(--t-xs); color: var(--fg-tertiary);
}
.palette__foot span { display: flex; align-items: center; gap: 0.375rem; }
.palette__status { margin-left: auto; }

mark, .hit {
  background: color-mix(in oklab, var(--warn-fg) 26%, transparent);
  color: inherit; border-radius: 2px; padding: 0 1px;
}

/* ---------------------------------------------------------------------------
   12. Karten, Buttons, Formulare, Badges
   --------------------------------------------------------------------------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.card__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
}
.card__title { font-size: var(--t-md); font-weight: 600; }
.card__body { padding: var(--s-4); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 2.25rem; padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--t-md); font-weight: 500;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
  touch-action: manipulation;
}
.btn:active { scale: 0.985; }
.btn--primary { background: var(--accent); color: var(--fg-on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--subtle {
  background: var(--bg-sunken); color: var(--fg-primary);
  border-color: var(--border-default);
}
.btn--subtle:hover { background: var(--bg-active); border-color: var(--border-strong); }
.btn--ghost { color: var(--fg-secondary); }
.btn--ghost:hover { background: var(--bg-hover); color: var(--fg-primary); }
.btn--sm { min-height: 1.875rem; padding: 0 var(--s-3); font-size: var(--t-sm); }
.btn--danger {
  border-color: var(--dang-border); color: var(--dang-fg);
  background: transparent;
}
.btn--danger:hover { background: var(--dang-bg); }
.btn--full { width: 100%; }

.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field__label { font-size: var(--t-md); font-weight: 500; }
.field__hint { font-size: var(--t-xs); color: var(--fg-tertiary); }
.input {
  width: 100%; min-height: 2.25rem;
  padding: var(--s-2) var(--s-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  font-size: var(--t-md);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder { color: var(--fg-tertiary); }
.input:hover { border-color: var(--border-strong); }
.input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.checkbox { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-md); }
.checkbox input { width: 1rem; height: 1rem; accent-color: var(--accent); }

.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.125rem 0.4rem;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  font-size: var(--t-2xs); font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.badge--neutral { background: var(--bg-sunken); color: var(--fg-secondary); border-color: var(--border-default); }
.badge--accent  { background: var(--accent-tint); color: var(--accent-text); border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
.badge--ok      { background: var(--ok-bg);   color: var(--ok-fg);   border-color: var(--ok-border); }
.badge--warn    { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.badge--danger  { background: var(--dang-bg); color: var(--dang-fg); border-color: var(--dang-border); }
.badge--info    { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-border); }
.badge--mono { font-family: var(--font-mono); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-tertiary); }

.notice {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid;
  font-size: var(--t-md);
}
.notice--error   { background: var(--dang-bg); color: var(--dang-fg); border-color: var(--dang-border); }
.notice--ok      { background: var(--ok-bg);   color: var(--ok-fg);   border-color: var(--ok-border); }
.notice--warn    { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }

.empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3); padding: var(--s-16) var(--s-4); text-align: center;
}
.empty__icon { color: var(--fg-tertiary); opacity: 0.55; }
.empty__title { font-size: var(--t-md); font-weight: 500; }
.empty__text { font-size: var(--t-md); color: var(--fg-tertiary); max-width: 32rem; }

/* ---------------------------------------------------------------------------
   13. Seitenkopf für Nicht-Wiki-Seiten (Suche, Admin, Konto)
   --------------------------------------------------------------------------- */
.view-head { margin-bottom: var(--s-6); }
.view-head__row {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-3);
}
.view-title {
  font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.022em;
  line-height: 1.15;
}
.view-sub { margin-top: var(--s-2); font-size: var(--t-md); color: var(--fg-secondary); }
.view-actions { display: flex; align-items: center; gap: var(--s-2); }

.back-link {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-md); color: var(--fg-secondary);
  margin-bottom: var(--s-3); border-radius: var(--r-xs);
}
.back-link:hover { color: var(--accent-text); }

/* ---------------------------------------------------------------------------
   13b. Startseite — Bereichsleiste, Änderungsliste, Einstiegspunkte
   --------------------------------------------------------------------------- */
.section-label {
  font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.055em;
  text-transform: uppercase; color: var(--fg-tertiary);
  margin-bottom: var(--s-3);
}

.section-strip {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-8);
}
.section-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2rem; padding: 0 var(--s-2) 0 var(--s-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  background: var(--bg-surface);
  font-size: var(--t-md); color: var(--fg-secondary);
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.section-chip:hover { border-color: var(--accent); color: var(--accent-text); }
.section-chip svg { color: var(--fg-tertiary); }
.section-chip:hover svg { color: var(--accent); }
.section-chip__n {
  display: grid; place-items: center;
  min-width: 1.375rem; height: 1.375rem; padding: 0 0.3rem;
  border-radius: var(--r-full);
  background: var(--bg-sunken);
  font-size: var(--t-2xs); color: var(--fg-tertiary);
}

.panel {
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  margin-bottom: var(--s-8);
}
.panel__head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--fg-tertiary);
}
.panel__title { font-size: var(--t-md); font-weight: 600; color: var(--fg-primary); }

.change-list { list-style: none; margin: 0; padding: 0; }
.change-list > li + li { border-top: 1px solid var(--border-subtle); }
.change {
  display: grid; align-items: baseline;
  grid-template-columns: auto minmax(0, auto) auto minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  transition: background-color var(--dur-fast) var(--ease);
}
.change:hover { background: var(--bg-hover); }
.change__date {
  font-size: var(--t-xs); color: var(--fg-tertiary);
  font-variant-numeric: tabular-nums;
}
.change__title {
  font-size: var(--t-md); font-weight: 500; color: var(--fg-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.change:hover .change__title { color: var(--accent-text); }
.change__subject {
  font-size: var(--t-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: right;
}

.entries { display: grid; gap: var(--s-3); }
.entry {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-default);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--bg-surface);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.entry:hover { border-left-color: var(--accent); box-shadow: var(--sh-sm); }
.entry__head { display: flex; align-items: baseline; gap: var(--s-3); }
.entry__title { font-size: var(--t-md); font-weight: 600; }
.entry:hover .entry__title { color: var(--accent-text); }
.entry__path {
  margin-left: auto; font-size: var(--t-2xs); color: var(--fg-tertiary);
}
.entry__text { font-size: var(--t-md); color: var(--fg-secondary); line-height: 1.55; }

@media (max-width: 47.99rem) {
  .change {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0.15rem; padding: var(--s-3) var(--s-4);
  }
  .change__section { grid-column: 1; }
  .change__title { grid-column: 2; }
  .change__subject { grid-column: 2; text-align: left; }
  .entry__path { display: none; }
}

/* ---------------------------------------------------------------------------
   14. Suchergebnisse
   --------------------------------------------------------------------------- */
.results { display: flex; flex-direction: column; gap: var(--s-2); }
.result {
  display: block; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.result:hover { border-color: var(--accent); box-shadow: var(--sh-sm); }
.result__head {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin-bottom: var(--s-1);
}
.result__title { font-size: var(--t-md); font-weight: 500; }
.result:hover .result__title { color: var(--accent-text); }
.result__path {
  margin-left: auto; font-family: var(--font-mono);
  font-size: var(--t-2xs); color: var(--fg-tertiary);
}
.result__snippet {
  font-size: var(--t-md); color: var(--fg-secondary);
  line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   15. Admin
   --------------------------------------------------------------------------- */
.stat-row {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-bottom: var(--s-6);
}
.stat {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-surface);
}
.stat--primary { background: var(--accent-tint); border-color: color-mix(in oklab, var(--accent) 28%, transparent); }
.stat--flag { border-color: var(--warn-border); }
.stat__label {
  font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.055em;
  text-transform: uppercase; color: var(--fg-tertiary);
}
.stat__value {
  margin-top: var(--s-1);
  font-size: 1.625rem; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.stat--primary .stat__value { color: var(--accent-text); }
.stat__note { margin-top: 0.15rem; font-size: var(--t-xs); color: var(--fg-tertiary); }

.user-row { padding: var(--s-4); border-bottom: 1px solid var(--border-subtle); }
.user-row:last-child { border-bottom: none; }
.user-row__head {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.user-row__name { font-size: var(--t-md); font-weight: 600; }
.user-row__actions { margin-left: auto; display: flex; gap: var(--s-2); }
.user-row--inactive { background: var(--bg-sunken); }
.user-row--inactive .user-row__name { color: var(--fg-tertiary); }

.grant-label {
  font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.055em;
  text-transform: uppercase; color: var(--fg-tertiary);
  margin-bottom: var(--s-2);
}
.grants { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
.grant {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 1.75rem; padding: 0 var(--s-2);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--fg-tertiary);
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.grant:hover { border-color: var(--border-strong); color: var(--fg-secondary); }
.grant[data-granted="1"] {
  background: var(--accent-tint);
  border-color: color-mix(in oklab, var(--accent) 32%, transparent);
  color: var(--accent-text); font-weight: 500;
}
.grant__check { width: 0.75rem; height: 0.75rem; opacity: 0; }
.grant[data-granted="1"] .grant__check { opacity: 1; }

.new-user {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end;
}
.new-user .field { flex: 1 1 11rem; min-width: 0; }
.new-user .checkbox { min-height: 2.25rem; }

.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list > li {
  padding: 0.35rem var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--t-sm);
}
.plain-list > li:last-child { border-bottom: none; }
.plain-list a:hover { color: var(--accent-text); }

.data-table-wrap {
  overflow-x: auto; scrollbar-width: thin;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-surface);
}
/* Lange Listen (Audit-Log) scrollen in sich — erst dadurch ist der Wrapper
   ein vertikaler Scroll-Container und die klebende Kopfzeile wirkt wirklich. */
.data-table-wrap--tall {
  max-height: calc(100dvh - 15rem);
  overflow-y: auto; overscroll-behavior: contain;
}
.data-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--t-sm); font-variant-numeric: tabular-nums;
}
.data-table th {
  background: var(--bg-sunken); color: var(--fg-secondary);
  font-weight: 600; text-align: left; white-space: nowrap;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-default);
}
.data-table-wrap--tall .data-table th { position: sticky; top: 0; z-index: 1; }
.data-table td {
  padding: 0.4rem var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.data-table tbody tr:hover { background: var(--bg-hover); }

/* ---------------------------------------------------------------------------
   16. Zentrierte Ansichten (Login, Konto)
   --------------------------------------------------------------------------- */
.centered {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100dvh - var(--header-h));
  padding: var(--s-8) var(--s-4) var(--s-16);
}
.centered__box { width: 100%; max-width: 23rem; }
.centered__brand {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  color: var(--accent); margin-bottom: var(--s-4);
}
.centered__title {
  font-size: var(--t-3xl); font-weight: 600; letter-spacing: -0.028em;
  text-align: center; line-height: 1.1;
}
.centered__sub {
  margin-top: var(--s-2); margin-bottom: var(--s-6);
  text-align: center; font-size: var(--t-md); color: var(--fg-secondary);
}
.centered__foot {
  margin-top: var(--s-5); text-align: center;
  font-family: var(--font-mono); font-size: var(--t-2xs);
  color: var(--fg-tertiary); line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   17. Responsiv
   --------------------------------------------------------------------------- */
@media (max-width: 79.99rem) {
  .shell--with-toc { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .toc-rail { display: none; }
  .toc-inline { display: block; }
}

@media (max-width: 63.99rem) {
  :root { --header-h: 3.5rem; }
  .shell, .shell--with-toc { grid-template-columns: minmax(0, 1fr); }
  .main { padding: var(--s-5) var(--s-5) var(--s-16); }

  .nav-toggle { display: grid; }

  .sidebar {
    position: fixed; inset: var(--header-h) auto 0 0;
    z-index: 70; width: min(19rem, 85vw); height: auto;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-default);
    box-shadow: var(--sh-lg);
    translate: -102% 0;
    transition: translate var(--dur) var(--ease);
    padding-bottom: var(--s-16);
  }
  body[data-nav="open"] .sidebar { translate: 0 0; }
  .nav-scrim {
    position: fixed; inset: var(--header-h) 0 0; z-index: 65;
    background: oklch(0.15 0.01 275 / 0.4);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }
  body[data-nav="open"] .nav-scrim { opacity: 1; pointer-events: auto; }

  .search-trigger { min-width: 0; }
  .search-trigger__label, .search-trigger .kbd { display: none; }
  .search-trigger { width: 2rem; flex: none; padding: 0; justify-content: center; }
  .user-chip__name { display: none; }
}

@media (max-width: 39.99rem) {
  :root { --t-2xl: 1.625rem; --t-xl: 1.3125rem; --t-3xl: 1.875rem; }
  .main { padding: var(--s-4) var(--s-4) var(--s-16); }
  .header { padding: 0 var(--s-3); gap: var(--s-2); }
  .brand__sub { display: none; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager__link--next { grid-column: 1; }
  .palette { margin-top: 4vh; }
  .page-meta__subject { max-width: 100%; }
  /* Touch-Ziele: die Kopfzeilen-Knöpfe sind die meistgetippten Ziele und
     bekommen volle 40px; Baumeinträge kommen mit Polsterung auf ~34px —
     eng, aber deutlich über dem 24px-Minimum und für 61 Einträge nötig. */
  .nav-link, .nav-group__head { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .grant { min-height: 2.25rem; }
  .icon-btn, .search-trigger, .nav-toggle { width: 2.5rem; height: 2.5rem; }
}

@media print {
  .header, .sidebar, .toc-rail, .toc-inline, .pager, .nav-scrim, .copy-btn { display: none !important; }
  .shell, .shell--with-toc { grid-template-columns: minmax(0, 1fr); }
  .main { padding: 0; }
  .prose > * { max-width: none; }
  a { text-decoration: none; color: inherit; }
}