/* =========================================
   beem.at — Monochromator Theme
   ========================================= */

/* --- Fonts (self-hosted, iOS-modern) ---
   Figtree     — UI + headings (SF-Pro-adjacent fallback)
   Newsreader  — long-form reading serif (Apple "New York" fallback)
   Recursive Mono — CODE ONLY (variable, MONO-Achse; SF Mono fallback)
   Gentium Book Plus — Greek reader (Latein + polytonisches Griechisch)
   woff2 von Fontsource, latin + latin-ext (Umlaute liegen im latin-Subset;
   latin-ext deckt weitere diakritische Zeichen). Range inline: unicode-range
   akzeptiert keine CSS-Variablen. */

/* Figtree — latin */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; src: url('/fonts/figtree-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; src: url('/fonts/figtree-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; src: url('/fonts/figtree-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; src: url('/fonts/figtree-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 800; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; src: url('/fonts/figtree-latin-800.woff2') format('woff2'); }
/* Figtree — latin-ext */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src: url('/fonts/figtree-latinext-400.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src: url('/fonts/figtree-latinext-500.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src: url('/fonts/figtree-latinext-600.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src: url('/fonts/figtree-latinext-700.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 800; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src: url('/fonts/figtree-latinext-800.woff2') format('woff2'); }

/* Newsreader — latin */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; src: url('/fonts/newsreader-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; src: url('/fonts/newsreader-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; src: url('/fonts/newsreader-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; src: url('/fonts/newsreader-latin-400i.woff2') format('woff2'); }
/* Newsreader — latin-ext */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src: url('/fonts/newsreader-latinext-400.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src: url('/fonts/newsreader-latinext-500.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src: url('/fonts/newsreader-latinext-600.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src: url('/fonts/newsreader-latinext-400i.woff2') format('woff2'); }

/* Rec Mono Linear — code only (statischer Coding-Cut, v1.085) */
@font-face {
  font-family: 'Recursive Mono';
  src: url('/fonts/RecMonoLinear-Regular-1.085.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Recursive Mono';
  src: url('/fonts/RecMonoLinear-Bold-1.085.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Recursive Mono';
  src: url('/fonts/RecMonoLinear-Italic-1.085.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Recursive Mono';
  src: url('/fonts/RecMonoLinear-BoldItalic-1.085.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Gentium Book Plus — Griechisch-Reader (Latein + polytonisches Griechisch), Subsets via unicode-range */
@font-face { font-family: 'Gentium Book Plus'; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; src: url('/fonts/gentium-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Gentium Book Plus'; font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; src: url('/fonts/gentium-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Gentium Book Plus'; font-style: italic; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; src: url('/fonts/gentium-latin-400i.woff2') format('woff2'); }
@font-face { font-family: 'Gentium Book Plus'; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0370-03FF; src: url('/fonts/gentium-greek-400.woff2') format('woff2'); }
@font-face { font-family: 'Gentium Book Plus'; font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0370-03FF; src: url('/fonts/gentium-greek-700.woff2') format('woff2'); }
@font-face { font-family: 'Gentium Book Plus'; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+1F00-1FFF; src: url('/fonts/gentium-greekext-400.woff2') format('woff2'); }
@font-face { font-family: 'Gentium Book Plus'; font-style: italic; font-weight: 400; font-display: swap; unicode-range: U+1F00-1FFF; src: url('/fonts/gentium-greekext-400i.woff2') format('woff2'); }

@font-face {
  font-family: 'Latin Modern Math';
  src: url('/fonts/latinmodern-math.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================================
   Design-Tokens · iOS-modern (dark = default)
   Neues System eingefaltet; Legacy-Namen bleiben als Aliase auf
   die neuen Werte, damit noch nicht portierte Screens automatisch
   reskinnen. Alias-Tokens (var()) folgen dem Theme automatisch;
   Light-Overrides weiter unten setzen nur die Primitive um.
   ============================================================ */
:root {
  /* --- Accent-Spektrum --- */
  --red: #fe303a;
  --orange: #ffae49;
  --yellow: #fff556;
  --green: #30df81;
  --cyan: #00f3ff;
  --blue: #02a9ff;
  --magenta: #d559ff;

  /* --- Tint (Brand-Gelb) --- */
  --accent: var(--yellow);
  --accent-press: #fff98a;
  --fill-accent: var(--yellow);
  --fill-accent-press: #ecdf3a;
  /* Gelb ist hell — Text/Icons auf Accent-Fill müssen Ink sein, nicht Weiß. */
  --on-accent: var(--ink-1);
  --accent-tint: rgba(255, 245, 86, 0.16);
  --accent-tint-soft: rgba(255, 245, 86, 0.10);
  --accent-tradition: var(--green);

  /* --- Surface-Ramp (ink) --- */
  --ink-0: #050507;
  --ink-1: #08080a;
  --ink-2: #202024;
  --ink-3: #393941;
  --ink-4: #505058;
  --paper: #e7e7e7;

  /* --- Foreground-Ramp (fg) --- */
  --fg-contrast: #ffffff;
  --fg-1: #e7e7e7;
  --fg-2: #d0d0d2;
  --fg-3: #808086;
  --fg-4: #5c5c63;

  /* --- Separatoren (line) --- */
  --line-1: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.16);
  --line-3: rgba(255, 255, 255, 0.26);

  /* --- Materials (translucent + blur) --- */
  --material-bar: rgba(43, 43, 47, 0.7);     /* kalibriert: komponiert über --bg (#08080a) im Browser zu ink-2 #202024 (Blur+Saturate+Rundung weichen von reiner Alpha-Rechnung ab); neutral: kein Lila-Cast im Frost */
  --material-panel: rgba(32, 32, 37, 0.80);
  --material-thin: rgba(32, 32, 37, 0.55);

  /* --- Status --- */
  --ok: var(--green);
  --warn: var(--orange);
  --danger: var(--red);
  --ok-tint: rgba(48, 223, 129, 0.16);
  --warn-tint: rgba(255, 174, 73, 0.16);
  --danger-tint: rgba(254, 48, 58, 0.16);

  /* --- Semantische Surface-/Text-/Border-Aliase --- */
  --bg: var(--ink-1);
  --bg-raised: var(--ink-2);
  --bg-surface: var(--ink-3);
  --bg-elevated: var(--ink-4);
  --bg-grouped: #0f0f12;
  --bg-hover: var(--ink-3);
  --bg-active: var(--ink-4);
  --surface-card: var(--ink-2);
  --surface-code: #08080A;
  --surface-inset: #0f0f12;
  --fill-secondary: var(--ink-3);
  --fill-secondary-press: var(--ink-4);
  --fill-raised: var(--ink-4);

  --text: var(--fg-1);
  --text-bright: var(--fg-contrast);
  --text-dim: var(--fg-2);
  --text-muted: var(--fg-3);
  --text-body: var(--fg-1);
  --text-faint: var(--fg-3);
  --text-disabled: var(--fg-4);

  --border: var(--line-1);
  --border-strong: var(--line-2);
  --separator: var(--line-1);
  --hairline: var(--line-1);
  --hairline-soft: rgba(255, 255, 255, 0.06);
  --hairline-mid: var(--line-1);
  --hairline-strong: var(--line-2);

  --link: var(--accent);
  --link-hover: var(--accent-press);
  --focus-ring: var(--accent);
  --btn-solid-bg: var(--fill-accent);
  --btn-solid-fg: var(--on-accent);
  --btn-solid-bg-hover: var(--fill-accent-press);

  /* --- Legacy-Screen-Tokens (bleiben, jetzt flach/iOS) --- */
  --shadow-soft: rgba(0, 0, 0, 0.30);
  --shadow-mid: rgba(0, 0, 0, 0.35);
  --shadow-strong: rgba(0, 0, 0, 0.5);
  --btn-hover-bg: #4a4a54;
  --btn-active-bg: #3a3a42;
  --surface-glass: var(--material-panel);
  --surface-glass-border: var(--line-2);
  --card-surface: var(--ink-2);
  --card-border: #2e2e34;
  --card-border-hover: #45454d;
  --card-shadow: var(--shadow-2);
  --stage-bg: #141417;
  --stage-grid: rgba(255, 255, 255, 0.025);
  --stage-glow: color-mix(in srgb, var(--accent) 8%, transparent);
  --stage-glow-hover: color-mix(in srgb, var(--accent) 12%, transparent);
  --stage-icon-shadow: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
  --stage-shot-border: rgba(255, 255, 255, 0.12);
  --stage-shot-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  --syntax-err: var(--red);
  --syntax-add: var(--green);
  --nav-icon-invert: 1;
  --grid-line: rgba(255, 255, 255, 0.018);

  /* --- Schriften --- */
  /* Webfont muss vor den System-Fonts stehen: -apple-system/ui-serif matchen auf
     Apple-Geräten immer, alles danach wird dort nie benutzt. */
  --font-sans:  'Figtree', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Newsreader', ui-serif, Georgia, Cambria, 'Times New Roman', serif;
  --font-mono:  'Recursive Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-greek: 'Gentium Book Plus', ui-serif, Georgia, 'Times New Roman', serif;
  --font-display: var(--font-sans);
  --font-heading: var(--font-sans);
  --font-body:    var(--font-serif);
  --font-ui:      var(--font-sans);
  --font-label:   var(--font-sans);
  --font-code:    var(--font-mono);
  --font-mono-ui: var(--font-mono);

  /* --- Radien (rund, iOS) --- */
  --radius-0: 0px;
  --radius-1: 8px;
  --radius-2: 12px;
  --radius-3: 16px;
  --radius-4: 22px;
  --radius-5: 30px;
  --radius-full: 999px;
  --border-hairline: 1px;
  --border-thick: 1.5px;

  /* --- Space-Scale (4px-Basis) --- */
  --space-0: 0;
  --space-px: 1px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* --- Control-Höhen --- */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 50px;

  /* --- Shadows (weich, ambient) --- */
  --shadow-none: none;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 8px 30px -6px rgba(0, 0, 0, 0.44);
  --shadow-3: 0 24px 60px -12px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 4px var(--accent-tint);

  /* --- Blur --- */
  --blur: 20px;
  --blur-strong: 40px;

  /* --- Motion --- */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 340ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --press-scale: 0.97;

  /* --- Z-Index --- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;

  /* --- Type-Scale (iOS, rem@16) --- */
  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.8125rem;
  --text-md:  0.9375rem;
  --text-base:1.0625rem;
  --text-lg:  1.25rem;
  --text-xl:  1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.125rem;
  --text-4xl: 2.75rem;
  --text-5xl: 3.5rem;

  /* --- Long-form reading --- */
  --reading-size: 1.1875rem;
  --reading-leading: 1.7;
  /* Serif-Langtext eigener Ton: fg-1 (16.2:1) ist für UI-Kurztext richtig,
     glimmt aber bei 9 min Lesetext auf Near-Black (OLED-Halation). 14.1:1
     hält AAA mit doppeltem Puffer; Headlines bleiben auf fg-1 einen Tick
     heller — stützt die Gliederung. */
  --reading-fg: #d8d8da;
  --reading-measure: 68ch;

  /* --- Line-Heights --- */
  --leading-none: 1;
  --leading-tight: 1.12;
  --leading-snug: 1.25;
  --leading-normal: 1.45;
  --leading-relaxed: 1.7;

  /* --- Tracking --- */
  --tracking-tighter: -0.028em;
  --tracking-tight: -0.016em;
  --tracking-normal: 0em;
  --tracking-wide: 0.01em;
  --tracking-label: 0.03em;
  --tracking-caps: 0.06em;

  /* --- Weights --- */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* --- Layout-Container --- */
  --measure: 68ch;
  --container-xs: 30rem;
  --container-sm: 40rem;
  --container-md: 52rem;
  --container-lg: 64rem;
  --container-xl: 76rem;
  --container-2xl: 88rem;
  --container-max: 1240px;        /* einheitliche Rahmenbreite (= NTG-Reader) für Header, Content, Footer */
  --header-h: 92px;               /* Header-Höhe; NTG-Toolbar dockt exakt darunter an */
  --container-pad: 1.5rem;

  color-scheme: dark;
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
  background-color: var(--bg);
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

/* Markieren/Kopieren gehört zum Lesen: Accent statt OS-Default-Blau.
   #08080a auf #fff556 = 17.6:1. Muster aus dem Monochromator übernommen,
   dessen .mono-app ::selection gewinnt dort weiter per Spezifität. */
::selection {
  background: var(--accent);
  color: var(--ink-1);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

a:hover {
  color: var(--link-hover);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --press-scale: 1;
  }
}

/* --- Content Typography (iOS-modern) --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--fg-1);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
  margin: 2rem 0 1rem;
  line-height: 1.1;
}

h2 {
  font-size: var(--text-2xl);
  margin: 2.5rem 0 0.75rem;
}

h3 {
  font-size: var(--text-xl);
  margin: 2rem 0 0.5rem;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.35rem;
}

li::marker {
  color: var(--fg-4);
}

hr {
  border: none;
  border-top: 1px solid var(--separator);
  margin: 2.5rem 0;
}

strong {
  color: var(--text-bright);
  font-weight: var(--weight-semibold);
}

code {
  font-family: var(--font-mono);
  font-variation-settings: "MONO" 1;
  font-size: 0.9em;
  color: var(--text-dim);
}

pre {
  font-family: var(--font-mono);
  font-variation-settings: "MONO" 1;
  background: var(--surface-code);
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: var(--radius-2);
  overflow-x: auto;
  margin-bottom: 1rem;
}

pre code {
  background: none;
  padding: 0;
  color: var(--text);
}

blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--text-dim);
  font-size: 0.96em;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* --- Schriftzitat / Kirchenväter-Zitat — redaktioneller Blockquote im Fließtext:
   Keyline in Akzentfarbe trägt die Kennung (Bibel = Accent, Tradition = Bernstein),
   Ref als schlichte Kopfzeile statt Pill/Karte. --- */
.bibel-quote {
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 3px solid var(--accent);
}

/* Tradition (Väter): eigener Akzent — Bibel = Accent-Gelb, Tradition = Grün
   (Orange verworfen 2026-07-15: als 3px-Linie kaum von Gelb unterscheidbar). */
.bibel-quote--tradition {
  border-left-color: var(--accent-tradition);
}

.bibel-quote__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin-bottom: 0.45rem;
}

.bibel-quote__ref {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-faint);
  line-height: 1.4;
  margin: 0;
}

.bibel-quote__ref-sep {
  color: var(--fg-3);
  margin: 0 0.15em;
}

.bibel-quote__text {
  margin: 0;
  padding: 0;
  border: none;
  font-family: var(--font-serif);
  font-style: normal;
  font-size: var(--reading-size);
  line-height: var(--reading-leading);
  color: var(--reading-fg);
}

.bibel-quote__text p {
  margin-bottom: 0.7rem;
}

.bibel-quote__text p:last-child {
  margin-bottom: 0;
}

/* Übersetzung — subtiles Label oben rechts, in einer Zeile mit der Ref-Pill */
.bibel-quote__cite {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}

/* --- Header --- */
/* Translucent Blur-Bar */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top);
  z-index: var(--z-sticky);
  background: var(--material-bar);
  backdrop-filter: saturate(180%) blur(var(--blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
  border-bottom: 1px solid var(--separator);
  transition: border-color var(--dur-fast) var(--ease);
}

/* Reader-Toolbar dockt an: Header-Trennlinie ausblenden */
body.ntg-toolbar-stuck .site-header {
  border-bottom-color: transparent;
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  position: relative;
}

/* --- Wordmark --- */
.nav-brand {
  order: 0;
  color: var(--text-bright);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.nav-brand svg {
  height: 36px;
  width: auto;
  display: block;
}

/* --- Nav (runde Pills) --- */
.site-nav {
  order: 2;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.nav-link:hover {
  color: var(--text-bright);
  background: var(--bg-hover);
}

.nav-link.active {
  color: var(--fg-1);
  background: var(--fill-secondary);
  font-weight: 600;
}

/* --- Main --- */
.site-main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 2rem var(--container-pad);
  flex: 1;
  width: 100%;
}

/* --- Hero (iOS: Profil-Row + Statement-H1 + CTA-Buttons) --- */
.hero {
  padding: 3.75rem 0 3rem;
}

/* Profil-Row: großer runder Avatar + Name + Rolle. Bewusst Online-/GitHub-
   Sprache — eckige Varianten (Quadrat, 4:5-Hochformat) lasen sich beide als
   Passbild neben den Personalien. Hairline-Ring direkt am Bild, kein
   Passepartout. */
.hero-id {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2.125rem;
}

.hero-id__photo {
  width: 144px;
  height: 144px;
  flex: none;
  border: 2px solid var(--line-2);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-raised);
  box-shadow: var(--shadow-1);
}

.hero-id__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-id__name {
  font-family: var(--font-sans);
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

/* Rolle als nüchterne Bio-Zeile in Sans; die Serif-Kursive gehört im Hero
   allein dem Werkstatt-Satz. */
.hero-id__role {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--fg-3);
  margin-top: 0.25rem;
}

/* Statement-H1: Grußzeile in Sans, darunter der Werkstatt-Satz in Serif-Kursiv.
   Der Punkt hinter "Grüß Gott" trägt die Akzentfarbe. */
.hero__statement {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(3rem, 8.2vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
  /* Eigener Stacking-Kontext: die Gotteshand (z-index -1) liegt hinter dem
     Statement-Text, aber vor den Section-Hintergründen. */
  isolation: isolate;
}

.hero__line {
  display: block;
}

.hero__accent {
  position: relative;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(255, 245, 86, 0.55);
  transition: color var(--dur) var(--ease), text-shadow var(--dur) var(--ease);
}

/* Hero-Stacking im isolate-Kontext des Statements, von hinten nach vorn:
   -2 Gloriole (Punkt-Glyphe + Strahlen) → -1 Gotteshand → 0 Buchstaben.
   Die Hand greift also VOR dem Heiligenschein ins Bild, bleibt aber hinter
   dem Text. Der Punkt ist dafür in einen eigenen span gewrappt, weil er als
   nackte Textglyphe sonst auf Buchstaben-Ebene läge. */
.hero__dot {
  position: relative;
  z-index: -2;
}

/* Strahlenkranz um den Punkt (Monstranz-Ikonografie): zwei Lagen conic-
   Strahlen — lange plus kurze, um eine halbe Teilung versetzt. Die radiale
   Mask stanzt das Zentrum frei (der Punkt selbst bleibt Glyphe) und lässt
   die Strahlen nach außen weich auslaufen. Die Pseudos hängen bewusst am
   .hero__dot, nicht am .hero__accent: der dot ist ein eigener Stacking-
   Kontext (z-index -2), also bleibt der Kranz auch dann unter der Hand,
   wenn die rotierende transform-Animation ihn in einen eigenen Composited
   Layer hebt. */
.hero__dot::before,
.hero__dot::after {
  content: "";
  position: absolute;
  /* Zentrum = Ink-Mitte der Punkt-Glyphe, im Browser vermessen
     (Baseline-Probe + Canvas-TextMetrics), nicht geschätzt. */
  left: 0.125em;
  top: 0.889em;
  width: 1.7em;
  height: 1.7em;
  transform: translate(-50%, -50%);
  z-index: -1;
  background: repeating-conic-gradient(from 0deg,
      var(--accent) 0deg 1.3deg,
      transparent 1.3deg 15deg);
  mask: radial-gradient(closest-side,
      transparent 14%,
      #000 16%,
      #000 42%,
      transparent 78%);
  -webkit-mask: radial-gradient(closest-side,
      transparent 14%,
      #000 16%,
      #000 42%,
      transparent 78%);
  opacity: 0.85;
  pointer-events: none;
  /* transform-Rotation statt Gradient-Winkel-Animation: die dreht eine
     fertige Textur (stabiles Antialiasing), Winkel-Repaints ließen die
     dünnen Keile pro Frame krisseln. Keyframes führen das Zentrier-
     translate mit, weil animation den ganzen transform ersetzt. */
  animation: rays-spin 90s linear infinite;
}

/* Kurze Lage: gegenläufig und schneller (Tiefe statt Karussell). */
.hero__dot::after {
  width: 1.15em;
  height: 1.15em;
  background: repeating-conic-gradient(from 7.5deg,
      var(--accent) 0deg 1.6deg,
      transparent 1.6deg 15deg);
  opacity: 0.55;
  animation-duration: 60s;
  animation-direction: reverse;
}

@keyframes rays-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Gotteshand (Michelangelo, Erschaffung Adams): großer Fresko-Arm HINTER dem
   Text, kommt diagonal von rechts oben; die Fingerspitze stoppt mit dem
   ikonischen Spalt kurz vor dem Accent-Punkt. Der Unterarm löst sich zum
   Ellenbogen per Mask weich auf, als käme er von außerhalb des Bilds. */
.hero__hand {
  position: absolute;
  left: 0.24em;
  bottom: -1.78em;
  width: 11em;
  z-index: -1;
  /* Opak + abgedunkelt statt opacity 0.7: auf dem Ink-Hintergrund sieht
     brightness(0.7) identisch aus, aber die Gloriole hinter der Hand
     scheint nicht mehr durch die Fläche durch. */
  filter: brightness(0.7);
  transform: rotate(-18deg);
  transform-origin: 0 50%;
  mask-image: linear-gradient(to left, transparent 0%, #000 32%);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 32%);
  pointer-events: none;
  user-select: none;
  transition: translate 0.5s var(--ease), opacity 0.5s var(--ease);
  animation: hand-reach 1.1s var(--ease) 0.2s backwards;
}

@keyframes hand-reach {
  from {
    opacity: 0;
    translate: 0.45em -0.18em;
  }

  to {
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__hand {
    animation: none;
    transition: opacity 0.5s var(--ease);
  }

  .hero__dot::before,
  .hero__dot::after {
    animation: none;
  }
}

.hero__sub {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: 0.5em;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg-2);
  margin-top: 0.28em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-top: 2.75rem;
}

/* --- Button (Design-System: solid primär / gray sekundär) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: var(--control-lg);
  padding: 0 1.75rem;
  border-radius: var(--radius-3);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.btn:active {
  transform: scale(var(--press-scale));
}

.btn--primary {
  background: var(--fill-accent);
  color: var(--on-accent);
}

.btn--primary:hover {
  background: var(--fill-accent-press);
  color: var(--on-accent);
}

/* Tinted Accent-Button (iOS ghost): transparent, Akzent-Text, Chevron. */
.btn--ghost {
  gap: 3px;
  padding: 0 1rem;
  background: transparent;
  color: var(--accent);
}

.btn--ghost:hover {
  background: var(--accent-tint);
  color: var(--accent);
}

.btn--ghost svg {
  margin-top: 1px;
}

/* Mobile: Hero kompakter — weniger Leerraum, kleinere Profil-Row,
   Statement skaliert mit dem Viewport statt auf 3rem zu klemmen. */
@media (max-width: 640px) {
  .hero {
    padding: 1.5rem 0 2rem;
  }

  .hero-id {
    gap: 0.875rem;
    margin-bottom: 1.75rem;
  }

  .hero-id__photo {
    width: 104px;
    height: 104px;
  }

  .hero-id__name {
    font-size: 1.375rem;
  }

  .hero-id__role {
    font-size: 0.875rem;
    margin-top: 0.125rem;
  }

  .hero__statement {
    font-size: clamp(2.5rem, 12.8vw, 3.25rem);
    letter-spacing: -0.04em;
  }

  /* Arm kompakter skaliert; Unterarm läuft rechts aus dem Viewport (per
     overflow-x: hidden am body geclippt), die Fingerspitze bleibt am Punkt. */
  .hero__hand {
    left: 0.28em;
    bottom: -0.62em;
    width: 5.4em;
  }

  .hero__actions {
    margin-top: 2rem;
    gap: 0.5rem;
  }

  /* Buttons bleiben nebeneinander — dafür kompakter dimensioniert.
     Passt so bis ~330px Viewport; darunter bricht flex-wrap um. */
  .hero__actions .btn {
    height: 44px;
    padding: 0 0.875rem;
    font-size: 0.875rem;
  }

  .hero__actions .btn--ghost {
    padding: 0 0.375rem;
  }

  .section-divider {
    margin: 2rem 0 1.25rem;
  }
}


/* --- List Page (Fallback: iOS rows) --- */
.list-entries {
  display: flex;
  flex-direction: column;
  margin-top: 1.25rem;
}

.list-entry {
  display: block;
  padding: 1.1rem 0;
  border-top: 1px solid var(--separator);
  text-decoration: none;
  color: inherit;
}

.list-entry:first-child {
  border-top: none;
}

.list-date {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.list-link {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin-top: 0.15rem;
  transition: color var(--dur-fast) var(--ease);
}

.list-desc {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0.35rem 0 0;
}

/* --- Dropdown trigger (iOS bm-dropdown) --- */
.pill-dropdown-btn {
  height: var(--control-md);
  background-color: var(--bg-raised);
  color: var(--fg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-2);
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.pill-dropdown-btn:hover {
  border-color: var(--line-2);
}

.pill-dropdown.open .pill-dropdown-btn {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: var(--shadow-focus);
}

.pill-dropdown-btn:active {
  transform: scale(var(--press-scale));
}

.blog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  margin-bottom: 1.75rem;
}

.blog-toolbar__count {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* RSS: zurückhaltender Eyebrow-Chip in Accent-Gelb (kein gefüllter CTA).
   Glyphe + Label + Hairline; Hover füllt mit --accent-tint. */
.blog-rss {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background: transparent;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.blog-rss:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: var(--accent-tint);
}

.blog-rss:active {
  transform: scale(var(--press-scale));
}

.blog-rss__icon {
  display: inline-flex;
  color: var(--accent);
}

.blog-rss__icon svg {
  width: 13px;
  height: 13px;
  display: block;
}

.blog-toolbar .pill-dropdown-btn {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline-mid);
  border-radius: 0;
  padding: 0.2rem 1.6rem 0.25rem 0.3rem;
  color: var(--text-bright);
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  background-position: right 0.3rem center;
}

.blog-toolbar .pill-dropdown-btn:hover,
.blog-toolbar .pill-dropdown.open .pill-dropdown-btn {
  background-color: transparent;
  border-bottom-color: var(--accent);
  box-shadow: none;
}

.blog-toolbar .pill-dropdown-list {
  left: auto;
  right: 0;
  min-width: 0;
  width: max-content;
}

.pill-dropdown--multi .pill-dropdown-item {
  padding-left: 1.85rem;
  position: relative;
}

.pill-dropdown--multi .pill-dropdown-item::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 3px;
  background: transparent;
}

.pill-dropdown--multi .pill-dropdown-item.active::before {
  background: var(--accent);
  border-color: var(--accent);
}

.pill-dropdown--multi .pill-dropdown-item.active::after {
  content: "";
  position: absolute;
  left: 0.78rem;
  top: 50%;
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: translateY(-65%) rotate(45deg);
}

/* --- Pill Dropdown (custom styled select) --- */
.pill-dropdown {
  position: relative;
  flex-shrink: 0;
}

.pill-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 0.5em;
  touch-action: manipulation;
  padding: 0 2.2rem 0 0.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23808086' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  font-size: var(--text-base);
  outline: none;
  white-space: nowrap;
}

.pill-dropdown-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: 288px;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 200;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-2);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}

.pill-dropdown.open .pill-dropdown-list {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pill-dropdown-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  border-radius: var(--radius-1);
  color: var(--fg-2);
  font-size: var(--text-base);
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.pill-dropdown-item:hover {
  background: var(--fill-secondary);
  color: var(--fg-1);
}

.pill-dropdown-item.active {
  background: var(--fill-secondary);
  color: var(--fg-1);
  font-weight: var(--weight-semibold);
}

/* Grid variant for chapter numbers */
.pill-dropdown--grid .pill-dropdown-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  min-width: 210px;
}

.pill-dropdown--grid .pill-dropdown-item {
  text-align: center;
  padding: 0;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* --- Single Page (iOS reading column) --- */
.single-page {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  /* Newsreader läuft default tabular (alle Ziffern 1133/2000 em) — Tabellenluft
     reißt Löcher in Jahreszahlen/Versangaben; pnum ist im Subset vorhanden. */
  font-variant-numeric: proportional-nums;
}

/* Blog-Artikel: Lesemaß statt Layoutbreite. 720px ≈ 78 Zeichen bei 21.4px
   Newsreader (Root 18px) — im Blocksatz doppelt wichtig, weil ohne Flatterrand
   die Zeilen-Landmarke für den Rücksprung fehlt; deckt sich mit der
   Minuskel-Textspalte. Vorher 1000px ≈ 105-110 Zeichen. */
.single-page--wide {
  max-width: 720px;
}

/* Breadcrumb (bm-breadcrumb) */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg-3);
}

.breadcrumb a {
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb__sep {
  color: var(--fg-4);
}

.breadcrumb__current {
  color: var(--fg-1);
}

.single-page h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 4.4vw, 3rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0.5rem 0 0.75rem;
}

/* Dek (Untertitel, kursiv Serif) */
.article-dek {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.3125rem;
  line-height: 1.4;
  color: var(--text-muted);
  /* Titel+Dek bilden eine Einheit; danach deutliche Zäsur vor dem Meta-Block
     (Byline+Tags), der intern eng sitzt — sonst schwebt die Byline richtungslos
     zwischen fast gleichen Abständen. */
  margin: 0 0 1.6rem;
}

/* Cover-Bild zwischen Meta-Block und Text: breit beschnitten statt nativer
   Ratio, damit ein Hochformat den Einstieg nicht dominiert. Überschreibt die
   generische .single-page img-Regel (max-height 60vh, auto-Breite). */
.article-cover {
  margin: 2rem 0 2.5rem;
}

/* .single-page als Präfix nötig: schlägt die spätere generische
   .single-page img-Regel bei gleicher Reihenfolge-Sensitivität. */
.single-page .article-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: none;
  object-fit: cover;
  border-radius: var(--radius-4);
  margin: 0;
}

.article-body {
  /* Kein synthetisches Fett: für ***fett-kursiv*** existiert nur 400i —
     lieber echtes 400i als vom Browser aufgeblasene Konturen auf #08080A. */
  font-synthesis-weight: none;
}

.article-body h2 {
  margin: 3rem 0 0.75rem;
}

.article-body h3 {
  margin: 2.25rem 0 0.5rem;
}

.article-body h2,
.article-body h3 {
  /* Anker-Sprünge sonst unter der 92px-Sticky-Bar. */
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

/* Links im Serif-Absatz brauchen Form, nicht nur Farbe: Accent-Gelb hat gegen
   den Fließtext nur ~1.1:1 Helligkeitskontrast (WCAG 1.4.1 verlangt 3:1 ohne
   Underline). Halbtransparent gehaltene Linie, voll erst beim Hover. */
.article-body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

.article-body a:hover {
  text-decoration-color: var(--accent);
}

/* Semibold trägt die Betonung allein; der globale strong-Sprung auf Vollweiß
   glimmt auf OLED mitten im Blocksatzblock. */
.article-body strong {
  color: inherit;
}

.single-page p {
  font-family: var(--font-serif);
  font-size: var(--reading-size);
  line-height: var(--reading-leading);
  color: var(--reading-fg);
  margin: 0 0 1.25rem;
}

/* Blog: Lesetext im Blocksatz (wie der Minuskel-Grieche). Deutsche Silbentrennung
   ist Pflicht, sonst reißen die Wortabstände auf; Mindestlängen halten die
   Trennungen dezent. Letzte Absatzzeile bleibt links.
   .bibel-quote__text ist mit drin: markdownify strippt bei einzeiligen
   Shortcode-Innern den p-Wrapper, sonst stünden alle Zitatblöcke im
   Flatterrand mitten im justierten Text. */
.single-page--wide .article-body p,
.single-page--wide .bibel-quote__text {
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  /* Safari kennt nur die Legacy-Properties: gleiche 3/3-Minima wie Chromium,
     Trennladder auf 2 Zeilen gedeckelt. Firefox ignoriert beides. */
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-lines: 2;
  hyphenate-limit-lines: 2;
  /* Safari-only: Satzzeichen hängen in den Rand, glattere Blockkante. */
  hanging-punctuation: first allow-end;
}

/* Unter ~480px trägt eine Zeile nur noch 4-5 Wortzwischenräume — zu wenig
   Verteilmasse, Blocksatz kippt physikalisch (Marginalspalten-Problem des
   Buchdrucks). Links ausgerichtet mit aktiver Trennung liest sich besser. */
@media (max-width: 480px) {
  .single-page--wide .article-body p,
  .single-page--wide .bibel-quote__text {
    text-align: left;
  }
}

.single-page ul,
.single-page ol {
  font-family: var(--font-serif);
  font-size: var(--reading-size);
  line-height: var(--reading-leading);
  color: var(--reading-fg);
  margin: 0 0 1.25rem;
}

.single-page img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  margin: 1.75rem auto;
  border-radius: var(--radius-4);
}

/* --- Article byline (Datum · Lesezeit · Tags) --- */
.article-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 0.65rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.article-byline__sep {
  color: var(--fg-4);
}

/* Tags in eigener Zeile unter der Byline (Datum · Lesedauer) */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 2rem;
}

/* Artikel-Fuß: Backlink eine Ebene zurück (Blog). */
.article-foot {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--separator);
}

.article-foot__back {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-muted);
}

.article-foot__back:hover {
  color: var(--fg-1);
}

/* 404: CTA-Button etwas Luft geben. */
.notfound-actions {
  margin-top: var(--space-5);
}

/* --- Footer --- */
.site-footer {
  margin-top: var(--space-8);
  padding: var(--space-5) 0 calc(var(--space-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--separator);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-faint);
}

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

/* Brand-Mark: dezent (muted), Accent-Node bleibt farbig; Hover hebt an. */
.footer-brand {
  display: inline-flex;
  line-height: 0;
  opacity: 0.72;
  transition: opacity var(--dur-fast) var(--ease);
}

.footer-brand:hover {
  opacity: 1;
}

.footer-brand svg {
  height: 26px;
  width: auto;
  display: block;
}

/* Untere Zeile: Copyright links, Rechtliches rechts — gleiche Baseline. */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.4rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
}

.footer-contact__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.footer-contact__link:hover {
  color: var(--fg-1);
}

.footer-contact__icon {
  display: inline-flex;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease);
}

.footer-contact__link:hover .footer-contact__icon {
  color: var(--fg-1);
}

.footer-contact__icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-family: var(--font-ui);
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.footer-links a:hover {
  color: var(--fg-1);
}

.footer-copy {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* Mobile: Footer als klare Spalte — Brand, Kontakte untereinander,
   Hairline, dann Copyright + Rechtliches. */
@media (max-width: 640px) {
  .site-footer {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
  }

  .footer-inner {
    gap: 1.5rem;
  }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .footer-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
  }

  .footer-bottom {
    padding-top: 1.25rem;
    border-top: 1px solid var(--separator);
  }
}

/* --- Tables --- */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 1.75rem 0;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-family: var(--font-mono-ui);
  font-size: 0.8rem;
  font-feature-settings: "tnum" 1, "ss03" 1;
  line-height: 1.45;
  border-top: 1px solid var(--border);
}

th,
td {
  padding: 0.55rem 1.25rem;
  text-align: left;
  vertical-align: baseline;
}

th:first-child,
td:first-child {
  padding-left: 0;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

thead th {
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

tbody td {
  color: var(--text-dim);
  border-bottom: 1px solid var(--hairline);
}

tbody td:first-child {
  color: var(--text-bright);
}

tbody tr:last-child td {
  border-bottom: 1px solid var(--border);
}

tbody tr {
  transition: background-color 0.12s ease;
}

tbody tr:hover td {
  background: var(--hairline-soft);
  color: var(--text-bright);
}

/* --- KaTeX Math --- */
.katex {
  color: var(--text-bright);
  font-size: 1em;
}

.katex math,
math {
  font-family: 'Latin Modern Math', math;
  color: var(--text-bright);
}

/* display equations: span.katex wrapping <math display="block"> */
.katex:has(math[display='block']) {
  display: block;
  margin: 0.5rem 0;
  padding: 1.25rem 1.75rem;
  overflow-x: auto;
  font-size: 1.1em;
}

.katex math[display='block'] {
  margin: 0;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-surface);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* --- List page masthead --- */
.list-page__masthead {
  margin: 1.5rem 0 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--separator);
}

/* Titel links, RSS-Chip rechts oben; Lede darunter über volle Breite. */
.list-page__titlerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.list-page__titlerow .list-page__title {
  margin-bottom: 0;
}

.list-page__title {
  font-family: var(--font-sans);
  font-size: clamp(2.1rem, 5vw, 2.8rem);
  font-weight: var(--weight-heavy);
  color: var(--fg-1);
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0 0 0.9rem;
}

.list-page__lede {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--text-dim);
}

.list-page__lede p {
  margin: 0;
}

.list-page__lede p+p {
  margin-top: 0.6rem;
}

@media (max-width: 600px) {
  .list-page__title {
    font-size: 2.1rem;
  }

  .list-page__lede {
    font-size: 1.05rem;
  }
}

/* --- Section Divider (iOS-Eyebrow: Label-Tab + optionaler More-Link) --- */
.section-divider {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--separator);
  margin: 2.75rem 0 1.6rem;
  user-select: none;
}

.section-divider__label {
  display: inline-block;
  padding-bottom: 0.75rem;
  margin-bottom: -1px;
  border-bottom: 2px solid var(--accent);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.section-divider__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-faint);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.section-divider__more:hover {
  color: var(--accent);
}

.section-divider__more svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* --- Project Cards (Plakat: Foto füllt die Karte, ruht monochrom, Scrim trägt den Text) --- */
/* Nebeneinander ab Tablet: Karten weniger länglich, mehr Bildfläche sichtbar */
.proj-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

@media (min-width: 720px) {
  .proj-stack {
    grid-template-columns: 1fr 1fr;
  }

  .proj-stack .proj-card {
    min-height: 400px;
  }
}

.proj-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  overflow: hidden;
  text-decoration: none;
  color: var(--fg-contrast);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-1);
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}

.proj-card:hover,
.proj-card:focus-visible {
  border-color: var(--line-2);
  box-shadow: var(--shadow-2);
}

.proj-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Ruht monochrom — Markenlogik: erst Interaktion öffnet den Farbkanal; auf Touch
   ist monochrom der Dauerzustand (Statement, kein Fallback). brightness .84 zieht
   das Plakat in die ink-Welt und schützt den Text auf hellen Fotos (NTG-Buchseite),
   contrast 1.06 hält die Graustufen knackig. */
.proj-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.84) contrast(1.06);
  transition: filter var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}

