/* ==========================================================================
   Sebastian Hanisch — Operations Research und Machine Learning
   Design-System: "Blaupause" — Technische-Zeichnung-Aesthetik, gebaut aus dem
   visuellen Vokabular von Operations Research selbst: Knoten, Kanten, Routen,
   Netzwerke. Kein generisches Business-Website-Layout.
   ========================================================================== */

/* IBM Plex Mono + Sans (SIL Open Font License 1.1), Untergruppe "latin", selbst gehostet:
   keine Verbindung zu Google-Servern beim Seitenaufruf. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00DE, U+00E0-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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00DE, U+00E0-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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600.woff2') format('woff2');
  unicode-range: U+0000-00DE, U+00E0-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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-700.woff2') format('woff2');
  unicode-range: U+0000-00DE, U+00E0-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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-variable.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;
}

/* ss (Eszett) in IBM Plex Mono hat eine sehr ungewoehnliche Form (grosser Bogen bis weit unter die
   Grundlinie) - fuer dieses eine Zeichen springt hier stattdessen eine aus IBM Plex Sans zugeschnittene,
   gewohnt aussehende Form ein: auf die Mono-Laufweite (600 Einheiten) skaliert und zentriert, damit sie
   sich ins Mono-Zeichenraster einfuegt. Gilt automatisch ueberall, wo font-family: 'IBM Plex Mono' steht -
   auch fuer neue Ueberschriften/Kacheln, ohne dass an der jeweiligen Stelle etwas angepasst werden muss. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-eszett-400.woff2') format('woff2');
  unicode-range: U+00DF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-eszett-600.woff2') format('woff2');
  unicode-range: U+00DF;
}

/* Ersatzschrift mit Plex-Mono-Maßen: Auf Windows ist "monospace" Consolas (0,55 em Zeichenbreite gegen 0,60 em bei Plex
   Mono). Solange die Webschrift lädt, würde Text schmaler umbrechen und beim Wechsel springen (Layout-Sprung, CLS).
   size-adjust = 0,600 / 0,5498 = 109,13 %; die Überschreibungen sind die Plex-Werte (Ober-/Unterlänge 1,025 / 0,275)
   geteilt durch size-adjust. Gemessen mit tools/font_metrics.mjs (Canvas measureText); Consolas fehlt
   auf Mac/Linux/Android - dort passen die Standard-Monospace-Schriften (0,60 em) ohnehin. */
@font-face {
  font-family: 'IBM Plex Mono Fallback';
  font-style: normal;
  font-weight: 400 500;
  src: local('Consolas');
  size-adjust: 109.13%;
  ascent-override: 93.92%;
  descent-override: 25.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback';
  font-style: normal;
  font-weight: 600 700;
  src: local('Consolas Bold');
  size-adjust: 109.13%;
  ascent-override: 93.92%;
  descent-override: 25.2%;
  line-gap-override: 0%;
}

/* Ersatzschrift mit Plex-Sans-Maßen (zweistufig). Der Fließtext fiel beim Laden auf "-apple-system, sans-serif" zurück, auf
   Windows/Chromium aufgelöst zu Arial. Gemessen wurde, wie genau eine Ersatzschrift die Textbreite von Plex Sans trifft, nämlich
   je Absatz das Verhältnis Plex-Breite zu Ersatzbreite über den echten Seitentext (Canvas measureText, tools/font_metrics.mjs):
   Arial streut um 0,71 Prozentpunkte, Calibri nur um 0,49 (Segoe UI 0,58, Tahoma 0,58). Je kleiner die Streuung, desto weniger
   Absätze brechen nach dem Schriftwechsel anders um und lassen die Seite springen (font_shift.mjs: schienenverkehr-,
   bereich-optimierung, bereich-graphentheorie, konzepte-reinforcement-learning lagen über dem Budget).
   1. 'IBM Plex Sans Fallback': Regular aus Calibri (Windows; size-adjust 110,4 % = Mittelwert 110,5 % in feiner Abstimmung am
      Umbruchverhalten ermittelt), Fett aus Arial (105,5 %). Fehlt Calibri (Mac/Linux/Android), entfällt die Regular-Stufe.
   2. 'IBM Plex Sans Fallback Arial': die bisherige Arial-Stufe (101,12 %) für alles, was die erste nicht bedient.
   Die Überschreibungen sind die Plex-Werte (Ober-/Unterlänge 1,025 / 0,275) geteilt durch size-adjust. Ein Schriftschnitt für
   Fett wird mit dem normalen Arial skaliert, weil eine per lokalem Namen zuverlässig ansprechbare "Arial Bold" in
   Playwright/Chromium fehlt; das Fett erscheint während des Ladens also in normaler Stärke. */
