/* ==========================================================================
   Fouad Boudouhi — persönliche Seite
   Eine Schrift, kein Akzentton, Trennung durch Abstand statt durch Linien.
   Alle Werte genau einmal hier auf :root.
   ========================================================================== */

/* Satoshi, selbst ausgeliefert (ITF Free Font License).
   Nur die beiden Schnitte, die die Seite wirklich benutzt. */
@font-face {
  font-family: "Satoshi";
  src: url("fonts/satoshi-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/satoshi-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Farben */
  /* Nachtblau: dunkel, aber getoent - die Umgebung eines Editors, nicht ein
     ausgeschalteter Bildschirm. Hell (unten) bekommt Ocker statt Blau. */
  --bg:        #0e1117;
  --flaeche:   #141922;
  --fg:        #f2f4f8;
  --mut:       #8b94a7;
  --mut-hell:  #b6bdcb;
  --hair:      #1f2632;
  --hair-hell: #2c3544;
  --glanz:     rgba(227, 169, 74, .07);     /* Lichtschein unter dem Zeiger */
  --akzent:    #e3a94a;                     /* Amber: Rubriken, Knopf, Badge, Hervorhebungen */
  --f-mono:    ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Schrift */
  --f: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Größen — eine Stufung im Verhältnis 1,2, Grundgröße 17px (= 1rem).
     Jede Größe hat genau eine Aufgabe, von Mikrobeschriftung bis Schlagzeile. */
  --fs-2xs: 0.7rem;    /* Rubriken, Stufen, Tabellenköpfe   ~12px */
  --fs-xs:  0.84rem;   /* Navigation, Eckdaten, Fußnoten    ~14px */
  --fs-md:  1rem;      /* Fließtext überall                  17px */
  --fs-lg:  1.15rem;   /* Lesetext in Über mich             ~17px */
  --fs-xl:  1.35rem;   /* Zwischenüberschriften             ~20px */
  --fs-2xl: 1.9rem;    /* Kennzahlen im Fließtext           ~32px */
  --fs-3xl: clamp(1.9rem, 1.3rem + 1.6vw, 2.5rem);   /* Abschnittstitel */
  --fs-4xl: clamp(2.6rem, 1.4rem + 5vw, 4.6rem);   /* Schlagzeile    */
  --fs-zahl: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);  /* Hauptkennzahl  */

  /* Abstände */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3.5rem;
  --block: clamp(3rem, 6.5vh, 4.75rem);

  /* Maße */
  --w-page: 80rem;
  --w-text: 36rem;
  --rand: clamp(1.5rem, 5vw, 5.5rem);
  --radius: 8px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Hellmodus, nur auf Wunsch per Schalter. Dunkel bleibt der Standard; die
   Systemeinstellung wird bewusst nicht ausgewertet. "hell" bei --mut-hell
   heisst "naeher an der Textfarbe", also hier dunkler. */
html[data-theme="light"] {
  color-scheme: light;
  --bg:        #f6f5f2;
  --flaeche:   #edece8;
  --fg:        #141416;
  --mut:       #6a6a71;
  --mut-hell:  #45454b;
  --hair:      #e3e2dd;
  --hair-hell: #cfcec8;
  --glanz:     rgba(0, 0, 0, .04);
  --akzent:    #8a5f12;                     /* dunkler, damit Text darin 5:1 auf Hell hält */
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; scroll-behavior: smooth; }  /* 1rem = 16px */
@media (min-width: 64rem) { html { font-size: 93.75%; } }  /* 1rem = 15px: Bildschirme ab 1024px */

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f);
  font-size: var(--fs-md);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-weight: 500; margin: 0; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
p { margin: 0 0 var(--sp-4); max-width: var(--w-text); color: var(--mut-hell); }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding-left: 1.1em; }
li { margin-bottom: var(--sp-2); }
b, strong { font-weight: 500; color: var(--fg); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em; }

a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--hair-hell); transition: border-color .3s var(--ease); }
a:hover { border-color: var(--fg); }

:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }

/* Sprachumschaltung — ohne JavaScript bleibt data-lang="de" stehen. */
html[data-lang="de"] [lang="en"] { display: none; }
html[data-lang="en"] [lang="de"] { display: none; }

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

.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 50;
  background: var(--flaeche); border: 1px solid var(--hair-hell); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4); transform: translateY(-250%);
}
.skip-link:focus { transform: translateY(0); }

/* ------------------------------------------------------------------ Gerüst */

.wrap { max-width: var(--w-page); margin-inline: auto; padding-inline: var(--rand); position: relative; z-index: 1; }
section { padding-block: var(--block); }
.strich { height: 1px; background: var(--hair); transform-origin: left; }

.marke {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--mut); margin: 0 0 var(--sp-7); max-width: none;
}
.titel { font-size: var(--fs-3xl); margin-bottom: var(--sp-5); max-width: 20ch; }
.vorspann { color: var(--fg); font-size: var(--fs-lg); max-width: 42rem; line-height: 1.5; }

/* ------------------------------------------------------------------- Kopf */

.topbar {
  position: fixed; inset: 0 0 auto; z-index: 20;
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease);
}
.topbar.ab { border-bottom-color: var(--hair); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); }
.topbar__name { font-size: var(--fs-md); letter-spacing: -0.01em; border: 0; }
.topbar__nav { display: flex; align-items: center; gap: var(--sp-5); }
.topbar__nav a { color: var(--mut); font-size: var(--fs-xs); border: 0; transition: color .3s var(--ease); }
.topbar__nav a:hover { color: var(--fg); }
@media (max-width: 52rem) { .is-optional { display: none; } }

.langswitch { display: flex; gap: var(--sp-2); margin-left: var(--sp-2); }
.langswitch button {
  font: inherit; font-size: var(--fs-xs); letter-spacing: 0.08em;
  background: none; border: 0; padding: var(--sp-1) 0; cursor: pointer;
  color: var(--mut); border-bottom: 1px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.langswitch button:hover { color: var(--fg); }
.langswitch button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--fg); }

