/* ============================================================
   rundbit.de – Stylesheet
   Schriften selbst gehostet (SIL Open Font License, siehe fonts/)
   ============================================================ */
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk.woff2") format("woff2-variations");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono.woff2") format("woff2-variations");font-weight:100 800;font-style:normal;font-display:swap}
:root{
  --ink:#15191C; --ink-2:#1E2428; --accent:#E2641E; --accent-hi:#F07A36; --paper:#F5F4EF;
  --on-ink:#F5F4EF; --on-ink-soft:#A3ADB0; --on-ink-line:rgba(245,244,239,.14);
  --light-bg:#F5F4EF; --light-text:#15191C; --light-soft:#5E6A6E; --light-line:#DAD8CF; --light-raise:#FFFFFF;
  --head:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --wrap:1180px; --pad:clamp(20px,4vw,40px);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --light-bg:#1C2226; --light-text:#F5F4EF; --light-soft:#A3ADB0; --light-line:rgba(245,244,239,.14); --light-raise:#242B30;}}
:root[data-theme="dark"]{--light-bg:#1C2226; --light-text:#F5F4EF; --light-soft:#A3ADB0; --light-line:rgba(245,244,239,.14); --light-raise:#242B30;}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);background:var(--ink)}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--on-ink);background:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,dl,dd,figure{margin:0;padding:0} ul{list-style:none}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--ink);padding:8px 14px;z-index:50}
.skip:focus{left:8px}

/* Kopf */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(21,25,28,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--on-ink-line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.brand{display:block;width:118px}
nav ul{display:flex;gap:28px;font-size:15px}
nav a{text-decoration:none;color:var(--on-ink-soft)}
nav a:hover{color:var(--on-ink)}
.nav-cta{color:var(--on-ink)!important;border-bottom:2px solid var(--accent);padding-bottom:2px}
@media (max-width:820px){nav li:not(:last-child){display:none}}

/* Hero */
.hero{position:relative;overflow:hidden;padding:clamp(48px,8vw,96px) 0 clamp(56px,8vw,104px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px)}
.hero h1{font-family:var(--head);font-weight:700;font-size:clamp(46px,7.4vw,104px);line-height:.95;letter-spacing:-.035em}
.hero .lead{margin-top:28px;max-width:30em;font-size:clamp(17px,1.6vw,20px);color:var(--on-ink-soft)}
.hero .lead strong{color:var(--on-ink);font-weight:500}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.btn{display:inline-block;font:500 16px/1 var(--sans);text-decoration:none;padding:15px 22px;border-radius:4px}
.btn-solid{background:var(--accent);color:var(--ink)}
.btn-solid:hover{background:var(--accent-hi)}
.btn-line{border:1px solid var(--on-ink-line);color:var(--on-ink)}
.btn-line:hover{border-color:var(--on-ink-soft)}
.ring-wrap{position:relative;max-width:600px;margin-right:clamp(0px,4vw,60px);justify-self:end;width:100%}
.ring text{font-family:var(--mono);font-size:18px;fill:#A3ADB0}
.ring .tick{stroke:var(--on-ink-line);stroke-width:1}
.ring .tick.major{stroke:rgba(245,244,239,.32)}
.ring .orbit{fill:none;stroke:rgba(245,244,239,.22);stroke-width:1}
.ring .arc{fill:none;stroke:var(--paper);stroke-width:58;stroke-linecap:round}
.ring .node rect{fill:var(--paper);transition:fill .2s}
.ring .node:hover rect,.ring .node:focus-visible rect{fill:var(--accent)}
.ring .node:hover text,.ring .node:focus-visible text{fill:var(--on-ink)}
.ring .node .name{font-family:var(--head);font-size:27px;font-weight:700;fill:var(--on-ink)}
.ring .free rect{fill:none;stroke:rgba(245,244,239,.4);stroke-dasharray:3 3}
.ring .node{outline:none}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.ring-wrap{justify-self:center;max-width:min(440px,70vw);margin:0 auto}}

/* Einmaliger Startmoment */
.js .ring .arc{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s cubic-bezier(.6,.05,.25,1) .15s forwards}
.js .ring .ticks,.js .ring .orbit,.js .ring .node{opacity:0;animation:fade .7s ease forwards}
.js .ring .ticks{animation-delay:.9s}.js .ring .orbit{animation-delay:1.1s}
.js .ring .n1{animation-delay:1.35s}.js .ring .n2{animation-delay:1.5s}.js .ring .n3{animation-delay:1.65s}
.js .ring .core{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:pop .5s cubic-bezier(.3,1.6,.5,1) 1.45s forwards}
.ring{transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.ring .spin-slow{transform-box:view-box;transform-origin:300px 300px;animation:spin 240s linear infinite reverse}
.ring .sweepwrap{opacity:0;animation:fade 1s ease 1.9s forwards}
.ring .sweep{transform-box:view-box;transform-origin:300px 300px;animation:spin 9s linear infinite}
.ring .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 3.2s ease-in-out 2.2s infinite}
.ring .node rect{transition:fill .2s,transform .25s;transform-box:fill-box;transform-origin:center}
.ring .node:hover rect,.ring .node:focus-visible rect{transform:scale(1.35)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fade{to{opacity:1}}@keyframes pop{to{transform:scale(1)}}

/* Das wandernde Bit */
.rail{position:fixed;left:clamp(10px,1.6vw,22px);top:18vh;height:64vh;width:12px;z-index:15;pointer-events:none;opacity:0;transition:opacity .3s}
.rail::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:currentColor;opacity:.25}
.rail .mark{position:absolute;left:2px;width:7px;height:1px;background:currentColor;opacity:.45}
.rail .bit{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:3px;background:var(--accent);transform:translateY(calc(var(--p,0) * (64vh - 12px)))}
@media (max-width:1100px){.rail{display:none}}

/* Helle Abschnitte */
.light{background:var(--light-bg);color:var(--light-text)}
section{padding:clamp(72px,10vw,128px) 0}
h2{font-family:var(--head);font-weight:700;font-size:clamp(34px,4.6vw,58px);line-height:1.02;letter-spacing:-.025em;max-width:16ch}
.intro{margin-top:20px;max-width:36em;font-size:18px}
.light .intro,.light .soft{color:var(--light-soft)}
.dark .intro,.dark .soft{color:var(--on-ink-soft)}
.status{font-family:var(--mono);font-size:14px;display:flex;align-items:center;gap:10px}
.status .dot{width:9px;height:9px;border-radius:2px;background:var(--accent)}
.status .dot.wip{background:transparent;border:1.5px solid var(--accent)}

/* Produkte */
.products{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.prod h3{font-family:var(--head);font-size:clamp(30px,3vw,40px);letter-spacing:-.02em;line-height:1;margin-top:18px}
.prod p{margin-top:14px;max-width:34em}
.prod .facts{margin-top:22px;border-top:1px solid var(--light-line)}
.prod .facts li{padding:11px 0;border-bottom:1px solid var(--light-line);font-size:15.5px}
.prod .go{display:inline-block;margin-top:26px;font-weight:500;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:3px}
.shot{margin-top:28px;background:var(--light-raise);border:1px solid var(--light-line);border-radius:8px;overflow:hidden;box-shadow:0 30px 60px -38px rgba(21,25,28,.55)}
.shot .chrome{font-family:var(--mono);font-size:12px;color:var(--light-soft);padding:9px 14px;border-bottom:1px solid var(--light-line)}
.membrio{padding-top:clamp(0px,9vw,120px)}
.next{margin-top:56px;padding-top:22px;border-top:1px dashed var(--light-line);font-size:15.5px}
@media (max-width:860px){.products{grid-template-columns:1fr}.membrio{padding-top:0}}

/* Werkstatt */
.dark{background:var(--ink-2);color:var(--on-ink)}
.shop{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,72px)}
.tool{border:1px solid var(--on-ink-line);border-radius:8px;padding:clamp(22px,3vw,34px);background:var(--ink)}
.tool h3{font-family:var(--head);font-size:26px;letter-spacing:-.01em}
.tool label{display:block;margin-top:22px;font-size:14.5px;color:var(--on-ink-soft)}
.tool input{margin-top:8px;width:100%;font:500 clamp(16px,2vw,21px)/1.3 var(--mono);letter-spacing:.04em;color:var(--on-ink);background:transparent;border:0;border-bottom:2px solid var(--on-ink-line);padding:10px 0;border-radius:0}
.tool input:focus{outline:none;border-bottom-color:var(--accent)}
.result{margin-top:18px;min-height:52px;font-size:15.5px}
.result .ok{color:#8FD3A8}.result .bad{color:#F2A07A}
.tool .fine{margin-top:16px;font-size:13.5px;color:var(--on-ink-soft)}
.queue h3{font-family:var(--head);font-size:20px}
.queue li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--on-ink-line)}
.queue li:first-of-type{border-top:1px solid var(--on-ink-line);margin-top:16px}
.queue .status{font-size:12.5px;color:var(--on-ink-soft);padding-top:4px}
.queue b{font-weight:500;display:block}
.queue span.d{color:var(--on-ink-soft);font-size:15px}
@media (max-width:860px){.shop{grid-template-columns:1fr}}

/* Arbeitsweise */
.sheet{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,72px)}
.sheet div{display:grid;grid-template-columns:9.5em 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--light-line)}
.sheet dt{font-family:var(--head);font-weight:700;font-size:17px}
.sheet dd{color:var(--light-soft)}
@media (max-width:860px){.sheet{grid-template-columns:1fr}.sheet div{grid-template-columns:1fr;gap:4px}}

