/* ============================================================
   RufKi — start.css · Startseite in 8 Stationen (W2, 26.09.2026)
   Plan: _arbeit/PLAN-RUFKI-FASSUNG-2.md § 3–4 · Bauplan § 3a / § 4 W2
   Lädt NACH app.css, pages.css, aktion.css, bauteile.css.
   Regeln: nur Tokens aus app.css (beide Themen), keine harten Farben,
   keine selbstfüllenden Spaltenraster (Kartenraster-Budget = Pakete),
   Sektionsabstände variieren, Deckel 8rem Rechner / 5rem Handy,
   jedes Raster-Kind min-width: 0 (390 px, GESETZ Kap. 11).
   Bauteile (.rahmen, .leiste-fakten, .reiter, .chip-beweis) gehören
   W5 (bauteile.css) — hier stehen nur Anordnung und Stations-Typo.
   ============================================================ */

/* ---------- Hilfen ---------- */
.st-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.st-h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-top: var(--space-s);
  max-width: 18ch;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.st-lead {
  margin-top: var(--space-m);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted);
  max-width: 50ch;
}

/* ============================================================
   STATION 1 · KOPF (Bestand .hero aus app.css, neue Copy)
   ============================================================ */
.st-kopf__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Hamada 25.10.2026, 09:49 („mach DIE HANDYVERSION FERTIG!"): Die Hochkant-
   Fassung (720x1560) traegt das ganze 16:9-Bild als Band oben, direkt unter der
   Leiste — dort ist am Handy der einzige freie Platz, Text und Knoepfe stehen
   darunter. Darum oben verankert: Ist der Bildschirm breiter als 720:1560,
   wird nur unten (im weichgezeichneten Teil) beschnitten, nie das Band. */
@media (max-width: 899px) and (orientation: portrait) {
  .st-kopf__video {
    object-position: 50% 0%;
  }
}
/* Das Logo am Ende steht im Band bei Video-Zeile ~170–375 (von 1560 bei 720
   Breite). Auf kurzen Handys (360x740) rutschte der Text sonst ueber das Logo:
   Der Kopf haelt oben bis zur Logo-Unterkante + 16 px frei. Bei 390x844 /
   412x915 / Tablet steht der Text ohnehin tiefer — dort aendert sich nichts.
   Erst ab 720 px Hoehe: darunter (375x667) wuerde der Hauptknopf unter die
   Anruf-Leiste rutschen — der Knopf geht vor (gemessen 25.10.2026). */
@media (max-width: 899px) and (orientation: portrait) and (min-height: 720px) {
  .st-kopf {
    padding-top: max(
      clamp(6rem, 12vh, 8rem),
      calc(52.1vw + 16px),
      calc(24.1svh + 16px)
    );
  }
}
@media (prefers-reduced-motion: no-preference) {
  .st-kopf__video {
    animation: heroSettle 1.6s var(--ease-entrance) both;
  }
}
/* Zeile 2 der H1 ist ein Satz → Satzgröße, nicht Display (GESETZ Kap. 3) */
.st-kopf__pointe {
  display: block;
  margin-top: clamp(0.7rem, 1.4vw, 1.2rem);
  font-size: clamp(1.45rem, 0.95rem + 2vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 24ch;
  text-wrap: balance;
}
.st-kopf__lead {
  max-width: 56ch;
}
/* W8 27.09.2026 (Fremd-Blick 2, FS): Der Leisten-Knopf „Kostenlos vorbauen
   lassen" wartet, bis der gleichlautende Kopf-Knopf aus dem Bild ist
   (js/start.js § 5). Nur Deckkraft + Sichtbarkeit: der Platz bleibt, die
   Leiste springt nicht. Mit JS, aber vor dem ersten Lauf von start.js (und
   ohne Observer) greift „st-cta-bereit" nicht → nie ein verlorener Knopf. */
.nav--flach .nav__cta {
  transition:
    opacity 0.28s var(--ease-entrance),
    transform 0.28s var(--ease-entrance),
    visibility 0s linear 0s;
}
@media (scripting: enabled) {
  html:not(.st-cta-bereit) .nav--flach .nav__cta {
    opacity: 0;
    visibility: hidden;
  }
}
html.st-cta-wartet .nav--flach .nav__cta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity 0.2s var(--ease-entrance),
    transform 0.2s var(--ease-entrance),
    visibility 0s linear 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .nav--flach .nav__cta,
  html.st-cta-wartet .nav--flach .nav__cta {
    transition: none;
  }
}
/* Die fixe Vignette (app.css, z-index 88) hellte im Hellen den Primärknopf auf
   (weiß auf Violett gemessen 4,09:1). Der Textblock des Kopfes liegt darüber,
   Korn (90), Ecken (91) und Leiste (120) bleiben oben. */
.st-kopf .hero__inner {
  z-index: 89;
}
/* Hamada 25.10.2026, 06:24: „MACH DEN DUNKLEN SCHATTEN ÜBER DEM STARTVIDEO WEG!"
   → kein Textträger mehr hinter der Kopf-Schrift, in beiden Themen. Lesbarkeit
   trägt nur noch der schmale text-shadow an der Schrift (app.css). */
.st-kopf .hero__inner::before,
:root[data-theme="light"] .st-kopf .hero__inner::before {
  display: none;
}
.hero__cta .st-kopf__link {
  color: var(--text);
  text-shadow:
    0 0 12px rgb(var(--rgb-scrim) / 0.85),
    0 0 30px rgb(var(--rgb-scrim) / 0.7);
}
.hero__cta .st-kopf__link svg {
  color: var(--violet-soft);
}
/* W8 27.09.2026 — Y2-Rest (Fremd-Blick 2 N4, GESETZ Kap. 11 „Video-Köpfe
   bleiben themenfest"): Im Hellen war der Startkopf milchig mit dunkler
   Schrift, die Unterseiten-Köpfe dagegen dunkel — zwei Kopf-Regeln in einem
   Thema. Jetzt ist er im Hellen dieselbe dunkle Bühne wie im Dunklen: die
   Theme-Tokens werden im Kopf lokal auf die festen Bühnen-Töne gesetzt, die
   Hell-Sonderregeln aus app.css (Milchglas-Schleier, dunkler Akzent,
   Tages-Halo) stehen hier auf den Dunkel-Werten. NUR :root[data-theme="light"]
   — das dunkle Thema (Startvideo + Schleier, Hamadas Wort) bleibt unberührt. */
:root[data-theme="light"] .st-kopf {
  --rgb-scrim: 10 7 22;
  --text: var(--kalk-fest);
  --muted: var(--meta-fest);
  --faint: var(--meta-fest);
  --violet: var(--violet-fest);
  --violet-bright: var(--violet-bright-fest);
  --violet-soft: var(--violet-soft-fest);
  background: var(--dunkel-fest);
  color: var(--kalk-fest);
  color-scheme: dark;
}
:root[data-theme="light"] .st-kopf .hero__title,
:root[data-theme="light"] .st-kopf .hero__lead,
:root[data-theme="light"] .st-kopf .hero__eyebrow {
  text-shadow:
    0 0 12px rgb(var(--rgb-scrim) / 0.85),
    0 0 34px rgb(var(--rgb-scrim) / 0.7);
}
:root[data-theme="light"] .st-kopf .hero__title .accent {
  color: var(--violet-bright);
  text-shadow: inherit;
}
@media (min-width: 881px) {
  :root[data-theme="light"] .st-kopf .hero__scrim {
    background:
      linear-gradient(
        100deg,
        rgb(var(--rgb-scrim) / 0.85) 0%,
        rgb(var(--rgb-scrim) / 0.82) 42%,
        rgb(var(--rgb-scrim) / 0.5) 56%,
        rgb(var(--rgb-scrim) / 0.1) 68%,
        rgb(var(--rgb-scrim) / 0) 74%
      ),
      linear-gradient(
        to bottom,
        rgb(var(--rgb-scrim) / 0.18) 0%,
        transparent 16%,
        transparent 82%,
        rgb(var(--rgb-scrim) / 0.5) 100%
      );
  }
}
@media (max-width: 880px) {
  :root[data-theme="light"] .st-kopf .hero__scrim {
    background:
      linear-gradient(
        to bottom,
        rgb(var(--rgb-scrim) / 0.8) 0%,
        rgb(var(--rgb-scrim) / 0.7) 40%,
        rgb(var(--rgb-scrim) / 0.74) 70%,
        rgb(var(--rgb-scrim) / 0.84) 100%
      ),
      rgb(var(--rgb-scrim) / 0.34);
  }
}
@media (max-width: 880px) {
  .st-kopf .hero__lead {
    margin: var(--space-s) 0 var(--space-m);
  }
}

/* ============================================================
   STATION 2 · FAKTEN-LEISTE — Bauteil von W5, bündig unter dem Kopf
   ============================================================ */
.st-fakten {
  z-index: 2;
}

/* ============================================================
   STATION 3 · PRODUKT-BÜHNE
   ============================================================ */
.st-buehne {
  position: relative;
  padding-block: clamp(3.5rem, 6.5vw, 6.5rem) clamp(3rem, 5.5vw, 5.5rem);
}
.st-buehne__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
}
.st-buehne__in > * {
  min-width: 0;
}
@media (min-width: 1000px) {
  .st-buehne__in {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(2.5rem, 4.5vw, 4.5rem);
  }
  /* Plan § 3: die Seite scrollt LINKS im Rahmen, der Text steht rechts */
  .st-buehne__reiter {
    grid-column: 1;
    grid-row: 1;
  }
  .st-buehne__text {
    grid-column: 2;
    grid-row: 1;
  }
}
.st-buehne__reiter [role="tablist"] {
  gap: 0.5rem;
}
/* Bildschirm im Rahmen: Standbild unten, Aufnahme (ab 900 px) darüber */
.st-stueck__schirm {
  position: relative;
  overflow: hidden;
}
.st-stueck__schirm > img,
.st-stueck__schirm > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.st-stueck__schirm > video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 360ms var(--ease-entrance);
}
.st-stueck__schirm > video.ist-bereit {
  opacity: 1;
}
.rahmen > figcaption.st-stueck__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.2rem 0.6rem 0.2rem 1rem;
}
.st-stueck__marke {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.st-stueck__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding-inline: 0.4rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--violet-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--d-hover) var(--ease-entrance);
}
@media (hover: hover) {
  .st-stueck__link:hover {
    color: var(--text);
  }
}

