/* Nelten Website-Scan, Bewegung und große Grafiken (02.11.2026). Wird von site.js nachgeladen; ohne JavaScript bleibt
 * alles statisch sichtbar. Bei prefers-reduced-motion (html.ruhig) keine Bewegung. */

/* ---------- Einblenden ---------- */
html.bewegt .reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .85s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
html.bewegt .reveal.sichtbar { opacity: 1; transform: none; }
html.bewegt .reveal.verzug-1 { transition-delay: 90ms; } html.bewegt .reveal.verzug-2 { transition-delay: 180ms; } html.bewegt .reveal.verzug-3 { transition-delay: 270ms; }
html.bewegt .reveal.verzug-4 { transition-delay: 360ms; } html.bewegt .reveal.verzug-5 { transition-delay: 450ms; } html.bewegt .reveal.verzug-6 { transition-delay: 540ms; }
html.bewegt .held .reveal { transform: translateY(28px); }
html.bewegt .held .mock.reveal { transform: translateY(40px) scale(.97); transition-duration: 1.1s; }
html.bewegt .held .mock.reveal.sichtbar { transform: none; }

/* Überschriftenstrich wächst */
.abschnitt-kopf .eyebrow::before, .seitenkopf .eyebrow::before { transform-origin: left; transition: transform .8s cubic-bezier(.2,.7,.2,1) .2s; }
html.bewegt .abschnitt-kopf.reveal:not(.sichtbar) .eyebrow::before, html.bewegt .seitenkopf.reveal:not(.sichtbar) .eyebrow::before { transform: scaleX(0); }

