/* kiezboten.app – Kiezbote-Tokens: Tannengrün #1F6F4C, Tief #123F2C, Safran #E0982E, Papier #F1F4EC */
:root{
  --paper:#F1F4EC; --surface:#ffffff; --ink:#14251c; --soft:#4a5d51; --faint:#66766b; --line:#dbe3d5;
  --green:#1F6F4C; --green-2:#2f8f63; --deep:#123F2C; --saffron:#E0982E; --saffron-ink:#8a5410; --chip:#e4ece0;
  --shadow:0 1px 2px rgba(18,63,44,.06),0 12px 32px rgba(18,63,44,.10);
  --font:"Bricolage Grotesque","Hanken Grotesk",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0c1510; --surface:#132019; --ink:#e6efe8; --soft:#a8baae; --faint:#8a9c90; --line:#22342a;
  --green:#3fae7c; --green-2:#5cc794; --deep:#0a2a1c; --saffron:#eaa64a; --saffron-ink:#f2c27d; --chip:#1b2b22;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 36px rgba(0,0,0,.4); color-scheme:dark;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(50rem 28rem at 90% -8%,color-mix(in srgb,var(--saffron) 16%,transparent),transparent 70%),
    radial-gradient(46rem 30rem at -10% 20%,color-mix(in srgb,var(--green) 12%,transparent),transparent 70%);background-repeat:no-repeat}
img{max-width:100%;height:auto}
a{color:var(--green)}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:750}
h3{font-size:1.12rem;font-weight:700}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:12px;z-index:50;background:var(--surface);padding:8px 12px;border-radius:8px}
:focus-visible{outline:2px solid var(--saffron);outline-offset:3px;border-radius:6px}

/* Kopfzeile */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:12px max(16px,calc((100% - 1160px)/2));
  background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.brand img{border-radius:9px}
.top nav{display:flex;gap:4px;margin-left:auto}
.top nav a{color:var(--soft);text-decoration:none;font-weight:550;font-size:15px;padding:7px 11px;border-radius:9px}
.top nav a:hover,.top nav a.on{color:var(--ink);background:var(--chip)}
@media (max-width:760px){.top nav{display:none}.top .btn.small{margin-left:auto}}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:14px;font-weight:700;font-size:16px;text-decoration:none;
  color:#fff;background:linear-gradient(135deg,var(--green),var(--deep));box-shadow:0 8px 22px color-mix(in srgb,var(--green) 32%,transparent);
  border:1px solid transparent;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--green) 40%,transparent)}
