@font-face{font-family:'IBM Plex Sans';src:url(cs-plex-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(cs-plex-600.woff2) format('woff2');font-weight:600;font-display:swap}
:root{--navy:#1a2d4b;--gray:#5f6c81;--light:#8a94a6;--green:#00df7b;--soft:#f3f4f6;--mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --B:min(1100px,calc(100vw - 48px))}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--navy);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}
:where(.story) :is(h1,h2,p){margin:0}
:where(.story) a{color:inherit}
:where(.story) code{font-family:var(--mono);font-size:.9em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-60px;z-index:1001;background:var(--navy);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none}
.skip-link:focus{top:12px}

/* Kopfzeile */
.top{position:absolute;top:0;left:0;right:0;z-index:20;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.brand{font-weight:600;font-size:16px;text-decoration:none;letter-spacing:-.01em}
.preview{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--gray)}
.preview>span{border:1px solid #dfe3e9;border-radius:99px;padding:3px 10px}
.variant-link{text-decoration:none;border-bottom:1px solid currentColor}

/* Bühne */
.story{position:relative;background:#fff}
.marker{position:absolute;left:0;top:0;width:1px;height:0;overflow:hidden;pointer-events:none}
.stage{position:relative;padding:96px 20px 64px;text-align:center}
.hero h1{font-size:clamp(34px,5vw,66px);line-height:1.04;letter-spacing:-.028em;font-weight:600}
.hero h1 span{display:block;color:var(--light)}
.story .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:10px;font-weight:600;font-size:16px;text-decoration:none;transition:transform .15s}
.story .btn:hover{transform:translateY(-1px)}
.story .btn.primary{background:var(--green);color:var(--navy)}
.story .btn.secondary{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1px #d6dae1}
.text-link{font-weight:600;font-size:16px;text-decoration:none;color:var(--navy)}
.text-link span{display:inline-block;margin-left:4px}

/* Gerät */
.device-area{display:flex;justify-content:center;margin-top:48px}
.device{position:relative;width:var(--B);flex:none;transform-origin:50% 100%;--rim:calc(var(--B) * .0024)}
.hinge-space{perspective:calc(var(--B) * 2.6);perspective-origin:50% 0}
.lid{position:relative;width:85.15%;margin:0 auto;aspect-ratio:1158/790;padding:1.9% 1.86% 4.05%;background:#0b0b0d;
  border-radius:3.1% 3.1% .8% .8%/4.6% 4.6% 1.2% 1.2%;transform-origin:50% 100%;
  box-shadow:inset 0 0 0 var(--rim) #c7cad0,inset 0 0 0 calc(var(--rim) * 2.2) #1d1e22}
.lid::after{content:'';position:absolute;left:calc(var(--rim) * 2);right:calc(var(--rim) * 2);bottom:0;height:calc(var(--B) * .011);background:linear-gradient(#1b1c20,#0c0c0e);border-radius:0 0 2px 2px}
.display{position:relative;width:100%;height:100%;overflow:hidden;border-radius:.5%/.8%;background:#06080c;container:display/inline-size;color:#e8e9ec}
/* Schrift streng proportional zum Display, damit die Fenster auf jeder Größe gleich gefüllt sind */
.display>*{--fs:1.66cqw;font-size:var(--fs)}
.wallpaper{position:absolute;inset:0;background:
  radial-gradient(58% 75% at 84% 108%,rgba(0,223,123,.34),transparent 62%),
  radial-gradient(55% 70% at 6% -8%,rgba(70,110,200,.45),transparent 62%),
  radial-gradient(45% 55% at 58% 42%,rgba(36,62,112,.32),transparent 70%),
  linear-gradient(155deg,#0e1526 0%,#080b13 55%,#04060a 100%)}
.wallpaper::after{content:'';position:absolute;left:-20%;right:-20%;top:46%;height:130%;border-radius:50%;border-top:1px solid rgba(255,255,255,.13);box-shadow:inset 0 3em 6em -3em rgba(0,223,123,.16)}
.screen-off{position:absolute;inset:0;background:#030405;opacity:0;z-index:6;pointer-events:none}
.menubar{position:absolute;left:0;right:0;top:0;height:2.6%;min-height:1.6em;display:flex;justify-content:space-between;align-items:center;padding:0 1.6em;font-size:calc(var(--fs) * .66);color:rgba(255,255,255,.72);background:rgba(255,255,255,.04)}
.notch{position:absolute;top:0;left:50%;width:10.6%;height:3.1%;transform:translateX(-50%);background:#0b0b0d;border-radius:0 0 18% 18%/0 0 45% 45%;z-index:7;display:flex;align-items:center;justify-content:center}
.notch i{width:7%;aspect-ratio:1;border-radius:50%;background:#1b2130}
.sim-badge{position:absolute;right:1.2em;bottom:.8em;font-size:calc(var(--fs) * .6);color:rgba(255,255,255,.42);z-index:5}

/* Fenster */
.win[hidden]{display:none!important}
.win{position:absolute;display:flex;flex-direction:column;border-radius:.7em;overflow:hidden;text-align:left}
.win-bar{flex:none;height:2.15em;display:grid;grid-template-columns:4.5em 1fr 4.5em;align-items:center;padding:0 .8em}
.dots{display:flex;gap:.42em}
.dots i{width:.72em;height:.72em;border-radius:50%;background:#ff5f57}
.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
.win-title{text-align:center;font-size:.76em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term{left:6%;top:11%;width:60%;height:79%;background:rgba(21,23,28,.95);box-shadow:0 0 0 1px rgba(255,255,255,.09),0 1.6em 4em rgba(0,0,0,.5);z-index:2}
.term .win-bar{background:rgba(255,255,255,.045);color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.06)}
.term-body{position:relative;flex:1;overflow:hidden;padding:1em 1.25em;contain:layout paint}
.term-scroll{font-family:var(--mono);font-size:.9em;line-height:1.55;color:#e6e7ea}
.t-dim{color:rgba(255,255,255,.45)}
.t-rest{color:transparent}
.caret{display:inline-block;width:0;height:1.15em;vertical-align:-.22em;position:relative}
.caret::after{content:'';position:absolute;left:.06em;top:0;width:.58em;height:100%;background:#e6e7ea}
.t-cmd .caret,.t-prompt .caret{opacity:0}
.t-welcome{display:flex;align-items:center;gap:1em;margin:.9em 0;padding:.75em 1em;border:1px solid #d97757;border-radius:.45em}
.crab{width:3.3em;flex:none;color:#d97757}
.t-welcome strong{display:block;color:#fff}
.t-welcome span,.t-welcome small{display:block}
.t-welcome small{font-size:1em;color:rgba(255,255,255,.45)}
.t-prompt{display:flex;gap:.7em;padding:.55em .85em;border:1px solid rgba(255,255,255,.26);border-radius:.45em}
.t-arrow{color:rgba(255,255,255,.55)}
.t-work{margin-top:.8em}
.t-work p{margin:.12em 0}
.t-work .ok{color:#4fd18b;font-weight:400}
.t-work .sub{padding-left:1.25em;color:rgba(255,255,255,.55)}
.t-work .sub b{font-weight:400}
.t-work .done b{color:#d97757;font-weight:400}
.t-work .done span{color:#fff}

.result{right:3%;top:14%;width:52%;max-height:80%;background:#fff;color:var(--navy);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2.2em 5em rgba(0,0,0,.6);z-index:3}
.result .win-bar{background:#f3f4f6;border-bottom:1px solid #e5e7eb;color:var(--gray)}
.result-body{flex:1;display:flex;flex-direction:column;gap:.95em;padding:1.25em 1.45em;min-height:0}
.r-head strong{display:block;font-size:1.3em;letter-spacing:-.01em}
.r-head span{display:block;font-size:.8em;color:var(--gray);margin-top:.15em}
.folders{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.folders div{background:#f7f8fa;border:1px solid #e8eaef;border-radius:.6em;padding:.75em .8em}
.folders svg{display:block;width:2.3em;fill:#d7e5f6;stroke:#7b98c0;stroke-width:2;stroke-linejoin:round;margin-bottom:.35em}
.folders strong{display:block;font-size:.9em}
.folders span{display:block;font-size:.74em;color:var(--gray)}
.mail{border:1px solid #e5e7eb;border-radius:.6em;padding:.85em 1em}
.mail-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.45em}
.mail-head strong{font-size:.9em}
.badge{font-size:.7em;font-weight:600;background:#fff3dc;color:#8a5a00;border-radius:99px;padding:.18em .65em}
.mail-to{font-size:.76em;color:var(--gray)}
.mail-subject{display:block;font-size:.9em;margin:.3em 0 .2em}
.mail-text{font-size:.8em;line-height:1.4;color:var(--gray)}
.attach{display:inline-block;margin-top:.55em;font-size:.72em;background:var(--soft);border-radius:.4em;padding:.25em .6em}
.attach::before{content:'↳ '}
.approve{font-size:.86em;color:#0a7442}
.approve b{color:#00b765}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:.7em}
.kpis div{background:#f7f8fa;border:1px solid #e8eaef;border-radius:.6em;padding:.7em .9em}
.kpis span{display:block;font-size:.72em;color:var(--gray)}
.kpis strong{display:block;font-size:1.35em;letter-spacing:-.01em;margin:.12em 0}
.kpis .pos{color:#0a7442}
.kpis small{display:block;font-size:.64em;color:var(--gray)}
.chart-card{border:1px solid #e5e7eb;border-radius:.6em;padding:.7em .9em}
.chart-title{display:flex;justify-content:space-between;align-items:center;font-size:.8em}
.chart-title span{font-size:.85em;color:var(--gray);display:flex;align-items:center;gap:.35em}
.chart-title i{display:inline-block;width:1em;height:.18em;background:#00b765;border-radius:2px}
.chart-title i.fc{background:none;border-top:.18em dashed #7b98c0;height:0;margin-left:.5em}
.chart{display:block;width:100%;height:6.4em;margin-top:.4em}
.chart .grid{stroke:#eceef2;stroke-width:1;fill:none}
.chart .line{stroke:#00b765;stroke-width:3;fill:none}
.chart .fcl{stroke:#7b98c0;stroke-width:3;fill:none;stroke-dasharray:9 8}
.axis{display:flex;justify-content:space-between;font-size:.64em;color:var(--gray);margin-top:.2em}
.cats .bar{display:flex;height:.62em;border-radius:99px;overflow:hidden;gap:2px}
.cats .bar i:nth-child(1){background:var(--navy)}.cats .bar i:nth-child(2){background:#7b98c0}.cats .bar i:nth-child(3){background:#c9d3e3}
.cats p{font-size:.72em;color:var(--gray);margin-top:.4em}

@container display (max-width:620px){
  .display>*{--fs:2.85cqw}
  .menubar{padding:0 1em}
  .term{left:2.5%;right:2.5%;width:auto;top:9%;height:auto;bottom:3%}
  .term-body{padding:.7em .85em}
  .term-scroll{font-size:.86em;line-height:1.5}
  .t-welcome{margin:.6em 0;padding:.5em .7em;gap:.7em}
  .crab{width:2.6em}
  .t-prompt{padding:.4em .6em}
  .t-work{margin-top:.5em}
  .result{left:2.5%;right:2.5%;width:auto;top:6.5%;height:auto;bottom:2.5%;max-height:none}
  .result-body{gap:.55em;padding:.7em .85em}
  .r-head strong{font-size:1.08em}
  .r-head span{font-size:.72em}
  .folders{gap:.4em}
  .folders div{padding:.4em .5em}
  .folders svg{width:1.6em;margin-bottom:.15em}
  .folders strong{font-size:.8em}.folders span{font-size:.68em}
  .mail{padding:.5em .65em}
  .mail-head{margin-bottom:.2em}
  .mail-subject{margin:.15em 0 .1em;font-size:.84em}
  .mail-text{font-size:.74em}
  .attach{margin-top:.3em;font-size:.66em}
  .approve{font-size:.76em}
  .kpis{gap:.4em}.kpis div{padding:.45em .6em}
  .kpis strong{font-size:1.12em}
  .chart-card{padding:.45em .6em}
  .chart{height:3.4em;margin-top:.2em}
  .sim-badge{right:.8em;bottom:.45em}
}

/* Unterschale */
.base{position:relative;height:calc(var(--B) * .024);border-radius:calc(var(--B) * .002) calc(var(--B) * .002) calc(var(--B) * .014) calc(var(--B) * .014)/calc(var(--B) * .002) calc(var(--B) * .002) calc(var(--B) * .016) calc(var(--B) * .016);
  background:linear-gradient(180deg,#f3f4f6 0%,#e2e4e8 28%,#c8cbd1 66%,#9da1a8 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.12)}
.base::after{content:'';position:absolute;left:8%;right:8%;bottom:calc(var(--B) * -.004);height:calc(var(--B) * .004);background:#55595f;border-radius:0 0 40% 40%;opacity:.55}
.lip{position:absolute;top:0;left:50%;width:16%;height:48%;transform:translateX(-50%);background:linear-gradient(#b7bbc1,#d9dbdf);border-radius:0 0 calc(var(--B) * .01) calc(var(--B) * .01)}
.shadow{position:absolute;left:3%;right:3%;bottom:calc(var(--B) * -.045);height:calc(var(--B) * .06);background:radial-gradient(closest-side,rgba(18,28,48,.26),rgba(18,28,48,0));z-index:-1}

/* Bildunterschriften */
.captions{margin-top:56px}
.caption-list{list-style:none;margin:0 auto;padding:0;max-width:720px;display:grid;gap:28px;counter-reset:cap}
.cap h2{font-size:clamp(22px,2.3vw,32px);letter-spacing:-.02em;line-height:1.15;font-weight:600}
.cap p{margin-top:8px;font-size:clamp(15px,1.25vw,18px);line-height:1.45;color:var(--gray)}

/* Etappe 5 */
.setup{background:var(--soft);padding:104px 20px 96px;text-align:center}
.story .eyebrow{font-size:15px;font-weight:600;color:#00a65c;letter-spacing:.01em}
.setup h2{margin-top:12px;font-size:clamp(30px,4.2vw,54px);line-height:1.06;letter-spacing:-.028em;font-weight:600}
.setup-lead{max-width:600px;margin:20px auto 0;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--gray)}
.paths{display:flex;justify-content:center;gap:16px;margin:40px auto 0;max-width:640px}
.path{flex:1;background:#fff;border-radius:16px;padding:20px 20px 22px;text-align:left;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.os{display:block;font-size:13px;color:var(--gray)}
.path strong{display:block;font-size:18px;margin:2px 0 14px}
.mini{font-family:var(--mono);font-size:14px;background:#15171c;color:#e6e7ea;border-radius:9px;padding:12px 14px}
.mini .t-dim{margin-right:4px}
.setup-actions{margin-top:36px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.qualify{max-width:560px;margin:28px auto 0;font-size:14px;line-height:1.5;color:var(--gray)}
.footnote{margin-top:14px;font-size:12px;line-height:1.5;color:var(--light)}
.foot{display:flex;justify-content:space-between;gap:16px;padding:22px 28px;font-size:13px;color:var(--gray);background:#fff}
.foot a{margin-left:18px;text-decoration:none}

/* v4: eine Bühne, fünf Szenen, statische Endbilder als Grundzustand. */
:root{--B:min(1200px,88vw,calc((100svh - 214px) / .61));--stage-bg:#fff;--stage-fg:#1a2d4b;--stage-muted:#5f6c81}
.dunkel{--stage-bg:#050607;--stage-fg:#f5f5f7;--stage-muted:#a1a1a6}
body,.story,.stage{background:var(--stage-bg);color:var(--stage-fg)}
.stage{padding:0;isolation:isolate}
.dunkel .top,.dunkel .text-link{color:var(--stage-fg)}
.dunkel .preview{color:var(--stage-muted)}
.dunkel .preview>span{border-color:#303438}
.hero{padding:110px 20px 0;position:relative;z-index:2}
.hero-kicker{font-size:12px;font-weight:600;letter-spacing:.17em;color:var(--stage-muted);margin-bottom:20px}
.hero h1{font-size:clamp(40px,5.5vw,78px);line-height:1.02;letter-spacing:-.045em}
.hero h1 span{color:var(--stage-fg)}
.dunkel .hero h1 span{background:linear-gradient(110deg,#f5f5f7 10%,#b0c8bc 65%,#00df7b);background-clip:text;-webkit-background-clip:text;color:transparent}
.mobile-break{display:none}
.stage>.device-area{margin:30px 0 0}
.stage>.device-area .lid{transform:scale(1.17,.02);opacity:0}
.stage>.device-area .screen-off{opacity:.9}
.scene{padding:90px 20px 40px;position:relative;scroll-margin-top:24px}
.scene-caption{max-width:760px;margin:auto;text-align:center}
.scene-caption h2{font-size:clamp(25px,2.5vw,36px);line-height:1.12;letter-spacing:-.025em;margin:8px 0}
.scene-caption>p:last-child{color:var(--stage-muted);font-size:clamp(15px,1.3vw,18px);line-height:1.45}
.story .eyebrow{font-size:11px;letter-spacing:.13em;color:#00a65c}
.dunkel .story .eyebrow{color:#6be5a6}
.screen-scene{position:absolute;inset:0;--fs:1.66cqw}
.screen-scene>*{font-size:var(--fs)}
.screen-scene .term{width:47%;left:2%;top:10%;height:83%}
.screen-scene .result{width:49%;right:2%;top:10%;max-height:83%}
.term-scroll{font-size:.88em}
#result-dashboard{width:64%;right:3%;top:10%;max-height:84%}
[data-panel=finanzdashboard] .term{width:86%;left:7%}
.kpis strong .count{font-size:1em;color:inherit;margin:0}
.chart-reveal{position:relative;overflow:hidden}
.chart-cover{position:absolute;inset:0;background:#fff;transform:translateX(101%);transform-origin:left}
.landing-page{position:absolute;inset:0;overflow:hidden;color:#fff;text-align:left;z-index:4;background:#646c60}
.lp-images,.lp-motif,.lp-shade{position:absolute;inset:0}
.lp-motif{overflow:hidden;opacity:0}
.lp-motif:first-child{opacity:1}
.lp-motif svg,.lp-motif img{display:block;width:100%;height:100%;object-fit:cover}
.lp-motif img{position:absolute;inset:0}
.lp-shade{background:linear-gradient(90deg,rgba(6,17,15,.65),transparent 80%),linear-gradient(0deg,rgba(4,12,10,.7),transparent 58%);z-index:1}
.lp-nav{position:absolute;z-index:2;top:8%;left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;font-size:.85em}
.lp-nav strong{font-size:1.5em;line-height:.95;letter-spacing:-.03em}.lp-nav strong span{display:block;font-size:.36em;letter-spacing:.32em;margin-top:.9em;font-weight:400}
.lp-copy{position:absolute;z-index:2;left:6%;bottom:13%;right:6%}
.lp-kicker{font-size:.65em;letter-spacing:.22em;margin-bottom:1em}
.lp-copy h3{font-size:4.4em;line-height:1;letter-spacing:-.045em;margin:0 0 .35em;font-weight:400}
.lp-copy>p:not(.lp-kicker){font-size:.87em;line-height:1.45;color:#e0e4db}
.lp-link{display:inline-block;margin-top:1.3em;font-size:.7em;border-bottom:1px solid #d6dccc;padding-bottom:.6em;letter-spacing:.02em}
.lp-link b{margin-left:3em}
.lp-bottom{position:absolute;z-index:2;bottom:5%;left:6%;right:6%;display:flex;justify-content:space-between;font-size:.62em;letter-spacing:.04em;color:#e2e6da}
[data-panel=landingpage] .term{width:86%;left:7%}
[data-panel=landingpage]~.sim-badge{z-index:6}
.tile-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1120px;margin:36px auto}
.tile{min-width:0;position:relative;text-align:left;padding:22px;background:linear-gradient(145deg,#f4f7f5,#e5ede9);border:1px solid #cedbd3;border-radius:16px}
.dunkel .tile{background:radial-gradient(ellipse at 0 0,#18382c80,transparent 90%),linear-gradient(145deg,#171d1a,#0c100e);border-color:#29372f}
.tile-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.tile-top>span{color:#00a65c;font-size:28px;line-height:1}.dunkel .tile-top>span{color:#6be5a6}
.tile-top small{font-family:var(--mono);font-size:11px;color:var(--stage-muted)}
.tile h3{font-size:18px;font-weight:600;line-height:1.2;margin:0 0 9px}
.tile p{font-size:14px;line-height:1.45;color:var(--stage-muted)}
.progress{display:none}.end-progress{font-size:11px;color:var(--gray);margin-top:24px}
.setup{position:relative;color:var(--navy);min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:70px 20px 55px}
.setup .eyebrow{color:#00894c}.setup-time{font-size:clamp(20px,2.2vw,28px);color:#087844;margin-top:20px}
.setup-lead{margin-top:12px}.paths{width:100%;margin-top:30px}.setup-actions{margin-top:26px}.qualify{margin-top:24px}
.footnote{color:#667387}.foot{color:var(--gray)}
/* Bewegter Modus wird erst nach erfolgreicher JS-Initialisierung aktiviert. */
.motion .story{height:4400svh}
.motion .stage{position:sticky;top:0;height:100svh;overflow:hidden}
.motion .hero{position:absolute;top:max(96px,9svh);left:0;right:0;padding:0 20px}
.motion .stage>.device-area{position:absolute;top:0;left:0;right:0;margin:0;pointer-events:none}
.motion .scene{position:absolute;inset:0;padding:0;opacity:0;pointer-events:none}
.motion .scene-device{display:none}
.motion .scene-caption{position:absolute;bottom:58px;left:20px;right:20px}
.motion .wall-scene{display:flex;flex-direction:column;justify-content:center;padding:55px 24px 70px;gap:30px}
.motion .wall-scene .scene-caption{position:static;margin:0 auto}
.motion .tile-wall{width:100%;margin:0 auto}
.motion .screen-scene{opacity:0}
.motion .progress{display:block;position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.08em;color:var(--stage-muted);width:155px;text-align:center;pointer-events:none}
.progress-track{height:2px;background:#86868b30;margin-top:8px;overflow:hidden}.progress-track i{display:block;height:100%;background:#00be6b;transform:scaleX(0);transform-origin:left}
.motion .t-rest{color:transparent}
.motion .result,.motion .term,.motion .landing-page{opacity:0}
.motion .chart-cover{transform:none}
:where(.story) a:focus-visible{outline:3px solid #00a65c;outline-offset:5px}
@container display (max-width:620px){
 .screen-scene{--fs:2.85cqw}
 .screen-scene .term{left:2.5%;right:2.5%;width:auto;top:9%;bottom:3%;height:auto}
 .screen-scene .result,#result-dashboard{left:2.5%;right:2.5%;width:auto;top:6.5%;height:auto;bottom:2.5%;max-height:none}
 .lp-nav{font-size:.73em}.lp-nav strong{font-size:1.25em}
 .lp-copy h3{font-size:2.65em}.lp-copy>p:not(.lp-kicker){font-size:.78em}
 .lp-kicker{font-size:.57em}.lp-bottom{font-size:.55em}
}
@media (max-width:767px){
 :root{--B:calc((100vw - 20px) / .8205)}
 .top{padding:0 16px}.brand{font-size:14px}.preview{gap:10px;font-size:11px}
 .hero{padding-top:92px}.hero-kicker{font-size:9px;letter-spacing:.1em;margin-bottom:18px}
 .hero h1{font-size:min(calc((100vw - 44px) / 12.3),58px)}.mobile-break{display:block}
 .story .btn,.text-link{font-size:14px}
 .stage>.device-area .lid{transform:scale(1.17,.02);opacity:0}
 .scene{padding:65px 0 30px}.scene-caption{padding:0 20px}
 .scene-caption h2{font-size:26px}.scene-caption>p:last-child{font-size:15px}
 .motion .hero{top:max(92px,10svh);padding:0 18px}
 .motion .scene-caption{padding:0;bottom:80px}
 .tile-wall{grid-template-columns:repeat(2,1fr);gap:9px;margin:28px 16px}
 .tile{padding:13px;border-radius:12px}.tile-top{margin-bottom:12px}.tile-top>span{font-size:21px}.tile-top small{font-size:9px}
 .tile h3{font-size:14px;margin-bottom:5px}.tile p{font-size:11px;line-height:1.4}
 .motion .wall-scene{padding:30px 16px 60px;gap:20px}.wall-scene .scene-caption{padding:0 12px}.wall-scene .scene-caption h2{font-size:28px}
 .paths{flex-direction:column;gap:10px;margin-top:22px}.path{padding:14px 18px}.path strong{font-size:16px;margin-bottom:10px}.mini{padding:10px 12px}
 .setup{padding:50px 18px 40px}.setup h2{font-size:34px}.setup-lead{font-size:16px;max-width:335px}.setup-time{font-size:21px}
 .qualify{font-size:12px;margin-top:22px}.footnote{font-size:11px}.end-progress{margin-top:18px}
 .foot{flex-direction:column;padding:20px 16px}.foot a{margin:0 18px 0 0}
}
@media (max-height:730px) and (min-width:768px){
 .motion .hero{top:80px}.hero h1{font-size:52px}.hero-kicker{margin-bottom:12px}
 .motion .scene-caption{bottom:52px}.scene-caption h2{font-size:27px}.scene-caption>p:last-child{font-size:15px}
 .tile{padding:16px}.tile-top{margin-bottom:15px}.tile h3{font-size:16px}.tile p{font-size:12px}
}
@media (max-height:720px) and (max-width:767px){
 .motion .hero{top:80px}.hero h1{font-size:min(calc((100vw - 44px) / 12.3),32px)}.hero-kicker{margin-bottom:12px}
 .motion .wall-scene{padding-top:20px;gap:14px}.wall-scene .scene-caption h2{font-size:23px}.wall-scene .scene-caption>p:last-child{font-size:13px}
 .tile{padding:10px}.tile-top{margin-bottom:7px}.tile h3{font-size:12px}.tile p{font-size:10px}
}
/* Im statischen Modus hat jede Szene ihr eigenes vollständiges Endbild. */
html:not(.motion) .scene-device .screen-off{display:none}
html:not(.motion) .scene-device .device-area{margin-top:28px}
html:not(.motion) .screen-scene .term{opacity:1}
html:not(.motion) [data-panel=finanzdashboard] .term,html:not(.motion) [data-panel=landingpage] .term{position:relative;width:94%;left:3%;margin:0;top:0;height:auto;opacity:0}
html:not(.motion) #result-dashboard{width:88%;left:6%;right:6%}
html:not(.motion) .wall-scene{padding-bottom:90px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.static-prompt{max-width:650px;margin:18px auto 0;padding:12px 16px;border:1px solid #8a94a644;border-radius:10px;font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--stage-muted)}
.motion .static-prompt{display:none}
html:not(.motion) [data-panel=finanzdashboard] .term,html:not(.motion) [data-panel=landingpage] .term{display:none}
/* Kurze Displays: Arbeitszeilen und alle acht Kacheln bleiben vollständig sichtbar. */
@container display (max-width:620px){
 .screen-scene .term-body{padding:.6em .7em}
 .screen-scene .term-scroll{font-size:.8em;line-height:1.45}
 .screen-scene .t-welcome small{display:none}
 .screen-scene .t-welcome{margin:.5em 0;padding:.45em .6em}
}
@media(max-height:720px) and (max-width:767px){
 .motion .wall-scene{padding:20px 16px 50px;gap:12px}
 .wall-scene .scene-caption>p:last-child{display:none}
 .tile-wall{gap:7px}.tile{padding:8px}.tile-top{margin-bottom:4px}.tile-top>span{font-size:16px}.tile p{line-height:1.3}
}

/* Hero: ganz geschlossener Korpus in Frontansicht */
.closed-body{position:absolute;left:-.5%;right:-.5%;bottom:calc(var(--B) * -.03);z-index:3;pointer-events:none;display:none}
.motion .closed-body,.stage>.device-area .closed-body{display:block}
.cb-lid{position:absolute;left:.2%;right:.2%;top:0;height:28%;border-radius:calc(var(--B) * .012) calc(var(--B) * .012) calc(var(--B) * .002) calc(var(--B) * .002)/calc(var(--B) * .008) calc(var(--B) * .008) calc(var(--B) * .002) calc(var(--B) * .002);background:linear-gradient(180deg,#f4f5f7 0%,#d9dce1 55%,#b9bdc4 100%);box-shadow:inset 0 1px 0 #fff}
.cb-base{position:absolute;left:0;right:0;top:calc(28% + 1px);bottom:0;border-radius:calc(var(--B) * .002) calc(var(--B) * .002) calc(var(--B) * .016) calc(var(--B) * .016)/calc(var(--B) * .002) calc(var(--B) * .002) calc(var(--B) * .02) calc(var(--B) * .02);background:linear-gradient(180deg,#e9ebee 0%,#d4d7dc 40%,#b3b7be 80%,#8f949c 100%);box-shadow:0 -1px 0 #2b2e33,inset 0 -1px 0 rgba(0,0,0,.15)}
.cb-notch{position:absolute;left:42%;width:16%;top:28%;height:22%;border-radius:0 0 calc(var(--B) * .012) calc(var(--B) * .012)/0 0 calc(var(--B) * .01) calc(var(--B) * .01);background:linear-gradient(180deg,#2b2e33 0%,#8d929a 35%,#c9ccd2 100%)}
.cb-foot{position:absolute;bottom:calc(var(--B) * -.006);width:7%;height:calc(var(--B) * .007);border-radius:0 0 50% 50%;background:linear-gradient(#9a9ea6,#6d7178)}
.cb-foot.l{left:4%}.cb-foot.r{right:4%}
/* Hero: fotografierter Korpus (Codex), Schwarz verschmilzt mit der Bühne */
.closed-body img{display:block;width:100%;height:auto;mix-blend-mode:screen}
.cb-lid,.cb-base,.cb-notch,.cb-foot{display:none}
/* v6: Einschub gebündelt im Hero, direkt unter der H1, kleiner als der frühere Zwischenschritt */
.einschub{max-width:820px;margin:26px auto 0;padding:0 4px}
.einschub p{font-size:clamp(21px,2.2vw,32px);line-height:1.1;letter-spacing:-.03em;font-weight:600;color:var(--stage-fg)}
.einschub .einschub-end{margin-top:16px;color:#00df7b}
@media (max-height:730px) and (min-width:768px){
 .einschub{margin-top:18px}.einschub p{font-size:24px}.einschub .einschub-end{margin-top:12px}
}
.scene-caption h2{white-space:nowrap}
@media (max-width:767px){
 .einschub{margin-top:22px;padding:0}.einschub p{font-size:21px}.einschub .einschub-end{margin-top:12px}
 .scene-caption h2{font-size:min(26px,6.4vw)}
 /* Mobil: Kategorie und Überschrift über dem Gerät, Kleingedrucktes darunter */
 .motion .scene-caption .cap-head{position:absolute;left:0;right:0;bottom:calc(100% + var(--lift,0px))}
}

/* v5: Live-Kopf auf der dunklen Bühne, Reise in vier Schritten, Abschluss, danach der Bestand. */
.bestand .header{transition:background-color .3s,border-color .3s,box-shadow .3s}
.bestand .header.kopf-dunkel{background:rgba(5,6,7,.62);border-bottom-color:rgba(255,255,255,.06);box-shadow:none}
.bestand .header.kopf-dunkel .logo-name{color:#f5f5f7}
.motion .wall-scene{padding-top:86px}
.reise .scene-caption{max-width:980px}
.reise .scene-caption h2,.finale h2{white-space:nowrap}
@keyframes v5-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.r-cur{display:inline-block;width:.58em;height:1.15em;vertical-align:-.22em;background:#e6e7ea;animation:v5-blink 1.06s steps(1) infinite}
.r-cur-tipp{animation:none}
.reise-panel .win{z-index:2}
.r-dunkel{background:rgba(21,23,28,.95);box-shadow:0 0 0 1px rgba(255,255,255,.09),0 1.6em 4em rgba(0,0,0,.5)}
.r-dunkel .win-bar{background:rgba(255,255,255,.045);color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.06)}
.r-hell{background:#fff;color:var(--navy);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2.2em 5em rgba(0,0,0,.6);z-index:3}
.r-hell .win-bar{background:#f3f4f6;border-bottom:1px solid #e5e7eb;color:var(--gray)}
.reise-panel .term-body{padding:1em 1.25em}
.reise-panel .term-scroll p{margin:.12em 0}
.r-zeile b{font-weight:400}.r-zeile .ok{color:#4fd18b}
.r-sub{padding-left:1.25em;color:rgba(255,255,255,.55)}
.r-gruen,.r-gruen b{color:#4fd18b}
.r-fertig b{color:#d97757}.r-fertig{color:#fff}
.r-kicker{font-size:.66em;font-weight:600;letter-spacing:.16em;color:var(--gray)}
/* Schritt 1 */
.r-suche{position:absolute;left:27%;width:46%;top:30%;z-index:4;text-align:left;background:rgba(40,44,52,.92);border:1px solid rgba(255,255,255,.14);border-radius:.8em;padding:.75em 1em;font-size:calc(var(--fs) * 1.25);color:#f5f5f7;box-shadow:0 1.6em 4em rgba(0,0,0,.55)}
.r-lupe{color:rgba(255,255,255,.55);margin-right:.5em}
.r-treffer{display:flex;align-items:center;gap:.8em;margin-top:.7em;padding:.5em .7em;border-radius:.5em;background:rgba(0,223,123,.16);font-size:.72em}
.r-treffer b{font-family:var(--mono);background:#15171c;color:#e6e7ea;border-radius:.35em;padding:.3em .45em}
.r-treffer strong,.r-treffer small{display:block}.r-treffer small{color:rgba(255,255,255,.55)}
.r-dialog-body{padding:1.5em 1.6em 1.7em;display:flex;flex-direction:column;gap:.55em;text-align:left}
.r-dialog-body strong{font-size:1.25em;letter-spacing:-.01em;line-height:1.2}
.r-dialog-body>p:not(.r-kicker){font-size:.82em;color:var(--gray);line-height:1.45}
.r-knopf{margin-top:.6em;align-self:flex-start;font-size:.85em;font-weight:600;border-radius:.5em;padding:.6em 1.1em;background:#e8f8ef;color:#0a7442;box-shadow:inset 0 0 0 1px #9fe0bd}
.r-knopf-warte{display:none}
.r-knopf.warte{background:var(--navy);color:#fff;box-shadow:none}
.r-knopf.warte .r-knopf-warte{display:inline}.r-knopf.warte .r-knopf-ok{display:none}
.r-balken{height:.45em;border-radius:99px;background:#eceef2;margin:.6em 0 .45em;overflow:hidden}
.r-balken i{display:block;height:100%;width:100%;background:#00b765;border-radius:inherit}
@container display (max-width:620px){
 .reise-panel .term-body{padding:.6em .7em}
 .reise-panel .term-scroll{font-size:.8em;line-height:1.45}
 .r-suche{left:8%;width:84%;top:24%}
 .sitzung{left:2.5%;right:2.5%;width:auto;top:9%;bottom:14%;height:auto}
 .browser{left:7%;right:7%;width:auto;top:17%}
 .browser-body{padding:.9em 1em 1em;gap:.5em}
 .r-dialog-body{padding:.9em 1em 1em;gap:.35em}
 .tasten{top:10%}.tasten kbd{font-size:1.1em}
}
/* Abschluss: ruhiger Text auf der Bühne */
.finale{display:flex;align-items:center;justify-content:center;min-height:100svh;padding:110px 24px 90px}
.finale-inhalt{max-width:760px;margin:auto;text-align:center}
.finale h2{font-size:clamp(34px,4.2vw,56px);line-height:1.06;letter-spacing:-.035em;margin:14px 0 22px}
.finale-text{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--stage-muted)}
.finale-actions{margin-top:30px;display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap}
.finale-hinweis{margin-top:26px;font-size:12px;line-height:1.55;color:var(--stage-muted);opacity:.8}
.motion .finale{position:absolute;inset:0;min-height:0;padding:86px 24px 64px;opacity:0;pointer-events:none}
/* Die Bühne lässt keine Klicks durch; nur der aktive Abschluss gibt seine CTAs frei. */
.motion .finale:not([inert]) .finale-actions a{pointer-events:auto}
@media (max-width:767px){
 .reise .scene-caption h2,.finale h2{font-size:min(26px,calc((100vw - 40px) / var(--z) / .55))}
 .finale h2{font-size:min(34px,calc((100vw - 40px) / var(--z) / .55));margin:10px 0 16px}
 .finale{padding:96px 20px 70px}.finale-text{font-size:15px}
 .finale-actions{gap:18px;margin-top:22px}.finale-hinweis{font-size:11px;margin-top:20px}
 .motion .finale{padding:80px 20px 60px}
 .motion .wall-scene{padding-top:80px}
}
@media (max-height:720px) and (max-width:767px){
 .motion .wall-scene{padding-top:74px}
 .finale-text{font-size:13px}
 .einschub{margin-top:16px}.einschub p{font-size:18px}.einschub .einschub-end{margin-top:8px}
}
/* Statischer Modus: jede Station zeigt ihr Endbild. */
html:not(.motion) .r-treffer{box-shadow:inset 0 0 0 1px #00df7b}
/* Das Gerät ist breiter als ein Handy; seitlich abschneiden statt quer scrollen. */
html:not(.motion) .device-area{overflow-x:clip}
html:not(.motion) .reise .scene-device .device-area{margin-top:28px}
.motion .reise-panel .win,.motion .r-suche,.motion .r-zeile,.motion .tasten,.motion .t-zsh,.motion .t-install>*,.motion .t-welcome,.motion .t-prompt,.motion .t-work p,.motion #aufgaben .scene-caption{opacity:0}
html:not(.motion) .r-cur-tipp{display:none}

/* v9: Gedächtnis-Station. Gehirn von oben als Linienzeichnung, vier Dateikarten wandern in die Hälften. */
.gehirn-panel{display:block;z-index:5;background:radial-gradient(60% 70% at 50% 112%,rgba(0,223,123,.22),transparent 66%),radial-gradient(50% 60% at 8% -6%,rgba(70,110,200,.3),transparent 62%),#06080c}
.gehirn-buehne{position:absolute;left:0;right:0;top:4%;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em}
.gehirn{width:auto;height:72%;max-width:60%;display:block;overflow:visible}
.gehirn .g-innen{stroke:#6be5a6;stroke-opacity:.75;stroke-width:1.8}
.gehirn-label{font-size:1.15em;letter-spacing:.14em;text-transform:uppercase;color:#6be5a6;font-weight:600;margin:0}
.g-karte{position:absolute;width:27%;padding:.7em .85em .75em;border-radius:.6em;background:rgba(11,13,17,.9);border:1px solid rgba(0,223,123,.55);box-shadow:0 .4em 1.4em rgba(0,0,0,.45);display:flex;flex-direction:column;gap:.25em;text-align:left;will-change:transform,opacity}
.g-links{left:8%}.g-rechts{right:8%}.g-oben{top:17%}.g-unten{top:55%}
.g-name{font-family:var(--mono);font-size:max(11px,1.2em);font-weight:600;color:#f5f5f7;letter-spacing:-.01em;line-height:1.2}
.g-ico{font-style:normal;color:#00df7b;margin-right:.45em}
.g-zeile{font-size:max(11px,1.12em);line-height:1.35;color:rgba(255,255,255,.72)}
.motion .g-karte,.motion .gehirn-label{opacity:0}
.motion .gehirn path{stroke-dasharray:1;stroke-dashoffset:1}
@container display (max-width:620px){
 .gehirn{height:62%;max-width:54%}
 .gehirn-label{font-size:1em;letter-spacing:.1em}
 .g-karte{width:34%;padding:.45em .55em .5em;gap:.15em;border-radius:.45em}
 .g-links{left:3%}.g-rechts{right:3%}.g-oben{top:13%}.g-unten{top:56%}
 .g-name{font-size:max(11px,1.05em)}.g-zeile{font-size:max(11px,.85em);line-height:1.25}
}

/* v7: Szene 01 mit echtem Mailfenster. Terminal wird zur Kachel, Belege fliegen aus den Ordnern in die Anhangleiste. */
.screen-scene .term,.screen-scene .result{transform-origin:left bottom}
#result-invoices{transform-origin:right top}
.mailwin{left:18%;top:7%;width:54%;height:86%;background:#fff;color:var(--navy);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2.2em 5em rgba(0,0,0,.6);z-index:4;transform-origin:center}
.mailwin .win-bar{background:#f3f4f6;border-bottom:1px solid #e5e7eb;color:var(--gray)}
.mail-body{flex:1;display:flex;flex-direction:column;padding:1em 1.4em 1.1em;min-height:0}
.mw-zeile{display:flex;align-items:center;gap:.6em;padding:.45em 0;border-bottom:1px solid #eceef2;font-size:.86em}
.mw-label{color:var(--gray);min-width:3.6em}
.mw-chip{background:#eef3fb;border-radius:99px;padding:.15em .7em;font-size:.92em}
.mw-text{flex:1;font-size:.86em;line-height:1.5;padding:.9em 0;color:var(--navy)}
.mw-anhang{border-top:1px solid #eceef2;padding-top:.75em}
.mw-slots{display:grid;grid-template-columns:repeat(12,1.3em);justify-content:space-between}
.mw-slot{display:block;aspect-ratio:16/20;opacity:.18}
.mw-slot svg,.flug svg{display:block;width:100%;height:100%;fill:#fff;stroke:#7b98c0;stroke-width:1.6;stroke-linejoin:round}
.mw-slot.voll{opacity:1}
.mw-balken{margin:.6em 0 .35em}
.mw-balken i{width:0}
#mw-status{display:block;font-size:.72em;color:#0a7442;min-height:1.3em}
.mw-fuss{display:flex;justify-content:flex-end;padding-top:.8em}
.mw-senden{display:inline-flex;align-items:center;gap:.5em;background:#1a2d4b;color:#fff;font-weight:600;font-size:.86em;border-radius:.5em;padding:.55em 1.1em;transform-origin:center}
.mw-senden svg{width:1.1em;height:1.1em;fill:currentColor}
.flugbahn{position:absolute;inset:0;z-index:7;pointer-events:none}
.flug{position:absolute;left:0;top:0;width:1.7em;height:2.1em;opacity:0;filter:drop-shadow(0 .3em .5em rgba(0,0,0,.35))}
.maus,.flieger{position:absolute;left:0;top:0;z-index:8;opacity:0;pointer-events:none}
.maus{width:1.5em;height:1.8em;fill:#fff;stroke:#1a2d4b;stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 .2em .3em rgba(0,0,0,.4))}
.flieger{width:2.2em;height:2.2em;fill:#1a2d4b}
.gesendet-platz{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:6;pointer-events:none}
.gesendet{background:#fff;color:var(--navy);font-size:1.3em;font-weight:600;letter-spacing:-.01em;border-radius:.6em;padding:.8em 1.4em;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2.2em 5em rgba(0,0,0,.6);opacity:0}
.gesendet b{color:#00b765}
.motion .mailwin{opacity:0}
@container display (max-width:620px){
 .mailwin{left:2.5%;right:2.5%;width:auto;top:26%;bottom:2.5%;height:auto}
 .mail-body{padding:.5em .7em .5em}
 .mw-zeile{padding:.25em 0;font-size:.8em}.mw-text{font-size:.8em;padding:.4em 0}
 .mw-anhang{padding-top:.45em}.mw-balken{margin:.4em 0 .25em}.mw-fuss{padding-top:.4em}
 .mw-slots{grid-template-columns:repeat(12,1.1em)}.mw-senden{font-size:.8em;padding:.4em .9em}
 .gesendet{font-size:1.1em}
}
/* Endbild ohne Bewegung: die gesendete Mail. */
html:not(.motion) [data-panel=rechnungen] .term{display:none}
html:not(.motion) #result-invoices{transform:scale(.6)}
html:not(.motion) .mw-slot{opacity:1}
html:not(.motion) .mw-balken i{width:100%}
html:not(.motion) .gesendet{opacity:1}
html:not(.motion) .flugbahn,html:not(.motion) .maus,html:not(.motion) .flieger{display:none}
@container display (max-width:620px){
 html:not(.motion) #result-invoices{transform:scale(.3)}
}

/* v7: Abschnitt „So läuft es:“ zwischen Bühne und Bestand, vier Schritte nebeneinander, mobil untereinander. */
.ablauf{position:relative;z-index:1;padding:110px 24px 100px;color:var(--stage-fg);background:var(--stage-bg)}
.ablauf-inhalt{max-width:1120px;margin:0 auto;text-align:center}
.ablauf .eyebrow{font-size:11px;letter-spacing:.13em;color:#6be5a6}
.ablauf h2{font-size:clamp(30px,3.6vw,50px);line-height:1.08;letter-spacing:-.03em;margin:14px auto 18px;max-width:900px}
.ablauf-sub{font-size:clamp(16px,1.35vw,19px);line-height:1.5;color:var(--stage-muted);max-width:720px;margin:0 auto}
.schritte{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left}
.schritt{position:relative;padding:26px 22px 28px;border-radius:16px;background:radial-gradient(ellipse at 0 0,#18382c80,transparent 90%),linear-gradient(145deg,#171d1a,#0c100e);border:1px solid #29372f}
.schritt-nr{display:block;font-size:54px;line-height:1;font-weight:600;letter-spacing:-.04em;color:#6be5a6;margin-bottom:18px}
.schritt h3{font-size:19px;font-weight:600;line-height:1.2;margin:0 0 10px}
.schritt p{font-size:15px;line-height:1.5;color:var(--stage-muted);margin:0}
.kosten{max-width:720px;margin:52px auto 0;padding:30px 28px;border-radius:16px;border:1px solid #29372f;background:#0c100e;text-align:left}
.kosten h3{font-size:22px;letter-spacing:-.02em;margin:0 0 16px}
.kosten p{font-size:17px;line-height:1.5;margin:0 0 8px}
.kosten-fuss{display:block;margin-top:16px;font-size:12px;line-height:1.5;color:var(--stage-muted);opacity:.8}
.ablauf-cta{margin:40px 0 0}
.ablauf .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:10px;font-weight:600;font-size:16px;text-decoration:none;background:var(--green);color:var(--navy);transition:transform .15s}
.ablauf .btn:hover{transform:translateY(-1px)}
@media (max-width:767px){
 .ablauf{padding:70px 18px 70px}
 .ablauf h2{font-size:30px}.ablauf-sub{font-size:15px}
 .schritte{grid-template-columns:1fr;gap:12px;margin-top:34px}
 .schritt{padding:20px 18px 22px}.schritt-nr{font-size:42px;margin-bottom:12px}
 .schritt h3{font-size:17px}.schritt p{font-size:14px}
 .kosten{margin-top:36px;padding:22px 18px}.kosten h3{font-size:19px}.kosten p{font-size:15px}
 .ablauf .btn{font-size:14px}
}
/* v8: Schreibtisch mit Menüleiste, kein Logo. v9: ohne Dock. */
.mb-menus{display:flex;gap:1.1em;white-space:nowrap}
.mb-menus b{font-weight:600;color:#fff}
.mb-terminal,.mb-term .mb-finder{display:none}
.mb-term .mb-terminal{display:flex}
/* Tastenkappen und Suche */
.tasten{position:absolute;left:0;right:0;top:13%;display:flex;justify-content:center;gap:.8em;z-index:4;pointer-events:none}
.tasten kbd{font-family:inherit;font-size:1.4em;font-weight:600;line-height:1;background:linear-gradient(180deg,#f7f7f8,#dcdde1);color:#2b2f36;border-radius:.45em;padding:.7em 1.1em;box-shadow:0 .25em 0 #a9adb5,0 .6em 1.2em rgba(0,0,0,.4)}
.r-treffer.gewaehlt{box-shadow:inset 0 0 0 1px #00df7b}
/* Terminalfenster der Sitzung */
.sitzung{left:2%;top:10%;width:47%;height:76%}
.ordner-ico{display:inline-block;width:1.1em;height:.85em;background:#5aa0f0;border-radius:.12em;vertical-align:-.1em;margin-right:.45em}
.tab-row{flex:none;display:flex;align-items:stretch;height:1.6em;font-size:.72em;color:rgba(255,255,255,.55);background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.06)}
.tab{flex:1;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);white-space:nowrap;overflow:hidden}
.tab-plus{display:flex;align-items:center;padding:0 1em}
.t-zsh{margin:.12em 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-befehl{color:#fff}
.t-install{margin:.35em 0 .2em}
.t-balken{width:60%;background:rgba(255,255,255,.14);margin:.45em 0}
.t-balken i{width:0}
.t-aufgabe{margin-top:.7em}
.t-aufgabe .t-prompt{margin-top:.3em}
/* Browserfenster ohne echte Adresse */
.browser{right:4%;top:14%;width:42%}
.adresse{justify-self:center;display:flex;align-items:center;gap:.4em;background:#fff;border:1px solid #e5e7eb;border-radius:.4em;padding:.15em 1.4em;font-size:.68em;color:var(--gray);white-space:nowrap}
.schloss{display:inline-block;width:.55em;height:.7em;border:1px solid currentColor;border-radius:.1em;position:relative}
.schloss::before{content:'';position:absolute;left:.08em;right:.08em;top:-.4em;height:.4em;border:1px solid currentColor;border-bottom:0;border-radius:.3em .3em 0 0}
.browser-body{padding:1.3em 1.5em 1.5em;display:flex;flex-direction:column;gap:.9em;text-align:left}
.marke{display:flex;align-items:center;gap:.5em;font-weight:600;font-size:1.05em;letter-spacing:-.01em;color:var(--navy)}
.haken{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;background:#1a2d4b;color:#fff;font-size:.85em;font-weight:600}
.abo-karte{border:1px solid #e5e7eb;border-radius:.6em;padding:1em 1.1em 1.1em;display:flex;flex-direction:column;gap:.3em}
.abo-karte strong{font-size:1.25em;letter-spacing:-.01em;line-height:1.2}
.abo-inkl{font-size:.8em;color:var(--gray)}
.abo-karte .r-knopf{margin-top:.6em}
.cap-fuss{display:block;margin-top:8px;font-size:11px;line-height:1.45;color:var(--stage-muted);opacity:.8}
/* Endbilder ohne Bewegung */
html:not(.motion) [data-panel=sitzung] .t-aufgabe{display:none}
html:not(.motion) .t-balken i{width:100%}
html:not(.motion) .scene-device+.scene-caption{margin-top:70px}
html:not(.motion) .screen-scene .term{transform:none}
@media (max-width:767px){
 .cap-fuss{font-size:10px;margin-top:6px}
 html:not(.motion) .scene-device+.scene-caption{margin-top:50px}
}
@container display (max-width:620px){
 .browser{left:7%;right:7%;width:auto;top:11%}
 .browser-body{padding:.8em .9em .9em;gap:.45em}
 .abo-karte{padding:.8em .9em .9em;gap:.2em}
 .abo-karte .r-knopf{margin-top:.4em}
}

/* Hero-Unterzeile (Christian 26.10.) */
.hero-sub{max-width:640px;margin:22px auto 0;font-size:clamp(16px,1.35vw,20px);line-height:1.45;color:var(--stage-muted)}
@media(max-width:600px){.hero-sub{font-size:15px;margin-top:14px}}

/* Einschub in einer Zeile, Apple-Systemschrift (Christian 26.10.) */
.einschub{max-width:1100px}
.einschub p{display:inline;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Inter,Arial,sans-serif}
.einschub .einschub-end{margin:0 0 0 .28em}
@media (max-width:767px){.einschub p{display:block}.einschub .einschub-end{margin:0}}