@font-face {
  font-family: 'IBM Plex Sans Fallback';
  font-style: normal;
  font-weight: 400 500;
  src: local('Calibri');
  size-adjust: 110.40%;
  ascent-override: 92.84%;
  descent-override: 24.91%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Sans Fallback';
  font-style: normal;
  font-weight: 600 700;
  src: local('Arial');
  size-adjust: 105.50%;
  ascent-override: 97.16%;
  descent-override: 26.07%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Sans Fallback Arial';
  font-style: normal;
  font-weight: 400 500;
  src: local('Arial');
  size-adjust: 101.12%;
  ascent-override: 101.36%;
  descent-override: 27.20%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Sans Fallback Arial';
  font-style: normal;
  font-weight: 600 700;
  src: local('Arial');
  size-adjust: 105.50%;
  ascent-override: 97.16%;
  descent-override: 26.07%;
  line-gap-override: 0%;
}

:root {
  /* Farben */
  --ink:        #14233B;   /* Blaupausen-Navy — dunkle Flaechen, Fliesstext */
  --ink-soft:   #35486A;   /* Navy, weicher — sekundaerer Text auf Papier */
  --paper:      #EEEFEA;   /* Papier — helle Flaechen */
  --paper-line: #D6D9D0;   /* feine Rasterlinien auf Papier */
  --white:      #F7F6F1;   /* Text auf Navy */
  --gold:       #D68A2E;   /* die "optimierte Route" — Akzent, sparsam (nur auf Navy/Weiss als Flaeche, nicht als Fliesstext-Farbe: 2,4:1 auf Papier) */
  --gold-soft:  #E9C48F;
  --teal:       #3E8E86;   /* Graph-Akzent auf Navy (dort per .section-navy-Override) */
  --teal-text:  #2F6B65;   /* dieselbe Akzentfarbe, abgedunkelt fuer WCAG-AA-Kontrast (4.5:1) als Fliesstext auf Papier/Weiss */
  --link:       #955F1D;   /* Link-/Fliesstextfarbe auf Papier/Weiss, WCAG-AA-konform (4.5:1) - Buttons/Route-Grafik bleiben beim helleren --gold */
  --navy:       #14233B;   /* dunkle Flaechen (Hero, Navy-Abschnitte, Fuss): bleibt im Dark Mode gleich, anders als --ink (Textfarbe) */
  --card:       #fff;      /* Karten, Eingabefelder, Hinweise */
  --header-bg:  #EEEFEA;   /* Kopfzeile und mobiles Menue */

  color-scheme: light dark; /* Scrollleisten und Formularelemente folgen dem Farbschema des Systems */

  /* Typografie */
  --f-display: 'IBM Plex Mono', 'IBM Plex Mono Fallback', 'JetBrains Mono', monospace;
  --f-body:    'IBM Plex Sans', 'IBM Plex Sans Fallback', 'IBM Plex Sans Fallback Arial', -apple-system, sans-serif;

  /* Abstaende */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  --maxw: 1180px;
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Feines Hintergrundraster — evoziert Millimeterpapier / technische Zeichnung */
body {
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--space-sm) 0;
  hyphens: auto;
  -webkit-hyphens: auto;
}

h1 { font-size: clamp(1.7rem, 4.4vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 2.8vw, 2.3rem); }
h3, .as-h3 { font-size: 1.25rem; }
@media (max-width: 400px) {
  h3, .as-h3 { font-size: 1.1rem; }
}

p { margin: 0 0 1.1em 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.eyebrow {
  font-family: var(--f-display);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-text);
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.9em;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--teal-text);
  display: inline-block;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* ---------- Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  border-bottom: 1px solid var(--paper-line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.brand {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 26px; height: 26px; flex-shrink: 0; }

.nav-links {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--f-display);
  font-size: 0.86rem;
}
.nav-links a {
  color: var(--ink-soft);
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--ink);
  text-decoration: none;
  border-bottom-color: var(--link);
}
.nav-toggle { display: none; }

