@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 ── */
/* Zentriert ueber left/right/margin statt left:50%+transform. Mit left:50%
   war der Platz nach rechts das Ende des Fensters, die Leiste konnte also
   nie breiter als die HALBE Fensterbreite werden. Bei 1280 px waren das
   640 px: zu wenig fuer vier Menuepunkte plus Knopf, also wurde das Logo
   zusammengequetscht (30 statt 68 px) und der Knopf brach auf drei Zeilen.
   Mit drei Punkten fiel es nicht auf, mit vier sofort. Gemessen 15.09.2026. */
nav{position:fixed;top:18px;left:0;right:0;margin-inline:auto;
  width:max-content;max-width:calc(100vw - 32px);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;flex:0 0 auto}
/* Sonst sind Logo und Knopf die Ersten, die nachgeben. */
nav .ncta{flex:0 0 auto;white-space:nowrap}
nav .ntheme{flex:0 0 auto}
nav .links{min-width:0}
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}
}