/* Alltagsduo Startseite (index.html): Stile nur für diese Seite. Stand 30.10.2026, Agent „seite“.
   Laden nach alltagsduo.css und site.css. Alle Klassen mit Präfix as-. Ändert keine gemeinsamen Klassen,
   nur Werte innerhalb von as-Klassen. Keine Schatten, keine Verläufe. Bewegung: gelbe Linie (site.css/site.js), Drehen des Pfeils
   beim Aufklappen und der Runde-3-Block am Ende (data-zeigen, seite.js). Erster Bildschirm übernommen aus entwurf/a.css (Variante A, Stopp 1). */

/* ------------------------------------------------------------ Gemeinsame Textbausteine dieser Seite */
.as-kern { font-weight: 800; font-size: 20px; line-height: 1.45; }
.as-ober { color: var(--btn); font-weight: 800; font-size: 18px; line-height: 1.3; }
.as-h3 { font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
.as-h4 { font-size: 20px; line-height: 1.25; font-weight: 800; margin: 0; }
.as-knoepfe { max-width: 640px; }
.as-foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--shape); background: var(--surface-2); }
.as-foto-quer { aspect-ratio: 5 / 4; }

/* Text und Foto nebeneinander (Handy: untereinander, Foto unter dem Text) */
.as-zwei { display: grid; gap: 28px; align-items: start; }
.as-zwei > .as-foto { max-width: 420px; }
@media (min-width: 760px) {
  .as-zwei { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 40px; }
  .as-zwei > .as-foto { max-width: none; }
}
@media (min-width: 1024px) {
  .as-zwei { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 64px; }
  .as-zwei-quer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Liste mit Symbol vor jeder Zeile */
.as-punkte { display: flex; flex-direction: column; gap: 12px; }
.as-punkte li { display: flex; gap: 12px; align-items: flex-start; }
.as-punkte .ic { margin-top: 2px; color: var(--btn); }
.as-nicht .ic { color: var(--ink-2); }

/* Aufklapper (Video-Wortlaut, Helfer-Fragen): Pfeil rechts, dreht sich beim Öffnen */
.as-mehr { border-top: 2px solid var(--line); }
.as-mehr summary, .as-frage summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; font-weight: 800; color: var(--btn); cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.as-mehr summary::-webkit-details-marker, .as-frage summary::-webkit-details-marker { display: none; }
.as-mehr summary .ic, .as-frage summary .ic { transition: rotate .2s var(--ad-ease); }
.as-mehr[open] summary .ic, .as-frage[open] summary .ic { rotate: 180deg; }
.as-mehr > p { padding-bottom: 12px; }
@media (hover: hover) and (pointer: fine) {
  .as-mehr summary:hover, .as-frage summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
}

/* ------------------------------------------------------------ §2 Start (aus Variante A) */
.as-start { padding-top: 20px; }
.as-raster { display: grid; gap: 28px; }
.as-text { min-width: 0; gap: 16px; }
.as-h1 { max-width: 15em; }
.as-text > .btns { max-width: 600px; }
.as-start-link { margin-top: -8px; }
.as-start-klein { margin-top: -6px; font-size: 18px; line-height: 1.45; color: var(--ink-2); }   /* Mehrstunden, kleiner unter den Knöpfen */
.as-vertrauen { max-width: 34em; font-size: 18px; line-height: 1.5; color: var(--ink-2); }

/* Fotos: Handy und Tablet als Streifen unter dem Text (Duo breit, Jonathan schmal), Laptop rechts versetzt.
   Der Ring in Seitenfarbe trennt die zwei Fotos ohne Schatten. */
.as-bilder { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; max-width: 640px; }
.as-bild { display: block; width: 100%; height: clamp(170px, 34vw, 280px); object-fit: cover; border-radius: var(--shape); background: var(--surface-2); }
.as-bild-gross { object-position: 50% 22%; }
.as-bild-klein { object-position: 50% 30%; }

/* Handy (Stopp-1-Pflicht): im sichtbaren Safari-Bereich 390 × 664 stehen Kennzeichen, h1, der ganze Kassen-Satz
   und beide Knöpfe. Dafür rücken Link, Einleitung und Vertrauenszeile nach unten (nur optisch, keine Fokus-Folge betroffen). */
@media (max-width: 599.98px) {
  .as-start { padding-top: 14px; }
  .as-text { gap: 12px; }
  .as-h1 { font-size: 31px; line-height: 1.1; }
  .as-kasse-start { padding: 14px 16px 16px; }
  .as-kasse-start .ad-kasse-satz { font-size: 19px; line-height: 1.42; }
  .as-kasse-start .ad-kasse-satz + .ad-kasse-satz { clear: left; }   /* zweiter Satz beginnt unter dem Euro-Zeichen, nicht eingerückt */
  .as-kasse-start .ad-kasse-zeichen { width: 36px; height: 36px; margin: 0 10px 2px 0; }
  .as-kasse-start .ad-kasse-text > * + * { margin-top: 6px; }
  .as-start-klein { order: 1; margin-top: -2px; }
  .as-start-link { order: 1; margin-top: -4px; }
  .as-einleitung { order: 2; }
  .as-vertrauen { order: 3; }
}

@media (min-width: 1024px) {
  .as-start { padding-top: 40px; padding-bottom: 64px; }
  .as-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: start; }
  .as-text { gap: 20px; }
  .as-bilder { max-width: none; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; align-items: start; }
  .as-bild { height: auto; aspect-ratio: 4 / 5; object-position: 50% 50%; }
  .as-bild-gross { grid-column: 1 / span 9; grid-row: 1; margin-bottom: 16%; }
  .as-bild-klein { grid-column: 8 / -1; grid-row: 1; align-self: end; border: 6px solid var(--bg); border-radius: 26px 26px 26px 11px; }
}

