/* ==========================================================================
   MATTHIAS GROSS — PRIVATE HOMEPAGE
   Design-System · Editorial / Redaktionell · Geist + JetBrains Mono
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (hell)
   -------------------------------------------------------------------------- */
:root {
  --header-h: 68px;

  --bg:         #FAF8F5;
  --surface:    #FDFCFA;
  --footer-bg:  #F1EEE8;
  --ink:        #1F2124;
  --muted:      #6B6B65;
  --muted-strong: #5C5C57;
  --border:     #E2DED6;
  --rule:        rgba(138,138,133,0.4);
  --rule-strong: rgba(138,138,133,0.5);

  --accent: #2F5D4B;
  --hover:  #EFF2F0;

  --nav-rgb: 250,248,245;
  --img-filter: none;
  --nav-scrim: transparent;
  --grad-wide:   linear-gradient(100deg,#FAF8F5 0%,#FAF8F5 28%,rgba(250,248,245,0.88) 40%,rgba(250,248,245,0.45) 50%,rgba(250,248,245,0) 60%);
  --grad-narrow: linear-gradient(0deg,#FAF8F5 0%,#FAF8F5 22%,rgba(250,248,245,0.88) 34%,rgba(250,248,245,0) 58%);

  --l-vortrag-bg: #EAF2EC;    --l-vortrag-fg: #2F5D4B;    --l-vortrag-bd: #BDD8C6;
  --l-moderation-bg: #FBF3D9; --l-moderation-fg: #6B5A3E; --l-moderation-bd: #EBD9A0;
  --l-panel-bg: #FBECEC;      --l-panel-fg: #6B4040;      --l-panel-bd: #EFC9C9;
  --l-artikel-bg: #EFEDE8;    --l-artikel-fg: #4A463E;    --l-artikel-bd: #D8D3C8;
  --l-podcast-bg: #F3EDF3;    --l-podcast-fg: #65406B;    --l-podcast-bd: #DFC9E2;
  --l-workshop-bg: #E8F0F7;   --l-workshop-fg: #2F5470;   --l-workshop-bd: #C3D9EC;
  --l-default-bg: #F0EEEA;    --l-default-fg: #1F2124;    --l-default-bd: #D6D3CA;

  --font-display: "Inter Tight", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --r-3: 12px; --r-4: 16px; --r-5: 24px; --r-6: 32px;

  --max-w:  1180px;
  --gutter: clamp(20px, 4vw, 44px);
}

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS (dunkel)
   -------------------------------------------------------------------------- */
/* Nur am Bildschirm: Papier ist weiß, und Chrome druckt Hintergründe
   standardmäßig nicht. Die helle Schrift stünde dann fast unsichtbar da. */
@media screen {
  :root[data-theme="dark"] {
    --bg:        #15171A;
    --surface:   #1C1F22;
    --footer-bg: #101214;
    --ink:       #EAE7E1;
    --muted:     #96968F;
    --muted-strong: #B0AFA8;
    --border:    #2C3034;
    --rule:        rgba(150,150,143,0.26);
    --rule-strong: rgba(150,150,143,0.38);

    --accent: #86BFA3;
    --hover:  #1E2724;

    --nav-rgb: 21,23,26;
    --img-filter: none;
    --nav-scrim: linear-gradient(rgba(21,23,26,0.85), rgba(21,23,26,0));
    --grad-wide:   linear-gradient(100deg,#15171A 0%,#15171A 28%,rgba(21,23,26,0.88) 40%,rgba(21,23,26,0.45) 50%,rgba(21,23,26,0) 60%);
    --grad-narrow: linear-gradient(0deg,#15171A 0%,#15171A 22%,rgba(21,23,26,0.88) 34%,rgba(21,23,26,0) 58%);

    --l-vortrag-bg: #1E3329;    --l-vortrag-fg: #A9DCC2;    --l-vortrag-bd: #365144;
    --l-moderation-bg: #332C1D; --l-moderation-fg: #EBD59E; --l-moderation-bd: #50462F;
    --l-panel-bg: #34221F;      --l-panel-fg: #F0BAB5;      --l-panel-bd: #523734;
    --l-artikel-bg: #2A2824;    --l-artikel-fg: #D3CEC2;    --l-artikel-bd: #3E3A33;
    --l-podcast-bg: #2D2130;    --l-podcast-fg: #E0B9E4;    --l-podcast-bd: #46334A;
    --l-workshop-bg: #1E2C38;   --l-workshop-fg: #A9CBE0;   --l-workshop-bd: #33465A;
    --l-default-bg: #26272A;    --l-default-fg: #D6D4CB;    --l-default-bd: #3A3B3D;
  }
}

/* --------------------------------------------------------------------------
   2b. SCHRIFTEN (selbst gehostet)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/css/fonts/inter-tight-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/css/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/css/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/css/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/css/fonts/jetbrains-mono-500.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   3. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration: underline; }
button { font: inherit; cursor: pointer; }
p { text-wrap: pretty; margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; }
address { font-style: normal; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

main { display: block; padding-top: var(--header-h); }
body.is-home main { padding-top: 0; }

.icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon svg { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   4. TYPOGRAFIE
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 18px;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 600; font-size: clamp(36px, 5.6vw, 52px);
  line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 24px;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600; font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 20px;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 600; font-size: 24px; letter-spacing: -0.01em; margin: 0 0 16px;
}
.h1, .h2, .h3 { text-wrap: balance; }
@media (max-width: 359px) { .h1 { font-size: 28px; } }
.lede { font-size: 17px; line-height: 1.7; margin: 0; max-width: 62ch; }
.lede + .lede { margin-top: 18px; }

.link-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 17px; color: var(--accent);
  border-bottom: 1px solid var(--accent); padding-bottom: 2px; text-decoration: none;
}
.link-more:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }

/* Links im Fließtext: dauerhaft unterstrichen, weil die Farbe allein im hellen
   Design zu wenig Kontrast zum umgebenden Text hat. Links mit eigener Klasse
   (Buttons, link-more, Teaser-Zeilen) bleiben unberührt. */
main :is(p, li, address) a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
}
main :is(p, li, address) a:not([class]):hover { text-decoration-color: currentColor; }

/* Externer Link ohne Fließtext-Umfeld: Text plus external-link-Icon.
   Der gerade Pfeil (arrow-right) bleibt Links innerhalb der Seite vorbehalten. */
a.ext { display: inline-flex; align-items: center; gap: 8px; }
/* Dasselbe Icon innerhalb eines Satzes: kleiner, an der Textlinie ausgerichtet. */
.icon--inline { display: inline-flex; vertical-align: -2px; margin-left: 4px; }

.mono-label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--muted-strong);
}

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }

.section {
  max-width: var(--max-w); margin: 0 auto;
  padding: clamp(48px,7vh,80px) var(--gutter);
  border-top: 1px solid var(--rule);
}
.section--first { border-top: none; padding-top: clamp(48px,8vh,96px); }

.page-head { max-width: var(--max-w); margin: 0 auto; padding: clamp(48px,8vh,96px) var(--gutter) 0; }
.list-section { max-width: var(--max-w); margin: 0 auto; padding: clamp(36px,6vh,64px) var(--gutter) clamp(48px,7vh,80px); }

.two-col {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px,5vw,64px); align-items: start;
}

/* Vorstellungsblock (Startseite) */
.intro { max-width: 62ch; margin: 0 0 clamp(44px,6vh,72px); color: var(--ink); }
.intro p {
  font-size: 19px; line-height: 1.6; margin: 0 0 18px;
  hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;
}
.intro p:last-child { margin-bottom: 0; }

/* Kennzahlen-Kacheln */
.stat-grid {
  margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px;
}
/* Startseite: Kacheln brauchen mehr Mindestbreite, damit die längste Beschriftung
   (BETREUTE DHBW-ARBEITEN) nie über den Innenabstand hinausläuft. */
#home-stats.stat-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (max-width: 760px) {
  #home-stats.stat-grid { grid-template-columns: 1fr; }
}
.stat {
  border: 1px solid var(--border); background: var(--surface);
  padding: clamp(16px,1.8vw,22px); text-align: center;
}
#home-stats .stat { padding: clamp(12px,1.4vw,18px); }
.stat dt {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--muted-strong); margin-bottom: 8px;
}
#home-stats .stat dt { white-space: nowrap; font-size: 11px; letter-spacing: 0.06em; }
.stat dd { margin: 0; font-size: 28px; letter-spacing: -0.01em; }

/* --------------------------------------------------------------------------
   6. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(var(--nav-rgb), 0);
}
body:not(.is-home) .site-header {
  background: rgba(var(--nav-rgb), 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.site-header__inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--header-h);
  display: flex; align-items: center; gap: clamp(16px,3vw,40px);
  border-bottom: 1px solid rgba(138,138,133,0);
}
body:not(.is-home) .site-header__inner {
  border-bottom-color: var(--rule-strong);
}
.brand {
  position: relative;
  flex: 1; min-width: 0;
  font-family: var(--font-display);
  font-weight: 600; font-size: 19px; line-height: 1; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand:hover .brand__name { color: var(--accent); }
.brand__spacer { visibility: hidden; }
/* Ohne Skript steht der Name auf Unterseiten schon dort, wohin components.js
   ihn setzt (margin-top). Auf der Startseite zeigt ihn zuerst der Hero. */
.brand__name {
  position: absolute; left: 0; top: 50%; margin-top: -10px;
  color: inherit; line-height: 1.02; letter-spacing: -0.03em;
  white-space: nowrap; transform-origin: left top; will-change: transform;
}
[data-page="index"] .brand__name { opacity: 0; }

