:root{
  --paper:#FCFCFC;
  --ink:#222629;
  --green:#505B53;
  --green-deep:#292E30;
  --tomato:#505B53;
  --curry:#E3E6E2;
  --leaf:#F0F1EF;
  --shadow:4px 4px 0 var(--ink);
  --radius:14px;
  --route-x:28px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Atkinson Hyperlegible',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
  overflow-x:hidden;
}
::selection{background:var(--curry);color:var(--ink)}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;line-height:1.04;letter-spacing:-0.01em}
.mono{font-family:'IBM Plex Mono',monospace}
a{color:inherit}
img,svg{display:block;max-width:100%}
section{scroll-margin-top:84px}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;gap:12px;
}
.wordmark{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.25rem;
  text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.wordmark .dot{width:14px;height:14px;border-radius:50%;background:var(--tomato);border:2px solid var(--ink);flex:none}
nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;font-weight:600;
  text-decoration:none;text-transform:uppercase;letter-spacing:.04em;
  padding:7px 12px;border:2px solid transparent;border-radius:999px;white-space:nowrap;
}
nav a:hover{border-color:var(--ink);background:var(--leaf)}
nav a.cta{background:var(--tomato);color:var(--paper);border-color:var(--ink)}
nav a.cta:hover{background:var(--ink)}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:56px 20px 0;
  max-width:1100px;margin:0 auto;
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:end}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:.8rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
  background:var(--leaf);border:2px solid var(--ink);border-radius:999px;padding:6px 14px;
}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}}
.hero h1{
  font-size:clamp(3rem,9.5vw,6.4rem);
  font-weight:800;text-transform:uppercase;
}
.hero h1 .hl{
  background:linear-gradient(transparent 55%,var(--curry) 55%);
  padding:0 .08em;
}
.hero p.lead{font-size:clamp(1.05rem,2vw,1.3rem);max-width:34ch;margin-top:18px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 38px}
.btn{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1rem;
  text-decoration:none;display:inline-block;
  padding:13px 22px;border:2px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .15s,box-shadow .15s;
  background:var(--paper);
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.primary{background:var(--tomato);color:var(--paper)}
.btn:focus-visible,nav a:focus-visible,details summary:focus-visible{outline:3px solid var(--tomato);outline-offset:3px}

.hero-bike{position:relative;padding-bottom:8px}
.hero-bike svg{width:100%;height:auto}
.hero-bike .hint{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:600;
  text-align:center;opacity:.6;margin-top:6px;
}
.pling{
  position:absolute;top:6%;right:8%;
  background:var(--paper);border:2px solid var(--ink);border-radius:999px;
  padding:6px 14px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  box-shadow:var(--shadow);
  opacity:0;transform:scale(.5) rotate(-8deg);pointer-events:none;
  transition:opacity .2s,transform .2s;
}
.pling.show{opacity:1;transform:scale(1) rotate(-8deg)}
#heroBike{cursor:pointer}
#heroBike.ring #bellGroup{animation:ring .5s ease}
@keyframes ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-22deg)}50%{transform:rotate(18deg)}75%{transform:rotate(-10deg)}}
.steam path{animation:steam 3.4s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1.1s}
.steam path:nth-child(3){animation-delay:2.2s}
@keyframes steam{0%{transform:translateY(0);opacity:0}25%{opacity:.85}100%{transform:translateY(-26px);opacity:0}}

