/* 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). */
/* ==========================================================================
   30 folgen · Owner: wdf-section-builder (Auftrag P7-30)
   Text + Rechner „Was manuelle Arbeit Sie im Jahr kostet“. Der Rechner ist ein App-Fenster (.ui-window)
   mit vier Zahlenfeldern, Ergebnis-Band und Vergleichszeile zum Preis.
   Smartphone zuerst (Beschriftung links, schmales Feld rechts, Einheit im Feld), ab 768 zwei Spalten (Beschriftung über dem Feld),
   ab 1024 Text | Rechner. Nur Tokens (style-lock § 0 Regel 8).
   Maße: --fo-hit (Mindesthöhe Eingabe/Knopf, 44 px) und --fo-unit-w (Platz der Einheit im Feld) stehen unten an .fo.
   ========================================================================== */

/* ---------- Abschnitt ---------- */
:where([data-wdf-page="home"]) .fo {
  --fo-hit: calc(var(--s-6) + var(--s-1));                 /* 44 px Trefferfläche */
  --fo-control-w: calc(var(--w-field-num) + var(--s-5));   /* Feldspalte mobil (Einheit liegt im Feld) */
  --fo-unit-w: calc(var(--s-7) + var(--s-2));              /* Platz der Einheit im Feld, mobil einzeilig (nowrap), lange Einheiten als Kurzform */
  row-gap: var(--s-4); align-items: start;
}
:where([data-wdf-page="home"]) .fo-text { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
:where([data-wdf-page="home"]) .fo-calc { min-width: 0; }

/* ---------- Vergleichszeile (zwei Fassungen, je Breite eine; Umschaltung nur per CSS) ---------- */
:where([data-wdf-page="home"]) .fo-compare strong { color: var(--color-text); font-weight: var(--fw-semibold); }
:where([data-wdf-page="home"]) .fo-compare--side { display: none; }
/* Fassung im Rechner (bis 1023): Geist, direkt unter der Einordnung */
:where([data-wdf-page="home"]) .fo-compare--in {
  gap: 0;
  border-top: 1px solid var(--color-line);
  padding-block: var(--s-3) 0;   /* der Fuß folgt ohne eigene Trennlinie: Vergleich und Kleingedrucktes sind ein Block */
  font-size: var(--fs-ui);
  color: var(--color-text-muted);
}
/* Link im Satz (spart eine Zeile, Längenbudget); Trefferfläche ≥ 32 px über Innenabstand ohne Zeilenverschiebung, wie der Beleg-Link im Hero */
:where([data-wdf-page="home"]) .fo-link { font-weight: var(--fw-semibold); padding-block: var(--s-2); white-space: nowrap; }
@media (max-width: 1023px) {
  :where([data-wdf-page="home"]) .fo-compare--in + .fo-foot { border-top: 0; padding-top: var(--s-2); }
}

/* ---------- Rechner: Etikett und Felder ---------- */
:where([data-wdf-page="home"]) .fo-body { gap: var(--s-3); padding-block: var(--s-3); }
:where([data-wdf-page="home"]) .fo-label { margin: 0; }
:where([data-wdf-page="home"]) .fo-fields { display: grid; gap: var(--s-3); }

/* Mobil: Beschriftung links, Feld rechts (Breite --fo-control-w) mit der Einheit im Feld, Fehler volle Breite darunter.
   Die Einheit bricht nie um (nowrap); „€ pro Stunde“ und „Std. pro Woche“ stehen mobil als Kurzform „€/Std.“ und „Std./Woche“. */
:where([data-wdf-page="home"]) .fo-field {
  grid-template-columns: minmax(0, 1fr) var(--fo-control-w);
  column-gap: var(--s-3);
  row-gap: var(--s-2);
  align-items: start;
}
:where([data-wdf-page="home"]) .fo-labelbox { grid-column: 1; grid-row: 1; display: grid; gap: var(--s-1); align-self: center; min-width: 0; }
:where([data-wdf-page="home"]) .fo-labelbox .field__label { line-height: 1.4; text-wrap: pretty; }
:where([data-wdf-page="home"]) .fo-control { grid-column: 2; grid-row: 1; position: relative; display: block; min-width: 0; }
:where([data-wdf-page="home"]) .fo-calc .fo-field .input {
  min-height: var(--fo-hit);
  font-size: var(--fs-input);   /* 16 px auch ab 768 (iPad zoomt sonst beim Antippen) */
  text-align: right;
  padding-inline-end: calc(var(--s-3) + var(--s-2) + var(--fo-unit-w));
}
:where([data-wdf-page="home"]) .fo-unit {
  position: absolute; inset-block: 0; inset-inline-end: var(--s-3);
  width: var(--fo-unit-w);
  display: flex; align-items: center; justify-content: flex-end;
  font-size: var(--fs-ui-meta); line-height: 1.2; color: var(--color-text-muted); text-align: right;
  white-space: nowrap;   /* Einheiten brechen nie um */
  pointer-events: none;
}
/* Mobil: Kurzform sichtbar („€/Std.“, „Std./Woche“), die Langform bleibt für Screenreader (aria-describedby); ab 768 umgekehrt */
:where([data-wdf-page="home"]) .fo-unit__long {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
:where([data-wdf-page="home"]) .fo-field .field__error { grid-column: 1 / -1; grid-row: 2; }

/* ---------- Ergebnis-Band ---------- */
:where([data-wdf-page="home"]) .fo-result { display: grid; gap: var(--s-1); padding: var(--s-1) var(--s-4) var(--s-3); }
:where([data-wdf-page="home"]) .fo-result__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  column-gap: var(--s-3);
  min-height: calc(var(--fo-hit) - var(--s-4));   /* Zeile nimmt nur die Höhe des Textes ein … */
}
:where([data-wdf-page="home"]) .fo-result__title { font-size: var(--fs-ui-meta); font-weight: var(--fw-medium); color: var(--color-text-muted); }
:where([data-wdf-page="home"]) .fo-reset { font-size: var(--fs-ui-meta); margin-block: calc(var(--s-2) * -1); }   /* … die Trefferfläche des Knopfes bleibt 44 px (base.css) */
/* Unwirksam, solange die Beispielwerte stehen: aria-disabled statt disabled (Fokus bleibt nach dem Zurücksetzen erhalten),
   Farben aus base.css (.btn-text[aria-disabled="true"]: disabled-text, disabled-line, not-allowed). Keine eigene Regel, keine Deckkraft. */
:where([data-wdf-page="home"]) .fo-result__text {
  /* feste Mindesthöhe: Hinweis bei ungültiger Eingabe ↔ Ergebnissatz ändert die Fensterhöhe nicht */
  min-height: calc(3em * var(--lh-ui));
  font-size: var(--fs-ui-title);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  overflow-wrap: anywhere;
}
:where([data-wdf-page="home"]) .fo-result__text--wait { font-weight: var(--fw-regular); color: var(--color-text-muted); }   /* ungültige Eingabe: gedämpfter Hinweis statt „–“ */
:where([data-wdf-page="home"]) .fo-num { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
:where([data-wdf-page="home"]) .fo-result__note { font-size: var(--fs-ui); color: var(--color-text-muted); text-wrap: pretty; }

/* ---------- Fuß: Rechenweg und Datenschutz (immer sichtbar) ---------- */
:where([data-wdf-page="home"]) .fo-foot { display: grid; gap: var(--s-1); }
:where([data-wdf-page="home"]) .fo-foot p { text-wrap: pretty; }

/* ---------- Smartphone: kompaktere Abstände im Fenster (Längenbudget; Gruppenabstand bleibt ≥ 2 × innen = 8 px gegenüber 4 px) ---------- */
@media (max-width: 767px) {
  :where([data-wdf-page="home"]) .fo-text { gap: var(--s-3); }
  :where([data-wdf-page="home"]) .fo-body { padding-block: var(--s-2); }
  :where([data-wdf-page="home"]) .fo-fields { gap: var(--s-2); }
  :where([data-wdf-page="home"]) .fo-result { padding-bottom: var(--s-2); }
  :where([data-wdf-page="home"]) .fo-compare--in { padding-top: var(--s-2); }
  :where([data-wdf-page="home"]) .fo-foot { padding-bottom: var(--s-2); }
}

/* ---------- ab 768: zwei Spalten, Beschriftung über dem Feld, Einheit im Feld (einzeilig) ---------- */
@media (min-width: 768px) {
  :where([data-wdf-page="home"]) .fo-body { padding-block: var(--s-5); padding-inline: var(--s-5); }
  :where([data-wdf-page="home"]) .fo-result { padding-inline: var(--s-5); }
  :where([data-wdf-page="home"]) .fo-compare--in { padding-inline: var(--s-5); }
  :where([data-wdf-page="home"]) .fo-foot { padding-inline: var(--s-5); }
  :where([data-wdf-page="home"]) .ui-window__bar { padding-inline: var(--s-5); }

  :where([data-wdf-page="home"]) .fo-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); row-gap: 0; }
  /* Subgrid: Beschriftung / Feld / Fehler liegen je Reihe auf gemeinsamen Linien → Felder stehen auf einer Höhe, auch wenn ein Fehler erscheint */
  :where([data-wdf-page="home"]) .fo-field {
    grid-row: span 3;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    padding-bottom: var(--s-4);
  }
  :where([data-wdf-page="home"]) .fo-labelbox { grid-column: 1; grid-row: 1; align-self: end; padding-bottom: var(--s-2); }
  :where([data-wdf-page="home"]) .fo-control { grid-column: 1; grid-row: 2; }
  :where([data-wdf-page="home"]) .fo-field .field__error { grid-column: 1; grid-row: 3; margin-top: var(--s-2); }

  :where([data-wdf-page="home"]) .fo-unit { width: auto; font-size: var(--fs-ui); line-height: var(--lh-ui); }
  :where([data-wdf-page="home"]) .fo-unit__short { display: none; }
  :where([data-wdf-page="home"]) .fo-unit__long { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
  /* Platz für die Einheit im Feld (in ch der Eingabeschrift, großzügig gerechnet) */
  :where([data-wdf-page="home"]) .fo-field[data-field="personen"] { --fo-unit-w: 8ch; }
  :where([data-wdf-page="home"]) .fo-field[data-field="stunden"] { --fo-unit-w: 14ch; }
  :where([data-wdf-page="home"]) .fo-field[data-field="satz"] { --fo-unit-w: 12ch; }
  :where([data-wdf-page="home"]) .fo-field[data-field="wochen"] { --fo-unit-w: 6ch; }

  :where([data-wdf-page="home"]) .fo-result__text { min-height: calc(2em * var(--lh-ui)); }
}

@media (min-width: 1280px) {
  :where([data-wdf-page="home"]) .fo-result__text { min-height: calc(1em * var(--lh-ui)); }
}

/* ---------- ab 1024: Text 5 | Rechner 7, Vergleich in der linken Spalte ---------- */
@media (min-width: 1024px) {
  :where([data-wdf-page="home"]) .fo-text { grid-column: 1 / span 5; padding-inline-end: var(--s-5); }
  :where([data-wdf-page="home"]) .fo-calc { grid-column: 6 / span 7; }
  :where([data-wdf-page="home"]) .fo-compare--in { display: none; }
  :where([data-wdf-page="home"]) .fo-compare--side {
    display: grid; gap: var(--s-1);
    margin-top: var(--s-3);
    padding-top: var(--s-5);
    border-top: 1px solid var(--color-line);
  }
  :where([data-wdf-page="home"]) .fo-compare--side .textlink { justify-self: start; }
}

/* P13-S1 (K-VIS-05): Feldhinweise ohne Einzelwort in der letzten Zeile („grobe Schätzung genügt.“ bleibt zusammen) */
:where([data-wdf-page="home"]) .fo-labelbox .field__hint { text-wrap: pretty; }