/* ============================================================
   Schäfer, Design-Tokens (SSOT)
   Quelle: DESIGN-DECISIONS.md (gelockt 2026-07-18)
   Führung: Halo (Look/Regeln) + Substance Lab (Nav/Reveal/Formular)
            + Sigenergy-Prototyp (nur sk-round-btn-Anatomie)
   Fonts lokal aus /assets/fonts/ (seit 22.08., vorher Google Fonts CDN.
   LG München 2022 zur IP-Übertragung in die USA vor Einwilligung):
     Geist:400,500,600 · Inter:400,500 · Instrument+Serif:ital
   ============================================================ */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/geist-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/inter-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-italic.woff2') format('woff2');
}

:root {
  /* ---------- Farbe: Grund/Ink ---------- */
  --bg: #FBFAF7;                 /* warmes Off-White (Substance Lab) */
  --ink: #1A1815;                 /* warmes Near-Black, Text-Grundfarbe */

  /* Sekundärstufen = --ink auf --bg geblendet bei 70/60/50% Deckkraft,
     als AUSGERECHNETE Hex-Werte (keine opacity-Utilities, Halo-Regel §8) */
  --ink-70: #5E5C59;              /* Sekundärtext (Fließtext gedämpft) */
  --ink-60: #74726F;              /* Tertiärtext (Meta/Captions) */
  --ink-50: #8A8986;              /* schwächste Stufe (Disabled/Hairline-Text) */

  /* Dunkel-Kontrastsektionen: gleicher warmer Near-Black wie --ink,
     eigener Token weil semantisch anderer Zweck (Section-BG statt Text) */
  --near-black: #1A1815;

  /* ---------- Farbe: Akzent ---------- */
  --red: #C40209;                 /* Schäfer-Rot — nie als Vollflächen-Sektionsfarbe */
  --red-hover: #A10207;           /* ~18% abgedunkelt */

  /* Soft-Premium-Veredelung (bestätigt 2026-07-18) — zwei zusätzliche Rot-Ableger,
     analog zur Quelle prototypes/soft-premium/index.html (.btn-primary):
     --red-deep = dritte Verdunklungsstufe (gleiche Abdunklungs-Richtung wie
     --red → --red-hover, fortgesetzt), Bottom-Stop des Hover-Gradients.
     --red-shadow = Hue-Rotation der Quell-Schattenfarbe rgba(126,39,21) [Orange-
     Ramp-Dunkelstufe] auf Schäfer-Rot-Hue bei GLEICHER Lightness/Saturation —
     Basis aller 7 Layer im Signature-Schattenstapel (kein Freihand-Ton). */
  --red-deep: #840105;
  --red-shadow: #7E1518;

  /* Fichten-Beige — KALIBRIERT 2026-07-18 am echten Material
     (assets/raw/still-imagevideo-2.png, CLT-Panel-Median #9A8C7F, Hue 29°):
     Material-Hue beibehalten, auf Flächen-Helligkeit gehoben (L90/S28).
     Vorher provisorisch #E7DEC8 (Hue 43° — zu gelb). */
  --beige: #EDE5DE;

  /* Reines Weiß — nur für erhöhte Oberflächen auf --bg (Nav-Kapsel, Buttons),
     NICHT als Grundfläche. Substance-Lab-Nav-Referenz: solide weiße Kapsel. */
  --surface: #FFFFFF;

  /* ---------- Schatten (exakt zwei, für erhöhte --surface-Flächen) ---------- */
  --shadow-nav: 0 12px 32px rgba(26, 24, 21, 0.08), 0 2px 8px rgba(26, 24, 21, 0.05);
  --shadow-btn: 0 6px 16px rgba(26, 24, 21, 0.08), 0 1px 4px rgba(26, 24, 21, 0.05);

  /* ---------- Typografie: Familien ---------- */
  --font-heading: 'Geist', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-accent: 'Instrument Serif', serif;   /* nur .italic-accent, immer kursiv */

  /* ---------- Typografie: Größen-Skala ----------
     h1 bewusst zurückhaltend (Design-Restraint: 56–64px statt 96+).
     Headline:Lead ≈ 1,5:1 → h2 36px : lead 24px. */
  --fs-caption: 0.8125rem;  /* 13px */
  --fs-btn: 0.9375rem;      /* 15px — Button-Text (eigene Stufe, kleiner als body) */
  --fs-body: 1rem;          /* 16px */
  --fs-body-lg: 1.125rem;   /* 18px */
  --fs-lead: 1.5rem;        /* 24px */
  --fs-h3: 1.75rem;         /* 28px */
  --fs-h2: 2.25rem;         /* 36px */
  --fs-h1: 3.75rem;         /* 60px — Bereich 56–64px */

  /* ---------- Typografie: Tracking-Formel ----------
     −2% bis −4%, monoton wachsend mit der Größe. Ein Token pro Stufe. */
  --tr-caption: -0.02em;
  --tr-btn: -0.0207em;
  --tr-body: -0.021em;
  --tr-body-lg: -0.022em;
  --tr-lead: -0.025em;
  --tr-h3: -0.028em;
  --tr-h2: -0.032em;
  --tr-h1: -0.04em;

  /* ---------- Radien (exakt drei, keine weiteren) ---------- */
  --r-pill: 9999px;
  --r-card: 1rem;      /* 16px */
  --r-media: 1.5rem;   /* 24px */

  /* ---------- Spacing (8er-Basis, kompakt) ---------- */
  --sp-1: 0.5rem;   /* 8px */
  --sp-2: 1rem;     /* 16px */
  --sp-3: 1.5rem;   /* 24px */
  --sp-4: 2rem;     /* 32px */
  --sp-5: 3rem;     /* 48px */
  --sp-6: 4rem;     /* 64px */
  --sp-7: 6rem;     /* 96px */
  --sp-8: 8rem;     /* 128px */

  /* ---------- Layout ---------- */
  --container-w: 75rem;       /* 1200px */
  --container-pad: 1.5rem;    /* 24px Gutter mobil */
  --section-pad-y: var(--sp-7);        /* 96px Desktop */
  --section-pad-y-mobile: var(--sp-5); /* 48px Mobil */

  /* ---------- Button-Solid (.btn--solid, Nav-/Card-Kontext) ---------- */
  --btn-h: 39px;           /* Kontakt-Button-Höhe, Ziel 38–40px */
  --btn-pad-l: 18px;       /* horizontales Padding */
  --btn-ease: cubic-bezier(.22, 1, .36, 1);

  /* ---------- Motion ---------- */
  --reveal-ease: cubic-bezier(.22, 1, .36, 1);
  --reveal-duration: 0.9s;
  --sp-ease: cubic-bezier(0.16, 1, 0.3, 1);  /* Soft-Premium-Easing (Quelle: soft-premium/index.html --ease-out), Button Hover/Press */
}

