/* ==========================================================================
   ERAT Ausbau + Fassade GmbH – Entwurf "neu"
   Ein Stil-Dialekt: Space Grotesk, Sentence-Case-Headlines mit Satzpunkt,
   Labels in getracktem Uppercase (12-13 px), Haarlinien als Raster.
   Gliederung: 1 Fonts · 2 Tokens · 3 Basis · 4 Typo · 5 Layout · 6 Buttons ·
   7 Header/Menue · 8 Hero · 9 Startseiten-Sektionen · 10 CTA/Footer · 11 Dock ·
   12 Unterseiten · 13 Foerder-Rechner/FAQ · 14 Rechtstexte · 15 Motion
   ========================================================================== */

/* 1 Fonts (selbst gehostet) -------------------------------------------- */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/space-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/space-grotesk-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/space-grotesk-latin-700-normal.woff2") format("woff2")}

/* Metrik-Fallback gegen Layout-Sprung beim Font-Swap (Näherungswerte) */
@font-face{font-family:"Space Grotesk Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");size-adjust:103%;ascent-override:94%;descent-override:26%;line-gap-override:0%}

/* 2 Tokens --------------------------------------------------------------- */
:root{
  --bg:#f2efe9;
  --ink:rgba(10,9,7,.88);
  --ink-2:rgba(10,9,7,.6);          /* sekundaer; .6 statt .55, damit AA (>= 4,5:1) sicher erreicht wird */
  --line:rgba(0,0,0,.08);
  --line-strong:rgba(0,0,0,.18);
  --tint:rgba(10,9,7,.035);
  --red:#D7282F;                     /* Flaechen, Balken, grosse Satzpunkte */
  --red-text:#B81F25;                /* kleiner roter Text (5,6:1 auf Creme) */
  --black:#141414;
  --on-dark:rgba(242,239,233,.94);
  --on-dark-2:rgba(242,239,233,.7);
  --line-dark:rgba(242,239,233,.16);

  --font:"Space Grotesk","Space Grotesk Fallback","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Groessenklassen (einheitlich): <=479 | 480-767 | 768-1023 | 1024-1279 | 1280-1599 | >=1600.
     JS-Grenzen: 768/769 (Menue, mobileMax, Projekt-Pin) und 1024 (Anatomie-Pin) - nicht verschieben. */
  /* Layout: --gutter wird NUR hier definiert (Breakpoints unten). --header-h bleibt eine px-Zahl (app.js liest sie per parseInt). */
  --gutter:20px;
  --maxw:1440px;
  --edge-x:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));   /* Abstand zum Viewport-Rand fuer Elemente, die am Viewport ausgerichtet sind (Hero-Intro, Karten, Phase) */
  --header-h:72px;
  --logo-h:48px;

  /* Typo-Skala */
  --fs-0:clamp(.8125rem,.79rem + .1vw,.875rem);     /* Label, Kleintext */
  --fs-1:clamp(.9375rem,.91rem + .15vw,1.0625rem);  /* Fliesstext klein, Listen */
  --fs-2:clamp(1.0625rem,1rem + .3vw,1.25rem);      /* Lead, Fliesstext gross */
  --fs-3:clamp(1.25rem,1.1rem + .6vw,1.75rem);      /* Kartentitel, H3 */
  --fs-4:clamp(1.5rem,1.2rem + 1.2vw,2.5rem);       /* H-md */
  --fs-5:clamp(2rem,1.2rem + 3vw,4.5rem);           /* H-lg / H2 */
  --fs-6:clamp(2.5rem,1rem + 6.6vw,6.5rem);         /* H-xl (Start-H1) */

  /* Abstands-Skala */
  --sp-1:.25rem;
  --sp-2:.5rem;
  --sp-3:clamp(.75rem,.6rem + .5vw,1rem);
  --sp-4:clamp(1rem,.8rem + .9vw,1.5rem);
  --sp-5:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);
  --sp-6:clamp(2rem,1.4rem + 2.6vw,3.5rem);
  --sp-7:clamp(3.5rem,8vw,7rem);
  --sp-8:clamp(4.5rem,10vw,8.75rem);
  --section-y:var(--sp-8);                           /* vertikaler Abstand einer Sektion */
}
@media (min-width:480px){:root{--gutter:28px}}
@media (min-width:769px){:root{--gutter:48px;--header-h:84px;--logo-h:58px}}   /* 768 selbst gehoert (wie in app.js) noch zur Mobil-Klasse */
@media (min-width:1024px){:root{--gutter:56px}}
@media (min-width:1280px){:root{--gutter:64px;--logo-h:64px}}
@media (min-width:1600px){:root{--maxw:1600px}}
@media (max-height:500px){:root{--header-h:56px;--logo-h:36px}}   /* Querformat-Phones: Header nicht 20 % der Hoehe */

