/* Seiten-Begrenzung (Folgeauftrag B-business-plattform, Lead 13.11.2026): Diese Startseiten-Stile wirken nur noch auf der Startseite.
   Jeder Selektor beginnt mit :where(…) (null Spezifität): Die Kaskade auf diesen Seiten ist unverändert.
   ai-agents ist seit B-ai-agents (13.11.2026) gestrichen; die Seite trägt ihre Buchungskarte selbst (ai-agents-120-termin.css). */
/* ==========================================================================
   120 erstgespraech · Owner: wdf-section-builder (Auftrag P7-120)
   Abschluss auf Stein (Ton 3). Kopf + vier Schritte · Kalenderkarte #termin (App-Fenster) ·
   Personenzeile · Nebenweg · Bildwelt W2 (mobil Schlussbild, ab 1024 rechts unter der Karte).
   Ergebnissatz steht als Abschluss des Leads vor den Schritten (P13-S3, K-VIS-03/K-CONV-08), nie nach der Aktion.
   Mobil in Quellreihenfolge: Kopf → Schritte → Karte → Person → Nebenweg → Bild (K-CONV-10:
   nach dem CTA-Sprung ist „Erstgespräch buchen“ bei 390 × 844 ohne Scrollen sichtbar).
   Auf Stein nur text und text-muted, kein text-subtle, keine Felder direkt auf der Fläche (style-lock § 5).
   Smartphone zuerst, Erweiterungen mit min-width. Nur Tokens (style-lock § 0 Regel 8).
   ========================================================================== */

/* ---------- Abschnitt: eine Spalte, Gruppen mit mehr Abstand als ihr Inneres ---------- */
:where([data-wdf-page="home"]) .eg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack);
  min-width: 0;
}
:where([data-wdf-page="home"]) .eg > * { min-width: 0; }
:where([data-wdf-page="home"]) .eg__lead { display: grid; gap: var(--s-5); align-content: start; }
:where([data-wdf-page="home"]) .eg__head { gap: var(--s-3); }

/* ---------- So geht es weiter: vier Zeilen, Nummern in 24-px-Kacheln, Haarlinie als Faden ---------- */
:where([data-wdf-page="home"]) .eg-steps {
  display: grid;
  gap: var(--s-3);
  counter-reset: eg-step;
}
:where([data-wdf-page="home"]) .eg-steps li {
  position: relative;
  display: grid;
  grid-template-columns: var(--s-5) minmax(0, 1fr);
  column-gap: var(--s-3);
  counter-increment: eg-step;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-text);
  text-wrap: pretty;
}
:where([data-wdf-page="home"]) .eg-steps li::before {
  content: counter(eg-step);
  display: grid;
  place-items: center;
  width: var(--s-5);
  height: var(--s-5);
  margin-top: 1px;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-s);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
/* Faden von Kachel zu Kachel (endet kurz vor der nächsten Kachel) */
:where([data-wdf-page="home"]) .eg-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--s-5) / 2);
  top: calc(var(--s-5) + var(--s-1));
  bottom: calc(-1 * var(--s-2));
  width: 1px;
  background: var(--color-line-strong);
}

/* ---------- Buchungskarte (buchung) = App-Fenster. Sprungziel: Karte steht unter der Kopfzeile.
   Scurio eingebettet als Zwei-Klick-Lösung (P20-S-120): Zustand an der Karte data-state = start | laedt | bereit | fehler.
   Ohne JS: Knopf ist Link in neuen Tab, Fußlink entfällt (.eg-js / .eg-nojs). ---------- */
:where([data-wdf-page="home"]) .eg-cal { margin-top: 0; }
/* Sprungziel (K-CONV-10, P14-S6): Alle „Erstgespräch buchen“-CTAs springen per scrollIntoView zu #termin. Unter 1024 (eine Spalte)
   steht die Karte so tief, dass die vier Schritte darüber mit im Bild sind: Abstand = Höhe der Schrittliste + Lücke (gemessen je
   Breitenband, auf das nächste Token-Vielfache aufgerundet, damit Schritt 1 nie unter die Kopfzeile rutscht) + 8 px.
   min(): Bei niedrigen Fenstern (Querformat, 200 % Zoom) hat der Knopf Vorrang, die Karte rückt hoch (100svh − Kopfzeile − 160 px).
   Die stehende Leiste blendet am Haltepunkt #termin aus, unten steht also das ganze Fenster zur Verfügung.
   Ab 1024 steht die Karte neben Kopf und Schritten: dort gilt die Grundregel aus base.css (Kopfzeile + 16 px). */
