@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/schrift/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(/schrift/inter-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(/schrift/inter-600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(/schrift/inter-700.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:800;font-display:swap;src:url(/schrift/inter-800.woff2) format("woff2")}

/* Farbstufung: Weiß + Gelb, dann Grau, Schwarz nur für Schrift */
:root{
  --weiss:#fff; --gelb:#F5C83C; --gelb-h:#EBBB22; --gelb-zart:#FBF1CF;
  --grau:#F3F3F0; --linie:#E4E4DF; --rand:#D2D2CC; --grau-mittel:#B9BAB5;
  --text:#1D1E21; --leise:#5B5E64;
  /* dunkle Flächen (Planer, Fuß) */
  --nacht:#161719; --nacht-flaeche:#212225; --nacht-linie:rgba(255,255,255,.1); --hell:#F2F2EF; --hell-leise:#A3A6AB;
  --schatten-s:0 1px 2px rgba(22,23,25,.05),0 0 0 1px rgba(22,23,25,.04);
  --schatten-m:0 2px 4px rgba(22,23,25,.04),0 12px 32px rgba(22,23,25,.08);
  --f:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --max:1200px; --pad:clamp(20px,4.5vw,48px); --kopf:68px; --ease:cubic-bezier(.25,.1,.25,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf) + 12px);scroll-behavior:smooth}
body{margin:0;font-family:var(--f);font-size:17px;line-height:1.55;color:var(--text);background:var(--weiss);-webkit-font-smoothing:antialiased;letter-spacing:-.006em}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;letter-spacing:inherit}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:6px}
::selection{background:var(--gelb);color:var(--text)}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:99;background:var(--gelb);padding:10px 14px;border-radius:8px}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.08}
.t1{font-size:clamp(36px,5vw,64px);letter-spacing:-.035em}
.t2{font-size:clamp(28px,3.4vw,44px)}
.t3{font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em}
.intro{font-size:clamp(18px,1.7vw,20px);line-height:1.5;color:var(--leise);max-width:42ch;margin-top:16px}
.dachzeile{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:15px;font-weight:600;color:var(--leise)}
.dachzeile::before{content:"";width:22px;height:4px;border-radius:2px;background:var(--gelb)}
.abstand{margin-bottom:28px}.oben-luft{margin-top:clamp(40px,5vw,64px)}.unten-luft{padding-bottom:clamp(64px,8vw,110px)}
.icon{width:24px;height:24px;flex:none}
.icon.klein{width:18px;height:18px}
.icon.riesig{width:64px;height:64px;stroke-width:1.2}

