/* ═══════════════════════════════════════════════════════════════
   markus-moesch.de — gemeinsame Grundlage aller Seiten
   JEDE Seite lädt zuerst diese Datei und danach ihre eigene:
     Startseite            basis.css + start.css
     Softwareentwicklung   basis.css + software.css
     Impressum · Master-
     arbeit · 404 · Labor  basis.css + seiten.css (Labor zusätzlich labor.css)

   Hier stehen nur Dinge, die ALLE Seiten brauchen: Farb- und Schrift-
   Tokens, Grundgerüst, Kopfzeile, Mobilmenü, Knöpfe, Ladeschicht,
   Sektionsköpfe, Fragen, Kontakt, Fußzeile, Regie-Schalter und der
   Ruhe-Modus. Was nur eine Seite braucht, gehört in deren Datei.

   Angelegt am 20.08.2026: Vorher trugen start.css und software.css
   rund 900 identische Zeilen doppelt — jede Token-Änderung hätte an
   mehreren Stellen gepflegt werden müssen.

   Kennzeichen: Konstruktionszeichnungs-Motiv (Blueprint-Raster,
   Bemaßungs-Ecken, Schriftfeld, Vermessungslinie) und die
   Choreografie-Verträge für die js/*-Dateien der Seiten.

   Grundsatz (Lehre „Animationen brauchen JS-Fallback"): KEIN Element
   startet hier mit opacity: 0. Alle Startzustände setzt GSAP selbst —
   ohne JavaScript ist die Seite vollständig sichtbar.
   ═══════════════════════════════════════════════════════════════ */

/* ── Schriften (selbst gehostet, DSGVO-konform) ── */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-var.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
/* Fraunces-Italic wurde wieder ausgebaut: Die kursive Serife wirkte in den
   Verlaufs-Wörtern fremd im Schriftbild (Founder-Feedback 19.08.2026). */