/* Hell/Dunkel: ein halb gefuellter Kreis, gleiche Tonalitaet wie DE/EN. */
.themeswitch {
  display: inline-flex; align-items: center; background: none; border: 0;
  padding: var(--sp-1); margin-left: var(--sp-1); cursor: pointer;
  color: var(--mut); transition: color .3s var(--ease);
}
.themeswitch:hover, .themeswitch[aria-pressed="true"] { color: var(--fg); }
.themeswitch svg { display: block; }

#fortschritt { position: fixed; top: 0; left: 0; height: 1px; width: 0; background: var(--fg); z-index: 21; transition: width .08s linear; }
#schein {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background: radial-gradient(42rem 42rem at var(--x, 50%) var(--y, 0%), var(--glanz), transparent 70%);
}

/* ------------------------------------------------------------------- Hero */

.hero { padding-block: clamp(9rem, 24vh, 17rem) var(--block); }
.hero__titel { font-size: var(--fs-4xl); letter-spacing: -0.05em; margin-bottom: var(--sp-6); max-width: 14ch; }
/* --------------------------------------------------------------- Kennzahlen */

.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  column-gap: clamp(2.5rem, 5vw, 5.5rem);
  row-gap: var(--sp-7);
  margin-bottom: var(--sp-8);
}
/* Eine Hauptzahl, drei Begleitzahlen. Vier gleich große Werte nebeneinander
   lesen sich sonst als eine durchgehende Rechnung. */
@media (min-width: 60rem) {
  .zahlen { grid-template-columns: 1.5fr 1fr 1fr 1fr; align-items: end; }
  .zahl:first-child { padding-right: var(--sp-6); }
  .zahl:first-child .w { font-size: clamp(2.4rem, 1.5rem + 2.9vw, 3.7rem); }
  .zahl:not(:first-child) .w { font-size: var(--fs-2xl); }
}
/* Haarlinie je Kennzahl: bindet Zahl und Beschriftung zu einem Block und
   verhindert, dass die Werte nebeneinander wie eine Gleichung gelesen werden. */
.zahl {
  border-top: 1px solid var(--hair-hell);
  padding-top: var(--sp-4);
  display: flex;
  flex-direction: column;
}
/* Beschriftung zuerst, Zahl darunter: So beginnt jede Spalte mit Text.
   Vier gleich große Zahlen in einer Reihe lesen sich sonst wie eine Gleichung. */
.zahl .b { order: 1; font-size: var(--fs-xs); color: var(--mut); line-height: 1.4; margin-bottom: var(--sp-4); min-height: 2.8em; }
.zahl .w { order: 2; font-size: var(--fs-zahl); letter-spacing: -0.055em; line-height: .88; }

/* ----------------------------------------------------------------- Tabellen */

.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-md); max-width: 46rem; }
.tbl caption { text-align: left; color: var(--mut); font-size: var(--fs-xs); padding-bottom: var(--sp-4); }
.tbl th {
  font-weight: 400; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .14em;
  color: var(--mut); text-align: right; padding: 0 0 var(--sp-4); border-bottom: 1px solid var(--hair);
}
.tbl th:first-child { text-align: left; }
.tbl td { padding: var(--sp-4) 0; text-align: right; border-bottom: 1px solid var(--hair); color: var(--mut); }
.tbl td:first-child { text-align: left; color: var(--fg); }
.tbl td + td { padding-left: var(--sp-6); }
.tbl td.e { color: var(--fg); }
.tbl tr:last-child td { border-bottom: 0; }
.note { font-size: var(--fs-xs); color: var(--mut); max-width: 42rem; margin-top: var(--sp-6); line-height: 1.6; }

/* ------------------------------------------------------------- Was ich tue */

/* Drei Schwerpunkte untereinander, getrennt durch Haarlinien.
   Eine Spalte hält die Zeilen bei gut 60 Zeichen. */
.reach { display: grid; gap: 0; }
.reach__item { padding-block: var(--sp-6); border-top: 1px solid var(--hair); max-width: 44rem; }
.reach__item:first-child { border-top: 0; padding-top: 0; }
.reach__step { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .2em; color: var(--mut); margin-bottom: var(--sp-4); }
.reach__title { font-size: var(--fs-lg); font-weight: 500; margin-bottom: var(--sp-3); }
.reach__item p { font-size: var(--fs-md); max-width: none; }

/* ---------------------------------------------------------------- Werdegang */

/* Stationen als abgesetzte Karten: Beim Überfliegen sieht man sofort,
   wo eine Station anfängt und aufhört. */
/* Keine Karten: gerahmte Kaesten mit Fuellung sehen nach Lebenslauf-Generator
   aus und brechen mit dem Rest der Seite, der nur mit Haarlinien arbeitet.
   Stattdessen eine Zeitleiste - Datum links in eigener Spalte, Inhalt rechts,
   getrennt durch eine Linie ueber die volle Breite. */
.station { padding: var(--sp-6) 0; border-top: 1px solid var(--hair); }
.station:first-of-type { border-top: 0; padding-top: 0; }
.station:last-of-type { padding-bottom: 0; }
@media (min-width: 54rem) {
  .station { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.25rem); }
}
.station__when {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs); color: var(--mut); margin: 0 0 var(--sp-3);
}
@media (min-width: 54rem) {
  /* In der Zeitleiste stehen Zeitraum und Status untereinander, damit die
     Spalte schmal bleiben kann. */
  .station__when { flex-direction: column; align-items: flex-start; margin-bottom: 0; }
}
.badge {
  font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--bg); background: var(--fg);
  padding: 2px var(--sp-2); border-radius: 100px;
}
.station__role { font-size: var(--fs-lg); font-weight: 500; margin-bottom: var(--sp-1); }
.station__org { font-size: var(--fs-xs); color: var(--mut); margin-bottom: var(--sp-1); }
.station__mutter { color: var(--mut); }
.station__mutter::before { content: "· "; }
/* Ort und Arbeitsmodell: steht genau dort, wo ein Recruiter es sucht. */
.station__ort { font-size: var(--fs-xs); color: var(--mut); margin-bottom: var(--sp-4); }
.station__org a { color: var(--mut); border-bottom-color: var(--hair); }
.station__org a:hover { color: var(--fg); border-bottom-color: var(--fg); }
.station__org a::after { content: " ↗"; }
.station__kurz { font-size: var(--fs-md); color: var(--fg); margin-bottom: var(--sp-4); max-width: 42rem; }
.station__list { font-size: var(--fs-md); max-width: 42rem; color: var(--mut-hell); list-style: none; padding-left: 0; }
.station__list li { padding-left: 1.1em; position: relative; }
/* Kleiner Punkt statt Gedankenstrich: derselbe Knoten wie im Ablaufbild,
   liest sich als Liste und nicht als Dialog. */