/* Knöpfe und Links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;border:0;background:var(--gelb);color:var(--text);font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s var(--ease),box-shadow .2s}
.btn:hover{background:var(--gelb-h)}
.btn.zweit{background:var(--weiss);box-shadow:inset 0 0 0 1.5px var(--linie)}
.btn.zweit:hover{box-shadow:inset 0 0 0 1.5px var(--grau-mittel)}
.btn.weiss{background:var(--weiss)}
.btn.weiss:hover{background:#FFFBEE}
.btn.klein{min-height:44px;padding:0 18px;font-size:15px;color:var(--text)}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.mehr{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-color:var(--gelb);text-decoration-thickness:2px;text-underline-offset:6px}
.mehr:hover{text-decoration-color:var(--text)}
.gw{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--leise)}
.seit{display:inline-block;margin-top:10px;background:var(--gelb-zart);font-size:14px;font-weight:600;padding:2px 10px;border-radius:6px}

/* Winkel-Motiv (aus dem Logo) */
.winkel-ecke{position:absolute;left:-10px;bottom:-10px;width:40%;height:56%;border-left:10px solid var(--gelb);border-bottom:10px solid var(--gelb);pointer-events:none}
.winkel-ecke::after{content:"";position:absolute;right:9px;bottom:-8px;width:6px;height:6px;border-radius:50%;background:var(--weiss)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:30;border-bottom:1px solid transparent;padding-top:env(safe-area-inset-top);transition:border-color .3s}
/* Milchglas auf eigener Ebene: backdrop-filter direkt am Kopf würde das fixierte Handy-Menü im Kopf einsperren */
.kopf::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);pointer-events:none}
.kopf.linie{border-color:var(--linie)}
.kopf .wrap{height:var(--kopf);display:flex;align-items:center;gap:28px}
.marke{margin-right:auto;display:flex;align-items:center;min-height:44px;color:var(--text)}
.logo{height:42px;width:auto;overflow:visible}
.logo text{font-family:var(--f);font-weight:800;font-size:19.5px;fill:currentColor}
.logo .winkel{fill:var(--gelb)}
.nav{display:flex;align-items:center;gap:24px}
.nav a:not(.btn){text-decoration:none;font-size:15px;font-weight:500;color:var(--leise);display:inline-flex;align-items:center;min-height:44px}
.nav a:not(.btn):hover,.nav a[aria-current]{color:var(--text)}
.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--gelb)}
.nav .btn{margin-left:6px}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative;margin-right:-10px}
.burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:1px;background:var(--text);transition:transform .3s var(--ease)}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:25px}
body.menue .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
body.menue .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media (max-width:940px){
  .burger{display:block}
  .nav{position:fixed;left:0;right:0;top:calc(var(--kopf) + env(safe-area-inset-top));bottom:0;height:calc(100dvh - var(--kopf) - env(safe-area-inset-top));z-index:31;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:12px var(--pad) calc(40px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
  body.menue{overflow:hidden}
  body.menue .kopf{border-color:var(--linie)}
  body.menue .kopf::before{background:#fff}
  body.menue .nav{opacity:1;visibility:visible}
  .nav a:not(.btn){font-size:24px;font-weight:700;color:var(--text);letter-spacing:-.025em;min-height:60px;border-bottom:1px solid var(--linie)}
  .nav a[aria-current]{box-shadow:none}
  .nav .btn{margin:28px 0 0;min-height:52px;font-size:17px}
}

/* Held */
.held{padding:clamp(40px,6vw,88px) 0 clamp(48px,6vw,80px)}
.held-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,6vw,88px);align-items:center}
.held h1{font-size:clamp(40px,5.6vw,76px);letter-spacing:-.04em;line-height:1.02;max-width:11ch}
.held-bild{position:relative;margin:0 0 10px 10px}
.held-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(36px,4vw,52px) 0 0;padding-top:20px;border-top:1px solid var(--linie);max-width:460px}
.zahlen div{display:flex;flex-direction:column}
.zahlen dd{order:-1}
.zahlen dd{margin:0;font-size:clamp(28px,3vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.zahlen dt{font-size:14px;color:var(--leise);margin-top:2px}
@media (max-width:860px){.held-raster{grid-template-columns:minmax(0,1fr)}.held-bild{order:-1;margin-bottom:22px}}

/* Vorteile */
.vorteile-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 36px;padding-top:clamp(40px,5vw,56px);padding-bottom:clamp(8px,2vw,16px)}
.vorteile .wrap{position:relative}
.vorteile .wrap::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:var(--linie)}
.vorteil h3{font-size:18px;letter-spacing:-.015em}
.vorteil h3::before{content:"";display:block;width:22px;height:4px;border-radius:2px;background:var(--gelb);margin-bottom:14px}
.vorteil p{margin:8px 0 0;color:var(--leise);font-size:15px}
@media (max-width:900px){.vorteile-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.vorteile-raster{grid-template-columns:minmax(0,1fr)}}

/* Abschnitte */
.abschnitt{padding:clamp(72px,9vw,120px) 0}
.grau{background:var(--grau)}
.kopfzeile{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:32px}
.kopfzeile > p{margin:0;color:var(--leise);max-width:44ch}

/* Planer */
.planer{background:var(--grau);padding:clamp(72px,9vw,120px) 0}
.planer .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.chip{min-height:46px;padding:0 20px;border-radius:999px;border:1.5px solid var(--linie);background:#fff;color:var(--text);font-size:16px;font-weight:500;cursor:pointer;transition:background .2s var(--ease),border-color .2s}
.chip:hover{border-color:var(--grau-mittel)}
.chip[aria-pressed="true"]{background:var(--gelb);border-color:var(--gelb);font-weight:600}
.pl-flaeche{margin-top:clamp(32px,4vw,48px)}
.pl-panel{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:clamp(28px,5vw,64px);align-items:start}
.pl-panel[hidden]{display:none}
.pl-links h3{font-size:clamp(24px,2.4vw,30px)}
.pl-links p{color:var(--leise);margin-top:12px}
.pl-zahl{font-weight:600;color:var(--text)!important}
.pl-hinweis{margin:clamp(32px,4vw,48px) 0 0;font-size:15px;color:var(--leise);max-width:72ch}
.b-titel{font-size:15px;font-weight:600;letter-spacing:0;color:var(--leise);margin:0 0 12px}
.b-liste+.b-titel{margin-top:28px}
.b-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.b-karte{background:#fff;border-radius:14px;padding:18px 20px 20px;min-width:0}
.b-karte .pn{display:inline-flex;align-items:center;min-height:44px;font-size:19px;font-weight:700;letter-spacing:-.02em;text-decoration:none;margin-top:2px}
.b-karte .pn:hover{text-decoration:underline;text-decoration-color:var(--gelb);text-decoration-thickness:2px;text-underline-offset:5px}
.b-karte p{margin:2px 0 0;color:var(--leise);font-size:15px}
.pl-panel.neu .b-karte{animation:rein .45s var(--ease) both;animation-delay:calc(var(--i) * 50ms)}
@keyframes rein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pl-panel.neu .b-karte{animation:none}}
@media (max-width:860px){.pl-panel{grid-template-columns:minmax(0,1fr)}}

/* Partnerkarten */
.p-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.p-karte{display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:16px;overflow:hidden;background:#fff;min-width:0;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.p-karte:hover{border-color:var(--gelb);box-shadow:0 6px 24px rgba(44,45,48,.06)}
.p-logo-box{display:grid;place-items:center;height:124px;padding:18px 22px;border-bottom:1px solid var(--linie)}
.p-logo{max-height:74px;width:auto;max-width:100%;object-fit:contain}
.p-txt{display:block;padding:18px 22px 10px}
.p-name{display:block;font-size:20px;letter-spacing:-.02em;font-weight:700;line-height:1.2;margin-top:8px;hyphens:auto;-webkit-hyphens:auto}
.p-leist{margin-top:14px}
.p-leist li,.haken li{position:relative;padding-left:16px;font-size:15px;color:var(--leise);margin-bottom:6px}
.p-leist li::before,.haken li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gelb)}
.p-fuss{margin-top:auto;display:flex;align-items:center;gap:6px;min-height:48px;padding:0 22px;border-top:1px solid var(--linie);font-size:15px;font-weight:600}
.p-karte:hover .p-fuss span{transform:translateX(3px)}
.p-fuss span{transition:transform .2s var(--ease)}

