/* MisterGelato — Startseite als Kamerafahrt.
   Werte aus ~/.claude/designsprachen/vorlagen/kamerafahrt.md (§4 Farbe, §5 Schrift, §6 Raster, §7 Bewegung).
   Abweichung: Akzent nach der Tauschregel der Vorlage auf das Champagner-Gold des Logos (Ring gemessen:
   Median #dcb387, Glanz #fbd5a5), Kontrast neu gerechnet in buehne/kontrast.py. */

/* Schriften unter SIL OFL 1.1; die Lizenztexte reisen mit (veroeffentlichen.py nimmt sie über diese Verweise mit):
   ../schrift/mona-sans-OFL.txt ../schrift/geist-OFL.txt ../schrift/geist-mono-OFL.txt
   Je Familie zwei Ausschnitte wie bei Fontsource: latin für DE/EN, latin-ext für ă, ș, ț der rumänischen Seite.
   Die unicode-range entscheidet, welche Datei der Browser lädt; DE und EN laden latin-ext nie. */
@font-face { font-family: "Mona Sans"; src: url("../schrift/mona-sans.woff2?v=a59061e38c5e") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mona Sans"; src: url("../schrift/mona-sans-latin-ext.woff2?v=5adec6522632") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; src: url("../schrift/geist.woff2?v=19f9c92546aa") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("../schrift/geist-latin-ext.woff2?v=824f485b5d26") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; src: url("../schrift/geist-mono.woff2?v=684ad5b531f8") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; src: url("../schrift/geist-mono-latin-ext.woff2?v=1a189eb997c3") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root,
[data-theme="light"] {
  color-scheme: light;
  --grund: #F0F1FA;
  --flaeche: #E4E6EF;
  --flaeche-hoch: #FFFFFF;
  --linie: rgba(5, 4, 25, 0.1);
  --linie-stark: rgba(0, 0, 0, 0.4);
  --text: #050419;
  --text-weich: #414141;
  --text-leise: #535450;
  --akzent: #6E4C1F;
  --akzent-text: #FFFFFF;
  --akzent-tief: #553914;
  --akzent-hauch: rgba(110, 76, 31, 0.063);
  --signal-ok: #0B4221;
  --signal-warnung: #876100;
  --signal-halt: #990000;
  --fokus: #6E4C1F;
  --misch: #FFFFFF;
  --glas: rgb(255 255 255 / 0.5);
  --glas-linie: var(--linie);
  --glas-blur: 12px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --grund: #040508;
  --flaeche: #0C0C0C;
  --flaeche-hoch: #1C2227;
  --linie: rgba(212, 212, 212, 0.15);
  --linie-stark: rgba(255, 255, 255, 0.35);
  --text: #F0F1FA;
  --text-weich: rgba(255, 255, 255, 0.7);
  --text-leise: rgba(255, 255, 255, 0.55);
  --akzent: #F1D9B0;
  --akzent-text: #2B1A07;
  --akzent-tief: #DCB387;
  --akzent-hauch: rgba(241, 217, 176, 0.063);
  --signal-ok: #01C654;
  --signal-warnung: #FFCB47;
  --signal-halt: #FF6666;
  --fokus: #7AEBFF;
  --misch: #FFFFFF;
  --glas: rgb(28 34 39 / 0.7);
  --glas-linie: var(--linie);
  --glas-blur: 12px;
}

:root {
  --schrift-display: "Mona Sans", system-ui, sans-serif;
  --schrift-text: "Geist", system-ui, sans-serif;
  --schrift-mono: "Geist Mono", ui-monospace, monospace;

  --r1: 4px; --r2: 6px; --r3: 12px; --r4: 16px; --r5: 24px;
  --r6: 32px; --r7: 40px; --r8: 64px; --r9: 80px; --r10: 180px;

  --radius-0: 0; --radius-1: 3px; --radius-2: 7px; --radius-sucher: 10px;
  --radius-3: 18px; --radius-4: 40px; --radius-pille: 999px;

  --zeit-ort: 150ms; --zeit-kommt: 500ms; --zeit-szene: 1200ms; --zeit-zeichen: 40ms;
  --zeit-halten: 1200ms; --zeit-lader-geduld: 6000ms;
  --kurve-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --kurve-ort: cubic-bezier(0.65, 0, 0.35, 1);
  --kurve-raus: cubic-bezier(0.7, 0, 0.84, 0);

  --rand: clamp(16px, 2.5vw, 36px);
  --kopf-mitte: 44px;
  --knopf-hoehe: 37px;
  --breite-headline: 568px;
  --breite-untertitel: 514px;
  --breite-ecktext: 233px;
  --kapitel: 274svh;
  --haarlinie: 1px;
  --balken: 4px;

  --plakat: clamp(5.5rem, 11.2vw, 10.0625rem);
  --zaehler: clamp(5.375rem, 13.9vw, 12.5rem);
  --headline: clamp(2.5rem, 4.17vw, 3.75rem);
  --untertitel: clamp(1.125rem, 1.32vw, 1.1875rem);
}
@media (max-width: 767px) {
  :root { --knopf-hoehe: 44px; }
}

/* ------------------------------------------------------------ Grund */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--grund); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 1rem/1.5 var(--schrift-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.nur-schmal { display: none; }
.unsichtbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sprung {
  position: fixed; inset-block-start: var(--r3); inset-inline-start: var(--rand); z-index: 20;
  padding: var(--r2) var(--r3); background: var(--flaeche-hoch); border-radius: var(--radius-2);
  transform: translateY(-200%);
}
.sprung:focus { transform: none; }

.etikett {
  font: 400 0.75rem/1.2 var(--schrift-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Bühne */

.buehne {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: block;
}
.standbild {
  position: fixed; inset: 0; z-index: 0;
  background: var(--grund) center / cover no-repeat;
  display: none;
}
html.ohne-3d .buehne { display: none; }
html.ohne-3d .standbild { display: block; }
.standbild-hinweis {
  position: fixed; inset-block-start: calc(var(--kopf-mitte) * 2); inset-inline-end: var(--rand); z-index: 2;
  color: var(--signal-warnung);
  display: none;
}
html.ohne-3d .standbild-hinweis { display: block; }

/* ------------------------------------------------------------ Vorlader */

.vorlader {
  position: fixed; inset: 0; z-index: 30;
  background: var(--grund);
  transition: opacity var(--zeit-szene) var(--kurve-raus);
}
.vorlader-balken {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  height: var(--balken); width: calc(var(--fortschritt, 0) * 100%);
  background: var(--akzent);
}
.vorlader-zahl {
  position: absolute; inset-inline-start: var(--rand); inset-block-end: var(--r7);
  font: 400 var(--zaehler)/1 var(--schrift-display);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.vorlader-unten {
  position: absolute; inset-inline-end: var(--rand); inset-block-end: var(--r7);
  display: grid; gap: var(--r2); justify-items: end; text-align: end;
}
.vorlader-unten a { color: var(--text); }
.vorlader-fehler { color: var(--signal-halt); }
.vorlader[data-fertig] { opacity: 0; pointer-events: none; }
html:not(.js) .vorlader { display: none; }

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

.kopf {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 10;
  height: calc(var(--kopf-mitte) * 2);
  padding-inline: var(--rand);
  display: flex; align-items: center; justify-content: flex-end; gap: var(--r3);
  pointer-events: none;
}
.kopf > * { pointer-events: auto; }
/* Schleier unter der Mischebene des Kopfs (kamerafahrt.md §4): Weiß im Mischmodus hält 4,5:1 nur auf sehr dunkler Szene.
   Eigene feste Ebene unter .kopf-misch, nicht in ihr, sonst mischt sie mit. Über dem hellen Umschnitt aus. */
.kopf-schleier {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 9;
  height: calc(var(--kopf-mitte) * 2 + var(--r5));
  background: linear-gradient(to bottom, color-mix(in srgb, var(--grund) 75%, transparent) calc(100% - var(--r5)), transparent);
  pointer-events: none;
  transition: opacity var(--zeit-ort) var(--kurve-ort);
}
html[data-abschnitt="leistungen"] .kopf-schleier { opacity: 0; }
.kopf-misch {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 11;
  height: calc(var(--kopf-mitte) * 2);
  padding-inline: var(--rand);
  display: flex; align-items: center; gap: var(--r6);
  color: var(--misch);
  mix-blend-mode: difference;
  pointer-events: none;
}
.kopf-misch > * { pointer-events: auto; }
.wortmarke {
  font: 600 1.375rem/1 var(--schrift-display);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.kapitelanzeige {
  position: absolute; inset-inline-start: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--r3);
}
.kapitelname { min-width: 11ch; text-align: end; }
.kapitelstriche { display: flex; position: relative; }
.kapitelstriche::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0;
  width: calc(var(--fortschritt-seite, 0) * 100%); height: 1px; background: var(--misch);
}
.kapitelstriche a {
  position: relative; width: var(--r5); height: var(--r5);
  display: block;
}
.kapitelstriche a::before {
  content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%;
  width: 1px; height: 5px; transform: translate(-50%, -50%);
  background: var(--misch); opacity: 0.45;
  transition: opacity var(--zeit-ort) var(--kurve-ort);
}
.kapitelstriche a[aria-current="true"]::before,
.kapitelstriche a:hover::before { opacity: 1; height: 9px; }

.knopf {
  display: inline-flex; align-items: center; gap: var(--r2);
  height: var(--knopf-hoehe);
  padding: 0 18px;
  border: 0; border-radius: var(--radius-pille);
  background: var(--akzent); color: var(--akzent-text);
  font: 400 0.9375rem/1 var(--schrift-text);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--zeit-ort) var(--kurve-ort), transform var(--zeit-ort) var(--kurve-ort);
}
.knopf .pfeil { transition: transform var(--zeit-ort) var(--kurve-ort); }
.knopf:hover .pfeil { transform: translateX(var(--r1)); }
.knopf:active { background: var(--akzent-tief); transform: scale(0.98); }
.knopf[disabled] { opacity: 0.55; cursor: progress; }
.kontur {
  display: inline-flex; align-items: center;
  height: var(--knopf-hoehe); padding: 0 18px;
  border: 1px solid var(--linie-stark); border-radius: var(--radius-pille);
  background: transparent; color: var(--text);
  font: 400 0.9375rem/1 var(--schrift-text); cursor: pointer;
}
/* Sprachwahl DE · EN · RO: leise Kürzel, die aktuelle Sprache voll mit Kontur. 44 px je Ziel, auch im Fuß. */
.sprachwahl { display: inline-flex; align-items: center; gap: var(--r1); }
.sprachwahl a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: var(--knopf-hoehe); padding: 0 var(--r2);
  border-radius: var(--radius-pille);
  color: var(--text-leise); text-decoration: none;
  transition: color var(--zeit-ort) var(--kurve-ort);
}
.sprachwahl a:hover { color: var(--text); }
.sprachwahl a[aria-current="page"] { color: var(--text); box-shadow: inset 0 0 0 1px var(--linie-stark); }
.fuss .sprachwahl { gap: var(--r1); }   /* sonst gewinnt der weite Abstand von .fuss nav */
/* Eine Handlung je Bildschirm: steht die Anfrage im Bild, tritt der Kopfknopf zurück. */
html[data-abschnitt="anfrage"] .kopf .knopf { opacity: 0; pointer-events: none; }
.kopf .knopf { transition: opacity var(--zeit-ort) var(--kurve-ort); }

/* ------------------------------------------------------------ Menü */

.menue {
  position: fixed; inset: 0; z-index: 25;
  background: var(--grund);
  padding: calc(var(--kopf-mitte) * 2) var(--rand) var(--rand);
  display: grid; align-content: space-between;
}
.menue[hidden] { display: none; }
.menue-schliessen { position: absolute; inset-block-start: calc(var(--kopf-mitte) - var(--knopf-hoehe) / 2); inset-inline-end: var(--rand); }
.menue ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r2); }
.menue ol a {
  font: 400 var(--headline)/1 var(--schrift-display);
  text-decoration: none;
  display: inline-flex; gap: var(--r4); align-items: baseline;
}
.menue ol a .etikett { color: var(--text-leise); }
.menue ol a:hover { text-decoration: underline; }
.menue-fuss { color: var(--text-weich); display: flex; flex-wrap: wrap; gap: var(--r3) var(--r6); }

