/* Startseite „Werkhalle live".
   Oben die Absaug-Simulation (Szene: assets/js/sim/seite-index.js), darunter die
   Abschnitte wie Hallenbeschilderung: große schmale Ziffern, Mono-Etiketten, viel Luft,
   Fotos in ehrlichen Rahmen. Bewegung nur aus Typografie und erzeugten Linien, nie über
   Fotos. Alle Tokens mit Ersatzwerten, damit die Seite vor und nach der Shell trägt. */

.seite-index {
  --s-anz: var(--schrift-anzeige, 'Barlow Semi Condensed', 'Arial Narrow', sans-serif);
  --s-text: var(--schrift-text, 'Barlow', system-ui, sans-serif);
  --s-mono: var(--schrift-mono, var(--schrift-daten, ui-monospace, 'SF Mono', Menlo, monospace));
  --s-rot: var(--rot, #e2231a);
  --s-blau: var(--blau, #1f7fd0);
  --s-stahl: var(--stahl, #aeb7bd);
  --s-tafel: var(--tafel, rgba(250, 251, 251, .84));
  --s-rand: var(--rand, 56px);
  --s-abstand: var(--abstand, clamp(88px, 11vw, 184px));
  --s-ease: var(--ease-aus, cubic-bezier(.16, 1, .3, 1));
}

/* Mono-Etikett, wie ein Schild an der Hallenwand */
.start-marke, .start-buehne__ort, .start-zahl__index, .start-rahmen__abb, .start-branche__nr,
.start-kapitel__marke, .start-wahl__zahl, .start-spez__nr {
  font-family: var(--s-mono); font-size: 11.5px; font-weight: 500; line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase;
}
.start-marke { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--text-leise); }
.start-marke::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--s-rot); }

.start-textlink {
  display: inline-flex; align-items: center; gap: 14px; padding: 8px 0;
  text-decoration: none; border-bottom: 1px solid currentColor;
  font: 600 15px/1.2 var(--s-text);
}
.start-textlink svg { width: 18px; height: 18px; transition: transform .25s var(--s-ease); }
.start-textlink:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Bühne
   ========================================================================== */