/* Referenzen */
.ref-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px 16px}
.ref{margin:0;min-width:0}
.ref-knopf{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:12px;overflow:hidden}
.ref-knopf img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease)}
.ref-knopf:hover img{transform:scale(1.03)}
.ref figcaption{margin-top:10px;display:flex;flex-direction:column}
.ref figcaption b{font-weight:600}
.ref figcaption span{font-size:15px;color:var(--leise)}
.lichtbox{max-width:min(1200px,94vw);max-height:92vh;padding:0;border:0;background:#fff;border-radius:12px;overflow:hidden}
.lichtbox::backdrop{background:rgba(245,245,243,.94)}
.lichtbox img{max-height:80vh;width:auto;margin:0 auto}
.lichtbox p{margin:0;padding:14px 18px;font-size:15px;color:var(--leise)}
.lb-zu{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--text);cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.lb-zu svg{width:22px;height:22px}

/* Kundenstimmen */
.stimmen{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:32px}
.stimme{margin:0;background:#fff;border-radius:16px;padding:26px}
.stimme blockquote{margin:0;font-size:18px;line-height:1.5}
.stimme figcaption{margin-top:14px;font-weight:600}

/* CTA */
.cta{background:var(--gelb);padding:clamp(64px,8vw,104px) 0}
.cta h2{font-size:clamp(30px,4.2vw,52px);letter-spacing:-.035em;max-width:18ch}
.cta .btn.zweit{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(44,45,48,.25)}
.cta .btn.zweit:hover{box-shadow:inset 0 0 0 1.5px var(--text)}

/* Seitenkopf */
.seitenkopf{padding:clamp(28px,4vw,48px) 0 clamp(48px,6vw,80px)}
.pfad ol{display:flex;flex-wrap:wrap;gap:0 8px;font-size:14px;color:var(--leise);margin-bottom:clamp(20px,3vw,36px)}
.pfad li{display:flex;align-items:center;min-height:44px}
.pfad li+li::before{content:"/";margin-right:8px;color:var(--grau-mittel)}
.pfad a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.pfad a:hover{color:var(--text)}
.v-held{position:relative;margin:0 0 clamp(56px,7vw,90px)}
.v-held img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:16px}
@media (max-width:700px){.v-held img{aspect-ratio:4/3}}

/* Vorhaben-Übersicht */
.v-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.v-karte{display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:16px;overflow:hidden;text-decoration:none;min-width:0;transition:border-color .2s,box-shadow .2s}
.v-karte:hover{border-color:var(--gelb);box-shadow:0 6px 24px rgba(44,45,48,.06)}
.v-bild img,.v-bild .leer{width:100%;aspect-ratio:16/10;object-fit:cover}
.v-bild .leer{display:grid;place-items:center;background:var(--grau);color:var(--grau-mittel)}
.v-txt{padding:22px}
.v-txt h2{font-size:22px;font-weight:700;letter-spacing:-.02em}
.v-txt p{margin:10px 0 16px;color:var(--leise);font-size:16px}
.v-gewerke{display:flex;flex-wrap:wrap;gap:6px}
.v-gewerke li{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--grau);color:var(--leise)}
.verwandt{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.verwandt a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--linie);border-radius:999px;text-decoration:none;font-weight:500;font-size:15px}
.verwandt a:hover{border-color:var(--gelb)}