/* ============================================================
   STATION 4 · DASHBOARD-BÜHNE
   ============================================================ */
.st-dash {
  position: relative;
  padding-block: clamp(3.5rem, 6.5vw, 6.5rem) clamp(2.5rem, 4vw, 4rem);
}
.st-dash__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.st-dash__kopf > * {
  min-width: 0;
}
@media (min-width: 1000px) {
  .st-dash__kopf {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: end;
  }
  .st-dash__kopf .eyebrow,
  .st-dash__kopf .st-h2 {
    grid-column: 1;
  }
  .st-dash__kopf .st-lead {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin-top: 0;
    max-width: 46ch;
  }
}
.st-dash__kopf .st-h2 {
  max-width: 20ch;
}
.st-dash__reiter > * {
  min-width: 0;
}
@media (min-width: 1000px) {
  .st-dash__reiter.reiter--senkrecht {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
  .st-dash__reiter.reiter--senkrecht [role="tab"] {
    padding-block: 0.85rem;
  }
}
/* Tab = Nummer + Titel (der Satz steht im Panel unter dem Bildschirm) */
.st-dash__reiter [role="tab"] {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0.6rem;
}
.st-dash__nr {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--faint);
  transition: color var(--d-hover) var(--ease-entrance);
}
.st-dash__titel {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.16rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.st-dash__reiter [role="tab"][aria-selected="true"] .st-dash__nr {
  color: var(--violet-text);
}
/* Bildschirm: Rechner-Rahmen, davor der Handy-Rahmen (Plan § 4).
   Ab 901 px steht das Handy links unten über der Rechner-Kante; darunter
   zeigt nur das Handy den Bildschirm (die Rechner-Ansicht wäre auf 390 px
   nicht lesbar und lädt dank loading="lazy" + display:none gar nicht). */
.st-dash__bild {
  position: relative;
}
.st-dash__handy {
  --rahmen-handy-breite: 13.5rem;
  margin-inline: auto;
}
@media (max-width: 900px) {
  .st-dash__rahmen {
    display: none;
  }
}
@media (min-width: 901px) {
  .st-dash__bild {
    margin-bottom: 2.5rem;
  }
  .st-dash__handy {
    --rahmen-handy-breite: clamp(7.5rem, 9vw, 9.25rem);
    position: absolute;
    z-index: 2;
    left: -2.5rem;
    bottom: -2.5rem;
    margin: 0;
  }
}
.st-dash__satz {
  margin-top: var(--space-s);
  max-width: 58ch;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--muted);
}
.st-dash__hinweis {
  margin-top: 0.85rem;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
/* Unter 901 px: statt Wisch-Leiste eine senkrechte Liste — die Titel sind
   Sätze und passen nicht in eine waagerechte Leiste (390 px). Y1 (W7): die
   Liste steht ÜBER dem Bildschirm, ein Tipp wechselt das Bild direkt darunter;
   js/start.js holt es mit scrollIntoView({block:"nearest"}) ins Blickfeld. */
@media (max-width: 900px) {
  .st-dash__reiter [role="tablist"] {
    order: 1;
  }
  .st-dash__reiter .reiter__panels {
    order: 2;
  }
  .st-dash__reiter [role="tabpanel"] {
    scroll-margin-top: 5.5rem;
    scroll-margin-bottom: 1rem;
  }
  .st-dash__reiter [role="tablist"] {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    border-bottom: 0;
    border-top: 1px solid var(--glas-linie, var(--line));
  }
  .st-dash__reiter [role="tab"] {
    width: 100%;
    padding: 0.85rem 0.5rem 0.85rem 1rem;
    border-bottom: 1px solid var(--glas-linie, var(--line));
  }
  .st-dash__reiter [role="tab"]::after {
    left: 0;
    right: auto;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: center top;
  }
  .st-dash__reiter [role="tab"][aria-selected="true"]::after {
    transform: scaleY(1);
  }
}

/* Zahlspur — W5 zeichnet Ader + Lichtimpuls in den freien 28-px-Streifen */
.st-spur {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 28px;
}
.st-spur__reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-spur__station {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.st-spur__name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
}
.st-spur__satz {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--muted);
}
@media (min-width: 901px) {
  .st-spur__reihe {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 2rem);
  }
  .st-spur__station {
    align-items: center;
    text-align: center;
  }
  .st-spur__satz {
    max-width: 22ch;
  }
  /* Ausschnitte auf einer Höhe, auch wenn ein Satz zweizeilig ist
     (zwei Klassen: schlägt die spätere Grundregel .st-spur__bild) */
  .st-spur__station > .st-spur__bild {
    margin-top: auto;
  }
  .st-spur__satz {
    margin-bottom: 0.85rem;
  }
}
@media (max-width: 900px) {
  .st-spur {
    padding-top: 0;
    padding-left: 28px;
  }
}