.station__list li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--mut);
}
.station__list b { color: var(--fg); font-weight: 500; }

.engagement {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .18em;
  color: var(--mut); margin: var(--sp-6) 0 var(--sp-4); max-width: none;
}
.station__org + .engagement { margin-top: 0; }
/* Trennt die Berufsstationen von Ausbildung und Zertifikat, ohne eine eigene
   Sektion aufzumachen - die Zeitleiste laeuft einfach weiter. */
.gruppe {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .18em;
  color: var(--mut); margin: var(--sp-8) 0 var(--sp-5); max-width: none;
}
.gruppe + .station { border-top: 0; padding-top: 0; }

.tags { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); padding: 0; list-style: none; }
.tags li { margin: 0; font-size: var(--fs-xs); color: var(--mut); }
.tags li + li::before { content: "·"; margin-right: var(--sp-3); }

/* -------------------------------------------------------------- Fähigkeiten */

.skills { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 54rem) { .skills { grid-template-columns: 1fr 1fr; } }
.skills__group h3 { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .18em; color: var(--mut); margin-bottom: var(--sp-4); font-weight: 400; }
.skills__list { list-style: none; padding: 0; margin: 0; }
.skills__list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-5);
  margin: 0; padding: var(--sp-3) 0; border-bottom: 1px solid var(--hair); font-size: var(--fs-md);
}
.level { color: var(--mut); font-size: var(--fs-xs); white-space: nowrap; }
.level[data-level="4"] { color: var(--fg); }


.prose { max-width: var(--w-text); }
.prose p { font-size: var(--fs-lg); line-height: 1.6; }

.kontakt__links { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-6); font-size: var(--fs-lg); }
/* PDF-Knopf: nur mit JavaScript sinnvoll, ohne bleibt er weg. Der Hinweis
   daneben sagt, was passiert, bevor der Druckdialog aufgeht. */
.pdf { display: none; margin-top: var(--sp-7); max-width: none; }
.js .pdf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.pdf .btn { font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.pdf__hinweis { font-size: var(--fs-xs); color: var(--mut); max-width: 28rem; }

footer.footer {
  border-top: 1px solid var(--hair); padding-block: var(--sp-7) var(--sp-8);
  font-size: var(--fs-xs); color: var(--mut);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
}
footer.footer a { color: var(--mut); border: 0; }
footer.footer a:hover { color: var(--fg); }

/* Offene Stelle, bewusst sichtbar */
.gap { border: 1px dashed var(--hair-hell); border-radius: var(--radius); padding: var(--sp-5); background: var(--flaeche); }
.gap__label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .18em; color: var(--mut); margin-bottom: var(--sp-3); }
.gap p { font-size: var(--fs-md); }

/* ------------------------------------------------------------ Rechtsseiten */

.legal { padding-block: clamp(7rem, 18vh, 10rem) var(--block); }
.legal h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-6); }
.legal h2 { font-size: var(--fs-lg); margin: var(--sp-7) 0 var(--sp-3); }
.legal p, .legal ul { max-width: var(--w-text); font-size: var(--fs-md); color: var(--mut-hell); }
.legal .back { display: inline-block; margin-bottom: var(--sp-6); font-size: var(--fs-xs); color: var(--mut); border: 0; }
.legal .back:hover { color: var(--fg); }

/* ---------------------------------------------------------------- Bewegung */