/* Partnerprofil */
.pp-kopf{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.pp-name{font-size:clamp(34px,4.6vw,58px);margin-top:12px;hyphens:auto;-webkit-hyphens:auto}
.pp-kopf .intro{max-width:48ch}
.aktionen{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pp-logo{display:grid;place-items:center;border:1px solid var(--linie);border-radius:16px;padding:clamp(28px,4vw,48px);background:#fff;min-height:220px}
.pp-logo img{max-height:150px;width:auto;max-width:100%;object-fit:contain}
.pp-inhalt{padding-top:0}
.pp-raster{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);padding-top:38px;background:linear-gradient(var(--linie),var(--linie)) no-repeat var(--pad) 0/calc(100% - 2 * var(--pad)) 1px}
.haken{columns:2;column-gap:32px;margin-top:20px}
.haken li{font-size:17px;color:var(--text);break-inside:avoid;margin-bottom:10px}
address{font-style:normal;margin-top:20px;line-height:1.6}
.klein{font-size:15px;color:var(--leise)}
.rollen{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:30px}
.rolle{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:14px;background:#fff;text-decoration:none;border:1.5px solid transparent;transition:border-color .2s}
.rolle:hover{border-color:var(--gelb)}
.rolle b{font-size:18px;letter-spacing:-.02em}
.rolle span{color:var(--leise);font-size:15px}
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:18px}
.mini{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;border-radius:14px;background:#fff;text-decoration:none;font-size:14px;font-weight:600;text-align:center;color:var(--leise);border:1.5px solid transparent}
.mini:hover{border-color:var(--gelb)}
.mini img{height:48px;width:auto;max-width:100%;object-fit:contain}
.weiter{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.weiter a{display:flex;flex-direction:column;padding:20px 22px;border:1px solid var(--linie);border-radius:14px;text-decoration:none;min-width:0}
.weiter a:last-child{text-align:right}
.weiter a:hover{border-color:var(--gelb)}
.weiter small{font-size:14px;color:var(--leise)}
.weiter b{font-size:18px;font-weight:600;overflow-wrap:anywhere}
@media (max-width:860px){
  .pp-kopf,.pp-raster{grid-template-columns:minmax(0,1fr)}
  .pp-logo{order:-1;min-height:160px}
  .pp-logo img{max-height:110px}
}
@media (max-width:560px){.haken{columns:1}.weiter{grid-template-columns:minmax(0,1fr)}.weiter a:last-child{text-align:left}}

/* Textseiten */
.textseite .text{max-width:70ch;margin-top:clamp(28px,4vw,44px)}
.textseite h2{font-size:22px;letter-spacing:-.02em;margin:36px 0 10px}
.textseite h3{font-size:18px;margin:24px 0 8px}
.textseite p,.textseite li{color:#45474B;overflow-wrap:anywhere}
.textseite ul{list-style:disc;padding-left:1.2em}

/* Fuß (hell) */
.fuss{background:var(--grau);color:var(--leise);padding:clamp(56px,7vw,88px) 0 calc(24px + env(safe-area-inset-bottom));font-size:15px}
.fuss .marke{margin:0}
.fuss-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-bottom:32px;border-bottom:1px solid var(--linie)}
.fuss-kopf p{margin:0}
.fuss-spalten{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px;padding:32px 0}
.fuss h2{font-size:14px;font-weight:600;color:var(--text);margin-bottom:10px;letter-spacing:0}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--text)}
.fuss-spalten ul a{display:flex;align-items:center;min-height:44px}
.fuss-partner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.fuss-spalten .fuss-partner a{flex-direction:column;align-items:flex-start;justify-content:center;padding:6px 0;color:var(--text)}
.fuss-partner a span{font-size:14px;color:var(--leise)}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding-top:16px;border-top:1px solid var(--linie)}
.fuss-unten nav{display:flex;gap:22px}
.fuss-unten a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:760px){.fuss-spalten{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.fuss-partner{grid-template-columns:minmax(0,1fr)}}

/* ================================================================ Effekte
   Alles nur mit JavaScript aktiv (.js) und nie bei „Bewegung reduzieren“. */

/* Fortschrittsbalken unter der Kopfzeile */
.fortschritt{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--gelb);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* Einblenden beim Scrollen */
/* :where() hält die Spezifität niedrig, damit .sichtbar sicher gewinnt */
.js :where(.kopfzeile,.vorteil,.p-karte,.ref,.rolle,.mini,.v-karte,.planer .dachzeile,.planer .t2,.planer > .wrap > .intro,
.cta h2,.cta .knoepfe,.pp-raster > div,.weiter a,.seitenkopf .intro,.seitenkopf .knoepfe,.v-held){
  opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 70ms)}
.js .sichtbar,.sicher.js :where(.kopfzeile,.vorteil,.p-karte,.ref,.rolle,.mini,.v-karte,.planer .dachzeile,.planer .t2,.planer > .wrap > .intro,
.cta h2,.cta .knoepfe,.pp-raster > div,.weiter a,.seitenkopf .intro,.seitenkopf .knoepfe,.v-held){opacity:1;transform:none}
/* gelber Strich der Dachzeile wächst */
.js .dachzeile::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.2,.7,.2,1) .15s}
.js .sichtbar .dachzeile::before,.js .dachzeile.sichtbar::before,.js .held .dachzeile::before,.sicher .dachzeile::before{transform:none}

