/* ══════════════════════════════════════════════
   SCHRIFTEN, lokal ausgeliefert
   Bewusst nicht ueber fonts.googleapis.com: die dynamische Einbindung
   uebertraegt die IP der Besucher an Google und ist in Deutschland
   abgemahnt worden (LG Muenchen I, 20.01.2022, 3 O 17493/20).
   Beide Familien stehen unter der SIL Open Font License 1.1 und
   duerfen deshalb selbst gehostet werden.
   Enthalten: latin und latin-ext, das deckt Umlaute und ss ab.
   ══════════════════════════════════════════════ */
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans/ibm-plex-sans-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans/ibm-plex-sans-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans/ibm-plex-sans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans/ibm-plex-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans/ibm-plex-sans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans/ibm-plex-sans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono/jetbrains-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono/jetbrains-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/jetbrains-mono/jetbrains-mono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/jetbrains-mono/jetbrains-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono/jetbrains-mono-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono/jetbrains-mono-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══════════════════════════════════════════════
   0. DESIGN TOKENS – zwei Paletten
   Alle Kontraste sind gegen WCAG 2.1 AA gerechnet,
   siehe Kommentar je Wert.
   ══════════════════════════════════════════════ */
:root {
  /* ── Palette GRÜN (Standard, PCB-Ästhetik) ── */
  --color-bg: #080e0c;
  --color-bg-alt: #0a1510;
  --color-surface: #0f1a14;
  --color-surface-hover: #162318;
  --color-border: #1a2e22;

  --accent-900: #0a1f17;
  --accent-700: #0f6b4e;
  --accent-500: #29ab87;   /* 6.74:1 auf bg */
  --accent-400: #3dc9a0;   /* 9.33:1 auf bg */
  --accent-300: #6edcba;   /* 10.70:1 auf surface */
  --accent-rgb: 41, 171, 135;

  --color-text: #e2e8f0;   /* 15.80:1 */
  --color-text-muted: #94a3b8; /* 7.59:1 */
  --color-text-dim: #74839b;   /* 5.07:1 – vorher #64748b mit 4.09:1, das war unter AA */

  --lane-edu: #4ecdc4;     /* 10.06:1 */
  --lane-cert: #f0c040;    /* 11.42:1 */

  --hero-grid: #0f2a1a;
  --hero-grid-dim: #071a0f;

  --font-display: 'JetBrains Mono', monospace;
  --font-body: 'IBM Plex Sans', sans-serif;
  --radius: 8px;
  --radius-lg: 16px;
  --transition: cubic-bezier(0.22, 1, 0.36, 1);
  /* Der sichtbare Abstand zweier Sektionen ist das Doppelte davon plus die
     Höhe der .trace-connector-Linie dazwischen. Vorher ergab das bis zu 360px,
     was als Lücke gelesen wurde statt als Gliederung. */
  --spacing-section: clamp(52px, 6vw, 88px);
  --max-width: 1200px;
}

/* ── Palette CRIMSON – Basis #7F0000 ──
   #7F0000 pur erreicht auf dem dunklen Grund nur 1.81:1 und trägt
   deshalb keinen Text und keine dünnen Linien. Es bleibt die Basis
   für Flächen (weißer Text darauf: 11.04:1); Schrift und Konturen
   laufen über die aufgehellte Rampe. */
