/* Team-Cloud – öffentliche Landingpage teams.speedshot.net/ (09.10.2026).
   Baut auf app.css auf (Tokens --tc-*, --bg, --surface, .btn, .fld, Icons #i-*).
   Mobil zuerst. Animationen nur mit .js + ohne prefers-reduced-motion. */
.lp{--w:1200px;--gut:16px;--ease:cubic-bezier(.2,.7,.2,1);background:var(--bg)}
.lp main{overflow-x:clip}
.lp :focus-visible{outline:2px solid var(--tc-primary);outline-offset:3px;border-radius:6px}
.lp .wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.lp .skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--tc-primary);color:var(--tc-on-primary);padding:8px 12px;border-radius:8px}
.lp .skip:focus{left:8px}
.lp h1,.lp h2,.lp h3{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.005em;margin:0;line-height:.95}
.lp h2{font-size:clamp(38px,7vw,64px);font-weight:800}
.lp h3{font-size:22px;font-weight:700;letter-spacing:.02em}
.lp .eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--tc-accent);margin-bottom:16px}
.lp .eyebrow::before{content:"";width:22px;height:3px;background:var(--tc-primary);border-radius:2px}
.lp .lead{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin:16px 0 0}
.lp section{padding:72px 0;scroll-margin-top:60px;position:relative}
.lp .sec-head{margin-bottom:36px}
.lp .sec-head.center{text-align:center}
.lp .sec-head.center .lead{margin-left:auto;margin-right:auto}
.lp .btn .ico.s{margin-right:-2px}

/* Einblenden beim Scrollen */
.js .lp [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.js .lp [data-reveal].in{opacity:1;transform:none}

/* ---------- Kopf ---------- */
.lp-top{position:sticky;top:0;z-index:60;background:rgba(12,13,16,.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
.lp-top.scrolled{border-bottom-color:var(--line);background:rgba(12,13,16,.9)}
.lp-top .wrap{display:flex;align-items:center;gap:10px;height:60px}
.lp-brand{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.lp-brand .plate{width:34px;height:34px;border-radius:9px;overflow:hidden;display:grid;place-items:center;flex:none}
.lp-brand .plate img{width:100%;height:100%;display:block}
.lp-brand strong{font:800 20px/1 var(--f-display);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.lp-brand strong span{color:var(--tc-accent)}
.lp-nav{display:none;gap:28px;font-size:14px;color:var(--muted)}
.lp-nav a{position:relative;padding:6px 0;transition:color .15s}
.lp-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tc-primary);transform:scaleX(0);transition:transform .25s var(--ease)}
.lp-nav a:hover{color:var(--text)}.lp-nav a:hover::after{transform:scaleX(1)}
.lp-top .btn{height:36px;padding:0 14px;font-size:13.5px}
.lp-top .lp-login{display:none}

/* ---------- Hero ---------- */
.lp-hero{padding:36px 0 56px !important;isolation:isolate;overflow:hidden}
.lp-hero-bg{position:absolute;inset:0;z-index:-2}
.lp-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;opacity:.22;filter:saturate(.9)}
.lp-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(12,13,16,.55),var(--bg) 92%),
  radial-gradient(800px 420px at 80% 0%,color-mix(in srgb,var(--tc-secondary) 70%,transparent),transparent 70%),
  radial-gradient(520px 300px at 10% 80%,var(--tc-soft),transparent 70%)}