/* Je Station ein echter Bildschirm-Ausschnitt (W6). Der Ausschnitt entsteht
   per Zoom um einen Fokuspunkt — Werte je Station als Klasse, kein Inline-Style. */
.st-spur__bild {
  --st-zoom: 1;
  --st-fokus: 50% 50%;
  --st-lage: 50% 50%;
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-inner);
  border: 1px solid var(--glas-linie, var(--line));
  background: rgb(var(--rgb-erhoben));
  box-shadow: var(--glas-tiefe, none);
}
.st-spur__bild > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--st-lage);
  transform: scale(var(--st-zoom));
  transform-origin: var(--st-fokus);
}
/* Y6 (W7, 27.09.): je Station EIN fertig zugeschnittenes, dunkles Element
   (assets/werk/zahlspur-1…5.webp, 16:10, aus den W6-Screens) — kein Zoom,
   darum keine Stations-Werte mehr. Die Modifier-Klassen bleiben als Anker. */
@media (max-width: 900px) {
  /* Handy: Text links, Ausschnitt rechts daneben */
  .st-spur__station {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.5rem;
    column-gap: 1rem;
    align-items: start;
  }
  .st-spur__name,
  .st-spur__satz {
    grid-column: 1;
  }
  .st-spur__bild {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0.15rem;
  }
}

