/* ZONING · zoning2 — Gestaltung nach Canva-Referenz „ki referenz 1", in ZONING-Farben, hell + dunkel */
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-var.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"DM Mono";src:url(fonts/dm-mono-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"DM Mono";src:url(fonts/dm-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url(fonts/dm-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  /* Viewport-Einheiten als Variablen: am Desktop setzt site.js sie passend zur 1440-px-Skalierung */
  --vw:1vw;--vh:1vh;--svh:1svh;--dvh:1dvh;
  --accent:#ff2430;
  --accent-text:#c90d18;
  --ink:#0c0c0e;
  --text:#232327;
  --muted:#5d5f65;
  --tint:#f3f1ee;
  --plain:#ffffff;
  --panel:#f3f1ee;
  --tile:#e6e3df;
  --tile-hover:#dcd8d3;
  --line:rgba(12,12,14,.16);
  --band:#0c0c0e;
  --band-text:#f4f4f2;
  --band-muted:#b9bbc0;
  --band-head:#ff2430;
  --band-dot:rgba(255,36,48,.2);
  --band-btn-bg:#ff2430;
  --band-btn-text:#0c0c0e;
  --btn-bg:#ff2430;
  --btn-text:#0c0c0e;
  --shadow:0 1px 0 rgba(12,12,14,.04);
  --sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --wrap:1240px;
  --gut:clamp(16px,calc(5 * var(--vw)),80px);
  --r:22px;
  color-scheme:light;
}


*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--plain);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--plain);padding:10px 16px;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono)}
.sec{position:relative;padding-block:clamp(64px,calc(9 * var(--vw)),120px);overflow:hidden}
.sec--tint{background:var(--tint)}
.sec--plain{background:var(--plain)}
.sec--band{background:var(--band);color:var(--band-text)}
.sec--band h1,.sec--band h2,.sec--band h3{color:var(--band-text)}
.sec--tight{padding-block:clamp(40px,calc(6 * var(--vw)),72px)}

