/* acessio · premium-v7 · warm editorial system */

/* Die @font-face-Regeln und die metrisch angeglichenen Ersatzfamilien stehen
   vollständig in assets/css/schriften.css. Diese Datei benennt nur noch, was
   wo verwendet wird. */

:root {
  --canvas: #F3F1F0;
  --canvas-2: #EEE9E4;
  --canvas-3: #E7E0D8;
  --ink: #19191C;
  --ink-2: #2B2B2F;
  --muted: #6E6A66;
  --line: rgba(25, 25, 28, 0.10);
  --line-2: rgba(25, 25, 28, 0.18);
  /* Der Akzent traegt an 136 Stellen Schrift, Raender und kleine Flaechen.
     Deshalb NICHT das reine --cta #22C7D6: das liegt auf der Flaeche bei
     1,83:1 und waere schlechter als das Gold, das es ersetzt (2,76:1).
     Beide Werte sind die tiefen Cyan-Fassungen und heben den Kontrast
     ueberall an — als Schrift, als Rand und mit Weiss darauf. */
  --accent: #097078;        /* 5,18:1 auf --canvas, Weiss darauf 5,83:1 */
  --accent-ink: #075B62;    /* 6,95:1 — die kraeftigere Fassung */

  /* Überschriften Newsreader, Fließtext Inter. Die zweite Familie im Stack ist
     jeweils die auf die Echtschrift gestauchte Ersatzfamilie aus
     schriften.css — sie hält den Umbruch, bis die Echtschrift geladen ist.
     Erst danach kommen die Systemschriften als letzte Rückfallebene. */
  --serif: "Newsreader", "Newsreader Ersatz", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Inter Ersatz", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Zeilenhöhen als Token, damit sie nicht an 40 Stellen einzeln driften.
     Große Überschriften laufen eng, Fließtext bekommt Luft. */
  --lh-display: 1.0;
  --lh-h3: 1.12;
  --lh-body: 1.55;
  /* Lesebreite. 62 Zeichen liegt in der Mitte des Korridors 55–68. */
  --mass: 62ch;

  /* Untergrenze von 52 auf 40 px: Newsreader läuft aufrecht rund 11 % breiter
     als die vorherige kursive Serifenschrift. „Informationen" brauchte bei
     52 px 314 px und sprengte damit die 280 px, die bei 320 px Bildbreite
     zwischen den Rändern bleiben. */
  --fs-display: clamp(40px, 8.8vw, 108px);
  --fs-h1: clamp(44px, 6.4vw, 84px);
  --fs-h2: clamp(34px, 4.8vw, 64px);
  --fs-h3: clamp(24px, 3vw, 40px);
  --fs-lead: clamp(18px, 1.4vw, 22px);
  --fs-body: clamp(16px, 1.05vw, 18px);

  --gutter: clamp(20px, 5vw, 72px);
  --section-y: clamp(96px, 14vw, 220px);
  --section-y-tight: clamp(64px, 9vw, 140px);
  --max: 1440px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 700ms;
  --dur-fast: 300ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-fast: 0ms; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip statt hidden. `overflow-x: hidden` lässt die Gegenachse auf `auto`
     rechnen und macht den Body damit zum Scrollcontainer — jedes
     `position: sticky` darin klebt dann an diesem Container statt am
     Bildschirm und scrollt einfach mit weg. Genau daran ist das Band im
     Scroll-Reveal gescheitert. `clip` schneidet ebenso ab, erzeugt aber
     keinen Scrollcontainer. */
  overflow-x: clip;
  /* Newsreader trägt eine opsz-Achse. Ohne diese Zeile bleibt sie auf dem
     Standardwert stehen und große Grade wirken zu fett, kleine zu dünn. */
  font-optical-sizing: auto;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--canvas); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.display, h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-style: normal;
}
.display { font-size: var(--fs-display); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); letter-spacing: -0.015em; line-height: var(--lh-h3); }
/* Kursiv ist ein Akzent für einzelne Wörter, keine Auszeichnung ganzer Zeilen. */
h1 em, h2 em, h3 em, .display em { font-style: italic; }
/* Rückfallebene für sehr schmale Geräte: deutsche Komposita sind länger als
   die Zeile, und ein Wort, das nicht getrennt werden darf, schiebt die ganze
   Seite zur Seite. Silbentrennung greift über lang="de" am Dokument. */
@media (max-width: 420px) {
  .display, h1, h2, h3 { hyphens: auto; }
}
p { text-wrap: pretty; max-width: var(--mass); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 58ch; }

/* ═══ Nichtlateinische Fassungen ══════════════════════════════════════════
   Die Familien liegen in schriften-zh.css und schriften-ar.css. Die Datei
   wird nur von der jeweiligen Sprachfassung geladen; die Regeln hier greifen
   über das lang-Attribut und stören die deutsche Fassung nicht.

   Drei Dinge lassen sich aus dem Lateinischen nicht übernehmen:
   negatives letter-spacing zerlegt arabische Verbindungen und drückt CJK-
   Glyphen ineinander; synthetische Kursive gibt es in beiden Schriften nicht;
   und beide brauchen mehr Zeilenhöhe, weil die Zeichen höher bauen.
   ═════════════════════════════════════════════════════════════════════════ */
:root:lang(zh), :root:lang(zh-Hans) {
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --lh-display: 1.28;
  --lh-h3: 1.4;
  --lh-body: 1.75;
  --mass: 34em;
}
:root:lang(ar) {
  --serif: "Noto Naskh Arabic", "Amiri", serif;
  --sans: "Noto Sans Arabic", "Tahoma", sans-serif;
  --lh-display: 1.42;
  --lh-h3: 1.5;
  --lh-body: 1.9;
  --mass: 40em;
}
:lang(zh) .display, :lang(zh) h1, :lang(zh) h2, :lang(zh) h3,
:lang(ar) .display, :lang(ar) h1, :lang(ar) h2, :lang(ar) h3 {
  letter-spacing: 0;
  font-style: normal;
}
:lang(zh) em, :lang(zh) i, :lang(ar) em, :lang(ar) i { font-style: normal; font-weight: 500; }
/* Versalien und Sperrung gibt es in beiden Schriften nicht. */
:lang(zh) .eyebrow, :lang(ar) .eyebrow { text-transform: none; letter-spacing: 0.02em; }
/* Arabisch liest von rechts; die Grundrichtung setzt das Dokument über dir="rtl". */
:lang(ar) { text-align: start; }
.muted { color: var(--muted); }

/* Höhe der Kopfzeile. Sie wird gebraucht, wo etwas unter ihr mittig stehen
   soll — der Kopf liegt über dem Inhalt, nicht davor, und ohne diesen Wert
   rechnet die Mitte mit der vollen Fensterhöhe. Gemessen: 85 px am Phone,
   87 px ab 430 px Breite, 90 px am Schreibtisch. */
:root { --kopf-hoehe: 90px; }
@media (max-width: 860px) { :root { --kopf-hoehe: 86px; } }

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 20px var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: 40px;
  background: rgba(243, 241, 240, 0);
  transition: background var(--dur-fast) var(--ease), backdrop-filter var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(243, 241, 240, 0.82);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom-color: var(--line);
}
/* Am Phone/Tablet kein backdrop-filter: die Kopfzeile ist fixiert, also muss
   der Browser den Weichzeichner bei jedem Scrollbild ueber den durchlaufenden
   Inhalt neu rechnen — auf Samsung Internet der teuerste Posten beim Scrollen.
   Deckende Flaeche sieht praktisch gleich aus und kostet nichts. */