/* ------------------------------------------------------------ Strecke */

main { position: relative; z-index: 1; }
.held { block-size: 100svh; }
.kapitel { block-size: var(--kapitel); }
.rahmen {
  position: sticky; inset-block-start: 0;
  block-size: 100svh;
  padding: calc(var(--kopf-mitte) * 2) var(--rand) var(--rand);
  display: grid;
  grid-template:
    "ol . or" auto
    ". mitte ." 1fr
    "ul hinweis ur" auto / minmax(0, 1fr) auto minmax(0, 1fr);
  pointer-events: none;
}
.rahmen a, .rahmen button { pointer-events: auto; }
.ecke-ol { grid-area: ol; align-self: start; }
.ecke-ur { grid-area: ur; justify-self: end; align-self: end; }
.ecke-ul { grid-area: ul; align-self: end; }
.ecke-hinweis { grid-area: hinweis; align-self: end; justify-self: center; margin-block-end: calc(28px - var(--rand)); }

.headline {
  margin: 0;
  max-width: var(--breite-headline);
  font: 400 var(--headline)/1 var(--schrift-display);
  letter-spacing: 0;
  text-wrap: balance;
}
.ecktext {
  margin: 0;
  max-width: var(--breite-ecktext);
  font-size: 0.875rem; line-height: 1.3;
}
.untertitel {
  margin: 0;
  max-width: var(--breite-untertitel);
  font: 400 var(--untertitel)/1.4 var(--schrift-text);
}
.kapitelkopf { display: grid; gap: var(--r4); }
.kapitelkopf .etikett { color: var(--text); }
.messwert { margin: 0; display: grid; gap: var(--r2); }
.messwert .wert { font: 400 var(--headline)/1 var(--schrift-display); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }

/* Schleier unter Textzonen, wo die Szene zu hell wird (Kamerafahrt §4). Gesetzt nur nach Pixelprobe. */
.zone { position: relative; }
.zone.schleier::before {
  /* Seitlich höchstens um den Seitenrand überstehen: auf 390 px (Rand 16) schob der volle Überstand von 24 px die Seite
     um 8 px in die Breite. */
  content: ""; position: absolute; inset: calc(-1 * var(--r5)) calc(-1 * min(var(--r5), var(--rand))); z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--grund) 60%, transparent);
  mask-image:
    linear-gradient(to right, transparent, black var(--r5) calc(100% - var(--r5)), transparent),
    linear-gradient(to bottom, transparent, black var(--r5) calc(100% - var(--r5)), transparent);
  mask-composite: intersect;
}

/* Untertitel kommen und gehen mit dem Kapitelfortschritt. Versteckt wird erst, wenn das Skript die
   Fahrt übernommen hat (html.fahrt) — ohne Skript steht jeder Text da. */
html.fahrt .kapitel .tritt-auf {
  opacity: 0; transform: translateY(var(--r5));
  transition: opacity var(--zeit-ort) var(--kurve-raus), transform var(--zeit-ort) var(--kurve-raus);
}
html.fahrt .kapitel[data-sichtbar] .tritt-auf {
  opacity: 1; transform: none;
  transition: opacity var(--zeit-kommt) var(--kurve-ein), transform var(--zeit-kommt) var(--kurve-ein);
}

