/* ==========================================================================
   Wolter Digitalberatung — Stylesheet
   Fassung 3 (Feedback-Runde 4, 27.08.2026). Regeln: DESIGN.md im Projektstamm.

   Charakter: Werkprotokoll, wärmer erzählt. Heller Papiergrund, Blauschwarz-
   Tinte, Werkstatt-Orange als einzige Signalfarbe, dunkle "Bühnen" für alles,
   was gebaut wird. Runde 4 (Dominics Feedback): Mono-Labels sind abgelöst —
   Zeitstempel sprechen jetzt Serif-Kursiv, Eyebrows gesperrte Versalien.
   Jede Sektion bekommt einen eigenen Grund (Punktraster, Waschungen,
   Blaupausen-Raster, warme Bühne), damit die Seite beim Scrollen die
   Umgebung wechselt statt durchzulaufen.

   Die scrollcraft-Engine (assets/js/scrollcraft.js) liest data-sc-* und
   schreibt --sc-p (Fortschritt je Sektion) und --sc-canvas (Seitengrund).
   Dunkle Flächen sind IMMER Sektions-Hintergründe, nie Body-Drift —
   sonst schleppt der Grund die dunkle Farbe in die nächste Sektion
   (der Fehler aus Runde 1).
   ========================================================================== */

/* --- Schriften, lokal (DSGVO: kein Google-CDN) ---------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-var.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Grund: warmes Papier, zwei Stufen */
  --grund:        #FAFAF7;
  --grund-tief:   #F1F1EC;
  --flaeche:      #FFFFFF;

  /* Schrift: Blauschwarz-Familie (Kontraste gemessen, siehe DESIGN.md) */
  --tinte:        #16181D;   /* 16.9:1 auf --grund */
  --tinte-leise:  #4A4E58;   /*  8.0:1 */
  --tinte-still:  #62666F;   /*  5.5:1 */

  /* Linien */
  --linie:        #E3E2DC;
  --linie-stark:  #C9C8C0;

  /* Akzent: Werkstatt-Orange. Eine Signalfarbe, drei Aufgaben. */
  --akzent:       #C13B12;   /* Text + Knöpfe auf hellem Grund, 5.2:1 */
  --akzent-hell:  #A93210;   /* Hover */
  --akzent-voll:  #E4572E;   /* große Grafikflächen, Marker, Mockup-Elemente */
  --akzent-grund: #FBEAE3;   /* Flächen hinter Akzenttext */

  /* Dunkle Bühne: Mockups, Zusage, Footer */
  --buehne:        #14161B;
  --buehne-karte:  #1D2027;
  --buehne-tinte:  #F2F2EF;  /* 16.1:1 auf Bühne */
  --buehne-leise:  #A9AEB9;  /*  8.1:1 */
  --buehne-linie:  #2A2E37;
  --glut:          #FF6B3D;  /* Orange auf dunklem Grund, 6.4:1 */

  /* Formular-Hinweis */
  --hinweis:      #B02E0C;

  --f-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-text:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-mono:    ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
  /* Geräte-UI (Handy-Szenen): die Systemschrift des Nutzers = echtes Telefon */
  --f-ui:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --e: 8px;
  --breite:      1240px;
  --breite-text:  660px;
  --sektion:      136px;
  --rand:          32px;
  --radius:        10px;

  /* Startwert des Seitengrunds; die Engine bewegt ihn nur in der hellen Familie */
  --sc-canvas: #FAFAF7;
}

@media (max-width: 800px) {
  :root { --sektion: 80px; --rand: 20px; }
}

/* --- Grundlagen ----------------------------------------------------------- */

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

html { scroll-behavior: smooth; background: var(--grund); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sc-canvas, var(--grund));
  color: var(--tinte);
  font-family: var(--f-text);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); }
/* Runde 6: Überschriften bekommen ein Maß. Vorher liefen sie über die volle
   Bahnbreite (1240 px) und standen damit neben einem 45-Zeichen-Absatz —
   genau der Bruch, den Dominic als "Anordnung sieht nicht schön aus" gemeldet
   hat. 14em auf der H2-Größe sind rund 22 Zeichen je Zeile: zwei bis drei
   ruhige Zeilen statt einer Bandwurmzeile. */
h2 { font-size: clamp(1.875rem, 3.8vw, 3rem); max-width: 14em; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }

p { margin: 0 0 1.1em; max-width: 34em; }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent); text-underline-offset: 3px; }
a:hover { color: var(--akzent-hell); }

strong { font-weight: 600; }

/* Das kursive Serif-Akzentwort in Überschriften: Handwerk im Satzbild.
   Runde 4: mit warmem Glut-Verlauf statt flacher Farbe — das Wort glimmt. */
.wort {
  font-family: var(--f-text);
  font-style: italic;
  font-weight: 400;
  font-size: 1.04em;
  letter-spacing: -0.01em;
  color: var(--akzent);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wort {
    background-image: linear-gradient(112deg, var(--akzent-voll) 8%, var(--akzent) 55%, #96280B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .sektion--nacht .wort {
    background-image: linear-gradient(112deg, #FF8A5C 5%, var(--glut) 60%, #E4572E 100%);
  }
}
.sektion--nacht .wort { color: var(--glut); }

/* Marker-Sweep: oranger Balken legt sich hinter ein Schlüsselwort.
   Gezogen wird er von .sc-in (Flow) oder direkt (Hero-Keyframes). */
.mark {
  position: relative;
  white-space: nowrap;
}
.mark::before {
  content: "";
  position: absolute;
  inset: 0.08em -0.14em -0.04em;
  background: var(--akzent-voll);
  opacity: 0.22;
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: -1;
}
.sc-in .mark::before,
.mark.sc-in::before { transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 250ms; transform: scaleX(1); }
html:not(.bewegung) .mark::before { transform: scaleX(1); }

/* Handgezeichnete Unterstreichung unter Akzentwörtern: zeichnet sich, wenn
   die Überschrift eintritt (Kringel-Familie, gleiche Feder wie .kringel). */
.wort--strich { position: relative; white-space: nowrap; }
.wort--strich svg {
  position: absolute;
  left: -0.06em; right: -0.06em; bottom: -0.04em;
  width: calc(100% + 0.12em);
  height: 0.26em;
  overflow: visible;
  pointer-events: none;
}
.wort--strich path {
  fill: none;
  stroke: var(--akzent-voll);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.sc-in .wort--strich path {
  transition: stroke-dashoffset 640ms cubic-bezier(0.23, 1, 0.32, 1) 420ms;
  stroke-dashoffset: 0;
}
html:not(.bewegung) .wort--strich path { stroke-dashoffset: 0; }

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

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

/* --- Bausteine ------------------------------------------------------------ */

.bahn {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.sektion { padding-block: var(--sektion); }

.sektion--nacht {
  background: var(--buehne);
  color: var(--buehne-tinte);
  border-radius: clamp(14px, 2vw, 22px);
  max-width: min(calc(100% - 2 * clamp(8px, 1.6vw, 20px)), 1560px);
  margin-inline: auto;
}
.sektion--nacht h2, .sektion--nacht h3 { color: var(--buehne-tinte); }

/* Eyebrow: gesperrte Versalien mit Orange-Strich — ruhig und edel
   (Runde 4: Mono abgelöst, Dominic fand die Maschinenschrift billig) */
.marke {
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinte-still);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: none;
}
.marke::before {
  content: "";
  width: 24px; height: 2px;
  border-radius: 2px;
  background: var(--akzent-voll);
  flex-shrink: 0;
}
.sektion--nacht .marke { color: var(--buehne-leise); }
.sektion--nacht .marke::before { background: var(--glut); }

.vorspann {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--tinte-leise);
  max-width: 42ch;
  margin-top: 1.5rem;
  text-wrap: pretty;
}

/* --- Sektionskopf: drei Anordnungen statt einer -------------------------- */
/* Runde 6. Bis dahin sah jeder Sektionskopf gleich aus: Eyebrow, Überschrift
   über die volle Breite, darunter ein schmaler Serif-Absatz. Drei Varianten
   geben der Seite beim Scrollen Rhythmus, ohne neue Bausteine zu erfinden. */
.kopfblock { max-width: 100%; }
.kopfblock > .vorspann { margin-top: 1.6rem; }

/* Zwei Spalten: Überschrift links, Einordnung rechts. Für Sektionen, unter
   denen ohnehin ein breites Raster folgt (Preistafel, Bilder, Klartext). */
.kopfblock--zwei {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: end;
}
.kopfblock--zwei h2 { max-width: 11em; }
.kopfblock__neben > .vorspann { margin-top: 0; }
.kopfblock__neben > .vorspann + .kopfblock__satz { margin-top: 1rem; }
.kopfblock__satz {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinte-still);
  max-width: 40ch;
  padding-left: 1.1rem;
  border-left: 2px solid var(--linie-stark);
}
@media (max-width: 900px) {
  .kopfblock--zwei { grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
  .kopfblock--zwei h2 { max-width: 14em; }
}

/* Mittig: für Sektionen, die eine eigene Bühne aufmachen (Methode, Ablauf,
   Fragen). Der Eyebrow-Strich wandert dabei auf beide Seiten. */
.kopfblock--mitte { text-align: center; }
.kopfblock--mitte .marke { justify-content: center; }
.kopfblock--mitte .marke::after {
  content: "";
  width: 24px; height: 2px; border-radius: 2px;
  background: var(--akzent-voll); flex-shrink: 0;
}
.kopfblock--mitte h2 { margin-inline: auto; max-width: 15em; }
.kopfblock--mitte .vorspann { margin-inline: auto; max-width: 52ch; }
.sektion--nacht .kopfblock--mitte .marke::after { background: var(--glut); }
.sektion--nacht .vorspann { color: var(--buehne-leise); }

/* Etikett: kleine Beschriftung (Zeiten, Kennzeichnungen) */
.etikett {
  font-family: var(--f-display);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-still);
}

/* --- Schaltflächen -------------------------------------------------------- */

/* Runde 4: Knöpfe mit Werkstück-Tiefe — feiner Lichtrand oben, Schatten
   unten, Glut-Schein unter dem Hauptknopf, Pfeil, der beim Zeigen zieht. */
.knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.85rem 1.85rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: clip;
  transition: background-color 180ms ease, transform 180ms cubic-bezier(0.23, 1, 0.32, 1),
              border-color 180ms ease, box-shadow 260ms cubic-bezier(0.23, 1, 0.32, 1);
}

.knopf__pfeil {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.knopf__pfeil svg {
  width: 15px; height: 15px;
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1);
}
.knopf:hover .knopf__pfeil svg { transform: translateX(4px); }
.knopf:hover .knopf__pfeil--runter svg { transform: translateY(4px); }

/* Lichtstreif: läuft beim Zeigen einmal über den Hauptknopf */
.knopf--haupt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .knopf--haupt:hover::after { transition: transform 640ms cubic-bezier(0.33, 0, 0.2, 1); transform: translateX(120%); }
}

.knopf--haupt {
  background: linear-gradient(180deg, #DB4C1E 0%, var(--akzent) 52%, #AC3009 100%);
  color: #FFFFFF;
  border-color: #9C2B08;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 2px 5px rgba(150, 40, 11, 0.22),
    0 12px 26px -12px rgba(193, 59, 18, 0.55);
}
.knopf--haupt:hover {
  background: linear-gradient(180deg, #E45524 0%, #C9400F 52%, #B23009 100%);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 3px 7px rgba(150, 40, 11, 0.24),
    0 18px 36px -12px rgba(193, 59, 18, 0.6);
}

.knopf--neben {
  background: #FFFFFF;
  border-color: var(--linie-stark);
  color: var(--tinte);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 3px rgba(22, 24, 29, 0.07),
    0 10px 24px -16px rgba(22, 24, 29, 0.28);
}
.knopf--neben:hover {
  border-color: var(--tinte-still);
  color: var(--tinte);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 5px rgba(22, 24, 29, 0.08),
    0 16px 32px -16px rgba(22, 24, 29, 0.34);
}

.knopf--hell {
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F2ED 100%);
  color: var(--tinte);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 14px 34px -14px rgba(255, 107, 61, 0.4);
}
.knopf--hell:hover {
  background: #FFFFFF;
  color: var(--tinte);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 8px rgba(0, 0, 0, 0.4),
    0 20px 44px -14px rgba(255, 107, 61, 0.5);
}

/* Druckpunkt: jeder Knopf antwortet auf den Klick wie eine echte Taste */
.knopf:active { transform: translateY(0) scale(0.985); }

@media (max-width: 480px) {
  .knopf { padding-inline: 1.4rem; font-size: 1rem; }
}

.knopf-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 2rem;
}

.reibung {
  font-family: var(--f-display);
  font-size: 0.9375rem;
  color: var(--tinte-still);
  margin-top: 1rem;
}
.sektion--nacht .reibung { color: var(--buehne-leise); }

/* --- Kopfzeile ------------------------------------------------------------ */

.kopf {
  position: sticky;
  top: 0;
  z-index: 70;
  padding-block: 10px;
  background: transparent;
  transition: padding-block 340ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 340ms cubic-bezier(0.23, 1, 0.32, 1);
}
.kopf[data-versteckt="ja"] { transform: translateY(-100%); }

/* Die Leiste ist ein eigenes Werkstueck, kein Streifen auf dem Papier: sie
   schwebt mit Rand, Radius und geschichtetem Schatten darueber -- dieselbe
   Schattensprache wie Knoepfe und Geraeterahmen. Beim Scrollen rueckt sie
   enger zusammen, der Grund wird dichter und der Schatten tiefer, damit sie
   sich vom durchlaufenden Inhalt abhebt. */
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
  width: calc(100% - 1.25rem);
  border: 1px solid var(--linie);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(22, 24, 29, 0.05),
    0 14px 30px -20px rgba(22, 24, 29, 0.4);
  transition: min-height 340ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 260ms ease, border-color 260ms ease,
              box-shadow 260ms ease;
}
.kopf[data-gescrollt="ja"] { padding-block: 8px; }
.kopf[data-gescrollt="ja"] .kopf__innen {
  min-height: 58px;
  background: rgba(255, 255, 255, 0.93);
  border-color: var(--linie-stark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 5px rgba(22, 24, 29, 0.07),
    0 20px 44px -22px rgba(22, 24, 29, 0.5);
}

.logo {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--tinte);
  text-decoration: none;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.logo__zeichen {
  /* Das W der Wortmarke. Hoehe = 1,15em, damit die Versalhoehe des Zeichens
     auf der Oberlaenge von Archivo sitzt; vertical-align holt die Grundlinie
     zurueck, weil die unteren Messpunkte 7,5 von 153 Einheiten darunter haengen. */
  /* Kasten 180,3 x 106,6 Einheiten, 100 Einheiten = Oberlaenge von Archivo.
     Hoehe also 1,066 x 0,75em. Die Grundlinie liegt exakt auf der
     Kastenunterkante, deshalb braucht es kein vertical-align.
     Der negative Rand holt die 7,8 % Kastenbreite zurueck, um die im Original
     das "o" unter die rechte Spitze des W rueckt. */
  height: 0.8em;
  width: auto;
  vertical-align: baseline;
  margin-right: -0.106em;
  color: var(--akzent);
  flex: none;
}
.logo b span {
  display: block;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinte-still);
  margin-top: 2px;
}
.logo > b { display: block; font-weight: 700; }

.kopf__aktion { display: flex; align-items: center; gap: 1.25rem; }

.kopf__tel {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--tinte);
  text-decoration: none;
}
.kopf__tel:hover { color: var(--akzent); }

@media (max-width: 620px) {
  .kopf__tel { display: none; }
  .kopf .knopf { padding-inline: 0.95rem; font-size: 0.9375rem; min-height: 44px; }
}

/* ==========================================================================
   1 · HERO — Das Versprechen links, der Werkplatz rechts
   Runde 4: Dominics ursprüngliches Bild ist zurück (sein Wunsch). Es steht
   als tief geschattete, warm hinterleuchtete Bühne im Punktraster; der
   48h-Stempel kippt nach dem Laden ein, beim Scrollen fährt die Bühne
   leicht davon. Das "48 Stunden" glimmt und unterstreicht sich von Hand.
   ========================================================================== */

.hero {
  position: relative;
  overflow: clip;
  /* Feines Punktraster, kaum sichtbar: technisches Papier */
  background-image: radial-gradient(circle, rgba(22, 24, 29, 0.075) 1px, transparent 1.2px);
  background-size: 26px 26px;
}
.hero::after {
  /* Das Raster läuft nach unten aus, damit die nächste Sektion sauber ansetzt */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 200px;
  background: linear-gradient(180deg, transparent, var(--grund));
  pointer-events: none;
}

.hero__innen {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(72px, 11vh, 128px) clamp(80px, 12vh, 140px);
}

.hero h1 { max-width: none; font-size: clamp(2.375rem, 4.4vw, 3.9375rem); }
.hero h1 .wort { white-space: nowrap; }

.hero__unter {
  font-size: clamp(1.125rem, 1.9vw, 1.3125rem);
  color: var(--tinte-leise);
  margin-top: 1.5rem;
  max-width: 30ch;
  text-wrap: pretty;
}

/* Drei Belege als UI-Chips: sehen aus wie Bestandteile des Produkts */
.hero__belege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2.25rem;
  padding: 0;
  list-style: none;
}
.hero__belege li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  border: 1px solid var(--linie-stark);
  background: var(--flaeche);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tinte-leise);
}
.hero__belege b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--akzent);
}

/* --- Die Bühne: der Werkplatz ---------------------------------------------
   Das Bild steht wie ein gerahmter Druck auf dem Papier: warmer Schein
   dahinter, Lichtkante oben, tiefer weicher Schatten, Stempel obenauf. */

.hero__buehne { position: relative; }

.hero__buehne::before {
  content: "";
  position: absolute;
  inset: -10% -12% -16%;
  background: radial-gradient(68% 60% at 60% 42%, rgba(228, 87, 46, 0.14), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.hero__bild {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 14px;
  overflow: clip;
  aspect-ratio: 10 / 8.4;
  box-shadow:
    0 1px 2px rgba(22, 24, 29, 0.12),
    0 14px 30px -14px rgba(22, 24, 29, 0.3),
    0 44px 88px -36px rgba(22, 24, 29, 0.5);
  outline: 1px solid rgba(22, 24, 29, 0.12);
  outline-offset: -1px;
}
.hero__bild::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 34%;
}

/* Browser-Chrome-Bausteine (leben in den Arbeiten-Bühnen weiter) */
.mock__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--buehne-linie); }
.mock__punkt:first-child { background: var(--glut); opacity: 0.85; }
.mock__url {
  font-family: var(--f-mono);
  font-size: 0.71rem;
  letter-spacing: 0.03em;
  color: var(--buehne-leise);
  background: var(--buehne-karte);
  border-radius: 5px;
  padding: 3px 10px;
  margin-left: 8px;
}

/* Der Stempel: kippt ein, sobald die Bühne steht */
.stempel {
  position: absolute;
  right: clamp(-16px, -1.2vw, -10px);
  bottom: clamp(22px, 3.2vw, 38px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--tinte);
  color: #FFFFFF;
  border-radius: 10px;
  padding: 0.66rem 1.05rem;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 36px -14px rgba(22, 24, 29, 0.6);
  transform: rotate(-2deg);
  margin: 0;
}
.stempel b { font-weight: 700; color: var(--glut); letter-spacing: 0; }
.stempel__haken {
  display: grid;
  place-items: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--glut);
  color: var(--buehne);
  flex-shrink: 0;
}
.stempel__haken svg { width: 11px; height: 11px; }

/* Eintritt: Bühne blendet ein, das Bild fährt ganz leicht zurück (Ken Burns),
   der Stempel kippt zum Schluss. Ohne .bewegung steht alles sofort. */
@keyframes hero-kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes m-stempel {
  0%   { opacity: 0; transform: rotate(-2deg) scale(0.6); }
  70%  { opacity: 1; transform: rotate(-2deg) scale(1.06); }
  100% { opacity: 1; transform: rotate(-2deg) scale(1); }
}
.bewegung .hero__bild img { animation: hero-kenburns 2400ms cubic-bezier(0.23, 1, 0.32, 1) 260ms both; }
.bewegung .stempel { animation: m-stempel 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 1500ms both; }

/* Text-Choreografie links (einmalig). Die Zeilenfenster lassen unten Platz,
   damit die handgezeichnete Unterstreichung nicht beschnitten wird. */
.h-zeile { display: block; overflow: hidden; padding-bottom: 0.26em; margin-bottom: -0.26em; }
.h-zeile__i { display: inline-block; }
@keyframes zeile-auf { from { transform: translateY(140%); } to { transform: translateY(0); } }
@keyframes einblenden { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes strich-ziehen { to { stroke-dashoffset: 0; } }

.bewegung .hero .h-zeile__i {
  transform: translateY(140%);
  animation: zeile-auf 740ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.bewegung .hero .h-zeile:nth-of-type(2) .h-zeile__i { animation-delay: 120ms; }
.bewegung .hero .marke       { animation: einblenden 520ms cubic-bezier(0.23, 1, 0.32, 1) 40ms both; }
.bewegung .hero__unter       { animation: einblenden 560ms cubic-bezier(0.23, 1, 0.32, 1) 380ms both; }
.bewegung .hero .knopf-zeile { animation: einblenden 560ms cubic-bezier(0.23, 1, 0.32, 1) 520ms both; }
.bewegung .hero__belege li:nth-child(1) { animation: einblenden 480ms ease-out 720ms both; }
.bewegung .hero__belege li:nth-child(2) { animation: einblenden 480ms ease-out 840ms both; }
.bewegung .hero__belege li:nth-child(3) { animation: einblenden 480ms ease-out 960ms both; }
.bewegung .hero__bild { animation: einblenden 720ms cubic-bezier(0.23, 1, 0.32, 1) 260ms both; }

/* Die Unterstreichung unter "48 Stunden" zeichnet sich, sobald die Zeile steht */
.bewegung .hero .wort--strich path {
  animation: strich-ziehen 680ms cubic-bezier(0.23, 1, 0.32, 1) 1050ms forwards;
}

/* Beim Scrollen kippt die Bühne leicht weg (Fahrt über --sc-p vom Hero-Act) */
.bewegung .hero__buehne {
  transform:
    translateY(calc(var(--sc-p, 0) * -3vh))
    rotate(calc(var(--sc-p, 0) * -1.2deg));
  will-change: transform;
}

@media (max-width: 960px) {
  .hero__innen { grid-template-columns: 1fr; gap: 3rem; padding-block: clamp(56px, 8vh, 96px) 72px; }
  .hero__buehne { max-width: 560px; }
  .hero__bild { aspect-ratio: 10 / 7.6; }
  .stempel { right: 6px; }
}

/* --- Runde 5: auf dem Desktop trägt das Bild die ganze Breite -------------
   Dominics Wunsch (28.08.2026). Der Werkplatz läuft randlos über den Schirm,
   der Text sitzt links auf einem Papier-Schleier. Rahmen, Glut-Schein und
   das Bühnen-Kippen entfallen hier: ein Vollbild würde sonst seine Kanten
   zeigen. Unter 961px bleibt alles wie gehabt, gerahmter Druck unter dem
   Text, weil ein Vollbild auf dem Handy den Text erdrückt.
   Die Komposition trägt das: Dominic sitzt im rechten Drittel und schaut
   nach links, also in die Headline hinein. Der Schleier deckt nur Fenster
   und Fassade ab, nie ihn. */

@media (min-width: 1200px) {
  .hero {
    /* Die Textkante: linker Bahnrand plus die Breite der Textspalte. Der
       Schleier hängt daran und nicht an Prozenten, sonst rutscht er bei
       schmalen Fenstern unter die Headline und der Kontrast bricht weg. */
    --textkante: calc(max(0px, (100vw - var(--breite)) / 2) + var(--rand) + 36rem);
    min-height: clamp(620px, 88svh, 940px);
    display: grid;
    align-items: center;
  }

  /* Die Bahn gibt ihre Positionierung ab, damit das Bild gegen die Sektion
     misst und nicht gegen die 1200er-Bahn. */
  .hero__innen {
    position: static;
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
    padding-block: clamp(88px, 13vh, 148px);
  }
  .hero__text { position: relative; z-index: 1; max-width: 36rem; }
  .hero__unter { max-width: 32ch; }

  .hero__buehne { position: absolute; inset: -4% -3%; z-index: 0; }
  .hero__buehne::before,
  .hero__buehne::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* Der Schleier: links deckendes Papier, nach rechts gibt er das Bild frei.
     Unten läuft er in den Grund aus, damit die nächste Sektion sauber ansetzt. */
  .hero__buehne::before {
    z-index: 1;
    background:
      linear-gradient(180deg, transparent 74%, var(--grund) 100%),
      linear-gradient(93deg,
        var(--grund) 0,
        var(--grund) calc(var(--textkante) + 1.5rem),
        rgba(250, 250, 247, 0.62) calc(var(--textkante) + 8rem),
        rgba(250, 250, 247, 0.18) calc(var(--textkante) + 13rem),
        rgba(250, 250, 247, 0) calc(var(--textkante) + 17rem));
  }

  /* Das Punktraster läuft über den Schleier weiter. Ohne das wirkt die linke
     Hälfte wie eine leere Fläche statt wie das Papier der Seite. */
  .hero__buehne::after {
    z-index: 2;
    background: radial-gradient(circle, rgba(22, 24, 29, 0.075) 1px, transparent 1.2px) 0 0 / 26px 26px;
    -webkit-mask-image: linear-gradient(93deg, #000 0, #000 calc(var(--textkante) - 4rem), rgba(0, 0, 0, 0.4) calc(var(--textkante) + 3rem), transparent calc(var(--textkante) + 9rem));
            mask-image: linear-gradient(93deg, #000 0, #000 calc(var(--textkante) - 4rem), rgba(0, 0, 0, 0.4) calc(var(--textkante) + 3rem), transparent calc(var(--textkante) + 9rem));
  }

  .hero__bild {
    position: absolute;
    inset: 0;
    z-index: 0;            /* unter den Schleier, sonst deckt das Bild ihn zu */
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    outline: none;
  }
  .hero__bild::after { display: none; }
  .hero__bild img { object-position: 100% 36%; }

  /* Der Stempel steht jetzt frei im Bild, unten rechts */
  .stempel {
    z-index: 3;
    right: clamp(88px, 9vw, 168px);
    bottom: clamp(76px, 11svh, 148px);
  }

  /* Kein Kippen mehr, nur eine ruhige Fahrt nach oben */
  .bewegung .hero__buehne { transform: translateY(calc(var(--sc-p, 0) * -2.4vh)); }
}

/* ==========================================================================
   2 · DER SATZ — zentrierte Großtypografie mit Scrub-Füllung
   ========================================================================== */

.satz { text-align: center; }
.satz .bahn { max-width: 1000px; }

.satz__fluss {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4.6vw, 3.25rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
  margin: 0 auto;
  max-width: 16em;
  text-wrap: balance;
  color: var(--tinte);
  /* Füllgrad: während die Sektion durchläuft, schreibt sich der Satz voll */
  --k: clamp(0, calc((var(--sc-p, 1) - 0.18) / 0.34), 1);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .satz__fluss {
    background-image: linear-gradient(102deg, var(--tinte) 0 44%, #CDCCC4 56% 100%);
    background-size: 240% 100%;
    background-repeat: no-repeat;
    background-position-y: 0;
    background-position-x: calc((1 - var(--k)) * 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.satz__quelle {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.9vw, 1.25rem);
  line-height: 1.6;
  color: var(--tinte-leise);
  margin: 2.75rem auto 0;
  max-width: 34em;
}

/* Der handgezeichnete Kringel um "meine Bewerbung": zeichnet sich beim
   Scrollen (stroke-dashoffset über --sc-p der Sektion). */
.kringel {
  position: relative;
  white-space: nowrap;
  color: var(--tinte);
  font-weight: 600;
}
.kringel svg {
  position: absolute;
  inset: -0.42em -0.55em -0.5em;
  width: calc(100% + 1.1em);
  height: calc(100% + 0.92em);
  overflow: visible;
  pointer-events: none;
}
.kringel path {
  fill: none;
  stroke: var(--akzent-voll);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--sc-p, 1) - 0.52) / 0.26), 1));
}
html:not(.bewegung) .kringel path { stroke-dashoffset: 0; }

/* ==========================================================================
   3 · WARUM — So entscheidet Ihr nächster Kunde
   Gepinnte Bühne: links wandert die Erzählung, rechts spielt ein Handy
   die vier Szenen durch (Empfehlung → Google → Bauchurteil → Anruf).
   Ohne Bewegung: vier Karten untereinander, alles lesbar.
   ========================================================================== */

/* Eigener Grund für die ganze Bühne: tieferes Papier mit warmer Waschung
   oben rechts (hinter dem Handy) und kühlem Schatten unten links. */
.warum {
  background:
    radial-gradient(58rem 42rem at 86% 16%, rgba(228, 87, 46, 0.1), transparent 62%),
    radial-gradient(46rem 36rem at 2% 94%, rgba(22, 24, 29, 0.055), transparent 58%),
    var(--grund-tief);
}

.warum__stage { position: relative; }

.bewegung .warum [data-sc-stage] {
  height: 100vh;
  height: 100svh;
  overflow: clip;
  display: flex;
  align-items: center;
}

.warum__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  width: 100%;
}

.warum__links h2 { max-width: 12em; }

.warum__texte { position: relative; margin-top: 2.5rem; min-height: 9.5em; }
.bewegung .warum__texte > p { position: absolute; inset-inline: 0; top: 0; margin: 0; }

.warum__texte > p {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 2vw, 1.4375rem);
  line-height: 1.45;
  color: var(--tinte-leise);
  max-width: 30em;
}
.warum__texte > p strong { color: var(--tinte); font-weight: 600; }
/* Die Zeitstempel der Erzählung: Serif-Kursiv, wie mit der Hand notiert
   (Runde 4: Mono war Dominic zu technisch), mit feiner Auslauflinie. */
.warum__schrittzahl {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--f-text);
  font-style: italic;
  font-size: 1.1875rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--akzent);
  margin-bottom: 0.7rem;
}
.warum__schrittzahl::after {
  content: "";
  flex: 0 1 3.2em;
  height: 1px;
  background: linear-gradient(90deg, rgba(193, 59, 18, 0.45), transparent);
}