/* 3 Basis ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 56px);scroll-padding-bottom:72px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
/* <picture> (WebP-Quellen) bleibt layout-neutral: img verhaelt sich wie direktes Kind von figure */
.proj__photo picture,.story figure picture{display:contents}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.1em}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em}
ul,ol{margin:0;padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
summary{cursor:pointer}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.on-dark :focus-visible,.footer :focus-visible{outline-color:#fff}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:fixed;left:var(--gutter);top:-80px;z-index:300;background:var(--black);color:#fff;padding:14px 20px;font-size:.9375rem;font-weight:600;transition:top .2s}
.skip-link:focus{top:12px;outline-color:#fff}
main:focus,.hero:focus{outline:none}

/* 4 Typografie ----------------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:.8125rem;line-height:1.3;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red-text);margin:0}
.eyebrow--line::before{content:"";width:28px;height:1px;background:currentColor}
.eyebrow--mute{color:var(--ink-2)}
/* H1-Stufenleiter: Start-Hero bis 104 px (--fs-6), Unterseiten-H1 <= 88 px, .phero--sm <= 72 px, H2 (.h-lg) <= 72 px */
.h-xl{font-size:min(var(--fs-6),5.5rem);line-height:1;letter-spacing:-.035em;font-weight:700}
.h-lg{font-size:var(--fs-5);line-height:1.04;letter-spacing:-.03em;font-weight:700}
.h-md{font-size:var(--fs-4);line-height:1.12;letter-spacing:-.025em;font-weight:600}
/* Ueberschriften: nie automatisch trennen ("Pro-jekt"), nur im Notfall umbrechen; ausgewogene Zeilen */
.h-xl,.h-lg,.h-md,.hero__title,.phero h1{overflow-wrap:break-word;hyphens:manual;text-wrap:balance}
h2,h3{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
.dot{color:var(--red)}
.lead{font-size:var(--fs-2);line-height:1.65;color:var(--ink-2);max-width:54ch}
.muted{color:var(--ink-2)}
.small{font-size:.875rem;line-height:1.6;color:var(--ink-2)}
strong{font-weight:600}

/* 5 Layout --------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--line{border-top:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4) var(--sp-6);padding-bottom:clamp(28px,4vw,48px);border-bottom:1px solid var(--line)}
.sec-head .h-lg{max-width:16ch;text-align:right}
@media (max-width:768px){.sec-head{flex-direction:column;align-items:flex-start}.sec-head .h-lg{text-align:left}}
/* Eyebrow und Titel nicht ~700 px voneinander trennen: ab 1024 Titel direkt neben dem Eyebrow (beide links), Kante bleibt die Haarlinie */
@media (min-width:1024px){.sec-head{justify-content:flex-start;align-items:baseline;gap:var(--sp-4) var(--sp-7)}.sec-head > .eyebrow{flex:0 0 clamp(150px,16vw,220px)}.sec-head .h-lg{text-align:left;max-width:18ch}}

/* 6 Buttons / Links ------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:15px 30px;border:1px solid transparent;border-radius:0;font-family:var(--font);font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;text-align:center;transition:background-color .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.btn svg{width:16px;height:16px;flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:#c0222a;transform:translateY(-1px)}
.btn--black{background:var(--black);color:#fff}
.btn--black:hover{background:#000;transform:translateY(-1px)}
.btn--outline{border-color:rgba(10,9,7,.55);color:var(--ink);background:transparent}
.btn--outline:hover{border-color:var(--ink);background:var(--tint)}
.btn--block{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding-block:6px;transition:gap .25s var(--ease),color .2s}
.link-arrow svg{width:16px;height:16px}
.link-arrow:hover{gap:14px;color:var(--red-text)}

/* 7 Header / Menue ------------------------------------------------------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:110;height:var(--header-h);border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s}
.site-header.is-glass{background:rgba(242,239,233,.84);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);border-bottom-color:var(--line)}
.site-header__inner{height:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:block;flex:none;line-height:0}
.brand img{height:var(--logo-h);width:auto}
.nav ul{display:flex;align-items:center;gap:clamp(20px,2.8vw,40px)}
.nav a{position:relative;display:inline-block;padding:12px 0;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.burger{display:none;position:relative;width:48px;height:48px;margin-right:-10px;background:none;border:0;padding:0}
.burger span{position:absolute;left:11px;width:26px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s,width .3s var(--ease)}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:23px;width:18px}
.burger span:nth-child(3){top:30px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-open .site-header{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}

.menu{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;justify-content:flex-start;padding:calc(var(--header-h) + 16px) var(--gutter) 32px;background:var(--bg);opacity:0;visibility:hidden;transform:translateY(-14px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s;overflow-y:auto}
.menu.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu ul{display:grid;gap:4px}
.menu__link{display:block;padding:12px 0;font-size:clamp(1.75rem,8vw,2.5rem);font-weight:600;letter-spacing:-.02em;line-height:1.15;border-bottom:1px solid var(--line)}
.menu__link[aria-current="page"]{color:var(--red-text)}
.menu__contact{margin-top:32px;font-size:1rem;color:var(--ink-2);display:grid;gap:2px;justify-items:start}
.menu__contact a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;padding:4px 0}

@media (max-width:768px){
  .js .nav{display:none}
  .js .burger{display:block}
  .site-header{background:rgba(242,239,233,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
}
@media (min-width:769px){.menu{display:none}}
html:not(.js) .site-header{position:static;height:auto}
html:not(.js) .site-header__inner{flex-wrap:wrap;padding-block:12px}
html:not(.js) .nav ul{flex-wrap:wrap;gap:4px 20px}

/* 7b Ladebildschirm --------------------------------------------------------
   Markup: <div class="loader" aria-hidden="true"> direkt hinter <body>. Sichtbar NUR, wenn ein Inline-Skript im <head> html.is-loading setzt
   (einmal pro Sitzung); ohne JS bleibt das Overlay display:none -> nichts verdeckt. app.js befuellt den Balken (transform) und setzt
   html.is-leaving (weiches Ausblenden), danach werden beide Klassen entfernt. Notfreigabe: Inline-Skript nach 4,2 s. */
.loader{display:none}
html.is-loading .loader{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,4.5vh,40px);padding:var(--gutter);background:var(--bg);opacity:1;visibility:visible;transition:opacity .6s var(--ease),visibility 0s linear .6s}
html.is-loading.is-leaving .loader{opacity:0;visibility:hidden;pointer-events:none}
.loader__logo{width:clamp(180px,48vw,320px);height:auto;max-width:100%}
.loader__bar{width:clamp(160px,42vw,260px);height:3px;background:var(--line-strong);overflow:hidden}
.loader__bar span{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
@media (max-height:500px){.loader__logo{width:clamp(130px,26vw,200px)}}

/* 8 Hero ----------------------------------------------------------------- */
/* Basis = statische Variante (ohne JS / reduced-motion / Save-Data):
   Intro, Poster-Block, vier Karten im Raster. */
.hero{position:relative}
.hero__sticky{position:relative;display:flex;flex-direction:column;padding-top:var(--header-h)}
.hero__intro{order:1;width:100%;max-width:var(--maxw);margin-inline:auto;padding:clamp(40px,8vw,104px) var(--gutter) clamp(28px,4vw,56px)}
.hero__intro .eyebrow{margin-bottom:clamp(18px,2.4vw,28px)}
.hero__title{font-size:clamp(2.75rem,7.2vw,6.75rem);line-height:.98;letter-spacing:-.04em;font-weight:700;max-width:11ch}
.hero__sub{margin:clamp(18px,2.2vw,28px) 0 0;max-width:46ch;font-size:clamp(1.0625rem,1.45vw,1.1875rem);line-height:1.65;color:var(--ink)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}
.hero__media{order:2;position:relative;width:100%;aspect-ratio:16/9;max-height:72vh;overflow:hidden;
  --edge:radial-gradient(ellipse 80% 86% at 50% 50%,rgba(242,239,233,0) 52%,var(--bg) 100%)}
/* weicher Auslauf in den Creme-Hintergrund als Overlay (statt mask-image auf dem sich ändernden Canvas) */
.hero__media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--edge)}
.hero__poster,.hero__canvas{position:absolute;inset:0;width:100%;height:100%}
.hero__poster{display:block}
.hero__poster img{width:100%;height:100%;object-fit:cover}
img.hero__poster{object-fit:cover}
.hero__poster--start{display:none}
html.scrub .hero__poster--start{display:block}
html.scrub .hero__poster--static{display:none}
html.scrub.poster-fallback .hero__poster--start{display:none}
html.scrub.poster-fallback .hero__poster--static{display:block}
.hero__canvas{opacity:0;transition:opacity .5s}
.hero__canvas.is-ready{opacity:1}
.hero__cards{order:3;display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--maxw);width:100%;margin-inline:auto;padding-inline:var(--gutter)}
.hero__cards-inner{display:contents}
.hcard{padding:28px 24px 32px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.hcard:last-child{border-right:1px solid var(--line)}
.hcard__tag{display:block;margin-bottom:14px}
.hcard__title{font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.15;letter-spacing:-.025em;font-weight:600;margin-bottom:12px;overflow-wrap:break-word;hyphens:auto}
.hcard__lead{font-weight:600;color:var(--ink);margin-bottom:8px;font-size:1rem;line-height:1.5}
.hcard__text{font-size:.9375rem;line-height:1.65;color:var(--ink-2);margin-bottom:14px}
.hcard__list{margin-bottom:16px}
.hcard__list li{position:relative;padding:9px 0 9px 18px;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.45}
.hcard__list li::before{content:"";position:absolute;left:0;top:1.05em;width:5px;height:5px;background:var(--red)}
.hcard__links{display:flex;flex-wrap:wrap;gap:4px 24px}
.hero__hint,.hero__phase,.hero__bar,.hero__variants{display:none}
@media (max-width:1023px){.hero__cards{grid-template-columns:repeat(2,1fr)}.hcard:nth-child(2n){border-right:1px solid var(--line)}}
@media (max-width:600px){.hero__cards{grid-template-columns:1fr}.hcard{border-right:1px solid var(--line)}}

/* Scrub-Variante (Klasse html.scrub wird im <head> gesetzt, wenn keine reduzierte Bewegung / kein Save-Data) */
html.scrub .hero{height:500vh;height:500svh}
html.scrub .hero__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
html.scrub .hero__phase,html.scrub .hero__bar{display:block}
html.scrub .hero__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line);z-index:5}
html.scrub .hero__bar span{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
html.scrub .hero__phase{pointer-events:none;position:absolute;z-index:5;margin:0;font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .5s}
html.scrub .hero__phase b{color:var(--red-text);font-weight:600;margin-right:10px}
html.scrub .hero__hint{pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px;position:absolute;z-index:5;left:50%;bottom:36px;transform:translateX(-50%);font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);transition:opacity .5s}
html.scrub .hero__hint::after{content:"";width:1px;height:30px;background:var(--ink);opacity:.6;transform-origin:top;animation:hint 2s ease-in-out infinite}
@keyframes hint{0%,100%{transform:scaleY(.7);opacity:.35}50%{transform:scaleY(1.15);opacity:.9}}
html.scrub .hero__canvas,html.scrub .hero__poster{will-change:auto}

/* Scrub, Overlay-Layout: Desktop/Tablet quer (>= 769 px UND Seitenverhaeltnis >= 5:4).
   Alles, was nicht hierunter faellt (Phones, Hochformat-Tablets), nutzt das gestapelte Layout weiter unten.
   Intro/Karten/Phase richten sich an --edge-x aus (bei >= 1600 px an der 1600-px-Inhaltskante statt am Viewport-Rand). */