.lp-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 65%);-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 65%)}
.lp-hero .grid2{display:grid;gap:44px}
.lp-hero h1{font-size:clamp(48px,12.5vw,84px);font-weight:800;line-height:.92}
.lp-hero h1 em{font-style:normal;color:var(--tc-accent);display:block}
.lp-hero .lead{font-size:17.5px;color:#C9CDD4}
.lp-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.lp-cta .btn{flex:1 1 auto}
.lp-cta .muted{font-weight:500}
.play-dot{width:24px;height:24px;border-radius:50%;background:var(--tc-primary);color:var(--tc-on-primary);display:grid;place-items:center}
.play-dot .ico{fill:currentColor;stroke:none;width:12px;height:12px;margin-left:2px}
.lp-points{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px;color:var(--muted);font-size:14px}
.lp-points li{display:flex;gap:10px;align-items:center}
.lp-points .ico{color:var(--ok);width:18px;height:18px}

.lp-hero-visual{position:relative;padding:0 0 54px 0}
.lp-browser{position:relative;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4)}
.lp-browser .chrome{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.lp-browser .chrome i{width:9px;height:9px;border-radius:50%;background:var(--surface-3)}
.lp-browser .chrome i:first-child{background:#ff5f57}.lp-browser .chrome i:nth-child(2){background:#febc2e}.lp-browser .chrome i:nth-child(3){background:#28c840}
.lp-browser .chrome span{flex:1;margin:0 40px 0 14px;height:18px;border-radius:6px;background:var(--bg);color:var(--faint);font-size:10.5px;line-height:18px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-browser img{width:100%;height:auto;aspect-ratio:1440/900;object-fit:cover;object-position:top}
.lp-phone{position:absolute;width:31%;max-width:210px;border-radius:26px;padding:7px;background:#050506;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -20px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.04)}
.lp-phone::before{content:"";position:absolute;top:12px;left:50%;width:30%;height:5px;margin-left:-15%;border-radius:4px;background:#000;z-index:2}
.lp-phone img{width:100%;height:auto;aspect-ratio:390/780;object-fit:cover;object-position:top;border-radius:20px}
.lp-hero-visual .lp-phone{right:-4px;bottom:0}
.lp-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;font:600 12.5px/1 var(--f-ui);background:rgba(21,23,28,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-2);white-space:nowrap;box-shadow:0 12px 30px -10px rgba(0,0,0,.8)}
.lp-chip .ico{width:16px;height:16px}
.lp-chip.c1{top:-14px;left:8%;background:var(--tc-primary);color:var(--tc-on-primary);border-color:transparent}
.lp-chip.c2{left:-6px;top:46%;color:var(--warn)}
.lp-chip.c2 b{color:var(--text)}
.lp-chip.c3{left:6%;bottom:8px}
.lp-chip .dots{display:inline-flex}.lp-chip .dots i{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 2px var(--surface)}.lp-chip .dots i+i{margin-left:-3px}
.js .lp-hero-visual .lp-chip{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .lp-hero-visual.in .lp-chip{opacity:1;transform:none}
.js .lp-hero-visual.in .c1{transition-delay:.7s}.js .lp-hero-visual.in .c2{transition-delay:1.1s}.js .lp-hero-visual.in .c3{transition-delay:1.5s}
.lp-hero-visual.in .c1{animation:lpFloat 6s ease-in-out 2s infinite}
.lp-hero-visual.in .c3{animation:lpFloat 7s ease-in-out 2.6s infinite reverse}
@keyframes lpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- Zahlen ---------- */
.lp-stats{padding:8px 0 24px !important}
.lp-stats .grid4{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.lp-stats .grid4>div{background:var(--bg);padding:20px 16px}
.lp-stats dt{font-size:48px;line-height:1;color:var(--text)}
.lp-stats dt span{color:var(--tc-accent)}
.lp-stats dd{margin:8px 0 0;color:var(--muted);font-size:13.5px;line-height:1.45}
.lp-stats dd strong{display:block;color:var(--text);font-size:14px;margin-bottom:2px}

/* ---------- Animierter Ablauf ---------- */
.lp-flow{position:relative;height:440px;border-radius:var(--r-l);background:radial-gradient(600px 240px at 50% 0%,var(--tc-soft),transparent 70%),var(--surface);border:1px solid var(--line-2);overflow:hidden;margin-bottom:20px}
.lp-flow .track{position:absolute;left:6%;right:6%;bottom:30px;height:56px}
.lp-flow .rail{position:absolute;left:12.5%;right:12.5%;top:21px;height:3px;border-radius:2px;background:var(--surface-3)}
.lp-flow .rail .fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--tc-primary),var(--tc-accent));transition:transform .9s var(--ease)}
.lp-flow .node{position:absolute;top:0;width:25%;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--faint);transition:color .4s}
.lp-flow .node .ico{width:44px;height:44px;padding:11px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);transition:background .4s,color .4s,border-color .4s,box-shadow .4s}
.lp-flow .node b{font:700 13px/1 var(--f-display);text-transform:uppercase;letter-spacing:.06em}
.lp-flow .n0{left:0}.lp-flow .n1{left:25%}.lp-flow .n2{left:50%}.lp-flow .n3{left:75%}
.lp-flow .node.done{color:var(--text)}
.lp-flow .node.done .ico{background:var(--tc-primary);color:var(--tc-on-primary);border-color:transparent}
.lp-flow .node.cur .ico{box-shadow:0 0 0 6px var(--tc-soft)}
/* Max 10.10.2026 ("Bild ragt links aus der Buehne / gequetscht"): Position
   UND Breite leiten sich aus DENSELBEN zwei Variablen ab (--cw = Kartenbreite
   in % der Buehne, --inset = Sicherheitsabstand zum Rand) — die Karte kann
   dadurch an KEINEM Punkt der Bewegung (x=0..3) ueber die Buehne hinausragen,
   auch wenn ein Breakpoint nur --cw/--inset ueberschreibt statt der ganzen
   Formel (vorher driftete die feste Breakpoint-Breite px von der eigenen
   links-Formel weg, dadurch Clipping bei x=0 auf Desktop). width:min(Npx,
   var(--cw)) stellt sicher, dass die TATSAECHLICHE Breite nie groesser als
   die in der Formel angenommene ist (der px-Deckel greift nur nach UNTEN). */
.lp-flow .card{--cw:70%;--inset:4%;--x:0;position:absolute;top:20px;width:min(280px,var(--cw));left:calc(var(--inset) + (var(--cw) / 2) + (var(--x) / 3) * (100% - var(--cw) - (var(--inset) * 2)));transform:translateX(-50%);border-radius:12px;overflow:visible;transition:left 1s var(--ease),transform .4s}
.lp-flow .card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;border:2px solid var(--line-2);box-shadow:0 20px 40px -14px rgba(0,0,0,.9);transition:border-color .4s}
.lp-flow[data-stage="2"] .card img,.lp-flow[data-stage="3"] .card img{border-color:var(--tc-primary)}
.lp-flow .card .src{position:absolute;top:-10px;left:-8px;display:inline-flex;gap:6px;align-items:center;padding:6px 9px;border-radius:999px;background:var(--surface-3);font:600 11px/1 var(--f-ui);border:1px solid var(--line-2);transition:opacity .4s}
/* Max 10.10.2026: Ergebnis-Label UNTER dem Bild, NICHT im normalen Fluss
   (sonst reserviert es bei opacity:0 weiterhin Platz -> "leerer Rahmen"
   unter dem Bild bei Hochladen/Freigeben/Verteilen). Absolut UNTERHALB des
   Bildes verankert (top:100%), dieselbe Breite wie die Karte -> kann nie
   ueber den Bildrand hinausragen, nimmt nur Platz ein, wenn sichtbar. */