/* --- Die Geisterziffern: nummerieren die vier Momente hinter dem Handy --- */
.warum__buehne { position: relative; }
.warum__geist {
  position: absolute;
  inset: -6% 0;
  z-index: 0;
  pointer-events: none;
  display: none;
}
.bewegung .warum__geist { display: block; }
.warum__geist span {
  position: absolute;
  top: 50%; left: 0;
  transform: translate(-40%, -50%);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(260px, 34vw, 460px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(193, 59, 18, 0.2);
  opacity: var(--gz, 0);
}
.bewegung .warum__geist [data-geist="1"] { --gz: clamp(0, calc((0.27 - var(--sc-p, 0)) / 0.045), 1); }
.bewegung .warum__geist [data-geist="2"] { --gz: min(1, clamp(0, calc((var(--sc-p, 0) - 0.27) / 0.045), 1) * clamp(0, calc((0.52 - var(--sc-p, 0)) / 0.045), 1)); }
.bewegung .warum__geist [data-geist="3"] { --gz: min(1, clamp(0, calc((var(--sc-p, 0) - 0.52) / 0.045), 1) * clamp(0, calc((0.76 - var(--sc-p, 0)) / 0.045), 1)); }
.bewegung .warum__geist [data-geist="4"] { --gz: clamp(0, calc((var(--sc-p, 0) - 0.76) / 0.045), 1); }

/* --- Das Handy ------------------------------------------------------------ */

/* Der Rahmen: Titan-Kante mit Lichtsaum, Seitentasten, tiefer Bodenschatten */
.warum__handy {
  position: relative;
  z-index: 1;
  width: min(332px, 84%);
  margin-inline: auto;
  aspect-ratio: 390 / 800;
  background: linear-gradient(150deg, #4A4E57 0%, #23252B 28%, #16181D 62%, #2E3138 100%);
  border-radius: clamp(40px, 5vw, 54px);
  padding: clamp(10px, 1.2vw, 13px);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.16),
    inset 0 0 0 4px rgba(0, 0, 0, 0.65),
    0 2px 5px rgba(22, 24, 29, 0.24),
    0 24px 48px -18px rgba(22, 24, 29, 0.4),
    0 52px 100px -36px rgba(22, 24, 29, 0.55);
}

/* Seitentasten: links Lautstärke (zwei), rechts die Standby-Taste */
.handy__tasten {
  position: absolute;
  left: -2.5px;
  top: 25%;
  width: 3px;
  height: 34px;
  border-radius: 2px;
  background: linear-gradient(90deg, #55595F, #26282E);
  box-shadow: 0 46px 0 0 #3A3D44;
}
.warum__handy::before {
  content: "";
  position: absolute;
  right: -2.5px;
  top: 30%;
  width: 3px;
  height: 58px;
  border-radius: 2px;
  background: linear-gradient(90deg, #26282E, #55595F);
}

.warum__schirm {
  position: relative;
  width: 100%; height: 100%;
  border-radius: clamp(30px, 3.8vw, 42px);
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.35);
}

/* Statusleiste + Dynamic Island: liegen über allen Szenen */
.schirm__status {
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(11px, 1.4vw, 14px) clamp(18px, 2.4vw, 24px) 0;
  pointer-events: none;
  color: var(--tinte);
}
.status__zeit {
  font-family: var(--f-ui);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  min-width: 3.2em;
}
.status__insel {
  position: absolute;
  left: 50%;
  top: clamp(11px, 1.4vw, 14px);
  transform: translateX(-50%);
  width: 31%;
  height: clamp(15px, 1.9vw, 19px);
  border-radius: 999px;
  background: #050608;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.08);
}
.status__insel::after {
  /* Kameralinse in der Insel */
  content: "";
  position: absolute;
  right: 9%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(7px, 0.9vw, 9px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #2E3644 0%, #10131A 52%, #05070B 100%);
}
.status__symbole {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.status__symbole svg { display: block; }
.s-netz { width: 17px; height: 11px; }
.s-wlan { width: 15px; height: 11px; }
.s-akku { width: 24px; height: 12px; }

/* Die weiße Kopie der Statusleiste blendet mit der dunklen Anruf-Szene ein */
.schirm__status--hell {
  color: #FFFFFF;
  z-index: 5;
  opacity: 0;
}
/* Runde 9: Die dunkle Leiste ist ganz weg, bevor die helle anfaengt. Sonst
   standen kurz zwei Uhrzeiten uebereinander (19:04 und 19:07). */
/* Der Anrufschirm deckt die Statusleiste erst am Ende seiner Fahrt zu.
   Genau dort wechselt sie, und zwar nacheinander: erst geht die dunkle,
   dann kommt die helle. Sonst standen kurz zwei Uhrzeiten übereinander. */
.bewegung .schirm__status--hell { opacity: clamp(0, calc((var(--sc-p, 0) - 0.79) / 0.008), 1); }
.bewegung .schirm__status:not(.schirm__status--hell) { opacity: clamp(0, calc((0.786 - var(--sc-p, 0)) / 0.008), 1); }

/* Glasglanz und Home-Balken */
.schirm__glanz {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 16%, transparent 34%);
  pointer-events: none;
}
.schirm__heim {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 4px;
  border-radius: 999px;
  background: rgba(126, 130, 140, 0.85);
  z-index: 6;
  pointer-events: none;
}

/* Szenen: übereinander, Fenster aus --sc-p (nur mit .bewegung) */
.szene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(2.6rem, 4vw, 3.1rem) clamp(0.9rem, 1.6vw, 1.2rem) clamp(1.4rem, 2vw, 1.7rem);
  gap: 0.6rem;
}
/* Runde 9: Die Szenen blenden nicht mehr, sie schieben. Eine Blende mischt
   zwei Bilder, und genau das war zu sehen — die alte App schimmerte durch die
   neue. Ein Schub kann das nicht: Die neue Szene ist deckend und kommt von
   der Seite, wie in jeder App der Welt. Der Anruf steigt von unten auf,
   weil ein Anruf so kommt. */
.bewegung .szene { opacity: 1; }
.bewegung .szene[data-szene="2"],
.bewegung .szene[data-szene="3"] { transform: translateX(calc((1 - var(--sz, 1)) * 101%)); }
.bewegung .szene[data-szene="4"] { transform: translateY(calc((1 - var(--sz, 1)) * 101%)); }

/* Runde 9. Vorher blendete jede Szene wieder aus, wenn die naechste kam, und
   keine hatte einen eigenen Grund: Zwischen zwei Schritten sah man durch die
   halbdurchsichtige neue Szene hindurch auf die Nachrichten-App darunter.

   Jetzt gilt zweierlei. Jede Szene traegt ihren eigenen, deckenden App-Grund
   (weiter unten, Abschnitt 10.1), und keine blendet mehr aus: Sie kommt dazu
   und bleibt liegen. Die spaetere Szene steht im Dokument hinter der
   frueheren, deckt sie also vollstaendig ab. Rueckwaerts geblaettert loest
   sich die obere wieder auf und gibt die darunter frei. */
.bewegung .szene[data-szene="1"] { --sz: 1; }
.bewegung .szene[data-szene="2"] { --sz: clamp(0, calc((var(--sc-p, 0) - 0.25) / 0.05), 1); }
.bewegung .szene[data-szene="3"] { --sz: clamp(0, calc((var(--sc-p, 0) - 0.50) / 0.05), 1); }
.bewegung .szene[data-szene="4"] { --sz: clamp(0, calc((var(--sc-p, 0) - 0.74) / 0.05), 1); }

/* Szene 1: iMessage. Kopfzeile wie im echten Nachrichten-Verlauf,
   graue Empfangsblasen, blaue Sendeblase, keine Rahmen. */
.app__kopf {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: -0.4rem -0.35rem 0.4rem;
  padding: 0.35rem 0.35rem 0.55rem;
  border-bottom: 0.5px solid rgba(60, 60, 67, 0.18);
}
.app__zurueck { width: 9px; height: 15px; color: #0A7CFF; flex-shrink: 0; }
.app__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, #A6ACBA, #8B92A3);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-family: var(--f-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}
.app__wer { display: flex; flex-direction: column; line-height: 1.15; }
.app__wer b { font-family: var(--f-ui); font-size: 0.8125rem; font-weight: 600; color: var(--tinte); }
.app__wer i { font-style: normal; font-family: var(--f-ui); font-size: 0.625rem; color: rgba(60, 60, 67, 0.6); }

.chat__datum {
  font-family: var(--f-ui);
  font-size: 0.625rem;
  font-weight: 500;
  color: rgba(60, 60, 67, 0.6);
  text-align: center;
  margin: 0 0 0.2rem;
  max-width: none;
}

.blase {
  max-width: 84%;
  border-radius: 17px;
  border-bottom-left-radius: 5px;
  padding: 0.52rem 0.75rem;
  font-family: var(--f-ui);
  font-size: clamp(0.8125rem, 1.35vw, 0.9375rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.35;
  background: #E9E9EB;
  color: #111214;
}
.blase--rechts {
  align-self: flex-end;
  background: linear-gradient(180deg, #4AA3FF 0%, #0A7CFF 100%);
  color: #FFFFFF;
  border-bottom-left-radius: 17px;
  border-bottom-right-radius: 5px;
}

/* Szene 2: die Suche — weiße Karten, Sterne, Fotostreifen, Aktionen */
.suche__feld {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #F1F2F4;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  font-family: var(--f-ui);
  font-size: clamp(0.78125rem, 1.3vw, 0.875rem);
  font-weight: 400;
  color: var(--tinte);
  white-space: nowrap;
  overflow: clip;
  box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.12);
}
.suche__feld svg { width: 13px; height: 13px; color: var(--tinte-still); flex-shrink: 0; }

.suche__meta {
  font-family: var(--f-ui);
  font-size: 0.65625rem;
  color: rgba(60, 60, 67, 0.6);
  margin: 0.1rem 0 0.1rem 0.4rem;
  max-width: none;
}

.treffer {
  border: 0.5px solid rgba(60, 60, 67, 0.16);
  background: #FFFFFF;
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  font-family: var(--f-ui);
  box-shadow: 0 1px 2px rgba(22, 24, 29, 0.05);
}
.treffer b { display: block; font-size: clamp(0.8125rem, 1.35vw, 0.9375rem); font-weight: 600; letter-spacing: -0.005em; color: var(--tinte); }
.treffer > span { display: block; font-size: clamp(0.71875rem, 1.2vw, 0.8125rem); color: rgba(60, 60, 67, 0.68); margin-top: 2px; }
.treffer__sterne { color: #202124; font-size: 0.71875rem; }
.treffer__sterne i { font-style: normal; color: #FBBC04; letter-spacing: 0.04em; }
.treffer__offen { font-style: normal; color: #188038; font-weight: 500; }

.treffer__fotos {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 7px !important;
}
.treffer__fotos i {
  height: clamp(30px, 4.4vw, 40px);
  border-radius: 6px;
  background:
    radial-gradient(120% 90% at 20% 18%, rgba(228, 87, 46, 0.5), transparent 42%),
    linear-gradient(135deg, #CFCBC0 0%, #E8E5DC 55%, #B9B5A8 100%);
}
.treffer__fotos i:nth-child(2) { background:
    radial-gradient(100% 80% at 75% 25%, rgba(255, 255, 255, 0.55), transparent 50%),
    linear-gradient(160deg, #D8D4C9 0%, #A9A599 100%); }
.treffer__fotos i:nth-child(3) { background:
    linear-gradient(200deg, #E4E1D8 0%, #C2BEB1 60%, #8F8B80 100%); }

.treffer__aktionen {
  display: flex !important;
  gap: 6px;
  margin-top: 8px !important;
}
.treffer__aktionen span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65625rem;
  font-weight: 500;
  color: #1A73E8;
  border: 0.5px solid rgba(60, 60, 67, 0.2);
  border-radius: 999px;
  padding: 3px 9px;
  margin: 0;
}
.treffer__aktionen svg { width: 10px; height: 10px; }

.treffer--gewinnt { position: relative; box-shadow: 0 0 0 1.5px var(--akzent-voll), 0 6px 16px -8px rgba(228, 87, 46, 0.35); }
.treffer--blass b { color: rgba(60, 60, 67, 0.75); }

/* Der Fingertipp: Puls auf dem Gewinner-Treffer (nur mit Bewegung) */
.tipp {
  position: absolute;
  right: 11%;
  bottom: -9px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(228, 87, 46, 0.32);
  border: 2px solid var(--akzent-voll);
  pointer-events: none;
}
@keyframes tipp-puls {
  0%, 100% { transform: scale(0.82); opacity: 0.55; }
  50%       { transform: scale(1.06); opacity: 1; }
}
.bewegung .tipp { animation: tipp-puls 1.5s ease-in-out infinite; }

/* Szene 3: das Bauchurteil — zwei Browser-Miniaturen mit Tab-Leiste */
/* --- Szene 3: zwei Betriebe nebeneinander, einer zeigt etwas ------------- */
/* Runde 6: Die Miniseiten füllen den Schirm jetzt aus und zeigen Substanz
   gegen Leere — Foto, Sterne, Leistungschips, Anrufknopf auf der einen
   Seite, Logo und Nummer auf der anderen. Vorher stand dort ein
   Jahreszahl-Hinweis, der nichts über die Seite aussagte. */
.szene[data-szene="3"] { justify-content: center; padding-bottom: clamp(2.4rem, 4vw, 3.4rem); }
.urteil__kopf {
  font-family: var(--f-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(60, 60, 67, 0.55);
  text-align: center;
  margin: 0 0 0.7rem;
  max-width: none;
}
.urteil { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.urteil__seite { position: relative; }
.miniseite {
  border: 0.5px solid rgba(60, 60, 67, 0.18);
  border-radius: 9px;
  background: #FFFFFF;
  padding: 0.45rem;
  display: grid;
  gap: 5px;
  align-content: start;
  aspect-ratio: 3 / 5.7;
  box-shadow: 0 2px 6px rgba(22, 24, 29, 0.07);
  overflow: hidden;
}
.urteil__seite--gewinnt .miniseite { box-shadow: 0 4px 14px rgba(22, 24, 29, 0.13); }
.miniseite__leiste {
  display: flex;
  gap: 3px;
  margin: -0.45rem -0.45rem 2px;
  padding: 5px 7px;
  background: #F1F2F4;
  border-bottom: 0.5px solid rgba(60, 60, 67, 0.12);
}
.miniseite__leiste i { width: 5px; height: 5px; border-radius: 50%; background: #C9CBD1; }
.miniseite__bild {
  display: block;
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 5px;
  background: linear-gradient(135deg, #D9D7CE, #EFEEE7);
  overflow: hidden;
}
.miniseite__bild em {
  position: absolute;
  left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  width: 26%; aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(228, 87, 46, 0.8);
}
.miniseite__bild em::after {
  content: "";
  position: absolute;
  left: 50%; top: 132%;
  transform: translateX(-50%);
  width: 210%; height: 130%;
  border-radius: 999px 999px 0 0;
  background: rgba(228, 87, 46, 0.5);
}
.miniseite b { display: block; height: 7px; border-radius: 3px; background: var(--tinte); opacity: 0.85; }
.miniseite s { display: block; height: 5px; border-radius: 3px; background: #DFDDD5; }
.miniseite__sterne {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #E8A33D;
  line-height: 1;
}
.miniseite__sterne i {
  font-style: normal;
  font-family: var(--f-ui);
  font-size: 7.5px;
  letter-spacing: 0;
  color: rgba(60, 60, 67, 0.55);
}
.miniseite__chips { display: flex; gap: 3px; }
.miniseite__chips em {
  display: block;
  height: 10px;
  flex: 1;
  border-radius: 999px;
  background: rgba(228, 87, 46, 0.2);
}
.miniseite__knopf {
  margin-top: auto;
  padding: 5px;
  border-radius: 5px;
  background: var(--akzent-voll);
  color: #fff;
  font-family: var(--f-ui);
  font-size: 8px;
  font-weight: 600;
  text-align: center;
}
.miniseite--alt { background: #F2F1EB; }
.miniseite--alt .miniseite__leiste { background: #E7E5DD; }
.miniseite--alt s { background: #D8D6CC; }
.miniseite--alt s:nth-of-type(2) { width: 62%; margin-inline: auto; }
.miniseite__logo {
  display: block;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 7px;
  background: #DCDAD0;
  margin: 14% auto 8%;
}
.miniseite--alt .miniseite__warn {
  margin-top: auto;
  font-family: var(--f-ui);
  font-size: 0.5rem;
  font-weight: 500;
  color: rgba(60, 60, 67, 0.6);
  border: 1px dashed rgba(60, 60, 67, 0.28);
  border-radius: 4px;
  padding: 4px 3px;
  text-align: center;
}
.miniseite__name {
  font-family: var(--f-ui);
  font-size: 0.625rem;
  font-weight: 500;
  color: rgba(60, 60, 67, 0.65);
  text-align: center;
  margin: 0.35rem 0 0;
  max-width: none;
}
.urteil__seite--gewinnt .miniseite__name { color: rgba(60, 60, 67, 0.9); font-weight: 600; }

.urteil__satz {
  font-family: var(--f-ui);
  font-size: clamp(0.8125rem, 1.35vw, 0.9375rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--tinte);
  text-align: center;
  margin: 0.85rem auto 0;
  max-width: 20em;
}

/* Szene 4: der Anruf — dunkler Anrufbildschirm wie auf dem echten Gerät */
.szene--anruf {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(70, 78, 96, 0.55), transparent 62%),
    linear-gradient(180deg, #1A1D24 0%, #101218 58%, #0B0D12 100%);
}
.anruf {
  margin: auto 0;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  text-align: center;
}
.anruf__status {
  font-family: var(--f-ui);
  font-size: 0.71875rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(235, 237, 242, 0.62);
  font-variant-numeric: tabular-nums;
}
.anruf__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(180deg, #E4572E, #B23009);
  display: grid;
  place-items: center;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 1.5rem;
  color: #FFFFFF;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.7);
  margin-top: 0.4rem;
}
.anruf b {
  font-family: var(--f-ui);
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #F4F5F8;
}
.anruf__tasten {
  display: flex;
  gap: clamp(0.7rem, 1.4vw, 1rem);
  margin-top: clamp(1.2rem, 2.4vw, 2rem);
}
.anruf__taste {
  width: clamp(40px, 5.4vw, 48px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  color: #FFFFFF;
}
.anruf__taste svg { width: 45%; height: 45%; }
.anruf__ende {
  width: clamp(46px, 6vw, 54px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #FF5148, #E0281F);
  display: grid;
  place-items: center;
  color: #FFFFFF;
  margin-top: clamp(0.5rem, 1vw, 0.8rem);
  box-shadow: 0 8px 20px -8px rgba(224, 40, 31, 0.65);
}
.anruf__ende svg { width: 52%; height: 52%; }
@keyframes ende-puls {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 20px -8px rgba(224, 40, 31, 0.65); }
  50%      { transform: scale(1.06); box-shadow: 0 10px 26px -8px rgba(224, 40, 31, 0.85); }
}
.bewegung .anruf__ende { animation: ende-puls 2s ease-in-out infinite; }

/* Fallback ohne Bewegung: Szenen als ruhiges Raster, alles Geräte-Chrome weg */
html:not(.bewegung) .warum__texte > p { margin-bottom: 1.75rem; }
html:not(.bewegung) .warum__handy {
  aspect-ratio: auto;
  width: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
html:not(.bewegung) .warum__handy::before,
html:not(.bewegung) .handy__tasten,
html:not(.bewegung) .schirm__status,
html:not(.bewegung) .schirm__glanz,
html:not(.bewegung) .schirm__heim { display: none; }
html:not(.bewegung) .warum__schirm {
  background: transparent;
  overflow: visible;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
html:not(.bewegung) .szene {
  position: static;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  padding: 1.1rem;
}
html:not(.bewegung) .szene--anruf {
  background: linear-gradient(180deg, #1A1D24 0%, #101218 58%, #0B0D12 100%);
  border-color: var(--buehne-linie);
}
html:not(.bewegung) .tipp { display: none; }

/* Die Wende danach: das Fazit steht auf einem warmen Zitat-Panel,
   damit es nicht mehr verloren auf dem Papier hängt (Runde 4). Der weiche
   Verlauf oben nimmt die Kante der Warum-Bühne auf. */
.wende { padding-top: clamp(2.5rem, 5vw, 4rem); position: relative; }
.wende::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(90px, 14vh, 150px);
  background: linear-gradient(180deg, var(--grund-tief), transparent);
  pointer-events: none;
}
.wende .bahn { position: relative; }
.wende__panel {
  position: relative;
  background: linear-gradient(135deg, #FDF1EA 0%, #FBEAE3 52%, #F7E3D8 100%);
  border: 1px solid rgba(228, 87, 46, 0.22);
  border-radius: clamp(14px, 2vw, 22px);
  padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1.5rem, 4vw, 3.75rem);
  max-width: 62em;
  overflow: clip;
  box-shadow: 0 1px 2px rgba(150, 40, 11, 0.05), 0 24px 56px -36px rgba(150, 40, 11, 0.3);
}
.wende__panel::after {
  /* stille Waschung unten rechts, hält das Panel lebendig */
  content: "";
  position: absolute;
  right: -14%; bottom: -34%;
  width: 60%; aspect-ratio: 1.4;
  background: radial-gradient(closest-side, rgba(228, 87, 46, 0.12), transparent 72%);
  pointer-events: none;
}
.wende__satz {
  position: relative;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: 26em;
  color: var(--tinte);
}

@media (max-width: 900px) {
  .warum__raster { grid-template-columns: 1fr; gap: 1.25rem; align-content: center; }
  .bewegung .warum [data-sc-stage] { align-items: stretch; }
  .bewegung .warum__raster { grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; padding-block: 12svh 4svh; }
  .warum__links h2 { font-size: clamp(1.5rem, 5.6vw, 1.875rem); }
  .warum__buehne { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
  .warum__handy { width: auto; height: 100%; max-height: 54svh; aspect-ratio: 390 / 800; margin-inline: 0; }
  .warum__geist span { font-size: clamp(180px, 60vw, 300px); }
  .bewegung .warum__texte { min-height: 11em; margin-top: 0.75rem; }
  .warum__texte > p { font-size: 1.0625rem; }
  .warum__schrittzahl { font-size: 1.0625rem; }
  html:not(.bewegung) .warum__schirm { grid-template-columns: 1fr; }

  /* Das Handy ist hier kleiner: die Geräte-UI schrumpft mit */
  .schirm__status { padding: 9px 13px 0; }
  .status__zeit { font-size: 0.71875rem; min-width: 2.4em; }
  .status__insel { width: 29%; height: 13px; top: 9px; }
  .s-netz { width: 13px; height: 9px; }
  .s-wlan { width: 12px; height: 9px; }
  .s-akku { width: 19px; height: 10px; }
  .status__symbole { gap: 3.5px; }
  .szene { padding: 2.2rem 0.75rem 1.2rem; gap: 0.5rem; }
  .app__kopf { gap: 0.45rem; }
  .app__avatar { width: 24px; height: 24px; font-size: 0.6875rem; }
  .app__wer b { font-size: 0.71875rem; }
  .app__wer i { font-size: 0.5625rem; }
  .chat__datum, .suche__meta { font-size: 0.5625rem; }
  .blase { font-size: 0.75rem; padding: 0.45rem 0.6rem; }
  .suche__feld { font-size: 0.71875rem; padding: 0.42rem 0.7rem; }
  .treffer { padding: 0.5rem 0.6rem; border-radius: 10px; }
  .treffer b { font-size: 0.75rem; }
  .treffer > span { font-size: 0.65625rem; }
  .treffer__sterne { font-size: 0.625rem; }
  .treffer__fotos i { height: 26px; }
  .treffer__aktionen { flex-wrap: wrap; }
  .treffer__aktionen span { font-size: 0.5625rem; padding: 2px 7px; gap: 3px; }
  .urteil__satz { font-size: 0.75rem; }
  .miniseite__name { font-size: 0.5625rem; }
  .anruf__status { font-size: 0.625rem; }
  .anruf__avatar { width: 54px; height: 54px; font-size: 1.125rem; margin-top: 0.2rem; }
  .anruf b { font-size: 1rem; }
  .anruf__tasten { margin-top: 0.9rem; gap: 0.6rem; }
  .anruf__taste { width: 34px; }
  .anruf__ende { width: 40px; margin-top: 0.35rem; }
  .schirm__heim { bottom: 5px; height: 3px; }
}

/* ==========================================================================
   4 · DIE ARBEITEN — Gerätebühnen auf Blaupausen-Raster
   Desktop-Ausschnitt + Mobilansicht je Projekt. Runde 4: feines
   Konstruktions-Raster als Grund (Reißbrett-Motiv), das oben und unten
   in den Seitengrund ausläuft.
   ========================================================================== */

#arbeiten {
  position: relative;
  background-color: var(--grund);
  background-image:
    linear-gradient(rgba(22, 24, 29, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 24, 29, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
#arbeiten::before,
#arbeiten::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: clamp(120px, 18vh, 200px);
  pointer-events: none;
}
#arbeiten::before { top: 0; background: linear-gradient(180deg, var(--sc-canvas, var(--grund)), transparent); }
#arbeiten::after { bottom: 0; background: linear-gradient(0deg, var(--sc-canvas, var(--grund)), transparent); }
#arbeiten > .bahn { position: relative; z-index: 1; }

.werke { display: grid; gap: clamp(4rem, 8vw, 6.5rem); margin-top: 3.5rem; }

.werk {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(1.75rem, 4.5vw, 4rem);
  align-items: center;
}
.werk:nth-child(even) { grid-template-columns: 1fr 1.45fr; }
.werk:nth-child(even) .werk__buehne { order: 2; }

.werk__buehne { position: relative; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.werk__desktop {
  border-radius: var(--radius);
  background: var(--buehne);
  border: 1px solid var(--buehne-linie);
  padding: 0.5rem;
  box-shadow: 0 24px 56px -30px rgba(22, 24, 29, 0.45);
}
.werk__leiste {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.2rem 0.3rem 0.55rem;
}
.werk__leiste .mock__url { font-size: 0.6875rem; }
.werk__desktop > img {
  border-radius: 6px;
  width: 100%;
}

.werk__phone {
  position: absolute;
  bottom: 0;
  width: clamp(96px, 24%, 150px);
  border-radius: clamp(12px, 1.6vw, 18px);
  background: var(--buehne);
  border: 1px solid var(--buehne-linie);
  padding: clamp(4px, 0.5vw, 6px);
  box-shadow: 0 18px 40px -18px rgba(22, 24, 29, 0.55);
  will-change: transform;
}
.werk:nth-child(odd) .werk__phone { right: clamp(-10px, -0.8vw, -6px); }
.werk:nth-child(even) .werk__phone { left: clamp(-10px, -0.8vw, -6px); }
.werk__phone img { border-radius: clamp(9px, 1.2vw, 13px); width: 100%; }

/* Werk-Hover (nur feine Zeiger): die Bühne antwortet auf die Hand.
   Schatten vertiefen sich, die URL-Zeile leuchtet auf, und der
   Handy-Schirm rückt eine Fingerbreite nach oben, als würde gescrollt.
   Transform liegt auf dem Bild, nicht auf dem Rahmen: die Rahmen gehören
   der Engine (Tilt und Parallax schreiben dort inline). */
@media (hover: hover) and (pointer: fine) {
  .werk__desktop { transition: box-shadow 340ms cubic-bezier(0.23, 1, 0.32, 1); }
  .werk__phone { overflow: clip; transition: box-shadow 340ms cubic-bezier(0.23, 1, 0.32, 1); }
  .werk__phone img { transition: transform 460ms cubic-bezier(0.23, 1, 0.32, 1); }
  .werk__leiste .mock__url { transition: color 260ms ease; }

  .bewegung .werk__buehne:hover .werk__desktop { box-shadow: 0 30px 64px -28px rgba(22, 24, 29, 0.62); }
  .bewegung .werk__buehne:hover .werk__phone { box-shadow: 0 24px 48px -18px rgba(22, 24, 29, 0.68); }
  .bewegung .werk__buehne:hover .werk__phone img { transform: translateY(-6px); }
  .bewegung .werk__buehne:hover .mock__url { color: var(--buehne-tinte); }
}

.werk__kopf { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }


.werk__fach {
  font-family: var(--f-display);
  font-size: 0.9375rem;
  color: var(--tinte-still);
  margin: 0.6rem 0 1rem;
}
.werk__text > p:last-of-type { color: var(--tinte-leise); }

/* --- Der Onlineshop bekommt keine Handyansicht, sondern seine Ware -------
   Bei einem Shop ist nicht die zweite Bildschirmgroesse der Beweis, sondern
   das Sortiment. Statt des Handys liegt deshalb eine Reihe Packshots unter
   dem Rechner-Rahmen. Jede Tuete haengt an einem eigenen Parallax-Wert, die
   Reihe atmet beim Scrollen, statt als Block zu stehen. Drehungen liegen
   hier bewusst nicht im CSS: Die Engine schreibt transform inline. */

.werk__buehne--shop { padding-bottom: clamp(4.25rem, 8.5vw, 6.5rem); }

.tueten {
  position: absolute;
  left: clamp(-8px, -0.6vw, -4px);
  right: clamp(-8px, -0.6vw, -4px);
  bottom: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: clamp(5px, 0.9vw, 11px);
}
.tuete {
  margin: 0;
  border-radius: clamp(8px, 1.1vw, 13px);
  background: var(--buehne);
  border: 1px solid var(--buehne-linie);
  padding: clamp(3px, 0.4vw, 5px);
  box-shadow: 0 14px 32px -16px rgba(22, 24, 29, 0.5);
  will-change: transform;
}
.tuete img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(5px, 0.7vw, 9px);
}
/* Die Welle: keine Reihe auf einer Linie, sondern ein Regal. */
.tuete--1 { margin-bottom: 13px; }
.tuete--2 { margin-bottom: 0; }
.tuete--3 { margin-bottom: 19px; }
.tuete--4 { margin-bottom: 5px; }
.tuete--5 { margin-bottom: 15px; }

@media (hover: hover) and (pointer: fine) {
  .tuete { transition: box-shadow 340ms cubic-bezier(0.23, 1, 0.32, 1); }
  .bewegung .werk__buehne--shop:hover .tuete { box-shadow: 0 22px 44px -16px rgba(22, 24, 29, 0.62); }
}

@media (max-width: 520px) {
  .tueten { grid-template-columns: repeat(4, 1fr); }
  .tuete--5 { display: none; }
}

@media (max-width: 880px) {
  .werk, .werk:nth-child(even) { grid-template-columns: 1fr; }
  .werk:nth-child(even) .werk__buehne { order: 0; }
  .werk__phone { width: clamp(96px, 26%, 130px); }
}

/* ==========================================================================
   5 · EIN HANDYFOTO GENÜGT — Kostenwahrheit + Verwandlung
   Runde 4: eigene warme Bühne — eine abgerundete, sonnige Papierfläche,
   das helle Gegenstück zur dunklen Zusage-Bühne weiter unten.
   ========================================================================== */

.beweis {
  position: relative;
  background:
    radial-gradient(54rem 38rem at 94% 2%, rgba(228, 87, 46, 0.1), transparent 60%),
    radial-gradient(46rem 32rem at 0% 100%, rgba(228, 87, 46, 0.07), transparent 55%),
    #F6F0E5;
  border-radius: clamp(18px, 2.6vw, 30px);
  max-width: min(calc(100% - 2 * clamp(8px, 1.6vw, 20px)), 1560px);
  margin-inline: auto;
}

.beweis__ehrlich {
  margin-top: 1.25rem;
  max-width: 44em;
  color: var(--tinte-leise);
}

/* Der Kostenvergleich: so war es bisher / so geht es jetzt */
.vergleich {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
  max-width: 900px;
}
.vergleich__karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  padding: 1.5rem 1.6rem 1.6rem;
}
.vergleich__karte--neu {
  border-color: rgba(228, 87, 46, 0.5);
  box-shadow: 0 0 0 1px rgba(228, 87, 46, 0.5), 0 18px 44px -30px rgba(193, 59, 18, 0.45);
}
.vergleich__titel {
  font-family: var(--f-display);
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinte-still);
  margin: 0 0 1.1rem;
}
.vergleich__karte--neu .vergleich__titel { color: var(--akzent); }
.vergleich ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
/* Runde 6: die Zeile war ein Flex-Container. Dadurch wurde jedes <b> zum
   eigenen Flex-Element und bekam die 0,65 rem Lücke auch vor dem Komma
   dahinter ("1.000 € extra , bevor"). Jetzt trägt padding den Haken. */
.vergleich li {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--tinte-leise);
}
.vergleich li b { color: var(--tinte); font-weight: 600; }
.vergleich li::before {
  position: absolute;
  left: 0; top: 0;
  font-family: var(--f-mono);
  font-weight: 700;
}
.vergleich__karte--alt li::before { content: "×"; color: var(--tinte-still); }
.vergleich__karte--neu li::before { content: "✓"; color: var(--akzent); }
.vergleich__fazit {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
  font-family: var(--f-display);
  font-size: 0.9375rem;
  color: var(--tinte-still);
  max-width: none;
}
.vergleich__karte--neu .vergleich__fazit { color: var(--akzent); font-weight: 600; }

/* Die Haken der Neu-Karte setzen sich nacheinander, wie eine Checkliste,
   die gerade abgearbeitet wurde. Die Alt-Karte bleibt stumm: der alte Weg
   bewegt sich nicht. Ohne Engine stehen alle Haken sofort. */
@keyframes haken-setzen {
  0%   { opacity: 0; transform: translateY(-1px) scale(0.3); }
  62%  { opacity: 1; transform: translateY(-1px) scale(1.2); }
  100% { opacity: 1; transform: translateY(-1px) scale(1); }
}
.bewegung .vergleich__karte--neu li::before { opacity: 0; }
.bewegung .vergleich__karte--neu.sc-in li::before { animation: haken-setzen 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.bewegung .vergleich__karte--neu.sc-in li:nth-child(1)::before { animation-delay: 430ms; }
.bewegung .vergleich__karte--neu.sc-in li:nth-child(2)::before { animation-delay: 590ms; }
.bewegung .vergleich__karte--neu.sc-in li:nth-child(3)::before { animation-delay: 750ms; }

@media (max-width: 760px) { .vergleich { grid-template-columns: 1fr; } }

/* --- Die Verwandlung (Signature Move, gepinnt) ----------------------------
   Ohne JS: ruhiges Raster. Mit .bewegung: Bühne, das Selfie dockt an,
   die Arbeitsbilder entwickeln sich, eine Linie verbindet beides. */

.verwandlung__innen {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1.25fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: 3rem 1rem;
}

.verwandlung figure { margin: 0; position: relative; }
.verwandlung figure img { border-radius: 8px; }
.verwandlung figcaption {
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--tinte-still);
  margin-top: 0.6rem;
}

.verwandlung__etikett {
  position: absolute;
  top: -11px; left: 12px;
  z-index: 2;
  font-family: var(--f-display);
  font-size: 0.65625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--tinte);
  color: #FFFFFF;
  border-radius: 6px;
  padding: 4px 9px;
  box-shadow: 0 4px 10px -4px rgba(22, 24, 29, 0.4);
}
.verwandlung__etikett--orange { background: var(--akzent); }

.verwandlung__quelle img {
  border: 5px solid #FFFFFF;
  outline: 1px solid var(--linie-stark);
  border-radius: 4px;
}

.verwandlung__schluss {
  grid-column: 1 / -1;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--tinte);
  max-width: 46ch;
  margin: 1.5rem 0 0;
}

@media (max-width: 700px) {
  .verwandlung__innen { grid-template-columns: 1fr 1fr; }
  .verwandlung__quelle { grid-column: 1 / -1; max-width: 46%; }
}

[data-sc-stage] { position: sticky; top: 0; }
.bewegung .verwandlung [data-sc-stage] {
  height: 100vh;
  height: 100svh;
  overflow: clip;
}
.bewegung .verwandlung__innen {
  display: block;
  position: relative;
  height: 100%;
  padding: 0;
  max-width: var(--breite);
}
.bewegung .verwandlung {
  --k1: clamp(0, calc((var(--sc-p, 1) - 0.08) / 0.12), 1);
  --k2: clamp(0, calc((var(--sc-p, 1) - 0.24) / 0.13), 1);
  --k3: clamp(0, calc((var(--sc-p, 1) - 0.41) / 0.13), 1);
  --k4: clamp(0, calc((var(--sc-p, 1) - 0.57) / 0.13), 1);
  --k5: clamp(0, calc((var(--sc-p, 1) - 0.72) / 0.13), 1);
}
.bewegung .verwandlung figure { position: absolute; }
.bewegung .verwandlung__quelle {
  left: 2%;
  top: 53%;
  width: clamp(120px, 13.5vw, 172px);
  transform:
    translateY(-50%)
    translateX(calc((1 - var(--k1)) * 30vw))
    scale(calc(1 + (1 - var(--k1)) * 0.3))
    rotate(-2deg);
  z-index: 1;
  will-change: transform;
}
.bewegung .verwandlung__bild--eins {
  left: 18%;
  top: 49%;
  width: clamp(138px, 16vw, 200px);
  opacity: var(--k2);
  transform: translateY(calc(-50% + (1 - var(--k2)) * 30px)) rotate(-1.2deg);
  z-index: 2;
  will-change: transform, opacity;
}
.bewegung .verwandlung__bild--zwei {
  left: 36.5%;
  top: 59%;
  width: clamp(138px, 16vw, 200px);
  opacity: var(--k3);
  transform: translateY(calc(-50% + (1 - var(--k3)) * 30px)) rotate(1.1deg);
  z-index: 3;
  will-change: transform, opacity;
}
.bewegung .verwandlung__bild--drei {
  left: 55%;
  top: 47%;
  width: clamp(138px, 16vw, 200px);
  opacity: var(--k4);
  transform: translateY(calc(-50% + (1 - var(--k4)) * 30px)) rotate(-0.9deg);
  z-index: 4;
  will-change: transform, opacity;
}
.bewegung .verwandlung__bild--vier {
  left: 74%;
  top: 61%;
  width: clamp(200px, 24vw, 298px);
  opacity: var(--k5);
  transform: translateY(calc(-50% + (1 - var(--k5)) * 30px)) rotate(1.4deg);
  z-index: 5;
  will-change: transform, opacity;
}

/* Die Verbindungslinie: zeichnet sich vom Selfie zu den Bildern */
.verwandlung__linie { display: none; }
.bewegung .verwandlung__linie {
  display: block;
  position: absolute;
  left: 14.5%;
  top: 43%;
  width: 5%;
  height: 12%;
  z-index: 0;
  pointer-events: none;
}
.bewegung .verwandlung__linie path {
  fill: none;
  stroke: var(--akzent-voll);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
  opacity: calc(var(--k2) * 0.8);
}
.bewegung .verwandlung__schluss {
  position: absolute;
  inset-inline: var(--rand);
  bottom: 4svh;
  margin: 0 auto;
  text-align: center;
  z-index: 6;
  opacity: var(--k5);
}

@media (max-width: 860px) {
  .bewegung .verwandlung__quelle {
    left: 6vw;
    top: 10svh;
    width: 33vw;
    transform:
      translateX(calc((1 - var(--k1)) * 24vw))
      translateY(calc((1 - var(--k1)) * 16svh))
      scale(calc(1 + (1 - var(--k1)) * 0.45))
      rotate(-2deg);
  }
  .bewegung .verwandlung__bild--eins {
    left: auto;
    right: 6vw;
    top: 13svh;
    width: 48vw;
    transform: translateY(calc((1 - var(--k2)) * 24px)) rotate(-1.2deg);
  }
  .bewegung .verwandlung__bild--zwei {
    right: auto;
    left: 8vw;
    top: auto;
    bottom: 18svh;
    width: 60vw;
    transform: translateY(calc((1 - var(--k3)) * 24px)) rotate(1.4deg);
  }
  .bewegung .verwandlung__linie { display: none; }
  .bewegung .verwandlung__schluss { bottom: 4svh; font-size: 0.9375rem; }
  .bewegung .verwandlung figcaption { font-size: 0.75rem; }
}


/* ==========================================================================
   7 · DIE ZUSAGE — dunkle Bühne mit eigenem Grund (kein Body-Drift!)
   ========================================================================== */

.zusage {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(50rem 32rem at 10% 0%, rgba(255, 107, 61, 0.12), transparent 60%),
    radial-gradient(44rem 30rem at 96% 100%, rgba(255, 107, 61, 0.07), transparent 55%),
    var(--buehne);
}
.zusage .bahn { position: relative; z-index: 1; }

/* Die Bühne fährt ein: beim Eintritt wächst die dunkle Fläche von 97,4 %
   auf volle Größe — Vorhang auf für die Entscheidung. Reine Transform-
   Fahrt über --sc-p; vor der Engine steht sie fertig da (Fallback 1). */
.bewegung .zusage {
  --kZ: clamp(0, calc(var(--sc-p, 1) / 0.3), 1);
  transform: scale(calc(0.974 + 0.026 * var(--kZ)));
  transform-origin: 50% 22%;
  will-change: transform;
}

.garantie__satz {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 17em;
  margin: 0 0 2rem;
  text-wrap: balance;
}
.garantie__spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--buehne-linie);
}
/* Runde 4: die Erklärtexte sprechen die Grotesk — auf dunklem Grund liest
   sie sich moderner und ruhiger als der Serif (Dominics Feedback). */
.garantie__spalten > div::before {
  content: "";
  display: block;
  width: 26px; height: 3px;
  border-radius: 3px;
  background: var(--glut);
  margin-bottom: 1.1rem;
}
.garantie__spalten p {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: 0.002em;
  color: #C3C8D2;
  max-width: 32em;
}
.garantie__spalten h3 { color: var(--buehne-tinte); margin-bottom: 0.8rem; font-size: 1.1875rem; }
@media (max-width: 860px) { .garantie__spalten { grid-template-columns: 1fr; gap: 2rem; } }

/* Lichtkegel folgt dem Zeiger (nur Desktop, nur mit Bewegung) */
[data-sc-spotlight] { isolation: isolate; }
:where([data-sc-spotlight]) { position: relative; }
[data-sc-spotlight]::after {
  content: "";
  position: absolute;
  inset: -2rem 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    30rem 30rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    rgba(255, 107, 61, 0.1), transparent 68%);
  opacity: 0;
  transition: opacity 420ms ease;
}
@media (hover: hover) and (pointer: fine) {
  [data-sc-spotlight]:hover::after { opacity: 1; }
}

/* ==========================================================================
   8 · ÜBER MICH
   ========================================================================== */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.duo--bild-rechts .duo__bild { order: 2; }
.duo__bild img { border-radius: var(--radius); }
.duo__text { max-width: 34em; }

@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; gap: 2.5rem; }
  .duo--bild-rechts .duo__bild { order: 0; }
}

.bildunterschrift {
  font-family: var(--f-display);
  font-size: 0.875rem;
  color: var(--tinte-still);
  margin-top: 0.75rem;
  max-width: 34em;
}

.stationen {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 2.5rem 0 0;
  padding: 0;
}
.stationen li {
  background: var(--flaeche);
  padding: 1.1rem 1.2rem;
  font-family: var(--f-display);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--tinte-still);
}
.stationen b {
  display: block;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tinte);
  margin-bottom: 2px;
}
@media (max-width: 620px) { .stationen { grid-template-columns: 1fr; } }

/* ==========================================================================
   9 · KONTAKT
   ========================================================================== */

.kontakt__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 860px) { .kontakt__raster { grid-template-columns: minmax(0, 1fr); } }

.kontakt__ehrlich {
  margin-top: 1.25rem;
  color: var(--tinte-leise);
  max-width: 38em;
}

.kontakt__karte {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linie-stark);
}
.kontakt__karte img {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.kontakt__karte div { font-family: var(--f-display); font-size: 0.9375rem; color: var(--tinte-leise); }
.kontakt__karte b { display: block; font-size: 1.0625rem; color: var(--tinte); }

.formular {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: calc(var(--radius) + 4px);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.feld { margin-bottom: 1.5rem; }
.feld label, .feld legend {
  display: block;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  padding: 0;
  transition: color 160ms ease;
}
/* Das aktive Feld meldet sich auch über sein Etikett */
.feld:focus-within > label { color: var(--akzent); }
.feld__hilfe {
  display: block;
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--tinte-still);
  margin-top: 2px;
}
.feld input,
.feld textarea,
.feld select {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--linie-stark);
  border-radius: 8px;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.5;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.feld textarea { min-height: 128px; resize: vertical; }
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: inset 0 0 0 1px var(--akzent);
}
.feld--fehler input, .feld--fehler textarea { border-color: var(--hinweis); }
.feld__fehler {
  font-family: var(--f-display);
  font-size: 0.875rem;
  color: var(--hinweis);
  margin-top: 0.4rem;
}

/* Runde 9: Hier standen die Regeln für die vier Zeitspannen-Chips und die
   Wunschtag-Liste. Beides ist raus — an ihrer Stelle steht der Terminkalender
   (Abschnitt 10.7). Die Chips waren nirgends sonst im Einsatz. */

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

.formular__hinweis {
  font-family: var(--f-display);
  font-size: 0.875rem;
  color: var(--tinte-still);
  margin-top: 1.25rem;
  max-width: 34em;
}

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

.fuss {
  background: var(--buehne);
  color: var(--buehne-leise);
  padding-block: 4rem 2.5rem;
  margin-top: var(--sektion);
  font-family: var(--f-display);
  font-size: 0.9375rem;
}
.fuss a { color: var(--buehne-tinte); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss__oben {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--buehne-linie);
}
.fuss__logo .logo__zeichen { color: var(--glut); }
.fuss__logo { font-weight: 700; font-size: 1.0625rem; color: var(--buehne-tinte); }
.fuss__logo b span {
  display: block; font-weight: 500; font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--buehne-leise); margin-top: 2px;
}
.fuss__wege { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.fuss__unten {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between;
  padding-top: 2rem;
  font-size: 0.875rem;
}

/* --- scrollcraft-Mechanik (Hooks für die Engine) -------------------------- */

.bewegung [data-sc-cue] { opacity: 0; will-change: opacity, transform; }

.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }

.bewegung [data-sc-in],
.bewegung [data-sc-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 640ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 640ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bewegung [data-sc-in].sc-in,
.bewegung [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }

[data-sc-tilt] { will-change: transform; transform-style: preserve-3d; }
[data-sc-magnet] { will-change: transform; }
[data-sc-reveal] { will-change: clip-path; }
[data-sc-parallax] { will-change: transform; }

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

@media (prefers-reduced-motion: reduce) {
  .knopf { transition: none; }
  .knopf:hover, .knopf:active { transform: none; }
  .kopf, .kopf__innen { transition: none; }
  .kopf[data-versteckt="ja"] { transform: none; }

  .satz__fluss { --k: 1; }
  .kringel path { stroke-dashoffset: 0 !important; }
  .mark::before { transform: scaleX(1) !important; transition: none; }
  .wort--strich path { stroke-dashoffset: 0 !important; transition: none; animation: none !important; }

  /* Muster aus Runde 3/4 stehen sofort still */
  .bewegung .vergleich__karte--neu li::before { opacity: 1; animation: none !important; }
  .bewegung .zusage { transform: none; }
  .bewegung .werk__buehne:hover .werk__phone img { transform: none; }
  .knopf--haupt::after { display: none; }

  /* Hero steht sofort */
  .bewegung .hero .h-zeile__i,
  .bewegung .hero .marke,
  .bewegung .hero__unter,
  .bewegung .hero .knopf-zeile,
  .bewegung .hero__belege li,
  .bewegung .hero__bild,
  .bewegung .hero__bild img,
  .bewegung .stempel { animation: none !important; opacity: 1; transform: none; }
  .bewegung .stempel { transform: rotate(-2deg); }
  .bewegung .hero__buehne { transform: none; }

  .bewegung .tipp,
  .bewegung .anruf__ende,

  [data-sc-reveal] { clip-path: none !important; }
  [data-sc-parallax] { transform: none !important; }
  .sc-split__i { transform: none !important; }
  [data-sc-spotlight]::after { display: none; }

  /* Die gepinnten Bühnen fallen auf das ruhige Raster zurück */
  .verwandlung { height: auto !important; }
  .verwandlung [data-sc-stage] { height: auto !important; overflow: visible !important; }
  .verwandlung__schluss { opacity: 1 !important; transform: none !important; }

  .warum { height: auto !important; }
  .warum [data-sc-stage] { height: auto !important; overflow: visible !important; display: block !important; }
  .szene { opacity: 1 !important; transform: none !important; }

  /* Runde 6: Ablauf-Stapel fällt auf vier Karten untereinander zurück.
     Kein .bewegung davor: bei reduzierter Bewegung setzt der Inline-Schalter
     im <head> die Klasse gar nicht erst. Die Engine schreibt trotzdem
     Inline-Opacity auf jede Cue — dagegen hilft nur !important. */
  .ablauf, .stufen { height: auto !important; padding-block: var(--sektion) !important; }
  .ablauf [data-sc-stage],
  .stufen [data-sc-stage] { height: auto !important; overflow: visible !important; display: block !important; }
  .zeitachse { display: none !important; }
  .streifen { flex-direction: column !important; width: auto !important; max-width: var(--breite); margin-inline: auto; transform: none !important; padding: 0 var(--rand) !important; gap: 2.75rem !important; }
  .streifen .tkarte { width: auto !important; }
  .stufen__deck { display: grid !important; }
  .stufen__deck .stufe { grid-area: auto !important; opacity: 1 !important; transform: none !important; }
  .reiter { display: none !important; }
  .tkarte { position: relative !important; inset: auto !important; opacity: 1 !important; transform: none !important; }
  .ring__zug { --r: 1; }
  .ui__zeiger, .ui__live, .tipp-schreibt i { animation: none !important; }

  /* Runde 6: die drei Methoden-Grafiken stehen fertig da */
  .mg__tippen { width: 100% !important; }
  .mg--finden .ist-du,
  .mg--finden .mg__treffer li:not(.ist-du) { transform: none !important; }
  .mg--finden .mg__platz { opacity: 1 !important; transform: translateY(-50%) !important; }
  .mg--finden .mg__reiter-pille { animation: none !important; }
  .mg__blick { opacity: 0.4 !important; transform: none !important; }
  .mg--buchen .mg__fragen i { transform: none !important; }
  .mg--buchen .mg__bewertung, .mg--buchen .mg__anruf { opacity: 1 !important; }
  .mg--buchen .mg__anruf::after { animation: none !important; }
  .siegel__haken { stroke-dashoffset: 0 !important; animation: none !important; }
  .siegel__ring--innen { animation: none !important; }
}

/* --- Rechtstexte (Impressum, Datenschutz) ---------------------------------- */

.rechtstext { max-width: var(--breite-text); }
.rechtstext h2 { font-size: 1.5rem; margin-top: 3rem; margin-bottom: 1rem; }
.rechtstext h3 { font-size: 1.125rem; margin-top: 2rem; margin-bottom: 0.5rem; }
.rechtstext p, .rechtstext li { color: var(--tinte-leise); font-size: 1.0625rem; }
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext li { margin-bottom: 0.5rem; }

/* ==========================================================================
   RUNDE 5 — Neue Bausteine aus der Webseiten-Recherche
   Herleitung: Erklärvideos/18_WEBSEITEN-RECHERCHE-INHALT.md (Inhalt, Reihenfolge,
   Belege) und 19_WEBSEITEN-RECHERCHE-KONKURRENZ.md (Wettbewerb, Lücken).
   ========================================================================== */

/* --- Kopfzeile bleibt stehen (Hebel 4) ------------------------------------ */
.kopf[data-versteckt="ja"] { transform: none; }

/* --- Hero: Name und Gesicht ab der ersten Bildschirmhöhe (Idee 6) --------- */
.hero__wer {
  margin: 1rem 0 0;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--tinte-leise);
}
.hero__wer b { display: block; font-weight: 700; color: var(--tinte); }
.hero__wer span { display: block; font-size: 0.875rem; color: var(--tinte-still); }

/* ==========================================================================
   KI-KENNZEICHNUNG am Bild — Art. 50 Abs. 4 KI-VO, anwendbar seit 02.08.2026
   ========================================================================== */

/* --- Zweite Verwandlungs-Kette, kompakt statt gepinnt --------------------- */
.kette { margin-top: 3.5rem; }
.kette__titel {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--tinte);
  margin: 0 0 1.5rem;
}
.kette__reihe {
  display: grid;
  grid-template-columns: 1fr auto 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
.kette__feld { margin: 0; position: relative; }
.kette__feld img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  display: block;
}
.kette__feld figcaption {
  margin-top: 0.6rem;
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--tinte-still);
}
.kette__pfeil {
  align-self: center;
  color: var(--linie-stark);
  width: 40px;
}
.kette__pfeil svg { width: 100%; height: auto; display: block; }

/* --- Die Absage als Angebot, in der Zusage statt unter der Falte (Idee 9) - */
.zusage__absage {
  margin: 2.25rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--buehne-leise);
  max-width: 62ch;
  padding-left: 1.1rem;
  border-left: 2px solid var(--buehne-linie);
}

/* ==========================================================================
   WO IST DER HAKEN — Einwand-Sektion; jeder ernste Wettbewerber hat eine
   ========================================================================== */
.haken__liste { margin: 3rem auto 0; max-width: 840px; border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 3rem 1.35rem 0;
  position: relative;
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinte);
  transition: color 160ms ease;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--akzent); }
.frage summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 13px; height: 13px;
  margin-top: -7px;
  border-right: 2px solid var(--akzent);
  border-bottom: 2px solid var(--akzent);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
}
.frage[open] summary::after { transform: rotate(-135deg); }
.frage p {
  margin: 0;
  padding: 0 3rem 1.6rem 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--tinte-leise);
  max-width: 68ch;
}
.frage summary:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   FÜR WEN ICH NICHT DER RICHTIGE BIN — im Handwerk ist „sagt zu allem ja"
   ein Warnzeichen (Lücke D4)
   ========================================================================== */
.nichtfuer__panel {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  padding: 2.5rem 2.5rem 2.75rem;
}
.nichtfuer__liste { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.nichtfuer__liste li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinte-leise);
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--linie);
}
.nichtfuer__liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.nichtfuer__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.9rem;
  height: 2px;
  background: var(--akzent);
}
.nichtfuer__liste b { color: var(--tinte); font-weight: 600; }