.js .auf { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .auf.da { opacity: 1; transform: none; }
.js .strich { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.js .strich.da { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .auf { opacity: 1; transform: none; transition: none; }
  .js .strich { transform: scaleX(1); transition: none; }
  #schein { display: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ----------------------------------------------- Handlungsaufforderung */

.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); }
.btn {
  display: inline-block; font-size: var(--fs-xs); line-height: 1;
  padding: var(--sp-4) var(--sp-6); border-radius: 100px;
  border: 1px solid var(--hair-hell); color: var(--fg);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--solid:hover { background: transparent; color: var(--fg); }
.btn--ghost:hover { border-color: var(--fg); }

.status {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-6); font-size: var(--fs-xs); color: var(--mut); max-width: none;
}
.status > span + span::before { content: "·"; margin-right: var(--sp-5); }

/* ==========================================================================
   Druck — die Seite ist der Lebenslauf. Strg+P soll eine saubere PDF geben,
   die man einer Bewerbung anhängen kann.
   ========================================================================== */

@media print {
  :root {
    --bg: #ffffff; --flaeche: #ffffff; --fg: #111111;
    --mut: #444444; --mut-hell: #222222;
    --hair: #cccccc; --hair-hell: #999999; --akzent: #111111;
  }
  @page { margin: 16mm 14mm; }

  html, body { background: #fff; color: #111; font-size: 10.5pt; line-height: 1.45; }

  /* Bildschirm-Beiwerk weg */
  .topbar, #fortschritt, #schein, .skip-link, .actions, .strich, .pdf, .themeswitch { display: none !important; }

  /* Keine Animation im Druck */
  .js .auf, .js .strich { opacity: 1 !important; transform: none !important; }

  section { padding-block: 0 10mm; }
  .wrap { max-width: none; padding-inline: 0; }

  .hero { padding-top: 0; }
  .hero__titel { font-size: 20pt; max-width: none; margin-bottom: 4mm; }
  .titel { font-size: 14pt; margin-bottom: 3mm; }
  .vorspann { font-size: 11pt; max-width: none; }
  .marke { margin-bottom: 3mm; letter-spacing: .12em; }
  .status { margin-top: 3mm; }

  /* Nichts Wichtiges zerreißen */
  section, .station, .zahl, .skills__group, .reach__item, .projekt, table { break-inside: avoid; }
  .projekt__bild { display: none; }
  .station { border: 0; border-top: 1px solid #ccc; border-radius: 0; background: none;
             padding: 4mm 0 0; margin-bottom: 5mm; }
  .badge { border: 1px solid #111; background: none; color: #111; }
  .station__org a::after { content: ""; }
  h1, h2, h3 { break-after: avoid; }
  #werdegang { break-before: page; }

  .zahlen { gap: 6mm; }
  .zahl:first-child .w, .zahl .w { font-size: 16pt !important; }
  .tbl { font-size: 9.5pt; }
  .reach { grid-template-columns: 1fr; }
  .skills { grid-template-columns: 1fr 1fr; gap: 4mm 8mm; }
  .projekt__link a::after { content: ""; }
  .gruppe { margin: 6mm 0 3mm; }

  /* Adressen ausschreiben, auf Papier ist ein Verweis sonst wertlos */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; word-break: break-all; }
  a[href^="mailto"]::after { content: ""; }
  a { color: #111; border: 0; }

  footer.footer { border-top: 1px solid #ccc; font-size: 8.5pt; }
}

/* ------------------------------------------------------- Verfahren, Schema */

.flow { margin: 0 0 var(--sp-8); }
.flow svg { width: 100%; height: auto; overflow: visible; }
.flow .bahn { stroke: var(--hair-hell); stroke-width: 1; }
.flow circle { fill: var(--bg); stroke: var(--fg); stroke-width: 1.5; }
.flow text { font-family: var(--f); font-size: 15px; fill: var(--mut-hell); }
.flow figcaption {
  margin-top: var(--sp-6); font-size: var(--fs-xs); color: var(--mut); max-width: 44rem;
}

/* Die Bahn zeichnet sich, danach erscheinen die Stufen nacheinander.
   Das ist Gestaltung, kein Mitschnitt - der Hinweis steht in der Bildunterschrift. */
.js .flow .bahn { stroke-dasharray: 900; stroke-dashoffset: 900; }
.js .flow .knoten { opacity: 0; }
.js .flow.da .bahn { animation: bahn 1.1s var(--ease) forwards; }
.js .flow.da .knoten { animation: stufe .5s var(--ease) forwards; animation-delay: calc(.5s + var(--i) * .13s); }
@keyframes bahn { to { stroke-dashoffset: 0; } }
@keyframes stufe { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .flow .bahn { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .flow .knoten { opacity: 1; }
}
@media (max-width: 40rem) { .flow text { font-size: 22px; } }

/* -------------------------------------------------- Wochendiagramm in 04 */

.chart { margin: 0 0 var(--sp-8); }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .netz { stroke: var(--hair); stroke-width: 1; }
.chart .basis { stroke: var(--hair-hell); stroke-width: 1; }
.chart .balken rect { fill: var(--mut); transition: fill .2s var(--ease); }
.chart .balken--neu rect { fill: var(--fg); }
.chart .balken:hover rect { fill: var(--fg); }
.chart .marke-linie { stroke: var(--mut-hell); stroke-width: 1; stroke-dasharray: 3 3; }
.chart text { font-family: var(--f); }
.chart .achse { font-size: 13px; fill: var(--mut); }
.chart .marke-text { font-size: 13px; fill: var(--mut-hell); }
.chart .wert { font-size: 15px; font-weight: 500; fill: var(--fg); }
.chart figcaption { margin-top: var(--sp-5); font-size: var(--fs-xs); color: var(--mut); max-width: 46rem; }

@media (max-width: 46rem) {
  .chart .achse, .chart .marke-text { font-size: 20px; }
  .chart .wert { font-size: 22px; }
}


/* ==========================================================================
   Das Raster der Seite. Jeder Abschnitt hat links seine Rubrik, rechts den
   Inhalt. Die Rubrik bleibt beim Scrollen stehen, solange ihr Abschnitt läuft.
   Der Titelbereich ist die bewusste Ausnahme und läuft über die volle Breite.
   ========================================================================== */

@media (min-width: 60rem) {
  main > section.wrap:not(.hero) {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: start;
  }
  main > section.wrap:not(.hero) > * { grid-column: 2; }
  main > section.wrap:not(.hero) > .marke {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 5.5rem;
    margin-bottom: 0;
    text-align: right;
  }
}

/* ------------------------------------------------- Alle Kennzahlen, einklappbar */

.alle { margin: 0 0 var(--sp-6); max-width: 46rem; }
.alle > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--mut); padding-bottom: 2px;
  border-bottom: 1px solid var(--hair-hell); transition: color .3s var(--ease), border-color .3s var(--ease);
}
.alle > summary::-webkit-details-marker { display: none; }
.alle > summary::after { content: "+"; font-size: var(--fs-md); line-height: 1; }
.alle[open] > summary::after { content: "−"; }
.alle > summary:hover { color: var(--fg); border-color: var(--fg); }
.alle[open] > summary { margin-bottom: var(--sp-5); }

/* ------------------------------------------------------------- Nebenher */

/* Projekte als Zeilen mit Haarlinie, gleiche Form wie die Schwerpunkte in 01:
   keine Kaesten, keine Spalten, die den Text auf Briefmarkenbreite druecken. */
.projekte { display: grid; gap: 0; }
.projekt { padding-block: var(--sp-6); border-top: 1px solid var(--hair); max-width: 56rem; display: grid; gap: var(--sp-4) var(--sp-6); }
.projekt:first-child { border-top: 0; padding-top: 0; }
/* Vorschaubild links wie das Datum in der Zeitleiste; Graustufen, damit das
   Porsche-Foto neben den Skizzen nicht aus der Reihe faellt. */
@media (min-width: 54rem) { .projekt { grid-template-columns: 11rem minmax(0, 1fr); align-items: start; } }
.projekt__bild { display: block; border: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--flaeche); }
.projekt__bild img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .3s var(--ease); }
.projekt:hover .projekt__bild img { opacity: 1; }
.projekt__text { min-width: 0; max-width: 44rem; }
.projekt h3 { font-size: var(--fs-lg); font-weight: 500; margin-bottom: var(--sp-3); }
.projekt p { font-size: var(--fs-md); color: var(--mut-hell); max-width: none; }
.projekt .tags { margin-top: var(--sp-4); }
.projekt__link { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); }
.projekt__link a::after { content: " →"; }