/* Scrim als Ease-Kurve in 10 Stops statt linearer Rampe (kein sichtbares
   Gradient-Band); trägt Meta, Titel und Beschreibung im Fuß. */
.proj-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
      rgba(5, 5, 7, 0.96) 0%,
      rgba(5, 5, 7, 0.94) 8%,
      rgba(5, 5, 7, 0.91) 16%,
      rgba(5, 5, 7, 0.86) 25%,
      rgba(5, 5, 7, 0.78) 34%,
      rgba(5, 5, 7, 0.67) 44%,
      rgba(5, 5, 7, 0.53) 54%,
      rgba(5, 5, 7, 0.38) 65%,
      rgba(5, 5, 7, 0.23) 76%,
      rgba(5, 5, 7, 0.10) 87%,
      rgba(5, 5, 7, 0.03) 94%,
      rgba(5, 5, 7, 0) 100%) bottom / 100% 88% no-repeat;
}

/* Frost-Verlauf unter dem Text: die Foto-Motive sind selbst Text (Code,
   Griechisch), der Scrim allein lässt deren scharfe Glyphen durchscheinen ·
   der Blur nimmt ihnen die Kanten, oben bleibt das Foto scharf. Ohne
   backdrop-filter-Support bleibt nur der Scrim (lesbar, nur unruhiger). */