@media (max-width: 900px) {
  .header {
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .header.is-scrolled {
    background: #F3F1F0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand svg { height: 22px; width: auto; }
/* Das Logo ist Flex-Item im .header (space-between) und die SVG wiederum
   Flex-Item in .brand. Ohne flex-shrink:0 kann es bei engem Header gestaucht
   werden — sichtbar als angeschnittenes Wortmarken-Ende. */
.header .brand,
.header .brand svg { flex-shrink: 0; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav ul { list-style: none; display: flex; gap: 32px; }
.nav ul a {
  font-size: 14px; color: var(--ink);
  opacity: 0.72; transition: opacity var(--dur-fast) var(--ease);
}
.nav ul a:hover { opacity: 1; }
.nav-cta, a.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--canvas) !important;
  opacity: 1;
  font-size: 14px; font-weight: 500;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.nav-cta:hover { background: #000; transform: translateY(-1px); }
.nav-cta::after { content: "→"; transition: transform var(--dur-fast) var(--ease); }
.nav-cta:hover::after { transform: translateX(3px); }
@media (max-width: 860px) {
  .nav ul { display: none; }
  .nav { gap: 12px; }
  .nav-cta { padding: 9px 14px; font-size: 13px; }
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font-size: 15px; font-weight: 500;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--ink); color: var(--canvas); }
.btn--primary:hover { background: #000; transform: translateY(-1px); }
.btn--primary::after { content: "→"; transition: transform var(--dur-fast) var(--ease); }
.btn--primary:hover::after { transform: translateX(4px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn--ghost:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

.hero { padding-top: 148px; padding-bottom: var(--section-y); }
.hero__eyebrow { margin-bottom: 40px; display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.hero__eyebrow::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.hero__title { font-family: var(--serif); font-size: var(--fs-display); font-style: normal; font-weight: 400; line-height: 0.98; letter-spacing: -0.02em; text-wrap: balance; }
.hero__title .hero__zeile { display: block; }
.hero__title .word { display: inline-block; overflow: hidden; padding-right: 0.16em; margin-right: -0.02em; padding-bottom: 0.08em; }
/* Traegt ein Wort eine `.mk`-Auszeichnung, beschneidet das overflow:hidden der
   Animationsmaske deren Farbflaeche: seitlich fehlt die volle Polsterung von
   0,24 em, oben und unten ragt sie ueber die knappe Zeilenbox hinaus.
   Die Maske wird darum um diese Betraege erweitert und ueber negative Raender
   wieder zurueckgenommen — Wortabstand und Glyphenlage bleiben unveraendert,
   nur der Malbereich waechst. Logische Seiten, damit dieselbe Regel auch in
   der arabischen Leserichtung stimmt.

   Die senkrechte Reserve richtet sich nicht nach der lateinischen Metrik: die
   Farbflaeche ist die Content-Area der Schrift, und die faellt je Schriftart
   voellig verschieden aus. Gemessen bei 390 und 1440 px, in em der Titelgroesse:
   lat. 1,28–1,31 em, ZH 1,53–1,55 em, AR 1,78 em bei 1,1 em Zeilenbox. Der
   groesste Ueberstand ueber die bisherige Maske lag damit bei AR mit 0,216 em
   oben und 0,260 em unten. 0,4 em deckt beides mit Reserve ab. */
.hero__title .word:has(.mk) {
  --mk-maske: 0.4em;
  padding-inline-start: 0.28em; margin-inline-start: -0.28em;
  padding-inline-end: 0.28em; margin-inline-end: -0.14em;
  padding-top: var(--mk-maske); margin-top: calc(var(--mk-maske) * -1);
  /* Die Basisregel oben laesst 0,08 em Polsterung unten stehen; der negative
     Rand nimmt nur den Zuwachs zurueck, damit die Zeilenbox gleich bleibt. */
  padding-bottom: var(--mk-maske); margin-bottom: calc(0.08em - var(--mk-maske));
}
.hero__title .word > i {
  display: inline-block; transform: translateY(110%);
  animation: rise 1.1s var(--ease) forwards;
  font-style: normal;
}
/* Die tiefere Maske braucht einen tieferen Startpunkt. 110 % beziehen sich auf
   die Zeilenbox des Wortes und reichten schon vor der Vertiefung nicht: waehrend
   der Staffelverzoegerung stand die Oberkante der Farbflaeche messbar im Bild
   (2,3 px lat., 6,3 px ZH, 15,5 px AR). Der Startwert liegt darum in em der
   Titelgroesse und deckt Maskenhoehe plus hoechsten Flaechenueberstand ab:
   1,1 em Zeilenbox + 0,4 em Maske unten + 0,356 em AR-Ueberstand oben = 1,86 em.
   Dauer, Easing und Staffelung bleiben unveraendert. */
.hero__title .word:has(.mk) > i { transform: translateY(1.95em); }
/* Verzoegerung aus einer Variablen am Wort, nicht aus seiner Position.
   Mit nth-child war die Reihenfolge an die flache Geschwisterliste gebunden —
   sobald die Zeilen gruppiert werden, zaehlt nth-child von vorn und die
   Staffelung bricht. Ueber --i bleibt sie unabhaengig von der Struktur. */
.hero__title .word > i { animation-delay: calc(0.15s + var(--i, 0) * 0.14s); }
@keyframes rise { to { transform: translateY(0); } }
.hero__tagline { margin-top: 20px; font-family: var(--serif); font-style: normal; font-size: clamp(20px, 2vw, 28px); color: var(--accent); letter-spacing: -0.01em; }

.hero__body { margin-top: 40px; font-size: clamp(19px, 1.4vw, 23px); line-height: 1.5; max-width: 52ch; color: var(--ink-2); }
.hero__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero__micro { margin-top: 24px; color: var(--muted); font-size: 14px; max-width: 44ch; }

.hero__stage {
  margin-top: 88px;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #EAE4DD 0%, #E1D8CE 100%);
  border: 1px solid var(--line);
}
.hero__stage-note {
  position: absolute; bottom: 22px; left: 22px;
  color: var(--muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}

/* Ohne JavaScript bleibt sonst alles unterhalb des Heros unsichtbar (opacity:0).
   Das Flag setzt das Inline-Snippet im <head>; fällt main.js aus, greift es nicht. */
html.no-js .reveal { opacity: 1 !important; transform: none !important; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

.thesis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: var(--section-y); }
.thesis__title { font-family: var(--serif); font-style: normal; font-size: var(--fs-h1); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; max-width: 20ch; }
.thesis__quote { align-self: end; justify-self: end; max-width: 42ch; color: var(--ink-2); font-size: var(--fs-lead); }
@media (min-width: 900px) {
  .thesis { grid-template-columns: 1.35fr 1fr; }
}

.chapters { display: grid; gap: clamp(80px, 12vw, 180px); }
.chapter { display: grid; gap: 32px; align-items: start; }
.chapter__idx { font-family: var(--serif); font-style: normal; color: var(--muted); font-size: 20px; letter-spacing: 0.02em; }
.chapter__title { font-family: var(--serif); font-style: normal; font-size: var(--fs-h2); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; max-width: 16ch; }
.chapter__body { color: var(--ink-2); font-size: var(--fs-lead); max-width: 46ch; }
.chapter__media {
  aspect-ratio: 16 / 10;
  border-radius: 22px; overflow: hidden;
  background: var(--canvas-2);
  position: relative;
  border: 1px solid var(--line);
}
@media (min-width: 900px) {
  .chapter { grid-template-columns: 1fr 1.2fr; gap: 88px; }
  .chapter--right { direction: rtl; }
  .chapter--right > * { direction: ltr; }
}

.asym { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.asym__left { aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: var(--canvas-2); position: relative; border: 1px solid var(--line); }
.asym__right { display: grid; grid-template-rows: auto auto; gap: 24px; }
.asym__video { aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: var(--canvas-3); position: relative; border: 1px solid var(--line); }
.asym__note { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 34ch; margin-left: auto; }
@media (min-width: 900px) {
  .asym { grid-template-columns: 7fr 5fr; }
}

.proof-strip {
  padding: clamp(48px, 8vw, 96px) var(--gutter);
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.35) 100%);
}
.proof-strip__wrap { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.proof-strip__title { font-family: var(--serif); font-style: normal; font-size: var(--fs-h3); font-weight: 400; max-width: 24ch; }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.metric { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.metric__value {
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(64px, 8vw, 108px);
  line-height: 0.9; letter-spacing: -0.02em;
}
.metric__label { color: var(--muted); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.metric__desc { color: var(--ink-2); font-size: 15px; max-width: 30ch; }
.metric--placeholder .metric__value { color: var(--muted); opacity: 0.55; }
@media (min-width: 900px) {
  .proof-strip__wrap { grid-template-columns: 1fr 2fr; gap: 88px; }
  .proof-grid { grid-template-columns: repeat(3, 1fr); }
}

.mods__nav {
  display: flex; gap: 4px; flex-wrap: nowrap;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  margin-bottom: 56px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.mods__nav button {
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.mods__nav button:hover { color: var(--ink); }
.mods__nav button[aria-selected="true"] { background: var(--ink); color: var(--canvas); }

.mods__panel { display: none; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.mods__panel.is-active { display: grid; animation: fadeIn 500ms var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mod {
  padding: 32px 4px 32px 4px;
  border-top: 1px solid var(--line);
  display: grid; gap: 12px;
}
.mod__num { font-family: var(--serif); font-style: normal; color: var(--muted); font-size: 15px; }
.mod__title { font-size: 22px; font-family: var(--sans); font-weight: 500; letter-spacing: -0.005em; line-height: 1.25; }
.mod__body { color: var(--ink-2); font-size: 15px; max-width: 44ch; }
@media (min-width: 900px) {
  .mods__panel { grid-template-columns: repeat(4, 1fr); gap: 24px 32px; }
}

.bespoke { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.bespoke__copy { max-width: 44ch; }
.bespoke__diagram {
  padding: 40px 24px;
  background: var(--canvas-2);
  border-radius: 26px;
  border: 1px solid var(--line);
}
@media (min-width: 900px) {
  .bespoke { grid-template-columns: 1fr 1.2fr; gap: 96px; align-items: center; }
}

.opti { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
.opti__diagram {
  aspect-ratio: 1 / 1;
  max-width: 460px; margin: 0 auto;
  border-radius: 50%;
  border: 1px solid var(--line);
  position: relative;
  background: radial-gradient(circle at center, var(--canvas-2) 0%, transparent 70%);
}
@media (min-width: 900px) {
  .opti { grid-template-columns: 1.1fr 1fr; gap: 96px; }
}

.projects__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 64px; }
.project-card {
  display: block; position: relative; overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 4 / 5;
  background: var(--canvas-2);
  border: 1px solid var(--line);
}
.project-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.project-card:hover .project-card__img { transform: scale(1.03); }
.project-card__label {
  position: absolute; left: 24px; bottom: 24px; right: 24px;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--canvas);
  text-shadow: 0 2px 24px rgba(0,0,0,0.3);
  font-family: var(--serif); font-style: normal; font-size: 26px;
}
.project-card__go {
  font-family: var(--sans); font-style: normal; font-size: 13px;
  padding: 8px 14px; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px;
  backdrop-filter: blur(8px); background: rgba(0,0,0,0.15);
  letter-spacing: 0.02em;
}
.project-card__placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--canvas-2), var(--canvas-3));
  color: var(--muted);
  font-family: var(--serif); font-style: normal; font-size: 32px;
  text-align: center;
  padding: 24px;
}

/* Scrolling page cast — real client page runs through the card */
.cast { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.cast img {
  width: 100%; height: auto; display: block;
  animation: castScroll 30s linear infinite alternate;
  animation-delay: var(--cast-delay, 0s);
}
.cast:hover img { animation-play-state: paused; }
@keyframes castScroll {
  from { transform: translateY(0); }
  to { transform: translateY(var(--cast-end, -82%)); }
}
.project-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.52) 100%);
  pointer-events: none;
}
.project-card__label { z-index: 2; }
@media (min-width: 700px) {
  .projects__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.specs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 64px; }
.spec { border-top: 1px solid var(--line); padding-top: 24px; display: grid; gap: 8px; }
.spec__label { color: var(--muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.spec__value { font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 42ch; }
@media (min-width: 700px) {
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 88px; }
}

.final { padding-block: var(--section-y); text-align: center; }
.final__title { font-family: var(--serif); font-style: normal; font-size: var(--fs-display); font-weight: 400; line-height: 0.98; max-width: 20ch; margin: 0 auto; }
.final__body { margin: 32px auto 0; max-width: 52ch; color: var(--ink-2); font-size: var(--fs-lead); }
.final__cta { margin-top: 48px; display: inline-flex; }
.final__micro { margin-top: 20px; color: var(--muted); font-size: 14px; }

/* --- Brand-Footer (Nespresso-inspired) --- */
.footer {
  background: #0E0E11;
  color: #F3F1F0;
  padding-block: clamp(96px, 12vw, 160px) 40px;
  margin-top: clamp(64px, 8vw, 120px);
}
.footer__eyebrow {
  margin: 0 auto 18px;
  color: rgba(243, 241, 240, 0.45);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}
.footer__tagline {
  font-family: var(--serif);
  font-style: normal;
  /* Das größte Wortzeichen jeder Seite stand als einziges mager. Die
     Spezifität dieser Regel (0,1,0) schlägt h2 aus figtree.css (0,0,1),
     die 700 von dort kamen nie an. */
  font-weight: 700;
  font-size: clamp(72px, 12vw, 168px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-align: center;
  color: #F3F1F0;
  margin: 0 auto clamp(80px, 10vw, 128px);
  max-width: 20ch;
}
.footer__tagline .accent { color: var(--accent); }
.footer__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
  max-width: 980px;
  margin: 0 auto clamp(88px, 10vw, 140px);
}
.f-action {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 16px;
  padding: 8px 4px;
  color: #F3F1F0;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease);
}
.f-action:hover { transform: translateY(-3px); }
.f-action__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: #F3F1F0;
}
.f-action__icon svg { width: 100%; height: 100%; stroke: #F3F1F0; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.f-action__label { font-size: 14px; font-weight: 500; color: rgba(243,241,240,0.9); letter-spacing: 0.01em; }
.f-action__value { font-size: 13px; color: rgba(243,241,240,0.55); }
@media (min-width: 720px) {
  .footer__actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Fußzeile · zwei Reihen ───────────────────────────────────────────────
   Erste Reihe: Bildmarke links, Jahreszahl exakt in der Mitte, Nachweise
   rechts. Die drei Spalten liegen auf `align-items: baseline`, damit alles
   auf einer Grundlinie sitzt — bei der Bildmarke ist das ihre Unterkante,
   weil ein SVG als ersetztes Element auf der Grundlinie steht.

   Zweite Reihe: die Seitenlinks, ebenfalls auf einer Grundlinie und mit
   gleichem Abstand.

   Am Telefon wird nicht versucht, die Grundlinie zu erzwingen. Dort steht
   alles untereinander, und jeder Link hat 44 px Höhe zum Antippen.
   ──────────────────────────────────────────────────────────────────────── */
.footer__meta {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px var(--gutter) 0;
  border-top: 1px solid rgba(243,241,240,0.14);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: 16px 24px;
  color: rgba(243,241,240,0.5);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.footer__meta a { color: rgba(243,241,240,0.7); }
.footer__meta a:hover, .footer__meta a:focus-visible { color: #F3F1F0; }
/* Die Bildmarke muss mit ihrer Unterkante auf der Textgrundlinie sitzen.
   Als inline-flex mit `align-items: center` läge sie 4 px darunter, weil der
   Flexcontainer seine Grundlinie aus der zentrierten Zeile bildet. Als Block
   ohne Zeilenhöhe wird die Grundlinie aus der Unterkante abgeleitet — und das
   ist genau die Unterkante des SVG. */
.footer__meta .brand { justify-self: start; display: block; line-height: 0; }
.footer__meta .brand svg { height: 20px; }
.footer__meta .brand svg path { fill: #F3F1F0; }
.footer__jahr { justify-self: center; white-space: nowrap; }
.footer__recht {
  justify-self: end;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 18px;
}
/* Ab 1100 px passen die Nachweise in eine Zeile. Ohne nowrap rutscht
   „Datenschutz" allein in eine zweite Zeile und die Reihe verliert die
   gemeinsame Grundlinie, um die es hier gerade geht. */
@media (min-width: 1100px) {
  .footer__recht { flex-wrap: nowrap; }
  .footer__recht a { white-space: nowrap; }
}
/* Darunter ist die Spalte zu schmal. Statt die Zeile umbrechen zu lassen und
   damit vier Grundlinien auf zwei Höhen zu verteilen, bekommen die Nachweise
   eine eigene Zeile — dort liegen sie wieder gemeinsam auf einer. */
@media (min-width: 720px) and (max-width: 1099px) {
  .footer__meta { grid-template-columns: auto minmax(0, 1fr); }
  .footer__jahr { justify-self: end; }
  .footer__recht {
    grid-column: 1 / -1;
    justify-self: start;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
  .footer__recht a { white-space: nowrap; }
}

.footer__reihe2 {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--gutter) 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.footer__reihe2 a { color: rgba(243,241,240,0.7); }
.footer__reihe2 a:hover, .footer__reihe2 a:focus-visible { color: #F3F1F0; }

@media (max-width: 719px) {
  .footer__meta {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 18px;
  }
  .footer__jahr, .footer__recht { justify-self: start; justify-content: flex-start; }
  .footer__recht { gap: 4px 16px; }
  .footer__recht a, .footer__reihe2 a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__reihe2 { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* ── Einmaliger Gruß der Bildmarke ────────────────────────────────────────
   Die Marke atmet einmal, wenn der Fußbereich zum ersten Mal ins Bild kommt.
   Die Hülle trägt die Skalierung, damit der translate am inneren <g> erhalten
   bleibt; die Deckkraft läuft ohne fill-mode, also gilt danach wieder der
   Attributwert 0.6 aus dem Markup.
   ──────────────────────────────────────────────────────────────────────── */
.brand__mark { transform-box: fill-box; transform-origin: center; }
[data-fuss-marke].is-gruss .brand__mark { animation: fuss-atem 1400ms var(--ease); }
[data-fuss-marke].is-gruss .brand__mark > g { animation: fuss-gold 1400ms var(--ease); }
@keyframes fuss-atem {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}
@keyframes fuss-gold {
  0%   { opacity: 0.6; }
  40%  { opacity: 0.95; }
  100% { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  [data-fuss-marke].is-gruss .brand__mark,
  [data-fuss-marke].is-gruss .brand__mark > g { animation: none; }
}

.film {
  position: relative; width: 100%; height: 100%;
  overflow: hidden;
  background: #F6F3EF;
}
.film__slide {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center;
  opacity: 0;
  padding: 40px;
  animation: filmCycle 15s infinite;
}
.film__slide h4 {
  font-family: var(--sans);
  font-weight: 700; font-style: normal;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  text-align: center;
  max-width: 14ch;
  text-wrap: balance;
  margin-bottom: 24px;
}
.film__slide--1 { animation-delay: 0s; }
.film__slide--2 { animation-delay: 5s; }
.film__slide--3 { animation-delay: 10s; }
@keyframes filmCycle {
  0%, 2% { opacity: 0; transform: translateY(20px); }
  6%, 30% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-20px); }
}
.film__brand {
  position: absolute; bottom: 16px; right: 20px;
  font-size: 11px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase;
}

/* Film ui mocks */
.mock-card { background: white; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0,0,0,0.06); padding: 16px 18px; }
.mock-search { display: flex; gap: 10px; align-items: center; min-width: 260px; }
.mock-search .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.mock-search span { color: var(--muted); font-size: 14px; }
.mock-list { display: grid; gap: 6px; min-width: 240px; }
.mock-list div { background: white; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.mock-path { display: grid; gap: 10px; min-width: 240px; }
.mock-path div { padding: 10px 14px; border-radius: 8px; background: white; border: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.mock-path div.on { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.mock-q { min-width: 280px; }
.mock-q strong { display: block; font-family: var(--serif); font-style: normal; font-size: 18px; margin-bottom: 12px; font-weight: 400; }
.mock-q label { display: block; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; font-size: 14px; color: var(--ink-2); }
.mock-q label.on { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.mock-confirm { text-align: center; min-width: 240px; }
.mock-confirm .check { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--canvas); display: grid; place-items: center; margin: 0 auto 14px; font-size: 20px; }
.mock-confirm strong { display: block; font-family: var(--serif); font-style: normal; font-size: 20px; margin-bottom: 4px; font-weight: 400; }
.mock-confirm span { color: var(--muted); font-size: 13px; }

/* Diagrams */
.diagram-svg { width: 100%; height: auto; }

/* Real film embeds */
.filmvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__stage .filmvid, .chapter__media .filmvid, .asym__video .filmvid { position: absolute; }

.stack-lg { display: grid; gap: 40px; }
.stack-md { display: grid; gap: 24px; }
.stack-sm { display: grid; gap: 12px; }
.max-narrow { max-width: 780px; }
.max-mid { max-width: 980px; }

.page-hero { padding-top: 168px; padding-bottom: 96px; }
.page-hero__eyebrow { color: var(--muted); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 24px; }
.page-hero__title { font-family: var(--serif); font-style: normal; font-size: var(--fs-h1); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; max-width: 20ch; }
.page-hero__lead { margin-top: 32px; font-size: var(--fs-lead); color: var(--ink-2); max-width: 56ch; }

.page-steps { display: grid; gap: 40px; padding-block: var(--section-y-tight); }
.page-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 24px; padding-top: 32px; border-top: 1px solid var(--line); }
.page-step__idx { font-family: var(--serif); font-style: normal; color: var(--muted); font-size: 20px; padding-top: 4px; }
.page-step h3 { font-size: 22px; font-family: var(--sans); font-weight: 500; margin-bottom: 8px; font-style: normal; letter-spacing: -0.005em; }
.page-step p { color: var(--ink-2); }

.form-stage {
  min-height: 100vh;
  padding: 96px var(--gutter) 64px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 48px;
}
.form-progress { display: flex; gap: 6px; }
.form-progress__step { flex: 1; height: 3px; background: var(--line); border-radius: 2px; }
.form-progress__step.is-done, .form-progress__step.is-current { background: var(--ink); }
.form-topbar { display: flex; align-items: center; justify-content: space-between; }
.form-topbar__num { color: var(--muted); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.form-question { max-width: 720px; margin: auto 0; display: grid; gap: 24px; }
.form-question h2 { font-size: clamp(28px, 4vw, 44px); font-style: normal; font-family: var(--serif); font-weight: 400; }
.form-question .hint { color: var(--muted); font-size: 15px; }
.form-input {
  width: 100%; padding: 16px 4px;
  background: transparent; border: none; border-bottom: 1px solid var(--line-2);
  font: inherit; color: var(--ink); font-size: 18px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.form-input:focus { border-bottom-color: var(--ink); }
textarea.form-input { resize: vertical; min-height: 120px; }
.form-options { display: grid; gap: 8px; }
.form-option {
  padding: 14px 20px; border: 1px solid var(--line-2); border-radius: 999px;
  cursor: pointer; transition: all var(--dur-fast) var(--ease);
  display: flex; align-items: center; gap: 12px;
  background: transparent;
  text-align: left;
  font-size: 15px;
  width: 100%;
}
.form-option:hover { border-color: var(--ink-2); }
.form-option.is-selected { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.form-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.form-nav button {
  padding: 12px 20px; border-radius: 999px; font-size: 14px;
  border: 1px solid var(--line-2); color: var(--ink);
  background: transparent;
}
.form-nav button:hover:not(:disabled) { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.form-nav button:disabled { opacity: 0.4; cursor: not-allowed; }
.form-nav .btn-next { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.form-summary { display: grid; gap: 20px; margin-top: 24px; }
.form-summary__item { display: grid; gap: 6px; padding-top: 20px; border-top: 1px solid var(--line); }
.form-summary__label { color: var(--muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.form-summary__value { font-size: 17px; color: var(--ink); white-space: pre-line; }
.form-done { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 96px var(--gutter); }
.form-done h2 { font-size: clamp(36px, 5vw, 60px); font-style: normal; font-family: var(--serif); font-weight: 400; }
.form-done p { margin: 24px auto 0; color: var(--ink-2); font-size: 18px; max-width: 44ch; }

/* ============================================================
   FINALIZE · Pass 1 — additions & overrides
   ============================================================ */

/* Hero scroll link (kein zweiter Button) */
.hero__scrolllink {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}
.hero__scrolllink span { transition: transform var(--dur-fast) var(--ease); }
.hero__scrolllink:hover { color: var(--ink); }
.hero__scrolllink:hover span { transform: translateY(3px); }
.hero__actions { align-items: center; }

/* Film-Sektionen — je EIN Film pro Viewport, zentral allein */
.filmsec {
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(56px, 9vw, 120px);
}
.filmsec__head { max-width: 52ch; }
.filmsec__title {
  font-family: var(--serif); font-style: normal;
  font-size: var(--fs-h2); font-weight: 400;
  line-height: 1.02; letter-spacing: -0.02em;
  max-width: 18ch; margin-top: 16px;
}
.filmsec__body { color: var(--ink-2); font-size: var(--fs-lead); max-width: 48ch; margin-top: 24px; }
.filmsec__video {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9; max-height: 82svh;
  margin-inline: auto;
  border-radius: 24px; overflow: hidden;
  background: var(--canvas-2); border: 1px solid var(--line);
}
.filmsec__video .filmvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .filmsec__video { aspect-ratio: 4 / 5; }   /* mobil: großes Hochformat */
}

/* Film ansehen — Sektion + Overlay */
.watch { padding-block: var(--section-y); text-align: center; }
.watch__stage {
  position: relative; display: block;
  width: 100%; max-width: 1100px;
  margin: 48px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 26px; overflow: hidden;
  background: var(--canvas-2); border: 1px solid var(--line);
}
.watch__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.watch__stage::after { content: ""; position: absolute; inset: 0; background: rgba(14,14,17,0.18); }
.watch__play {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(243,241,240,0.92);
  display: grid; place-items: center;
  transition: transform var(--dur-fast) var(--ease);
}
.watch__stage:hover .watch__play { transform: scale(1.06); }
.watch__play svg { width: 30px; height: 30px; margin-left: 4px; fill: var(--ink); }
.watch__label {
  position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2;
  color: #F3F1F0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.filmdialog {
  border: none; padding: 0; background: transparent;
  max-width: min(92vw, 1100px); width: 100%;
  position: fixed; inset: 0; margin: auto;
}
.filmdialog::backdrop { background: rgba(10,10,12,0.82); backdrop-filter: blur(4px); }
.filmdialog video { width: 100%; border-radius: 16px; display: block; }
.filmdialog__close {
  position: absolute; top: -16px; right: -16px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: #F3F1F0; color: var(--ink);
  font-size: 24px; line-height: 1;
  display: grid; place-items: center;
}
@media (max-width: 620px) {
  .filmdialog__close { top: 8px; right: 8px; }
}

/* ── Fußbereich: die Farben drehen sich um ────────────────────────────────
   Die Seite ist creme auf dunkel gesetzt; der Fußbereich macht es umgekehrt.
   Das gibt dem Seitenende ein eigenes Gewicht, ohne eine zweite Farbwelt zu
   erfinden: es sind dieselben zwei Farben, nur getauscht.

   Alles hier hängt an zwei Werten. --fuss-schrift ist das Cremeweiß der
   Fläche, --fuss-leise dessen gedämpfte Fassung für Zweitzeilen. So bleibt
   nirgends ein dunkler Text stehen, der auf Schwarz verschwindet. */
.footer {
  --fuss-schrift: #F3F1F0;
  --fuss-leise: rgba(243, 241, 240, 0.62);
  --fuss-linie: rgba(243, 241, 240, 0.16);
  /* Die Grundfarben werden im Fußbereich umdefiniert, nicht Regel für Regel
     überschrieben. Sonst hängt jede spätere Regel, die `var(--ink)` benutzt,
     mit dunklem Text auf schwarzer Fläche fest — gemessen bei den
     Gruppenüberschriften: Kontrast 1,1:1. */
  --ink: var(--fuss-schrift);
  --ink-2: rgba(243, 241, 240, 0.86);
  --muted: var(--fuss-leise);
  --line: var(--fuss-linie);
  --line-2: rgba(243, 241, 240, 0.24);
  --canvas-2: rgba(243, 241, 240, 0.06);
  background: #0E0E11;
  color: var(--fuss-schrift);
}
/* Grün wie der Knopf, nicht Gold — Gold trägt auf dieser Seite
   Sichtbarkeit, nicht Kontakt. */
.footer__eyebrow { color: #4FD6E2; }
.footer__tagline { color: var(--fuss-schrift); }
.footer__tagline .accent { color: var(--accent); }
.footer__glosse { color: var(--fuss-leise); }
.f-action { color: var(--fuss-schrift); }
.f-action__icon { color: var(--fuss-schrift); }
.f-action__icon svg { stroke: var(--fuss-schrift); }
.f-action__label { color: var(--fuss-schrift); }
.f-action__value { color: var(--fuss-leise); }

.footer__marke { border-top-color: var(--fuss-linie); }
.footer__marke .brand svg path { fill: var(--fuss-schrift); }
.footer__gruppe-titel { color: var(--fuss-schrift); }
.footer__gruppe a { color: var(--fuss-leise); }
.footer__gruppe a:hover, .footer__gruppe a:focus-visible { color: var(--fuss-schrift); }
.footer__gruppe { border-bottom-color: var(--fuss-linie); }
.footer__gruppe > summary::after { border-color: var(--fuss-leise); }
.footer__meta { border-top-color: var(--fuss-linie); color: var(--fuss-leise); }
.footer__meta a { color: var(--fuss-leise); }
.footer__meta a:hover, .footer__meta a:focus-visible { color: var(--fuss-schrift); }
.footer__meta .brand svg path { fill: var(--fuss-schrift); }
.footer__jahr { color: var(--fuss-leise); }
/* Der Fokusring muss auf Schwarz sichtbar bleiben. */
.footer a:focus-visible { outline-color: var(--fuss-schrift); }

/* Logo-Lockup (Kranz-a + cessio) + größere Navigation */
.brand { gap: 6px; color: var(--ink); }
.brand { --marke-h: 34px; }
.brand svg.brand__logo { height: var(--marke-h); width: auto; }
.footer__meta .brand { color: var(--fuss-schrift); }
.footer__meta .brand { --marke-h: 30px; }
.nav { gap: 36px; }
.nav ul { gap: 34px; }
.nav ul a { font-size: 15px; }
.nav-cta, a.nav-cta { font-size: 15px; padding: 11px 20px; }
/* ── Kopfzeile am Phone: drei Dinge, nicht vier ───────────────────────────
   Bis hierher standen Wortmarke, Sprachwahl, Balken-Knopf und ein grüner
   CTA nebeneinander. Auf 390 px blieb dem CTA so wenig Platz, dass er auf
   „Projekt prüfen" und unter 352 px auf „Projekt" eindampfen musste — ein
   Knopf, dessen Beschriftung nicht mehr sagt, wohin er führt.

   Der CTA fällt am Phone deshalb weg. Er geht nicht verloren: derselbe Weg
   steht unmittelbar darunter im Hero und noch einmal im aufgeklappten Menü.
   Übrig bleiben Wortmarke und Sprache links, Balken-Knopf rechts. */
@media (max-width: 860px) {
  .brand { --marke-h: 30px; }
  .header > .nav-cta { display: none; }
  /* Ohne den CTA schiebt space-between den Balken-Knopf an den rechten Rand.
     Die Regel steht trotzdem hier, damit die Reihenfolge nicht davon abhängt,
     ob zufällig noch ein drittes Kind im Kopf liegt. */
  .header > .nav-bars { margin-inline-start: auto; }
}

/* Stat-Kacheln (Oura-Prinzip): Icon · Wert · Erklärung · Quelle */
.stats3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.metric--stat {
  text-align: center;
  display: grid; justify-items: center; align-content: start;
  gap: 12px;
  border-top: none; padding-top: 0;
}
.metric--stat .metric__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--canvas-2);
  display: grid; place-items: center;
  margin-bottom: 8px;
}
.metric--stat .metric__icon svg {
  width: 26px; height: 26px;
  stroke: var(--ink); stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.metric--stat .metric__value {
  font-family: var(--serif); font-style: normal;
  font-size: clamp(56px, 7vw, 96px); line-height: 0.9; letter-spacing: -0.02em;
  color: var(--ink);
}
.metric__unit { font-size: 0.42em; font-style: normal; margin-left: 0.12em; color: var(--ink-2); }
.metric--stat .metric__label {
  text-transform: none; letter-spacing: 0;
  color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.3;
  max-width: 24ch;
}
.metric--stat .metric__desc { color: var(--ink-2); font-size: 14px; line-height: 1.5; max-width: 28ch; }
.metric--stat .metric__src {
  color: var(--muted); font-size: 12px; letter-spacing: 0.04em;
  margin-top: 4px;
}
@media (min-width: 800px) {
  .stats3 { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .stats3 .metric--stat { position: relative; padding: 8px clamp(24px, 4vw, 56px); }
  .stats3 .metric--stat:not(:first-child)::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 116px; background: var(--line);
  }
}

/* ============================================================
   Hero · codebasierte Smartphone-Sequenz
   Annahmen: beispielhafter Dr.-Herzberg-Flow, keine Live-Verfügbarkeit,
   keine Apple-Assets. Die Gerätegeometrie portiert den geprüften
   IosFrame-Starter; die Produktoberfläche ist vollständig Acessio-eigen.
   ============================================================ */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hero__stage.hero-system {
  --phone-scale: 0.72;
  background: var(--canvas-2);
  border-color: rgba(25, 25, 28, 0.12);
  isolation: isolate;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.hero__stage.hero-system::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    radial-gradient(circle at 17% 22%, rgba(34, 199, 214, 0.08), transparent 26%),
    linear-gradient(115deg, rgba(255,255,255,0.24), transparent 42%);
}

.hero-system__copy {
  position: absolute;
  inset: 0 52% 0 0;
  padding: clamp(32px, 5vw, 72px);
  z-index: 3;
}
.hero-system__sample {
  position: absolute;
  top: clamp(26px, 4vw, 54px);
  left: clamp(32px, 5vw, 72px);
  font-size: clamp(10px, 0.85vw, 12px);
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-system__chapter {
  position: absolute;
  top: 50%;
  left: clamp(32px, 5vw, 72px);
  right: clamp(28px, 3vw, 54px);
  opacity: 0;
  transform: translateY(calc(-50% + var(--chapter-y, 24px))) scale(var(--chapter-scale, 1));
  filter: blur(7px);
  will-change: transform, opacity, filter;
  pointer-events: none;
}
.hero-system__chapter[data-hero-scene="0"] {
  opacity: 1;
  --chapter-y: 0px;
  filter: none;
}
.hero-system__kicker {
  margin-bottom: clamp(12px, 1.4vw, 20px);
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 500;
}
.hero-system__title {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(46px, 6.2vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero-system__body {
  margin-top: clamp(18px, 2vw, 28px);
  max-width: 35ch;
  color: var(--ink-2);
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.5;
}
.hero-system__chapter--final .hero-system__title { font-size: clamp(44px, 5.4vw, 78px); }
.hero-system__scope {
  position: absolute;
  left: clamp(32px, 5vw, 72px);
  bottom: clamp(30px, 4vw, 56px);
  color: var(--muted);
  font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-system__control {
  position: absolute;
  right: clamp(26px, 3vw, 48px);
  bottom: clamp(24px, 3.4vw, 48px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 4px 8px 10px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: color var(--dur-fast) var(--ease);
  z-index: 5;
}
.hero-system__control:hover,
.hero-system__control:focus-visible { color: var(--ink); }
.hero-system__control:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; border-radius: 999px; }
.hero-system__control-mark {
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  position: relative;
}
.hero-system__control-mark::before,
.hero-system__control-mark::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 2px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
}
.hero-system__control-mark::before { left: 5px; }
.hero-system__control-mark::after { right: 5px; }
.hero-system__control[data-state="paused"] .hero-system__control-mark::before,
.hero-system__control[data-state="ended"] .hero-system__control-mark::before {
  left: 6px;
  top: 4px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
  border-radius: 0;
  background: transparent;
}
.hero-system__control[data-state="paused"] .hero-system__control-mark::after,
.hero-system__control[data-state="ended"] .hero-system__control-mark::after { display: none; }

.hero-system__device {
  position: absolute;
  inset: 0 0 0 44%;
  overflow: hidden;
  z-index: 2;
}
.hero-phone__scale {
  position: absolute;
  top: 50%;
  left: 57%;
  width: 417px;
  height: 876px;
  transform: translate(-50%, -50%) translateY(var(--phone-lift, 0px)) scale(var(--phone-scale)) rotate(var(--phone-turn, 1.2deg));
  transform-origin: center;
  will-change: transform;
}

/* Exact geometry of the verified 393 × 852 IosFrame starter. */
.hero-phone {
  display: inline-block;
  padding: 12px;
  background: #0B0B0D;
  border-radius: 60px;
  box-shadow: 0 0 0 2px #29282C, 0 36px 90px rgba(25, 25, 28, 0.22), 0 8px 28px rgba(25,25,28,0.12);
  position: relative;
}
.hero-phone__screen {
  position: relative;
  width: 393px;
  height: 852px;
  border-radius: 48px;
  overflow: hidden;
  background: #F8F6F3;
  color: #17171A;
}
.hero-phone__status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  z-index: 20;
}
.hero-phone__status-icons { display: flex; align-items: center; gap: 6px; }
.hero-phone__signal { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.hero-phone__signal i { display: block; width: 3px; background: currentColor; border-radius: 1px; }
.hero-phone__signal i:nth-child(1) { height: 4px; }
.hero-phone__signal i:nth-child(2) { height: 6px; }
.hero-phone__signal i:nth-child(3) { height: 9px; }
.hero-phone__signal i:nth-child(4) { height: 11px; }
.hero-phone__wifi { width: 16px; height: 12px; }
.hero-phone__battery {
  width: 26px;
  height: 12px;
  padding: 1px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  position: relative;
  opacity: 0.82;
}
.hero-phone__battery::after {
  content: "";
  position: absolute;
  top: 3px;
  right: -3px;
  width: 2px;
  height: 6px;
  border-radius: 0 1px 1px 0;
  background: currentColor;
}
.hero-phone__battery i { display: block; width: 82%; height: 100%; border-radius: 1px; background: currentColor; }
.hero-phone__island {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 124px;
  height: 36px;
  transform: translateX(-50%);
  background: #000;
  border-radius: 999px;
  z-index: 30;
}
.hero-phone__content {
  position: absolute;
  top: 54px;
  left: 0;
  right: 0;
  bottom: 34px;
  overflow: hidden;
  background: #F8F6F3;
}
.hero-phone__home {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 140px;
  height: 5px;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.30);
  border-radius: 999px;
  z-index: 10;
}

.phone-view {
  position: absolute;
  inset: 0;
  padding: 30px 24px 26px;
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  filter: blur(6px);
  will-change: opacity, transform, filter;
  pointer-events: none;
  font-family: var(--sans);
}
.phone-view[data-hero-screen="0"] { opacity: 1; transform: none; filter: none; }
.phone-overline {
  max-width: none;
  margin: 0 0 12px;
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.phone-heading,
.phone-question,
.phone-display {
  margin: 0;
  color: var(--ink);
  font-style: normal;
  text-wrap: balance;
}
.phone-heading { font-family: var(--sans); font-size: 28px; font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; }
.phone-question { font-family: var(--serif); font-style: normal; font-size: 39px; font-weight: 400; line-height: 1.02; letter-spacing: -0.025em; }
.phone-display { font-family: var(--serif); font-style: normal; font-size: 46px; font-weight: 400; line-height: 0.98; letter-spacing: -0.03em; }
.phone-display--small { font-size: 40px; }
.phone-lead {
  margin-top: 20px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
  max-width: 30ch;
}
.phone-help { margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.phone-primary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  margin-top: 26px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--canvas);
  font-size: 15px;
  font-weight: 500;
}
.phone-primary span { font-size: 19px; }

.phone-searchbar {
  height: 58px;
  margin-top: 24px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 17px;
  background: #FFFFFF;
  border: 1px solid rgba(25,25,28,0.10);
  box-shadow: 0 10px 28px rgba(25,25,28,0.05);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.phone-searchbar svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.phone-caret { display: block; width: 1px; height: 20px; background: var(--ink); animation: phoneCaret 800ms steps(1) infinite; }
@keyframes phoneCaret { 50% { opacity: 0; } }
.phone-section-label { margin-top: 26px; color: var(--muted); font-size: 12px; letter-spacing: 0.04em; }
.phone-result-list { display: grid; gap: 10px; margin-top: 12px; }
.phone-result {
  min-height: 76px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(25,25,28,0.09);
  border-radius: 18px;
  background: rgba(255,255,255,0.68);
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}
.phone-result:first-child { border-color: rgba(34, 199, 214, 0.36); background: rgba(255,255,255,0.94); box-shadow: 0 12px 30px rgba(25,25,28,0.06); }
.phone-result__mark { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--canvas); font-family: var(--serif); font-style: normal; font-size: 21px; }
.phone-result__mark--muted { background: var(--canvas-2); color: var(--muted); }
.phone-result span:last-child { display: grid; gap: 4px; min-width: 0; }
.phone-result strong { font-size: 14px; line-height: 1.2; font-weight: 600; }
.phone-result small { color: var(--muted); font-size: 11px; line-height: 1.3; }

.phone-sitebar { display: flex; align-items: center; gap: 7px; margin-bottom: 74px; font-size: 15px; font-weight: 600; }
.phone-sitebar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.phone-path { display: flex; align-items: center; gap: 8px; margin-top: 30px; color: var(--muted); font-size: 11px; }
.phone-path i { width: 16px; height: 1px; background: rgba(25,25,28,0.22); }

.phone-progress { display: grid; gap: 9px; margin-bottom: 70px; color: var(--muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.phone-progress > i { display: block; height: 2px; background: rgba(25,25,28,0.10); border-radius: 2px; overflow: hidden; }
.phone-progress b { display: block; width: 0; height: 100%; background: var(--ink); border-radius: inherit; }
.phone-options { display: grid; gap: 10px; margin-top: 36px; }
.phone-options button {
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid rgba(25,25,28,0.16);
  border-radius: 999px;
  text-align: left;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  transform: translateY(10px);
  opacity: 0;
}
.phone-options button.is-selected { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

.phone-facts { display: grid; margin-top: 34px; border-top: 1px solid rgba(25,25,28,0.11); }
.phone-facts > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 15px 0; border-bottom: 1px solid rgba(25,25,28,0.11); opacity: 0; transform: translateY(10px); }
.phone-facts span { color: var(--muted); font-size: 12px; }
.phone-facts strong { font-size: 13px; font-weight: 500; line-height: 1.35; }

.phone-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 34px; }
.phone-days span { height: 46px; display: grid; place-items: center; border: 1px solid rgba(25,25,28,0.12); border-radius: 999px; color: var(--muted); font-size: 13px; }
.phone-days span.is-active { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.phone-slots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 22px; }
.phone-slots button { height: 64px; border: 1px solid rgba(25,25,28,0.13); border-radius: 17px; background: rgba(255,255,255,0.58); font-size: 15px; font-weight: 500; opacity: 0; transform: translateY(10px); }
.phone-slots button.is-selected { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.phone-calendar-note { margin: 18px auto 0; color: var(--muted); font-size: 11px; text-align: center; }

.phone-view--done { display: flex; flex-direction: column; justify-content: center; text-align: center; padding-inline: 34px; }
.phone-done__check { width: 84px; height: 84px; display: grid; place-items: center; margin: 0 auto 30px; border-radius: 50%; background: var(--ink); color: var(--canvas); transform: scale(0.72); opacity: 0; }
.phone-done__check svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.phone-view--done .phone-overline { text-align: center; }
.phone-view--done .phone-lead { margin-inline: auto; }
.phone-done__summary { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 36px; color: var(--ink); font-size: 11px; }
.phone-done__summary i { width: 10px; height: 1px; background: rgba(25,25,28,0.28); }
.phone-done__note { margin: 28px auto 0; color: var(--muted); font-size: 12px; line-height: 1.45; max-width: 24ch; }

.phone-tap {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.45);
  box-shadow: 0 0 0 0 rgba(34, 199, 214, 0.18);
  will-change: opacity, transform, box-shadow;
}
.phone-view--landing .phone-tap { right: 54px; bottom: 62px; }
.phone-view--question .phone-tap { right: 54px; top: 345px; }
.phone-view--recommendation .phone-tap { right: 54px; bottom: 64px; }
.phone-view--calendar .phone-tap { left: 86px; top: 355px; }

@media (max-width: 1250px) {
  .hero__stage.hero-system { --phone-scale: 0.59; }
  .hero-system__copy { right: 50%; }
}

@media (max-width: 1000px) and (min-width: 761px) {
  .hero__stage.hero-system { --phone-scale: 0.47; }
  .hero-system__copy { right: 48%; padding: 30px; }
  .hero-system__sample,
  .hero-system__chapter,
  .hero-system__scope { left: 30px; }
  .hero-system__title { font-size: clamp(40px, 6vw, 58px); }
  .hero-system__body { font-size: 13px; }
  .hero-system__control { right: 22px; bottom: 18px; }
}

@media (max-width: 760px) {
  .hero__stage.hero-system {
    --phone-scale: 0.55;
    aspect-ratio: auto;
    min-height: 820px;
    border-radius: 22px;
  }
  .hero-system__copy { inset: 0; padding: 0; }
  .hero-system__sample { top: 24px; left: 22px; right: 22px; }
  .hero-system__chapter {
    top: 118px;
    left: 22px;
    right: 22px;
    transform: translateY(var(--chapter-y, 18px)) scale(var(--chapter-scale, 1));
  }
  .hero-system__chapter[data-hero-scene="0"] { --chapter-y: 0px; }
  .hero-system__kicker { margin-bottom: 8px; font-size: 10px; }
  .hero-system__title { font-size: 46px; line-height: 0.94; }
  .hero-system__chapter--final .hero-system__title { font-size: 42px; }
  .hero-system__body { margin-top: 12px; font-size: 13px; line-height: 1.42; max-width: 31ch; }
  .hero-system__scope { display: none; }
  .hero-system__control { top: 48px; right: 18px; bottom: auto; min-height: 40px; }
  .hero-system__device { inset: 274px 0 0; }
  .hero-phone__scale { left: 50%; top: 48%; }
}

@media (max-width: 380px) {
  .hero__stage.hero-system { --phone-scale: 0.51; min-height: 790px; }
  .hero-system__title { font-size: 42px; }
  .hero-system__device { top: 266px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-system__control { display: none; }
  .phone-caret { animation: none; opacity: 0; }
}

/* ============================================================
   Header-Ausrichtung: Logo & CTA enden auf Sektionsbreite,
   Navigationspunkte sitzen mittig im Viewport.
   ============================================================ */
.header {
  justify-content: space-between;
  padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
.header .nav ul {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ============================================================
   Zentrales Balken-Menü (drei Balken in Logostärke) + Overlay
   ============================================================ */
.header { z-index: 100; }
.nav-bars {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-bars span {
  display: block;
  width: 30px;
  height: 5px;
  border-radius: 3px;
  background: var(--ink);
  transition: transform 300ms var(--ease), opacity 300ms var(--ease);
}
.nav-bars:hover span { background: var(--cta-text); }
.nav-bars[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.nav-bars[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-bars[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-content: center;
  gap: 16px;
  text-align: center;
  background: rgba(243, 241, 240, 0.97);
  backdrop-filter: blur(14px);
}
.site-menu[hidden] { display: none; }
.site-menu nav { display: grid; gap: clamp(10px, 2.4vh, 24px); }
.site-menu nav a {
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.site-menu nav a:hover,
.site-menu nav a:focus-visible { color: var(--cta-text); }
.site-menu > .btn { margin-top: 26px; justify-self: center; }

@media (max-width: 640px) {
  /* font-size hier war wirkungslos (a.nav-cta setzt font-size:0) — entfernt. */
  .nav-cta { padding: 8px 12px; }
  .nav-bars span { width: 26px; height: 4.5px; }
}

/* ------------------------------------------------------------------
   Projektseiten: „Das System dahinter" — Kette, Bausteine, Datenpunkte
   ------------------------------------------------------------------ */
.entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.entry-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.entry-card .cast { position: absolute; inset: 0; }
.entry-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
.entry-card__label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 16px 18px;
  color: #fff;
}
.entry-card__label strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.entry-card__label span { display: block; margin-top: 3px; font-size: 12px; opacity: 0.82; }
@media (max-width: 760px) {
  .entry-grid { grid-template-columns: minmax(0, 1fr); }
  .entry-card { aspect-ratio: 4 / 5; }
}

.autochain {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  align-items: stretch;
  margin-top: 36px;
}
.autochain__step {
  display: grid;
  align-content: center;
  justify-items: center;
  flex: 1 1 140px;
  min-width: 140px;
  padding: 18px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(250, 248, 245, 0.85);
  text-align: center;
}
.autochain__step small {
  display: block;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 14px;
  font-style: normal;
}
.autochain__step strong {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
}
.autochain__step span { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.autochain__step--auto { border-color: rgba(34, 199, 214, 0.5); }
.autochain__arrow { align-self: center; color: var(--accent); font-size: 18px; }
@media (max-width: 900px) {
  .autochain { flex-direction: column; }
  .autochain__step { min-width: 0; }
  .autochain__arrow { transform: rotate(90deg); align-self: center; }
}

.sysuse {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 44px;
}
.sysuse__item {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(250, 248, 245, 0.85);
  text-align: center;
}
.sysuse__icon {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(34, 199, 214, 0.42);
  border-radius: 50%;
  background: var(--canvas);
  color: var(--ink);
}
.sysuse__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.sysuse__icon { margin-bottom: 14px; }
.sysuse__item strong {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.15;
}
.sysuse__item span { display: block; margin-top: 6px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 980px) { .sysuse { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sysuse { grid-template-columns: minmax(0, 1fr); } }

.datapoints {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.datapoint strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 54px);
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}
.datapoint span { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 900px) { .datapoints { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sysuse__item--wide {
  grid-column: 1 / -1;
  border-color: rgba(34, 199, 214, 0.5);
  background: rgba(34, 199, 214, 0.06);
}

/* Kundenstimme auf Referenzseiten */
.case-review { max-width: 760px; margin: 0 auto; text-align: center; }
.case-review__stars { display: inline-flex; gap: 6px; margin-bottom: 22px; color: var(--accent); }
.case-review__stars svg { width: 20px; height: 20px; fill: currentColor; }
.case-review blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 44px);
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.case-review figcaption { margin-top: 20px; color: var(--muted); font-size: 14px; }
.case-review figcaption strong { color: var(--ink); font-weight: 600; }

.footer__grating { white-space: nowrap; }
.footer__grating i { font-style: normal; color: var(--accent); }

/* Referenz-Platzhalter: Coming soon */
.project-card--soon {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #1b1b1f 0%, #0e0e11 100%);
  border: 1px solid rgba(201, 162, 75, 0.22);
  cursor: default;
}
.project-card--soon::after { display: none; }
.project-card--soon__inner { display: grid; justify-items: center; gap: 14px; padding: 24px; text-align: center; }
.soon-mark {
  width: 34px;
  aspect-ratio: 1;
  background: var(--accent);
  opacity: 0.85;
  -webkit-mask: url("../img/acessio-mark.svg") center / contain no-repeat;
  mask: url("../img/acessio-mark.svg") center / contain no-repeat;
}
.project-card--soon strong {
  color: #F3F1F0;
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.15;
  max-width: 14ch;
}
.soon-sub {
  color: rgba(243, 241, 240, 0.55);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.case-review--full blockquote { font-size: clamp(24px, 2.8vw, 36px); }
.case-review__body { max-width: 640px; margin: 28px auto 0; text-align: left; }
.case-review__body p { margin: 0 0 1.2em; color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
.case-review__body p:last-child { margin-bottom: 0; }
.case-review figcaption a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(34, 199, 214, .55); text-underline-offset: 4px; }
.case-review figcaption a:hover { text-decoration-color: var(--accent); }

/* ── Funktionskarten (Startseite · System-Sektion) — Patientify-Stil ── */
.features-split { margin-top: clamp(40px, 5vw, 64px); }
.features-split__group { margin-bottom: clamp(36px, 4vw, 48px); }
.features-split__group:last-child { margin-bottom: 0; }
.features-split__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.features-grid {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(238,233,228,0.4) 100%);
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 32px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.feature-card:hover { background: rgba(255,255,255,0.85); }
.feature-card:last-child { border-bottom: none; }
.feature-card__name { font-size: 18px; font-weight: 500; color: var(--ink); }
.feature-card__benefit { font-size: 15px; line-height: 1.5; color: var(--muted); }
.feature-card__link { margin-top: 4px; font-size: 13px; color: var(--accent-ink); }
.feature-card:hover .feature-card__link { text-decoration: underline; }
@media (min-width: 700px) {
  .features-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature-card:nth-child(odd) { border-right: 1px solid var(--line); }
  .feature-card:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .feature-card:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: none; }
}

/* ── Logo-Marquee (Startseite · „Vertraut von") ─────────────── */
.logomarquee {
  padding-block: clamp(72px, 9vw, 128px);
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.logomarquee__label {
  max-width: none;
  margin: 0 0 clamp(36px, 4vw, 56px);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.logomarquee__viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.logomarquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: logomarquee-scroll 48s linear infinite;
  will-change: transform;
}
/* Kein `gap` — der Abstand liegt auf dem Item, sonst bricht der 50%-Loop. */
.logomarquee__item {
  flex: 0 0 auto;
  margin-right: clamp(64px, 8vw, 132px);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
/* Volle Farbigkeit — die Logos sind der Beleg, sie sollen nicht zurückhaltend wirken. */
.logomarquee__item > img { opacity: 1; }
.logomarquee__item a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease);
}
.logomarquee__item a:hover { transform: translateY(-2px); }
/* Logos haben sehr unterschiedliche Seitenverhältnisse (8:1 bis 1:1) —
   max-width normalisiert die optische Gewichtung, max-height gibt die Grundgröße. */
.logomarquee__item img {
  max-height: 62px;
  max-width: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Kein grayscale/contrast-Filter — alle Logos in Originalfarben. */
}
/* Kompakte Bildmarken ohne Schriftzug dürfen etwas größer stehen. */
.logomarquee__item--mark img { max-height: 74px; max-width: 200px; }
/* Hochformatige Logos (Bildmarke über zwei Textzeilen) brauchen Höhe statt Breite. */
.logomarquee__item--tall img { max-height: 96px; max-width: 190px; }
/* SA Folientechnik ist eine weiße Wortmarke — ohne dunkle Fläche unsichtbar auf Papier. */
.logomarquee__item--dark img {
  background: #0E0E10;
  border-radius: 8px;
  padding: 10px 14px;
  max-height: 60px;
  box-sizing: content-box;
}
/* Nur wo es einen Zeiger gibt. Auf einem Touchgerät bleibt `:hover` nach
   einer Berührung hängen — das Laufband stand dann still. */
@media (hover: hover) {
  .logomarquee__viewport:hover .logomarquee__track { animation-play-state: paused; }
}
@keyframes logomarquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 640px) {
  .logomarquee__item img { max-height: 44px; max-width: 210px; }
  .logomarquee__item--mark img { max-height: 52px; }
  .logomarquee__item { margin-right: 48px; }
}

/* ── Laufband am Phone: flüssig statt ruckelnd ────────────────────────────
   Problem: Die Spur war zu breit (3125 px bei 390 px Gerät), `will-change:
   transform` hielt die Verbundebene dauerhaft, und die Maske rechnete bei jedem
   Frame über die durchlaufende Ebene → Ruckeln.

   Lösung: translate3d für GPU-Compositing, Clone-Items aktiv (nahtloses Loop),
   keine Maske (stattdessen fade-out per `mask-image` nur wenn nötig), kein
   `will-change` (Browser entscheidet selbst). */
@media (max-width: 899px) {
  .logomarquee__track .logomarquee__item--clone { display: flex; }
  .logomarquee__track {
    animation: logomarquee-scroll 32s linear infinite;
    width: max-content;
    will-change: auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
  }
  .logomarquee__item {
    margin-right: clamp(40px, 8vw, 64px);
    flex-shrink: 0;
  }
  .logomarquee__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  }
  .logomarquee__item .logomarquee__bild { min-height: 54px; }
  .logomarquee__item img { max-height: 38px; max-width: min(100%, 150px); }
  .logomarquee__item--mark img { max-height: 50px; max-width: 76px; }
  .logomarquee__item--tall img { max-height: 54px; }
  .logomarquee__item--dark img { max-height: 30px; padding: 7px 10px; }
  .logomarquee__link, .logomarquee__item { gap: 8px; }
  .logomarquee__item .logomarquee__rolle {
    font-size: 9.5px;
    white-space: nowrap;
    text-align: center;
    line-height: 1.4;
  }
  .logomarquee__item .logomarquee__wort { font-size: 26px; }
}
@media (max-width: 640px) {
  .logomarquee__item img { max-height: 44px; max-width: 210px; }
  .logomarquee__item--mark img { max-height: 52px; }
  .logomarquee__item { margin-right: 48px; }
}
/* Kein zusätzliches `translateZ(0)` auf der Spur: ihr `transform` wird
   animiert, und eine Animation hat im Kaskadenverfahren Vorrang vor der
   normalen Deklaration — die Zeile wäre wirkungslos. Die eigene Ebene
   entsteht ohnehin, weil `transform` animiert wird und `will-change`
   gesetzt ist. */
@media (prefers-reduced-motion: reduce) {
  .logomarquee__viewport { -webkit-mask-image: none; mask-image: none; }
  .logomarquee__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 32px;
  }
  /* Über die Spur adressiert — sonst gewinnt `.logomarquee__item` aus
     `sections.css`, das später geladen wird, und die Marken stünden hier
     viermal untereinander. */
  .logomarquee__track .logomarquee__item--clone { display: none; }
  .logomarquee__item { margin-right: 0; }
  .logomarquee__track { column-gap: clamp(30px, 9vw, 56px); }
}

/* ── „Das System enthält" — eigene Sektion ─────────────────── */
.modules-section {
  border-top: 1px solid var(--line);
  margin-top: clamp(80px, 9vw, 120px);
}
.modules-section__head { text-align: center; }
.modules-section__title {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.modules-section__sub {
  margin: 20px auto 0;
  max-width: 40ch;
  color: var(--ink-2);
  font-size: var(--fs-lead);
}
.modules-section__cta { margin-top: clamp(40px, 5vw, 56px); text-align: center; }

/* ── Praxis-KI: Preis-Karten ───────────────────────────────── */
.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 16px;
}
.price-card {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 36px 32px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.6);
}
.price-card--accent {
  border-color: rgba(34, 199, 214, 0.5);
  background: rgba(34, 199, 214, 0.06);
}
.price-card__label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.price-card__value {
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.price-card__unit { font-size: 0.42em; color: var(--ink-2); margin-left: 0.08em; }
.price-card__list {
  list-style: none;
  display: grid;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 15px;
}
.price-card__list li { display: flex; align-items: baseline; gap: 10px; }
.price-card__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-1px);
}
.price-card__note { color: var(--muted); font-size: 13px; }
.price-trial { margin-top: 8px; color: var(--muted); font-size: 14px; }
@media (min-width: 720px) {
  .price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ── Betreuung & Förderung: die beiden Erklärgrafiken ──────── */
.care-cycle { margin: 30px 0 24px; }
.care-cycle svg { width: 100%; max-width: 320px; height: auto; display: block; overflow: visible; }
.care-cycle__arc {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1;
  stroke-dasharray: 4 5;
}
.care-cycle__tip { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.care-cycle__stop circle { fill: var(--canvas); stroke: var(--line-2); stroke-width: 1; }
.care-cycle__stop--last circle { fill: var(--accent); stroke: var(--accent); }
.care-cycle__stop text {
  font-family: var(--sans);
  font-size: 11px;
  fill: var(--muted);
  text-anchor: middle;
}

.care-track { margin: 4px 0 22px; }
.care-track__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
  background: rgba(34, 199, 214, 0.10);
  border: 1px solid rgba(34, 199, 214, 0.34);
  border-radius: 999px;
  padding: 5px 13px;
  margin-bottom: 18px;
}
.care-track__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.care-track__steps::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 5px;
  height: 1px;
  background: var(--line-2);
}
.care-track__steps li {
  position: relative;
  padding-top: 20px;
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}
.care-track__steps li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--canvas);
  border: 1px solid var(--line-2);
}
.care-track__steps li.is-end::before { background: var(--accent); border-color: var(--accent); }
.care-track__steps li.is-end { color: var(--ink); }
@media (max-width: 420px) {
  .care-track__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .care-track__steps::before { display: none; }
}


/* Auf den Projektseiten steht das Standbild still — der Besucher scrollt
   selbst. Das Durchlaufen bleibt der Startseite vorbehalten, wo es im
   Vorbeigehen zeigt, dass dort eine ganze Seite steht. */
.cast--still img { animation: none !important; transform: none !important; }
.cast--still { overflow: auto; -webkit-overflow-scrolling: touch; }
.cast--still img { height: auto; min-height: 0; }

/* ═══ Sprachumschalter ═════════════════════════════════════════════════════
   Eine Offenlegung statt eines Auswahlfelds: ohne JavaScript bedienbar, mit
   Tastatur von Haus aus, und der aktuelle Stand steht sichtbar im Knopf.
   Sitzt am linken Rand, direkt vor der Wortmarke.
   ═════════════════════════════════════════════════════════════════════════ */
/* Bis 13.08.2026 stand der Umschalter allein im Fluss und wurde von
   `space-between` in die Bildmitte geschoben — genau dorthin, wo der
   Menüknopf absolut liegt. Gemessen auf 320 bis 430 px: die Weltkugel lag
   auf den drei Balken. Umschalter und Wortmarke bilden jetzt EINEN Block am
   linken Rand; in der arabischen Fassung wandert er mit `dir="rtl"` von
   selbst nach rechts. */
.header { justify-content: space-between; }
.header__links {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 14px);
  min-width: 0;
  /* Zentriert. Die Vorgängerfassung richtete an der Unterkante aus, weil die
     Grundlinie der Wortmarke als stabiler galt. Sie ist es nicht: der Kasten
     der Sprachwahl ist so hoch wie die Zeilenhöhe ihrer Schrift, und die ist
     je Sprache verschieden — gemessen 24,8 px auf Deutsch, 28 px auf
     Chinesisch, 30,4 px auf Arabisch. An der Unterkante ausgerichtet wandert
     die Pille dadurch in jeder Sprache anders weit nach oben.
     Der Versatz zur Schriftmitte steht jetzt an der Sprachwahl selbst und
     hängt nur noch an --marke. */
  align-items: center;
  /* Höhe der Wortmarke. Wird bei jedem Haltepunkt mitgeführt, an dem sie
     kleiner wird — deshalb stehen die Stufen hier und nicht verstreut. */
  --marke: 34px;
}
@media (max-width: 860px) { .header__links { --marke: 30px; } }
@media (max-width: 400px) { .header__links { --marke: 25px; } }
/* display:flex macht den Kasten genau so hoch wie die Pille darin. Als
   normaler Block wäre er so hoch wie die Zeilenhöhe der jeweiligen Schrift
   und damit in jeder Sprache anders.

   Die Verschiebung setzt die Pille von der Kastenmitte des Logos auf die
   Mitte seiner Kleinbuchstaben: 0,5 − 0,425 = 0,075 der Markenhöhe nach
   unten. Sie sitzt an der Sprachwahl und nicht an der Pille, damit die
   aufklappende Liste mitgeht. */
.sprachwahl {
  position: relative;
  display: flex;
  align-items: center;
  transform: translateY(calc(var(--marke) * 0.075));
}

/* ── Mittig zur Schrift, nicht zum Kasten ─────────────────────────────────
   Der Bezugspunkt ist die Mitte der Kleinbuchstaben, denn die liest das Auge
   als Mitte des Wortes. „acessio" hat keine Unterlängen und als einzige
   Oberlänge den i-Punkt; der zählt optisch kaum.

   Gerechnet im viewBox des Logos (30 18 320 80, also 80 Einheiten hoch):
   die Rundungen von a/c/e/s/o stehen zwischen y = 40,94 und y = 87,06, ihre
   Mitte liegt bei y = 64. Das sind 34 der 80 Einheiten über der Unterkante
   des Kastens — 34/80 = 0,425.

   Die Vorgängerfassung hat auf die Mitte der gesamten Tinte gerechnet, also
   den i-Punkt bei y = 20,88 mitgenommen. Der zieht den Bezugspunkt um vier
   Pixel nach oben, und genau um diese vier Pixel stand die Pille zu hoch.

   Die Pille selbst ist 0,824 der Markenhöhe hoch — genauso hoch wie die
   gesamte Tinte des Logos. Verschoben wird sie eine Ebene höher, an der
   Sprachwahl. */
.sprachwahl > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  height: calc(var(--marke) * 0.824);
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.sprachwahl > summary::-webkit-details-marker { display: none; }
.sprachwahl > summary:hover { border-color: var(--ink); }
.sprachwahl > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sprachwahl svg {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.4;
}
.sprachwahl__liste {
  position: absolute;
  top: calc(100% + 8px);
  /* Klappt zur Seitenmitte hin auf — der Knopf steht jetzt am linken Rand,
     eine rechtsbündige Liste liefe aus dem Bild. */
  inset-inline-start: 0;
  z-index: 60;
  min-width: 168px;
  display: grid;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--canvas);
  box-shadow: 0 18px 44px rgba(25, 25, 28, 0.12);
}
.sprachwahl__liste a {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
}
.sprachwahl__liste a:hover { background: var(--canvas-2); color: var(--ink); }
.sprachwahl__liste a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* Die aktuelle Sprache ist keine Auswahl mehr, sondern eine Feststellung. */
.sprachwahl__liste a[aria-current] { color: var(--ink); font-weight: 600; }
.sprachwahl__liste a[aria-current]::after { content: " ·"; color: var(--accent); }

@media (max-width: 640px) {
  .sprachwahl > summary { padding: 0 10px; gap: 6px; }
  .sprachwahl > summary span { display: inline; font-size: 12px; }
  .sprachwahl svg { width: 14px; height: 14px; }
}

/* Bündig heißt am Telefon 21 px hoch — zu wenig zum Antippen. Die Tippfläche
   wird deshalb unsichtbar auf 44 px aufgezogen. Sie liegt auf dem Knopf
   selbst, der Klick trifft also weiterhin ihn. */
.sprachwahl > summary::after {
  content: "";
  position: absolute;
  inset: calc((44px - var(--marke) * 0.824) / -2) -6px;
}
@media (min-width: 861px) {
  .sprachwahl > summary::after { content: none; }
}

/* ── Kopfzeile am Phone: vier Elemente, kein Übereinander ──────────────────
   Auf dem Desktop liegt der Menüknopf absolut in der Bildmitte. Das geht
   dort auf, weil links und rechts genug Luft bleibt. Am Phone nicht: der
   Knopf beansprucht Platz, ohne welchen zu belegen, und die Nachbarn rechnen
   nicht mit ihm. Gemessen auf der alten Fassung — Wortmarke 20–140 px,
   Knopf 135–185 px bei 320 px Fensterbreite: sie lagen ineinander, und der
   Handlungsaufruf ragte 6 px aus dem Bild.

   Am Phone steht der Knopf deshalb IM Fluss. `space-between` verteilt dann
   drei echte Kästen — Sprachwahl+Marke, Knopf, Handlungsaufruf — und keine
   zwei können sich mehr überlagern, egal wie schmal das Fenster wird. */
@media (max-width: 899px) {
  .nav-bars {
    position: static;
    transform: none;
    padding: 10px;
    flex: 0 0 auto;
  }
  .nav-bars span { width: 26px; }
  .header { gap: 8px; }
  .header__links { gap: 8px; }
}
@media (max-width: 400px) {
  /* Letzte Stufe: bei 320 px sind 280 px nutzbar, und vier Elemente wollen
     hinein. Die Wortmarke bleibt lesbar, gibt aber Breite ab. */
  .brand { --marke-h: 25px; }
  .header__links { --marke: 25px; }
  .nav-bars { padding: 9px 8px; }
  .nav-bars span { width: 24px; }
  .nav-cta, a.nav-cta { padding: 8px 12px; }
}

/* ═══ Hero-Bühne am Phone: unter die Kopfzeile, über die Seitenränder ══════
   Zwei Befunde, gemessen mit Chromium bei 390 × 844 und dreifacher Dichte.

   1. Die Kopfzeile ist `position: fixed` und am Phone 85–88 px hoch. Die
      Bühne steht mit `min-height: 100svh` und `align-content: center` in
      `fluss.css` — mittig also im GANZEN Fenster, nicht im sichtbaren Teil
      darunter. Gemessen: Unterkante Kopfzeile 85 px, Oberkante des Kastens
      „Website und Inhalte" 49 px. Der oberste der sechs Bereiche lag 36 px
      unter der Kopfzeile und war, sobald diese deckend wird, halb weg.

   2. Die Zeichnung war 350 px breit — der Rest des Fensters ging an die
      Seitenränder. Bei einem Bild, dessen einziger Zweck es ist, sechs
      beschriftete Kästen lesbar zu zeigen, ist das der falsche Posten zum
      Sparen. Sie bekommt jetzt die volle Fensterbreite; die Statuszeile
      darunter behält ihren Rand.

   Beide Regeln wiegen schwerer als nötig (`.hero.hero--buehne`, drei Klassen
   am SVG): `fluss.css` wird NACH dieser Datei geladen und trägt dieselben
   Eigenschaften mit einer Klasse. Bei gleicher Gewichtung gewänne dort das
   spätere Blatt. */
@media (max-width: 899px) {
  .hero.hero--buehne .hero__buehne {
    /* 92 px statt der gemessenen 88 — die Kopfzeile wächst mit der
       Schriftgröße des Systems, und der Puffer kostet nichts. */
    padding-block: 92px clamp(12px, 3vw, 28px);
    /* Auf sehr niedrigen Fenstern (Querlage) wird die Zeichnung höher als
       der Kasten. Ohne `safe` schöbe die Zentrierung sie zur Hälfte NACH
       OBEN aus dem Kasten heraus — unter die Kopfzeile und nicht mehr
       erreichbar. `safe` fällt in diesem Fall auf oben zurück. */
    align-content: safe center;
  }
}
@media (max-width: 640px) {
  /* Die Bühne hebt den Seitenrand des Heros auf. Nur sie — die Überschrift
     und der Knopf darüber behalten ihn. */
  .hero.hero--buehne .hero__buehne { margin-inline: calc(var(--gutter) * -1); }
  .qu .qu__flaeche > .fl__svg.qu__svg--hochkant {
    /* Drei Deckel, der kleinste gewinnt:
       · 100 % — das Fenster,
       · 430 px — darüber wird die Zeichnung breiter als jedes Phone und
         stünde bei 640 px als 640 × 1178 da, zwei Bildschirme hoch,
       · die Breite, die aus der verfügbaren Höhe folgt. Das Format ist
         440 × 810; 116 px sind die 92 px Kopfzeile plus Fußraum. So bleibt
         die Zeichnung auch auf einem 320 × 568 vollständig im Bild.
       Darunter 240 px, damit sie in der Querlage nicht zur Briefmarke wird.
       Der Wert ist gemessen: bei 260 px stand die Zeichnung auf einem
       320 × 568 drei Pixel über den unteren Fensterrand hinaus. */
    max-width: min(
      100%,
      430px,
      max(240px, calc((100svh - 116px) * 440 / 810))
    );
  }
  /* Die Meldung unter der Zeichnung liegt in derselben Fläche und hätte den
     Rand sonst mit aufgehoben. */
  .qu .qu__flaeche > .fl__status { padding-inline: var(--gutter); }
}

/* ═══ Rechtsläufige Fassung ════════════════════════════════════════════════
   Grid und Flex spiegeln sich mit dir="rtl" von selbst. Was sich NICHT
   spiegelt: feste left/right-Werte, translateX und Randabstände, die mit
   -left/-right gesetzt sind. Nur die stehen hier.
   ═════════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .of__lauf figcaption { left: auto; right: 14px; }
[dir="rtl"] .team-carousel__ui { right: auto; left: 14px; }
[dir="rtl"] .pj__pfeil, [dir="rtl"] .rf__go { transform: scaleX(-1); }
[dir="rtl"] .pj__p:hover .pj__pfeil,
[dir="rtl"] .pj__p:focus-visible .pj__pfeil { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .sr__marke { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .sr__marke::before { left: auto; right: 0; }
[dir="rtl"] .footer__recht { justify-content: flex-start; }
[dir="rtl"] .nav-cta::after { content: "←"; }
[dir="rtl"] .nav-cta:hover::after { transform: translateX(-3px); }
[dir="rtl"] .team-carousel__arrow svg { transform: scaleX(-1); }


/* ═══ Fusszeile · a(c)cessible ═════════════════════════════════════════════
   Zwoelf Zeichen statt zehn, und keins davon darf umbrechen. „What else?"
   passte bei 168 px noch; dieses Wort nicht. Der Grad faellt deshalb, und
   die Silbentrennung ist hier ausgeschaltet — eine getrennte Marke waere
   keine Marke mehr.

   Die Klammer steht in Gold, weil sie die Anweisung ist: lies das c mit,
   dann heisst es accessible; lass es weg, dann steht acessio darin.
   ═════════════════════════════════════════════════════════════════════════ */
.footer__tagline {
  font-size: clamp(44px, 9.4vw, 132px);
  letter-spacing: -0.035em;
  hyphens: none;
  max-width: none;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.footer__tagline .klammer {
  /* Dasselbe Grün wie der Knopf, der die Seite verlässt: --cta wird im Fuß
     auf die hellere Fassung umgestellt, weil var(--ergebnis, #516C43) auf #0E0E11 nur 3,2:1
     erreicht. Gemessen mit der hellen Fassung: 6,2:1. */
  color: var(--cta);
  /* Die Klammern laufen in der Serifenschrift zu hoch — eine Spur kleiner
     und tiefer sitzen sie auf der Grundlinie des Wortes. */
  font-size: 0.86em;
  vertical-align: 0.04em;
}
.footer__glosse {
  margin: 0 auto clamp(96px, 11vw, 152px);
  max-width: 42ch;
  text-align: center;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--muted);
}
/* Auch bei 320 px darf das Wort nicht ueber den Rand laufen. */
@media (max-width: 380px) {
  .footer__tagline { font-size: clamp(34px, 10.4vw, 44px); }
}

/* ═══ Fußbereich in Kategorien ═════════════════════════════════════════════
   Vorher standen alle Verweise in zwei Reihen nebeneinander. Als Local SEO,
   Webdesign Stuttgart und Branchenlösungen herausfielen, blieben in der
   zweiten Reihe zwei Verweise übrig, und in der ersten legte sich die
   Jahreszahl über die Google-Bewertung — die Mittelspalte war für den
   verbliebenen Text zu schmal geworden.

   Drei Gruppen nach Zweck. Darunter eine schmale Zeile mit Marke, Jahr und
   Anschrift auf einer gemeinsamen Grundlinie.
   ═════════════════════════════════════════════════════════════════════════ */
/* Die Bildmarke steht über den Spalten und trägt die Haarlinie, die den
   Verweisblock von der Kontaktzeile trennt. Vorher stand sie ganz unten in
   der Schlusszeile — dort war sie das Letzte statt der Kopf des Blocks. */
.footer__marke {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(64px, 6.5vw, 96px) var(--gutter) clamp(30px, 3.4vw, 46px);
  border-top: 1px solid var(--line);
  line-height: 0;
}
.footer__marke .brand { display: inline-block; }
.footer__marke .brand { --marke-h: 30px; }

.footer__gliederung {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(40px, 4.4vw, 64px);
  display: grid;
  gap: clamp(28px, 3.4vw, 56px);
}
@media (min-width: 700px) {
  .footer__gliederung { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.footer__gruppe { display: block; }
.footer__liste { display: grid; gap: 11px; }
.footer__gruppe-titel {
  /* Fett und in normaler Schreibweise: Versalien mit Sperrung lasen sich als
     Etikett über der Liste, nicht als deren Überschrift. */
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.footer__gruppe a {
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink-2);
  text-decoration: none;
  /* Am Telefon bleibt jeder Verweis mit dem Daumen treffbar. */
  min-height: 24px;
}
.footer__gruppe a:hover, .footer__gruppe a:focus-visible { color: var(--ink); }

@media (max-width: 699px) {
  .footer__gruppe a { min-height: 40px; display: inline-flex; align-items: center; }
}



/* ── Schlusszeile ────────────────────────────────────────────────────────
   Bildmarke und Angabe stehen zusammen, links, auf einer gemeinsamen
   Grundlinie. Vorher trennte sie eine zweite Haarlinie, und die Angabe stand
   am rechten Rand: zwei Teile derselben Aussage, so weit auseinander, dass
   sie nicht mehr zusammengehörten.

   Die Haarlinie über der Verweisgruppe reicht als Trennung. Eine zweite
   direkt darunter zerlegt den Fußbereich in drei Kästen statt in zwei
   Gedanken. */
/* Schlusszeile: nur noch Jahr und Anschrift, in der rechten unteren Ecke.
   Die Bildmarke steht jetzt oben; hier bleibt die Kleingedruckte. */
.footer__meta {
  border-top: 0;
  padding-top: 0;
  display: flex;
  justify-content: flex-end;
}
.footer__jahr {
  white-space: normal;
  text-align: end;
}
@media (max-width: 559px) {
  .footer__meta { justify-content: flex-start; }
  .footer__jahr { text-align: start; }
}

/* ── Die ganze Kundenseite in der Fallseite ───────────────────────────────
   Vorher stand sie in einem Fenster von 16:9, in dem das Bild wanderte. Wer
   eine Referenz aufruft, will die Seite sehen — nicht durch ein Guckloch
   schauen. Jetzt steht sie in voller Länge da: bei Dr. Herzberg sind das
   11 183 px Bild auf 1 600 px Breite, an denen man entlangscrollt wie an der
   echten Seite.

   Der Rahmen bleibt schmaler als der Textsatz, damit die Seite als Abbildung
   erkennbar bleibt und nicht mit acessio.de verwechselt wird. */
.fallbild {
  max-width: 940px;
  margin: clamp(28px, 3.4vw, 48px) auto clamp(10px, 1.4vw, 18px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--canvas-2);
  line-height: 0;
}
.fallbild img { display: block; width: 100%; height: auto; }

/* ═══ Aufforderung ════════════════════════════════════════════════════════
   Stand bis 17.08. in reveal-sr.css — und die wird nur von der Startseite
   geladen. Der Knopf war dadurch auf index.html grün und auf allen anderen
   Seiten schwarz. Eine Farbe, die überall gilt, gehört in die Datei, die
   überall geladen wird.

   Grün bedeutet auf dieser Seite „Ergebnis, bestätigte Verbindung". Der
   einzige Knopf, der die Seite verlässt, trägt genau diese Bedeutung.

   Der Wert steht hier ausgeschrieben, weil --ergebnis in heim.css definiert
   ist und die ebenfalls nur die Startseite lädt.

   Zwei Fassungen, weil der Fuß schwarz ist: var(--ergebnis, #516C43) auf #0E0E11 kommt nur
   auf 3,2:1. Geprüft: Schrift auf Knopf 6,1:1 (hell) bzw. 5,7:1 (Fuß).
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  /* Cyan statt Grün: Grün stammte aus der alten Farbwelt und stand nach dem
     Wechsel allein da. Schrift MUSS dunkel sein — weiß auf Cyan sind 2,1:1
     und damit unlesbar, mit Ink sind es 8,7:1. */
  --cta: #22C7D6;
  /* Cyan traegt drei Aufgaben und braucht dafuer drei Fassungen.
     --cta ist die Flaeche: darauf steht dunkle Schrift mit 8,7:1. Auf heller
     Flaeche selbst liegt dasselbe Cyan aber nur bei 1,8:1 — als Fokusring
     oder Fortschrittsbalken waere es nicht erkennbar, als Schrift unlesbar.
     Deshalb zwei Ableitungen, jede an ihrer Anforderung bemessen:
     --cta-tief erfuellt die 3:1 fuer Elemente ohne Schrift, --cta-text die
     4,5:1 fuer Schrift. Beide gegen --canvas #F3F1F0 gerechnet. */
  --cta-tief: #0E8A97;
  --cta-text: #097078;
  --cta-hover: #16B4C2;
  --cta-schrift: #151621;
}

.btn--primary,
.nav-cta,
a.nav-cta {
  background: var(--cta);
  color: var(--cta-schrift) !important;
}
.btn--primary:hover,
.nav-cta:hover,
a.nav-cta:hover {
  background: var(--cta-hover);
}

.footer {
  /* Auf dem schwarzen Fuß trägt dasselbe Cyan: 9,4:1 gegen den Grund. */
  --cta: #22C7D6;
  /* Cyan traegt drei Aufgaben und braucht dafuer drei Fassungen.
     --cta ist die Flaeche: darauf steht dunkle Schrift mit 8,7:1. Auf heller
     Flaeche selbst liegt dasselbe Cyan aber nur bei 1,8:1 — als Fokusring
     oder Fortschrittsbalken waere es nicht erkennbar, als Schrift unlesbar.
     Deshalb zwei Ableitungen, jede an ihrer Anforderung bemessen:
     --cta-tief erfuellt die 3:1 fuer Elemente ohne Schrift, --cta-text die
     4,5:1 fuer Schrift. Beide gegen --canvas #F3F1F0 gerechnet. */
  --cta-tief: #0E8A97;
  --cta-text: #097078;
  --cta-hover: #4FD6E2;
  --cta-schrift: #0E0E11;
}

/* ── Der Punkt hinter der Wortmarke ──────────────────────────────────────
   Kein Zeichen aus der Schrift, sondern eine echte Scheibe: der gesetzte
   Punkt einer Schrift ist selten rund und sitzt je nach Schnitt anders auf
   der Grundlinie. Als Element ist er in jeder Größe exakt kreisrund und
   lässt sich sauber an der Grundlinie ausrichten.

   Er ist rein dekorativ und deshalb aria-hidden — vorgelesen würde er den
   Markennamen verfälschen. */
.brand { position: relative; }
.marke__punkt {
  display: inline-block;
  width: 0.30em;
  height: 0.30em;
  margin-left: 0.10em;
  border-radius: 50%;
  background: var(--cta, #22C7D6);
  vertical-align: baseline;
}
/* Im Kopf richtet sich die Größe nach der Wortmarke, nicht nach der
   Textgröße des Links — der ist dort 0. */
.header .brand .marke__punkt { width: calc(var(--marke-h) * 0.205); height: calc(var(--marke-h) * 0.205); }
.footer .brand .marke__punkt { width: calc(var(--marke-h) * 0.205); height: calc(var(--marke-h) * 0.205); }

/* ── Menü: rechtsbündig, Punkte auf einer Linie ─────────────────────────
   Die Punkte stehen wie Satzenden untereinander. Das geht nur, wenn die
   Einträge rechtsbündig laufen — bei zentrierten oder linksbündigen Zeilen
   wandert der Punkt mit der Wortlänge. */
.site-menu nav { text-align: right; justify-items: end; }
.site-menu nav a { display: inline-flex; align-items: baseline; gap: 0.16em; }
.menue__punkt {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  border-radius: 50%;
  background: var(--cta, #22C7D6);
  flex: 0 0 auto;
}


/* ═══════════════════════════════════════════════════════════════════════
   Fuß-Sockel — Türkisfläche mit Wellenkante
   ═══════════════════════════════════════════════════════════════════════
   Der Kontaktblock bleibt dunkel, der Verweisteil steht auf Türkis. Die
   Grenze zwischen beidem ist keine Linie, sondern eine Welle, die langsam
   nach links zieht.

   Die Farben werden hier neu gesetzt statt Regel für Regel überschrieben —
   dieselbe Mechanik wie im dunklen Teil. Wer später eine Regel mit
   `var(--ink)` schreibt, bekommt im Sockel automatisch Schwarz.
   Weiß auf Türkis liegt bei 2,1:1 und wäre unlesbar; Schwarz bei 9,4:1.
   ─────────────────────────────────────────────────────────────────────── */
.footer { padding-bottom: 40px; }
.footer__sockel {
  --fuss-schrift: #0E0E11;
  --fuss-leise: rgba(14, 14, 17, 0.74);
  --fuss-linie: rgba(14, 14, 17, 0.20);
  --ink: var(--fuss-schrift);
  --ink-2: rgba(14, 14, 17, 0.88);
  --muted: var(--fuss-leise);
  --line: var(--fuss-linie);
  --line-2: rgba(14, 14, 17, 0.28);
  --canvas-2: rgba(14, 14, 17, 0.06);
  --accent: var(--fuss-schrift);
  position: relative;
  margin-top: clamp(80px, 9vw, 130px);
  margin-bottom: -40px;   /* füllt die Fußpolsterung bis zur Seitenkante */
  padding-bottom: 40px;
  background: #22C7D6;
  color: var(--fuss-schrift);
}
/* Die Kante trägt schon die Trennung. Ein zweiter Strich darüber wäre einer
   zu viel, und die obere Polsterung kann kleiner ausfallen, weil die Welle
   selbst bereits Raum schafft. */
.footer__sockel .footer__marke { border-top: 0; padding-top: clamp(20px, 2.4vw, 34px); }
.footer__sockel .footer__meta { border-top-color: var(--fuss-linie); }
.footer__sockel .footer__grating i { color: var(--fuss-schrift); }
.footer__sockel a:focus-visible { outline-color: var(--fuss-schrift); }
.footer__sockel .marke__punkt { background: var(--fuss-schrift); }
.footer__sockel .brand__zier { color: rgba(14, 14, 17, 0.55); }

/* Die Wortmarke im Sockel ist ein Block mit Zeilenhöhe 0 — dort fiele der
   Punkt aus dem Zeilenkasten nach unten heraus. Als Flexzeile mit
   Ausrichtung an der Unterkante sitzt er wieder neben dem Wort; die 15 %
   heben ihn von der Unterkante des SVG auf die Schriftgrundlinie, die im
   viewBox 12 von 80 Einheiten darüber liegt. */
.footer__marke .brand {
  display: inline-flex;
  align-items: flex-end;
  line-height: 1;
}
.footer__marke .brand .marke__punkt {
  width: calc(var(--marke-h) * 0.205); height: calc(var(--marke-h) * 0.205);
  margin-bottom: calc(var(--marke-h) * 0.15);
}

/* ── Die Welle ──────────────────────────────────────────────────────────
   Zwei Züge, beide als Kachelbild. Eine Kachel füllt genau eine
   Bildschirmbreite, die Lage ist doppelt so breit — ein Zug um -50 % ist
   damit exakt eine Kachel und schließt nahtlos an. Alle Frequenzen im Bild
   sind ganzzahlige Vielfache der Kachelbreite, sonst entstünde an der Naht
   ein Knick.

   Die Grundwelle läuft einmal je Kachel und trägt die größte Amplitude:
   daher kommt gelegentlich eine höhere Welle. Darüber liegen zwei
   schnellere, kleinere Züge.

   Verschoben wird `transform`, nicht `background-position` — Ersteres
   bleibt beim Compositor, Letzteres zeichnet jedes Bild neu.
   ────────────────────────────────────────────────────────────────────── */
.welle {
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 140px;
  margin-bottom: -1px;   /* verhindert einen Haarriss an der Naht */
  overflow: hidden;
  pointer-events: none;
}
.welle__lage {
  position: absolute;
  inset: 0 auto 0 0;
  width: 200%; height: 100%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
}
.welle__lage--fern { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0 81.9L10 82.4L20 83.4L30 84.7L40 86.3L50 87.9L60 89.3L70 90.4L80 91.0L90 91.1L100 90.8L110 90.1L120 89.1L130 88.0L140 87.0L150 86.3L160 86.1L170 86.3L180 87.1L190 88.3L200 89.8L210 91.5L220 93.1L230 94.6L240 95.6L250 96.1L260 95.9L270 95.2L280 93.9L290 92.2L300 90.3L310 88.3L320 86.5L330 85.0L340 83.9L350 83.2L360 82.8L370 82.7L380 82.8L390 82.8L400 82.5L410 81.9L420 80.7L430 78.9L440 76.5L450 73.6L460 70.3L470 66.8L480 63.4L490 60.2L500 57.4L510 55.1L520 53.3L530 52.1L540 51.4L550 51.0L560 50.7L570 50.5L580 50.0L590 49.2L600 48.0L610 46.4L620 44.5L630 42.4L640 40.3L650 38.3L660 36.7L670 35.7L680 35.2L690 35.5L700 36.5L710 38.0L720 39.9L730 42.1L740 44.4L750 46.5L760 48.3L770 49.7L780 50.7L790 51.3L800 51.6L810 51.7L820 52.0L830 52.4L840 53.2L850 54.6L860 56.4L870 58.8L880 61.6L890 64.6L900 67.8L910 70.8L920 73.6L930 75.9L940 77.6L950 78.6L960 79.2L970 79.2L980 79.0L990 78.6L1000 78.2L1010 78.1L1020 78.3L1030 79.0L1040 80.1L1050 81.6L1060 83.4L1070 85.2L1080 86.9L1090 88.3L1100 89.2L1110 89.7L1120 89.5L1130 88.9L1140 87.8L1150 86.4L1160 84.9L1170 83.6L1180 82.5L1190 82.0L1200 81.9L1200 140L0 140Z' fill='%2312707A'/%3E%3C/svg%3E"); }
.welle__lage--mitt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0 62.9L10 63.5L20 63.9L30 64.4L40 64.7L50 65.0L60 65.3L70 65.5L80 65.7L90 65.8L100 66.0L110 66.1L120 66.3L130 66.5L140 66.7L150 66.9L160 67.2L170 67.5L180 67.8L190 68.1L200 68.4L210 68.6L220 68.8L230 69.0L240 69.1L250 69.2L260 69.2L270 69.1L280 69.0L290 68.8L300 68.7L310 68.6L320 68.5L330 68.6L340 68.8L350 69.1L360 69.6L370 70.4L380 71.4L390 72.7L400 74.3L410 76.2L420 78.3L430 80.7L440 83.3L450 86.1L460 89.0L470 92.0L480 95.1L490 98.0L500 100.8L510 103.5L520 105.9L530 107.9L540 109.6L550 110.9L560 111.8L570 112.2L580 112.1L590 111.6L600 110.7L610 109.3L620 107.7L630 105.7L640 103.6L650 101.3L660 99.0L670 96.7L680 94.5L690 92.5L700 90.8L710 89.4L720 88.3L730 87.6L740 87.3L750 87.5L760 88.0L770 88.9L780 90.1L790 91.6L800 93.3L810 95.1L820 97.0L830 98.8L840 100.5L850 102.1L860 103.4L870 104.3L880 104.9L890 105.1L900 104.9L910 104.2L920 103.1L930 101.5L940 99.5L950 97.2L960 94.6L970 91.8L980 88.7L990 85.6L1000 82.4L1010 79.3L1020 76.2L1030 73.4L1040 70.7L1050 68.3L1060 66.2L1070 64.4L1080 62.9L1090 61.7L1100 60.8L1110 60.2L1120 59.9L1130 59.9L1140 60.0L1150 60.3L1160 60.7L1170 61.2L1180 61.8L1190 62.4L1200 62.9L1200 140L0 140Z' fill='%231AA3B0'/%3E%3C/svg%3E"); }
.welle__lage--nah { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0 82.7L10 82.9L20 82.9L30 82.7L40 82.2L50 81.5L60 80.6L70 79.7L80 78.8L90 77.9L100 77.3L110 76.9L120 76.9L130 77.3L140 78.1L150 79.4L160 81.1L170 83.2L180 85.7L190 88.5L200 91.5L210 94.6L220 97.7L230 100.6L240 103.4L250 105.9L260 108.1L270 110.0L280 111.5L290 112.6L300 113.4L310 113.9L320 114.3L330 114.5L340 114.6L350 114.8L360 115.1L370 115.5L380 116.1L390 116.8L400 117.8L410 118.8L420 120.0L430 121.2L440 122.3L450 123.4L460 124.1L470 124.6L480 124.7L490 124.4L500 123.6L510 122.4L520 120.7L530 118.6L540 116.1L550 113.3L560 110.4L570 107.4L580 104.4L590 101.5L600 98.8L610 96.4L620 94.4L630 92.7L640 91.4L650 90.4L660 89.8L670 89.4L680 89.3L690 89.3L700 89.3L710 89.3L720 89.1L730 88.8L740 88.3L750 87.6L760 86.7L770 85.6L780 84.3L790 82.9L800 81.6L810 80.2L820 79.1L830 78.1L840 77.5L850 77.2L860 77.3L870 77.7L880 78.5L890 79.7L900 81.1L910 82.7L920 84.4L930 86.2L940 87.8L950 89.3L960 90.5L970 91.4L980 91.9L990 92.0L1000 91.7L1010 91.0L1020 90.0L1030 88.7L1040 87.2L1050 85.7L1060 84.1L1070 82.6L1080 81.3L1090 80.2L1100 79.3L1110 78.8L1120 78.6L1130 78.7L1140 79.0L1150 79.5L1160 80.2L1170 80.9L1180 81.6L1190 82.2L1200 82.7L1200 140L0 140Z' fill='%2322C7D6'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes welleZug {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  /* Verschiedene Umlaufzeiten, damit die beiden Züge nicht gekoppelt
     wirken. 41, 29 und 19 Sekunden treffen sich erst nach über sechs Stunden wieder. */
  .welle__lage--fern { animation: welleZug 41s linear infinite; }
  .welle__lage--mitt { animation: welleZug 29s linear infinite; }
  .welle__lage--nah  { animation: welleZug 19s linear infinite; }
}

@media (max-width: 700px) {
  .welle { height: 92px; }
}

/* Der Zierbogen in der Bildmarke trug bislang das Gold. Er trägt jetzt den
   Akzent des Knopfes; im Türkissockel schaltet er auf Schwarz um, weil
   Türkis auf Türkis verschwände. */
.brand__zier { color: #22C7D6; }

/* Der Zierbogen liegt im viewBox links vom Schriftzug und wird von dessen
   linker Kante angeschnitten — sichtbar bleibt ein Splitter über dem „a".
   Auf Schwarz fiel er kaum auf, auf Türkis ist er ein Fleck. Den Akzent
   trägt jetzt der Punkt hinter dem Wort, also fällt der Splitter weg. */
.brand__zier { display: none; }

/* Der Punkt steht am Wortende, nicht daneben. `.brand` bringt 6 px
   Flex-Abstand mit; zusammen mit dem eigenen Rand ergäbe das 11 px. */
.header .brand, .footer__marke .brand, .of__marke { gap: 0; }


/* Auch in der Kopfzeile sitzt der Punkt auf der Schriftgrundlinie, nicht auf
   halber Wortmarkenhöhe. Gleiche Herleitung wie im Fuß: die Grundlinie liegt
   im viewBox 12 von 80 Einheiten über der Unterkante. */
.header .brand { align-items: flex-end; }
.header .brand .marke__punkt { margin-bottom: calc(var(--marke-h) * 0.15); }

/* In einer Überschrift ist der Punkt ein Satzzeichen, kein Signal. 0,30 em
   wie im Logo-Lockup wären dort ein Ball; ein gesetzter Punkt misst rund
   0,15 em. `vertical-align: baseline` setzt die Unterkante des Inline-Blocks
   auf die Grundlinie — genau die Lage eines echten Punktes. */
.marke__punkt--titel { width: 0.15em; height: 0.15em; margin-left: 0.03em; }

/* Der Punkt steht am Wortende, nicht neben dem Bildkasten.
   Im viewBox reicht der Kasten bis 350, das „o" endet bei 342,5 — der leere
   Rand misst also 9,4 % der Kastenhöhe. Ein gesetzter Punkt sitzt rund 6 %
   hinter dem Buchstaben. Die Differenz von 3,4 % wird als negativer Rand
   zurückgenommen, sonst käme der Leerrand zum Abstand dazu und der Punkt
   stünde dreimal so weit weg wie beabsichtigt. */
.of__marke { --marke-h: 1.45em; }
.header .brand .marke__punkt,
.footer__marke .brand .marke__punkt,
.of__marke .marke__punkt { margin-left: calc(var(--marke-h) * -0.034); }

/* ── Hervorhebungen ──────────────────────────────────────────────────────
   Typografische Markierung, kein Knopf: geringe Rundung, wenig Innenabstand,
   `box-decoration-break` hält die Fläche über den Zeilenumbruch zusammen. */
.mk {
  font-style: italic;
  padding: 0.04em 0.24em;
  margin-inline: -0.04em;
  border-radius: 0.22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--ink);
}
/* Die hellen Fassungen aus der Farbvorgabe. Bewusst nur als Textfläche —
   die kräftigen Töne bleiben draußen, sonst kippt die Seite ins Bunte.
   Schrift bleibt überall dunkel; gemessen liegt der Kontrast bei allen drei
   über 15:1. */
.mk--gruen { background: #DDF8FA; }   /* Cyan hell */
.mk--creme { background: #EAE7FF; }   /* Lavendel hell */
.mk--terra { background: #ECF9DB; }   /* Lime hell */

/* Verschoben aus start.css. Die Auszeichnung ist ein Textmittel, kein
   Bauteil der Startseite — in start.css hätte sie auf Referenzen und
   Enzyklopädie schlicht nicht existiert, weil diese Seiten das Stylesheet
   nicht laden. Derselbe Fehler wie zuvor bei der CTA-Farbe und beim Punkt.
   Sie gehört deshalb ins globale Blatt. */

/* Endet eine Auszeichnung den Satz, steht der Punkt sonst sichtbar frei: er
   folgt erst hinter der rechten Innenpolsterung von 0,24 em, und dann kommt
   seine eigene linke Vorbreite noch dazu. Bei 16 px fällt das kaum auf, bei
   einer Überschrift von 68 px sind es rund 20 px Loch.

   `.mk--satz` nimmt die Polsterung rechts auf 0,14 em zurück und zieht den
   Punkt um denselben Betrag heran. Er sitzt damit an der Kante der Fläche,
   wie ein Punkt nach einem gewöhnlichen Wort. Ein pauschaler negativer Rand
   auf `.mk` ginge nicht — er würde auch das nächste Wort heranziehen, wenn
   die Auszeichnung mitten im Satz steht.

   Logische statt physischer Seiten: im Arabischen folgt der Punkt links auf
   das Wort — `padding-right` säße dort auf der falschen Seite und würde den
   Vorgänger statt des Punkts heranziehen. */
.mk--satz { padding-inline-end: 0.14em; margin-inline-end: -0.14em; }


/* Die Auszeichnung ist im Lateinischen kursiv und eng gesetzt. Beides gibt
   es in den beiden anderen Schriften nicht: Kursive fängt main.css:157
   bereits ab, die Enge nicht — negative Laufweite lässt chinesische Zeichen
   und arabische Ligaturen ineinanderlaufen. */
:lang(zh) .mk, :lang(ar) .mk { letter-spacing: 0; }