/* ---------- Logo (Punktring) ---------- */
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:.06em;font-size:15px}
.brand__wm{display:block;width:112px;height:auto;overflow:visible}
.sec--band .brand{color:var(--band-text)}
.sec--band .brand__arc{stroke:#C4000F}

/* ---------- Kopfzeile ---------- */
.top{position:fixed;inset:16px 16px auto;z-index:50;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.top>*{pointer-events:auto}
.top__brand{background:var(--panel);border-radius:14px;padding:10px 14px;opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.is-scrolled .top__brand{opacity:1;transform:none}
.nav{display:flex;align-items:center;gap:4px;background:var(--panel);border-radius:16px;padding:6px;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.nav a,.nav button{font:500 14px/1 var(--mono);color:var(--ink);text-decoration:none;padding:11px 12px;border-radius:11px;border:0;background:none;cursor:pointer;white-space:nowrap}
.nav a:hover,.nav button:hover{background:var(--tile)}
.nav a[aria-current="page"]{background:var(--tile)}
.nav .nav__cta{background:var(--btn-bg);color:var(--btn-text)}
.nav .nav__cta:hover{background:var(--btn-bg);filter:brightness(1.06)}



@media (max-width:1080px){.nav .nav__link{display:none}}
@media (max-width:520px){.top{inset:10px 10px auto}.nav .nav__cta{display:none}.top__brand{padding:9px 11px}.brand{font-size:14px}}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border-radius:14px;background:var(--btn-bg);color:var(--btn-text);font:400 18px/1.1 var(--mono);text-decoration:none;border:0;cursor:pointer;transition:transform .2s cubic-bezier(.2,.7,.2,1),filter .2s}
.btn:hover{filter:brightness(1.05);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);min-height:50px;padding:10px 30px}
.btn--ghost:hover{background:var(--ink);color:var(--plain);filter:none}
.sec--band .btn{background:var(--band-btn-bg);color:var(--band-btn-text)}
.sec--band .btn--ghost{background:transparent;color:var(--band-text);border-color:var(--band-text)}
.sec--band .btn--ghost:hover{background:var(--band-text);color:var(--band)}
.btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.link{font:400 16px var(--mono);color:var(--ink);text-underline-offset:5px;text-decoration-thickness:1.5px}
.link:hover{color:var(--accent-text)}

/* ---------- Fortschritts-Striche ---------- */
.dashes{display:flex;gap:9px;margin-bottom:clamp(36px,calc(5 * var(--vw)),64px)}
.dashes i{display:block;width:27px;height:2px;background:var(--ink);opacity:.45}
.dashes i.on{height:4px;opacity:1;background:var(--ink)}
.sec--band .dashes i{background:var(--band-text)}

/* ---------- Typo-Bausteine ---------- */
.kicker{font:400 14px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.sec--band .kicker{color:var(--band-muted)}
.q{font-weight:700;font-size:clamp(30px,calc(3.6 * var(--vw)),46px);line-height:1.06;margin-bottom:26px}
.q span{display:block}
.display{font-weight:400;font-size:clamp(46px,calc(7.4 * var(--vw)),108px);line-height:.92;letter-spacing:-.035em}
.display--band{font-size:clamp(40px,calc(5.4 * var(--vw)),72px);line-height:.98;letter-spacing:-.03em;font-weight:400}
.lead{font:300 clamp(17px,calc(1.5 * var(--vw)),21px)/1.6 var(--mono);color:var(--text)}
.sec--band .lead{color:var(--band-text)}
.body{font:300 16px/1.7 var(--mono);color:var(--text)}
.sec--band .body{color:var(--band-text)}
.muted{color:var(--muted)}
.note{font-size:13px;color:var(--muted);margin-top:12px}

/* ---------- Layout ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,calc(6 * var(--vw)),96px);align-items:center}
.split--rev{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.split--rev>.split__media{order:-1}
.split--top{align-items:start}
.split--even{grid-template-columns:1fr 1fr}
.grid{display:grid;gap:14px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack>*+*{margin-top:22px}
.head{max-width:760px;margin-bottom:clamp(36px,calc(5 * var(--vw)),60px)}
.head--center{margin-inline:auto;text-align:center}
@media (max-width:900px){
  .split,.split--rev,.split--even{grid-template-columns:1fr}
  .split--rev>.split__media{order:0}
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* ---------- Antwort-Kacheln (Optionen der Referenz) ---------- */
.opts{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:10px;max-width:520px}
.opts li,.opt{background:var(--tile);border-radius:10px;padding:15px 18px;font-size:17px;line-height:1.4;color:var(--ink)}
.opts--wide{max-width:none}
.opts a{text-decoration:none;display:block;margin:-15px -18px;padding:15px 18px;border-radius:10px}
.opts a:hover{background:var(--tile-hover)}
.opts--num{counter-reset:o}
.opts--num li{counter-increment:o;display:grid;grid-template-columns:44px 1fr;align-items:baseline}
.opts--num li::before{content:counter(o,decimal-leading-zero);font:400 14px var(--mono);color:var(--accent-text)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{background:var(--tile);border-radius:8px;padding:7px 12px;font:400 13px var(--mono);color:var(--ink)}
.sec--band .chips li{background:rgba(255,255,255,.12);color:var(--band-text)}

/* Karten */
.card{background:var(--tile);border-radius:var(--r);padding:clamp(22px,calc(2.6 * var(--vw)),32px);display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;position:relative}
.sec--tint .card{background:var(--plain)}
.sec--plain .card{background:var(--tint)}
.sec--band .card{background:rgba(255,255,255,.08);color:var(--band-text)}
.card h3{font-size:clamp(21px,calc(1.9 * var(--vw)),25px);font-weight:700;line-height:1.15}
.card p{font:300 15px/1.65 var(--mono)}
.card .num{font:400 14px var(--mono);color:var(--accent-text)}
.sec--band .card .num{color:var(--band-head)}
a.card{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
a.card:hover{transform:translateY(-4px)}
.card__foot{margin-top:auto;padding-top:10px;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card__arrow{position:absolute;top:24px;right:24px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor;font:400 16px var(--mono)}

/* ---------- Bildrahmen (Formen der Referenz) ---------- */
.frame{position:relative;width:100%}
.frame__clip{position:relative;width:100%;aspect-ratio:var(--ar,1/1);overflow:hidden;background:var(--tile)}
.frame__clip img{width:100%;height:100%;object-fit:cover;object-position:top center}
.f-chamfer .frame__clip{clip-path:url(#c-chamfer)}
.f-notch-bl .frame__clip{clip-path:url(#c-notch-bl)}
.f-notch-tr .frame__clip{clip-path:url(#c-notch-tr)}
.f-hex .frame__clip{clip-path:url(#c-hex)}
.f-round .frame__clip{border-radius:40px}
.frame__tag{position:absolute;left:18px;bottom:18px;z-index:2;background:var(--panel);color:var(--ink);font:400 13px var(--mono);border-radius:10px;padding:8px 12px;display:inline-flex;gap:8px;align-items:center}
.frame__tag i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.f-notch-bl .frame__tag{left:auto;right:18px}
.scrollshot .frame__clip img{transition:object-position 7s cubic-bezier(.45,0,.55,1)}
.scrollshot:hover .frame__clip img,.scrollshot.is-play .frame__clip img{object-position:bottom center}
.phone{position:absolute;right:-2%;bottom:-6%;width:24%;border-radius:22px;overflow:hidden;border:5px solid var(--ink);background:var(--ink);z-index:4;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.phone img{width:100%;aspect-ratio:300/600;object-fit:cover;object-position:top}
@media (max-width:900px){.frame{max-width:640px}}

/* ---------- Kreise im Band ---------- */
.ring{position:absolute;width:var(--size,520px);aspect-ratio:1;pointer-events:none}
.ring i{position:absolute;left:50%;top:50%;width:var(--dot,108px);aspect-ratio:1;margin:calc(var(--dot,108px)/-2);border-radius:50%;background:var(--band-dot);transform:rotate(calc(var(--i)*45deg)) translateY(calc(var(--size,520px)/-2 + var(--dot,108px)/2))}
.ring--hero{right:4%;top:50%;translate:0 -46%}
.ring--center{left:50%;top:50%;translate:-50% -50%;--size:min(640px,calc(120 * var(--vw)));--dot:min(108px,calc(20 * var(--vw)))}
@media (prefers-reduced-motion:no-preference){.ring{animation:spin 90s linear infinite}@keyframes spin{to{rotate:360deg}}}

/* ---------- Hero (Startseite und Unterseiten) ---------- */
.hero{position:relative;min-height:min(calc(100 * var(--svh)),880px);display:flex;align-items:center;padding:120px 0 72px;background:var(--band);overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity 1.2s ease}
.hero__bg img.on{opacity:1}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,0) 60%)}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__panel{position:relative;width:min(860px,100%);min-height:620px;background:var(--panel);clip-path:url(#c-pent);padding:56px 34% 62px 60px;display:flex;flex-direction:column}
.hero__panel .brand{margin-bottom:auto}
.hero__panel h1{margin:64px 0 34px}
.hero__panel .lead{max-width:470px}
.hero__cta{position:absolute;z-index:3;right:var(--gut);bottom:72px;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.hero__live{font:400 13px var(--mono);background:var(--panel);color:var(--ink);border-radius:10px;padding:8px 12px;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.hero__live i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.hero--page{min-height:min(calc(84 * var(--svh)),760px)}
.hero--page .hero__panel{min-height:540px}
.hero--plain{background:var(--tint)}
.hero--plain .hero__bg{display:none}
.hero--plain .hero__panel{background:var(--plain);clip-path:none;border-radius:40px;padding-right:60px;width:min(980px,100%);min-height:0}
@media (max-width:900px){
  .hero{min-height:0;padding:96px 0 0;align-items:stretch;flex-direction:column;background:var(--panel)}
  .hero__bg{position:relative;height:calc(56 * var(--vw));min-height:240px;order:2;inset:auto}
  .hero__bg::after{display:none}
  .hero__inner{order:1}
  .hero__panel,.hero--page .hero__panel{clip-path:none;padding:12px 0 36px;min-height:0;width:100%}
  .hero__panel h1{margin:40px 0 22px}
  .hero__cta{position:relative;right:auto;bottom:auto;align-items:flex-start;padding:0 var(--gut) 40px;order:3;flex-direction:row;flex-wrap:wrap}
  .hero--plain{background:var(--tint)}
  .hero--plain .hero__panel{background:transparent;padding:12px 0 48px}
}

/* ---------- Band-Abschnitte ---------- */
.band-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,calc(6 * var(--vw)),90px);position:relative;z-index:2}
.band-grid .btns{margin-top:clamp(36px,calc(6 * var(--vw)),110px);justify-content:flex-end}
@media (max-width:900px){.band-grid{grid-template-columns:1fr}.band-grid .btns{justify-content:flex-start}}

/* Finale (wie „Thank you!") */
.finale{text-align:center;padding-block:clamp(80px,calc(11 * var(--vw)),150px)}
.finale .brand{justify-content:center;margin-bottom:clamp(40px,calc(6 * var(--vw)),76px)}
.finale__title{font-weight:400;font-size:clamp(54px,calc(9 * var(--vw)),124px);line-height:.92;letter-spacing:-.04em;color:var(--band-head)!important;margin-bottom:34px}
.finale .lead{max-width:640px;margin:0 auto 18px}
.finale .btns{justify-content:center;margin-top:40px}
.finale__inner{position:relative;z-index:2}

/* Fußzeile */
.foot{background:var(--band);color:var(--band-text);border-top:1px solid rgba(255,255,255,.12);padding:56px 0 34px;font:300 14px/1.7 var(--mono)}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.4fr;gap:32px}
.foot h2{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--band-muted);margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.foot__bottom{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.foot__bottom nav{display:flex;gap:20px;flex-wrap:wrap}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}.foot__grid>:first-child{grid-column:1/-1}}

/* ---------- Kundenleiste ---------- */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:12px;width:max-content}
@media (prefers-reduced-motion:no-preference){.marquee__track{animation:mq 46s linear infinite}.marquee:hover .marquee__track{animation-play-state:paused}@keyframes mq{to{transform:translateX(-50%)}}}
.client{background:var(--tile);border-radius:12px;padding:14px 20px;white-space:nowrap}
.client b{display:block;font-size:19px;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.client span{font:400 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.marquee__track{flex-wrap:wrap;width:auto}.marquee{mask-image:none}.marquee__track [aria-hidden]{display:none}}

/* ---------- Mini-Dashboard (Beispieldaten) ---------- */
.demo{background:var(--plain);border-radius:var(--r);padding:clamp(18px,calc(2.4 * var(--vw)),28px);display:grid;gap:12px;border:1px solid var(--line)}
.sec--plain .demo{background:var(--tint)}
.demo__top{display:flex;justify-content:space-between;align-items:center;font:400 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.demo__kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{background:var(--tile);border-radius:12px;padding:14px}
.kpi small{display:block;font:400 12px var(--mono);color:var(--muted)}
.kpi b{display:block;font-size:clamp(18px,calc(1.8 * var(--vw)),24px);color:var(--ink);letter-spacing:-.02em;margin:4px 0 2px}
.kpi span{font:300 12px var(--mono);color:var(--muted)}
.demo__rows{display:grid;gap:8px}
.drow{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px;align-items:center;background:var(--tile);border-radius:10px;padding:11px 14px;font-size:14px;color:var(--ink)}
.drow em{font-style:normal;font:400 12px var(--mono);color:var(--muted)}
.pill{justify-self:start;font:400 12px var(--mono);border-radius:999px;padding:4px 10px;background:var(--plain);color:var(--ink)}
.pill--ok{background:#1f7a3e;color:#fff}
.pill--warn{background:var(--accent);color:#0c0c0e}
.bar{height:6px;border-radius:6px;background:var(--plain);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:6px}
.demo__foot{font:300 12px var(--mono);color:var(--muted)}
@media (max-width:520px){.demo__kpis{grid-template-columns:1fr}.drow{grid-template-columns:1fr 1fr}.drow>:last-child{grid-column:1/-1}}

/* Verbindungs-Diagramm */
.flow{position:relative;aspect-ratio:1/1;background:var(--tint);clip-path:url(#c-chamfer)}
.sec--tint .flow{background:var(--plain)}
.flow svg{position:absolute;inset:0;width:100%;height:100%}
.flow line{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:4 6;opacity:.45}
.flow .node{position:absolute;translate:-50% -50%;background:var(--tile);color:var(--ink);border-radius:12px;padding:12px 16px;font:400 14px var(--mono);white-space:nowrap}
.flow .node--core{background:var(--ink);color:var(--plain);border-radius:50%;width:30%;aspect-ratio:1;display:grid;place-items:center;padding:0;font-weight:500}
.flow .pulse{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);translate:-50% -50%;offset-rotate:0deg}

/* FAQ als Kacheln */
.faq{display:grid;gap:10px}
.faq details{background:var(--tile);border-radius:12px}
.sec--plain .faq details{background:var(--tint)}
.sec--tint .faq details{background:var(--plain)}
.faq summary{list-style:none;cursor:pointer;padding:18px 56px 18px 20px;font-weight:600;font-size:18px;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font:300 26px var(--mono);color:var(--accent-text);transition:rotate .25s}
.faq details[open] summary::after{rotate:45deg}
.faq details p{padding:0 20px 20px;font:300 15px/1.7 var(--mono);color:var(--text);max-width:760px}

/* Formular (Fragebogen-Stil) */
.form{display:grid;gap:26px}
.form fieldset{border:0;margin:0;padding:0;min-width:0}
.form legend,.form label.lbl{display:block;font-weight:700;font-size:20px;color:var(--ink);margin-bottom:12px}
.form .opt-in{position:relative;display:block}
.form .opt-in input{position:absolute;opacity:0;inset:0;cursor:pointer}
.form .opt-in span{display:block;background:var(--tile);border-radius:10px;padding:14px 18px;font-size:17px;color:var(--ink);border:2px solid transparent;transition:background .15s,border-color .15s}
.form .opt-in input:checked+span{border-color:var(--ink);background:var(--tile-hover)}
.form .opt-in input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.form .opt-in span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink);margin-right:12px;vertical-align:1px}
.form .opt-in input:checked+span::before{background:var(--accent);border-color:var(--accent)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:6px}
.field>span{font:400 13px var(--mono);color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-width:0;font:400 17px var(--sans);color:var(--ink);background:var(--tile);border:2px solid transparent;border-radius:10px;padding:14px 16px;appearance:none}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field--full{grid-column:1/-1}
@media (max-width:600px){.fields{grid-template-columns:1fr}}
.form-result{background:var(--ink);color:var(--plain);border-radius:var(--r);padding:24px}
.form-result h3{color:var(--plain);margin-bottom:6px}
.form-result p{font:300 15px var(--mono);margin-bottom:16px}

/* Kontaktwege */
.contact-ways{display:grid;gap:10px}
.contact-ways a{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--tile);border-radius:12px;padding:18px 20px;text-decoration:none;color:var(--ink);font-size:clamp(17px,calc(1.6 * var(--vw)),21px);font-weight:600;overflow-wrap:anywhere}
.contact-ways a:hover{background:var(--tile-hover)}
.contact-ways small{font:400 12px var(--mono);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* Team */
.person{display:flex;flex-direction:column;gap:6px}
.avatar{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--band);color:var(--band-text);font:500 20px var(--mono);margin-bottom:10px}
.person:nth-child(3n+2) .avatar{background:var(--accent);color:#0c0c0e}
.person:nth-child(3n) .avatar{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}

/* Projekt-Zeilen */
.proj{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,calc(5 * var(--vw)),80px);align-items:center}
.proj+.proj{margin-top:clamp(64px,calc(8 * var(--vw)),120px)}
.proj:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.proj:nth-child(even) .proj__media{order:2}
.proj__meta{font:400 13px var(--mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.proj h3{font-size:clamp(30px,calc(3.4 * var(--vw)),44px);font-weight:700;line-height:1.05;margin-bottom:6px}
.proj__sub{font:400 18px var(--mono);color:var(--accent-text);margin-bottom:18px}
.proj .body{margin-bottom:20px}
.proj .chips{margin-bottom:26px}
@media (max-width:900px){.proj,.proj:nth-child(even){grid-template-columns:1fr}.proj:nth-child(even) .proj__media{order:0}}

/* Preis + Empfehlung */
.big-num{font-weight:300;font-size:clamp(72px,calc(12 * var(--vw)),170px);line-height:.85;letter-spacing:-.05em;color:var(--band-head)}
.price{font-weight:400;font-size:clamp(44px,calc(6 * var(--vw)),88px);line-height:.95;letter-spacing:-.035em}

/* Zeitleiste */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.timeline li{display:grid;grid-template-columns:72px 1fr;gap:18px;background:var(--tile);border-radius:14px;padding:22px}
.sec--tint .timeline li{background:var(--plain)}
.timeline .num{font:400 15px var(--mono);color:var(--accent-text)}
.timeline h3{font-size:22px;margin-bottom:6px}
.timeline p{font:300 15px/1.7 var(--mono)}
.timeline strong{color:var(--ink);font-weight:500}
@media (max-width:520px){.timeline li{grid-template-columns:1fr;gap:6px}}

/* Stellen */
.jobs{display:grid;gap:12px}
.job{background:var(--tile);border-radius:16px}
.sec--tint .job{background:var(--plain)}
.job summary{list-style:none;cursor:pointer;padding:22px 64px 22px 24px;position:relative}
.job summary::-webkit-details-marker{display:none}
.job summary::after{content:"+";position:absolute;right:24px;top:24px;font:300 28px/1 var(--mono);color:var(--accent-text);transition:rotate .25s}
.job[open] summary::after{rotate:45deg}
.job h3{font-size:clamp(20px,calc(2 * var(--vw)),26px);margin-bottom:10px}
.job__body{padding:0 24px 24px;display:grid;gap:22px}
.job__body h4{font-size:16px;margin-bottom:10px}
.job__body ul{margin:0;padding-left:18px;font:300 15px/1.7 var(--mono)}
.job__cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tag{display:inline-block;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--accent);color:#0c0c0e;border-radius:6px;padding:4px 8px;margin-bottom:10px}
@media (max-width:700px){.job__cols{grid-template-columns:1fr}}

/* Rechtstexte */
.legal{max-width:780px}
.legal h2{font-size:22px;font-weight:700;margin:42px 0 12px}
.legal p,.legal address{font:300 15.5px/1.75 var(--mono);font-style:normal;margin-bottom:12px;color:var(--text);overflow-wrap:anywhere}
.legal a{color:var(--accent-text)}

/* Scroll-Einblendung */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .js .rv.in{opacity:1;transform:none}
}

/* Kacheln im Band */
.sec--band .opts li,.sec--band .opt{background:rgba(255,255,255,.1);color:var(--band-text)}
.sec--band .opts a:hover{background:rgba(255,255,255,.16)}
.sec--band .opts--num li::before{color:var(--band-head)}


/* Korrekturen nach erster Sichtprüfung */
.marquee__clone{display:contents}
@media (prefers-reduced-motion:reduce){.marquee__clone{display:none}}
.flow line{vector-effect:non-scaling-stroke}
.card .big-num{font:300 clamp(72px,calc(10 * var(--vw)),150px)/.85 var(--sans);letter-spacing:-.05em;color:var(--band-head);margin:10px 0 4px}
.opts a.opt{margin:0;padding:15px 18px}
.foot .brand{color:var(--band-text)}
.foot .brand__arc{stroke:#C4000F}
.f-notch-bl .frame__tag{left:18px;right:auto;top:18px;bottom:auto}
.hero__panel{padding-right:30%}
.hero .display{font-size:clamp(44px,calc(6.2 * var(--vw)),96px)}
@media (max-width:900px){.hero__panel{padding-right:0}}
.phone img{height:auto}
.hero__bg::after{background:linear-gradient(90deg,rgba(8,8,10,.55),rgba(8,8,10,.18) 70%)}
.hero--page .display{font-size:clamp(40px,calc(5.2 * var(--vw)),80px)!important;overflow-wrap:break-word;hyphens:auto}
@media (max-width:600px){.phone{width:28%;right:2%;bottom:-4%;border-width:4px;border-radius:16px}}
.hero--page .display{font-size:clamp(38px,calc(4.6 * var(--vw)),72px)!important;overflow-wrap:normal}
.hero--page .hero__panel{padding-right:22%}
@media (max-width:900px){.hero--page .hero__panel{padding-right:0}}

/* ---------- Hero-Illustration (isometrisch, Inline-SVG) ---------- */
:root{--hero-bg:#f8dedb;--iso-face:#ffffff;--iso-side:#ff2430;--iso-side2:#d40e1a;--iso-soft:#ffd9d6;--iso-line:#0c0c0e}

.hero--art{background:var(--hero-bg)}
.hero--art .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center}
.hero--art .hero__panel{width:100%;padding-right:24%}
.hero__art{position:relative;z-index:1;margin-left:7%;align-self:stretch;display:flex;align-items:center;padding-bottom:70px}
.hero__art .iso{height:auto;max-height:640px}
.iso{display:block;width:100%;height:100%;overflow:visible}
.iso polygon,.iso .ln,.iso .soft,.iso .dot{stroke:var(--iso-line);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso .f{fill:var(--iso-face)}.iso .s{fill:var(--iso-side)}.iso .s2{fill:var(--iso-side2)}
.iso .ln{fill:none}.iso .soft{fill:var(--iso-soft)}.iso .dot{fill:var(--iso-side)}
.iso .dash{stroke:var(--iso-line);stroke-width:1.6;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.iso .dotf{fill:var(--iso-side);stroke:var(--iso-line);stroke-width:1.6;vector-effect:non-scaling-stroke}
.iso .t{fill:var(--iso-line);font:400 7.5px var(--mono)}
.iso .t--big{font:600 13px var(--sans)}
@media (prefers-reduced-motion:no-preference){
  .iso .float{animation:isoFloat 6s ease-in-out infinite}
  .iso .float--2{animation-delay:-3s}
  @keyframes isoFloat{50%{transform:translateY(-8px)}}
}
@media (max-width:900px){
  .hero--art{background:var(--hero-bg)}
  .hero--art .hero__panel{background:var(--panel);border-radius:28px;padding:28px 22px 32px;margin-top:4px}
  .hero--art .wrap{display:block}
  .hero--art .hero__panel{padding-right:22px}
  .hero__art{margin:16px 0 0;padding:0;height:auto}
  .hero__art .iso{max-height:none}
  .hero--art .hero__cta{padding-top:12px}
}

/* ---------- Startseiten-Hero: genau eine Bildschirmhöhe ---------- */
@media (min-width:901px){
  .hero--art{height:calc(100 * var(--svh));min-height:560px;max-height:1100px;padding:clamp(76px,calc(11 * var(--vh)),96px) 0 clamp(20px,calc(3.5 * var(--vh)),36px);align-items:stretch}
  .hero--art .hero__inner,.hero--art .wrap{height:100%}
  .hero--art .wrap{align-items:stretch}
  .hero--art .hero__panel{min-height:0;height:100%;padding:clamp(26px,calc(5 * var(--vh)),56px) 18% clamp(26px,calc(5 * var(--vh)),52px) clamp(32px,calc(4.2 * var(--vw)),60px);justify-content:space-between}
  .hero--art .hero__panel h1{margin:0 0 clamp(14px,calc(2.6 * var(--vh)),30px);font-size:min(calc(6 * var(--vw)),calc(9.6 * var(--vh)),96px);line-height:.94}
  .hero--art .hero__panel .kicker{margin-bottom:clamp(10px,calc(2 * var(--vh)),22px)!important}
  .hero--art .hero__panel .lead{font-size:clamp(15px,min(calc(1.35 * var(--vw)),calc(2.4 * var(--vh))),20px);max-width:440px}
  .hero__text{display:flex;flex-direction:column}
  .hero--art .hero__art{margin-left:5%;padding:0 0 clamp(64px,calc(10 * var(--vh)),96px);align-items:center;justify-content:center}
  .hero--art .hero__art .iso{max-height:100%}
  .hero--art .hero__cta{bottom:clamp(20px,calc(3.5 * var(--vh)),36px)}
}
@media (max-width:900px){
  .hero--art .hero__art .iso{max-height:calc(34 * var(--svh));margin:0 auto}
  .hero--art .hero__panel h1{margin:22px 0 14px;font-size:clamp(38px,calc(11 * var(--vw)),56px)}
  .hero--art .hero__panel{padding:22px 20px 24px}
  .hero--art .hero__cta{padding-bottom:24px}
}
@media (min-width:901px){
  .hero--art .hero__panel{container-type:inline-size;justify-content:flex-start}
  .hero--art .hero__text{margin-block:auto}
  .hero--art .hero__panel h1{font-size:min(calc(9.6 * var(--vh)),10.6cqi,92px)}
}
@media (max-width:900px){
  .hero--art{padding-top:78px}
  .hero--art .hero__panel h1{margin:16px 0 12px}
}
@media (max-width:900px) and (max-height:760px){
  .hero--art .hero__art .iso{max-height:calc(24 * var(--svh))}
  .hero--art .hero__panel{padding:18px 18px 20px}
  .hero--art .hero__panel h1{font-size:clamp(34px,calc(10 * var(--vw)),48px)}
  .hero--art .hero__panel .lead{font-size:15px}
  .hero--art .hero__cta{padding-top:8px;padding-bottom:16px}
}
@media (min-width:901px){
  .hero--art .hero__panel{padding-right:12%}
  .hero--art .hero__panel h1{font-size:min(calc(10 * var(--vh)),14.2cqi,98px)}
}
@media (max-width:900px){.br-d{display:none}}

/* ---------- Startseite 01: Workspace-Illustration und ruhigere Textspalte ---------- */
.split--ws{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(32px,calc(4.4 * var(--vw)),72px)}
.sec--ws .dashes{margin-bottom:clamp(24px,calc(3 * var(--vw)),40px)}
.sec--ws .q{margin-bottom:20px}
.lead--s{font-size:clamp(16px,calc(1.25 * var(--vw)),18px);max-width:480px;margin-bottom:26px}
.checks{list-style:none;margin:0;padding:0;max-width:480px;border-top:1px solid var(--line)}
.checks li{position:relative;padding:13px 0 13px 34px;border-bottom:1px solid var(--line);font-size:17px;line-height:1.4;color:var(--ink)}
.checks li::before{content:"";position:absolute;left:0;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:6px;background:var(--accent)}
.checks li::after{content:"";position:absolute;left:7px;top:50%;width:5px;height:9px;margin-top:-6.5px;border:solid #0c0c0e;border-width:0 2px 2px 0;transform:rotate(45deg)}
.claim{margin:22px 0 28px;font-weight:700;font-size:clamp(19px,calc(1.6 * var(--vw)),22px);line-height:1.3;color:var(--ink)}
.claim span{color:var(--accent-text)}
.ws{margin:0}
.ws__stage{background:var(--hero-bg);clip-path:url(#c-wedge);padding:clamp(28px,calc(4 * var(--vw)),52px) 12% clamp(24px,calc(3.4 * var(--vw)),44px) clamp(16px,calc(2.4 * var(--vw)),36px)}
.ws .iso{height:auto}
.ws figcaption{max-width:66%;margin-top:clamp(12px,calc(1.6 * var(--vw)),18px);padding-left:clamp(20px,calc(3 * var(--vw)),44px);font:300 12px/1.5 var(--mono);color:var(--muted)}
.iso .nil{fill:none;stroke:none}
.iso .tile{fill:var(--iso-face);stroke:var(--iso-line);stroke-width:1.3;vector-effect:non-scaling-stroke}
.iso .ipill{stroke:var(--iso-line);stroke-width:1.3;vector-effect:non-scaling-stroke}
.iso .ipill--ok{fill:var(--iso-line)}.iso .ipill--draft{fill:var(--iso-face)}.iso .ipill--warn{fill:var(--iso-side)}
.iso .ipulse{fill:none;stroke:var(--iso-side);stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:0}
.iso .box{fill:var(--iso-face);stroke:var(--iso-line);stroke-width:1.3;vector-effect:non-scaling-stroke}
.iso .box-on{fill:var(--iso-side);stroke:var(--iso-line);stroke-width:1.3;vector-effect:non-scaling-stroke}
.iso .tick{fill:none;stroke:#0c0c0e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.iso path.s,.iso path.s2,.iso ellipse.f{stroke:var(--iso-line);stroke-width:1.6;vector-effect:non-scaling-stroke}
.iso ellipse.f{fill:var(--iso-face)}
.iso .t--mut{font:400 7.6px var(--mono);fill:var(--iso-line);opacity:.62}
.iso .t--url{font:400 7.6px var(--mono)}
.iso .t--nav{font:400 7px var(--mono)}
.iso .t--amt{font:700 14.5px var(--sans);letter-spacing:-.02em}
.iso .t--lab{font:400 8px var(--mono);opacity:.7}
.iso .t--name{font:600 10.5px var(--sans)}
.iso .t--val{font:600 10px var(--sans)}
.iso .t--pill{font:500 7.4px var(--mono)}
.iso .t--pill-ok{fill:var(--iso-face)}.iso .t--pill-warn{fill:#0c0c0e}
.iso .t--card{font:700 13px var(--sans)}
.iso .t--todo{font:500 9.2px var(--sans)}
.iso .t--coin{font:700 20px var(--sans);fill:var(--iso-line)}
/* ohne Bewegung: Endzustand zeigen */
.iso .tick{stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .iso .iflow{animation:isoFlow 1.1s linear infinite}
  @keyframes isoFlow{to{stroke-dashoffset:-18}}
  .iso .ipulse{transform-box:fill-box;transform-origin:center;animation:isoPulse 2.4s ease-out infinite}
  @keyframes isoPulse{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.45,1.9)}}
  .iso .box-on{animation:isoBox 9s linear infinite both}
  .iso .tick{animation:isoTick 9s linear infinite both}
  .iso .b2{animation-name:isoBox2}.iso .k2{animation-name:isoTick2}
  .iso .b3{animation-name:isoBox3}.iso .k3{animation-name:isoTick3}
  @keyframes isoBox{0%,10%{opacity:0}13%,88%{opacity:1}94%,100%{opacity:0}}
  @keyframes isoTick{0%,11%{stroke-dashoffset:1}17%,88%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
  @keyframes isoBox2{0%,30%{opacity:0}33%,88%{opacity:1}94%,100%{opacity:0}}
  @keyframes isoTick2{0%,31%{stroke-dashoffset:1}37%,88%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
  @keyframes isoBox3{0%,50%{opacity:0}53%,88%{opacity:1}94%,100%{opacity:0}}
  @keyframes isoTick3{0%,51%{stroke-dashoffset:1}57%,88%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
  .js .ws.rv .rise,.js .ws.rv .row{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d),transform .7s cubic-bezier(.2,.7,.2,1) var(--d)}
  .js .ws.rv.in .rise,.js .ws.rv.in .row{opacity:1;transform:none}
}
@media (max-width:900px){.split--ws{grid-template-columns:1fr}.ws__stage{padding:44px 12% 22px 12px}.ws figcaption{max-width:none;padding-left:4px}}
@media (max-width:520px){.sec--ws .btn{font-size:15px;padding-inline:20px}}

/* ---------- Startseite 02: Verbindungs-Illustration ---------- */
.ws--hex .ws__stage{clip-path:url(#c-hexw);padding:clamp(28px,calc(4 * var(--vw)),52px) 13%}
.ws--hex figcaption{max-width:none;padding-left:13%}
.iso .track{fill:var(--iso-soft);stroke:var(--iso-line);stroke-width:1.3;vector-effect:non-scaling-stroke}
.iso .cell{fill:var(--iso-soft);stroke:var(--iso-line);stroke-width:1.1;vector-effect:non-scaling-stroke}
.iso .cell--on{fill:var(--iso-side)}
.iso .hit{fill:none;stroke:var(--iso-side);stroke-width:3;vector-effect:non-scaling-stroke}
.iso .t--hub{font:700 12px var(--sans)}
.iso .t--lab{fill:var(--iso-line)}
@media (prefers-reduced-motion:no-preference){
  .iso .spin{transform-box:fill-box;transform-origin:center;animation:isoSpin 14s linear infinite}
  @keyframes isoSpin{to{transform:rotate(360deg)}}
}
@media (prefers-reduced-motion:reduce){.iso .pkt,.iso .hit{display:none}}
@media (max-width:900px){.ws--hex .ws__stage{padding:24px 11%}.ws--hex figcaption{padding-left:4px}}

/* ---------- Originale Wortmarke: Größen je Ort ---------- */
.brand{line-height:0}
.hero__panel .brand{align-self:flex-start}
.hero__panel .brand__wm{width:clamp(120px,calc(10 * var(--vw)),140px)}
.finale .brand__wm{width:clamp(140px,calc(14 * var(--vw)),190px)}
.foot .brand__wm{width:132px}

@media (max-width:520px){.brand__wm{width:100px}}

/* ---------- Kopfzeile: Logo mittig, beim Runterscrollen ausblenden ---------- */
.top__brand{display:grid;place-items:center;height:52px;padding:0 18px}
.top__brand .brand{display:block}
.top{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.top.is-hidden{transform:translateY(calc(-100% - 28px))}
@media (prefers-reduced-motion:reduce){.top{transition:none}}
@media (max-width:520px){.top__brand{height:52px;padding:0 14px}}

/* =====================================================================
   Startseite einheitlich: Iso-Stil (Kontur + roter Versatz) und Animationen
   Gilt nur für body.home; Unterseiten bleiben unverändert.
   ===================================================================== */
.home{--o-w:1.6px;--o-shadow:var(--iso-side);--o-band-shadow:var(--accent)}


/* Grundbaustein: Fläche mit Kontur und rotem Versatz wie die Iso-Platten */
.home .card,.home .client,.home .contact-ways a,.home .form .opt-in span{background:var(--iso-face);border:var(--o-w) solid var(--iso-line);box-shadow:5px 5px 0 var(--o-shadow);border-radius:14px}
.home .sec--plain .card,.home .sec--tint .card{background:var(--iso-face)}
.home a.card:hover,.home .contact-ways a:hover,.home .client:hover{translate:-3px -3px;box-shadow:8px 8px 0 var(--o-shadow);background:var(--iso-face)}
.home .client,.home .contact-ways a{transition:translate .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s cubic-bezier(.2,.7,.2,1)}
.home .card .num{color:var(--accent-text)}

/* Karten auf den Bändern: helle Platten, Versatz in Bandkontrast */
.home .sec--band .card{background:var(--iso-face);color:var(--iso-line);box-shadow:6px 6px 0 var(--o-band-shadow)}
.home .sec--band .card h3{color:var(--iso-line)}
.home .sec--band .card p{color:var(--text)}
.home .sec--band .card .num{color:var(--accent-text)}

/* Kundenleiste */
.home .marquee{padding:8px 0 14px}
.home .marquee__track{gap:18px;padding-left:4px}
.home .client{padding:14px 22px 14px 18px;display:grid;grid-template-columns:auto auto;column-gap:12px;align-items:baseline}
.home .client i{grid-row:1/3;align-self:start;font:500 12px/1.9 var(--mono);color:var(--accent-text);font-style:normal}
.home .client span{grid-column:2}

/* Band 1: Kompass */
.band-art .iso{height:auto;max-height:300px}
.sec--intro .band-art{max-width:400px;margin:clamp(20px,calc(3 * var(--vw)),36px) 0 0 auto}
.sec--intro .band-grid .btns{margin-top:clamp(18px,calc(2.4 * var(--vw)),28px)}
.iso .f-ring{fill:var(--iso-face);stroke:var(--iso-line);stroke-width:1.6;vector-effect:non-scaling-stroke}

/* 02: Schritte als ruhige Liste (wie die Häkchen in 01) */
.steps{list-style:none;margin:0 0 4px;padding:0;max-width:520px;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:44px 1fr;padding:14px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.45;color:var(--ink)}
.steps i{font:500 14px/1.9 var(--mono);font-style:normal;color:var(--accent-text)}

/* 03: Projekte im Fenster auf einer Bühne */
.home .proj__stage{background:var(--hero-bg);clip-path:url(#c-prism);padding:9% 10% 11% 11%}
.f-win{filter:drop-shadow(6px 6px 0 var(--iso-side))}
.f-win .frame__bar{display:flex;gap:6px;align-items:center;height:28px;padding:0 12px;background:var(--iso-face);border:var(--o-w) solid var(--iso-line);border-bottom-width:1px;border-radius:12px 12px 0 0}
.f-win .frame__bar i{width:9px;height:9px;border-radius:50%;border:1.4px solid var(--iso-line)}
.f-win .frame__bar i:first-child{background:var(--iso-side)}
.f-win .frame__clip{border:var(--o-w) solid var(--iso-line);border-top:0;border-radius:0 0 12px 12px}
.f-win .phone{border:4px solid var(--iso-line);box-shadow:none}
.f-win .frame__tag{border:var(--o-w) solid var(--iso-line)}

/* 04: Leistungen mit Motiv */
.card--svc{padding-top:clamp(18px,calc(2 * var(--vw)),24px)}
.card__art{display:block;height:118px;margin-bottom:6px}
.card__art .iso{height:100%;width:auto;max-width:78%}
.home .card--svc .card__arrow{border-width:var(--o-w)}

/* 05: Stufen */
.steps-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(24px,calc(4 * var(--vw)),60px);align-items:end;margin-bottom:clamp(32px,calc(4 * var(--vw)),52px)}
.steps-head .head{margin-bottom:0}
.sec--steps .band-art .iso{max-height:300px;margin-left:auto}
.iso .t--step{font:700 22px var(--sans);fill:var(--iso-line)}
@media (max-width:900px){.steps-head{grid-template-columns:1fr}.sec--steps .band-art .iso{max-height:190px;margin:0}}

/* 06: Team */
.home .person .avatar{border:var(--o-w) solid var(--iso-line)}
.home .opts--wide .opt{background:var(--iso-face);border:var(--o-w) solid var(--iso-line);box-shadow:5px 5px 0 var(--o-shadow);border-radius:14px}

/* Partner und Empfehlung */
.lines{list-style:none;margin:0;padding:0;max-width:520px;border-top:1px solid var(--line)}
.lines li{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:15px 0;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)}
.lines span{font:300 14px var(--mono);color:var(--muted)}
.card--ref{position:relative;overflow:hidden;border-color:var(--iso-line)!important}
.ref-art{position:absolute;right:clamp(14px,calc(2.6 * var(--vw)),36px);top:clamp(16px,calc(2.6 * var(--vw)),34px);width:clamp(96px,calc(11 * var(--vw)),150px);pointer-events:none}
.ref-art .iso{height:auto}
.card--ref .kicker,.card--ref h2{max-width:calc(100% - clamp(96px,calc(11 * var(--vw)),150px) - 24px)}
.iso .t--pct{font:700 30px var(--sans);fill:var(--iso-line)}

/* 07: FAQ als ruhige Liste */
.home .faq{gap:0;border-top:1px solid var(--line)}
.home .faq details,.home .sec--plain .faq details,.home .sec--tint .faq details{background:none;border-radius:0;border-bottom:1px solid var(--line)}
.home .faq summary{padding:20px 60px 20px 0}
.home .faq summary::after{right:0;width:32px;height:32px;display:grid;place-items:center;border:var(--o-w) solid var(--iso-line);border-radius:50%;font-size:20px;line-height:1;color:var(--iso-line);background:var(--iso-face);box-shadow:3px 3px 0 var(--o-shadow);transition:rotate .25s,background .25s}
.home .faq details[open] summary::after{background:var(--iso-side);color:#0c0c0e}
.home .faq details p{padding:0 0 22px}

/* Kontakt */
.home .contact-ways{gap:14px}
.home .form .opt-in input:checked+span{border-color:var(--iso-line);background:var(--iso-soft);box-shadow:5px 5px 0 var(--o-shadow)}
.home .form .opt-in span{box-shadow:3px 3px 0 var(--o-shadow)}
.contact-art{max-width:300px;margin-top:clamp(24px,calc(3 * var(--vw)),40px)}
.contact-art .iso{height:auto}

/* Abschluss: schwebende Bausteine statt Punktring */
.finale__art{position:absolute;top:50%;translate:0 -50%;width:clamp(120px,calc(15 * var(--vw)),230px);pointer-events:none;z-index:1}
.finale__art .iso{height:auto}
.finale__art--l{left:clamp(16px,calc(5 * var(--vw)),90px)}
.finale__art--r{right:clamp(16px,calc(5 * var(--vw)),90px)}
@media (max-width:820px){.finale__art{display:none}}

/* Animationen: gestaffeltes Einblenden, Kartenhub, Motive */
@media (prefers-reduced-motion:no-preference){
  .js .home .rv{transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s cubic-bezier(.2,.7,.2,1)}
  .home .card:not(.rv){transition:translate .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s cubic-bezier(.2,.7,.2,1)}
  .iso .needle{transform-box:fill-box;transform-origin:center;animation:isoNeedle 7s cubic-bezier(.45,0,.3,1) infinite}
  @keyframes isoNeedle{0%{transform:rotate(0)}18%{transform:rotate(110deg)}34%{transform:rotate(-60deg)}50%{transform:rotate(35deg)}62%{transform:rotate(-12deg)}72%,100%{transform:rotate(0)}}
  .iso .blink{animation:isoBlink 1.8s steps(1) infinite}
  @keyframes isoBlink{50%{opacity:.15}}
  .iso .slide{animation:isoSlide 5s ease-in-out infinite}
  @keyframes isoSlide{0%,100%{transform:translateY(6px)}50%{transform:translateY(-14px)}}
  .js .rv .iso .grow{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.15);transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .3s)}
  .js .rv.in .iso .grow{transform:none}
  .home a.card:hover .iso .float{animation-duration:2.4s}
  .home .faq details[open] p{animation:faqIn .35s ease-out}
  @keyframes faqIn{from{opacity:0;transform:translateY(-6px)}}
}

/* Formularfelder im selben Stil */
.home .field input,.home .field select,.home .field textarea{background:var(--iso-face);border:var(--o-w) solid var(--iso-line);border-radius:12px;transition:box-shadow .2s}
.home .field input:focus,.home .field select:focus,.home .field textarea:focus{outline:none;box-shadow:4px 4px 0 var(--o-shadow)}
@media (max-width:600px){.card__art{height:92px}}

/* ---------- Band unter dem Hero: flach, drei Spalten ---------- */
.sec--intro{padding-block:clamp(44px,calc(5 * var(--vw)),72px)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(150px,.42fr);gap:clamp(24px,calc(3.6 * var(--vw)),60px);align-items:center}
.intro-q{font-weight:400;font-size:clamp(28px,calc(2.7 * var(--vw)),40px);line-height:1.08;letter-spacing:-.02em;color:var(--band-text)}
.sec--intro .lead{font-size:clamp(15px,calc(1.15 * var(--vw)),17px)}
.sec--intro .btns{margin-top:20px}
.sec--intro .band-art{max-width:none;margin:0}
.sec--intro .band-art .iso{max-height:210px;margin-inline:auto}
@media (max-width:1000px){.intro-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sec--intro .band-art{display:none}}
@media (max-width:640px){.intro-grid{grid-template-columns:1fr;gap:18px}.intro-q{font-size:clamp(26px,calc(7.4 * var(--vw)),32px)}}

/* ---------- Leistungsmotive v2 und Empfehlung ---------- */
.iso .shaft{stroke:var(--iso-line);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.iso .tick-l{fill:none;stroke:var(--iso-side);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.iso .ln--on{stroke:var(--iso-side);stroke-width:2.4}
.iso .type{stroke-dasharray:1;stroke-dashoffset:0;stroke-linecap:round}
.iso .caret{fill:var(--iso-side)}
.iso .t--code{font:700 11px var(--mono);fill:var(--iso-side)}
.iso .t--pct{font:700 15px var(--sans);fill:#0c0c0e}
@media (prefers-reduced-motion:no-preference){
  .iso .type{animation:isoType 6s linear infinite}
  .iso .t2{animation-name:isoType2}.iso .t3{animation-name:isoType3}.iso .t4{animation-name:isoType4}
  @keyframes isoType{0%{stroke-dashoffset:1}10%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:1}}
  @keyframes isoType2{0%,10%{stroke-dashoffset:1}22%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:1}}
  @keyframes isoType3{0%,22%{stroke-dashoffset:1}32%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:1}}
  @keyframes isoType4{0%,32%{stroke-dashoffset:1}40%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:1}}
  .iso .caret{animation:isoBlink 1s steps(1) infinite}
  .iso .tick-l{animation:isoCheck 4s ease-out infinite}
  @keyframes isoCheck{0%,15%{stroke-dashoffset:1}35%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
  .iso .lift{animation:isoLift 4.5s cubic-bezier(.45,0,.3,1) infinite}
  @keyframes isoLift{0%,12%{transform:translate(0,0)}40%,78%{transform:translate(0,-26px)}100%{transform:translate(0,0)}}
}
.iso .fletch{stroke:var(--iso-side);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.card--ref .iso .dash{stroke:#f4f4f2}

/* ---------- Partner + Empfehlung: kompakt, alles auf einen Blick ---------- */
.sec--ref{padding-block:clamp(48px,calc(6 * var(--vw)),80px)}
.ref-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,calc(4 * var(--vw)),64px);align-items:center}
.home .card--ref{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(16px,calc(2.4 * var(--vw)),36px);align-items:center;background:var(--band);color:var(--band-text);padding:clamp(26px,calc(3 * var(--vw)),40px);overflow:visible}
.ref__text .kicker{color:var(--band-muted);margin-bottom:12px}
.ref__text h2{font-weight:400;font-size:clamp(30px,calc(3 * var(--vw)),44px);line-height:1.02;letter-spacing:-.02em;color:var(--band-text);margin-bottom:14px}
.ref__text p{font:300 15px/1.6 var(--mono);color:var(--band-text)}
.ref__num{font:300 clamp(56px,calc(6 * var(--vw)),92px)/.9 var(--sans)!important;letter-spacing:-.05em;color:var(--band-head)!important;margin:18px 0 6px}
.ref__text .btns{margin-top:20px}
.ref__art .iso{height:auto;max-height:320px}
.card--ref .iso .t--lab{fill:var(--iso-line)}
@media (max-width:900px){.ref-grid{grid-template-columns:1fr}}
@media (max-width:640px){.home .card--ref{grid-template-columns:1fr}.ref__art{max-width:300px;margin:0 auto;order:-1}}
.home .sec--tint .card--ref{background:var(--band);grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.ref__text h2{font-size:clamp(28px,calc(2.6 * var(--vw)),40px)}
.ref__text .kicker{font-size:13px}
.ref__num{margin:12px 0 4px}
.ref__art .iso{max-height:280px}
.sec--ref{padding-block:clamp(40px,calc(5 * var(--vw)),64px)}
@media (max-width:640px){.home .sec--tint .card--ref{grid-template-columns:1fr}.ref__art{max-width:260px}}
.card__art{height:136px}
.card__art .iso{max-width:86%}
.iso .type{stroke-width:2.2}
@media (max-width:600px){.card__art{height:112px}}
.card__art{height:152px}

/* ---------- Pfeil-Knopf der Leistungskarten: Iso-Stil ---------- */
.home .card--svc .card__arrow{top:clamp(18px,calc(1.8 * var(--vw)),24px);right:clamp(18px,calc(1.8 * var(--vw)),24px);width:42px;height:42px;border-radius:12px;border:var(--o-w) solid var(--iso-line);background:var(--iso-face);color:var(--iso-line);box-shadow:3px 3px 0 var(--o-shadow);transition:background .25s,box-shadow .25s,translate .25s}
.card__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.home a.card--svc:hover .card__arrow,.home a.card--svc:focus-visible .card__arrow{background:var(--iso-side);color:#0c0c0e;translate:-1px -1px;box-shadow:4px 4px 0 var(--iso-line)}
.home a.card--svc:hover .card__arrow svg,.home a.card--svc:focus-visible .card__arrow svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.card__arrow svg{transition:none}}
.person__role{font:500 15px var(--sans)!important;color:var(--ink)}.person__area{color:var(--muted)}

/* =====================================================================
   Karten in eigenen Formen (abgeschrägte Ecken wie Hero- und Bühnenformen)
   Fläche, Kontur und roter Versatz liegen auf ::before:
   - Form per Verlaufs-Schrägen (kein clip-path, damit die Schatten nicht abgeschnitten werden)
   - Kontur und Versatz per drop-shadow
   Variablen --ka..--kd (nicht --d: das ist schon die Einblend-Verzögerung der Karten)
   ===================================================================== */
.home :where(.card,.client,.contact-ways a,.opts--wide .opt){--kf:var(--iso-face);--kl:var(--iso-line);--ks:var(--o-shadow);--ko:5px;--ka:0px;--kb:0px;--kc:0px;--kd:0px}
.home :is(.card,.client,.contact-ways a,.opts--wide .opt){position:relative;isolation:isolate;background:none!important;border-color:transparent!important;box-shadow:none!important;border-radius:0!important}
.home :is(.card,.client,.contact-ways a,.opts--wide .opt)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(135deg,transparent var(--ka),var(--kf) calc(var(--ka) + .5px)) top left/51% 51% no-repeat,
    linear-gradient(225deg,transparent var(--kb),var(--kf) calc(var(--kb) + .5px)) top right/51% 51% no-repeat,
    linear-gradient(315deg,transparent var(--kc),var(--kf) calc(var(--kc) + .5px)) bottom right/51% 51% no-repeat,
    linear-gradient(45deg,transparent var(--kd),var(--kf) calc(var(--kd) + .5px)) bottom left/51% 51% no-repeat;
  filter:drop-shadow(1.5px 0 0 var(--kl)) drop-shadow(-1.5px 0 0 var(--kl)) drop-shadow(0 1.5px 0 var(--kl)) drop-shadow(0 -1.5px 0 var(--kl)) drop-shadow(var(--ko) var(--ko) 0 var(--ks));
  transition:filter .25s cubic-bezier(.2,.7,.2,1)}
.home :is(a.card:hover,.contact-ways a:hover,.client:hover,.opts--wide a.opt:hover){--ko:8px}
/* Formen je Kartentyp: --ka oben links, --kb oben rechts, --kc unten rechts, --kd unten links */
.home .client{--kc:12px}
.home .card--svc{--ka:22px;--kc:22px}
.home .person{--kb:30px;--kd:12px}
.home .sec--band .card{--ka:26px;--ks:var(--o-band-shadow);--ko:6px}
.home .card--ref{--kf:var(--band);--ka:42px;--kc:42px}
.home .contact-ways a{--kc:16px}
.home .opts--wide .opt{--kc:16px}

/* =====================================================================
   Unterseiten-Motive: zusätzliche Bausteine und Animationen
   ===================================================================== */
.iso .t--slab{font:600 11px var(--sans);fill:var(--iso-line)}
.iso .t--code2{font:700 20px var(--mono);fill:var(--iso-side)}
.iso .t--para{font:700 56px var(--sans);fill:var(--iso-side)}
.iso .bar-on{fill:var(--iso-side);stroke:var(--iso-line);stroke-width:1.1;vector-effect:non-scaling-stroke}
.iso .chk{fill:none;stroke:var(--iso-side);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso .tl{stroke-dasharray:1;stroke-dashoffset:0;stroke-linecap:round;stroke-width:2.2}
.iso .growx{transform-box:fill-box;transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){
  .iso .tl{animation:isoTL1 9s linear infinite}
  @keyframes isoTL1{0%,0%{stroke-dashoffset:1}6%,90%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:1}}
  .iso .tl1{animation-name:isoTL1}
  @keyframes isoTL2{0%,7%{stroke-dashoffset:1}13%,90%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:1}}
  .iso .tl2{animation-name:isoTL2}
  @keyframes isoTL3{0%,14%{stroke-dashoffset:1}20%,90%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:1}}
  .iso .tl3{animation-name:isoTL3}
  @keyframes isoTL4{0%,21%{stroke-dashoffset:1}27%,90%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:1}}
  .iso .tl4{animation-name:isoTL4}
  @keyframes isoTL5{0%,28%{stroke-dashoffset:1}34%,90%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:1}}
  .iso .tl5{animation-name:isoTL5}
  @keyframes isoTL6{0%,35%{stroke-dashoffset:1}41%,90%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:1}}
  .iso .tl6{animation-name:isoTL6}
  @keyframes isoTL7{0%,42%{stroke-dashoffset:1}48%,90%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:1}}
  .iso .tl7{animation-name:isoTL7}
  @keyframes isoTL8{0%,49%{stroke-dashoffset:1}55%,90%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:1}}
  .iso .tl8{animation-name:isoTL8}
  .iso .growl{transform-box:fill-box;transform-origin:50% 100%;animation:isoGrowL 6s cubic-bezier(.2,.7,.2,1) infinite both}
  @keyframes isoGrowL{0%{transform:scaleY(.14)}20%,84%{transform:none}100%{transform:scaleY(.14)}}
  .iso .drop{animation:isoDrop 5.5s cubic-bezier(.55,0,.3,1) infinite}
  @keyframes isoDrop{0%,14%{transform:translateY(0)}42%,82%{transform:translateY(84px)}100%{transform:translateY(0)}}
  .iso .wave{animation:isoWave 1.8s ease-out infinite}
  .iso .w2{animation-delay:.25s}.iso .w3{animation-delay:.5s}
  @keyframes isoWave{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
  .iso .pop{animation:isoBox 9s linear infinite both}
  .iso .pop2{animation-name:isoBox2}.iso .pop3{animation-name:isoBox3}
  .js .rv .iso .growx{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .3s)}
  .js .rv.in .iso .growx{transform:none}
}

/* ---------- Hero-Logo: größer, oben links mit gleichem Abstand zu Ober- und Seitenkante ---------- */
.hero__panel .brand__wm{width:clamp(150px,calc(14 * var(--vw)),230px)}
@media (min-width:901px){
  .hero--art .hero__panel{padding-top:clamp(32px,calc(4.2 * var(--vw)),60px)}
}
@media (max-width:900px){
  .hero--art .hero__panel,.hero--art .hero__panel[class]{padding-top:22px}
  .hero--art .hero__panel .brand__wm{width:clamp(140px,calc(38 * var(--vw)),180px)}
}
@media (max-width:900px) and (max-height:760px){.hero--art .hero__panel{padding-top:18px}}

/* =====================================================================
   Unterseiten im Stil der Startseite
   ===================================================================== */
/* Hero: gleiche Form wie die Startseite; zwei Knöpfe nebeneinander */
.hero--sub .hero__cta{flex-direction:row;flex-wrap:wrap;justify-content:flex-end}
@media (min-width:901px){
  .hero--long .hero__panel h1{font-size:min(calc(7.6 * var(--vh)),9.6cqi,72px)}
  .hero--short{height:auto;min-height:0;max-height:none;padding:clamp(96px,calc(13 * var(--vh)),120px) 0 clamp(36px,calc(5 * var(--vh)),56px)}
  .hero--short .hero__inner,.hero--short .wrap{height:auto}
  .hero--short .hero__panel{min-height:min(520px,calc(62 * var(--vh)));height:auto}
  .hero--short .hero__art{padding-bottom:0}
  .hero--short .hero__art .iso{max-height:min(380px,calc(48 * var(--vh)))}
  .hero--short .hero__cta{bottom:clamp(36px,calc(5 * var(--vh)),56px)}
}
@media (max-width:900px){.hero--sub .hero__cta{justify-content:flex-start}}

/* Bühnen in Hero-Form für Screenshots und Grafiken */
.stage{background:var(--hero-bg);padding:9% 10% 11% 11%}
.home .stage--prism{clip-path:url(#c-prism)}
.home .stage--wedge{clip-path:url(#c-wedge);padding:11% 12% 10% 8%}
.home .stage--hex{clip-path:url(#c-hexw);padding:10% 13%}
@media (max-width:900px){.stage{max-width:640px}}

/* Listen: Häkchen, Nummern, Links */
.split .checks{margin-bottom:4px}
.card--facts .checks{max-width:none;border-top:0}
.card--facts .checks li:last-child{border-bottom:0}
.steps b{font-weight:600}
.steps--links li{padding:0}
.steps--links a{display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:0;padding:14px 4px 14px 0;text-decoration:none;color:inherit;transition:padding .25s cubic-bezier(.2,.7,.2,1),color .2s}
.steps--links a:hover{padding-left:8px;color:var(--accent-text)}
.steps--links a>b{font:400 16px var(--mono);color:var(--accent-text)}
.steps--links li{display:block}
.steps--table{max-width:none}
.steps--table small{display:block;font:300 13px/1.5 var(--mono);color:var(--muted);margin-top:2px}
.steps--table em{font:400 13px var(--mono);font-style:normal;color:var(--muted);padding-left:16px}
@media (max-width:640px){.steps--table a{grid-template-columns:44px 1fr}.steps--table em{grid-column:2;padding:4px 0 0}}

/* Listen auf dem Band */
.sec--band .steps,.sec--band .lines{border-color:rgba(255,255,255,.22)}
.sec--band .steps li,.sec--band .lines li{border-color:rgba(255,255,255,.22);color:var(--band-text)}
.sec--band .steps i,.sec--band .steps--links a>b{color:var(--band-head)}
.sec--band .steps--links a:hover{color:var(--band-head)}
.sec--band .lines span{color:var(--band-muted)}

.band-grid--flat{align-items:center}
.band-grid--flat .steps,.band-grid--flat .lines{max-width:none}
.sec--intro .price{color:var(--band-text);font-size:clamp(40px,calc(4.6 * var(--vw)),68px)}

/* Kundenwebsites im Raster: Fenster mit rotem Versatz */
.shots{gap:clamp(18px,calc(2.4 * var(--vw)),32px)}
.shot{text-decoration:none;display:block;transition:translate .25s cubic-bezier(.2,.7,.2,1)}
.shot .f-win{transition:filter .25s cubic-bezier(.2,.7,.2,1)}
.shot:hover{translate:-3px -3px}
.shot:hover .f-win{filter:drop-shadow(9px 9px 0 var(--iso-side))}
.shot .frame__tag{left:12px;bottom:12px}

/* Zeitleiste und Stellen als Karten in eigener Form */
.home :where(.timeline li,.job){--kf:var(--iso-face);--kl:var(--iso-line);--ks:var(--o-shadow);--ko:5px;--ka:0px;--kb:0px;--kc:0px;--kd:0px}
.home :is(.timeline li,.job){position:relative;isolation:isolate;background:none!important;border-radius:0!important}
.home :is(.timeline li,.job)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(135deg,transparent var(--ka),var(--kf) calc(var(--ka) + .5px)) top left/51% 51% no-repeat,
    linear-gradient(225deg,transparent var(--kb),var(--kf) calc(var(--kb) + .5px)) top right/51% 51% no-repeat,
    linear-gradient(315deg,transparent var(--kc),var(--kf) calc(var(--kc) + .5px)) bottom right/51% 51% no-repeat,
    linear-gradient(45deg,transparent var(--kd),var(--kf) calc(var(--kd) + .5px)) bottom left/51% 51% no-repeat;
  filter:drop-shadow(1.5px 0 0 var(--kl)) drop-shadow(-1.5px 0 0 var(--kl)) drop-shadow(0 1.5px 0 var(--kl)) drop-shadow(0 -1.5px 0 var(--kl)) drop-shadow(var(--ko) var(--ko) 0 var(--ks));
  transition:filter .25s cubic-bezier(.2,.7,.2,1)}
.home .timeline{gap:18px}
.home .timeline li{--kd:18px}
.home .jobs{gap:18px}
.home .job{--kb:24px}
.home .job:hover,.home .job[open]{--ko:8px}
.home .job summary::after{right:22px;top:20px;width:32px;height:32px;display:grid;place-items:center;border:var(--o-w) solid var(--iso-line);border-radius:50%;font-size:20px;line-height:1;color:var(--iso-line);background:var(--iso-face);box-shadow:3px 3px 0 var(--o-shadow);transition:rotate .25s,background .25s}
.home .job[open] summary::after{background:var(--iso-side);color:#0c0c0e}
.home .job .chips li,.home .card .chips li{background:var(--iso-soft)}

/* weitere Kartenformen */
.home .card--tile{--ka:20px}
.home .card--cta{--kc:24px}
.home .card--facts{--kb:28px;--kd:14px}
.home .sec--band .card .tag{background:var(--iso-side)}
.home .sec--band .card__foot{color:var(--muted)}
.home .sec--tint .card--facts,.home .sec--plain .card--facts{padding:clamp(18px,calc(2.2 * var(--vw)),28px) clamp(20px,calc(2.4 * var(--vw)),30px)}

/* Rechtstexte: ruhige Spalte */
.home .legal h2{padding-top:18px;border-top:1px solid var(--line)}
@media (min-width:901px){.hero--sub .hero__art .iso{max-height:min(640px,calc(calc(100 * var(--svh)) - 260px))}}
.steps-head .display--band{margin-bottom:14px}
.iso .chk{stroke-width:3.6}
@media (max-width:900px){.hero--art .hero__panel[class]{padding-top:20px}}
@media (max-width:900px) and (max-height:760px){.hero--art .hero__panel[class]{padding-top:18px}}
@media (min-width:901px){.hero--short:has(.hero__cta) .hero__art{padding-bottom:clamp(64px,calc(9 * var(--vh)),88px)}}

/* ---------- Leistungen-Motiv: fünf Stationen um ZONING ---------- */
.iso .ring-o{fill:none;stroke:var(--iso-line);stroke-width:6.5}
.iso .ring-arc{fill:none;stroke:var(--iso-side);stroke-width:6.5;transform:rotate(-90deg)}
.iso .t--st{font:600 8px var(--sans);fill:var(--iso-line);letter-spacing:.01em}
@media (prefers-reduced-motion:no-preference){
  .iso .station{animation:isoStation 10s cubic-bezier(.3,.7,.3,1) infinite both}
  @keyframes isoStation{0%{transform:translateY(0)}3%{transform:translateY(-12px)}11%,100%{transform:translateY(0)}}
}

/* =====================================================================
   Formen-Hüllen: Hero-Panel und Bühnen sitzen in .hero__shape / .shape.
   Die Hülle trägt Kontur und Versatz per drop-shadow, weil clip-path am
   Element selbst jeden Rahmen abschneiden würde.
   ===================================================================== */
.hero__shape{display:grid;min-width:0;min-height:0}
.hero__shape>.hero__panel{width:100%}
.shape{display:block;min-width:0}
@media (max-width:900px){.hero--art .hero__shape{display:block}}

/* Dunkler Modus: Formen klar absetzen (Fläche heller,weiße Kontur{--hero-bg:#24121a;--panel:#18181c}





/* =====================================================================
   Kopfzeile: Menüs unter Leistungen, Über uns und Kontakt
   Gleiche Einträge, gleiche Größe; die Menüs liegen absolut darunter.
   ===================================================================== */
.nav__item{position:relative;display:flex}
.nav .nav__btn{font:500 14px/1 var(--mono);color:var(--ink);padding:11px 12px;border-radius:11px;border:0;background:none;cursor:pointer;white-space:nowrap}
.nav .nav__btn[data-current]{background:var(--tile)}
.nav__item:is(.is-open) .nav__btn{background:var(--tile)}
@media (hover:hover){.nav__item:hover .nav__btn{background:var(--tile)}}
.drop{position:absolute;top:calc(100% + 16px);left:-6px;z-index:5;width:336px;padding:8px;background:var(--iso-face);border:1.6px solid var(--iso-line);border-radius:14px;box-shadow:6px 6px 0 var(--iso-side);
  opacity:0;visibility:hidden;translate:0 -6px;transition:opacity .2s,translate .25s cubic-bezier(.2,.7,.2,1),visibility 0s .25s}
.drop::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.drop--end{left:auto;right:-6px}
.nav__item.is-open .drop{opacity:1;visibility:visible;translate:0 0;transition:opacity .2s,translate .25s cubic-bezier(.2,.7,.2,1),visibility 0s}
@media (hover:hover){.nav__item:hover .drop{opacity:1;visibility:visible;translate:0 0;transition:opacity .2s,translate .25s cubic-bezier(.2,.7,.2,1),visibility 0s}}
.drop ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.nav .drop a{display:grid;gap:3px;padding:10px 12px;border-radius:9px;white-space:normal;font:600 15px/1.25 var(--sans);letter-spacing:-.01em;color:var(--iso-line);text-decoration:none}
.drop a b{font-weight:600}
.drop a span{font:300 12.5px/1.35 var(--mono);color:var(--muted);letter-spacing:0}
.nav .drop a:hover,.nav .drop a:focus-visible{background:var(--iso-soft)}
.nav .drop a[aria-current="page"]{background:var(--tile)}
.nav .drop a[aria-current="page"] b::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--iso-side);vertical-align:2px}
.drop__legal{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:6px 0 0;padding:8px 4px 0;border-top:1px solid var(--line)}
.drop__legal span{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 8px 0 8px;width:100%;margin-bottom:2px}
.nav .drop__legal a{display:inline-block;padding:7px 8px;font:400 13px/1 var(--mono)}
@media (prefers-reduced-motion:reduce){.drop,.nav__item.is-open .drop,.nav__item:hover .drop{transition:none;translate:0 0}}
@media (max-width:1080px){.nav .nav__item{display:none}}


/* =====================================================================
   Sprache und mobiles Menü
   ===================================================================== */
/* Sprachwahl im Desktop-Kopf: so groß wie der frühere Farbmodus-Knopf */
.lang-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;font:500 13px/1 var(--mono);letter-spacing:.06em;color:var(--ink);text-decoration:none}
.lang-btn:hover{background:var(--tile)}
.nav .lang-btn{padding:0}

/* Burger-Knopf: sitzt rechts in der Kopf-Pille, wird beim Öffnen zum X */
.menu-btn{display:none;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:11px;background:var(--ink);color:var(--plain);cursor:pointer}
.burger{position:relative;display:block;width:18px;height:14px}
.burger i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s,top .3s cubic-bezier(.2,.7,.2,1)}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:6px}.burger i:nth-child(3){top:12px}
.menu-open .burger i:nth-child(1){top:6px;transform:rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-open .burger i:nth-child(3){top:6px;transform:rotate(-45deg)}
.menu-open .menu-btn{background:var(--iso-side);color:#0c0c0e}

@media (max-width:1080px){
  .nav .lang-btn{display:none}
  .menu-btn{display:inline-grid}
  .nav{gap:6px}
}
@media (max-width:520px){
  .top{inset:10px 10px auto}
  .nav{padding:6px}
}
/* Menü offen: Logo-Pille zeigen, Kopf bleibt sichtbar */
.menu-open .top__brand{opacity:1;transform:none}
.menu-open .top{transform:none}

/* Menüfläche */
.sheet{position:fixed;inset:0;z-index:45;overflow:auto;overscroll-behavior:contain;background:var(--hero-bg);padding:84px 16px calc(24px + env(safe-area-inset-bottom))}
.sheet__inner{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.sheet__list{list-style:none;margin:0;padding:0;background:var(--iso-face);border:1.6px solid var(--iso-line);border-radius:18px;box-shadow:6px 6px 0 var(--iso-side);overflow:hidden}
.sheet__list>li+li{border-top:1px solid var(--line)}
.sheet__top,.sheet summary{display:grid;grid-template-columns:40px 1fr auto;align-items:center;min-height:62px;padding:12px 18px;font:600 23px/1.1 var(--sans);letter-spacing:-.02em;color:var(--iso-line);text-decoration:none;cursor:pointer;list-style:none}
.sheet summary::-webkit-details-marker{display:none}
.sheet__top i,.sheet summary i{font:500 13px var(--mono);font-style:normal;color:var(--accent-text);letter-spacing:0}
.sheet__top::after{content:"";width:10px;height:10px;border:solid var(--iso-line);border-width:2px 2px 0 0;transform:rotate(45deg);margin-right:6px}
.sheet summary::after{content:"+";width:32px;height:32px;display:grid;place-items:center;border:1.6px solid var(--iso-line);border-radius:50%;font:300 20px/1 var(--mono);color:var(--iso-line);background:var(--iso-face);box-shadow:3px 3px 0 var(--iso-side);transition:rotate .25s,background .25s}
.sheet details[open] summary::after{rotate:45deg;background:var(--iso-side);color:#0c0c0e}
.sheet__top[aria-current="page"] span{text-decoration:underline;text-decoration-color:var(--iso-side);text-decoration-thickness:3px;text-underline-offset:6px}
.sheet__sub{list-style:none;margin:0;padding:0 14px 14px 52px;display:grid;gap:2px}
.sheet__sub a{display:grid;gap:2px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--iso-line)}
.sheet__sub a b{font:600 16px/1.25 var(--sans)}
.sheet__sub a span{font:300 12.5px/1.35 var(--mono);color:var(--muted)}
.sheet__sub a:active,.sheet__sub a:hover{background:var(--iso-soft)}
.sheet__sub a[aria-current="page"]{background:var(--tile)}
.sheet__sub a[aria-current="page"] b::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--iso-side);vertical-align:2px}
.sheet__foot{display:grid;gap:14px}
.lang-switch{display:grid;grid-template-columns:1fr 1fr;padding:4px;background:var(--iso-face);border:1.6px solid var(--iso-line);border-radius:14px}
.lang-switch a{display:grid;place-items:center;min-height:44px;border-radius:10px;font:500 15px var(--mono);color:var(--iso-line);text-decoration:none}
.lang-switch a[aria-current="true"]{background:var(--iso-line);color:var(--iso-face)}
.sheet__cta{width:100%;min-height:56px}
.sheet__contact,.sheet__legal{display:flex;flex-wrap:wrap;gap:6px 18px;font:400 14px/1.5 var(--mono)}
.sheet__contact a,.sheet__legal a{color:var(--ink);text-underline-offset:4px}
.sheet__legal a{color:var(--muted);font-size:13px}
@media (prefers-reduced-motion:no-preference){
  .sheet:not([hidden]){animation:sheetIn .3s ease-out}
  .sheet:not([hidden]) .sheet__list,.sheet:not([hidden]) .sheet__foot>*{animation:sheetUp .45s cubic-bezier(.2,.7,.2,1) both}
  .sheet:not([hidden]) .sheet__foot>:nth-child(1){animation-delay:.06s}
  .sheet:not([hidden]) .sheet__foot>:nth-child(2){animation-delay:.1s}
  .sheet:not([hidden]) .sheet__foot>:nth-child(3){animation-delay:.14s}
  .sheet:not([hidden]) .sheet__foot>:nth-child(4){animation-delay:.18s}
  .sheet details[open] .sheet__sub{animation:faqIn .3s ease-out}
  @keyframes sheetIn{from{opacity:0}}
  @keyframes sheetUp{from{opacity:0;transform:translateY(14px)}}
}

/* ---------- Startseiten-Hero: Raum mit offener Tür ---------- */
.iso .light{fill:var(--iso-soft);opacity:.85}
.iso .mat{fill:var(--iso-side);stroke:var(--iso-line);stroke-width:1.4;vector-effect:non-scaling-stroke}
.iso .t--mat{font:700 15px var(--sans);fill:#0c0c0e;letter-spacing:-.01em}
.iso .scr{fill:var(--iso-face);stroke:var(--iso-line);stroke-width:1.5;vector-effect:non-scaling-stroke}
.iso .doorway{fill:var(--iso-soft)}
.iso .hbar{fill:var(--iso-side);stroke:var(--iso-line);stroke-width:1.2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50% 100%}
.iso .chk--dark{stroke:#0c0c0e;stroke-width:2.2}
.iso .idea-still{display:none}
@media (prefers-reduced-motion:no-preference){
  .iso .hbar{animation:isoHeroBar 9s cubic-bezier(.2,.7,.2,1) infinite both}
  @keyframes isoHeroBar{0%,70%{transform:scaleY(.12)}82%,96%{transform:none}100%{transform:scaleY(.12)}}
  .iso .hcheck{animation:isoHeroCheck 9s ease-out infinite both}
  @keyframes isoHeroCheck{0%,80%{opacity:0;transform:translateY(4px)}86%,96%{opacity:1;transform:none}100%{opacity:0}}
  .iso .light{animation:isoLight 9s ease-in-out infinite}
  @keyframes isoLight{0%,100%{opacity:.55}10%,40%{opacity:.95}}
}
@media (prefers-reduced-motion:reduce){.iso .idea-still{display:inline}}

/* =====================================================================
   Mobil-Feinschliff: Knöpfe, Links-Karten, Listen
   ===================================================================== */
@media (max-width:600px){
  .btn{font-size:16px;min-height:50px;padding:12px 20px;text-align:center;line-height:1.25}
  .btn--ghost{min-height:48px;padding:10px 20px}
  .btns{gap:10px}
  .btns>.btn{flex:1 1 100%}
  .hero__cta .btn{flex:1 1 auto}
  .finale .btns>.btn{flex:0 1 auto}
  .opts--wide a.opt{flex-direction:column;align-items:flex-start;gap:6px!important}
  .lines li{flex-direction:column;gap:2px}
  .sec{padding-block:56px}
  .sec--tight{padding-block:36px}
  .dashes{margin-bottom:26px}
  .q{font-size:clamp(28px,calc(8 * var(--vw)),34px);margin-bottom:20px}
  .head{margin-bottom:30px}
  .split,.split--rev{gap:36px}
  .proj+.proj{margin-top:64px}
  .card{padding:22px}
  .card h3{font-size:21px}
  .faq summary{font-size:17px}
  .finale{padding-block:72px}
  .foot{padding-top:44px}
}
@media (max-width:380px){.btn{font-size:15px;padding-inline:16px}}

/* ---------- Startseiten-Hero 2.5D: flache Ebenen mit Versatz ---------- */
.flat .fl-back{fill:var(--iso-soft);opacity:.7}
.flat .fl-dot{fill:var(--iso-side);opacity:.55}
.flat .fl-face{fill:var(--iso-face);stroke:var(--iso-line);stroke-width:1.8;vector-effect:non-scaling-stroke}
.flat .fl-shadow{fill:var(--iso-side);stroke:var(--iso-line);stroke-width:1.8;vector-effect:non-scaling-stroke}
.flat .fl-title{font:700 15px var(--sans);fill:var(--iso-line);letter-spacing:-.01em}
.flat .fl-name{font:700 16px var(--sans);fill:var(--iso-line)}
.flat .fl-pill{font:600 11px var(--mono);fill:#0c0c0e}
.flat .t--url{font-size:9px}
.flat .fl-line{fill:none;stroke:var(--iso-side);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.flat .fl-end{fill:var(--iso-side);stroke:var(--iso-line);stroke-width:1.6;vector-effect:non-scaling-stroke}
.flat .fl-bar{fill:var(--iso-side);stroke:var(--iso-line);stroke-width:1.4;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50% 100%}
.flat .fl-arrow{fill:#fff;stroke:#0c0c0e;stroke-width:1.6;stroke-linejoin:round}
.flat .fl-live,.flat .fl-start{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .flat .fl-line{animation:flLine 8s cubic-bezier(.5,0,.3,1) infinite both}
  @keyframes flLine{0%,34%{stroke-dashoffset:1}62%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
  .flat .fl-end{animation:flPop 8s ease-out infinite both}
  @keyframes flPop{0%,60%{opacity:0}64%,92%{opacity:1}100%{opacity:0}}
  .flat .fl-bar{animation:flBar 8s cubic-bezier(.2,.7,.2,1) infinite both}
  @keyframes flBar{0%,38%{transform:scaleY(.12)}60%,92%{transform:none}100%{transform:scaleY(.12)}}
  .flat .fl-live{animation:flLive 8s cubic-bezier(.2,.8,.2,1.2) infinite both}
  @keyframes flLive{0%,64%{opacity:0;transform:translateY(10px) scale(.9)}70%,92%{opacity:1;transform:none}100%{opacity:0}}
  .flat .fl-start{animation:flClick 8s ease-out infinite}
  @keyframes flClick{0%,10%,18%,100%{transform:none}13%{transform:scale(.9)}}
  .flat .fl-cursor{animation:flCursor 8s cubic-bezier(.6,0,.3,1) infinite}
  @keyframes flCursor{0%,10%{transform:translate(0,0)}13%{transform:translate(0,0) scale(.88)}16%{transform:translate(0,0)}
    44%,84%{transform:translate(392px,-170px)}96%,100%{transform:translate(0,0)}}
}
@media (min-width:901px){.hero--art .hero__art .flat{max-height:min(560px,calc(calc(100 * var(--svh)) - 240px))}}

/* ---------- Mobiler Kopf: eine Leiste, Logo fest links, Burger rechts ---------- */
@media (max-width:1080px){
  .top{background:var(--panel);border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.08);height:52px;align-items:center;padding-left:6px}
  .top .top__brand{opacity:1;transform:none;background:none;box-shadow:none;padding:0 12px;height:52px}
  .top .nav{background:none;box-shadow:none}
  /* das Logo steht jetzt im Kopf, im Hero nicht doppelt */
  .hero__panel .brand{display:none}
  .hero--art .hero__panel{padding-top:24px}
}
@media (max-width:520px){.top .top__brand{padding:0 10px}.top .top__brand .brand__wm{width:104px}}

/* ---------- Handy: Hero füllt immer den ganzen Bildschirm (der nächste Abschnitt erscheint erst beim Scrollen) ---------- */
@media (max-width:900px){
  .hero--art,.hero--short{min-height:calc(100 * var(--svh));height:auto;display:flex;flex-direction:column}
  .hero--art .hero__inner{flex:1 0 auto;display:flex}
  .hero--art .hero__inner>.wrap{display:flex;flex-direction:column;flex:1 0 auto}
  .hero--art .hero__art{flex:1 0 auto;display:flex;align-items:center;justify-content:center;margin-top:12px}
  .hero--art .hero__cta{flex:0 0 auto}
  .hero--art:not(:has(.hero__cta)) .hero__art{padding-bottom:24px}
}
/* Gründungshinweis (nur zoning-gmbh.de) */
.founding{margin:18px 0 0;max-width:min(420px,72%);padding:10px 14px;border:1.6px solid var(--iso-line);border-radius:12px;background:var(--iso-face);box-shadow:4px 4px 0 var(--iso-side);font:400 13px/1.45 var(--mono);color:var(--ink)}
.founding b{font:700 13px var(--sans);color:var(--ink)}
@media (max-width:1080px){.founding{margin:0 0 14px}}
/* Chat-Knopf (nur webdesign-zoning.de) sitzt unten rechts: Hero-Knöpfe weichen aus */
@media (min-width:901px){.has-chat .hero__cta{right:calc(var(--gut) + 64px)}}
@media (max-width:1080px){.founding{max-width:none}}

/* =====================================================================
   KI-Chat (nur webdesign-zoning.de): Knopf, Einwilligung, Menü-Eintrag
   ===================================================================== */
.chat-fab{position:fixed;right:28px;bottom:28px;z-index:40;display:grid;place-items:center;width:58px;height:58px;padding:0;border:1.6px solid var(--iso-line);border-radius:16px;background:var(--iso-face);color:var(--iso-line);box-shadow:5px 5px 0 var(--iso-side);cursor:pointer;transition:translate .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s cubic-bezier(.2,.7,.2,1),background .2s}
.chat-fab svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chat-fab i{position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;background:var(--iso-side);border:2px solid var(--iso-line)}
.chat-fab:hover,.chat-fab:focus-visible{background:var(--iso-side);color:#0c0c0e;translate:-2px -2px;box-shadow:7px 7px 0 var(--iso-line)}
.chat-fab:hover i{background:var(--iso-face)}
.chat-fab[hidden]{display:none}
@media (max-width:1080px){.chat-fab{display:none}}
@media (prefers-reduced-motion:no-preference){.chat-fab i{animation:blink 2.4s ease-in-out infinite}}

.chat-gate{position:fixed;right:28px;bottom:28px;z-index:55;width:min(420px,calc(calc(100 * var(--vw)) - 32px));max-height:calc(calc(100 * var(--svh)) - 120px);overflow:auto;display:flex;flex-direction:column;background:var(--iso-face);color:var(--text);border:1.6px solid var(--iso-line);border-radius:18px;box-shadow:8px 8px 0 var(--iso-side)}
.chat-gate[hidden]{display:none}
.chat-gate__head{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 16px;background:var(--iso-line);color:#fff;border-radius:16px 16px 0 0}
.chat-gate__mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--iso-side);color:#0c0c0e;flex:0 0 auto}
.chat-gate__mark svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-gate__head strong{display:block;font:700 17px/1.2 var(--sans);letter-spacing:-.01em;color:#fff}
.chat-gate__head div span{display:block;margin-top:3px;font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.chat-gate__close{margin-left:auto;width:40px;height:40px;border:0;border-radius:10px;background:none;color:#fff;font:300 26px/1 var(--mono);cursor:pointer}
.chat-gate__close:hover{background:var(--iso-side);color:#0c0c0e}
.chat-gate__body{padding:18px 18px 4px}
.chat-gate__body p,.chat-gate__body li{font:300 14px/1.6 var(--mono);color:var(--text)}
.chat-gate__body p{margin:0 0 10px}
.chat-gate__body ul{margin:0 0 12px;padding-left:18px}
.chat-gate__body li{margin-bottom:6px}
.chat-gate__body a{color:var(--accent-text);text-underline-offset:3px}
.chat-gate__small,.chat-gate__note{font-size:12.5px!important;color:var(--muted)!important}
.chat-gate__note.is-error{color:var(--accent-text)!important;font-weight:500}
.chat-gate__note:empty{display:none}
.chat-gate__foot{display:flex;flex-wrap:wrap;gap:10px;padding:10px 18px 18px}
.chat-gate__foot .btn{font-size:16px;min-height:48px;padding:10px 20px}
.chat-gate__foot .btn--ghost{min-height:46px}
@media (max-width:640px){
  .chat-gate{left:0;right:0;bottom:0;width:auto;max-height:calc(92 * var(--svh));border-radius:20px 20px 0 0;border-width:1.6px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.18);padding-bottom:env(safe-area-inset-bottom)}
  .chat-gate__head{border-radius:18px 18px 0 0}
  .chat-gate__foot .btn{flex:1 1 100%}
}

/* Eintrag im Burger-Menü */
.sheet__chat{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;padding:12px 16px 12px 12px;border:1.6px solid var(--iso-line);border-radius:14px;background:var(--iso-face);box-shadow:5px 5px 0 var(--iso-side);color:var(--iso-line);text-align:left;cursor:pointer;font:inherit}
.sheet__chat[hidden]{display:none}
.sheet__chat::after{content:"";width:10px;height:10px;border:solid var(--iso-line);border-width:2px 2px 0 0;transform:rotate(45deg);margin-right:4px}
.sheet__chat-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--iso-side);color:#0c0c0e;position:relative}
.sheet__chat-icon::after{content:"";position:absolute;top:-4px;right:-4px;width:11px;height:11px;border-radius:50%;background:var(--iso-face);border:2px solid var(--iso-line)}
.sheet__chat-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sheet__chat b{display:block;font:700 18px/1.15 var(--sans);letter-spacing:-.01em}
.sheet__chat small{display:block;margin-top:2px;font:300 13px/1.4 var(--mono);color:var(--muted)}
.sheet__chat:active{translate:2px 2px;box-shadow:3px 3px 0 var(--iso-side)}

/* Unterseiten: Logo-Pille oben links immer sichtbar (schnell zur Startseite); im Hero-Panel dann kein zweites Logo */
@media (min-width:1081px){
  .home:not(.page--index) .top__brand{opacity:1;transform:none}
  .home:not(.page--index) .hero__panel>.brand{display:none}
}