/* Buchstaben aus Unschärfe (TRIONN): je Zeichen 500 ms, 40 ms Versatz. */
.zeichen { display: inline-block; white-space: pre; }
html.fahrt .held:not([data-da]) .zeichen { opacity: 0; filter: blur(12px); }
.held[data-da] .zeichen {
  opacity: 1; filter: blur(0);
  transition: opacity var(--zeit-kommt) var(--kurve-ein), filter var(--zeit-kommt) var(--kurve-ein);
  transition-delay: calc(var(--i) * var(--zeit-zeichen));
}

/* ------------------------------------------------------------ Werkschau */

.werkliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r1); }
.werkliste button {
  display: grid; grid-template-columns: 3ch 1fr; gap: var(--r3); align-items: baseline;
  padding: var(--r1) 0; border: 0; background: none; text-align: start; cursor: pointer;
  color: var(--text-weich);
  transition: color var(--zeit-ort) var(--kurve-ort);
}
.werkliste button:hover, .werkliste button[aria-current="true"] { color: var(--text); }
.werkliste .art { color: var(--text-leise); }
.grossansicht {
  width: min(1200px, 100vw - 2 * var(--rand)); max-height: calc(100svh - 2 * var(--rand));
  padding: 0; border: 1px solid var(--glas-linie); border-radius: var(--radius-3);
  background: var(--flaeche); color: var(--text);
  overflow: hidden;
}
.grossansicht::backdrop { background: color-mix(in srgb, var(--grund) 80%, transparent); backdrop-filter: blur(var(--glas-blur)); }
.grossansicht figure { margin: 0; display: grid; }
/* height: auto, sonst bleibt die Höhe aus dem height-Attribut stehen und breite Bilder bekommen oben und unten Balken. */
.grossansicht img { width: 100%; height: auto; max-height: calc(100svh - 2 * var(--rand) - 120px); object-fit: contain; background: var(--grund); }
.grossansicht figcaption { padding: var(--r4) var(--r5); display: flex; flex-wrap: wrap; gap: var(--r2) var(--r5); justify-content: space-between; align-items: baseline; }
.grossansicht .herkunft { color: var(--text-leise); }
.grossansicht-zu { position: absolute; inset-block-start: var(--r3); inset-inline-end: var(--r3); }

