/* ==========================================================================
   10 hero · Owner: wdf-section-builder (Auftrag P7-10)
   Text → Hauptaktion → Preis, daneben/darunter die Bühne: ein Bild (eigene Ebene,
   <picture> 9:16 mobil / 4:5 ab 768) und darauf die bedienbare Produkt-UI „Aufträge“.
   Die Vertrauenszeile (Beleg) steht auf allen Breiten direkt unter der Preiszeile, vor der Bühne.
   Smartphone zuerst, Erweiterungen mit min-width. Nur Tokens (style-lock § 0 Regel 8).
   ========================================================================== */

/* ---------- Abschnitt ---------- */
/* Erster Bildschirm: oben weniger Luft als andere Abschnitte (K), damit Hauptaktion, Preis und Beleg
   bei 390 × 844 im Bild stehen und am Desktop die ganze Bühne über der Falz liegt. */
.hero { padding-block-start: var(--s-5); }
.hero__grid { row-gap: var(--s-3); }

/* ---------- Text ---------- */
/* Container für die H1: Das Wortpaar „Eigene Software“ (.nb) passt so in jede Spaltenbreite. */
.hero__text { container-type: inline-size; display: flex; flex-direction: column; min-width: 0; }
.hero__title { margin-top: var(--s-3); font-size: min(var(--fs-display), 13cqi); }
.hero__lead { margin-top: var(--s-3); }
.hero__cta { margin-top: var(--s-4); }
/* Fakten als eigene Gruppe: Abstand zur Aktion > Abstand innerhalb (8) */
.hero__facts {
  display: grid; gap: var(--s-2);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--color-line);
}
/* Textlink im Satz: Trefferfläche ≥ 24 px, ohne die Zeile zu verschieben */
.hero__proof .inline-link { padding-block: var(--s-1); }
.hero__proof { margin: 0; }
/* Erster Bildschirm mobil (P13-S1, K-VIS-08): Preis auf eine Zeile verdichtet (voller Text ab 768 und in 100),
   Belegzeile unter die Bühne. So stehen bei 390 × 844 Papier, Fensterkopf und erste Statuszeile über der Falz.
   Ab 768 unverändert: voller Preisabsatz, Belegzeile darunter. */
.hero__price, .hero__proof--l { display: none; }
/* Mobil zweizeilig (K-PRJ-01): Zeile 1 Einstiegspreis inkl. Workshop (Link zu 100), Zeile 2 Monatspreis mit Leistung,
   Kündbarkeit und MwSt. Mikrozeilen-Größe (14 px); Zeile 2 bricht nur an den Trennpunkten um. */
.hero__price-s { margin: 0; font-size: var(--fs-micro); }
/* Link als eigene Zeile: Trefferfläche ≥ 24 px (K-UI P3); der negative Rand hält den Zeilenabstand zu Zeile 2 knapp */
.hero__price-link { display: inline-block; max-width: 100%; padding-block: var(--s-1); margin-block: calc(-1 * var(--s-1)) 0; }
.hero__price-run { display: block; color: var(--color-text-muted); text-wrap: pretty; }
.hero__facts { padding-top: var(--s-2); }
.hero__proof--s { grid-column: 1 / -1; margin: var(--s-1) 0 0; }
.hero__proof--s .inline-link { padding-block: var(--s-1); }

/* ---------- Bühne: ein Bild in zwei Ebenen, Fenster dazwischen ---------- */
/* Bühne = Papierzone oben + Fenster + Bahnenzone unten. Dasselbe Bild liegt zweimal hinter dem Fenster:
   media (oben am Rand: Zettelstapel) und floor (unten am Rand: Bahnen). Die leere Steinmitte liegt unter dem Fenster,
   beide Ebenen gehen dort per Maske ineinander über. Die Bühnenhöhe ergibt sich aus Fenster + Zonen (kein Seitenverhältnis,
   kein Beschnitt der Seiten: Die Bahnen behalten ihre geschlossenen Enden).
   Kein overflow:hidden an der Bühne: Die Ebenen schneiden sich selbst zu, das Fenster wird nie abgeschnitten.
   Zonen: --hero-zone-top (Papier über dem Fenster) und der Platzhalter ::after (Bahnen unter dem Fenster; Prozent beziehen
   sich auf die Innenbreite der Bühne, daher wächst die Zone mit dem Bild). */
