/* Objekttrailer – Landingpage
   Design: Richtung F „Boutique“ (wie die App, static/boutique.css): UI-Schwarz, Haarlinien mit weißer Lichtkante,
   dünne Überschriften (Geist 300), Mono-Etiketten, Silber nur für die Hauptaktion. Licht nur weiß, kein Blau-Schein.
   Schriften lokal (fonts/, SIL Open Font License), keine externen Requests. */

@font-face { font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --bg:#000; --surface:#0A0A0A; --raised:#111; --card:linear-gradient(180deg,#0E0E0E,#0A0A0A);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.24);
  --ink:#EDEDED; --ink-2:#A8A8A8; --ink-3:#8F8F8F;   /* auf #000: 16,9 / 8,9 / 6,6 : 1 */
  --sig:#3B8BFF;
  --sans:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1200px; --gut:20px;
  color-scheme:dark;
}
@media (min-width:760px) { :root { --gut:32px; } }

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; min-width:320px; background:radial-gradient(1100px 560px at 50% -340px, rgba(255,255,255,.09), rgba(255,255,255,0) 70%) no-repeat, var(--bg);
  color:var(--ink); font:400 17px/1.62 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
@media (min-width:1000px) { body { font-size:18px; } }
img, svg { display:block; max-width:100%; }
a { color:inherit; }
p { margin:0; }
h1, h2, h3 { margin:0; font-weight:300; letter-spacing:-.025em; line-height:1.1; color:var(--ink); }
h3 { font-weight:500; letter-spacing:-.01em; font-size:19px; line-height:1.3; }
::selection { background:rgba(255,255,255,.22); }
:focus-visible { outline:2px solid var(--sig); outline-offset:3px; border-radius:6px; }
.sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:12px; top:-60px; z-index:100; padding:10px 14px; border-radius:8px; background:#EDEDED; color:#000; text-decoration:none; font-weight:500; }
.skip:focus { top:12px; }

.wrap { width:100%; max-width:calc(var(--wrap) + 2 * var(--gut)); margin:0 auto; padding:0 var(--gut); }
.mono, .kicker, .tag { font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; }
.kicker { display:inline-flex; align-items:center; gap:10px; margin:0 0 20px; font-size:12px; font-weight:500; color:var(--ink-3); }
.kicker::before { content:""; width:18px; height:1px; background:var(--line-3); }

/* Lineart (Hauszeichnungen) */
.ln { fill:none; stroke:rgba(255,255,255,.34); stroke-width:1; stroke-linejoin:round; stroke-linecap:round; }
symbol * { vector-effect:non-scaling-stroke; }

/* Knöpfe */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 22px; border-radius:10px;
  font:500 16px/1 var(--sans); letter-spacing:-.005em; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background .18s, border-color .18s, color .18s, transform .18s var(--ease); }