/* ============================================================
   Minimale Basis-Klassen
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  letter-spacing: var(--tr-body);
  line-height: 1.5;
}

.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-pad-y);
}
@media (max-width: 48rem) {
  .section { padding-block: var(--section-pad-y-mobile); }
}

/* ---------- Typo-Utilities ---------- */
.h1, .h2, .h3 {
  font-family: var(--font-heading);
  font-weight: 600;   /* max. Gewicht im ganzen System */
  margin: 0;
}
.h1 { font-size: var(--fs-h1); letter-spacing: var(--tr-h1); line-height: 1.08; }
.h2 { font-size: var(--fs-h2); letter-spacing: var(--tr-h2); line-height: 1.15; }
.h3 { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); line-height: 1.2; }

.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lead);
  letter-spacing: var(--tr-lead);
  line-height: 1.4;
  color: var(--ink-70);
  margin: 0;
}
.body { font-size: var(--fs-body); letter-spacing: var(--tr-body); }
.body-lg { font-size: var(--fs-body-lg); letter-spacing: var(--tr-body-lg); }
.caption {
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-caption);
  color: var(--ink-60);
  text-transform: uppercase;
}

.italic-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0; /* Serife trägt keine negative Tracking-Formel */
}

/* ============================================================
   Buttons — .btn (Primary) / .btn-ghost (Outline)
   MIRROR-FIRST: Anatomie verbatim aus prototype-claude/styles.css
   .sk-round-btn (Zeilen 57–90) übernommen — Maße, Timings, Ratios
   unverändert, nur Farben + Pfeil-Asset getauscht.
   rem→px-Strategie: Der Mirror skaliert global über
   html{font-size:winW/19.2} (1rem=100px@1920 ⇒ ≈75px@1440 Referenz-
   breite). tokens.css braucht aber den Standard-16px-rem-Kontext für
   den Rest des Systems — eine Scope-Klasse mit eigenem font-size
   würde nichts bringen, weil `rem` IMMER gegen :root auflöst, nicht
   gegen den nächsten Vorfahren (verschachtelte font-size-Scopes
   greifen bei rem nicht). Robustere Variante daher: jeder Original-
   rem-Wert exakt ×75 in px umgerechnet, 1:1, ohne Rundung der Ratio.
   Beispiel: 0.54rem → 40.5px, 0.71rem → 53.25px.
   Grundzustand: helle Pille (--surface), rechts innen ein Kreis in
   Akzentfarbe (--red) mit sichtbarem weißem Pfeil (Original zeigt den
   Pfeil im Ruhezustand — keine Icon-Varianten mehr, s. BUILD-RULES).
   Hover: der Kreis wächst (width) und flutet die GANZE Pille von
   rechts, Pfeil rotiert 45° — Text bleibt lesbar, weil er per
   z-index über dem Kreis liegt und auf --surface umfärbt (Original
   hat konstant weißen Text auf Glas: bei uns nötig, weil der Kreis
   hell→rot flutet statt glas→teal).
   Kontext-Regel: .btn/.btn-ghost nur auf --bg. Auf weißen Flächen
   (--surface: Nav-Kapsel, Cards) stattdessen .btn--solid.
   ============================================================ */