.hero-stage {
  --hero-pad-x: var(--s-3);
  --hero-zone-top: max(calc(var(--s-8) - var(--s-2)), 25%);
  --hero-zone-bottom: calc(33.2% + var(--s-4));
  --mask-top-black: 34%; --mask-top-clear: 60%;
  --mask-floor-clear: 28%; --mask-floor-black: 42%;
  position: relative;
  isolation: isolate;
  max-width: calc(var(--content-max) / 2);
  display: grid;
  align-content: start;
  padding: var(--hero-zone-top) var(--hero-pad-x) 0;
  background: var(--color-stage);
  border: 1px solid var(--color-line);
  border-radius: var(--r-l);
}
.hero-stage::after { content: ""; padding-bottom: var(--hero-zone-bottom); }
.hero-stage__media,
.hero-stage__floor {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
  border-radius: calc(var(--r-l) - 1px);
}
.hero-stage__floor picture { display: contents; }
.hero-stage__media img,
.hero-stage__floor img {
  position: absolute; left: 0;
  width: 100%; height: auto;
  filter: brightness(0.9) saturate(0.95);
  color: transparent;          /* Bild fehlt: kein Alt-Text über dem Stein, Fläche bleibt ruhig */
}
/* Stapel bleibt voll, die leere Mitte blendet unter dem Fenster in den Boden über */
.hero-stage__media img {
  top: 0;
  -webkit-mask-image: linear-gradient(to bottom, black var(--mask-top-black), transparent var(--mask-top-clear));
  mask-image: linear-gradient(to bottom, black var(--mask-top-black), transparent var(--mask-top-clear));
}
/* Der Boden zeigt den Stapel nie: sonst scheinen Papierecken neben dem Fenster durch */
.hero-stage__floor img {
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--mask-floor-clear), black var(--mask-floor-black));
  mask-image: linear-gradient(to bottom, transparent var(--mask-floor-clear), black var(--mask-floor-black));
}

/* unter 768 (Mobilbild 9:16): Das Fenster endet 8 px über der mittleren Bahn (mit der Glaskachel), darunter stehen Bahn 2 und 3 ganz im Bild.
   Der Boden sitzt 3,2 % seiner Höhe tiefer als die Fläche (Steinrand unter Bahn 3 wird beschnitten). Geometrie des Bildes (Anteile der Bildhöhe):
   Bahn 1 68–75 %, Bahn 2 78–85 % (Glaskachel), Bahn 3 88–95 %; Bildhöhe = 1,792 × Bildbreite. Zone unten = 33,2 % Innenbreite + --s-4 (16 px)
   (0,3316 × Bildbreite für Bahn 2 bis Rand, 8 px Breitenausgleich für den Seitenabstand, 8 px Luft über Bahn 2). */
@media (max-width: 767.98px) {
  .hero-stage__floor img { bottom: 0; transform: translateY(3.2%); }
}

