/* Kaufiko Startseite: Bewegung und die Bausteine der Homepage. */
html { scroll-behavior: smooth; }
.scrollbar { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 60; pointer-events: none; }
.scrollbar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--blue), var(--coral), var(--sun), var(--green), var(--violet)); }

/* Einlaufen: gestaffelt, mit Feder */
.rise { opacity: 0; transform: translateY(26px); animation: rise .9s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 110ms + 120ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(34px) scale(.985); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.h-hero { position: relative; overflow: hidden; padding-top: clamp(36px, 6vw, 80px); padding-bottom: clamp(48px, 7vw, 96px); }
.h-hero-grid { position: relative; display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .h-hero-grid { grid-template-columns: 1.15fr .85fr; gap: 40px; } }
.h-copy { display: grid; gap: 22px; }
.h-ask { font-size: 13px; color: var(--ink); opacity: 1; }
.h-type { background: var(--ink); color: var(--sun); padding: 3px 8px; border-radius: 8px; }
.h-caret { display: inline-block; width: 2px; height: 1.1em; background: var(--ink); margin: 0 6px 0 3px; vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.h-hero h1 { font-size: clamp(44px, 8.6vw, 92px); }
.h-pill { display: inline-block; animation: pillIn 1s var(--spring) both; animation-delay: .55s; transform-origin: 0 60%; }
@keyframes pillIn { from { transform: rotate(-9deg) scale(.6); opacity: 0; } to { transform: rotate(-2deg) scale(1); opacity: 1; } }
.h-pill.sun { background: var(--sun); color: var(--ink); }
.h-watch { align-self: center; }
.h-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.h-facts li { background: rgba(255,255,255,.6); border-radius: 16px; padding: 10px 16px; display: flex; align-items: baseline; gap: 8px; backdrop-filter: blur(6px); }
.h-facts b { font: 800 26px/1 var(--display); letter-spacing: -.5px; }
.h-facts span { font-size: 14px; color: var(--muted); }

.h-float { position: absolute; inset: 0; pointer-events: none; }
.fl { position: absolute; border-radius: 999px; opacity: .9; animation: drift 14s ease-in-out infinite alternate; will-change: transform; }
.f1 { width: 26px; height: 120px; background: var(--blue); top: 8%; right: 6%; --r: 18deg; animation-duration: 11s; }
.f2 { width: 22px; height: 90px; background: var(--coral); top: 62%; right: 40%; --r: 64deg; animation-duration: 16s; opacity: .55; }
.f3 { width: 20px; height: 100px; background: var(--green); bottom: -30px; left: 4%; --r: -32deg; animation-duration: 13s; }
.f4 { width: 18px; height: 70px; background: var(--violet); top: 14%; left: 46%; --r: -70deg; animation-duration: 18s; opacity: .5; }
.f5 { width: 60px; height: 60px; background: #fff; top: 70%; right: 4%; opacity: .5; animation-duration: 20s; }
.f6 { width: 14px; height: 14px; background: var(--ink); top: 30%; right: 30%; animation-duration: 9s; }
@keyframes drift { from { transform: translate3d(0,0,0) rotate(var(--r, 0deg)); } to { transform: translate3d(calc(var(--mx, 0px) + 18px), calc(var(--my, 0px) - 34px), 0) rotate(calc(var(--r, 0deg) + 22deg)); } }

.h-art { display: grid; place-items: center; }
.h-orbit { position: relative; width: min(78vw, 400px); aspect-ratio: 1; }
.burst { width: 100%; height: 100%; animation: spin 46s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.burst .r { transform-box: fill-box; transform-origin: 50% 50%; animation: breathe 3.6s ease-in-out infinite; }
.burst .r2 { animation-delay: -.7s; } .burst .r3 { animation-delay: -1.4s; } .burst .r4 { animation-delay: -2.1s; } .burst .r5 { animation-delay: -2.8s; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(.78); } }
.chip { position: absolute; background: #fff; color: var(--ink); font: 500 12.5px var(--mono); padding: 8px 12px; border-radius: 999px; box-shadow: 0 10px 30px rgba(21,19,43,.16); animation: bob 5s ease-in-out infinite; white-space: nowrap; }
.chip.c1 { top: 4%; left: -2%; } .chip.c2 { top: 18%; right: -4%; animation-delay: -1s; } .chip.c3 { bottom: 20%; left: -8%; animation-delay: -2s; }
.chip.c4 { bottom: 4%; right: 2%; animation-delay: -3s; } .chip.c5 { top: 48%; right: -10%; animation-delay: -4s; background: var(--ink); color: var(--sun); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }

/* ---------- Laufband ---------- */
.marquee { background: var(--ink); color: #fff; overflow: hidden; padding: 16px 0; }
.marquee-track { display: flex; align-items: center; gap: 26px; width: max-content; animation: marquee 38s linear infinite; }
.marquee span { font: 800 clamp(22px, 3.4vw, 34px)/1 var(--display); letter-spacing: -.6px; white-space: nowrap; }
.marquee i { width: 12px; height: 12px; border-radius: 50%; background: var(--sun); flex: none; }
.marquee i:nth-of-type(3n+1) { background: var(--coral); } .marquee i:nth-of-type(3n+2) { background: var(--mint); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Intro-Player ---------- */
.h-intro { color: #fff; position: relative; overflow: hidden; }
.h-intro .section-head .kicker { color: var(--sun); opacity: 1; }
.intro-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .intro-grid { grid-template-columns: 1fr auto; gap: 64px; } }
.intro-steps { list-style: none; display: grid; gap: 10px; }
.intro-steps li { display: flex; gap: 16px; padding: 18px 20px; border-radius: 22px; cursor: pointer; opacity: .5; transition: opacity .4s var(--ease), background .4s var(--ease), transform .4s var(--ease); }
.intro-steps li:hover { opacity: .8; }
.intro-steps li.on { opacity: 1; background: rgba(255,255,255,.08); transform: translateX(6px); }
.intro-steps .num { font: 500 12px var(--mono); letter-spacing: 1.2px; color: var(--sun); padding-top: 6px; }
.intro-steps strong { font: 700 clamp(20px, 2.6vw, 26px)/1.12 var(--display); letter-spacing: -.3px; display: block; }
.intro-steps p { color: rgba(255,255,255,.72); margin-top: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s var(--ease); }
.intro-steps li.on p { max-height: 90px; opacity: 1; }

.phone { justify-self: center; width: min(86vw, 320px); user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: pointer; }
.phone-screen { position: relative; aspect-ratio: 9 / 18.6; border-radius: 46px; overflow: hidden; border: 9px solid #0B0A17; outline: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05); background: var(--stage-search); }
.phone-hint { text-align: center; margin-top: 14px; font: 500 11px var(--mono); letter-spacing: 1.1px; text-transform: uppercase; color: rgba(255,255,255,.55); }
.story-bars { position: absolute; z-index: 5; top: 14px; left: 16px; right: 16px; display: flex; gap: 5px; }
.story-bars i { flex: 1; height: 4px; border-radius: 4px; background: rgba(21,19,43,.18); overflow: hidden; }
.story-bars b { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.phone[data-scene="2"] .story-bars i { background: rgba(255,255,255,.22); } .phone[data-scene="2"] .story-bars b { background: #fff; }
.scene { position: absolute; inset: 0; padding: 44px 20px 20px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; color: var(--ink); }
.scene.on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.s1 { background: var(--stage-search); } .s2 { background: var(--stage-questions); } .s3 { background: var(--ink); color: #fff; } .s4 { background: var(--stage-report); }
.s-kicker { font: 500 10.5px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; opacity: .65; }
.s-title { font: 800 30px/1 var(--display); letter-spacing: -.8px; margin-top: 10px; }
.s-title span { display: inline-block; background: var(--ink); color: var(--sun); padding: 2px 10px 5px; border-radius: 12px; transform: rotate(-2deg); margin-top: 6px; }
.s-title em { font-style: normal; color: var(--coral); } .s3 .s-title em { color: var(--sun); }
.scene.on > * { animation: sceneIn .7s var(--ease) both; }
.scene.on > *:nth-child(2) { animation-delay: .08s; } .scene.on > *:nth-child(3) { animation-delay: .18s; } .scene.on > *:nth-child(4) { animation-delay: .28s; }
.scene.on > *:nth-child(5) { animation-delay: .38s; } .scene.on > *:nth-child(6) { animation-delay: .48s; }
@keyframes sceneIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.phone.paused * { animation-play-state: paused !important; }

.s-field { margin-top: 26px; background: #fff; border-radius: 18px; padding: 16px 18px; font-size: 17px; min-height: 56px; display: flex; align-items: center; border: 2px solid var(--ink); }
.s-caret { width: 2px; height: 20px; background: var(--ink); margin-left: 2px; animation: blink 1s steps(2) infinite !important; }
.s-btn { margin-top: 14px; background: var(--ink); color: #fff; border-radius: 18px; padding: 16px; text-align: center; font-weight: 600; }
.s1.on .s-btn { animation: sceneIn .7s var(--ease) .28s both, pulse 1.3s var(--ease) 3.1s 2; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); box-shadow: 0 12px 30px rgba(21,19,43,.3); } }

.s-opt { margin-top: 10px; background: #fff; border-radius: 16px; padding: 14px 16px; font-size: 15.5px; font-weight: 500; position: relative; }
.s-opt::after { content: ""; position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; border: 2px solid var(--line); }
.s2.on .s-opt.pick { animation: sceneIn .7s var(--ease) .28s both, pick .5s var(--spring) 1.9s forwards; }
@keyframes pick { to { background: var(--ink); color: #fff; transform: scale(1.03); } }
.s2 .o1 { margin-top: 22px; }
.s-chips { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.s-chips span { background: var(--ink); color: #fff; font-size: 12.5px; padding: 7px 11px; border-radius: 999px; opacity: 0; transform: scale(.5); }
.s2.on .s-chips { animation: none; }
.s2.on .s-chips span { animation: pop .5s var(--spring) forwards; animation-delay: 2.5s; }
.s2.on .s-chips span:nth-child(2) { animation-delay: 2.9s; } .s2.on .s-chips span:nth-child(3) { animation-delay: 3.3s; }
@keyframes pop { to { opacity: 1; transform: scale(1); } }

.radar { position: relative; margin: 18px auto 0; width: 100%; max-width: 236px; aspect-ratio: 1; }
.ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.16); inset: 0; }
.ring.g2 { inset: 17%; } .ring.g3 { inset: 34%; }
.core { position: absolute; inset: 41%; border-radius: 50%; background: var(--sun); animation: corePulse 1.6s ease-in-out infinite; }
@keyframes corePulse { 50% { transform: scale(1.18); box-shadow: 0 0 0 14px rgba(255,210,63,.14); } }
.sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,210,63,0) 0deg, rgba(255,210,63,0) 290deg, rgba(255,210,63,.55) 360deg); animation: spin 2.6s linear infinite; }
.src { position: absolute; background: #fff; color: var(--ink); font: 500 10.5px var(--mono); padding: 5px 8px; border-radius: 999px; white-space: nowrap; opacity: 0; transform: scale(.4); }
.s3.on .radar { animation: sceneIn .7s var(--ease) .18s both; }
.s3.on .src { animation: pop .55s var(--spring) forwards; }
.src.a { top: 6%; left: 30%; animation-delay: .9s !important; } .src.b { top: 30%; right: -6%; animation-delay: 1.5s !important; }
.src.c { bottom: 22%; right: -2%; animation-delay: 2.1s !important; } .src.d { bottom: 2%; left: 22%; animation-delay: 2.7s !important; }
.src.e { top: 54%; left: -8%; animation-delay: 3.3s !important; } .src.f { top: 22%; left: -6%; animation-delay: 3.9s !important; }
.s-count { margin-top: auto; font: 500 12px var(--mono); letter-spacing: .6px; color: rgba(255,255,255,.75); }
.s-count b { color: var(--sun); font-size: 22px; font-weight: 500; }

.rank { margin-top: 10px; background: #fff; border-radius: 18px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.rank.k1 { margin-top: 22px; border: 2.5px solid var(--ink); }
.rank .pos, .dcard .pos { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--sun); display: grid; place-items: center; font: 500 13px var(--mono); }
.rank.k2 .pos, .rank.k3 .pos { background: var(--line); color: var(--ink); }
.rank div { flex: 1; min-width: 0; } .rank strong { font: 700 15px/1.1 var(--display); display: block; }
.rank i { display: block; height: 7px; border-radius: 7px; background: var(--line); margin-top: 8px; overflow: hidden; }
.rank i b { display: block; height: 100%; width: var(--w); background: var(--c); border-radius: 7px; transform-origin: 0 50%; transform: scaleX(0); }
.s4.on .rank i b { animation: grow 1.1s var(--ease) .9s forwards; }
.s4.on .k2 i b { animation-delay: 1.15s; } .s4.on .k3 i b { animation-delay: 1.4s; }
@keyframes grow { to { transform: scaleX(1); } }
.rank .pct { font: 500 15px var(--mono); min-width: 42px; text-align: right; }

/* ---------- Regler-Demo ---------- */
.demo { display: grid; gap: 22px; }
@media (min-width: 900px) { .demo { grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: start; } }
.demo-rank { display: grid; gap: 12px; position: relative; }
.dcard { background: #fff; border-radius: 22px; padding: 18px; display: flex; align-items: center; gap: 14px; will-change: transform; border: 2.5px solid transparent; transition: border-color .3s; }
.dcard.top { border-color: var(--ink); }
.dcard .pos { background: var(--line); color: var(--ink); } .dcard.top .pos { background: var(--ink); color: var(--sun); }
.dbody { flex: 1; min-width: 0; } .dbody h3 { font-size: clamp(19px, 2.4vw, 23px); } .dbody p { font-size: 14px; color: var(--muted); margin-top: 2px; }
.dbar { height: 9px; border-radius: 9px; background: var(--line); margin-top: 12px; overflow: hidden; }
.dbar i { display: block; height: 100%; width: 0; border-radius: 9px; background: var(--coral); transition: width .6s var(--ease), background .4s; }
.dpct { font: 500 22px var(--mono); min-width: 62px; text-align: right; }
.demo-sliders { background: #fff; border-radius: 24px; padding: 22px; display: grid; gap: 16px; }
.demo-sliders label { display: grid; gap: 8px; }
.demo-sliders label span { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.demo-sliders label span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.demo-sliders input { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 8px; outline-offset: 6px;
  background: linear-gradient(90deg, var(--c) var(--p, 50%), color-mix(in srgb, var(--c) 18%, #fff) var(--p, 50%)); }
.demo-sliders input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 4px solid #fff; box-shadow: 0 4px 14px rgba(21,19,43,.25); cursor: grab; transition: transform .2s var(--spring); }
.demo-sliders input::-webkit-slider-thumb:active { transform: scale(1.2); cursor: grabbing; }
.demo-sliders input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 4px solid #fff; box-shadow: 0 4px 14px rgba(21,19,43,.25); }
.feat { list-style: none; display: grid; gap: 14px; margin-top: 36px; }
@media (min-width: 680px) { .feat { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .feat { grid-template-columns: repeat(4, 1fr); } }
.feat li { background: rgba(255,255,255,.6); border-radius: 20px; padding: 18px; display: grid; gap: 6px; }
.feat .mark { font: 500 11px var(--mono); letter-spacing: 1.1px; color: var(--green); } .feat strong { font: 700 19px/1.15 var(--display); } .feat p { font-size: 14.5px; color: var(--muted); }

.tilt { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tilt:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 22px 44px rgba(21,19,43,.12); }

/* ---------- Preise ---------- */
.packs { display: grid; gap: 14px; }
@media (min-width: 760px) { .packs { grid-template-columns: repeat(3, 1fr); align-items: end; } }
.pack { position: relative; background: #fff; border-radius: 26px; padding: 24px; display: grid; gap: 8px; border: 2.5px solid transparent; transition: transform .35s var(--spring), box-shadow .35s var(--ease); }
.pack:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(21,19,43,.14); }
.pack.hot { border-color: var(--ink); } @media (min-width: 760px) { .pack.hot { padding-top: 38px; padding-bottom: 38px; } }
.pack .n { width: 60px; height: 60px; border-radius: 18px; background: var(--c); color: #fff; display: grid; place-items: center; font: 800 28px var(--display); }
.pack .price { font: 500 30px var(--mono); letter-spacing: -1px; }
.pack .badge { position: absolute; top: 18px; right: 18px; background: var(--ink); color: var(--sun); font: 500 11px var(--mono); letter-spacing: 1.1px; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }
.pack .badge.sun { background: var(--sun); color: var(--ink); }

/* ---------- Abschluss ---------- */
.h-end { color: #fff; text-align: center; position: relative; overflow: hidden; }
.h-end .wrap { display: grid; gap: 22px; justify-items: center; }
.h-end .burst { width: 120px; height: 120px; animation-duration: 14s; }
.h-end h2 { font-size: clamp(34px, 6vw, 64px); max-width: 16em; } .h-end .lead { color: rgba(255,255,255,.75); }
.sunbtn { background: var(--sun); color: var(--ink); } .sunbtn:hover { background: #ffdf70; }

/* Wer weniger Bewegung wünscht: keine Dauerschleifen, Inhalte sofort sichtbar. Der Player bleibt bedienbar. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .reveal { opacity: 1; transform: none; animation: none; transition: none; }
  .fl, .burst, .burst .r, .chip, .marquee-track, .h-pill, .core, .sweep { animation: none; }
  .h-pill { transform: rotate(-2deg); }
}

/* Handy: weniger Formen, nichts liegt über dem Text. */
.h-hero-grid { z-index: 1; }
@media (max-width: 899px) {
  .f2, .f4, .f6 { display: none; }
  .f1 { top: auto; bottom: 30%; right: -8px; opacity: .45; }
  .f5 { top: auto; bottom: 6%; }
}