.nav { display: flex; align-items: center; gap: clamp(12px,2vw,26px); }
.nav a {
  font-size: 16px; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.nav a.is-active { color: var(--accent); }

.nav-toggle {
  display: none; min-width: 44px; min-height: 44px;
  align-items: center; justify-content: flex-end;
  background: transparent; border: 0; padding: 0 2px; color: var(--ink);
}
.nav-toggle .icon-close { display: none; }
.nav-toggle .icon-menu { display: block; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 819px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
}

.mobile-nav {
  display: none;
  background: var(--bg); border-top: 1px solid var(--rule);
  padding: 8px var(--gutter) 24px;
}
.mobile-nav.is-open { display: block; }
/* Offenes Menü: Leiste sofort deckend, auch ganz oben im Hero.
   !important schlägt den Inline-Hintergrund aus initHeaderScroll. */
.site-header:has(.mobile-nav.is-open) { background: var(--bg) !important; }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav li { border-bottom: 1px solid var(--rule); }
.mobile-nav a {
  display: block; padding: 16px 0; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
}
.mobile-nav a.is-active { color: var(--accent); }
.mobile-nav .btn-outline { display: block; margin-top: 20px; text-align: center; padding: 15px 20px; }

/* Buttons */
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--ink); border: 1px solid var(--ink);
  padding: 7px 14px; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-outline:hover,
.nav a.btn-outline:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); text-decoration: none; }
.btn-solid {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--bg); background: var(--ink); border: 1px solid var(--ink);
  padding: 14px 26px; min-height: 48px; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-solid:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); text-decoration: none; }

/* --------------------------------------------------------------------------
   7. HERO (Startseite)
   -------------------------------------------------------------------------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end; overflow: hidden;
}
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 78% 46%; filter: var(--img-filter);
}
.hero__scrim { position: absolute; inset: 0; background: var(--grad-wide); }
.hero__navscrim { position: absolute; top: 0; left: 0; right: 0; height: 140px; background: var(--nav-scrim); pointer-events: none; }
@media (max-width: 760px) {
  .hero__scrim { background: var(--grad-narrow); }
}
.hero__content {
  position: relative; width: 100%; max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--gutter) clamp(88px,14vh,150px);
}
.hero__inner { max-width: 640px; }
.hero__name {
  font-family: var(--font-display);
  font-weight: 600; font-size: clamp(44px,7.4vw,86px); line-height: 1.02;
  letter-spacing: -0.03em; margin: 0 0 26px;
}
.hero__tagline {
  font-size: clamp(20px,2.4vw,29px); line-height: 1.32; letter-spacing: -0.01em;
  margin: 0 0 18px; max-width: 30ch;
}
.hero__sub { font-size: 17px; line-height: 1.6; color: var(--muted-strong); margin: 0; max-width: 34ch; }

/* --------------------------------------------------------------------------
   8. LISTEN — Auftritte / Veröffentlichungen
   -------------------------------------------------------------------------- */
.tag-pill {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 3px; text-transform: uppercase; white-space: nowrap;
  background: var(--l-default-bg); color: var(--l-default-fg); border: 1px solid var(--l-default-bd);
}
.tag-pill--vortrag { background: var(--l-vortrag-bg); color: var(--l-vortrag-fg); border-color: var(--l-vortrag-bd); }
.tag-pill--impulsvortrag,
.tag-pill--bericht,
.tag-pill--moderation { background: var(--l-moderation-bg); color: var(--l-moderation-fg); border-color: var(--l-moderation-bd); }
.tag-pill--panel { background: var(--l-panel-bg); color: var(--l-panel-fg); border-color: var(--l-panel-bd); }
.tag-pill--artikel { background: var(--l-artikel-bg); color: var(--l-artikel-fg); border-color: var(--l-artikel-bd); }
.tag-pill--podcast { background: var(--l-podcast-bg); color: var(--l-podcast-fg); border-color: var(--l-podcast-bd); }
.tag-pill--fachtext,
.tag-pill--workshop { background: var(--l-workshop-bg); color: var(--l-workshop-fg); border-color: var(--l-workshop-bd); }
.tag-pill--geplant,
.tag-pill--entwurf { background: transparent; color: var(--accent); border-color: var(--accent); }

/* Teaser-Liste (Startseite, immer flach) */
.teaser-list { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--muted); }
.teaser-list li { border-bottom: 1px solid var(--rule-strong); }
.teaser-list__row {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
  padding: 16px 10px; margin: 0 -10px; color: var(--ink); text-decoration: none;
}
a.teaser-list__row:hover { background: var(--hover); text-decoration: none; }
.teaser-list__date { font-family: var(--font-mono); font-size: 12px; color: var(--muted-strong); min-width: 92px; }
.teaser-list__title { flex: 1; min-width: 220px; font-size: 19px; letter-spacing: -0.01em; }
.teaser-list__title span { color: var(--muted-strong); }
.teaser-list__top { display: contents; }
@media (max-width: 760px) {
  .teaser-list__row { flex-direction: column; align-items: stretch; }
  /* Labels stehen immer in einer eigenen Zeile unter dem Titel */
  .teaser-list__top { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: flex-start; order: 1; }
  .teaser-list__title { flex-basis: 100%; min-width: 0; }
  .teaser-list__date { order: 2; min-width: 0; }
}