/* ── Tokens (Marke der echten Seite + Studien-Zutaten) ── */
:root {
  /* Sagt dem Browser: Diese Seite IST bereits dunkel gestaltet.
     Ohne diese Angabe hält Chrome (Android/Tablet), Samsung Internet und
     Edge die Seite für eine helle Seite und legen ihren AUTOMATISCHEN
     Dunkelmodus darüber — der rechnet die Farben um und macht aus weißer
     Schrift Gelb und aus dem Verlauf Dunkelblau/Grün. Genau so sah die
     Startseite am 20.08.2026 auf dem Tablet aus. */
  color-scheme: dark;
  --grund: #0a0e1a;
  --grund-erhoben: #0e1424;
  --flaeche: rgba(255, 255, 255, 0.04);
  --flaeche-stark: rgba(255, 255, 255, 0.07);
  --kante: rgba(255, 255, 255, 0.09);
  --kante-stark: rgba(255, 255, 255, 0.16);
  /* ── Farben: ZWEI Textstufen, EINE Akzentfarbe ──
     Vorher: drei Graustufen, zwei Akzentfarben und rund 20 einzelne
     rgba-Werte. Die dritte Graustufe (#7a8699) war von der zweiten kaum
     zu unterscheiden, kostete aber eine weitere Farbe im Gesamtbild.
     Türkis lebt nur noch IM Verlauf (Hero-Name, Knöpfe) — nicht mehr als
     eigene Punkt- oder Textfarbe. */
  --text: #f2f5fa;                        /* Überschriften, wichtige Zahlen */
  --text-dim: #9aa7bd;                    /* alles Zweitrangige            */
  --akzent: #5b9dff;
  --akzent-2: #38e1c8;                    /* NUR im Verlauf verwenden      */
  --akzent-schein: rgba(91, 157, 255, 0.35);
  /* Drei Flächenstufen der Akzentfarbe — mehr braucht die Seite nicht. */
  --akzent-flaeche: rgba(91, 157, 255, 0.12);
  --akzent-kante: rgba(91, 157, 255, 0.30);
  --verlauf: linear-gradient(120deg, var(--akzent) 0%, var(--akzent-2) 100%);
  --schatten-karte: 0 16px 40px -18px rgba(0, 0, 0, 0.6);
  --schatten-gross: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --radius: 18px;
  --radius-klein: 12px;
  --schrift-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --schrift-text: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* ── Typo-Skala: SECHS Stufen, mehr gibt es nicht ──
     Vorher standen hier rund 30 Einzelwerte (11 / 11,5 / 12 / 12,5 / 13 /
     13,5 / 14 / 14,5 / 15 / 15,5 / 16,5 / 17 / 18 / 19 …). Solche
     Nachbarwerte unterscheiden sich nicht sichtbar, erzeugen aber ein
     unruhiges Gesamtbild (Founder-Feedback 19.08.2026). Jede Schriftgröße
     im Stil kommt jetzt aus dieser Skala — keine losen px-Werte mehr.
     Verhältnis rund 1,25 je Stufe.

     In rem statt px, damit die Stufen der im Browser eingestellten
     Schriftgröße folgen — und damit die Textstufe exakt auf dem Erbwert
     des Fließtexts liegt (sonst stünden 15,5 px und 16 px nebeneinander). */
  --t-mikro: 0.75rem;                     /* 12 px — Versal-Labels, Chips */
  --t-xs: 0.875rem;                       /* 14 px — Meta, Fußzeile     */
  --t-s: 1rem;                            /* 16 px — Fließtext, Nav, Knöpfe */
  --t-l: clamp(19px, 2vw, 23px);          /* Karten-Überschriften     */
  --t-xl: clamp(31px, 4.2vw, 52px);       /* Sektionstitel, Zahlen    */
  --t-hero: clamp(40px, 5vw, 76px);       /* nur der Name im Hero     */

  /* ── Gewichte: ZWEI, mehr gibt es nicht ──
     600 trägt alles Hervorgehobene — vom Chip bis zur größten Überschrift.
     Der Unterschied entsteht über die Größe, nicht über ein drittes
     Gewicht (vorher standen 600 und 700 nebeneinander). */
  --w-text: 400;
  --w-halb: 600;
  --w-fett: 600;

  /* ── Sperrungen: DREI Rollen ── */
  --sp-display: -0.03em;                  /* große Schrift zieht zusammen */
  --sp-text: 0;
  --sp-versal: 0.14em;                    /* Großbuchstaben brauchen Luft */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --kopf-hoehe: 72px;
  /* Blueprint-Linienfarbe des Konstruktions-Motivs */
  --plan-linie: rgba(122, 162, 247, 0.16);

  /* ── Brücke zu den alten Namen ──
     Die Werkbank css/labor.css (und alles, was noch nicht umgestellt ist)
     spricht die Tokens unter ihren englischen Namen an. Statt jede dieser
     Dateien anzufassen, zeigen die alten Namen hier auf die neuen. So kann
     style.css später ersatzlos entfallen, ohne dass etwas bricht. */
  --bg: var(--grund);
  --bg-elevated: var(--grund-erhoben);
  --surface: var(--flaeche);
  --surface-strong: var(--flaeche-stark);
  --border: var(--kante);
  --border-strong: var(--kante-stark);
  --accent: var(--akzent);
  --accent-2: var(--akzent-2);
  --accent-glow: var(--akzent-schein);
  --gradient: var(--verlauf);
  --shadow-card: var(--schatten-karte);
  --shadow-elevated: var(--schatten-gross);
  --radius-small: var(--radius-klein);
  --text-faint: var(--text-dim);
  --font-display: var(--schrift-display);
  --font-body: var(--schrift-text);
  --nav-height: var(--kopf-hoehe);

}

/* ── Reset & Basis ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* `clip` statt `hidden` — `hidden` macht das Element zum Scroll-Container
     und bricht position: sticky im ganzen Dokument (nachgemessen 12.08.2026,
     Begründung in style.css). */
  overflow-x: clip;
}