.st-dash__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m) var(--space-l);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}
.st-dash__beweise {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
/* Feinschliff (W7): die drei Beweise sind die wichtigsten Sätze — 15,2 px statt 13 */
.st-dash__beweise .chip-beweis {
  font-size: 0.95rem;
}
.st-dash__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* ============================================================
   STATION 5 · PAKETE + RECHNER (das EINE Kartenraster der Seite)
   ============================================================ */
.st-pakete {
  position: relative;
  padding-block: clamp(3rem, 5.5vw, 5.5rem) clamp(2.5rem, 4vw, 4rem);
}
.st-pakete__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.st-pakete__kopf > * {
  min-width: 0;
}
.st-pakete .plan__name {
  font-weight: 400;
}
.st-pakete .plan__price {
  max-width: none;
}
.st-pakete .plans__grid > * {
  min-width: 0;
}
@media (min-width: 1041px) {
  .st-pakete .plan__d {
    min-height: 7rem;
  }
}
/* Die Mauer (GESETZ Kap. 1): die Dashboard-Zeile steht ab Business mit
   Haken, bei Basic fehlt sie sichtbar */
.st-pakete .plan__feat .st-plan-dash {
  margin-top: 0.3rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-weight: 700;
}
.st-pakete .plan__feat .st-plan-dash .ck {
  top: calc(0.85rem + 2px);
}
.st-pakete .plan__feat .st-plan-dash--ohne {
  font-weight: 600;
  color: var(--faint);
}
.st-ck-ohne {
  background: rgb(var(--rgb-kante) / 0.07);
}
.st-ck-ohne::after {
  content: "";
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--faint);
}