/* ----------------------------------------------------------- Projektseite */

/* Eine Spalte fuer Text und Bilder: gemeinsame Kante, Zeilen bei rund 75 Zeichen. */
.projektseite { padding-block: clamp(4.5rem, 10vh, 6.5rem) var(--block); max-width: calc(40rem + 2 * var(--rand)); }
.projektseite .prose { max-width: none; }
.projektseite .prose p { margin-bottom: 0; max-width: none; }
.projektseite__unter { max-width: none; }
.projektseite h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-4); }
.projektseite__unter { font-size: var(--fs-lg); color: var(--mut-hell); max-width: 40rem; margin-bottom: var(--sp-6); }
.projektseite__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0 0 var(--sp-8);
  font-size: var(--fs-xs); color: var(--mut); max-width: none;
}
.projektseite__meta > span + span::before { content: "·"; margin-right: var(--sp-5); }

.kennzahlen {
  display: grid; gap: var(--sp-5); margin: 0 0 var(--sp-8);
  padding-block: var(--sp-6); border-block: 1px solid var(--hair);
}
@media (min-width: 46rem) { .kennzahlen { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-7); } }
.kennzahlen dt { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .18em; color: var(--mut); margin-bottom: var(--sp-2); }
.kennzahlen dd { margin: 0; font-size: var(--fs-lg); color: var(--fg); }

.projektseite .prose { margin-bottom: var(--sp-7); }
.bild { margin: 0 0 var(--sp-7); }
.bild img { width: 100%; height: auto; display: block; border-radius: var(--radius); background: var(--flaeche); }
.bild figcaption { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--mut); }
.projektseite .back { display: inline-block; margin-bottom: var(--sp-6); font-size: var(--fs-xs); color: var(--mut); border: 0; }
.projektseite .back:hover { color: var(--fg); }

@media print {
  .bild { break-inside: avoid; }
  .bild img { max-height: 9cm; width: auto; }
}

/* ----------------------------------------------- Ablauf und Zahlen im Artikel */
/* Die Projektseite ist schmaler als die Startseite; die SVG-Beschriftungen
   werden mitskaliert und brauchen deshalb groessere Ausgangswerte. */
.projektseite .flow text { font-size: 20px; }
.projektseite .chart .achse, .projektseite .chart .marke-text { font-size: 17px; }
.projektseite .chart .wert { font-size: 20px; }
.projektseite .zahlen { margin-bottom: var(--sp-7); }
@media (min-width: 60rem) {
  .projektseite .zahlen { grid-template-columns: 1fr 1fr; }
  .projektseite .zahl:first-child .w { font-size: var(--fs-zahl); }
}
.projektseite .alle { margin-bottom: var(--sp-7); }

/* ------------------------------------------------- Teststufen (Projektseite) */
/* Vier Balken, unten der breiteste: Menge unten, Urteil oben. Als HTML statt SVG,
   damit die Beschriftung auf dem Handy lesbar bleibt und einfach umbricht. */
.stufen { margin: 0 0 var(--sp-7); }
/* Feste Textspalte rechts, der Balken nimmt seinen Anteil der Restbreite:
   so stehen die Beschriftungen untereinander statt an der Balkenspitze. */
.stufe {
  display: grid; grid-template-columns: minmax(0, 1fr) 19rem;
  gap: var(--sp-5); align-items: center; margin-bottom: var(--sp-3);
}
.stufe__bar {
  display: block; width: var(--b); height: 1.6rem;
  border-radius: var(--radius); background: var(--mut); transform-origin: left;
}
.stufe__text { font-size: var(--fs-xs); color: var(--mut); line-height: 1.45; }
.stufe__text b { color: var(--fg); font-weight: 500; }
.stufen figcaption { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--mut); }
.js .stufen .stufe__bar { transform: scaleX(0); transition: transform .7s var(--ease); }
.js .stufen.da .stufe__bar { transform: scaleX(1); }
.js .stufen.da .stufe:nth-child(2) .stufe__bar { transition-delay: .1s; }
.js .stufen.da .stufe:nth-child(3) .stufe__bar { transition-delay: .2s; }
.js .stufen.da .stufe:nth-child(4) .stufe__bar { transition-delay: .3s; }
@media (max-width: 40rem) {
  .stufe { grid-template-columns: 1fr; gap: var(--sp-2); }
}
@media (prefers-reduced-motion: reduce) {
  .js .stufen .stufe__bar { transform: none; transition: none; }
}

/* ---------------------------------------------- Aufbau-Skizze (Projektseite) */
/* Kaesten und Pfeile aus den Seitenfarben. Auf dem Handy wird die SVG zu klein
   fuer ihre Beschriftung; dann steht dieselbe Information als Liste darunter. */