@media (max-width: 1023px) {
  :where([data-wdf-page="home"]) .erstgespraech #termin {
    --eg-jump: calc(var(--s-8) * 2 + var(--s-5));                       /* 480–1023: Schritte bis 212 px (768: 218) → 216 */
    scroll-margin-block-start: min(calc(var(--eg-jump) + var(--s-2)), calc(100svh - var(--header-h) - var(--s-8) - var(--s-7)));
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :where([data-wdf-page="home"]) .erstgespraech #termin { --eg-jump: calc(var(--s-8) * 2 + var(--s-5) + var(--s-1)); }   /* 768–1023: bis 218 px → 220 */
}
@media (max-width: 479px) {
  :where([data-wdf-page="home"]) .erstgespraech #termin { --eg-jump: calc(var(--s-8) * 2 + var(--s-7)); }                /* 375–479 (Hauptgerät 390): bis 257 px → 256 */
}
@media (max-width: 374px) {
  :where([data-wdf-page="home"]) .erstgespraech #termin { --eg-jump: calc(var(--s-8) * 2 + var(--s-7) + var(--s-5)); }   /* 360–374: bis 280 px → 280 */
}
@media (max-width: 359px) {
  :where([data-wdf-page="home"]) .erstgespraech #termin { --eg-jump: calc(var(--s-8) * 3 + var(--s-6)); }                /* 320–359: bis 325 px → 328 */
}
:where([data-wdf-page="home"]) .eg-cal__icon { width: var(--s-4); height: var(--s-4); color: var(--color-text-muted); }
:where([data-wdf-page="home"]) .eg-cal__panel {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  padding: var(--s-4);
}
:where([data-wdf-page="home"]) .eg-cal__cta { justify-items: stretch; }
/* Beschriftung darf bei 320 px oder 200 % Zoom umbrechen, statt die Karte zu sprengen */
:where([data-wdf-page="home"]) .eg-cal__cta .btn { white-space: normal; padding-block: var(--s-2); }
/* Vorwarnung zum Tab-Wechsel (K-CONV-10): direkt unter dem Knopf, gleiche Mikro-Stufe, linksbündig wie im Hero */
:where([data-wdf-page="home"]) .eg-cal__note { text-wrap: pretty; }
/* Mikrozeile linksbündig wie im Hero (K-VIS-04). Bei 390 px steht sie einzeilig: Zeichenabstand wie Titel (Text bleibt 14 px, ungekürzt) */
:where([data-wdf-page="home"]) .eg-cal__micro { text-wrap: balance; letter-spacing: var(--ls-title); }
/* Smartphone: Mikrozeile darf 8 px in den rechten Innenabstand ragen (bei 390 px Text 327 px, Innenraum 318 px), linke Kante bleibt am Knopf */
@media (max-width: 767px) {
  :where([data-wdf-page="home"]) .eg-cal__micro { margin-inline-end: calc(-1 * var(--s-2)); }
}
@media (min-width: 768px) {
  /* Knopf und Mikrozeile nebeneinander (.cta), die Vorwarnung als eigene Zeile darunter */
  :where([data-wdf-page="home"]) .eg-cal__micro { order: 1; }
  :where([data-wdf-page="home"]) .eg-cal__note { order: 2; flex-basis: 100%; }
}

/* ---------- Eingebetteter Kalender (P20-S-120) ---------- */
html:not(.js) :where([data-wdf-page="home"]) .eg-js,
html.js :where([data-wdf-page="home"]) .eg-nojs { display: none; }
:where([data-wdf-page="home"]) .eg-cal__panel[hidden],
:where([data-wdf-page="home"]) .eg-cal__frame[hidden] { display: none; }
/* Reservierte Höhe = Starthöhe des eingebetteten Widgets (Kalender + Uhrzeiten des nächsten freien Tags), gemessen 12.11.2026
   in Chromium an der echten Widget-Seite; schwankt mit der Zahl freier Uhrzeiten: iframe 288–348 px → 1.250–1.358 · 448–606 → 1.026–1.270 · 704 → ca. 1.146.
   Auf Token-Vielfache in der Mitte der Spanne gerundet. Danach setzt das Skript die echte Höhe aus den Widget-Meldungen (scurio:booking:resize;
   nach Wahl einer Uhrzeit mit Formular ca. 2.050–2.150 px). Die Karte wächst nur nach unten, darüber verschiebt sich nichts. */