.btn, .btn-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 150px;             /* 2rem × 75 */
  height: 40.5px;                /* 0.54rem × 75 */
  padding: 0 53.25px 0 21px;     /* 0.71rem / 0.28rem × 75 */
  border-radius: 20.25px;        /* 0.27rem × 75 — bei 40.5px Höhe = volle Pille */
  border: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;                /* 0.16rem × 75 */
  letter-spacing: var(--tr-btn);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.btn-text {
  position: relative;
  z-index: 2;
  transition: color 0.4s var(--btn-ease);
}

.btn-arrow {
  position: absolute;
  right: 2.25px;    /* 0.03rem × 75 */
  top: 2.25px;
  width: 36px;       /* 0.48rem × 75 */
  height: 36px;
  border-radius: 20.25px;  /* 0.27rem × 75 — bei 36px Kreisgröße = voller Kreis */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: width 0.6s var(--btn-ease);
}
.btn-arrow-inner {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s var(--btn-ease);
}
.btn-arrow-icon { width: 9px; height: 9px; }  /* 0.12rem × 75 */

.btn:hover .btn-arrow,
.btn-ghost:hover .btn-arrow {
  width: calc(100% - 4.5px);  /* 100% - 0.06rem × 75 */
}
.btn:hover .btn-arrow-inner,
.btn-ghost:hover .btn-arrow-inner {
  transform: rotate(45deg);
}

/* Soft-Premium — Motion (additiv, Sweep-Anatomie oben unangetastet).
   .btn/.btn-ghost bekommen KEINEN neuen Akzent-Schatten (wäre auf heller/
   transparenter Pille frei erfunden) — nur Hub + Press, Soft-Premium-Easing. */
.btn, .btn-ghost {
  transition: transform 0.2s var(--sp-ease);
}
.btn:hover, .btn-ghost:hover { transform: translateY(-2px); }
.btn:active, .btn-ghost:active { transform: translateY(1px); transition-duration: 0.09s; }