:root[data-theme="crimson"] {
  --color-bg: #0d0707;
  --color-bg-alt: #140a0a;
  --color-surface: #1a0e0e;
  --color-surface-hover: #231414;
  --color-border: #331c1c;

  --accent-900: #2b0808;
  --accent-700: #7F0000;   /* die gewünschte Basis, nur als Fläche */
  --accent-500: #dc5b57;   /* 5.40:1 auf bg */
  --accent-400: #e8817d;   /* 7.49:1 auf bg */
  --accent-300: #f2a5a1;   /* 9.59:1 auf surface */
  --accent-rgb: 220, 91, 87;

  --color-text: #f0e6e6;   /* 16.34:1 */
  --color-text-muted: #b8a0a0; /* 8.16:1 */
  --color-text-dim: #a08787;   /* 6.01:1 */

  --lane-edu: #d9924e;     /* 7.78:1 */
  --lane-cert: #e0b84e;    /* 10.60:1 */

  --hero-grid: #2a0f0f;
  --hero-grid-dim: #1a0808;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.5s ease, color 0.5s ease;
}
::selection { background: var(--accent-500); color: #fff; }
:focus-visible {
  outline: 2px solid var(--accent-400);
  outline-offset: 3px;
  border-radius: 3px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════
   1. NOISE OVERLAY & GRID TEXTURE
   ══════════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(var(--accent-rgb), 0.03) 1px, transparent 0);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

/* ══════════════════════════════════════════════
   2. NAVIGATION
   ══════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 18px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 40px;
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo span { color: var(--accent-400); }
.nav-right { display: flex; align-items: center; gap: 26px; }
.nav-links { display: flex; gap: 26px; list-style: none; }
.nav-links a {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.3s;
  position: relative;
  white-space: nowrap;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0; right: 0;
  height: 1px;
  background: var(--accent-500);
  transform: scaleX(0);
  transition: transform 0.3s var(--transition);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { transform: scaleX(1); }

/* ── Nav-Werkzeuge: Sprache + Farbe ── */
.nav-tools { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.lang-switch { position: relative; }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  padding: 5px 10px 5px 12px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: all 0.3s;
}
.lang-btn:hover { color: #fff; border-color: var(--accent-500); }
.lang-btn svg { transition: transform 0.3s var(--transition); }
.lang-switch.open .lang-btn svg { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 108px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.3s var(--transition);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu a {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 5px;
  transition: all 0.25s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lang-menu a:hover { background: var(--color-surface-hover); color: #fff; }
.lang-menu a[aria-current="true"] { color: var(--accent-400); }
.lang-menu a[aria-current="true"]::before { content: '›'; margin-right: -2px; }

.theme-switch {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  padding: 4px 6px;
}
.theme-dot {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s var(--transition);
  position: relative;
}
.theme-dot--green { background: #29ab87; }
.theme-dot--crimson { background: #7F0000; }
.theme-dot[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 3px currentColor;
  transform: scale(1.1);
}
.theme-dot--green[aria-pressed="true"] { color: #3dc9a0; }
.theme-dot--crimson[aria-pressed="true"] { color: #dc5b57; }
.theme-dot:hover { transform: scale(1.15); }

/* Mobile-Elemente: standardmäßig aus, per Media Query an */
.mobile-menu-btn { display: none; }
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-bg) 97%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.3s;
  padding: 8px 16px;
}
.mobile-nav a:hover, .mobile-nav a:active { color: var(--accent-400); }
.mobile-nav-tools {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
}
.mobile-nav-tools a {
  font-size: 13px;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  padding: 7px 16px;
}
.mobile-nav-tools a[aria-current="true"] { color: var(--accent-400); border-color: var(--accent-500); }

/* ══════════════════════════════════════════════
   3. HERO
   ══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#hero-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1010px;
  padding: 0 24px;
}
/* Zeile 1 */
.hero-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-400);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.hero-label::before, .hero-label::after {
  content: '';
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-500), transparent);
  flex-shrink: 0;
}
/* Zeile 2 */
.hero-name {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 18px;
}
.hero-name .accent { color: var(--accent-400); }
/* Zeile 3 */
.hero-role {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 300;
  color: var(--color-text-muted);
  margin-bottom: 32px;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
/* Zeile 4 */
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(11px, 1.15vw, 13px);
  font-weight: 400;
  color: var(--color-text-dim);
  letter-spacing: 0.05em;
  padding: 12px 24px;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  display: inline-block;
  line-height: 1.5;
  background: var(--color-bg);
}
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-indicator span {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--color-text-dim);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--accent-500), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ══════════════════════════════════════════════
   4. SECTION-SYSTEM
   ══════════════════════════════════════════════ */
.section {
  position: relative;
  z-index: 2;
  padding: var(--spacing-section) 40px;
}
.section-inner { max-width: var(--max-width); margin: 0 auto; }
.section-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-500);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent-500);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 20px;
}
.section-subtitle {
  font-size: 17px;
  color: var(--color-text-muted);
  max-width: 640px;
  line-height: 1.7;
}
.trace-connector {
  width: 1px;
  height: 56px;
  margin: 0 auto;
  background: linear-gradient(to bottom, rgba(var(--accent-rgb), 0.25), transparent);
  position: relative;
}
.trace-connector::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent-500);
  border-radius: 50%;
  position: absolute;
  top: 0; left: -2.5px;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.4);
}

/* ══════════════════════════════════════════════
   5. ÜBER MICH – 4x4-Raster nach Vorgabe des Kunden
   ══════════════════════════════════════════════
   Text links über drei Zeilen, Foto rechts oben über zwei, zwei Kacheln
   unter dem Foto, die restlichen vier über die volle Breite in der letzten
   Zeile. Seit der Text gekürzt ist, stünden vier Kacheln sonst allein rechts.
   Foto und Kacheln liegen direkt im Raster, ohne Zwischencontainer. */
.about-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "text  text  photo photo"
    "text  text  photo photo"
    "text  text  card1 card2"
    "card3 card4 card5 card6";
  gap: 16px 24px;
  margin-top: 48px;
  align-items: start;
}
.about-text   { grid-area: text; }
.about-photo  { grid-area: photo; }
.fact-card--1 { grid-area: card1; }
.fact-card--2 { grid-area: card2; }
.fact-card--3 { grid-area: card3; }
.fact-card--4 { grid-area: card4; }
.fact-card--5 { grid-area: card5; }
.fact-card--6 { grid-area: card6; }
.about-lead {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  color: var(--accent-300);
  line-height: 1.55;
  margin-bottom: 22px;
  padding-left: 18px;
  border-left: 2px solid var(--accent-500);
}
.about-text {
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.8;
}
.about-text p + p { margin-top: 16px; }