/* ------------------------------------------------------------ Umschnitt (hell) */

.umschnitt {
  position: relative; z-index: 1;
  min-block-size: 200svh;
  background: var(--grund); color: var(--text);
  padding: calc(var(--kopf-mitte) * 2 + var(--r9)) var(--rand) var(--r9);
  display: grid; align-content: start; gap: var(--r9);
}
.umschnitt-kopf { display: grid; gap: var(--r4); max-width: 900px; }
.umschnitt h2 { margin: 0; font: 400 var(--plakat)/1 var(--schrift-display); letter-spacing: -0.01em; }
.umschnitt-kopf p { margin: 0; max-width: var(--breite-untertitel); font-size: var(--untertitel); line-height: 1.4; color: var(--text-weich); }
.leistungen { list-style: none; margin: 0; padding: 0; border-block-start: 1px dotted var(--linie-stark); }
.leistung {
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) minmax(0, 1.3fr); gap: var(--r5);
  padding-block: var(--r6);
  border-block-end: 1px dotted var(--linie-stark);
  align-items: baseline;
}
.leistung h3 { margin: 0; font: 400 clamp(1.75rem, 3vw, 2.75rem)/1 var(--schrift-display); }
.leistung p { margin: 0; color: var(--text-weich); max-width: 34em; }
.leistung .preis { justify-self: end; text-align: end; display: grid; gap: var(--r2); }
.leistung .betrag { font: 400 clamp(2.5rem, 5vw, 4.5rem)/1 var(--schrift-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.leistung .betrag small { font-size: 0.4em; }
.leistung .preis .etikett { color: var(--text-leise); }
.leistung .preis a { justify-self: end; }
.preis-umschalter { display: inline-flex; gap: var(--r1); justify-self: end; }
.preis-umschalter button {
  height: 30px; padding: 0 var(--r3); border: 1px solid var(--linie-stark); border-radius: var(--radius-pille);
  background: transparent; cursor: pointer;
}
.preis-umschalter button { color: var(--text-leise); border-color: var(--linie); }
.preis-umschalter button[aria-pressed="true"] { color: var(--text); border-color: var(--text); }
.grundgeruest-funktionen { color: var(--text-weich); }
.leistung-text { display: grid; gap: var(--r3); }
.merkmale { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--r1) var(--r4); color: var(--text-leise); }
/* Preisstufen der Skills: Name und Preis auf einer Linie, Inhalt und netto darunter */
.stufen { list-style: none; margin: 0; padding: 0; }
.stufen li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--r4); row-gap: 2px;
  padding-block: var(--r3); border-block-start: 1px dotted var(--linie);
}
.stufe-name { color: var(--text); }
.stufe-preis { justify-self: end; font: 400 1.5rem/1 var(--schrift-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stufe-inhalt { color: var(--text-weich); }
.stufe-netto { justify-self: end; color: var(--text-leise); white-space: nowrap; }

/* ------------------------------------------------------------ Handlung */

.handlung { block-size: auto; min-block-size: 100svh; position: relative; }
.handlung .rahmen { position: relative; min-block-size: 100svh; block-size: auto; grid-template-rows: auto 1fr auto; }
.anfrage {
  grid-area: ur; justify-self: end; align-self: end;
  width: min(460px, 100%);
  padding: var(--r5);
  background: var(--glas); border: 1px solid var(--glas-linie); border-radius: var(--radius-3);
  backdrop-filter: blur(var(--glas-blur)); -webkit-backdrop-filter: blur(var(--glas-blur));
  display: grid; gap: var(--r4);
  pointer-events: auto;
}
/* Schritte zum Ticket: Nummer und Satz auf einer Grundlinie, Fugen wie bei den Preisstufen */
.anfrage-schritte { list-style: none; margin: 0; padding: 0; }
.anfrage-schritte li {
  display: grid; grid-template-columns: 2.5em minmax(0, 1fr); column-gap: var(--r3); align-items: baseline;
  padding-block: var(--r3); border-block-start: 1px dotted var(--linie);
}
.anfrage-schritte .etikett { color: var(--text-leise); }
.anfrage .knopf { justify-self: start; }
.anfrage-notiz { margin: 0; color: var(--text-weich); font-size: 0.875rem; }

/* ------------------------------------------------------------ Fuß */

.fuss {
  position: relative; z-index: 1;
  min-block-size: 50svh;
  padding: var(--rand);
  display: flex; align-items: end;
}
.fuss-zeile {
  width: 100%;
  display: flex; flex-wrap: wrap; gap: var(--r3) var(--r6); justify-content: space-between; align-items: baseline;
  border-block-start: 1px solid var(--linie); padding-block-start: var(--r4);
}
.fuss nav { display: flex; flex-wrap: wrap; gap: var(--r2) var(--r5); }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ Cursor */

.zeiger { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.fahrt .zeiger {
    position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 40;
    display: flex; align-items: center; gap: 9px;
    pointer-events: none;
  }
  .zeiger-punkt { width: 13px; height: 13px; border-radius: 50%; background: var(--misch); mix-blend-mode: difference; }
  .zeiger-kapsel {
    padding: var(--r2) var(--r3); border: 1px solid var(--glas-linie); border-radius: var(--radius-pille);
    background: var(--glas); backdrop-filter: blur(var(--glas-blur));
    color: var(--text);
    opacity: 0; transition: opacity var(--zeit-ort) var(--kurve-ort);
  }
  .zeiger[data-verb] .zeiger-kapsel { opacity: 1; }
}

/* ------------------------------------------------------------ Mobil */

@media (max-width: 767px) {
  .kapitelanzeige { display: none; }
  .wortmarke { font-size: 1.125rem; padding-block: 11px; }
  .nur-breit { display: none; }
  .nur-schmal { display: inline; }
  .kopf { gap: var(--r2); }
  /* Werkliste als wischbarer Streifen: zehn Zeilen untereinander deckten auf 390 px die halbe Szene, und jede Zeile war
     mit 22 px kein Tippziel. Der Streifen nimmt Wischen an (pointer-events), senkrechtes Wischen scrollt weiter die Seite. */
  .werkliste {
    display: flex; gap: var(--r2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--rand)); padding: 0 var(--rand) var(--r1); scrollbar-width: none; pointer-events: auto;
  }
  .werkliste::-webkit-scrollbar { display: none; }
  .werkliste li { flex: none; scroll-snap-align: start; }
  .werkliste button {
    min-height: 44px; padding: 0 var(--r3); grid-template-columns: auto auto; align-items: center; white-space: nowrap;
    border: 1px solid var(--glas-linie); border-radius: var(--radius-pille); background: var(--glas); color: var(--text);
  }
  .werkliste .art { display: none; }
  .preis-umschalter button { height: 44px; padding: 0 var(--r4); }
  .fuss nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .fuss nav { gap: 0 var(--r4); }
  .rahmen {
    grid-template:
      "." 1fr
      "ol" auto
      "ur" auto
      "ul" auto
      "hinweis" auto / minmax(0, 1fr);
    gap: var(--r4);
  }
  .ecke-ur { justify-self: start; }
  .headline { font-size: 2.5rem; }
  .vorlader-zahl { font-size: 86px; }
  /* Höchstens 88 px; darunter mit der Breite kleiner, sonst sprengt ein langes Wort (TR „yaparım“) 320-px-Handys. */
  .umschnitt h2 { font-size: min(88px, 22vw); }
  .leistung { grid-template-columns: 1fr; gap: var(--r3); }
  .leistung .preis { justify-self: start; text-align: start; }
  .leistung .preis a, .preis-umschalter { justify-self: start; }
  /* Netto mit statt-Preis ist breiter als die Spalte; schmal steht er unter dem Inhalt über die volle Breite */
  .stufe-inhalt, .stufe-netto { grid-column: 1 / -1; }
  .stufe-netto { justify-self: start; white-space: normal; }
  .handlung .rahmen { grid-template: "." 30svh "ol" auto "ur" auto / 1fr; }
  .anfrage { justify-self: stretch; width: 100%; }
}

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

/* Ziehen gibt es nur mit Maus; auf Touch bleibt der Hinweis weg, statt etwas anzubieten, das nicht geht. */
@media (hover: none) {
  [data-ziehen-hinweis] { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  html.fahrt .kapitel .tritt-auf { transform: none !important; transition: opacity var(--zeit-ort) linear !important; }
  .held .zeichen { opacity: 1 !important; filter: none !important; }
}