.lp-flow .card .result{position:absolute;left:0;right:0;top:calc(100% + 10px);display:flex;align-items:flex-start;gap:8px;padding:8px 11px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-2);font:600 12px/1.3 var(--f-ui);opacity:0;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none}
.lp-flow .card .result .chk{flex:0 0 auto;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--tc-primary);color:var(--tc-on-primary);display:inline-flex;align-items:center;justify-content:center}
.lp-flow .card .result .chk .ico{width:11px;height:11px}
.lp-flow .card .result .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.lp-flow .card .result strong{color:var(--text);white-space:normal;overflow-wrap:break-word}
.lp-flow .card .result .sub{color:var(--muted);font-weight:500;white-space:normal}
.lp-flow .bd{position:absolute;display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;font:600 11px/1 var(--f-ui);white-space:nowrap;opacity:0;transform:scale(.7);transition:opacity .35s var(--ease),transform .35s var(--ease);box-shadow:0 8px 20px -8px rgba(0,0,0,.8)}
.lp-flow .bd .ico{width:13px;height:13px}
.lp-flow .bd.ok{right:-8px;top:-10px;background:var(--ok);color:#06281A}
.lp-flow .bd.iptc{left:-10px;bottom:-10px;background:var(--surface-3);color:var(--text);border:1px solid var(--line-2)}
.lp-flow[data-stage="0"] .src{opacity:1}
.lp-flow:not([data-stage="0"]) .src{opacity:0}
.lp-flow[data-stage="1"] .card .result,
.lp-flow[data-stage="2"] .card .result,.lp-flow[data-stage="2"] .bd.ok,
.lp-flow[data-stage="3"] .card .result,.lp-flow[data-stage="3"] .bd.ok,.lp-flow[data-stage="3"] .bd.iptc{opacity:1;transform:none}
.lp-flow .out{position:absolute;right:53%;top:26px;display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.lp-flow .to{padding:7px 11px;border-radius:999px;font:600 11.5px/1 var(--f-ui);background:var(--surface-2);border:1px solid var(--line-2);opacity:0;transform:translateX(-30px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.lp-flow .to::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;background:var(--c,var(--tc-accent));vertical-align:1px}
.lp-flow .t-spieler{--c:var(--tc-accent)}.lp-flow .t-presse{--c:var(--ok)}.lp-flow .t-sponsor{--c:var(--warn)}.lp-flow .t-liga{--c:var(--info)}
.lp-flow[data-stage="3"] .to{opacity:1;transform:none;transition-delay:calc(.35s + var(--i) * .12s)}
.lp-flow[data-stage="3"] .card{transform:translateX(-50%) scale(.92)}

.lp-steps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.lp-steps li{position:relative;padding:16px 18px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);transition:border-color .3s,background .3s}
.lp-steps .st-btn{display:flex;align-items:baseline;gap:12px;text-align:left;width:100%}
.lp-steps .n{font-size:28px;color:var(--faint);transition:color .3s}
.lp-steps h3{font-size:22px}
.lp-steps p{margin:6px 0 0;color:var(--muted);font-size:14.5px}
.lp-steps .bar{position:absolute;left:18px;right:18px;bottom:0;height:2px;background:transparent;overflow:hidden;border-radius:2px}
.lp-steps .bar i{position:absolute;inset:0;background:var(--tc-primary);transform:scaleX(0);transform-origin:left}
.lp-steps li.on{border-color:var(--tc-line);background:linear-gradient(180deg,var(--tc-soft),var(--surface) 70%)}
.lp-steps li.on .n{color:var(--tc-accent)}
.lp-steps li.on .bar i{animation:lpBar var(--dur,2.8s) linear forwards}
@keyframes lpBar{to{transform:scaleX(1)}}

/* ---------- Produkt-Einblick ---------- */
.lp-tour{display:grid;gap:22px}
.lp-tour .ttabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:2px var(--gut) 6px;scroll-snap-type:x mandatory}
.lp-tour .ttabs::-webkit-scrollbar{display:none}
.lp-tour .ttabs button{position:relative;flex:none;scroll-snap-align:start;text-align:left;padding:10px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);color:var(--muted);transition:background .2s,color .2s,border-color .2s;overflow:hidden}
.lp-tour .ttabs button strong{font-weight:600;font-size:14px;white-space:nowrap}
.lp-tour .ttabs button span{display:none}
.lp-tour .ttabs button[aria-selected="true"]{background:var(--tc-primary);color:var(--tc-on-primary);border-color:transparent}
.lp-tour .ttabs button:hover:not([aria-selected="true"]){color:var(--text);border-color:var(--tc-line)}
.lp-tour .prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:currentColor;opacity:.35;transform:scaleX(0);transform-origin:left}
.lp-tour .ttabs button[aria-selected="true"] .prog{animation:lpBar var(--tour,6.5s) linear forwards}
.lp-tour.paused .prog{animation:none !important;transform:scaleX(0)}
.lp-tour .stage{position:relative;display:grid}
.lp-tour .pane{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px) scale(.99);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .5s;display:grid;justify-items:center}
.lp-tour .pane.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s}
.lp-tour .pane .lp-browser{display:none}
.lp-tour .pane .lp-phone{position:relative;width:250px;max-width:72vw}
.lp-tour .pane .cap{margin:18px 0 0;color:var(--muted);text-align:center;max-width:420px;font-size:15px}