/* ---------- Marquee ---------- */
.marquee{
  background:var(--curry);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(-1.2deg) scale(1.02);
  overflow:hidden;white-space:nowrap;
  padding:11px 0;margin:10px -10px 0;
}
.marquee-track{display:inline-block;animation:scroll 26s linear infinite}
.marquee span{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.05rem;
  text-transform:uppercase;letter-spacing:.04em;padding:0 14px;
}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Route layout ---------- */
.route{
  position:relative;
  max-width:1100px;margin:0 auto;
  padding:70px 20px 40px calc(var(--route-x) + 44px);
}
.route-line{
  position:absolute;top:0;bottom:0;left:var(--route-x);
  width:0;border-left:3px dashed rgba(34,38,41,.3);
}
.route-bike{
  position:absolute;left:calc(var(--route-x) - 26px);top:0;
  width:52px;z-index:5;will-change:transform;
}
.stop{position:relative;padding:34px 0 60px}
.stop-marker{
  position:absolute;left:-57px;
  top:42px;
  width:26px;height:26px;border-radius:50%;
  background:var(--paper);border:3px solid var(--ink);
  transition:background .3s,transform .3s;
}
.stop.active .stop-marker{background:var(--tomato);transform:scale(1.18)}
.stop-label{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--green);
  margin-bottom:10px;
}
.stop h2{font-size:clamp(1.9rem,5vw,3rem);font-weight:800;margin-bottom:14px;text-transform:uppercase}
.stop .intro{max-width:58ch;margin-bottom:30px;font-size:1.05rem}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.card{
  background:var(--leaf);border:2px solid var(--ink);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);
  transition:transform .15s,box-shadow .15s;
}
.card:hover{transform:translate(-2px,-2px) rotate(-.4deg);box-shadow:6px 6px 0 var(--ink)}
.card .icon{font-size:1.9rem;margin-bottom:12px;line-height:1}
.card h3{font-size:1.2rem;font-weight:700;margin-bottom:8px}
.card p{font-size:.95rem}
.card.tomato{background:#ECEEEC}
.card.curry{background:#E3E6E2}
.card.paper{background:var(--paper)}

/* ---------- Ablauf timeline ---------- */
.steps{display:grid;gap:0}
.step{
  display:grid;grid-template-columns:92px 1fr;gap:18px;
  padding:20px 0;border-bottom:2px dashed rgba(34,38,41,.25);
}
.step:last-child{border-bottom:none}
.step .t{
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:.92rem;
  background:var(--ink);color:var(--curry);
  border-radius:8px;padding:6px 8px;text-align:center;height:fit-content;
}
.step h3{font-size:1.15rem;margin-bottom:4px}
.step p{font-size:.95rem;max-width:56ch}

/* ---------- Fahrplan board ---------- */
.board{
  background:var(--green-deep);color:var(--paper);
  border:2px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.board-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;border-bottom:2px solid rgba(252,252,252,.25);
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--curry);
}
.board-head .live{display:flex;align-items:center;gap:8px}
.board-head .live::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tomato);animation:pulse 1.6s infinite}
.board-row{
  display:grid;grid-template-columns:110px 1fr auto;gap:14px;align-items:baseline;
  padding:15px 18px;border-bottom:1px dashed rgba(252,252,252,.2);
  font-family:'IBM Plex Mono',monospace;font-size:.92rem;
}
.board-row:last-child{border-bottom:none}
.board-row .when{color:var(--curry);font-weight:600}
.board-row .what strong{display:block;font-weight:600}
.board-row .what em{font-style:normal;opacity:.75;font-size:.82rem}
.board-row .status{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:999px;white-space:nowrap}
.status.done{background:rgba(252,252,252,.15);color:var(--paper)}
.status.next{background:var(--tomato);color:var(--paper);animation:pulse 2s infinite}
.board-note{padding:14px 18px;font-size:.85rem;opacity:.85}
.board-note a{color:var(--curry)}