.proj-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 35%, rgba(0, 0, 0, 0.5) 55%, transparent 78%);
  mask-image: linear-gradient(to top, #000 0%, #000 35%, rgba(0, 0, 0, 0.5) 55%, transparent 78%);
}

/* padding-top hält dem Foto auch bei langem Titel ein Sichtfenster frei;
   min-height an der Karte + Flow-Fuß statt fixer Höhe: langer Text vergrößert
   die Karte, statt in die Foto-Zone zu schieben. */
.proj-card__foot {
  position: relative;
  z-index: 2;
  padding: 3rem 1.5rem 1.375rem;
}

/* Wellenlängen-Strich: das eine gelbe Element der Karte */
.proj-card__rule {
  display: block;
  width: 2.25rem;
  height: 3px;
  margin: 0 0 0.875rem;
  border-radius: var(--radius-full);
  background: var(--accent);
  transition: width var(--dur) var(--ease);
}

/* text-shadow als lokaler Schutz zusätzlich zum Scrim: die Titelzeile kann je
   nach Motiv in der dünnen Scrim-Zone auf hellem Bildinhalt liegen */
.proj-card__name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.625rem, 4.5vw, 2.375rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--fg-contrast);
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(5, 5, 7, 0.55), 0 2px 16px rgba(5, 5, 7, 0.45);
}