@media (min-width:769px) and (min-aspect-ratio:5/4){
  html.scrub .hero__sticky{--card-w:min(390px,34vw);display:block;padding-top:0}
  html.scrub .hero__media{position:absolute;inset:0;aspect-ratio:auto;max-height:none;
    --edge:linear-gradient(90deg,var(--bg) 0,rgba(242,239,233,.45) 22%,rgba(242,239,233,0) 40%),radial-gradient(ellipse 76% 86% at 63% 52%,rgba(242,239,233,0) 46%,var(--bg) 100%)}
  html.scrub .hero__intro{position:absolute;z-index:4;left:0;top:0;bottom:0;width:min(calc(var(--edge-x) + 720px),62vw);max-width:none;margin:0;padding:calc(var(--header-h) + 24px) 0 80px var(--edge-x);display:flex;flex-direction:column;justify-content:center}
  html.scrub .hero__title{font-size:clamp(2.75rem,6.4vw,6.25rem)}
  html.scrub .hero__intro::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(242,239,233,.94) 72%,transparent)}
  html.scrub .hero__cards{position:absolute;z-index:4;left:var(--edge-x);bottom:clamp(160px,17vh,176px);width:var(--card-w);max-width:none;margin:0;padding:0;display:block;pointer-events:none}
  html.scrub .hcard{position:absolute;left:0;bottom:0;width:100%;max-height:calc(100svh - var(--header-h) - 190px);overflow:auto;padding:26px 26px 24px;background:rgba(242,239,233,.94);border:1px solid var(--line-strong);border-left:2px solid var(--red);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
  html.scrub .hcard.is-active{opacity:1;transform:none;pointer-events:auto;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  html.scrub .hero__phase{left:var(--edge-x);bottom:30px}
  /* "Scrollen & bauen" als Pille: auf Kran/Zaun sonst kontrastarm */
  html.scrub .hero__hint{padding:8px 14px 6px;background:rgba(242,239,233,.92)}
}
@media (min-width:769px) and (min-aspect-ratio:5/4) and (max-height:860px){
  html.scrub .hcard{padding:20px 22px 18px}
  html.scrub .hcard__title{font-size:1.25rem}
  html.scrub .hcard__text{font-size:.875rem;margin-bottom:10px}
  html.scrub .hcard__list li{padding-block:6px;font-size:.875rem}
  html.scrub .hero__cards{bottom:160px}
}
/* Grosse Monitore: Hero-Schrift und Karten mitskalieren (sonst wirkt der Hero auf 1920/2560 verloren) */
@media (min-width:1920px) and (min-aspect-ratio:5/4){
  html.scrub .hero__sticky{--card-w:460px}
  html.scrub .hero__title{font-size:clamp(6.25rem,5.6vw,8rem)}
  html.scrub .hero__sub{font-size:1.3125rem;max-width:48ch}
  html.scrub .hero__intro .eyebrow{font-size:.9375rem}
  html.scrub .hcard{padding:32px 32px 28px}
  html.scrub .hcard__title{font-size:1.75rem}
  html.scrub .hcard__lead{font-size:1.125rem}
  html.scrub .hcard__text{font-size:1.0625rem}
  html.scrub .hcard__list li{font-size:1.0625rem}
  html.scrub .hero__phase,html.scrub .hero__hint{font-size:.9375rem}
}
@media (min-width:2400px) and (min-aspect-ratio:5/4){
  html.scrub .hero__sticky{--card-w:540px}
  html.scrub .hero__title{font-size:clamp(8rem,5.2vw,9.5rem)}
  html.scrub .hero__sub{font-size:1.5rem}
  html.scrub .hcard{padding:38px 38px 34px}
  html.scrub .hcard__title{font-size:2rem}
  html.scrub .hcard__text,html.scrub .hcard__list li{font-size:1.1875rem}
}

/* Scrub, gestapeltes Layout (Phones und Hochformat-Tablets = Komplement des Overlay-Layouts):
   Bild oben, Karten darunter (alle in einer Grid-Zelle, hoechste bestimmt die Hoehe).
   Bei geringer Hoehe werden Texte nur visuell ausgeblendet (sr-only-Muster, bleiben im Accessibility-Tree), damit Karte, Phase und Konfigurator nie kollidieren. */
@media not all and (min-width:769px) and (min-aspect-ratio:5/4){
  html.scrub .hero__sticky{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);padding-top:var(--header-h)}
  html.scrub .hero__media{grid-row:1;height:min(56.25vw,38svh);aspect-ratio:auto;max-height:none;
    --edge:radial-gradient(ellipse 90% 92% at 50% 46%,rgba(242,239,233,0) 56%,var(--bg) 100%)}
  html.scrub .hero__intro,html.scrub .hero__cards{grid-row:2;grid-column:1;padding:14px var(--gutter) 96px;max-width:none;overflow:visible}
  html.scrub .hero__intro{margin:0}
  html.scrub .hero__title{font-size:clamp(2.25rem,11vw,3.25rem);max-width:12ch}
  html.scrub .hero__sub{font-size:1rem;margin-top:14px}
  html.scrub .hero__actions{margin-top:18px}
  html.scrub .hero__actions .btn{flex:1 1 160px}
  html.scrub .hero__cards{display:grid;pointer-events:none}
  html.scrub .hcard{grid-area:1/1;align-self:start;padding:6px 0 0;border:0;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  html.scrub .hcard.is-active{opacity:1;transform:none;pointer-events:auto}
  html.scrub .hcard__list li:nth-child(n+3){display:none}
  html.scrub .hero__phase{left:var(--gutter);bottom:22px}
  html.scrub .hero__hint{display:none}
  /* Niedrige Phones (<= 700 px): zweiter CTA bliebe sonst unter dem Falz, Kartentext kollidiert mit der Phasenanzeige */
  @media (max-height:700px){
    html.scrub .hero__sub,html.scrub .hcard__text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
    html.scrub .hero__intro,html.scrub .hero__cards{padding-bottom:72px}
  }
  @media (max-height:600px){
    html.scrub .hcard__links{gap:0 16px}
    html.scrub .hcard__links .link-arrow{letter-spacing:.06em;gap:6px}
    html.scrub .hcard__lead,html.scrub .hcard__tag{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  }
  /* Hochformat-Tablets (z. B. 768x1024, 820x1180): Bild deutlich hoeher, groessere Schrift, keine leere Flaeche unter den Karten */
  @media (min-width:600px) and (min-height:800px){
    html.scrub .hero__media{height:46svh}
    html.scrub .hero__intro,html.scrub .hero__cards{padding-top:var(--sp-5)}
    html.scrub .hero__title{font-size:clamp(3.25rem,8.4vw,5.25rem);max-width:12ch}
    html.scrub .hero__sub{font-size:1.1875rem;margin-top:var(--sp-3);max-width:48ch}
    html.scrub .hero__actions{margin-top:var(--sp-4)}
    html.scrub .hero__actions .btn{flex:0 0 auto}
    html.scrub .hcard__title{font-size:1.875rem}
    html.scrub .hcard__lead{font-size:1.1875rem}
    html.scrub .hcard{max-width:640px}
    html.scrub .hcard__text{font-size:1.0625rem}
    html.scrub .hcard__list li{font-size:1.0625rem}
    html.scrub .hero__phase{bottom:28px}
  }
}

/* 9 Startseiten-Sektionen ------------------------------------------------- */
/* Leistungen */
/* Kachelraster (Bildkacheln, siehe Abschnitt A im Optik-Paket): >= 1600: 5 Spalten | 1024-1599: 3 + 2 (6er-Raster) | 769-1023: 2 Spalten | <= 768: Snap-Reihe */
.lgrid{display:grid;grid-template-columns:repeat(5,1fr);margin-top:clamp(28px,4vw,48px);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.lcard{--px:26px;display:flex;flex-direction:column;padding:0 var(--px) 40px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background-color .25s}
.lcard:hover{background:var(--tint)}
.lcard__num{font-size:.8125rem;font-weight:600;letter-spacing:.2em;color:var(--ink-2);margin-bottom:clamp(28px,4vw,56px)}
.lcard__title{font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.15;letter-spacing:-.02em;font-weight:600;margin-bottom:14px;hyphens:auto}
.lcard__text{flex:1;font-size:.9375rem;line-height:1.65;color:var(--ink-2);margin-bottom:22px}
.lcard__tags{margin-top:auto;margin-bottom:22px}   /* Listen enden auf gleicher Hoehe (Text fuellt, Liste klebt unten) */
.lcard__tags li{padding:9px 0;border-top:1px solid var(--line);font-size:.875rem;line-height:1.4}
.lcard .link-arrow{align-self:flex-start;padding-block:6px}
.lfoot{display:flex;justify-content:space-between;align-items:center;gap:20px 40px;flex-wrap:wrap;padding-top:clamp(28px,4vw,44px)}
.lfoot p{margin:0}
@media (min-width:1024px) and (max-width:1599px){
  .lgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lcard{grid-column:span 2}
  .lcard:nth-child(n+4){grid-column:span 3}
  .lcard:nth-child(n+4) .lcard__img{aspect-ratio:16/9}
}

/* Ueber-Teaser */
.about{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.about__text{padding:clamp(56px,8vw,112px) clamp(24px,5vw,72px) clamp(56px,8vw,112px) 0}
.about__text .h-lg{margin:clamp(20px,2.6vw,32px) 0 clamp(20px,2.6vw,28px);max-width:12ch}
.about__text p{max-width:46ch;color:var(--ink-2)}
.about__text .btn{margin-top:12px}
@media (max-width:768px){
  .about{grid-template-columns:1fr}
  .about__text{padding:56px 0 40px}
}

/* Projekte-Teaser: Fuss-Button (die Kacheln selbst: Abschnitt D, .refs/.rtile) */
.pfoot{padding-top:clamp(24px,3vw,40px)}

/* 10 CTA / Footer --------------------------------------------------------- */
.cta{position:relative;overflow:hidden;border-top:1px solid var(--line);padding:clamp(80px,12vw,152px) var(--gutter);text-align:center}
.cta::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000 20%,transparent 100%);mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000 20%,transparent 100%);pointer-events:none}
.cta__inner{position:relative;max-width:820px;margin-inline:auto}
.cta .h-lg{margin:clamp(18px,2.4vw,28px) 0}
.cta p{max-width:44ch;margin:0 auto clamp(28px,3.4vw,40px);color:var(--ink-2)}
.cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
@media (max-width:600px){.cta__actions{flex-direction:column;align-items:stretch}}
.cta .eyebrow--line::after{content:"";width:28px;height:1px;background:currentColor}   /* zentrierter Eyebrow: Strich beidseitig, sonst wirkt er nach rechts versetzt */

.footer{background:var(--black);color:var(--on-dark);padding:clamp(56px,7vw,96px) 0 28px}
.footer a{color:var(--on-dark-2);transition:color .2s}
.footer a:hover{color:#fff}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px clamp(24px,4vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.footer__brand img{height:clamp(64px,5.6vw,84px);width:auto;margin-bottom:20px}
.footer__brand p{max-width:34ch;color:var(--on-dark-2);font-size:.9375rem}
.footer h2{font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark);margin-bottom:12px}
.footer li a,.footer address a,.footer__bottom a{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem}   /* Tap-Ziele >= 44 px */
.footer__bottom a{font-size:.875rem}
.footer address{font-style:normal;color:var(--on-dark-2);font-size:.9375rem;line-height:1.6}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;padding-top:24px;border-top:1px solid var(--line-dark);font-size:.875rem;color:var(--on-dark-2)}
.footer__bottom p{margin:0}
.footer__bottom ul{display:flex;gap:24px}
/* <= 900: Marke ueber voller Breite, darunter Navigation | Leistungen, Kontakt volle Breite (auch auf 320-px-Phones zweispaltig, damit der Footer kurz bleibt) */
@media (max-width:900px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}.footer__brand,.footer__grid > div:last-child{grid-column:1/-1}}
@media (max-width:479px){.footer__grid{padding-bottom:32px}}

