@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/font-2c32b9b3.woff2) format('woff2');
  
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/font-2c32b9b3.woff2) format('woff2');
  
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url(/assets/fonts/font-b641ecaa.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url(/assets/fonts/font-52208453.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url(/assets/fonts/font-694b9d04.woff2) format('woff2');
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f5f5f7;--surface:#ffffff;--ink:#1d1d1f;--ink2:rgba(29,29,31,.78);
  --accent:#00456f;--cyan:#00a0d0;--hairline:rgba(29,29,31,.12);
  --glass:rgba(255,255,255,.62);--glassbrd:rgba(255,255,255,.5);
  --dark:#0b0d14;--shadow:0 30px 80px rgba(29,29,31,.16);
  --display:system-ui,-apple-system,sans-serif;--body:system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0b0b0f;--surface:#16161c;--ink:#f5f5f7;--ink2:rgba(245,245,247,.7);
    --accent:#3db6e2;--hairline:rgba(245,245,247,.14);
    --glass:rgba(22,22,28,.6);--glassbrd:rgba(255,255,255,.12);--shadow:0 30px 80px rgba(0,0,0,.5)}
}
:root[data-theme="dark"]{--bg:#0b0b0f;--surface:#16161c;--ink:#f5f5f7;--ink2:rgba(245,245,247,.7);
  --accent:#3db6e2;--hairline:rgba(245,245,247,.14);--glass:rgba(22,22,28,.6);--glassbrd:rgba(255,255,255,.12);--shadow:0 30px 80px rgba(0,0,0,.5)}
:root[data-theme="light"]{--bg:#f5f5f7;--surface:#ffffff;--ink:#1d1d1f;--ink2:rgba(29,29,31,.78);
  --accent:#00456f;--hairline:rgba(29,29,31,.12);--glass:rgba(255,255,255,.62);--glassbrd:rgba(255,255,255,.5);--shadow:0 30px 80px rgba(29,29,31,.16)}
html{scroll-behavior:smooth}
/* Die Kopfzeile ist fixiert und ~93 px hoch. Ohne diese Zeile landet jedes
   Sprungziel darunter, bei #faq besonders auffaellig, weil das Ziel ein
   leeres <div> ohne eigene Hoehe ist. */
#werkstatt,#rechner,#leistungen,#faq,[id]{scroll-margin-top:112px}
body{font:17px/1.6 var(--body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--cyan);color:#04121a}
h1,h2,h3{font-family:var(--display)}

/* ── Nav ── */
nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:40;
  display:flex;align-items:center;gap:26px;padding:10px 12px 10px 20px;border-radius:999px;
  background:var(--glass);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glassbrd);box-shadow:0 10px 34px rgba(0,0,0,.12)}
nav .logo{height:19px}
nav .links{display:flex;gap:20px;font-size:14.5px;font-weight:500;color:var(--ink2)}
nav.solid .links{color:var(--ink2)}
nav .links a:hover{opacity:.75}
nav .ncta{background:#f5f5f7;color:#1d1d1f;border-radius:999px;padding:9px 18px;
  font-size:14px;font-weight:600;line-height:1.25;text-align:center;
  transition:transform .18s var(--ease)}
nav.solid .ncta{background:var(--ink);color:var(--bg)}
nav .ncta:active{transform:scale(.96)}
nav .ntheme{font-size:13px;font-weight:600;color:var(--ink2);border:1.5px solid var(--hairline);
  border-radius:999px;padding:8px 14px;transition:transform .18s var(--ease)}
nav.solid .ntheme{color:var(--ink2);border-color:var(--hairline)}
nav .ntheme:active{transform:scale(.96)}
@media (prefers-reduced-transparency: reduce){nav{background:rgba(10,12,20,.9)}nav.solid{background:var(--surface)}}

/* ── Hero: Tag -> Nacht ── */
.heroWrap{height:170vh;height:170dvh;position:relative}
.hero{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#101c3a;color:#f2eee2}
.hero .layer{position:absolute;inset:-3%;background:url(/assets/img/hero-1920-806c0a3d.webp) center 68%/cover;
  animation:drift 46s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.04) translateY(-.5%)}}