/* ---------- Produkt-UI „Aufträge“ ---------- */
.hero-app { min-width: 0; }
.hero-app__tools { gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
/* Platzhalter, der nicht ganz passt (320 px), endet mit „…“ statt mitten im Wort */
.hero-app .ui-search input { text-overflow: ellipsis; }
/* Rollen-Schalter mobil: Innenabstand --s-3 und kleinere Schrift (--fs-ui-meta), damit „Disposition“ samt Punkt Luft hat (K-VIS-04) */
.hero-app__roles button { padding-inline: var(--s-3); font-size: var(--fs-ui-meta); }
.hero-app__roles button[aria-pressed="true"]::before { margin-right: var(--s-1); }

/* Tabelle: alle Rollen in einer Rasterzelle → Rollenwechsel und Leerzustand ändern die Höhe nicht */
.hero-table__body { display: grid; }
.hero-table__body > * { align-self: start; min-width: 0; }
/* Nur mit JS gestapelt und verborgen; ohne JS stehen alle drei Rollen untereinander und bleiben lesbar */
html.js .hero-table__body > * { grid-area: 1 / 1; }
html.js .hero-table__group[data-active="false"] { visibility: hidden; }
.hero-table__empty { background: var(--color-ui-window); border-bottom: 0; }
.hero-table__empty > [role="cell"] { display: grid; gap: var(--s-1); justify-items: start; min-width: 0; }
.hero-table__empty p { overflow-wrap: anywhere; text-wrap: pretty; }

/* Spaltenköpfe mobil nur für Screenreader (Aufgabe · Auftrag · Status bleiben als Tabelle lesbar) */
.hero-table .ui-table__head {
  display: grid;
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero-table .ui-table__status { justify-self: end; }

/* Status als Knopf: Neu → In Arbeit → Erledigt. Form + Farbe + Wort (style-lock § 8). */
.hero-status {
  position: relative;
  padding: var(--s-1) calc(var(--s-1) * 1.5);   /* mobil 6 px seitlich (Platz für „Tour für Donnerstag festlegen“) */
  margin-inline-end: calc(-1 * var(--s-2));
  border: 1px solid var(--color-line);
  border-radius: var(--r-s);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
/* Trefferfläche über die Zeilenhöhe, ohne die Form zu vergrößern */
.hero-status::before { content: ""; position: absolute; inset: calc(-1 * var(--s-2)) calc(-1 * var(--s-1)); }
.hero-status:active { transform: scale(var(--press-scale)); }
@media (hover: hover) and (pointer: fine) {
  .hero-status:hover { background: var(--color-ui-raised); border-color: var(--color-line-strong); color: var(--color-text); }
}

/* Kompakte Fensterteile mobil: Werkzeugzeile, Zeilen und Fuß mit knapperem Innenabstand (Längenbudget) */
.hero-app__tools { padding-block: var(--s-2); }
.hero-table .ui-table__row { padding-block: var(--s-2); min-height: 0; column-gap: var(--s-2); }
.hero-app__foot { padding-block: var(--s-2); }

/* Zuständig-Zeile: mobil zwei Zeilen, ab 768 eine Zeile mit Trennpunkt */
.hero-app__sep { display: none; }

/* Meldung: überlagert den Fensterfuß (base.css: .toast-slot absolut unten), schiebt nichts und reserviert keinen Platz.
   Sie deckt die Zuständig-Zeile ab, solange sie steht; die Übergabe steht dann in der Meldung selbst.
   Unsichtbar (data-state="hidden") ist sie klick-durchlässig (pointer-events in base.css). */
.hero-app__toast { left: var(--s-2); right: var(--s-2); bottom: var(--s-1); }
.hero-app__toast .toast { min-height: calc(var(--s-7) - var(--s-3)); }   /* 52 px: deckt die zweizeilige Zuständig-Zeile (58 px) samt Abstand unten */

/* ---------- ab 480 ---------- */
@media (min-width: 480px) {
  /* Bühne ist auf die halbe Inhaltsbreite begrenzt: Text bekommt dieselbe rechte Kante (wie ab 768) */
  .hero__text { max-width: calc(var(--content-max) / 2); }
  .hero-app__roles button { padding-inline: var(--s-2); font-size: var(--fs-ui); }
  .hero-app__roles button[aria-pressed="true"]::before { margin-right: var(--s-2); }
}

@media (min-width: 768px) {
  .hero__price, .hero__proof--l { display: block; }
  .hero__facts { padding-top: var(--s-3); }
  .hero__price-s, .hero__proof--s { display: none; }
  .hero-table .ui-table__head {
    position: static;
    width: auto; height: auto;
    overflow: visible;
    clip-path: none;
  }
  .hero-table .ui-table__status { justify-self: start; }
  .hero-status { margin-inline: calc(-1 * var(--s-2)) 0; }
  .hero-app__sep { display: inline; }

  /* Tablet einspaltig: Text und Bühne füllen dieselbe Spalte (gleiche rechte Kante wie die anderen Abschnitte) */
  .hero__text { max-width: none; }
  .hero-stage { --hero-pad-x: 6%; --hero-zone-top: calc(var(--s-8) + var(--s-1)); --hero-zone-bottom: calc(54.2% + var(--s-3) + var(--s-1) / 2); max-width: none;
    --mask-top-black: 34%; --mask-top-clear: 47%; --mask-floor-clear: 37%; --mask-floor-black: 44%; }
  /* Desktopbild 4:5: Bahnen bei 52–85 % der Bildhöhe, 10 % des Bodens (Steinrand unter Bahn 3) werden beschnitten */
  .hero-stage__floor img { bottom: 0; transform: translateY(10%); }
  /* Meldung: einzeilig, deckt die Zuständig-Zeile (37 px) und nicht die letzte Aufgabenzeile */
  .hero-app__toast .toast { min-height: 0; padding-block: var(--s-1); }
  /* Kompakte Tabellenzeilen am Desktop: der Status-Knopf bestimmt nicht die Zeilenhöhe */
  .hero-status { padding: calc(var(--s-1) / 2) var(--s-2); }
}

/* ---------- ab 1024: Text 5 | Bühne 7 ---------- */
@media (min-width: 1024px) {
  .hero { padding-block-start: var(--s-5); }
  .hero__grid { align-items: center; }
  .hero__text { grid-column: 1 / span 5; max-width: none; }
  .hero__stagecol { grid-column: 6 / span 7; padding-inline-start: calc(var(--s-6) + var(--s-2)); }
}

/* 1024–1279: Bühnenspalte schmal. Spaltenköpfe bleiben hier nur für Screenreader (spart ca. 33 px Fensterhöhe). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__stagecol { padding-inline-start: var(--s-5); }
  .hero-table .ui-table__head {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hero-table .ui-table__status { justify-self: end; }
  .hero-status { margin-inline: 0 calc(-1 * var(--s-2)); }
}

/* ---------- Reduced Motion: Zustände wechseln ohne Weg ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-status { transition-property: background-color, border-color, color; }
  .hero-status:active { transform: none; }
}

/* Segment-Schieber (segment-schalter): steht seit P9-G0 in base.css beim Segment-Schalter. */

/* motion — Owner: wdf-motion-designer (P12-M), Bewegung hero-intro (motion.js, wdf/motion-konzept.md § Runde 2)
   Vorzustand nur unter html.wdf-intro (Head-Skript, Frist 600 ms; nie ohne JS, nie unter Reduced Motion, nie mit #anker).
   motion.js ersetzt ihn im selben Bild durch Inline-Stile und nimmt die Klasse weg. Einzelne Eigenschaften (scale,
   translate) statt transform, damit die CSS-Lage der Bodenebene (translateY in %) erhalten bleibt.
   H1 nur beschnitten, nie mit Deckkraft 0 (LCP); Bühnenbild nur skaliert, nie ausgeblendet. CTA, Lead-Text, Preis ohne Vorzustand. */
html.wdf-intro [data-wdf-motion="hero-intro"] [data-wdf-intro="titel"] { clip-path: inset(0 0 100% 0); }
html.wdf-intro [data-wdf-motion="hero-intro"] [data-wdf-intro="bild"] img { scale: var(--motion-zoom-s); }
html.wdf-intro [data-wdf-motion="hero-intro"] [data-wdf-intro="fenster"] { opacity: 0; translate: 0 var(--motion-distance); }
@media (min-width: 768px) {
  html.wdf-intro [data-wdf-motion="hero-intro"] [data-wdf-intro="bild"] img { scale: var(--motion-zoom); }
  html.wdf-intro [data-wdf-motion="hero-intro"] [data-wdf-intro="fenster"] { translate: 0 var(--motion-distance-l); }
}

/* motion — Owner: wdf-motion-designer (P15-M, Runde 3 C), Zeiger-Licht auf App-Fenstern (motion.js: licht)
   Gilt für jedes .ui-window (Komponente, nicht nur Hero); der Lead kann den Block nach base.css verschieben.
   Ein weicher Lichtfleck (aria-hidden) folgt dem Zeiger, nur mit Maus und ohne Reduced Motion. Er liegt unter dem
   Inhalt des Fensters (eigene Stapelebene per isolation, ändert kein Layout), bewegt wird nur transform (motion.js),
   ein/aus nur über Deckkraft. Größe 4 × --s-8 (384 px), Stärke 6 % der Textfarbe (Anfrage: --motion-light-*). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ui-window:has(> .ui-licht) { isolation: isolate; }
  .ui-window > .ui-licht {
    position: absolute; left: 0; top: 0; z-index: -1;
    width: calc(var(--s-8) * 4); height: calc(var(--s-8) * 4);
    margin: calc(var(--s-8) * -2) 0 0 calc(var(--s-8) * -2);
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--color-text) 6%, transparent), transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .ui-window[data-licht="an"] > .ui-licht { opacity: 1; }
}

/* motion — Owner: wdf-motion-designer (P15-M, Runde 3 B), Eigenbewegung der Liste (motion.js: heroLoop)
   Status-Chips einheitlich breit (breitester Zustand „In Arbeit“: 86–90 px). Ohne das ändert jeder Wechsel Neu ↔ In Arbeit
   die Chipbreite, und wo der Chip rechtsbündig steht (unter 768, 1024–1279), wandert seine Kante: eine Layout-Verschiebung
   ohne Eingabe (gemessen 0,0055 bei 390). Gilt ab dem ersten Bild (kein Sprung beim Start der Eigenbewegung) und nur für
   die Liste, die sich bewegt (Disposition): Bei Fahrer würde „Lieferschein unterschreiben lassen“ bei 390 umbrechen. */
html.js .hero-table__group[data-role="disposition"] .hero-status { min-width: calc(var(--s-8) - var(--s-1)); }