/* Startbereich: gestaffelter Auftritt beim Laden */
@keyframes auf{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes bildauf{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
@keyframes winkel{from{clip-path:inset(100% 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.js .held-text > *{animation:auf .9s cubic-bezier(.2,.7,.2,1) both}
.js .held-text > :nth-child(1){animation-delay:.05s}
.js .held-text > :nth-child(2){animation-delay:.15s}
.js .held-text > :nth-child(3){animation-delay:.3s}
.js .held-text > :nth-child(4){animation-delay:.42s}
.js .held-text > :nth-child(5){animation-delay:.55s}
.js .held-bild{overflow:visible}
.js .held-bild img{animation:bildauf 1.3s cubic-bezier(.2,.7,.2,1) .1s both}
.js .held-bild .winkel-ecke{animation:winkel 1s cubic-bezier(.65,0,.35,1) .7s both}
.js .held .dachzeile::before{animation:strich .7s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes strich{from{transform:scaleX(0)}to{transform:none}}
.held-bild img{will-change:transform}

/* lebendigere Hover-Zustände */
.p-karte,.v-karte,.b-karte,.rolle,.mini,.weiter a{transition:border-color .25s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease),opacity .8s var(--ease)}
.p-karte:hover,.v-karte:hover,.rolle:hover,.mini:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(44,45,48,.09)}
.b-karte:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(44,45,48,.07)}
.p-logo{transition:transform .4s var(--ease)}
.p-karte:hover .p-logo{transform:scale(1.05)}
.btn{transition:background .2s var(--ease),box-shadow .2s,transform .15s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active,.chip:active{transform:scale(.97)}
.btn:not(.zweit):not(.weiss):hover{box-shadow:0 8px 20px rgba(245,200,60,.35)}
.chip{transition:background .2s var(--ease),border-color .2s,transform .15s var(--ease)}
.ref-knopf{position:relative}
.ref-knopf::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(245,200,60,.28),transparent 45%);opacity:0;transition:opacity .35s var(--ease)}
.ref-knopf:hover::after{opacity:1}
.lichtbox[open]{animation:bildauf .35s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .js :where(.kopfzeile,.vorteil,.p-karte,.ref,.rolle,.mini,.v-karte,.planer .dachzeile,.planer .t2,.planer > .wrap > .intro,
  .cta h2,.cta .knoepfe,.pp-raster > div,.weiter a,.seitenkopf .intro,.seitenkopf .knoepfe,.v-held){opacity:1;transform:none;transition:none}
  .js .held-text > *,.js .held-bild img,.js .held-bild .winkel-ecke,.js .held .dachzeile::before,.lichtbox[open]{animation:none}
  .js .dachzeile::before{transform:none;transition:none}
  .p-karte:hover,.v-karte:hover,.rolle:hover,.mini:hover,.b-karte:hover,.btn:hover,.p-karte:hover .p-logo{transform:none}
  .fortschritt{display:none}
}

/* ================================================================ Handy
   Wischleisten, mitlaufende Vorhaben-Auswahl, Aktionsleiste unten, Fuß zum Aufklappen.
   Wischen funktioniert per CSS auch ohne JavaScript; JS ergänzt nur die Anzeige darunter. */
@media (max-width:760px){
  /* Wischleisten */
  #partner .p-raster,.ref-raster,.b-liste,.rollen,.minis,.planer .chips,.verwandt{
    display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding:4px var(--pad) 10px;scroll-padding:0 var(--pad)}
  #partner .p-raster::-webkit-scrollbar,.ref-raster::-webkit-scrollbar,.b-liste::-webkit-scrollbar,.rollen::-webkit-scrollbar,
  .minis::-webkit-scrollbar,.planer .chips::-webkit-scrollbar,.verwandt::-webkit-scrollbar,.vorteile-raster::-webkit-scrollbar{display:none}
  #partner .p-raster > *,.ref-raster > *,.rollen > *{flex:0 0 84%;scroll-snap-align:start}
  .b-liste > *{flex:0 0 80%;scroll-snap-align:start}
  .minis > *{flex:0 0 44%;scroll-snap-align:start}
  .planer .chips > *,.verwandt > *{flex:0 0 auto;scroll-snap-align:start}
  .verwandt a,.chip{white-space:nowrap}
  .ref-knopf img{aspect-ratio:4/3}
  /* Vorteile: vier kurze Punkte nebeneinander zum Wischen */
  .vorteile-raster{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding:0 var(--pad);padding-bottom:10px}
  .vorteile-raster > *{flex:0 0 76%;scroll-snap-align:start;background:var(--grau);border-radius:14px;padding:20px}
  .vorteile .wrap::before{display:none}
  /* in Leisten sofort sichtbar – das Einblenden von unten passt nicht zum seitlichen Wischen */
  .js :is(#partner .p-raster,.ref-raster,.rollen,.minis,.vorteile-raster) > *{opacity:1;transform:none;transition-delay:0s}
  /* Hover-Hub auf Touch abschalten */
  .p-karte:hover,.v-karte:hover,.rolle:hover,.mini:hover,.b-karte:hover{transform:none;box-shadow:none}

  /* Anzeige unter einer Leiste: Zähler, Balken, Pfeile */
  .wisch-nav{display:flex;align-items:center;gap:12px;margin-top:6px}
  .wisch-zahl{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--leise);min-width:3.4em}
  .wisch-spur{flex:1;height:3px;border-radius:2px;background:var(--linie);overflow:hidden}
  .wisch-daumen{display:block;height:100%;border-radius:2px;background:var(--gelb);transform-origin:0 50%;transition:transform .2s var(--ease),width .2s}
  .wisch-pfeil{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--linie);background:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:opacity .2s,border-color .2s}
  .wisch-pfeil:disabled{opacity:.35;cursor:default}
  .wisch-pfeil svg{width:18px;height:18px}
  .planer .wisch-pfeil{background:#fff;border-color:transparent}

  /* Vorhaben-Planer: Auswahl läuft beim Scrollen oben mit */
  .planer .chips{position:sticky;top:calc(var(--kopf) + env(safe-area-inset-top));z-index:5;background:var(--grau);margin-top:24px;padding-top:10px;padding-bottom:10px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent)}
  .chip{min-height:44px;padding:0 18px;font-size:15px}
  .pl-flaeche{margin-top:20px}
  .pl-links .mehr{display:inline-flex;margin-bottom:4px}
  .b-titel{margin-top:4px}
  .b-liste+.b-titel{margin-top:18px}

  /* Partner-Übersicht: kompakte Karten mit Logo links */
  .unten-luft .p-raster{grid-template-columns:minmax(0,1fr);gap:10px}
  .unten-luft .p-karte{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:stretch}
  .unten-luft .p-logo-box{height:auto;padding:12px;border-bottom:0;border-right:1px solid var(--linie)}
  .unten-luft .p-logo{max-height:52px}
  .unten-luft .p-txt{padding:14px 16px 14px}
  .unten-luft .p-name{font-size:18px;margin-top:4px}
  .unten-luft .p-name::after{content:" →";color:var(--grau-mittel);font-weight:500}
  .unten-luft .p-leist{margin-top:8px}
  .unten-luft .p-leist li{font-size:14px;margin-bottom:3px}
  .unten-luft .p-fuss{display:none}
  .unten-luft .seit{display:none}

  /* Vorhaben-Übersicht: flachere Bilder, weniger Scrollweg */
  .v-raster{gap:14px}
  .v-bild img,.v-bild .leer{aspect-ratio:2/1}
  .v-txt{padding:18px}
  .v-txt h2{font-size:20px}
  .v-txt p{margin:8px 0 12px;font-size:15px}
  .v-gewerke li{width:30px;height:30px}

  /* Abstände straffen */
  .abschnitt,.planer{padding:56px 0}
  .cta{padding:52px 0}
  .kopfzeile{margin-bottom:20px}
  .held{padding-top:20px}
  .zahlen{margin-top:28px}

  /* Fuß: Listen zum Aufklappen */
  .fuss-auf{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;font-size:16px;font-weight:600;color:var(--text);cursor:pointer;border-bottom:1px solid var(--linie)}
  .fuss-auf::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease)}
  .fuss-auf[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
  .fuss-auf:focus-visible{outline:3px solid var(--gelb);outline-offset:2px}
  .fuss h2:has(.fuss-auf){margin:0}
  .fuss-spalten{gap:0;padding:16px 0 24px}
  .fuss-zu > ul{display:none}
  .fuss-spalten > div > ul{padding:6px 0 10px}

  /* Aktionsleiste unten */
  .aktion-leiste{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;gap:10px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);box-shadow:0 -1px 0 var(--linie),0 -8px 24px rgba(44,45,48,.06);
    transform:translateY(110%);transition:transform .3s var(--ease)}
  .aktion-leiste::before{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px)}
  .aktion-leiste.an{transform:none}
  body.menue .aktion-leiste{transform:translateY(110%)}
  .aktion-leiste .btn{flex:1;min-height:50px;padding:0 12px;gap:8px}
  .aktion-leiste .btn svg{width:18px;height:18px;flex:none}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.aktion-leiste,.wisch-daumen{transition:none}}
