/* Startseite: Werkbank-Look. Papier und Tinte, ein Akzent, Code als Hauptdarsteller. Farben kommen aus den Theme-Variablen (hell, dunkel, auto). */
main.wide{max-width:none;padding:0}
.lp-wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#e5534b;margin-right:7px;vertical-align:1px}
.dot.on{background:#3fb950;box-shadow:0 0 0 0 rgba(63,185,80,.6);animation:lppulse 2.2s infinite}
@keyframes lppulse{70%{box-shadow:0 0 0 9px rgba(63,185,80,0)}100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}}
.lp-mono,.lp-eyebrow,.lp-meta,.lp-idx,.tag,.lp-steps b,.code,.tm-body{font-family:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace}

/* Hero */
.lp-hero{padding:64px 0 72px;background-image:radial-gradient(color-mix(in srgb,var(--fg) 14%,transparent) 1px,transparent 1.2px);background-size:22px 22px;background-position:0 0;border-bottom:1px solid var(--bd)}
@supports not (background:color-mix(in srgb,red,blue)){.lp-hero{background-image:none}}
.lp-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.lp-eyebrow{margin:0 0 20px;font-size:13px;color:var(--mut);letter-spacing:.02em}
.lp-eyebrow span{opacity:.8}
.lp-hero h1{font-size:clamp(42px,6.4vw,80px);line-height:.98;letter-spacing:-.04em;font-weight:800;margin:0 0 22px;color:var(--fg)}
.lp-hero h1::after{display:none!important}
.lp-hero h1 mark{background:none;color:inherit;background-image:linear-gradient(transparent 60%,color-mix(in srgb,var(--g1) 38%,transparent) 60%);padding:0 .08em;margin:0 -.08em;border-radius:3px}
@supports not (background:color-mix(in srgb,red,blue)){.lp-hero h1 mark{background-image:linear-gradient(transparent 60%,rgba(124,58,237,.3) 60%)}}
.lp-lead{font-size:19px;line-height:1.6;color:var(--mut);max-width:520px;margin:0 0 28px}
.lp-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.lp-btn{display:inline-block;padding:14px 24px;border-radius:10px;font-weight:700;font-size:16px;color:var(--bg);background:var(--fg);border:2px solid var(--fg);transition:transform .12s,box-shadow .12s}
.lp-btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--g1);text-decoration:none;color:var(--bg)}
.lp-link{font-weight:600;color:var(--fg);text-decoration:underline;text-decoration-color:var(--g1);text-decoration-thickness:2px;text-underline-offset:5px}
.lp-meta{margin:30px 0 0;font-size:12.5px;color:var(--mut);line-height:1.7}
.lp-meta span{color:var(--fg);font-weight:700}