/* Rechner „Abo gegen Eigentum" (Ernte preise.html #rechner) */
.st-rechner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.st-rechner > * {
  min-width: 0;
}
@media (min-width: 1000px) {
  .st-rechner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    align-items: start;
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
}
.st-rechner__titel {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 16ch;
}
.st-rechner__satz {
  margin-top: var(--space-s);
  color: var(--muted);
  max-width: 40ch;
}
.st-rechner__box {
  border: 1px solid var(--glas-linie, var(--line));
  border-radius: var(--r-frame);
  background: rgb(var(--rgb-erhoben) / 0.55);
  box-shadow: inset 0 1px 0 var(--glas-licht, transparent);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.st-rechner__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.st-rechner__frage {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.st-rechner__laufzeit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.st-rechner__jahr {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition:
    color var(--d-hover) var(--ease-entrance),
    border-color var(--d-hover) var(--ease-entrance),
    background-color var(--d-hover) var(--ease-entrance);
}
.st-rechner__jahr:active {
  transform: scale(0.97);
}
.st-rechner__jahr[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--violet-bright);
  background: color-mix(in srgb, var(--violet) 16%, transparent);
}
@media (hover: hover) {
  .st-rechner__jahr:hover {
    color: var(--text);
    border-color: var(--violet-soft);
  }
}
.st-balken {
  margin-top: clamp(1.4rem, 3vw, 2rem);
}
.st-balken__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.2rem;
  margin-bottom: 0.55rem;
}
.st-balken__name {
  font-weight: 600;
  color: var(--text);
}
.st-balken__wert {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  white-space: nowrap;
  /* R4 (W7): gleich breite Ziffern + reservierte Breite (js/start.js setzt
     min-width auf den breitesten Wert der Zählung) — der Kopf bricht beim
     Hochzählen nicht mehr um, darunter springt nichts (CLS). */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.st-balken__spur {
  position: relative;
  display: block;
  height: 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glas-linie, var(--line));
  background: rgb(var(--rgb-kante) / 0.05);
  overflow: hidden;
}
.st-balken__fuell,
.st-balken__spanne {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: var(--r-pill);
  transition:
    width 420ms var(--ease-entrance),
    left 420ms var(--ease-entrance);
}
/* Abo: dunkler Teil = billigster Tarif, heller Teil = Spanne bis zum teuersten.
   Beide ≥ 3:1 gegen die Spur (GESETZ Kap. 11, Datenbilder). */