.proj-card__desc {
  margin: 0.5rem 0 0;
  max-width: 46ch;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--fg-2);
  text-shadow: 0 1px 2px rgba(5, 5, 7, 0.6), 0 1px 8px rgba(5, 5, 7, 0.5);
}

.proj-card__tags {
  display: flex;
  gap: 0.4375rem;
  margin-top: 0.875rem;
  flex-wrap: wrap;
}

/* Farb-Reveal nur auf Hover-fähigen Geräten; Touch bleibt bewusst monochrom */
@media (hover: hover) {
  .proj-card:hover .proj-card__photo,
  .proj-card:focus-visible .proj-card__photo {
    filter: grayscale(0) brightness(0.96) contrast(1);
    transform: scale(1.03);
  }

  .proj-card:hover .proj-card__rule,
  .proj-card:focus-visible .proj-card__rule {
    width: 4.5rem;
  }
}

/* Ohne Foto: Blueprint-Hatch als Fläche, Icon oben rechts, Fuß identisch */
.proj-card--noshot {
  background-color: var(--surface-inset);
  background-image: repeating-linear-gradient(135deg, var(--line-1), var(--line-1) 1px, transparent 1px, transparent 11px);
}

.proj-card--noshot::before {
  content: none;
}

.proj-card__icon {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: var(--radius-3);
}