.aufbau { margin: 0 0 var(--sp-7); }
.aufbau svg { width: 100%; height: auto; overflow: visible; }
.aufbau .kasten rect { fill: var(--flaeche); stroke: var(--hair-hell); stroke-width: 1; }
.aufbau text { font-family: var(--f); }
.aufbau .name { font-size: 17px; fill: var(--fg); font-weight: 500; }
.aufbau .rolle { font-size: 14px; fill: var(--mut); }
.aufbau .pfeil { fill: none; stroke: var(--mut); stroke-width: 1.2; marker-end: url(#pfeil); }
.aufbau marker path { fill: var(--mut); }
.aufbau .rahmen { fill: none; stroke: var(--mut); stroke-width: 1; stroke-dasharray: 4 4; }
.aufbau .rahmen-text { font-size: 13px; fill: var(--mut); letter-spacing: .14em; text-transform: uppercase; }
.aufbau__liste { display: none; list-style: none; padding: 0; margin: 0; font-size: var(--fs-xs); color: var(--mut); }
.aufbau__liste li { margin-bottom: var(--sp-2); }
.aufbau figcaption { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--mut); }
@media (max-width: 40rem) {
  .aufbau svg { display: none; }
  .aufbau__liste { display: block; }
}

/* --------------------------------------------------------------- 404-Seite */
/* Das Prüfprotokoll als Tabelle der Seite; die Zahl zählt wie eine Kennzahl hoch. */
.vier { margin-top: var(--sp-7); max-width: 46rem; }
.vier td.e { font-weight: 500; }

/* ---------------------------------------------------------------- Akzent */
/* Eine Farbe, sparsam gesetzt: Rubriken, der gefuellte Knopf, der Badge, die
   aktive Sprache, Projektlinks, Listenpunkte, Hervorhebungen in den Figuren.
   Text, Hintergrund und Haarlinien bleiben monochrom. */
.marke { color: var(--akzent); }
#fortschritt { background: var(--akzent); }
.btn--solid { background: var(--akzent); border-color: var(--akzent); color: var(--bg); }
.btn--solid:hover { background: transparent; color: var(--akzent); }
.badge { background: var(--akzent); color: var(--bg); }
a:hover { border-bottom-color: var(--akzent); }
.projekt__link a { color: var(--akzent); border-bottom-color: color-mix(in srgb, var(--akzent) 45%, transparent); }
.kontakt__links a { border-bottom-color: color-mix(in srgb, var(--akzent) 45%, transparent); }
.langswitch button[aria-pressed="true"] { color: var(--akzent); border-bottom-color: var(--akzent); }
.themeswitch[aria-pressed="true"] { color: var(--akzent); }
.station__list li::before { background: var(--akzent); }
.chart .balken--neu rect { fill: var(--akzent); }
.chart .balken:hover rect { fill: var(--akzent); }
.chart .wert { fill: var(--akzent); }
.flow circle { stroke: var(--akzent); }
.zahl:first-child .w { color: var(--akzent); }
.stufe:first-child .stufe__bar { background: var(--akzent); }
.vier td.e { color: var(--akzent); }
@media print { .badge { border-color: #111; color: #111; } .btn--solid { display: none; } }

/* ======================================================================
   Engineer-Schicht: Mono fuer alles, was Meta ist; Chips, Karten, Raster,
   dichtere Rhythmik. Ueberschreibt die Regeln weiter oben nach Reihenfolge.
   ====================================================================== */

/* Raster im Hintergrund, nur oben links und sehr leise */
.js body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(60rem 40rem at 18% 0%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(60rem 40rem at 18% 0%, #000 25%, transparent 78%);
}

/* Mono fuer Meta */
.marke, .station__when, .engagement, .gruppe, .tags, .status, .topbar__nav a, .langswitch button,
.kennzahlen dt, .zahl .b, .level, .projekt__link, .station__org, .station__ort, .skills__group h3,
footer.footer, .chart text, .flow text, .stufe__text, .badge, .projektseite__meta, .projektseite .back,
.pdf__hinweis, .tbl caption, .tbl th, .aufbau .rolle, .aufbau .rahmen-text, .bild figcaption,
.flow figcaption, .chart figcaption, .stufen figcaption, .aufbau figcaption, .alle summary {
  font-family: var(--f-mono); letter-spacing: 0; text-transform: none;
}
.marke { font-size: .78rem; }
.marke::before { content: "// "; color: var(--mut); }
.engagement, .gruppe, .skills__group h3, .kennzahlen dt { font-size: .74rem; color: var(--mut); letter-spacing: 0; }
.engagement::before, .gruppe::before { content: "# "; color: var(--akzent); }
.station__when { font-size: .78rem; }
.badge { border-radius: 4px; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; }
.tags li { font-size: .76rem; }
.status { font-size: .8rem; }
.topbar__nav a, .langswitch button { font-size: .78rem; }
.topbar__name { font-family: var(--f-mono); font-size: .9rem; letter-spacing: 0; }
.topbar__name::after { content: "_"; color: var(--akzent); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { to { opacity: 0; } }

/* Hero: kompakter, zwei Spalten ab 64rem, rechts die Pipeline */
.hero { padding-block: clamp(4.5rem, 10vh, 6.5rem) clamp(2.5rem, 5vh, 3.5rem); }
.hero__titel { font-size: clamp(2.2rem, 1rem + 3.4vw, 3.4rem); letter-spacing: -.04em; margin-bottom: var(--sp-5); }
.vorspann { font-size: 1.05rem; line-height: 1.5; }
@media (min-width: 64rem) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
}
.btn { border-radius: 6px; padding: .65rem 1rem; font-family: var(--f-mono); font-size: .82rem; }

/* Stack-Leiste unter der Statuszeile */
.stack { display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--sp-5) 0 0; padding: 0; list-style: none; max-width: 42rem; }
.stack li { margin: 0; font-family: var(--f-mono); font-size: .74rem; color: var(--mut-hell); border: 1px solid var(--hair-hell);
  background: var(--flaeche); border-radius: 6px; padding: .28rem .55rem; }
.stack b { color: var(--akzent); font-weight: 500; margin-right: .35rem; }

/* Schwerpunkte als drei Karten */
@media (min-width: 54rem) { .reach { grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: reach; } }
.reach { counter-reset: reach; gap: 1rem; }
.reach__item, .reach__item:first-child { border: 1px solid var(--hair); border-radius: var(--radius); background: var(--flaeche); padding: 1.1rem; max-width: none; }
.reach__item::before { content: counter(reach, decimal-leading-zero); counter-increment: reach; display: block; font-family: var(--f-mono); color: var(--akzent); font-size: .78rem; margin-bottom: .6rem; }
.reach__title { font-size: 1.05rem; }
.reach__item p { font-size: .92rem; line-height: 1.5; }

/* Faehigkeiten als Chips */
.skills { gap: 1.25rem 2rem; }
.skills__list { display: flex; flex-wrap: wrap; gap: .4rem; }
.skills__list li { display: inline-flex; gap: .5rem; align-items: baseline; margin: 0; padding: .3rem .6rem; font-size: .88rem;
  border: 1px solid var(--hair-hell); border-radius: 6px; background: var(--flaeche); }
.skills__list .level { font-size: .68rem; }
.skills__list .level[data-level="4"] { color: var(--akzent); }

/* Projekte als Karten mit Bild oben */
.projekte { grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 54rem) { .projekte { grid-template-columns: 1fr 1fr; } .projekt { grid-template-columns: 1fr; } }
.projekt, .projekt:first-child { display: block; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--flaeche);
  padding: 1rem; max-width: none; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.projekt:hover { border-color: var(--hair-hell); transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .55); }
.projekt__bild { margin-bottom: 1rem; border-radius: 6px; }
.projekt__bild img { opacity: 1; transition: transform .7s var(--ease); }
.projekt:hover .projekt__bild img { transform: scale(1.04); }
.projekt__link a::after { display: inline-block; transition: transform .3s var(--ease); }
.projekt:hover .projekt__link a::after { transform: translateX(3px); }
.projekt h3 { font-size: 1.05rem; }
.projekt p { font-size: .92rem; line-height: 1.5; }
.projekt__text { max-width: none; }

/* Zeitleiste mit Linie */
@media (min-width: 54rem) {
  .station { position: relative; --linie-farbe: color-mix(in srgb, var(--akzent) 70%, var(--hair-hell)); }
  /* Die Linie waechst mit dem Lesen: app.js setzt --linie auf den Anteil, der schon
     oberhalb der Bildschirmmitte liegt. Ohne JS ist sie einfach durchgezogen. */
  .station::before { content: ""; position: absolute; left: calc(8.5rem + clamp(2rem, 4vw, 3.25rem) / 2); top: 0; bottom: 0; width: 1px;
    background: linear-gradient(to bottom, var(--linie-farbe) var(--linie, 100%), var(--hair-hell) 0); }
  /* Punkt auf der Linie, amber sobald die Linie ihn erreicht */
  .station::after { content: ""; position: absolute; left: calc(8.5rem + clamp(2rem, 4vw, 3.25rem) / 2 - 3px); top: calc(var(--sp-6) + .35em); width: 7px; height: 7px;
    border-radius: 50%; background: var(--bg); border: 1px solid var(--hair-hell); transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
  .station:first-of-type::after { top: .35em; }
  .station.erreicht::after { background: var(--akzent); border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent); }
}

/* ------------------------------------------------- Pipeline-Simulation */
/* Tickets wandern durch vier Stufen; simuliert, in Schleife, nicht echt. */
.pipeline { display: none; }
.js .pipeline { display: block; }
.pipe {
  border: 1px solid var(--hair); border-radius: var(--radius); background: var(--flaeche);
  padding: 1rem 1.1rem 1rem; font-family: var(--f-mono); font-size: .72rem; color: var(--mut);
}
.pipe__kopf { display: flex; justify-content: space-between; margin-bottom: 1rem; }
.pipe__kopf b { color: var(--mut-hell); font-weight: 500; }
.pipe__stufen { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: .6rem; }
.pipe__stufen::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 6px; height: 1px; background: var(--hair-hell); }
.pipe__stufe { position: relative; text-align: center; }
.pipe__dot { display: block; width: 13px; height: 13px; margin: 0 auto .45rem; border-radius: 50%; border: 1.5px solid var(--hair-hell); background: var(--bg); transition: border-color .3s, background .3s; }
.pipe__stufe.aktiv .pipe__dot { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent); }
.pipe__stufe.ok .pipe__dot { border-color: var(--akzent); background: var(--akzent); }
.pipe__bahn { position: relative; height: 1.9rem; margin-bottom: .8rem; transition: height .4s var(--ease); }
.pipe__ticket {
  position: absolute; top: 0; left: 0; width: 25%; display: flex; justify-content: center;
  transition: transform .55s var(--ease), opacity .4s var(--ease); will-change: transform;
}
.pipe__ticket span { border: 1px solid var(--hair-hell); border-radius: 5px; padding: .2rem .45rem; background: var(--bg); color: var(--fg); font-size: .7rem; white-space: nowrap; }
.pipe__ticket.rueck span { border-color: var(--akzent); color: var(--akzent); }
.pipe__ticket.hand span { border-color: var(--mut-hell); }
.pipe__ticket.fertig { opacity: 0; }
.pipe__log { border-top: 1px solid var(--hair); padding-top: .6rem; display: grid; gap: .25rem; min-height: 3.6em; }
.pipe__log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe__log div:first-child { color: var(--mut-hell); }
.pipe__log i { font-style: normal; color: var(--akzent); }
.pipe__fuss { margin-top: .7rem; font-size: .66rem; color: var(--mut); }

