/* ==== start.css ==== */
@font-face{font-family:"Satoshi";src:url(../fonts/Satoshi-Variable.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/Figtree-VariableFont_wght.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --creme:#F6F1E8;--sand:#EADFCC;--navy:#122E4D;--schiefer:#55606E;--text:#2B3642;
  --terra:#A3421D;--terra-dunkel:#8B3818;--terra-hell:#C65A30;--linie:#DDD2C0;
  --kurve:cubic-bezier(.22,1,.36,1);
  --t-bild:800ms;--t-text:600ms;--t-hover:250ms;--t-zoom:400ms;--t-menue:300ms;
  --sektion:128px;--block:64px;--gap:24px;--rand:64px;
  --menue-h:64px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;font-style:normal}
html{overflow-x:clip;scroll-behavior:smooth}
body{
  overflow-x:clip;background:var(--creme);color:var(--text);
  font-family:"Figtree",system-ui,sans-serif;font-weight:400;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
p{hyphens:none}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* Skip-Link */
.skip{
  position:fixed;top:8px;left:8px;z-index:300;
  background:var(--navy);color:var(--creme);
  font-family:"Satoshi",sans-serif;font-weight:600;font-size:15px;
  padding:12px 24px;border-radius:6px;text-decoration:none;
  transform:translateY(-200%);transition:transform var(--t-menue) var(--kurve);
}
.skip:focus-visible{transform:translateY(0);outline-color:var(--creme)}

/* Fokus */
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.abschluss :focus-visible,.fuss :focus-visible,.hero :focus-visible{outline-color:var(--creme)}

/* ---------- Typografie ---------- */
.claim,.t1,.t2,.t3{
  font-family:"Satoshi",sans-serif;font-weight:700;color:var(--navy);
  hyphens:manual;text-wrap:balance;overflow-wrap:break-word;
}
.claim{font-size:88px;line-height:1.0;letter-spacing:-.022em}
.t1{font-size:56px;line-height:1.05;letter-spacing:-.02em}
.t2{font-size:40px;line-height:1.1;letter-spacing:-.015em}
.t3{font-size:24px;line-height:1.2;letter-spacing:-.005em}
.einstieg-text{font-size:20px;line-height:1.5;max-width:680px;text-wrap:pretty}
.text{font-size:17px;line-height:1.6;max-width:680px;text-wrap:pretty}
.text+.text{margin-top:16px}
.klein{font-size:14px;line-height:1.5;color:var(--schiefer)}
.label{
  font-weight:600;font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;
  color:var(--schiefer);display:flex;align-items:center;gap:12px;
}
.label::before{content:"";width:28px;height:1px;background:var(--navy);opacity:.5;flex:none}
.label-hell{color:rgba(246,241,232,.7)}
.label-hell::before{background:var(--creme);opacity:.6}

.slogan{font-family:"Satoshi",sans-serif;font-weight:700;color:var(--navy)}

.t1{margin-top:24px}
.t2{margin-top:0}
.einstieg-text{margin-top:24px}
.label+.t1,.label+.t2,.label+.t3{margin-top:16px}

/* ---------- Knöpfe ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;
  border-radius:6px;font-family:"Satoshi",sans-serif;font-weight:600;font-size:15px;letter-spacing:.01em;
  text-decoration:none;box-shadow:none;border:0;cursor:pointer;
  transition:background-color var(--t-hover) var(--kurve),color var(--t-hover) var(--kurve),border-color var(--t-hover) var(--kurve);
}
.btn-haupt{background:var(--terra);color:#fff}
.btn-haupt:hover,.btn-haupt:active{background:var(--terra-dunkel)}
.btn-zweit{border:1.5px solid var(--navy);color:var(--navy);background:transparent;height:48px}
.btn-zweit:hover{background:var(--navy);color:var(--creme)}
.btn-creme{background:var(--creme);color:var(--navy)}
.btn-creme:hover{background:#fff}
.tl{
  font-family:"Satoshi",sans-serif;font-weight:600;font-size:15px;color:var(--navy);
  text-decoration:none;border-bottom:1.5px solid transparent;padding-bottom:2px;
  transition:border-color var(--t-hover) var(--kurve),color var(--t-hover) var(--kurve);
  display:inline-block;
}
.tl:hover{border-bottom-color:var(--navy)}
.tl-hell{color:var(--creme)}
.tl-hell:hover{border-bottom-color:var(--creme)}
a.tl{white-space:nowrap}
@media (max-width:480px){a.tl{white-space:normal}}

/* ---------- Layout ---------- */
.wrap{max-width:1280px;margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
.sektion{padding:var(--sektion) 0}
.sektion-sand{background:var(--sand)}

/* ---------- Menü ---------- */
.menue{
  position:sticky;top:0;z-index:210;height:var(--menue-h);
  background:rgba(246,241,232,.8);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-menue) var(--kurve);
}
.menue.gescrollt{border-bottom-color:var(--linie)}
.menue-innen{
  max-width:1280px;margin:0 auto;height:100%;padding:0 var(--rand);
  display:flex;align-items:center;gap:32px;
}
.menue-logo img{height:32px;width:auto}
.menue-nav{display:flex;gap:24px;margin-left:auto}
.menue-cta{height:40px;margin-left:8px}
.menue-mobil{display:none;font-family:"Satoshi",sans-serif;font-weight:600;font-size:15px;color:var(--navy);margin-left:auto;padding:8px 0}

.mobilpanel{
  position:fixed;inset:0;top:var(--menue-h);z-index:200;background:var(--creme);
  display:flex;flex-direction:column;justify-content:center;gap:48px;padding:0 24px;
  opacity:0;transition:opacity var(--t-menue) var(--kurve);pointer-events:none;
}
.mobilpanel.offen{opacity:1;pointer-events:auto}
.mobilpanel[hidden]{display:flex}
.mobilpanel-nav{display:flex;flex-direction:column;gap:24px}
.mobilpanel-nav a{
  font-family:"Satoshi",sans-serif;font-weight:700;font-size:30px;line-height:1.1;letter-spacing:-.015em;
  color:var(--navy);text-decoration:none;hyphens:manual;
}
.mobilpanel-tel{font-family:"Satoshi",sans-serif;font-weight:600;font-size:17px;color:var(--navy);text-decoration:none}
body.panel-offen{overflow:hidden}

/* ---------- Hero ---------- */
.hero{position:relative;height:max(600px,min(calc(100vw * 9 / 21),88svh));min-height:600px;overflow:hidden;color:#fff}
.hero-bild,.hero-bild picture,.hero-bild img{position:absolute;inset:0;width:100%;height:100%}
.hero-bild img{object-fit:cover;object-position:center 55%;transform:scale(1.04);transition:transform 1200ms var(--kurve)}
.hero.geladen .hero-bild img{transform:scale(1)}
.hero-verlauf{position:absolute;inset:0;background:linear-gradient(to top right,rgba(18,46,77,.55) 0%,rgba(18,46,77,.32) 35%,rgba(18,46,77,0) 60%)}
.hero-verlauf-links{position:absolute;inset:0;background:linear-gradient(to right,rgba(18,46,77,.45) 0%,rgba(18,46,77,0) 55%)}
.hero-inhalt{
  position:absolute;left:calc(max(0px, (100% - 1280px) / 2) + var(--rand));bottom:96px;max-width:760px;
}
.hero-claim{color:#F6F1E8}
.hero-claim .akzent{color:var(--terra-hell)}
/* Akzent D (Gman 11.10.): Claim Creme, Akzent Terrakotta hell, dezenter Navy-Verlauf nur hinter dem Text */
.hero-inhalt{isolation:isolate}
.hero-inhalt::before{content:'';position:absolute;z-index:-1;pointer-events:none;left:-40%;right:-35%;top:-30%;bottom:-25%;background:radial-gradient(closest-side,rgba(12,32,54,.78) 0%,rgba(12,32,54,.66) 45%,rgba(12,32,54,.36) 75%,rgba(12,32,54,0) 100%)}

.hero-fakt{font-family:"Satoshi",sans-serif;font-weight:500;font-size:20px;line-height:1.4;margin-top:24px;color:rgba(255,255,255,.9)}
.hero-welle{display:block;width:240px;height:16px;color:#fff;opacity:.5;margin-top:24px}
.hero-welle svg{width:100%;height:100%;display:block}
.hero-aktionen{display:flex;align-items:center;gap:32px;margin-top:32px;flex-wrap:wrap}

/* Hero-Ladeeinblendung */
.js .hero .hero-claim,.js .hero .hero-fakt,.js .hero .hero-welle,.js .hero .hero-aktionen{opacity:0;transition:opacity 600ms var(--kurve)}
.js .hero.geladen .hero-claim{opacity:1;transition-delay:200ms}
.js .hero.geladen .hero-fakt{opacity:1;transition-delay:280ms}
.js .hero.geladen .hero-welle{opacity:.5;transition-delay:360ms}
.js .hero.geladen .hero-aktionen{opacity:1;transition-delay:440ms}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transition:opacity var(--t-text) var(--kurve)}
.js .reveal.sichtbar{opacity:1}
.js .reveal-bild{opacity:0;transition:opacity var(--t-bild) var(--kurve)}
.js .reveal-bild .bild-rahmen{overflow:hidden}
.js .reveal-bild img{transform:scale(1.04);transition:transform var(--t-bild) var(--kurve)}
.js .reveal-bild.sichtbar{opacity:1}
.js .reveal-bild.sichtbar img{transform:scale(1)}

/* ---------- Bilder ---------- */
.bild-rahmen{overflow:hidden;position:relative;border-radius:0}
.bild-rahmen picture,.bild-rahmen img{width:100%;height:100%;display:block}
.bild-rahmen img{object-fit:cover}
.bild-4x3{aspect-ratio:4/3}
.bild-4x5{aspect-ratio:4/5}

/* ---------- Bild-Kacheln ---------- */
.kacheln-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:48px}
.kachel{display:block;text-decoration:none;color:inherit}
.kachel .bild-rahmen{margin-bottom:24px}
.kachel img{transition:transform var(--t-zoom) var(--kurve)}
.kachel:hover img{transform:scale(1.03)}
.kachel .t3{margin-bottom:8px}
.kachel .text{margin-bottom:16px}
.kachel .tl:hover{border-bottom-color:var(--navy)}

/* ---------- Text-Bild ---------- */
.tb-reihe{display:grid;grid-template-columns:7fr 5fr;gap:var(--gap);align-items:center}
.tb-gespiegelt .tb-bild{order:2}
.tb-gespiegelt .tb-text{order:1}
.tb-text .t2{margin-top:16px;margin-bottom:24px}
.tb-text .tl{margin-top:32px}

/* ---------- Stapelnde Projektkarten ---------- */
.stapel{margin-top:var(--block)}
.stapel-karte{
  display:grid;grid-template-columns:3fr 2fr;background:var(--creme);
  margin-bottom:var(--gap);will-change:transform;
}
@media (min-width:768px){
  .stapel-karte{
    position:sticky;top:calc(96px + (var(--i) * 16px));
    height:70svh;margin-bottom:48px;
  }
  .stapel-karte:last-child{margin-bottom:0}
}
.stapel-bild{aspect-ratio:3/2;height:100%}
@media (min-width:768px){.stapel-bild{aspect-ratio:auto;height:100%}}
.stapel-bild img{width:100%;height:100%;object-fit:cover}
.stapel-text{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:12px;padding:48px}
.stapel-titel{font-family:"Satoshi",sans-serif;font-weight:700;color:var(--navy);font-size:40px;line-height:1.1;letter-spacing:-.015em;hyphens:manual;text-wrap:balance;overflow-wrap:break-word}
.stapel-text .klein{color:var(--schiefer)}
.stapel-text .text{max-width:none}
.stapel-mehr{margin-top:48px}

/* ---------- Zitat ---------- */
.zitat{max-width:900px}
.zitat-sterne{color:var(--navy);font-size:24px;letter-spacing:4px;margin-bottom:24px}
.zitat-text{font-family:"Satoshi",sans-serif;font-weight:700;font-size:40px;line-height:1.1;letter-spacing:-.015em;color:var(--navy);margin-bottom:24px;hyphens:manual;text-wrap:balance;overflow-wrap:break-word}
.zitat .klein{color:var(--schiefer)}
.zitat-link{margin-top:32px}

/* ---------- Navy-Abschluss ---------- */
.abschluss{background:var(--navy);padding:var(--sektion) 0}
.abschluss .t1{color:#fff;margin-top:24px}
.abschluss-text{font-size:20px;line-height:1.5;color:rgba(246,241,232,.8);max-width:680px;margin-top:24px;text-wrap:pretty}
.abschluss-aktionen{display:flex;align-items:center;gap:32px;margin-top:32px;flex-wrap:wrap}

/* ---------- Fusszeile ---------- */
.fuss{background:var(--navy);color:#E8E1D3;padding-bottom:48px}
.fuss-welle{height:16px;overflow:hidden;color:rgba(159,176,195,.35);margin-bottom:64px}
.fuss-welle-lauf{display:flex;width:200%;height:100%;will-change:transform}
.fuss-welle-lauf svg{width:50%;height:100%;flex:none;display:block}
.fuss-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:32px}
.fuss-logo img{height:32px;width:auto}
.fuss-titel{font-family:"Satoshi",sans-serif;font-weight:700;font-size:15px;color:#fff;margin-bottom:16px}
.fuss-spalte p{font-size:15px;line-height:1.7}
.fuss a{
  color:#E8E1D3;text-decoration:none;border-bottom:1px solid transparent;
  transition:color var(--t-hover) var(--kurve),border-color var(--t-hover) var(--kurve);
}
.fuss a:hover{color:#fff;border-bottom-color:#fff}
.fuss-unten{
  margin-top:64px;padding-top:24px;border-top:1px solid rgba(159,176,195,.25);
  font-size:14px;color:#9FB0C3;
}
.fuss-unten a{color:#9FB0C3}
.fuss-unten a:hover{color:#fff}

/* ---------- Mobile Bottom-Bar ---------- */
.mobilbar{
  position:fixed;left:0;right:0;bottom:0;z-index:190;display:none;
  background:rgba(246,241,232,.9);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  padding:12px 24px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linie);
  opacity:0;pointer-events:none;transition:opacity var(--t-menue) var(--kurve);
}
.mobilbar.sichtbar{opacity:1;pointer-events:auto}
.mobilbar-btn{width:100%}

/* ---------- Media: Tablet ---------- */
@media (max-width:1023px){
  .fuss-grid{grid-template-columns:1fr 1fr 1fr}
  .menue-nav{gap:16px}
}

/* ---------- Media: Handy ---------- */
@media (max-width:767px){
  :root{--sektion:80px;--block:48px;--gap:16px;--rand:24px;--menue-h:56px}
  body{font-size:16px;padding-bottom:0}
  body.mobilbar-aktiv{padding-bottom:96px}
  .claim{font-size:40px}
  .t1{font-size:36px}
  .t2{font-size:30px}
  .t3{font-size:21px}
  .einstieg-text{font-size:18px}
  .text{font-size:16px}
  .zitat-text{font-size:30px}
  .stapel-titel{font-size:21px;line-height:1.2;letter-spacing:-.005em}

  .menue-nav,.menue-cta{display:none}
  .menue-mobil{display:block}
  .menue-logo img{height:28px}
  .mobilbar{display:block}

  .hero{height:auto;min-height:0;aspect-ratio:4/5}
  .hero-bild img{object-position:50% 50%}
  .hero-verlauf{background:linear-gradient(to top,rgba(18,46,77,.72) 0%,rgba(18,46,77,.45) 45%,rgba(18,46,77,.08) 80%)}
  .hero-verlauf-links{display:none}
  .hero-inhalt{left:var(--rand);right:var(--rand);bottom:48px;max-width:none}
  .hero-fakt{font-size:16px}
  .hero-welle{width:160px}

  .kacheln-3{grid-template-columns:1fr}
  .kachel .bild-rahmen{aspect-ratio:4/3}

  .tb-reihe{grid-template-columns:1fr}
  .tb-gespiegelt .tb-bild{order:0}
  .tb-gespiegelt .tb-text{order:1}

  .stapel-karte{grid-template-columns:1fr;height:auto;position:static}
  .stapel-bild{aspect-ratio:3/2;height:auto}
  .stapel-text{padding:24px}

  .abschluss-text{font-size:18px}

  .fuss-grid{grid-template-columns:1fr;gap:32px}

  /* Handy ruhiger: keine Scale-Einblendung */
  .js .reveal-bild img{transform:none;transition:none}
  .js .reveal-bild.sichtbar img{transform:none}
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .js .reveal,.js .reveal-bild{opacity:1}
  .js .reveal-bild img,.hero-bild img{transform:none}
  .js .hero .hero-claim,.js .hero .hero-fakt,.js .hero .hero-aktionen{opacity:1}
  .js .hero .hero-welle{opacity:.5}
}

/* Claim immer zweizeilig, keine Silbentrennung */
.claim-zeile{display:block;white-space:nowrap}
*,*::before,*::after{hyphens:none!important;-webkit-hyphens:none!important}
p,li,dd,h1,h2,h3,h4,summary,figcaption,blockquote{overflow-wrap:break-word}
@media (max-width:767px){.claim{font-size:min(40px,10.6vw)}}

/* ---------- Korrekturen Orchestrator (Prüfung 10.10.) ---------- */
.kachel{display:flex;flex-direction:column;align-items:flex-start}
.kachel .bild-rahmen{align-self:stretch}
.kachel .text{flex:1 1 auto}
.stapel-text .klein{text-wrap:balance}
@media (max-width:767px){
  .hero-bild img{object-position:80% 50%}
  .fuss-grid{grid-template-columns:1fr 1fr;gap:32px 24px}
  .fuss-grid .fuss-logo{grid-column:1/-1}
}
html{scroll-padding-top:calc(var(--menue-h, 64px) + 16px)}
.nowrap{white-space:nowrap}

/* ---------- Runde 2 (Review 10.10., 17:30) ---------- */
/* Hero am Laptop: volle Bildschirmhöhe (Menü + Kopfbild = 100svh) */
@media (min-width:768px){
  .hero{height:calc(100svh - var(--menue-h));min-height:560px}
  .hero-bild img{object-position:50% 50%}
}
/* Projekte: ruhiges Raster, gleich breite Karten, kein Stapeln */
.projekt-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px var(--gap);margin-top:var(--block)}
.projekt-karte{display:flex;flex-direction:column;min-width:0}
.projekt-bild{aspect-ratio:3/2;overflow:hidden}
.projekt-bild img{width:100%;height:100%;object-fit:cover;display:block}
.projekt-text{display:flex;flex-direction:column;gap:8px;padding-top:24px}
.projekt-text .klein{color:var(--schiefer);text-wrap:balance}
.projekt-text .text{margin-top:8px;max-width:520px}
.stapel-mehr{margin-top:var(--block)}
.bild-rechts{object-position:85% 50%}
.kachel .text{text-wrap:balance}
@media (max-width:767px){
  .projekt-raster{grid-template-columns:1fr;gap:48px}
  .projekt-text{padding-top:16px}
}
@media (max-width:767px){body.mobilbar-aktiv{padding-bottom:0}}
/* ---------- Runde 3 (Gman 10.10., 19:00): Bilder, Social, drei ruhige Animationen ---------- */
.nur-laptop{}
@media (max-width:767px){.nur-laptop{display:none}}
.projekt-link{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.projekt-link .tl{margin-top:8px;align-self:flex-start}
.projekt-link:hover .tl,.projekt-link:focus-visible .tl{border-color:currentColor}
.fuss-social{display:flex;gap:12px;margin-top:24px}
.fuss-social a{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.22);transition:color var(--t-hover) var(--kurve),border-color var(--t-hover) var(--kurve)}
.fuss-social a:hover,.fuss-social a:focus-visible{color:#fff;border-color:rgba(255,255,255,.6)}
.fuss-social svg{width:18px;height:18px;display:block}
.zitat-foto{width:80px;height:80px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 24px}

/* (a) Hero: sehr langsamer, einmaliger Zoom 1.06 -> 1.0 */
.hero-bild img{transform:scale(1.06);transition:transform 9000ms cubic-bezier(.16,1,.3,1)}
.hero.geladen .hero-bild img{transform:scale(1)}

/* (b) Vorhang-Reveal: Bild öffnet sich von oben nach unten, Text blendet nur ein */
.bild-rahmen picture{display:block;width:100%;height:100%}
.js .reveal-bild{opacity:1;transition:none}
.js .reveal-bild .bild-rahmen{clip-path:inset(0 0 100% 0);transition:clip-path 1250ms cubic-bezier(.7,0,.2,1)}
.js .reveal-bild.sichtbar .bild-rahmen{clip-path:inset(0 0 0 0)}
.js .reveal-bild:not(.fertig) img{transform:scale(1.04);transition:transform 1600ms cubic-bezier(.16,1,.3,1)}
.js .reveal-bild.sichtbar:not(.fertig) img{transform:scale(1)}
.js .reveal-bild .t3,.js .reveal-bild .text,.js .reveal-bild .klein,.js .reveal-bild .tl{opacity:0;transition:opacity 900ms var(--kurve) 350ms}
.js .reveal-bild.sichtbar .t3,.js .reveal-bild.sichtbar .text,.js .reveal-bild.sichtbar .klein,.js .reveal-bild.sichtbar .tl{opacity:1}

/* (c) Parallax nur Laptop: Bild gleitet etwas langsamer als der Text */
@media (min-width:768px){
  .parallax-an .reveal-bild .bild-rahmen picture{transform:translate3d(0,var(--py,0px),0) scale(1.1);will-change:transform}
}

@media (prefers-reduced-motion:reduce){
  .hero-bild img,.hero.geladen .hero-bild img{transform:none;transition:none}
  .js .reveal-bild .bild-rahmen{clip-path:none;transition:none}
  .js .reveal-bild img{transform:none!important;transition:none}
  .js .reveal-bild .t3,.js .reveal-bild .text,.js .reveal-bild .klein,.js .reveal-bild .tl{opacity:1;transition:none}
}

/* ---------- Tempo (Lighthouse 10.10.): ohne Anime.js ---------- */
@media (max-width:767px){.hero-bild img.hero-img{object-position:50% 50%}}
@keyframes welleLauf{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.fuss-welle-lauf{animation:welleLauf 16s linear infinite;animation-play-state:paused}
.fuss-welle.laeuft .fuss-welle-lauf{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.fuss-welle-lauf{animation:none}}

/* =================== VARIANTE B · Runde 3 (Gman 10.10.) =================== */
/* Kopf zweispaltig (Projekte): Titel links, kurzer Text rechts */
.kopf-zweispaltig{display:grid;grid-template-columns:7fr 5fr;gap:var(--gap);align-items:end}
.kopf-intro{color:var(--schiefer);max-width:420px;justify-self:end}
@media (max-width:767px){.kopf-zweispaltig{grid-template-columns:1fr;gap:16px}.kopf-intro{justify-self:start}}

/* ---- Drei Wege: drei hohe Bilder, das berührte wird weich breiter ---- */
.tafeln{display:flex;gap:var(--gap);margin-top:var(--block);height:min(680px,calc(100svh - var(--menue-h) - 96px));min-height:520px}
.weg-tafel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:4px;color:var(--creme);text-decoration:none;background:var(--navy);
  transition:flex-grow 1100ms cubic-bezier(.45,0,.2,1)}
.tafel-bild,.tafel-bild picture,.tafel-bild img{position:absolute;inset:0;width:100%;height:100%}
.tafel-bild img{object-fit:cover;transform:scale(1.02);transition:transform 1400ms cubic-bezier(.45,0,.2,1)}
.tafel-verlauf{position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,46,77,.8) 0%,rgba(18,46,77,.5) 30%,rgba(18,46,77,0) 60%)}
.tafel-inhalt{position:absolute;left:32px;right:32px;bottom:32px}
.tafel-inhalt .t3{color:var(--creme);white-space:nowrap}
.tafel-satz{position:absolute;left:0;bottom:calc(100% + 12px);width:340px;font-size:17px;line-height:1.5;color:rgba(246,241,232,.94);text-wrap:pretty;opacity:0;transition:opacity 600ms var(--kurve)}
.tafel-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:"Satoshi",sans-serif;font-weight:700;font-size:15px;white-space:nowrap;
  border-bottom:1px solid transparent;transition:border-color var(--t-hover) var(--kurve)}
.tafel-link .pfeil{display:inline-block;transition:transform 600ms var(--kurve)}
.weg-tafel:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
@media (hover:hover) and (min-width:768px){
  .tafeln:hover .weg-tafel{flex-grow:.82}
  .tafeln .weg-tafel:hover,.tafeln .weg-tafel:focus-visible{flex-grow:1.36}
  .weg-tafel:hover .tafel-bild img{transform:scale(1)}
  .weg-tafel:hover .tafel-satz,.weg-tafel:focus-visible .tafel-satz{opacity:1;transition:opacity 800ms var(--kurve) 380ms}
  .weg-tafel:hover .tafel-link{border-bottom-color:var(--creme)}
  .weg-tafel:hover .tafel-link .pfeil{transform:translateX(4px)}
}
@media (hover:none),(max-width:767px){.tafel-satz{position:static;width:auto;max-width:340px;margin-top:8px;opacity:1}}
@media (max-width:767px){
  .tafeln{flex-direction:column;height:auto;min-height:0;gap:16px}
  .weg-tafel{flex:none;aspect-ratio:4/5}
  .tafel-inhalt{left:24px;right:24px;bottom:24px}
}

/* ---- Abstände (Leerflächen halbiert) ---- */
.sektion-wege{padding-bottom:calc(var(--sektion) / 2)}
.sektion-projekte{background:var(--creme);padding-top:calc(var(--sektion) / 2)}
#ueber-uns{padding-top:calc(var(--sektion) / 2)}

/* ---- Projekte: nummerierte Vollbild-Folge ---- */
.projekte-kopf{margin-bottom:var(--block)}
.folge{position:relative}
.folge-panel{position:sticky;top:var(--menue-h);height:calc(100svh - var(--menue-h));min-height:560px;overflow:hidden;background:var(--navy)}
.folge-link{display:block;position:relative;height:100%;color:var(--creme);text-decoration:none}
.folge-bild,.folge-bild picture,.folge-bild img{position:absolute;inset:0;width:100%;height:100%}
.folge-bild img{object-fit:cover;transform:scale(var(--zoom,1.04));will-change:transform}
.folge-verlauf{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,46,77,.62) 0%,rgba(18,46,77,.3) 38%,rgba(18,46,77,0) 62%),linear-gradient(0deg,rgba(18,46,77,.3),rgba(18,46,77,0) 40%)}
.folge-inhalt{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-start;padding-top:96px}
/* dezente Abdunkelung direkt hinter dem Text */
.folge-inhalt::before{content:"";position:absolute;left:0;top:24px;width:min(760px,70%);height:520px;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 60% 50% at 30% 45%,rgba(18,46,77,.42),rgba(18,46,77,0) 72%)}
.folge-nr{font-family:"Satoshi",sans-serif;font-weight:500;font-size:14px;letter-spacing:.08em;color:rgba(246,241,232,.75);font-variant-numeric:tabular-nums}
.folge-nr span:first-child{color:var(--creme)}
.folge-ort{font-family:"Satoshi",sans-serif;font-weight:700;font-size:56px;line-height:1.05;letter-spacing:-.02em;margin-top:24px;color:var(--creme)}
.folge-meta{margin-top:16px;font-size:15px;color:rgba(246,241,232,.85)}
.folge-text{margin-top:16px;font-size:20px;line-height:1.5;max-width:440px;text-wrap:pretty}
.folge-ort,.folge-meta,.folge-text,.folge-nr{text-shadow:0 1px 18px rgba(18,46,77,.35)}
.folge-inhalt .tl{margin-top:32px;align-self:flex-start}
.folge-link:hover .tl,.folge-link:focus-visible .tl{border-bottom-color:var(--creme)}
.folge-link:focus-visible{outline:2px solid var(--creme);outline-offset:-6px}
.js .folge-inhalt > *{opacity:0;transition:opacity 900ms var(--kurve)}
.js .folge-panel.sichtbar .folge-inhalt > *{opacity:1}
.js .folge-panel.sichtbar .folge-inhalt > :nth-child(2){transition-delay:120ms}
.js .folge-panel.sichtbar .folge-inhalt > :nth-child(3){transition-delay:200ms}
.js .folge-panel.sichtbar .folge-inhalt > :nth-child(4){transition-delay:280ms}
.js .folge-panel.sichtbar .folge-inhalt > :nth-child(5){transition-delay:360ms}
.folge-mehr{padding-top:var(--block);padding-bottom:calc(var(--sektion) / 2)}
@media (max-width:767px){
  .folge-panel{position:relative;top:auto;height:auto;min-height:0;aspect-ratio:4/5}
  .folge-inhalt{padding-top:40px;padding-bottom:32px;justify-content:flex-end}
  .folge-inhalt::before{top:auto;bottom:0;width:100%;height:70%;background:radial-gradient(ellipse 80% 60% at 30% 70%,rgba(18,46,77,.38),rgba(18,46,77,0) 75%)}
  .folge-verlauf{background:linear-gradient(0deg,rgba(18,46,77,.78) 0%,rgba(18,46,77,.42) 45%,rgba(18,46,77,0) 75%)}
  .folge-ort{font-size:40px;margin-top:12px}
  .folge-text{font-size:17px}
  .folge-inhalt .tl{margin-top:20px}
  .folge-panel + .folge-panel{margin-top:8px}
}

/* ---- Handy-Kopfbild: Claim lesbar (weicher Verlauf, keine Retusche) ---- */
@media (max-width:767px){
  .hero-verlauf{background:linear-gradient(to top,rgba(18,46,77,.82) 0%,rgba(18,46,77,.66) 42%,rgba(18,46,77,.46) 62%,rgba(18,46,77,.18) 80%,rgba(18,46,77,0) 92%)}
  .hero-claim{text-shadow:0 1px 24px rgba(18,46,77,.35)}
}

@media (prefers-reduced-motion:reduce){
  .weg-tafel,.tafel-bild img,.tafel-satz,.tafel-link .pfeil{transition:none}
  .folge-panel{position:relative;top:auto}
  .folge-bild img{transform:none!important}
  .js .folge-inhalt > *{opacity:1;transition:none}
}
/* Lesbarkeit Text auf den drei Wegen */
.tafel-verlauf::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,46,77,.45) 0%,rgba(18,46,77,.3) 40%,rgba(18,46,77,0) 70%);opacity:0;transition:opacity 900ms var(--kurve)}
@media (hover:hover) and (min-width:768px){.weg-tafel:hover .tafel-verlauf::after,.weg-tafel:focus-visible .tafel-verlauf::after{opacity:1}}
@media (hover:none),(max-width:767px){.tafel-verlauf::after{opacity:1}}
/* Service-Bild: Person und Wärmepumpe im Bild halten */
.tafel-bild img.bild-service{object-position:55% 30%}

