/* Startseite · hero (Owner: wdf-section-builder, Auftrag P7-home-10) — 1:1 aus wdf/directions/B/hero.html (Stand P4-B15), nur Tokens.
   Mobil zuerst, Erweiterungen mit min-width. Dieses CSS ist die statische Fassung (:root:not(.film)); das Intro baut P8 darauf.
   Aus base.css kommen: .heading-1, .statement, .lead, .eyebrow, .mikro, .btn, .link, .vertrauen/.avatare/.google/.sterne/.trenner,
   .geraet/.chrome/.vp (browser-huelle), .toast/.badge (mitteilung). Hier nur Raster, Zeitzeile, Creative und die Beispiel-Website.
   Vier Werte stehen als Token-Verweis mit Prototyp-Wert als Rückfall, bis tokens.css sie führt (Anfrage P7-home-10):
   --perspective-creative, --tilt-creative-x/-y, --size-time-line. */

/* ---------- Raster ---------- */
.held { position: relative; padding: calc(var(--kopf-h) + var(--space-32)) 0 var(--space-64); overflow-x: clip; }
.held .wrap { display: grid; gap: var(--space-48); }
/* Textspalte als Container: Button + Mikrotext nebeneinander und der Trenner vor „Referenzprojekte“ nur, wenn die Zeile passt (s. u.) */
.held-text { display: grid; gap: var(--space-16); align-content: start; min-width: 0; container: held-text / inline-size; }
.held h1 { max-width: 13ch; }
.held .lead { max-width: 46ch; }

/* ---------- Zeitzeile: Satz + kleiner Zeitstrahl Erstgespräch → Erstversion online (Strahl erst ab 560 px) ---------- */
.zeit-satz { color: var(--color-text); font-size: var(--font-size-body); text-wrap: pretty; }
.zeit-satz span { color: var(--color-accent-soft); }
.zeit {
  display: none; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-12); row-gap: var(--space-6);
  max-width: var(--size-time-line, 30rem); margin-top: var(--space-12);
}
.zeit .p { position: relative; width: var(--space-11); height: var(--space-11); border-radius: var(--radius-round); background: var(--color-bg); box-shadow: var(--ring-time-dot); }
.zeit .p.ziel { background: var(--color-accent); box-shadow: var(--glow-target); }
.zeit .bahn { position: relative; height: var(--stroke-bold); border-radius: var(--radius-hairline); background: var(--color-track-accent); overflow: hidden; }
.zeit .bahn i { position: absolute; inset: 0; border-radius: var(--radius-hairline); background: var(--gradient-time-track); transform-origin: left; }
.zeit .wert {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-12);
  font-family: var(--font-mono); font-size: var(--font-size-mono-sm); font-weight: var(--font-weight-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-text-tertiary);
}
.zeit .wert b { color: var(--color-text); font-weight: var(--font-weight-medium); }

/* ---------- Hauptaktion + Beweis ---------- */
.held-aktion { display: grid; gap: var(--space-12); justify-items: start; }
.held-aktion .btn { width: 100%; }
.held-aktion .mikro { text-wrap: pretty; }
.held .vertrauen { margin-top: var(--space-4); }
.held .vertrauen .trenner, .held .vertrauen > a { display: none; }
.held .vertrauen .link { padding: var(--space-6) 0; font-size: var(--font-size-small); }

/* ---------- Creative: die verkaufsoptimierte Beispiel-Website (nur ihre Hero-Section) + Mitteilung beim Betrieb ---------- */
.kreativ { position: relative; min-width: 0; perspective: var(--perspective-creative, 1800px); }
.kreativ::before {
  content: ""; position: absolute; left: 8%; right: 4%; top: 18%; bottom: 6%; z-index: -1;
  border-radius: var(--radius-round); background: var(--gradient-creative-glow); filter: var(--blur-glow);
}
.kreativ .geraet { transform-origin: 60% 50%; }
.kreativ .toast { width: min(var(--size-toast), 88%); margin: var(--space-20) 0 0 -2%; }
.kreativ .toast .text { text-wrap: pretty; }
/* Leuchtpunkt an der oberen rechten Ecke des App-Icons (Innenabstand 16 + Icon 34 − 6); der Ring läuft erst in P8 */
.kreativ .puls {
  position: absolute; left: calc(var(--space-16) + var(--size-person) - var(--space-6)); top: var(--space-10);
  width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--color-accent); box-shadow: var(--glow-pulse);
}
.kreativ .puls::after { content: ""; position: absolute; inset: calc(-1 * var(--space-6)); border-radius: var(--radius-round); box-shadow: 0 0 0 1px var(--color-accent); opacity: 0; }