/* --- Handy: Länge. Bei 45,2 % durchschnittlicher mobiler Scrolltiefe
       (Contentsquare) kostet jede überflüssige Bildschirmhöhe Leser. ------- */
@media (max-width: 800px) {
  :root { --sektion: 62px; }
  .vorspann { font-size: 1.125rem; margin-top: 1.1rem; }
  .tafel { margin-top: 2rem; gap: 0.75rem; }
  .tafel__karte { padding: 1.3rem 1.3rem 1.4rem; }
  .kette { margin-top: 2.5rem; }
  .haken__liste { margin-top: 1.75rem; }
  .nichtfuer__liste { margin-top: 1.75rem; gap: 0.9rem; }
  .nichtdazu { padding: 1.2rem 1.3rem; }
}

/* --- Sprungziele nicht unter die Kopfzeile schieben ---------------------- */
main > section[id], #kontakt, #danach, #haken, #preis, #leistung, #unterschied, #verdacht, #nichtfuer {
  scroll-margin-top: 88px;
}

/* ==========================================================================
   RUNDE 6 — Neue Bausteine
   Anlass: Dominics Feedback vom 29.08.2026. Reihenfolge umgebaut, Preis nach
   hinten, Über mich nach vorn, „Was du bekommst" und „Der Einwand" raus.
   Neu: DIE METHODE (die drei Säulen aus dem Erklärfilm-Skript V9) und der
   ABLAUF als gepinnter Kartenstapel nach dem Vorbild, das Dominic in
   „Webseite Änderungen/48 Stunden" abgelegt hat — Aufbau übernommen,
   Farbwelt bewusst nicht (Wächterwerks Mint/Türkis ist gesperrt, DESIGN.md §0).
   ========================================================================== */

/* --- Die Motion-Grafiken der drei Säulen ---------------------------------- */
/* Gebaut, nicht bebildert: jede Grafik zeigt die Sache selbst (Suchergebnis,
   Blickverlauf, Handy-Kopf), nicht ihr Symbol. Sie laufen einmal, wenn die
   Säule in Sicht kommt (.sc-in auf der .stufe), nie in Schleife im Hintergrund. */

.mg {
  position: relative;
  font-family: var(--f-ui);
}
.mg__karte,
.mg__browser,
.mg__telefon {
  position: relative;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(22, 24, 29, 0.05),
    0 8px 20px -8px rgba(22, 24, 29, 0.13),
    0 28px 56px -28px rgba(22, 24, 29, 0.22);
}

/* 01 · Gefunden werden — dein Eintrag steigt auf Platz eins */
.mg--finden .mg__karte { padding: 1.1rem 1.1rem 0.8rem; }
.mg__reiter {
  position: relative;
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--grund-tief);
  margin-bottom: 0.9rem;
}
.mg__reiter b {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
  padding: 0.42rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinte-leise);
}
.mg__reiter-pille {
  position: absolute;
  top: 0.25rem; bottom: 0.25rem; left: 0.25rem;
  width: calc(50% - 0.25rem);
  border-radius: 999px;
  background: var(--flaeche);
  box-shadow: 0 1px 3px rgba(22, 24, 29, 0.14);
}
.mg__feld {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--tinte-leise);
  margin-bottom: 0.9rem;
}
.mg__feld svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--tinte-still); }
.mg__tippen { white-space: nowrap; overflow: hidden; }
.mg__treffer { list-style: none; margin: 0; padding: 0; }
.mg__treffer li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 3.6rem;
  padding: 0.55rem 0.2rem 0.55rem 2.4rem;
  border-top: 1px solid var(--linie);
}
.mg__treffer li:first-child { border-top: 0; }
.mg__treffer b { font-size: 0.875rem; font-weight: 600; color: var(--tinte); }
.mg__treffer span { font-size: 0.78125rem; color: var(--tinte-still); margin-top: 0.15rem; }
.mg__treffer li:not(.ist-du) b { color: var(--tinte-leise); font-weight: 500; }
.mg__treffer .ist-du { background: linear-gradient(90deg, var(--akzent-grund), transparent 82%); border-radius: 8px; }
.mg__platz {
  position: absolute;
  left: 0.55rem; top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  font-style: normal;
}

.bewegung .mg--finden .mg__tippen { width: 0; }
.bewegung .mg--finden .mg__platz { opacity: 0; transform: translateY(-50%) scale(0.4); }
.bewegung .mg--finden .ist-du { transform: translateY(200%); }
.bewegung .mg--finden .mg__treffer li:not(.ist-du) { transform: translateY(-100%); }

.bewegung :is(.sc-in, .ist-dran) .mg--finden .mg__tippen { animation: mg-tippen 1100ms steps(26) 260ms both; }
.bewegung :is(.sc-in, .ist-dran) .mg--finden .mg__reiter-pille { animation: mg-reiter 2600ms cubic-bezier(0.65, 0, 0.35, 1) 1500ms both; }
.bewegung :is(.sc-in, .ist-dran) .mg--finden .ist-du { animation: mg-hoch 780ms cubic-bezier(0.34, 1.4, 0.5, 1) 1500ms both; }
.bewegung :is(.sc-in, .ist-dran) .mg--finden .mg__treffer li:not(.ist-du) { animation: mg-runter 780ms cubic-bezier(0.34, 1.4, 0.5, 1) 1500ms both; }
.bewegung :is(.sc-in, .ist-dran) .mg--finden .mg__platz { animation: mg-platz 460ms cubic-bezier(0.34, 1.56, 0.64, 1) 2150ms both; }

@keyframes mg-tippen { from { width: 0; } to { width: 100%; } }
@keyframes mg-hoch   { from { transform: translateY(200%); } to { transform: translateY(0); } }
@keyframes mg-runter { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes mg-platz  { from { opacity: 0; transform: translateY(-50%) scale(0.4); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes mg-reiter {
  0%, 22%   { transform: translateX(0); }
  44%, 74%  { transform: translateX(100%); }
  96%, 100% { transform: translateX(0); }
}

/* 02 · Gewählt werden — wohin der Blick in 0,05 Sekunden springt */
.mg--waehlen .mg__browser { padding: 0.75rem; overflow: hidden; }
.mg__leiste { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.75rem; }
.mg__leiste i { width: 7px; height: 7px; border-radius: 50%; background: var(--linie-stark); }
.mg__seite {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  padding: 0.75rem;
  border-radius: 10px;
  background: var(--grund);
}
.mg__foto {
  grid-row: span 3;
  position: relative;
  border-radius: 8px;
  background: linear-gradient(140deg, #DEDDD5, #F0EFE9);
  min-height: 9.5rem;
  overflow: hidden;
}
.mg__gesicht {
  position: absolute;
  left: 50%; top: 34%;
  transform: translate(-50%, -50%);
  width: 34%; aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(228, 87, 46, 0.7);
}
.mg__gesicht::after {
  content: "";
  position: absolute;
  left: 50%; top: 128%;
  transform: translateX(-50%);
  width: 190%; height: 90%;
  border-radius: 999px 999px 0 0;
  background: rgba(228, 87, 46, 0.45);
}
.mg__kopf { height: 13px; border-radius: 4px; background: var(--tinte); opacity: 0.82; }
.mg__zeile { height: 7px; border-radius: 4px; background: var(--linie-stark); }
.mg__zeile--kurz { width: 64%; }
.mg__sterne { font-size: 0.8125rem; letter-spacing: 0.08em; color: #E8A33D; }
.mg__knopf { grid-column: 2; height: 24px; border-radius: 6px; background: var(--akzent-voll); }
.mg__blick {
  position: absolute;
  left: var(--bx); top: var(--by);
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 2px solid var(--akzent);
  background: rgba(228, 87, 46, 0.14);
  opacity: 0;
}
.mg__uhr {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  max-width: none;
  font-family: var(--f-display);
}
.mg__uhr b { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; color: var(--akzent); }
.mg__uhr span { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinte-still); }

.bewegung :is(.sc-in, .ist-dran) .mg--waehlen .mg__blick { animation: mg-blick 2600ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.bewegung :is(.sc-in, .ist-dran) .mg--waehlen .mg__blick:nth-last-of-type(3) { animation-delay: 420ms; }
.bewegung :is(.sc-in, .ist-dran) .mg--waehlen .mg__blick:nth-last-of-type(2) { animation-delay: 700ms; }
.bewegung :is(.sc-in, .ist-dran) .mg--waehlen .mg__blick:nth-last-of-type(1) { animation-delay: 980ms; }
.bewegung :is(.sc-in, .ist-dran) .mg--waehlen .mg__uhr b { animation: einblenden 520ms cubic-bezier(0.23, 1, 0.32, 1) 1250ms both; }

@keyframes mg-blick {
  0%   { opacity: 0; transform: scale(2.2); }
  16%  { opacity: 1; transform: scale(1); }
  62%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0.28; transform: scale(1); }
}

/* 03 · Gebucht werden — die drei Fragen, beantwortet, bevor er anruft */
.mg--buchen .mg__telefon { padding: 1.25rem 1.25rem 1.1rem; border-radius: 22px; }
.mg__balken { display: block; width: 34%; height: 4px; border-radius: 4px; background: var(--linie-stark); margin: 0 auto 1rem; }
.mg__titel {
  margin: 0 0 0.9rem;
  max-width: none;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tinte);
}
.mg__fragen { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.mg__fragen li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--linie);
  border-radius: 9px;
  font-size: 0.84375rem;
  color: var(--tinte-leise);
  background: var(--grund);
}
.mg__fragen i {
  position: relative;
  flex-shrink: 0;
  width: 17px; height: 17px;
  border-radius: 5px;
  background: var(--akzent);
}
.mg__fragen i::after {
  content: "";
  position: absolute;
  left: 5px; top: 3px;
  width: 5px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.mg__bewertung {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #B0791C;
  margin-bottom: 0.9rem;
}
.mg__bewertung em { font-style: normal; color: var(--tinte-still); font-weight: 500; }
.mg__anruf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem;
  border-radius: 10px;
  background: var(--akzent);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
}
.mg__anruf svg { width: 16px; height: 16px; }
.mg__anruf::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 2px solid var(--akzent-voll);
  opacity: 0;
}

.bewegung .mg--buchen .mg__fragen i { transform: scale(0); }
.bewegung .mg--buchen .mg__bewertung,
.bewegung .mg--buchen .mg__anruf { opacity: 0; }
.bewegung :is(.sc-in, .ist-dran) .mg--buchen .mg__fragen i { animation: mg-haken 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.bewegung :is(.sc-in, .ist-dran) .mg--buchen .mg__fragen li:nth-child(1) i { animation-delay: 380ms; }
.bewegung :is(.sc-in, .ist-dran) .mg--buchen .mg__fragen li:nth-child(2) i { animation-delay: 620ms; }
.bewegung :is(.sc-in, .ist-dran) .mg--buchen .mg__fragen li:nth-child(3) i { animation-delay: 860ms; }
.bewegung :is(.sc-in, .ist-dran) .mg--buchen .mg__bewertung { animation: einblenden 420ms ease-out 1080ms both; }
.bewegung :is(.sc-in, .ist-dran) .mg--buchen .mg__anruf { animation: einblenden 420ms ease-out 1280ms both; }
.bewegung :is(.sc-in, .ist-dran) .mg--buchen .mg__anruf::after { animation: mg-puls 2s ease-out 1700ms infinite; }

@keyframes mg-haken { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes mg-puls {
  0%   { opacity: 0.65; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.09); }
  100% { opacity: 0;    transform: scale(1.09); }
}

/* --- Die gebauten UI-Ausschnitte der vier Schritte ------------------------ */

.ui {
  font-family: var(--f-ui);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 0.9rem;
}
.ui__kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  max-width: none;
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--tinte-leise);
}
.ui__kopf em { margin-left: auto; font-style: normal; color: var(--tinte-still); font-weight: 500; }
.ui__live { width: 7px; height: 7px; border-radius: 50%; background: #29A46A; }
.bewegung .ui__live { animation: punkt-atmen 2.4s ease-in-out infinite; }
@keyframes punkt-atmen { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.ui__blase {
  margin: 0 0 0.45rem;
  max-width: 86%;
  padding: 0.6rem 0.75rem;
  border-radius: 13px 13px 13px 4px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--tinte-leise);
}
.ui__blase--rechts {
  margin-left: auto;
  border-radius: 13px 13px 4px 13px;
  background: var(--akzent-grund);
  border-color: rgba(228, 87, 46, 0.25);
  color: #7C2A0C;
}
.ui__anhang {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.7rem 0 0;
  max-width: none;
  padding: 0.5rem 0.65rem;
  border: 1px dashed var(--linie-stark);
  border-radius: 9px;
  font-size: 0.78125rem;
  color: var(--tinte-still);
}
.ui__anhang em { margin-left: auto; font-style: normal; }
.ui__miniatur {
  width: 26px; height: 26px;
  border-radius: 5px;
  background: linear-gradient(140deg, #DEDDD5, #F0EFE9);
  position: relative;
  flex-shrink: 0;
}
.ui__miniatur::after {
  content: "";
  position: absolute;
  left: 50%; top: 34%;
  transform: translate(-50%, -50%);
  width: 40%; aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(228, 87, 46, 0.65);
}

/* Schritt 2: der Ring, der 48 Stunden zählt */
.ui--bau { display: flex; align-items: center; gap: 1.1rem; }
.ui__ring { position: relative; width: 88px; height: 88px; flex-shrink: 0; }
.ui__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__spur, .ring__zug { fill: none; stroke-width: 7; }
.ring__spur { stroke: var(--linie); }
.ring__zug {
  stroke: var(--akzent-voll);
  stroke-linecap: round;
  stroke-dasharray: 271;
  stroke-dashoffset: 0;
}
/* Der Ring füllt sich am Scrollfortschritt der Sektion, genau im Fenster,
   in dem Schritt 2 sichtbar ist. Keine Schleife im Hintergrund. */
.bewegung .ring__zug {
  --r: clamp(0, calc((var(--sc-p, 1) - 0.27) / 0.22), 1);
  stroke-dashoffset: calc(271 * (1 - var(--r)));
}
.ui__ring b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--akzent);
}
.ui__ring em { font-style: normal; font-size: 0.75rem; }
.ui__liste, .ui__haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ui__liste li, .ui__haken li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.8125rem;
  color: var(--tinte-leise);
}
.ui__liste li::before, .ui__haken li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.28em;
  width: 14px; height: 14px;
  border-radius: 4px;
  background: var(--akzent);
}
.ui__liste li::after, .ui__haken li::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 0.42em;
  width: 4px; height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* Schritt 3 und 4: das Browserfenster */