/* Team */
.h2-sm{font-size:clamp(26px,3vw,38px);max-width:none}
.team{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.person h3{font-family:var(--head);font-size:30px;letter-spacing:-.015em}
.person .role{margin-top:4px;color:var(--on-ink-soft)}
.person p{margin-top:16px;max-width:32em}
.todo{display:inline;background:rgba(226,100,30,.18);padding:0 4px;border-radius:2px}
@media (max-width:860px){.team{grid-template-columns:1fr}}

/* Hintergrund-Ringe */
main section{position:relative;overflow:hidden}
main section > .wrap{position:relative;z-index:1}
.bgring{position:absolute;width:clamp(520px,62vw,880px);height:auto;pointer-events:none;z-index:0}
.bgring .bt line{stroke:currentColor;stroke-width:1.2}
.bgring .bo{fill:none;stroke:currentColor;stroke-width:1.4}
.bgring .ba{fill:none;stroke:currentColor;stroke-width:58;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--draw,0)}
.bgring .bc{fill:currentColor}
.bgring .bb{fill:var(--accent)}
.bgring .bt{transform-box:view-box;transform-origin:300px 300px;transform:rotate(var(--rot,0deg))}
.light .bgring{color:var(--light-text)}
.dark .bgring{color:#F5F4EF}
.light .bgring>:not(.bb){opacity:.06}
.dark .bgring>:not(.bb){opacity:.055}
.bgring .bb{opacity:.6}
.pos-tr{right:-24%;top:-18%}
.pos-bl{left:-22%;bottom:-30%}
.pos-r{right:-30%;top:12%}
.pos-tl{left:-26%;top:-40%}
.pos-br{right:-18%;bottom:-55%}
@media (max-width:860px){.bgring{width:130vw}.pos-tr,.pos-r,.pos-br{right:-70%}.pos-bl,.pos-tl{left:-70%}}

/* Kontakt + Fuß */
.contact{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:end}
.contact address{font-style:normal;line-height:1.8}
.contact a.mail{font-family:var(--head);font-weight:700;font-size:clamp(26px,3.4vw,42px);text-decoration:none;letter-spacing:-.02em;border-bottom:3px solid var(--accent)}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
footer{border-top:1px solid var(--on-ink-line);padding:28px 0 36px;font-size:14px;color:var(--on-ink-soft)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer a{text-decoration:none}footer a:hover{color:var(--on-ink)}
footer ul{display:flex;gap:22px}
.mark-s{width:26px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* Rechtliche Seiten */
.legal{padding:clamp(56px,8vw,96px) 0}
.legal h1{font-family:var(--head);font-weight:700;font-size:clamp(36px,5vw,56px);letter-spacing:-.025em;line-height:1.05}
.legal h2{font-size:22px;margin-top:40px;max-width:none}
.legal p,.legal ul{margin-top:12px;max-width:42em}
.legal ul{list-style:disc;padding-left:1.2em}
.legal a{color:var(--light-text)}

/* ---------- Angebot (ergänzt) ---------- */
.offer{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
.pillar{border:1px solid var(--light-line);border-radius:8px;padding:clamp(24px,3vw,36px);background:var(--light-raise)}
.pillar h3{font-family:var(--head);font-size:clamp(24px,2.4vw,30px);letter-spacing:-.015em;line-height:1.1;margin-top:16px}
.pillar p:not(.status){margin-top:12px;color:var(--light-soft);max-width:30em}
.pillar .go{display:inline-block;margin-top:22px;font-weight:500;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:3px}
.light .status{color:var(--light-soft)}
.sub-h{font-family:var(--head);font-size:clamp(20px,2vw,24px);letter-spacing:-.01em;margin-top:clamp(56px,7vw,88px)}
.compare{margin-top:20px;border-bottom:1px solid var(--light-line)}
.crow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);padding:20px 0;border-top:1px solid var(--light-line)}
.crow b{font-family:var(--head);font-weight:700;font-size:17px}
.crow .before{color:var(--light-soft)}
.crow .before::before,.crow .after::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:10px;vertical-align:.05em}
.crow .before::before{border:1.5px solid var(--light-soft)}
.crow .after::before{background:var(--accent)}
.chead{font-family:var(--mono);font-size:13px;color:var(--light-soft);padding:12px 0}
@media (max-width:860px){
  .offer{grid-template-columns:1fr}
  .crow{grid-template-columns:1fr;gap:8px}
  .chead{display:none}
  .crow .before,.crow .after{display:block;padding-left:19px;text-indent:-19px}
}

/* ---------- Produkte auf dunklem Grund (ergänzt) ---------- */
.dark .prod .facts,.dark .prod .facts li{border-color:var(--on-ink-line)}
.dark .prod p{color:var(--on-ink-soft)}
.dark .prod .status{color:var(--on-ink-soft)}
.dark .next{border-top-color:var(--on-ink-line)}
.dark .next a{color:var(--on-ink)}
.dark .shot{border-color:var(--on-ink-line);box-shadow:0 30px 60px -38px rgba(0,0,0,.8)}

/* ---------- Arbeitsweise: Schritte (ergänzt) ---------- */
.steps{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);list-style:none;padding:0}
.steps li{border-top:2px solid var(--light-text);padding-top:18px}
.steps .num{font-family:var(--mono);font-size:14px;color:var(--light-soft)}
.steps h3{font-family:var(--head);font-size:22px;letter-spacing:-.01em;margin-top:10px}
.steps p{margin-top:8px;color:var(--light-soft)}
.sheet-intro{margin-top:clamp(56px,7vw,88px)}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.legal h1{font-size:clamp(30px,5vw,56px);hyphens:auto;overflow-wrap:break-word}
/* längere Überschrift: etwas kleiner, damit Text und Buttons im ersten Bildschirm bleiben */
.hero h1{font-size:clamp(42px,5.6vw,80px);line-height:.98}