@media (max-width: 820px) {
  .site-header nav { position: absolute; } /* <nav> nimmt im Kopf keinen Platz ein - der Schalter bleibt rechts */
  .nav-links {
    position: fixed; inset: 64px 0 0 0;
    background: var(--header-bg);
    z-index: 60;
    flex-direction: column;
    padding: var(--space-md);
    gap: var(--space-sm);
    font-size: 1.05rem;
    transform: translateX(100%);
    visibility: hidden; /* geschlossenes Menue: nicht per Tab erreichbar */
    transition: transform 0.28s ease, visibility 0s linear 0.28s;
  }
  .nav-links.open { transform: translateX(0); visibility: visible; transition: transform 0.28s ease, visibility 0s; }
  .nav-toggle {
    display: block;
    background: none; border: none; cursor: pointer;
    width: 44px; height: 44px; position: relative; /* Tippflaeche >= 24px (WCAG 2.2) */
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 2px;
    background: var(--ink); transition: transform 0.2s ease;
  }
  .nav-toggle span { top: 21px; left: 7px; width: 30px; }
  .nav-toggle span::before { top: -8px; }
  .nav-toggle span::after { top: 8px; }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--navy);
  color: var(--white);
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 32px 32px;
  padding: var(--space-xl) 0 var(--space-lg);
  position: relative;
  overflow: hidden;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-lg);
  align-items: center;
}
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-graphic { order: -1; }
}
.hero h1 { color: var(--white); }
.hero .lede {
  font-size: 1.18rem;
  color: var(--gold-soft);
  max-width: 26.4em;
  margin-bottom: var(--space-sm);
}
.hero .body-text { color: #C4CBD8; max-width: 31.2em; }

.hero-graphic svg { width: 100%; height: auto; display: block; }

/* Route-Zeichnung: zieht sich beim Laden nach, wie eine gezeichnete Strecke */
.route-path {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: draw-route 2.1s cubic-bezier(.4,0,.2,1) 0.2s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .route-path { animation: none; stroke-dashoffset: 0; }
}
@keyframes draw-route {
  to { stroke-dashoffset: 0; }
}
.route-node {
  opacity: 0;
  animation: node-in 0.5s ease forwards;
}
@media (prefers-reduced-motion: reduce) { .route-node { opacity: 1; animation: none; } }

/* ---------- Buttons ---------- */
.btn-row { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: var(--space-md); }
.btn {
  font-family: var(--f-display);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.85rem 1.5rem;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover { background: #E39B44; }
.btn-ghost { border-color: rgba(247,246,241,0.35); color: var(--white); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-soft); }
.btn-ghost-dark { border-color: var(--ink-soft); color: var(--ink); }
.btn-ghost-dark:hover { border-color: var(--gold); color: var(--ink); background: rgba(214,138,46,0.08); }

/* ---------- Sections ---------- */
section { padding: var(--space-lg) 0; }
.section-paper { background: var(--paper); }
.section-navy {
  background: var(--navy); color: var(--white);
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 32px 32px;
}
.section-navy h2, .section-navy h3 { color: var(--white); }
.section-navy .eyebrow { color: var(--gold-soft); }
.section-navy .eyebrow::before { background: var(--gold-soft); }

.section-head { max-width: 37.2em; margin-bottom: var(--space-md); }

/* ---------- Grids / Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.grid-cta { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-lg); align-items: center; }
.grid-profile { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-lg); align-items: start; }
.grid-3 > *, .grid-2 > *, .grid-cta > *, .grid-profile > *, .route-stop { min-width: 0; }
@media (max-width: 820px) {
  .grid-3, .grid-2, .grid-cta, .grid-profile { grid-template-columns: 1fr; }
}

.card {
  background: var(--card);
  border: 1px solid var(--paper-line);
  border-radius: 4px;
  padding: var(--space-md);
  position: relative;
  min-width: 0;
}
.card-node {
  font-family: var(--f-display);
  font-size: 0.78rem;
  color: var(--teal-text);
  letter-spacing: 0.08em;
  margin-bottom: 0.8rem;
  display: block;
  overflow-wrap: break-word;
}

/* ---------- Route-Verbinder zwischen Karten (Leistungen etc.) ---------- */
.route-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
  margin-top: var(--space-md);
}
.route-grid::before {
  content: "";
  position: absolute;
  top: 28px; left: calc(16.6% ); right: calc(16.6%);
  height: 2px;
  background-image: linear-gradient(90deg, var(--gold) 60%, transparent 0%);
  background-size: 14px 2px;
  z-index: 0;
}
@media (max-width: 820px) {
  .route-grid { grid-template-columns: 1fr; }
  .route-grid::before { display: none; }
}
.route-stop { position: relative; padding: 0 var(--space-sm); z-index: 1; }
.route-stop:first-child { padding-left: 0; }
.route-stop:last-child { padding-right: 0; }
.route-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--gold);
  margin: 0 auto var(--space-sm) auto;
}