.ui--schau, .ui--live { display: grid; gap: 0.85rem; }
.ui__browser {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 0.6rem;
  display: grid;
  gap: 0.4rem;
}
.ui__leiste { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.2rem; }
.ui__leiste i { width: 6px; height: 6px; border-radius: 50%; background: var(--linie-stark); }
.ui__leiste em {
  margin-left: 0.45rem;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: var(--grund-tief);
  font-style: normal;
  font-size: 0.6875rem;
  color: var(--tinte-still);
}
.ui__url { color: var(--akzent) !important; }
.ui__url svg { width: 9px; height: 11px; color: #29A46A; }
.ui__hero { height: 52px; border-radius: 6px; background: linear-gradient(120deg, #DEDDD5, #F0EFE9); }
.ui__hero--voll { background: linear-gradient(120deg, rgba(228, 87, 46, 0.28), rgba(228, 87, 46, 0.1)); }
.ui__band { height: 7px; border-radius: 4px; background: var(--linie); }
.ui__band--kurz { width: 58%; }
.ui__wahl { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ui__wahl > span {
  padding: 0.55rem;
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinte-still);
}
.ui__wahl .ist-an { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.ui__zeiger {
  position: absolute;
  right: 12%; bottom: -6px;
  width: 14px; height: 18px;
  color: var(--tinte);
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9));
}
.bewegung .ui__zeiger { animation: zeiger-tippen 2.6s ease-in-out infinite; }
@keyframes zeiger-tippen {
  0%, 62%, 100% { transform: translate(0, 0); }
  70%           { transform: translate(-2px, -5px); }
  78%           { transform: translate(0, 0); }
}
.ui__preis {
  margin: 0;
  justify-self: start;
  padding: 0.32rem 0.7rem;
  border: 1px dashed var(--linie-stark);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tinte-still);
}

/* --- ÜBER MICH: der Aufschlagsatz trägt mehr Gewicht --------------------- */
.ueber__auf {
  margin-top: 1.75rem;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--tinte);
}

/* --- DIE ZUSAGE: mittig, mit Siegel und drei Nullen ---------------------- */

.zusage__innen { text-align: center; }
.zusage__innen .marke { justify-content: center; }
.zusage__innen .marke::after {
  content: "";
  width: 24px; height: 2px; border-radius: 2px;
  background: var(--glut); flex-shrink: 0;
}
.zusage .garantie__satz { margin-inline: auto; max-width: 15em; }

.siegel {
  width: clamp(72px, 9vw, 96px);
  margin: clamp(1.75rem, 3.5vw, 2.75rem) auto clamp(1.5rem, 3vw, 2.25rem);
}
.siegel svg { width: 100%; height: auto; display: block; overflow: visible; }
.siegel__ring { fill: none; stroke: var(--glut); stroke-width: 2; opacity: 0.35; }
.siegel__ring--innen { stroke-dasharray: 5 7; opacity: 0.55; }
.siegel__haken {
  fill: none;
  stroke: var(--glut);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bewegung .siegel__haken { stroke-dasharray: 1; stroke-dashoffset: 1; }
.bewegung .siegel.sc-in .siegel__haken { animation: haken-ziehen 700ms cubic-bezier(0.65, 0, 0.35, 1) 240ms both; }
.bewegung .siegel.sc-in .siegel__ring--innen { animation: siegel-dreh 22s linear infinite; transform-origin: 50% 50%; }
@keyframes haken-ziehen { to { stroke-dashoffset: 0; } }
@keyframes siegel-dreh { to { transform: rotate(360deg); } }

.zusage__drei {
  list-style: none;
  margin: 0 auto clamp(2.75rem, 5vw, 4rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 860px;
  background: var(--buehne-linie);
  border: 1px solid var(--buehne-linie);
  border-radius: 14px;
  overflow: hidden;
}
.zusage__drei li {
  display: grid;
  gap: 0.4rem;
  padding: 1.4rem 1rem 1.5rem;
  background: var(--buehne-karte);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--buehne-leise);
}
.zusage__drei b {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--glut);
}
@media (max-width: 700px) { .zusage__drei { grid-template-columns: 1fr; } }

.zusage .garantie__spalten { text-align: left; max-width: 900px; margin-inline: auto; }
.zusage .zusage__absage { margin-inline: auto; }
.zusage .knopf-zeile { justify-content: center; }

/* --- NACH DEM START: Klartext-Karten statt einer Definitionsliste --------- */

.klartext {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2.75rem, 5vw, 3.75rem);
}
.klartext__karte {
  position: relative;
  padding: 1.6rem 1.5rem 1.7rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.klartext__karte::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 46px; height: 3px;
  background: var(--akzent-voll);
}
.klartext__frage {
  margin: 0 0 0.75rem;
  max-width: none;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--tinte);
}
.klartext__antwort {
  margin: 0;
  max-width: none;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinte-leise);
}
@media (max-width: 980px) { .klartext { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .klartext { grid-template-columns: 1fr; } }

/* --- BEWEIS: der Ehrlichkeitssatz als Band unter dem Vergleich ------------ */
.beweis__ehrlich {
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  max-width: 62em;
  padding: 1.15rem 1.4rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinte-leise);
}
.beweis__ehrlich b { color: var(--tinte); font-weight: 700; }

/* --- Handy-Szenen: Feinschliff der Bewegung (Runde 6) -------------------- */

/* Szene 1: der Tipp-Indikator, bevor die Antwort kommt */
.tipp-schreibt {
  display: flex;
  gap: 4px;
  align-items: center;
  width: max-content;
  margin-top: 0.35rem;
  padding: 0.5rem 0.7rem;
  border-radius: 15px 15px 15px 4px;
  background: #E9E9EB;
}
.tipp-schreibt i { width: 6px; height: 6px; border-radius: 50%; background: #9A9AA0; }
.bewegung .tipp-schreibt i { animation: tipp-wippen 1.25s ease-in-out infinite; }
.bewegung .tipp-schreibt i:nth-child(2) { animation-delay: 160ms; }
.bewegung .tipp-schreibt i:nth-child(3) { animation-delay: 320ms; }
@keyframes tipp-wippen {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
  30%           { transform: translateY(-4px); opacity: 1; }
}


/* --- Runde 6: Feinschliff im Handy --------------------------------------- */
/* Die drei Bildkacheln im Suchtreffer zeigen andeutungsweise Arbeit, statt
   leere Kästen zu sein: ein Raum, eine Fläche, ein Detail. */
.treffer__fotos i[data-f="1"] { background: linear-gradient(150deg, #E2DFD6 0%, #F1EFE9 60%, #E6E3DA 100%); }
.treffer__fotos i[data-f="2"] { background: linear-gradient(20deg, #DCD9CF 0%, #EFEDE6 55%, rgba(228, 87, 46, 0.16) 100%); }
.treffer__fotos i[data-f="3"] { background: linear-gradient(200deg, #EAE7DF 0%, #DAD7CD 100%); }
.treffer__fotos i { position: relative; overflow: hidden; }
.treffer__fotos i[data-f="1"]::after,
.treffer__fotos i[data-f="3"]::after {
  content: "";
  position: absolute;
  left: 18%; bottom: 0;
  width: 64%; height: 46%;
  border-radius: 3px 3px 0 0;
  background: rgba(22, 24, 29, 0.09);
}
.treffer__fotos i[data-f="2"]::after {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: 34%; aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(228, 87, 46, 0.55);
}

/* Die Zusagen-Kacheln: kürzere Zeilen, damit nichts unschön umbricht. */
.zusage__drei li { align-content: start; }

/* Runde 6: der Abgrenzungs-Kasten bekommt denselben zweispaltigen Kopf wie
   die übrigen Sektionen, damit Überschrift und Einordnung auf einer Höhe
   stehen statt in einer schmalen Säule links. */
.nichtfuer__panel .kopfblock--zwei { align-items: start; }
.nichtfuer__panel .kopfblock--zwei h2 { max-width: 10em; }
.nichtfuer__panel .nichtfuer__liste { margin-top: clamp(2rem, 4vw, 3rem); }

/* ==========================================================================
   RUNDE 7 — Dominics Rückmeldung vom 29.08.2026
   Neu gebaut: die Wende als Beleg-Panel mit Messlatte, die drei Methoden-
   Stufen als gepinnte Reiter, der Ablauf als waagerecht abgefahrene
   48-Stunden-Zeitachse, die Preistafel mit gemeinsamem Leistungsband.
   Repariert: die Handyleiste hatte überhaupt keine Regeln — ihr Telefonhörer
   lief als 1440-px-SVG durch die Seite (der „große Hörer ganz unten").
   ========================================================================== */

/* --- Die Handyleiste: der Handlungsweg, der beim Lesen mitläuft ----------- */
/* Nur auf dem Handy. Am Rechner steht der Knopf ohnehin in der Kopfzeile. */
.handyleiste { display: none; }

@media (max-width: 760px) {
  .handyleiste {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.6rem;
    align-items: stretch;
    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 250, 247, 0.94);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--linie);
    box-shadow: 0 -8px 28px -18px rgba(22, 24, 29, 0.4);
  }
  .handyleiste a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 48px;
    padding: 0 1rem;
    border-radius: 10px;
    font-family: var(--f-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
  }
  .handyleiste__tel {
    color: var(--tinte);
    background: var(--flaeche);
    border: 1px solid var(--linie-stark);
  }
  .handyleiste__tel svg { width: 18px; height: 18px; flex: none; }
  .handyleiste__cta {
    color: #fff;
    background: linear-gradient(180deg, #D2451A, var(--akzent));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 16px -8px rgba(150, 40, 11, 0.7);
  }
  .handyleiste a:active { transform: translateY(1px); }
  /* Platz, damit die Leiste die Fußzeile nicht überdeckt */
  .fuss { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .handyleiste a:active { transform: none; }
}

/* --- DIE WENDE: ein Beleg, den man ansehen kann --------------------------- */
/* Die Zahl steht nicht mehr als Behauptung da, sondern als Messlatte:
   97 von 100 Strichen brennen. Gebaut, nicht bebildert. */

/* Runde 7b: Die große Überschrift ist raus — sie sagte dasselbe wie die Zahl
   darunter. Jetzt ist die Zahl der Satz. Kein Messbalken mehr: Der Beleg wirkt
   als Satz, in dem eine Zahl groß gesetzt ist, nicht als Diagramm. */
.wende__panel {
  max-width: 48em;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 4vw, 3.25rem);
}
.wende__marke { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.wende__beleg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
}
.wende__zahl {
  margin: 0;
  padding-right: clamp(1.5rem, 4vw, 3.25rem);
  border-right: 1px solid rgba(193, 59, 18, 0.22);
}
.wende__zahl b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--akzent);
}
.wende__zahl span {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinte-still);
}
.wende__satz {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  color: var(--tinte-leise);
}
.wende__satz strong { color: var(--tinte); font-weight: 600; }
.wende__quelle {
  margin: 1.1rem 0 0;
  max-width: none;
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-still);
}
@media (max-width: 720px) {
  .wende__beleg { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
  .wende__zahl { padding-right: 0; padding-bottom: 1.25rem; border-right: 0; border-bottom: 1px solid rgba(193, 59, 18, 0.22); }
}

/* --- DIE METHODE: drei Reiter, eine Bühne, ein Sprung je Schritt ---------- */
/* Runde 6 stellte die drei Säulen untereinander. Beim Scrollen las man drei
   Mal dasselbe Muster. Jetzt hält eine Bühne den Platz, und der Scroll
   springt zwischen den Reitern — die Reihenfolge wird dadurch sichtbar. */

.methode__kopf { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.methode__kopf h2 { max-width: 16em; }
.methode__kopf .vorspann { max-width: 58ch; }

.stufen { position: relative; }
.bewegung .stufen__stage {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(52px, 8vh, 80px);
  padding-bottom: clamp(12px, 2vh, 28px);
  overflow: clip;
}
.stufen__innen { width: 100%; }

/* Die Reiter: drei Namen, ein Läufer, der mitspringt. */
.reiter {
  position: relative;
  list-style: none;
  margin: 0 0 clamp(1.75rem, 3.2vw, 2.75rem);
  padding: 0.4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--linie);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(22, 24, 29, 0.04);
}
.reiter li {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.65rem 0.5rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: clamp(0.8125rem, 1.15vw, 0.9375rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--tinte-still);
  transition: color 320ms ease;
}
.reiter li i {
  font-style: normal;
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--linie-stark);
  transition: color 320ms ease;
}
.reiter__laeufer {
  position: absolute;
  z-index: 0;
  top: 0.4rem; bottom: 0.4rem;
  left: 0.4rem;
  width: calc((100% - 0.8rem - 0.5rem) / 3);
  border-radius: 999px;
  background: var(--flaeche);
  border: 1px solid rgba(228, 87, 46, 0.35);
  box-shadow: 0 1px 2px rgba(22, 24, 29, 0.06), 0 10px 22px -14px rgba(150, 40, 11, 0.55);
  transform: translateX(calc(var(--stufe, 0) * (100% + 0.25rem)));
}
/* Der Sprung: --sc-p schaltet in zwei schmalen Fenstern von 0 auf 1 auf 2. */
.bewegung .stufen {
  --stufe: calc(
    clamp(0, calc((var(--sc-p, 0) - 0.32) / 0.05), 1) +
    clamp(0, calc((var(--sc-p, 0) - 0.67) / 0.05), 1)
  );
}
.bewegung .reiter li[data-r="1"] { --an: clamp(0, calc((0.35 - var(--sc-p, 0)) / 0.05), 1); }
.bewegung .reiter li[data-r="2"] { --an: min(1, clamp(0, calc((var(--sc-p, 0) - 0.33) / 0.05), 1) * clamp(0, calc((0.7 - var(--sc-p, 0)) / 0.05), 1)); }
.bewegung .reiter li[data-r="3"] { --an: clamp(0, calc((var(--sc-p, 0) - 0.68) / 0.05), 1); }
.bewegung .reiter li { color: color-mix(in srgb, var(--akzent) calc(var(--an, 0) * 100%), var(--tinte-still)); }
.bewegung .reiter li i { color: color-mix(in srgb, var(--akzent) calc(var(--an, 0) * 100%), var(--linie-stark)); }

/* Das Deck: drei Karten auf demselben Platz. */
.stufen__deck { display: grid; gap: clamp(3.5rem, 7vw, 6rem); }
.bewegung .stufen__deck {
  display: grid;
  grid-template-areas: "karte";
  align-items: center;
}

.stufe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.bewegung .stufen__deck .stufe { grid-area: karte; align-content: center; }
.stufe--gedreht .stufe__text { order: 2; }

.stufe__nr {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.1rem;
  max-width: none;
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent);
}
/* Im gepinnten Zustand tragen die Reiter die Nummerierung — die Zeile
   darunter wäre die zweite Ansage desselben. */
.bewegung .stufen__deck .stufe__nr { display: none; }
.stufe__nr span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  border: 1.5px solid rgba(228, 87, 46, 0.4);
  background: var(--akzent-grund);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}
.stufe h3 {
  font-size: clamp(1.4375rem, 2.9vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  max-width: 13em;
  margin-bottom: 1.3rem;
}
.stufe__text > p { color: var(--tinte-leise); max-width: 34em; }

/* Der Beleg: die Zahl links am Rand, der Satz daneben, die Quelle darunter. */
.stufe__zahl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 1.2rem;
  margin: clamp(1.4rem, 2.6vw, 2rem) 0 0;
  padding: 1.15rem 1.4rem 1.25rem;
  max-width: 34em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78));
  border: 1px solid var(--linie);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(22, 24, 29, 0.04), 0 18px 40px -32px rgba(22, 24, 29, 0.5);
}
.stufe__zahl::before {
  content: "";
  grid-row: 1 / span 1;
  grid-column: 1;
  display: none;
}
.stufe__zahl b {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--akzent);
  line-height: 0.95;
  white-space: nowrap;
  padding-right: 1.2rem;
  border-right: 1px solid var(--linie);
}
.stufe__zahl > span {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tinte-leise);
}
.stufe__zahl em {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--f-display);
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-still);
}

/* Im gepinnten Zustand muss die gebaute Grafik in die Bildschirmhöhe passen */
.bewegung .stufen__deck .stufe__bild { max-height: 46svh; display: flex; align-items: center; }
.bewegung .stufen__deck .mg { width: 100%; }

@media (max-width: 1040px) {
  /* Der Platz reicht nicht mehr für Ziffer und Wort — das Wort trägt mehr. */
  .reiter li i { display: none; }
  .reiter li { padding-inline: 0.35rem; }
}
@media (max-width: 900px) {
  /* Auf dem Handy wird nicht gepinnt: drei Säulen untereinander wie bisher. */
  .stufen { height: auto !important; }
  .bewegung .stufen__stage { height: auto !important; overflow: visible !important; display: block !important; }
  .bewegung .stufen__deck { grid-template-areas: none !important; }
  .bewegung .stufen__deck .stufe { grid-area: auto !important; opacity: 1 !important; transform: none !important; }
  .bewegung .stufen__deck .stufe__nr { display: flex !important; }
  .bewegung .stufen__deck .stufe__bild { max-height: none; display: block; }
  .reiter { display: none; }
  .stufe { grid-template-columns: 1fr; gap: 2.25rem; }
  .stufe--gedreht .stufe__text { order: 0; }
  .stufe h3 { max-width: 14em; }
}

/* --- DER ABLAUF: die 48-Stunden-Zeitachse, waagerecht abgefahren ---------- */
/* Runde 6 hatte hier eine senkrechte Schiene mit vier Punkten und einen
   Kartenstapel — dieselbe Anordnung wie beim Vorbild, und dieselbe wie in
   der Methode zwei Sektionen weiter oben. Runde 7 dreht sie um 90 Grad:
   Die Zeit läuft nach rechts, die vier Schritte fahren an ihr vorbei.
   Nebeneffekt: Jede Karte ist so hoch wie der Platz, den sie hat — der
   angeschnittene erste Schritt aus Runde 6 kann nicht mehr entstehen. */

.ablauf {
  position: relative;
  padding-block: var(--sektion);
  overflow: clip;
  background:
    radial-gradient(70rem 50rem at 50% -10%, rgba(228, 87, 46, 0.07), transparent 62%),
    radial-gradient(50rem 40rem at 6% 108%, rgba(22, 24, 29, 0.05), transparent 60%),
    var(--grund-tief);
}
.bewegung .ablauf { padding-block: 0; }
.bewegung .ablauf__stage {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  /* Die Kopfzeile liegt über der Bühne — ohne diesen Streifen rutscht die
     Überschrift darunter, sobald die Sektion einrastet. */
  padding-top: clamp(52px, 8vh, 80px);
  padding-bottom: clamp(12px, 2vh, 28px);
  overflow: clip;
}

.ablauf__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: end;
  margin-bottom: 0;
}
.ablauf__titel .marke { margin-bottom: 0.85rem; }
.ablauf__kopf h2 {
  max-width: 14em;
  font-size: clamp(1.75rem, 3.9vw, 3rem);
}
.bewegung .ablauf__kopf h2 { font-size: clamp(1.625rem, 3.1vw, 2.375rem); }
.bewegung .ablauf__titel .marke { margin-bottom: 0.6rem; }
.konten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem;
  flex-shrink: 0;
}
.konten li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
  color: var(--tinte-still);
}
.konten b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--akzent);
}

/* Die Zeitachse: eine Linie, die mit dem Scroll voll läuft, vier Stationen. */
.zeitachse { position: relative; padding-top: 0.35rem; }
.zeitachse__spur {
  position: absolute;
  top: 0.75rem; left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--linie-stark);
  overflow: hidden;
}
.zeitachse__fuellung {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--akzent), var(--akzent-voll));
  transform-origin: left;
  transform: scaleX(var(--sc-p, 0));
}
.zeitachse__stationen {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.zeitachse__stationen li {
  display: grid;
  justify-items: start;
  gap: 0.15rem;
  padding-right: 1rem;
}
.zeitachse__stationen li i {
  width: 11px; height: 11px;
  margin-bottom: 0.55rem;
  border-radius: 50%;
  background: var(--grund-tief);
  border: 2px solid var(--linie-stark);
  box-shadow: 0 0 0 4px var(--grund-tief);
  transform: scale(calc(1 + 0.28 * var(--an, 0)));
}
.zeitachse__stationen li b {
  font-family: var(--f-display);
  font-size: clamp(0.8125rem, 1.15vw, 0.9375rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--tinte-still);
}
.zeitachse__stationen li span {
  font-family: var(--f-display);
  font-size: 0.71875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--tinte-still);
  opacity: 0.75;
}
.bewegung .zeitachse__stationen li[data-z="1"] { --an: clamp(0, calc((0.24 - var(--sc-p, 0)) / 0.08), 1); }
.bewegung .zeitachse__stationen li[data-z="2"] { --an: min(1, clamp(0, calc((var(--sc-p, 0) - 0.2) / 0.08), 1) * clamp(0, calc((0.5 - var(--sc-p, 0)) / 0.08), 1)); }
.bewegung .zeitachse__stationen li[data-z="3"] { --an: min(1, clamp(0, calc((var(--sc-p, 0) - 0.46) / 0.08), 1) * clamp(0, calc((0.76 - var(--sc-p, 0)) / 0.08), 1)); }
.bewegung .zeitachse__stationen li[data-z="4"] { --an: clamp(0, calc((var(--sc-p, 0) - 0.72) / 0.08), 1); }
.bewegung .zeitachse__stationen li i {
  border-color: color-mix(in srgb, var(--akzent) calc(var(--an, 0) * 100%), var(--linie-stark));
  background: color-mix(in srgb, var(--akzent) calc(var(--an, 0) * 100%), var(--grund-tief));
}
.bewegung .zeitachse__stationen li b { color: color-mix(in srgb, var(--tinte) calc(var(--an, 0) * 100%), var(--tinte-still)); }

/* Der Streifen: vier Karten nebeneinander, die Engine schiebt ihn nach links. */
.streifen {
  --karte: min(1176px, calc(100vw - 2 * var(--rand) - 72px));
  --luecke: 24px;
  display: flex;
  gap: var(--luecke);
  width: max-content;
  /* Die erste Karte beginnt exakt an der Textkante der Bahn darüber. */
  padding-left: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
  padding-right: var(--rand);
  padding-block: 0.5rem;
  will-change: transform;
}
.streifen .tkarte { width: var(--karte); flex: none; }
.bewegung .streifen .tkarte { min-height: min(470px, 50svh); }

/* Vier Halte: --sc-p schaltet in drei schmalen Fenstern je eine Karte weiter.
   Zwischen den Fenstern steht der Streifen still — jede Karte bekommt ihren
   eigenen Moment, statt dass alle vier gleichmäßig vorbeiziehen. */
.bewegung .streifen {
  --halt: calc(
    clamp(0, calc((var(--sc-p, 0) - 0.16) / 0.1), 1) +
    clamp(0, calc((var(--sc-p, 0) - 0.42) / 0.1), 1) +
    clamp(0, calc((var(--sc-p, 0) - 0.68) / 0.1), 1)
  );
  transform: translate3d(calc(var(--halt) * (var(--karte) + var(--luecke)) * -1), 0, 0);
}

.tkarte {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
  gap: clamp(1.5rem, 3.4vw, 3.25rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  background: linear-gradient(150deg, #FFFFFF 0%, #FFFFFF 58%, #FDF7F3 100%);
  border: 1px solid var(--linie);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(22, 24, 29, 0.05),
    0 14px 30px -16px rgba(22, 24, 29, 0.16),
    0 48px 84px -48px rgba(22, 24, 29, 0.3);
}
/* Die Nummer sitzt als Marke auf der Kante, nicht als Zeile im Text. */
.tkarte .tkarte__nr {
  position: absolute;
  top: 0; left: clamp(1.5rem, 3vw, 2.75rem);
  transform: translateY(-50%);
  margin: 0;
  max-width: none;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: var(--akzent);
  color: #fff;
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px -8px rgba(150, 40, 11, 0.7);
}
.tkarte h3 {
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.13;
  max-width: 12em;
  margin-bottom: 1.1rem;
}
.tkarte__text > p { color: var(--tinte-leise); max-width: 32em; }
.tkarte__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.4rem 0 0;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--grund);
  font-family: var(--f-display);
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tinte-still);
}

/* Der Hinweis, dass es seitwärts weitergeht — sonst sucht niemand danach. */
.ablauf__stage::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: clamp(36px, 6vw, 108px);
  background: linear-gradient(90deg, rgba(241, 241, 236, 0), rgba(241, 241, 236, 0.92) 72%, var(--grund-tief));
  pointer-events: none;
  opacity: calc(1 - var(--sc-p, 0));
}

@media (max-width: 900px) {
  /* Auf dem Handy fährt nichts seitwärts: vier Karten untereinander. */
  .ablauf { height: auto !important; padding-block: var(--sektion) !important; }
  .bewegung .ablauf__stage { height: auto !important; overflow: visible !important; display: block !important; }
  .ablauf__stage::after { display: none; }
  .ablauf__kopf { grid-template-columns: 1fr; align-items: start; }
  .konten { justify-content: flex-start; margin-top: 1.25rem; }
  .zeitachse { display: none; }
  .streifen {
    display: grid;
    width: auto;
    max-width: var(--breite);
    margin: 2.5rem auto 0;
    transform: none !important;
    padding-inline: var(--rand);
    gap: 2.5rem;
  }
  .streifen .tkarte { width: auto; }
  .tkarte { grid-template-columns: 1fr; gap: 1.75rem; padding-top: 2.25rem; }
  .tkarte h3 { max-width: 14em; }
}

/* --- DIE PREISTAFEL: eine Zahl, drei Größen, ein gemeinsames Band --------- */
/* Runde 6 wiederholte in jeder Karte, was in jeder Größe drinsteckt. Dadurch
   verglich der Leser Listen statt Größen und der Blick blieb an dem hängen,
   was ohnehin überall gilt. Runde 7 zieht das Gemeinsame unter die Tafel:
   Oben steht nur noch, was sich unterscheidet. Darunter das volle Paket,
   und daneben, was es bis zur Entscheidung kostet — nämlich nichts. */