@media (min-width:761px){.wisch-nav,.aktion-leiste{display:none}}
:where(.fuss-auf){all:unset;font:inherit;color:inherit}
@media (min-width:761px){.fuss-auf{pointer-events:none}}
@media (max-width:760px){.pl-flaeche{scroll-margin-top:calc(var(--kopf) + env(safe-area-inset-top) + 76px)}}
@media (max-width:760px){
  #partner .p-raster,.ref-raster,.b-liste,.rollen,.minis,.planer .chips,.verwandt,.vorteile-raster{flex-wrap:nowrap}
  .vorteile-raster + .wisch-nav{padding:0 var(--pad);max-width:var(--max);margin-left:auto;margin-right:auto}
}
@media (max-width:760px){.unten-luft .p-karte{grid-template-columns:116px minmax(0,1fr)}.unten-luft .p-logo-box{padding:10px}.unten-luft .p-logo{max-height:60px}}

/* ================================================================ Design 2026-10
   Ruhiger, klarer: Weiß – Grau – Nacht, Gelb nur als Akzent. Kontraste nach WCAG AA (Text ≥ 4,5:1, Bedienelemente ≥ 3:1 bzw. klar gefüllt). */

/* Knöpfe */
.btn{font-weight:600;letter-spacing:-.005em;transition:background .2s var(--ease),box-shadow .2s var(--ease),color .2s,transform .15s var(--ease)}
.btn:hover,.btn:not(.zweit):not(.weiss):hover{transform:none;box-shadow:none}
.btn:active,.chip:active{transform:scale(.98)}
.btn.zweit{background:var(--weiss);box-shadow:inset 0 0 0 1.5px var(--rand)}
.btn.zweit:hover{box-shadow:inset 0 0 0 1.5px var(--text)}
.mehr{text-decoration-thickness:2px;text-underline-offset:7px;transition:text-decoration-color .2s}