/* .btn — helle Pille (--surface), Kreis in --red, Hover flutet Rot */
.btn {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-btn);
}
.btn .btn-arrow { background: var(--red); }
.btn:hover .btn-text { color: var(--surface); }

/* .btn--solid — Kontext-Variante für WEISSE Flächen (--surface: Nav-Kapsel,
   Cards). Die helle Pille wäre dort weiß-auf-weiß. Solide rote Pille,
   keine Disc, kein Sweep — Hover ist ein einfacher Farbwechsel.
   Referenz: Substance-Lab-Nav (solide Farb-Pille in der Kapsel). */
.btn--solid {
  background: linear-gradient(180deg, var(--red) 0%, var(--red-hover) 100%);
  color: var(--surface);
  height: var(--btn-h);
  padding: 0 var(--btn-pad-l);
  min-width: 0;
  /* 7-Layer-Schattenstapel, VERBATIM aus soft-premium/index.html .btn-primary
     (Zeilen 81–89) übernommen — Offsets/Blurs/Alphas unverändert, nur die
     Orange-Schattenfarbe rgba(126,39,21,…) durch --red-shadow ersetzt. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 1px rgba(126, 21, 24, .4),
    0 0 0 .5px rgba(255, 255, 255, .08),
    0 1px 2px rgba(126, 21, 24, .4),
    0 4px 8px -1px rgba(126, 21, 24, .25),
    0 12px 24px -4px rgba(126, 21, 24, .2),
    0 24px 48px -8px rgba(126, 21, 24, .15);
  transition:
    background 0.3s var(--sp-ease),
    box-shadow 0.25s var(--sp-ease),
    transform 0.2s var(--sp-ease);
}
.btn--solid .btn-text { color: var(--surface); }
.btn--solid:hover {
  /* dunkleres Gradient-Paar, analog Quelle .btn-primary:hover */
  background: linear-gradient(180deg, var(--red-hover) 0%, var(--red-deep) 100%);
  transform: translateY(-2px);
  /* 7-Layer-Ruhezustand-Stack bleibt Signature; DESIGN-DECISIONS-Dual-Shadow-
     Hover-Wert (0 6px 28px -2px [Akzent 40%]) als EIN zusätzlicher, breiterer
     Layer angehängt statt eigenes zweites Schatten-Rezept zu erfinden. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 1px rgba(126, 21, 24, .4),
    0 0 0 .5px rgba(255, 255, 255, .08),
    0 1px 2px rgba(126, 21, 24, .4),
    0 4px 8px -1px rgba(126, 21, 24, .25),
    0 12px 24px -4px rgba(126, 21, 24, .2),
    0 24px 48px -8px rgba(126, 21, 24, .15),
    0 6px 28px -2px rgba(196, 2, 9, .4);
}
.btn--solid:hover .btn-text { color: var(--surface); }
.btn--solid:active { transform: translateY(1px); transition-duration: 0.09s; }
.btn--solid .btn-arrow { display: none; }

/* .btn-ghost — Outline auf --ink-70, gleiche Flut-Mechanik in --ink */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-70);
}
.btn-ghost .btn-arrow { background: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost:hover .btn-text { color: var(--surface); }

/* Soft-Premium — Focus-Ring (Pflicht für alle drei Button-Klassen).
   Rezept VERBATIM aus soft-premium/index.html Zeile 92 (a:focus-visible,
   .btn:focus-visible) übernommen: outline:0 + Ring-Halo in Akzent-Alpha +
   die dunkle Schattenfarbe als weicher Offset-Schatten darunter. */
.btn:focus-visible,
.btn-ghost:focus-visible,
.btn--solid:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 4px rgba(196, 2, 9, .24),
    0 10px 20px -14px rgba(126, 21, 24, .5),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ============================================================
   Reveal-Utilities (Substance Lab)
   IntersectionObserver + Word-Split-JS liegen im Token-Sheet /
   späteren Seiten-Script, nicht hier (reine CSS-Datei).
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(48px);
  filter: blur(10px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) var(--reveal-ease);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

[data-reveal-words] .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity 0.7s var(--reveal-ease),
    transform 0.7s var(--reveal-ease),
    filter 0.7s var(--reveal-ease);
}
[data-reveal-words].is-in .word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ============================================================
   NAV-KOMPONENTE Burger (Komponenten-Runde 2026-07-20)
   Freihand-Ausnahme: keine Burger-Spec in reference-substance-lab-
   design.md (nur Desktop-Nav-Kapsel dokumentiert) — Design/Anatomie
   von Elijah vorgegeben (BUILD-RULES-Prompt), hier als Original
   implementiert.
   Gilt NUR ≤768px. Desktop (>768px) bleibt exakt wie bisher: Burger
   ist per Default display:none, Panel per Default unsichtbar.
   Positionierung: .nav-capsule wird zur Positionierungs-Referenz
   (position:relative als Fallback — Files, die .nav-capsule bereits
   selbst position:fixed geben (z. B. hero-v2), überschreiben das via
   Cascade unverändert; beide Fälle sind gültige Positionierungs-
   Kontexte für das absolut positionierte Panel). Funktioniert damit
   identisch, ob die Kapsel in einem fixed <header> sitzt, selbst
   fixed positioniert ist, oder (token-sheet.html) nur als Demo-Block
   im normalen Fluss steht.
   Reihenfolge in der Kapsel: Logo | Links | Bewerben-Pille | Burger
   (Markup-Pflicht: Burger-Button + Panel stehen nach der Pille).
   ============================================================ */