body {
  background-color: var(--grund);
  background-image:
    radial-gradient(ellipse 60% 30% at 12% 2%, rgba(59, 108, 210, 0.18), transparent 72%),
    radial-gradient(ellipse 55% 26% at 88% 92%, rgba(59, 108, 210, 0.12), transparent 72%);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
/* Sicherheitsnetz: Ein SVG ohne width/height dehnt sich sonst auf die
   volle Breite seines Behälters. Auf dieser Seite tragen mehrere Symbole
   nur ein viewBox-Attribut. */
svg:not([width]) { width: 1.2em; height: 1.2em; }
picture { display: contents; }
/* Formularelemente und Knöpfe erben die Schrift NICHT von selbst — ohne
   diese Zeile fällt der Sende-Knopf auf die Systemschrift zurück
   (nachgemessen: Arial 17px statt Inter). */
button, input, textarea, select { font-family: inherit; font-size: var(--t-s); color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
i { font-style: normal; }

/* Silbentrennung standardmäßig AUS. Auf breiten Fenstern ist genug Platz;
   jedes Trennzeichen („Er-fahrung", „effizi-enter") stört das ruhige Bild.
   Nur auf schmalen Geräten wird sie zugeschaltet — dort verhindert sie,
   dass lange deutsche Komposita die Zeile sprengen. */
h1, h2, h3, p, li, span, a {
  overflow-wrap: break-word;
  -webkit-hyphens: none;
  hyphens: none;
}
.knopf, .kopf-link, .kicker, .station-chip, .chips li, .fakt-label,
.hero-eyebrow, .hero-rolle, .marke, .regie-bewegung { hyphens: none; }
/* Überschriften werden NICHT getrennt: In großer Schrift fällt jedes
   Trennzeichen sofort auf („Lösun-gen"), und ein Umbruch mitten im Wort
   liest sich schlechter als eine kürzere Zeile (Founder-Feedback
   19.08.2026). Fließtext darf weiterhin trennen — dort hilft es. */
.hero-titel, .sektion-titel, .station-titel, .bento-titel, .kontakt-titel,
.lauf-jahr, .ziffer-wert-zeile, .interesse h3, .faq-frage, .lade-marke {
  -webkit-hyphens: none;
  hyphens: none;
}

::selection { background: rgba(91, 157, 255, 0.35); color: #fff; }

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

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 400;
  padding: 10px 18px;
  background: var(--grund-erhoben);
  border: 1px solid var(--kante-stark);
  border-radius: var(--radius-klein);
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

.container {
  width: min(1160px, 100% - 48px);
  margin-inline: auto;
}

/* ═══════════════════════════ Ladeschicht ═══════════════════════════ */

.lade {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--grund);
}
/* Nur sichtbar, wenn JavaScript läuft UND Bewegung erlaubt ist. */
html.js:not(.still) .lade { display: flex; }

.lade-kern { text-align: center; }
.lade-marke {
  font-family: var(--schrift-display);
  font-size: var(--t-xl);
  font-weight: var(--w-fett);
  letter-spacing: var(--sp-display);
}
.lade-marke-akzent {
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lade-zahl {
  margin-top: 10px;
  font-size: var(--t-s);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.lade-prozent { opacity: 0.6; margin-left: 1px; }
.lade-linie {
  margin: 22px auto 0;
  width: min(260px, 60vw);
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.lade-linie span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--verlauf);
  transform: scaleX(0);
  transform-origin: left;
}

/* ═══════════════════════════ Lese-Fortschritt ═══════════════════════════ */

.fortschritt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 250;
  pointer-events: none;
}
.fortschritt span {
  display: block;
  height: 100%;
  background: var(--verlauf);
  transform: scaleX(0);
  transform-origin: left;
}

/* ═══════════════════════════ Kopfzeile ═══════════════════════════ */

.kopfzeile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  transition: transform 0.45s var(--ease-out), background-color 0.35s ease,
              border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.kopfzeile.ist-gescrollt {
  background: rgba(10, 14, 26, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--kante);
}
.kopfzeile.versteckt { transform: translateY(-100%); }

.kopf-innen {
  width: min(1240px, 100% - 48px);
  margin-inline: auto;
  height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  gap: 18px;
}
.marke {
  font-family: var(--schrift-display);
  font-size: var(--t-l);
  font-weight: var(--w-fett);
  letter-spacing: var(--sp-display);
  white-space: nowrap;
}
.marke-akzent {
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kopf-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.kopf-link {
  display: inline-block;
  padding: 8px 12px;
  font-size: var(--t-s);
  color: var(--text-dim);
  border-radius: var(--radius-klein);
  transition: color 0.25s ease, background-color 0.25s ease;
  white-space: nowrap;
}
.kopf-link:hover { color: var(--text); background: var(--flaeche); }
.kopf-link.ist-aktiv { color: var(--text); }
.kopf-cta { flex: none; }
.kopf-links + .kopf-cta { margin-left: 4px; }

/* ═══════════════════════════ Knöpfe ═══════════════════════════ */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--t-s);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-text);
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease,
              background-color 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}
