/* VikiDesk, dritte Fassung. Dunkle, ruhige Bühne; Viki begrüßt und führt. Violett für zuhause, Türkis für IT-Dienstleister. */
:root{
  --void:#05060d;--deep:#0c1020;--paper:#f3f0ff;--dim:#a3abc6;
  --home:#9a78ff;--pro:#5fe8d8;--flare:#f9be7b;--world:#b8b0ff;
  --display:'Bahnschrift','DIN Alternate','Arial Narrow',sans-serif;
  --text:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
  --bar:0px;--gutter:clamp(22px,6vw,96px);--page:1180px;
  --side:max(var(--gutter),calc((100vw - var(--page)) / 2));
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;background:var(--void)}
body{font-family:var(--text);color:var(--paper);background:var(--void);line-height:1.6;overflow-x:clip}
body[data-world="home"]{--world:var(--home)}
body[data-world="pro"]{--world:var(--pro)}
a{color:inherit}
img,video{display:block;max-width:100%;height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip{position:fixed;left:16px;top:-80px;z-index:90;padding:12px 18px;border-radius:999px;background:var(--paper);color:#10101c}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--flare);outline-offset:4px;border-radius:6px}

/* Hintergrund: ruhiges, stehendes Licht. Die Farbe wechselt weich mit dem Bereich, sonst bewegt sich nichts. */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 50% -8%,#1b1f4a 0%,transparent 70%),var(--void)}
.backdrop i{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.glow-home{background:radial-gradient(ellipse 60% 50% at 12% 18%,#6a45e066 0%,transparent 70%),radial-gradient(ellipse 55% 45% at 92% 88%,#c44cf033 0%,transparent 70%)}
.glow-pro{background:radial-gradient(ellipse 60% 50% at 88% 16%,#1fb7a655 0%,transparent 70%),radial-gradient(ellipse 55% 45% at 8% 90%,#2f7bff33 0%,transparent 70%)}
body[data-world="home"] .glow-home,body[data-world="pro"] .glow-pro{opacity:1}
body[data-world="both"] .glow-home,body[data-world="both"] .glow-pro{opacity:.55}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:70;pointer-events:none}
#flare{position:fixed;left:0;top:0;z-index:68;width:120vw;height:3px;margin-left:-60vw;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(140,190,255,.95) 50%,transparent);filter:blur(1.2px);box-shadow:0 0 34px 6px rgba(120,170,255,.45)}
#flare.fire{animation:flare 1.1s cubic-bezier(.2,.7,.2,1)}
@keyframes flare{0%{opacity:0;transform:translate(var(--fx,50vw),var(--fy,50vh)) scaleX(.05)}18%{opacity:1;transform:translate(var(--fx,50vw),var(--fy,50vh)) scaleX(1)}100%{opacity:0;transform:translate(var(--fx,50vw),var(--fy,50vh)) scaleX(1.25)}}

/* Schriftzug in den Farben des Logos */
.wordmark{display:inline-flex;align-items:baseline;font-family:var(--text);letter-spacing:-.045em;line-height:1.1}
.wm-viki{font-weight:800;color:#fff}
.wm-desk{font-weight:500;background:linear-gradient(115deg,#00b5ff 0%,#2f7bff 30%,#8a52ff 60%,#c44cf0 78%,#ff57aa 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Kopfzeile */
.top{position:fixed;left:0;right:0;top:var(--bar);z-index:66;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--side);background:linear-gradient(#05060de6,transparent)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:27px}
.brand img{width:40px;height:40px}
.top nav{display:flex;gap:clamp(12px,2.4vw,34px)}
.top nav a{text-decoration:none;font-size:15px;color:var(--dim);padding:6px 2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.top nav a:hover{color:var(--paper);border-color:var(--world)}

/* Viki: Ring und Sprechtafel folgen der aktuellen Station */
.viki{position:fixed;left:0;top:0;z-index:64;display:flex;align-items:center;gap:18px;pointer-events:none;will-change:transform}
.viki-ring{width:92px;height:92px;flex:none;filter:drop-shadow(0 0 26px rgba(135,112,243,.75));will-change:transform,opacity}
.viki-say{width:min(340px,62vw);padding:14px 18px 15px;border-radius:4px 18px 18px 18px;background:#0d1124eb;border:1px solid #ffffff26;box-shadow:0 18px 60px #000a;transition:opacity .28s,transform .28s}
.viki-say strong{display:block;font:600 13px/1 var(--display);letter-spacing:.14em;color:var(--world);transition:color 1s}
.viki-say p{margin-top:7px;font-size:16px;line-height:1.45;min-height:2.9em}
#viki-typed:after{content:'';display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.18em;background:var(--flare);animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.viki.is-flying .viki-say{opacity:0;transform:translateY(10px)}
.viki.say-left{flex-direction:row-reverse}
.viki.say-left .viki-say{border-radius:18px 4px 18px 18px}
.viki.say-below{flex-direction:column;align-items:center;text-align:center}
.viki.say-below .viki-say{border-radius:18px}
.viki.is-landed .viki-ring{animation:land .9s cubic-bezier(.2,.8,.2,1)}
@keyframes land{0%{filter:drop-shadow(0 0 0 rgba(255,255,255,0)) brightness(2.2)}45%{filter:drop-shadow(0 0 60px rgba(160,200,255,.95)) brightness(1.4)}100%{filter:drop-shadow(0 0 26px rgba(135,112,243,.75)) brightness(1)}}

/* Szenen: alles sitzt mittig in einer Spalte mit Rand links und rechts */
main{position:relative;z-index:2}
.scene{position:relative;min-height:100vh;padding:calc(var(--bar) + 130px) var(--side) calc(var(--bar) + 120px)}
.viki-slot{width:450px;max-width:100%;height:104px}
.slot-center{margin-inline:auto;width:100%;height:226px}
.slot-left{margin-bottom:28px}
h1,h2{font-family:var(--display);font-weight:600;font-stretch:84%;line-height:1;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(34px,4.5vw,66px);max-width:19ch}
h3{font-family:var(--display);font-weight:600}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block;opacity:0;filter:blur(16px);transform:translateY(.35em) scale(1.25)}
.is-in .c{animation:focus .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 15ms)}
@keyframes focus{to{opacity:1;filter:blur(0);transform:none}}
.world-tag{display:inline-block;font:600 15px/1 var(--display);letter-spacing:.1em;color:var(--void);background:var(--world);padding:9px 14px 8px;border-radius:3px;margin-bottom:22px;transition:background 1s}
.lead{margin-top:22px;font-size:clamp(17px,1.35vw,20px);color:#d3d8ec;max-width:58ch}
.fine{margin-top:18px;font-size:13px;color:var(--dim)}
.cta{display:inline-block;margin-top:32px;padding:16px 28px;border-radius:999px;background:var(--world);color:#07070f;font-weight:650;font-size:16px;text-decoration:none;transition:transform .18s,box-shadow .18s,background 1s}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 44px color-mix(in srgb,var(--world) 55%,transparent)}
.cta.ghost{background:transparent;color:var(--paper);border:1px solid #ffffff40}
.cta.ghost:hover{border-color:var(--world)}
.rise>*{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.is-in .rise>*,.is-in.rise>*{opacity:1;transform:none}
.rise>:nth-child(3){transition-delay:.15s}.rise>:nth-child(4){transition-delay:.3s}.rise>:nth-child(5){transition-delay:.45s}
.rise>h2,.rise>.viki-slot{opacity:1;transform:none}

/* Start: Viki begrüßt und zeigt nacheinander auf die drei Einstiege */
.intro{display:flex;flex-direction:column;justify-content:center;text-align:center;padding-top:118px;padding-bottom:70px}
.intro h1{font-size:clamp(44px,7.2vw,112px);max-width:none;color:#fff;text-shadow:0 0 70px rgba(120,150,255,.45)}
.intro-line{margin:24px auto 0;font-size:clamp(16px,1.4vw,20px);color:#d3d8ec;max-width:64ch}
.lane{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;height:124px;margin-top:30px}
.lane .viki-slot{width:auto;height:104px;align-self:end}
.lane .slot-mid{position:absolute;inset:0 0 auto 0;width:100%}
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px;text-align:left}
.door{position:relative;display:flex;flex-direction:column;gap:8px;padding:26px 26px 24px;border-radius:22px;text-decoration:none;background:#0d1124e6;border:1px solid #ffffff26;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s,background .35s}
.door-for{align-self:flex-start;font:600 13px/1 var(--display);letter-spacing:.1em;padding:7px 11px 6px;border-radius:3px;color:#07070f}
.door b{margin-top:8px;font:600 clamp(24px,2.3vw,32px)/1.1 var(--display);font-stretch:84%;color:#fff}
.door span:not(.door-for){font-size:15.5px;color:#d3d8ec;flex:1}
.door i{margin-top:10px;font-style:normal;font-weight:650;font-size:15px}
.door-home .door-for{background:var(--home)}.door-home i{color:#c9b8ff}
.door-pro .door-for{background:var(--pro)}.door-pro i{color:var(--pro)}
.door-soft .door-for{background:var(--flare)}.door-soft i{color:var(--flare)}
.door:hover,.door.is-pointed{transform:translateY(-8px)}
.door-home:hover,.door-home.is-pointed{border-color:var(--home);background:linear-gradient(160deg,#2a1c66,#120d2e);box-shadow:0 30px 90px #6a45e066}
.door-pro:hover,.door-pro.is-pointed{border-color:var(--pro);background:linear-gradient(160deg,#0f4a52,#0b1426);box-shadow:0 30px 90px #1bbfae4d}
.door-soft:hover,.door-soft.is-pointed{border-color:var(--flare);background:linear-gradient(160deg,#4a3418,#16110c);box-shadow:0 30px 90px #f9be7b40}
.scroll-cue{margin-top:34px;font:500 14px/1 var(--display);letter-spacing:.14em;color:var(--dim);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(7px)}}
/* Zwei Spalten mit Bildtafel */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.split.flip .copy{order:2}
.stagecraft{display:flex;flex-direction:column;gap:34px}
.plate{perspective:1400px}
.plate img{width:100%;border-radius:14px;border:1px solid #ffffff2e;box-shadow:0 50px 110px #000c,0 0 90px color-mix(in srgb,var(--world) 30%,transparent);
  transform:rotateX(calc((.5 - var(--p,.5)) * 16deg)) rotateY(calc((var(--p,.5) - .5) * -9deg)) translateY(calc((.5 - var(--p,.5)) * 60px));transform-origin:50% 60%}
.plate figcaption{margin-top:16px;font-size:13px;color:var(--dim)}

/* Festgehaltene Szenen: der Inhalt läuft mit dem Scrollen ab */
.pin{min-height:360vh;padding-block:0}
.pin-stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center;padding-block:calc(var(--bar) + 84px) calc(var(--bar) + 56px)}
.pin-copy h2{margin-top:26px}
.ask-nav{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.ask-nav li{padding:9px 16px;border-radius:999px;border:1px solid #ffffff2e;font-size:14px;color:var(--dim);transition:background .3s,color .3s,border-color .3s}
.ask-nav li.is-on{background:var(--home);border-color:var(--home);color:#07070f;font-weight:650}
.asks{position:relative;display:grid}
.ask{grid-area:1/1;padding:30px 30px 28px;border-radius:22px;background:#0d1124eb;border:1px solid #ffffff26;box-shadow:0 40px 110px #000b,0 0 80px #9a78ff26;opacity:0;transform:translateY(34px) scale(.97);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.ask.is-on{opacity:1;transform:none}
.ask.is-past{opacity:0;transform:translateY(-34px) scale(.97)}
.ask-you,.ask-viki,.order-label{font:600 13px/1 var(--display);letter-spacing:.14em;color:var(--dim)}
.ask-prompt{margin-top:12px;min-height:2.5em;font:600 clamp(22px,2.3vw,32px)/1.25 var(--display);color:#fff}
.ask-prompt span:after,.order-line span:after{content:'';display:inline-block;width:3px;height:1em;margin-left:4px;vertical-align:-.12em;background:var(--world);animation:caret .8s steps(1) infinite}
.ask-answer{margin-top:22px;padding-top:22px;border-top:1px solid #ffffff22;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.ask.is-answered .ask-answer{opacity:1;transform:none}
.ask-viki{color:var(--home)}
.ask-answer ul{list-style:none;margin-top:14px;display:grid;gap:10px;font-size:16px;color:#d3d8ec}
.ask-answer li,.gain-grid li{position:relative;padding-left:26px}
.ask-answer li:before{content:'';position:absolute;left:2px;top:.5em;width:11px;height:6px;rotate:-45deg;border-bottom:2px solid var(--home);border-left:2px solid var(--home)}
.ask-result{margin-top:18px;padding:14px 16px;border-radius:12px;background:#9a78ff1f;font-size:16px;color:#fff}
.asks>.fine{grid-area:2/1}
.can-do{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.can-do li{padding:8px 14px;border-radius:999px;border:1px solid #5fe8d855;font-size:14px;color:#c9f5ef}
.order{padding:28px 28px 24px;border-radius:22px;background:#0b1322eb;border:1px solid #2f6370;box-shadow:0 40px 110px #000b,0 0 80px #5fe8d822}
.order-line{margin-top:12px;min-height:2.6em;font:600 clamp(19px,1.9vw,27px)/1.3 var(--display);color:#fff}
.pcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
.pcs i{position:relative;font-style:normal;font-size:12.5px;line-height:1.25;color:var(--dim);padding:34px 10px 12px;border-radius:12px;background:#ffffff0a;border:1px solid #ffffff1c;transition:background .35s,border-color .35s,color .35s,transform .35s}
.pcs i:before{content:'';position:absolute;left:10px;top:11px;width:16px;height:16px;border-radius:50%;border:2px solid #ffffff3a;transition:border-color .3s,background .3s}
.pcs i.is-busy{border-color:var(--pro);color:#fff;transform:translateY(-3px)}
.pcs i.is-busy:before{border-color:#5fe8d83a;border-top-color:var(--pro);animation:turn .8s linear infinite}
.pcs i.is-done{background:#5fe8d81f;border-color:#5fe8d880;color:#eafffb}
.pcs i.is-done:before{border-color:var(--pro);background:var(--pro)}
.pcs i.is-done:after{content:'';position:absolute;left:15px;top:17px;width:7px;height:4px;rotate:-45deg;border-bottom:2px solid #06221f;border-left:2px solid #06221f}
@keyframes turn{to{rotate:360deg}}
.order-count{margin-top:18px;font-size:15px;color:var(--dim)}
.order-count b{font:600 26px/1 var(--display);color:var(--pro);font-variant-numeric:tabular-nums}
.order-final{margin-top:14px;padding:14px 16px;border-radius:12px;background:linear-gradient(135deg,#145a57,#16384f);border:1px solid var(--pro);font-size:16px;color:#fff;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s}
.order.is-finished .order-final{opacity:1;transform:none}

/* Vorteile */
.gain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:50px;border-radius:20px;overflow:hidden;background:#ffffff1f;border:1px solid #ffffff1f}
.gain-grid article{padding:30px 28px 32px;background:#0a0d1ad9;transition:background .3s}
.gain-grid article:hover{background:color-mix(in srgb,var(--world) 14%,#0a0d1a)}
.gain-grid h3{font-size:24px;line-height:1.15;color:var(--world);transition:color 1s}
.gain-grid p{margin-top:12px;font-size:15.5px;color:#d3d8ec}
.versus{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;margin-top:22px}
.versus>div{padding:26px 26px 28px;border-radius:18px;background:#ffffff0a;border:1px solid #ffffff1c}
.versus h3{font-size:21px;color:var(--dim)}
.versus ul{list-style:none;margin-top:14px;display:grid;gap:10px;font-size:15.5px;color:var(--dim)}
.versus .win{background:linear-gradient(150deg,color-mix(in srgb,var(--pro) 22%,#0b0e1c),#0b0e1c);border-color:var(--pro);box-shadow:0 24px 70px #1bbfae33}
.versus .win h3{color:var(--pro)}.versus .win ul{color:var(--paper)}

/* Leinwand mit Video: mittig, mit Rand */
.screen,.relay,.finale{text-align:center}
.screen h2,.relay h2,.finale h2{margin-inline:auto;max-width:22ch}
.relay .lead{margin-inline:auto}
.projector{position:relative;max-width:900px;margin:44px auto 0;border-radius:12px;padding:9px;background:linear-gradient(#ffffff26,#ffffff08);box-shadow:0 60px 140px #000d,0 0 120px color-mix(in srgb,var(--world) 32%,transparent);
  transform:perspective(1600px) rotateX(calc((.5 - var(--p,.5)) * 9deg)) scale(calc(.93 + var(--p,.5) * .08))}
.projector:before{content:'';position:absolute;left:14%;right:14%;top:-80px;height:80px;background:linear-gradient(transparent,color-mix(in srgb,var(--world) 30%,transparent));clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);filter:blur(14px);opacity:.7;pointer-events:none}
.projector video{width:100%;aspect-ratio:16/9;border-radius:6px;background:#000}

/* Übergabe */
.chain{list-style:none;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:64px auto 0;max-width:1040px;text-align:left}
.chain:before{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:linear-gradient(90deg,var(--home),var(--flare),var(--pro));transform-origin:0 50%;transform:scaleX(calc((var(--p,0) - .25) * 2.6));box-shadow:0 0 24px #9a78ffaa}
.chain li{position:relative;padding-top:38px;font-size:15.5px;color:#d3d8ec}
.chain li:before{content:'';position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--void);border:2px solid var(--paper);box-shadow:0 0 26px #fff8}
.chain b{display:block;font:600 26px/1.15 var(--display);color:var(--paper);margin-bottom:6px}

/* Abos als Eintrittskarten */
.ticket-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:46px}
.ticket{display:flex;flex-direction:column;padding:26px 24px;border-radius:16px;background:#0d1124e6;border:1px solid #ffffff22;transition:transform .25s,border-color .25s,box-shadow .25s}
.ticket:hover{transform:translateY(-8px) rotate(-.6deg);border-color:var(--pro);box-shadow:0 30px 80px #000b}
.ticket .world-tag{align-self:flex-start;font-size:12px;padding:7px 10px 6px;margin-bottom:18px;background:var(--pro)}
.ticket h3{font-size:42px;line-height:1;font-stretch:84%}
.price{margin-top:14px;padding-bottom:18px;border-bottom:1px dashed #ffffff3d;font:600 30px/1.1 var(--display);color:var(--pro)}
.price small{display:block;margin-top:5px;font:400 14px/1.3 var(--text);color:var(--dim)}
.ticket ul{list-style:none;flex:1;margin-top:18px;display:grid;align-content:start;gap:10px;font-size:14.5px;color:#d3d8ec}
.ticket .cta{margin-top:22px;text-align:center;background:var(--pro)}
.ticket .cta.ghost{background:transparent}
.t-home{background:linear-gradient(160deg,#2a1c66,#120d2e);border-color:#9a78ff}
.t-home .world-tag,.t-home .cta{background:var(--home)}.t-home .price{color:#c9b8ff}
.t-home:hover{border-color:var(--home)}
.t-star{background:linear-gradient(160deg,#0f4a52,#0b1426);border-color:var(--pro);box-shadow:0 24px 80px #1bbfae40}
.t-star .world-tag{background:var(--flare)}

/* Abspann */
.reel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:54px auto 0;max-width:1080px;text-align:left}
.can{display:flex;flex-direction:column;gap:8px;padding:26px 24px;border-radius:16px;text-decoration:none;background:#0d1124e6;border:1px solid #ffffff22;transition:transform .25s,border-color .25s}
.can:hover{transform:translateY(-6px);border-color:var(--flare)}
.can b{font:600 30px/1 var(--display)}
.can span{font-size:15px;color:#d3d8ec;flex:1}
.can i{margin-top:12px;font-style:normal;font-weight:650;color:var(--flare)}
.credits{margin-top:70px;font-size:15px;color:var(--dim)}
.credits .wordmark{font-size:22px;margin-right:6px}

/* Wegweiser am rechten Rand */
.rail{position:fixed;right:max(14px,calc(var(--side) - 46px));top:50%;z-index:66;display:flex;flex-direction:column;gap:11px;transform:translateY(-50%)}
.rail a{position:relative;display:block;width:10px;height:10px;border-radius:50%;background:#ffffff38;transition:background .3s,transform .3s}
.rail a:hover,.rail a.is-on{background:var(--world);transform:scale(1.45)}
.rail a span{position:absolute;right:20px;top:50%;translate:0 -50%;white-space:nowrap;padding:6px 11px;border-radius:8px;background:#0d1124f2;border:1px solid #ffffff26;font-size:13px;color:var(--paper);opacity:0;pointer-events:none;transition:opacity .2s}
.rail a:hover span,.rail a:focus-visible span{opacity:1}
@media(max-width:1000px){
  .split,.split.flip{grid-template-columns:1fr}.split.flip .copy{order:0}
  .pin{min-height:0;padding-block:calc(var(--bar) + 110px) 90px}
  .pin-stage{position:static;height:auto;grid-template-columns:1fr;padding-block:0}
  .ask{grid-area:auto;opacity:1;transform:none;margin-bottom:16px}.ask.is-past{opacity:1;transform:none}.ask-answer{opacity:1;transform:none}
  .asks>.fine{grid-area:auto}.ask-nav{display:none}
  .ticket-row,.gain-grid{grid-template-columns:1fr 1fr}
  .top nav a:nth-child(n+3){display:none}
  .rail{display:none}
}
@media(max-width:640px){
  .scene{padding-top:calc(var(--bar) + 96px)}
  .brand{font-size:21px}.brand img{width:30px;height:30px}.top nav a{font-size:13px}
  .viki-ring{width:64px;height:64px}.viki-say{width:min(250px,64vw);padding:11px 14px}.viki-say p{font-size:14px}
  .viki-slot{height:92px}.slot-center{height:200px}
  .ticket-row,.gain-grid,.reel,.chain,.versus,.doors{grid-template-columns:1fr}
  .lane{grid-template-columns:1fr}.lane .viki-slot:not(.slot-mid){display:none}
  .pcs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .chain:before{display:none}.hud #slate{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #aurora,#fx,#flare,.streak{display:none}
  .c,.rise>*{opacity:1;filter:none;transform:none;animation:none;transition:none}
  .plate img,.projector,.intro h1{transform:none}
  .pin{min-height:0}.pin-stage{position:static;height:auto}
  .ask{grid-area:auto;opacity:1;transform:none;margin-bottom:16px}.ask-answer,.order-final{opacity:1;transform:none}
  #viki-typed:after,.scroll-cue,.pcs i.is-busy:before{animation:none}
}

.plan-annual{margin-top:12px;font-size:14px;line-height:1.5;color:#d3d8ec}.plan-test{align-self:flex-start;margin-top:14px;padding:7px 10px;border-radius:8px;background:#ffffff0d;color:var(--pro);font-size:13px;font-weight:600}

/* Der IT-Profi hinter Viki: Stichpunkte und ein Beispielgespräch mit Übergabe */
.points{list-style:none;margin-top:30px;display:grid;gap:18px;max-width:54ch}
.points li{padding-left:20px;border-left:2px solid var(--world);font-size:16px;color:#d3d8ec;transition:border-color 1s}
.points b{display:block;font:600 21px/1.2 var(--display);color:var(--paper);margin-bottom:3px}
.thread{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:18px;background:#0d1124e6;border:1px solid #ffffff22;box-shadow:0 40px 100px #000a}
.msg{max-width:86%;padding:12px 16px 13px;border-radius:4px 16px 16px 16px;background:#ffffff12;font-size:15.5px;line-height:1.5;color:var(--paper)}
.msg b{display:block;font:600 12px/1 var(--display);letter-spacing:.12em;margin-bottom:6px;color:var(--dim)}
.msg-you{align-self:flex-end;border-radius:16px 4px 16px 16px;background:#ffffff1f}
.msg-viki b{color:var(--home)}
.msg-pro{background:color-mix(in srgb,var(--flare) 16%,#0d1124);border:1px solid color-mix(in srgb,var(--flare) 55%,transparent)}
.msg-pro b{color:var(--flare)}
.handover{display:flex;align-items:center;gap:14px;margin:6px 0;font-size:13px;color:var(--flare)}
.handover:before,.handover:after{content:'';flex:1;height:1px;background:color-mix(in srgb,var(--flare) 45%,transparent)}
.thread figcaption{margin-top:6px;font-size:13px;color:var(--dim)}

/* Kontakt und Fußzeile */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start;min-height:0}
.contact-form{display:grid;gap:16px;padding:28px;border-radius:18px;background:#0d1124e6;border:1px solid #ffffff22}
.contact-form label{display:grid;gap:7px;font-size:14.5px;color:#d3d8ec}
.contact-form input:not([type="checkbox"]),.contact-form select,.contact-form textarea{font:inherit;font-size:16px;color:var(--paper);background:#05060d;border:1px solid #ffffff38;border-radius:10px;padding:12px 14px;width:100%}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--pro);box-shadow:0 0 0 3px #5fe8d833}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form .consent{grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:14px}
.contact-form .consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--pro)}
.contact-form .cta{margin-top:4px;justify-self:start;border:0;cursor:pointer;font-family:inherit;background:var(--pro)}
.contact-form .cta:disabled{opacity:.55;cursor:wait}
.trap{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-result{min-height:1.5em;font-size:15px;color:var(--dim)}
.form-result.is-error{color:#ffb4a8}.form-result.is-done{color:var(--pro)}
.fine a,.consent a{color:var(--paper)}
.foot{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 30px;padding:30px var(--side) 40px;border-top:1px solid #ffffff1f}
.foot .wordmark{font-size:22px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot a{font-size:14.5px;color:var(--dim);text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{color:var(--paper);border-color:var(--pro)}
@media(max-width:1000px){.contact{grid-template-columns:1fr}}

/* Bis Viki zum ersten Mal einfliegt, bleibt sie unsichtbar. */
.viki.is-waiting{visibility:hidden}

/* Anmelden oben rechts, auch auf dem Handy sichtbar */
.top nav a.login{color:var(--paper);border:1px solid #ffffff40;border-radius:999px;padding:6px 14px}
.top nav a.login:hover{border-color:var(--world)}
@media(max-width:1000px){.top nav a.login{display:inline-block !important}}

/* Personal-Karte: deutlich als Angebot für Privatleute erkennbar */
.t-home{box-shadow:0 24px 80px #9a78ff33}
.t-home .world-tag{background:#c9b8ff}
.plan-for{margin:6px 0 2px;font-size:14px;font-weight:600;color:#e7defd}