/* Kopf: feine Linie erst beim Scrollen, sonst nichts */
.kopf.linie{border-color:var(--linie)}

/* Startbereich */
.held h1{color:var(--text)}
.zahlen{border-top-color:var(--linie)}

/* Partner auf Grau – Karten ohne Rand, mit weichem Schatten */
#partner{background:var(--grau)}
#partner .p-karte{border:0;box-shadow:var(--schatten-s)}
.p-karte,.v-karte,.rolle,.mini,.weiter a{transition:box-shadow .25s var(--ease),border-color .25s var(--ease),opacity .6s var(--ease),transform .6s cubic-bezier(.2,.7,.2,1)}
.p-karte:hover,.v-karte:hover,.rolle:hover,.mini:hover,.b-karte:hover{transform:none}
#partner .p-karte:hover,.v-karte:hover,.unten-luft .p-karte:hover{box-shadow:var(--schatten-m);border-color:var(--linie)}
.p-karte:hover .p-logo{transform:none}
.p-logo-box{border-bottom-color:var(--linie)}
.p-fuss{border-top-color:var(--linie)}
.p-fuss span{color:var(--text)}
.seit{background:var(--gelb-zart);color:var(--text)}

/* Vorhaben-Planer und Gewerke: dunkle Bühne */
.planer{background:var(--nacht);color:var(--hell)}
.planer .t2,.planer h3,.planer .pl-links h3{color:var(--hell)}
.planer .dachzeile,.planer .intro,.planer .pl-links p,.planer .b-titel,.planer .pl-hinweis,.planer .gw{color:var(--hell-leise)}
.planer .pl-zahl{color:var(--hell)!important}
.planer .mehr{color:var(--hell)}
.planer .mehr:hover{text-decoration-color:var(--hell)}
.planer .chip{background:transparent;color:var(--hell);border-color:rgba(255,255,255,.2)}
.planer .chip:hover{border-color:rgba(255,255,255,.5)}
.planer .chip[aria-pressed="true"]{background:var(--gelb);border-color:var(--gelb);color:var(--text)}
.planer :focus-visible{outline-color:var(--gelb)}
.b-karte{background:var(--nacht-flaeche);border:1px solid rgba(255,255,255,.06);transition:border-color .25s var(--ease),opacity .6s var(--ease)}
.b-karte:hover{box-shadow:none;border-color:rgba(245,200,60,.45)}
.b-karte .pn{color:var(--hell)}
.b-karte p{color:var(--hell-leise)}
.rolle{background:var(--nacht-flaeche);border:1px solid rgba(255,255,255,.06)}
.rolle b{color:var(--hell)}
.rolle span{color:var(--hell-leise)}
.rolle:hover{border-color:rgba(245,200,60,.45);box-shadow:none}
.mini{border:0}
.mini:hover{box-shadow:0 0 0 2px var(--gelb)}

/* Referenzen: ohne Farbschleier, nur ruhiges Heranzoomen */
.ref-knopf{border-radius:12px;background:var(--grau)}
.ref-knopf::after{display:none}
.ref-knopf img{transition:transform .6s var(--ease)}
.ref-knopf:hover img{transform:scale(1.025)}
.ref figcaption b{color:var(--text)}
.lichtbox::backdrop{background:rgba(22,23,25,.9)}
.lb-zu{box-shadow:none;background:var(--weiss)}