/* ---------- Fiktive Beispiel-Website „Wärme & Haus“ im Hero (Desktop-Fassung, 8-pt-Raster) ----------
   --u = 8 px im Entwurfsmaß der Beispiel-Website (1280 px breit) und wächst mit der Browser-Hülle (cqi).
   Auf .kreativ begrenzt, damit sich Hero und Story 1 (eigene .bw-Regeln) nicht beeinflussen. */
.kreativ .bw {
  --u: calc(100cqi / 160); position: absolute; inset: 0; overflow: hidden;
  font-family: var(--font-text); font-size: calc(var(--u) * 2); line-height: var(--leading-text); color: var(--example-light);
}
.kreativ .bw-foto { position: absolute; inset: 0; overflow: hidden; background: var(--color-device-photo-ground); }
.kreativ .bw-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.kreativ .bw-schleier { position: absolute; inset: 0; pointer-events: none; background: var(--example-veil-after); }
.kreativ .bw-nav {
  position: absolute; z-index: var(--z-label); left: 0; right: 0; top: 0; height: calc(var(--u) * 9);
  display: flex; align-items: center; gap: calc(var(--u) * 4); padding: 0 calc(var(--u) * 8);
}
.kreativ .bw-logo { display: flex; align-items: center; gap: var(--u); font: var(--font-weight-display) calc(var(--u) * 2.25) / var(--leading-none) var(--font-display); letter-spacing: var(--tracking-h3); white-space: nowrap; }
.kreativ .bw-logo i { flex: none; width: calc(var(--u) * 2); height: calc(var(--u) * 2); border-radius: var(--radius-round); background: var(--example-orb); }
.kreativ .bw-links { display: flex; gap: calc(var(--u) * 4); margin-left: auto; font-size: calc(var(--u) * 1.75); color: var(--example-light-a86); white-space: nowrap; }
.kreativ .bw-navbtn {
  display: inline-flex; align-items: center; height: calc(var(--u) * 5); padding: 0 calc(var(--u) * 2.5); border-radius: var(--radius-pill);
  background: var(--example-light); color: var(--example-ink); font-size: calc(var(--u) * 1.75); font-weight: var(--font-weight-display); white-space: nowrap;
}
.kreativ .bw-burger { display: none; }
.kreativ .bw-h .inl { display: inline-block; }
/* Headline oben links, Assistent unten links, rechts nur das Foto */
.kreativ .bw-held { position: absolute; z-index: var(--z-raised); left: calc(var(--u) * 8); top: calc(var(--u) * 15); width: calc(var(--u) * 64); display: grid; justify-items: start; }
.kreativ .bw-kick { font: var(--font-weight-medium) calc(var(--u) * 1.5) / calc(var(--u) * 2) var(--font-mono); letter-spacing: var(--tracking-mono-loose); text-transform: uppercase; color: var(--example-light-a82); }
.kreativ .bw-h { margin-top: calc(var(--u) * 2); font: var(--font-weight-display) calc(var(--u) * 8) / calc(var(--u) * 8) var(--font-display); letter-spacing: var(--tracking-h2); }
.kreativ .bw-sub { max-width: calc(var(--u) * 52); margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 2.25); line-height: calc(var(--u) * 3); color: var(--example-light-a90); }
.kreativ .bw-assist { position: absolute; z-index: var(--z-raised); left: calc(var(--u) * 8); bottom: calc(var(--u) * 6); width: calc(var(--u) * 56); }
.kreativ .bw-karte, .kreativ .bw-ergebnis {
  display: grid; align-content: start; padding: calc(var(--u) * 3); border-radius: calc(var(--u) * 1.5);
  background: var(--example-paper); color: var(--example-ink); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) calc(var(--u) * -2) var(--example-shadow);
}
.kreativ .bw-karte { position: relative; }
/* Ergebnis liegt deckungsgleich über dem Fragen-Stapel: statischer Endzustand = Preisspanne */
.kreativ .bw-ergebnis { position: absolute; inset: 0; }
.kreativ .bw-fort { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * .5); }
.kreativ .bw-fort i { position: relative; height: calc(var(--u) * .5); border-radius: var(--radius-pill); background: var(--example-ink-a12); overflow: hidden; }
.kreativ .bw-fort i b { position: absolute; inset: 0; background: var(--example-accent); transform-origin: left; }
.kreativ .bw-stapel { position: relative; display: grid; }
.kreativ .bw-stapel > * { grid-area: 1 / 1; }
.kreativ .bw-q-label { margin-top: calc(var(--u) * 2); }
.kreativ .bw-q-frage { margin-top: var(--u); }
.kreativ .bw-q-wert { margin-top: calc(var(--u) * 2); }
.kreativ .bw-label { font: var(--font-weight-medium) calc(var(--u) * 1.5) / calc(var(--u) * 2) var(--font-mono); letter-spacing: var(--tracking-mono-loose); text-transform: uppercase; color: var(--example-ink-secondary); }
.kreativ .bw-frage { align-self: start; min-height: calc(var(--u) * 6); font: var(--font-weight-display) calc(var(--u) * 2.5) / calc(var(--u) * 3) var(--font-display); letter-spacing: var(--tracking-h3); }
.kreativ .bw-eingabe {
  display: flex; align-items: center; justify-content: space-between; gap: var(--u); height: calc(var(--u) * 6); padding: 0 calc(var(--u) * 2);
  border-radius: calc(var(--u) * .75); box-shadow: inset 0 0 0 var(--stroke-bold) var(--example-ink);
  font: var(--font-weight-medium) calc(var(--u) * 2) / var(--leading-none) var(--font-mono); color: var(--example-ink);
}
.kreativ .bw-eingabe svg { width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); color: var(--example-accent); }
.kreativ .bw-weiter {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--u); height: calc(var(--u) * 5); margin-top: calc(var(--u) * 2); padding: 0 calc(var(--u) * 2.5);
  border-radius: var(--radius-pill); background: var(--example-ink); color: var(--example-light); font-size: calc(var(--u) * 1.75); font-weight: var(--font-weight-display);
}
.kreativ .bw-weiter svg { width: calc(var(--u) * 2); height: calc(var(--u) * 2); }
.kreativ .bw-ergebnis .bw-weiter { background: var(--example-accent); }
.kreativ .bw-preis { margin-top: var(--u); font: var(--font-weight-display) calc(var(--u) * 5) / calc(var(--u) * 6) var(--font-display); letter-spacing: var(--tracking-h2); font-variant-numeric: tabular-nums; }
.kreativ .bw-reihe {
  display: flex; justify-content: space-between; gap: calc(var(--u) * 2); margin-top: var(--u); padding-top: var(--u); border-top: 1px solid var(--example-line);
  font-size: calc(var(--u) * 1.75); line-height: calc(var(--u) * 2.5); color: var(--example-ink-secondary);
}
/* Werte in Textschrift wie im freigegebenen Stand (dort greift die Mono-Angabe nicht, weil „font: … / inherit …“ ungültig ist) */
.kreativ .bw-reihe b { color: var(--example-ink); font-weight: var(--font-weight-regular); font-variant-numeric: tabular-nums; }

