/* Startseite, Feinschliff und Bewegung, 19.10.2026.
   Befund: docs/befund-startseite-2026-10-19.md. Legt sich als letzte
   Datei ueber die Startseite: Reinigung (Nav-Burger ab 1100 px, Fragen
   ohne Nummern), Typografie, und die Bewegungsebene auf dem vorhandenen
   .ein / .ist-da-System. Nur auf der Startseite eingebunden. */
/* Nav-Burger ab 1100 px liegt seit 19.10.2026 in start-hell.css. */

/* 2. Fragen: keine Nummern, Liste auf sechs gekuerzt, Link zum Hilfe-Center. */
.faq-nr { display: none; }
.faq-frage { grid-template-columns: minmax(0, 1fr) 20px; }
.faq-mehr { margin-top: 20px; }
.faq-mehr .pfeil-link { font-size: 15px; font-weight: 600; color: var(--accent); }

/* 3. Chip-Reihe: nur noch eine, ohne Kopfzeile. */
.lauf-sektion { padding-top: 28px; }

/* ---------- Typografie und Rhythmus ---------------------------------- */
.hero-seite { justify-content: flex-start; gap: 26px; padding-top: 18px; }
.hero-knoepfe { margin-top: 0; }
.hero-seite .lead { max-width: 24em; }
.kopfzeile .lead { max-width: 34em; }
.feature-text .lead { max-width: 30em; }
.pr-kopfzeile .lead { max-width: 36em; }
h1, h2, h3 { text-wrap: balance; }
.feature-text h2 { max-width: 12em; }
.pr-preis b, .st-zahl, .vg-zeile > span, .pm dd { font-variant-numeric: tabular-nums; }
.btn { transition: background var(--t-2) var(--ease), transform var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease); }
.btn:active { transform: translateY(1px); }
.buehnen { gap: 20px; }