/* Foto im Format 4:3 */
.about-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.about-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
}
/* Liegt unter dem Bild und wird sichtbar, solange keine Datei da ist. */
.about-photo-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-text-dim);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 10px,
      rgba(var(--accent-rgb), 0.035) 10px, rgba(var(--accent-rgb), 0.035) 20px),
    var(--color-surface);
}
.about-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4);
}
.about-photo-corner {
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid var(--accent-500);
  opacity: 0.5;
  z-index: 4;
}
.about-photo-corner--tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.about-photo-corner--br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* Sechs Kacheln, platziert über grid-template-areas weiter oben */
.fact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 18px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.fact-card:hover {
  border-color: var(--accent-500);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.1);
}
.fact-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-500), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.fact-card:hover::before { opacity: 1; }
.fact-icon {
  width: 34px; height: 34px;
  background: var(--accent-900);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--accent-400);
}
.fact-value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
/* Die Zahlkachel darf größer auftreten als die Textkacheln. */
.fact-card--metric .fact-value { font-size: 24px; }
.fact-label {
  font-size: 12.5px;
  color: var(--color-text-dim);
  letter-spacing: 0.01em;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════
   6. VITA – eine Zeitachse, drei Spuren
   Positionen kommen aus echten Datumswerten (siehe JS),
   die Balkenlänge entspricht also der echten Dauer.
   ══════════════════════════════════════════════ */
.vita-section {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.vita-wrapper {
  position: relative;
  margin-top: 44px;
  /* Startwerte; das Skript misst die Karten und korrigiert sie. */
  --vita-axis-y: 174px;
  --vita-edu-y: 229px;
  --vita-job-y: 279px;
  --vita-cert-y: 322px;
  --vita-bottom-y: 350px;
  height: var(--vita-h, 640px);
  overflow: hidden;
  /* Bewusst kein cursor: none. Die Zeitachse zeigt denselben Zeiger wie der
     Rest der Seite, die Hand erscheint erst über Balken und Rauten. */
}
.vita-track {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Jahresachse */
.vita-axis {
  position: absolute;
  left: 0; right: 0;
  top: var(--vita-axis-y);
  height: 30px;
  border-bottom: 1px solid var(--color-border);
}
.vita-tick {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 7px;
  background: var(--color-border);
}
.vita-tick--major { height: 12px; background: rgba(var(--accent-rgb), 0.4); }
.vita-year {
  position: absolute;
  bottom: 14px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-text-dim);
  white-space: nowrap;
}
/* Senkrechte Raster durch alle Spuren */
.vita-grid-line {
  position: absolute;
  top: calc(var(--vita-axis-y) + 30px);
  height: calc(var(--vita-cert-y) - var(--vita-axis-y) - 10px);
  width: 1px;
  background: linear-gradient(to bottom, var(--color-border), transparent);
  opacity: 0.55;
}

/* Spurlinien */
.vita-lane-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
}
.vita-lane-line--edu  { top: var(--vita-edu-y); background: color-mix(in srgb, var(--lane-edu) 22%, transparent); }
.vita-lane-line--job  { top: var(--vita-job-y); background: rgba(var(--accent-rgb), 0.25); }
.vita-lane-line--cert { top: var(--vita-cert-y); background: color-mix(in srgb, var(--lane-cert) 22%, transparent); }

/* Spurbeschriftung, bleibt beim Scrollen links stehen */
.vita-lane-label {
  position: absolute;
  left: 14px;
  z-index: 30;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  pointer-events: none;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    var(--color-bg-alt) 0%, var(--color-bg-alt) 72%, transparent 100%);
  padding-right: 22px;
}
.vita-lane-label--edu  { top: var(--vita-edu-y); color: var(--lane-edu); }
.vita-lane-label--job  { top: var(--vita-job-y); color: var(--accent-400); }
.vita-lane-label--cert { top: var(--vita-cert-y); color: var(--lane-cert); }