.preise {
  background:
    radial-gradient(58rem 42rem at 88% 0%, rgba(228, 87, 46, 0.06), transparent 60%),
    var(--grund);
}
.preise .kopfblock { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.preise .kopfblock h2 { max-width: 17em; }

.tafel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  align-items: stretch;
}
.tafel__karte {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--flaeche), rgba(255, 255, 255, 0.72));
  padding: clamp(1.5rem, 2.4vw, 2rem);
  box-shadow: 0 1px 2px rgba(22, 24, 29, 0.04), 0 20px 44px -36px rgba(22, 24, 29, 0.45);
}
/* Die Empfehlung steht höher, trägt die Farbe und wirft den tieferen Schatten. */
.tafel__karte--mitte {
  border-color: rgba(228, 87, 46, 0.45);
  background: linear-gradient(180deg, #FFFFFF, #FFF7F3);
  box-shadow:
    0 0 0 1px rgba(228, 87, 46, 0.35),
    0 2px 4px rgba(150, 40, 11, 0.06),
    0 30px 64px -34px rgba(150, 40, 11, 0.5);
}
@media (min-width: 901px) {
  .tafel__karte--mitte { margin-block: -0.75rem -0.75rem; padding-block: calc(clamp(1.5rem, 2.4vw, 2rem) + 0.75rem); }
}
.tafel__band {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--akzent);
  color: #fff;
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -10px rgba(150, 40, 11, 0.8);
}
.tafel__wer {
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinte-still);
  margin: 0 0 0.5rem;
}
.tafel__karte--mitte .tafel__wer { color: var(--akzent); }
.tafel__umfang {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--tinte);
  margin: 0 0 1.15rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--linie);
}
.tafel__preis {
  font-family: var(--f-display);
  margin: 0 0 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.tafel__preis b {
  font-size: clamp(2.125rem, 4.4vw, 2.875rem);
  font-weight: 700;
  letter-spacing: -0.038em;
  color: var(--tinte);
  line-height: 0.95;
}
.tafel__karte--mitte .tafel__preis b { color: var(--akzent); }
.tafel__preis span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-still);
}
.tafel__satz {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinte-leise);
  margin: 0 0 1.25rem;
}
.tafel__liste { list-style: none; margin: auto 0 0; padding: 1.15rem 0 0; border-top: 1px solid var(--linie); display: grid; gap: 0.65rem; }
.tafel__liste li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--tinte-leise);
}
.tafel__liste li::before {
  content: "+";
  font-family: var(--f-mono);
  font-weight: 700;
  color: var(--akzent);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .tafel { grid-template-columns: 1fr; gap: 1.5rem; }
  .tafel__karte--mitte { margin-block: 0; }
  .enthalten__liste { grid-template-columns: 1fr 1fr; }
  .preise__unten { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .enthalten__liste { grid-template-columns: 1fr; }
}

/* --- DEINE BILDER: die Sektion wird selbst zum Passepartout --------------- */
/* Runde 6 setzte hier den zweispaltigen Kopf mit align-items:end ein. Die
   Überschrift saß dadurch unten, der Fließtext daneben oben — zwei Blöcke,
   die sich an keiner Kante trafen. Runde 7 hängt beide unter dieselbe Linie
   und rahmt die Fläche wie ein Bild: zwei Passepartout-Kanten und ein feines
   Korn, damit die warme Fläche nicht als leerer Farbfleck steht. */

.beweis {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(54rem 38rem at 94% 2%, rgba(228, 87, 46, 0.11), transparent 60%),
    radial-gradient(46rem 32rem at 0% 100%, rgba(228, 87, 46, 0.08), transparent 55%),
    linear-gradient(168deg, #F8F2E8 0%, #F5EEE2 48%, #F2E9DC 100%);
  border-radius: clamp(18px, 2.6vw, 30px);
  box-shadow:
    inset 0 0 0 1px rgba(150, 40, 11, 0.09),
    0 40px 90px -70px rgba(90, 50, 20, 0.65);
}
/* Die innere Kante des Passepartouts */
.beweis::before {
  content: "";
  position: absolute;
  inset: clamp(10px, 1.2vw, 18px);
  border: 1px solid rgba(150, 40, 11, 0.11);
  border-radius: clamp(10px, 1.8vw, 20px);
  pointer-events: none;
  z-index: 0;
}
/* Feines Korn: Papier statt Farbfläche. Ein einziges SVG, kein Bild-Ladevorgang. */
.beweis::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)' opacity='0.13'/%3E%3C/svg%3E");
}
.beweis > * { position: relative; z-index: 1; }

/* Der Kostenvergleich bekommt Luft und eine klare Gegenüberstellung */
.vergleich {
  max-width: 940px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  align-items: stretch;
}
.vergleich__karte {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  box-shadow: 0 1px 2px rgba(90, 50, 20, 0.05), 0 22px 48px -40px rgba(90, 50, 20, 0.6);
}
.vergleich__karte--alt { background: rgba(255, 255, 255, 0.6); }
.vergleich__karte--neu {
  background: linear-gradient(180deg, #FFFFFF, #FFF8F4);
  box-shadow:
    0 0 0 1px rgba(228, 87, 46, 0.45),
    0 24px 54px -34px rgba(150, 40, 11, 0.55);
}
.vergleich__fazit { margin-top: auto; }

.beweis__ehrlich {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(150, 40, 11, 0.13);
}

/* ==========================================================================
   RUNDE 7b — Dominics zweite Durchsicht, 29.08.2026
   ========================================================================== */

/* --- DER PREIS-UNTERBAU: ein offenes Band statt vier Kästen --------------- */
/* Vorher standen unter der Tafel drei weitere Kästen übereinander: das graue
   Leistungsfeld, der gestrichelte „Was nicht dazukommt"-Kasten mit vier
   Pillen darin, daneben die dunkle Karte. Fünf Rahmen auf einem Bildschirm.
   Jetzt trägt eine Linie, was vorher ein Kasten tragen musste, und die
   Zusage steht als durchgehender dunkler Streifen darunter. */

.leistungsband {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--linie-stark);
}
.leistungsband__spalte--nicht { padding-left: clamp(0rem, 3vw, 3rem); border-left: 1px solid var(--linie); }
.leistungsband__titel {
  margin: 0 0 clamp(1.1rem, 2vw, 1.6rem);
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent);
}
.leistungsband__spalte--nicht .leistungsband__titel { color: var(--tinte-still); }

.leistungsband__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem clamp(1.25rem, 3vw, 2.25rem);
}
.leistungsband__liste li {
  position: relative;
  padding-left: 1.65rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tinte-leise);
}
.leistungsband__liste li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.3em;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--akzent-grund);
  border: 1px solid rgba(228, 87, 46, 0.45);
}
.leistungsband__liste li::after {
  content: "";
  position: absolute;
  left: 4.5px; top: calc(0.3em + 5px);
  width: 6px; height: 3px;
  border-left: 1.6px solid var(--akzent);
  border-bottom: 1.6px solid var(--akzent);
  transform: rotate(-45deg);
}
.leistungsband__liste b {
  display: block;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--tinte);
}

/* Die Absagen brauchen keinen Haken und keine zweite Zeile */
.leistungsband__liste--nicht { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.leistungsband__liste--nicht li { font-family: var(--f-display); font-weight: 500; color: var(--tinte); }
.leistungsband__liste--nicht li::before {
  content: "\00d7";
  position: absolute;
  left: 0; top: 0;
  width: auto; height: auto;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: inherit;
  color: var(--linie-stark);
}
.leistungsband__liste--nicht li::after { content: none; }
.leistungsband__satz {
  margin: clamp(1.4rem, 2.6vw, 2rem) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--tinte-still);
  max-width: 34ch;
}

/* Der Abschluss ohne Kasten: Die Zusage steht als Satz auf dem Papier, der
   Knopf darunter. Ein voller dunkler Block wäre hier der zweite gewesen — die
   Zusage-Sektion direkt danach ist bereits dunkel und sagt dasselbe
   ausführlich. */
.preis__schluss {
  margin: clamp(2.25rem, 4.5vw, 3.5rem) auto 0;
  max-width: 40ch;
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--tinte-leise);
}
.preis__schluss b { color: var(--akzent); font-weight: 700; }
.preis__weg {
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.preis__weg .reibung { margin: 0; }

@media (max-width: 900px) {
  .leistungsband { grid-template-columns: 1fr; gap: 2.25rem; }
  .leistungsband__spalte--nicht { padding-left: 0; padding-top: 2rem; border-left: 0; border-top: 1px solid var(--linie); }
}
@media (max-width: 560px) {
  .leistungsband__liste { grid-template-columns: 1fr; }
}

/* --- DEINE BILDER: Kopf ohne Linie, Fläche ohne Leerlauf unten ----------- */
/* Die Linie über dem Kopf hing mit der Sektionsluft darüber in der Luft, und
   unter der zweiten Bilderkette blieb eine halbe Bildschirmhöhe leer. */
.beweis .kopfblock { max-width: 100%; }
.beweis .kopfblock h2 { max-width: 14em; }
.beweis { padding-bottom: clamp(3rem, 6vw, 5rem); }
.beweis > .bahn:last-child { padding-bottom: 0; }
.kette { margin-bottom: 0; }

/* ==========================================================================
   RUNDE 7 · DIE HANDYVERSION
   Stand: 30.08.2026

   Die Seite wurde am Rechner entworfen und danach eingeengt. Dabei sind
   Dinge stehen geblieben, die auf 390 Pixeln nicht mehr funktionieren:
   Bausteine, die sich überlagern, ein Hero, der das Bild zwei
   Bildschirmhöhen nach hinten schiebt, und Raster, die vierspaltig
   bleiben, obwohl kein Platz für vier Spalten da ist.

   Dieser Block ist die Gegenrichtung: erst das Handy, dann der Rest.
   Er steht am Ende der Datei, damit er gewinnt, ohne dass an gewachsenen
   Regeln weiter oben geschraubt werden muss.
   ========================================================================== */

/* --- 1 · Hero -------------------------------------------------------------
   Drei Dinge: der Stempel hängt am Bild statt an der Bühne (er lag vorher
   über dem Namen), die drei Belege rücken hinter das Bild, und der Text
   davor wird so gestrafft, dass das Bild noch im ersten Daumenschub steht.
   Der Rahmen ist nur auf dem Handy ein Bezugspunkt; am Rechner bleibt er
   durchsichtig, damit das randlose Vollbild von Runde 5 unberührt bleibt. */

@media (max-width: 960px) {
  .hero__rahmen { position: relative; }
  .stempel { right: 10px; bottom: 12px; }

  /* Die Kinder der Textspalte werden selbst zu Rasterfeldern, damit die
     Belege unter das Bild wandern können. */
  .hero__innen { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero__text { display: contents; }
  .hero .marke        { order: 1; }
  .hero h1            { order: 2; }
  .hero__unter        { order: 3; }
  .hero .knopf-zeile  { order: 4; }
  .hero__buehne       { order: 5; }
  .hero__belege       { order: 6; }

  .hero__innen { padding-block: clamp(40px, 6vh, 64px) clamp(56px, 8vh, 80px); }
  .hero .marke { letter-spacing: 0.14em; margin-bottom: 0.9rem; }
  .hero__unter { margin-top: 1.1rem; max-width: 34ch; font-size: 1.0625rem; }
  .hero .knopf-zeile { margin-top: 1.5rem; }
  .hero__buehne { margin-top: 2rem; max-width: none; }
  .hero__belege { margin-top: 1.6rem; gap: 0.5rem; }
}

/* Unter 620px stehen die Knöpfe übereinander und tragen den vollen Daumen. */
@media (max-width: 620px) {
  /* Gemessen (01.09., 390 px): "Deine neue Webseite." braucht bei 38 px
     372 px, die Bahn gibt 350 px — die Zeile riss nach "neue". Ab 34 px
     (331 px) steht jeder Satz auf seiner Zeile. 8.6vw laeuft bis 320 px
     runter, das Cap trifft bei 620 px nahtlos die 38 px der Basisregel. */
  .hero h1 { font-size: clamp(1.75rem, 8.6vw, 2.375rem); }
  .hero__unter { max-width: 22em; }
  .hero .knopf-zeile { display: grid; gap: 0.6rem; }
  .hero .knopf { width: 100%; justify-content: center; min-height: 52px; }
  .hero__belege li { width: 100%; padding: 0.5rem 0.95rem; font-size: 0.875rem; }
  .hero__belege b { font-size: 0.875rem; }
  .stempel { font-size: 0.875rem; padding: 0.55rem 0.9rem; }
  .stempel__haken { width: 19px; height: 19px; }
}

/* --- 2 · Der Vorspann-Strich hängt an der ersten Zeile ---------------------
   Bricht die Marke auf zwei Zeilen, saß der Strich vorher in der Mitte
   zwischen beiden und zeigte auf nichts. */

@media (max-width: 620px) {
  .marke { align-items: flex-start; gap: 0.6rem; }
  .marke::before { margin-top: 0.5em; }
  .kopfblock--mitte .marke::before,
  .kopfblock--mitte .marke::after { margin-top: 0.5em; }
}

/* --- 3 · Wie dein nächster Kunde sucht ------------------------------------
   Vier Erzählschritte laufen gegen ein Handy an. Der vierte Absatz ist der
   längste; er lief bisher hinter das Gerät und war ab der Hälfte nicht mehr
   lesbar. Statt Text zu opfern, wird alles ringsum knapper: weniger Luft
   oben, engere Überschrift, ein Schriftgrad kleiner. Das Gerät nimmt sich
   danach, was übrig bleibt — es wird dadurch nicht kleiner als vorher,
   weil es vorher schon vom Text erdrückt wurde. */

@media (max-width: 900px) {
  /* oben muss die Kopfzeile passen, sonst rutscht die Marke darunter */
  .bewegung .warum__raster { padding-block: max(78px, 8svh) var(--leiste-luft); gap: 1rem; }
  .warum__links h2 { font-size: clamp(1.3125rem, 5.2vw, 1.625rem); line-height: 1.16; }
  .bewegung .warum__texte { min-height: 11.5em; margin-top: 0.6rem; }
  .warum__texte > p { font-size: 1rem; line-height: 1.55; }
  .warum__schrittzahl { font-size: 1rem; }
  .warum__handy { max-height: none; }
}

/* --- 4 · Über mich: das Porträt darf den Lesefluss nicht anhalten ---------
   Das Bild ist 2:3 hoch. Über die volle Handybreite sind das mehr als
   500 Pixel Portrait am Stück, mitten im Text. Auf dem Handy steht es
   ruhiger im Verhältnis 4:5, der Ausschnitt bleibt auf dem Gesicht. */

@media (max-width: 620px) {
  .duo__bild img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; }
  .duo { gap: 2rem; }
}

/* --- 5 · Die Arbeiten: das Handy immer auf derselben Seite -----------------
   Am Rechner wechseln die Bühnen die Seite, und das kleine Gerät wechselt
   mit. Auf dem Handy stehen alle Bühnen gleich — das mitwandernde Gerät
   legte sich bei jedem zweiten Werk über die Überschrift im Bild. */

@media (max-width: 880px) {
  .werk:nth-child(even) .werk__phone { left: auto; right: clamp(-10px, -0.8vw, -6px); }
}

/* --- 6 · Die Preistafel: das Band braucht Luft ----------------------------
   „Meine Empfehlung" sitzt auf der Oberkante der mittleren Karte und ragt
   zur Hälfte heraus. Im einspaltigen Stapel stieß es an die Karte darüber. */

@media (max-width: 900px) {
  .tafel { gap: 2.5rem; }
  .tafel__karte--mitte { margin-top: 0.5rem; }
}

/* --- 7 · Die zweite Bilderkette ------------------------------------------
   Vier Spalten auf 342 Pixeln ergaben Bilder von neunzig Pixeln Breite, in
   denen ein Gesicht nicht mehr zu erkennen war. Auf dem Handy trägt die
   erste Zeile den Vergleich (Foto → KI-Bild), das dritte Bild steht
   darunter über die ganze Breite und flacher im Format. */

@media (max-width: 700px) {
  .kette__reihe { grid-template-columns: 1fr auto 1fr; gap: 0.75rem; }
  .kette__feld:last-child { grid-column: 1 / -1; margin-top: 0.5rem; }
  .kette__feld:last-child img { aspect-ratio: 16 / 10; }
  .kette__feld figcaption { font-size: 0.75rem; }
  .kette__pfeil svg { width: 26px; }
}

/* --- 8 · Die Handyleiste nimmt sich 72 Pixel vom unteren Rand -------------
   Sie liegt fest über allem. Was am unteren Rand einer festgehaltenen
   Sektion endet — das Gerät in „Wie dein nächster Kunde sucht", die
   Zeitachse im Ablauf — verschwand darunter. Eine Variable, damit die
   Höhe an einer Stelle steht. */

:root { --leiste-luft: 0px; }

@media (max-width: 760px) {
  :root { --leiste-luft: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* --- 9 · Die Geräteszene skaliert mit dem Gerät ----------------------------
   Der Schirm war in festen Pixeln gesetzt, das Gerät aber nicht: Sobald der
   Text daneben mehr Höhe brauchte, schrumpfte der Rahmen, während Schrift
   und Abstände darin stehen blieben — die Suchzeile brach ab, der
   Vergleich lief über den rechten Rand.

   Ab hier ist der Schirm ein Container und seine Maße hängen an seiner
   eigenen Breite (cqw). Ein Gerät von 200 Pixeln zeigt dieselbe Oberfläche
   wie heute; wird es schmaler, wird alles gleichmäßig kleiner statt
   angeschnitten. */

@media (max-width: 900px) {
  .warum__handy { container-type: inline-size; }

  .schirm__status { padding: 4.5cqw 6.5cqw 0; }
  .status__zeit { font-size: 5.75cqw; min-width: 2.4em; }
  .status__insel { width: 29%; height: 6.5cqw; top: 4.5cqw; }
  .s-netz { width: 6.5cqw; height: 4.5cqw; }
  .s-wlan { width: 6cqw; height: 4.5cqw; }
  .s-akku { width: 9.5cqw; height: 5cqw; }
  .status__symbole { gap: 1.75cqw; }

  .szene { padding: 17.5cqw 3.75cqw 6cqw; gap: 2.5cqw; }

  .app__kopf { gap: 2.25cqw; }
  .app__avatar { width: 12cqw; height: 12cqw; font-size: 5.5cqw; }
  .app__wer b { font-size: 5.75cqw; }
  .app__wer i { font-size: 4.5cqw; }
  .app__zurueck { width: 4.5cqw; }
  .chat__datum, .suche__meta { font-size: 4.5cqw; }
  .blase { font-size: 6cqw; padding: 2.25cqw 3cqw; }

  .suche__feld { font-size: 5.75cqw; padding: 2.1cqw 3.5cqw; gap: 2cqw; }
  .suche__feld svg { width: 4.5cqw; height: 4.5cqw; }
  .treffer { padding: 2.5cqw 3cqw; border-radius: 5cqw; gap: 1.5cqw; }
  .treffer b { font-size: 6cqw; }
  .treffer > span { font-size: 5.25cqw; }
  .treffer__sterne { font-size: 5cqw; }
  .treffer__fotos { gap: 1.5cqw; }
  .treffer__fotos i { height: 13cqw; }
  .treffer__aktionen { flex-wrap: wrap; gap: 1.5cqw; }
  .treffer__aktionen span { font-size: 4.5cqw; padding: 1cqw 3.5cqw; gap: 1.5cqw; }
  .treffer__aktionen svg { width: 4.5cqw; height: 4.5cqw; }

  .urteil__kopf { font-size: 5cqw; margin-bottom: 3.5cqw; }
  .urteil { gap: 2.75cqw; }
  .miniseite { padding: 2.25cqw; gap: 2.5cqw; border-radius: 4.5cqw; }
  .miniseite__leiste i { width: 2.5cqw; height: 2.5cqw; }
  .miniseite__sterne { font-size: 4cqw; }
  .miniseite__knopf { font-size: 4.25cqw; padding: 1.5cqw 0; }
  .miniseite--alt .miniseite__warn { font-size: 4cqw; }
  .miniseite__name { font-size: 4.5cqw; }
  .urteil__satz { font-size: 5.5cqw; line-height: 1.35; }

  .anruf__status { font-size: 5cqw; }
  .anruf__avatar { width: 27cqw; height: 27cqw; font-size: 9cqw; margin-top: 1cqw; }
  .anruf b { font-size: 8cqw; }
  .anruf__tasten { margin-top: 4.5cqw; gap: 3cqw; }
  .anruf__taste { width: 17cqw; }
  .anruf__ende { width: 20cqw; margin-top: 1.75cqw; }
  .schirm__heim { bottom: 2.5cqw; height: 1.5cqw; }
}

/* --- 10 · Der Rhythmus zwischen den Abschnitten ---------------------------
   62 Pixel oben und unten ergeben 124 Pixel Leerraum zwischen zwei
   Abschnitten — auf 844 Pixeln Bildschirmhöhe fast ein Sechstel für
   nichts. Am Rechner trägt diese Luft, auf dem Handy zerreißt sie den
   Lesefluss: Wer scrollt, sieht zwischendurch nur Papier. */

@media (max-width: 620px) {
  :root { --sektion: 46px; }
  .kopfblock > .vorspann { margin-top: 1.1rem; }
  .sektion h2 { text-wrap: pretty; }
}

/* --- 11 · Die Verwandlung füllt sich schneller ----------------------------
   Am Rechner stehen die drei Bilder nebeneinander, und die Fläche wirkt
   nie leer. Auf dem Handy liegen sie übereinander gestaffelt: Bis das
   zweite Bild kam, waren 270 Pixel Scrollweg vergangen, in denen zwei
   Drittel des Bildschirms leeres Papier waren. Dieselbe Choreografie,
   nur enger getaktet. */

@media (max-width: 860px) {
  .bewegung .verwandlung {
    --k1: clamp(0, calc((var(--sc-p, 1) - 0.05) / 0.12), 1);
    --k2: clamp(0, calc((var(--sc-p, 1) - 0.20) / 0.14), 1);
    --k3: clamp(0, calc((var(--sc-p, 1) - 0.40) / 0.14), 1);
  }
}

/* --- 12 · Die Etiketten auf den Beweisbildern -----------------------------
   „Seine Webseite" brach in der schmalen Kette auf zwei Zeilen und schob
   sich über das Bild darunter. */

@media (max-width: 700px) {
  .kette__feld .verwandlung__etikett {
    font-size: 0.5625rem;
    padding: 0.28rem 0.5rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
}

/* --- 13 · Was der Daumen treffen muss -------------------------------------
   Auf dem Handy zeigt niemand mit einer Maus. Alles, was angetippt wird,
   braucht 44 Pixel Höhe — das gilt auch für die Telefonnummer in der
   Kontaktkarte, die vorher ein 16 Pixel hoher Textlink war.
   Inline-Verweise mitten im Fließtext bleiben davon ausgenommen: dort
   würde eine vergrößerte Fläche den Absatz auseinanderziehen. */

@media (max-width: 760px) {
  .kopf .logo { min-height: 44px; }
  .kontakt__karte a[href^="tel:"],
  .fuss a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* --- 14 · Lesbarkeit der kleinen Schriften --------------------------------
   Bildunterschriften und Kartenetiketten waren am Rechner entworfen und
   auf dem Handy bei elf, zwölf Pixeln gelandet. Die Zielgruppe liest das
   im Feierabend auf dem Sofa, nicht am kalibrierten Schirm. */

@media (max-width: 620px) {
  .kette__feld figcaption,
  .verwandlung figcaption { font-size: 0.8125rem; }
  .vergleich__titel { font-size: 0.75rem; }
  .tafel__wer { font-size: 0.75rem; }
  .wende__quelle { font-size: 0.75rem; }
}


/* ==========================================================================
   RUNDE 8 · DIE HANDYANSICHT, ZWEITER DURCHGANG
   Stand: 30.08.2026

   Runde 7 hat die Handyversion begradigt. Was danach blieb, sind Stellen, an
   denen das Handy nicht nur enger ist als der Rechner, sondern anders
   funktioniert:

   1. Ein Gerät im Gerät kostet die Hälfte der Breite. Von dem nachgebauten
      iPhone blieb auf 390 Pixeln ein Rahmen von 157 Pixeln übrig, die
      Oberfläche darin landete bei neun Pixeln Schrift. Ein Tablet hilft an
      dieser Stelle nicht: hochkant ist es genauso breit wie das Handy, und
      quer passen weder ein Nachrichtenverlauf noch ein Anrufbildschirm
      hinein. Was hilft, ist den Gerätekörper wegzulassen und den Schirm die
      ganze Spalte nehmen zu lassen — Statusleiste und Dynamic Island
      bleiben, damit es ein iPhone bleibt.
   2. Drei Stufen mit je zwei Absätzen, einem Beleg und einer Grafik sind am
      Rechner drei Spalten und auf dem Handy dreieinhalb Bildschirmhöhen.
   3. Die Verwandlung stellte drei Bilder frei im Raum ab. Frei heißt auf
      einem Handy: Sie überlagern sich, sobald der Browser seine Leiste
      einblendet und svh etwas anderes bedeutet als beim Bauen.
   4. Vier Schritte ohne die Zeitachse daneben sind vier weiße Karten
      untereinander. Dass es eine Reihenfolge ist, stand nur noch im Wort.
   ========================================================================== */


/* --- 1 · Wer das baut: erst die Überschrift, dann das Gesicht -------------
   Das Porträt stand über allem und war das Erste, was von der Sektion zu
   sehen war — ein Bild ohne Anlass. Auf dem Handy löst sich die Textspalte
   auf (display: contents), damit ihre Teile sich um das Bild herum ordnen
   können: Marke, Überschrift, Bild, Text, Zahlen. */

@media (max-width: 860px) {
  .ueber .duo { display: flex; flex-direction: column; align-items: stretch; gap: 1.4rem; }
  .ueber .duo__text { display: contents; }
  .ueber .duo .marke         { order: 1; }
  .ueber .duo h2             { order: 2; margin-bottom: 0; }
  .ueber .duo__bild          { order: 3; width: min(240px, 64%); }
  .ueber .duo .ueber__fliess { order: 4; max-width: 34em; }
  .ueber .duo .stationen     { order: 5; margin-top: 0.4rem; }

  .ueber .duo__bild img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 14%; }
  .ueber .bildunterschrift { margin-top: 0.5rem; font-size: 0.8125rem; }
  .ueber .ueber__auf { margin-top: 0; }
  .ueber .ueber__fliess p + p { margin-top: 0.9rem; }
}

/* Die drei Stationen standen einspaltig als drei hohe Kacheln. Als Zeile
   tragen sie dasselbe und kosten ein Drittel der Höhe. */
@media (max-width: 620px) {
  .ueber .stationen li { padding: 0.8rem 1rem; }
  .ueber .stationen b { font-size: 1.0625rem; margin-bottom: 0; }
}


/* --- 2 · Wie dein nächster Kunde sucht: der Schirm statt des Geräts -------
   Der Gerätekörper fällt weg, der Schirm nimmt die volle Spalte. Aus 157
   Pixeln Bildbreite werden 334 — die Oberfläche darin ist danach nicht
   skaliert, sondern auf echte Lesegrößen gesetzt. Die Statusleiste, die
   Dynamic Island und die Home-Linie bleiben: Sie sind das, woran ein
   iPhone erkannt wird, nicht der schwarze Rand. */

@media (max-width: 700px) {
  /* Oben wird Höhe frei, damit der Schirm sie bekommt. */
  .bewegung .warum__raster { padding-block: max(76px, 8svh) var(--leiste-luft); gap: 0.8rem; }
  .warum__links h2 { font-size: clamp(1.25rem, 5vw, 1.5rem); line-height: 1.14; }
  .bewegung .warum__texte { min-height: 8.7em; margin-top: 0.5rem; }
  .warum__texte > p { font-size: 1rem; line-height: 1.5; }

  .warum__buehne { align-items: stretch; }
  .warum__handy {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    margin-inline: 0;
    padding: 4px;
    border-radius: 30px;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.16),
      0 2px 6px rgba(22, 24, 29, 0.16),
      0 20px 44px -22px rgba(22, 24, 29, 0.42);
  }
  .warum__handy .handy__tasten,
  .warum__handy::before { display: none; }
  .warum__schirm { border-radius: 26px; }

  /* Die Oberfläche hängt an einer einzigen Zahl.
     --e ist die Maßeinheit dieser Oberfläche. Sie wird aus der Höhe
     gerechnet, die nach Kopfzeile, Text und Handyleiste übrig bleibt: Auf
     einem hohen Gerät ist ein --e ein Pixel, auf einem flachen weniger.
     Dadurch schrumpft die Szene gleichmäßig, statt unten abgeschnitten zu
     werden — und es gibt nur eine Stelle zum Nachjustieren.

     Geprüft wird das bei 745 Pixeln Höhe, nicht bei 844. 844 ist die
     Gerätehöhe eines iPhone 15; in Safari gehen Adressleiste und
     Tableiste davon ab, und genau das ist 100svh. Wer bei 844 misst,
     baut rund hundert Pixel ein, die auf dem echten Gerät fehlen. */
  .warum__schirm { --e: clamp(0.8px, calc((100svh - 458px) / 290), 1.05px); }

  .schirm__status { padding: calc(11 * var(--e)) calc(17 * var(--e)) 0; }
  .status__zeit { font-size: calc(13 * var(--e)); min-width: 2.6em; }
  .status__insel { width: 25%; height: calc(21 * var(--e)); top: calc(9 * var(--e)); }
  .s-netz { width: calc(16 * var(--e)); height: calc(11 * var(--e)); }
  .s-wlan { width: calc(15 * var(--e)); height: calc(11 * var(--e)); }
  .s-akku { width: calc(24 * var(--e)); height: calc(12 * var(--e)); }
  .status__symbole { gap: calc(5 * var(--e)); }

  .szene { padding: calc(35 * var(--e)) calc(13 * var(--e)) calc(9 * var(--e)); gap: calc(4 * var(--e)); }

  /* Szene 1 · Nachrichten */
  .app__kopf { gap: calc(8 * var(--e)); }
  .app__avatar { width: calc(30 * var(--e)); height: calc(30 * var(--e)); font-size: calc(13 * var(--e)); }
  .app__wer b { font-size: calc(14.5 * var(--e)); }
  .app__wer i { font-size: calc(11 * var(--e)); }
  .app__zurueck { width: calc(9 * var(--e)); }
  .chat__datum { font-size: calc(11 * var(--e)); }
  .blase { font-size: calc(15 * var(--e)); padding: calc(8 * var(--e)) calc(12 * var(--e)); }

  /* Szene 2 · Google */
  .suche__feld { font-size: calc(14 * var(--e)); padding: calc(7 * var(--e)) calc(12 * var(--e)); gap: calc(7 * var(--e)); }
  .suche__feld svg { width: calc(14 * var(--e)); height: calc(14 * var(--e)); }
  .suche__meta { font-size: calc(11 * var(--e)); margin-block: 0; }
  .treffer { padding: calc(7 * var(--e)) calc(11 * var(--e)); border-radius: calc(12 * var(--e)); }
  .treffer b { font-size: calc(14.5 * var(--e)); }
  .treffer > span { font-size: calc(12.5 * var(--e)); }
  .treffer__sterne { font-size: calc(12 * var(--e)); }
  .treffer--blass { padding: calc(5 * var(--e)) calc(11 * var(--e)); }
  .treffer__fotos { gap: calc(5 * var(--e)); margin-top: calc(5 * var(--e)) !important; }
  .treffer__fotos i { height: calc(28 * var(--e)); border-radius: calc(7 * var(--e)); }
  .treffer__aktionen { gap: calc(6 * var(--e)); margin-top: calc(6 * var(--e)) !important; }
  .treffer__aktionen span { font-size: calc(11.5 * var(--e)); padding: calc(3 * var(--e)) calc(9 * var(--e)); gap: calc(5 * var(--e)); }
  .treffer__aktionen svg { width: calc(12 * var(--e)); height: calc(12 * var(--e)); }
  .tipp { width: calc(34 * var(--e)); height: calc(34 * var(--e)); bottom: calc(-11 * var(--e)); }

  /* Szene 3 · der Vergleich — zwei Miniseiten über die volle Spaltenbreite.
     Die Höhe der Miniseiten hängt an der Breite (aspect-ratio), nicht an
     --e; deshalb wird das Seitenverhältnis auf flachen Geräten flacher. */
  .szene[data-szene="3"] { justify-content: flex-start; padding-bottom: calc(13 * var(--e)); }
  .urteil__kopf { font-size: calc(12 * var(--e)); margin-bottom: calc(9 * var(--e)); }
  .urteil { gap: calc(10 * var(--e)); }
  .miniseite { height: calc(172 * var(--e)); aspect-ratio: auto; padding: calc(7 * var(--e)); gap: calc(5 * var(--e)); border-radius: calc(10 * var(--e)); }
  .miniseite__bild { height: calc(52 * var(--e)); aspect-ratio: auto; }
  .miniseite__leiste { margin: calc(-7 * var(--e)) calc(-7 * var(--e)) calc(2 * var(--e)); padding: calc(6 * var(--e)) calc(9 * var(--e)); }
  .miniseite__leiste i { width: calc(6 * var(--e)); height: calc(6 * var(--e)); }
  .miniseite b { height: calc(9 * var(--e)); }
  .miniseite s { height: calc(7 * var(--e)); }
  .miniseite__sterne { font-size: calc(11 * var(--e)); gap: calc(5 * var(--e)); }
  .miniseite__sterne i { font-size: calc(10 * var(--e)); }
  .miniseite__chips em { height: calc(13 * var(--e)); }
  .miniseite__knopf { font-size: calc(11 * var(--e)); padding: calc(7 * var(--e)); border-radius: calc(7 * var(--e)); }
  .miniseite__logo { width: calc(44 * var(--e)); height: calc(44 * var(--e)); aspect-ratio: auto; margin: calc(13 * var(--e)) auto calc(8 * var(--e)); }
  .miniseite--alt .miniseite__warn { font-size: calc(10.5 * var(--e)); padding: calc(6 * var(--e)) calc(4 * var(--e)); }
  .miniseite__name { font-size: calc(12 * var(--e)); margin-top: calc(6 * var(--e)); }
  /* Der Satz im Schirm stand fast wörtlich schon im Absatz daneben. Auf
     dem Handy stehen beide untereinander im selben Blick — einmal reicht,
     und die Miniseiten bekommen die Höhe. */
  .urteil__satz { display: none; }

  /* Szene 4 · der Anruf */
  .anruf { gap: calc(7 * var(--e)); }
  .anruf__status { font-size: calc(13 * var(--e)); }
  .anruf__avatar { width: calc(58 * var(--e)); height: calc(58 * var(--e)); font-size: calc(19 * var(--e)); margin-top: calc(2 * var(--e)); }
  .anruf b { font-size: calc(19 * var(--e)); }
  .anruf__tasten { margin-top: calc(9 * var(--e)); gap: calc(12 * var(--e)); }
  .anruf__taste { width: calc(38 * var(--e)); }
  .anruf__ende { width: calc(46 * var(--e)); margin-top: calc(5 * var(--e)); }
  .schirm__heim { display: none; }
}

/* Flache Geräte: In der Suchszene wird der dritte Treffer eher ganz
   weggelassen als halb angeschnitten — „Dein Betrieb, keine Webseite
   hinterlegt" ist der Satz, um den es in dieser Szene geht, und der muss
   vollständig zu sehen sein. */
@media (max-width: 700px) and (max-height: 700px) {
  .szene[data-szene="2"] .treffer:last-child { display: none; }
}

/* Kleine Geräte (SE, ältere Modelle): der Text gibt zuerst nach, nicht der
   Schirm — sonst wird die Oberfläche darin wieder unlesbar. */
@media (max-width: 700px) and (max-height: 730px) {
  .warum__links h2 { font-size: 1.1875rem; }
  .warum__texte > p, .warum__schrittzahl { font-size: 0.9375rem; }
  .bewegung .warum__texte { min-height: 8.6em; }
}


/* --- 3 · Die drei Stufen: dieselbe Aussage, ein Drittel kürzer ------------
   Am Rechner liegen Text und Grafik nebeneinander und teilen sich eine
   Bildschirmhöhe. Auf dem Handy stehen sie übereinander, und aus drei
   Spalten werden dreieinhalb Bildschirme. Gekürzt wird nicht das Argument,
   sondern was um das Argument herum steht: der Beleg wird eine Zeile statt
   einer Karte, die Grafik bekommt eine Deckelhöhe, die Abstände werden auf
   Handymaß gebracht. */

@media (max-width: 700px) {
  .stufen__deck { gap: 2.5rem; }
  .stufe { gap: 1.15rem; }
  .stufe h3 { font-size: clamp(1.3125rem, 5.4vw, 1.5rem); line-height: 1.16; margin-bottom: 0.7rem; max-width: 17em; }
  .stufe__text > p { font-size: 1rem; line-height: 1.55; }
  .stufe__nr { margin-bottom: 0.7rem; }

  /* Der Beleg: die Zahl bleibt groß, die Karte verschwindet. */
  .stufe__zahl {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 0.9rem;
    margin-top: 1.15rem;
    padding: 0.9rem 0 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--linie);
    border-radius: 0;
    box-shadow: none;
  }
  .stufe__zahl b { font-size: 1.625rem; padding-right: 0.9rem; }
  .stufe__zahl > span { font-size: 0.875rem; line-height: 1.45; }
  .stufe__zahl em { margin-top: 0.3rem; font-size: 0.625rem; }

  /* Die Grafik trägt hier nur noch die Idee, nicht die Bildschirmhöhe. */
  .stufe__bild .mg { max-width: 100%; }
  .mg--finden .mg__karte { padding: 0.9rem 0.9rem 0.7rem; }
  .mg__treffer li { min-height: 3.2rem; padding: 0.5rem 0.4rem 0.5rem 2.3rem; }
  .mg--waehlen .mg__browser { padding: 0.65rem; }
  .mg__foto { min-height: 0; }
  .mg--buchen .mg__telefon { padding: 1rem 1rem 0.9rem; border-radius: 18px; }
  .mg__fragen li { font-size: 0.8125rem; }
}


/* --- 4 · Die Verwandlung: ein Raster kann sich nicht überlagern -----------
   Bisher lagen die drei Bilder mit left/top/bottom frei auf der Bühne. Die
   Werte stimmen genau für die Bildschirmhöhe, auf der sie gesetzt wurden —
   blendet ein mobiler Browser seine Adressleiste ein, wandert das dritte
   Bild in das zweite. Auf dem Handy wird daraus ein festes Raster mit drei
   Zeilen. Die Choreografie bleibt (Selfie zuerst, dann das Porträt, dann
   das Arbeitsbild), nur trägt sie jetzt Reihen statt Koordinaten. */

@media (max-width: 860px) {
  .bewegung .verwandlung figcaption { font-size: 0.75rem; line-height: 1.35; margin-top: 0.4rem; }
  .bewegung .verwandlung .verwandlung__etikett { top: 7px; left: 7px; }
  .bewegung .verwandlung__innen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    align-content: center;
    gap: 0.7rem 0.85rem;
    height: 100%;
    padding: max(104px, 11svh) var(--rand) calc(var(--leiste-luft) + 10px);
  }
  .bewegung .verwandlung figure {
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
  }
  /* height steht pro Bild weiter unten; hier darf kein height:auto stehen,
     es hätte durch die höhere Spezifität (figure img) gewonnen. */
  .bewegung .verwandlung figure img { width: 100%; }

  .bewegung .verwandlung__quelle {
    grid-column: 1; grid-row: 1;
    align-self: end;
    opacity: var(--k1);
    transform: translateY(calc((1 - var(--k1)) * 20px)) rotate(-2deg);
  }
  /* Bisher bekam jedes Bild eine feste Hoehe und wurde zum Streifen: Aus
     einem Selfie blieb das Kinn uebrig. Jetzt gibt das Hochformat die Hoehe
     vor (4:5), eine Obergrenze in svh haelt die Buehne zusammen, und jedes
     Bild sagt selbst, wo das Gesicht sitzt. */
  .bewegung .verwandlung figure img {
    aspect-ratio: 4 / 5;
    height: auto;
    max-height: 23svh;
    object-fit: cover;
  }
  .bewegung .verwandlung__quelle img { object-position: 50% 16%; }

  .bewegung .verwandlung__bild--eins {
    grid-column: 2; grid-row: 1;
    opacity: var(--k2);
    transform: translateY(calc((1 - var(--k2)) * 20px)) rotate(-1.2deg);
  }
  .bewegung .verwandlung__bild--eins img { object-position: 50% 14%; }

  .bewegung .verwandlung__bild--zwei {
    grid-column: 1; grid-row: 2;
    opacity: var(--k3);
    transform: translateY(calc((1 - var(--k3)) * 20px)) rotate(0.8deg);
  }
  .bewegung .verwandlung__bild--zwei img { object-position: 50% 50%; }

  .bewegung .verwandlung__bild--drei {
    grid-column: 2; grid-row: 2;
    opacity: var(--k4);
    transform: translateY(calc((1 - var(--k4)) * 20px)) rotate(-1deg);
  }
  .bewegung .verwandlung__bild--drei img { object-position: 50% 50%; }

  .bewegung .verwandlung__bild--vier { display: none; }

  .bewegung .verwandlung__schluss {
    position: static;
    grid-column: 1 / -1; grid-row: 3;
    align-self: start;
    inset: auto;
    margin: 0.6rem 0 0;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.45;
    max-width: none;
    opacity: var(--k5);
  }
  .bewegung .verwandlung figcaption { font-size: 0.8125rem; margin-top: 0.4rem; line-height: 1.35; }
}


/* --- 5 · Vier Schritte: eine Reihe, keine vier Karten ---------------------
   Am Rechner fährt der Streifen seitwärts an einer Zeitachse entlang. Auf
   dem Handy fällt beides weg und übrig bleiben vier weiße Rechtecke. Die
   Schiene holt die Reihenfolge zurück: Die Nummer sitzt als Ziffer im Kreis
   auf der Kartenkante, und zwischen zwei Karten läuft die Linie weiter. */

@media (max-width: 900px) {
  .streifen { position: relative; gap: 2.75rem; }

  .tkarte {
    padding: 1.6rem 1.25rem 1.4rem;
    border-radius: 18px;
    gap: 1.4rem;
  }
  /* Aus der Pille „Schritt 01" wird die Ziffer im Kreis. */
  .tkarte .tkarte__nr {
    top: 0; left: 1.25rem;
    width: 38px; height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    border: 3px solid var(--grund-tief);
    box-shadow: 0 8px 18px -8px rgba(150, 40, 11, 0.8);
  }
  .tkarte .tkarte__nr em { display: none; }

  /* Die Linie von einer Karte zur nächsten. */
  .tkarte::after {
    content: "";
    position: absolute;
    left: calc(1.25rem + 19px - 1px);
    top: 100%;
    width: 2px;
    height: 2.75rem;
    background: linear-gradient(180deg, var(--akzent-voll), var(--linie-stark));
    opacity: 0.45;
  }
  .tkarte:last-child::after { display: none; }

  .tkarte h3 { font-size: clamp(1.3125rem, 5.4vw, 1.5rem); line-height: 1.16; margin-bottom: 0.8rem; max-width: 16em; }
  .tkarte__text > p { font-size: 1rem; line-height: 1.55; }
  .tkarte__meta { margin-top: 1.1rem; font-size: 0.78125rem; border-radius: 14px; line-height: 1.45; }

  /* Die gebaute Oberfläche bekommt eine eigene Fläche, damit sie als
     Bildschirm gelesen wird und nicht als Fortsetzung des Textes. */
  .tkarte__ui {
    padding: 0.9rem;
    border-radius: 14px;
    background: linear-gradient(165deg, #F6F5F1 0%, #FBF9F6 62%, #FDF3ED 100%);
    box-shadow: inset 0 0 0 1px rgba(22, 24, 29, 0.05);
  }
  .tkarte__ui .ui { background: #FFFFFF; }
  .tkarte__ui .ui--bau { background: none; border: 0; padding: 0.2rem; }

  /* Der Kopf: die zwei Konten nebeneinander in einer Zeile. Untereinander
     kosteten sie zwei Zeilen für vier Wörter. */
  .konten { gap: 0.5rem; margin-top: 1.1rem; }
  .konten li { padding: 0.5rem 0.75rem; gap: 0.35rem; font-size: 0.8125rem; white-space: nowrap; }
  .konten b { font-size: 0.875rem; }
}

@media (max-width: 560px) {
  .ui--bau { gap: 0.8rem; }
  .ui__ring { width: 74px; height: 74px; }
  .ui__liste li { font-size: 0.8125rem; }
}


/* --- 6 · Die zweite Fragengruppe: „Und wenn die Seite live ist?" ----------
   „Und danach?" war ein eigener Abschnitt mit sechs offen ausgebreiteten
   Karten — 229 Wörter, die auf dem Handy zweieinhalb Bildschirme kosteten,
   während direkt darunter 560 Wörter derselben Sorte ordentlich hinter
   einem Aufklapper lagen. Jetzt liegen beide dort. Die Zwischenüberschrift
   sagt, was „danach" heißt, damit niemand raten muss: die Zeit nach dem
   Start, wenn die Seite live ist. */

.haken__gruppe {
  max-width: 840px;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 2px solid var(--linie-stark);
  scroll-margin-top: 96px;
}
.haken__gruppe-titel {
  font-family: var(--f-display);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--tinte);
  margin: 0;
  max-width: none;
}
.haken__gruppe-text {
  margin: 0.65rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinte-leise);
  max-width: 56ch;
}
.haken__gruppe + .haken__liste { margin-top: 1.75rem; }

@media (max-width: 620px) {
  .haken__gruppe { margin-top: 2.5rem; padding-top: 1.75rem; scroll-margin-top: 80px; }
  .haken__gruppe-text { font-size: 1rem; }
  .haken__gruppe + .haken__liste { margin-top: 1.25rem; }
}


/* ==========================================================================
   RUNDE 8 · BILDER IN DER TROCKENEN STRECKE
   Stand: 30.08.2026

   Zwischen „Vier Schritte" und dem Formular lagen neunzehn Handy-Bildschirme
   mit einem einzigen Foto: Ablauf, Preis, Zusage, Absage, Fragen — alles
   Typografie und gezeichnete Oberflächen. Genau dort fällt die Entscheidung.
   Zwei randlose Bänder brechen die Wand auf, ohne einen Satz zu kosten:
   eines vor dem Ablauf (die zwei Tage, in denen nichts von dir verlangt
   wird), eines vor dem Preis (von Hand gebaut). Dazu das Telefonbild über
   den Fragen.

   Randlos, weil die Bänder Luft sein sollen und kein weiterer Kasten. Die
   dunkle Sektion „Zusage" ist der Beleg, dass das zur Seite passt.
   ========================================================================== */

.bildband {
  position: relative;
  margin: 0;
  overflow: clip;
  background: var(--buehne);
  line-height: 0;
}
.bildband img {
  display: block;
  width: 100%;
  height: clamp(300px, 44vh, 520px);
  object-fit: cover;
}
.bildband--hell { background: var(--grund-tief); }

/* Die Kennzeichnung sitzt in der Ecke des Bildes. Sie muss auf einem
   dunklen Abendbild genauso lesbar sein wie auf einer hellen Tischplatte,
   deshalb trägt sie ihren eigenen Grund mit. */

/* Auf dem Handy trägt das Hochformat: Aus einem 44vh hohen Streifen wird
   ein Bild, das sich sehen lassen kann, statt ein Sehschlitz. */
@media (max-width: 760px) {
  .bildband img { height: clamp(360px, 57svh, 500px); }
  .bildband .ki-notiz--auf { right: 16px; }
}

/* --- Das Telefonbild über den Fragen -------------------------------------
   Sechzehn Fragen untereinander sind eine Wand aus Überschriften. Der
   Abschnitt heißt „Fragen, die im Gespräch immer kommen" — also steht das
   Gespräch darüber, in derselben Breite wie die Fragen darunter. */

.fragenbild {
  max-width: 840px;
  margin: clamp(2.25rem, 4vw, 3rem) auto 0;
}
.fragenbild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 34%;
  border-radius: var(--radius);
  box-shadow:
    0 1px 2px rgba(22, 24, 29, 0.05),
    0 18px 40px -28px rgba(22, 24, 29, 0.45);
}
.fragenbild figcaption {
  margin-top: 0.85rem;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tinte-still);
  text-align: center;
}