/* ---------- Hero-Einstieg: Zeilen, Lead, Knoepfe nacheinander --------- */
@keyframes d-auf { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero h1 span { opacity: 0; animation: d-auf .9s var(--ease) forwards; }
.hero h1 span:nth-child(1) { animation-delay: .05s; }
.hero h1 span:nth-child(2) { animation-delay: .17s; }
.hero h1 span:nth-child(3) { animation-delay: .29s; }
.hero-seite > * { opacity: 0; animation: d-auf .9s var(--ease) forwards; }
.hero-seite > *:nth-child(1) { animation-delay: .42s; }
.hero-seite > *:nth-child(2) { animation-delay: .54s; }

/* ---------- Glas-Objekte: schweben, einmal aufgeblendet, dann Dauerloop */
@keyframes d-schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.glas-frei { animation: d-schweben 6s ease-in-out infinite; }
.glas-frei.hg-flamme, .glas-frei.sg-flamme { animation-duration: 5.2s; animation-delay: -1.3s; }
.glas-frei.hg-kalender, .glas-frei.sg-kalender { animation-duration: 7s; animation-delay: -2.6s; }
.glas-frei.sg-haus { animation-duration: 6.4s; animation-delay: -.8s; }
.fm-glas img { transition: transform var(--t-4) var(--ease); }
.feature.ist-da .fm-glas img { animation: d-pop .7s var(--ease) both; animation-delay: .15s; }
@keyframes d-pop { 0% { transform: scale(.6) rotate(-10deg); opacity: 0; } 60% { transform: scale(1.08) rotate(2deg); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* ---------- Feature-Buehnen: Fenster kippt leicht herein, Ebenen folgen */
.feature .ebene-fenster { opacity: 0; transform: translateY(28px) perspective(1400px) rotateX(5deg); transform-origin: 50% 100%; transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.feature.ist-da .ebene-fenster { opacity: 1; transform: none; }
.feature .ebene { transform: translateY(28px) scale(.97); transition-delay: calc(var(--n, 0) * 160ms + 420ms); transition-duration: .8s; }
.feature.ist-da .ebene { transform: none; }
.feature .punkte li { opacity: 0; transform: translateX(-10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.feature.ist-da .punkte li { opacity: 1; transform: none; }
.feature.ist-da .punkte li:nth-child(1) { transition-delay: .25s; }
.feature.ist-da .punkte li:nth-child(2) { transition-delay: .35s; }
.feature.ist-da .punkte li:nth-child(3) { transition-delay: .45s; }

/* ---------- Scroll-gebundene Parallaxe der Produktfenster ------------- */
@supports (animation-timeline: view()) {
  @keyframes d-parallax { from { translate: 0 36px; } to { translate: 0 -36px; } }
  .feature.ist-da .medien-schnitt { animation: d-parallax linear both; animation-timeline: view(); animation-range: entry 10% exit 90%; }
  @keyframes d-tiefe { from { translate: 0 20px; } to { translate: 0 -20px; } }
  .feature.ist-da .ebene { animation: d-tiefe linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}

/* ---------- Gestaffelte Gruppen (d.js setzt --i je Kind) --------------- */
.d-staffel > * { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.d-staffel.ist-da > * { opacity: 1; transform: none; }
.pr-pakete.ist-da .pr-karte.ist-regel { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- Kleine Reaktionen -------------------------------------------- */
.anb-karte { transition: transform var(--t-3) var(--ease), border-color var(--t-3) var(--ease); }
.anb-karte:hover { transform: translateY(-3px); border-color: var(--line-stark); }
.pr-karte { transition: transform var(--t-3) var(--ease); }
.pr-karte:hover { transform: translateY(-3px); }
.flow-chip { transition: background var(--t-2) var(--ease), color var(--t-2) var(--ease), transform var(--t-1) var(--ease); }
.flow-chip:active { transform: scale(.97); }
.faq-chevron { transition: transform var(--t-3) var(--ease), color var(--t-2) var(--ease); }

/* ---------- Ruhe-Modus ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero h1 span, .hero-seite > *, .glas-frei, .fm-glas img, .feature.ist-da .medien-schnitt, .feature.ist-da .ebene { animation: none !important; opacity: 1 !important; transform: none !important; translate: none !important; }
  .feature .ebene-fenster, .feature .punkte li, .d-staffel > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ======================================================================
   Runde 2 der Bewegung: sichtbar statt leise.
   ====================================================================== */

/* Ueberschriften: Woerter kommen einzeln von unten (d.js teilt sie auf). */
.d-wort { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.d-wort > span { display: inline-block; transform: translateY(110%); transition: transform .8s var(--ease); transition-delay: calc(var(--w, 0) * 55ms); }
.d-worte.ist-da .d-wort > span, .ein.ist-da .d-wort > span, .feature.ist-da .d-wort > span { transform: none; }

/* Hero-Buehne: steigt beim Scrollen aus der Tiefe auf. */
@supports (animation-timeline: view()) {
  @keyframes d-buehne-auf { from { transform: perspective(1600px) rotateX(14deg) scale(.9) translateY(60px); opacity: .6; } to { transform: none; opacity: 1; } }
  .hero-buehne { transform-origin: 50% 0; animation: d-buehne-auf linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  @keyframes d-glas-rein { from { transform: translateY(80px) rotate(-18deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
  .hero-wrap .glas-frei { animation: d-glas-rein linear both, d-schweben 6s ease-in-out infinite; animation-timeline: view(), auto; animation-range: entry 0% entry 60%, normal; }
  .hero-wrap .glas-frei.hg-flamme { animation-duration: auto, 5.2s; }
}

/* Feature-Buehnen: Fenster kommt von der Seite, Ebenen springen auf. */
.feature .ebene-fenster { transform: translateX(120px) perspective(1400px) rotateY(-10deg); transition-duration: 1.1s, 1.3s; }
.feature-gespiegelt .ebene-fenster { transform: translateX(-120px) perspective(1400px) rotateY(10deg); }
.feature.ist-da .ebene-fenster { transform: none; }
.feature .ebene { transform: translateY(48px) scale(.8); }
.feature.ist-da .ebene { transform: none; }
.feature.ist-da .fm-glas img { animation: d-dreh .9s var(--ease) both; animation-delay: .1s; }
@keyframes d-dreh { 0% { transform: rotate(-180deg) scale(.3); opacity: 0; } 70% { transform: rotate(8deg) scale(1.1); opacity: 1; } 100% { transform: none; } }
.feature .fm-glas { transition: box-shadow var(--t-3) var(--ease); }
.feature.ist-da .fm-glas { animation: d-glow 1.6s var(--ease) .2s both; }
@keyframes d-glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--farbe) 0%, transparent); } 40% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--farbe) 18%, transparent); } }

/* „Ein System“: Reiter rutschen nacheinander herein, Buehne waechst. */
.system .flow-chip { opacity: 0; transform: translateX(40px); transition: opacity .6s var(--ease), transform .6s var(--ease), background var(--t-2) var(--ease), color var(--t-2) var(--ease); }
.system.ist-da .flow-chip { opacity: 1; transform: none; }
.system .flow-basis { opacity: 0; transform: translateY(60px) scale(.94); transition: opacity .9s var(--ease) .3s, transform 1s var(--ease) .3s; }
.system.ist-da .flow-basis { opacity: 1; transform: none; }

/* Karten: kommen groesser und mit Versatz, der Regelfall rueckt vor. */
.d-staffel > * { transform: translateY(48px) scale(.94); transition-duration: .9s; }
.pr-pakete.ist-da .pr-karte.ist-regel { transform: scale(1.03); transition-delay: .5s; }
.pr-pakete.ist-da .pr-karte.ist-regel:hover { transform: scale(1.03) translateY(-3px); }

/* Preis-Notiz: Pfeil zeichnet sich, Text schwingt ein. */
.pr-notiz { opacity: 0; transform: rotate(-6deg) translateY(10px); transition: opacity .7s var(--ease) .6s, transform .7s var(--ease) .6s; }
.preise-panel.ist-da .pr-notiz, .ist-da .pr-notiz { opacity: 1; transform: none; }

/* Maus-Neigung der Hero-Buehne (d.js setzt --mx/--my). */
.hero-szene { transform: perspective(1800px) rotateX(calc(var(--my, 0) * -4deg)) rotateY(calc(var(--mx, 0) * 6deg)); transition: transform .25s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .d-wort > span, .system .flow-chip, .system .flow-basis, .pr-notiz, .hero-szene, .hero-buehne, .hero-wrap .glas-frei { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ======================================================================
   Runde 3: Signatur-Effekte.
   ====================================================================== */

/* Hero: letzte Zeile bekommt einen Schimmer im Markenverlauf, der einmal durchlaeuft. */
@keyframes d-schimmer { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
.hero h1 span:nth-child(3) {
  background: linear-gradient(100deg, var(--ink) 0 35%, #9B6BFF 45%, var(--accent) 50%, #9B6BFF 55%, var(--ink) 65% 100%);
  background-size: 320% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: d-auf .9s var(--ease) .29s forwards, d-schimmer 1.6s cubic-bezier(.4, 0, .2, 1) 1.5s forwards;
}
/* Scheine und Text reagieren auf die Maus (d.js setzt --mx/--my am Hero). */
.hero-scheine { translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -14px); transition: translate .4s ease-out; }
.hero-oben { translate: calc(var(--mx, 0) * 6px) calc(var(--my, 0) * 4px); transition: translate .4s ease-out; }
.hero-wrap .glas-frei { rotate: calc(var(--mx, 0) * 10deg); transition: rotate .5s ease-out; }

/* Lichtschein folgt dem Cursor auf dunklen Flaechen. */
.dpanel { --gx: 50%; --gy: 50%; }
.dpanel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(520px circle at var(--gx) var(--gy), color-mix(in srgb, #9B6BFF 26%, transparent), transparent 60%); }
.dpanel:hover::after { opacity: 1; }

/* Preiskarten: 3D-Neigung und Glanzlauf. */
.pr-pakete { perspective: 1400px; }
.pr-karte { transform-style: preserve-3d; transform: rotateX(calc(var(--ry, 0) * -1deg)) rotateY(calc(var(--rx, 0) * 1deg)); transition: transform .18s ease-out; position: relative; overflow: hidden; }
.pr-karte::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) calc(var(--sx, 50%) - 6%), rgba(255, 255, 255, .85) var(--sx, 50%), rgba(255, 255, 255, .55) calc(var(--sx, 50%) + 6%), transparent 70%); mix-blend-mode: soft-light; }
.pr-karte:hover::after { opacity: 1; }
.pr-pakete.ist-da .pr-karte.ist-regel { transform: scale(1.03) rotateX(calc(var(--ry, 0) * -1deg)) rotateY(calc(var(--rx, 0) * 1deg)); }

/* Feature-Buehnen: Medien neigen sich zur Maus. */
.feature-medien { perspective: 1600px; }
.feature.ist-da .medien-schnitt { transform: rotateX(calc(var(--ry, 0) * -3deg)) rotateY(calc(var(--rx, 0) * 4deg)); transition: transform .3s ease-out; }

/* Chip-Reihe: haelt bei der Maus an, Chips heben sich. */
.lauf:hover .lauf-spur { animation-play-state: paused; }
.chip { transition: transform var(--t-2) var(--ease), border-color var(--t-2) var(--ease); }
.chip:hover { transform: translateY(-3px); border-color: var(--line-stark); }

@media (prefers-reduced-motion: reduce) {
  .hero h1 span:nth-child(3) { animation: none !important; color: var(--ink) !important; -webkit-text-fill-color: initial; background: none; }
  .hero-scheine, .hero-oben, .hero-wrap .glas-frei, .pr-karte, .feature.ist-da .medien-schnitt { translate: none !important; rotate: none !important; transform: none !important; }
}

/* Handy: Lead und Knoepfe mit Luft (die Desktop-Regel .hero-knoepfe { margin-top: 0 } griff auch hier). */
@media (max-width: 620px) {
  .hero-knoepfe { margin-top: 28px; }
}