/* ------------------------------------------------------------ §4 Für Familien */
.as-einstieg { display: flex; flex-direction: column; gap: 4px; }
.as-einstieg li { font-size: 20px; line-height: 1.4; }
.as-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.as-karten .card { gap: 10px; }

/* ------------------------------------------------------------ §6 Wobei helfen sie? */
.as-hilfe-raster { display: grid; gap: 24px; align-items: start; }
.as-liste-karte { gap: 14px; }
.as-zettel-spalte { display: flex; flex-direction: column; gap: 20px; max-width: 420px; }
.as-zettel { padding: 22px 26px 26px; background: var(--surface); border-radius: var(--shape); }
.as-zettel-kopf { font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.as-zettel-liste { margin-top: 8px; }
.as-zettel-liste li { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 2px solid var(--line); font-size: 20px; font-weight: 700; }
.as-zettel-liste .ic { color: var(--btn); }
.as-zettel-liste .as-zettel-gross { padding-top: 10px; border-bottom: 0; color: var(--btn); font-size: 27px; font-weight: 900; line-height: 1.15; }
@media (min-width: 760px) { .as-hilfe-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: 32px; } }
@media (min-width: 1024px) { .as-hilfe-raster { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 56px; } }

/* ------------------------------------------------------------ §7 Kosten */
.as-preis-raster { display: grid; gap: 20px; align-items: stretch; }
.as-preis { gap: 12px; }
.as-preis h3 { color: var(--ink-2); font-size: 19px; }
.as-preis-gross { font-size: 23px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; hyphens: manual; }
.as-text-raster { display: grid; gap: 32px; }
.as-block { gap: 10px; }
.as-hinweis { gap: 12px; }
.as-stand { color: var(--ink-2); }
@media (min-width: 760px) {
  .as-preis-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-text-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (min-width: 1024px) { .as-text-raster { column-gap: 64px; } }

/* ------------------------------------------------------------ §8 Ablauf und App-Beispiel */
.as-schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 20px; }
.as-schritte .card { gap: 10px; }
.as-app { margin-top: 24px; }
.as-kennzeichnung { font-weight: 800; hyphens: manual; }
.as-app-raster { display: grid; gap: 24px; align-items: start; }
.as-profile { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.as-profile .ph { height: auto; }
.as-app-bild { display: block; width: 100%; max-width: 260px; height: auto; border: 2px solid var(--line); border-radius: var(--shape); background: var(--surface); }
.as-app-hinweis { max-width: 760px; }
/* Ab 1024: Hinweissatz direkt unter den Karten, das hohe App-Bild läuft rechts über beide Zeilen (sonst Lücke unter den Karten). */
@media (min-width: 1024px) {
  .as-app-raster { grid-template-columns: minmax(0, 1fr) 240px; grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 20px; }
  .as-profile { grid-column: 1; grid-row: 1; }
  .as-app-hinweis { grid-column: 1; grid-row: 2; }
  .as-app-bild { grid-column: 2; grid-row: 1 / 3; }
}

/* ------------------------------------------------------------ Reels (selbst gehostet, kein Autoplay) */
.as-reel { margin: 0; display: flex; flex-direction: column; gap: 14px; max-width: 360px; }
.as-reel video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: var(--shape); background: #0E2326; }
.as-reel-text { gap: 10px; }
.as-reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 32px; align-items: start; }