/* ==== seite.css ==== */
/* ===== Seite «Neuer Pool»: Ergänzungen zu start.css (Startseite B unverändert) ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Menü: aktive Seite */
.menue-nav .tl.aktiv{border-bottom-color:var(--navy)}
.mobilpanel-nav a[aria-current]{color:var(--terra)}

/* Kopfbild */
.brotkrume{font-size:14px;color:rgba(255,255,255,.82);margin-bottom:16px}
.brotkrume a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.brotkrume a:hover{border-bottom-color:#fff}
.hero-unter{font-size:20px;line-height:1.5;margin-top:24px;color:#fff;max-width:560px}
.hero-unter+.hero-fakt{margin-top:8px;font-size:17px}
.btn-hell{border:1.5px solid rgba(246,241,232,.85);color:var(--creme);background:transparent}
.btn-hell:hover{background:var(--creme);color:var(--navy)}
.hero-aktionen{gap:16px}
.js .hero .brotkrume,.js .hero .hero-unter{opacity:0;transition:opacity 600ms var(--kurve)}
.js .hero.geladen .brotkrume{opacity:1;transition-delay:120ms}
.js .hero.geladen .hero-unter{opacity:1;transition-delay:240ms}

/* Wünsche: 4 Tafeln, Mehrfachwahl */
.wunsch{font:inherit;text-align:left;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wunsch .tafel-satz{width:300px}
.wunsch-haken{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;
  border:1.5px solid rgba(246,241,232,.8);color:var(--navy);background:rgba(18,46,77,.15);display:flex;align-items:center;justify-content:center;
  transition:background-color var(--t-hover) var(--kurve),border-color var(--t-hover) var(--kurve)}
.wunsch-haken svg{width:20px;height:20px;opacity:0;transition:opacity var(--t-hover) var(--kurve)}
.wunsch[aria-pressed="true"] .wunsch-haken{background:var(--creme);border-color:var(--creme)}
.wunsch[aria-pressed="true"] .wunsch-haken svg{opacity:1}
.wunsch::after{content:"";position:absolute;inset:0;border:2px solid var(--creme);border-radius:4px;opacity:0;pointer-events:none;transition:opacity var(--t-hover) var(--kurve)}
.wunsch[aria-pressed="true"]::after{opacity:1}
.wunsch:focus-visible{outline:2px solid var(--navy);outline-offset:4px}

.ergebnis{margin-top:var(--block);min-height:24px}
.ergebnis-titel{font-family:"Satoshi",sans-serif;font-weight:700;font-size:24px;line-height:1.2;color:var(--navy)}
.ergebnis-karten{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:24px}
.ergebnis-karte a{display:flex;flex-direction:column;gap:4px;height:100%;padding:24px;background:#fff;border:1px solid var(--linie);border-radius:4px;
  text-decoration:none;color:var(--text);transition:border-color var(--t-hover) var(--kurve)}
.ergebnis-karte a:hover{border-color:var(--navy)}
.ergebnis-karte b{font-family:"Satoshi",sans-serif;font-weight:700;font-size:20px;color:var(--navy)}
.ergebnis-karte span{font-size:15px;color:var(--schiefer)}
.ergebnis-auch{margin-top:16px}
.ergebnis-aktionen{display:flex;align-items:center;gap:32px;margin-top:32px;flex-wrap:wrap}
.ergebnis-voll{animation:ergebnisEin 350ms var(--kurve)}
@keyframes ergebnisEin{from{opacity:0}to{opacity:1}}

/* Bauarten: gleiche Tafeln, niedriger */
.sektion-bauarten{padding-top:calc(var(--sektion) / 2)}
.tafeln-niedrig{height:480px;min-height:0}
.tafel-kenn{margin-top:12px;font-size:14px;color:rgba(246,241,232,.85)}
.herstellerfoto{position:absolute;top:16px;right:16px;z-index:2;width:24px;height:24px;border-radius:50%;background:rgba(18,46,77,.55);color:var(--creme);
  font:600 13px/24px "Satoshi",sans-serif;text-align:center;cursor:help}
.vergleich{margin-top:32px}
.vergleich summary{cursor:pointer;list-style:none;display:inline-block}
.vergleich summary::-webkit-details-marker{display:none}
.vergleich summary::after{content:" +";}
.vergleich[open] summary::after{content:" –"}
.vergleich-tabelle{margin-top:24px;overflow-x:auto}
.vergleich table{width:100%;border-collapse:collapse;font-size:15px;min-width:720px}
.vergleich th,.vergleich td{text-align:left;vertical-align:top;padding:16px 16px 16px 0;border-bottom:1px solid var(--linie)}
.vergleich thead th{font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--schiefer)}
.vergleich tbody th{font-family:"Satoshi",sans-serif;font-weight:700;color:var(--navy)}

/* Optionen */
.sektion-optionen{padding-top:calc(var(--sektion) / 2)}
.coverseal-reihe{margin-top:var(--block)}
.coverseal-reihe .t2{margin-top:16px;margin-bottom:24px}
.kacheln-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:var(--block)}
.option .t3{margin-top:0}
.option .text{font-size:16px}

/* Ablauf: ruhige Schrittliste */
.schritte{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px var(--gap);margin-top:var(--block)}
.schritt-bild{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.schritt-bild picture,.schritt-bild img{width:100%;height:100%;display:block;object-fit:cover}
.schritt-nr{margin-top:16px;font-family:"Satoshi",sans-serif;font-weight:500;font-size:14px;letter-spacing:.08em;color:var(--schiefer);font-variant-numeric:tabular-nums}
.schritt-titel{margin-top:4px;font-family:"Satoshi",sans-serif;font-weight:700;font-size:20px;line-height:1.2;color:var(--navy)}
.schritt-text{margin-top:8px;font-size:15px;line-height:1.5;color:var(--text);text-wrap:pretty}
.ablauf-mehr{margin-top:var(--block)}
#ablauf .kopf-zweispaltig .kopf-intro{max-width:460px}

/* Kundenstimme: dezenter Platzhalter */
.stimme-platz{padding:96px 0}
.stimme-folgt{margin-top:16px;font-family:"Satoshi",sans-serif;font-weight:500;font-size:24px;color:var(--schiefer)}

/* FAQ */
.faq{margin-top:48px;max-width:880px;border-top:1px solid var(--linie)}
.faq-eintrag{border-bottom:1px solid var(--linie)}
.faq-eintrag summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0}
.faq-eintrag summary::-webkit-details-marker{display:none}
.faq-frage{font-family:"Satoshi",sans-serif;font-weight:700;font-size:20px;line-height:1.3;color:var(--navy)}
.faq-zeichen{position:relative;flex:none;width:16px;height:16px}
.faq-zeichen::before,.faq-zeichen::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:var(--navy);transition:transform 300ms var(--kurve)}
.faq-zeichen::after{transform:rotate(90deg)}
.faq-eintrag[open] .faq-zeichen::after{transform:rotate(0)}
.faq-antwort{padding:0 0 24px}
.faq-eintrag[open] .faq-antwort{animation:ergebnisEin 300ms var(--kurve)}
.faq-eintrag summary:hover .faq-frage{color:var(--terra-dunkel)}