.nav-capsule {
  position: relative;
}

.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-burger-lines {
  position: relative;
  width: 18px;
  height: 12px;
}
.nav-burger-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
  transition: transform 0.3s var(--sp-ease), top 0.3s var(--sp-ease);
}
.nav-burger-lines span:first-child { top: 0; }
.nav-burger-lines span:last-child { top: 10px; }

/* X-Transform bei offen */
.nav-burger[aria-expanded="true"] .nav-burger-lines span:first-child {
  top: 5px;
  transform: rotate(45deg);
}
.nav-burger[aria-expanded="true"] .nav-burger-lines span:last-child {
  top: 5px;
  transform: rotate(-45deg);
}

/* Panel: eigenes abgerundetes Panel unter der Kapsel, KEIN backdrop-filter
   (iOS-Safari-Crash-Regel ≤1023px, s. hero-v3-fullscreen.html), Schatten
   wiederverwendet (--shadow-nav), Radius aus der Kapsel-Radius-Familie
   (--r-card). Breite = volle Kapselbreite (Elijah-Gate 2026-07-20;
   left/right:0 relativ zum .nav-capsule-Anker statt max-content). */
.nav-mobile-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  z-index: 10;
  border-radius: var(--r-card);
  /* Deckend, nicht 0.97 wie die Kapsel. Mobile-QA 2026-08-22: bei 3 Prozent
     Transparenz stand die H1 der Seite lesbar hinter den Menuepunkten, auf
     einer grossen, ruhigen Flaeche faellt das als Renderfehler auf. Die
     Kapsel selbst bleibt bei 0.97, dort liegt nur Hintergrund darunter. */
  background: rgb(255, 255, 255);
  box-shadow: var(--shadow-nav);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.3s var(--sp-ease), transform 0.3s var(--sp-ease);
}
.nav-mobile-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-mobile-links {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-mobile-links a {
  display: block;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: var(--tr-body);
  color: var(--ink-70);
  text-decoration: none;
  padding: 12px 16px;
  border-radius: calc(var(--r-card) - 8px);
  transition: color 0.3s ease, background-color 0.3s ease;
}
.nav-mobile-links a:hover {
  color: var(--ink);
  background: rgba(26, 24, 21, 0.04);
}

/* Bewerben-Pille (.nav-cta). Elijah-Entscheid 2026-09-22: der Haupt-CTA der
   Nav fuehrt zur Schnellbewerbung, weil das Ziel der Seite Bewerber sind.
   "Kontakt" ist seitdem ein normaler Link. Unter 768px bleibt die Pille in
   der Kapsel stehen und heisst nur "Bewerben". Das hebt den Entscheid vom
   2026-07-28 auf (Pille mobil ins Menue verschoben): die Zielgruppe ist fast
   nur am Handy unterwegs und sah dort im Kopf gar keinen Weg zur Bewerbung.
   Der Platz reicht mit dem kurzen Text bis 320px, gemessen. */
.nav-cta-kurz { display: none; }

/* Mit "Kontakt" als fuenftem Link und "Jetzt bewerben" ist die Kapsel 724px
   breit. Bei 769px Viewport stehen nur 721px zur Verfuegung, "Über uns" brach
   um (gemessen 22.09.). Zwischen 769 und 960px deshalb engere Abstaende.
   header davor, weil die Seiten gap:24px inline nach tokens.css setzen. */
header .nav-links a { white-space: nowrap; }
@media (min-width: 769px) and (max-width: 960px) {
  header .nav-capsule, header .nav-links { gap: 16px; }
}

@media (max-width: 768px) {
  .nav-burger { display: inline-flex; }
  /* margin-left:auto zieht Pille und Burger als Gruppe nach rechts, sonst
     setzt space-between die Pille in die Mitte der Kapsel. */
  .nav-capsule > .nav-cta { margin-left: auto; height: 36px; padding: 0 16px; }
  /* header davor: die Seiten setzen gap:24px inline nach tokens.css, gleiche
     Spezifitaet wuerde dort gewinnen. */
  header .nav-capsule { gap: 8px; }
  .nav-cta-voll { display: none; }
  .nav-cta-kurz { display: inline; }
  .nav-capsule > .nav-cta { flex-shrink: 0; }
  /* Ohne die Pille wäre die Kapsel auf 204px zusammengefallen. Sie läuft
     stattdessen auf die Content-Breite: Logo links, Burger rechts, dazwischen
     Weißraum. Die Kanten decken sich damit exakt mit H1 und Fließtext
     (x=24, 342 breit bei 390) — die Breite ist hergeleitet, nicht gesetzt. */
  /* Deckel = 603px, die Breite, die die Kapsel ab 769px von selbst annimmt
     (Logo + Links + Pille + Burger, an allen Desktop-Breiten konstant). Damit
     springt sie am Breakpoint nicht mehr, und auf einem 768er-Tablet steht kein
     720px langer, fast leerer Balken. Unter ~651px greift der Deckel nie.
     Gemessen, nicht geschätzt: 603,48px bei 769px und bei 1280px Viewport,
     Startseite und Unterseiten identisch, Fonts geladen. Wert = Abrundung,
     gleiche Konvention wie beim Vorgängerwert 518 (gemessen 518,48). Der
     vierte Nav-Link „Über uns" hat die Kapsel am 22.08. um 85px verbreitert
     (60,99px Linkbreite + 24px Gap). Wer die Nav-Liste wieder ändert, muss
     diese Zahl neu messen, sonst springt die Kapsel am Breakpoint. */
  /* Nachtrag 22.09.: mit Kontakt-Link, "Jetzt bewerben" und den engeren
     Abstaenden unter 960px misst die Kapsel bei 769px 675,61px. Der Deckel
     folgt, sonst springt sie am Breakpoint um 73px. */
  .nav-capsule { width: 100%; max-width: 675px; justify-content: space-between; }
}
/* Unter 360px reicht die Kapsel nicht fuer Logo, Schriftzug, Pille und
   Burger (gemessen bei 320px: Pille auf 76px gequetscht). Der Schriftzug
   weicht, das Logo-Icon bleibt. 360px (gaengigstes Android) passt noch. */
@media (max-width: 359px) {
  .nav-logo .wordmark { display: none; }
}