/* Balken für Zeitbereiche */
.vita-bar {
  position: absolute;
  height: 34px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 10px;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  z-index: 10;
}
.vita-bar--edu {
  top: calc(var(--vita-edu-y) - 17px);
  background: color-mix(in srgb, var(--lane-edu) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--lane-edu) 45%, transparent);
}
.vita-bar--job {
  top: calc(var(--vita-job-y) - 17px);
  background: rgba(var(--accent-rgb), 0.16);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
}
.vita-bar-years {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vita-bar--edu .vita-bar-years { color: var(--lane-edu); }
.vita-bar--job .vita-bar-years { color: var(--accent-300); }
.vita-bar:hover {
  transform: scaleY(1.12);
  z-index: 25;
}
.vita-bar--edu:hover {
  background: color-mix(in srgb, var(--lane-edu) 30%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--lane-edu) 30%, transparent);
}
.vita-bar--job:hover {
  background: rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.3);
}
/* laufender Eintrag: angeschnittene rechte Kante */
.vita-bar--ongoing {
  border-right-style: dashed;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Punkte für Weiterbildungen.
   Die Raute steckt im Pseudo-Element, nicht im Element selbst. Sonst würde
   rotate(45deg) auch die Trefferfläche mitdrehen und "seitlich breiter" wäre
   in Wahrheit "diagonal breiter". So bleibt die Fläche ein aufrechtes Rechteck:
   deutlich breiter als hoch, damit sie leichter zu treffen ist, ohne in die
   Berufsspur darüber zu ragen. 46x24 lässt bei 43px Spurabstand 14px Luft und
   erfüllt WCAG 2.5.8 (Target Size Minimum, 24x24) unmittelbar, statt sich auf
   die Abstands-Ausnahme zu stützen. Der engste Abstand zweier Weiterbildungen
   liegt bei 7 Monaten (~68px), die 46px breiten Flächen überlappen sich also
   nicht. */
.vita-point {
  position: absolute;
  top: var(--vita-cert-y);
  width: 46px; height: 24px;
  margin-left: -23px;
  margin-top: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 12;
}
.vita-point::before {
  content: '';
  width: 17px; height: 17px;
  background: var(--color-bg-alt);
  border: 2px solid var(--lane-cert);
  transform: rotate(45deg);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.vita-point:hover, .vita-point:focus-visible { z-index: 25; }
.vita-point:hover::before, .vita-point:focus-visible::before {
  background: var(--lane-cert);
  transform: rotate(45deg) scale(1.45);
  box-shadow: 0 0 20px color-mix(in srgb, var(--lane-cert) 55%, transparent);
}

/* Verbindung Balken zu Karte */
.vita-stem {
  position: absolute;
  width: 1px;
  opacity: 0;
  transition: opacity 0.35s;
  z-index: 14;
  pointer-events: none;
}
.vita-stem--edu {
  top: calc(var(--vita-axis-y) - 2px); height: calc(var(--vita-edu-y) - var(--vita-axis-y) - 15px);
  background: linear-gradient(to top, var(--lane-edu), transparent);
}
.vita-stem--job {
  top: calc(var(--vita-job-y) + 17px); height: calc(var(--vita-bottom-y) - var(--vita-job-y) - 17px);
  background: linear-gradient(to bottom, var(--accent-500), transparent);
}
.vita-stem--cert {
  top: calc(var(--vita-cert-y) + 7px); height: calc(var(--vita-bottom-y) - var(--vita-cert-y) - 7px);
  background: linear-gradient(to bottom, var(--lane-cert), transparent);
}

/* Detailkarten */
.vita-card {
  position: absolute;
  width: 360px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 40;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}
.vita-card--edu  { bottom: calc(var(--vita-h, 640px) - var(--vita-axis-y) + 4px); transform: translateY(8px); border-color: color-mix(in srgb, var(--lane-edu) 30%, transparent); }
.vita-card--job  { top: var(--vita-bottom-y); transform: translateY(-8px); border-color: rgba(var(--accent-rgb), 0.3); }
.vita-card--cert { top: var(--vita-bottom-y); transform: translateY(-8px); border-color: color-mix(in srgb, var(--lane-cert) 30%, transparent); }
/* :hover greift auch am Elternteil ohne eigene Fläche, weil die
   Balken als absolut positionierte Kinder im .vita-entry liegen. */
.vita-entry:hover .vita-card,
.vita-entry.is-active .vita-card { opacity: 1; transform: translateY(0); pointer-events: auto; }
.vita-entry:hover .vita-stem,
.vita-entry.is-active .vita-stem { opacity: 1; }
.vita-entry:hover { z-index: 45; }

.vita-card-period {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.vita-card--edu .vita-card-period  { color: var(--lane-edu); }
.vita-card--job .vita-card-period  { color: var(--accent-400); }
.vita-card--cert .vita-card-period { color: var(--lane-cert); }
.vita-card-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 5px;
}
.vita-card-org {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.vita-card-note {
  font-size: 12px;
  color: var(--color-text-dim);
  line-height: 1.55;
  margin-top: 6px;
}
.vita-card-list {
  list-style: none;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vita-card-list li {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.45;
  padding-left: 14px;
  position: relative;
}
.vita-card-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.55;
}
.vita-card--job .vita-card-list li::before  { color: var(--accent-500); opacity: 1; }
.vita-card--edu .vita-card-list li::before  { color: var(--lane-edu); opacity: 1; }

/* Der frühere Ring-Cursor (.vita-cursor) und die Erklärzeile (.vita-hint)
   sind auf Kundenwunsch entfallen: normaler Zeiger, keine Bedienungsanleitung. */

/* Vita mobil: gestapelte Liste statt Achse */
.vita-mobile { display: none; margin-top: 40px; }
.vita-mobile-group + .vita-mobile-group { margin-top: 34px; }
.vita-mobile-heading {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.vita-mobile-group--edu  .vita-mobile-heading { color: var(--lane-edu); }
.vita-mobile-group--job  .vita-mobile-heading { color: var(--accent-400); }
.vita-mobile-group--cert .vita-mobile-heading { color: var(--lane-cert); }
.vita-mobile-item {
  position: relative;
  padding-left: 20px;
  padding-bottom: 20px;
}
.vita-mobile-item::before {
  content: '';
  position: absolute;
  left: 3px; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.vita-mobile-item::after {
  content: '';
  position: absolute;
  left: 7px; top: 18px; bottom: 0;
  width: 1px;
  background: var(--color-border);
}
.vita-mobile-item:last-child::after { display: none; }
.vita-mobile-group--edu  .vita-mobile-item { color: var(--lane-edu); }
.vita-mobile-group--job  .vita-mobile-item { color: var(--accent-500); }
.vita-mobile-group--cert .vita-mobile-item { color: var(--lane-cert); }
.vita-mobile-period {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
}
.vita-mobile-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 3px;
}
.vita-mobile-org { font-size: 12.5px; color: var(--color-text-muted); }
.vita-mobile-note { font-size: 12px; color: var(--color-text-dim); margin-top: 5px; line-height: 1.55; }
.vita-mobile-list {
  list-style: none;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vita-mobile-list li {
  font-size: 12px;
  color: var(--color-text-muted);
  padding-left: 13px;
  position: relative;
  line-height: 1.45;
}
.vita-mobile-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 1px;
  background: currentColor;
}

/* ══════════════════════════════════════════════
   7. EXPERTISE – vier Bereiche, Unterpunkte sichtbar
   Kein Aufklappen: die Unterpunkte sind Teil der Aussage
   und stehen deshalb dauerhaft im Bild.
   ══════════════════════════════════════════════ */
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
  align-items: start;
}
.expertise-area {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 22px 26px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.expertise-area::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-500), transparent);
  opacity: 0;
  transition: opacity 0.45s;
}
.expertise-area:hover { border-color: rgba(var(--accent-rgb), 0.4); transform: translateY(-3px); }
.expertise-area:hover::before { opacity: 1; }
.expertise-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.expertise-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  background: var(--accent-900);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-400);
}
.expertise-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.expertise-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.expertise-item { position: relative; padding-left: 16px; }
/* Knoten im Leiterbahn-Stil vor jedem Hauptpunkt */
.expertise-item::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 6px;
  border-radius: 1px;
  background: var(--accent-500);
}
.expertise-item-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
}
/* Abzweig zu den Unterpunkten */
.expertise-subs {
  list-style: none;
  margin-top: 8px;
  margin-left: 3px;
  padding-left: 13px;
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.expertise-sub {
  position: relative;
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.expertise-sub::before {
  content: '';
  position: absolute;
  left: -13px; top: 9px;
  width: 8px; height: 1px;
  background: var(--color-border);
}
.expertise-sub-text {
  display: inline-block;
  padding: 2px 9px;
  background: var(--accent-900);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--accent-300);
  letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════════
   8. LEISTUNGEN – Karten links, Text rechts
   ══════════════════════════════════════════════ */
.services-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 52px;
  margin-top: 48px;
  align-items: start;
}
.service-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover {
  border-color: var(--accent-500);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.1);
}
.service-card::after {
  content: '';
  position: absolute;
  right: -18px; bottom: -18px;
  width: 62px; height: 62px;
  border: 1px solid var(--accent-500);
  border-radius: 50%;
  opacity: 0.07;
  transition: opacity 0.5s;
}
.service-card:hover::after { opacity: 0.18; }
.service-icon {
  width: 34px; height: 34px;
  background: var(--accent-900);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--accent-400);
}
.service-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.3;
}
.service-desc {
  font-size: 12.5px;
  color: var(--color-text-dim);
  line-height: 1.55;
}
.services-text {
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.8;
}
.services-text p + p { margin-top: 16px; }

