/* ============================================================
   STREIDT RATGEBER · grafik.css
   Große Erzählgrafiken. Jede zeigt den Satz daneben:
   1 Szenen-Bühne „Kosten verstehen" (Scrollytelling, 5 Szenen)
   2 Wegekarte „Von Ulm aus"
   3 Kette „Im Trauerfall"
   4 Fächer „Vorsorge"
   5 Kalkulator-Vorschau, die sich selbst ausfüllt
   6 Häuserbogen „Sieben Häuser"
   7 Kopfgrafiken der Unterseiten
   Animiert werden nur transform, opacity und stroke-dashoffset.
   Start erst im Bild (.an), Ruhezustand bei reduzierter Bewegung.
   Zahlen stammen aus dem Streidt-Kalkulator (Stand 08/2026) und
   den Partnerseiten auf baumbestattung.de und beerdigung-im-wasser.de.
   ============================================================ */

@keyframes gz-zeichnen{to{stroke-dashoffset:0}}
@keyframes gz-ein{to{opacity:1}}
@keyframes gz-auf{to{opacity:1;transform:none}}
@keyframes gz-puls{0%{opacity:0}14%{opacity:1}86%{opacity:1}100%{opacity:0}}

.gz-text{font-family:var(--sans);fill:rgba(253,236,217,.66);font-size:13px;letter-spacing:.02em}
.gz-text--klein{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;fill:rgba(253,236,217,.52)}
.gz-text--gross{font-family:var(--serif);font-weight:300;font-size:22px;fill:#FFF6EC;letter-spacing:-.01em}
.gz-text--zahl{font-family:var(--serif);font-weight:300;font-size:30px;fill:#FFF6EC;letter-spacing:-.02em}
.gz-text--gold{fill:var(--gold-licht)}

/* ============================================================
   1 · SZENEN-BÜHNE
   ============================================================ */
.st-szenen__raster{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);margin-top:clamp(28px,4vw,56px)}
.st-buehne{
  position:sticky;top:calc(var(--nav-h) + 34px);
  height:min(74vh,640px);border-radius:32px;overflow:hidden;isolation:isolate;
  background-color:var(--erde-tief);
  background-image:radial-gradient(120% 90% at 18% 8%,#5A3421 0%,var(--erde-tief) 52%,var(--erde-nacht) 100%);
  box-shadow:0 40px 90px -50px rgba(42,22,11,.7);
}
.st-buehne::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(253,236,217,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(253,236,217,.045) 1px,transparent 1px);background-size:40px 40px}
.st-buehne__nr{position:absolute;left:28px;top:24px;z-index:3;font-size:12px;font-weight:600;letter-spacing:.2em;color:rgba(253,236,217,.56)}
.st-buehne__nr b{color:#FFF6EC;font-weight:600}
.st-buehne__wort{position:absolute;right:28px;top:24px;z-index:3;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-licht)}
.st-szene{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .7s var(--ease-out);pointer-events:none}
.st-szene.an{opacity:1}
.st-szene svg{position:absolute;inset:56px 20px 20px;width:calc(100% - 40px);height:calc(100% - 76px)}

.st-schritte{padding:4vh 0 12vh}
.st-schritt{min-height:64vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0}
.st-schritt__nr{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--gold)}
.st-schritt h3{margin-top:10px;font-size:clamp(23px,2.2vw,32px);line-height:1.12;color:rgba(66,36,20,.28);transition:color .5s}
.st-schritt p{margin-top:14px;max-width:46ch;font-size:16px;line-height:1.7;color:rgba(107,86,71,.42);transition:color .5s}
.st-schritt .st-link{margin-top:18px;opacity:.35;transition:opacity .5s}
.st-schritt.an h3{color:var(--erde)}
.st-schritt.an p{color:var(--grau)}
.st-schritt.an .st-link{opacity:1}
.st-schritt__zahl{display:inline-flex;align-items:baseline;gap:8px;margin-top:18px;padding:8px 16px;border-radius:999px;background:var(--sand);font-size:14px;color:var(--nuss);opacity:.4;transition:opacity .5s}
.st-schritt__zahl b{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--erde)}
.st-schritt.an .st-schritt__zahl{opacity:1}