.hero .gradeDim{position:absolute;inset:0;background:linear-gradient(#0c1742 0%,rgba(12,23,66,.35) 45%,rgba(16,20,58,.55) 100%);mix-blend-mode:multiply;opacity:0}
.hero .gradeGlow{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(38% 30% at 73% 58%,rgba(255,128,156,.55),transparent 72%),
             radial-gradient(22% 16% at 12% 60%,rgba(255,128,156,.28),transparent 70%),
             radial-gradient(70% 18% at 50% 87%,rgba(250,140,165,.3),transparent 75%)}
.hero .shade{position:absolute;inset:0;background:linear-gradient(rgba(6,8,20,.24),transparent 32%,transparent 70%,rgba(6,8,20,.48))}
.hero .content{position:absolute;z-index:3}
.hero h1{letter-spacing:-.022em;font-weight:800;text-wrap:balance;line-height:1.02}
.hero h1 em{font-style:normal;color:#7fdcf5}
.hero .sub{color:rgba(242,238,226,.94);text-wrap:pretty;text-shadow:0 1px 22px rgba(6,10,30,.5)}
.btn{background:#f2eee2;color:#14172a;border-radius:999px;padding:15px 30px;font-size:16px;font-weight:600;
  transition:transform .25s var(--ease),box-shadow .25s}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 36px rgba(6,10,30,.4)}
.btn:active{transform:scale(.96)}
.btn.quiet{background:transparent;color:#f2eee2;border:1.5px solid rgba(242,238,226,.5)}
.hero .nightline{position:absolute;left:0;right:0;bottom:14vh;bottom:14dvh;text-align:center;
  opacity:0;transform:translateY(26px);z-index:3;padding:0 6vw}
.hero .nightline p{font-size:clamp(22px,2.6vw,36px);line-height:1.3;font-weight:500}
.hero .nightline span{font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  opacity:.65;display:block;margin-top:14px}
/* Overlay-Layout: zentriert (Default) */
.hero .content{left:0;right:0;top:18vh;text-align:center;padding:0 6vw}
.hero h1{font-size:clamp(46px,7vw,100px);text-transform:uppercase;letter-spacing:-.008em}
.hero .sub{margin:22px auto 0;max-width:600px;font-size:19px;line-height:1.55}
.hero .ctaRow{margin-top:30px;display:flex;gap:14px;justify-content:center}

/* ── Sektionstitel ── */
.sect{max-width:1200px;margin:0 auto;padding:120px 32px 0}
.sect h2{font-size:clamp(30px,4vw,54px);line-height:1.06;letter-spacing:-.018em;font-weight:800;text-wrap:balance}
.sect .slede{margin-top:14px;max-width:640px;font-size:18px;line-height:1.55;color:var(--ink2)}

/* ── Tempo ── */
.tempoWrap{height:300vh;height:300dvh;position:relative}
.tempo{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#06070f;color:#f5f5f7}
.tempo .panel{position:absolute;inset:0;will-change:transform,opacity,filter}
.tempo .pimg{position:absolute;inset:-4% 0;background-size:cover;background-position:center;will-change:transform}
.tempo .surf .pimg{background-image:url(/assets/img/tempo-surf-1920-3336f740.webp)}
.tempo .sprint .pimg{background-image:url(/assets/img/tempo-sprint-1920-19743ef1.webp)}
.tempo .pshade{position:absolute;inset:0;background:linear-gradient(rgba(4,6,14,.3),transparent 40%,rgba(4,6,14,.72))}
.streaks{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.45}
.streaks i{position:absolute;left:-40%;height:2px;width:34%;border-radius:2px;animation:shoot linear infinite}
@keyframes shoot{to{transform:translateX(520%)}}
.tempo .ptext{position:absolute;left:6vw;bottom:12vh;bottom:12dvh;z-index:4;max-width:760px}
.tempo h2{font-size:clamp(36px,5.2vw,76px);line-height:1.16;letter-spacing:-.02em;font-weight:800}
.tempo h2 .line{display:block;overflow:hidden}
.tempo h2 .line span{display:inline-block;transform:translateY(110%);transition:transform .7s cubic-bezier(.2,.7,.1,1)}
.tempo .on h2 .line span{transform:none}
.tempo .ptxt{margin-top:18px;max-width:560px;font-size:17px;line-height:1.6;opacity:0;transform:translateY(16px);
  transition:opacity .6s .25s,transform .6s .25s;text-shadow:0 1px 18px rgba(4,6,14,.7)}
.tempo .on .ptxt{opacity:.95;transform:none}

/* ── Werkstatt: Scrollytelling ── */
.wsWrap{position:relative;margin-top:90px}
.ws{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;padding:80px 0 50px;z-index:0}
/* Marken-Blau-Glow: an body gehaengt (fixed), damit er ab der Werkstatt nahtlos in
   alle folgenden Abschnitte (Rechner/Rail/FAQ/Schluss-CTA) weiterlaeuft, statt an
   der Werkstatt hart abzuschneiden. Ueber Hero/Tempo unsichtbar, weil die dort
   liegenden Sections ihr eigenes opakes Bild/Background haben. */
@media (prefers-color-scheme:dark){body{
  background:
    radial-gradient(60% 40% at 10% 12%,rgba(61,182,226,.34),transparent 68%),
    radial-gradient(55% 40% at 92% 46%,rgba(0,160,208,.28),transparent 68%),
    radial-gradient(55% 40% at 12% 82%,rgba(61,182,226,.24),transparent 68%),
    var(--bg);
  background-attachment:fixed}}
:root[data-theme="dark"] body{
  background:
    radial-gradient(60% 40% at 10% 12%,rgba(61,182,226,.34),transparent 68%),
    radial-gradient(55% 40% at 92% 46%,rgba(0,160,208,.28),transparent 68%),
    radial-gradient(55% 40% at 12% 82%,rgba(61,182,226,.24),transparent 68%),
    var(--bg);
  background-attachment:fixed}
:root[data-theme="light"] body{background:var(--bg)}
/* Dieselben weichen Flaechen wie im Dunkelmodus, nur andersherum gedacht.
   Auf dunklem Grund leuchtet ein heller Kreis; auf hellem Grund sieht man ihn
   nicht. Im Hellen tinten die Kreise deshalb leicht INS Firmenblau statt
   heraus, und mit sehr niedriger Deckkraft: es soll Atmosphaere sein, kein
   Farbverlauf. Dieselben Positionen und Radien wie dunkel, damit beide
   Fassungen dieselbe Flaechenaufteilung haben.
   Der :not()-Wachposten sorgt dafuer, dass ein per Umschalter erzwungenes
   Dunkel gewinnt, auch wenn das System hell steht. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) body{
    background:
      radial-gradient(60% 40% at 10% 12%,rgba(0,160,208,.40),transparent 68%),
      radial-gradient(55% 40% at 92% 46%,rgba(0,160,208,.34),transparent 68%),
      radial-gradient(55% 40% at 12% 82%,rgba(0,160,208,.28),transparent 68%),
      var(--bg);
    background-attachment:fixed}
}
:root[data-theme="light"] body{
  background:
    radial-gradient(60% 40% at 10% 12%,rgba(0,160,208,.40),transparent 68%),
    radial-gradient(55% 40% at 92% 46%,rgba(0,160,208,.34),transparent 68%),
    radial-gradient(55% 40% at 12% 82%,rgba(0,160,208,.28),transparent 68%),
    var(--bg);
  background-attachment:fixed}
.wsInner{max-width:1200px;margin:0 auto;padding:0 32px;width:100%}
.wsTitle{font-size:clamp(28px,3.6vw,48px);font-weight:800;letter-spacing:-.015em}
.wsLede{margin:8px 0 18px;font-size:16px;color:var(--ink2)}
.wsHead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:16px}
.wsHead .wsIdx{font-size:14px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.wsDots{display:flex;gap:8px}
.wsDots i{width:8px;height:8px;border-radius:50%;background:var(--hairline);transition:background .3s,transform .3s var(--ease)}
.wsDots i.on{background:var(--accent);transform:scale(1.25)}
.wsStage{position:relative;min-height:430px}
.wcard{position:absolute;inset:0;background:var(--surface);border-radius:26px;box-shadow:var(--shadow);
  padding:42px;display:flex;flex-direction:column;will-change:transform,opacity;
  visibility:hidden}
.wcard .wk{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.wcard h3{font-size:clamp(24px,2.6vw,36px);font-weight:800;letter-spacing:-.014em;margin:10px 0 6px}
.wcard .ersetzt{font-size:15.5px;color:var(--ink2);margin-bottom:16px}
.wcard .ersetzt b{color:var(--ink);font-weight:600}
.wcard p.d{font-size:16.5px;line-height:1.62;color:var(--ink2);max-width:46em}
.wcard p.d+p.d{margin-top:10px}
.wcard .dock{font-weight:500;color:var(--ink)}
.wcard .dock::before{content:"";display:inline-block;width:8px;height:9px;margin-right:8px;background:var(--accent);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.wcard .wtags{margin-top:auto;padding-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.wcard .wtags span{font-size:13px;font-weight:500;border:1px solid var(--hairline);border-radius:999px;
  padding:6px 13px;color:var(--ink2)}

/* ── Bot-Rechner ── */
.calc{max-width:860px;margin:40px auto 0;padding:0 32px}
.botCard{background:var(--dark);color:#f5f5f7;border-radius:26px;box-shadow:var(--shadow);overflow:hidden}
.botHead{display:flex;align-items:center;gap:14px;padding:22px 28px;border-bottom:1px solid rgba(245,245,247,.12)}
.botHead b{font-size:17px;display:block}
.botHead small{font-size:13px;color:rgba(245,245,247,.6)}
.botCard.light{background:var(--surface);color:var(--ink)}
.botCard.light .botHead{border-color:var(--hairline)}
.botCard.light .botHead small{color:var(--ink2)}
.botCard.light .bmsg.bot{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.botCard.light .typing i{background:var(--ink2)}
.botCard.light .chip2{border-color:var(--hairline);color:var(--ink)}
.botCard.light .chip2:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.botCard.light .bok{background:var(--accent);color:#fff}
.botAvatar{width:38px;height:44px;flex:none;background:#01A2D3;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.botLog{padding:24px 28px 8px;display:flex;flex-direction:column;gap:12px;min-height:220px;max-height:430px;overflow-y:auto;scrollbar-width:thin}
.bmsg{max-width:82%;padding:13px 18px;border-radius:18px;font-size:15.5px;line-height:1.55;
  opacity:0;transform:translateY(10px) scale(.97);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.bmsg.in{opacity:1;transform:none}
.bmsg.bot{background:rgba(245,245,247,.1);border-bottom-left-radius:6px;align-self:flex-start}
.bmsg.user{background:var(--cyan);color:#04121a;font-weight:600;border-bottom-right-radius:6px;align-self:flex-end}
.bmsg.result{max-width:100%;background:rgba(245,245,247,.08);border:1px solid rgba(245,245,247,.16);align-self:stretch;text-align:center;padding:24px}
.bmsg.result .big{font-size:clamp(44px,5vw,68px);font-weight:800;letter-spacing:-.02em;color:#7fdcf5;font-variant-numeric:tabular-nums;line-height:1.05}
.bmsg.result .unit{font-size:15px;font-weight:600;margin-top:4px}
.bmsg.result .sub2{margin-top:12px;font-size:14.5px;color:rgba(245,245,247,.7)}
.bmsg.result .sub2 b{color:#f5f5f7;font-variant-numeric:tabular-nums}
.typing{display:inline-flex;gap:5px;padding:15px 18px}
.typing i{width:7px;height:7px;border-radius:50%;background:rgba(245,245,247,.6);animation:tp 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{40%{transform:translateY(-5px);opacity:1}0%,80%,100%{transform:none;opacity:.5}}
.botInput{padding:14px 28px 26px;display:flex;flex-wrap:wrap;gap:10px;min-height:74px;align-content:flex-start}
.botInput .chip2{border:1.5px solid rgba(245,245,247,.32);border-radius:999px;padding:12px 20px;font-size:15px;
  font-weight:500;color:#f5f5f7;transition:all .2s var(--ease)}
.botInput .chip2:hover{background:#f5f5f7;color:#14172a;border-color:#f5f5f7}
.botInput .chip2:active{transform:scale(.96)}
.botInput .bslider{flex:1 1 100%;display:flex;align-items:center;gap:16px}
.botInput .bslider output{font-weight:700;color:#7fdcf5;font-variant-numeric:tabular-nums;min-width:70px;text-align:right}
.botInput .bok{background:#f5f5f7;color:#14172a;border-radius:999px;padding:11px 22px;font-weight:600;font-size:14.5px}
.botInput .bok:active{transform:scale(.96)}
.calcCard{background:var(--dark);color:#f5f5f7;border-radius:28px;box-shadow:var(--shadow);
  padding:48px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.calcCard h3{font-size:clamp(24px,2.8vw,36px);font-weight:800;letter-spacing:-.014em;margin-bottom:8px}
.calcCard .csub{font-size:16px;color:rgba(245,245,247,.66);margin-bottom:34px;max-width:32em}
.slider{margin-bottom:28px}
.slider label{display:flex;justify-content:space-between;font-size:15px;font-weight:500;margin-bottom:12px}
.slider label output{font-weight:700;color:#7fdcf5;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;appearance:none;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan) var(--fill,50%),rgba(245,245,247,.18) var(--fill,50%));outline:none}
input[type=range]::-webkit-slider-thumb{appearance:none;width:26px;height:26px;border-radius:50%;
  background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.4);cursor:grab;transition:transform .2s}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15);cursor:grabbing}
.calcOut{text-align:center;border-left:1px solid rgba(245,245,247,.14);padding-left:56px}
.calcOut .big{font-size:clamp(52px,6vw,84px);font-weight:800;letter-spacing:-.025em;line-height:1;
  color:#7fdcf5;font-variant-numeric:tabular-nums}
.calcOut .unit{font-size:16px;font-weight:600;margin-top:6px}
.calcOut .sub2{margin-top:18px;font-size:15px;color:rgba(245,245,247,.66)}
.calcOut .sub2 b{color:#f5f5f7;font-variant-numeric:tabular-nums}
.calcOut .claim{margin-top:22px;font-size:16.5px;font-weight:600}
.calcnote{margin-top:14px;font-size:13px;color:var(--ink2)}
.techgrid{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.techgrid span{border:1.5px solid var(--hairline);border-radius:999px;padding:11px 20px;font-size:15px;font-weight:500;
  transition:border-color .2s,color .2s,transform .25s var(--ease)}
.techgrid span:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.teaser{margin-top:26px;font-size:15px;color:var(--ink2)}
.teaser .soon{border:1px solid var(--hairline);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600;margin-left:6px}

/* ── Prozess / Rail / FAQ / Finale / Sheet ── */
.proc{max-width:1200px;margin:40px auto 0;padding:0 32px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;counter-reset:step}
.pstep{background:var(--surface);border-radius:22px;box-shadow:var(--shadow);padding:30px;
  transform:translateY(22px);opacity:0;transition:transform .7s var(--ease),opacity .6s}
.pstep.in{transform:none;opacity:1}
.pstep::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  font-size:14px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.pstep h3{font-size:19px;font-weight:700;margin:10px 0 8px}
.pstep p{font-size:15px;line-height:1.6;color:var(--ink2)}
.rail{margin:36px auto 0;max-width:1200px;padding:0 32px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.rail .card{border-radius:26px;background:var(--surface);
  box-shadow:var(--shadow);padding:34px;display:flex;flex-direction:column;gap:12px;min-height:240px}
.rail .card b{font-size:21px;font-weight:700}
.rail .card p{font-size:15.5px;line-height:1.55;color:var(--ink2)}
.rail .card .ctags{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:10px}
.rail .card .ctags span{font-size:13px;font-weight:500;border:1px solid var(--hairline);border-radius:999px;padding:6px 13px;color:var(--ink2)}
.faqbot{max-width:860px;margin:36px auto 0;padding:0 32px}
.faq{max-width:840px;margin:36px auto 0;padding:0 32px}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;font-size:18px;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;font-weight:400;color:var(--accent);
  transition:transform .35s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .fa{padding:0 0 24px;font-size:16px;line-height:1.65;color:var(--ink2);max-width:44em}
.fin{max-width:1200px;margin:0 auto;padding:130px 32px 90px;text-align:center}
.fin h2{font-size:clamp(36px,5vw,68px);line-height:1.03;letter-spacing:-.02em;font-weight:800}
.fin p{margin:18px auto 0;max-width:520px;font-size:18px;color:var(--ink2)}
.fin .btn2{margin-top:30px;background:var(--accent);color:#fff;border-radius:999px;padding:16px 32px;
  font-size:16px;font-weight:600;transition:transform .25s var(--ease),box-shadow .25s}
.fin .btn2:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,105,168,.35)}
.fin .btn2:active{transform:scale(.96)}
footer{border-top:1px solid var(--hairline)}
footer .fwrap{max-width:1200px;margin:0 auto;padding:34px 32px;display:flex;flex-wrap:wrap;gap:14px 34px;
  justify-content:space-between;font-size:14px;color:var(--ink2)}
footer a:hover{color:var(--ink)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;z-index:61;width:min(660px,100vw);
  max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow-y:auto;touch-action:pan-y;
  /* ponytail: Inhalt (Kalender-Slots+Formular) kann hoeher werden als der Bildschirm; Drag-zum-Schliessen
     startet nur noch am .grab-Griff (touch-action:none dort), der Rest bleibt normal scrollbar */
  transform:translate(-50%,105%);will-change:transform;
  background:var(--glass);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glassbrd);border-bottom:none;border-radius:26px 26px 0 0;
  box-shadow:0 -20px 70px rgba(0,0,0,.3);padding:14px 34px 40px;user-select:none}
@media (prefers-reduced-transparency: reduce){.sheet{background:var(--surface);backdrop-filter:none}}
.grab{width:44px;height:5px;border-radius:3px;background:var(--hairline);margin:2px auto 20px;touch-action:none}
.sheet .q{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.sheet .fbar{height:4px;border-radius:2px;background:var(--hairline);margin:12px 0 20px;overflow:hidden}
.sheet .fbar i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px;transition:width .45s var(--ease)}
.sheet h3{font-size:23px;font-weight:700;margin-bottom:18px;text-wrap:balance}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{border:1.5px solid var(--hairline);border-radius:999px;padding:13px 22px;font-size:16px;font-weight:500;
  transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s}
.opt:hover{border-color:var(--accent);color:var(--accent)}
.opt:active{transform:scale(.96)}
.fbody{transition:opacity .22s,transform .22s}
.fbody.out{opacity:0;transform:translateY(8px)}
.fsum{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 16px}
.chip{border:1px solid var(--hairline);border-radius:999px;padding:6px 14px;font-size:13.5px;color:var(--ink2)}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.slot{border:1.5px solid var(--hairline);border-radius:14px;padding:15px 8px;font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;transition:all .2s}
.slot:hover,.slot.sel{background:var(--accent);border-color:var(--accent);color:#fff}
.slot:disabled{opacity:.4;cursor:default}
.slotsMsg{font-size:14px;color:var(--ink2);padding:8px 2px}
.slotsMsg a{color:var(--accent);font-weight:600}
.bookForm{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.bookForm input[type=text],.bookForm input[type=email]{width:100%;border:1.5px solid var(--hairline);
  border-radius:12px;padding:13px 14px;font-size:15px;font-family:inherit;background:var(--bg);color:var(--ink)}
.bookForm input:focus{outline:none;border-color:var(--accent)}
.bookForm .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.bookSubmit{background:var(--accent);color:#fff;border-radius:999px;padding:15px 28px;font-size:16px;
  font-weight:700;font-family:inherit;transition:transform .18s var(--ease),box-shadow .18s var(--ease),opacity .18s}
.bookSubmit:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(0,105,168,.35)}
.bookSubmit:active{transform:scale(.97)}
.bookSubmit:disabled{opacity:.5;transform:none;box-shadow:none;cursor:default}
.bookErr{font-size:13.5px;color:#e8564a;margin-top:2px}
.bookDone{padding:8px 2px}
.bookDone h4{font-size:19px;font-weight:700;margin-bottom:6px}
.bookDone p{font-size:14.5px;color:var(--ink2);line-height:1.55}
.sfoot{margin-top:18px;font-size:13px;color:var(--ink2)}
.fback{margin-top:16px;font-size:14px;font-weight:500;color:var(--accent)}
@media (prefers-reduced-motion: reduce){
  .hero .layer{animation:none}
  .pstep{transition:opacity .3s;transform:none}
  .sheet{transition:opacity .25s}
  .streaks i{animation-duration:60s}
}
@media (max-width:900px){
  nav .links{display:none}
  .calcCard{grid-template-columns:1fr;padding:34px;gap:36px}
  .calcOut{border-left:none;padding-left:0;border-top:1px solid rgba(245,245,247,.14);padding-top:32px}
  .tempo .ptext{left:24px;right:24px;bottom:14vh;bottom:14dvh}
  .wcard{padding:28px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .wsStage{min-height:520px}
  .ws{padding:56px 0 30px}
  .wsLede{margin:6px 0 14px}
  .wsHead{margin-bottom:12px}
}
.vroot .hero h1{font-family:'Cabinet Grotesk',sans-serif}


.navBurger{display:none;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--ink2);flex:none}
nav.solid .navBurger{color:var(--ink2)}
.navMobileScrim{position:fixed;inset:0;background:rgba(6,8,20,.55);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:39}
.navMobileScrim.on{opacity:1;pointer-events:auto}
.navMobilePanel{position:fixed;top:78px;left:16px;right:16px;background:var(--surface);border-radius:20px;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:2px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .25s var(--ease),opacity .25s;z-index:41}
.navMobilePanel.on{transform:translateY(0);opacity:1;pointer-events:auto}
.navMobilePanel a{padding:14px 16px;border-radius:12px;font-size:16px;font-weight:600;color:var(--ink)}
.navMobilePanel a:active{background:var(--bg)}
@media(max-width:900px){.navBurger{display:flex}}
@media(max-width:600px){nav{gap:10px;padding:8px 8px 8px 14px}nav .ncta{display:none}
  .sheet{padding:14px 20px 28px}
  .opts{flex-direction:column}
  .opt{width:100%;text-align:left}
  #faqInput{flex-direction:column;align-items:stretch}
  #faqInput .chip2{width:100%;text-align:left}
  .botInput .bslider{flex-wrap:wrap;row-gap:12px}
  .botInput .bslider input[type=range]{flex:1 1 100%}
  #navBurger,#themeBtn{width:44px!important;height:44px!important} /* Tippziel: 34px unterschreitet 44px-Empfehlung, #themeBtn setzt Groesse inline */
}
.navBurger line{transition:transform .25s var(--ease),opacity .2s;transform-origin:12px 12px}
.navBurger.on line:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navBurger.on line:nth-child(2){opacity:0}
.navBurger.on line:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.liquidGlass{position:relative;overflow:hidden;isolation:isolate}
.liquidGlass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -1px 2px rgba(0,0,0,.08)}
.liquidGlass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 68%,rgba(255,255,255,.16) 100%);
  mix-blend-mode:overlay}
@media (prefers-color-scheme: dark){.liquidGlass::before{box-shadow:inset 0 1px 1px rgba(255,255,255,.16),inset 0 -1px 2px rgba(0,0,0,.35)}}
:root[data-theme="dark"] .liquidGlass::before{box-shadow:inset 0 1px 1px rgba(255,255,255,.16),inset 0 -1px 2px rgba(0,0,0,.35)}
.legalScrim{position:fixed;inset:0;background:rgba(6,8,20,.6);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:59}
.legalScrim.on{opacity:1;pointer-events:auto}
.legalModal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);width:min(680px,90vw);max-height:82vh;background:var(--surface);color:var(--ink);border-radius:20px;box-shadow:var(--shadow);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);display:flex;flex-direction:column}
.legalModal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.legalHead{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid var(--hairline);flex:none}
.legalHead h2{font-size:20px;font-weight:700;margin:0}
.legalClose{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);font-size:16px;flex:none;border:none;cursor:pointer;color:var(--ink);font-family:inherit}
.legalBody{padding:26px;overflow-y:auto;font-size:14.5px;line-height:1.65;color:var(--ink2)}
.legalBody h3{font-size:15.5px;font-weight:700;color:var(--ink);margin:26px 0 8px}
.legalBody h3:first-child{margin-top:0}
.legalBody p{margin:0 0 12px}
.legalBody a{color:var(--accent);text-decoration:underline}
@media(max-width:600px){.legalModal{width:94vw;max-height:88vh}.legalBody{padding:20px}}


/* Handy: kleinere Bildvarianten. 1920px auf einem Telefon auszuliefern kostet Datenvolumen ohne sichtbaren Gewinn. */
@media (max-width:760px){
  .hero .layer{background-image:url(/assets/img/hero-960-806c0a3d.webp)}
  .tempo .surf .pimg{background-image:url(/assets/img/tempo-surf-960-3336f740.webp)}
  .tempo .sprint .pimg{background-image:url(/assets/img/tempo-sprint-960-19743ef1.webp)}
}


/* ── Ohne JavaScript: Karten und Fragen bleiben lesbar ──────────────────────
   Beides steht im HTML, damit Suchmaschinen und KI-Dienste es sehen. Erst das
   Skript stapelt die Karten uebereinander (.on) und ersetzt die Fragenliste
   durch den Chat. Faellt das Skript aus, bleibt eine normale, lesbare Seite. */
.wsStage:not(.on){min-height:0;display:flex;flex-direction:column;gap:20px}
.wsStage:not(.on) .wcard{position:static;visibility:visible}
.faqQuelle{max-width:860px;margin:26px auto 0;padding:0 32px}
.faqQuelle details{border-bottom:1px solid var(--hairline);padding:14px 0}
.faqQuelle summary{cursor:pointer;font-weight:600;font-size:16.5px}
.faqQuelle summary::marker{color:var(--accent)}
.faqQuelle .a{margin:10px 0 0;color:var(--ink2);line-height:1.62}


/* ── Handy: weniger Scrollweg, groessere Schrift, groessere Tippziele ───────
   Gemessen am 03.09.2026: die Startseite war auf dem Telefon 13.635 px lang, 
   18 Bildschirme. Allein Titelbild, Tempo-Panels und Werkstatt machten 10,6
   davon aus. Am Schreibtisch traegt dieser Scrollweg die Erzaehlung; auf einem
   Telefon ist er Ziehen mit dem Daumen. Die Abschnitte behalten ihre Wirkung,
   bekommen aber deutlich weniger Weg. */
@media (max-width:760px){
  .heroWrap{height:120vh;height:120dvh}
  .tempoWrap{height:190vh;height:190dvh}

  /* Kleine Schrift hochziehen: 13px liest sich auf einem Telefon in der Hand
     schlechter als dieselbe Groesse am Schreibtisch. */
  .wcard .wk,.botHead small,.calcnote{font-size:14px}
  /* .sheet .q ist die Schrittzeile der Buchungsstrecke, genau die Stelle, an
     der jemand mit dem Telefon in der Hand liest, was als Naechstes kommt. */
  .sheet .q{font-size:14px}
  .wcard .wtags span,.rail .card .ctags span{font-size:14px;padding:7px 14px}

  /* Die Fusszeilen-Verweise standen 22px hoch nebeneinander, zu klein zum
     Treffen. Verweise IM Fliesstext bleiben, wie sie sind: dort ist die
     Zeilenhoehe das Ziel, nicht der Verweis. */
  footer .fwrap>div{gap:8px 22px}
  footer .fwrap>div a{display:inline-flex;align-items:center;min-height:44px}
}