.knopf-primaer {
  background: var(--verlauf);
  color: #06101f;
  box-shadow: 0 10px 30px -12px var(--akzent-schein);
}
.knopf-primaer:hover { box-shadow: 0 14px 36px -10px var(--akzent-schein); }
.knopf-geist {
  background: var(--flaeche);
  border-color: var(--kante-stark);
  color: var(--text);
}
.knopf-geist:hover { background: var(--flaeche-stark); }
.knopf-klein { padding: 9px 18px; font-size: var(--t-xs); }
.knopf-gross { padding: 15px 32px; font-size: var(--t-s); }

/* Magnetische Knöpfe: äußere Hülle und innerer Kern werden vom JS
   getrennt verschoben — der Kern etwas schwächer, das gibt Tiefe. */
.magnet-kern {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  will-change: transform;
}

/* ═══════════════════════════ Sektionen ═══════════════════════════ */

.sektion { padding: clamp(84px, 11vw, 150px) 0 0; }

.sektion-kopf { margin-bottom: clamp(36px, 5vw, 64px); }

/* Die Sektionsnummer steht ruhig: Sie ordnet nur ein. Vorher trug sie
   dieselbe Marken-Farbe wie die Akzent-Wörter und die Knöpfe — dadurch
   konkurrierten auf einem Bildschirm drei blaue Signale um dieselbe
   Aufmerksamkeit. */
.kicker {
  display: inline-block;
  font-size: var(--t-mikro);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-versal);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.kicker::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 34px;
  height: 1px;
  margin-right: 12px;
  background: var(--text-dim);
  opacity: 0.5;
}
.kicker-mittig::before { display: none; }

.sektion-titel {
  font-family: var(--schrift-display);
  font-size: var(--t-xl);
  font-weight: var(--w-fett);
  letter-spacing: var(--sp-display);
  line-height: 1.15;
  /* KEINE künstliche Breitenbegrenzung mehr: Vorher standen hier 22
     Zeichen, wodurch schon „Individuelle Software, effizient gebaut."
     zweizeilig umbrach, obwohl gut die doppelte Breite frei war.
     Jetzt läuft jede Überschrift bis zur Spaltenbreite — also bis zur
     Breite des Films darunter — und bricht erst dort um
     (Founder-Feedback 20.08.2026). */
}

/* Verlaufs-Akzent: EIN Wort je Überschrift, in derselben Schrift wie die
   Überschrift selbst — einheitliches Schriftbild wie beim Hero-Namen. */
.akzent-wort {
  font-style: normal;
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.02em;
}

/* ═══════════════════════════ Fragen ═══════════════════════════ */