/* -- Szene 1: drei Blöcke stapeln sich -- */
.sz-block{opacity:0;transform:translateY(-120px);transform-box:fill-box}
.an .sz-block{animation:sz-fallen .9s cubic-bezier(.3,1.35,.5,1) forwards;animation-delay:calc(var(--d) * 1ms)}
@keyframes sz-fallen{0%{opacity:0;transform:translateY(-120px)}40%{opacity:1}100%{opacity:1;transform:none}}
.sz-block rect{stroke:rgba(255,246,236,.18);stroke-width:1}
.sz-block text{font-family:var(--sans)}
.sz-klammer{fill:none;stroke:var(--gold-hell);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.an .sz-klammer{animation:gz-zeichnen 1s var(--ease-out) 1.9s forwards}
.sz-summe{opacity:0}
.an .sz-summe{animation:gz-ein .6s ease 2.6s forwards}
.sz-boden{stroke:rgba(253,236,217,.28);stroke-width:1.5}

/* -- Szene 2: drei Pakete wachsen -- */
.sz-saeule{transform:scaleY(0);transform-origin:50% 100%;transform-box:fill-box}
.an .sz-saeule{animation:sz-wachsen 1.3s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
@keyframes sz-wachsen{to{transform:scaleY(1)}}
.sz-saeule-wert{opacity:0}
.an .sz-saeule-wert{animation:gz-ein .5s ease forwards;animation-delay:calc(var(--d) * 1ms + 900ms)}
.sz-glanz{fill:url(#szGlanz);opacity:0}
.an .sz-glanz{animation:sz-glanz 4.5s ease-in-out infinite;animation-delay:calc(var(--d) * 1ms + 1400ms)}
@keyframes sz-glanz{0%,100%{opacity:0}40%,60%{opacity:.9}}

/* -- Szene 3: Bestattungsarten als Balken -- */
.sz-balken{transform:scaleX(0);transform-origin:0 50%;transform-box:fill-box}
.an .sz-balken{animation:sz-breit 1.1s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
@keyframes sz-breit{to{transform:scaleX(1)}}
.sz-balken-wert,.sz-balken-name{opacity:0}
.an .sz-balken-wert,.an .sz-balken-name{animation:gz-ein .5s ease forwards;animation-delay:calc(var(--d) * 1ms + 500ms)}
.sz-schiene{fill:rgba(253,236,217,.07)}

/* -- Szene 4: die Waage -- */
.sz-balkenwaage{transform-origin:300px 170px;transform-box:view-box}
.an .sz-balkenwaage{animation:sz-kippen 2.2s cubic-bezier(.34,1.4,.5,1) .5s forwards}
@keyframes sz-kippen{to{transform:rotate(9deg)}}
.sz-schale--l{transform-box:view-box}
.sz-schale--r{transform-box:view-box}
.an .sz-schale--l{animation:sz-hoch 2.2s cubic-bezier(.34,1.4,.5,1) .5s forwards}
.an .sz-schale--r{animation:sz-runter 2.2s cubic-bezier(.34,1.4,.5,1) .5s forwards}
@keyframes sz-hoch{to{transform:translate(3px,-31px)}}
@keyframes sz-runter{to{transform:translate(-3px,31px)}}
.sz-gewicht{opacity:0;transform:translateY(-40px);transform-box:fill-box}
.an .sz-gewicht{animation:gz-auf .7s cubic-bezier(.3,1.35,.5,1) forwards;animation-delay:calc(var(--d) * 1ms)}
.sz-seil{stroke:rgba(253,236,217,.4);stroke-width:1.2}

/* -- Szene 5: Wünsche als Kacheln -- */
.sz-chip{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center}
.an .sz-chip{animation:gz-auf .55s cubic-bezier(.3,1.35,.5,1) forwards;animation-delay:calc(var(--d) * 1ms)}
.sz-chip rect{fill:rgba(253,236,217,.07);stroke:rgba(253,236,217,.22);stroke-width:1}
.sz-chip .sz-chip-an{fill:var(--gold);opacity:0}
.an .sz-chip.wahl .sz-chip-an{animation:sz-waehlen 6s ease-in-out infinite;animation-delay:calc(var(--w) * 1ms)}
@keyframes sz-waehlen{0%,12%{opacity:0}22%,62%{opacity:1}72%,100%{opacity:0}}
.sz-chip text{font-family:var(--sans);font-size:14px;fill:#FFF6EC}
.sz-chip text.p{font-size:12px;fill:rgba(253,236,217,.66)}

/* ============================================================
   2 · WEGEKARTE „Von Ulm aus"
   ============================================================ */
.st-wege{position:relative;border-radius:32px;overflow:hidden;isolation:isolate;
  background-color:var(--erde-tief);
  background-image:radial-gradient(90% 80% at 50% 88%,#5C3522 0%,var(--erde-tief) 55%,var(--erde-nacht) 100%);
  box-shadow:0 40px 90px -52px rgba(42,22,11,.7)}
.st-wege svg{display:block;width:100%;height:auto}
.wg-ring{fill:none;stroke:rgba(253,236,217,.12);stroke-width:1;stroke-dasharray:3 6}
.wg-ring-text{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;fill:rgba(253,236,217,.4)}
.wg-strahl{fill:none;stroke:url(#wgVerlauf);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.an .wg-strahl{animation:gz-zeichnen 1.6s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.wg-ziel{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center}
.an .wg-ziel{animation:gz-auf .6s cubic-bezier(.3,1.5,.5,1) forwards;animation-delay:calc(var(--d) * 1ms + 1200ms)}
.wg-ziel circle.aussen{fill:rgba(242,201,143,.16)}
.wg-ziel circle.kern{fill:var(--gold-licht)}
.wg-schild{opacity:0}
.an .wg-schild{animation:gz-ein .6s ease forwards;animation-delay:calc(var(--d) * 1ms + 1500ms)}
.wg-schild text{font-family:var(--sans)}
.wg-puls{fill:#FFF6EC;opacity:0}
.an .wg-puls{animation:gz-puls 3.8s ease-in-out infinite;animation-delay:calc(var(--d) * 1ms + 1900ms)}
.wg-mitte{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center}
.an .wg-mitte{animation:gz-auf .8s cubic-bezier(.3,1.5,.5,1) .1s forwards}
.wg-halo{fill:none;stroke:rgba(242,201,143,.35);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.an .wg-halo{animation:wg-welle 4.2s ease-out infinite 1s}
@keyframes wg-welle{0%{opacity:.7;transform:scale(.4)}100%{opacity:0;transform:scale(2.4)}}
.st-wege__legende{font-size:12px;color:rgba(253,236,217,.55)}
.st-wege__legende span:first-child{position:absolute;left:24px;top:20px}
.st-wege__legende span:last-child{position:absolute;right:24px;bottom:18px}
@media (max-width:520px){.st-wege__legende span{font-size:11px}.st-wege__legende span:first-child{top:14px;left:16px}.st-wege__legende span:last-child{right:16px;bottom:12px}}
.st-wege--zeile .st-wege__legende{position:static;padding:0 24px 20px}

.st-arten{display:grid;gap:10px;margin-top:30px}
.st-arten a{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:18px;padding:12px 16px 12px 12px;border-radius:18px;background:var(--weiss);border:1px solid var(--linie);text-decoration:none;color:inherit;transition:transform .5s var(--ease-out),border-color .35s}
.st-arten a:hover{transform:translateX(6px);border-color:rgba(186,130,69,.55)}
.st-arten img{width:64px;height:64px;border-radius:12px;object-fit:cover}
.st-arten b{display:block;font-family:var(--serif);font-weight:400;font-size:18px;color:var(--erde);line-height:1.2}
.st-arten small{display:block;font-size:14px;color:var(--grau);margin-top:2px}
.st-arten em{font-style:normal;font-size:14px;font-weight:500;color:var(--nuss);white-space:nowrap}
@media (max-width:520px){.st-arten a{grid-template-columns:52px 1fr}.st-arten img{width:52px;height:52px}.st-arten em{grid-column:2}}

/* ============================================================
   3 · KETTE „Im Trauerfall"
   ============================================================ */
.st-kette{position:relative;margin-top:clamp(40px,5vw,72px);list-style:none;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.st-kette__bahn{position:absolute;left:calc(100% / 12);right:calc(100% / 12);top:27px;height:2px;background:rgba(253,236,217,.14);border-radius:2px}
.st-kette__zug{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--gold-licht));border-radius:2px;transform:scaleX(0);transform-origin:0 50%}
.st-kette.an .st-kette__zug{transition:transform 2.6s var(--ease-out);transform:scaleX(1)}
.st-kette__licht{position:absolute;inset:0;opacity:0}
.st-kette__licht::after{content:"";position:absolute;left:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:#FFF6EC;box-shadow:0 0 14px 4px rgba(242,201,143,.8)}
.st-kette.an .st-kette__licht{animation:kette-licht 6s ease-in-out 2.6s infinite}
@keyframes kette-licht{0%{opacity:0;transform:translateX(0)}8%{opacity:1}92%{opacity:1;transform:translateX(100%)}100%{opacity:0;transform:translateX(100%)}}
.st-kette li{position:relative;text-align:center;padding-top:0}
.st-kette__knoten{position:relative;z-index:1;width:56px;height:56px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:var(--erde-tief);border:1.5px solid rgba(253,236,217,.24);font-family:var(--serif);font-size:20px;color:#FFF6EC;transform:scale(.6);opacity:0}
.st-kette.an .st-kette__knoten{transition:transform .7s cubic-bezier(.3,1.5,.5,1),opacity .5s,border-color .5s;transition-delay:calc(var(--d) * 1ms);transform:none;opacity:1}
.st-kette.an li .st-kette__knoten{animation:kette-glimmen 6s ease-in-out infinite;animation-delay:calc(var(--d) * 1ms + 2600ms)}
@keyframes kette-glimmen{0%,100%{border-color:rgba(253,236,217,.24);box-shadow:none}10%{border-color:var(--gold-licht);box-shadow:0 0 0 6px rgba(242,201,143,.12)}24%{border-color:rgba(253,236,217,.24);box-shadow:none}}
.st-kette b{display:block;margin-top:16px;font-family:var(--serif);font-weight:300;font-size:clamp(17px,1.3vw,20px);line-height:1.2;color:#FFF6EC}
.st-kette small{display:block;margin-top:8px;font-size:14px;line-height:1.5;color:rgba(253,236,217,.66)}
.st-kette b,.st-kette small{opacity:0;transform:translateY(12px)}
.st-kette.an b,.st-kette.an small{transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--d) * 1ms + 200ms);opacity:1;transform:none}
@media (max-width:900px){
  .st-kette{grid-template-columns:1fr;gap:26px}
  .st-kette__bahn{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto}
  .st-kette__zug{transform:scaleY(0);transform-origin:50% 0}
  .st-kette.an .st-kette__zug{transform:scaleY(1)}
  .st-kette__licht::after{left:-5px;top:-6px}
  .st-kette.an .st-kette__licht{animation-name:kette-licht-senk}
  @keyframes kette-licht-senk{0%{opacity:0;transform:translateY(0)}8%{opacity:1}92%{opacity:1;transform:translateY(100%)}100%{opacity:0;transform:translateY(100%)}}
  .st-kette li{display:grid;grid-template-columns:56px 1fr;gap:4px 20px;text-align:left;align-items:center}
  .st-kette__knoten{grid-row:1 / span 2;margin:0}
  .st-kette b{margin-top:0}
  .st-kette small{margin-top:0}
}

/* ============================================================
   4 · FÄCHER „Vorsorge"
   ============================================================ */
.st-faecher{position:relative;height:clamp(360px,40vw,480px);isolation:isolate}
.st-faecher__blatt{
  position:absolute;left:50%;bottom:8%;width:min(236px,48%);aspect-ratio:3/4;margin-left:calc(min(236px,48%) / -2);
  border-radius:18px;padding:22px 20px;background:var(--weiss);border:1px solid var(--linie);
  box-shadow:0 26px 50px -30px rgba(66,36,20,.55);transform-origin:50% 130%;
  display:flex;flex-direction:column;
}
.st-faecher__blatt small{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.st-faecher__blatt b{margin-top:8px;font-family:var(--serif);font-weight:300;font-size:22px;line-height:1.15;color:var(--erde)}
.st-faecher__blatt i{display:block;height:6px;border-radius:3px;background:var(--papier-2);margin-top:10px}
.st-faecher__blatt i:nth-of-type(1){margin-top:18px;width:92%}.st-faecher__blatt i:nth-of-type(2){width:78%}.st-faecher__blatt i:nth-of-type(3){width:86%}.st-faecher__blatt i:nth-of-type(4){width:54%}
.st-faecher__blatt em{margin-top:auto;align-self:flex-start;font-style:normal;font-size:12.5px;font-weight:500;padding:5px 12px;border-radius:999px;background:var(--sand);color:var(--nuss)}
.st-faecher__blatt:nth-child(1){--r:-15deg;--x:-62%;z-index:1}
.st-faecher__blatt:nth-child(2){--r:-5deg;--x:-21%;z-index:2}
.st-faecher__blatt:nth-child(3){--r:5deg;--x:21%;z-index:3}
.st-faecher__blatt:nth-child(4){--r:15deg;--x:62%;z-index:4;background-color:var(--erde-tief);background-image:linear-gradient(160deg,#5A3420,var(--erde-tief));border-color:transparent}
.st-faecher__blatt:nth-child(4) b{color:#FFF6EC}
.st-faecher__blatt:nth-child(4) small{color:var(--gold-licht)}
.st-faecher__blatt:nth-child(4) i{background:rgba(253,236,217,.14)}
.st-faecher__blatt:nth-child(4) em{background:rgba(253,236,217,.12);color:var(--gold-licht)}
.st-faecher.an .st-faecher__blatt{animation:faechern 8s cubic-bezier(.3,1.2,.5,1) infinite}
@keyframes faechern{0%,6%{transform:none}28%,74%{transform:translateX(var(--x)) rotate(var(--r))}94%,100%{transform:none}}
.st-faecher__stempel{position:absolute;right:2%;top:-2%;z-index:6;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;text-align:center;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.35;color:var(--nuss);
  border:1.5px dashed rgba(186,130,69,.7);background:rgba(255,253,249,.9);transform:rotate(-12deg) scale(0);opacity:0}
.st-faecher.an .st-faecher__stempel{animation:stempel 8s ease-in-out infinite}
@keyframes stempel{0%,30%{transform:rotate(-12deg) scale(0);opacity:0}36%{transform:rotate(-12deg) scale(1.15);opacity:1}40%,72%{transform:rotate(-12deg) scale(1);opacity:1}80%,100%{transform:rotate(-12deg) scale(.6);opacity:0}}

/* ============================================================
   5 · KALKULATOR-VORSCHAU
   ============================================================ */
.st-rechner{position:relative;border-radius:28px;padding:clamp(22px,2.6vw,34px);background:rgba(253,236,217,.06);border:1px solid rgba(253,236,217,.16);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.st-rechner{background:rgba(58,32,20,.94)}}
html.sparsam .st-rechner{background:rgba(58,32,20,.94)}
.st-rechner__schritte{position:relative;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0}
.st-rechner__schritte::before,.st-rechner__schritte::after{content:"";position:absolute;left:14px;right:14px;top:13px;height:2px;border-radius:2px;background:rgba(253,236,217,.14)}
.st-rechner__schritte::after{background:var(--gold-hell);transform:scaleX(var(--fortschritt,0));transform-origin:0 50%;transition:transform .9s var(--ease-out)}
.st-rechner__schritte li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;letter-spacing:.06em;color:rgba(253,236,217,.5);transition:color .4s}
.st-rechner__schritte li span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--erde-tief);border:1.5px solid rgba(253,236,217,.26);color:rgba(253,236,217,.7);transition:background .4s,border-color .4s,color .4s,transform .5s cubic-bezier(.3,1.5,.5,1)}
.st-rechner__schritte li.fertig span{background:var(--gold);border-color:var(--gold);color:#fff}
.st-rechner__schritte li.jetzt span{border-color:var(--gold-licht);color:#FFF6EC;transform:scale(1.18)}
.st-rechner__schritte li.jetzt,.st-rechner__schritte li.fertig{color:#FFF6EC}
@media (max-width:480px){.st-rechner__schritte li em{display:none}}
.st-rechner__schritte li em{font-style:normal}
.st-rechner__zeilen{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:8px;min-height:212px}
.st-rechner__zeilen li{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;border-radius:14px;background:rgba(253,236,217,.06);font-size:15px;color:rgba(253,236,217,.86);opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.st-rechner__zeilen li.da{opacity:1;transform:none}
.st-rechner__zeilen li b{font-weight:500;color:#FFF6EC;white-space:nowrap;font-variant-numeric:tabular-nums}
.st-rechner__summe{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(253,236,217,.18)}
.st-rechner__summe span{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-licht)}
.st-rechner__summe b{font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.8vw,40px);letter-spacing:-.03em;color:#FFF6EC;font-variant-numeric:tabular-nums}
.st-rechner__fuss{margin-top:10px;font-size:12.5px;color:rgba(253,236,217,.55)}

/* ============================================================
   6 · HÄUSERBOGEN
   ============================================================ */
.st-bogen{position:relative;max-width:1080px;margin:clamp(30px,4vw,56px) auto 0}
.st-bogen svg{display:block;width:100%;height:auto;overflow:visible}
.bg-linie{fill:none;stroke:rgba(125,79,48,.4);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.an .bg-linie{animation:gz-zeichnen 1.4s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms + 500ms)}
.bg-haus{opacity:0;transform:translateY(20px);transform-box:fill-box}
.an .bg-haus{animation:gz-auf .8s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:calc(var(--d) * 1ms)}
.bg-haus path.dach{fill:var(--nuss)}
.bg-haus rect.koerper{fill:var(--weiss);stroke:var(--nuss);stroke-width:1.5}
.bg-haus rect.fenster{fill:var(--gold);opacity:.55}
.an .bg-haus rect.fenster{animation:bg-licht 4s ease-in-out infinite;animation-delay:calc(var(--d) * 1ms + 1500ms)}
@keyframes bg-licht{0%,100%{opacity:.4}50%{opacity:1}}
.bg-haus text{font-family:var(--sans);font-size:15px;font-weight:500;fill:var(--erde);text-anchor:middle}
.bg-puls{fill:var(--gold);opacity:0}
.an .bg-puls{animation:gz-puls 3.4s ease-in-out infinite;animation-delay:calc(var(--d) * 1ms + 2000ms)}
.st-bogen__sitz{position:relative;width:min(460px,72%);margin:-4px auto 0;z-index:2}
.st-bogen__sitz figcaption{left:50%;transform:translateX(-50%);white-space:nowrap}
@media (max-width:640px){.bg-haus text{font-size:22px}}

/* ============================================================
   7 · KOPFGRAFIKEN DER UNTERSEITEN
   ============================================================ */
.kg-linie{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.kg-linie--hell{stroke:var(--gold-licht)}
.an .kg-linie{animation:gz-zeichnen 1.8s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.kg-pop{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center}
.an .kg-pop{animation:gz-auf .7s cubic-bezier(.3,1.5,.5,1) forwards;animation-delay:calc(var(--d) * 1ms)}
.kg-ein{opacity:0}
.an .kg-ein{animation:gz-ein .8s ease forwards;animation-delay:calc(var(--d) * 1ms)}
.kg-schweben{animation:kg-schweben 9s ease-in-out infinite}
@keyframes kg-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.kg-text{font-family:var(--sans);font-size:13px;fill:var(--grau)}
.kg-text--gross{font-family:var(--serif);font-weight:300;font-size:26px;fill:var(--erde)}
.kg-text--klein{font-size:11px;font-weight:600;letter-spacing:.16em;fill:var(--nuss);text-transform:uppercase}
.st-kopfbild--aura .kg-text,.st-kopfbild--dunkel .kg-text{fill:rgba(253,236,217,.7)}
.st-kopfbild--aura .kg-text--gross,.st-kopfbild--dunkel .kg-text--gross{fill:#FFF6EC}
.st-kopfbild--aura .kg-text--klein,.st-kopfbild--dunkel .kg-text--klein{fill:var(--gold-licht)}

/* ============================================================
   MOBIL · Szenen-Bühne haftet oben
   ============================================================ */
@media (max-width:900px){
  .st-szenen__raster{grid-template-columns:1fr;gap:0}
  .st-buehne{top:calc(var(--nav-h) + 8px);height:min(44vh,360px);z-index:2;border-radius:24px}
  .st-szene svg{inset:44px 10px 10px;width:calc(100% - 20px);height:calc(100% - 54px)}
  .st-buehne__nr{left:18px;top:16px}.st-buehne__wort{right:18px;top:16px}
  .st-schritte{padding:2vh 0 6vh}
  .st-schritt{min-height:54vh}
  .st-schritt p{font-size:16px}
}

/* ============================================================
   RUHEZUSTAND · das fertige Bild, keine Bewegung
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .sz-block,.sz-gewicht,.sz-chip,.wg-ziel,.wg-mitte,.bg-haus,.kg-pop{opacity:1!important;transform:none!important;animation:none!important}
  .sz-saeule,.sz-balken{transform:none!important;animation:none!important}
  .sz-klammer,.wg-strahl,.bg-linie,.kg-linie{stroke-dashoffset:0!important;animation:none!important}
  .sz-summe,.sz-saeule-wert,.sz-balken-wert,.sz-balken-name,.wg-schild,.kg-ein{opacity:1!important;animation:none!important}
  .sz-balkenwaage{transform:rotate(9deg)!important;animation:none!important}
  .sz-schale--l{transform:translate(3px,-31px)!important;animation:none!important}
  .sz-schale--r{transform:translate(-3px,31px)!important;animation:none!important}
  .wg-puls,.bg-puls,.wg-halo,.sz-glanz,.sz-chip .sz-chip-an,.st-kette__licht,.st-faecher__stempel{animation:none!important;opacity:0!important}
  .st-kette__zug{transform:none!important}
  .st-kette__knoten,.st-kette b,.st-kette small{opacity:1!important;transform:none!important;animation:none!important}
  .st-faecher__blatt{animation:none!important;transform:translateX(var(--x)) rotate(var(--r))!important}
  .st-rechner__zeilen li{opacity:1;transform:none}
  .kg-schweben{animation:none}
}
html.sparsam .wg-puls,html.sparsam .bg-puls,html.sparsam .wg-halo,html.sparsam .sz-glanz{animation:none;opacity:0}
@media (max-width:640px){
  .st-faecher{height:340px}
  .st-faecher__blatt{width:min(200px,50%);margin-left:calc(min(200px,50%) / -2);padding:16px 14px}
  .st-faecher__blatt b{font-size:18px}
  .st-faecher__blatt:nth-child(1){--x:-44%}.st-faecher__blatt:nth-child(2){--x:-15%}
  .st-faecher__blatt:nth-child(3){--x:15%}.st-faecher__blatt:nth-child(4){--x:44%}
  .st-faecher__stempel{width:84px;height:84px;font-size:9.5px}
  .wg-ring-text{display:none}
}
.kg-bogen{fill:none;stroke-width:18;stroke-linecap:round;stroke-dashoffset:var(--a)}
.an .kg-bogen{animation:gz-zeichnen 1.8s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.st-kopfbild__grafik .st-faecher{width:100%}
@media (prefers-reduced-motion:reduce){.kg-bogen{stroke-dashoffset:0!important;animation:none!important}}