/* ---------- Rückblick ---------- */
.stickers{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sticker{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1rem;
  border:2px solid var(--ink);border-radius:999px;padding:10px 18px;
  box-shadow:var(--shadow);background:var(--paper);
}
.sticker:nth-child(1){background:var(--curry);transform:rotate(-2deg)}
.sticker:nth-child(2){background:var(--leaf);transform:rotate(1.4deg)}
.sticker:nth-child(3){background:#ECEEEC;transform:rotate(-1deg)}
.sticker:nth-child(4){background:var(--paper);transform:rotate(2deg)}
.quote{
  margin-top:30px;background:var(--paper);border:2px solid var(--ink);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:24px;max-width:620px;
}
.quote p{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.25rem;line-height:1.3}
.quote footer{font-family:'IBM Plex Mono',monospace;font-size:.78rem;margin-top:12px;opacity:.7}

/* ---------- FAQ ---------- */
details{
  border:2px solid var(--ink);border-radius:var(--radius);
  background:var(--paper);margin-bottom:12px;overflow:hidden;
}
details summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 18px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.05rem;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"+";font-size:1.5rem;font-weight:700;line-height:1;
  width:32px;height:32px;border:2px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;flex:none;background:var(--curry);
  transition:transform .25s;
}
details[open] summary::after{transform:rotate(45deg);background:var(--tomato);color:var(--paper)}
details .a{padding:0 18px 18px;font-size:.97rem;max-width:62ch}
details[open]{background:var(--leaf)}

/* ---------- Footer ---------- */
footer.site{
  background:var(--ink);color:var(--paper);
  padding:60px 20px 40px;margin-top:30px;
}
.foot-inner{max-width:1100px;margin:0 auto}
footer.site h2{
  font-size:clamp(1.8rem,5vw,3rem);font-weight:800;text-transform:uppercase;
  margin-bottom:8px;
}
footer.site h2 .hl{background:linear-gradient(transparent 55%,var(--tomato) 55%);padding:0 .08em}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:30px}
.foot-grid h3{font-size:.8rem;font-family:'IBM Plex Mono',monospace;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--curry);margin-bottom:10px}
.foot-grid a{color:var(--paper)}
.foot-base{
  margin-top:44px;padding-top:18px;border-top:1px dashed rgba(252,252,252,.3);
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;opacity:.7;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- Wheels roll with scroll ---------- */
.wheel{transform:rotate(var(--roll,0deg));transform-origin:center;transform-box:fill-box}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-bike{max-width:420px;margin:0 auto}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  :root{--route-x:16px}
  .route{padding-left:calc(var(--route-x) + 34px)}
  .stop-marker{left:-44px;width:21px;height:21px}
  .route-bike{width:40px;left:calc(var(--route-x) - 20px)}
  .step{grid-template-columns:74px 1fr;gap:12px}
  .board-row{grid-template-columns:1fr;gap:4px}
  .board-row .status{justify-self:start}
  nav a:not(.cta){display:none}
}
@media (prefers-reduced-motion:reduce){
  *,.marquee-track,.steam path{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* Project corrections, 05.09.2026: retain the owner's original composition. */
:focus-visible{outline:3px solid var(--green);outline-offset:4px}
footer :focus-visible{outline-color:var(--curry)}
.skip-link{position:fixed;top:8px;left:8px;z-index:100;background:var(--paper);padding:10px 18px;border:2px solid var(--ink);transform:translateY(-160%)}
.skip-link:focus{transform:none}
.bike-button{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;border-radius:14px;cursor:pointer}
.btn.primary,nav a.cta,.status.next{color:var(--ink)}
nav a.cta:hover{color:var(--paper)}
.reveal{opacity:1;transform:none}
html.motion-ready .reveal:not(.visible){opacity:0;transform:translateY(22px)}
.motion-toggle{margin-top:22px;border:2px solid var(--paper);border-radius:999px;background:transparent;color:var(--paper);font:inherit;padding:8px 14px;cursor:pointer}
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation:none!important;transition:none!important}
html.motion-paused{scroll-behavior:auto}
html.motion-paused .reveal{opacity:1!important;transform:none!important}
html.motion-paused .route-bike{transform:none!important}
html.motion-paused .wheel{transform:none!important}
.board-head{gap:12px;flex-wrap:wrap}
.board-head .live::before{animation:none;background:var(--curry)}
.card,.what,.step>div{min-width:0;overflow-wrap:anywhere}
@media(max-width:560px){
 header{flex-wrap:wrap;padding:10px 16px;gap:6px}
 .wordmark{font-size:1.15rem;white-space:normal}
 nav{width:100%;flex-wrap:wrap;gap:0;overflow:visible}
 nav a:not(.cta){display:block}
 nav a{padding:7px 9px;font-size:.71rem}
 section{scroll-margin-top:132px}
 .cards{grid-template-columns:minmax(0,1fr)}
 .hero{padding-top:34px}
 .board-head{font-size:.68rem;padding:14px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 html.motion-ready .reveal:not(.visible){opacity:1;transform:none}
 .route-bike,.wheel{transform:none!important}
}

/* Contain only the deliberately oversize decorative band. */
main{overflow-x:clip}

/* Primary surfaces are refined by the logo palette below. */
.btn.primary,nav a.cta,.status.next{color:#10180E}
nav a.cta:hover{color:var(--paper)}
.hero-bike .hint{opacity:.8}

/* Logo adaptation: original JPEG, circular shapes and quiet monochrome surfaces. */
:root{--shadow:2px 2px 0 var(--ink);--radius:18px}
header{padding-block:8px}
.wordmark{white-space:normal;line-height:1.15;max-width:430px}
.brand-logo{width:64px;height:64px;object-fit:contain;flex:none;border-radius:50%}
.hero-grid{align-items:center;gap:36px}
.hero-bike{width:100%;padding:16px 0 28px}
.hero-logo{width:100%;height:auto;border-radius:50%}
.hero h1{font-size:clamp(2.8rem,8.5vw,5.8rem)}
.hero h1 .hl{background:none;border-bottom:4px solid var(--ink);padding:0}
.btn{border-radius:999px}
.btn.primary,nav a.cta,.status.next{background:var(--ink);color:var(--paper)}
.btn.primary:hover,nav a.cta:hover{background:var(--green);color:var(--paper)}
.card:hover{transform:translateY(-2px);box-shadow:3px 3px 0 var(--ink)}
.marquee{transform:none;margin-inline:0;background:var(--leaf)}
.stop.active .stop-marker{background:var(--ink)}
.footer-logo{width:112px;height:112px;border-radius:50%;margin-bottom:26px}
:focus-visible,.btn:focus-visible,nav a:focus-visible,details summary:focus-visible{outline-color:var(--ink)}
footer :focus-visible{outline-color:var(--paper)}
@media(max-width:860px){header{flex-wrap:wrap}nav{flex-wrap:wrap;overflow:visible}.hero-bike{max-width:380px}.hero-grid{gap:0}section{scroll-margin-top:155px}}
@media(max-width:560px){.brand-logo{width:48px;height:48px}.wordmark{font-size:1.05rem}.hero-bike{max-width:290px;padding-top:0}.hero-ctas{margin-bottom:24px}.hero h1{font-size:clamp(2.7rem,11vw,3.8rem)}}

/* Betreiberangaben und eigene rechtliche Seiten, ohne Inline-Stile. */
.footer-intro { max-width:52ch; }
.multiline { white-space:pre-line; overflow-wrap:anywhere; }
.operator { margin-top:2rem; }
.legal-links { display:flex; gap:1rem; flex-wrap:wrap; margin-block:1.5rem; }
.legal-page { max-width:860px; margin:auto; padding:clamp(2rem,6vw,5rem) 1.25rem; }
.legal-page h1 { font-size:clamp(2rem,6vw,4rem); overflow-wrap:anywhere; }
.legal-page section { margin-block:2.5rem; }

/* Footer arrangement requested by Lukas, 09.09.2026. */
.foot-base{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;width:100%}
.foot-base> :first-child{justify-self:start;text-align:left}
.foot-base> :last-child{justify-self:end;text-align:right}
.foot-base .adam-studio-credit{margin:0;justify-self:center;text-align:center;font:inherit;line-height:inherit}
.foot-base .adam-studio-credit a{color:inherit;text-decoration:none}
.foot-base .adam-studio-credit a:hover{text-decoration:underline}
@media(max-width:800px){.foot-base{grid-template-columns:1fr;gap:12px}.foot-base> :first-child,.foot-base> :last-child,.foot-base .adam-studio-credit{justify-self:center;text-align:center}}