/* ---------- Video ---------- */
.lp-video{padding-top:24px !important}
.lp-poster{position:relative;display:block;width:100%;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line-2);background:#000;text-align:left;box-shadow:var(--shadow)}
.lp-poster img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.7;transition:transform .8s var(--ease),opacity .4s}
.lp-poster:hover img{transform:scale(1.02);opacity:.85}
.lp-poster .ov{position:relative;padding:20px 18px 22px;background:var(--surface);display:flex;flex-direction:column}
.lp-poster .ov .eyebrow{margin-bottom:10px}
.lp-poster .ov strong{font:800 clamp(30px,6vw,52px)/.95 var(--f-display);text-transform:uppercase}
.lp-poster .ov .lead{font-size:15px;margin-top:10px}
.big-play{position:absolute;left:50%;top:0;width:68px;height:68px;margin:calc((100vw - 32px) * 9 / 32 - 34px) 0 0 -34px;border-radius:50%;display:grid;place-items:center;background:var(--tc-primary);color:var(--tc-on-primary);box-shadow:0 0 0 0 color-mix(in srgb,var(--tc-primary) 55%,transparent);animation:lpPulse 2.4s ease-out infinite;transition:transform .25s var(--ease)}
.big-play .ico{width:28px;height:28px;fill:currentColor;stroke:none;margin-left:4px}
.lp-poster:hover .big-play{transform:scale(1.08)}
@keyframes lpPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tc-primary) 55%,transparent)}80%,100%{box-shadow:0 0 0 22px transparent}}
.lp-modal{padding:0;border:0;background:transparent;max-width:min(1200px,94vw);width:100%;overflow:visible}
.lp-modal::backdrop{background:rgba(5,6,8,.86);backdrop-filter:blur(6px)}
.lp-modal video{display:block;width:100%;max-height:86vh;border-radius:14px;background:#000;box-shadow:0 40px 100px -20px #000}
.lp-modal.tall{max-width:min(440px,92vw)}
.lp-modal .x{position:absolute;top:-48px;right:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--text)}
.lp-modal[open]{animation:lpIn .35s var(--ease)}
@keyframes lpIn{from{opacity:0;transform:translateY(16px) scale(.98)}}