.faq-liste {
  max-width: 860px;
  display: grid;
  gap: 12px;
}
.faq-punkt {
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: var(--radius-klein);
  transition: border-color 0.3s ease;
}
.faq-punkt[open] { border-color: var(--kante-stark); }
.faq-frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--schrift-display);
  font-size: var(--t-s);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-display);
}
.faq-frage::-webkit-details-marker { display: none; }
.faq-pfeil { flex: none; color: var(--text-dim); transition: transform 0.35s var(--ease-out); }
.faq-punkt[open] .faq-pfeil { transform: rotate(180deg); }
.faq-antwort { padding: 0 22px 20px; color: var(--text-dim); font-size: var(--t-s); }
.faq-antwort p + p, .faq-antwort ul { margin-top: 12px; }
.faq-antwort a { color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; }
.faq-liste-punkte { display: grid; gap: 8px; padding-left: 2px; }
.faq-liste-punkte strong { color: var(--text); font-weight: var(--w-halb); }
html.js:not(.still) .faq-punkt[open] .faq-antwort { animation: faq-auf 0.4s var(--ease-out); }
@keyframes faq-auf {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════ Kontakt ═══════════════════════════ */

.kontakt-karte {
  position: relative;
  padding: clamp(36px, 5.4vw, 72px);
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: calc(var(--radius) + 6px);
  text-align: center;
  overflow: clip;
}
.kontakt-karte::before {
  content: '';
  position: absolute;
  inset: -30% -20% auto;
  height: 70%;
  background: radial-gradient(ellipse 60% 55% at 50% 0%, var(--akzent-flaeche), transparent 70%);
  pointer-events: none;
}
.kontakt-titel {
  position: relative;
  font-family: var(--schrift-display);
  font-size: var(--t-xl);
  font-weight: var(--w-fett);
  letter-spacing: var(--sp-display);
  line-height: 1.15;
  margin-bottom: 14px;
}
.kontakt-titel .wort { display: inline-block; will-change: transform; }
/* SplitText legt die Wort-Spans INNERHALB des em an. background-clip: text
   auf dem Eltern-em malt in transformierte Kind-Spans hinein NICHTS —
   „Austausch?" war da (opacity 1, 287 px breit) und trotzdem unsichtbar.
   Deshalb bekommt der Wort-Span den Verlauf selbst. */
.kontakt-titel em .wort {
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
.kontakt-sub {
  position: relative;
  max-width: 46ch;
  margin: 0 auto 26px;
  color: var(--text-dim);
}
.kontakt-wege {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.kontakt-trenner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 560px;
  margin: 30px auto;
  color: var(--text-dim);
  font-size: var(--t-xs);
}
.kontakt-trenner::before, .kontakt-trenner::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--kante);
}

.kontakt-form {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
  text-align: left;
  display: grid;
  gap: 16px;
}
.kontakt-reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.kontakt-feld { display: grid; gap: 7px; }
.kontakt-feld label {
  font-size: var(--t-xs);
  font-weight: var(--w-halb);
  color: var(--text-dim);
}
.kontakt-feld input,
.kontakt-feld textarea {
  width: 100%;
  padding: 13px 16px;
  background: rgba(10, 14, 26, 0.6);
  border: 1px solid var(--kante);
  border-radius: var(--radius-klein);
  color: var(--text);
  font: inherit;
  font-size: var(--t-s);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.kontakt-feld input::placeholder,
.kontakt-feld textarea::placeholder { color: var(--text-dim); }
.kontakt-feld input:focus,
.kontakt-feld textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-flaeche);
}
.kontakt-feld textarea { resize: vertical; min-height: 130px; }

/* Honigtopf: raus aus dem Sichtbaren, aber im Formular. */
.formular-falle {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.kontakt-haken {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--t-xs);
  color: var(--text-dim);
  cursor: pointer;
}
.kontakt-haken input {
  flex: none;
  width: 17px; height: 17px;
  margin-top: 2px;
  accent-color: var(--akzent);
  /* Ohne diese Zeile zeichnet Chrome das leere Kästchen strahlend weiß —
     ein greller Fleck auf der dunklen Karte. */
  color-scheme: dark;
}
.kontakt-haken a { color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; }

.kontakt-senden { justify-self: center; margin-top: 6px; }

.kontakt-ort {
  position: relative;
  margin-top: 26px;
  font-size: var(--t-xs);
  color: var(--text-dim);
}

/* ═══════════════════════════ Fußzeile ═══════════════════════════ */

.fusszeile {
  margin-top: clamp(84px, 11vw, 150px);
  border-top: 1px solid var(--kante);
  padding: 30px 0 34px;
}
.fuss-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.fuss-zeile { font-size: var(--t-xs); color: var(--text-dim); }
.fuss-stand { margin-left: 14px; opacity: 0.8; }
.fuss-nav { display: flex; gap: 18px; font-size: var(--t-xs); color: var(--text-dim); }
.fuss-nav a:hover { color: var(--text); }