/* ---------- Tabelle (Fakten Ueber mich) ---------- */
.fact-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: var(--space-sm) 0; }
.fact-table tr { border-bottom: 1px solid var(--paper-line); }
.fact-table tr:last-child { border-bottom: none; }
.fact-table td { padding: 0.85rem 0; vertical-align: top; overflow-wrap: break-word; word-break: break-word; }
.fact-table td:first-child {
  font-family: var(--f-display);
  font-size: 0.82rem;
  color: var(--teal-text);
  width: 34%;
  padding-right: var(--space-sm);
}
@media (max-width: 560px) {
  .fact-table td:first-child { width: 40%; }
}

/* ---------- Bilder ---------- */
.portrait {
  width: 100%; max-width: 320px; height: auto;
  border-radius: 4px;
  border: 1px solid var(--paper-line);
  display: block;
}
.figure-inline {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  background: var(--card); color: var(--ink); border: 1px solid var(--paper-line); border-radius: 4px;
  padding: var(--space-sm); margin: var(--space-md) 0;
}
.figure-inline img {
  width: 180px; height: 130px; object-fit: cover; border-radius: 3px; flex-shrink: 0;
}
@media (max-width: 620px) {
  .figure-inline { flex-direction: column; }
  .figure-inline img { width: 100%; height: 200px; }
}

/* ---------- Abhaengigkeitsgraph (Konzepte-Linien) ---------- */
.diagram-scroll { overflow-x: auto; padding-bottom: 4px; }
.diagram-scroll svg { display: block; min-width: 700px; width: 100%; height: auto; }
.diagram-scroll a { cursor: pointer; }

/* Graphen: Mindestgröße als style am SVG (aus der viewBox, tools/dot_render.py), Umschalter „Gesamtansicht“ ohne Skript */
.diagram-scroll { position: relative; }
.diagram-fit { display: none; position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.diagram-fit.dg-all { display: inline-block; }
.diagram-tools {
  display: none; position: sticky; left: 0; width: 100%; box-sizing: border-box; align-items: center;
  justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 0.35rem;
}
.diagram-tools.dg-all { display: flex; }
@media (max-width: 900px) { .diagram-tools.dg-900 { display: flex; } .diagram-fit.dg-900 { display: inline-block; } }
@media (max-width: 1000px) { .diagram-tools.dg-1000 { display: flex; } .diagram-fit.dg-1000 { display: inline-block; } }
@media (max-width: 1100px) { .diagram-tools.dg-1100 { display: flex; } .diagram-fit.dg-1100 { display: inline-block; } }
@media (max-width: 1200px) { .diagram-tools.dg-1200 { display: flex; } .diagram-fit.dg-1200 { display: inline-block; } }
.diagram-toggle {
  display: inline-block; font-size: 0.85rem; color: var(--ink); background: var(--card); border: 1px solid var(--paper-line);
  border-radius: 3px; padding: 0.25rem 0.8rem; cursor: pointer; white-space: nowrap;
}
.diagram-toggle:hover { border-color: var(--gold); }
.diagram-toggle .t-aus { display: none; }
.diagram-fit:checked ~ .diagram-tools .t-an { display: none; }
.diagram-fit:checked ~ .diagram-tools .t-aus { display: inline; }
.diagram-fit:checked ~ .diagram-tools .diagram-toggle { background: var(--paper-line); }
.diagram-fit:checked ~ svg { min-width: 700px !important; }
.diagram-fit:focus-visible ~ .diagram-tools .diagram-toggle { outline: 2px solid var(--gold); outline-offset: 2px; }
.diagram-scroll rect { transition: stroke 0.15s ease, stroke-width 0.15s ease; }
.diagram-scroll a:hover rect, .diagram-scroll a:focus-visible rect { stroke: var(--gold); stroke-width: 2; }

/* ---------- Demo-Karten ---------- */
.demo-card {
  background: var(--card); border: 1px solid var(--paper-line); border-radius: 4px;
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: 0.8rem;
  min-width: 0;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy); color: #9AA6BA;
  padding: var(--space-lg) 0 var(--space-md);
  font-size: 0.92rem;
}
.site-footer a { color: #C4CBD8; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-md);
  margin-bottom: var(--space-md);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4, .footer-grid .footer-title {
  color: var(--white); font-size: 0.82rem; letter-spacing: 0.06em;
  text-transform: uppercase; margin: 0 0 0.9rem 0;
  font-family: var(--f-display); font-weight: 600; line-height: 1.15;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.5rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--space-sm);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  font-family: var(--f-display); font-size: 0.78rem;
}