.btn svg { width:16px; height:16px; flex:none; }
.btn-primary { color:#0A0A0A; border:0; background:linear-gradient(180deg,#FAFAFA 0%,#E2E2E2 100%);
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.14), 0 0 0 1px rgba(255,255,255,.12), 0 10px 28px -12px rgba(255,255,255,.22); }
.btn-primary:hover { background:linear-gradient(180deg,#FFF 0%,#EDEDED 100%); }
.btn-ghost { color:var(--ink); background:#0A0A0A; border:1px solid var(--line-2); }
.btn-ghost:hover { background:#151515; border-color:var(--line-3); }
.btn-sm { min-height:44px; padding:0 16px; font-size:15px; border-radius:9px; }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; }

/* Kopfzeile */
.site-head { position:sticky; top:0; z-index:50; background:rgba(0,0,0,.74); border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(1.2) blur(14px); backdrop-filter:saturate(1.2) blur(14px); }
.head-in { display:flex; align-items:center; gap:24px; height:68px; }
.brand { display:inline-flex; align-items:center; gap:11px; min-height:44px; text-decoration:none; color:var(--ink); font-weight:500; font-size:18px; letter-spacing:-.015em; }
.brand img { width:34px; height:34px; border-radius:8px; }
.nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a { display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border-radius:8px; text-decoration:none; color:var(--ink-2); font-size:15px; }
.nav a:hover { color:var(--ink); background:rgba(255,255,255,.05); }
.head-cta { display:flex; align-items:center; gap:10px; }
.menu-btn { display:none; align-items:center; justify-content:center; gap:8px; min-height:44px; min-width:44px; padding:0 12px; margin-left:auto;
  border-radius:9px; border:1px solid var(--line-2); background:#0A0A0A; color:var(--ink); font:500 15px var(--sans); cursor:pointer; }
.menu-btn svg { width:18px; height:18px; }
.menu-btn .x { display:none; }
.site-head.open .menu-btn .x { display:block; } .site-head.open .menu-btn .bars { display:none; }
.mnav { display:none; }
@media (max-width:1079px) {
  .nav { display:none; }
  .head-cta .btn-primary { display:none; }
  .menu-btn { display:inline-flex; margin-left:auto; }
  .head-cta { order:3; }
  .mnav { border-top:1px solid var(--line); padding:8px var(--gut) 20px; }
  .site-head.open .mnav { display:block; }
  .mnav a { display:flex; align-items:center; min-height:52px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); font-size:18px; }
  .mnav .btn { width:100%; margin-top:18px; border-bottom:0; }
  .mnav a.btn-primary { color:#0A0A0A; font-size:16px; }
}
@media (max-width:420px) { .head-cta .btn-ghost { padding:0 12px; } .head-in { gap:10px; } .brand { font-size:17px; } }

/* Abschnitte */
.sec { padding:88px 0; border-top:1px solid var(--line); position:relative; }
@media (min-width:1000px) { .sec { padding:128px 0; } }
.sec-head { max-width:760px; margin-bottom:48px; }
.sec-head h2 { font-size:clamp(34px, 5.4vw, 56px); line-height:1.06; letter-spacing:-.035em; }
.lead { margin-top:20px; font-size:clamp(18px, 1.6vw, 20px); line-height:1.6; color:var(--ink-2); max-width:680px; }
.lead b { font-weight:400; color:var(--ink); }

/* Karte mit Lichtkante */
.card { position:relative; border-radius:16px; background:var(--card); border:1px solid rgba(255,255,255,.09); }
.card::before { content:""; position:absolute; top:-1px; left:18%; right:18%; height:1px; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0)); }

/* Rahmen mit Etikett (wie Login-Seite der App) */
.frame { position:relative; overflow:hidden; border-radius:12px; border:1px solid rgba(255,255,255,.09);
  background:radial-gradient(120% 90% at 30% 0, #1B1B1B, #0C0C0C 70%); box-shadow:0 30px 60px -24px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06); }
.frame > svg.ln { position:absolute; left:4%; right:4%; bottom:0; width:92%; height:90%; }
.tag { position:absolute; top:0; right:0; z-index:3; padding:6px 10px; font-size:11px; font-weight:500; color:#B0B0B0; letter-spacing:.1em;
  border-left:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); border-bottom-left-radius:9px; background:rgba(10,10,10,.8); }
.dots { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.2) 1px, transparent 1.3px); background-size:6px 6px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%); mask-image:linear-gradient(180deg,#000,transparent 70%); }
.pill { position:absolute; z-index:3; display:inline-flex; align-items:center; gap:.32em; padding:.38em .78em; border-radius:999px;
  background:rgba(255,255,255,.5); color:#1F2226; font:600 10px/1 var(--sans); letter-spacing:.06em; white-space:nowrap; }
.pill b { font-weight:700; letter-spacing:.02em; }

/* Hero */
.hero { padding:56px 0 88px; }
@media (min-width:1000px) { .hero { padding:96px 0 128px; } }
.hero-grid { display:grid; gap:56px; align-items:center; }
@media (min-width:1000px) { .hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:64px; } }
.hero h1 { font-size:clamp(44px, 7.4vw, 80px); line-height:1.02; letter-spacing:-.04em; }
.hero h1 span { color:var(--ink-3); }
.hero .lead { margin-top:24px; max-width:560px; }
.hero .btn-row { margin-top:34px; }
.facts { display:flex; flex-wrap:wrap; gap:10px 22px; margin:36px 0 0; padding:0; list-style:none; }
.facts li { display:inline-flex; align-items:center; gap:9px; font:500 12px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.facts li::before { content:""; width:5px; height:5px; border-radius:50%; background:#D9D9D9; box-shadow:0 0 0 3px rgba(255,255,255,.08); }

.hv { position:relative; aspect-ratio:10/8; width:100%; max-width:620px; margin:0 auto; }

.hv-doc { position:absolute; left:0; top:0; width:38%; aspect-ratio:210/297; padding:9% 8% 0; display:flex; flex-direction:column; gap:7%; }
.hv-doc .ph { position:relative; aspect-ratio:3/2; border-radius:4px; border:1px solid rgba(255,255,255,.1); background:#141414; overflow:hidden; }
.hv-doc .ph svg { position:absolute; inset:8% 3% 0; width:94%; height:92%; }
.hv-doc .ph-row { display:grid; grid-template-columns:1fr 1fr; gap:8%; }
.hv-doc .ph-row .ph { aspect-ratio:1/1; }
.hv-doc .tl { display:grid; gap:6px; } .hv-doc .tl i { display:block; height:1px; background:rgba(255,255,255,.16); }
.hv-doc .tl i:nth-child(2) { width:82%; } .hv-doc .tl i:nth-child(3) { width:64%; }
.hv-doc .ttl { height:6px; width:58%; border-radius:2px; background:rgba(255,255,255,.22); }
.hv-route { position:absolute; left:42%; top:12%; display:flex; align-items:center; gap:10px; font:500 11px var(--mono); letter-spacing:.12em; color:var(--ink-3); }
.hv-route::before { content:""; width:min(9vw,70px); height:1px; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4)); }
.hv-film { position:absolute; right:0; bottom:11%; width:72%; aspect-ratio:16/9; z-index:2; }
.hv-film > svg.ln { stroke:rgba(255,255,255,.42); }
.lower3 { position:absolute; left:5%; bottom:12%; z-index:3; display:flex; align-items:stretch; border-radius:8px; overflow:hidden;
  background:rgba(20,20,20,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.lower3 i { width:3px; background:#E6E6E6; }
.lower3 span { padding:.6em .9em; font:500 clamp(10px,1.3vw,13px)/1.2 var(--sans); color:#EDEDED; letter-spacing:-.005em; }
.hv-film .pill { right:4%; bottom:8%; font-size:clamp(7px,.9vw,9px); }
.hv-tl { position:absolute; right:0; bottom:2%; width:72%; display:flex; align-items:center; gap:12px; font:500 11px var(--mono); letter-spacing:.08em; color:var(--ink-3); }
.hv-tl .bar { flex:1; display:flex; gap:3px; height:6px; }
.hv-tl .bar i { flex:1; border-radius:2px; background:rgba(255,255,255,.12); }
.hv-tl .bar i.on { background:rgba(255,255,255,.55); }
.hv-tl .bar i:nth-child(2) { flex:1.6; } .hv-tl .bar i:nth-child(3) { flex:2.2; } .hv-tl .bar i:nth-child(5) { flex:.8; }

/* Beispielfilm */
.player { position:relative; aspect-ratio:16/9; border-radius:16px; }
.player > svg.ln { stroke:rgba(255,255,255,.3); left:18%; width:64%; height:60%; bottom:4%; }
.player video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#050505; }
.play { position:absolute; left:50%; top:36%; transform:translate(-50%,-50%); z-index:3; width:clamp(64px,9vw,92px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; background:rgba(20,20,20,.55); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 20px 40px -16px rgba(0,0,0,.9); }
.play svg { width:32%; height:32%; margin-left:6%; fill:#EDEDED; }
.player .pill { right:3%; bottom:6%; font-size:clamp(8px,1vw,11px); }
.player .hint { position:absolute; left:3%; bottom:6.4%; z-index:3; font-size:clamp(9px,1vw,13px); color:rgba(255,255,255,.88); }
.player .status { position:absolute; left:3%; top:5%; z-index:3; display:inline-flex; align-items:center; gap:9px; font:500 11px var(--mono); letter-spacing:.12em; color:#BDBDBD; text-transform:uppercase; }
.player .status::before { content:""; width:6px; height:6px; border-radius:50%; background:#EDEDED; box-shadow:0 0 0 3px rgba(255,255,255,.1); }
.film-note { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; margin-top:24px; }
.film-note p { max-width:640px; color:var(--ink-2); font-size:16px; }

.strip { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(180px, 1fr); gap:12px; margin-top:28px; overflow-x:auto; padding:0 0 10px;
  scrollbar-width:thin; scrollbar-color:#2A2A2A transparent; scroll-snap-type:x proximity; }
.shot { scroll-snap-align:start; margin:0; }
.shot .frame { aspect-ratio:16/9; border-radius:9px; box-shadow:none; }
.shot .frame > svg.ln { stroke:rgba(255,255,255,.3); }
.shot figcaption { display:flex; justify-content:space-between; gap:10px; margin-top:10px; font:500 11.5px var(--mono); letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; }
.shot figcaption b { font-weight:500; color:#C9C9C9; }
.endcard { display:grid; place-items:center; align-content:center; gap:8px; background:linear-gradient(180deg,#151515,#0C0C0C) !important; }
.endcard .logo { width:26%; aspect-ratio:3/1; border:1px dashed rgba(255,255,255,.28); border-radius:4px; display:grid; place-items:center; font:500 8px var(--mono); letter-spacing:.12em; color:#A0A0A0; }
.endcard .l { height:1px; width:44%; background:rgba(255,255,255,.2); } .endcard .l.s { width:30%; }

/* Zweispaltig */
.two { display:grid; gap:16px; }
@media (min-width:860px) { .two { grid-template-columns:1fr 1fr; gap:20px; } }

/* Ablauf */
.steps { display:grid; gap:16px; counter-reset:step; }
@media (min-width:960px) { .steps { grid-template-columns:repeat(3,1fr); gap:20px; } }
.step { padding:12px; display:flex; flex-direction:column; }
.step .ill { position:relative; height:200px; display:flex; flex-direction:column; justify-content:center; border-radius:11px; border:1px solid rgba(255,255,255,.07); background:radial-gradient(120% 90% at 30% 0, #181818, #0C0C0C 70%); overflow:hidden; padding:18px; }
.step .txt { padding:22px 14px 16px; }
.step .no { font:500 12px var(--mono); letter-spacing:.12em; color:var(--ink-3); }
.step h3 { margin:10px 0 10px; font-size:21px; font-weight:400; letter-spacing:-.015em; }
.step p { color:var(--ink-2); font-size:16.5px; }
/* Mini-Oberflächen in den Schritten */
.drop { flex:1; border:1px dashed rgba(255,255,255,.2); border-radius:9px; display:grid; place-items:center; align-content:center; gap:14px; }
.chip { display:inline-flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; background:#151515; border:1px solid rgba(255,255,255,.12); font:500 12px var(--mono); letter-spacing:.06em; color:#D6D6D6; }
.chip svg { width:16px; height:16px; stroke:#BDBDBD; fill:none; stroke-width:1.3; }
.drop small { font:500 11px var(--mono); letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase; }
.rows { display:grid; gap:6px; }
.rowx { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px; padding:6px 10px; border-radius:8px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); font-size:13px; color:#D0D0D0; }
.rowx .t { display:grid; place-items:center; height:22px; border-radius:5px; font:500 11px var(--mono); color:#BDBDBD; background:#151515; border:1px solid rgba(255,255,255,.1); }
.rowx em { font-style:normal; font:500 10.5px var(--mono); letter-spacing:.08em; color:var(--ink-3); }
.mini-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.mini-strip i { aspect-ratio:16/10; border-radius:5px; background:#171717; border:1px solid rgba(255,255,255,.1); position:relative; overflow:hidden; }
.mini-strip i svg { position:absolute; inset:14% 4% 0; width:92%; height:86%; }
.mini-strip i.lift { transform:translateY(-6px) rotate(-2deg); border-color:rgba(255,255,255,.4); box-shadow:0 12px 20px -8px rgba(0,0,0,.9); }
.say { margin-top:14px; padding:10px 12px; border-radius:8px; background:#0A0A0A; border:1px solid rgba(255,255,255,.14); font-size:13px; color:#D6D6D6; display:flex; justify-content:space-between; gap:10px; align-items:center; }
.say span:last-child { font:500 10.5px var(--mono); letter-spacing:.08em; color:var(--ink-3); white-space:nowrap; }

/* Merkmale */
.feat { display:grid; gap:1px; border-radius:16px; overflow:hidden; background:var(--line); border:1px solid rgba(255,255,255,.09); }
@media (min-width:700px) { .feat { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px) { .feat { grid-template-columns:repeat(3,1fr); } }
.feat > div { background:#070707; padding:32px 28px 34px; }
.feat .ic { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(180deg,#1F1F1F,#121212); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.feat .ic svg { width:20px; height:20px; fill:none; stroke:#E0E0E0; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.feat h3 { margin:22px 0 10px; font-size:20px; font-weight:400; letter-spacing:-.015em; }
.feat p { color:var(--ink-2); font-size:16.5px; }

/* Pakete: Schalter data-show-prices="false" blendet die Beträge aus und zeigt „Preis auf Anfrage“ */
.plans { display:grid; gap:16px; align-items:center; }
@media (min-width:960px) { .plans { grid-template-columns:1fr 1.12fr 1fr; gap:20px; } }
.plan { padding:30px 28px 28px; display:flex; flex-direction:column; }
.plan .mono { font-size:12px; color:var(--ink-3); }
.plan h3 { margin:12px 0 0; font-size:30px; font-weight:300; letter-spacing:-.025em; }
.plan h3 span { font-size:17px; letter-spacing:0; color:var(--ink-2); }
.price { margin:22px 0 0; padding-bottom:22px; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.price .amt { font-size:46px; font-weight:300; letter-spacing:-.035em; line-height:1; }
.price .per { color:var(--ink-3); font-size:16px; }
.price-alt { display:none; font-size:22px; font-weight:300; color:var(--ink); }
[data-show-prices="false"] .price .amt, [data-show-prices="false"] .price .per { display:none; }
[data-show-prices="false"] .price-alt { display:block; }
.plan ul, .ticks { margin:22px 0 0; padding:0; list-style:none; display:grid; gap:11px; color:#C9C9C9; font-size:16.5px; }
.plan li, .ticks li { display:grid; grid-template-columns:20px 1fr; gap:10px; }
.plan li::before, .ticks li::before { content:""; width:10px; height:5px; margin-top:.5em; margin-left:2px; border-left:1.4px solid #D8D8D8; border-bottom:1.4px solid #D8D8D8; transform:rotate(-45deg); }
.plan .btn { margin-top:28px; }
.plan.mid { position:relative; padding:44px 32px 34px; background:linear-gradient(180deg,#1A1A1A,#0E0E0E); border-color:rgba(255,255,255,.2);
  box-shadow:0 40px 80px -40px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.1); }
.plan.mid::before { left:8%; right:8%; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0)); }
.plan.mid::after { content:""; position:absolute; left:15%; right:15%; top:0; height:120px; pointer-events:none; border-radius:16px;
  background:radial-gradient(50% 100% at 50% 0, rgba(255,255,255,.1), rgba(255,255,255,0)); }
.plan.mid h3 { font-size:36px; } .plan.mid .amt { font-size:56px; }
.badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); z-index:2; margin:0; padding:6px 13px; border-radius:999px; white-space:nowrap;
  font:600 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#0A0A0A; background:linear-gradient(180deg,#FAFAFA,#DCDCDC); box-shadow:inset 0 1px 0 #fff, 0 6px 18px -8px rgba(255,255,255,.4); }
.team { margin-top:20px; padding:26px 28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px; }
.team .mono { font-size:12px; color:var(--ink-3); }
.team h3 { margin:8px 0 6px; font-size:22px; font-weight:400; }
.team p { color:var(--ink-2); max-width:620px; }
.fine { margin-top:20px; font-size:14.5px; color:var(--ink-3); }
.center { text-align:center; margin-left:auto; margin-right:auto; }
.sec-head.center .kicker { justify-content:center; }

/* Einrichtung */
.setup { padding:30px 28px; }
.setup .mono { font-size:12px; color:var(--ink-3); }
.setup h3 { margin:12px 0 12px; font-size:24px; font-weight:300; letter-spacing:-.02em; }
.setup p { color:var(--ink-2); }
.setup ul { margin:18px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.setup li { padding:6px 11px; border-radius:7px; border:1px solid rgba(255,255,255,.11); background:#0D0D0D; font-size:14.5px; color:#D2D2D2; }
.setup.premium { background:linear-gradient(180deg,#151515,#0C0C0C); border-color:rgba(255,255,255,.14); }
.setup .note { margin-top:20px; font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

/* Datenschutz */
.trust { display:grid; gap:16px; }
@media (min-width:860px) { .trust { grid-template-columns:repeat(3,1fr); gap:20px; } }
.trust > div { position:relative; padding:30px 28px; border-radius:16px; background:linear-gradient(180deg,#141414,#0E0E0E); border:1px solid rgba(255,255,255,.09); }
.trust > div::before { content:""; position:absolute; top:-1px; left:18%; right:18%; height:1px; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0)); }
.trust .ic, .feat .ic { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(180deg,#1F1F1F,#121212); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.trust .ic svg { width:20px; height:20px; fill:none; stroke:#E0E0E0; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.trust h3 { margin:20px 0 8px; font-size:20px; font-weight:400; }
.trust p { color:var(--ink-2); font-size:16.5px; }

/* FAQ */
.faq { border-top:1px solid var(--line); max-width:920px; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:68px; padding:16px 0;
  font-size:clamp(18px,1.8vw,20px); font-weight:400; letter-spacing:-.01em; color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:""; flex:none; width:28px; height:28px; border-radius:8px; border:1px solid var(--line-2);
  background:linear-gradient(currentColor,currentColor) center/11px 1.3px no-repeat, linear-gradient(currentColor,currentColor) center/1.3px 11px no-repeat; color:#CFCFCF; }
.faq details[open] summary::after { background:linear-gradient(currentColor,currentColor) center/11px 1.3px no-repeat; }
.faq summary:hover { color:#fff; }
.faq .a { padding:0 48px 26px 0; color:var(--ink-2); display:grid; gap:12px; }
.faq .a a { color:var(--ink); text-underline-offset:3px; }

/* Abschluss */
.final { text-align:center; padding:112px 0 120px; overflow:hidden; }
.final::before { content:""; position:absolute; left:50%; top:-1px; width:min(760px,90%); height:200px; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0, rgba(255,255,255,.08), rgba(255,255,255,0)); }
.final img.icon { width:84px; height:84px; margin:0 auto 30px; filter:drop-shadow(0 16px 30px rgba(0,0,0,.7)); }
.final h2 { font-size:clamp(38px, 6vw, 68px); letter-spacing:-.04em; line-height:1.04; }
.final .lead { margin:22px auto 0; }
.final .btn-row { justify-content:center; margin-top:36px; }
.contact-line { margin-top:26px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px; font-size:16px; color:var(--ink-2); }
.contact-line a { color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
.contact-line a:hover { text-decoration:underline; text-underline-offset:3px; }

/* Fußzeile */
.site-foot { border-top:1px solid var(--line); padding:48px 0 40px; font-size:15px; color:var(--ink-3); }
.foot-grid { display:grid; gap:32px; }
@media (min-width:860px) { .foot-grid { grid-template-columns:1.3fr 1fr 1fr; } }
.site-foot .brand { font-size:17px; }
.site-foot p { margin-top:12px; max-width:360px; }
.site-foot h2 { font:500 12px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; }
.site-foot ul { margin:0; padding:0; list-style:none; }
.site-foot li a { display:inline-flex; align-items:center; min-height:44px; color:var(--ink-2); text-decoration:none; }
.site-foot li a:hover { color:var(--ink); }
.foot-bottom { margin-top:36px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:14px; }

/* Rechtstexte (Lesetypografie) */
.legal { max-width:820px; padding-top:56px; padding-bottom:96px; font-size:17px; line-height:1.7; color:#D4D4D4; overflow-wrap:anywhere; hyphens:auto; }
.legal h1 { font-size:clamp(30px,5vw,52px); letter-spacing:-.035em; margin:0 0 28px; line-height:1.08; overflow-wrap:break-word; hyphens:auto; }
.legal h2 { font-size:22px; font-weight:400; letter-spacing:-.015em; margin:44px 0 12px; line-height:1.3; color:var(--ink); }
.legal h3 { font-size:18px; font-weight:500; margin:30px 0 8px; }
.legal h4 { font-size:16.5px; font-weight:500; margin:22px 0 6px; color:var(--ink); }
.legal p, .legal ul, .legal ol { margin:0 0 14px; }
.legal a { color:var(--ink); text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.35); }
.legal strong { font-weight:500; color:var(--ink); }
.legal .todo { border:1px dashed var(--ink-3); color:var(--ink-2); border-radius:10px; padding:14px 16px; background:#0A0A0A; }
.legal .note { border-left:2px solid var(--line-3); padding:8px 14px; background:#0A0A0A; border-radius:0 8px 8px 0; margin:16px 0; }
.legal .stats-optout { border:1px solid var(--line-2); border-radius:12px; padding:16px 18px; background:#0A0A0A; margin:18px 0 8px; display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:space-between; }
.legal .stats-optout p { margin:0; flex:1 1 280px; color:var(--ink-2); }
.legal .stats-optout [hidden] { display:none; }
.legal dl { display:grid; grid-template-columns:minmax(120px,max-content) 1fr; gap:6px 18px; } .legal dt { color:var(--ink-3); } .legal dd { margin:0; }
.legal .tbl { overflow-x:auto; } .legal table { border-collapse:collapse; width:100%; font-size:15px; min-width:640px; }
.legal th, .legal td { text-align:left; vertical-align:top; border-bottom:1px solid var(--line); padding:8px 10px; } .legal th { color:var(--ink-3); font-weight:500; }
.back { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-bottom:18px; color:var(--ink-3); text-decoration:none; font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.back:hover { color:var(--ink); }

/* Einblenden beim Scrollen (nur mit JS, nie bei reduzierter Bewegung) */
.js .rv { opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.in { opacity:1; transform:none; }
.js .rv.d1 { transition-delay:.08s; } .js .rv.d2 { transition-delay:.16s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .js .rv { opacity:1; transform:none; transition:none; }
  .btn, .faq summary { transition:none; }
}

/* FAQ zweispaltig ab Desktop */
@media (min-width:1000px) { .faq-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:72px; align-items:start; } .faq-grid .sec-head { position:sticky; top:110px; } }
.faq-side { margin-top:24px; color:var(--ink-2); font-size:16.5px; }
.faq-side a { color:var(--ink); text-underline-offset:3px; }

/* Feinschliff Mobil */
@media (max-width:999px) { .sec { padding:72px 0; } .hero { padding:44px 0 72px; } .sec-head { margin-bottom:36px; } }
.strip { margin-right:calc(-1 * var(--gut)); padding-right:var(--gut); }
@media (min-width:1000px) { .strip { margin-right:0; padding-right:0; } }
@media (max-width:600px) {
  .hv { aspect-ratio:1/1; }
  .hv-doc { width:44%; }
  .hv-film { width:80%; bottom:12%; }
  .hv-tl { width:80%; }
  .hv-route { display:none; }
  .player > svg.ln { left:14%; width:72%; height:52%; }
  .play { top:32%; }
  .player .hint { display:none; }
  .plan, .setup, .team { padding:26px 22px; } .pillar { padding:12px 12px 26px; }
  .feat > div, .trust > div { padding:28px 22px; }
  .faq .a { padding-right:0; }
}

/* ===== Überarbeitung 2: Staffelung der Sektionen ===== */
.sec-alt { background:#0A0A0A; }
.sec > .wrap { position:relative; z-index:1; }
.sec-glow::before, .final::before { content:""; position:absolute; left:50%; top:-1px; z-index:0; width:min(900px,92%); height:240px; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0, rgba(255,255,255,.075), rgba(255,255,255,0)); }
.sec-glow::after { content:""; position:absolute; left:50%; top:-1px; width:min(520px,60%); height:1px; transform:translateX(-50%); pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0)); }
.sec-alt .card, .sec-alt .trust > div { background:linear-gradient(180deg,#151515,#0E0E0E); border-color:rgba(255,255,255,.1); }
.sec-alt .plan.mid { background:linear-gradient(180deg,#1C1C1C,#101010); border-color:rgba(255,255,255,.22); }
.sec-head.center { text-align:center; }

/* Zwei Säulen */
.pillars { display:grid; gap:16px; }
@media (min-width:900px) { .pillars { grid-template-columns:1fr 1fr; gap:20px; } }
.pillar { padding:12px 12px 30px; }
.pillar .pv .frame { aspect-ratio:16/9; border-radius:11px; box-shadow:none; }
.pillar .pv .frame > svg.ln { left:14%; width:72%; height:80%; }
.pillar .mono { margin:26px 18px 0; font-size:12px; color:var(--ink-3); }
.pillar h3 { margin:10px 18px 0; font-size:clamp(30px,3.4vw,40px); font-weight:300; letter-spacing:-.03em; line-height:1.1; }
.pillar .pl { margin:12px 18px 0; color:var(--ink-2); max-width:460px; }
.pillar .ticks { margin:22px 18px 0; }
.cine { background:radial-gradient(90% 80% at 50% 20%, #262626, #0C0C0C 72%) !important; }
.cine > svg.ln { stroke:rgba(255,255,255,.55); }
.cine .bars-t, .cine .bars-b { position:absolute; left:0; right:0; height:11%; background:#000; z-index:2; }
.cine .bars-t { top:0; } .cine .bars-b { bottom:0; }
.cine .tag { top:11%; }

/* KI-Kennzeichnung */
.kz { display:grid; gap:20px; }
@media (min-width:900px) { .kz { grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); gap:24px; align-items:stretch; } }
.kz-main { aspect-ratio:16/9; border-radius:14px; }
.kz-main > svg.ln { left:16%; width:68%; height:72%; bottom:8%; }
.kz .tc { position:absolute; left:3.5%; top:6%; font:500 11px var(--mono); letter-spacing:.1em; color:#9A9A9A; }
.tgt { position:absolute; z-index:3; }
.tgt .pill, .tgt-in .pill { position:static; }
.t-pill { right:3.5%; bottom:6%; } .t-pill .pill { font-size:clamp(8px,1vw,11px); }
.t-hint { left:3.5%; bottom:6.5%; max-width:58%; }
.kz-hint { display:block; font-size:clamp(9px,1.1vw,14px); line-height:1.35; color:rgba(255,255,255,.9); }
.mk { position:absolute; left:50%; bottom:calc(100% + 16px); transform:translateX(-50%); width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:#0A0A0A; border:1px solid rgba(255,255,255,.75); color:#fff; font:600 11px/1 var(--mono); box-shadow:0 0 0 4px rgba(0,0,0,.45); }
.mk::after { content:""; position:absolute; left:50%; top:100%; width:1px; height:16px; background:linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.35)); }
.t-hint .mk { left:14px; }
.kz-side { display:grid; gap:20px; grid-template-rows:auto 1fr; }
.kz-end { aspect-ratio:16/9; border-radius:14px; display:grid; place-items:center; align-content:center; gap:9px; background:linear-gradient(180deg,#171717,#0C0C0C) !important; }
.kz-end .logo { width:30%; aspect-ratio:3/1; border:1px dashed rgba(255,255,255,.3); border-radius:4px; display:grid; place-items:center; font:500 9px var(--mono); letter-spacing:.12em; color:#A8A8A8; text-transform:uppercase; }
.kz-end .l { height:1px; width:46%; background:rgba(255,255,255,.2); } .kz-end .l.s { width:30%; }
.tgt-in { position:relative; display:inline-block; margin-top:6px; }
.tgt-in .mk { left:auto; right:-34px; bottom:50%; transform:translateY(50%); }
.tgt-in .mk::after { left:auto; right:100%; top:50%; width:10px; height:1px; }
.pill.dark { background:rgba(31,34,38,.92); color:#fff; border:1px solid rgba(255,255,255,.16); font-size:10px; }
.kz-file { position:relative; display:flex; flex-direction:column; justify-content:center; gap:12px; padding:22px; border-radius:14px; background:#0E0E0E; border:1px solid rgba(255,255,255,.1); }
.kz-file .fn { display:inline-flex; align-items:center; gap:10px; font:500 13px var(--mono); letter-spacing:.04em; color:#E0E0E0; }
.kz-file .fn svg { width:18px; height:18px; fill:none; stroke:#BDBDBD; stroke-width:1.3; }
.kz-file .meta { display:block; font:400 12.5px/1.5 var(--mono); color:#B4B4B4; padding:10px 12px; border-radius:8px; background:#070707; border:1px solid rgba(255,255,255,.08); }
.kz-file .meta em { display:block; font-style:normal; color:#8F8F8F; font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; }
.kz-file .mk { left:auto; right:18px; top:18px; bottom:auto; transform:none; } .kz-file .mk::after { display:none; }
.kz-legend { margin:28px 0 0; padding:0; list-style:none; display:grid; gap:12px 24px; }
@media (min-width:640px) { .kz-legend { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px) { .kz-legend { grid-template-columns:repeat(4,1fr); } }
.kz-legend li { display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:start; padding-top:16px; border-top:1px solid var(--line-2); }
.kz-legend b { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.75); font:600 11px/1 var(--mono); }
.kz-legend strong { display:block; font-weight:500; color:var(--ink); font-size:17px; margin-bottom:2px; }
.kz-legend span { color:var(--ink-2); font-size:15.5px; line-height:1.5; }

/* Vergleich (Häkchen) */
.vs { max-width:980px; border-radius:16px; border:1px solid rgba(255,255,255,.09); background:#060606; overflow:hidden; }
.vs-row { display:grid; grid-template-columns:minmax(0,1.7fr) repeat(3, minmax(0,1fr)); align-items:stretch; border-top:1px solid var(--line); }
.vs-row:first-child { border-top:0; }
.vs-row > span { display:flex; align-items:center; justify-content:center; padding:18px 8px; text-align:center; }
.vs-row > .vs-k { justify-content:flex-start; text-align:left; padding:18px 24px; font-size:17px; color:var(--ink); }
.vs-head > span { padding:22px 8px 18px; font-size:15.5px; font-weight:500; color:var(--ink-2); }
.vs-head > .us { color:#fff; position:relative; }
.vs-head > .us::before { content:""; position:absolute; top:0; left:12%; right:12%; height:1px; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(255,255,255,0)); }
.vs-row > .us { background:rgba(255,255,255,.055); box-shadow:inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1); }
.vs i, .vs-legend i { display:inline-block; width:26px; height:26px; border-radius:50%; flex:none; }
.vs i.yes, .vs-legend i.yes { border:1px solid rgba(255,255,255,.3); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23CFCFCF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.4l2.8 2.7 6-6.3'/%3E%3C/svg%3E") center/15px no-repeat; }
.vs .us i.yes { border:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230A0A0A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.4l2.8 2.7 6-6.3'/%3E%3C/svg%3E") center/15px no-repeat, linear-gradient(180deg,#FAFAFA,#D4D4D4); box-shadow:inset 0 1px 0 #fff, 0 6px 16px -6px rgba(255,255,255,.35); }
.vs i.part, .vs-legend i.part { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239A9A9A' stroke-width='1.3'%3E%3Ccircle cx='8' cy='8' r='3.6'/%3E%3C/svg%3E") center/18px no-repeat; }
.vs i.no, .vs-legend i.no { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236E6E6E' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M5 8h6'/%3E%3C/svg%3E") center/18px no-repeat; }
.vs-legend { margin-top:16px; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14.5px; color:var(--ink-3); }
.vs-legend span { display:inline-flex; align-items:center; gap:8px; }
.vs-legend i { width:20px; height:20px; background-size:12px !important; }
@media (max-width:600px) {
  .vs-row { grid-template-columns:minmax(0,1fr) 62px 84px 70px; }
  .vs-row > .vs-k { padding:16px 12px 16px 16px; font-size:15.5px; }
  .vs-head > span { font-size:12.5px; padding:18px 2px 14px; }
  .vs-row > span { padding:14px 2px; }
  .kz-legend li { padding-top:14px; }
  .t-hint { max-width:52%; }
  .mk { width:22px; height:22px; font-size:10px; bottom:calc(100% + 12px); } .mk::after { height:12px; }
}
.sec-head.center { max-width:960px; }
.cine > svg.ln { bottom:11%; height:68%; }
.cine .tcode { position:absolute; left:4%; bottom:3.2%; z-index:3; font:500 10.5px var(--mono); letter-spacing:.12em; color:#9A9A9A; }
.cine .rec { position:absolute; right:4%; bottom:3.2%; z-index:3; display:flex; gap:3px; } .cine .rec i { width:18px; height:3px; border-radius:2px; background:rgba(255,255,255,.18); } .cine .rec i:first-child { background:rgba(255,255,255,.7); }
@media (max-width:959px) { .plan.mid { order:-1; margin-top:14px; } }
@media (max-width:600px) {
  .kz-main > svg.ln { left:22%; width:56%; height:56%; bottom:24%; }
  .t-hint { max-width:56%; bottom:5.5%; } .kz-hint { font-size:9.5px; }
  .t-pill { bottom:5.5%; }
}

/* Hinweis unter den Datenschutz-Karten */
.trust-note { max-width:720px; margin:28px auto 0; text-align:center; font-size:14px; line-height:1.6; color:#8F8F8F; }

/* ===== Überarbeitung 3 (13.10.2026): Seite ohne Beispielfilm und ohne Preise ===== */
.sprite { position:absolute; }

/* Trailer-Skizze im Player: sechs gezeichnete Szenen, je 3 s, Schleife 18 s. Szene, Bauchbinde, Fortschritt und Filmstreifen
   laufen auf derselben Uhr (gleiche Dauer, Verzögerung je data-i). Bei reduzierter Bewegung steht Szene 2 still. */
.reel { position:absolute; inset:0; }
.reel .sc { position:absolute; inset:0; opacity:0; animation:tr-sc 18s linear var(--d,0s) infinite both; }
.reel .sc > svg.ln { position:absolute; left:4%; width:92%; height:90%; bottom:0; stroke:rgba(255,255,255,.34); transform-origin:50% 85%;
  animation:tr-push 18s linear var(--d,0s) infinite both; }
.reel .sc[data-i="1"] > svg.ln { left:18%; width:64%; height:62%; bottom:4%; stroke:rgba(255,255,255,.4); }
.reel .lower3 { bottom:17%; opacity:0; animation:tr-l3 18s var(--ease) var(--d,0s) infinite both; }
.reel .end { display:grid; place-items:center; align-content:center; gap:12px; background:linear-gradient(180deg,#151515,#0C0C0C); }
.reel .end .logo { width:20%; aspect-ratio:3/1; border:1px dashed rgba(255,255,255,.3); border-radius:5px; display:grid; place-items:center;
  font:500 clamp(8px,1vw,11px) var(--mono); letter-spacing:.12em; color:#A8A8A8; text-transform:uppercase; }
.reel .end .l { height:1px; width:34%; background:rgba(255,255,255,.2); } .reel .end .l.s { width:22%; }
.reel .end .pill { position:static; margin-top:6px; font-size:clamp(7px,.8vw,9px); }
.reel [data-i="1"], .strip.sync [data-i="1"] { --d:3s; } .reel [data-i="2"], .strip.sync [data-i="2"] { --d:6s; }
.reel [data-i="3"], .strip.sync [data-i="3"] { --d:9s; } .reel [data-i="4"], .strip.sync [data-i="4"] { --d:12s; }
.reel [data-i="5"], .strip.sync [data-i="5"] { --d:15s; }
.player .hint { animation:tr-hint 18s linear var(--d,0s) infinite both; }
.reel-bar { position:absolute; left:0; right:0; bottom:0; z-index:4; height:2px; background:rgba(255,255,255,.08); }
.reel-bar i { display:block; height:100%; background:rgba(255,255,255,.6); transform-origin:0 50%; animation:tr-bar 18s linear infinite; }
.strip.sync .shot .frame { animation:tr-shot 18s linear var(--d,0s) infinite both; }
.strip.sync .shot figcaption b { animation:tr-cap 18s linear var(--d,0s) infinite both; }
@keyframes tr-sc { 0% { opacity:0; } 3% { opacity:1; } 16.7% { opacity:1; } 19.5% { opacity:0; } 100% { opacity:0; } }
@keyframes tr-push { 0% { transform:scale(1); } 19.5% { transform:scale(1.07); } 100% { transform:scale(1.07); } }
@keyframes tr-l3 { 0%, 4% { opacity:0; transform:translateX(-10px); } 7% { opacity:1; transform:none; } 15% { opacity:1; transform:none; } 17%, 100% { opacity:0; transform:none; } }
@keyframes tr-hint { 0% { opacity:0; } 2% { opacity:1; } 14% { opacity:1; } 16.7%, 100% { opacity:0; } }
@keyframes tr-bar { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes tr-shot { 0%, 100% { border-color:rgba(255,255,255,.09); } 1.5%, 15.5% { border-color:rgba(255,255,255,.5); } 17.5% { border-color:rgba(255,255,255,.09); } }
@keyframes tr-cap { 0%, 100% { color:#C9C9C9; } 1.5%, 15.5% { color:#FFFFFF; } 17.5% { color:#C9C9C9; } }
@media (prefers-reduced-motion: reduce) {
  .reel .sc, .reel .sc > svg.ln, .reel .lower3, .player .hint, .strip.sync .shot .frame, .strip.sync .shot figcaption b { animation:none; }
  .reel .sc[data-i="1"], .reel .sc[data-i="1"] .lower3 { opacity:1; }
  .reel-bar { display:none; }
}
@media (max-width:600px) { .reel .lower3 { bottom:20%; } .reel .end .pill { display:none; } }

/* Anfrage statt Pakete */
.sec-head.center .lead { margin-left:auto; margin-right:auto; }
.ask { padding:30px 28px; display:grid; gap:30px; }
.ask-steps { margin:0; padding:0; list-style:none; display:grid; gap:22px; counter-reset:ask; }
@media (min-width:860px) { .ask { padding:38px 40px; } .ask-steps { grid-template-columns:repeat(3,1fr); gap:32px; } }
.ask-steps li { counter-increment:ask; display:grid; gap:6px; align-content:start; }
.ask-steps li::before { content:counter(ask, decimal-leading-zero); font:500 12px var(--mono); letter-spacing:.12em; color:var(--ink-3); }
.ask-steps b { font-weight:400; font-size:21px; letter-spacing:-.015em; color:var(--ink); }
.ask-steps span { color:var(--ink-2); font-size:16.5px; }
.ask-cta { display:flex; flex-wrap:wrap; gap:12px; padding-top:26px; border-top:1px solid var(--line); }
@media (max-width:600px) { .ask { padding:26px 22px; } .ask-cta .btn { width:100%; white-space:normal; text-align:center; } }

/* 404 */
.nf { min-height:70vh; display:grid; align-content:center; padding-top:96px; padding-bottom:96px; }
.nf h1 { font-size:clamp(40px,6vw,64px); letter-spacing:-.035em; }
.nf .btn-row { margin-top:32px; }