.btn svg{width:17px;height:17px;fill:currentColor}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--green)}
.btn.small{padding:9px 16px;font-size:14px;border-radius:11px}
.btn.light{background:var(--saffron);color:#1d1406;box-shadow:none}
@media (prefers-color-scheme:dark){.btn{color:#06140d;background:linear-gradient(135deg,#4cc08b,#2f9467)}}

main{overflow-x:clip}
main>section{padding:clamp(56px,9vw,104px) max(16px,calc((100% - 1160px)/2))}
.eyebrow{font:600 13px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--saffron-ink);margin:0 0 10px}
.intro{color:var(--soft);max-width:62ch;margin:14px 0 0;font-size:1.08rem}
.sec-head{margin-bottom:40px}

/* Start */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;padding-top:clamp(40px,6vw,72px)!important}
.pill{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);font:600 13px var(--mono);color:var(--soft)}
.live{width:8px;height:8px;border-radius:50%;background:var(--green);animation:live 2s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
h1{font-size:clamp(2.5rem,6.2vw,4.4rem);font-weight:800;letter-spacing:-.035em}
.hl{color:var(--green);display:block}
.lede{font-size:clamp(1.08rem,1.6vw,1.22rem);color:var(--soft);max-width:52ch;margin:22px 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.facts{list-style:none;display:flex;gap:clamp(18px,4vw,40px);padding:0;margin:36px 0 0}
.facts b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.03em}
.facts span{color:var(--faint);font-size:14px}

.hero-art{position:relative;height:clamp(460px,52vw,600px)}
.ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--green) 40%,transparent);transform:translate(-50%,-50%)}
.r1{width:62%;aspect-ratio:1}.r2{width:88%;aspect-ratio:1;opacity:.6}.r3{width:114%;aspect-ratio:1;opacity:.3}
.ring.r1{animation:ring 5s ease-in-out infinite}
@keyframes ring{50%{transform:translate(-50%,-50%) scale(1.05)}}
.phone{margin:0;border-radius:30px;padding:7px;background:#0b130f;box-shadow:0 30px 60px -18px rgba(9,30,20,.55),0 0 0 1px rgba(255,255,255,.06) inset}
.phone img{display:block;border-radius:24px;width:100%}
.hero-art .phone{position:absolute;width:clamp(170px,19vw,240px)}
.hero-art .front{left:50%;top:50%;transform:translate(-62%,-50%) rotate(-4deg);z-index:2;animation:floatA 7s ease-in-out infinite}
.hero-art .back{left:50%;top:50%;width:clamp(150px,17vw,212px);transform:translate(8%,-44%) rotate(6deg);opacity:.95;animation:floatB 8s ease-in-out infinite}
@keyframes floatA{50%{transform:translate(-62%,-53%) rotate(-3deg)}}
@keyframes floatB{50%{transform:translate(8%,-40%) rotate(7deg)}}
.chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow);font-weight:650;font-size:14px;white-space:nowrap;animation:chip 6s ease-in-out infinite}
.chip.c1{left:2%;top:18%}.chip.c2{right:0;bottom:20%;animation-delay:-3s}
@keyframes chip{50%{transform:translateY(-8px)}}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot.g{background:var(--green)}.dot.o{background:var(--saffron)}
.kiezi{position:absolute;z-index:4;left:4%;bottom:0;width:clamp(76px,9vw,112px)}
@media (max-width:860px){.hero{grid-template-columns:1fr}.hero-art{height:460px;max-width:520px;width:100%;margin:0 auto}.hero-art .phone{width:200px}.hero-art .back{width:176px}}
@media (max-width:420px){.chip{font-size:12px;padding:7px 10px}.facts b{font-size:1.4rem}}

/* Idee */
.idea-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,56px);align-items:center}
.radius{width:100%;max-width:420px;margin:auto;display:block}
.radius .map{opacity:.9}.radius .street{stroke:color-mix(in srgb,var(--green) 18%,transparent);stroke-width:1.5}
.radius .zone{fill:color-mix(in srgb,var(--green) 9%,transparent);stroke:var(--green);stroke-width:2;stroke-dasharray:6 7}
.radius .zone-pulse{fill:none;stroke:var(--green);stroke-width:2;transform-origin:180px 180px;animation:zone 3.4s ease-out infinite}
@keyframes zone{0%{transform:scale(.55);opacity:.7}100%{transform:scale(1.08);opacity:0}}
.radius .route{fill:none;stroke:var(--saffron);stroke-width:3;stroke-dasharray:2 8;stroke-linecap:round}
.radius .runner-dot{fill:var(--green);stroke:var(--surface);stroke-width:3}
.radius .pin circle{stroke:var(--surface);stroke-width:3}
.radius .pin.o circle{fill:var(--saffron)}.radius .pin.d circle{fill:var(--deep)}.radius .pin.g circle{fill:var(--green)}
.radius .pin text{font:800 15px var(--font);text-anchor:middle;fill:#fff}
.radius .lbl{font:600 14px var(--mono);text-anchor:middle;fill:var(--green)}
.radius .legend text{font:600 13px var(--font);fill:var(--soft)}
.radius .lg.g{fill:var(--green)}.radius .lg.o{fill:var(--saffron)}.radius .lg.d{fill:var(--deep)}
.cards{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:var(--shadow)}
.card p{margin:8px 0 0;color:var(--soft);font-size:16px}
.cards .card{display:grid;grid-template-columns:auto 1fr;column-gap:16px}
.cards .card p{grid-column:2}
.ico{grid-row:1/3;width:44px;height:44px;border-radius:13px;display:grid;place-items:center}
.ico svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.o{background:var(--saffron)}.ico.g{background:var(--green)}.ico.d{background:var(--deep)}
@media (max-width:860px){.idea-grid{grid-template-columns:1fr}}

/* Abläufe */
.flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,72px);align-items:center}
.flow.alt{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--green) 7%,transparent) 20%,color-mix(in srgb,var(--green) 7%,transparent) 80%,transparent)}
.flow.alt .flow-text{order:2}
.steps{list-style:none;counter-reset:s;padding:0;margin:28px 0 0;display:grid;gap:18px}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;column-gap:16px}
.steps li::before{content:counter(s);grid-row:1/3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 18px var(--font);
  background:var(--surface);border:2px solid var(--green);color:var(--green)}