/* ---------- Kontaktformular ---------- */
.form-field { margin-bottom: var(--space-sm); }
.form-field label {
  display: block; font-family: var(--f-display); font-size: 0.82rem;
  color: var(--ink-soft); margin-bottom: 0.4rem;
}
.form-field input, .form-field textarea {
  width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--paper-line);
  border-radius: 3px; font-family: var(--f-body); font-size: 1rem;
  background: var(--card); color: var(--ink);
}
.form-field input:focus, .form-field textarea:focus {
  outline: none; border-color: var(--link);
}
.form-checkbox { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- Legal-Seiten (Impressum/Datenschutz) ---------- */
.legal-content h2 { margin-top: var(--space-md); font-size: 1.25rem; }
.legal-content h3 { margin-top: var(--space-sm); font-size: 1.05rem; color: var(--ink-soft); }
.legal-content { max-width: 44.4em; }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.small { font-size: 0.9rem; color: var(--ink-soft); }

/* Hinweis für veraltete Browser (js/site.js, nur auf Seiten mit Demo-Links) */
.browser-hinweis {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.75rem var(--space-sm);
  background: var(--card);
  border-left: 4px solid var(--gold);
  color: var(--ink);
  font-size: 0.9rem;
}


/* ---------- Sprunglink und Hauptbereich (Tastatur/Screenreader) ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--navy); color: var(--white); padding: 0.6rem 1rem;
  font-family: var(--f-display); font-size: 0.9rem;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; color: var(--white); }
main:focus { outline: none; }

/* Links im Fließtext nicht nur durch Farbe kenntlich machen (WCAG 1.4.1) */
main p a:not(.btn), main li a:not(.btn), main td a:not(.btn), main dd a:not(.btn), main .form-checkbox a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}

/* ---------- Brotkrumen (Themenseiten) und verlinkte Kartenüberschriften ---------- */
.breadcrumb { font-family: var(--f-display); font-size: 0.78rem; color: var(--ink-soft); margin-bottom: var(--space-sm); }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb [aria-current] { color: var(--ink); }
.card h3 a { color: inherit; }
.card h3 a:hover { color: var(--link); text-decoration: none; }

/* ---------- Seite „Grundlagen“: Bedingung unter der Antwort und Suchfeld (js/grundlagen.js) ---------- */
details.bedingung { margin: 0 0 1.1em 0; }
details.bedingung summary { cursor: pointer; font-family: var(--f-display); font-size: 0.85rem; color: var(--ink-soft); padding: 0.4rem 0; }
details.bedingung summary:hover { color: var(--ink); }
details.bedingung summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
details.bedingung p { margin: 0.2rem 0 0; font-size: 0.95rem; padding-left: 0.8rem; border-left: 3px solid var(--paper-line); }
.grundlagen-suche { max-width: 28rem; margin-top: var(--space-sm); }
.grundlagen-suche .small { min-height: 1.7em; margin: 0.4rem 0 0; } /* feste Höhe: die Trefferzahl lässt nichts springen */
.grid-2[hidden] { display: none; } /* .grid-2 setzt display und würde hidden sonst überstimmen */