/* Ratgeber */
.ratgeber-reihe{grid-template-columns:6fr 6fr}
.ratgeber-reihe .t2{margin-top:16px;margin-bottom:24px}
.ratgeber-form{margin-top:32px;max-width:520px}
.ratgeber-zeile{display:flex;gap:8px}
.ratgeber-zeile input{flex:1;min-width:0;height:48px;padding:0 16px;border:1.5px solid var(--linie);border-radius:6px;background:#fff;font:inherit;font-size:16px;color:var(--text)}
.ratgeber-zeile input:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.ratgeber-haken{display:flex;gap:12px;align-items:flex-start;margin-top:16px;font-size:15px;line-height:1.5;cursor:pointer}
.ratgeber-haken input{width:18px;height:18px;margin-top:2px;accent-color:var(--navy);flex:none}
.ratgeber-hinweis{margin-top:12px;min-height:21px}

/* Tablet */
@media (max-width:1023px){
  .kacheln-4,.schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ergebnis-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wunsch .tafel-satz{width:240px}
}
/* Handy: ruhig, 2×2 */
@media (max-width:767px){
  .hero-unter{font-size:18px;margin-top:16px}
  .hero-unter+.hero-fakt{font-size:15px}
  .brotkrume{margin-bottom:12px;font-size:13px}
  .hero-aktionen{gap:12px;margin-top:24px}
  .hero-aktionen .btn{padding:0 18px}
  .tafeln-4{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .tafeln-4 .weg-tafel{aspect-ratio:4/5}
  .tafeln-4 .tafel-inhalt{left:14px;right:14px;bottom:14px}
  .tafeln-4 .t3{font-size:18px;white-space:normal}
  .tafeln-4 .tafel-satz{display:none}
  .tafeln-4 .tafel-link{margin-top:8px;font-size:14px}
  .wunsch-haken{top:12px;right:12px;width:30px;height:30px}
  .tafeln-niedrig{height:auto}
  .tafeln-niedrig .weg-tafel{aspect-ratio:4/3}
  .tafeln-niedrig .tafel-satz{display:none}
  .ergebnis-karten{grid-template-columns:1fr;gap:12px}
  .ergebnis-karte a{padding:16px 20px}
  .kacheln-4{grid-template-columns:1fr 1fr;gap:24px 12px}
  .option .t3{font-size:18px}
  .option .text{font-size:15px}
  .option .tl{display:none}
  .kachel.option .bild-rahmen{margin-bottom:16px}
  .schritte{grid-template-columns:1fr 1fr;gap:28px 12px}
  .schritt-titel{font-size:17px}
  .schritt-text{font-size:14px}
  .stimme-platz{padding:64px 0}
  .ratgeber-reihe{grid-template-columns:1fr}
  .ratgeber-zeile{flex-direction:column}
  .faq-frage{font-size:18px}
  .faq-eintrag summary{padding:20px 0}
}
@media (prefers-reduced-motion:reduce){.ergebnis-voll,.faq-eintrag[open] .faq-antwort{animation:none}}

/* ===== Korrekturrunde Juroren (10.10., 22 Uhr) ===== */
.hero-region{font-size:17px;line-height:1.5;margin-top:8px;color:rgba(255,255,255,.9);max-width:560px}
.hero-region+.hero-fakt{margin-top:8px;font-size:17px}
.js .hero .hero-region{opacity:0;transition:opacity 600ms var(--kurve)}
.js .hero.geladen .hero-region{opacity:1;transition-delay:260ms}
.sektion-bauarten{padding-bottom:calc(var(--sektion) / 2)}
#technik{padding-top:calc(var(--sektion) / 2)}
@media (max-width:767px){.hero-region,.hero-region+.hero-fakt{font-size:15px}}
@media (prefers-reduced-motion:reduce){.js .hero .hero-region{opacity:1}}
.ergebnis-voll{animation:none}

/* ===== Gman 11.10., 00:15: Wunsch-Kacheln niedriger, Ergebnis im selben Bildschirm ===== */
.tafeln-4{height:280px;min-height:0;margin-top:32px}
.tafeln-4 .tafel-inhalt{left:24px;right:24px;bottom:24px}
.tafeln-4 .tafel-link{margin-top:10px}
.tafeln-4 .wunsch-haken{top:16px;right:16px;width:32px;height:32px}
.ergebnis{margin-top:32px}
.ergebnis-karten{margin-top:16px}
.ergebnis-karte a{padding:20px 24px}
.ergebnis-auch{margin-top:12px}
.ergebnis-aktionen{margin-top:24px}
@media (max-width:767px){
  .tafeln-4{height:auto;margin-top:24px}
  .tafeln-4 .weg-tafel{aspect-ratio:4/3}
  .tafeln-4 .tafel-inhalt{left:12px;right:12px;bottom:10px}
  .tafeln-4 .t3{font-size:16px}
  .tafeln-4 .tafel-link{margin-top:4px;font-size:13px}
  .tafeln-4 .wunsch-haken{top:8px;right:8px;width:26px;height:26px}
  .tafeln-4 .wunsch-haken svg{width:16px;height:16px}
  .ergebnis{margin-top:24px}
}

/* ===== Gman 11.10.: Abdeckung allgemein (drei Arten), Coverseal leicht hervorgehoben ===== */
.abdeckung-kopf{margin-top:var(--block)}
.abdeckung-kopf .t2{margin-top:16px}
.kacheln-3.abdeckungen{margin-top:32px}
.abdeckung .bild-rahmen{position:relative}
.empfehlung{position:absolute;left:16px;top:16px;z-index:1;background:var(--creme);color:var(--navy);
  font-family:"Satoshi",sans-serif;font-weight:600;font-size:13px;letter-spacing:.02em;padding:6px 12px;border-radius:4px}
.abdeckung .text{font-size:16px}
@media (max-width:767px){
  .kacheln-3.abdeckungen{gap:32px}
  .abdeckung .tl{display:none}
}

/* ==== compass.css ==== */
/* ===== Compass-Übersicht + Familienseite: Ergänzungen zu start.css / seite.css (B unverändert) ===== */

/* Kopfbild */
.hero-label{margin-bottom:16px}
.hero-unter{max-width:620px}
.js .hero .hero-label{opacity:0;transition:opacity 600ms var(--kurve)}
.js .hero.geladen .hero-label{opacity:1;transition-delay:60ms}

/* Fakten unter dem Kopfbild, ruhig */
.fakten{border-bottom:1px solid var(--linie)}
.fakten-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.fakt{padding:40px 32px 40px 0;border-right:1px solid var(--linie)}
.fakt+.fakt{padding-left:32px}
.fakt:last-child{border-right:0}
.fakt-gross{font-family:"Satoshi",sans-serif;font-weight:700;font-size:32px;line-height:1.1;color:var(--navy);letter-spacing:-.01em}
.fakt-klein{margin-top:8px;font-size:15px;line-height:1.5;color:var(--schiefer);max-width:340px}

/* Finde dein Mass */
.sektion-mass{padding-top:96px}
.cf{margin-top:40px}
.cf-chips{display:flex;flex-wrap:wrap;gap:8px}
.cf-chip,.cf-opt,.g-tab{font-family:"Satoshi",sans-serif;font-weight:600;font-size:15px;line-height:1;color:var(--navy);background:transparent;
  border:1.5px solid var(--navy);border-radius:999px;height:44px;padding:0 20px;cursor:pointer;
  transition:background-color var(--t-hover) var(--kurve),color var(--t-hover) var(--kurve),border-color var(--t-hover) var(--kurve)}
.cf-chip:hover,.cf-opt:hover,.g-tab:hover{background:rgba(18,46,77,.06)}
.cf-chip[aria-pressed="true"],.cf-opt[aria-pressed="true"],.g-tab[aria-pressed="true"],.g-tab[aria-selected="true"]{background:var(--navy);color:var(--creme)}
.cf-chip:focus-visible,.cf-opt:focus-visible,.g-tab:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.cf-filter{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px;margin-top:24px}
.cf-seg{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cf-seg-titel{font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--schiefer);margin-right:8px}
.cf-opt{height:36px;padding:0 14px;font-size:14px;border-color:var(--linie)}
.cf-opt[aria-pressed="true"]{border-color:var(--navy)}
.cf-ergebnis{margin-top:32px;font-family:"Satoshi",sans-serif;font-weight:700;font-size:22px;color:var(--navy)}
.cf-hinweis{margin-top:6px;max-width:680px}

/* Familien-Raster */
.fam-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gap);margin-top:40px}
.fam[hidden]{display:none}
.fam-kachel{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--navy);color:var(--creme);text-decoration:none}
.fam-bild,.fam-bild picture,.fam-bild img{position:absolute;inset:0;width:100%;height:100%}
.fam-bild img{object-fit:cover;transform:scale(1.04);transition:transform 1200ms var(--kurve)}
.fam-verlauf{position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,46,77,.9) 0%,rgba(18,46,77,.62) 36%,rgba(18,46,77,.12) 66%,rgba(18,46,77,0) 80%);transition:background 800ms var(--kurve)}
.fam-inhalt{position:absolute;left:24px;right:24px;bottom:20px}
.fam-name{font-family:"Satoshi",sans-serif;font-weight:700;font-size:26px;line-height:1.1;color:var(--creme);letter-spacing:-.01em}
.fam-alt{display:block;font-weight:500;font-size:13px;letter-spacing:.02em;color:rgba(246,241,232,.8);margin-top:4px}
.fam-mass{margin-top:6px;font-size:14px;color:rgba(246,241,232,.9);font-variant-numeric:tabular-nums}
.fam-satz,.fam-chips{max-height:0;opacity:0;overflow:hidden;transition:opacity 600ms var(--kurve),max-height 600ms var(--kurve)}
.fam-satz{font-size:15px;line-height:1.45;color:rgba(246,241,232,.95);text-wrap:pretty}
.fam-chips{list-style:none;display:flex;flex-wrap:wrap;gap:4px 6px}
.fam-chips li{font-size:12px;line-height:1;padding:5px 9px;border:1px solid rgba(246,241,232,.55);border-radius:999px;color:var(--creme)}
.fam-badge{position:absolute;top:16px;left:16px;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:var(--creme);color:var(--navy);padding:6px 10px;border-radius:3px}
.fam-planbild{position:absolute;top:16px;right:16px;font-size:12px;background:rgba(18,46,77,.7);color:var(--creme);padding:4px 8px;border-radius:3px}
@media (hover:hover) and (min-width:768px){
  .fam-kachel:hover .fam-bild img,.fam-kachel:focus-visible .fam-bild img{transform:scale(1)}
  .fam-kachel:hover .fam-verlauf,.fam-kachel:focus-visible .fam-verlauf{background:linear-gradient(0deg,rgba(18,46,77,.9) 0%,rgba(18,46,77,.6) 50%,rgba(18,46,77,.1) 85%)}
  .fam-kachel:hover .fam-satz,.fam-kachel:hover .fam-chips,.fam-kachel:focus-visible .fam-satz,.fam-kachel:focus-visible .fam-chips{max-height:120px;opacity:1;transition:opacity 800ms var(--kurve) 380ms,max-height 600ms var(--kurve)}
  .fam-kachel:hover .fam-satz{margin-top:10px}
  .fam-kachel:hover .fam-chips{margin-top:10px}
}
.fam-kachel:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.fam-masse{border-bottom:1px solid var(--linie)}
.fam-masse summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-family:"Satoshi",sans-serif;font-weight:600;font-size:15px;color:var(--navy)}
.fam-masse summary::-webkit-details-marker{display:none}
.fam-plus{position:relative;width:12px;height:12px}
.fam-plus::before,.fam-plus::after{content:"";position:absolute;left:0;top:5px;width:12px;height:1.5px;background:var(--navy)}
.fam-plus::after{transform:rotate(90deg);transition:transform 300ms var(--kurve)}
.fam-masse[open] .fam-plus::after{transform:rotate(0)}
.fam-tabelle{padding-bottom:20px;overflow-x:auto}
.fam-tabelle table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.fam-tabelle th,.fam-tabelle td{text-align:left;vertical-align:top;padding:8px 10px 8px 0;border-bottom:1px solid var(--linie)}
.fam-tabelle thead th{font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--schiefer)}
.fam-tabelle tbody th{font-family:"Satoshi",sans-serif;font-weight:700;color:var(--navy)}
.fam-hinweis{display:block;font-weight:400;font-family:"Figtree",sans-serif;font-size:12px;color:var(--schiefer)}
.fam-hinweis-zeile{margin-top:10px}
.fam-link{margin-top:14px}
.fam-tipp{background:var(--navy);border-radius:4px;color:var(--creme);display:flex;align-items:flex-end;aspect-ratio:4/3;align-self:start}
.fam-tipp-innen{padding:32px}
.fam-tipp .t3{color:var(--creme)}
.fam-tipp .text{color:rgba(246,241,232,.9);margin:10px 0 16px;font-size:16px}
.fam-mehr{display:none;margin-top:32px}