/* ---------- Kacheln ---------- */
.lp-tiles{display:grid;gap:12px}
.lp-tile{position:relative;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;transition:border-color .25s,transform .35s var(--ease),background .25s}
.lp-tile::before{content:"";position:absolute;inset:0;background:radial-gradient(300px 160px at var(--mx,50%) var(--my,0%),var(--tc-soft),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.lp-tile:hover{border-color:var(--tc-line);transform:translateY(-3px)}
.lp-tile:hover::before{opacity:1}
.lp-tile .ic{position:relative;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--tc-soft);color:var(--tc-accent);margin-bottom:16px;transition:transform .3s var(--ease)}
.lp-tile:hover .ic{transform:rotate(-6deg) scale(1.06)}
.lp-tile h3{position:relative;font-size:21px;margin-bottom:8px}
.lp-tile p{position:relative;margin:0;color:var(--muted);font-size:14.5px}
.lp-tile .mini{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.lp-tile .mini span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font:600 12px/1 var(--f-ui);background:var(--surface-2);border:1px solid var(--line-2)}
.lp-tile .mini .ico{width:13px;height:13px}
.lp-tile .m-ok{color:var(--ok)}.lp-tile .m-warn{color:var(--warn)}
.lp-tile .m-to::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--tc-accent))}
.lp-tile .m-to.t-presse{--c:var(--ok)}.lp-tile .m-to.t-sponsor{--c:var(--warn)}.lp-tile .m-to.t-liga{--c:var(--info)}