/* Startwerte = 3 Jahre (auch ohne JS richtig): 1.404 / 10.764 € = 13,04 %,
   1.690 / 10.764 € = 15,70 % — js/start.js rechnet bei jeder Laufzeit neu */
.st-balken--abo .st-balken__fuell {
  width: 13.04%;
  background: rgb(var(--rgb-kante) / 0.78);
}
.st-balken--abo .st-balken__spanne {
  left: 13.04%;
  width: 86.96%;
  background: rgb(var(--rgb-kante) / 0.42);
}
.st-balken--rufki .st-balken__fuell {
  width: 15.7%;
  background: linear-gradient(90deg, var(--violet), var(--violet-bright));
}
.st-balken__unter {
  margin-top: 0.45rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.st-rechner__fazit {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
  line-height: 1.55;
  color: var(--text);
}
.st-rechner__fazit b {
  color: var(--violet-text);
}
.st-rechner__quelle {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: var(--faint);
}
.st-rechner__tabelle {
  width: 100%;
  margin-top: 1.2rem;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.st-rechner__tabelle caption {
  text-align: left;
  color: var(--muted);
  padding-bottom: 0.5rem;
}
.st-rechner__tabelle th,
.st-rechner__tabelle td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--line);
}
.st-erweiterungen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  margin-top: var(--space-l);
  max-width: none;
  font-weight: 600;
  color: var(--muted);
}
.st-erweiterungen__marke {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.st-erweiterungen a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--violet-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
@media (hover: hover) {
  .st-erweiterungen a:hover {
    color: var(--text);
  }
}

/* ============================================================
   STATION 6 · ABLAUF — vier Takte als Treppe (kein Kartenraster:
   keine Kästen, Bild + Text frei, jeder Takt eine Stufe tiefer)
   ============================================================ */
.st-ablauf {
  position: relative;
  padding-block: clamp(2.5rem, 4vw, 4rem) clamp(3.5rem, 6.5vw, 6.5rem);
}
.st-ablauf__kopf {
  margin-bottom: clamp(2rem, 4.5vw, 3.5rem);
}
.st-ablauf__takte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-takt {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem 1.1rem;
  align-items: start;
  min-width: 0;
}
.st-takt > * {
  min-width: 0;
}
.st-takt__bild {
  margin: 0;
}
.st-takt__bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--r-inner);
  border: 1px solid var(--glas-linie, var(--line));
  background: rgb(var(--rgb-erhoben));
  box-shadow: var(--glas-tiefe, none);
}
/* Handy-Ansicht: im selben 16:10-Format, das Telefonbild steht mittig */
.st-takt__bild--handy img {
  object-fit: contain;
  object-position: center;
  padding: 3% 0;
}
.st-takt__bild figcaption {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.st-takt__nr {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--violet-text);
}
.st-takt__titel {
  margin-top: 0.45rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
}
.st-takt__satz {
  margin-top: 0.4rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--muted);
}
@media (min-width: 700px) and (max-width: 1099px) {
  .st-ablauf__takte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    row-gap: clamp(2rem, 4vw, 3rem);
  }
  .st-takt {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1100px) {
  .st-ablauf__takte {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 2.4vw, 2.5rem);
  }
  .st-takt {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Treppe: jeder Takt eine Stufe tiefer — liest sich als Ablauf, nicht als Raster */
  .st-takt:nth-child(2) {
    margin-top: 2.25rem;
  }
  .st-takt:nth-child(3) {
    margin-top: 4.5rem;
  }
  .st-takt:nth-child(4) {
    margin-top: 6.75rem;
  }
}

