/* Leitwert · drei umschaltbare Designs über data-theme am <html>.
   technisch = Standard, plakativ, ruhig. Nur Tokens wechseln, der Aufbau bleibt gleich. */
:root{
  --bg:#0d1117; --panel:#141b24; --ink:#e8edf2; --mut:#93a1b0; --line:#243040;
  --acc:#ffb020; --acc-ink:#0d1117; --hero-bg:transparent; --hero-ink:#e8edf2;
  --r:4px; --bw:1px; --fh:'Space Grotesk',system-ui,sans-serif; --fb:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace; --hw:700; --hls:-.03em; --htt:none; --h1:clamp(2.5rem,7vw,5.2rem);
}
[data-theme="plakativ"]{
  --bg:#ffffff; --panel:#f1f1ee; --ink:#0b0b0b; --mut:#363636; --line:#0b0b0b;
  --acc:#1b3bff; --acc-ink:#ffffff; --hero-bg:#ffd23f; --hero-ink:#0b0b0b;
  --r:0px; --bw:3px; --fh:'Archivo',system-ui,sans-serif; --fb:'Archivo',system-ui,sans-serif; --hw:900; --hls:-.04em; --htt:uppercase; --h1:clamp(2.6rem,8.5vw,6.6rem);
}
[data-theme="ruhig"]{
  --bg:#f4f0e8; --panel:#fbf9f4; --ink:#16201d; --mut:#5d6762; --line:#d9d3c6;
  --acc:#1f5c4d; --acc-ink:#ffffff; --hero-bg:transparent; --hero-ink:#16201d;
  --r:16px; --bw:1px; --fh:'Fraunces',Georgia,serif; --fb:'Inter Tight',system-ui,sans-serif; --hw:500; --hls:-.01em; --htt:none; --h1:clamp(2.4rem,6.5vw,4.8rem);
}
[data-theme="blueprint"]{
  --bg:#0f3270; --panel:#0b2a5e; --ink:#eaf2ff; --mut:#a9c3ee; --line:#5b86cc;
  --acc:#7fd6ff; --acc-ink:#06203f; --hero-bg:transparent; --hero-ink:#eaf2ff;
  --r:2px; --bw:1px; --fh:'JetBrains Mono',ui-monospace,monospace; --fb:'Space Grotesk',system-ui,sans-serif; --hw:600; --hls:-.04em; --htt:none; --h1:clamp(2.2rem,6vw,4.4rem);
}
[data-theme="beton"]{
  --bg:#e9e8e4; --panel:#f6f5f2; --ink:#1c1c1c; --mut:#55534e; --line:#bdbab2;
  --acc:#e8480f; --acc-ink:#ffffff; --hero-bg:#26282b; --hero-ink:#f4f3ef;
  --r:0px; --bw:2px; --fh:'Archivo',system-ui,sans-serif; --fb:'Archivo',system-ui,sans-serif; --hw:800; --hls:-.03em; --htt:uppercase; --h1:clamp(2.4rem,7vw,5.4rem);
}
[data-theme="kupfer"]{
  --bg:#17120f; --panel:#211a16; --ink:#f3e9de; --mut:#b9a998; --line:#3a2e27;
  --acc:#e0925a; --acc-ink:#17120f; --hero-bg:transparent; --hero-ink:#f3e9de;
  --r:12px; --bw:1px; --fh:'Fraunces',Georgia,serif; --fb:'Inter Tight',system-ui,sans-serif; --hw:500; --hls:-.01em; --htt:none; --h1:clamp(2.4rem,6.5vw,4.8rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--fb);-webkit-font-smoothing:antialiased}