/* ══════════════════════════════════════════════
   9. KONTAKT
   ══════════════════════════════════════════════ */
.contact-section {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}
.contact-inner { text-align: center; max-width: 620px; margin: 0 auto; }
.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  background: transparent;
  border: 1px solid var(--accent-500);
  border-radius: 100px;
  color: var(--accent-400);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  margin-top: 38px;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
/* Füllung nutzt die Basisfarbe des Themes, Text darauf wird weiß. */
.contact-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent-700);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}
.contact-cta:hover::before { opacity: 1; }
.contact-cta:hover {
  color: #fff;
  border-color: var(--accent-400);
  box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.15);
}
.contact-cta span { position: relative; z-index: 1; display: inline-flex; align-items: center; }
.contact-links {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--color-text-dim);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}
.contact-link:hover { color: var(--accent-400); }

/* ══════════════════════════════════════════════
   10. FOOTER
   ══════════════════════════════════════════════ */
.footer {
  position: relative;
  z-index: 2;
  padding: 36px 40px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.footer-left {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--color-text-dim);
  letter-spacing: 0.05em;
}
.footer-right { display: flex; gap: 20px; align-items: center; }
.footer-right a {
  font-size: 12px;
  color: var(--color-text-dim);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-right a:hover { color: var(--color-text-muted); }

/* ══════════════════════════════════════════════
   11. SCROLL REVEAL
   ══════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }

/* Wer Bewegung reduziert haben will, bekommt sie nicht aufgezwungen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════
   12. DRUCK / PDF
   Der Browser lässt sich nicht auf "Als PDF speichern" vorbelegen,
   das entscheidet der Nutzer im Dialog. Steuerbar ist nur, wie das
   Ergebnis aussieht: helles Blatt, Zeitachse als Liste, keine Effekte.
   ══════════════════════════════════════════════ */
.print-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  padding: 11px 22px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.print-action:hover {
  color: var(--accent-400);
  border-color: var(--accent-500);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.12);
}
.print-note {
  font-size: 12px;
  color: var(--color-text-dim);
  margin-top: 9px;
  line-height: 1.5;
}