/* 11 Kontakt-Dock ---------------------------------------------------------- */
.dock{position:fixed;right:max(2px,calc((var(--gutter) - 44px) / 2));bottom:20px;z-index:90;display:flex;flex-direction:column;gap:8px}   /* mittig im rechten Seitenrand: liegt ausserhalb der Inhaltsspalte */
.dock a{position:relative;display:grid;place-items:center;width:44px;height:44px;background:var(--black);color:#fff;border:1px solid rgba(255,255,255,.14);transition:background-color .25s,transform .25s var(--ease)}
.dock a.dock--call{background:var(--red)}
.dock a:hover{transform:translateY(-2px)}
.dock a.dock--mail:hover{background:#000}
.dock svg{width:20px;height:20px}
.dock a:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 2px var(--black)}
@media (max-height:500px){.dock{display:none}}
.dock__tip{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(6px,-50%);padding:9px 14px;background:var(--black);color:#fff;font-size:.8125rem;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.dock a:hover .dock__tip,.dock a:focus-visible .dock__tip{opacity:1;transform:translate(0,-50%)}
.menu-open .dock{display:none}
.dock__lbl{display:none}
/* Mobil (<=768 px): schmale Leiste ueber die volle Breite, zwei gleich grosse Buttons */
@media (max-width:768px){
  .dock__tip{display:none}
  .dock{left:0;right:0;bottom:0;flex-direction:row;gap:0;padding-bottom:env(safe-area-inset-bottom);background:var(--black);transition:transform .3s var(--ease),visibility 0s}
  .dock a{flex:1 1 50%;display:flex;align-items:center;justify-content:center;gap:10px;width:auto;height:52px;border:0;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1}
  .dock a:hover{transform:none}
  .dock a.dock--mail{border-left:1px solid rgba(255,255,255,.14)}
  .dock a:focus-visible{outline-offset:-4px;box-shadow:none}
  .dock__lbl{display:inline}
  .dock.is-away{transform:translateY(100%);visibility:hidden;pointer-events:none;transition:transform .3s var(--ease),visibility 0s .3s}
  html.has-dock .footer{padding-bottom:calc(28px + 52px + env(safe-area-inset-bottom))}   /* Platz fuer die Leiste unter dem letzten Inhalt (Footer ist ueberall das letzte Element) */
}
@media (max-width:768px) and (max-height:500px){html.has-dock .footer{padding-bottom:28px}}
@media (max-width:768px) and (prefers-reduced-motion:reduce){.dock,.dock.is-away{transition:none}}

/* 12 Unterseiten ----------------------------------------------------------- */
.page-sub main{padding-top:var(--header-h)}
.crumb{border-bottom:1px solid var(--line)}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;padding-block:2px;font-size:.8125rem;color:var(--ink-2)}
.crumb li{display:flex;align-items:center}
.crumb li+li::before{content:"/";margin-right:10px;color:rgba(10,9,7,.4)}
.crumb a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px}
.crumb a:hover{color:var(--ink)}
.crumb [aria-current]{color:var(--ink);font-weight:600}
.phero{padding:clamp(48px,7vw,112px) 0 clamp(48px,7vw,112px);border-bottom:1px solid var(--line)}
.phero--sm{padding:clamp(36px,5vw,80px) 0 clamp(32px,4.5vw,64px)}
.phero--sm h1{font-size:min(var(--fs-6),4.5rem)}
.phero .eyebrow{margin-bottom:clamp(20px,2.6vw,32px)}
.phero h1{max-width:12ch}
.phero .lead{margin:clamp(24px,3vw,40px) 0 0}
.subnav{position:sticky;top:var(--header-h);z-index:40;background:rgba(242,239,233,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.subnav ul{display:flex;gap:clamp(20px,3vw,40px);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding:16px 0 14px;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.subnav a span{color:var(--red-text)}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--red)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.stats > div{padding:clamp(28px,4vw,52px) clamp(16px,2.4vw,32px);border-right:1px solid var(--line)}
.stats > div:first-child{padding-left:0}
.stats > div:last-child{border-right:0}
.stats b{display:block;font-size:clamp(2.25rem,5vw,3.75rem);line-height:1;letter-spacing:-.03em;font-weight:700;margin-bottom:12px}
.stats span{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:768px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats > div:nth-child(2){border-right:0}
  .stats > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .stats > div:nth-child(odd){padding-left:0}
  .stats > div:nth-child(even){padding-left:clamp(16px,4vw,32px)}
}
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);padding-block:var(--sp-7);border-bottom:1px solid var(--line)}
.svc .sublist li:last-child{border-bottom:0}   /* der Block hat schon eine Abschlusslinie: keine zweite */
.svc__num{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.2em;color:var(--red-text);margin-bottom:20px}
.svc .h-lg{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:clamp(18px,2.2vw,28px)}
.svc__text p{color:var(--ink-2);max-width:52ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.tags li{padding:6px 12px;border:1px solid var(--line-strong);border-radius:2px;font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.sublist li{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--line)}
.sublist li:last-child{border-bottom:1px solid var(--line)}
.sublist li::before{content:"\2014";flex:none;color:var(--red-text);font-weight:600}
.sublist strong{display:block;font-size:1.125rem;line-height:1.3;margin-bottom:2px}
.sublist span{display:block;font-size:.9375rem;line-height:1.55;color:var(--ink-2)}
@media (min-width:901px){.svc--rev .svc__text{order:2}}
@media (max-width:900px){.svc{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:clamp(32px,8vw,56px)}}
.steps{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);border-left:1px solid var(--line);margin-top:clamp(28px,4vw,48px)}
.step{padding:28px 24px 36px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.step__no{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.2em;color:var(--red-text);margin-bottom:clamp(24px,3vw,48px)}
.step h3{font-size:1.25rem;line-height:1.2;margin-bottom:10px}
.step p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
@media (max-width:1100px){.steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.steps--5{grid-template-columns:repeat(2,1fr)}.steps--5 .step:last-child{grid-column:1/-1}}
@media (max-width:640px){.steps,.steps--5{grid-template-columns:minmax(0,1fr);border-left:0;margin-top:0;border-top:0!important}.step{border-right:0;padding-inline:0}.steps > .step:first-child{border-top:0}}   /* !important: leistungen/ueber-uns setzen border-top inline; direkt unter der Sektions-Linie waere es doppelt */

/* 13 Foerder-Rechner / FAQ -------------------------------------------------- */
.foerder{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border:1px solid var(--line);margin-top:clamp(28px,4vw,48px)}
.foerder__controls{padding:clamp(24px,3.4vw,48px);display:grid;gap:28px;align-content:start;border-right:1px solid var(--line)}
.field label,.field .field__label{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}
.range-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.range-row .range-out{flex:none;min-width:7.5ch;text-align:right;font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
input[type=range]{--fill:50%;-webkit-appearance:none;appearance:none;flex:1 1 160px;min-width:0;height:44px;background:transparent;cursor:pointer}   /* 44 px Hoehe = Tap-Ziel */
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--red) var(--fill),rgba(10,9,7,.45) var(--fill))}
input[type=range]::-moz-range-track{height:2px;background:rgba(10,9,7,.45)}
input[type=range]::-moz-range-progress{height:2px;background:var(--red)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;background:var(--black);border:0;border-radius:0}
input[type=range]::-moz-range-thumb{width:22px;height:22px;background:var(--black);border:0;border-radius:0}
.check{display:flex;align-items:flex-start;gap:14px;cursor:pointer;font-size:1rem;line-height:1.5}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:0;border:1px solid var(--ink);background:transparent;display:grid;place-content:center;cursor:pointer}
.check input::after{content:"";width:12px;height:12px;background:var(--red);transform:scale(0);transition:transform .15s}
.check input:checked::after{transform:scale(1)}
.num-input{width:120px;min-height:48px;padding:10px 14px;background:transparent;border:1px solid rgba(10,9,7,.55);border-radius:0;font-size:1.125rem;font-weight:600}
.num-input:focus-visible{outline:2px solid var(--black);outline-offset:2px}
.foerder__result{padding:clamp(24px,3.4vw,48px);display:flex;flex-direction:column;background:var(--tint)}
.frow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:1rem}
.frow:first-of-type{border-top:0;padding-top:0}
.frow strong{font-weight:600;font-variant-numeric:tabular-nums}
.frow--big{margin-top:6px;padding:20px 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);align-items:flex-end}
.frow--big span{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);max-width:14ch;line-height:1.4}
.frow--big strong{font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:-.03em;font-weight:700;color:var(--red-text)}
.foerder__result .btn{margin-top:24px}
.foerder__note{max-width:78ch;margin-top:20px}
@media (max-width:860px){.foerder{grid-template-columns:minmax(0,1fr)}.foerder__controls{border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:479px){.foerder__controls,.foerder__result{padding:24px 20px}.range-row .range-out{margin-left:auto}}

.faq{max-width:860px;margin-top:clamp(28px,4vw,48px);border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-size:clamp(1.0625rem,1.6vw,1.25rem);font-weight:600;letter-spacing:-.01em;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:1.75rem;font-weight:400;line-height:1;color:var(--red-text);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{max-width:64ch;margin:0 0 24px;color:var(--ink-2)}

/* 14 Rechtstexte ------------------------------------------------------------ */
.legal{overflow-wrap:anywhere;max-width:72ch;padding-block:clamp(48px,7vw,96px)}
.legal h2{font-size:clamp(1.25rem,2vw,1.625rem);margin:2.2em 0 .6em}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.0625rem;margin:1.6em 0 .4em}
.legal ul{list-style:disc;padding-left:1.3em;margin-bottom:1.1em}
.legal li{margin-bottom:.3em}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--red-text)}
.legal .note{padding:16px 20px;border:1px solid var(--line-strong);border-left:2px solid var(--red);font-size:.9375rem;color:var(--ink-2);margin-top:2.4em}
.todo{background:rgba(215,40,47,.1);padding:0 .3em;font-weight:600;color:var(--red-text)}