/* -------------------------------------------------- Befehlspalette (Strg+K) */
.palette-knopf {
  display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-family: var(--f-mono); font-size: .72rem;
  color: var(--mut); background: var(--flaeche); border: 1px solid var(--hair-hell); border-radius: 6px; padding: .3rem .5rem; cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.palette-knopf:hover { color: var(--fg); border-color: var(--mut); }
.palette-knopf kbd { font: inherit; color: var(--mut); }
@media (max-width: 52rem) { .palette-knopf { display: none; } }
.palette { position: fixed; inset: 0; z-index: 60; display: none; align-items: flex-start; justify-content: center; padding: 12vh 1rem 2rem;
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px); }
.palette.offen { display: flex; }
.palette__box { width: min(36rem, 100%); background: var(--flaeche); border: 1px solid var(--hair-hell); border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45); overflow: hidden; font-family: var(--f-mono); }
.palette__eingabe { width: 100%; box-sizing: border-box; font: inherit; font-size: .95rem; padding: .9rem 1rem; border: 0; border-bottom: 1px solid var(--hair);
  background: transparent; color: var(--fg); outline: none; }
.palette__eingabe::placeholder { color: var(--mut); }
.palette__liste { list-style: none; margin: 0; padding: .4rem; max-height: 50vh; overflow: auto; }
.palette__liste li { margin: 0; }
.palette__liste button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: left;
  font: inherit; font-size: .84rem; color: var(--mut-hell); background: none; border: 0; border-radius: 6px; padding: .55rem .7rem; cursor: pointer; }
.palette__liste button small { font-size: .68rem; color: var(--mut); }
.palette__liste li.aktiv button, .palette__liste button:hover { background: var(--bg); color: var(--fg); }
.palette__liste li.aktiv button span::before { content: "› "; color: var(--akzent); }
.palette__fuss { display: flex; gap: 1rem; padding: .5rem .9rem .7rem; font-size: .66rem; color: var(--mut); border-top: 1px solid var(--hair); }
.palette kbd { font: inherit; border: 1px solid var(--hair-hell); border-radius: 4px; padding: 0 .3rem; }