@media (max-width: 620px) {
  .fragenbild img { aspect-ratio: 4 / 3; object-position: 56% 30%; }
  .fragenbild figcaption { font-size: 0.875rem; text-align: left; }
}


/* ==========================================================================
   RUNDE 8 · DIE HANDYVERSION, ZWEITER DURCHGANG
   Stand: 30.08.2026

   Vier Beobachtungen vom Gerät, alle vier vom selben Grundfehler: Auf dem
   Rechner trägt die Fläche den Übergang, auf dem Handy sieht der Leser
   immer nur einen Ausschnitt. Was am Rechner Luft ist, ist auf dem Handy
   ein leerer Bildschirm.
   ========================================================================== */

/* --- 1 · Die Verwandlung beginnt nicht mit einer leeren Bühne -------------
   Die Bühne ist eine ganze Bildschirmhöhe hoch und schiebt sich von unten
   ins Bild, bevor das Pinning greift. Solange sie einfährt, steht --sc-p
   auf 0 — und weil das Selfie erst ab 0,05 aufblendete, scrollte der Leser
   745 Pixel durch nichts. Das Ausgangsfoto ist kein Effekt, es ist der
   Anfang der Geschichte: Es steht da, sobald die Bühne da ist. Erst das
   Porträt und das Arbeitsbild kommen im Pin dazu. */

@media (max-width: 860px) {
  .bewegung .verwandlung {
    --k1: 1;
    --k2: clamp(0, calc((var(--sc-p, 1) - 0.04) / 0.13), 1);
    --k3: clamp(0, calc((var(--sc-p, 1) - 0.26) / 0.14), 1);
    --k4: clamp(0, calc((var(--sc-p, 1) - 0.48) / 0.14), 1);
    --k5: clamp(0, calc((var(--sc-p, 1) - 0.68) / 0.14), 1);
  }
  /* Der Schlusssatz saß 127 Pixel über der Bühnenkante, danach kam die
     nächste Kette: zusammen eine Lücke, in der die Seite aufhört. */
  .bewegung .verwandlung__innen {
    padding-bottom: calc(var(--leiste-luft) - 18px);
  }
}

/* --- 2 · Der zweite Kunde fängt sichtbar an ------------------------------
   „Zweiter Kunde, gleicher Weg" stand als fetter Satz in der Fläche. Nach
   dem Pin las sich das wie ein Nachsatz zum ersten Beispiel, nicht wie ein
   zweites. Jetzt trennt eine Linie, und die Marke sagt, was kommt. */

.kette {
  margin-top: 3.5rem;
  border-top: 1px solid var(--linie);
  padding-top: 2rem;
}
.kette .marke { margin-bottom: 0.9rem; }
.kette__titel { margin-bottom: 1.5rem; }

@media (max-width: 860px) {
  .kette { margin-top: 1.75rem; padding-top: 1.6rem; }
  .kette .marke { font-size: 0.6875rem; letter-spacing: 0.18em; margin-bottom: 0.7rem; }
  .kette__titel { font-size: 1rem; margin-bottom: 1.1rem; }
}

/* --- 3 · Die Naht zwischen zwei hellen Abschnitten ------------------------
   Am Ende der Seite folgen drei helle Abschnitte aufeinander: „Für wen ich
   nicht der Richtige bin", „Wo ist der Haken?", „Der nächste Schritt".
   Der Seitengrund wandert zwischen ihnen weich von #FAFAF7 nach #F1F1EC —
   auf dem Rechner ein Stimmungswechsel, auf dem Handy unsichtbar. Übrig
   blieb eine große Lücke, und danach sah alles aus wie vorher.

   Drei Handgriffe, alle nur auf dem Handy: Jeder Abschnitt bekommt seinen
   eigenen Grund, damit an der Kante eine echte Kante steht. Darüber liegt
   eine Haarlinie über die volle Breite. Und der Abstand wird ungleich —
   viel Luft davor, wenig danach —, damit die Marke am Kopf zur Linie
   gehört statt in der Mitte des Nichts zu schweben. */

@media (max-width: 900px) {
  .naht {
    border-top: 1px solid var(--linie);
    padding-top: 2.25rem;
    padding-bottom: 3.5rem;
  }
  #nichtfuer.naht { background: var(--grund-tief); }
  #haken.naht     { background: var(--grund); }
  #kontakt.naht   { background: var(--grund-tief); }

  /* Die letzte Frage schließt mit einer Linie ab. Zwei Haarlinien kurz
     hintereinander lesen sich wie eine leere Zeile — also endet die Liste
     offen und die Naht trennt. */
  #haken .haken__liste:last-of-type .frage:last-child { border-bottom: 0; }
}


/* --- Der KI-Nachweis: eine Bildzeile, kein Aufkleber ----------------------
   Stand: 30.08.2026

   Art. 50 Abs. 4 KI-VO verlangt einen Hinweis, der beim ersten Sehen da
   ist. Er verlangt nicht, dass er ins Auge springt. Das alte Etikett tat
   beides falsch: Versalien, Mono, gesperrt, Kasten, Rahmen, Weichzeichner
   dahinter — die Bildsprache eines Warnaufklebers. Und es saß nur auf
   manchen Bildern, also war jedes Vorkommen eine Überraschung.

   Jetzt die Form, die jede Zeitung für Bildnachweise benutzt: klein,
   grau, an der Bildkante, überall dieselbe. Gleichförmigkeit ist das,
   was das Auge abschalten lässt — zehn leise Zeilen fallen weniger auf
   als drei laute Etiketten.

   Der Kontrast bleibt bei 5,5:1 (--tinte-still auf Papier). Leise heißt
   leise, nicht versteckt; darunter wäre es weder lesbar noch zulässig. */

.ki-notiz {
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinte-still);
  white-space: nowrap;
}

/* An eine vorhandene Bildunterschrift gehängt: keine neue Zeile, keine
   neue Höhe — der Nachweis reiht sich hinter den Text wie ein Fotocredit. */
.ki-notiz--an { margin-left: 0.45rem; }
.ki-notiz--an::before {
  content: "·";
  margin-right: 0.45rem;
  color: var(--linie-stark);
}

/* Auf dem Bild — aber nur dort, wo der Untergrund es trägt.
   Nachgemessen wurde jede Ecke einzeln: Hero unten links (Holztisch),
   Nacht-Band unten rechts (dunkle Wand), Bau-Band unten rechts (Eiche) —
   dort steht Weiß sauber. Bei den übrigen drei Bildern ist die Ecke hell
   (weißes Hemd, helle Wand) oder 64 Pixel klein; dort bleibt der Nachweis
   in der Textzeile, die ohnehin unter dem Bild steht. Kein Kasten, kein
   Schatten-Hof — nur ein weicher Schlagschatten, der die Zeile auf
   mittelhellem Holz hält. */
/* Auf dem Foto braucht die Zeile einen eigenen Grund. Nachgerechnet, nicht
   nach Augenmaß: Damit kleine Schrift lesbar bleibt, muss der Untergrund
   unter ihr auf höchstens 18 % Helligkeit kommen. Eine helle Bildstelle —
   ein weißer Ärmel, helle Eiche — schafft das nur mit einem Plättchen.
   Ein weicher Verlauf statt eines Plättchens müsste dieselben 80 % Schwärze
   aufbringen und wäre als dunkler Balken sichtbar; das Plättchen ist
   46 × 17 Pixel groß und damit die leisere Lösung.

   Randlos, in der Markentinte statt in Schwarz, 4 px Radius. Auf dunklen
   Bildecken verschwindet es vollständig. Die Schrift steht auf 72 % Weiß
   und liegt damit knapp über der Lesbarkeitsschwelle — weicher geht nicht,
   ohne dass der Nachweis aufhört, einer zu sein. */
.ki-notiz--auf {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 3;
  line-height: 1;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(22, 24, 29, 0.86);
  border-radius: 4px;
  padding: 0.28rem 0.42rem;
}

/* Die Ecke wird je Bild so gewählt, dass sie ohnehin dunkel ist — dann
   sieht man das Plättchen gar nicht erst. Beim Porträt ist das links
   (schwarzer Pullover), beim Hero ebenfalls links, weil rechts der
   48-Stunden-Stempel sitzt. */
.bildmarke { position: relative; display: block; }
.bildmarke--links .ki-notiz--auf { left: 12px; right: auto; }

/* Der Hero-Nachweis braucht zwei Auszeichnungen, und das hat einen Grund.
   Ab 1200 px füllt das Bild die ganze Sektion und liegt UNTER dem Schleier,
   der links das Papier deckt und unten in den Grund ausläuft. Das Bild
   eröffnet damit einen eigenen Stapelkontext: Was darin liegt, kommt nicht
   über den Schleier, egal welche z-index-Zahl daran steht — es wird
   überstrichen und ist weg. Also liegt die Breitband-Fassung neben dem
   Bild statt darin. Immer nur eine der beiden ist im Dokument sichtbar. */

.hero__nachweis {
  position: absolute;
  z-index: 3;
  margin: 0;
  line-height: 1;
}

/* Im Bild, unten links: unten rechts sitzt der 48-Stunden-Stempel, und
   zwei Dinge in derselben Ecke sind ein Knoten. */
.hero__nachweis--im-bild {
  left: 12px;
  bottom: 10px;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(22, 24, 29, 0.86);
  border-radius: 4px;
  padding: 0.28rem 0.42rem;
}
.hero__nachweis--am-rand { display: none; }

@media (min-width: 1200px) {
  .hero__nachweis--im-bild { display: none; }
  .hero__nachweis--am-rand {
    display: block;
    right: calc(3% + var(--rand));   /* die Bühne steht 3% über den Rand hinaus */
    bottom: calc(4% + 14px);         /* und 4% über die Unterkante der Sektion */
    z-index: 4;
    color: var(--tinte-still);
  }
}

/* Das runde Bild an der Kontaktkarte ist zu klein für eine Zeile darauf.
   Der Nachweis wird zur Fußzeile der Karte. */
.kontakt__karte { flex-wrap: wrap; }
.ki-notiz--karte { flex-basis: 100%; margin: 0.55rem 0 0; }


/* ==========================================================================
   RUNDE 9 · DIE HANDYVERSION, ZWEITER DURCHGANG
   Stand: 31.08.2026

   Dominics Befund am Gerät, Punkt für Punkt:

   1. Vier Handlungswege im ersten Bildschirm (Kopf-Knopf, Hero-Knopf,
      Anrufen, Gespräch buchen). Zwei davon klebten beim Scrollen fest.
   2. Kein Weg durch die Seite — nur Knöpfe, die alle dasselbe wollen.
   3. Das Hero-Bild stand zwei Daumenschübe unter der Falz.
   4. Die drei Belege sahen aus wie drei lange Knöpfe.
   5. Der Text der Suchszene erschien erst nach dem halben Abschnitt.
   6. Das Handy sah nicht nach Handy aus.
   7. Die Abschnitte gingen ohne Kante ineinander über, der Grund blieb
      seitenlang derselbe.
   8. Die drei Schritte trugen Zahlen in roten Kreisen.
   9. Das Nachtbild klemmte am Abschnitt darüber.
   10. Der Kringel unter „ein Preis" hing zu tief.

   Dieser Block steht ganz am Ende und gewinnt gegen Runde 7 und 8, ohne
   dass an den gewachsenen Regeln weiter oben geschraubt werden muss.
   ========================================================================== */


/* --------------------------------------------------------------------------
   9.1 · DER KI-NACHWEIS OHNE PLÄTTCHEN
   Das dunkle Kästchen hinter den zwei Wörtern war das, was den Hinweis zu
   einem Etikett gemacht hat. Es fällt weg. Was bleibt, ist die Schrift —
   getragen von einem weichen Schlagschatten statt von einer Fläche. Der
   Schatten ist kein Kasten: Er hat keine Kante, keine Größe und keine Form,
   er hält die Zeile nur dort lesbar, wo der Untergrund hell wird.

   Art. 50 KI-VO bleibt erfüllt: Der Hinweis ist beim ersten Sehen da und
   steht in derselben Ecke wie vorher. Nur leiser.

   Beim Über-mich-Porträt fällt er ganz weg — dieses Foto ist echt.
   -------------------------------------------------------------------------- */

.ki-notiz--auf,
.hero__nachweis--im-bild {
  background: none;
  padding: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.88);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.62),
    0 0 9px rgba(0, 0, 0, 0.48);
}

/* Das Bau-Band endet rechts in einem weißen Hemdsärmel. Auf dem Rechner
   schneidet object-fit die Höhe, nicht die Breite — links liegt dort das
   dunkle Laptopgehäuse. Also wandert der Nachweis dorthin. Auf dem Handy
   trägt das Hochformat, und rechts unten ist es ohnehin dunkel. */
@media (min-width: 761px) {
  .ki-notiz--auf-links { left: 16px; right: auto; }
}


/* --------------------------------------------------------------------------
   9.2 · DER KOPF AUF DEM HANDY: EIN SCHALTER STATT EINES KNOPFES

   Der Knopf oben rechts war der zweite von vier Wegen zum selben Ziel und
   stand dauerhaft im Bild. An seine Stelle tritt der Schalter für das Menü:
   Er verspricht nichts, er öffnet nur. Der Handlungsweg steht danach unten
   in der Tafel — an der Stelle, an der jemand ihn sucht, der sich schon
   entschieden hat.
   -------------------------------------------------------------------------- */

.menue__schalter { display: none; }

@media (max-width: 900px) {
  .kopf__cta { display: none; }

  .kopf__innen { min-height: 62px; }

  .menue__schalter {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.9rem 0.5rem 0.75rem;
    min-height: 44px;
    border: 1px solid var(--linie-stark);
    border-radius: 999px;
    background: var(--flaeche);
    color: var(--tinte);
    font-family: var(--f-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: border-color 200ms ease, background-color 200ms ease;
  }
  .menue__schalter:active { transform: translateY(1px); }

  /* Zwei Striche, die sich beim Öffnen zum Kreuz drehen. Kein drittes
     Strichlein: zwei genügen, sobald das Wort „Menü" danebensteht. */
  .menue__striche {
    position: relative;
    display: block;
    width: 17px; height: 12px;
  }
  .menue__striche i {
    position: absolute;
    left: 0; right: 0;
    height: 1.8px;
    border-radius: 2px;
    background: var(--tinte);
    transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .menue__striche i:first-child { top: 2px; }
  .menue__striche i:last-child  { bottom: 2px; }

  .menue-offen .menue__striche i:first-child { transform: translateY(3.1px) rotate(45deg); }
  .menue-offen .menue__striche i:last-child  { transform: translateY(-3.1px) rotate(-45deg); }
  .menue-offen .menue__schalter { background: var(--grund-tief); border-color: var(--tinte-still); }
}

@media (min-width: 901px) {
  .menue { display: none !important; }
}

/* --- Die Tafel ------------------------------------------------------------
   Kein Vollbild-Vorhang mit acht Wörtern in der Mitte — davon gibt es genug.
   Statt dessen ein Blatt, das unter dem Kopf hervorfährt und die Seite als
   das zeigt, was sie ist: acht nummerierte Kapitel mit je einer Zeile, die
   sagt, was darin steht. Wer nur wissen will, was ihn erwartet, bekommt hier
   die Antwort, ohne einmal zu scrollen. */

.menue {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.menue[hidden] { display: none; }

.menue__blende {
  position: absolute;
  inset: 0;
  background: rgba(22, 24, 29, 0.34);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 340ms ease;
}
.menue[data-auf="ja"] .menue__blende { opacity: 1; }

.menue__tafel {
  position: absolute;
  inset: 0 0 auto;
  padding: calc(62px + 1.4rem) var(--rand) calc(1.6rem + env(safe-area-inset-bottom, 0px));
  max-height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 30px 60px -28px rgba(22, 24, 29, 0.42);
  transform: translateY(-101%);
  transition: transform 460ms cubic-bezier(0.22, 1, 0.32, 1);
}
.menue[data-auf="ja"] .menue__tafel { transform: translateY(0); }

.menue__marke {
  margin: 0 0 1rem;
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinte-still);
}

.menue__wege { list-style: none; margin: 0; padding: 0; }
.menue__wege li + li { border-top: 1px solid var(--linie); }

.menue__wege a {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: baseline;
  column-gap: 0.4rem;
  padding: 0.82rem 0;
  text-decoration: none;
  color: var(--tinte);
}
.menue__wege i {
  grid-row: 1 / span 2;
  font-family: var(--f-text);
  font-style: italic;
  font-size: 1rem;
  color: var(--akzent);
}
.menue__wege b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
}
.menue__wege span {
  grid-column: 2;
  margin-top: 0.15rem;
  font-family: var(--f-text);
  font-size: 0.9375rem;
  color: var(--tinte-still);
}
.menue__wege a:active b { color: var(--akzent); }

.menue__fuss {
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie-stark);
  display: grid;
  gap: 0.85rem;
  justify-items: center;
}
.menue__fuss .knopf { width: 100%; justify-content: center; min-height: 54px; }
.menue__tel {
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tinte-still);
  text-decoration: none;
}