@media (max-width: 640px) {
  .proj-card {
    min-height: 300px;
  }

  .proj-card__foot {
    padding: 3rem 1.125rem 1.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .proj-card,
  .proj-card__photo,
  .proj-card__rule {
    transition: none;
  }

  .proj-card:hover .proj-card__photo,
  .proj-card:focus-visible .proj-card__photo {
    transform: none;
  }
}

/* --- Home Sections --- */
.home-section {
  margin-top: 1rem;
}

/* --- Blog Feature (iOS: vertikale Karte, Bild oben) — Home solo + Blog-Liste im Grid --- */
.blog-feature {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-4);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.blog-feature:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--line-2);
}

.blog-feature__media {
  overflow: hidden;
  background: var(--bg-raised);
  aspect-ratio: 16 / 10;
}

.blog-feature__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body füllt die Karte, Tag-Zeile sitzt an der Unterkante: Karten einer
   Grid-Reihe sind gleich hoch, umbrechende Titel fressen den flexiblen
   Raum überm Footer statt die Karte zu verlängern. */
.blog-feature__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.125rem 1.375rem 1.375rem;
}

.blog-feature__date {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg-3);
}

.blog-feature__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0.375rem 0 0;
  transition: color var(--dur-fast) var(--ease);
}

.blog-feature__dek {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0.4375rem 0 0;
}

