/* Schriften lokal ausgeliefert (DSGVO) – Dateien liegen in /fonts, siehe tools/download-fonts.ps1 */
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

/* Layout: Werkbank-Konzept – asymmetrisches Hero mit laufender Projekt-Bühne rechts, darunter Abschnitte auf einem 12er-Raster, Preise wie ein Angebotsblatt */
:root{
  --paper:#f2f4f1; --surface:#ffffff; --ink:#0f1c19; --muted:#56635f; --line:#d5dcd8;
  --pine:#0d6a5a; --pine-soft:#dcece7; --amber:#d9922b; --amber-soft:#f6e6cc;
  --stage:#0f2420; --stage-fg:#e8f1ee;
  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0d1513; --surface:#14201d; --ink:#e7efec; --muted:#9aaba6; --line:#26352f;
  --pine:#3fb39c; --pine-soft:#173a33; --amber:#f0b257; --amber-soft:#3a2c16;
  --stage:#0a1916; --stage-fg:#e8f1ee; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0d1513; --surface:#14201d; --ink:#e7efec; --muted:#9aaba6; --line:#26352f;
  --pine:#3fb39c; --pine-soft:#173a33; --amber:#f0b257; --amber-soft:#3a2c16;
  --stage:#0a1916; --stage-fg:#e8f1ee; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;overflow-x:hidden}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--f-display);line-height:1.05;text-wrap:balance;margin:0}
h2{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:800;letter-spacing:-.02em}
h3{font-size:1.3rem;font-weight:600}
p{margin:0}
a{color:inherit}
.eyebrow{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pine);display:flex;gap:.6rem;align-items:center}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--amber)}
.lead{color:var(--muted);max-width:60ch;font-size:1.08rem}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}

/* Nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:14px}
.brand{font-family:var(--f-display);font-weight:800;font-size:1.15rem;text-decoration:none;display:flex;align-items:center;gap:.55rem}
.brand i{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--pine);color:var(--paper);font-style:normal;font-size:.95rem}
.nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;font-weight:500;font-size:.95rem}
.nav ul a{text-decoration:none;color:var(--muted)}
.nav ul a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:.5rem;border:0;cursor:pointer;font:600 .98rem var(--f-body);padding:.85rem 1.3rem;border-radius:999px;text-decoration:none;transition:transform .2s,background .2s}
.btn-primary{background:var(--pine);color:var(--paper)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (max-width:820px){.nav ul{display:none}}

/* Hero */
.hero{padding-block:clamp(40px,7vw,90px) clamp(40px,6vw,70px)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(2.6rem,6.4vw,5rem);font-weight:800;letter-spacing:-.035em;margin-top:1.1rem}
.hero h1 em{font-style:normal;color:var(--pine);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;background:var(--amber);opacity:.55;z-index:-1;border-radius:4px;transform-origin:left;animation:mark 1s .5s both cubic-bezier(.2,.8,.2,1)}
@keyframes mark{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .lead{margin-top:1.3rem}
.hero .cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.facts{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.facts div{display:flex;flex-direction:column}
.facts b{font-family:var(--f-display);font-size:1.6rem;font-weight:800}
.facts span{font-size:.85rem;color:var(--muted)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}

/* Stage slider */
.stage{position:relative;background:var(--stage);color:var(--stage-fg);border-radius:22px;padding:22px;min-width:0;overflow:hidden;isolation:isolate}
.stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px;z-index:-1}
.stage-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:.75rem;opacity:.8;gap:1rem}
.live{display:flex;align-items:center;gap:.45rem}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 #4ade8088;animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px #4ade8000}100%{box-shadow:0 0 0 0 #4ade8000}}
.slides{position:relative;height:340px;margin-top:16px}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateX(40px) scale(.97);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.slide.on{opacity:1;transform:none;pointer-events:auto}
.slide.off{opacity:0;transform:translateX(-40px) scale(.97)}
.slide-tag{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#f0b257}
.slide h3{font-size:1.45rem;color:#fff}
.slide p{font-size:.93rem;opacity:.78;max-width:46ch}
.mock{flex:1;min-height:0;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:14px;position:relative;overflow:hidden}
/* mock: browser */
.bw-bar{display:flex;gap:6px;margin-bottom:12px}
.bw-bar span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}
.bw-hero{height:44px;border-radius:8px;background:linear-gradient(90deg,#3fb39c,#3fb39c55);width:70%;animation:grow 2.4s ease-in-out infinite alternate}
.bw-lines{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.bw-lines i{height:54px;border-radius:8px;background:rgba(255,255,255,.1)}
.bw-lines i:nth-child(2){animation:blink 3s .4s infinite}
@keyframes grow{from{width:48%}to{width:78%}}
@keyframes blink{50%{background:rgba(240,178,87,.35)}}
/* mock: phone tiles */
.ph{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;height:100%}
.ph div{border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:flex-end;padding:7px;font-family:var(--f-mono);font-size:.62rem;opacity:.9;transition:background .4s}
.ph div.lit{background:#f0b257;color:#1b1406}
/* mock: flow */
.flow{display:flex;align-items:center;justify-content:space-between;height:100%;gap:6px}
.node{flex:1;text-align:center;border-radius:10px;padding:12px 4px;background:rgba(255,255,255,.08);font-size:.72rem;font-family:var(--f-mono);position:relative}
.node b{display:block;font-family:var(--f-display);font-size:1.25rem;margin-bottom:4px;color:#fff}
.arrow{width:22px;height:2px;background:rgba(255,255,255,.25);position:relative;overflow:hidden;flex:none}
.arrow::after{content:"";position:absolute;inset:0;width:40%;background:#f0b257;animation:run 1.4s linear infinite}
@keyframes run{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
/* mock: chart */
.bars{display:flex;align-items:flex-end;gap:8px;height:100%;padding-top:10px}
.bars i{flex:1;border-radius:6px 6px 2px 2px;background:#3fb39c;animation:bar 2.6s ease-in-out infinite alternate;transform-origin:bottom}
.bars i:nth-child(even){background:#f0b257}
@keyframes bar{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
.stage-foot{display:flex;align-items:center;gap:12px;margin-top:16px}
.dots{display:flex;gap:6px;flex:1}
.dots button{flex:1;height:4px;border:0;padding:0;border-radius:4px;background:rgba(255,255,255,.18);cursor:pointer;position:relative;overflow:hidden}
.dots button span{position:absolute;inset:0;background:#f0b257;transform:scaleX(0);transform-origin:left}
.dots button.on span{animation:prog var(--dur,5.5s) linear forwards}
.dots button.done span{transform:scaleX(1)}
@keyframes prog{to{transform:scaleX(1)}}
.stage-nav{display:flex;gap:6px}
.stage-nav button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;cursor:pointer;font-size:1rem}
.stage-nav button:hover{background:rgba(255,255,255,.1)}

/* Marquee */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:16px;background:var(--surface)}
.track{display:flex;gap:2.8rem;width:max-content;animation:scroll 38s linear infinite;font-family:var(--f-mono);font-size:.9rem;color:var(--muted)}
.track span{display:flex;align-items:center;gap:.7rem;white-space:nowrap}
.track span::before{content:"◆";color:var(--amber);font-size:.6rem}
@keyframes scroll{to{transform:translateX(-50%)}}

section{padding-block:clamp(64px,9vw,120px)}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 3rem;align-items:end;margin-bottom:3rem}
.sec-head > div{display:flex;flex-direction:column;gap:1rem}
@media (max-width:820px){.sec-head{grid-template-columns:1fr}}

/* Services */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:.9rem;transition:transform .3s,border-color .3s;min-width:0}
.svc:hover{transform:translateY(-4px);border-color:var(--pine)}
.svc .ico{width:46px;height:46px;border-radius:12px;background:var(--pine-soft);color:var(--pine);display:grid;place-items:center}
.svc .ico svg{width:24px;height:24px}
.svc p{color:var(--muted)}
.svc ul{list-style:none;padding:0;margin:.3rem 0 0;display:flex;flex-wrap:wrap;gap:6px}
.svc li{font-family:var(--f-mono);font-size:.74rem;padding:.3rem .6rem;border-radius:6px;background:var(--paper);border:1px solid var(--line)}
.svc .from{margin-top:auto;padding-top:.8rem;border-top:1px dashed var(--line);font-size:.9rem;color:var(--muted)}
.svc .from b{color:var(--ink);font-family:var(--f-display);font-size:1.15rem}
@media (max-width:760px){.services{grid-template-columns:1fr}}

/* Projects carousel */
.proj-band{background:var(--stage);color:var(--stage-fg)}
.proj-band .eyebrow{color:#7fd3c1}
.proj-band .lead{color:#a9bdb7}
.carousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;scrollbar-width:thin}
.case{flex:0 0 min(420px,86%);scroll-snap-align:start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:1rem}
.case .k{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#f0b257}
.case h3{color:#fff}
.case p{color:#b8c9c4;font-size:.96rem}
.case .res{margin-top:auto;display:flex;gap:1.4rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}
.case .res div{display:flex;flex-direction:column;font-size:.78rem;color:#9fb3ad}
.case .res b{font-family:var(--f-display);font-size:1.35rem;color:#fff}
.car-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.car-nav button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;cursor:pointer;font-size:1.1rem}
.car-nav button:hover{background:rgba(255,255,255,.1)}
.badge{align-self:flex-start;font-size:.72rem;font-family:var(--f-mono);padding:.25rem .55rem;border-radius:999px;background:rgba(240,178,87,.18);color:#f0b257}

/* Process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;position:relative}
.step{padding:0 1.4rem 0 0;position:relative;display:flex;flex-direction:column;gap:.7rem}
.step .n{font-family:var(--f-mono);font-size:.8rem;color:var(--pine);display:flex;align-items:center;gap:.6rem}
.step .n::after{content:"";flex:1;height:1px;background:var(--line)}
.step:last-child .n::after{display:none}
.step p{color:var(--muted);font-size:.95rem}
.step .t{font-family:var(--f-mono);font-size:.75rem;color:var(--amber)}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;gap:2rem 0}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* Pricing */
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.promo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;background:var(--amber-soft);border:1.5px solid var(--amber);border-radius:18px;padding:22px 26px;margin-bottom:34px}
.promo-text{display:flex;flex-direction:column;gap:.35rem;min-width:0;flex:1 1 380px}
.promo-text strong{font-family:var(--f-display);font-size:1.35rem;line-height:1.2}
.promo-text span{color:var(--muted);font-size:.95rem}
.seats{display:flex;align-items:center;gap:.8rem;font-family:var(--f-mono);font-size:.8rem}
.seats i{display:flex;gap:5px}
.seats i b{width:14px;height:14px;border-radius:4px;background:var(--amber)}
.plan .price s{font-size:1.2rem;color:var(--muted);font-weight:600;margin-right:.35rem;text-decoration-thickness:2px}
.plan .intro{font-family:var(--f-mono);font-size:.75rem;color:var(--amber);margin-top:-.6rem}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px;display:flex;flex-direction:column;gap:1.1rem;position:relative;min-width:0}
.plan.hot{border:2px solid var(--pine);box-shadow:0 24px 50px -30px var(--pine)}
.plan.hot::before{content:"Am häufigsten gewählt";position:absolute;top:-13px;left:24px;background:var(--pine);color:var(--paper);font:600 .74rem var(--f-body);padding:.3rem .7rem;border-radius:999px}
.plan .price{font-family:var(--f-display);font-weight:800;font-size:2.6rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan .price small{font-family:var(--f-body);font-size:.95rem;font-weight:500;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem;font-size:.95rem}
.plan li{display:flex;gap:.6rem}
.plan li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--pine-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%230d6a5a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.plan .meta{font-family:var(--f-mono);font-size:.75rem;color:var(--muted)}
.plan .btn{margin-top:auto;justify-content:center}
.extras{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.extra{border:1px dashed var(--line);border-radius:14px;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.extra span{color:var(--muted);font-size:.92rem}
.extra b{font-family:var(--f-display);font-size:1.3rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.note{margin-top:1.4rem;font-size:.85rem;color:var(--muted);font-family:var(--f-mono)}
@media (max-width:1100px){.prices{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.extras{grid-template-columns:1fr}}
@media (max-width:640px){.prices{grid-template-columns:1fr}}

/* About */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,70px);align-items:center}
.portrait{aspect-ratio:4/5;max-width:100%;border-radius:22px;background:var(--pine);position:relative;overflow:hidden;display:grid;place-items:center}
.portrait canvas{position:absolute;inset:0;width:100%;height:100%}
.portrait .ini{position:relative;font-family:var(--f-display);font-weight:800;font-size:clamp(4rem,10vw,7rem);color:var(--paper);letter-spacing:-.04em}
.portrait .loc{position:absolute;left:16px;bottom:16px;right:16px;background:var(--surface);color:var(--ink);border-radius:12px;padding:12px 14px;font-size:.85rem;display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.portrait .loc span{font-family:var(--f-mono);color:var(--muted);font-size:.75rem}
.about-text{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.about-text p{color:var(--muted)}
.why{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:.6rem}
.why div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.why b{display:block;font-family:var(--f-display);font-size:1.05rem;margin-bottom:.25rem}
.why span{font-size:.88rem;color:var(--muted)}
@media (max-width:820px){.about{grid-template-columns:1fr}.portrait{aspect-ratio:16/10}}
@media (max-width:480px){.why{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:820px;display:flex;flex-direction:column}
.faq details{border-bottom:1px solid var(--line);padding-block:1.1rem}
.faq summary{cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:1.15rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";color:var(--pine);font-size:1.4rem;line-height:1;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin-top:.7rem;max-width:65ch}

/* Contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px)}
.contact-info{display:flex;flex-direction:column;gap:1.2rem;min-width:0}
.mail{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.mail code{font-family:var(--f-mono);font-size:.9rem;user-select:all;word-break:break-all;flex:1;min-width:0}
.mail button{border:0;background:var(--pine-soft);color:var(--pine);font:600 .82rem var(--f-body);padding:.45rem .8rem;border-radius:8px;cursor:pointer}
form{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field.full{grid-column:1/-1}
label{font-size:.85rem;font-weight:600}
input,select,textarea{font:inherit;font-size:.98rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:.75rem .85rem;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pine)}
textarea{min-height:130px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label{font-weight:500;font-size:.88rem;padding:.45rem .85rem;border-radius:999px;border:1.5px solid var(--line);cursor:pointer;transition:all .2s}
.chips input:checked + label{background:var(--pine);border-color:var(--pine);color:var(--paper)}
.chips input:focus-visible + label{outline:3px solid var(--amber);outline-offset:2px}
.consent{grid-column:1/-1;display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;color:var(--muted);font-weight:400}
.consent input{width:18px;height:18px;margin-top:3px;flex:none}
.form-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.err{color:#c2410c;font-size:.85rem}
.ok{grid-column:1/-1;background:var(--pine-soft);border-radius:12px;padding:16px;font-size:.95rem}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
@media (max-width:520px){form{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:48px 40px;font-size:.88rem;color:var(--muted)}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem}
footer h4{font-family:var(--f-display);color:var(--ink);font-size:1rem;margin:0 0 .6rem}
footer p{line-height:1.7}
.copy{grid-column:1/-1;padding-top:1.4rem;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:.75rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}

.reveal{transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .8s}
.js .reveal.pre{transform:translateY(24px);opacity:.35}

/* Architektur-Abschnitt */
.arch-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.arch-diagram{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(16px,3vw,28px);display:flex;flex-direction:column;min-width:0}
.layer{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:center}
.layer-k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.boxes.three{grid-template-columns:repeat(3,1fr)}
.box{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--paper);display:flex;flex-direction:column;gap:2px;min-width:0}
.box b{font-family:var(--f-display);font-size:.98rem;font-weight:600}
.box small{font-size:.76rem;color:var(--muted);line-height:1.35}
.box.side{border-style:dashed}
.box.db{background:var(--pine-soft);border-color:color-mix(in srgb,var(--pine) 40%,var(--line))}
.box.db b{color:var(--pine)}
.flow-down{display:grid;grid-template-columns:78px 1fr;gap:12px;height:26px}
.flow-down i{grid-column:2;justify-self:center;width:2px;height:100%;background:var(--line);position:relative;overflow:hidden}
.flow-down i::after{content:"";position:absolute;left:0;right:0;top:0;height:40%;background:var(--amber);animation:drop 1.6s linear infinite}
@keyframes drop{from{transform:translateY(-100%)}to{transform:translateY(260%)}}
.monitor{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:.86rem;color:var(--muted)}
.monitor b{color:var(--ink)}
.arch-points{display:flex;flex-direction:column;gap:14px;min-width:0}
.pt{border-left:3px solid var(--amber);padding:4px 0 4px 16px;display:flex;flex-direction:column;gap:.25rem}
.pt b{font-family:var(--f-display);font-size:1.12rem}
.pt span{color:var(--muted);font-size:.95rem}
@media (max-width:900px){.arch-grid{grid-template-columns:1fr}}
@media (max-width:560px){.layer,.flow-down{grid-template-columns:1fr}.flow-down i{grid-column:1}.boxes.three{grid-template-columns:1fr 1fr}.boxes.three .box:last-child{grid-column:1/-1}}
/* Slider-Mock Architektur */
.mini-arch{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.ma-top{font-family:var(--f-mono);font-size:.75rem;padding:.45rem 1.1rem;border-radius:8px;background:#3fb39c;color:#06201a;font-weight:600}
.ma-lines{display:flex;justify-content:space-between;width:70%;height:30px}
.ma-lines i{width:2px;height:100%;background:rgba(255,255,255,.2);position:relative;overflow:hidden}
.ma-lines i::after{content:"";position:absolute;left:0;right:0;height:45%;background:#f0b257;animation:drop 1.3s linear infinite}
.ma-lines i:nth-child(2)::after{animation-delay:.4s}.ma-lines i:nth-child(3)::after{animation-delay:.8s}
.ma-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.ma-row div{border-radius:10px;background:rgba(255,255,255,.08);padding:10px 6px;text-align:center;font-family:var(--f-mono);font-size:.66rem;opacity:.9}
.ma-row b{display:block;font-family:var(--f-display);font-size:1.05rem;color:#fff;margin-bottom:2px}
.extras{grid-template-columns:repeat(2,1fr)}
@media (max-width:700px){.extras{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal.pre{transform:none;opacity:1}
}

/* Honeypot gegen Spam-Bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Rechtsseiten */
.legal{max-width:760px;padding-block:56px 80px}
.legal h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.02em;margin-bottom:1.6rem}
.legal h2{font-size:1.35rem;margin:2.2rem 0 .7rem;letter-spacing:0}
.legal p,.legal li{color:var(--muted)}
.legal p+p{margin-top:.8rem}
.legal a{color:var(--pine)}