/* Warum Compass */
.warum-kacheln{margin-top:48px}
.warum-gut{margin-top:48px;max-width:780px}
.technik-detail{margin-top:20px}
.technik-liste{margin-top:20px;max-width:820px;list-style:none;border-top:1px solid var(--linie)}
.technik-liste li{padding:14px 0;border-bottom:1px solid var(--linie);font-size:16px;line-height:1.55}
.technik-liste strong{font-weight:600;color:var(--navy)}

/* Familienseite */
.sektion-besonder{padding-top:calc(var(--sektion) / 2)}
.besonder-hinweis{margin-top:24px}
.kacheln-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:48px}
.kacheln-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);margin-top:24px}
.og-titel{margin-top:48px;padding-bottom:10px;border-bottom:1px solid var(--linie);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--schiefer)}
.option-klein .bild-rahmen{margin-bottom:14px}
.oc-titel{font-family:"Satoshi",sans-serif;font-weight:700;font-size:18px;line-height:1.25;color:var(--navy)}
.oc-text{margin-top:6px;font-size:14px;line-height:1.5;color:var(--text)}
.og-fuss{margin-top:40px}

/* Grössen */
.g-tabs{display:none;gap:8px;margin-top:32px}
.g-tab{flex:1;border-radius:6px}
.gk-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:48px}
.gk{background:#fff;border:1px solid var(--linie);border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.gk-bild{aspect-ratio:16/10}
.gk-bild img{width:100%;height:100%;object-fit:cover}
.gk-text{padding:24px 24px 28px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.gk-liste{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:16px 0;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
.gk-liste dt{color:var(--schiefer)}
.gk-liste dd{text-align:right;font-weight:600;color:var(--navy)}
.gk-best{display:block;font-weight:400;font-size:12px;color:var(--schiefer)}
.gk-hinweis{margin-bottom:14px}
.gk-text .tl{margin-top:auto}
.gk-text .tl+.gk-hinweis{margin-top:8px;margin-bottom:0}
.gk-fuss{margin-top:24px;max-width:900px}

/* Aufbau: Becken-Zeichnung (Entwurf) */
.sektion-aufbau{padding-top:calc(var(--sektion) / 2)}
.becken-tabs{display:flex;max-width:360px}
.becken{margin-top:24px;background:var(--creme)}
.becken-flaeche{aspect-ratio:1000/640;border:1px solid var(--linie);border-radius:4px;background:#FBF8F2}
.becken-svg{display:block;width:100%;height:100%}
.becken-notiz{margin-top:10px}
.becken-svg .k-linie{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.becken-svg .k-fein{fill:none;stroke:var(--navy);stroke-width:1.3;stroke-dasharray:6 5;opacity:.75}
.becken-svg .k-stufe{fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linecap:round}
.becken-svg .k-wasser{fill:#BFDCEB;opacity:.75}
.becken-svg .k-welle{fill:none;stroke:var(--navy);stroke-width:1.4;opacity:.6}
.becken-svg .k-schacht{fill:rgba(18,46,77,.07);stroke:var(--navy);stroke-width:1.5}
.becken-svg .k-mass{fill:none;stroke:var(--schiefer);stroke-width:1}
.becken-svg .k-label{font-family:"Figtree",sans-serif;font-size:15px;fill:var(--schiefer)}
.becken-svg .k-label-b{font-family:"Satoshi",sans-serif;font-weight:700;font-size:17px;fill:var(--navy)}
.becken-svg .k-zahl{font-family:"Satoshi",sans-serif;font-weight:700;font-size:18px;fill:var(--navy);font-variant-numeric:tabular-nums}
.becken-svg .k-titel{font-weight:600;font-size:12px;letter-spacing:.14em;fill:var(--schiefer)}
.becken-svg .k-leit{fill:none;stroke:var(--schiefer);stroke-width:1;opacity:.7}

/* Farben */
.fw{display:grid;grid-template-columns:7fr 5fr;gap:48px;margin-top:48px;align-items:start}
.fw-bild .bild-rahmen{border-radius:4px;background:var(--sand)}
.fw-img{width:100%;height:100%;object-fit:cover;transition:opacity 400ms var(--kurve)}
.fw-img.wechsel{opacity:0}
.fw-bild.muster .fw-img{object-fit:contain;background:#fff}
.fw-bild figcaption{margin-top:14px}
.fw-name{display:block;font-family:"Satoshi",sans-serif;font-weight:700;font-size:20px;color:var(--navy)}
.fw-gruppe+.fw-gruppe{margin-top:28px}
.fw-titel{font-family:"Satoshi",sans-serif;font-weight:700;font-size:18px;color:var(--navy)}
.fw-reihe{display:flex;flex-wrap:wrap;gap:12px 8px;margin-top:12px}
.fw-muster{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;padding:0;background:none;border:0;cursor:pointer;font-size:12px;line-height:1.25;color:var(--text);text-align:center}
.fw-muster img{width:48px;height:48px;border-radius:50%;border:1px solid rgba(18,46,77,.18);transition:box-shadow var(--t-hover) var(--kurve)}
.fw-muster[aria-pressed="true"] img{box-shadow:0 0 0 3px var(--sand),0 0 0 5px var(--navy)}
.fw-muster:hover img{box-shadow:0 0 0 3px var(--sand),0 0 0 4px rgba(18,46,77,.5)}
.fw-muster[aria-pressed="true"]:hover img{box-shadow:0 0 0 3px var(--sand),0 0 0 5px var(--navy)}
.fw-muster:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:4px}
.fw-fuss{margin-top:28px}

/* Weitere Projekte */
.weitere{padding-top:var(--block);padding-bottom:calc(var(--sektion) / 2)}
.weitere-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,400px));gap:var(--gap);margin-top:24px}
.weitere-reihe .bild-rahmen{margin-bottom:14px}
.weitere-ort{font-family:"Satoshi",sans-serif;font-weight:700;font-size:20px;color:var(--navy)}
.weitere-text{margin-top:40px}
.weitere .btn{margin-top:24px}

/* Tablet */
@media (max-width:1023px){
  .fam-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kacheln-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gk-reihe{grid-template-columns:1fr 1fr}
  .fw{grid-template-columns:1fr}
}
/* Handy: ruhig */
@media (max-width:767px){
  .fakten-reihe{grid-template-columns:1fr}
  .fakt,.fakt+.fakt{padding:20px 0;border-right:0;border-bottom:1px solid var(--linie)}
  .fakt:last-child{border-bottom:0}
  .fakt-gross{font-size:24px}
  .sektion-mass{padding-top:64px}
  .cf-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--rand) * -1);padding:2px var(--rand) 6px;scrollbar-width:none}
  .cf-chips::-webkit-scrollbar{display:none}
  .cf-chip{flex:none;height:40px;padding:0 16px;font-size:14px}
  .cf-filter{gap:12px}
  .cf-seg-titel{width:100%;margin:0 0 2px}
  .cf-opt{height:34px;padding:0 12px;font-size:13px}
  .cf-ergebnis{font-size:19px;margin-top:24px}
  .fam-raster{grid-template-columns:1fr 1fr;gap:20px 12px;margin-top:28px}
  .fam-inhalt{left:12px;right:12px;bottom:10px}
  .fam-name{font-size:17px}
  .fam-alt{font-size:11px}
  .fam-mass{font-size:12px;margin-top:2px}
  .fam-badge{top:8px;left:8px;font-size:9px;padding:4px 6px}
  .fam-planbild{display:none}
  .fam-masse summary{padding:12px 0;font-size:14px}
  .fam-tabelle table{font-size:12.5px}
  .fam-tabelle thead th{font-size:10px;letter-spacing:.06em}
  .js .fam-raster:not(.alle):not(.gefiltert) .fam[data-mehr]{display:none}
  .js .fam-mehr{display:block}
  .js .fam-raster.alle ~ .fam-mehr,.js .fam-raster.gefiltert ~ .fam-mehr{display:none}
  .fam-tipp{grid-column:1/-1;aspect-ratio:auto}
  .fam-tipp-innen{padding:24px}
  .fam[open-wide],.fam:has(.fam-masse[open]){grid-column:1/-1}
  .kacheln-2{grid-template-columns:1fr;gap:40px}
  .kacheln-5{grid-template-columns:1fr 1fr;gap:24px 12px}
  .oc-titel{font-size:16px}
  .oc-text{font-size:13px}
  .g-tabs{display:flex}
  .becken-tabs{max-width:none}
  .becken-flaeche{aspect-ratio:520/820}
  .gk-reihe{grid-template-columns:1fr;margin-top:16px}
  .js .gk:not(.aktiv){display:none}
  .fw{gap:24px;margin-top:32px}
  .fw-muster{width:64px;font-size:11px}
  .weitere-reihe{grid-template-columns:1fr 1fr;gap:12px}
  .weitere-ort{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .fam-bild img,.fam-verlauf,.fam-satz,.fam-chips,.fw-img{transition:none}
  .fam-bild img{transform:none}
}
.fam{align-self:start}

/* Besonderheiten = Zeichnung (sticky) + Punkte aus Daten */
.bp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;margin-top:48px;align-items:start}
.bp-zeichnung{position:sticky;top:96px}
.bp .becken{margin-top:16px}
.bp-punkte{list-style:none;padding:8vh 0 20vh}
.bp-punkt{min-height:46vh;display:flex;flex-direction:column;justify-content:center}
.bp-punkt.ohne .bp-nr{display:none}
.bp-punkt .t3{display:flex;align-items:center;gap:12px}
.bp-nr{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--creme);font-size:14px;font-weight:700}
.bp-punkt .text{margin-top:10px}
.js .bp.scroll .bp-punkt{opacity:.32;transition:opacity 700ms var(--kurve)}
.js .bp.scroll .bp-punkt.aktiv{opacity:1}
.becken-svg [data-s]{transition:opacity 700ms var(--kurve)}
.becken-svg.fokus [data-s]{opacity:.24!important}
.becken-svg.fokus [data-s="rand"],.becken-svg.fokus [data-s="masse"]{opacity:.55!important}
.becken-svg.fokus [data-s].an{opacity:1!important}
.becken-svg.fokus .an .k-stufe,.becken-svg.fokus .an .k-fein{stroke-width:2.2;opacity:1}
.besonder-hinweis{margin-top:0}
@media (max-width:1023px){.bp{gap:40px;grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
@media (max-width:767px){
  .bp{grid-template-columns:1fr;gap:32px;margin-top:32px}
  .bp-zeichnung{position:static}
  .bp-punkte{padding:0;display:grid;gap:28px}
  .bp-punkt{min-height:0}
  .besonder-hinweis{margin-top:28px}
}
@media (prefers-reduced-motion:reduce){.becken-svg [data-s],.js .bp.scroll .bp-punkt{transition:none}}
.option-klein .bild-rahmen{position:relative}
.oc-badge{position:absolute;top:10px;left:10px;font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;background:var(--creme);color:var(--navy);padding:5px 8px;border-radius:3px;max-width:calc(100% - 20px)}
@media (max-width:767px){.oc-badge{top:6px;left:6px;font-size:9px;letter-spacing:.08em;padding:4px 6px}}

/* ===== Generische Familienseiten (18 Familien, 11.10.2026) ===== */
.gk-plan{background:#ececec}
.gk-plan img{object-fit:contain!important}
.bild-plan{background:#ececec}
.bild-plan img{object-fit:contain!important}
.gk-reihe.gk-eins{grid-template-columns:minmax(0,560px)}
.g-tabs{flex-wrap:wrap}
.g-tab{min-width:52px;white-space:nowrap}
.becken-plan{background:#ececec;border-radius:4px;overflow:hidden}
.becken-plan .plan-bild img{display:block;width:100%;height:auto}
.becken-plan .becken-notiz{padding:10px 14px;background:var(--creme,#F6F1E8)}
.bp-plan .bp-punkt{min-height:0;padding:20px 0}
.hero-plan .hero-bild{background:#ececec}
.hero-plan .hero-img{object-fit:contain!important;object-position:right center}
@media (max-width:767px){.hero-plan .hero-img{object-position:center 20%}}
.g-tabs.viele .g-tab{flex:0 0 auto;min-width:56px}
.hero-plan .hero-img{box-sizing:border-box;padding:120px 5vw 60px 48vw;background:#ececec}
@media (max-width:767px){.hero-plan .hero-img{padding:84px 20px 54vh;object-position:center top}}

/* Filter-Leiste Laptop (Juroren-Runde 11.10.2026) */
.cf-leiste{display:none}
@media (min-width:1024px){
  .cf-leiste{display:block;position:fixed;left:0;right:0;top:var(--menue-h);z-index:150;background:rgba(246,241,232,.97);border-bottom:1px solid var(--linie);
    transform:translateY(-110%);opacity:0;visibility:hidden;transition:transform 450ms var(--kurve),opacity 450ms var(--kurve),visibility 0s 450ms}
  .cf-leiste.an{transform:none;opacity:1;visibility:visible;transition:transform 450ms var(--kurve),opacity 450ms var(--kurve)}
  .cf-leiste-innen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;padding-top:10px;padding-bottom:10px}
  .cf-leiste .cf-chips{gap:6px}
  .cf-leiste .cf-chip{height:32px;padding:0 12px;font-size:13px}
  .cf-leiste .cf-filter{margin-top:0;gap:8px 24px}
  .cf-leiste .cf-seg-titel{font-size:11px;margin-right:4px}
  .cf-leiste .cf-opt{height:30px;padding:0 10px;font-size:13px}
  .cf-leiste .cf-chips{order:1}
  .cf-leiste-zahl{order:2;margin-left:auto;font-family:"Satoshi",sans-serif;font-weight:700;font-size:14px;color:var(--navy)}
  .cf-leiste .cf-filter{order:3;flex-basis:100%}
  .cf-leiste-innen{gap:6px 28px;padding-top:8px;padding-bottom:8px}
}
@media (prefers-reduced-motion:reduce){.cf-leiste,.cf-leiste.an{transition:none}}
/* Besonderheiten am Laptop straffer */
@media (min-width:768px){
  .bp-punkt{min-height:30vh}
  .bp-punkte{padding:4vh 0 12vh}
}
.fam-tipp-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px}
.cf-reset[hidden]{display:none!important}

/* ==== linien.css ==== */
/* ===== WaterRows, Edelstahl, Beton: Ergänzungen zu start.css / seite.css / compass.css (B unverändert) ===== */
/* Herstellerfoto im Kopfbild */
.hero .herstellerfoto{top:auto;bottom:24px;right:24px;z-index:3}
.bild-rahmen .herstellerfoto{top:10px;right:10px;width:22px;height:22px;font-size:12px;line-height:22px}
.fam-kachel .herstellerfoto{top:12px;right:12px;width:22px;height:22px;font-size:12px;line-height:22px}

/* Zeichnungen (SVG aus gen.py) */
.lz{margin-top:16px}
.lz-flaeche{border:1px solid var(--linie);border-radius:4px;background:#FBF8F2;overflow:hidden}
.lz-svg{display:block;width:100%;height:auto}
.lz-H{display:none}
.lz g[hidden],.schicht g[hidden]{display:none}
.js .lz.wartet [data-s]{opacity:0}
.becken-svg .k-led{fill:none;stroke:var(--terra);stroke-width:3.2;stroke-linecap:round}
.becken-svg .k-bank{fill:rgba(18,46,77,.07);stroke:var(--navy);stroke-width:1.5}
.becken-svg .k-liege{fill:#DCEFF6;stroke:var(--navy);stroke-width:1.5}
.becken-svg .k-modul{fill:none;stroke:var(--navy);stroke-width:1.4;stroke-dasharray:5 4}
.becken-svg .k-rahmen{fill:none;stroke:#8d877b;stroke-width:5;stroke-opacity:.55}
.becken-svg .k-akzent{fill:none;stroke:var(--terra);stroke-width:3;stroke-linecap:round}
.becken-svg .k-rinne{fill:none;stroke:var(--navy);stroke-width:12;stroke-opacity:.28;stroke-linejoin:round}
.becken-svg .k-flaeche{opacity:.6}
.becken-svg .k-fein.k-draw{stroke-dasharray:6 5}
.lz-tabs{display:flex;flex-wrap:wrap;gap:8px}
.lz-tabs+.lz-tabs{margin-top:8px}
.lz-tabs .g-tab{flex:0 0 auto;min-width:56px;height:38px;padding:0 14px;font-size:14px}
.lz-tabs-titel{width:100%;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--schiefer)}
@media (max-width:767px){
  .lz-L{display:none}.lz-H{display:block}
  .lz-tabs .g-tab{height:36px;padding:0 12px;font-size:13px;min-width:48px}
}

/* Übersicht: Farben ruhig */
.farbreihe{display:flex;flex-wrap:wrap;gap:20px 16px;margin-top:32px;list-style:none}
.farbreihe li{display:flex;flex-direction:column;align-items:center;gap:8px;width:96px;font-size:13px;line-height:1.3;text-align:center;color:var(--text)}
.farbreihe img{width:64px;height:64px;border-radius:50%;border:1px solid rgba(18,46,77,.18)}

/* Vier Wege (Edelstahl) */
.wege-raster{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--gap);margin-top:40px}
.wege-raster .fam-kachel{aspect-ratio:auto;height:380px}
.wege-raster .fam-name{font-size:22px}
@media (max-width:1023px){.wege-raster{grid-template-columns:1fr 1fr}.wege-raster .fam-kachel{height:300px}}
@media (max-width:767px){.wege-raster{grid-template-columns:1fr 1fr;gap:12px}.wege-raster>:first-child{grid-column:1/-1}.wege-raster .fam-kachel{height:220px}.wege-raster .fam-name{font-size:17px}.wege-raster>:first-child .fam-kachel{height:260px}}

/* Masstabelle */
.masstab{margin-top:40px;max-width:920px;overflow-x:auto}
.masstab table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.masstab th,.masstab td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--linie)}
.masstab thead th{font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--schiefer);vertical-align:bottom}
.masstab tbody th{font-family:"Satoshi",sans-serif;font-weight:700;color:var(--navy)}
.masstab-fuss{margin-top:16px;max-width:900px}
@media (max-width:767px){.masstab table{font-size:13.5px}.masstab .nur-breit{display:none}}

/* Text + Bild mit Liste */
.tb-liste{margin-top:20px;border-top:1px solid var(--linie);max-width:520px}
.tb-liste div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--linie);font-size:15px}
.tb-liste dt{color:var(--schiefer)}
.tb-liste dd{font-weight:600;color:var(--navy);text-align:right}
.tb-text .btn,.tb-text .tl-block{margin-top:24px}
.tb-text .tl-block{display:inline-block}
.sektion-kompakt{padding-top:calc(var(--sektion) / 2)}

/* Schichtaufbau Beton */
.schicht{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;margin-top:40px;align-items:start}
.schicht-flaeche{border:1px solid var(--linie);border-radius:4px;background:#FBF8F2;padding:12px}
.schicht-svg{display:block;width:100%;height:auto}
.schicht-H{display:none}
.schicht-tabs{display:flex;gap:8px;margin-bottom:20px}
.schicht-text p+p{margin-top:12px}
@media (max-width:767px){.schicht{grid-template-columns:1fr;gap:20px;margin-top:28px}.schicht-L{display:none}.schicht-H{display:block}}

/* Ablauf */
.schritte-ohne .schritt-nr{margin-top:0}
.ablauf-fuss{margin-top:32px;max-width:780px}

/* Kein Projekt: Hinweiszeile */
.referenz{padding:var(--block) 0 calc(var(--sektion) / 2)}
.referenz .text{max-width:720px}
.referenz .btn{margin-top:24px}

/* Kleine Projektkacheln */
.weitere-reihe.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:767px){.weitere-reihe.drei{grid-template-columns:1fr 1fr}}
.gk-plan img{background:#ececec}
.wege-hinweis{margin-top:16px}
/* Kopfbild Handy: mindestens 4:5, wächst mit dem Text (Brotkrume nie unter dem Menü, auch bei 360 px) */
@media (max-width:767px){
  .hero{aspect-ratio:auto;min-height:125vw;display:flex;flex-direction:column;justify-content:flex-end}
  .hero-inhalt{position:relative;left:auto;right:auto;bottom:auto;margin:0 var(--rand);padding:40px 0 48px}
}


/* Kontrast Kopftitel auf hellen Kopfbildern (11.10.2026, Juroren-Kleinpunkte): Verlauf dunkler, leichter Textschatten */
.hero-claim,.hero-unter,.hero-fakt{text-shadow:0 1px 18px rgba(12,32,54,.38)}
@media (min-width:768px){
  .hero-verlauf{background:linear-gradient(to top right,rgba(18,46,77,.7) 0%,rgba(18,46,77,.46) 38%,rgba(18,46,77,.08) 62%,rgba(18,46,77,0) 75%)}
  .hero-verlauf-links{background:linear-gradient(to right,rgba(18,46,77,.6) 0%,rgba(18,46,77,.28) 38%,rgba(18,46,77,0) 62%)}
}