/* ---------- Für wen ---------- */
.lp-roles{display:grid;gap:12px}
.lp-role{position:relative;padding:22px 22px 24px;border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:transform .35s var(--ease),border-color .25s}
.lp-role::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.lp-role:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.lp-role .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);margin-bottom:14px}
.lp-role h3{font-size:26px;margin-bottom:6px}
.lp-role p{margin:0;color:var(--muted);font-size:14.5px}

/* ---------- Pakete ---------- */
.lp-plans-sec{background:linear-gradient(180deg,transparent,rgba(255,255,255,.015) 30%,transparent)}
.lp-toggle{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);margin-top:26px}
.lp-toggle .knob{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--tc-primary);transition:transform .4s var(--ease)}
[data-period="year"] .lp-toggle .knob{transform:translateX(100%)}
.lp-toggle button{position:relative;z-index:1;height:40px;padding:0 18px;border-radius:999px;font-weight:600;font-size:14px;color:var(--muted);white-space:nowrap;transition:color .3s}
.lp-toggle button[aria-pressed="true"]{color:var(--tc-on-primary)}
.lp-toggle small{display:none;font-weight:700;margin-left:6px;font-size:11px;padding:3px 6px;border-radius:6px;background:rgba(61,220,151,.16);color:var(--ok)}
.lp-toggle button[aria-pressed="true"] small{background:rgba(10,26,58,.15);color:inherit}
.lp-plans{display:grid;gap:16px;margin-top:36px}
.lp-plan{position:relative;display:flex;flex-direction:column;padding:28px 22px 22px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-l);transition:transform .35s var(--ease),border-color .25s}
.lp-plan:hover{transform:translateY(-4px);border-color:var(--tc-line)}
.lp-plan.hl{border-color:var(--tc-primary);background:linear-gradient(180deg,var(--tc-soft),var(--surface) 45%);box-shadow:0 0 0 1px var(--tc-primary),0 30px 60px -30px color-mix(in srgb,var(--tc-primary) 40%,transparent)}
.lp-plan .badge{position:absolute;top:-12px;left:22px;background:var(--tc-primary);color:var(--tc-on-primary);font:700 11px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;border-radius:999px}
.lp-plan h3{font-size:32px}
.lp-plan .tagline{color:var(--muted);font-size:14px;margin:6px 0 20px}
.lp-price{display:flex;align-items:baseline;gap:8px}
.lp-price .ab{color:var(--muted);font-size:15px;font-weight:600;align-self:flex-end;margin-bottom:6px}
.lp-price .amount{font-size:68px;line-height:.9;color:var(--text);display:inline-block;min-width:2ch;transition:opacity .2s,transform .3s var(--ease)}
.lp-price .amount.flip{opacity:0;transform:translateY(-12px)}
.lp-price .per{color:var(--muted);font-size:14px;font-weight:600}
.lp-plan .billing{color:var(--faint);font-size:13px;margin:10px 0 0;min-height:20px}
[data-period="year"] .p-month,[data-period="month"] .p-year{display:none}
.lp-plan .pilot{font:700 24px/1.1 var(--f-display);text-transform:uppercase;color:var(--tc-accent);margin:0}
.lp-plan ul{list-style:none;padding:20px 0 0;margin:20px 0 24px;display:grid;gap:11px;font-size:14.5px;border-top:1px solid var(--line)}
.lp-plan li{display:flex;gap:10px;align-items:flex-start}
.lp-plan li .ico{width:18px;height:18px;color:var(--tc-accent);margin-top:1px}
.lp-plan .btn{margin-top:auto}
.lp-extras{margin-top:20px;padding:20px 22px;border:1px dashed var(--line-2);border-radius:var(--r-m);color:var(--muted);font-size:14.5px}
.lp-extras strong{display:block;color:var(--text);font:700 18px/1 var(--f-display);text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}
.lp-extras ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lp-extras li{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.lp-extras .ico{color:var(--tc-accent);margin-top:3px}
.lp-extras li.lp-extra-liga a.link{color:var(--tc-accent);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ---------- FAQ ---------- */
.lp-faq{display:grid;gap:10px}
.lp-faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);transition:border-color .2s}
.lp-faq details[open]{border-color:var(--line-2)}
.lp-faq summary{list-style:none;cursor:pointer;padding:18px 56px 18px 20px;font-weight:600;font-size:16px;position:relative}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"";position:absolute;right:20px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--surface-3) linear-gradient(var(--tc-accent),var(--tc-accent)) center/10px 2px no-repeat;transition:transform .3s var(--ease)}
.lp-faq summary::before{content:"";position:absolute;right:30px;top:50%;width:2px;height:10px;margin-top:-5px;background:var(--tc-accent);z-index:1;transition:transform .3s var(--ease)}
.lp-faq details[open] summary::before{transform:scaleY(0)}
.lp-faq summary:hover{color:var(--tc-accent)}
.lp-faq .a p{margin:0;padding:0 20px 20px;color:var(--muted)}