/* Solange die Tafel offen ist, scrollt darunter nichts mit. */
.menue-offen body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .menue__tafel, .menue__blende, .menue__striche i { transition: none; }
}


/* --------------------------------------------------------------------------
   9.3 · DIE HANDYLEISTE: ERST NACH DEM HERO, UND ALS PILLE STATT ALS BALKEN

   Zwei Änderungen. Erstens der Zeitpunkt: Im ersten Bildschirm führt genau
   ein Knopf, der im Hero. Die Leiste kommt, sobald der Hero durch ist, und
   tritt über dem Formular wieder ab — dort steht der echte Knopf.

   Zweitens die Form: Ein Balken über die volle Breite mit eigener Kante
   schneidet unten einen Streifen von der Seite ab, und alles darüber wirkt
   dadurch kleiner. Eine schwebende Pille mit Abstand zum Rand tut das nicht.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .handyleiste {
    left: var(--rand);
    right: var(--rand);
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    padding: 0.4rem;
    gap: 0.4rem;
    border: 1px solid rgba(22, 24, 29, 0.08);
    border-radius: 999px;
    background: rgba(250, 250, 247, 0.95);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow:
      0 1px 2px rgba(22, 24, 29, 0.08),
      0 18px 38px -16px rgba(22, 24, 29, 0.34);
    transform: translateY(calc(100% + 1.6rem));
    opacity: 0;
    visibility: hidden;
    transition:
      transform 480ms cubic-bezier(0.22, 1, 0.32, 1),
      opacity 300ms ease,
      visibility 0s linear 480ms;
  }
  .handyleiste[data-zeigen="ja"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s, 0s;
  }

  .handyleiste a {
    min-height: 48px;
    border-radius: 999px;
    font-size: 0.9375rem;
  }
  .handyleiste__tel {
    flex: 0 0 auto;
    padding-inline: 1.1rem;
    border: 0;
    background: transparent;
    color: var(--tinte);
  }
  .handyleiste__cta { flex: 1 1 auto; }

  /* Die Pille schwebt, aber die gepinnten Bühnen dürfen nicht unter ihr
     durchlaufen — sonst schneidet sie dem Handy in der Suchszene den Fuß ab.
     Also bleibt die Bodenluft reserviert: 48 Pixel Pille, 12 Abstand, 8
     Innenrand, 12 Luft darüber. */
  :root { --leiste-luft: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .handyleiste { transition: opacity 200ms ease; }
}


/* --------------------------------------------------------------------------
   9.4 · DER HERO: DAS BILD KOMMT VOR DIE KNÖPFE

   Runde 7 hat das Bild hinter die Knopfzeile sortiert. Das war richtig
   gedacht — der Handlungsweg zuerst — und im Ergebnis falsch: Nach
   Überschrift, Vorspann und zwei Knöpfen beginnt das Bild bei etwa 1.100
   Pixeln. Auf einem iPhone sieht man davon nichts. Wer Webseiten mit
   Bildern verkauft, muss auf seiner eigenen Seite eins zeigen, bevor er
   etwas verlangt.

   Also: Marke, Überschrift, Vorspann, Bild, Knöpfe, Fakten. Das Bild steht
   jetzt bei rund 430 Pixeln und ragt mit gut einem Drittel in den ersten
   Bildschirm — genug, dass ein Gesicht zu erkennen ist.
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .hero__buehne      { order: 4; margin-top: 1.75rem; }
  .hero .knopf-zeile { order: 5; margin-top: 1.75rem; }
  .hero__belege      { order: 6; }

  /* Der Vorspann wird knapper gesetzt, damit das Bild höher rückt. */
  .hero__innen { padding-block: clamp(28px, 4vh, 44px) clamp(56px, 8vh, 80px); }
  .hero__unter { margin-top: 0.9rem; }
}


/* --------------------------------------------------------------------------
   9.5 · DIE DREI BELEGE: EIN DATENBLATT, KEINE DREI KNÖPFE

   Drei Pillen mit Rahmen, Fläche und 999-Pixel-Radius über die volle Breite
   sehen aus wie drei Knöpfe, die nicht funktionieren — und „48 h" brach
   darin auf zwei Zeilen um. Was hier steht, sind keine Handlungen, sondern
   Zahlen. Zahlen gehören in ein Datenblatt: Wert links, Sache rechts,
   Haarlinie dazwischen, kein Kasten. Die Zahl bekommt den Auftritt, den sie
   verdient — groß gesetzt, mit der Einheit klein darunter.
   -------------------------------------------------------------------------- */

.hero__belege {
  display: block;
  margin-top: 2.5rem;
  padding: 0;
  border-top: 1px solid var(--linie);
  list-style: none;
}
.hero__belege li {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) 1fr;
  align-items: center;
  column-gap: clamp(1rem, 3vw, 1.75rem);
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  background: none;
  width: auto;
}
.hero__belege b {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 3.4vw, 1.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
.hero__belege b em {
  font-family: var(--f-text);
  font-style: italic;
  font-weight: 400;
  font-size: 0.5em;
  letter-spacing: 0;
  color: var(--tinte-still);
  white-space: nowrap;
}
.hero__belege span {
  font-family: var(--f-text);
  font-size: clamp(0.9375rem, 2.2vw, 1rem);
  line-height: 1.35;
  color: var(--tinte-leise);
  text-wrap: pretty;
}

/* Ab 961px steht das Datenblatt in der schmalen Textspalte neben dem Bild.
   Dort ist die Einheit rechts vom Wert zu breit — sie rutscht darunter. */
@media (min-width: 961px) {
  .hero__belege { margin-top: 2.25rem; }
  .hero__belege li { padding: 0.7rem 0; }
}

@media (max-width: 400px) {
  .hero__belege li { grid-template-columns: minmax(4.6rem, auto) 1fr; column-gap: 0.9rem; }
  .hero__belege b { font-size: 1.25rem; }
  .hero__belege b em { display: block; font-size: 0.55em; }
  .hero__belege span { font-size: 0.875rem; }
}


/* --------------------------------------------------------------------------
   9.6 · DAS HANDY IN DER SUCHSZENE: EIN GERÄT, KEIN AUSGESCHNITTENER SCHIRM

   Runde 7 hatte den Gerätekörper auf dem Handy weggenommen, um Schirmbreite
   zu gewinnen. Der Preis dafür war hoch: Ohne Rahmenstärke, ohne Tasten,
   ohne Home-Balken bleibt ein weißes Rechteck mit runden Ecken, und die
   Dynamic Island darin wirkt aufgeklebt.

   Ein Telefon wird an fünf Dingen erkannt, und keins davon kostet nennens-
   werte Fläche: der doppelte Rand (Titanschiene außen, Schwarz innen), die
   drei Tasten an den Seiten, der Home-Balken unten, die Spiegelung im Glas
   und ein Schatten, der Gewicht hat. Alle fünf kommen zurück. Bezahlt wird
   das mit 18 Pixeln Höhe — die --e-Rechnung bekommt sie abgezogen.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .warum__handy {
    padding: 7px;
    border-radius: 42px;
    /* Titanschiene: hell an den Kanten, dunkel in der Mitte */
    background:
      linear-gradient(100deg,
        #6E727B 0%, #3A3D45 6%, #202329 22%,
        #16181D 52%, #202329 78%, #3A3D45 94%, #74787F 100%);
    box-shadow:
      /* die Lichtkante auf der Schiene */
      inset 0 0 0 1px rgba(255, 255, 255, 0.22),
      /* der schwarze Rand zwischen Schiene und Glas */
      inset 0 0 0 5.5px rgba(0, 0, 0, 0.86),
      0 1px 2px rgba(22, 24, 29, 0.3),
      0 10px 22px -8px rgba(22, 24, 29, 0.34),
      0 34px 62px -26px rgba(22, 24, 29, 0.5);
  }
  .warum__schirm { border-radius: 35px; }

  /* Die drei Tasten. Sie sitzen auf der Schiene, nicht daneben — deshalb
     nur 2px breit und mit einem Lichtstrich an der Außenkante. */
  .warum__handy .handy__tasten,
  .warum__handy::before { display: none; }

  .handy__leise, .handy__laut, .handy__ein {
    position: absolute;
    width: 2.5px;
    border-radius: 3px;
    z-index: 2;
  }
  .handy__leise, .handy__laut {
    left: -1.5px;
    background: linear-gradient(90deg, #8A8E96 0%, #4A4E57 45%, #23252B 100%);
  }
  .handy__leise { top: 22%; height: 30px; }
  .handy__laut  { top: calc(22% + 40px); height: 30px; }
  .handy__ein {
    right: -1.5px;
    top: 27%;
    height: 52px;
    background: linear-gradient(270deg, #8A8E96 0%, #4A4E57 45%, #23252B 100%);
  }

  /* Der Home-Balken ist der stärkste Hinweis darauf, dass hier ein iPhone
     steht. Er kostet vier Pixel. */
  .schirm__heim {
    display: block;
    bottom: 6px;
    height: 4px;
    width: 34%;
    background: rgba(22, 24, 29, 0.34);
  }
  /* In der dunklen Anruf-Szene dreht er ins Helle mit. */
  .bewegung .szene--anruf ~ .schirm__heim { background: rgba(22, 24, 29, 0.34); }

  /* Die Spiegelung: ein Streiflicht quer über das Glas, nicht flächig.
     Flächig sieht nach Milchglas aus, ein Streifen nach Reflexion. */
  .schirm__glanz {
    background:
      linear-gradient(112deg,
        rgba(255, 255, 255, 0) 24%,
        rgba(255, 255, 255, 0.16) 34%,
        rgba(255, 255, 255, 0.26) 39%,
        rgba(255, 255, 255, 0.05) 46%,
        rgba(255, 255, 255, 0) 58%),
      linear-gradient(196deg, rgba(255, 255, 255, 0.14), transparent 22%);
    mix-blend-mode: screen;
  }

  /* Achtzehn Pixel Gerätekörper wollen bezahlt sein: 458 → 476. */
  .warum__schirm { --e: clamp(0.78px, calc((100svh - 476px) / 290), 1.05px); }
  .szene { padding-bottom: calc(20 * var(--e)); }
}


/* --------------------------------------------------------------------------
   9.7 · DIE DREI SCHRITTE OHNE ROTEN KREIS

   Eine Ziffer in einem roten Kreis ist die Bildsprache eines Warnhinweises
   und die häufigste Fertigteil-Lösung überhaupt — jede Vorlage macht das so.
   An ihre Stelle tritt, was sonst auf der Seite auch gilt: die Ziffer als
   Satzzeichen. Serif-Kursiv, groß, in der Akzentfarbe, danach ein kurzer
   Strich und die Bezeichnung. Kein Kasten, kein Kreis, keine Fläche.
   -------------------------------------------------------------------------- */

.stufe__nr {
  gap: 0;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.19em;
  color: var(--tinte-still);
}
.stufe__nr span {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: auto; height: auto;
  margin-right: 0.75rem;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--f-text);
  font-style: italic;
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--akzent);
}
.stufe__nr span::after {
  content: "";
  display: block;
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, var(--akzent-voll), var(--linie-stark));
}

/* Dieselbe Feder für die Reiter über dem Stapel. */
.reiter li i {
  font-family: var(--f-text);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

@media (max-width: 620px) {
  .stufe__nr span { font-size: 1.5rem; margin-right: 0.6rem; }
  .stufe__nr span::after { width: 1.25rem; }
}


/* --------------------------------------------------------------------------
   9.8 · DIE ÜBERGÄNGE UND DER GRUND

   Zwei Befunde, ein Thema. „Die Übergänge der Abschnitte" und „der
   Hintergrund wirkt lange gleich und kahl" sind dieselbe Sache von zwei
   Seiten: Zwischen zwei Abschnitten passiert nichts, und innerhalb eines
   Abschnitts auch nicht.

   Drei Mittel, alle ohne ein zusätzliches Wort und ohne ein Bild:

   a) KORN. Ein Rauschen über der ganzen Seite, 2,5 % stark. Papier hat
      Struktur, Bildschirme haben keine. Das Korn ist zu fein, um es zu
      sehen, und genau deshalb wirkt der Grund danach wie Material statt
      wie eine Farbe.

   b) WASCHUNGEN. Jeder große Abschnitt bekommt einen eigenen weichen
      Lichtkegel — warm, unter 6 % Deckung, jedes Mal an einer anderen
      Stelle. Beim Scrollen wandert das Licht durch die Seite, statt dass
      der Grund seitenlang steht.

   c) DIE NAHT. An der Kante zwischen zwei Abschnitten steht eine Linie,
      die zur Mitte hin stark und zu den Rändern hin unsichtbar wird — der
      Strich einer Feder, die absetzt, keine Trennlinie einer Tabelle.

   Auf dem Handy zählt vor allem (c): Dort läuft die Grundfarbe der Engine
   ohnehin nicht mit, und ohne Kante klebten die Abschnitte aneinander.
   -------------------------------------------------------------------------- */

/* --- a) Korn --------------------------------------------------------------
   Ein einziges 140×140-Feld Rauschen, gekachelt. Es liegt fest über der
   Seite und scrollt nicht mit — sonst wandert das Muster mit dem Inhalt
   und wird als Muster sichtbar. */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.026;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
/* Über der dunklen Bühne und im Menü wäre das Korn nur Schmutz. */
.menue, .kopf, .handyleiste { isolation: isolate; }

/* --- b) Waschungen --------------------------------------------------------
   Sechs Abschnitte, sechs Lichtstellen. Die Farbe ist immer dieselbe warme
   Akzentfamilie, nur Ort und Größe wechseln. */

/* Vier Abschnitte hatten schon einen: die Suchszene, die Arbeiten (Blaupausen-
   Raster), Deine Bilder (Passepartout) und der Preis. Sie bleiben unberührt —
   eine id-Regel hier würde sie überschreiben, und der Grund wäre ärmer als
   vorher. Waschung bekommen nur die sechs, die wirklich kahl waren; genau
   sie sind die lange Strecke, in der der Grund stillstand. */

.wende, #ueber-mich, #methode, #ablauf, #nichtfuer, #haken, #kontakt {
  background-repeat: no-repeat;
}
.wende      { background-image: radial-gradient(80rem 44rem at 12% 4%,  rgba(228, 87, 46, 0.055), transparent 58%); }
#ueber-mich { background-image: radial-gradient(66rem 46rem at 2% 38%,  rgba(228, 87, 46, 0.07),  transparent 58%),
                                radial-gradient(50rem 34rem at 98% 96%, rgba(22, 24, 29, 0.045),  transparent 56%); }
#methode    { background-image: radial-gradient(78rem 40rem at 50% -6%, rgba(228, 87, 46, 0.06),  transparent 62%),
                                radial-gradient(48rem 36rem at 96% 70%, rgba(22, 24, 29, 0.04),   transparent 58%); }
#nichtfuer  { background-image: radial-gradient(58rem 40rem at 96% 8%,  rgba(22, 24, 29, 0.05),   transparent 58%); }
#haken      { background-image: radial-gradient(62rem 42rem at 90% 6%,  rgba(228, 87, 46, 0.055), transparent 58%),
                                radial-gradient(46rem 32rem at 4% 92%,  rgba(22, 24, 29, 0.04),   transparent 56%); }
#kontakt    { background-image: radial-gradient(70rem 46rem at 50% 100%, rgba(228, 87, 46, 0.07), transparent 60%); }

/* Der Ablauf führt seine Waschung schon selbst; hier kommt nur die dritte
   Lichtstelle dazu, damit die gepinnte Strecke nicht auf halber Höhe steht. */
.ablauf { background-attachment: scroll; }

/* --- c) Die Naht ----------------------------------------------------------
   Sie hängt an der Oberkante des Abschnitts und ist in der Mitte am
   stärksten. Sechzehn Pixel darunter sitzt ein winziger Punkt in der
   Akzentfarbe — dasselbe Zeichen, das im Werkprotokoll einen neuen Eintrag
   eröffnet.

   Nur an den Abschnitten, die einen Kopf haben. Die Bildbänder und die
   dunkle Zusage tragen ihre Kante selbst. */

.sektion[data-sc-drift]:not(.sektion--nacht) { position: relative; }

.sektion[data-sc-drift]:not(.sektion--nacht):not(.beweis)::before {
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--linie-stark) 22%, var(--linie-stark) 78%, transparent);
  opacity: 0.85;
  pointer-events: none;
}

@media (max-width: 900px) {
  .sektion[data-sc-drift]:not(.sektion--nacht):not(.beweis)::before { left: var(--rand); right: var(--rand); }
}

/* Runde 9, Korrektur: Hier stand `.wende::before, .beweis::before {
   display:none }`. Gemeint war „keine Naht an diesen beiden". Getroffen hat
   es aber auch die innere Passepartout-Kante von „Deine Bilder", die
   dasselbe ::before benutzt — sie war seit Runde 8 unsichtbar. Die Naht
   schließt „Deine Bilder" jetzt über :not() aus, statt das Pseudo
   abzuschalten. Und .wende hat inzwischen ein eigenes Papier, also bekommt
   sie ihre Naht zurück. */


/* --------------------------------------------------------------------------
   9.9 · DIE BILDBÄNDER BEKOMMEN LUFT NACH OBEN

   Beide Bänder standen mit null Abstand unter dem Absatz davor. Ein
   randloses Bild braucht keinen Rahmen, aber es braucht einen Atemzug —
   sonst liest es sich als Fortsetzung des Textes und nicht als Bild.
   -------------------------------------------------------------------------- */

.bildband { margin-top: clamp(2.5rem, 6vw, 5rem); }
.bildband + .sektion { padding-top: clamp(3rem, 7vw, 6rem); }


/* --------------------------------------------------------------------------
   9.10 · DER KRINGEL SITZT HÖHER

   Die Feder lag 0,26 em unter der Grundlinie und der Pfad selbst noch
   einmal weiter unten im viewBox. Bei „Drei Größen, ein Preis" — mittig
   gesetzt, zwei Zeilen, große Type — sah das aus wie ein Strich unter der
   ganzen Zeile statt unter den zwei Wörtern. Der Strich rückt hoch und
   wird kürzer.
   -------------------------------------------------------------------------- */

.wort--strich svg {
  bottom: 0.03em;
  height: 0.2em;
}
.wort--strich path { stroke-width: 3.1; }


/* --------------------------------------------------------------------------
   9.10b · DIE KANTE UNTER DEM HERO

   Das Punktraster des Heros lief in var(--grund) aus — in eine feste Farbe.
   Der Seitengrund darunter war zu diesem Zeitpunkt aber schon zwei Stufen
   weiter gewandert (die Engine zieht ihn Richtung #F1F1EC). Ergebnis: eine
   waagerechte Kante quer über die Seite, genau dort, wo der weiche Übergang
   sein sollte. Der Verlauf läuft jetzt in den Grund, den die Engine gerade
   hält, und die Kante verschwindet.
   -------------------------------------------------------------------------- */

.hero::after {
  height: 260px;
  background: linear-gradient(180deg, transparent, var(--sc-canvas, var(--grund)));
}

/* Die Suchszene selbst steht auf --grund-tief, also zwei Stufen dunkler als
   der Hero. Ohne Übergang trifft #FAFAF7 hart auf #F1F1EC. Der Abschnitt
   bekommt deshalb oben einen eigenen Ausklang: seine ersten 220 Pixel
   blenden aus dem Grund des Heros heraus. */
.warum { position: relative; }
.warum::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(140px, 22vh, 240px);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--sc-canvas, var(--grund)), transparent);
}
.warum > [data-sc-stage] { position: sticky; z-index: 1; }


/* --------------------------------------------------------------------------
   9.11 · DER HANDLUNGSWEG NACH EINEM ABSCHNITT

   Statt zweier Knöpfe, die dauerhaft im Bild kleben, stehen jetzt drei
   Stellen auf der Seite, an denen der Weg angeboten wird: nach den
   Arbeiten, nach dem Ablauf und beim Preis. Immer mit einem Satz davor,
   der begründet, warum gerade hier.
   -------------------------------------------------------------------------- */

.weiter {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linie);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.1rem;
}
.weiter__satz {
  margin: 0;
  max-width: 26em;
  font-family: var(--f-text);
  font-size: clamp(1.0625rem, 2.1vw, 1.25rem);
  line-height: 1.45;
  color: var(--tinte-leise);
  text-wrap: pretty;
}
.weiter .reibung { margin-top: 0; }

@media (max-width: 620px) {
  .weiter .knopf { width: 100%; justify-content: center; min-height: 52px; }
  .weiter { gap: 0.9rem; }
}


/* --------------------------------------------------------------------------
   9.12 · SPRUNGZIELE UNTER DER KOPFZEILE

   Die Kopfzeile klebt oben und ist 62 (Handy) bis 72 Pixel (Rechner) hoch.
   Ohne Sprungpolster landet jeder Menü-Weg mit der Überschrift genau
   darunter — man springt und sieht als Erstes nichts.
   -------------------------------------------------------------------------- */

html { scroll-padding-top: 84px; }
@media (max-width: 900px) { html { scroll-padding-top: 74px; } }


/* ==========================================================================
   RUNDE 9 · DOMINICS RÜCKMELDUNG VOM HANDY, 31.08.2026
   Stand: 31.08.2026

   Acht Punkte, vier davon neue Bauteile: der Terminkalender, der
   WhatsApp-Weg, das Menü mit fünf Wegen und ein Grund, der sich beim
   Scrollen verändert statt seitenlang stillzustehen.
   ========================================================================== */


/* --------------------------------------------------------------------------
   10.1 · JEDE HANDY-SZENE BEKOMMT IHREN EIGENEN GRUND

   Die vier Szenen lagen übereinander und waren alle durchsichtig: Der weiße
   Schirm darunter war der Grund der Nachrichten-App, und er blieb es auch in
   der Suche und im Vergleich. Beim Umblenden sah man deshalb durch die neue
   Szene hindurch auf die alte.

   Jetzt trägt jede Szene ihre eigene deckende Fläche — und weil sie in der
   App, die sie zeigt, verschieden ist, liest sich jeder Schritt als anderes
   Programm statt als dasselbe weiße Blatt.
   -------------------------------------------------------------------------- */

.szene[data-szene="1"] { background: #FFFFFF; }
.szene[data-szene="2"] { background: #F6F6F8; }
.szene[data-szene="3"] { background: linear-gradient(180deg, #FFFFFF 0%, #F2F3F6 100%); }

/* Auf dem grauen Grund der Suche wird das Suchfeld weiß — so herum sieht es
   aus wie die echte App, vorher war beides dasselbe Grau. */
.szene[data-szene="2"] .suche__feld {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.14), 0 1px 2px rgba(22, 24, 29, 0.06);
}

/* Ohne Engine liegen die Szenen als Raster nebeneinander. Dort wäre eine
   eigene Fläche je Kachel Unruhe. */
html:not(.bewegung) .szene[data-szene="1"],
html:not(.bewegung) .szene[data-szene="2"],
html:not(.bewegung) .szene[data-szene="3"] { background: none; }


/* --------------------------------------------------------------------------
   10.2 · DER ZWEITE KUNDE RÜCKT NACH

   Zwischen dem Schlusssatz der Verwandlung und der Linie über „Zweiter
   Kunde" standen 161 Pixel Nichts: der leere Fuß der gepinnten Bühne plus
   der Vorlauf der Kette. Auf dem Rechner ist das Luft, auf dem Handy ein
   halber Bildschirm, auf dem die Seite aufhört.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  /* Der Fuß der Bühne bleibt so hoch, wie er sein muss: Solange gepinnt
     wird, liegt der Schlusssatz dort und darf nicht unter die schwebende
     Leiste rutschen. Die Lücke danach wird stattdessen von unten
     zugezogen — dort, wo der Fuß ohnehin leer ist. */
  .bewegung .verwandlung__innen {
    align-content: end;
    padding-bottom: calc(var(--leiste-luft) - 4px);
  }
  .beweis .verwandlung + .bahn { margin-top: -1.45rem; }
  .kette { margin-top: 0.5rem; padding-top: 1.35rem; }
}


/* --------------------------------------------------------------------------
   10.3 · DIE KOPFZEILE BLEIBT STEHEN, AUCH WENN DAS MENÜ OFFEN IST

   Die Tafel lag mit z-index 60 über einer Kopfzeile mit 50 — Logo und
   Schalter verschwanden darunter. Wer das Menü geöffnet hatte, kam nur noch
   über einen Griff neben die Tafel zurück, und das findet niemand.
   -------------------------------------------------------------------------- */

.kopf[data-menue="auf"] .kopf__innen {
  background: var(--flaeche);
  border-color: var(--linie-stark);
}

/* Der WhatsApp-Weg in der Kopfzeile. Am Rechner steht er neben der Nummer;
   auf dem Handy trägt ihn die Leiste unten. */
.kopf__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.85rem 0.42rem 0.7rem;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinte);
  text-decoration: none;
  transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}
.kopf__wa svg { width: 17px; height: 17px; color: #25A667; flex: none; }
.kopf__wa:hover { border-color: #25A667; background: rgba(37, 166, 103, 0.08); }
@media (max-width: 900px) { .kopf__wa { display: none; } }


/* --------------------------------------------------------------------------
   10.4 · DAS MENÜ: FÜNF WEGE, GESETZT WIE EIN INHALTSVERZEICHNIS

   Vorher acht Kapitel mit je einer Unterzeile — eine Liste, die man liest,
   statt eines Menüs, das man benutzt. Jetzt fünf Namen, groß gesetzt, mit
   der Ziffer als Kolumnenzahl davor. Die Tafel liegt unter der Kopfzeile,
   nicht darüber, und der Weg, auf dem man gerade steht, ist markiert.
   -------------------------------------------------------------------------- */

.menue__tafel {
  padding-top: calc(62px + 1.9rem);
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
  background:
    radial-gradient(34rem 20rem at 88% -10%, rgba(228, 87, 46, 0.09), transparent 62%),
    radial-gradient(28rem 22rem at -8% 108%, rgba(22, 24, 29, 0.05), transparent 60%),
    var(--grund);
  box-shadow: 0 34px 70px -30px rgba(22, 24, 29, 0.5);
}

.menue__wege { border-top: 1px solid var(--linie); }
.menue__wege li + li { border-top: 1px solid var(--linie); }

.menue__wege a {
  position: relative;
  grid-template-columns: 2.15rem minmax(0, 1fr) 26px;
  align-items: center;
  column-gap: 0.2rem;
  padding: 1.05rem 0.2rem 1.05rem 0;
}

/* Der Anlauf: jede Zeile kommt einzeln, von links, 45 ms nach der vorigen.
   Fünf Zeilen sind in einer Viertelsekunde da — schnell genug, dass niemand
   wartet, langsam genug, dass es nach Absicht aussieht. */
.bewegung .menue__wege a > * {
  opacity: 0;
  transform: translateX(-10px);
}
.bewegung .menue[data-auf="ja"] .menue__wege a > * {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.32, 1);
}
.bewegung .menue[data-auf="ja"] li:nth-child(1) a > * { transition-delay: 90ms; }
.bewegung .menue[data-auf="ja"] li:nth-child(2) a > * { transition-delay: 135ms; }
.bewegung .menue[data-auf="ja"] li:nth-child(3) a > * { transition-delay: 180ms; }
.bewegung .menue[data-auf="ja"] li:nth-child(4) a > * { transition-delay: 225ms; }
.bewegung .menue[data-auf="ja"] li:nth-child(5) a > * { transition-delay: 270ms; }

.menue__wege i {
  grid-row: auto;
  align-self: center;
  font-family: var(--f-text);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1;
  color: var(--akzent);
  opacity: 0.72;
}
.menue__wege b {
  font-size: clamp(1.1875rem, 5.4vw, 1.6875rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.12;
}
/* Die Grundregel .menue__wege span (0-2-0) schiebt jedes <span> im Menüweg
   in Spalte 2 — dort landete erst der Pfeil unter dem Wort, dann links davon.
   Der Selektor hier muss also mindestens gleich stark sein. */
.menue__wege a .menue__pfeil {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  margin-top: 0;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--tinte-still);
  background: transparent;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.32, 1), background-color 220ms ease, color 220ms ease;
}
.menue__wege a .menue__pfeil svg { width: 15px; height: 15px; }

/* Der Weg, auf dem gerade gelesen wird. Berechnet beim Öffnen. */
.menue__wege a[data-hier="ja"] b { color: var(--akzent); }
.menue__wege a[data-hier="ja"] i { opacity: 1; }
.menue__wege a[data-hier="ja"]::before {
  content: "";
  position: absolute;
  left: -0.65rem; top: 50%;
  width: 3px; height: 1.5rem;
  margin-top: -0.75rem;
  border-radius: 3px;
  background: var(--akzent-voll);
}

.menue__wege a:active .menue__pfeil,
.menue__wege a:hover  .menue__pfeil {
  transform: translateX(4px);
  background: var(--akzent-grund);
  color: var(--akzent);
}

.menue__fuss {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  justify-items: stretch;
  gap: 1rem;
}
.menue__direkt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