:root:not([data-theme]) body,[data-theme="technisch"] body,[data-theme="blueprint"] body{
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;background-position:-1px -1px;background-attachment:fixed}
[data-theme="blueprint"] body{background-size:40px 40px;background-image:linear-gradient(rgba(127,214,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(127,214,255,.22) 1px,transparent 1px)}
h1 em{font-style:normal;color:var(--acc)}
[data-theme="ruhig"] h1 em,[data-theme="kupfer"] h1 em{font-style:italic}
[data-theme="plakativ"] h1 em{background:var(--ink);color:var(--hero-bg);padding:0 .1em}
[data-theme="beton"] h1 em{color:var(--acc)}
[data-theme="beton"] .site-head{background:var(--ink);color:#f4f3ef;border-bottom-color:var(--acc)}
[data-theme="beton"] .site-head .brand b,[data-theme="beton"] .nav a:not(.btn){color:#f4f3ef}
[data-theme="beton"] .menu-btn{color:#f4f3ef;border-color:#f4f3ef}
[data-theme="beton"] .switch button[aria-pressed=true]{background:var(--acc);color:#fff}
a{color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--acc);color:var(--acc-ink);padding:10px 16px;z-index:99}
.skip:focus{left:10px;top:10px}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--fh);font-weight:var(--hw);letter-spacing:var(--hls);text-transform:var(--htt);line-height:1.05;margin:0}
h1{font-size:var(--h1);margin:18px 0 22px;max-width:16ch}
h2{font-size:clamp(1.8rem,4.2vw,3rem);margin:12px 0 16px}
h3{font-size:1.35rem;line-height:1.15}
.kicker{font:600 .78rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
[data-theme="plakativ"] .kicker{color:var(--ink);border:2px solid var(--ink);display:inline-block;padding:5px 10px}
[data-theme="plakativ"] .hero .kicker{background:var(--bg)}
.lead{font-size:clamp(1.1rem,2vw,1.3rem);color:var(--mut);max-width:50ch;margin:0 0 30px}
.hero .lead{color:var(--hero-ink);opacity:.82}

/* Kopf */
.site-head{border-bottom:var(--bw) solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.brand{text-decoration:none;line-height:1}
.brand b{font:var(--hw) 1.45rem var(--fh);letter-spacing:var(--hls);text-transform:uppercase;display:block}
.brand b i{font-style:normal;color:var(--acc)}
.brand small{display:block;font:500 .72rem var(--mono);color:var(--mut);margin-top:4px;letter-spacing:.04em}
.nav{display:flex;align-items:center;gap:22px;font-size:.95rem}
.nav a{text-decoration:none;color:var(--mut);font-weight:500}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}
.nav a[aria-current=page]{box-shadow:0 2px 0 var(--acc)}
.menu-btn{display:none;font:600 .9rem var(--fb);background:none;border:var(--bw) solid var(--ink);color:var(--ink);padding:8px 14px;border-radius:var(--r);cursor:pointer}
.btn{display:inline-block;padding:13px 24px;background:var(--acc);color:var(--acc-ink)!important;font:600 .98rem var(--fb);text-decoration:none;border:var(--bw) solid var(--acc);border-radius:var(--r);cursor:pointer;transition:filter .15s}
[data-theme="plakativ"] .btn{border-color:var(--ink);font-weight:800}
.btn:hover{filter:brightness(1.1)}
.btn.o{background:transparent;color:var(--hero-ink)!important;border-color:currentColor}
.nav .btn{padding:9px 18px;color:var(--acc-ink)}
.nav a.btn:hover{color:var(--acc-ink)}

/* Hero */
.hero{background:var(--hero-bg);color:var(--hero-ink);padding:clamp(44px,8vw,100px) 0 clamp(40px,6vw,70px)}
[data-theme="plakativ"] .hero{border-bottom:var(--bw) solid var(--line)}
.hero .wrap.split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.crumbs{font:500 .8rem var(--mono);color:var(--mut);margin-bottom:14px}.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.hero .crumbs{color:var(--hero-ink);opacity:.7}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;margin-top:48px;border:var(--bw) solid var(--line);background:var(--panel);color:var(--ink)}
.facts div{padding:16px 18px;font:500 .84rem var(--mono);color:var(--mut);border-right:var(--bw) solid var(--line)}
.facts div:last-child{border-right:0}
.facts b{display:block;font:600 1rem var(--fb);color:var(--ink);margin-top:3px}
.dia{width:100%;height:auto;color:var(--ink)}
.dia rect{fill:var(--panel);stroke:var(--ink);stroke-width:var(--bw)}
.dia text{fill:var(--ink);font:600 15px var(--fb);text-anchor:middle}
.dia .ln{stroke:var(--acc);stroke-width:3;fill:none;stroke-dasharray:7 7;animation:fl 1.2s linear infinite}
[data-theme="plakativ"] .dia .ln{stroke:var(--ink)}
.dia .nd{fill:var(--acc)}
.dia .hub rect{fill:var(--acc);stroke:var(--acc)}.dia .hub text{fill:var(--acc-ink)}
@keyframes fl{to{stroke-dashoffset:-14}}
@media (prefers-reduced-motion:reduce){.dia .ln{animation:none}html{scroll-behavior:auto}}

/* Abschnitte */
section{padding:clamp(46px,7vw,92px) 0}
.alt{background:var(--panel);border-block:var(--bw) solid var(--line)}
.head{max-width:62ch;margin-bottom:38px}.head p{color:var(--mut);margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.grid.tight{gap:0;border:var(--bw) solid var(--line)}
.grid.tight .card{border:0;border-right:var(--bw) solid var(--line);border-bottom:var(--bw) solid var(--line);margin:0;border-radius:0}
.card{background:var(--panel);border:var(--bw) solid var(--line);border-radius:var(--r);padding:26px 24px;text-decoration:none;display:block}
.alt .card{background:var(--bg)}
.card .no{font:600 .8rem var(--mono);color:var(--acc);display:block;margin-bottom:10px}
[data-theme="plakativ"] .card .no{color:var(--acc);font-size:2.6rem;font-weight:900;line-height:1;font-family:var(--fh)}
.card h3{margin-bottom:8px}.card p{margin:0;color:var(--mut);font-size:.98rem}
a.card:hover{border-color:var(--acc)}
a.card .more{display:inline-block;margin-top:14px;font-weight:600;color:var(--acc)}
[data-theme="plakativ"] a.card .more{color:var(--ink);text-decoration:underline}
.switch{display:inline-flex;border:var(--bw) solid var(--ink);border-radius:999px;padding:3px;margin-bottom:26px}
[data-theme="plakativ"] .switch{border-radius:0;padding:0}
.switch button{font:600 .92rem var(--fb);border:0;background:none;color:var(--ink);padding:10px 20px;border-radius:999px;cursor:pointer}
[data-theme="plakativ"] .switch button{border-radius:0;padding:12px 22px}
.switch button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.hide{display:none!important}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;counter-reset:s}
.steps li{counter-increment:s;border-top:var(--bw) solid var(--ink);padding-top:16px}
.steps li::before{content:counter(s,decimal-leading-zero);font:600 1.1rem var(--mono);color:var(--acc);display:block;margin-bottom:6px}
.steps h3{margin-bottom:6px}.steps p{margin:0;color:var(--mut);font-size:.96rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px)}
.two ul,.list{list-style:none;padding:0;margin:14px 0 0}
.two li,.list li{padding:12px 0;border-bottom:var(--bw) solid var(--line);color:var(--mut)}
.two li:first-child,.list li:first-child{border-top:var(--bw) solid var(--line)}
.yes li::before{content:"✓  ";color:var(--acc);font-weight:700}.no-l li::before{content:"✕  ";color:#e0452f;font-weight:700}
.list li b{color:var(--ink)}
.prose{max-width:68ch}.prose p{color:var(--mut)}.prose h2{margin-top:36px}
details{border-top:var(--bw) solid var(--line)}details:last-of-type{border-bottom:var(--bw) solid var(--line)}
summary{cursor:pointer;padding:18px 0;font:600 1.08rem var(--fb);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:"+";color:var(--acc);font:600 1.4rem/1 var(--mono)}details[open] summary::after{content:"–"}
summary::-webkit-details-marker{display:none}
details p{margin:0 0 18px;color:var(--mut);max-width:66ch}

/* Kontakt + Formular */
.kontakt{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,64px);align-items:start}
.box{background:var(--panel);border:var(--bw) solid var(--line);border-radius:var(--r);padding:28px}
[data-theme="ruhig"] .box,[data-theme="ruhig"] .card{border-radius:18px}
.tel{display:block;font:var(--hw) clamp(1.8rem,5vw,2.6rem) var(--fh);letter-spacing:var(--hls);text-decoration:none;color:var(--acc);margin:6px 0}
[data-theme="plakativ"] .tel{color:var(--ink)}
.f{display:block;margin-bottom:14px}.f span{display:block;font-size:.85rem;color:var(--mut);margin-bottom:5px}
.f input,.f textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:var(--bw) solid var(--line);border-radius:var(--r);padding:11px 13px}
[data-theme="plakativ"] .f input,[data-theme="plakativ"] .f textarea{border-color:var(--ink)}
.seg,.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.seg input,.chips input{position:absolute;opacity:0;pointer-events:none}
.seg span,.chips span{display:block;padding:8px 16px;border:var(--bw) solid var(--line);border-radius:999px;cursor:pointer;font-size:.9rem;font-weight:500}
[data-theme="plakativ"] .seg span,[data-theme="plakativ"] .chips span{border-radius:0;border-color:var(--ink)}
.seg input:checked+span,.chips input:checked+span{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.seg input:focus-visible+span,.chips input:focus-visible+span{outline:3px solid var(--acc);outline-offset:2px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--mut);margin:4px 0 6px}.chk input{margin-top:4px;flex:none}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
button.send{width:100%;margin-top:12px}
button.send[disabled]{opacity:.6;cursor:wait}
.status{min-height:1.4em;margin:12px 0 0;font-size:.95rem}.status.ok{color:#2f9e6b}.status.err{color:#e0452f}

/* Fuß */
footer{border-top:var(--bw) solid var(--line);padding:40px 0 50px;color:var(--mut);font-size:.9rem}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.foot h4{margin:0 0 10px;font:600 .78rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0}.foot li{margin:6px 0}.foot a{text-decoration:none}.foot a:hover{color:var(--ink);text-decoration:underline}
.theme{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.theme button{font:500 .84rem var(--fb);padding:7px 14px;border:var(--bw) solid var(--line);background:none;color:var(--mut);border-radius:999px;cursor:pointer}
[data-theme="plakativ"] .theme button{border-radius:0;border-color:var(--ink);color:var(--ink)}
.theme button[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.legal{margin-top:30px;padding-top:18px;border-top:var(--bw) solid var(--line);display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}

@media (max-width:860px){
  .hero .wrap.split,.kontakt,.two,.foot{grid-template-columns:1fr}
  .dia{max-width:420px}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:var(--bw) solid var(--line);flex-direction:column;align-items:flex-start;padding:16px 20px;gap:14px}
  .nav.open{display:flex}
  .facts div{border-right:0;border-bottom:var(--bw) solid var(--line)}
}

.note{font-size:.85rem;color:var(--mut);margin:4px 0 6px}.note a{color:var(--ink)}
.who-note{max-width:52ch;margin:0 0 24px;font-size:.98rem;opacity:.85}