/* ------------------------------------------------------------ §10 Wer steckt dahinter */
.as-namen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 640px; }
.as-name img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--shape); background: var(--surface-2); }
.as-name-text { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.as-name-gross { font-family: var(--ad-anzeige); font-weight: 800; font-size: 34px; line-height: 1; }
.as-name-rolle { font-size: 18px; color: var(--ink-2); }

/* ------------------------------------------------------------ §11 Ab wann und wo */
.as-orte { display: flex; flex-wrap: wrap; gap: 12px; }
.as-orte li { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px; background: var(--surface); border-radius: var(--shape-sm); font-size: 19px; font-weight: 800; }
.as-orte .ic { color: var(--btn); }

/* ------------------------------------------------------------ §12 Vormerken */
.as-wahl { display: grid; gap: 24px; align-items: start; }
.as-wahl-karte { gap: 14px; }
.as-wahl-karte .ad-kasse { padding: 16px 18px; }
.as-wahl-karte .ad-kasse-satz { font-size: 19px; }
.as-wahl-knopf { margin-top: 4px; }
.as-schreiben { margin-top: 16px; }
@media (min-width: 760px) { .as-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------ §13 Fragen */
.as-fragen { display: flex; flex-direction: column; gap: 12px; }
.as-frage { background: var(--surface); border-radius: var(--shape); }
.as-frage summary { min-height: 60px; padding: 12px 20px; font-size: 19px; line-height: 1.3; border-radius: var(--shape); }
.as-antwort { display: flex; flex-direction: column; gap: 6px; padding: 0 20px 20px; }

/* ------------------------------------------------------------ §14 Abschlusskarte, §15 Fuß */
.as-ende-abschnitt { padding-top: 0; }
.ad-fuss-marke.as-fuss-marke img { width: 64px; height: 64px; }
.as-fuss-satz2 { margin-top: 8px; }

/* ------------------------------------------------------------ Kosten (Valentin, 30.10.2026): im Budget keine eigenen Kosten, Verlust-Effekt
   Kernsatz fett, die Bedingungen direkt darunter gleich groß (nie kleiner), Mehrstunden kleiner. Nie „kostenlos“. */
.ad-kasse .as-kasse-kern { font-weight: 800; }
.ad-kasse .as-kasse-klein { font-size: 18px; line-height: 1.45; color: var(--ink-2); }
.as-budget { gap: 16px; }
.as-budget-kern, .as-budget-satz { font-size: 22px; line-height: 1.38; hyphens: manual; }
.as-budget-kern { font-weight: 800; }
.as-budget-klein { font-size: 18px; color: var(--ink-2); }
.as-leiste { margin: 4px 0 0; display: grid; gap: 12px; }
.as-leiste-balken { display: flex; gap: 4px; min-height: 52px; font-size: 18px; font-weight: 800; }
.as-leiste-balken > span { display: flex; align-items: center; min-width: 0; }
.as-leiste-kasse { flex: 5 1 0; padding: 0 18px; background: var(--btn); color: var(--btn-ink); border-radius: 16px 6px 6px 6px; }
.as-leiste-du { flex: 1 1 0; justify-content: center; padding: 0 10px; background: var(--surface-2); color: var(--ink); border-radius: 6px 16px 16px 6px; }
.as-leiste-text { display: grid; gap: 6px; }
.as-leiste-text p { font-size: 18px; line-height: 1.45; }
.ad-papier .card.as-verlust, .card.as-verlust { background: var(--amber-bg); gap: 12px; }
.as-verlust h3 { display: flex; align-items: center; gap: 10px; color: var(--amber); }
.as-verlust-zahl { font-size: 22px; line-height: 1.38; font-weight: 800; hyphens: manual; }
@media (min-width: 1024px) { .as-budget, .as-verlust { max-width: 860px; } }

/* ------------------------------------------------------------ Bilder und Icons (Runde 3, Agent „bilder“, 30.10.2026)
   Icons: Strich-Stil aus Briefing Kap. 7, Farbe über die Klasse (currentColor), 24 px in Listen, 28 px in Karten-Köpfen.
   Keine Schatten, keine Verläufe. Bewegung der Grafik: data-zeigen="linie" im Runde-3-Block unten (E4). */

/* KI-Symbolbilder: Quelle 750 px, deshalb nie breiter als 560 px zeigen; Unterschrift sichtbar darunter */
.as-ki { margin: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 560px; }
.as-zwei > .as-ki { justify-self: start; }
/* #was mit Bild daneben: Kernsatz ohne Trennung mitten im Wort (am Laptop sonst „zusammenbrin-gen“) */
.as-zwei-quer .as-kern { hyphens: manual; }

/* #so-gehts: Icon und Kennzeichen in einer Zeile über dem Schritt-Titel */
.as-schritt-kopf { display: flex; align-items: center; gap: 12px; }
.as-schritt-kopf .ic { color: var(--btn); }

/* #vormerken: Icon vor dem Titel der Wahl-Karte */
.as-wahl-titel { display: flex; align-items: center; gap: 12px; }
.as-wahl-titel .ic { flex: none; color: var(--btn); }

/* #was: Grafik „So wird Alltagsduo verbinden“. Handy und Tablet untereinander, ab 1024 px nebeneinander
   (zwischen 760 und 1023 px wären drei Karten nur ca. 180 px breit). Die Linie zwischen den Karten ist nur Deko (::before, leer);
   der Text daneben ist echter Text. */
.as-verbund { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.as-verbund-reihe { display: grid; }
.as-verbund-teil { gap: 10px; }
.as-verbund-kopf { display: flex; align-items: center; gap: 12px; font-size: 20px; line-height: 1.25; font-weight: 800; margin: 0; }
.as-verbund-kopf .ic { flex: none; color: var(--btn); }
.as-verbund-zeichen { display: block; flex: none; width: 40px; height: 40px; }
.ad-papier .card.as-verbund-mitte, .card.as-verbund-mitte { background: var(--hero); color: var(--hero-ink); }
.as-verbund-weg { display: flex; align-items: center; gap: 14px; min-height: 56px; padding-left: 37px; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--ink-2); }
.as-verbund-weg::before { content: ''; flex: none; align-self: stretch; width: 2px; border-radius: 1px; background: var(--btn); transform-origin: center top; }
@media (min-width: 1024px) {
  .as-verbund-reihe { grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1.1fr) 132px minmax(0, 1fr); align-items: stretch; }
  .as-verbund-weg { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 10px; min-height: 0; padding: 56px 12px 0; text-align: center; }
  .as-verbund-weg::before { align-self: stretch; width: auto; height: 2px; transform-origin: left center; }
}
@media (forced-colors: active) {
  .as-verbund-weg::before { background: CanvasText; }
  .card.as-verbund-mitte { border: 2px solid CanvasText; }
}

/* ============================================================ Runde 3: Effekte (Agent „effekte“, 30.10.2026)
   Ans Ende von public/seite.css. Regeln:
   - Bewegung nur, wenn seite.js ein Element mit .as-warten markiert hat. Das tut es nur mit IntersectionObserver,
     ohne reduzierte Bewegung und nur bei Elementen, die beim Laden ganz unterhalb des ersten Bildschirms liegen.
     Ohne JavaScript, bei reduzierter Bewegung und beim Drucken ist alles sofort sichtbar.
   - Nur opacity, translate, scale, clip-path (kein Layout-Springen). Jedes Element höchstens einmal. 0,25 bis 0,6 s, ease-out bzw. Feder.
   - Attribut-Konvention (auch für neue Bausteine):
       data-zeigen            das Element blendet ein und rückt 16 px nach oben
       data-zeigen="gruppe"   jedes Kind für sich, gemeinsam sichtbare Kinder 70 ms versetzt
       data-zeigen="foto"     nur einblenden, ohne Bewegung (große Flächen bewegen sich nicht)
       data-zeigen="leiste"   der Inhalt bleibt stehen, nur die Leiste darin füllt sich (Budget-Leiste, Rechner)
       data-zeigen="linie"    Grafik „So wird Alltagsduo verbinden“: Karten und Linien nacheinander, nach 0,9 s fertig; die Weg-Texte bleiben stehen
   - Achtung: Eine eigene transition an einem Element mit data-zeigen ersetzt die Einblend-Transition ganz.
     Nie data-zeigen an .btn, .ad-kapitel, .ad-kasse oder an etwas im ersten Bildschirm setzen. */

:root {
  /* Feder ohne Überschwingen (kritisch gedämpft, Antwort 0,35 s), als linear()-Kurve; ältere Browser nehmen --ad-ease */
  --as-feder: var(--ad-ease);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --as-feder: linear(0, 0.109, 0.309, 0.501, 0.656, 0.77, 0.849, 0.903, 0.938, 0.961, 0.976, 0.985, 0.991, 0.994, 0.997, 0.998, 1); }
}