@media print {
  /* Einblend-Animationen aufheben, sonst druckt die halbe Seite leer. */
  .reveal, .reveal:not(.visible) { opacity: 1 !important; transform: none !important; }

  :root, :root[data-theme="crimson"] {
    --color-bg: #fff; --color-bg-alt: #fff; --color-surface: #fff;
    --color-surface-hover: #fff; --color-border: #bbb;
    --color-text: #111; --color-text-muted: #333; --color-text-dim: #555;
    --accent-900: #eee; --accent-700: #333; --accent-500: #222;
    --accent-400: #222; --accent-300: #333; --accent-rgb: 34, 34, 34;
    --lane-edu: #333; --lane-cert: #333;
  }
  body { background: #fff !important; color: #111 !important; }
  body::before, body::after { display: none !important; }

  .nav, .mobile-nav, #hero-canvas, .scroll-indicator, .trace-connector,
  .vita-wrapper, .print-action, .print-note,
  .about-photo-placeholder, .footer-right a[aria-hidden="true"] { display: none !important; }

  /* Gedruckt wird die Listenform der Vita, nicht die Achse. */
  .vita-mobile { display: block !important; }

  .hero { min-height: auto; padding: 0 0 18pt; page-break-after: avoid; }
  .hero-name { color: #111 !important; font-size: 26pt; margin-bottom: 6pt; }
  .hero-name .accent { color: #111 !important; }
  .hero-label { color: #333 !important; font-size: 8pt; margin-bottom: 10pt; }
  .hero-label::before, .hero-label::after { display: none; }
  .hero-role { font-size: 10pt; margin-bottom: 8pt; }
  .hero-tagline { border: 0; padding: 0; font-size: 9pt; }

  .section { padding: 14pt 0 !important; page-break-inside: auto; }
  .section-title { font-size: 15pt; color: #111 !important; margin-bottom: 8pt; }
  .section-label { color: #444 !important; font-size: 8pt; }
  .section-subtitle { font-size: 9.5pt; }
  #about, #vita, #expertise, #services, #contact { page-break-before: auto; }
  h2, h3 { page-break-after: avoid; }

  .services-grid { grid-template-columns: 1fr; gap: 12pt; }
  /* Auf Papier untereinander: Text, Foto, dann die Kacheln zu dritt. */
  .about-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "text  text  text"
      "photo photo photo"
      "card1 card2 card3"
      "card4 card5 card6";
    gap: 6pt;
  }
  .about-text, .services-text { font-size: 9.5pt; line-height: 1.5; }
  .about-photo { max-width: 52mm; border: 1px solid #bbb; }
  .about-photo::after { display: none; } /* Innenschatten würde grau drucken */
  /* Ohne Bilddatei bleibt nur ein leerer Kasten übrig, der nicht aufs Papier gehört.
     Das Raster behält seine Zeile, deshalb kollabiert sie über grid-template-areas
     nicht von selbst. Der Platz ist mit 6pt Abstand aber vernachlässigbar. */
  .about-photo:not(:has(img)) { display: none; }
  .fact-card, .service-card, .expertise-area, .vita-mobile-item {
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ccc;
  }
  .fact-card, .service-card { padding: 7pt; }
  .fact-icon, .service-icon, .expertise-icon { display: none; }
  .service-card::after, .fact-card::before, .expertise-area::before { display: none; }
  .fact-value, .service-title, .expertise-name { font-size: 9.5pt; color: #111 !important; }
  .fact-card--metric .fact-value { font-size: 12pt; }
  .fact-label, .service-desc { font-size: 8.5pt; }

  .expertise-grid { grid-template-columns: repeat(2, 1fr); gap: 8pt; }
  .expertise-area { padding: 8pt; }
  .expertise-head { margin-bottom: 7pt; padding-bottom: 5pt; }
  .expertise-item-name { font-size: 9pt; }
  .expertise-sub-text { background: none; color: #333 !important; font-size: 8.5pt; padding: 0; }
  .expertise-sub-text::before { content: '· '; }

  .vita-mobile-item { border: 0; padding-left: 0; padding-bottom: 9pt; }
  .vita-mobile-item::before, .vita-mobile-item::after { display: none; }
  .vita-mobile-heading { font-size: 9pt; color: #111 !important; letter-spacing: 0.1em; }
  .vita-mobile-period { font-size: 8.5pt; color: #444 !important; }
  .vita-mobile-title { font-size: 10pt; color: #111 !important; }
  .vita-mobile-org, .vita-mobile-note { font-size: 9pt; }
  .vita-mobile-list li { font-size: 8.5pt; }

  .contact-cta { border: 1px solid #888; color: #111 !important; padding: 6pt 12pt; font-size: 10pt; margin-top: 10pt; }
  .contact-cta::before { display: none; }
  .contact-link { color: #111 !important; font-size: 9pt; }
  /* Die Ziele der Profil-Links stehen im Papier sonst nirgends. */
  .contact-link[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 7.5pt; color: #555; }
  .footer { border-top: 1px solid #bbb; padding: 8pt 0; font-size: 8pt; }

  @page { margin: 14mm 12mm; }
}

/* ══════════════════════════════════════════════
   13. RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .expertise-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* Das vierspaltige Raster aus "Kurz zu mir" trägt nur, solange der Textblock
   nicht höher wird als Foto plus Kachelreihe. Weil er über drei Rasterzeilen
   spannt, verteilt Grid jede Mehrhöhe auf genau diese Zeilen und reißt eine
   Lücke unter das Foto. Gemessen am 04.08.2026: 122px statt 14px bei 960px
   Viewport, immer noch 27px statt 16px bei 1201px.
   Die Grenze liegt bei 1280px, weil `.section-inner` mit max-width 1200px
   arbeitet: ab 1280px Viewport ist die Inhaltsbreite konstant, das Layout
   also unabhängig von der Fensterbreite und nachweislich korrekt.
   ACHTUNG: Wird der Text unter "Kurz zu mir" länger, verschiebt sich der
   Kipppunkt nach oben und diese Grenze muss mitwandern. */
@media (max-width: 1280px) {
  .about-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "text  text  text"
      "photo photo photo"
      "card1 card2 card3"
      "card4 card5 card6";
  }
  .about-photo { max-width: 440px; }
}

@media (max-width: 1024px) {
  .nav-links { gap: 18px; }
  .nav-right { gap: 18px; }
  .about-grid { gap: 14px 20px; }
  .services-grid { grid-template-columns: 1fr; gap: 34px; }
  .service-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Touchgeraete: Die breite Desktop-Zeitachse ist zwar darstellbar,
   aber ohne Hover unnoetig umstaendlich zu bedienen. Deshalb nur die Vita
   auf die gestapelte mobile Darstellung umschalten; das restliche
   Tablet-Layout bleibt unveraendert. */
@media (hover: none) and (pointer: coarse) {
  .vita-wrapper { display: none; }
  .vita-mobile { display: block; }
}

@media (max-width: 900px) {
  /* Untereinander: Text, Foto, dann die Kacheln zu dritt. */
  .about-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "text  text  text"
      "photo photo photo"
      "card1 card2 card3"
      "card4 card5 card6";
    gap: 20px;
  }
  .about-photo { max-width: 440px; }
  .nav { padding: 16px 24px; }
  .section { padding: clamp(44px, 6vw, 72px) 24px; }
  /* Zeitachse braucht Zeigergerät und Breite, darunter greift die Liste. */
  .vita-wrapper { display: none; }
  .vita-mobile { display: block; }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .mobile-menu-btn {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    background: none;
    border: 0;
  }
  .mobile-menu-btn span {
    width: 22px; height: 2px;
    background: var(--color-text-muted);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
  }
  .mobile-menu-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .mobile-menu-btn.open span:nth-child(2) { opacity: 0; }
  .mobile-menu-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  /* Sprach- und Farbumschalter bleiben auch mobil direkt in der Navigation sichtbar. */
}

@media (max-width: 600px) {
  .nav { padding: 14px 20px; }
  .nav-right { gap: 10px; }
  .nav-tools { gap: 8px; }
  .lang-btn { padding: 5px 8px 5px 10px; }
  .nav-logo { font-size: 16px; }
  .hero { min-height: 100svh; }
  .hero-content { padding: 0 20px; }
  .hero-label { font-size: 9px; letter-spacing: 0.12em; flex-wrap: wrap; justify-content: center; }
  .hero-label::before, .hero-label::after { width: 20px; }
  .hero-name { font-size: clamp(40px, 12vw, 64px); }
  .hero-role { font-size: 14px; margin-bottom: 26px; line-height: 1.55; }
  .hero-tagline { font-size: 10.5px; padding: 10px 16px; line-height: 1.6; }
  .scroll-indicator { bottom: 24px; }

  .section { padding: clamp(36px, 6vw, 60px) 20px; }
  .section-title { font-size: clamp(24px, 6vw, 36px); }
  .section-subtitle { font-size: 14px; line-height: 1.65; max-width: 100%; }
  .section-label { font-size: 10px; }

  .about-lead { font-size: 15px; padding-left: 14px; }
  .about-text { font-size: 15px; line-height: 1.7; }
  .about-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "text  text"
      "photo photo"
      "card1 card2"
      "card3 card4"
      "card5 card6";
    gap: 10px;
  }
  .fact-card { padding: 16px 14px; }
  .fact-value { font-size: 13.5px; }
  .fact-card--metric .fact-value { font-size: 20px; }
  .fact-label { font-size: 11.5px; }
  .fact-icon { width: 30px; height: 30px; margin-bottom: 10px; }
  .fact-icon svg { width: 15px; height: 15px; }

  .expertise-grid { grid-template-columns: 1fr; gap: 14px; }
  .service-cards { grid-template-columns: 1fr; }
  .services-text { font-size: 15px; line-height: 1.7; }

  .contact-cta { padding: 14px 26px; font-size: 13px; }
  .contact-inner { padding: 0 8px; }
  .contact-links { gap: 16px; }

  .footer { flex-direction: column; gap: 14px; text-align: center; padding: 26px 20px; }
  .footer-right { justify-content: center; flex-wrap: wrap; }
  .footer-left { font-size: 11px; }
  .trace-connector { height: 26px; }
  body::before { background-size: 50px 50px; }
}

@media (max-width: 380px) {
  .about-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "photo" "card1" "card2" "card3" "card4" "card5" "card6";
  }
  .hero-name { font-size: 34px; }
  .section { padding: 30px 16px; }
  .hero-label { font-size: 8px; }
  .hero-role { font-size: 13px; }
}

/* ══════════════════════════════════════════════
14. RECHTSSEITEN (Impressum, Datenschutz)
Gleiche Gestaltung wie die Startseite, aber ohne Effekte:
keine Szene im Kopf, keine Einblendungen, keine Hover-Bewegung.
══════════════════════════════════════════════ */
.page-plain .reveal { opacity: 1; transform: none; }
.page-plain .fact-card:hover,
.page-plain .service-card:hover,
.page-plain .expertise-area:hover { transform: none; box-shadow: none; }

.legal-main {
padding: 128px 40px 80px;
position: relative;
z-index: 2;
}
.legal-inner { max-width: 780px; margin: 0 auto; }
.legal-title {
font-family: var(--font-display);
font-size: clamp(26px, 3.6vw, 40px);
font-weight: 700;
color: #fff;
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: 10px;
}
.legal-updated {
font-family: var(--font-display);
font-size: 11px;
color: var(--color-text-dim);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 40px;
padding-bottom: 22px;
border-bottom: 1px solid var(--color-border);
}
.legal-block { margin-bottom: 34px; }
.legal-block h2 {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--accent-300);
letter-spacing: 0.01em;
margin-bottom: 12px;
}
.legal-block h3 {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: var(--color-text);
margin: 18px 0 8px;
}
.legal-block p,
.legal-block li {
font-size: 15px;
color: var(--color-text-muted);
line-height: 1.75;
}
.legal-block p + p { margin-top: 12px; }
.legal-block ul { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.legal-block li { padding-left: 16px; position: relative; }
.legal-block li::before {
content: '';
position: absolute;
left: 0; top: 10px;
width: 6px; height: 6px;
border-radius: 1px;
background: var(--accent-500);
}
.legal-block a { color: var(--accent-400); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.legal-block a:hover { border-bottom-color: var(--accent-400); }
.legal-address {
font-family: var(--font-display);
font-size: 14px;
color: var(--color-text);
line-height: 1.85;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 18px 20px;
}
/* Platzhalter, die Thomas noch ersetzt, sollen im Text auffallen. */
.legal-todo {
display: inline-block;
background: var(--accent-900);
border: 1px dashed var(--accent-500);
border-radius: 4px;
padding: 1px 8px;
font-family: var(--font-display);
font-size: 13px;
color: var(--accent-300);
}
.legal-hint {
margin-top: 40px;
padding: 16px 18px;
border: 1px dashed var(--color-border);
border-radius: var(--radius);
font-size: 13.5px;
color: var(--color-text-dim);
line-height: 1.65;
}

@media (max-width: 600px) {
.legal-main { padding: 104px 20px 60px; }
.legal-block p, .legal-block li { font-size: 14.5px; }
}

@media print {
.legal-main { padding: 0; }
.legal-title { color: #111 !important; font-size: 17pt; }
.legal-block h2 { color: #111 !important; font-size: 11pt; }
.legal-block p, .legal-block li { font-size: 9.5pt; }
.legal-address { border: 1px solid #ccc; font-size: 9.5pt; }
.legal-hint { display: none; }
}

/* ══════════════════════════════════════════════
15. BEWERBUNGSUNTERLAGEN (Uebersichtsseite)
══════════════════════════════════════════════ */
.docs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
margin-top: 44px;
}
.doc-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 24px 22px 22px;
display: flex;
flex-direction: column;
transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.doc-card:hover { border-color: rgba(var(--accent-rgb), 0.45); transform: translateY(-3px); }
/* Angedeutetes Blatt im Seitenverhaeltnis von A4 */
.doc-preview {
position: relative;
/* Hoehe fuehrt, Breite folgt dem A4-Verhaeltnis. Andersherum schrumpft
   das Blatt in der Flex-Spalte auf null, weil sein Inhalt absolut liegt. */
height: 208px;
aspect-ratio: 210 / 297;
flex: 0 0 auto;
align-self: center;
margin: 0 0 20px;
background: #fff;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.doc-preview-inner { position: absolute; inset: 0; padding: 9% 8%; }
.doc-preview-kicker {
font-family: var(--font-display);
font-size: 4px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: #7F0000;
margin-bottom: 5px;
}
.doc-preview-name { font-family: var(--font-display); font-size: 11px; color: #1d1a18; line-height: 1; margin-bottom: 4px; }
.doc-preview-name b { color: #7F0000; font-weight: 700; }
.doc-preview-rule { height: 1.5px; background: #7F0000; margin-bottom: 9px; }
.doc-preview-line { height: 2px; background: #d8d2ce; border-radius: 1px; margin-bottom: 4px; }
.doc-preview-line--short { width: 52%; }
.doc-preview-line--accent { background: #e3cfcf; width: 34%; }
.doc-preview-block { margin-top: 11px; }

.doc-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: #fff;
margin-bottom: 6px;
}
.doc-meta {
font-family: var(--font-display);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-400);
margin-bottom: 10px;
}
.doc-desc { font-size: 13.5px; color: var(--color-text-dim); line-height: 1.6; flex: 1 1 auto; }
.doc-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.doc-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
border-radius: 100px;
border: 1px solid var(--color-border);
font-family: var(--font-display);
font-size: 11.5px;
letter-spacing: 0.06em;
color: var(--color-text-muted);
text-decoration: none;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.doc-btn:hover { color: #fff; border-color: var(--accent-500); }
.doc-btn--primary { border-color: var(--accent-500); color: var(--accent-400); }
.doc-btn--primary:hover { background: var(--accent-700); color: #fff; }

.docs-all {
margin-top: 26px;
padding: 20px 22px;
border: 1px dashed var(--color-border);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.docs-all p { font-size: 13.5px; color: var(--color-text-dim); line-height: 1.6; margin: 0; }
.docs-all strong { color: var(--color-text); font-weight: 500; }

@media (max-width: 760px) {
.docs-grid { grid-template-columns: 1fr; gap: 18px; }
.doc-preview { height: 240px; }
}