/* ---------------------------------------------------------- Tooltip */
.tip { position: fixed; z-index: 55; pointer-events: none; font-family: var(--f-mono); font-size: .72rem; color: var(--fg);
  background: var(--flaeche); border: 1px solid var(--hair-hell); border-radius: 6px; padding: .35rem .55rem; opacity: 0;
  transform: translate(-50%, -120%); transition: opacity .15s; white-space: nowrap; }
.tip.da { opacity: 1; }

@media print {
  .js body::before, .pipeline, .palette, .palette-knopf, .tip, .topbar__name::after { display: none !important; }
  .reach__item, .projekt, .skills__list li, .stack li { background: none; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar__name::after { animation: none; }
  .pipe__ticket, .pipe__bahn { transition: none; }
  .projekt:hover, .projekt:hover .projekt__bild img { transform: none; }
}
.pipe { cursor: pointer; }
.pipe__fuss b { font-weight: 500; color: var(--mut-hell); }
/* Kopfzeile auf dem Handy: Name in einer Zeile, Navigation eng */
.topbar__name { white-space: nowrap; }
@media (max-width: 52rem) { .topbar__nav { gap: var(--sp-4); } .topbar__nav a { font-size: .74rem; } }
/* Auf dem Handy muss der Hell/Dunkel-Schalter im Bild bleiben: ein Textlink weniger,
   engere Luecken. Auf der Startseite faellt "Werdegang" weg (der Hero hat den Knopf),
   auf Unterseiten "Kontakt" (der Rueckweg bleibt). */
@media (max-width: 40rem) {
  .topbar__nav { gap: var(--sp-3); }
  .langswitch { margin-left: 0; }
  .topbar__nav a[href="#werdegang"], .topbar__nav a[href$="index.html#kontakt"] { display: none; }
}
.status > span { white-space: nowrap; }

/* --------------------------------------------------- Dichte durch Struktur */
/* Ausbildung, Zertifikat und Ehrenamt: eine Zeile je Station statt eines Blocks */
.station--kompakt { padding: var(--sp-4) 0; }
.station--kompakt .station__role { font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.station--kompakt .station__org, .station--kompakt .station__ort { display: inline; margin: 0; }
.station--kompakt .station__ort::before { content: "· "; color: var(--mut); }
.station--kompakt .station__kurz { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--mut-hell); }
@media (min-width: 54rem) {
  .station--kompakt::after { top: calc(var(--sp-4) + .35em); }
}

/* Eingeklappte Aufgaben: app.js setzt .zu auf alles ab der vierten, der Knopf
   am Ende der Liste oeffnet sie. */
.js .station__list li.zu { display: none; }
.js .station__list.offen li.zu { display: list-item; }
.station__mehr { margin-top: var(--sp-1); }
.station__mehr::before { display: none; }
.station__mehr button { font: inherit; font-family: var(--f-mono); font-size: .76rem; color: var(--akzent); background: none; border: 0; padding: 0;
  cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--akzent) 45%, transparent); }
.station__mehr button:hover { color: var(--fg); border-bottom-color: var(--fg); }
@media print { .js .station__list li.zu { display: list-item; } .station__mehr { display: none; } }

/* ---------------------------------------------------------------- Notizen */
/* Liste: Datum links wie in der Zeitleiste, Titel und Anriss rechts. */
.notizen__feed { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--mut); margin: 0 0 var(--sp-6); }
.notizen__liste { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hair); }
.eintrag { display: grid; gap: var(--sp-1) var(--sp-6); padding: var(--sp-5) 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 54rem) { .eintrag { grid-template-columns: 8.5rem minmax(0, 1fr); } }
.eintrag__datum { font-family: var(--f-mono); font-size: .78rem; color: var(--mut); padding-top: .25em; }
.eintrag h2 { font-size: var(--fs-lg); font-weight: 500; line-height: 1.3; margin: 0 0 var(--sp-2); max-width: 36rem; }
.eintrag h2 a { color: var(--fg); border: 0; }
.eintrag h2 a:hover { color: var(--akzent); }
.eintrag__text p { margin: 0 0 var(--sp-2); max-width: 42rem; font-size: var(--fs-md); color: var(--mut-hell); }
.eintrag__meta { font-family: var(--f-mono); font-size: .74rem; color: var(--mut); }

/* Artikel: Fliesstext mit Absatzabstand, Zwischentitel, Zitat, Liste, Autorzeile. */
.notiz .prose { max-width: 40rem; margin-bottom: 0; }
.notiz .prose p { margin-bottom: var(--sp-4); font-size: var(--fs-lg); line-height: 1.6; }
.notiz .prose h2 { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -.01em; margin: var(--sp-6) 0 var(--sp-3); }
.notiz .prose h2::before { content: "# "; color: var(--akzent); font-family: var(--f-mono); font-size: .8em; }
.notiz .prose ul { margin: 0 0 var(--sp-4); padding-left: 1.1em; color: var(--mut-hell); font-size: var(--fs-md); line-height: 1.55; }
.notiz .prose li { margin-bottom: var(--sp-1); }
.notiz .prose blockquote { margin: var(--sp-5) 0; padding: var(--sp-3) var(--sp-5); border-left: 2px solid var(--akzent); background: var(--flaeche); border-radius: 0 var(--radius) var(--radius) 0; }
.notiz .prose blockquote p { margin: 0; font-size: var(--fs-lg); color: var(--fg); }
.notiz .prose .bild { margin: var(--sp-5) 0 var(--sp-6); }
.notiz .prose a { color: var(--akzent); border-bottom-color: color-mix(in srgb, var(--akzent) 45%, transparent); }
.notiz .prose a:hover { color: var(--fg); border-bottom-color: var(--fg); }
.notiz__autor { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hair); font-family: var(--f-mono); font-size: .78rem; color: var(--mut); max-width: 40rem; }
.notiz__autor a { color: var(--mut-hell); }
.notiz__autor a:hover { color: var(--fg); }