:where([data-wdf-page="home"]) .eg-cal {
  --eg-frame-h: calc(var(--s-8) * 13);                              /* 1248 (iframe 320–479, randlos) */
}
@media (min-width: 480px) { :where([data-wdf-page="home"]) .eg-cal { --eg-frame-h: calc(var(--s-8) * 12); } }   /* 1152 (iframe 448–735) */
:where([data-wdf-page="home"]) .eg-cal__frame { position: relative; }
:where([data-wdf-page="home"]) .eg-cal__iframe {
  display: block;
  inline-size: 100%;
  block-size: var(--eg-frame-h);
  border: 0;
  background: transparent;
}
/* Statuszeile: sichtbar beim Laden und bei Fehler, sonst nur für Screenreader (bleibt Live-Bereich) */
:where([data-wdf-page="home"]) .eg-cal__status {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-4);
  color: var(--color-text-muted);
  text-wrap: pretty;
}
:where([data-wdf-page="home"]) .eg-cal__status:focus { outline: none; }
:where([data-wdf-page="home"]) .eg-cal__status:focus-visible { outline: 2px solid var(--color-focus); outline-offset: calc(-1 * var(--s-1)); }
:where([data-wdf-page="home"]) .eg-cal__warn { display: none; flex: none; width: var(--s-4); height: var(--s-4); margin-top: 2px; color: var(--color-error); }
:where([data-wdf-page="home"]) .eg-cal[data-state="laedt"] .eg-cal__iframe { visibility: hidden; }
:where([data-wdf-page="home"]) .eg-cal[data-state="bereit"] .eg-cal__status {
  clip-path: inset(50%);
  width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap;
}
:where([data-wdf-page="home"]) .eg-cal[data-state="fehler"] .eg-cal__iframe { display: none; }
:where([data-wdf-page="home"]) .eg-cal[data-state="fehler"] .eg-cal__status { position: static; color: var(--color-text); }
:where([data-wdf-page="home"]) .eg-cal[data-state="fehler"] .eg-cal__warn { display: block; }
/* Smartphone, Kalender offen: Karte randlos über die ganze Breite. Der Monatskalender des Widgets braucht 390 px iframe-Breite,
   sonst schneidet Scurio die Spalte „So“ ab (gemessen 12.11.2026). Kopf der Karte bleibt, wo er ist; es ändert sich nur die Breite. */
@media (max-width: 767px) {
  :where([data-wdf-page="home"]) .eg-cal:not([data-state="start"]) {
    margin-inline: calc(-1 * var(--page-pad));
    border-inline: 0;
    border-radius: 0;
  }
  :where([data-wdf-page="home"]) .eg-cal:not([data-state="start"]) .ui-window__bar,
  :where([data-wdf-page="home"]) .eg-cal:not([data-state="start"]) .eg-cal__foot { padding-inline: var(--page-pad); }
}
/* Fußzeile: dauerhafter Weg in den neuen Tab (nur mit JS; ohne JS ist der Knopf selbst dieser Weg) */
:where([data-wdf-page="home"]) .eg-cal__foot { display: flex; padding-block: 0; }
:where([data-wdf-page="home"]) .eg-cal__newtab { font-size: var(--fs-micro); }

/* ---------- Ergebnissatz (Abschluss des Leads, K-VIS-03/K-CONV-08), Personenzeile, Nebenweg ---------- */
/* Einleitung einheitlich hell (P14-S6, Kritik Lauf 16 P3): die Aufforderung ist nicht schwächer gewichtet als der Ergebnissatz. Auf Stein nur text/text-muted. */
:where([data-wdf-page="home"]) .eg__intro { color: var(--color-text); }
:where([data-wdf-page="home"]) .eg__person { margin-top: 0; }
/* Auf Stein nie unter 14 px (text-muted 4,58 : 1) */
:where([data-wdf-page="home"]) .eg__person .person__label { font-size: var(--fs-micro); }
:where([data-wdf-page="home"]) .eg__person .person__photo { background: var(--color-ui-raised); }
/* Rollenzeile: Glieder mit Trennpunkt per ::before in der Lücke, der Punkt am Zeilenanfang wird abgeschnitten (wie Kontaktzeile) */
:where([data-wdf-page="home"]) .eg__person .person__role { display: flex; flex-wrap: wrap; column-gap: var(--s-3); overflow: hidden; }
:where([data-wdf-page="home"]) .eg__person .person__role > * { position: relative; min-width: 0; }
:where([data-wdf-page="home"]) .eg__person .person__role > * + *::before {
  content: "·";
  content: "·" / "";   /* reine Zierde: Screenreader lesen den Punkt nicht mit */
  position: absolute; inset-inline-end: 100%; inline-size: var(--s-3); text-align: center;
}
/* Kontaktzeile: zwei Glieder, Trennpunkt per ::before in der Lücke vor dem zweiten Glied. Das erste Glied jeder Zeile liegt am Rand des Kastens,
   sein Punkt fällt daneben aus dem Kasten und wird abgeschnitten: nie ein Punkt am Zeilenende oder allein.
   Innenabstand 4 px (= Fokusring 2 px + Abstand 2 px), damit overflow den Ring der Links nicht beschneidet; der Außenabstand gleicht ihn aus. */