/* Volle Liste: Tabelle (breit) / Liste (schmal) */
.entry-table { width: 100%; border-collapse: collapse; }
.entry-table th {
  text-align: left; padding: 0 20px 12px 0; font-family: var(--font-mono); font-size: 12px;
  font-weight: 500; letter-spacing: 0.12em; color: var(--muted); border-bottom: 1px solid var(--ink);
}
.entry-table td { padding: 17px 20px 17px 0; vertical-align: baseline; border-bottom: 1px solid var(--rule-strong); }
.entry-table tr { position: relative; }
.entry-table tr:has(a.row-link):hover { background: var(--hover); }
.entry-table .col-date { font-family: var(--font-mono); font-size: 12px; color: var(--muted-strong); white-space: nowrap; width: 110px; }
.entry-table .col-title { font-size: 17px; letter-spacing: -0.01em; color: var(--ink); }
.entry-table .col-title a { color: var(--ink); text-decoration: none; }
/* Stretched Link: die ganze Zeile klickbar machen, ohne den Titeltext optisch
   hervorzuheben — Hover-Feedback kommt allein über den Zeilenhintergrund
   oben (tr:has(a.row-link):hover), analog zu .teaser-list__row / .entry-list__row. */
.entry-table .col-title a.row-link::after { content: ''; position: absolute; inset: 0; }
.entry-table .col-title__with { display: block; margin-top: 4px; font-size: 15px; letter-spacing: 0; color: var(--muted-strong); }
.entry-table .col-venue { font-size: 17px; color: var(--ink); }
.entry-table .col-label { width: 150px; }
.col-label__tags { display: flex; flex-wrap: wrap; gap: 6px; }

.entry-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.entry-list li { border-bottom: 1px solid var(--rule-strong); }
.entry-list__row { display: block; padding: 18px 10px; margin: 0 -10px; color: var(--ink); text-decoration: none; }
a.entry-list__row:hover { background: var(--hover); text-decoration: none; }
.entry-list__top { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.entry-list__title { font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.entry-list__with { display: block; margin-top: 4px; font-size: 15px; letter-spacing: 0; color: var(--muted-strong); }
.entry-list__tags { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; justify-content: flex-end; }
.entry-list__date { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--muted-strong); }
.entry-list__venue { display: block; margin-top: 3px; font-size: 16px; color: var(--ink); }

@media (min-width: 820px) { .entry-list-wrap { display: none; } }
@media (max-width: 819px) { .entry-table-wrap { display: none; } }

/* --------------------------------------------------------------------------
   9. TIMELINE — Werdegang
   -------------------------------------------------------------------------- */
.timeline { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--muted); }
.timeline--full { border-top-color: var(--ink); }
.timeline > li {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--rule-strong);
}
.timeline--full > li { padding: 28px 0; }
.timeline__year { font-family: var(--font-mono); font-size: 12px; color: var(--muted-strong); min-width: 100px; }
.timeline--full .timeline__year { font-size: 15px; }
.timeline__body { flex: 1; min-width: 220px; }
.timeline__role { display: block; font-size: 19px; letter-spacing: -0.01em; }
.timeline--full .timeline__role { font-size: 18px; font-weight: 500; }
.timeline__org { display: block; font-size: 16px; color: var(--muted-strong); margin-top: 4px; }
.timeline__desc { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 10px 0 0; max-width: 62ch; flex-basis: 100%; }
.timeline__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; flex-basis: 100%; }
/* Werdegang gruppiert nach Firma (LinkedIn-Stil) */
.timeline > .timeline__company { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 20px; }
.timeline__logo {
  flex: none; width: 56px; height: 56px; border-radius: 4px;
  object-fit: cover; filter: none; /* Logos immer in Originalfarben */
}
.timeline__main { flex: 1; min-width: 0; }
.timeline__org-name { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; margin: 4px 0 0; }
.timeline__roles { list-style: none; margin: 18px 0 0; padding: 0; }
.timeline__role-item { position: relative; padding: 0 0 26px 24px; }
.timeline__role-item:last-child { padding-bottom: 0; }
.timeline__role-item::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--muted-strong);
}
.timeline__role-item::after {
  content: ""; position: absolute; left: 3.5px; top: 22px; bottom: 6px; width: 1px;
  background: var(--rule-strong);
}
.timeline__role-item:last-child::after { display: none; }
.timeline__date { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--muted-strong); margin-top: 4px; }
.timeline__headline { font-size: 16px; color: var(--muted-strong); margin: 10px 0 0; }
.timeline__role-item .timeline__desc { flex-basis: auto; }
@media (max-width: 560px) {
  .timeline__company { gap: 14px; }
  .timeline__logo { width: 44px; height: 44px; }
}