@media (prefers-reduced-motion: no-preference) {
  /* E1 Einblenden beim Scrollen (Karten, Listen, Kacheln) */
  [data-zeigen=""].as-warten,
  [data-zeigen="gruppe"] > .as-warten { opacity: 0; translate: 0 16px; }
  [data-zeigen=""].as-sichtbar,
  [data-zeigen="gruppe"] > .as-sichtbar {
    transition: opacity .5s var(--ad-ease) calc(var(--as-i, 0) * 70ms), translate .5s var(--ad-ease) calc(var(--as-i, 0) * 70ms);
  }
  /* E2 Fotos und Videos blenden sanft ein, ohne Bewegung */
  [data-zeigen="foto"].as-warten { opacity: 0; }
  [data-zeigen="foto"].as-sichtbar { transition: opacity .6s var(--ad-ease); }

  /* E3 Budget-Leiste in #kosten: der Petrol-Teil zieht sich von links auf, dann erscheint „du“ */
  [data-zeigen="leiste"].as-warten .as-leiste-kasse { clip-path: inset(0 100% 0 0); }
  [data-zeigen="leiste"].as-warten .as-leiste-du { opacity: 0; }
  [data-zeigen="leiste"].as-sichtbar .as-leiste-kasse { clip-path: inset(0); transition: clip-path .6s var(--as-feder) .1s; }   /* Endwert ausdrücklich: von inset() nach „none“ wäre kein Übergang */
  [data-zeigen="leiste"].as-sichtbar .as-leiste-du { transition: opacity .3s var(--ad-ease) .5s; }

  /* E4 Grafik „So wird Alltagsduo verbinden“ (Agent bilder), data-zeigen="linie" an .as-verbund-reihe:
     Familie, Linie, Alltagsduo, Linie, Helfer erscheinen nacheinander (Zeitplan aus dem Entwurf von bilder), alles nach 0,9 s fertig.
     Die Linie zeichnet sich am Handy von oben, ab 1024 px von links. Ersetzt den Effekt-Block mit .ad-js-linie .as-verbund … */
  [data-zeigen="linie"] .as-verbund-weg::before { transform-origin: 50% 0; }
  [data-zeigen="linie"].as-warten > .as-verbund-teil { opacity: 0; translate: 0 14px; }
  [data-zeigen="linie"].as-warten .as-verbund-weg::before { scale: 1 0; }
  [data-zeigen="linie"].as-sichtbar > .as-verbund-teil { transition: opacity .4s var(--ad-ease), translate .4s var(--ad-ease); }
  [data-zeigen="linie"].as-sichtbar .as-verbund-weg::before { transition: scale .35s var(--ad-ease); }
  [data-zeigen="linie"].as-sichtbar > :nth-child(2)::before { transition-delay: .15s; }
  [data-zeigen="linie"].as-sichtbar > :nth-child(3) { transition-delay: .25s; }
  [data-zeigen="linie"].as-sichtbar > :nth-child(4)::before { transition-delay: .4s; }
  [data-zeigen="linie"].as-sichtbar > :nth-child(5) { transition-delay: .5s; }

  /* E5 Knöpfe geben beim Drücken nach (filter bleibt aus dem Paket, deshalb hier beide Eigenschaften) */
  .btn { transition: filter .15s, scale .16s var(--ad-ease); }
  .btn:active { scale: .97; }

  /* E6 Fragen und Aufklapper: der Inhalt erscheint weich (nur beim Öffnen; Schließen ist sofort) */
  .as-frage[open] > .as-antwort,
  .as-mehr[open] > :not(summary) { animation: as-auf .28s var(--ad-ease); }

  /* Teil 2, Rechner: Stufen geben nach, die Leiste folgt der Wahl mit Feder (unterbrechbar, weil Transition) */
  .as-stufe { transition: background-color .2s var(--ad-ease), color .2s var(--ad-ease), scale .16s var(--ad-ease); }
  .as-stufe:active { scale: .96; }
  .as-rechner-leiste > span { transition: clip-path .5s var(--as-feder); }
  .as-rechner-leiste.as-warten > span { clip-path: inset(0 100% 0 0 round 7px 7px 7px 2px); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  [data-zeigen="linie"] .as-verbund-weg::before { transform-origin: 0 50%; }
  [data-zeigen="linie"].as-warten .as-verbund-weg::before { scale: 0 1; }
}
@keyframes as-auf { from { opacity: 0; translate: 0 -6px; } }

/* Drucken: nichts darf versteckt bleiben (seite.js räumt bei beforeprint zusätzlich auf) */
@media print {
  .as-warten { opacity: 1 !important; translate: none !important; }
}

/* ------------------------------------------------------------ §9 Für Helfer (Runde 3): Zahl-Kacheln, Icon-Liste, Verdienst-Rechner
   Ersetzt in seite.css den alten Block „§9 Für Helfer (Petrol-Fläche)“ ganz (dort standen die zwei schmalen Spalten).
   Silbentrennung: hyphens: manual in Kacheln, Liste und Rechner (das Paket trennt sonst „Minu-ten“). */
.as-helfer .link { color: var(--hero-ink); }
.as-helfer .as-mehr { border-top-color: color-mix(in srgb, var(--hero-ink) 35%, transparent); }
.as-helfer .as-mehr summary { color: var(--hero-ink); }
.as-einstieg-satz { font-size: 20px; font-weight: 700; line-height: 1.4; max-width: 34em; }
.as-helfer-mehr { gap: 0; }
.as-helfer-mehr .as-mehr:last-child { border-bottom: 2px solid color-mix(in srgb, var(--hero-ink) 35%, transparent); }
.as-auf-petrol { font-size: 18px; }

/* Keine Silbentrennung mitten im Wort: das Paket setzt hyphens: auto direkt auf h3, p, li, label (Erben reicht nicht) */
.as-helfer :is(h3, p, li, label, legend, span) { hyphens: manual; }

/* Zahl-Kacheln: Petrol etwas heller (Weiß 7,46:1, Gelb 4,87:1), Zahl in Gelb (Gelb als Schrift nur auf Petrol) */
.as-zahlen { display: grid; gap: 12px; margin-block: 6px; hyphens: manual; }
.as-zahl { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px 18px; border-radius: var(--shape); background: color-mix(in srgb, var(--hero-ink) 8%, var(--hero)); }
.as-zahl-text { font-size: 18px; line-height: 1.35; font-weight: 700; hyphens: manual; }
.as-zahl-wert { font-family: var(--ad-anzeige); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: .005em; color: var(--sun); white-space: nowrap; }
.as-zahl > * { min-width: 0; }
/* Ab 600 px nebeneinander: Oberzeile, Zahl und Unterzeile stehen über alle Kacheln einer Reihe auf gleicher Höhe (subgrid) */
@media (min-width: 600px) {
  .as-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @supports (grid-template-rows: subgrid) {
    .as-zahl { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; align-content: start; }
    .as-zahl-wert { align-self: end; }
  }
}
@media (min-width: 1024px) { .as-zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .as-zahl { padding: 20px 20px 22px; } .as-zahl-wert { font-size: clamp(34px, 2.4vw + 10px, 42px); } }

/* Links Liste und Rechner, rechts das Reel (ab 1024); Handy alles untereinander */
.as-helfer-raster { display: grid; gap: 32px; align-items: start; margin-block: 8px; }
.as-helfer-links { min-width: 0; gap: 32px; }
@media (min-width: 1024px) { .as-helfer-raster { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; } }

/* Vorteile: eine Spalte, je eine Zeile fett plus höchstens ein kurzer Satz */
.as-vorteile { display: grid; gap: 18px; }
.as-vorteile li { display: flex; gap: 14px; align-items: flex-start; }
.as-vorteile .ic { color: var(--sun); margin-top: 1px; }
.as-vorteile p { max-width: 38em; hyphens: manual; }
.as-vorteile strong { font-weight: 800; }

/* Verdienst-Rechner: Papier-Karte wie in der App, Stufen wie der Umschalter .seg, Leiste wie .bar */
.as-rechner { color: var(--ink); gap: 16px; hyphens: manual; }
.as-rechner h3 { font-size: 22px; line-height: 1.25; }
.hero .as-rechner :focus-visible { outline-color: var(--btn); }
.as-rechner-wahl { min-width: 0; margin: 0; padding: 0; border: 0; }
.as-rechner-wahl legend { padding: 0; margin-bottom: 10px; font-size: 18px; line-height: 1.4; font-weight: 800; color: var(--ink-2); }
.as-stufen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--shape); }
.as-stufe { position: relative; display: grid; place-items: center; min-height: 52px; border-radius: 16px 16px 16px 6px; color: var(--ink-2); font: 800 20px/1 var(--font); cursor: pointer; -webkit-user-select: none; user-select: none; }
.as-stufe input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.as-stufe:has(input:checked) { background: var(--btn); color: var(--btn-ink); }
/* :focus statt :focus-visible: WebKit meldet bei Radio-Knöpfen nach Pfeiltasten kein :focus-visible (geprüft 30.10.2026) */
.as-stufe:has(input:focus) { outline: 3px solid var(--btn); outline-offset: 2px; }
@media (min-width: 600px) { .as-stufen { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (hover: hover) and (pointer: fine) { .as-stufe:not(:has(input:checked)):hover { color: var(--btn); background: color-mix(in srgb, var(--btn) 10%, var(--surface-2)); } }
html:not(.ad-js) .as-rechner-wahl { display: none; }   /* ohne JavaScript nur das feste Beispiel */
.as-rechner-ergebnis { display: grid; gap: 4px; }
.as-rechner-betrag { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.as-rechner-betrag [data-feld="betrag"] { font-size: 44px; line-height: 1.1; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.as-rechner-pro { font-size: 20px; font-weight: 800; color: var(--ink-2); }
.as-rechner-weg { font-size: 18px; line-height: 1.45; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.as-rechner-rest { font-size: 18px; line-height: 1.45; }
.as-rechner-leiste { --as-anteil: 21.9%; }   /* Startwert = Beispiel 4 Einsätze (132,16 € von 603 €); seite.js setzt ihn neu */
.as-rechner-leiste > span { width: 100%; clip-path: inset(0 calc(100% - var(--as-anteil)) 0 0 round 7px 7px 7px 2px); }
.as-rechner-fein { font-size: 18px; line-height: 1.45; color: var(--ink-2); font-weight: 700; }
.as-rechner-punkte { display: grid; gap: 6px; margin-top: -6px; }
.as-rechner-punkte li { position: relative; padding-left: 18px; font-size: 18px; line-height: 1.45; color: var(--ink-2); }
.as-rechner-punkte li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 2px 2px 2px 1px; background: var(--btn); }
@media (max-width: 599.98px) {
  .as-rechner { padding: 20px 18px 22px; }
  .as-rechner-betrag [data-feld="betrag"] { font-size: 40px; }
}

@media (forced-colors: active) {
  .as-zahl, .as-rechner { border: 2px solid CanvasText; }
  .as-stufe:has(input:checked) { outline: 3px solid Highlight; }
  .as-rechner-leiste { border: 2px solid CanvasText; }
  .as-rechner-leiste > span { forced-color-adjust: none; background: CanvasText; }
}