/* ═══════════════════════════ Zurück nach oben ═══════════════════════════ */

.nach-oben {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 180;
  width: 46px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grund-erhoben);
  border: 1px solid var(--kante-stark);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
}
.nach-oben.sichtbar { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ═══════════════════════════ Regie (Bewegung an/aus) ═══════════════════════════ */

.regie {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 180;
  display: flex;
  align-items: center;
  gap: 10px;
}
.regie-bewegung {
  padding: 8px 15px;
  background: rgba(10, 14, 26, 0.85);
  border: 1px solid var(--kante-stark);
  border-radius: 999px;
  color: var(--text-dim);
  font: var(--w-halb) var(--t-mikro)/1 var(--schrift-text);
  letter-spacing: var(--sp-text);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.regie-bewegung:hover { color: var(--text); border-color: var(--akzent); }
.regie-hinweis { font-size: var(--t-mikro); color: var(--text-dim); }
/* Ohne JavaScript gibt es nichts zu schalten. */
html:not(.js) .regie { display: none; }

/* ── Ausklappbare Vertiefung in einer Station (natives <details>) ──
   Von der echten Startseite übernommen: „Was die Niederlassung Ulm macht".
   Funktioniert ohne eine Zeile JavaScript und ist von Haus aus mit der
   Tastatur bedienbar. */
.station-knopf { margin-top: 16px; }

.station-mehr {
  margin-top: 16px;
  border-top: 1px solid var(--kante);
  padding-top: 14px;
}
.mehr-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-s);
  font-weight: var(--w-halb);
  color: var(--text-dim);
}
.mehr-kopf::-webkit-details-marker { display: none; }
.mehr-pfeil { flex: none; transition: transform 0.35s var(--ease-out); }
.station-mehr[open] .mehr-pfeil { transform: rotate(180deg); }
.station-mehr[open] .mehr-kopf { color: var(--text); }
.mehr-inhalt { margin-top: 12px; font-size: var(--t-xs); color: var(--text-dim); }
.mehr-inhalt p + .mehr-titel { margin-top: 14px; }
.mehr-titel {
  font-weight: var(--w-halb);
  color: var(--text);
  margin-bottom: 6px;
}
.mehr-liste { display: grid; gap: 7px; margin-bottom: 4px; }
.mehr-liste li { padding-left: 14px; position: relative; }
.mehr-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--akzent);
  opacity: 0.7;
}
.mehr-liste strong { color: var(--text); font-weight: var(--w-halb); }
.mehr-fuss { margin-top: 14px; opacity: 0.75; }
html.js:not(.still) .station-mehr[open] .mehr-inhalt { animation: faq-auf 0.4s var(--ease-out); }

/* ═══════════════════════════ Mobilmenü ═══════════════════════════ */

/* Unter 960 px ersetzt der Menü-Knopf die Navigationsleiste. In der
   Testfassung fehlte das noch (dort stand nur Marke + Kontakt-Knopf) —
   auf der echten Startseite ist es Pflicht, sonst sind Werdegang,
   Kompetenzen und Fragen auf dem Handy nicht erreichbar. */
.menue-knopf {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  /* Nie schmaler als 44 px — sonst quetscht der lange Name den Knopf
     auf sehr schmalen Geräten zusammen (Lehre aus style.css). */
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: var(--radius-klein);
  cursor: pointer;
}
.menue-knopf span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}
body.menue-offen .menue-knopf span:first-child { transform: translateY(4px) rotate(45deg); }
body.menue-offen .menue-knopf span:last-child  { transform: translateY(-4px) rotate(-45deg); }
/* Ohne JavaScript gibt es nichts aufzuklappen — dann bleibt der Knopf weg
   und die Navigationsleiste sichtbar (siehe Umbruch-Regeln unten). */
html:not(.js) .menue-knopf { display: none; }

/* Linksbündig statt mittig (Founder-Wunsch 21.08.2026): Die Einträge
   beginnen an derselben Kante wie die Marke in der Kopfzeile darüber —
   das Auge findet sie ohne Sprung, und es folgt der Leserichtung.
   Der Inhalt sitzt unterhalb der Kopfzeile, nicht in der Bildmitte;
   damit bleibt der Menü-Knopf sichtbar, mit dem man wieder schließt. */