.timeline__tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 3px; text-transform: uppercase;
  background: var(--l-default-bg); color: var(--muted-strong); border: 1px solid var(--l-default-bd);
}

/* --------------------------------------------------------------------------
   10. ENGAGEMENT (Startseite)
   -------------------------------------------------------------------------- */
.engagement__media { margin: 0; }
.engagement__media-frame { aspect-ratio: 3/2; overflow: hidden; background: var(--footer-bg); }
.engagement__media-frame img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); }
.engagement__media figcaption { font-size: 14px; color: var(--muted-strong); margin-top: 8px; }
.engagement__body p { font-size: 17px; line-height: 1.7; margin: 0 0 16px; max-width: 58ch; }
.engagement__body p:last-of-type { margin-bottom: 24px; }

.error-art { display: flex; justify-content: center; }
.error-art img { width: 100%; max-width: 260px; height: auto; }

.media-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 16px;
  background-image: repeating-linear-gradient(135deg, var(--border) 0 14px, var(--surface) 14px 28px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted);
}
.engagement-station__role { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 22px; }
/* Wie auf der Startseite: Beschriftungen einzeilig, Mindestbreite so gewählt,
   dass BETREUTE ARBEITEN in eine Kachel passt. */
.engagement-station .stat-grid { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.engagement-station .stat-grid--2x2 { grid-template-columns: repeat(2, 1fr); }
.engagement-station .stat { padding: clamp(12px,1.4vw,18px); }
.engagement-station .stat dt { white-space: nowrap; font-size: 11px; letter-spacing: 0.05em; }

/* --------------------------------------------------------------------------
   11. KONTAKT
   -------------------------------------------------------------------------- */
.contact-layout {
  display: flex; flex-wrap: wrap; gap: clamp(24px,3vw,48px); align-items: flex-start;
}
.contact-layout__form { flex: 2 1 380px; min-width: 0; }
.contact-layout__side { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: var(--r-4); }

.info-card { border: 1px solid var(--border); background: var(--surface); padding: clamp(20px,2.4vw,28px); }
.info-card h3 {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 20px; font-weight: 500;
}
.info-card dl { margin: 0; }
.info-card dt {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--muted-strong);
  margin-bottom: 7px; display: flex; align-items: center; gap: 7px;
}
.info-card dd { margin: 0 0 22px; font-size: 17px; }
.info-card dd:last-child { margin-bottom: 0; }
.info-card p { font-size: 15px; line-height: 1.6; color: var(--muted-strong); margin: 0 0 14px; }
.info-card .row { display: flex; align-items: center; gap: 10px; }
.info-card .row + .row { margin-top: 10px; }

.form { display: flex; flex-direction: column; gap: 22px; }
.form-row { display: flex; flex-wrap: wrap; gap: 18px; }
.field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.form-row .field { flex: 1 1 200px; }
.field label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--muted-strong);
}
.field .req { color: var(--l-panel-fg); }
.field input, .field select, .field textarea {
  font-family: var(--font-sans); font-size: 17px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--muted); border-radius: 3px; padding: 13px 14px;
  min-height: 48px; width: 100%; outline: none;
}
.field textarea { min-height: 150px; line-height: 1.6; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 2px rgba(47,93,75,0.15);
}
.form__note { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted-strong); max-width: 56ch; }
.form__foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }

.success-card { display: none; border: 1px solid var(--l-vortrag-bd); background: var(--l-vortrag-bg); padding: clamp(20px,2.4vw,28px); }
.success-card.is-visible { display: block; }
.success-card h3 { font-family: var(--font-display); font-size: 20px; margin: 0 0 10px; }
.success-card p { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0; }

.form-error {
  display: none; border: 1px solid var(--l-panel-bd); background: var(--l-panel-bg);
  color: var(--l-panel-fg); padding: 16px 20px; font-size: 15px; line-height: 1.6; margin-top: 18px;
}
.form-error.is-visible { display: block; }

.field--honeypot {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--footer-bg); }
.site-footer .container { padding: clamp(48px,7vh,88px) var(--gutter); border-top: 1px solid var(--border); }
/* Gewichtete Spalten: der Beschreibungstext links braucht am meisten Platz,
   die Navigation am wenigsten. Gleich breite Spalten quetschen sonst die
   Mailadresse und lassen rechts Restfläche stehen. */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.35fr; gap: clamp(24px,3vw,44px); }
/* Der Fließtext links läuft bis an den Spaltenrand, die Navigation daneben
   wirkt sonst angeklebt. Nur zwischen Spalte 1 und 2 zusätzliche Luft. */