/* ============================================================
   STATION 7 · FAQ — Kopf links, Fragen rechts
   ============================================================ */
.st-faq {
  position: relative;
  padding-block: clamp(3rem, 6vw, 6rem);
}
.st-faq__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
}
.st-faq__in > * {
  min-width: 0;
}
@media (min-width: 1000px) {
  .st-faq__in {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  /* Feinschliff (W7): Überschrift bleibt stehen, solange die Fragen scrollen */
  .st-faq__kopf {
    position: sticky;
    top: 7rem;
  }
}
.st-faq .st-h2 {
  font-size: clamp(2rem, 1.45rem + 1.8vw, 3rem);
  max-width: 14ch;
}
.st-faq__hinweis {
  margin-top: var(--space-m);
  color: var(--muted);
}
.st-faq__hinweis a {
  color: var(--violet-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.st-faq .st-faq__liste {
  margin-top: 0;
  max-width: none;
}

/* ============================================================
   STATION 8 · ANFRAGE + KARTE
   ============================================================ */
.st-anfrage {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 7rem) clamp(3.5rem, 6vw, 6rem);
}
.st-anfrage__kopf {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.st-anfrage__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.st-anfrage__raster > * {
  min-width: 0;
}
/* Korrektur Hamada 29.09.2026, 21:38 („in der webansicht das Formular
   breiter"): die Seitenspalte entfällt, das Formular nimmt die volle
   Container-Breite; ab 1000 px stehen die Felder in zwei Spalten
   nebeneinander (Name | Betrieb | E-Mail | Telefon in einer Zeile). */
@media (min-width: 1000px) {
  .st-anfrage__form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-m);
    align-items: end;
  }
  .st-anfrage__form > .field--full,
  .st-anfrage__form > .consent,
  .st-anfrage__form > .form-foot,
  .st-anfrage__form > .form-state {
    grid-column: 1 / -1;
  }
}
.st-anfrage__karte {
  max-width: none;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--glas-linie, var(--line));
  border-radius: var(--r-frame);
  background: rgb(var(--rgb-erhoben) / 0.6);
  box-shadow:
    inset 0 1px 0 var(--glas-licht, transparent),
    var(--glas-tiefe, none);
}
/* GESETZ Kap. 11: Raster-/Flex-Kinder mit Formularfeldern bekommen min-width: 0 */
.st-anfrage__form .frow > *,
.st-anfrage__form .field {
  min-width: 0;
}
.st-anfrage__termin {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.st-anfrage__termin > legend {
  margin-bottom: 0.6rem;
  padding: 0;
}
.st-anfrage__klein {
  font-weight: 500;
  color: var(--muted);
}
.st-anfrage__zusage {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}
.st-karte {
  overflow: hidden;
  border: 1px solid var(--glas-linie, var(--line));
  border-radius: var(--r-frame);
  background: rgb(var(--rgb-flaeche));
  box-shadow: var(--glas-tiefe, none);
}
.st-karte__rahmen {
  display: block;
  width: 100%;
  height: clamp(18rem, 30vw, 24rem);
  border: 0;
}
.st-karte__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--glas-linie, var(--line));
}
.st-karte__adresse {
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
}
.st-anfrage__wege {
  margin: var(--space-m) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.st-anfrage__wege li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.25rem 1rem;
  min-height: 3rem;
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--line);
}
.st-anfrage__weg-name {
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.st-anfrage__wege a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: break-word;
}
@media (hover: hover) {
  .st-anfrage__wege a:hover {
    color: var(--violet-text);
  }
}

/* ============================================================
   Ruhige Bewegung
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .st-stueck__schirm > video,
  .st-balken__fuell,
  .st-balken__spanne,
  .st-rechner__jahr {
    transition: none;
  }
}