/* Zusätzliche Animationen (alle mit prefers-reduced-motion abgeschaltet) */

/* Hero-Überschrift: Zeilen gleiten aus einer Maske */
.hero h1 .line { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 .line > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.hero h1.is-in .line > span { transform: none; }
.hero h1 .line:nth-child(2) > span { transition-delay: .12s; }
.hero h1 .line:nth-child(3) > span { transition-delay: .24s; }

/* Wandernde Lichtflecken im Hero-Hintergrund */
.hero { overflow: hidden; }
.hero::after {
  content: ""; position: absolute; z-index: -1; width: 46vw; aspect-ratio: 1; right: -8vw; top: -10vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,22,31,.10), transparent 65%);
  animation: drift 18s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes drift { to { transform: translate(-14vw, 12vw) scale(1.15); } }

/* Abschnitts-Überschriften: Wisch-Effekt */
.section-head h2.reveal, .fristen__intro h2.reveal, .clean h2.reveal, .faq__grid h2.reveal, .contact h2 {
  clip-path: inset(0 100% 0 0); transform: none; opacity: 1; transition: clip-path 1.2s var(--ease);
}
.section-head h2.reveal.is-in, .fristen__intro h2.reveal.is-in, .clean h2.reveal.is-in, .faq__grid h2.reveal.is-in, .contact h2.is-in { clip-path: inset(0 0 0 0); }

/* Eyebrow-Strich wächst */
.eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .2s; }
.reveal.is-in.eyebrow::before, .is-in .eyebrow::before, .eyebrow.is-in::before, .contact .eyebrow.is-in::before { transform: scaleX(1); }

/* Karten: Bild zoomt beim Erscheinen heraus */
.card.reveal { transform: translateY(40px) scale(.97); }
.card.reveal.is-in { transform: none; }
.card--water figure img, .card--smoke > img { transform: scale(1.15); transition: transform 1.6s var(--ease); }
.card.is-in figure img, .card--smoke.is-in > img { transform: scale(1); }
.card--smoke.is-in:hover > img { transform: scale(1.04); }

/* Balken im Heizkostenverteiler wachsen */
.hkv-graphic i { transform: scaleY(0); transition: transform .9s var(--ease); }
.card--hkv.is-in .hkv-graphic i { transform: scaleY(1); }
.hkv-graphic i:nth-child(2) { transition-delay: .06s; } .hkv-graphic i:nth-child(3) { transition-delay: .12s; }
.hkv-graphic i:nth-child(4) { transition-delay: .18s; animation: bar 2.6s ease-in-out 1.4s infinite; }
.hkv-graphic i:nth-child(5) { transition-delay: .24s; } .hkv-graphic i:nth-child(6) { transition-delay: .30s; } .hkv-graphic i:nth-child(7) { transition-delay: .36s; }
@keyframes bar { 50% { transform: scaleY(.7); } }

/* kWh-Punkt pulsiert, Rauchmelder-LED */
.big-unit span { display: inline-block; animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* Ablauf-Nummern springen nacheinander ein */
.steps .step__no { transform: scale(.6); opacity: 0; transition: transform .7s cubic-bezier(.34,1.56,.64,1), opacity .5s, background-color .3s; }
.steps.is-drawn .step__no { transform: none; opacity: 1; }
.steps.is-drawn .step:nth-child(2) .step__no { transition-delay: .35s; }
.steps.is-drawn .step:nth-child(3) .step__no { transition-delay: .7s; }
.steps.is-drawn .step:nth-child(4) .step__no { transition-delay: 1.05s; }
.steps.is-drawn .step:hover .step__no { transform: translateY(-3px); transition-delay: 0s; }

/* Häkchen ploppen auf */
.checks li svg { transform: scale(0) rotate(-45deg); transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.checks.is-in li svg { transform: none; }
.checks.is-in li:nth-child(2) svg { transition-delay: .15s; }
.checks.is-in li:nth-child(3) svg { transition-delay: .3s; }

/* Fristen-Tabelle: Zeilen gleiten nacheinander ein */
.ftable tbody tr { opacity: 0; transform: translateX(-16px); transition: opacity .6s, transform .6s var(--ease), background-color .25s; }
.is-in .ftable tbody tr { opacity: 1; transform: none; }
.is-in .ftable tbody tr:nth-child(2) { transition-delay: .08s; } .is-in .ftable tbody tr:nth-child(3) { transition-delay: .16s; }
.is-in .ftable tbody tr:nth-child(4) { transition-delay: .24s; } .is-in .ftable tbody tr:nth-child(5) { transition-delay: .32s; }
.is-in .ftable tbody tr:nth-child(6) { transition-delay: .40s; }
.ftable tr.is-hot .val { animation: hot 2.4s ease-in-out infinite; }
@keyframes hot { 50% { color: var(--red); text-shadow: 0 0 18px rgba(227,22,31,.35); } }

/* FAQ: Antwort gleitet auf */
.qa[open] .qa__a { animation: qaOpen .45s var(--ease); }
@keyframes qaOpen { from { opacity: 0; transform: translateY(-8px); } }

/* Buttons: Glanz beim Hover */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s var(--ease); pointer-events: none; }
.btn:hover::after { transform: translateX(120%); }

/* Stichtag-Badge im Hero pulsiert */
.instrument__tag b { animation: blink 1.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .hero h1 .line > span, .card--water figure img, .card--smoke > img, .hkv-graphic i, .steps .step__no, .checks li svg, .ftable tbody tr { transform: none !important; opacity: 1 !important; }
  .section-head h2.reveal, .fristen__intro h2.reveal, .clean h2.reveal, .faq__grid h2.reveal, .contact h2 { clip-path: none; }
  .eyebrow::before { transform: none; }
  .hero::after, .big-unit span, .instrument__tag b, .ftable tr.is-hot .val, .hkv-graphic i { animation: none !important; }
}

/* Dritte Hero-Zeile etwas kleiner */
.hero h1 .line:nth-child(3) { font-size: .78em; margin-top: .12em; }