/* Terminal */
.lp-term-wrap{position:relative}
.lp-term{background:#0b0f17;color:#d6deeb;border-radius:14px;border:1px solid #232b3a;box-shadow:10px 10px 0 color-mix(in srgb,var(--fg) 14%,transparent);overflow:hidden}
@supports not (background:color-mix(in srgb,red,blue)){.lp-term{box-shadow:10px 10px 0 rgba(120,120,140,.25)}}
.tm-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid #1c2331;background:#0f1520}
.tm-bar i{width:10px;height:10px;border-radius:50%;background:#2b3547}
.tm-bar span{margin-left:8px;font:12px ui-monospace,Consolas,monospace;color:#6b778c}
.tm-body{margin:0;padding:18px 18px 22px;font-size:13.5px;line-height:1.75;overflow-x:auto;white-space:normal;background:none;border:0;color:inherit}
.tm-body .p{color:#7ee787}.tm-body s{text-decoration:none;color:#a5d6ff}.tm-body em{font-style:normal;color:#8b949e}
.tt-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--fg);color:var(--bg);font:700 10px ui-monospace,Consolas,monospace}

/* Abschnitte */
.lp-sec{padding:84px 0}
.lp-tint{background:color-mix(in srgb,var(--fg) 4%,var(--bg));border-block:1px solid var(--bd)}
@supports not (background:color-mix(in srgb,red,blue)){.lp-tint{background:var(--card)}}
.lp-idx{margin:0 0 10px;font-size:12.5px;color:var(--g1);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.lp-sec h2{font-size:clamp(28px,4vw,44px);line-height:1.08;letter-spacing:-.03em;margin:0 0 34px;max-width:760px;text-align:left}
.lp-sec h2::after{display:none!important}
.lp-rows{display:grid;gap:0;border-top:1px solid var(--bd)}
.row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start;padding:34px 0;border-bottom:1px solid var(--bd)}
.row h3{margin:12px 0 8px;font-size:22px;letter-spacing:-.02em}
.row p{margin:0 0 12px;color:var(--mut);max-width:440px}
.row a{font-weight:600}
.tag{display:inline-block;padding:3px 9px;border:1.5px solid var(--fg);border-radius:6px;font-size:11.5px;font-weight:800;letter-spacing:.06em}
.code{margin:0;padding:18px 20px;border-radius:12px;background:#0b0f17;color:#d6deeb;border:1px solid #232b3a;font-size:13px;line-height:1.7;overflow-x:auto;white-space:pre}
.code s{text-decoration:none;color:#a5d6ff}.code .c{color:#8b949e}

.lp-two{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.lp-two h3{font-size:20px;margin:0 0 14px;letter-spacing:-.01em}
.lp-two h3.yes::before{content:'+ ';color:#2da44e;font-family:ui-monospace,Consolas,monospace}
.lp-two h3.no::before{content:'– ';color:#cf3b3b;font-family:ui-monospace,Consolas,monospace}
.lp-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.lp-list li{position:relative;padding-left:26px;color:var(--mut);line-height:1.55}
.lp-list li::before{position:absolute;left:0;top:0;font:700 15px ui-monospace,Consolas,monospace}
.lp-list.yes li::before{content:'✓';color:#2da44e}.lp-list.no li::before{content:'×';color:#cf3b3b}
.lp-limits{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:44px;border:1.5px solid var(--fg);border-radius:12px;overflow:hidden;background:var(--card)}
.lp-limits div{padding:20px 22px;display:grid;gap:6px}.lp-limits div+div{border-left:1.5px solid var(--fg)}
.lp-limits b{font-size:16px}.lp-limits span{color:var(--mut);font-size:14.5px;line-height:1.55}

.lp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1.5px solid var(--fg)}
.lp-steps li{padding:22px 22px 8px 0;position:relative}
.lp-steps li+li{padding-left:22px;border-left:1px solid var(--bd)}
.lp-steps b{display:block;font-size:13px;color:var(--g1);margin-bottom:12px}
.lp-steps h3{margin:0 0 6px;font-size:18px;letter-spacing:-.01em}.lp-steps p{margin:0;color:var(--mut);font-size:14.5px}

.lp-who{display:grid;grid-template-columns:1.3fr .7fr;gap:56px;align-items:start}
.lp-who p{color:var(--mut);max-width:620px;line-height:1.65}
.lp-last{display:grid;gap:6px;padding:22px;border:1.5px solid var(--fg);border-radius:12px;background:var(--card);box-shadow:6px 6px 0 color-mix(in srgb,var(--fg) 14%,transparent)}
.lp-last b{font-size:22px;letter-spacing:-.02em}.lp-last span{color:var(--mut);font-size:14px}.lp-last a{font-weight:600;margin-top:4px}

.lp-faq{max-width:820px}
.lp-faq details{border-top:1px solid var(--bd);padding:18px 0}
.lp-faq details:last-of-type{border-bottom:1px solid var(--bd)}
.lp-faq summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:'+';font:400 22px/1 ui-monospace,Consolas,monospace;color:var(--g1)}
.lp-faq details[open] summary::after{content:'–'}
.lp-faq p{color:var(--mut);margin:12px 0 0;max-width:680px;line-height:1.65}
.lp-more{margin-top:22px}

.lp-final{padding:84px 0;background:var(--card);color:var(--fg);border-top:1px solid var(--bd)}
.lp-final h2{font-size:clamp(28px,4.4vw,48px);letter-spacing:-.03em;line-height:1.05;margin:0 0 28px;max-width:720px;text-align:left}
.lp-final h2::after{display:none!important}
.lp-final p{margin:30px 0 0;font-size:14px;color:var(--mut)}.lp-final p a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

@media(max-width:900px){
  .lp-hero{padding:40px 0 52px}.lp-hero-grid,.lp-who,.lp-two,.row{grid-template-columns:1fr;gap:28px}
  .lp-sec{padding:60px 0}.row{padding:28px 0}
  .lp-steps{grid-template-columns:1fr 1fr}.lp-steps li:nth-child(3){padding-left:0;border-left:0}.lp-steps li{padding-bottom:18px}
  .lp-limits{grid-template-columns:1fr}.lp-limits div+div{border-left:0;border-top:1.5px solid var(--fg)}
}
@media(max-width:520px){.lp-steps{grid-template-columns:1fr}.lp-steps li+li{padding-left:0;border-left:0;border-top:1px solid var(--bd)}.tm-body{font-size:12px}}
.lp-hero-grid>*,.row>*,.lp-who>*,.lp-two>*{min-width:0}
.lp-term{max-width:100%}

.lp-kicker{display:block;margin:0 0 16px;font:700 13px/1.3 ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--g1)}
/* Wege zur SMS: Text und Beispiel wechseln die Seite (nur Desktop) */
@media(min-width:901px){.lp-rows .row:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.lp-rows .row:nth-child(even)>div{order:2}.lp-rows .row:nth-child(even)>pre{order:1}}

/* Weg der SMS: Server → Gateway → Handy, läuft nach dem Tippen einmal durch */
.lp-flow{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:6px;margin-top:26px}
.fl-node{display:grid;justify-items:center;gap:6px;color:var(--fg)}
.fl-node i{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:var(--card);border:1px solid var(--bd);box-shadow:4px 4px 0 color-mix(in srgb,var(--fg) 12%,transparent)}
.fl-node small{font:11.5px ui-monospace,Consolas,monospace;color:var(--mut)}
.fl-link{position:relative;height:2px;border-top:2px dashed color-mix(in srgb,var(--fg) 28%,transparent);margin-bottom:20px}
.fl-pk{position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--g1);box-shadow:0 0 14px 3px color-mix(in srgb,var(--g1) 60%,transparent);opacity:0}


/* Hero-Bühne: Terminal -> Warteschlange (3 s) -> Handy, ein Durchlauf (20 s) läuft einmal und endet auf dem Handy */
.lp-stage{display:grid;align-items:center;justify-items:center;min-height:300px}
.sc{grid-area:1/1;width:100%}
.sc-queue,.sc-phone{opacity:0}
.sc-term{animation:scT 20s linear both}
.sc-queue{animation:scQ 20s linear both}
.sc-phone{animation:scP 20s linear both;display:grid;justify-items:center;gap:14px;width:auto}
@keyframes scT{0%{opacity:0;transform:translateY(12px) scale(.97)}2%,37%{opacity:1;transform:none}39%,100%{opacity:0;transform:translateY(-10px) scale(.97)}}
@keyframes scQ{0%,36%{opacity:0;transform:translateY(12px) scale(.97)}38%,59.5%{opacity:1;transform:none}61.5%,100%{opacity:0;transform:translateY(-10px) scale(.97)}}
@keyframes scP{0%,64%{opacity:0;transform:translateY(14px) scale(.96)}66%,100%{opacity:1;transform:none}}
.tm-line{display:block;overflow:hidden;width:0;white-space:pre}
.tm-line.l1{animation:tp1 20s linear both}.tm-line.l2{animation:tp2 20s linear both}.tm-line.l3{animation:tp3 20s linear both}
@keyframes tp1{0%,3%{width:0;animation-timing-function:steps(37)}10%,39%{width:calc(var(--n) * 1ch + 1ch)}40%,100%{width:0}}
@keyframes tp2{0%,11%{width:0;animation-timing-function:steps(39)}18%,39%{width:calc(var(--n) * 1ch + 1ch)}40%,100%{width:0}}
@keyframes tp3{0%,19%{width:0;animation-timing-function:steps(50)}27%,39%{width:calc(var(--n) * 1ch + 1ch)}40%,100%{width:0}}
.tm-out{display:block;white-space:pre;opacity:0;animation:tpo 20s linear both;margin-top:6px}
@keyframes tpo{0%,28.5%{opacity:0}30%,39%{opacity:1}40%,100%{opacity:0}}
/* Warteschlange */
.q-body{padding:16px 16px 18px;font:13px/1.5 ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;color:#d6deeb;display:grid;gap:9px}
.q-head{display:flex;justify-content:space-between;gap:10px;color:#8b949e;font-size:12px;padding-bottom:9px;border-bottom:1px solid #1c2331}
.q-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:8px 10px;border-radius:9px;background:#111826}
.q-row b{color:#6b778c;font-weight:600}.q-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-old{opacity:.5}.q-old .q-st{color:#3fb950;font-size:12px}
.q-new{border:1px solid #2b3a5a;animation:qnew 20s linear both}
.q-st,.q-time{position:relative;display:inline-grid;text-align:right}
.q-st{min-width:98px}.q-time{min-width:3ch;color:#d6deeb;font-weight:700}
.q-st em,.q-time em{grid-area:1/1;font-style:normal;opacity:0;white-space:nowrap}
.q-new .s1{color:#fbbf24;animation:qs1 20s linear both}.q-new .s2{color:#6ea0ff;animation:qs2 20s linear both}.q-new .s3{color:#3fb950;font-weight:700;animation:qs3 20s linear both}
.q-old .s3o{opacity:1}
.q-time .t0{animation:qt0 20s linear both}.q-time .t1{animation:qt1 20s linear both}.q-time .t2{animation:qt2 20s linear both}.q-time .t3{animation:qt3 20s linear both;color:#3fb950}
.q-prog{height:3px;border-radius:3px;background:#1c2331;overflow:hidden;margin:-3px 4px 2px}
.q-prog span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g1),var(--g2));animation:qprog 20s linear both}
@keyframes qnew{0%,37%{opacity:0;transform:translateX(-14px)}39.5%,100%{opacity:1;transform:none}}
@keyframes qs1{0%,38%{opacity:0}39%,41.5%{opacity:1}42.5%,100%{opacity:0}}
@keyframes qs2{0%,41.5%{opacity:0}42.5%,52.5%{opacity:1}53.5%,100%{opacity:0}}
@keyframes qs3{0%,52.5%{opacity:0}53.5%,60%{opacity:1}61.5%,100%{opacity:0}}
@keyframes qt0{0%,37.5%{opacity:0}38%,42.5%{opacity:1}43%,100%{opacity:0}}
@keyframes qt1{0%,42.5%{opacity:0}43%,47.5%{opacity:1}48%,100%{opacity:0}}
@keyframes qt2{0%,47.5%{opacity:0}48%,52.5%{opacity:1}53%,100%{opacity:0}}
@keyframes qt3{0%,52.5%{opacity:0}53%,60.5%{opacity:1}61.5%,100%{opacity:0}}
@keyframes qprog{0%,38%{width:0}53%,100%{width:100%}}
/* Handy */
.ph-body{position:relative;width:196px;height:268px;border-radius:32px;padding:9px;background:#0b0f17;border:2px solid #2b3547;box-shadow:10px 10px 0 color-mix(in srgb,var(--fg) 14%,transparent);animation:phvib 20s linear both}
.ph-notch{position:absolute;top:14px;left:50%;width:56px;height:14px;margin-left:-28px;border-radius:9px;background:#000;z-index:2}
.ph-screen{height:100%;border-radius:24px;padding:46px 12px 12px;background:linear-gradient(160deg,#2a1b5e,#0e1730 60%,#0b2a3a);color:#fff;text-align:center;overflow:hidden}
.ph-time{font:300 44px/1 system-ui,sans-serif;letter-spacing:-.02em}
.ph-date{margin-top:6px;font-size:12px;opacity:.7}
.ph-ntf{margin-top:34px;display:flex;gap:9px;align-items:center;text-align:left;padding:10px;border-radius:15px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);font-size:12px;line-height:1.35;animation:phntf 20s linear both}
.ph-ntf .tt-ic{flex:0 0 30px;width:30px;height:30px;font-size:9px;background:#fff;color:#111}
.ph-ntf small{opacity:.65;margin-left:4px}
.ph-ok{display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,#3fb950 16%,var(--card));border:1px solid color-mix(in srgb,#3fb950 55%,transparent);color:var(--fg);font-size:13.5px;font-weight:600;opacity:0;animation:phok 20s linear both}
.ph-ok i{color:#3fb950}
@keyframes phntf{0%,65.5%{opacity:0;transform:translateY(-18px) scale(.94)}66.75%{opacity:1;transform:translateY(3px)}67.5%,100%{opacity:1;transform:none}}
@keyframes phvib{0%,66%{transform:none}66.5%{transform:translateX(-4px) rotate(-1.5deg)}67.25%{transform:translateX(4px) rotate(1.5deg)}68%{transform:translateX(-3px)}68.75%{transform:translateX(2px)}70%,100%{transform:none}}
@keyframes phok{0%,69.5%{opacity:0;transform:translateY(8px)}72%,100%{opacity:1;transform:none}}
/* Wegstrecke synchron zum Ablauf */
.fl-pk1{animation:pk1 20s linear both}.fl-pk2{animation:pk2 20s linear both}
@keyframes pk1{0%,27.5%{opacity:0;left:0}28%{opacity:1;left:0}35%{opacity:1;left:calc(100% - 12px)}35.5%,100%{opacity:0;left:calc(100% - 12px)}}
@keyframes pk2{0%,59.5%{opacity:0;left:0}60%{opacity:1;left:0}65%{opacity:1;left:calc(100% - 12px)}65.5%,100%{opacity:0;left:calc(100% - 12px)}}
.fl-src i{animation:flsrc 20s linear both}.fl-gw i{animation:flgw 20s linear both}.fl-ph i{animation:flph 20s linear both}
@keyframes flsrc{0%,2%,38%,100%{border-color:var(--bd)}4%,35%{border-color:var(--g1)}}
@keyframes flgw{0%,35%,62.5%,100%{border-color:var(--bd);box-shadow:4px 4px 0 color-mix(in srgb,var(--fg) 12%,transparent)}37%,60%{border-color:var(--g1);box-shadow:0 0 0 5px color-mix(in srgb,var(--g1) 22%,transparent),4px 4px 0 color-mix(in srgb,var(--fg) 12%,transparent)}}
@keyframes flph{0%,64%{border-color:var(--bd);transform:none}65.5%{border-color:var(--g1);transform:rotate(-9deg)}66.5%{transform:rotate(8deg)}67.5%{transform:rotate(-5deg)}68.5%,100%{border-color:var(--g1);transform:none}}
@media(max-width:520px){.ph-body{width:176px;height:246px}.ph-time{font-size:38px}.q-body{font-size:12px}.q-st{min-width:86px}}
/* Handy: realistische Proportionen (ca. 1:2,1), Statusleiste, Dynamic Island, Tasten */
.lp-stage{min-height:350px}
.ph-body{width:164px;height:344px;border-radius:36px;padding:7px;border:2px solid #343f55;background:#05070b}
.ph-btn{position:absolute;width:3px;border-radius:2px;background:#343f55}
.ph-btn.b1{left:-5px;top:78px;height:22px}.ph-btn.b2{left:-5px;top:112px;height:40px}.ph-btn.b3{right:-5px;top:100px;height:56px}
.ph-notch{top:14px;width:46px;height:13px;margin-left:-23px;background:#000}
.ph-screen{position:relative;border-radius:29px;padding:0 10px;display:flex;flex-direction:column;align-items:stretch;background:linear-gradient(165deg,#3b2377,#13204a 55%,#0b3a4d)}
.ph-sb{display:flex;justify-content:space-between;align-items:center;padding:13px 8px 0;font-size:10px;font-weight:600;opacity:.9}
.ph-sb span:last-child{display:flex;gap:4px;font-size:9px}
.ph-lock{margin-top:34px;font-size:11px;opacity:.75}
.ph-time{font:300 52px/1 system-ui,sans-serif;margin-top:4px}
.ph-date{margin-top:5px;font-size:11px}
.ph-ntf{margin-top:24px;padding:9px;font-size:11px;border-radius:14px}
.ph-quick{margin-top:auto;display:flex;justify-content:space-between;padding:0 6px 14px}
.ph-quick i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:13px}
.ph-home{position:absolute;bottom:6px;left:50%;width:70px;height:4px;margin-left:-35px;border-radius:3px;background:rgba(255,255,255,.7)}
@media(max-width:520px){.lp-stage{min-height:330px}.ph-body{width:152px;height:320px}.ph-time{font-size:46px}.ph-lock{margin-top:28px}}
/* Stationen anklickbar: springen zur jeweiligen Szene */
button.fl-node{background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;box-shadow:none;border-radius:14px}
button.fl-node:hover i{border-color:var(--g1);transform:translateY(-2px)}
button.fl-node:focus-visible{outline:2px solid var(--g1);outline-offset:4px}
button.fl-node small{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
button.fl-node:hover small{text-decoration-color:var(--g1)}
/* Bewegung reduziert: nur das Terminal als Standbild */
@media(prefers-reduced-motion:reduce){.tm-line{width:auto}.tm-out{opacity:1}.sc-term{opacity:1}.fl-pk{display:none}.dot.on{animation:none}
  .q-new .s3,.q-time .t3,.ph-ok{opacity:1}.q-prog span{width:100%}
  .lp-stage[data-scene=queue] .sc-term,.lp-stage[data-scene=phone] .sc-term{opacity:0}
  .lp-stage[data-scene=queue] .sc-queue,.lp-stage[data-scene=phone] .sc-phone{opacity:1}
  .fl-node i{transition:none}}