#runner .steps li::before{border-color:var(--saffron);color:var(--saffron-ink)}
.steps b{font-size:1.1rem}
.steps span{color:var(--soft)}
.shots{display:flex;justify-content:center;align-items:flex-start;gap:clamp(12px,2.4vw,24px)}
.shots .phone{width:min(250px,42vw);flex:0 1 auto;text-align:center}
.shots.three .phone{width:min(190px,28vw);border-radius:22px;padding:5px}
.shots.three .phone img{border-radius:18px}
.shots figcaption{font:600 clamp(10px,2.6vw,12px) var(--mono);color:#a8baae;padding:8px 0 3px;letter-spacing:.04em}
@media (max-width:860px){.flow{grid-template-columns:1fr}.flow.alt .flow-text{order:0}}

/* Vertrauen */
.grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.trust .card h3::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--green);margin-right:10px;vertical-align:1px}
.trust .card:nth-child(even) h3::before{background:var(--saffron)}

/* Restaurants / Betreiber */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(26px,4vw,40px);box-shadow:var(--shadow)}
.panel h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.panel p{color:var(--soft)}
.panel.dark{background:radial-gradient(30rem 18rem at 100% 0,color-mix(in srgb,var(--saffron) 22%,transparent),transparent 70%),linear-gradient(150deg,#1F6F4C,#123F2C);border-color:transparent;color:#eef5f0}
.panel.dark p{color:#cfe0d5}.panel.dark .eyebrow{color:#f2c27d}
@media (max-width:760px){.duo{grid-template-columns:1fr}}

/* Fragen */
.qa{display:grid;grid-template-columns:1fr 1fr;gap:12px}
details{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:4px 20px}
summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:700 22px/1 var(--font);color:var(--green);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 16px;color:var(--soft)}
@media (max-width:760px){.qa{grid-template-columns:1fr}}

/* Schluss */
.final{text-align:center}
.final img{display:block;margin:0 auto 12px}
/* Kiezi antippen: er hüpft und tanzt, und Kiez-Tiere schauen vorbei */
.kiezi-btn{display:block;margin:0 auto;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:16px}
.kiezi-btn:focus-visible{outline:3px solid var(--green);outline-offset:6px}
.kiezi-stage{position:relative;display:block;transform-origin:50% 100%}
.kiezi-btn:hover .kiezi-stage{transform:scale(1.04)}
.kiezi-btn.dance .kiezi-stage{animation:kiezi-dance 1.9s cubic-bezier(.3,.7,.3,1)}
.kiezi-friends{position:absolute;inset:0;pointer-events:none}
.kiezi-friends span{position:absolute;bottom:0;font-size:26px;line-height:1;opacity:0;transform:translateY(10px) scale(.6)}
.kiezi-friends span:nth-child(1){left:-44px}.kiezi-friends span:nth-child(2){right:-40px;bottom:70px}
.kiezi-friends span:nth-child(3){right:-52px}.kiezi-friends span:nth-child(4){left:-48px;bottom:60px}
.kiezi-btn.dance .kiezi-friends span{animation:kiezi-friend 1.9s ease-out}
.kiezi-btn.dance .kiezi-friends span:nth-child(2){animation-delay:.2s}.kiezi-btn.dance .kiezi-friends span:nth-child(3){animation-delay:.4s}.kiezi-btn.dance .kiezi-friends span:nth-child(4){animation-delay:.6s}
@keyframes kiezi-dance{0%{transform:none}12%{transform:translateY(-26px) rotate(-8deg)}24%{transform:translateY(0) scaleX(1.08) scaleY(.92)}36%{transform:translateY(-22px) rotate(8deg)}48%{transform:translateY(0) scaleX(1.06) scaleY(.94)}60%{transform:translateY(-14px) rotate(-5deg)}72%{transform:translateY(0) rotate(4deg)}84%{transform:translateY(-8px) rotate(-2deg)}100%{transform:none}}
@keyframes kiezi-friend{0%{opacity:0;transform:translateY(10px) scale(.6)}25%{opacity:1;transform:translateY(-10px) scale(1.1)}45%{transform:translateY(0) scale(1)}75%{opacity:1;transform:translateY(-6px) scale(1)}100%{opacity:0;transform:translateY(0) scale(.8)}}
@media (prefers-reduced-motion:reduce){.kiezi-btn.dance .kiezi-stage,.kiezi-btn.dance .kiezi-friends span{animation:none}.kiezi-btn.dance .kiezi-friends span{opacity:1;transform:none;transition:opacity .4s}}
.final h2{margin-bottom:24px}
.final .cta{justify-content:center}

/* Fuß */
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding:28px max(16px,calc((100% - 1160px)/2)) 40px;border-top:1px solid var(--line);color:var(--faint);font-size:14px}
.foot-brand{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink)}
.foot-brand img{border-radius:7px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot a{color:var(--soft);text-decoration:none}.foot a:hover{color:var(--green)}
.foot p{margin:0 0 0 auto}

/* Rechtstexte */
.legal{max-width:760px;margin:0 auto;padding:48px 16px 72px}
.legal h1{font-size:2.4rem;margin-bottom:18px}
.legal h2{font-size:1.25rem;margin:28px 0 6px}
.legal p{color:var(--soft);margin:0}

/* Einblenden */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .steps .reveal:nth-child(2),.js .shots .reveal:nth-child(2),.js .grid .reveal:nth-child(2),.js .cards .reveal:nth-child(2){transition-delay:.08s}
.js .steps .reveal:nth-child(3),.js .shots .reveal:nth-child(3),.js .grid .reveal:nth-child(3),.js .cards .reveal:nth-child(3){transition-delay:.16s}
.js .steps .reveal:nth-child(4),.js .grid .reveal:nth-child(4){transition-delay:.24s}
.js .grid .reveal:nth-child(5){transition-delay:.32s}.js .grid .reveal:nth-child(6){transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}
@media (prefers-color-scheme:dark){
  .radius .pin.d circle,.radius .lg.d{fill:#d7e8dc}
  .radius .pin.d text{fill:#0a2a1c}
  .ico.d{background:#2a5a43}
}

/* Sprachumschalter DE/EN (wie muehlbronner.de) */
.lang-switch{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.lang-switch a{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:7px;font:600 12px var(--mono);color:var(--faint);text-decoration:none;transition:background .15s,color .15s}
.lang-switch a svg{border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a[aria-current]{background:var(--chip);color:var(--ink)}
.top .spacer{margin-left:auto}
@media (max-width:760px){.lang-switch{margin-left:auto}.top .btn.small{margin-left:0}}
@media (max-width:420px){.lang-switch a span{display:none}.lang-switch a{padding:5px 6px}.top{gap:10px}.brand span{font-size:1.05rem}}
/* 404 */
.legal.center{text-align:center}
.legal .bear{display:block;margin:0 auto 18px}
.legal.center .en{margin-top:6px;color:var(--faint)}
.legal.center .cta{justify-content:center;margin-top:26px}