/* ---------- Formular ---------- */
.lp-demo .box{display:grid;gap:28px;padding:28px 18px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-l);position:relative;overflow:hidden}
.lp-demo .box::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--tc-primary) 60%,var(--tc-secondary))}
.lp-demo .box::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(var(--tc-soft),transparent 70%);pointer-events:none}
.lp-demo form{position:relative;display:grid;gap:2px}
.lp textarea{font:inherit;color:inherit}
.lp-demo .two{display:grid;gap:0 14px}
.lp-demo .fld select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.lp-demo .fld input,.lp-demo .fld select,.lp-demo .fld textarea{background-color:var(--bg)}
/* Newsletter-Checkbox (Max 10.10.2026): eigene Zeile statt Floating-Label-Textfeld. */
.lp-demo .fld.chk{display:flex;flex-direction:row;align-items:flex-start;gap:10px;margin:2px 0 14px}
.lp-demo .fld.chk input{flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:var(--tc-primary)}
.lp-demo .fld.chk span{font-size:13px;line-height:1.5;color:var(--muted);font-weight:500}
.lp-demo .fine{color:var(--faint);font-size:13px;margin:12px 0 0}
.lp-demo .fine a{text-decoration:underline}
.lp-ok{padding:26px 22px;border-radius:var(--r-m);background:rgba(61,220,151,.08);border:1px solid rgba(61,220,151,.35);color:var(--muted)}
.lp-ok .ok-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#06281A;margin-bottom:14px}
.lp-ok strong{display:block;font:700 26px/1.05 var(--f-display);text-transform:uppercase;color:var(--text);margin-bottom:8px}
.lp-err{padding:12px 14px;border-radius:10px;background:rgba(255,59,59,.1);border:1px solid rgba(255,59,59,.35);color:#FF9A9A;margin-bottom:14px;font-size:14px}

/* ---------- Fuß + Handy-Leiste ---------- */
.lp-foot{border-top:1px solid var(--line);padding:36px 0 96px}
.lp-foot .row{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between}
.lp-foot .lp-brand{margin-right:0}
.lp-foot p{margin:0;color:var(--muted);font-size:14px}
.lp-foot a.reg{display:inline-flex;align-items:center;gap:6px;color:var(--tc-accent);font-size:14px;font-weight:600}
.lp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:1fr 2fr;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(12,13,16,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line-2);transform:translateY(110%);transition:transform .35s var(--ease)}
.lp-sticky .btn{height:46px}
.lp-sticky.show{transform:none}