:where([data-wdf-page="home"]) .eg__alt {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-4);
  max-width: var(--measure);
  padding: var(--s-1);
  margin: calc(-1 * var(--s-1));
  overflow: hidden;
}
:where([data-wdf-page="home"]) .eg__alt > * { position: relative; min-width: 0; }
:where([data-wdf-page="home"]) .eg__alt > * + *::before {
  content: "·";
  content: "·" / "";   /* reine Zierde: Screenreader lesen den Punkt nicht mit */
  position: absolute;
  inset-inline-end: 100%;
  inline-size: var(--s-4);
  text-align: center;
}
:where([data-wdf-page="home"]) .eg__alt .inline-link { white-space: nowrap; }

/* Bild (.media aus base.css): Rahmen, Maske, Radius und Tiefe kommen vom Baustein.
   Mobil: Schlussbild bündig am Abschnittsende (Abschnitt ohne unteren Innenabstand), Zuschnitt rechts unten mit Hand + Glaskachel. */
:where([data-wdf-page="home"]) .eg__img { --media-focus: 50% 50%; }
:where([data-wdf-page="home"]) .erstgespraech { padding-bottom: 0; }
@media (min-width: 768px) {
  :where([data-wdf-page="home"]) .erstgespraech { padding-bottom: var(--space-section); }
  :where([data-wdf-page="home"]) .eg__img { --media-ratio-l: 2 / 1; }   /* Tablet einspaltig: flaches Band statt 16:9 */
}

/* ---------- Tablet: mehr Luft in der Karte ---------- */
@media (min-width: 768px) {
  :where([data-wdf-page="home"]) .eg__lead { gap: var(--s-5); }
  :where([data-wdf-page="home"]) .eg-cal__panel { padding: var(--s-5); }
  :where([data-wdf-page="home"]) .eg-cal__status { padding: var(--s-5); }
  :where([data-wdf-page="home"]) .eg-cal__foot { padding-inline: var(--s-5); }
  :where([data-wdf-page="home"]) .eg-cal__cta { justify-items: start; }
  :where([data-wdf-page="home"]) .eg-cal__cta .btn { width: auto; }
  :where([data-wdf-page="home"]) .eg-steps li { font-size: var(--fs-body); line-height: var(--lh-body); }
}

/* ---------- Desktop: links Kopf + Schritte, darunter Person und Nebenweg; rechts Karte, darunter das Bild.
   Beide Spalten schließen etwa gleich hoch ab, keine Insel links (K-VIS-04). Alle Zuweisungen von Flächen nur hier (style-lock § 0 Regel 9). ---------- */
@media (min-width: 1024px) {
  :where([data-wdf-page="home"]) .eg {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas:
      "lead   card"
      "lead   img"
      "person img"
      "alt    img";
    column-gap: var(--s-7);
    row-gap: var(--s-5);
    align-items: start;
  }
  :where([data-wdf-page="home"]) .eg__lead { grid-area: lead; }
  :where([data-wdf-page="home"]) .eg-cal { grid-area: card; margin-top: 0; }
  :where([data-wdf-page="home"]) .eg__person { grid-area: person; }
  :where([data-wdf-page="home"]) .eg__alt { grid-area: alt; }
  :where([data-wdf-page="home"]) .eg__img { grid-area: img; --media-ratio-l: 16 / 9; --media-focus: 100% 50%; }
  /* Kalender geladen: die Karte nimmt die ganze rechte Spalte, Person, Nebenweg und Bild rücken links unter die Schritte
     (sonst entstünde links eine Lücke in Kartenhöhe). Kopf und Karte bleiben, wo sie sind. */
  :where([data-wdf-page="home"]) .eg:has(> .eg-cal:not([data-state="start"])) {
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "lead   card"
      "person card"
      "alt    card"
      "img    card";
  }
}

/* motion — Owner: wdf-motion-designer (P16-M, Runde 3b), Bewegung pfad-schritte (motion.js)
   Kachel und Verbindungslinie der Schritte hängen an zwei Variablen, die nur motion.js während der Ankunft setzt
   (sonst 1 = Endzustand). Die Kontur .ui-ziel legt motion.js kurz über die Buchungskarte (aria-hidden, Deckkraft);
   die Karte selbst bewegt sich nie. */
@media (prefers-reduced-motion: no-preference) {
  :where([data-wdf-page="home"]) .eg-steps li::before { transform: scale(var(--eg-tile, 1)); }
  :where([data-wdf-page="home"]) .eg-steps li:not(:last-child)::after { transform: scaleY(var(--eg-line, 1)); transform-origin: 50% 0; }
}
:where([data-wdf-page="home"]) .eg-cal > .ui-ziel {
  position: absolute; inset: 0;
  border: 1px solid var(--color-accent);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}