.blog-feature__foot {
  display: flex;
  gap: 0.4375rem;
  margin-top: auto;
  padding-top: 0.875rem;
  flex-wrap: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
  mask-image: linear-gradient(to right, #000 82%, transparent);
}

.blog-feature__foot .bm-tag {
  flex: 0 0 auto;
}

/* Blog-Karten (Home + Blog-Liste): gleiches Karten-Design, responsives Grid.
   Kein align-items: start — Karten strecken sich auf Reihenhöhe. */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

/* --- Blog Index (grouped Note-Card-Liste) --- */
.note-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.note-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.375rem 1rem;
  align-items: start;
  padding: 1.25rem 1.375rem;
  text-decoration: none;
  color: inherit;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.note-card:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--line-2);
}

.note-card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  transition: color var(--dur-fast) var(--ease);
}

.note-card__date {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--text-faint);
  white-space: nowrap;
  padding-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}

.note-card__excerpt {
  grid-column: 1 / 2;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0.25rem 0 0;
  max-width: 60ch;
}

.note-card__tags {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.45rem;
  align-items: center;
  margin-top: 0.875rem;
  flex-wrap: wrap;
}

.note-card__read {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--fg-4);
}

@media (max-width: 720px) {
  .note-card {
    grid-template-columns: 1fr;
  }

  .note-card__date {
    grid-row: 1;
  }
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .site-main {
    padding: 1.5rem 1rem;
  }

}