/* ---------- Held: Farbflächen folgen der Maus, Scan läuft ---------- */
.held::before { transform: translate(calc(var(--mx, 0) * 28px), calc(var(--my, 0) * 22px)); transition: transform .2s linear; }
.held::after { transform: translate(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -8px)); transition: transform .2s linear; }
.fenster { position: relative; }
.scanlinie { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, #2ee6a6, var(--brand), transparent); box-shadow: 0 0 18px 2px color-mix(in srgb, var(--brand) 55%, transparent); opacity: 0; pointer-events: none; }
.fenster.laeuft .scanlinie { animation: scannen 2.2s cubic-bezier(.4,0,.2,1) 1 forwards; }
@keyframes scannen { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 3px); opacity: 0; } }
.fenster .kacheln .kachel, .fenster .fund, .fenster .wertung { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
html.ruhig .fenster .kacheln .kachel, html.ruhig .fenster .fund, html.ruhig .fenster .wertung { opacity: 1; transform: none; }
.fenster.laeuft .wertung { opacity: 1; transform: none; transition-delay: .5s; }
.fenster.laeuft .kacheln .kachel { opacity: 1; transform: none; }
.fenster.laeuft .kacheln .kachel:nth-child(1) { transition-delay: .9s; } .fenster.laeuft .kacheln .kachel:nth-child(2) { transition-delay: 1.1s; }
.fenster.laeuft .kacheln .kachel:nth-child(3) { transition-delay: 1.3s; } .fenster.laeuft .kacheln .kachel:nth-child(4) { transition-delay: 1.5s; }
.fenster.laeuft .fund { opacity: 1; transform: none; transition-delay: 2s; }
.fenster.fertig { box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, #2ee6a6 40%, transparent); transition: box-shadow .6s ease; }
.fenster .note-ring .wert { stroke-dashoffset: 339.29; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) .7s; }
.fenster.laeuft .note-ring .wert { stroke-dashoffset: 34; }
html.ruhig .fenster .note-ring .wert { stroke-dashoffset: 34; }
.mock:hover .fenster { transform: translateY(-4px) rotate(-.4deg); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.mock .fenster { transition: transform .5s cubic-bezier(.2,.7,.2,1); }

/* ---------- Lauflicht der Prüfungen ---------- */
.lauflicht { overflow: hidden; margin: 1.25rem 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lauflicht ul { display: flex; gap: .6rem; list-style: none; padding: 0; margin: 0; width: max-content; }
html.bewegt .lauflicht ul { animation: laufen 48s linear infinite; }
.lauflicht:hover ul { animation-play-state: paused; }
.lauflicht li { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; padding: .35rem .8rem; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); font-size: .82rem; color: var(--text-2); }
.lauflicht li::before { content: ""; width: 6px; height: 10px; border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg); margin: 0 .2rem .15rem .1rem; }
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html.ruhig .lauflicht ul { flex-wrap: wrap; width: auto; }

/* ---------- Knöpfe mit Glanz ---------- */
.button.brand, .kopf nav a.hervor, .band .button:not(.sekundaer) { position: relative; overflow: hidden; }
.button.brand::after, .kopf nav a.hervor::after, .band .button:not(.sekundaer)::after { content: ""; position: absolute; top: -40%; bottom: -40%; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / 35%), transparent); transform: skewX(-20deg); transition: left .7s ease; pointer-events: none; }
.button.brand:hover::after, .kopf nav a.hervor:hover::after, .band .button:not(.sekundaer):hover::after { left: 130%; }
.karte, .bereich-kachel, .preis { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.vorteil:hover, .preis:hover, .bereich-kachel:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.vorteil .icon { transition: transform .4s cubic-bezier(.2,.7,.2,1), background .4s ease; }
.vorteil:hover .icon { transform: translateY(-2px) scale(1.06) rotate(-3deg); }
.kopf { transition: box-shadow .3s ease; }
.kopf.gescrollt { box-shadow: 0 6px 24px -12px rgb(11 16 32 / 25%); }

/* ---------- Bericht: große Grafiken, wachsende Balken, gezeichnete Donuts ---------- */
.note-ring { width: 172px; height: 172px; }
.note-ring circle { stroke-width: 9; }
.note-wert { font-size: 3.4rem; }
.note-text strong { font-size: 1.4rem; }
.donut { width: 210px; height: 210px; }
.donut text { font-size: 2.1rem; }
.donut text.sub { font-size: .75rem; }
.note.klein .note-ring { width: 92px; height: 92px; }
.note.klein .note-wert { font-size: 2rem; }
.bericht-inhalt .uebersicht .karte { padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
svg.balken rect, svg.quote-balken rect { transform-origin: 0 50%; transform-box: fill-box; }
html.bewegt svg.balken:not(.wachsen) rect, html.bewegt svg.quote-balken:not(.wachsen) rect { transform: scaleX(0); }
html.bewegt svg.balken.wachsen rect, html.bewegt svg.quote-balken.wachsen rect { animation: wachsen 1s cubic-bezier(.2,.7,.2,1) both; }
html.bewegt svg.balken.wachsen rect:nth-child(2) { animation-delay: .15s; } html.bewegt svg.balken.wachsen rect:nth-child(3) { animation-delay: .3s; } html.bewegt svg.balken.wachsen rect:nth-child(4) { animation-delay: .45s; }
@keyframes wachsen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kacheln .kachel, .chips .chip { transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease; }
.bereich-kachel .zahl, .kachel .zahl { font-variant-numeric: tabular-nums; }
.fund-detail { animation: aufklappen .35s ease both; }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.seitenleiste a.aktiv { transition: background .3s ease, color .3s ease; }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.team-figur { background: var(--surface); border: 0; border-radius: var(--radius-l); padding: 0 0 1.25rem; overflow: hidden; text-align: center; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.team-figur:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.team-figur svg { width: 100%; height: auto; display: block; background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.team-figur h3 { font-size: 1.05rem; margin: 1rem 1rem .25rem; }
.team-figur p { margin: 0 1.25rem; color: var(--muted); font-size: .9rem; }
.team-figur .kopf-wippe { transform-origin: 50% 100%; }
html.bewegt .team-figur:hover .kopf-wippe { animation: nicken 1.6s ease-in-out infinite; }
html.bewegt .team-figur .bildschirm-balken rect { transform-origin: 0 100%; animation: pegel 3.2s ease-in-out infinite alternate; }
html.bewegt .team-figur .bildschirm-balken rect:nth-child(2) { animation-delay: .4s; } html.bewegt .team-figur .bildschirm-balken rect:nth-child(3) { animation-delay: .8s; } html.bewegt .team-figur .bildschirm-balken rect:nth-child(4) { animation-delay: 1.2s; }
html.bewegt .team-figur .dampf { animation: dampfen 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes nicken { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes pegel { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@keyframes dampfen { 0% { opacity: 0; transform: translateY(0) scaleX(1); } 40% { opacity: .7; } 100% { opacity: 0; transform: translateY(-10px) scaleX(1.3); } }
@media (max-width: 64rem) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .team { grid-template-columns: 1fr; } .note-ring { width: 140px; height: 140px; } .donut { width: 170px; height: 170px; } }

@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } .held::before, .held::after { transform: none !important; } }

/* Runde G: Akzentfarbene Kartenreiter wachsen beim Einblenden und beim Hover. */
.karte::before, .preis::before, .bereich-kachel::before, .bereich::before,
.schritte li::before, .fragen details::before, details.frage::before,
.stimme::before, .team-figur::before, .linie-karte::before {
  transition: width .7s cubic-bezier(.2,.7,.2,1);
}
html.bewegt .reveal:not(.sichtbar)::before { width: 0; }
.karte:hover::before, .preis:hover::before, .bereich-kachel:hover::before, .bereich:hover::before,
.schritte li:hover::before, .fragen details:hover::before, .stimme:hover::before,
.team-figur:hover::before, .linie-karte:hover::before { width: 100%; }
.scanlinie { background: linear-gradient(90deg, transparent, #2ee6a6, #0b1020, transparent); }
.team-figur { border: 0; }