/* ---------- ab Tablet ---------- */
@media (min-width:640px){
  .lp{--gut:28px}
  .lp-top .lp-login{display:inline-flex}
  .lp-cta .btn{flex:0 0 auto}
  .lp-toggle small{display:inline}
  .lp-stats .grid4{grid-template-columns:repeat(4,1fr)}
  .lp-tiles,.lp-roles{grid-template-columns:repeat(2,1fr)}
  .lp-demo .two{grid-template-columns:1fr 1fr}
  .lp-demo .box{padding:36px}
  .lp-poster .ov{position:absolute;left:0;right:0;bottom:0;padding:36px;background:linear-gradient(0deg,rgba(12,13,16,.95),transparent)}
  .big-play{top:40%;width:92px;height:92px;margin:-46px 0 0 -46px}
  .lp-flow{height:470px}
  .lp-flow .card{--cw:40%;--inset:4%;top:28px;width:min(360px,var(--cw))}
  .lp-flow .out{right:32%}
}
/* ---------- Desktop ---------- */
@media (min-width:960px){
  .lp section{padding:112px 0}
  .lp-nav{display:flex}
  .lp-sticky{display:none}
  .lp-foot{padding-bottom:28px}
  .lp-hero{padding:64px 0 88px !important}
  .lp-hero .grid2{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;gap:48px}
  .lp-hero h1{font-size:clamp(56px,5vw,76px)}
  .lp-hero-visual{padding:0 0 40px 0}
  .lp-hero-visual .lp-phone{right:-18px;bottom:-10px;width:30%}
  .lp-chip.c2{left:-28px}
  .lp-flow{height:510px}
  .lp-flow .card{--cw:40%;--inset:3%;top:32px;width:min(420px,var(--cw))}
  .lp-flow .bd{font-size:12.5px;padding:7px 11px}
  .lp-flow .out{right:31%;top:40px;gap:9px}
  .lp-flow .to{font-size:13px;padding:9px 14px}
  .lp-steps{grid-template-columns:repeat(4,1fr)}
  .lp-steps li{padding:20px 20px 22px}
  .lp-steps .st-btn{flex-direction:column;gap:6px}
  .lp-tour{grid-template-columns:300px 1fr;gap:40px;align-items:start}
  .lp-tour .ttabs{flex-direction:column;overflow:visible;margin:0;padding:0;gap:6px}
  .lp-tour .ttabs button{border-radius:var(--r-m);padding:14px 16px 16px;background:transparent;border-color:transparent}
  .lp-tour .ttabs button strong{display:block;font:700 20px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;color:var(--text)}
  .lp-tour .ttabs button span{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--ease),opacity .3s}
  .lp-tour .ttabs button[aria-selected="true"]{background:var(--surface);border-color:var(--line-2);color:var(--muted)}
  .lp-tour .ttabs button[aria-selected="true"] strong{color:var(--tc-accent)}
  .lp-tour .ttabs button[aria-selected="true"] span{max-height:120px;opacity:1}
  .lp-tour .ttabs button:hover:not([aria-selected="true"]){background:var(--surface);border-color:transparent}
  .lp-tour .prog{background:var(--tc-primary);opacity:1;height:2px}
  .lp-tour .pane{justify-items:stretch;padding:0 0 40px 0}
  .lp-tour .pane .lp-browser{display:block}
  .lp-tour .pane .lp-phone{position:absolute;right:-16px;bottom:0;width:24%;max-width:200px}
  .lp-tour .pane .cap{display:none}
  .lp-tiles{grid-template-columns:repeat(4,1fr)}
  .lp-feat .t-recog,.lp-feat .t-distribution{grid-column:span 2}
  .lp-roles{grid-template-columns:repeat(5,1fr)}
  .lp-plans{grid-template-columns:repeat(3,1fr);align-items:stretch}
  .lp-plan{padding:32px 28px 26px}
  .lp-plan.hl{transform:translateY(-10px)}
  .lp-plan.hl:hover{transform:translateY(-14px)}
  .lp-extras ul{grid-template-columns:repeat(3,1fr);gap:20px}
  .lp-faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
  .lp-faq-wrap .sec-head{position:sticky;top:100px}
  .lp-demo .box{grid-template-columns:.9fr 1.1fr;padding:56px;gap:56px}
}
@media (prefers-reduced-motion:reduce){
  .js .lp [data-reveal]{opacity:1;transform:none;transition:none}
  .js .lp-hero-visual .lp-chip{opacity:1;transform:none}
  .lp *,.lp *::before,.lp *::after{animation:none !important;transition-duration:.01ms !important}
}
html:has(.lp){scroll-behavior:smooth;scroll-padding-top:60px}
@media (prefers-reduced-motion:reduce){html:has(.lp){scroll-behavior:auto}}