/* 15 Motion ----------------------------------------------------------------- */
.reveal-on [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease),background-color .25s}
.reveal-on [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal-on [data-reveal]{opacity:1;transform:none}
  html.is-loading .loader{transition-duration:.15s!important}   /* Ladebildschirm: kein Animieren, nur kurzes Ausblenden */
}

@media (forced-colors:active){.check input::after{background:CanvasText}.btn--red,.btn--black{border-color:ButtonText}.loader__bar span{background:Highlight}}
@media print{.reveal-on [data-reveal]{opacity:1!important;transform:none!important}.site-header,.dock,.menu,.skip-link,.loader{display:none!important}}

/* Lenis (vendor/lenis.css, v1.3.26) */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* 16 Projekte (Foto-Scrollytelling) ------------------------------------------
   Basis (mobil / reduced-motion / ohne JS): Text links sticky, Fotos untereinander rechts.
   html.pin (per JS bei >=769 px, >=560 px Höhe, ohne reduzierte Bewegung): gepinnte Sektion, Fotos wechseln beim Scrollen. */
.proj{border-top:1px solid var(--line)}
.proj__sticky{position:relative}
.proj__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);max-width:var(--maxw);margin-inline:auto;padding:clamp(56px,8vw,112px) var(--gutter)}
.proj__info{position:sticky;top:calc(var(--header-h) + 32px);align-self:start}
.proj__info .eyebrow{margin-bottom:clamp(16px,2vw,24px)}
.proj__info .h-lg{font-size:clamp(2rem,3.8vw,3.25rem);max-width:14ch}
.proj__loc{margin:clamp(14px,1.8vw,22px) 0 0;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.proj__text{margin:clamp(18px,2.4vw,28px) 0 0;max-width:44ch;color:var(--ink-2)}
.proj__info .tags{margin-top:20px}
.proj__count,.proj__bar{display:none}
.proj__stage{display:grid;gap:clamp(28px,4vw,56px)}
.proj__photo{margin:0}
.proj__photo img{width:100%;max-width:680px;height:auto;background:var(--tint)}
.proj__photo figcaption{display:grid;gap:6px;max-width:680px;padding:16px 0 0;border-top:1px solid var(--line);margin-top:14px}
.proj__photo .eyebrow{font-size:.8125rem}
.proj__ptitle{font-size:1.1875rem;line-height:1.3;font-weight:600;letter-spacing:-.015em}
.proj__ploc{font-size:.9375rem;color:var(--ink-2)}
@media (max-width:768px){
  .proj__grid{grid-template-columns:minmax(0,1fr);padding-block:56px}
  .proj__info{position:static}
  /* Handy: Fotos je Projekt als waagerechte Snap-Reihe statt endloser Hochformat-Liste */
  .proj__stage{display:flex;gap:12px;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:thin}
  .proj__photo{flex:0 0 min(80vw,380px);scroll-snap-align:start}
  .proj__photo img{max-width:none;aspect-ratio:4/5;object-fit:cover}
  /* Querformat-Fotos nicht auf Hochformat beschneiden */
  .proj__stage{align-items:flex-start}
  .proj__photo--wide{flex-basis:min(88vw,460px)}
  .proj__photo--wide img{aspect-ratio:auto}   /* natuerliches Format, Panoramen (Detmold 2,5:1) bleiben ganz sichtbar */
}
/* gepinnt */
html.pin .proj{height:calc(var(--n,6) * 72svh + 100svh)}
html.pin .proj__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
html.pin .proj__grid{height:100%;align-items:center;padding-top:calc(var(--header-h) + 16px);padding-bottom:32px}
html.pin .proj__info{position:relative;top:auto;align-self:center}
html.pin .proj__stage{position:relative;height:100%;gap:0;justify-items:end;align-items:center}   /* Foto buendig an der rechten Inhaltskante */
html.pin .proj__photo{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;max-height:100%;opacity:0;transition:opacity .9s var(--ease);pointer-events:none}
html.pin .proj__photo.is-active{opacity:1}
html.pin .proj__photo img{width:auto;max-width:100%;max-height:calc(100svh - var(--header-h) - 190px);object-fit:contain;transform:scale(1.07);transition:transform 2.2s var(--ease)}
html.pin .proj__photo.is-active img{transform:none}
html.pin .proj__photo figcaption{width:100%;max-width:560px;text-align:left;}
@supports (contain:inline-size){html.pin .proj__photo figcaption{max-width:none;contain:inline-size}}
html.pin .proj__photo figcaption{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease) .15s,transform .6s var(--ease) .15s}
html.pin .proj__photo.is-active figcaption{opacity:1;transform:none}
html.pin .proj__photo img{overflow:hidden}
html.pin .proj__info > *{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.pin .proj.is-in .proj__info > *{opacity:1;transform:none}
html.pin .proj.is-in .proj__info > :nth-child(2){transition-delay:.12s}
html.pin .proj.is-in .proj__info > :nth-child(3){transition-delay:.24s}
html.pin .proj.is-in .proj__info > :nth-child(4){transition-delay:.36s}
html.pin .proj.is-in .proj__info > :nth-child(5){transition-delay:.48s}
html.pin .proj.is-in .proj__info > :nth-child(6){transition-delay:.6s}
html.pin .proj__count{display:flex;align-items:baseline;gap:10px;margin-top:clamp(24px,3vw,40px);font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
html.pin .proj__count b{font-size:1.75rem;letter-spacing:-.02em;color:var(--ink)}
html.pin .proj__bar{display:block;position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line)}
html.pin .proj__bar span{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left}

/* 16b Anatomie (WDVS-Schichtaufbau, Scrollytelling) ---------------------------
   Basis (ohne JS): Stufe-7-Bild + vollstaendige Liste untereinander.
   html.anat-on (JS + IntersectionObserver): Bilder gestapelt, Bild klebt unter Header/Subnav, aktive Stufe per Observer.
   html.anat-pin (>=1024 px breit, >=720 px hoch; auch bei reduzierter Bewegung): gepinnt, Scrollfortschritt waehlt die Stufe.
   Darunter (und bei Hoehe <=500 px) greift der mobile Modus ohne Pin. */
.anat__track{margin-top:clamp(28px,4vw,48px)}
.anat__fig{margin:0 auto;max-width:760px}
.anat__stack img{display:none;width:100%;height:auto}
.anat__stack img:last-child{display:block}
.anat__cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:10px;font-size:.875rem;line-height:1.4;color:var(--ink-2)}
.anat__count{display:none;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.anat__count b{font-size:1.125rem;letter-spacing:-.01em;color:var(--ink)}
.anat__list{margin-top:clamp(16px,3vw,32px)}
.astep{display:grid;grid-template-columns:3.25rem minmax(0,1fr);padding:clamp(18px,2.6vw,26px) 0 clamp(18px,2.6vw,26px) 18px;border-top:1px solid var(--line);border-left:2px solid transparent;transition:border-color .4s}
.astep:last-child{border-bottom:1px solid var(--line)}
.astep .step__no{margin:.35em 0 0;transition:color .4s}
.astep h3{font-size:1.25rem;line-height:1.2;margin-bottom:8px;transition:color .4s}
.astep p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--ink-2);transition:color .4s}
html.anat-on .anat__stack{position:relative;aspect-ratio:1200/880;width:min(100%,calc(36svh * 1.3636));margin-inline:auto}
html.anat-on .anat__stack img{display:block;position:absolute;inset:0;height:100%;opacity:0;transition:opacity .5s var(--ease)}
html.anat-on .anat__stack img.is-on{opacity:1}
html.anat-on .anat__count{display:block}
html.anat-on .anat__fig{position:sticky;top:calc(var(--header-h) + var(--sub-h,0px));z-index:5;max-width:720px;margin-inline:auto;padding:8px 0;background:var(--bg);border-bottom:1px solid var(--line)}
html.anat-on .anat__list{margin-top:0}
html.anat-on .astep{padding-block:clamp(18px,3.4svh,32px)}
html.anat-on .astep:not(.is-active) .step__no,html.anat-on .astep:not(.is-active) h3{color:var(--ink-2)}
html.anat-on .astep.is-active{border-left-color:var(--red)}
html.anat-on .astep.is-active p{color:var(--ink)}
@media (max-width:640px){.astep{grid-template-columns:2.5rem minmax(0,1fr);padding-left:12px}}
/* Sticky-Bild bekommt unten einen weichen Auslauf: Text laeuft darunter nicht hart abgeschnitten durch */
html.anat-on .anat__fig::after{content:"";position:absolute;left:0;right:0;top:100%;height:20px;background:linear-gradient(var(--bg),rgba(242,239,233,0));pointer-events:none}
/* Kleine Hoehen (Phones hochkant): Bild kleiner, damit genug Platz fuer den aktiven Schritt bleibt */
@media (max-height:700px){html.anat-on:not(.anat-pin) .anat__stack{width:min(100%,calc(28svh * 1.3636))}}
@media (max-width:479px){.anat__cap{gap:10px;font-size:.8125rem}.anat__cap > span:first-child{white-space:nowrap}.anat__count{white-space:nowrap;letter-spacing:.06em}}
@media (max-height:500px){html.anat-on .anat__fig{position:static}html.anat-on .anat__fig::after{display:none}.subnav{position:static}}   /* Querformat-Phones: Bild und Subnav nicht mitkleben lassen */
/* gepinnt */
html.anat-pin .anat{padding-bottom:0}
html.anat-pin .anat__track{height:calc(6 * 60svh + 100svh);margin-top:0}
html.anat-pin .anat__sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding:calc(var(--header-h) + var(--sub-h,0px) + 8px) 0 16px}
@media (max-width:1100px){html.anat-pin .anat__sticky{grid-template-columns:minmax(0,54fr) minmax(0,46fr)}}
html.anat-pin .anat__fig{position:static;max-width:none;margin:0;padding:0;background:none;border:0}
html.anat-pin .anat__fig::after{display:none}html.anat-pin .anat__stack{width:min(100%,calc((100svh - var(--header-h) - var(--sub-h,0px) - 96px) * 1.3636));margin-inline:0}
html.anat-pin .anat__list{margin:0}
html.anat-pin .astep{padding-block:clamp(7px,1.5svh,18px)}
html.anat-pin .astep h3{font-size:clamp(1.0625rem,2.4svh,1.25rem);margin-bottom:4px}
html.anat-pin .astep p{font-size:clamp(.8125rem,1.9svh,.9375rem);line-height:1.5}
@media (max-height:760px){html.anat-pin .astep{padding-block:5px}}