/* ---------- unter 768 px: Telefon-Hülle 9 : 16 wie Story 1 (P9, K-VIS-04/09), Telefon-Fassung der Beispiel-Website (Entwurfsmaß 390 px) ----------
   Statt eines geschrumpften Browsers: Hülle aus base.css (.geraet--wechsel), Raster der Beispiel-Website wie .st1 .bw--nachher.
   Kleinste Schrift (Kicker, Etiketten) 1,6 u ≥ 11 px bei 342 px Hüllenbreite. Mitteilung greift unten rechts ins Telefon. */
@media (max-width: 767.98px) {
  .kreativ { display: grid; }
  .kreativ .geraet { width: min(100%, var(--size-plate, 560px) * .64); justify-self: center; }
  .kreativ .bw { --u: calc(100cqi / 48.75); }
  .kreativ .bw-foto img { object-position: 64% 50%; }
  .kreativ .bw-schleier { background: var(--example-veil-after-phone); }
  .kreativ .bw-nav { height: calc(var(--u) * 7); padding: 0 calc(var(--u) * 3); }
  .kreativ .bw-logo { font-size: calc(var(--u) * 2); }
  .kreativ .bw-links, .kreativ .bw-navbtn { display: none; }
  .kreativ .bw-burger {
    display: block; width: calc(var(--u) * 3); height: calc(var(--u) * 2); margin-left: auto;
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 100% var(--stroke-bold) no-repeat,
      linear-gradient(currentColor, currentColor) 0 50% / 100% var(--stroke-bold) no-repeat,
      linear-gradient(currentColor, currentColor) 0 100% / 100% var(--stroke-bold) no-repeat;
  }
  .kreativ .bw-held { left: calc(var(--u) * 3); right: calc(var(--u) * 3); top: calc(var(--u) * 9); width: auto; }
  .kreativ .bw-kick, .kreativ .bw-label { font-size: calc(var(--u) * 1.6); }
  .kreativ .bw-h { margin-top: calc(var(--u) * 1.5); font-size: calc(var(--u) * 4.5); line-height: calc(var(--u) * 4.5); }
  .kreativ .bw-sub { max-width: calc(var(--u) * 36); margin-top: calc(var(--u) * 1.5); font-size: calc(var(--u) * 1.75); line-height: calc(var(--u) * 2.5); }
  .kreativ .bw-assist { left: calc(var(--u) * 3); right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); width: auto; }
  .kreativ .bw-frage { font-size: calc(var(--u) * 2.25); }
  .kreativ .toast { justify-self: end; width: min(var(--size-toast), 92%); margin: calc(-1 * var(--space-48)) 0 0; position: relative; z-index: var(--z-raised); }
}