/* Mobile: Nav bleibt inline im Header (kein Einklappen) — nur kompakter. */
@media (max-width: 700px) {
  .nav-brand svg {
    height: 30px;
  }

  .nav-link {
    padding: 8px 12px;
    font-size: 15px;
  }
}

/* --- iOS-Komponenten: Tag (Chip) + Badge (Status-Pill) --- */
.bm-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-2);
  background: var(--fill-secondary);
  border-radius: var(--radius-full);
  line-height: 1.35;
  white-space: nowrap;
}

.bm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
  background: var(--fill-secondary);
  border-radius: var(--radius-full);
  line-height: 1.5;
  white-space: nowrap;
}

.bm-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex: none;
}

.bm-badge--ok {
  background: var(--ok-tint);
  color: var(--ok);
}

.bm-badge--warn {
  background: var(--warn-tint);
  color: var(--warn);
}

/* --- iOS-Komponenten: Spinner (indeterminierter Loader) --- */
.bm-spinner {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border: 2.5px solid var(--line-2);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: bm-spin 0.7s linear infinite;
}

.bm-spinner--sm { width: 0.9em; height: 0.9em; border-width: 2px; }
.bm-spinner--lg { width: 1.6em; height: 1.6em; border-width: 3px; }

@keyframes bm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bm-spinner { animation-duration: 1.6s; } }