.mobilmenue {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(10, 14, 26, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  /* Dieselbe Kante wie .kopf-innen — nachgemessen, nicht geschätzt. */
  padding: calc(var(--kopf-hoehe) + 24px) 24px 32px;
  gap: 34px;
  /* Bei vielen Einträgen auf kleinen Geräten scrollbar statt abgeschnitten. */
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
body.menue-offen .mobilmenue { opacity: 1; visibility: visible; }
body.menue-offen { overflow: hidden; }

.mobilmenue-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.mobilmenue-links a {
  font-family: var(--schrift-display);
  font-size: var(--t-l);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-display);
  color: var(--text);
}
.mobilmenue-fuss {
  font-size: var(--t-xs);
  color: var(--text-dim);
}

/* ═══════════════════════════ Ruhe-Modus ═══════════════════════════ */

/* html.still setzt das JS bei Systemvorgabe, ?bewegung=aus oder
   gemerkter Wahl. Alles steht, alles ist sichtbar und benutzbar. */
html.still .lade { display: none; }
html.still .laufband-spur,
html.still .aurora-orb,
html.still .puls-punkt,
html.still .scroll-hinweis-punkt { animation: none !important; }
html.still .faq-punkt[open] .faq-antwort { animation: none; }

/* Systemvorgabe „Bewegung reduzieren" wirkt auch ohne JavaScript auf die
   reinen CSS-Animationen — außer die Bewegung wurde ausdrücklich erlaubt
   (dann trägt html die Klasse .bewegt). */
@media (prefers-reduced-motion: reduce) {
  html:not(.bewegt) .laufband-spur,
  html:not(.bewegt) .aurora-orb,
  html:not(.bewegt) .puls-punkt,
  html:not(.bewegt) .scroll-hinweis-punkt { animation: none !important; }
  html:not(.bewegt) .faq-punkt[open] .faq-antwort { animation: none; }
}

/* ═══════════════════════════ Umbrüche ═══════════════════════════ */

/* Nur was ALLE Seiten betrifft. Startseiten- und Software-eigene
   Umbrüche stehen in start.css bzw. software.css. */

/* 961–1120 px: Die volle Kopfzeile passt nicht mehr — overflow-x: clip
   schnitt den Kontakt-Knopf lautlos ab (Format-Sweep 1024 px,
   19.08.2026). Chip weg, Links enger. */
@media (max-width: 1120px) {
  .kopf-link { padding: 8px 8px; font-size: var(--t-xs); }
}

@media (max-width: 960px) {
  /* Ohne JavaScript bleibt die Leiste stehen — sonst wäre die Seite dort
     nicht navigierbar (Lehre „Animationen brauchen JS-Fallback"). */
  html.js .kopf-links { display: none; }
  html.js .menue-knopf { display: flex; }
  .kopf-links { flex-wrap: wrap; justify-content: flex-end; }
  /* Der Menü-Knopf steht GANZ LINKS, vor dem Namen (Founder-Wunsch
     22.08.2026). `order: -1` zieht ihn im Flex-Kopf an die erste Stelle,
     ohne dass das HTML umgebaut werden muss — die Lesereihenfolge für
     Vorleseprogramme und die Tabulatortaste bleibt dabei unverändert.
     Er öffnet das Menü, dessen Einträge an derselben Kante beginnen. */
  html.js .menue-knopf { order: -1; margin-right: 12px; }
  /* Der Kontakt-Knopf hält den rechten Rand. Ohne diese Zeile rutscht er
     mit, sobald die Leiste ausgeblendet ist (deren margin-left: auto fällt
     dann weg) — bei 820 px stand alles mitten im Kopf (nachgemessen). */
  html.js .kopf-cta { margin-left: auto; }
}

@media (max-width: 460px) {
  /* Auf sehr schmalen Geräten passen Menü-Knopf, Marke UND Kontakt-Knopf
     nicht nebeneinander: Der letzte ragte bei 360 px um 31 px über den
     rechten Rand hinaus (nachgemessen 21.08.2026). Der Kontakt-Knopf
     entfällt hier — er steht im Menü an erster Stelle. */
  html.js .kopf-cta { display: none; }
}

@media (max-width: 680px) {
  /* Auf schmalen Geräten darf der Fließtext trennen — dort verhindert es
     gesprengte Zeilen bei langen Komposita. */
  p, li { -webkit-hyphens: auto; hyphens: auto; }

  .container { width: min(1160px, 100% - 36px); }
  .kopf-innen { width: min(1240px, 100% - 36px); }
  /* Auf Handys deckt der fixe Schalter sonst zu viel Inhalt ab. */
  .regie { left: 12px; bottom: 12px; opacity: 0.85; }
  .regie-bewegung { padding: 6px 12px; font-size: var(--t-mikro); }
  .kontakt-reihe { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .kopf-cta { padding: 8px 14px; font-size: var(--t-xs); }
}

/* ── Zweite Absicherung gegen erzwungene Dunkelmodi ──
   Samsung Internet 30 malt Links gelb, obwohl der Browser als berechnete
   Farbe die richtige helle meldet (am Gerät nachgemessen 20.08.2026):
   Die Umrechnung passiert erst beim Zeichnen, hinter dem CSS. Die Angabe
   color-scheme allein genügt dort nicht.

   Beide Blöcke setzen dieselben Werte noch einmal ausdrücklich je
   Systemvorgabe. Chromium-Abkömmlinge werten das als „die Seite behandelt
   Farbschemata selbst" und lassen ihren Umrechner eher weg.

   Hilft es auf dem Gerät nicht, bleibt nur die Browser-Einstellung
   („Dunkles Design für Webseiten" auf „Systemeinstellung" statt „Ein"). */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
  a { color: inherit; }
}
@media (prefers-color-scheme: light) {
  /* Die Seiten sind bewusst IMMER dunkel — auch bei heller Systemvorgabe. */
  :root { color-scheme: dark; }
  a { color: inherit; }
}

/* ═══════════════════ Film vergrößern (22.08.2026) ═══════════════════
   Auf schmalen Fenstern MIT MAUS gab es keinen Weg ins Vollbild:
   Bedienelemente setzt das Skript nur auf Tastflächen und im Ruhe-Modus,
   sonst läuft der Film stumm und ohne Leiste. Nachgemessen bei 420 px
   Fensterbreite: Film 355 px breit, `controls: false` — die Oberfläche
   darin ist nicht mehr lesbar, und man kommt nicht heran.

   Der Knopf steht bewusst NICHT ohne JavaScript: Ohne Skript würde er
   nichts tun. Deshalb hängt er wie der Menü-Knopf an html.js. */
.film-lupe { display: none; }

@media (max-width: 960px) {
  html.js .film-lupe {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Trefferfläche mindestens 44 px — dieselbe Vorgabe wie beim Rücklink
       der Textseiten. Mit 7 px Polsterung war der Knopf 29 px hoch und mit
       dem Finger kaum zu treffen (nachgemessen 22.08.2026). */
    min-height: 44px;
    padding: 0 15px;
    border: 1px solid var(--kante-stark);
    border-radius: 999px;
    background: rgba(10, 14, 26, 0.82);
    color: var(--text);
    font-family: inherit;
    font-size: var(--t-mikro);
    font-weight: var(--w-halb);
    letter-spacing: var(--sp-versal);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease;
  }
  html.js .film-lupe:hover,
  html.js .film-lupe:focus-visible {
    background: rgba(10, 14, 26, 0.95);
    border-color: var(--akzent-kante);
  }
}

/* Kennzeichnet ein Formularfeld als freiwillig. Die Alternative wäre, alle
   Pflichtfelder mit einem Sternchen zu markieren — dann trägt der Nutzer
   die Übersetzungsarbeit. Hier steht es im Klartext, und nur einmal. */
.kontakt-freiwillig {
  margin-left: 6px;
  font-size: var(--t-mikro);
  font-weight: var(--w-text);
  letter-spacing: var(--sp-versal);
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.75;
}