/* ---------- ab 560 px: Zeitstrahl, Trenner und Referenz-Link sichtbar, Button in natürlicher Breite ---------- */
@media (min-width: 560px) {
  .held-text { gap: var(--space-24); }
  .zeit { display: grid; }
  .zeit-satz { font-size: var(--font-size-statement); }
  .held .vertrauen > a { display: inline; }
  .held-aktion .btn { width: auto; }
  /* Trenner nur, wenn Porträts, Bewertung und Link in eine Zeile passen (braucht 478 px); sonst bricht der Link ohne hängenden Strich um */
  @container held-text (min-width: 490px) {
    .held .vertrauen .trenner { display: block; }
  }
}

/* ---------- ab 1024 px: zwei Spalten 5 : 6,2, Hero füllt den Bildschirm, Creative leicht gedreht ---------- */
@media (min-width: 1024px) {
  .held { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--kopf-h) + var(--space-48)) 0 var(--space-64); }
  .held .wrap { width: 100%; grid-template-columns: minmax(0, 5fr) minmax(0, 6.2fr); column-gap: var(--gap-hero); align-items: center; }
  .kreativ .geraet { transform: rotateY(var(--tilt-creative-y, -8deg)) rotateX(var(--tilt-creative-x, 3deg)); }
  /* Mikrotext neben dem Button erst ab 490 px Spaltenbreite (ca. 1340 px Fenster); schmaler stünde er in 3–4 Zeilen */
  @container held-text (min-width: 490px) {
    .held-aktion { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-24); }
  }
  /* schmale Textspalte (1024 bis ca. 1340 px): die Texte dürfen 12 px in den Spaltenabstand (≥ 51 px). So brechen H1 und Lead
     wie im freigegebenen Stand um („Kunden machen.“ in einer Zeile); dort ragte die Spalte durch Button + Mikrotext 9 px hinein. */
  @container held-text (max-width: 489.98px) {
    .held-text > * { margin-right: calc(-1 * var(--space-12)); }
  }
}

/* ---------- niedrige Desktops (≤ 820 px hoch): kompakt, Zeitstrahl aus ---------- */
@media (min-width: 1024px) and (max-height: 820px) {
  .held { padding-top: calc(var(--kopf-h) + var(--space-24)); padding-bottom: var(--space-32); }
  .held-text { gap: var(--space-18); }
  .held .zeit { display: none; }
  .held .lead { font-size: var(--font-size-body-lg); }
}