/* ---------- Dark Mode (folgt dem System, kein Schalter) ----------
   Die Rollen von --ink/--paper tauschen sich, die dunklen Flaechen (Hero, Navy-Abschnitte, Fuss) bleiben ueber --navy gleich.
   Kontraste (WCAG): Text auf Papier 15,0:1, weicher Text 9,6:1, Link 9,2:1, Akzent-Text 8,8:1; auf Karten mind. 7,0:1.
   Die Abhaengigkeitsgraphen sind SVG mit festen Farben (Textfarbe Navy, helle Knoten): sie liegen als helle Tafel auf dem
   dunklen Papier, statt jede der rund 20 000 Farbangaben umzuschreiben. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #E6EAF1;
    --ink-soft:   #B3BDCE;
    --paper:      #0D1626;
    --paper-line: #27385A;
    --teal-text:  #6FC3BA;
    --link:       #E8AE5E;
    --card:       #1A2A45;
    --header-bg:  #0D1626;
  }
  body { background-image:
    linear-gradient(#17243D 1px, transparent 1px),
    linear-gradient(90deg, #17243D 1px, transparent 1px); }
  .btn-primary:hover { background: #E39B44; color: var(--navy); }
  .portrait, .figure-inline img { filter: brightness(0.9); }
  .diagram-scroll svg { background: #EEEFEA; border-radius: 3px; }
  .diagram-scroll a:hover rect, .diagram-scroll a:focus-visible rect { stroke: #B8892E; }
  .legend-glyph { background: #EEEFEA; border-radius: 3px; box-sizing: content-box; padding: 2px 3px; }
  .site-footer { border-top: 1px solid var(--paper-line); }
  .form-field input, .form-field textarea { background: var(--paper); }
}

/* ---------- Druckansicht ----------
   Nur der Inhalt: ohne Kopf mit Menue, Knoepfe, Suchfelder und Hintergruenden; schwarz auf weiss, Absaetze und Karten
   nicht quer ueber Seiten zerreissen, Graphen auf Seitenbreite. Externe Links im Text zeigen ihre Adresse (ausser Demo-Links: zu viele und zu lang). */
@media print {
  @page { margin: 1.8cm; }
  :root {
    --ink: #000; --ink-soft: #333; --paper: #fff; --paper-line: #bbb; --white: #000;
    --teal-text: #1d4f4a; --link: #6b4210; --card: #fff; --header-bg: #fff; --navy: #fff;
  }
  html { scroll-behavior: auto; }
  body { background: #fff; background-image: none; color: #000; font-size: 11pt; line-height: 1.5; }
  .skip-link, .nav-toggle, .nav-links, .btn-row, .hero-graphic, .diagram-tools, .diagram-fit,
  .grundlagen-suche, #konzepte-suche, .browser-hinweis, .form-field, .footer-grid { display: none !important; }
  .site-header { position: static; border-bottom: 1px solid #000; }
  .site-header .wrap { padding-top: 0.3rem; padding-bottom: 0.3rem; }
  section { padding: 1rem 0; }
  .hero, .section-navy, .site-footer { background: #fff; background-image: none; color: #000; }
  .hero { padding: 1rem 0; }
  .hero .wrap { display: block; }
  .hero .lede, .hero .body-text, .section-navy .eyebrow, .site-footer, .site-footer a,
  [style*="color:#C4CBD8"], [style*="color:#9AA6BA"] { color: #222 !important; }
  .section-navy .eyebrow::before { background: #222; }
  .footer-grid h4, .footer-grid .footer-title { color: #000; }
  .footer-bottom { border-top-color: #999; }
  .wrap { max-width: none; padding: 0; }
  h1, h2, h3, h4 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  .card, .demo-card, .figure-inline, .fact-table tr, details, .route-stop { break-inside: avoid; }
  .card, .demo-card { border: 1px solid #999; padding: 0.8rem 1rem; }
  .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .grid-cta, .grid-profile { grid-template-columns: 1fr; }
  .route-grid::before { display: none; }
  .diagram-scroll { overflow: visible; }
  .diagram-scroll svg { min-width: 0 !important; width: 100%; max-height: 24cm; break-inside: avoid; }
  .portrait { max-width: 4cm; }
  main p a:not(.btn)[href^="http"]:not([href*=".streamlit.app"])::after, main li a:not(.btn)[href^="http"]:not([href*=".streamlit.app"])::after {
    content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; color: #333;
  }
  a { color: inherit; }
}