@media (min-width: 881px) {
  .footer-col:first-child { padding-right: clamp(16px,3vw,48px); }
}
/* Unterhalb von 880px reicht der Anteil der dritten Spalte nicht mehr für die
   Mailadresse. Die ist ein unteilbares Wort mit 249px Mindestbreite und würde
   die erste Spalte zusammendrücken, deshalb ab hier gleichmäßige Spalten mit
   250px Mindestbreite. */
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}
.footer-col h3 {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-strong); margin: 0 0 18px; font-weight: 500;
}
.footer-col p { margin: 0; font-size: 17px; line-height: 1.7; max-width: 46ch; color: var(--ink); }
.footer-col p.footer-note { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--muted-strong); }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
/* Akzentfarbe trennt Link von Fließtext, die Unterstreichung bleibt dem
   Hover vorbehalten. */
.footer-col a { color: var(--accent); font-size: 17px; text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
/* Link im Hinweistext übernimmt die Schriftgröße des Absatzes. */
.footer-col p.footer-note a { font-size: inherit; }

/* Ohne Trennlinie, Abstand wie zwischen den Spalten */
.footer-sub { margin-top: clamp(24px,3vw,44px); }

.footer-bottom {
  margin-top: clamp(40px,6vh,64px); padding-top: 20px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between;
}
.footer-bottom span {
  flex: 1 1 220px;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em;
}
.footer-bottom ul { display: flex; align-items: center; gap: 24px; flex: none; }
.footer-bottom a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--accent); text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }

/* Theme-Switch (Fußzeile) */
.theme-switch {
  position: relative; display: block; width: 72px; height: 32px; padding: 0; flex: none;
  border: 1px solid var(--border); border-radius: 3px; background: var(--surface); cursor: pointer;
}
.theme-switch__thumb {
  position: absolute; top: 2px; left: 2px; width: 33px; height: 26px; border-radius: 2px;
  background: var(--hover); border: 1px solid var(--rule-strong); transition: left 160ms ease;
}
[data-theme="dark"] .theme-switch__thumb { left: 35px; }
.theme-switch__icon {
  position: absolute; top: 0; width: 50%; height: 100%;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.theme-switch__icon--light { left: 0; color: var(--accent); }
.theme-switch__icon--dark  { right: 0; }
[data-theme="dark"] .theme-switch__icon--light { color: var(--muted); }
[data-theme="dark"] .theme-switch__icon--dark  { color: var(--accent); }

/* --------------------------------------------------------------------------
   13. ARTIKEL / VOLLTEXT-SEITEN
   -------------------------------------------------------------------------- */
.article { max-width: var(--max-w); margin: 0 auto; padding: clamp(40px,7vh,80px) var(--gutter) clamp(64px,9vh,120px); }
.article__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ink); text-decoration: none;
}
.article__back:hover { color: var(--accent); }
.article__subtitle { font-size: 20px; line-height: 1.4; color: var(--muted-strong); margin: 12px 0 0; }
.article__byline { font-size: 15px; color: var(--muted-strong); margin: 14px 0 0; }
.article__byline strong { color: var(--ink); font-weight: 500; }
.article__body { max-width: 72ch; margin-top: clamp(34px,5vh,56px); }
.article__body h2 { font-family: var(--font-display); font-size: 24px; margin: 44px 0 16px; }
.article__body h2:first-child { margin-top: 0; }
.article__body h3 { font-family: var(--font-display); font-size: 20px; margin: 28px 0 10px; }
.article__body p {
  font-size: 17px; line-height: 1.75; margin: 0 0 18px;
  hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;
}
.article__body ul, .article__body ol { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.article__body li { font-size: 17px; line-height: 1.7; margin-bottom: 8px; }
.article__body code { font-family: var(--font-mono); font-size: 0.9em; }

.article__figure { max-width: 900px; margin: 32px 0; }
.article__figure img { width: 100%; height: auto; filter: var(--img-filter); }
.article__figure figcaption { font-size: 14px; color: var(--muted-strong); margin-top: 8px; }
.section > .article__figure { max-width: none; }
/* Grafik in zwei Fassungen (heller und dunkler Modus), verlinkt auf die volle Auflösung */
.article__figure-link { display: block; }
.figure-theme--dark { display: none; }
/* Gedruckt wird immer die helle Fassung, siehe Abschnitt 2. */
@media screen {
  [data-theme="dark"] .figure-theme--light { display: none; }
  [data-theme="dark"] .figure-theme--dark { display: block; }
}

/* Bildansicht (js/components.js): Grafik füllt die Breite, auf schmalen
   Bildschirmen mindestens 960px breit und seitlich verschiebbar */
.image-zoom {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 56px 16px 16px; border: 0; overflow: auto; overscroll-behavior: contain;
  background: var(--bg); color: var(--ink);
}
.image-zoom[open] { display: flex; flex-direction: column; }
.image-zoom::backdrop { background: var(--bg); }
.image-zoom__img { display: block; flex: none; width: max(100%, 960px); max-width: none; height: auto; margin: auto; }
.image-zoom__close {
  position: fixed; top: 8px; right: 8px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer;
}
.image-zoom__close:hover { color: var(--accent); }
:root:has(.image-zoom[open]) { overflow: hidden; }

.article__callout {
  margin: 32px 0; padding: 18px 22px; border: 1px solid var(--l-vortrag-bd);
  background: var(--l-vortrag-bg); font-size: 16px; line-height: 1.6; color: var(--ink);
}

.kernthesen { max-width: 900px; margin: 32px 0; padding: 22px 24px; border: 1px solid var(--border); background: var(--surface); }
.kernthesen .eyebrow { margin-bottom: 14px; }
.kernthesen ul { list-style: disc; padding-left: 22px; margin: 0; }
.kernthesen li { font-size: 16px; line-height: 1.6; margin-bottom: 8px; }
.kernthesen li:last-child { margin-bottom: 0; }

/* Zitat im Fließtext eines Blogtexts oder Artikels */
.article__body blockquote { margin: 28px 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--accent); color: var(--muted-strong); }
.article__body blockquote p { margin: 0; font-size: 18px; line-height: 1.6; }