/* --- iOS-Komponenten: Kbd (Tastenkappe) --- */
.bm-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  padding: 2px var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--fg-2);
  background: var(--fill-secondary);
  border-radius: var(--radius-1);
  line-height: 1.5;
}

/* --- iOS-Komponenten: Backlink (eine Ebene zurück, Detailseiten) --- */
.bm-backlink {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: -5px;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.bm-backlink svg { width: 17px; height: 17px; }
.bm-backlink:hover { color: var(--link-hover); }

/* --- iOS-Komponenten: Callout (Inline-Notizbox) --- */
.bm-callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--separator);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-1);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.bm-callout--noicon { grid-template-columns: 1fr; }

.bm-callout__icon {
  display: inline-flex;
  width: 1.3em;
  height: 1.3em;
  margin-top: 0.05em;
  color: var(--fg-3);
}

.bm-callout__icon svg { width: 100%; height: 100%; }

.bm-callout__title {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
  margin-bottom: 2px;
}

/* Körper folgt der UI-Sans, nicht der Artikel-Serif (überschreibt .single-page p). */
.bm-callout__body p {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: inherit;
  margin: 0 0 var(--space-3);
}

.bm-callout__body > :last-child { margin-bottom: 0; }

.bm-callout--info { background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.bm-callout--info .bm-callout__icon { color: var(--accent); }
.bm-callout--ok { background: var(--ok-tint); border-color: transparent; }
.bm-callout--ok .bm-callout__icon { color: var(--ok); }
.bm-callout--warn { background: var(--warn-tint); border-color: transparent; }
.bm-callout--warn .bm-callout__icon { color: var(--warn); }
.bm-callout--danger { background: var(--danger-tint); border-color: transparent; }
.bm-callout--danger .bm-callout__icon { color: var(--danger); }

/* --- iOS-Komponenten: SearchField (bm-search) — Spec: components/forms/forms.css --- */
.bm-search { position: relative; display: flex; align-items: center; }
.bm-search[hidden] { display: none; }
.bm-search__icon { position: absolute; left: 15px; width: 18px; height: 18px; color: var(--fg-3); pointer-events: none; }
.bm-search__input {
  width: 100%;
  height: var(--control-md);
  padding: 0 38px 0 42px; /* 19px-Schrift der Site braucht mehr Luft zum Icon als die 17px der Spec */
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--fg-1);
  background: var(--ink-2);
  border: var(--border-hairline) solid var(--line-1);
  border-radius: var(--radius-full);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.bm-search__input::placeholder { color: var(--fg-4); }
.bm-search__input:focus {
  outline: none;
  background: var(--ink-2);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-full); /* globale :focus-visible-Regel (Accessibility) setzt sonst 2px */
}
.bm-search__input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.bm-search__clear {
  position: absolute;
  right: 10px;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--fill-secondary);
  color: var(--fg-2);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.bm-search__clear svg { width: 13px; height: 13px; }
.bm-search__clear:hover { color: var(--fg-1); }
.bm-search__clear:focus-visible { outline: none; border-radius: var(--radius-full); box-shadow: var(--shadow-focus); }
.bm-search__clear[hidden] { display: none; }

/* --- Blog-Suche (Einsatz: Blog-Listen-Masthead) --- */
.blog-search { margin-top: var(--space-5); max-width: 420px; }
.blog-search-empty { font-family: var(--font-ui); font-size: var(--text-base); color: var(--fg-3); }
.blog-search-empty:empty { margin: 0; } /* leer = kein Geisterabstand; Element bleibt für aria-live im Tree */
.blog-feature[hidden] { display: none; }

/* --- Accessibility --- */
/* Sichtbarer Tastatur-Fokus überall (Maus-Fokus bleibt unberührt via :focus-visible). */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* .pill-dropdown-btn setzt outline:none — eigener Override schlägt das bei Tastatur-Fokus. */
.pill-dropdown-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Skip-Link: erst bei Fokus sichtbar, springt zum Hauptinhalt. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 1000;
  padding: 0.6rem 1rem;
  background: var(--bg-raised);
  color: var(--text-bright);
  border: 1px solid var(--accent);
  border-radius: 4px;
  text-decoration: none;
}

.skip-link:focus {
  top: 8px;
}

/* Mit tabindex=-1 fokussiertes <main> soll keinen Outline-Ring zeigen. */
.site-main:focus {
  outline: none;
}