/* "Sie bekommen:" - ruhige Sinnbilder statt Fliesstext. Jede Animation laeuft einmal ab, sobald die Zeile ins Bild kommt (.is-visible, reveal.js); bei reduzierter Bewegung steht der Endzustand. */
.gewinn-liste p.gv-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;grid-column:auto}
.gewinn-liste .gv{grid-column:2;width:100%;max-width:300px}
@media (min-width:860px){.gewinn-liste .gv{grid-column:auto;max-width:360px;justify-self:end}}
.gv svg{display:block;width:100%;height:auto;overflow:visible}
.gv-t{fill:rgba(255,255,255,.6);font:500 11px/1 Inter,system-ui,sans-serif;letter-spacing:.02em}
.gv-t.m{font-size:11.5px;fill:rgba(255,255,255,.7)}.gv-t.m.g{fill:#3be08c;font-weight:700}
/* 1 Preis: drei Balken, Automakler am hoechsten; Trendlinie im Hintergrund */
.gv-basis{stroke:rgba(255,255,255,.16);stroke-width:1}
.gv-trend{fill:none;stroke:rgba(52,209,127,.4);stroke-width:2;stroke-dasharray:3 6;stroke-linecap:round}
.gv-bar{fill:rgba(255,255,255,.2);transform-box:fill-box;transform-origin:50% 100%}
.gv-bar.b3{fill:url(#gvb);filter:drop-shadow(0 0 10px rgba(52,209,127,.45))}
.gv-tag{opacity:1}.gv-tag rect{fill:rgba(52,209,127,.16);stroke:rgba(52,209,127,.6);stroke-width:1}.gv-tag text{fill:#3be08c;font:700 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.03em}
.is-visible .gv-trend{animation:gvTrend 1.8s ease-out both}
.is-visible .gv-bar{animation:gvBar .9s cubic-bezier(.2,.8,.2,1) both}.is-visible .b2{animation-delay:.2s}.is-visible .b3{animation-delay:.4s}
.is-visible .gv-tag{animation:gvTag .6s ease both 1.2s}
@keyframes gvTrend{from{stroke-dasharray:0 100;opacity:0}to{opacity:1}}
@keyframes gvBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes gvTag{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* 2 Abwicklung: drei Stationen, Linie fuellt sich, Haken erscheinen nacheinander */
.gv-bahn{stroke:rgba(255,255,255,.14);stroke-width:2}
.gv-fuell{stroke:var(--gruen,#34d17f);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.gv-knoten>circle{fill:#0e1411;stroke:var(--gruen,#34d17f);stroke-width:1.5}
.gv-knoten .ico{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gv-knoten .eur{fill:rgba(255,255,255,.9);font:700 28px/1 Inter,system-ui,sans-serif}
.gv-ok{transform-box:fill-box;transform-origin:center}.gv-ok circle{fill:var(--gruen,#34d17f)}.gv-ok path{fill:none;stroke:#07120c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.is-visible .gv-fuell{animation:gvFuell 2.2s ease-in-out both}
.is-visible .k1 .gv-ok{animation:gvOk .45s ease both .3s}.is-visible .k2 .gv-ok{animation:gvOk .45s ease both 1.1s}.is-visible .k3 .gv-ok{animation:gvOk .45s ease both 1.9s}
.is-visible .k1>circle{animation:gvKn .4s ease both .25s}.is-visible .k2>circle{animation:gvKn .4s ease both 1.05s}.is-visible .k3>circle{animation:gvKn .4s ease both 1.85s}
@keyframes gvFuell{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes gvOk{from{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}
@keyframes gvKn{from{stroke:rgba(255,255,255,.22)}to{stroke:var(--gruen,#34d17f)}}
/* 3 Kostenlos: Zeilen gleiten ein, Haken zeichnen sich */
.gv-null{display:grid;gap:10px}
.gv-zeile{display:grid;grid-template-columns:1fr auto 22px;align-items:center;gap:14px;padding:6px 2px;font-size:1rem}
.gv-zeile b{font-weight:500;color:rgba(255,255,255,.85)}.gv-zeile i{font-style:normal;font-weight:700;color:var(--gruen,#34d17f)}
.gv-zeile svg{width:20px;fill:none;stroke:var(--gruen,#34d17f);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.gv-zeile svg path{stroke-dasharray:24}
.is-visible .gv-zeile{animation:gvZeile .7s cubic-bezier(.2,.8,.2,1) both}.is-visible .z2{animation-delay:.25s}.is-visible .z3{animation-delay:.5s}
.is-visible .gv-zeile svg path{animation:gvHaken .6s ease both .5s}.is-visible .z2 svg path{animation-delay:.75s}.is-visible .z3 svg path{animation-delay:1s}
@keyframes gvZeile{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes gvHaken{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
/* letzte Zeile ohne untere Trennlinie */
.gewinn-liste li:last-child{border-bottom:0}
/* Handy: Sektion kompakter */
@media (max-width:859px){
.warum{padding:24px 0 56px}.warum-h{font-size:clamp(1.7rem,7.4vw,2.2rem)}
.gewinn-liste{margin-top:22px}.gewinn-liste li{padding:18px 0;gap:4px 16px}
.gewinn-liste h3{font-size:clamp(1.35rem,5.6vw,1.8rem)}
.haken{width:36px;height:36px}.haken svg{width:19px}
.gewinn-liste .gv{max-width:270px;margin-top:6px}
.gv-zeile{padding:4px 0;font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){.gewinn-liste .gv *{animation:none!important}}