.article__source { font-size: 15px; color: var(--muted-strong); margin: 32px 0; }
/* Weiterführende Links unter Auftritten und Artikeln, gestaltet wie Links im Fließtext */
.article__more { font-size: 17px; line-height: 1.75; }
.article__more + .article__more { margin-top: 6px; }

.article__table-wrap { overflow-x: auto; margin: 32px 0; }
/* Hinweis über breiten Tabellen. Ohne Skript erscheint er auf schmalen
   Bildschirmen, components.js blendet ihn aus, sobald die Tabelle passt. */
.article__table-hint { display: none; }
.article__table-hint[hidden] { display: none; }
.article__body .article__table-hint { font-size: 14px; line-height: 1.5; color: var(--muted-strong); margin: 32px 0 -20px; }
@media screen and (max-width: 819px) { .article__table-hint { display: block; } }
.article__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.article__table th, .article__table td {
  text-align: left; vertical-align: top; padding: 10px 14px;
  border: 1px solid var(--border); line-height: 1.5;
}
.article__table th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); background: var(--footer-bg); font-weight: 500;
}
.article__table tfoot td { font-size: 12px; color: var(--muted); border: none; padding-top: 12px; }

.authors { max-width: 900px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--muted); }
.authors-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
.authors-grid > .author-box:only-child { grid-column: span 2; }
.author-box { display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--surface); padding: 22px; }
.author-box p { font-size: 15px; line-height: 1.65; color: var(--muted-strong); margin: 0 0 14px; }
.author-box p:last-of-type { margin-bottom: 0; }
.author-box__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: auto; padding-top: 18px; }
.author-box__link { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--accent); text-decoration: none; }
.author-box__link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Schmal: Autorenkästen untereinander, Listenkopf darf umbrechen (steht hier, damit er die Regeln oben überschreibt) */
@media (max-width: 760px) {
  .authors-grid { grid-template-columns: 1fr; }
  .authors-grid > .author-box:only-child { grid-column: auto; }
  .teaser-list__top, .entry-list__top { flex-wrap: wrap; }
}

/* LinkedIn-Verknüpfungen auf Vortrags- und Artikelseiten (dauerhaft, kein Rotationspool) */
.article-linkedin { max-width: 900px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--muted); }
.article-linkedin .li-grid { margin-top: 20px; margin-bottom: 0; }

/* Stimmen Dritter (Startseite) */
.quote-grid {
  display: grid; grid-template-columns: 1fr; gap: 20px;
}
@media (min-width: 720px) { .quote-grid { grid-template-columns: repeat(2, 1fr); } }
.quote {
  margin: 0; padding: clamp(20px,2.4vw,28px);
  border: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
}
.quote__text { margin: 0; }
.quote__text p {
  margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink);
  hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;
}
.quote__by { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.4; }
.quote__name { font-weight: 600; }
.quote__role { color: var(--muted-strong); }

/* Moderationsblöcke (Auftritte) */
.mod-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
  margin-top: clamp(20px,3vh,32px);
}
.mod-block {
  padding: clamp(20px,2.4vw,28px);
  border: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; gap: 10px;
}
.mod-block__title { margin: 0; font-size: 19px; }
.mod-block__body { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted-strong); }
.mod-block__link { margin-top: 4px; align-self: flex-start; font-size: 14px; }

/* LinkedIn-Beiträge (Startseite) */
.li-grid {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  margin: 0 0 28px;
}
@media (min-width: 720px) { .li-grid { grid-template-columns: repeat(3, 1fr); } }
.li-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); text-decoration: none;
}
.li-card:hover { background: var(--hover); text-decoration: none; }
.li-card__img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 25%;
  border-bottom: 1px solid var(--border);
}
/* Breite und sehr hohe Bilder werden ganz gezeigt, statt Text am Rand abzuschneiden. */
.li-card__img--fit { object-fit: contain; object-position: 50% 50%; background: var(--footer-bg); }
.li-card__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px,2.2vw,24px); flex: 1; }
.li-card__date { font-family: var(--font-mono); font-size: 12px; color: var(--muted-strong); }
.li-card__title {
  margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.01em;
}
.li-card__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted-strong); flex: 1; }
.li-card__more { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--accent); }
.li-card:hover .li-card__more { color: var(--ink); }

