@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%}

/* 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%)}
}