/* Abschluss: Gelb mit dunklem Hauptknopf */
.cta h2{color:var(--text)}
.cta .btn:not(.zweit){background:var(--text);color:var(--weiss)}
.cta .btn:not(.zweit):hover{background:#000}
.cta .btn.zweit{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(29,30,33,.35)}
.cta .btn.zweit:hover{box-shadow:inset 0 0 0 1.5px var(--text)}
.cta :focus-visible{outline-color:var(--text)}

/* Fuß: dunkel */
.fuss{background:var(--nacht);color:var(--hell-leise)}
.fuss .marke{color:var(--hell)}
.fuss h2,.fuss-auf{color:var(--hell)}
.fuss-spalten .fuss-partner a{color:var(--hell)}
.fuss-partner a span{color:var(--hell-leise)}
.fuss a:hover{color:var(--weiss)}
.fuss-kopf,.fuss-unten{border-color:var(--nacht-linie)}
.fuss :focus-visible{outline-color:var(--gelb)}

/* Übersichten und Profile */
.v-karte,.unten-luft .p-karte,.weiter a{border-color:var(--linie)}
.v-gewerke li{background:var(--grau);color:var(--leise)}
.pp-logo{border-color:var(--linie)}
.verwandt a{border-color:var(--rand)}
.verwandt a:hover{border-color:var(--text)}
.pfad li+li::before{color:var(--grau-mittel)}

/* Einblenden: kürzer und dezenter */
.js :where(.kopfzeile,.vorteil,.p-karte,.ref,.rolle,.mini,.v-karte,.planer .dachzeile,.planer .t2,.planer > .wrap > .intro,
.cta h2,.cta .knoepfe,.pp-raster > div,.weiter a,.seitenkopf .intro,.seitenkopf .knoepfe,.v-held){
  transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 50ms)}
.js .held-text > *{animation-duration:.7s}
.js .held-bild img{animation:bildauf .9s cubic-bezier(.2,.7,.2,1) .1s both}
@keyframes bildauf{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}

/* Handy: Anpassungen an die neuen Flächen */
@media (max-width:760px){
  .planer .chips{background:var(--nacht)}
  .planer .wisch-zahl{color:var(--hell-leise)}
  .planer .wisch-spur{background:rgba(255,255,255,.14)}
  .planer .wisch-pfeil{background:var(--nacht-flaeche);color:var(--hell);border-color:transparent}
  #partner .wisch-pfeil{border-color:transparent;box-shadow:var(--schatten-s)}
  .wisch-pfeil{border-color:var(--rand)}
  .wisch-spur{background:var(--rand)}
  .vorteile-raster > *{background:var(--grau)}
  .aktion-leiste{box-shadow:0 -1px 0 var(--linie)}
}
@media (prefers-reduced-motion:reduce){.ref-knopf:hover img{transform:none}}

/* ================================================================ Handy, Runde 2
   Mehr Platz: Kopfzeile verschwindet beim Runterscrollen, Vorhaben-Auswahl läuft nicht mehr mit,
   unten nur noch ein kleiner schwebender Knopf. Leistenbreiten in vw statt % (Safari-Fehler: riesige Karten). */
@media (max-width:760px){
  :root{--kopf:60px}
  .kopf{transition:transform .3s var(--ease),border-color .3s}
  .kopf.weg{transform:translateY(-100%)}
  body.menue .kopf{transform:none}
  .logo{height:38px}

  .planer .chips{position:static;margin-top:22px;padding-top:4px;padding-bottom:6px}
  .pl-flaeche{scroll-margin-top:16px}

  /* feste Breiten in vw – Prozent-Breiten lassen Safari die Höhe mit falscher Breite berechnen */
  #partner .p-raster > *,.ref-raster > *,.rollen > *{flex:0 0 calc(100vw - 2 * var(--pad) - 44px);width:calc(100vw - 2 * var(--pad) - 44px)}
  .b-liste > *{flex:0 0 calc(100vw - 2 * var(--pad) - 64px);width:calc(100vw - 2 * var(--pad) - 64px)}
  .minis > *{flex:0 0 calc((100vw - 2 * var(--pad)) * .44);width:calc((100vw - 2 * var(--pad)) * .44)}
  .vorteile-raster > *{flex:0 0 calc(100vw - 2 * var(--pad) - 64px);width:calc(100vw - 2 * var(--pad) - 64px)}
  .pl-panel > *,.bedarf{min-width:0}

  /* Schnellzugriff: schwebende Pille rechts unten */
  .aktion-leiste{left:auto;right:var(--pad);bottom:calc(14px + env(safe-area-inset-bottom));padding:0;gap:8px;background:none;box-shadow:none;transform:translateY(calc(100% + 30px));opacity:0;transition:transform .3s var(--ease),opacity .3s}
  .aktion-leiste::before{display:none}
  .aktion-leiste.an{transform:none;opacity:1}
  .aktion-leiste .btn{flex:none;min-height:44px;padding:0 18px;font-size:15px;box-shadow:0 6px 18px rgba(22,23,25,.22)}
  .aktion-leiste .btn.zweit{box-shadow:inset 0 0 0 1.5px var(--rand),0 6px 18px rgba(22,23,25,.16)}
  .aktion-leiste .btn.rund{width:48px;min-height:48px;padding:0;border-radius:50%}
  .aktion-leiste .btn.rund span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .aktion-leiste .btn.rund svg{width:20px;height:20px}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.kopf{transition:none}}