/* 17 Ueber uns ---------------------------------------------------------------- */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);padding-block:clamp(56px,8vw,112px)}
.story__text p{color:var(--ink-2);max-width:54ch}
.story__text .h-lg{margin:clamp(18px,2.4vw,28px) 0 clamp(18px,2.4vw,28px);max-width:12ch}
.person{padding:clamp(24px,3vw,40px);border:1px solid var(--line);border-left:2px solid var(--red)}
.person h3{font-size:clamp(1.5rem,2.4vw,2rem);margin:10px 0 14px}
.person p{margin:0;color:var(--ink-2)}
.story figure{margin:clamp(24px,3vw,40px) 0 0}
.story figure img{width:100%;max-width:none;height:auto;aspect-ratio:4/3;object-fit:cover}   /* fuellt die Spalte: bündig mit der Personenkarte */
.story figcaption{padding-top:12px;font-size:.9375rem;color:var(--ink-2)}
@media (max-width:900px){.story{grid-template-columns:minmax(0,1fr)}}

/* 18 Kontakt ------------------------------------------------------------------- */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);padding-block:var(--sp-7)}
.clist{margin:0}
@media (min-width:901px){.contact > div:first-child{display:flex}.clist{flex:1;display:flex;flex-direction:column}.clist > div:last-child{flex:1}}   /* Infospalte endet buendig mit dem Formular */
.clist > div{padding:20px 0;border-top:1px solid var(--line)}
.clist > div:last-child{border-bottom:1px solid var(--line)}
.clist dt{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.clist dd{margin:0;font-size:1.1875rem;line-height:1.5}
.clist a{display:inline-block;padding:11px 0;margin-block:-7px;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;transition:text-decoration-color .2s,color .2s}
.clist a:hover{color:var(--red-text);text-decoration-color:currentColor}
.cform-wrap{padding:clamp(24px,3.4vw,48px);border:1px solid var(--line);background:var(--tint)}
.cform-wrap h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:24px}
.cform{display:grid;gap:22px}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cform label{display:block;margin-bottom:8px;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.cform input:not([type=hidden]),.cform textarea{width:100%;min-height:52px;padding:12px 14px;background:var(--bg);border:1px solid rgba(10,9,7,.55);border-radius:0;font-size:1.0625rem;line-height:1.5;color:var(--ink)}
.cform textarea{min-height:170px;resize:vertical}
.cform input:focus-visible,.cform textarea:focus-visible{outline:2px solid var(--black);outline-offset:2px}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cform__note{margin:0}
.cform__note a{display:inline-block;padding:13px 0;margin:-13px 0;text-decoration:underline;text-underline-offset:3px}   /* Tap-Ziel >= 44 px ohne den Zeilenabstand zu aendern */
.form-msg{padding:16px 20px;border:1px solid var(--line-strong);border-left:2px solid var(--red);font-size:1rem}
.form-msg[hidden]{display:none}
@media (max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}.cform__row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:479px){.cform-wrap{padding:20px}}