@media (max-width: 380px) {
  .menue__wege a { padding-block: 0.92rem; }
  .menue__direkt { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   10.5 · DIREKTWEGE: ANRUFEN UND WHATSAPP ALS ZWEI GLEICHE KACHELN

   Viele Betriebsinhaber schreiben lieber, als zu telefonieren — vor allem,
   wenn sie gerade auf einer Baustelle stehen. Beide Wege stehen deshalb
   nebeneinander und sehen gleich wichtig aus.
   -------------------------------------------------------------------------- */

.direktweg {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  column-gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--linie-stark);
  border-radius: 14px;
  background: var(--flaeche);
  text-decoration: none;
  color: var(--tinte);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 160ms ease;
}
.direktweg svg { grid-row: 1 / span 2; width: 22px; height: 22px; justify-self: center; }
.direktweg b {
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
}
.direktweg span {
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tinte-still);
  line-height: 1.3;
}
.direktweg--tel svg { color: var(--akzent); }
.direktweg--wa  svg { color: #25A667; }
.direktweg:hover { border-color: var(--tinte-still); box-shadow: 0 8px 20px -14px rgba(22, 24, 29, 0.5); }
.direktweg:active { transform: translateY(1px); }
.direktweg--wa:hover { border-color: #25A667; }

.kontakt__wege {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 0.7rem;
}
@media (min-width: 520px) and (max-width: 960px) {
  .kontakt__wege { grid-template-columns: 1fr 1fr; }
}


/* --------------------------------------------------------------------------
   10.6 · DIE HANDYLEISTE HAT JETZT DREI WEGE

   Anrufen und WhatsApp als runde Tasten, der Termin als Knopf. Die beiden
   Tasten tragen nur ihr Zeichen: Hörer und WhatsApp erkennt jeder, und die
   Beschriftung hätte dem Knopf die Breite genommen, auf den es ankommt.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .handyleiste { grid-template-columns: auto auto minmax(0, 1fr); }
  .handyleiste__rund {
    width: 48px;
    min-width: 48px;
    padding: 0;
    border-radius: 999px;
    background: var(--grund-tief);
    border: 1px solid rgba(22, 24, 29, 0.07);
  }
  .handyleiste__rund svg { width: 21px; height: 21px; }
  .handyleiste__tel svg { color: var(--akzent); }
  .handyleiste__wa  svg { color: #1FA855; }
}

@media (max-width: 900px) {
  .handyleiste__rund {
    flex: 0 0 auto;
    border: 0;
    background: rgba(22, 24, 29, 0.05);
  }
}

@media (max-width: 360px) {
  .handyleiste__cta { font-size: 0.875rem; padding-inline: 0.7rem; }
}


/* --------------------------------------------------------------------------
   10.7 · DER TERMINKALENDER

   „Wann erreiche ich dich am besten: Vormittag?" verlangt vom Kunden, einen
   halben Tag lang das Telefon in der Hand zu behalten, und von mir, ihn
   irgendwann in diesem Fenster zu erwischen. Beides ist unnötig. Er sucht
   sich einen Tag und eine Uhrzeit aus, und dann klingelt es.

   Gebaut, nicht eingekauft: Kein fremdes Skript, kein Cookie, keine dritte
   Partei, die mitliest, wer hier einen Termin macht.
   -------------------------------------------------------------------------- */

.feld--termin {
  border: 0;
  margin: 0;
  padding: 0;
}
.feld--termin legend {
  padding: 0;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--tinte);
}
.feld__hilfe--frei {
  display: block;
  margin: 0.3rem 0 0.9rem;
  max-width: 34em;
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--tinte-still);
}

.kal {
  border: 1px solid var(--linie-stark);
  border-radius: 16px;
  background:
    radial-gradient(22rem 14rem at 100% 0%, rgba(228, 87, 46, 0.05), transparent 62%),
    var(--flaeche);
  padding: 0.9rem 0.9rem 0.75rem;
  box-shadow: 0 1px 2px rgba(22, 24, 29, 0.04), 0 16px 34px -26px rgba(22, 24, 29, 0.4);
}

.kal__kopf {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  margin-bottom: 0.7rem;
}
.kal__monat {
  margin: 0;
  max-width: none;
  text-align: center;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--tinte);
}
.kal__pfeil {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--grund);
  color: var(--tinte);
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.kal__pfeil svg { width: 11px; height: 15px; }
.kal__pfeil:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent); background: var(--akzent-grund); }
.kal__pfeil:disabled { opacity: 0.3; cursor: default; }

.kal__wochentage,
.kal__gitter {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}
.kal__wochentage {
  margin-bottom: 0.35rem;
  font-family: var(--f-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-still);
  text-align: center;
}

.kal__tag {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: transparent;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinte);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.kal__tag:hover:not(:disabled) { background: var(--akzent-grund); color: var(--akzent); }
.kal__tag:disabled {
  color: var(--linie-stark);
  cursor: default;
  font-weight: 500;
}
.kal__tag.ist-naechster::after {
  content: "";
  position: absolute;
  bottom: 5px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--akzent-voll);
}
.kal__tag.ist-gewaehlt,
.kal__tag.ist-gewaehlt:hover {
  background: var(--akzent);
  color: #FFFFFF;
  box-shadow: 0 6px 14px -6px rgba(150, 40, 11, 0.75);
}
.kal__tag.ist-gewaehlt::after { background: #FFFFFF; }
.kal__tag:active:not(:disabled) { transform: translateY(1px); }

.kal__fuss {
  margin: 0.75rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--linie);
  max-width: none;
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tinte-still);
}

.zeiten { margin-top: 1rem; }
.zeiten__titel {
  margin: 0 0 0.6rem;
  max-width: none;
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinte);
}
.zeiten__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 0.4rem;
}
.zeit {
  min-height: 44px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--flaeche);
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinte);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 140ms ease;
}
.zeit:hover { border-color: var(--akzent); color: var(--akzent); background: var(--akzent-grund); }
.zeit:active { transform: translateY(1px); }
.zeit.ist-gewaehlt,
.zeit.ist-gewaehlt:hover {
  border-color: var(--akzent);
  background: var(--akzent);
  color: #FFFFFF;
  box-shadow: 0 6px 14px -8px rgba(150, 40, 11, 0.75);
}

.termin__wahl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0.65rem 0.9rem;
  max-width: none;
  border-radius: 12px;
  background: var(--akzent-grund);
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--akzent-hell);
}
.termin__wahl b { font-weight: 700; }
.termin__wahl::before {
  content: "";
  width: 16px; height: 16px;
  flex: none;
  border-radius: 50%;
  background: var(--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.7 11 12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.feld--termin.feld--fehler .kal { border-color: var(--hinweis); }

@media (prefers-reduced-motion: reduce) {
  .kal__tag, .zeit, .kal__pfeil, .direktweg { transition: none; }
}


/* --------------------------------------------------------------------------
   10.8 · DER GRUND UND DIE ÜBERGÄNGE, ZWEITER ANLAUF

   Runde 8 hatte Korn, sechs Waschungen und eine Haarlinie eingezogen. Zu
   wenig: Neun Abschnitte teilten sich weiter zwei Papierfarben, und wo eine
   Waschung fehlte, stand der Grund minutenlang still. Auf dem Handy sieht
   der Leser immer nur einen Ausschnitt — dort ist „derselbe helle Grund" die
   halbe Seite.

   Drei Mittel, alle ohne ein zusätzliches Bild:

   a) ELF PAPIERE STATT ZWEI. Der Grund wandert von kühlem Stein zu warmem
      Werkdruck und zurück. Jeder Schritt ist klein genug, dass er nie nach
      Farbe aussieht, und groß genug, dass zwei Abschnitte nie gleich sind.
      Die Kontraste bleiben: Alle elf liegen zwischen 92 % und 98 % Helligkeit,
      die gemessenen Textwerte aus DESIGN.md gelten unverändert.

   b) EIN ECHTER VERLAUF AN JEDER KANTE. Jeder Abschnitt trägt oben eine
      Waschung in der Farbe des Abschnitts davor (--von), 130 Pixel hoch.
      Damit läuft das eine Papier in das andere, statt an einer Kante
      abzubrechen. Als Hintergrundebene gesetzt, nicht als Element: So liegt
      sie unter dem Text und kann ihn nicht eintrüben.

   c) TEXTUREN, JEDE NUR EINMAL. Liniertes Werkprotokollpapier bei „Über
      mich", Punktraster im Ablauf, feine Schraffur bei der Absage. Sie sind
      zu schwach, um sie zu bemerken, und stark genug, dass zwei Abschnitte
      sich verschieden anfühlen.

   Dazu die Naht selbst: Haarlinie, darunter ein kurzer Strich in der
   Akzentfarbe wie eine Registermarke, darunter ein weicher Schatten. Und
   die dunkle Zusage bekommt schräge Kanten — die eine Stelle, an der die
   Seite aufhört, ein Stapel Rechtecke zu sein.
   -------------------------------------------------------------------------- */

:root {
  --p-hero:     #FAFAF7;
  --p-warum:    #ECEDE8;
  --p-wende:    #FAF7F1;
  --p-ueber:    #F0EFE8;
  --p-methode:  #FCF9F4;
  --p-arbeiten: #EBECE7;
  --p-bilder:   #FAF6EF;
  --p-ablauf:   #EEEFE9;
  --p-preis:    #FCFAF5;
  --p-absage:   #EDEEE8;
  --p-haken:    #FAF7F1;
  --p-kontakt:  #F0EFE8;

  /* Die drei Texturen. Jede ist ein Verlauf, kein Bild. */
  --tex-linien:    repeating-linear-gradient(180deg, rgba(22, 24, 29, 0.042) 0 1px, transparent 1px 36px);
  --tex-punkte:    radial-gradient(circle at 1px 1px, rgba(22, 24, 29, 0.1) 1px, transparent 1.7px);
  --tex-schraffur: repeating-linear-gradient(45deg, rgba(22, 24, 29, 0.032) 0 1px, transparent 1px 10px);
}

/* --- a + b) Die elf Papiere, jedes mit dem Ausklang des vorigen ----------- */

.warum {
  background-color: var(--p-warum);
  background-image:
    radial-gradient(64rem 40rem at 88% 6%, rgba(228, 87, 46, 0.06), transparent 60%),
    linear-gradient(180deg, var(--p-hero) 0, rgba(250, 250, 247, 0) 240px);
  background-repeat: no-repeat;
}

.wende {
  background-color: var(--p-wende);
  background-image:
    radial-gradient(80rem 44rem at 12% 4%, rgba(228, 87, 46, 0.09), transparent 58%),
    radial-gradient(44rem 30rem at 96% 92%, rgba(22, 24, 29, 0.045), transparent 58%),
    linear-gradient(180deg, var(--p-warum) 0, rgba(236, 237, 232, 0) 130px);
}

#ueber-mich {
  background-color: var(--p-ueber);
  background-image:
    radial-gradient(66rem 46rem at 2% 38%, rgba(228, 87, 46, 0.085), transparent 58%),
    radial-gradient(50rem 34rem at 98% 96%, rgba(22, 24, 29, 0.05), transparent 56%),
    var(--tex-linien),
    linear-gradient(180deg, var(--p-wende) 0, rgba(250, 247, 241, 0) 130px);
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}

#methode {
  background-color: var(--p-methode);
  background-image:
    radial-gradient(78rem 40rem at 50% -6%, rgba(228, 87, 46, 0.075), transparent 62%),
    radial-gradient(48rem 36rem at 96% 70%, rgba(22, 24, 29, 0.045), transparent 58%),
    linear-gradient(180deg, var(--p-ueber) 0, rgba(240, 239, 232, 0) 130px);
}

#arbeiten {
  background-color: var(--p-arbeiten);
  background-image:
    linear-gradient(rgba(22, 24, 29, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 24, 29, 0.05) 1px, transparent 1px),
    radial-gradient(56rem 40rem at 4% 4%, rgba(228, 87, 46, 0.055), transparent 60%);
  background-size: 44px 44px, 44px 44px, auto;
  background-repeat: repeat, repeat, no-repeat;
}

.ablauf {
  background-color: var(--p-ablauf);
  background-image:
    radial-gradient(70rem 50rem at 50% -10%, rgba(228, 87, 46, 0.085), transparent 62%),
    radial-gradient(50rem 40rem at 6% 108%, rgba(22, 24, 29, 0.055), transparent 60%),
    var(--tex-punkte),
    linear-gradient(180deg, var(--p-bilder) 0, rgba(250, 246, 239, 0) 130px);
  background-size: auto, auto, 24px 24px, auto;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}

.preise {
  background-color: var(--p-preis);
  background-image:
    radial-gradient(58rem 42rem at 88% 0%, rgba(228, 87, 46, 0.08), transparent 60%),
    radial-gradient(46rem 34rem at 2% 88%, rgba(22, 24, 29, 0.04), transparent 58%),
    linear-gradient(180deg, var(--p-ablauf) 0, rgba(238, 239, 233, 0) 130px);
  background-repeat: no-repeat;
}

#nichtfuer {
  background-color: var(--p-absage);
  background-image:
    radial-gradient(58rem 40rem at 96% 8%, rgba(22, 24, 29, 0.055), transparent 58%),
    var(--tex-schraffur);
  background-repeat: no-repeat, repeat;
}

#haken {
  background-color: var(--p-haken);
  background-image:
    radial-gradient(62rem 42rem at 90% 6%, rgba(228, 87, 46, 0.07), transparent 58%),
    radial-gradient(46rem 32rem at 4% 92%, rgba(22, 24, 29, 0.045), transparent 56%),
    linear-gradient(180deg, var(--p-absage) 0, rgba(237, 238, 232, 0) 130px);
  background-repeat: no-repeat;
}

#kontakt {
  background-color: var(--p-kontakt);
  background-image:
    radial-gradient(70rem 46rem at 50% 100%, rgba(228, 87, 46, 0.09), transparent 60%),
    radial-gradient(40rem 30rem at 4% 4%, rgba(22, 24, 29, 0.04), transparent 58%),
    linear-gradient(180deg, var(--p-haken) 0, rgba(250, 247, 241, 0) 130px);
  background-repeat: no-repeat;
}

/* Die Handy-Regel aus Runde 8 setzte hier drei feste Grautöne per Kurzschrift
   und löschte damit alles darüber. Sie bekommt dieselben Papiere. */
@media (max-width: 900px) {
  #nichtfuer.naht,
  #haken.naht,
  #kontakt.naht { background-color: unset; }
}

/* --- Die Naht: Haarlinie, Registermarke, Schatten ------------------------ */

.sektion[data-sc-drift]:not(.sektion--nacht):not(.beweis)::before {
  left: 0; right: 0;
  height: 34px;
  opacity: 1;
  background:
    /* die Registermarke: ein kurzer Strich, der von der Naht abfällt */
    linear-gradient(180deg, var(--akzent-voll), rgba(228, 87, 46, 0)) no-repeat top center / 2px 18px,
    /* die Haarlinie selbst */
    linear-gradient(90deg, transparent, var(--linie-stark) 16%, var(--linie-stark) 84%, transparent) no-repeat top center / min(78%, 980px) 1px,
    /* der Schatten des aufgelegten Blattes */
    linear-gradient(180deg, rgba(22, 24, 29, 0.045), rgba(22, 24, 29, 0) 100%);
}

@media (max-width: 900px) {
  .sektion[data-sc-drift]:not(.sektion--nacht):not(.beweis)::before {
    left: 0; right: 0;
    height: 28px;
    background-size: 2px 15px, calc(100% - 2 * var(--rand)) 1px, auto;
  }
}

/* --- Die dunkle Zusage bekommt schräge Kanten ---------------------------- */
/* Der einzige Bruch im Rechteckstapel, und er sitzt an der Stelle, an der
   die Entscheidung steht. Die Keile tragen die Farbe des Abschnitts davor
   und danach, damit die Schräge nach einer Kante aussieht und nicht nach
   einem aufgelegten Dreieck. */

.zusage::before,
.zusage::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: clamp(22px, 3.6vw, 52px);
  z-index: 2;
  pointer-events: none;
}
.zusage::before {
  top: 0;
  background: var(--p-preis);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}
.zusage::after {
  bottom: 0;
  background: var(--p-absage);
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}

/* --- Der Hero läuft in das erste Papier aus ------------------------------ */
.hero::after { background: linear-gradient(180deg, transparent, var(--p-hero)); }

/* ==========================================================================
   Runde 7 · Durchsicht 31.08.2026 — Objekte auf den Boden stellen
   --------------------------------------------------------------------------
   Nachgemessen statt geschaetzt: Handy, Gerätebühnen und Preiskarten tragen
   ihre Schatten bereits. Ohne standen genau zwei Gegenstände da — das
   Portrait und die Formularkarte. Beide bekommen jetzt dieselbe Schicht,
   und die Schicht ist ab hier ein Token, damit die naechste Karte nicht
   wieder eine eigene Zahl erfindet.
   ========================================================================== */

:root {
  /* Eine Skala, drei Stufen. Stufe 1 legt auf, 2 hebt an, 3 stellt frei.
     Abgeleitet aus dem, was .knopf--neben und .werk__desktop schon tun. */
  --schatten-1:
    0 1px 2px rgba(22, 24, 29, 0.05),
    0 6px 14px -10px rgba(22, 24, 29, 0.22);
  --schatten-2:
    0 1px 3px rgba(22, 24, 29, 0.07),
    0 14px 32px -18px rgba(22, 24, 29, 0.32);
  --schatten-3:
    0 2px 6px rgba(22, 24, 29, 0.08),
    0 28px 60px -30px rgba(22, 24, 29, 0.45);
  /* Lichtkante: der Rand, der zum Licht zeigt, ist eine Spur heller.
     Deshalb steht sie oben und nicht rundherum. */
  --lichtkante: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* --- Das Portrait ist ein Gegenstand, kein Ausschnitt --------------------- */
/* Es hatte Radius 10, aber keinen Schatten: als einziges grosses Objekt der
   Seite lag es flach auf dem Papier. Dazu ist sein Studiograu kalt gegen den
   warmen Grund — eine leise Waermewaschung zieht es in die Familie, ohne die
   Hautfarbe zu verfaelschen (kein Filter auf dem Bild selbst). */
#ueber-mich .bildmarke {
  border-radius: var(--radius);
  isolation: isolate;
}
#ueber-mich .bildmarke img {
  border-radius: var(--radius);
  box-shadow: var(--schatten-3);
  display: block;
}
#ueber-mich .bildmarke::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  /* Waermewaschung von unten links, wo auf der Seite das Papier liegt,
     plus eine Innenkante, damit das Bild eine Fassung hat statt einer Kante. */
  background: linear-gradient(200deg, rgba(255, 255, 255, 0) 46%, rgba(228, 87, 46, 0.07) 100%);
  box-shadow: inset 0 0 0 1px rgba(22, 24, 29, 0.07);
}

/* --- Die Formularkarte traegt jetzt dieselbe Schicht wie die Preiskarten -- */
.formular {
  box-shadow: var(--lichtkante), var(--schatten-2);
}

/* ==========================================================================
   Runde 8 · Der Erklaerfilm 31.08.2026
   --------------------------------------------------------------------------
   Zwei Plaetze, ein Film. Am Rechner steht er als eigener Abschnitt unter dem
   Hero. Auf dem Handy sitzt er im Hero an der Stelle des Fotos, weil dort die
   Aufmerksamkeit ist und das Foto nur schmueckt, waehrend der Film die Sache
   erklaert. Deshalb zwei <video>-Elemente statt einem: preload="none" plus
   display:none heisst, dass die verborgene Fassung weder Film noch Standbild
   laedt. Kein JavaScript noetig, damit der Film laeuft -- die nativen
   Bedienelemente stehen im Markup. Das Startfeld ist nur eine schoenere
   Oberflaeche darueber und wird erst per JS sichtbar.
   ========================================================================== */

.film { position: relative; }
.film__kopf { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.film__kopf h2 { max-width: 18em; }
.film__kopf .vorspann { max-width: 62ch; }

.film__buehne {
  position: relative;
  margin: 0 auto;
  max-width: 1000px;
}
/* Leise Lichtwaschung hinter dem Rahmen: gibt dem Film Gewicht auf dem
   Papier, ohne dass eine Flaeche dazukommt. Bleibt unter 12 % Deckung. */
.film__buehne::before {
  content: "";
  position: absolute;
  inset: -8% -6% -14%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 45%, rgba(228, 87, 46, 0.10), transparent 70%);
}

/* Helle Fassung statt schwarzer Player-Bühne (Dominic, 01.09.): Der Film
   haengt wie ein gerahmter Druck auf dem Papier — weisses Passepartout,
   Lichtkante, die Schatten-Skala der Seite. Die dunkle Fassung las sich als
   Standard-Videoplayer und stand fremd zwischen den hellen Werkstuecken. */
.film__rahmen {
  position: relative;
  z-index: 1;
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F4EF 100%);
  border: 1px solid var(--linie-stark);
  padding: clamp(8px, 1vw, 12px);
  box-shadow: var(--lichtkante), var(--schatten-3);
  transition: box-shadow 320ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 320ms cubic-bezier(0.23, 1, 0.32, 1);
}
.film__buehne:hover .film__rahmen {
  transform: translateY(-3px);
  box-shadow:
    var(--lichtkante),
    0 4px 10px rgba(22, 24, 29, 0.10),
    0 40px 80px -34px rgba(22, 24, 29, 0.5);
}

.film__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: #0B0C0F;
  object-fit: cover;
  /* Innenfassung: die feine dunkle Linie, an der das helle Passepartout
     endet — dieselbe Fassung wie am Portrait (#ueber-mich .bildmarke). */
  outline: 1px solid rgba(22, 24, 29, 0.16);
  outline-offset: -1px;
}
.film__ersatz { color: var(--buehne-tinte); padding: 2rem; }
.film__ersatz a { color: var(--glut); }

/* --- Das Startfeld ------------------------------------------------------- */
/* Liegt ueber dem Standbild, verschwindet beim Start und kommt am Ende
   zurueck. Ohne JavaScript bleibt es versteckt und die nativen Bedienelemente
   uebernehmen. */
.film__start {
  position: absolute;
  inset: clamp(6px, 0.8vw, 10px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--f-display);
  color: #FFFFFF;
  /* Der Schleier muss tragen, nicht huebsch sein: auf dem Standbild steht
     eine Kundenseite mit hellem Grund, darauf faellt weisse Schrift sonst
     auseinander. Beim Zeigen wird er leichter, damit man das Bild sieht. */
  background:
    radial-gradient(52% 52% at 50% 44%, rgba(11, 12, 15, 0.52), transparent 74%),
    linear-gradient(180deg, rgba(11, 12, 15, 0.30) 0%, rgba(11, 12, 15, 0.58) 100%);
  transition: background 300ms ease;
}
.film__start:hover {
  background:
    radial-gradient(52% 52% at 50% 44%, rgba(11, 12, 15, 0.44), transparent 74%),
    linear-gradient(180deg, rgba(11, 12, 15, 0.22) 0%, rgba(11, 12, 15, 0.50) 100%);
}
.film__start[hidden] { display: none; }

.film__knopf {
  display: grid;
  place-items: center;
  width: clamp(62px, 7vw, 84px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: linear-gradient(180deg, #DB4C1E 0%, var(--akzent) 52%, #AC3009 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 3px 8px rgba(0, 0, 0, 0.34),
    0 18px 40px -14px rgba(193, 59, 18, 0.75);
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 320ms ease;
}
.film__knopf svg { width: 42%; height: 42%; margin-left: 8%; }
.film__start:hover .film__knopf,
.film__start:focus-visible .film__knopf {
  transform: scale(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 4px 10px rgba(0, 0, 0, 0.38),
    0 24px 52px -14px rgba(193, 59, 18, 0.85);
}
.film__start:focus-visible { outline: 3px solid var(--glut); outline-offset: 3px; }

.film__label {
  display: grid;
  gap: 0.28rem;
  text-align: center;
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  text-shadow: 0 1px 12px rgba(11, 12, 15, 0.6);
}
.film__label em {
  font-style: normal;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* --- Kapitel: zeigt, dass etwas drin ist, und senkt die Einstiegshuerde --- */
.film__kapitel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1.5rem;
}
.film__kapitel-titel {
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinte-still);
  margin-right: 0.25rem;
}
.film__kapitel ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.film__kapitel li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  font-family: var(--f-display);
  font-size: 0.875rem;
  color: var(--tinte-leise);
  box-shadow: var(--schatten-1);
}
.film__kapitel li b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--akzent);
}
/* Erst wenn JS die Punkte anklickbar gemacht hat, sehen sie auch so aus. */
.film__kapitel li[role="button"] { cursor: pointer; transition: border-color 200ms ease, color 200ms ease, transform 200ms ease; }
.film__kapitel li[role="button"]:hover,
.film__kapitel li[role="button"]:focus-visible {
  border-color: var(--linie-stark);
  color: var(--tinte);
  transform: translateY(-1px);
  outline: none;
}
.film__kapitel li[role="button"]:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* --- Handy: der Film uebernimmt den Platz des Fotos ----------------------- */
.hero__film { display: none; }

@media (max-width: 960px) {
  .hero__bild { display: none; }
  .stempel { display: none; }

  /* Die Buehne kippt am Rechner beim Scrollen leicht weg — mit dem Foto ein
     Hauch, mit dem Film ein Fehlerbild: ein Video, das schief steht, liest
     sich als kaputt. Auf dem Handy steht die Buehne deshalb still. */
  .bewegung .hero__buehne { transform: none; will-change: auto; }

  .hero__film {
    position: relative;
    display: block;
    border-radius: calc(var(--radius) + 4px);
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F4EF 100%);
    border: 1px solid var(--linie-stark);
    padding: 7px;
    box-shadow: var(--lichtkante), var(--schatten-3);
  }
  /* Konzentrische Rundung: aussen 14, Fuge 7, innen 8 — sonst wirkt die
     Innenkante staerker gerundet als die Fassung. */
  .hero__film .film__video { border-radius: 8px; outline-offset: -1px; }
  .hero__film .film__start { inset: 7px; gap: 0.7rem; border-radius: 8px; }
  /* Dominic, 01.09.: der Knopf war zu gross fuers Handy. 50 statt 62 Pixel
     laesst das Standbild durch — die Flaeche, auf die getippt wird, ist
     ohnehin das ganze Startfeld und nicht der Kreis. */
  .hero__film .film__knopf { width: clamp(50px, 8vw, 64px); }
  .hero__film .film__label { font-size: 0.9375rem; }
  .hero__film .film__label em { font-size: 0.6875rem; letter-spacing: 0.14em; }

  /* Der eigene Abschnitt entfaellt: der Film lief oben schon. */
  .film { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .film__rahmen, .film__knopf, .film__kapitel li { transition: none; }
  .film__buehne:hover .film__rahmen { transform: none; }
}


/* ==========================================================================
   Runde 8 · Durchsicht 01.09.2026 — Der Hero auf dem Handy

   Drei Wuensche von Dominic, alle am selben Ort:

   1. Ueberschrift und Vorspann stehen mittig. Am Rechner traegt der Hero
      eine linke Textkante gegen das randlose Bild — auf dem Handy gibt es
      diese Kante nicht mehr. Darunter stehen ein mittiges Video und zwei
      Knoepfe ueber die volle Breite; eine linksbuendige Ueberschrift daneben
      hatte keine Achse, an der sie haengt. Der Marken-Strich bekommt dabei
      sein Gegenstueck rechts, wie im mittigen Sektionskopf der Seite.

   2. Die beiden Zeilen unter dem Video fallen weg ("Sieh dir an, wie das
      laeuft" und die Namenszeile). Der Weg vom Standbild zum Knopf war durch
      vier Textzeilen unterbrochen; jetzt liegt der Knopf direkt darunter.
      Der Name steht weiterhin in der Kopfzeile und im Standbild selbst.

   3. Der Startknopf wird kleiner — steht weiter oben im Filmblock.
   ========================================================================== */

@media (max-width: 960px) {
  .hero .marke { justify-content: center; text-align: center; }
  .hero .marke::after {
    content: "";
    width: 24px; height: 2px; border-radius: 2px;
    background: var(--akzent-voll); flex-shrink: 0;
  }
  .hero h1 { text-align: center; }
  .hero__unter { text-align: center; margin-inline: auto; }

  /* Die Namenszeile gehoert unter das Foto, nicht unter den Film. Zwischen
     961 und 1199 Pixeln steht dort noch das Foto, da bleibt sie stehen. */
  .hero__wer { display: none; }
}

/* Zwischen 621 und 960 stehen die zwei Knoepfe nebeneinander — linksbuendig
   unter einer mittigen Ueberschrift haetten sie keine Achse. Unter 621px ist
   die Zeile ein Raster mit vollbreiten Knoepfen; dort wuerde justify-content
   die Spalte auf Inhaltsbreite schrumpfen. Deshalb die untere Grenze. */
@media (min-width: 621px) and (max-width: 960px) {
  .hero .knopf-zeile { justify-content: center; }
}


/* --------------------------------------------------------------------------
   Die Sub-Headline im Hero — Satzbild statt neuer Schrift

   Dominic wollte sie schoener, aber keinen dritten Schnitt: die Kandidaten
   (Newsreader, Fraunces) lagen zu nah an Source Serif, um den Aufwand zu
   rechtfertigen — Probe vom 01.09.2026. Also arbeitet die Schrift, die schon
   da ist, haerter.

   Zwei Griffe, beide aus dem Bestand der Seite:

   1. Groesser und ruhiger gesetzt. Der Absatz steht direkt unter einer
      68-Pixel-Headline; bei 18 Pixeln fiel er dahinter ab. 22 Pixel geben ihm
      Gewicht, ohne der Headline etwas zu nehmen.

   2. Die Zusage kippt in Serif-Kursiv, in voller Tinte statt im leisen Grau.
      Dieselbe Handschrift, die die Seite schon fuer das Akzentwort in der
      Headline (.wort) und fuer die Werkprotokoll-Zeitstempel
      (.warum__schrittzahl) benutzt — nur ohne Orange, weil ueber ihr bereits
      ein orangefarbenes Kursivwort steht und zwei Signale sich streiten
      wuerden. Der Satz, der das Risiko vom Kunden nimmt, sieht damit aus wie
      von Hand danebengeschrieben und nicht wie der Rest des Absatzes.
   -------------------------------------------------------------------------- */

.hero__unter {
  font-size: clamp(1.1875rem, 1.9vw, 1.375rem);
  line-height: 1.58;
  text-wrap: balance;
}
/* Eigene Zeile: inline zerriss der Umbruch die Zusage mitten im Satz
   ("... entscheidest. Gefaellt / sie dir nicht ..."). Als Block steht der
   Versprechenssatz fuer sich — das ist er inhaltlich auch. */
.hero__zusage {
  display: block;
  margin-top: 0.35rem;
  font-style: italic;
  color: var(--tinte);
  /* Nicht balance: Chrome balanciert den Absatz als Ganzes und riss die
     Zusage bei 1024px nach "Gefaellt sie" (79/214 px). Mit pretty steht sie
     bei 160/134 px. Der Satz darueber behaelt balance. Gemessen 01.09. */
  text-wrap: pretty;
}

/* ==========================================================================
   TERMINBUCHUNG — der Zwei-Klick-Kalender
   Vorher stand hier ein selbstgebautes Formular mit eigenem Kalender. Es hat
   hübsch ausgesehen, aber zwei Dinge nicht gekonnt: die echten freien Zeiten
   des Beraters zeigen, und die Anfrage irgendwohin schicken (`action="#"`).
   Jetzt macht das Calendly — aber erst auf Klick. Solange `data-calendly`
   leer ist, steht hier der direkte Weg: anrufen oder schreiben.
   ========================================================================== */

.buchung {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: calc(var(--radius) + 4px);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.buchung__titel {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0.25rem 0 0.75rem;
}
.buchung__satz {
  color: var(--tinte-leise);
  margin: 0 0 1.5rem;
  max-width: 38ch;
}
.buchung .knopf { width: 100%; justify-content: center; }
.buchung .reibung { display: block; margin-top: 0.75rem; text-align: center; }

.buchung__schutz {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--tinte-still);
}
.buchung__schutz b { color: var(--tinte-leise); }

/* Der Kalender selbst, sobald er geladen ist. Calendly bringt sein eigenes
   Aussehen mit; hier steht nur, wie viel Platz er bekommt. */
.buchung__rahmen { min-height: 660px; }
.buchung__rahmen[hidden] { display: none; }
@media (max-width: 860px) { .buchung__rahmen { min-height: 940px; } }

/* Der Zustand ohne eingerichteten Kalender. Kein halbes Formular, sondern
   die zwei Wege, die sicher funktionieren. */
.buchung__direkt { display: none; }
.buchung[data-calendly=""] .buchung__deckel { display: none; }
.buchung[data-calendly=""] .buchung__direkt { display: block; }
.buchung__wege { display: grid; gap: 0.75rem; margin-bottom: 0.25rem; }

/* Solange geladen wird, sagt der Knopf das auch. */
.buchung__start[disabled] { opacity: 0.72; cursor: progress; }