.start-buehne { background: var(--flaeche, #eceee9); }
/* Die Kopfleiste klebt mit; die Bühne klebt darunter, statt unter ihr zu verschwinden. */
.start-buehne .sim-buehne__klebe {
  position: sticky; top: var(--kopf-h, 0px); overflow: hidden;
  height: calc(100vh - var(--kopf-h, 0px)); height: calc(100svh - var(--kopf-h, 0px));
}
.start-buehne .sim-buehne__leinwand { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.start-buehne .sim-buehne__ersatz {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
  padding: 24px max(24px, 30vw) 24px 24px; text-align: center; color: var(--text-leise); font: 500 15px/1.5 var(--s-text);
}
.start-buehne .sim-buehne__ersatz[hidden] { display: none; }

.start-buehne__ebene {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: grid; gap: 20px 32px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "kopf ." ". ." "dock kapitel";
  padding: clamp(18px, 2.6vw, 40px) max(var(--s-rand), calc((100% - var(--breite, 1440px)) / 2));
}
.start-buehne__ebene > * { pointer-events: auto; min-width: 0; }

/* Text auf einer ruhigen, milchigen Tafel: lesbar über der hellen Werkbank */
.start-buehne__kopf {
  grid-area: kopf; justify-self: start; align-self: start; max-width: min(620px, 100%);
  padding: 22px 26px 24px; border-radius: 6px;
  background: color-mix(in srgb, var(--grund, #f3f3ef) 80%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.start-buehne__ort { margin: 0 0 14px; color: var(--text-leise); }
.start-buehne__titel {
  margin: 0; font-family: var(--s-anz); font-weight: 700; font-stretch: 85%;
  font-size: clamp(44px, min(6.6vw, 9.5svh), 120px); line-height: .9; letter-spacing: -.012em;
  hyphens: none;
}
/* „Wir geben Luft" in einer Zeile, „Richtung." darunter — spart Höhe für die Tafel */
.start-buehne__signal { display: block; width: fit-content; }
.start-buehne__signal { color: var(--s-rot); }
.start-buehne__mehr { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--s-ease), opacity .4s ease; }
.start-buehne__mehr > div { overflow: hidden; min-height: 0; }
.start-buehne__text { margin: 18px 0 20px; max-width: 42ch; font: 400 clamp(15px, 1.15vw, 17px)/1.55 var(--s-text); color: var(--text); }
.start-buehne__mehr .knopf-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin: 0; padding-bottom: 2px; }

/* Kapitel: Anzeige I–III + Beschriftung des aktiven Kapitels */
.start-buehne__kapitel {
  grid-area: kapitel; justify-self: end; align-self: end; width: min(380px, 100%);
  padding: 14px 18px 18px; border-radius: 16px; border: 1px solid var(--linie);
  background: var(--s-tafel); color: var(--text);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.start-wahl { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.start-wahl__knopf {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; gap: 3px 6px;
  grid-template-columns: auto minmax(0, 1fr); align-items: baseline; padding: 4px 0 0; color: var(--text-leise);
}
.start-wahl__knopf:focus-visible { outline: 2px solid var(--s-rot); outline-offset: 3px; border-radius: 3px; }
.start-wahl__knopf[aria-current] { color: var(--text); }
.start-wahl__zahl { font-weight: 600; letter-spacing: .04em; }
.start-wahl__name { font: 600 13px/1.2 var(--s-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.start-wahl__spur { grid-column: 1 / -1; position: relative; height: 3px; margin-top: 6px; background: var(--linie); overflow: hidden; border-radius: 2px; }
.start-wahl__spur i { position: absolute; inset: 0; background: currentColor; transform-origin: 0 50%; transform: scaleX(var(--fuell, 0)); }
.start-wahl__knopf[aria-current] .start-wahl__spur i { background: var(--s-rot); }

.start-buehne .sim-kapitel { list-style: none; margin: 0; padding: 0; display: grid; }
.start-buehne .sim-kapitel > li { grid-area: 1 / 1; position: relative; }
.js .start-buehne .sim-kapitel > li { transition: opacity .35s ease, transform .35s ease; }
.js .start-buehne .sim-kapitel > li:not(.ist-aktiv) { opacity: 0; transform: translateY(8px); pointer-events: none; position: relative; visibility: hidden; }
.js .start-buehne .sim-kapitel > li.ist-aktiv { visibility: visible; }
html:not(.js) .start-buehne .sim-kapitel { gap: 14px; }
html:not(.js) .start-buehne .sim-kapitel > li { grid-area: auto; }
.start-kapitel__marke { display: flex; justify-content: space-between; margin: 0 0 4px; color: var(--text-leise); }
.start-kapitel__titel { margin: 0 0 6px; font: 700 clamp(26px, 2.4vw, 34px)/1 var(--s-anz); font-stretch: 85%; letter-spacing: -.005em; }
.start-kapitel__text { margin: 0; font: 400 14.5px/1.5 var(--s-text); color: var(--text-leise); }

.start-buehne__dock { grid-area: dock; justify-self: start; align-self: end; width: min(380px, 100%); }
.start-buehne__dock > [data-sim-dock]:empty { display: none; }

/* Niedrige Schirme: Tafel und Kapitel stapeln sich rechts, links bleibt der Text. */
@media (min-width: 961px) and (max-height: 840px) {
  .start-buehne__ebene { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "kopf ." "kopf dock" "kopf kapitel"; }
  .start-buehne__dock { justify-self: end; }
}
/* Wird es eng, macht der Vorspann ab Kapitel II der Szene Platz (die Überschrift bleibt). */
@media (max-width: 960px) {
  .start-buehne[data-kapitel]:not([data-kapitel="0"]) .start-buehne__mehr { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
}

@media (max-width: 960px) {
  .start-buehne__ebene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .start-buehne__kopf { max-width: min(560px, 100%); grid-column: 1 / -1; }
  .start-buehne__kapitel { width: min(340px, 100%); }
}
@media (max-width: 600px) {
  .start-buehne__ebene {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "kopf" "kapitel" "." "dock"; gap: 10px; padding: 12px 16px 0;
  }
  .start-buehne__kopf { padding: 14px 16px 16px; max-width: none; width: 100%; }
  .start-buehne__ort { font-size: 10px; letter-spacing: .08em; margin-bottom: 8px; }
  .start-buehne__titel { font-size: clamp(40px, 12.4vw, 60px); }
  .start-buehne__text { font-size: 15px; margin: 12px 0 14px; }
  .start-buehne__text { font-size: 14.5px; line-height: 1.45; }
  .start-buehne__mehr .knopf-reihe { gap: 10px 16px; flex-wrap: nowrap; }
  .start-buehne__mehr .knopf { padding-inline: 14px; font-size: 14px; min-height: 44px; white-space: nowrap; }
  .start-buehne__mehr .start-textlink { font-size: 14px; gap: 8px; white-space: nowrap; }
  .start-buehne__kapitel { justify-self: stretch; align-self: start; width: 100%; padding: 10px 14px 12px; border-radius: 12px; }
  .start-wahl { margin-bottom: 8px; gap: 6px; }
  .start-wahl__name { font-size: 12px; }
  .start-kapitel__marke { display: none; }
  .start-kapitel__titel { font-size: 21px; margin-bottom: 3px; }
  .start-kapitel__text { font-size: 13px; line-height: 1.45; }
  /* Die Tafel wird zur Leiste am unteren Rand */
  .start-buehne__dock { grid-area: auto; position: absolute; left: 0; right: 0; bottom: 0; width: auto; justify-self: stretch; align-self: end; }
  .start-buehne__dock .sim-dock { width: 100%; border-radius: 14px 14px 0 0; border-bottom: 0; }
  /* Kapitel I: Die Überschrift ist die Einleitung; die Kapitelkarte kommt erst ab Kapitel II,
     damit zwischen Text und Tafel die Werkbank zu sehen ist. */
  .start-buehne:not([data-kapitel]) .start-buehne__kapitel,
  .start-buehne[data-kapitel="0"] .start-buehne__kapitel { display: none; }
}

/* ==========================================================================
   Kennzahlen — große schmale Ziffern über einer Messskala
   ========================================================================== */
.start-zahlen { position: relative; overflow: hidden; background: var(--grund); border-bottom: 1px solid var(--linie); }
.start-zahlen__skala {
  position: absolute; left: 0; top: 0; width: calc(100% + 240px); height: 22px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--text-leise) 0 1px, transparent 1px 120px) 0 0 / 100% 22px no-repeat,
    repeating-linear-gradient(90deg, var(--linie) 0 1px, transparent 1px 12px) 0 0 / 100% 10px no-repeat;
  opacity: .7; transform: translateX(calc(var(--p, .5) * -240px));
}
.start-zahlen__innen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: clamp(64px, 7vw, 112px) clamp(48px, 6vw, 88px); }
.start-zahl { padding: 0 clamp(14px, 2vw, 32px); border-left: 1px solid var(--linie); display: grid; align-content: start; gap: 12px; }
.start-zahl:first-child { padding-left: 0; border-left: 0; }
.start-zahl__index { color: var(--s-rot); }
.start-zahl__wert { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.start-zahl__wert b {
  font: 700 clamp(52px, 6.4vw, 108px)/.82 var(--s-anz); font-stretch: 85%;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.start-zahl__wert small { font: 500 15px/1 var(--s-mono); color: var(--text-leise); letter-spacing: .04em; }
.start-zahl__text { font: 400 14px/1.5 var(--s-text); color: var(--text-leise); max-width: 26ch; }

/* ==========================================================================
   Kopf der Abschnitte
   ========================================================================== */
.start-kopf { display: grid; gap: 22px; margin-bottom: clamp(48px, 6vw, 96px); max-width: 980px; }
.start-kopf h2, .start-prozess__kopf h2, .start-lohn__text h2 {
  margin: 0; font: 700 clamp(40px, 5.6vw, 92px)/.94 var(--s-anz); font-stretch: 85%;
  letter-spacing: -.012em; text-wrap: balance; hyphens: none;
}
.start-kopf--breit { max-width: none; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 112px); align-items: end; }
.start-kopf--breit > .start-marke { grid-column: 1 / -1; }
.start-kopf__intro { margin: 0; max-width: 40ch; font: 400 clamp(16px, 1.3vw, 19px)/1.55 var(--s-text); color: var(--text-leise); }

/* Kurze rote Regel über der Überschrift — wächst beim Einblenden aus einem sichtbaren Stück */
.start-regel { position: relative; padding-top: 22px; }
.start-regel::before {
  content: ""; position: absolute; left: 0; top: 0; width: 72px; height: 4px; background: var(--s-rot);
  transform-origin: 0 50%; transition: transform .9s var(--s-ease);
}
.js .start-regel:not(.ist-da)::before { transform: scaleX(.35); }

/* Ehrlicher Fotorahmen: Passepartout, Haarlinie, Abbildungsnummer */
.start-rahmen { margin: 0; padding: 10px; border: 1px solid var(--linie); background: var(--flaeche, #eceee9); overflow: visible; }
.start-rahmen img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.start-rahmen figcaption {
  display: flex; gap: 14px; align-items: baseline; padding: 12px 2px 2px;
  font: 400 13px/1.5 var(--s-text); color: var(--text-leise);
}
.start-rahmen__abb { flex: none; color: var(--text); }

/* ==========================================================================
   Leistungen
   ========================================================================== */
.start-leistungen { padding-block: var(--s-abstand); background: var(--grund); }
.start-gewerk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.start-gewerk + .start-gewerk { margin-top: clamp(80px, 10vw, 160px); }
.start-gewerk--2 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.start-gewerk--2 .start-gewerk__foto { grid-column: 1; grid-row: 1; }
.start-gewerk--2 .start-gewerk__text { grid-column: 2; grid-row: 1; }
.start-gewerk__nummer {
  display: block; width: fit-content; margin: 0 0 14px -.04em;
  font: 700 clamp(120px, 15vw, 240px)/.8 var(--s-anz); font-stretch: 85%;
  color: transparent; -webkit-text-stroke: 1.5px var(--text-leise); opacity: .55;
  transform: translateY(calc((var(--p, .5) - .5) * -48px));
}
.start-gewerk h3 { margin: 0 0 18px; font: 700 clamp(40px, 4.4vw, 68px)/.95 var(--s-anz); font-stretch: 85%; letter-spacing: -.01em; }
.start-gewerk__text > p { margin: 0; max-width: 44ch; font: 400 17px/1.6 var(--s-text); color: var(--text-leise); }
.start-gewerk__liste { list-style: none; margin: 26px 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.start-gewerk__liste li {
  padding: 5px 9px 4px; border: 1px solid var(--linie); border-radius: 3px;
  font: 500 11.5px/1.3 var(--s-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text);
}
.start-gewerk__foto img { aspect-ratio: 5 / 4; }
.start-gewerk--2 .start-gewerk__foto img { aspect-ratio: 4 / 3; object-position: 50% 60%; }

/* ==========================================================================
   Merkmale — Tafeln mit kräftiger Oberkante
   ========================================================================== */
.start-merkmale { padding-block: var(--s-abstand); background: var(--flaeche, #eceee9); }
.start-gruende { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); }
.start-grund { border-top: 3px solid var(--text); padding-top: 18px; display: grid; align-content: start; gap: 12px; }
.start-grund__nr { font: 700 clamp(48px, 4.6vw, 72px)/.85 var(--s-anz); font-stretch: 85%; color: var(--s-rot); }
.start-grund h3 { margin: 0; font: 700 clamp(22px, 1.9vw, 28px)/1.05 var(--s-anz); font-stretch: 85%; }
.start-grund p { margin: 0; font: 400 15px/1.6 var(--s-text); color: var(--text-leise); }

/* ==========================================================================
   Ablauf — Schritte an einer Prozesslinie
   ========================================================================== */
.start-prozess { padding-block: var(--s-abstand); background: var(--grund); }
.start-prozess__innen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 128px); align-items: start; }
.start-prozess__kopf { position: sticky; top: calc(var(--kopf-h, 88px) + 40px); display: grid; gap: 22px; justify-items: start; }
.start-prozess__kopf > p:not(.start-marke) { margin: 0; max-width: 40ch; font: 400 17px/1.6 var(--s-text); color: var(--text-leise); }
.start-prozess__schritte { position: relative; }
.start-prozess__linie { position: absolute; left: 35px; top: 30px; bottom: 30px; width: 2px; background: var(--linie); }
.start-prozess__linie i { position: absolute; inset: 0; background: var(--s-rot); transform-origin: 50% 0; transform: scaleY(var(--f, 1)); }
.start-schritt { position: relative; border-bottom: 1px solid var(--linie); }
.start-schritt summary {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 28px; gap: 20px; align-items: center;
  padding: 22px 0; cursor: pointer; list-style: none;
}
.start-schritt summary::-webkit-details-marker { display: none; }
.start-schritt summary:focus-visible { outline: 2px solid var(--s-rot); outline-offset: 4px; }
.start-schritt__nr {
  display: grid; place-items: center; width: 72px; height: 60px; background: var(--grund);
  font: 700 44px/1 var(--s-anz); font-stretch: 85%; color: var(--text-leise); transition: color .3s ease;
}
.start-schritt[open] .start-schritt__nr { color: var(--s-rot); }
.start-schritt h3 { margin: 0; font: 700 clamp(22px, 2vw, 30px)/1.1 var(--s-anz); font-stretch: 85%; }
.start-schritt__plus { position: relative; width: 22px; height: 22px; justify-self: end; }
.start-schritt__plus::before, .start-schritt__plus::after { content: ""; position: absolute; left: 2px; right: 2px; top: 10px; height: 2px; background: currentColor; transition: transform .3s var(--s-ease); }
.start-schritt__plus::after { transform: rotate(90deg); }
.start-schritt[open] .start-schritt__plus::after { transform: rotate(0deg); }
.start-schritt__inhalt { padding: 0 0 30px 92px; display: grid; gap: 22px; }
.start-schritt__inhalt > p { margin: 0; max-width: 56ch; font: 400 16px/1.65 var(--s-text); color: var(--text-leise); }
.start-schritt__inhalt .start-rahmen img { aspect-ratio: 16 / 9; }

/* ==========================================================================
   Lohnfertigung — Foto + Spezifikationsliste
   ========================================================================== */
.start-lohn { padding-block: var(--s-abstand); background: var(--flaeche, #eceee9); }
.start-lohn__innen { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
.start-lohn__foto { background: var(--grund); }
.start-lohn__foto img { aspect-ratio: 4 / 5; }
.start-lohn__text { display: grid; gap: 22px; justify-items: start; }
.start-lohn__absatz { margin: 0; max-width: 46ch; font: 400 17px/1.6 var(--s-text); color: var(--text-leise); }
.start-spez { list-style: none; margin: 4px 0 8px; padding: 0; width: 100%; border-top: 1px solid var(--linie-stark, var(--linie)); }
.start-spez li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--linie); font: 500 15px/1.4 var(--s-text); }
.start-spez__nr { color: var(--s-rot); }
.start-lohn__text .knopf-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* ==========================================================================
   Branchen — Schilder im Raster, darüber ein Rohrstrang mit laufender Luft
   ========================================================================== */
.start-branchen { padding-block: var(--s-abstand); background: var(--grund); overflow: hidden; }
.start-leitung { display: block; width: 100%; height: 48px; margin: 0 0 clamp(40px, 5vw, 72px); overflow: visible; }
.start-leitung path { fill: none; vector-effect: non-scaling-stroke; }
.start-leitung__rohr { stroke: var(--s-stahl); stroke-width: 12; opacity: .6; }
.start-leitung__luft { stroke: var(--s-blau); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 26; animation: start-luft 2.4s linear infinite; }
.start-leitung__flansch path { stroke: var(--text-leise); stroke-width: 1.5; }
@keyframes start-luft { to { stroke-dashoffset: -112; } }
.start-branchen__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.start-branche { background: var(--grund); padding: clamp(20px, 2.2vw, 32px); display: grid; align-content: start; gap: 10px; min-height: 200px; }
.start-branche__nr { color: var(--s-rot); }
.start-branche h3 { margin: 6px 0 0; font: 700 clamp(22px, 2vw, 30px)/1.05 var(--s-anz); font-stretch: 85%; }
.start-branche p { margin: 0; max-width: 36ch; font: 400 15px/1.55 var(--s-text); color: var(--text-leise); }

/* ==========================================================================
   Geschichte — die Jahreszahl als Schrift-Ebene, das Foto ruhig daneben
   ========================================================================== */
.start-geschichte { padding-block: var(--s-abstand); background: var(--flaeche, #eceee9); overflow: hidden; }
.start-geschichte__oben { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; margin-bottom: clamp(48px, 6vw, 96px); }
.start-geschichte__oben .start-kopf { margin: 0; }
.start-geschichte__jahr {
  font: 700 clamp(120px, 19vw, 300px)/.78 var(--s-anz); font-stretch: 85%; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px var(--text-leise); opacity: .5;
  transform: translateY(calc((var(--p, .5) - .5) * 40px));
}
.start-geschichte__duo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.start-geschichte__foto { background: var(--grund); }
.start-geschichte__foto img { aspect-ratio: 932 / 702; }
.start-geschichte__text { display: grid; gap: 18px; justify-items: start; }
.start-geschichte__text p { margin: 0; max-width: 46ch; font: 400 17px/1.65 var(--s-text); color: var(--text-leise); }
.start-geschichte__text p:first-child { color: var(--text); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; }

/* ==========================================================================
   Schmalere Schirme
   ========================================================================== */
@media (max-width: 1100px) {
  .start-zahlen__innen { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .start-zahl:nth-child(3) { padding-left: 0; border-left: 0; }
  .start-gruende { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}
@media (max-width: 860px) {
  .start-kopf--breit { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .start-gewerk, .start-gewerk--2 { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .start-gewerk--2 .start-gewerk__foto, .start-gewerk--2 .start-gewerk__text { grid-column: auto; grid-row: auto; }
  .start-gewerk__foto { order: 2; }
  .start-prozess__innen { grid-template-columns: minmax(0, 1fr); }
  .start-prozess__kopf { position: static; }
  .start-lohn__innen, .start-geschichte__duo { grid-template-columns: minmax(0, 1fr); }
  .start-lohn__foto { order: 2; }
  .start-lohn__foto img { aspect-ratio: 4 / 3; }
  .start-branchen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-geschichte__oben { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .start-geschichte__jahr { order: -1; transform: none; margin-bottom: 16px; }
}
@media (max-width: 600px) {
  .start-zahlen__innen { column-gap: 0; }
  .start-zahl { padding: 0 0 0 14px; }
  .start-zahl:nth-child(odd) { padding-left: 0; border-left: 0; }
  .start-zahl:nth-child(odd) { padding-right: 12px; }
  .start-zahl__wert b { font-size: clamp(48px, 15vw, 64px); }
  .start-zahl__text { font-size: 13px; }
  .start-gruende { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .start-gewerk__nummer { font-size: 112px; }
  .start-gewerk__text > p, .start-lohn__absatz, .start-geschichte__text p { font-size: 16px; }
  .start-rahmen { padding: 6px; }
  .start-rahmen figcaption { flex-direction: column; gap: 4px; font-size: 12.5px; }
  .start-schritt summary { grid-template-columns: 52px minmax(0, 1fr) 22px; gap: 14px; padding: 18px 0; }
  .start-schritt__nr { width: 52px; height: 48px; font-size: 34px; }
  .start-prozess__linie { left: 25px; }
  .start-schritt__inhalt { padding-left: 66px; }
  .start-branchen__liste { grid-template-columns: minmax(0, 1fr); }
  .start-branche { min-height: 0; }
  .start-geschichte__jahr { font-size: clamp(104px, 34vw, 140px); }
}

@media (prefers-reduced-motion: reduce) {
  .start-buehne__mehr, .js .start-buehne .sim-kapitel > li, .start-regel::before, .start-textlink svg,
  .start-schritt__plus::before, .start-schritt__plus::after, .start-schritt__nr { transition: none; }
  .js .start-regel:not(.ist-da)::before { transform: none; }
  .start-gewerk__nummer, .start-geschichte__jahr, .start-zahlen__skala { transform: none; }
  .start-leitung__luft { animation: none; }
}