/* Blog-Übersicht: Karten wie bei LinkedIn, Titelbilder im Querformat */
.blog-card__img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
.blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }

/* --------------------------------------------------------------------------
   14. IMPRESSUM
   -------------------------------------------------------------------------- */
.legal { max-width: 72ch; }
.legal h2 { font-family: var(--font-display); font-size: 20px; margin: 40px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal address, .legal li { font-size: 16px; line-height: 1.7; color: var(--muted-strong); margin: 0 0 8px; }
.legal ul { list-style: disc; padding-left: 22px; margin: 0 0 8px; }
.legal ul li { margin: 0 0 4px; }
.legal a { color: var(--accent); }

/* Kurzprofil: Porträtfoto neben Kurzbiografie/Rollen */
.kurzprofil-photo { max-width: 240px; margin: 0 0 12px; }
/* "Zahlen" beginnt einen neuen Block, steht also als h2:first-child ohne Abstand. */
.two-col + .legal { margin-top: 40px; }
.kurzprofil-photo img { height: auto; border: 1px solid var(--border); filter: var(--img-filter); }

.todo-callout {
  border: 1px solid var(--l-panel-bd); background: var(--l-panel-bg); color: var(--l-panel-fg);
  padding: 16px 20px; font-size: 15px; line-height: 1.6; margin: 0 0 32px;
}
.todo-callout code { font-family: var(--font-mono); font-size: 13px; }
.todo-mark {
  background: var(--l-panel-bg); color: var(--l-panel-fg); padding: 0 3px; border-radius: 2px;
}

/* --------------------------------------------------------------------------
   15. REVEAL-ANIMATION
   -------------------------------------------------------------------------- */
/* Ausgeblendet wird erst, wenn components.js läuft und .reveal-on setzt.
   Fällt das Skript aus, bleiben alle Abschnitte sichtbar. */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .3s ease-out, transform .3s ease-out; }
.reveal-on [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   16. UTILITIES
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link {
  position: absolute; top: -60px; left: 8px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 10px 16px;
  font-size: 15px; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* --------------------------------------------------------------------------
   17. DRUCK
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; }

  /* Chrome wiederholt fixierte Elemente auf jeder Druckseite, die Kopfzeile
     lag dort über den ersten Textzeilen. Gedruckt steht sie einmal oben. */
  .site-header { position: static; }
  [data-page="index"] .site-header { display: none; }
  main { padding-top: 0; }

  /* Nur Bedienelemente, auf Papier ohne Funktion. */
  .skip-link, .nav, .nav-toggle, .mobile-nav, .mobile-nav.is-open,
  .site-footer, .article__back, .image-zoom, .image-zoom[open] { display: none; }

  /* Ungescrollte Abschnitte blieben sonst leer (Startseite: 9 von 11 Seiten).
     Den Namen im Hero blendet das Skript beim Scrollen per Inline-Stil aus. */
  .reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  #hero-name { opacity: 1 !important; }

  /* Hero ohne Foto: Text über dem Bild braucht den Verlauf dahinter, und den
     druckt Chrome als Hintergrund standardmäßig nicht. */
  .hero { min-height: 0; display: block; }
  .hero__img, .hero__scrim, .hero__navscrim { display: none; }
  .hero__content { padding: 0 var(--gutter); }

  /* LinkedIn-Teaser sind auf Papier nur Verweise ohne Link, kosteten auf
     Vortragsseiten aber bis zu 3 Seiten. Blogkarten (gleiche Klassen) bleiben. */
  .article-linkedin, .section--linkedin { display: none; }

  /* A4 ist schmaler als 720px: Karten nebeneinander statt je eine Seite. */
  .li-grid { grid-template-columns: repeat(3, 1fr); }
  .quote-grid { grid-template-columns: repeat(2, 1fr); }
  #home-stats.stat-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

  /* Ein Formular lässt sich auf Papier nicht ausfüllen, Mail und Region
     im Kasten daneben bleiben stehen. */
  .contact-layout__form { display: none; }

  .article__table-wrap { overflow: visible; }

  /* Überschrift nicht allein am Seitenende, Kästen und Bilder nicht zerteilt. */
  h1, h2, h3, .h1, .h2, .h3, .eyebrow { break-after: avoid; }
  figure, img, blockquote, tr, .author-box, .li-card, .quote, .mod-block, .stat-grid, .info-card,
  .kernthesen, .article__callout, .teaser-list li, .entry-list li, .timeline__role-item { break-inside: avoid; }
  p, li { orphans: 3; widows: 3; }
}