.phero h1.h-long{max-width:20ch;font-size:min(var(--fs-6),4.75rem)}

.form-msg--thanks{display:none;margin-top:20px}
.form-msg--thanks:target{display:block}

/* 19 Fassaden-Konfigurator (Putzfarben + Klinker) --------------------------------- */
html.scrub .hero__variants{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;position:absolute;z-index:6;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s,visibility 0s .5s;padding:12px 16px;background:rgba(242,239,233,.94);border:1px solid var(--line-strong)}
html.scrub .hero__variants.is-shown{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s}
html.scrub.frames-missing .hero__variants{display:none}
.hv-grp{display:flex;flex-direction:column;gap:8px}
.hv-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.hv-label{min-width:4.5em;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.hv-sw{position:relative;flex:none;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid rgba(10,9,7,.55);background:var(--sw,#ccc);cursor:pointer;transition:transform .2s var(--ease),opacity .2s}
.hv-sw:hover:not(:disabled){transform:scale(1.1)}
.hv-sw:disabled{opacity:.35;cursor:not-allowed}
.hv-sw[aria-checked="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--black)}
.hv-sw:focus-visible,.hv-custom input:focus-visible{outline:2px solid var(--black);outline-offset:4px}
.hv-sw[aria-checked="true"]:focus-visible{outline-offset:6px}
.hv-sw--klinker{background-color:var(--sw);background-image:repeating-linear-gradient(0deg,transparent 0 7px,var(--mortar) 7px 9px),repeating-linear-gradient(90deg,transparent 0 11px,var(--mortar) 11px 13px)}
.hv-sw::after{content:attr(data-name);content:attr(data-name) / "";position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);padding:6px 10px;background:var(--black);color:#fff;font-size:.8125rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;border-radius:2px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s var(--ease);z-index:2}
.hv-sw:focus-visible::after{opacity:1;transform:translate(-50%,0)}
@media (hover:hover){.hv-sw:hover::after{opacity:1;transform:translate(-50%,0)}}
.hero__variants.tip-off .hv-sw::after{opacity:0}   /* Esc blendet Tooltips aus (WCAG 1.4.13) */
.hv-custom{position:relative;display:inline-flex;align-items:center;gap:8px;margin-left:4px;font-size:.8125rem;font-weight:600;color:var(--ink);cursor:pointer}
.hv-custom input{appearance:none;-webkit-appearance:none;width:30px;height:30px;padding:0;border:1px solid rgba(10,9,7,.55);border-radius:50%;background:transparent;cursor:pointer;overflow:hidden}
.hv-custom input::-webkit-color-swatch-wrapper{padding:0}
.hv-custom input::-webkit-color-swatch{border:0;border-radius:50%}
.hv-custom input::-moz-color-swatch{border:0;border-radius:50%}
.hv-custom input:disabled{opacity:.35;cursor:not-allowed}
.hv-custom.is-on input{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--black)}
.hv-current{flex:1 0 100%;margin:2px 0 0;font-size:.875rem;font-weight:600;color:var(--ink)}
/* Touch: 30px sichtbar, >=44px Trefferfläche (Pseudo-Element ::before, Layout bleibt unverändert) */
@media (pointer:coarse){
  .hv-sw::before{content:"";position:absolute;inset:-7px}
  .hv-grp,.hv-row{gap:14px 12px}
  .hv-custom{min-height:44px}
}
/* Windows-Kontrastmodus: Swatch-Farben behalten, Auswahl über dicke Kontur/Rahmen */
@media (forced-colors:active){
  .hv-sw,.hv-custom input{forced-color-adjust:none;border-color:CanvasText}
  .hv-sw[aria-checked="true"],.hv-custom.is-on input{border-width:4px;outline:3px solid Highlight;outline-offset:3px}
  .hv-sw:focus-visible,.hv-custom input:focus-visible{outline:3px solid Highlight;outline-offset:6px}
  .hv-sw::after{background:Canvas;color:CanvasText;border:1px solid CanvasText}
}
/* Overlay-Layout: Panel steht rechts neben der aktiven Karte (links = Karte + Phase) und ueberdeckt sie so nie; Kante = --card-w + Abstand.
   Unter 900 px Breite einspaltig (Platz neben der Karte reicht sonst nicht), rechts bleibt Luft fuer das Kontakt-Dock. */
@media (min-width:769px) and (min-aspect-ratio:5/4){
  html.scrub .hero__variants{display:grid;grid-template-columns:auto auto;gap:8px 22px;left:calc(var(--edge-x) + var(--card-w) + var(--sp-4));right:auto;bottom:20px;max-width:calc(100% - var(--edge-x) - var(--card-w) - var(--sp-4) - var(--gutter))}
  .hv-current{grid-column:1/-1}
}
@media (min-width:769px) and (max-width:899px) and (min-aspect-ratio:5/4){html.scrub .hero__variants{grid-template-columns:auto}}
/* Gestapeltes Layout (Phones, Hochformat-Tablets): Panel volle Breite zwischen den Gutters (kein 76-px-Rest des alten Docks mehr -> alle 5 Putzfarben in einer Zeile) */
@media not all and (min-width:769px) and (min-aspect-ratio:5/4){
  html.scrub .hero__variants{left:var(--gutter);right:var(--gutter);bottom:50px;padding:10px 12px;gap:6px;max-width:560px}
  .hv-label{min-width:0;font-size:.75rem}
  .hv-current{font-size:.8125rem}
  @media (max-height:700px){   /* sehr kleine Phones: Panel verdichten (sichtbare Auswahl entfällt, Swatches zeigen den Zustand) */
    html.scrub .hero__variants{bottom:44px;padding:8px 12px;gap:0}
    .hv-grp,.hv-row{gap:8px 10px}
    .hv-current{display:none}
    .hv-custom{min-height:0}
  }
  /* Konfigurator offen: Lead/Text/Liste der aktiven Karte nur noch visuell ausgeblendet (bleiben im Accessibility-Tree), damit das Panel nie die CTA-Links ueberdeckt */
  html.scrub .cfg-on .hcard__lead,html.scrub .cfg-on .hcard__text,html.scrub .cfg-on .hcard__list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  /* Konfigurator offen: Karte + Panel bilden eine Gruppe, die im Restraum unter dem Bild mittig steht (statt Panel unten festzunageln -> keine leere Flaeche dazwischen).
     Reihen: Bild | Luft | Karte | Panel | Luft. Das (unsichtbare) Intro wird aus dem Fluss genommen; unten bleibt Platz fuer Phasenanzeige/Fortschrittsbalken. */
  html.scrub .hero__sticky.cfg-on{grid-template-rows:auto minmax(0,1fr) auto auto minmax(0,1.15fr);padding-bottom:50px}
  html.scrub .hero__sticky.cfg-on .hero__intro{position:absolute;pointer-events:none}
  html.scrub .hero__sticky.cfg-on .hero__cards{grid-row:3;padding-bottom:0}
  html.scrub .hero__sticky.cfg-on .hero__variants{position:relative;grid-row:4;grid-column:1;left:auto;right:auto;bottom:auto;align-self:start;margin:clamp(12px,3svh,28px) var(--gutter) 0;width:auto;max-width:560px}
  @media (max-height:700px){
    html.scrub .hero__sticky.cfg-on{padding-bottom:44px}
    html.scrub .hero__sticky.cfg-on .hero__variants{margin-top:10px}
  }
}

/* ── Optik-Paket 2026-10-09 ──────────────────────────────────────────────────
   Bildkacheln (Leistungen), Foto-Band, dunkles Kennzahlen-Band, Referenzen-Bühne,
   Leistungsfotos (leistungen.html), Konfigurator-Hinweis.
   Mobil (<=768px): Kachellisten als horizontale Scroll-Snap-Reihe. */

/* A) Startseite: Leistungen mit Bild (Raster siehe Abschnitt 9) */
.lcard__img{position:relative;aspect-ratio:4/3;overflow:hidden;margin:0 calc(-1 * var(--px)) 24px;background:var(--tint)}
.lcard__img picture{display:contents}
.lcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.lcard:hover .lcard__img img{transform:scale(1.035)}
.lcard .lcard__num{margin-bottom:14px}
@media (min-width:769px) and (max-width:1023px){
  .lgrid{grid-template-columns:repeat(2,1fr)}
  .lcard:nth-child(5){grid-column:span 2}
  .lcard:nth-child(5) .lcard__img{aspect-ratio:8/3}
  .lcard:nth-child(5) .lcard__img img{object-position:50% 62%}   /* Hochformat-Foto: Decke/Treppe/Boden statt nur Decke */
}
@media (max-width:768px){
  .lcard{--px:18px;padding-bottom:30px}
  .lgrid{display:flex;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);border-left:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:thin}
  .lcard,.lcard:nth-child(5){flex:0 0 min(82vw,420px);grid-column:auto;scroll-snap-align:start}
  .lcard:nth-child(5) .lcard__img{aspect-ratio:4/3}
  .lcard:first-child{border-left:1px solid var(--line)}
  .reveal-on .lgrid .lcard[data-reveal]{opacity:1;transform:none}
}

/* B) Foto-Band (Vollbreite) */
.pband{position:relative;margin:0 auto;max-width:1920px;height:55vh;min-height:300px;max-height:680px;overflow:hidden;background:var(--black);border-top:1px solid var(--line)}   /* Originale sind max. 1400 px breit: ab 1920 nicht weiter hochskalieren */
.pband picture{display:contents}
.pband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.pband__cap{position:absolute;z-index:1;bottom:clamp(16px,2.4vw,32px);left:var(--edge-x);margin:0;max-width:calc(100% - 2 * var(--gutter))}
.pband__cap a{display:inline-flex;align-items:center;gap:12px;padding:12px 18px;background:rgba(20,20,20,.88);color:var(--on-dark);font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;transition:background-color .25s,gap .25s var(--ease)}
.pband__cap a:hover{background:var(--red-text);gap:16px}
.pband__cap a:focus-visible{outline:2px solid #fff;outline-offset:-5px}
.rtile:focus-visible{position:relative;z-index:1;outline-offset:-4px}
.pband__cap svg{width:16px;height:16px;flex:none}
@media (max-width:768px){.pband{height:40vh;min-height:240px}.pband img{object-position:50% 62%}}

/* C) Über-Teaser (nur Text) + dunkles Kennzahlen-Band */
.about{display:block;border-bottom:0}
.about__text{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(2rem,6vw,6rem);align-content:start;padding:clamp(56px,8vw,112px) 0}
.about__text .eyebrow{grid-column:1;grid-row:1;justify-self:start}
.about__text .h-lg{grid-column:1;grid-row:2;margin:clamp(20px,2.6vw,32px) 0 0}
.about__text p:not(.eyebrow){grid-column:2;grid-row:1 / 3;align-self:end;margin:0;max-width:52ch}
.about__text .btn{grid-column:2;grid-row:3;justify-self:start;margin-top:clamp(24px,3vw,36px)}
@media (max-width:768px){
  .about__text{grid-template-columns:minmax(0,1fr);padding:56px 0}
  .about__text .eyebrow,.about__text .h-lg,.about__text p:not(.eyebrow),.about__text .btn{grid-column:1;grid-row:auto}
  .about__text p:not(.eyebrow){margin-top:20px}
}
.kband{background:var(--black);color:var(--on-dark)}
.kband__list{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.kband__item{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:14px;padding:clamp(40px,5.5vw,80px) clamp(16px,2.4vw,40px);border-left:1px solid var(--line-dark)}
.kband__item:first-child{border-left:0;padding-left:0}
.kband__num{margin:0;font-size:clamp(2.75rem,6vw,5.5rem);line-height:1;letter-spacing:-.03em;font-weight:700;color:var(--on-dark)}
.kband__plus{color:var(--red)}
.kband__label{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2)}
@media (max-width:768px){
  .kband__list{grid-template-columns:repeat(2,1fr)}
  .kband__item{padding:32px 16px}
  .kband__item:nth-child(odd){border-left:0;padding-left:0}
  .kband__item:nth-child(n+3){border-top:1px solid var(--line-dark)}
}

/* D) Referenzen-Bühne: Desktop = Featured-Layout (12 Spalten), Mobil = Scroll-Snap-Reihe */
.refs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin:clamp(28px,4vw,48px) 0 0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.refs__item{min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.refs__item--lead{grid-column:1 / 8;grid-row:1 / 3}
.refs__item:nth-child(2){grid-column:8 / 13;grid-row:1}
.refs__item:nth-child(3){grid-column:8 / 13;grid-row:2}
.refs__item--compact{grid-column:span 6;grid-row:3}
.rtile{display:flex;flex-direction:column;height:100%}
.rtile__img{position:relative;flex:none;overflow:hidden;aspect-ratio:3/2;background:var(--tint)}
.rtile__img picture{display:contents}
.rtile__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform .9s var(--ease)}
.rtile:hover .rtile__img img{transform:scale(1.04)}
.rtile__cap{display:grid;gap:8px;align-content:start;padding:20px 22px 26px}
.rtile__cap > span{display:block}
.rtile__title{font-size:1.1875rem;line-height:1.25;letter-spacing:-.015em;font-weight:600}
.rtile__loc{font-size:.9375rem;color:var(--ink-2)}
.refs__item--lead .rtile__img{flex:1 1 auto;aspect-ratio:auto;min-height:clamp(340px,40vw,560px)}
.refs__item--lead .rtile__title{font-size:clamp(1.375rem,2vw,1.75rem)}
.refs__item--compact .rtile{flex-direction:row;align-items:stretch}
.refs__item--compact .rtile__img{flex:0 0 46%;aspect-ratio:4/3}
.refs__item--compact .rtile__cap{align-self:center;flex:1;min-width:0}
@media (max-width:768px){
  .refs{display:flex;margin-inline:calc(-1 * var(--gutter));padding:6px var(--gutter);border-left:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:thin}
  .refs__item,.refs__item--lead,.refs__item--compact{flex:0 0 min(78vw,420px);grid-column:auto;grid-row:auto;scroll-snap-align:start}
  .refs__item:first-child{border-left:1px solid var(--line)}
  .refs__item--compact .rtile{flex-direction:column}
  .rtile__img,.refs__item--lead .rtile__img,.refs__item--compact .rtile__img{flex:none;width:100%;min-height:0;aspect-ratio:4/3}
  .reveal-on .refs .refs__item[data-reveal]{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .rtile:hover .rtile__img img,.lcard:hover .lcard__img img{transform:none}
}

/* E) leistungen.html: Foto je Leistungsblock (Text links / Foto + Liste rechts, bei .svc--rev gespiegelt) */
.svc__photo{margin:0;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--tint)}
.svc__photo picture{display:contents}
.svc__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* Desktop: Text + Liste untereinander in einer Spalte, das Foto fuellt die Hoehe der Nachbarspalte (ausgeglichene Spalten).
   Explizite Klasse .svc--photo statt :has() -> funktioniert auch ohne :has()-Unterstuetzung. */
@media (min-width:901px){
  .svc--photo{row-gap:clamp(24px,3vw,40px);align-items:start}
  .svc--photo > .svc__text{grid-column:1;grid-row:1}
  .svc--photo > .sublist{grid-column:1;grid-row:2}
  .svc--photo > .svc__photo{grid-column:2;grid-row:1 / 3;align-self:stretch;aspect-ratio:auto;min-height:clamp(340px,36vw,560px)}
  .svc--rev.svc--photo > .svc__text,.svc--rev.svc--photo > .sublist{grid-column:2}
  .svc--rev.svc--photo > .svc__photo{grid-column:1}
}
@media (max-width:900px){.svc__photo{order:-1}}

/* F) Konfigurator-Hinweis (Text liegt ausserhalb der radiogroup) */
.hv-note{flex:1 0 100%;grid-column:1 / -1;margin:0;font-size:.75rem;line-height:1.35;font-weight:400;color:var(--ink-2)}
@media not all and (min-width:769px) and (min-aspect-ratio:5/4){   /* gestapelt: Hinweis (2 Zeilen) ersetzt die sichtbare Auswahlzeile (aria-hidden, Swatch-Ring zeigt den Zustand), damit das Panel nicht höher wird */
  .hv-current{display:none}
  .hv-note{font-size:.75rem;line-height:1.25}
}
@media (max-width:340px){.hv-note{font-size:.625rem;line-height:1.1}}   /* nur 320-px-Phones: 10 px, sonst Ueberlappung mit der Karte (Kontrast ink-2 auf Panel > 4,5:1) */
/* ── Ende Optik-Paket 2026-10-09 ── */