/* Die Stromfritzen: Stil B "Fläche wird Kraftwerk". Schriften lokal, Hausregel: keine Anfrage nach außen. */

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("/fonts/SpaceGrotesk-300-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("/fonts/SpaceGrotesk-300-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("/fonts/IBMPlexSans-400-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("/fonts/IBMPlexSans-400-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Metrik-angepasste Fallback-Schrift gegen CLS (Korrekturlauf Befund 9). Werte gemessen, nicht
   erinnert: unitsPerEm/hhea/OS2 per fontTools direkt aus SpaceGrotesk-300-700-latin.woff2 gelesen
   (unitsPerEm 1000, hhea/OS2-Typo ascent 984, descent -292, lineGap 0), size-adjust per
   canvas.measureText in echtem Chromium gemessen (Space Grotesk 700 gegen System-Arial, Breite
   praktisch identisch, 100,00%). Siehe _dev/messe_font_fallback.mjs und _dev/font_fallback_messung.json. */
@font-face{font-family:"Space Grotesk Fallback";src:local("Arial");size-adjust:100%;ascent-override:98.4%;descent-override:29.2%;line-gap-override:0%}

:root{
  /* Marke: sechs Farben aus ci.py. Alle Abstufungen nur per color-mix() aus diesen Werten. */
  --navy:#202957; --navy-dunkel:#171E45; --rot:#D01D24; --creme:#FBFAF6; --tinte:#1c2230; --gedaempft:#6b7280;

  --glas-bg: color-mix(in srgb, var(--navy) 60%, transparent);
  --glas-rand: color-mix(in srgb, var(--creme) 20%, transparent);
  --navy-mute: color-mix(in srgb, var(--creme) 62%, transparent);   /* Fließtext/Sekundärtext auf Navy, gemessen 5,7:1 */
  --navy-linie: color-mix(in srgb, var(--creme) 14%, transparent);
  --creme-linie: color-mix(in srgb, var(--navy) 12%, transparent);
  --rot-glimmer: color-mix(in srgb, var(--rot) 26%, transparent);
  --rot-glimmer-stark: color-mix(in srgb, var(--rot) 55%, transparent);
  --navy-schleier: color-mix(in srgb, var(--navy) 88%, transparent);
  --rot-hell: color-mix(in srgb, var(--rot) 60%, var(--creme) 40%);   /* Rot-Text auf Navy, gemessen 4,65:1 */

  --display:"Space Grotesk", "Space Grotesk Fallback", ui-sans-serif, system-ui, sans-serif;
  --text:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-fest: cubic-bezier(.65,0,.35,1);

  --raum: clamp(5rem, 9vw, 9rem);
  --raum-klein: clamp(2.5rem, 5vw, 4rem);
  --radius: 20px;
  --radius-klein: 12px;
  --kopf-h: 84px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --focus: var(--rot);
  color-scheme: light;
}
@view-transition{navigation:auto}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
/* Nur auf html, nicht zusaetzlich auf body (Korrekturlauf R1, Befund 1 "jury", tieferliegende
   Ursache): "html,body{overflow-x:hidden}" liess den Browser fuer body per CSS-Overflow-Spezifikation
   automatisch overflow-y:auto berechnen (steht eine der beiden Achsen auf einem Wert ungleich
   visible, wird "visible" auf der anderen Achse zu "auto" umgerechnet). Body wurde dadurch zu einem
   eigenen Scroll-Container, dessen Scrollport keine von "auto"-Hoehe/Inhalt unabhaengige Grenze hat.
   .stapel__karte (position:sticky) bezieht sich dann auf DIESEN Container statt auf den Viewport,
   und weil er nie eine eigene begrenzte Rollflaeche bildet, blieb die Karte nie stehen, sie lief
   1:1 mit dem Scroll mit, exakt das in Befund 1 gemessene Verhalten (Deltas immer gleich dem
   Scroll-Schritt, siehe _dev/diag_stapel.mjs). Direkt nachgestellt: mit body{overflow:visible}
   haelt .stapel__karte sofort zuverlaessig bei top:0, siehe _dev-Diagnoseskript dieses
   Korrekturlaufs. html{overflow-x:hidden} allein reicht fuer den eigentlichen Zweck (kein
   seitliches Scrollen bei 390px) unveraendert aus, weil html das Wurzelelement der Dokument-
   Scrollbox ist. */
html{overflow-x:hidden}
body{margin:0;background:var(--creme);color:var(--tinte);font:400 1.05rem/1.65 var(--text);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,video,svg,canvas{max-width:100%;height:auto;display:block}
img{object-fit:cover}
/* [hidden] als Autor-Regel erneut erzwingen: die display:block-Regel oben ist eine
   Autor-Deklaration und schlägt sonst die User-Agent-Regel [hidden]{display:none}, unabhängig
   von deren Spezifität (Autor-Origin gewinnt immer vor UA-Origin). Ohne diese Zeile bleibt jedes
   img/video/svg/canvas mit hidden-Attribut sichtbar, betrifft konkret held__canvas/held__fallback
   (Spur INTEGRATION, gefunden beim Testen der Held-Einbindung: Fallback-Standbild blieb dauerhaft
   über dem WebGL-Canvas sichtbar, siehe projekt.json). */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.abschnitt--navy,.held,.kopf,.menue-voll,.fussleiste,.stapel__karte--navy{--focus:var(--creme)}

.skip{position:absolute;left:-999px;top:8px;background:var(--rot);color:var(--creme);padding:.7em 1.2em;border-radius:999px;z-index:200;font:600 .9rem/1 var(--display);letter-spacing:.02em}
.skip:focus{left:8px;top:8px}

.wrap{width:100%;max-width:1360px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--eng{max-width:920px}

.label{font:600 .74rem/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--rot)}
.abschnitt--creme .label{color:var(--rot)}
.abschnitt--navy .label{color:var(--rot-hell)}

h1,.h1,h2,.h2,h3,.h3{font-family:var(--display);margin:0;letter-spacing:-.02em}
.h1{font-weight:700;font-size:clamp(2.75rem,4.4vw + 1.6rem,7rem);line-height:.94;letter-spacing:-.035em}
.h2{font-weight:600;font-size:clamp(2.1rem,2.6vw + 1.1rem,4.4rem);line-height:.98;letter-spacing:-.025em}
.h3{font-weight:600;font-size:clamp(1.4rem,.8vw + 1.1rem,1.9rem);line-height:1.12;letter-spacing:-.015em}
p{margin:0}
.lead{font-size:clamp(1.1rem,.4vw + 1rem,1.35rem);line-height:1.55;color:var(--navy-mute);max-width:56ch}
.abschnitt--creme .lead{color:var(--gedaempft)}
.mute{color:var(--navy-mute)}
.abschnitt--creme .mute{color:var(--gedaempft)}

.abschnitt{position:relative;padding-block:var(--raum)}
.abschnitt--navy{background:var(--navy);color:var(--creme)}
.abschnitt--navy-dunkel{background:var(--navy-dunkel);color:var(--creme)}
.abschnitt--creme{background:var(--creme);color:var(--tinte)}
.abschnitt--eng{padding-block:var(--raum-klein)}

.kopf-zeile{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.kopf-zeile .label{margin-bottom:.9rem;display:block}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.9em;border-radius:999px;border:1.5px solid var(--creme);color:var(--creme);font:600 .95rem/1 var(--display);letter-spacing:.01em;transition:box-shadow .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease),transform .25s var(--ease);white-space:nowrap}
.knopf:hover{border-color:var(--rot);box-shadow:0 0 0 1px var(--rot-glimmer),0 0 28px var(--rot-glimmer);transform:translateY(-2px)}
.abschnitt--creme .knopf,.abschnitt--creme .knopf{border-color:var(--navy);color:var(--navy)}
.abschnitt--creme .knopf:hover{border-color:var(--rot);color:var(--rot)}
.knopf--geist{border-color:var(--navy-linie);background:none}
.abschnitt--creme .knopf--geist{border-color:var(--creme-linie)}
.knopf--klein{padding:.6em 1.2em;font-size:.82rem}
/* Rot bleibt Energieakzent, nie Fläche (Bauplan Marke): der Hauptknopf füllt sich mit Navy, */
/* der rote Rand und das Glühen tragen den Akzent. */
.knopf--voll{background:var(--navy);border-color:var(--rot);color:var(--creme)}
.abschnitt--creme .knopf--voll{background:var(--navy);border-color:var(--rot);color:var(--creme)}
.knopf--voll:hover{box-shadow:0 0 0 1.5px var(--rot),0 0 32px var(--rot-glimmer-stark);border-color:var(--rot)}
.knopf--magnet{position:relative}
.knopf__inner{display:inline-flex;align-items:center;gap:.6em;transition:transform .15s var(--ease-fest)}

/* ---------- Kopfzeile / Navigation ---------- */
.kopf{position:sticky;top:0;z-index:80;background:color-mix(in srgb, var(--navy-dunkel) 88%, transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--navy-linie)}
.kopf__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--kopf-h)}
.kopf__marke{display:flex;align-items:center;gap:.7rem;color:var(--creme)}
.kopf__marke img{width:38px;height:auto}
.kopf__marke-text{font:700 .95rem/1 var(--display);letter-spacing:-.01em}
.kopf__nav{display:none}
.kopf__nav ul{display:flex;align-items:center;gap:clamp(1.4rem,2vw,2.4rem)}
.kopf__nav a{font:500 .95rem/1 var(--text);color:var(--navy-mute);transition:color .25s var(--ease);position:relative;padding-block:.3rem}
.kopf__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--rot);transition:right .3s var(--ease-fest)}
.kopf__nav a:hover{color:var(--creme)}
.kopf__nav a:hover::after,.kopf__nav a[aria-current="page"]::after{right:0}
.kopf__nav a[aria-current="page"]{color:var(--creme)}
.kopf__aktionen{display:flex;align-items:center;gap:1rem}
.kopf__cta{display:none}
.kopf__burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;align-items:center;border:1px solid var(--navy-linie);border-radius:999px}
.kopf__burger span{display:block;width:18px;height:1.5px;background:var(--creme);transition:transform .3s var(--ease-fest),opacity .2s}
.kopf__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.kopf__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.kopf__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (min-width:900px){
  .kopf__nav{display:block}
  .kopf__cta{display:inline-flex}
  .kopf__burger{display:none}
}

.menue-voll{position:fixed;inset:0;z-index:200;background:var(--navy-dunkel);display:flex;flex-direction:column;visibility:hidden;opacity:0}
.menue-voll[data-offen]{visibility:visible;opacity:1}
.menue-voll__kopf{display:flex;justify-content:space-between;align-items:center;min-height:var(--kopf-h)}
.menue-voll__schliessen{width:44px;height:44px;border:1px solid var(--navy-linie);border-radius:999px;position:relative}
.menue-voll__schliessen::before,.menue-voll__schliessen::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:1.5px;background:var(--creme)}
.menue-voll__schliessen::before{transform:translate(-50%,-50%) rotate(45deg)}
.menue-voll__schliessen::after{transform:translate(-50%,-50%) rotate(-45deg)}
.menue-voll__liste{margin:auto 0;display:flex;flex-direction:column;gap:.4rem}
.menue-voll__liste a{font:700 clamp(2.2rem,9vw,3.4rem)/1.15 var(--display);color:var(--creme);letter-spacing:-.02em;display:inline-block}
.menue-voll__liste a:hover,.menue-voll__liste a:focus-visible{color:var(--rot)}
.menue-voll__fuss{padding-block:2rem;border-top:1px solid var(--navy-linie);color:var(--navy-mute);font-size:.85rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.menue-voll__fuss a:hover{color:var(--creme)}
@media (min-width:900px){.menue-voll{display:none}}

/* ---------- Held / Hero ---------- */
.held{position:relative;background:var(--navy)}
/* height/min-height als !important (Korrekturlauf Befund 9, CLS): GSAP ScrollTrigger setzt beim
   Neuvermessen eines gepinnten Elements (refresh(), ausgelöst von window "load" und
   document.fonts.ready in motion.js) kurzzeitig eine eigene Inline-Höhe, die .held__pin auf seine
   Fließ-Inhaltshöhe zusammenfallen lässt (~300 bis 385px, die Höhe von .held__intro, weil alle
   anderen Kinder position:absolute sind und nicht zur Fließhöhe beitragen). Echt gemessen per
   PerformanceObserver('layout-shift'), siehe _dev/diagnose_cls.mjs. !important gewinnt gegen eine
   normale Inline-Deklaration und haelt die Box bei 100svh, unabhaengig davon, was GSAP inline setzt. */
.held__pin{position:relative;height:100svh!important;min-height:100svh!important;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.held__stage{position:absolute;inset:0;z-index:0}
.held__canvas{position:absolute;inset:0;width:100%;height:100%}
.held__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Zwei Verlaufs-Schichten (Korrekturlauf 3, INTEGRATION): die vertikale Schicht (unverändert aus
   dem ersten Bau) hat bei 38% Höhe einen Aufhellungs-Durchhang, genau dort liegen Eyebrow und h1.
   In Kapitel 4 "Ins Netz" faerbt der Himmel warm-hell (Dramaturgie kuehl zu warm, Spur HELD);
   dort gemessen (Pixelprobe, _dev/screens/integration/mobil-3-netz.png) fiel der Kontrast
   Creme-Text auf Szene bis auf rund 2,6:1 (Ziel 4,5:1). Zusaetzliche horizontale Schicht (links
   Navy, rechts transparent) deckt den h1/CTA-Textblock unabhaengig vom Kapitel und faedelt vor
   den Kapitelpunkten und dem Panel (beide rechts) aus; beide Schichten liegen auf der ohnehin
   vollflaechigen Buehne, also ohne sichtbare Kastenkante. */
.held__stage::after{content:"";position:absolute;inset:0;background:
    linear-gradient(90deg,color-mix(in srgb, var(--navy-dunkel) 80%, transparent) 0%,color-mix(in srgb, var(--navy-dunkel) 70%, transparent) 55%,transparent 85%),
    linear-gradient(180deg,color-mix(in srgb, var(--navy-dunkel) 55%, transparent) 0%,color-mix(in srgb, var(--navy-dunkel) 10%, transparent) 38%,color-mix(in srgb, var(--navy-dunkel) 78%, transparent) 100%)}
.held__intro{position:relative;z-index:2;padding:clamp(1.5rem,5vw,3rem) var(--gutter) clamp(2.5rem,7vw,5rem);max-width:1360px;margin-inline:auto;width:100%}
.held__eyebrow{color:var(--creme);opacity:.85;display:inline-flex;align-items:center;gap:.6em;margin-bottom:1.4rem}
.held__eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rot);box-shadow:0 0 12px var(--rot-glimmer-stark)}
/* Fund INTEGRATION Korrekturlauf 3 (Tablet-Luecke): der Bauplan/erste Korrekturlauf prueften
   nur 1440 und 390px. pruefen.mjs nimmt aber auch einen 768px-Screenshot mit, und dort (getestet
   768 bis rund 1024px) ist weder die 1440px-Logik (h1 16ch bleibt bei groesser Schrift klar
   links vom Panel) noch die Mobil-Regel (<=680px, eigene Schriftgroesse/volle Panel-Breite)
   zustaendig: max-width:16ch bleibt bei kleinerer Schrift breit genug, um die letzte h1-Zeile
   UND die CTA-Knopfreihe zu ueberlappen (real gemessen bei 768px: h1.bottom=983.6, panel.top=
   920.8, cta.bottom=1055.3 schneidet panel.top=920.8..1086.3). Formel statt fester Breakpoint:
   haelt den rechten h1-Rand immer mindestens 404px (Panelbreite 380px plus Sicherheitsabstand)
   vor dem rechten Rand entfernt; bei 1440px liefert calc() ohnehin mehr Spielraum als 16ch, die
   16ch-Deckelung bleibt dort also unveraendert wirksam. */
.held__h1{color:var(--creme);max-width:min(16ch,calc(100% - 404px))}
.held__h1 .split-zeile{overflow:clip}
.held__cta{display:flex;gap:1rem;margin-top:clamp(1.6rem,3vw,2.4rem);flex-wrap:wrap}
/* Gleicher 404px-Sicherheitsabstand wie .held__h1 (siehe Kommentar dort), nur oberhalb von
   680px: unter 680px positioniert die Mobil-Regel .held__panel ohnehin ueber die volle Breite
   unterhalb des ganzen Blocks (keine Kollisionsgefahr, daher hier unangetastet). Ohne eigene
   max-width blieb die CTA-Zeile im 681-bis-768px-Fenster so breit wie ihre beiden Knoepfe und
   ueberlappte das rechte Panel, obwohl h1 selbst dank der eigenen Formel schon frei war (real
   gemessen: bei 768px Knopf-Rechteck bis x=398, panel.left=349,6). flex-wrap:wrap faengt das ab,
   die Knoepfe stapeln sich in diesem schmalen Fenster statt seitlich in das Panel zu ragen. */
@media (min-width:681px){.held__cta{max-width:calc(100% - 404px)}}

.held__kapitel{position:absolute;right:clamp(1.2rem,3vw,3rem);top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:1.1rem}
.held__kapitel button{display:flex;align-items:center;gap:.8rem;color:var(--navy-mute)}
.held__kapitel button span{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--navy-mute);transition:background .3s,border-color .3s,transform .3s var(--ease-fest);flex:none}
.held__kapitel button em{font:500 .78rem/1 var(--text);font-style:normal;opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease);white-space:nowrap}
.held__kapitel button:hover em,.held__kapitel button:focus-visible em,.held__kapitel button[aria-current="true"] em{opacity:1;transform:none}
.held__kapitel button[aria-current="true"] span{background:var(--rot);border-color:var(--rot);transform:scale(1.25);box-shadow:0 0 10px var(--rot-glimmer-stark)}
@media (max-width:680px){.held__kapitel{display:none}}

/* display:contents statt eigener Box (Korrekturlauf Befund 9, CLS): .held__panels erzeugte als
   position:absolute;inset:0 einen Kasten so groß wie der komplette gepinnte Held (fast 100% des
   Viewports). GSAPs ScrollTrigger.refresh() verändert beim Neuvermessen eines Pins kurzzeitig
   dessen Box (real gemessen per PerformanceObserver('layout-shift'), Quelle exakt dieser Kasten,
   siehe _dev/diagnose_cls.mjs); bei einer fast viewportgroßen Fläche schlägt jede kurze
   Höhenänderung mit voller Wucht in den CLS-Wert ein. Als reine DOM-Gruppierung ohne eigene Box
   (display:contents) trägt der Wrapper nichts mehr zur Layout-Geometrie bei, z-index/pointer-events
   wandern auf die einzelnen, viel kleineren .held__panel (max 380px breit) weiter unten. */
.held__panels{display:contents}
/* Panel-Position (Korrekturlauf Befund 6): rechts unten, unterhalb der Kapitelpunkte
   (.held__kapitel, top:50%), damit es nie den h1-Block oder die CTA-Knöpfe links unten
   überdeckt. max-width 380px wie gefordert. Mobil siehe Media Query unten: kein rechter
   Anker mehr (Kapitelpunkte sind dort ohnehin ausgeblendet), Panel liegt unterhalb des
   h1-Blocks am unteren Rand, h1 selbst ist dort auf 2,6rem/4 Zeilen begrenzt. */
.held__panel{position:absolute;left:auto;right:var(--gutter);bottom:clamp(1.6rem,4vw,2.6rem);width:min(380px,86vw);max-width:380px;z-index:2;pointer-events:auto;will-change:transform,opacity}
.held__panel-titel{font-size:clamp(1.2rem,1vw + 1rem,1.6rem);margin-bottom:.6rem}
.held__panel-text{color:var(--navy-mute);font-size:.98rem;line-height:1.55}
@media (max-width:680px){
  .held__pin{justify-content:flex-start}
  .held__intro{padding-bottom:clamp(1rem,4vw,1.6rem)}
  .held__h1{font-size:2.6rem;line-height:1.08;max-width:100%}
  .held__panel{left:var(--gutter);right:var(--gutter);bottom:clamp(1rem,4vw,1.5rem);width:auto;max-width:none}
  /* Mobil: h1 nutzt die volle Breite (max-width:100% oben), also muss auch die horizontale
     Verlaufsschicht auf .held__stage::after die volle Breite decken statt bei 68% transparent
     zu werden (siehe Kommentar bei .held__stage::after oben). */
  .held__stage::after{background:
      linear-gradient(180deg,color-mix(in srgb, var(--navy-dunkel) 74%, transparent) 0%,color-mix(in srgb, var(--navy-dunkel) 46%, transparent) 55%,transparent 78%),
      linear-gradient(180deg,color-mix(in srgb, var(--navy-dunkel) 55%, transparent) 0%,color-mix(in srgb, var(--navy-dunkel) 10%, transparent) 38%,color-mix(in srgb, var(--navy-dunkel) 78%, transparent) 100%)}
  /* Fund INTEGRATION Korrekturlauf 3 (ueber-uns.html, "Kulisse"-Modus): .held__zitat ist
     position:absolute, bottom-verankert an .held__pin, unabhaengig von der tatsaechlichen
     h1-Hoehe. Bei 390x844 (Kay-Braune-Zitat, 3-zeiliges h1) reale getBoundingClientRect-Messung:
     h1.bottom=287.5px, zitat.top=271.5px, das Zitat ueberlappt die dritte h1-Zeile "voran" um
     16px. .held--kulisse ist NIE gepinnt/gescrubbt (kein ScrollTrigger, siehe held-einbindung.js
     modus "kulisse": nur Standbild), die CLS-Fixhoehe (100svh/78svh !important) ist hier also
     ohne Funktion und kann gefahrlos auf Inhaltshoehe freigegeben werden, statt das Zitat weiter
     zu verschieben und an anderer Stelle erneut zu ueberlappen. */
  .held--kulisse .held__pin{height:auto!important;min-height:0!important;padding-bottom:clamp(1.5rem,6vw,2.5rem)}
  .held--kulisse .held__zitat{position:static;width:auto;margin:1.5rem var(--gutter) 0}
}

/* !important auch hier: gleiche Wichtigkeitsstufe wie die Basisregel oben, hoehere Spezifitaet
   (zwei Klassen) entscheidet zwischen den !important-Regeln weiterhin normal zugunsten dieser
   gezielteren Selektoren, siehe Kommentar bei .held__pin. */
.held--kein-pin .held__pin{height:auto!important;min-height:0!important}
.held--kein-pin .held__panels{position:static;pointer-events:auto;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));padding:var(--raum-klein) var(--gutter);max-width:1360px;margin-inline:auto}
.held--kein-pin .held__panel{position:static;width:auto;opacity:1!important;transform:none!important}
.held--kein-pin .held__kapitel{display:none}
.held--kulisse .held__pin{height:min(78svh,780px)!important}
.held__zitat{position:absolute;left:var(--gutter);bottom:clamp(2rem,6vw,4rem);z-index:2;width:min(460px,86vw);padding:clamp(1.6rem,2.8vw,2.3rem);color:var(--creme)}
.held__zitat-text{font:italic 500 clamp(1.05rem,.6vw + .9rem,1.3rem)/1.5 var(--display);letter-spacing:-.01em}
.held__zitat-person{display:flex;align-items:center;gap:.9rem;margin-top:1.3rem}
.held__zitat-person img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.held__zitat-person b{display:block;font:600 .95rem/1.2 var(--display)}
.held__zitat-person span{color:var(--navy-mute);font-size:.82rem}

/* Glas */
.glas{background:var(--glas-bg);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--glas-rand);border-radius:var(--radius);position:relative;isolation:isolate}
.glas::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(155deg,color-mix(in srgb, var(--creme) 45%, transparent),transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.held__panel.glas{padding:clamp(1.4rem,2.6vw,2.1rem);color:var(--creme)}
/* .glas setzt weiter oben position:relative (gleiche Spezifität wie .held__panel, später in der
   Kaskade, gewinnt sonst) und wirft die Panels damit aus ihrer festen Position in den normalen
   Textfluss (Spur INTEGRATION, gefunden beim Testen: Panels ragten aus dem Viewport bzw.
   überlappten den h1-Text). Fix nur außerhalb von .held--kein-pin, damit die dortige
   position:static-Regel für den Fallback/Reduced-Motion-Grid-Textfluss unangetastet bleibt. */
.held:not(.held--kein-pin) .held__panel{position:absolute}

/* ---------- Kacheln "Warum wir" ---------- */
.kacheln{display:grid;gap:1px;background:var(--navy-linie);border:1px solid var(--navy-linie);border-radius:var(--radius);overflow:hidden}
@media (min-width:760px){.kacheln{grid-template-columns:repeat(4,1fr)}}
.kachel{position:relative;background:var(--navy);padding:clamp(1.8rem,3vw,2.6rem) clamp(1.6rem,2.6vw,2.2rem);overflow:hidden}
.kachel::before{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), var(--rot-glimmer), transparent 70%);opacity:0;transition:opacity .35s}
@media (hover:hover) and (pointer:fine){.kachel:hover::before{opacity:1}}
.kachel__icon{width:40px;height:40px;color:var(--rot);margin-bottom:1.6rem}
.kachel__titel{font:600 1.2rem/1.2 var(--display);margin-bottom:.7rem;position:relative}
.kachel__text{color:var(--navy-mute);font-size:.96rem;line-height:1.55;position:relative}

/* ---------- Sticky-Stapel Leistungen ---------- */
.stapel{position:relative}
/* Halte-Wrapper fuer eine echte Klebe-Phase UND einen echten Deck-Gleiteffekt (Korrekturlauf R1,
   Befund 1 "jury"): .stapel__karte allein war genau eine Viewport-Hoehe hoch (min-height:100svh)
   und damit ihr eigener sticky-Rahmen bereits voll ausgeschoepft, sobald sie den oberen Rand
   erreichte, es blieb keine Restlaenge, in der die Karte wirklich "klebt". Eigene
   Geometrie-Messung (_dev/diag_stapel.mjs) bestaetigte das: die Bildschirmposition der Karte sank
   pro 200px-Scrollschritt exakt um 200px, nie 0, zwischen den Karten entstand 500 bis 600px reine
   Leerflaeche statt einer Ueberdeckung. .stapel__karte-halt ist der neue, deutlich hoehere, NICHT
   sticky Rahmen (180svh), .stapel__karte bleibt darin sticky mit fester Hoehe genau 100svh.
   Ein erster Fix nur mit hoeherem Rahmen (ohne die Marge unten) hielt die Karte zwar wirklich fest,
   erzeugte beim Loslassen aber denselben alten Fehler in neuer Form: die naechste Karte betrat den
   Bildschirm erst GENAU dort, wo die vorherige ihn bereits verlassen hatte (beide exakt eine
   Viewport-Hoehe versetzt, nachgemessen per eigenem Zusatzskript), wieder eine sichtbare Cremeflaeche
   dazwischen statt einer Ueberdeckung. Der negative obere Rand unten schiebt jede Karte ausser der
   ersten um genau eine Viewport-Hoehe nach oben in den Dokumentfluss: dadurch beginnt sie (in
   normaler, nicht-sticky Fliessposition) bereits an genau der Bildschirmposition sichtbar zu werden,
   an der die vorherige Karte noch steht, und deckt sie dank spaeterer DOM-Reihenfolge (malt in
   derselben Stapelebene automatisch ueber frueheren Geschwistern) beim Hochsteigen progressiv von
   unten nach oben zu, bevor die vorherige ueberhaupt eigenstaendig zu weichen beginnt. Erst wenn die
   naechste Karte vollstaendig deckt, rastet sie selbst in ihre eigene Klebe-Phase ein: Halten und
   Decken gehen dadurch nahtlos ineinander ueber, keine Karte ist je unbedeckt sichtbar, waehrend die
   naechste schon irgendwo dazwischen haengt. */
.stapel__karte-halt{position:relative;height:180svh}
.stapel__karte-halt+.stapel__karte-halt{margin-top:-100svh}
.stapel__karte{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding-block:clamp(2rem,5vw,3.5rem);background:var(--creme);overflow:hidden}
.abschnitt--navy.stapel .stapel__karte{background:var(--navy)}
/* min-height (Korrekturlauf R2, Befund 1 "jury"): die Karte fuellte gemessen (_dev/diag_stapel_r2.mjs)
   nur rund 33 bis 42 Prozent der 900px-Viewporthoehe, weil kein Mindestmass gesetzt war und die
   Karte per align-items:center in der 100svh-Sticky-Buehne (.stapel__karte) auf ihre reine
   Inhaltshoehe zusammenschrumpfte, umgeben von grosser leerer Creme-/Navy-Flaeche. min(72svh,760px)
   fuellt die Buehne auf ein plakatives Mass, ohne bei sehr kurzen Fenstern ueber die 100svh-Buehne
   hinauszuwachsen (dort greift .stapel__karte{overflow:hidden}). Als Nebeneffekt wird dadurch auch
   die schon vorher geometrisch angelegte Ueberdeckung beim Kartenwechsel (siehe .stapel__karte-halt
   oben) erstmals sichtbar: vorher deckte die naechste, einlaufende Karte nur ihre eigene, winzige
   Kartenflaeche zu, jetzt deckt sie einen Grossteil der Buehne. */
.stapel__karte-inner{width:100%;min-height:min(72svh,760px);background:var(--navy);border-radius:var(--radius);overflow:hidden;display:grid;box-shadow:0 40px 90px -40px color-mix(in srgb, var(--navy-dunkel) 70%, transparent);border-top:1px solid var(--navy-linie)}
@media (min-width:820px){.stapel__karte-inner{grid-template-columns:1fr 1fr}}
/* Filmplakat-Look statt Bootstrap-Karte (Korrekturlauf Befund 8): Hintergrund wechselt je Karte
   zwischen Navy und Navy-dunkel, jede Karte traegt oben die feine Creme-Linie (border-top oben).
   Selektor auf .stapel__karte-halt umgestellt (Korrekturlauf R1): das ist jetzt der direkte,
   durchgezaehlte Geschwisterknoten in .stapel, .stapel__karte selbst liegt eine Ebene tiefer. */
.stapel__karte-halt:nth-child(even) .stapel__karte-inner{background:var(--navy-dunkel)}
.stapel__bild-wrap{position:relative;min-height:260px}
.stapel__bild-wrap img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.stapel__bild-wrap--vn{position:relative;min-height:0;padding:clamp(1.4rem,2.6vw,2rem);display:flex;flex-direction:column;justify-content:center;background:var(--navy-dunkel)}
.stapel__bild-wrap--vn .vn-bild img{width:100%;height:100%}
.stapel__karte-halt[id]{scroll-margin-top:calc(var(--kopf-h) + 12px)}
/* Riesige Kapitelnummer als Wasserzeichen hinter dem Titel, kein Badge mehr auf dem Bild.
   Opazitaet auf .4 angehoben (Korrekturlauf R2, Befund 4 "technik"): axe-core (WCAG 2.2 AA) mass
   bei .12 auf dem helleren --navy-Hintergrund (ungerade Karten 01/03/05) nur 1,43:1 statt der
   geforderten 3:1 fuer grosse Schrift; auf --navy-dunkel (gerade Karten) waren es bei .12 ebenso nur
   1,41:1, ein frueherer Lauf hatte das nur deshalb nicht gemeldet, weil der GSAP-Scroll-Scrub beim
   Scan andere Werte auf den nicht sichtbaren Karten gesetzt hatte, strukturell lag der Fehler auf
   beiden Hintergruenden gleichermassen vor (siehe Befund). Gegengerechnet (WCAG-Formel, Creme
   #FBFAF6 auf #202957 bzw. #171E45 geblendet): .4 ergibt 3,42:1 auf --navy und 3,58:1 auf
   --navy-dunkel, beide mit Sicherheitsabstand ueber 3:1; ein einzelner Wert reicht, weil beide
   Hintergruende bei .4 die Schwelle erreichen, eine Fallunterscheidung nach nth-child ist nicht
   noetig. */
.stapel__zahl{position:absolute;top:clamp(-1.4rem,-3vw,-2.4rem);right:clamp(-.4rem,1vw,.6rem);font:300 clamp(5rem,11vw,12rem)/1 var(--display);color:var(--creme);opacity:.4;pointer-events:none;user-select:none;z-index:0}
.stapel__inhalt{position:relative;padding:clamp(1.8rem,3.4vw,3.2rem);color:var(--creme);display:flex;flex-direction:column;justify-content:center;gap:1.1rem;overflow:hidden}
.stapel__inhalt>*:not(.stapel__zahl){position:relative;z-index:1}
/* hyphens:auto (Korrekturlauf R1, Befund 4 "jury"): das globale overflow-wrap:break-word auf body
   (Zeile 48) liess lange deutsche Komposita wie "Mieterstromkonzepte" auf schmalen Karten mitten im
   Wort brechen ("Mieterstromkonzept" / "e" in eigener Zeile). html hat bereits lang="de", der
   Browser trennt mit hyphens:auto jetzt an echten Silbengrenzen, bevor er auf den harten
   Wortbruch zurueckfaellt. */
/* hyphens:manual statt :auto (Korrekturlauf R2, Befund/Hinweis "jury"): der Browser-Algorithmus
   trennte "Mieterstromkonzepte" ohne deutsches Woerterbuch falsch zu "Mieterstromkonzep-te" (zweite
   Zeile nur zwei Buchstaben). Jetzt nur noch weiche Trennzeichen (siehe Markup, &shy; nach
   "Mieterstrom") an echten Wortfugen. */
.stapel__titel{font-size:clamp(2rem,1.8vw + 1.3rem,4rem);z-index:1;position:relative;hyphens:manual;-webkit-hyphens:manual}
.stapel__text{color:var(--navy-mute);line-height:1.65;max-width:42ch}
.stapel__punkte{display:flex;flex-direction:column;gap:.6rem;margin-top:.3rem}
.stapel__punkte li{display:flex;gap:.7rem;align-items:flex-start;color:var(--navy-mute);font-size:.96rem;line-height:1.5}
.stapel__punkte li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rot);margin-top:.55em;flex:none}
.stapel__link{margin-top:.6rem;color:var(--creme);font:600 .9rem/1 var(--display);display:inline-flex;align-items:center;gap:.5em;width:fit-content;border-bottom:1px solid var(--navy-linie);padding-bottom:.3em;transition:border-color .3s,color .3s}
.stapel__link:hover{color:var(--rot);border-color:var(--rot)}
.abschnitt--navy.stapel .stapel__link:hover{color:var(--rot-hell);border-color:var(--rot-hell)}

/* ---------- Gemeinnützigkeit / Masken-Reveal ---------- */
.gemeinnuetzig__grid{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr);margin-top:clamp(2.5rem,5vw,4rem)}
@media (min-width:700px){.gemeinnuetzig__grid{grid-template-columns:repeat(3,1fr)}}
.mask-bild{position:relative;border-radius:var(--radius-klein);overflow:hidden;aspect-ratio:4/3;background:var(--navy)}
.mask-bild img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
/* Masken-Startzustand nur bei vorhandenem JavaScript (Korrekturlauf Befund 7): html.js wird per
   Inline-Skript ganz oben im <head> gesetzt, bevor irgendetwas gerendert wird. Ohne JavaScript und
   bei Reduced Motion (dort setzt effekte.js die Maske gar nicht erst, siehe maskenReveal()) bleibt
   der Wert aus dem Reduced-Motion-Block unten (clip-path:inset(0 0 0 0)!important) oder, ohne JS
   ueberhaupt, einfach unmaskiert (keine Regel hier greift), die Bilder sind sofort vollstaendig
   sichtbar statt als leere Navy-Rechtecke. Erst effekte.js oeffnet die hier vorbereitete Maske per
   ScrollTrigger. Gilt fuer jedes [data-mask-reveal]-Bild (Sponsoring-Grid und "Das haben wir
   umgesetzt" auf leistungen.html). */
html.js [data-mask-reveal] img{clip-path:inset(0 0 100% 0)}
.gemeinnuetzig__punkte{display:grid;gap:1.4rem;margin-top:clamp(2rem,4vw,3rem);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gemeinnuetzig__punkte li{border-top:1px solid var(--creme-linie);padding-top:1rem;font-size:.98rem;color:var(--tinte)}
/* Navy-Kontext (Korrekturlauf R1, Befund 6 "technik"): die Grundregel war fuer Creme-Abschnitte
   gedacht (dunkle Tinte auf hellem Grund), ueber-uns.html setzt die Punkte aber in einen
   .abschnitt--navy-Block, dort ergab dunkle Tinte auf Navy gemessen 1,14:1 statt der geforderten
   4,5:1 (axe-core color-contrast, impact serious). Gleiches Muster wie .abschnitt--navy .lead/.mute
   bereits an anderer Stelle in dieser Datei: Text auf --navy-mute (Creme 62%, gemessen 5,7:1), Linie
   auf --navy-linie statt der sonst zu dunklen --creme-linie. */
.abschnitt--navy .gemeinnuetzig__punkte li{color:var(--navy-mute);border-color:var(--navy-linie)}

/* ---------- Das haben wir umgesetzt (leistungen.html): drei grosse Bildkacheln ---------- */
.umsetzt__grid{display:grid;gap:1.1rem;margin-top:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr}
@media (min-width:760px){.umsetzt__grid{grid-template-columns:repeat(3,1fr);gap:1.4rem}}
.umsetzt__kachel{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--navy);margin:0}
.umsetzt__kachel img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.umsetzt__kachel figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.1rem,2.4vw,1.6rem);background:linear-gradient(180deg,transparent 0%,color-mix(in srgb, var(--navy-dunkel) 90%, transparent) 82%);color:var(--creme)}
.umsetzt__kachel figcaption b{display:block;font:600 1.1rem/1.25 var(--display)}
.umsetzt__kachel figcaption span{font-size:.85rem;color:var(--navy-mute)}

/* ---------- Unser Weg (horizontal) ---------- */
.weg{position:relative;overflow:hidden}
.weg__track{display:flex;gap:1.4rem;width:max-content;padding-block:.5rem}
.weg__karte{width:min(78vw,440px);background:var(--navy);border-radius:var(--radius);padding:clamp(1.8rem,3vw,2.6rem);color:var(--creme);display:flex;flex-direction:column;gap:1.1rem;flex:none}
.weg__karte img{border-radius:var(--radius-klein);aspect-ratio:16/10;object-fit:cover}
.weg__zahl{font:600 3rem/1 var(--display);color:var(--rot-hell);opacity:.85}
.weg__titel{font-size:1.3rem}
.weg__text{color:var(--navy-mute);line-height:1.6}
@media (min-width:900px){.weg__track{gap:2.2rem}.weg__karte{width:520px}}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--navy-linie);padding-block:clamp(1.6rem,3vw,2.4rem)}
.abschnitt--creme .marquee{border-color:var(--creme-linie)}
.marquee__track{display:flex;width:max-content;gap:clamp(2.5rem,5vw,4.5rem);animation:marquee 34s linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee__item{display:flex;align-items:center;gap:1.2rem;flex:none}
/* Groessere Bildkacheln (Hinweis "jury", Korrekturlauf R2): die echten, freigegebenen
   Referenzprojekte liefen bisher als kleine 112x78-Thumbnails durch, naeher an einer
   Partner-Logoleiste als am plakativen Bildstil der Leistungs-Karten. 168x118 (Faktor 1,5) gibt den
   Fotos selbst mehr Gewicht, ohne die Endlos-Lauf-Mechanik oder Ladezeiten zu veraendern (dieselben
   Bilddateien, nur groesser dargestellt). */
.marquee__item img{width:168px;height:118px;object-fit:cover;border-radius:12px}
.marquee__item-text{font:500 1rem/1.35 var(--text)}
.marquee__item-text b{display:block;font:600 1.15rem/1.2 var(--display)}

/* ---------- FAQ ---------- */
.faq-liste{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--creme-linie);max-width:820px}
.abschnitt--navy .faq-liste{border-color:var(--navy-linie)}
.faq-item{border-bottom:1px solid var(--creme-linie);overflow:hidden}
.abschnitt--navy .faq-item{border-color:var(--navy-linie)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.5rem;cursor:pointer;list-style:none;font:600 1.05rem/1.4 var(--display)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item__plus{position:relative;width:22px;height:22px;flex:none}
.faq-item__plus::before,.faq-item__plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--rot);transform:translate(-50%,-50%)}
.faq-item__plus::before{width:14px;height:1.5px}
.faq-item__plus::after{width:1.5px;height:14px;transition:transform .3s var(--ease-fest)}
.faq-item[open] .faq-item__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item__antwort{color:var(--navy-mute);line-height:1.65;padding-bottom:1.6rem;max-width:64ch}
.abschnitt--creme .faq-item__antwort{color:var(--gedaempft)}

/* ---------- Vorher/Nachher ---------- */
.vorher-nachher{max-width:760px}
.vn-bild{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--navy);--x:50%}
.vn-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vn-bild__nachher{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.vn-bild__griff{position:absolute;top:0;bottom:0;left:var(--x);width:3px;background:var(--creme);transform:translateX(-50%);box-shadow:0 0 0 1px color-mix(in srgb, var(--navy) 30%, transparent)}
.vn-bild__griff::after{content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;border-radius:50%;background:var(--creme);transform:translate(-50%,-50%);box-shadow:0 8px 24px -8px color-mix(in srgb, var(--tinte) 50%, transparent)}
.vn-etikett{position:absolute;top:1rem;font:600 .74rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;background:var(--navy-schleier);color:var(--creme);padding:.5em .9em;border-radius:999px;z-index:2}
.vn-etikett--vorher{left:1rem}
.vn-etikett--nachher{right:1rem}
.vn-slider{width:100%;margin-top:1.1rem;-webkit-appearance:none;appearance:none;height:4px;border-radius:999px;background:var(--creme-linie);outline-offset:6px}
.abschnitt--navy .vn-slider{background:var(--navy-linie)}
.vn-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--rot);border:3px solid var(--creme);cursor:grab;box-shadow:0 4px 14px -4px color-mix(in srgb, var(--tinte) 50%, transparent)}
.vn-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--rot);border:3px solid var(--creme);cursor:grab}

/* ---------- Partner-Karte ---------- */
.partner-karte{background:var(--navy);border-radius:var(--radius);padding:clamp(1.8rem,3vw,2.6rem);color:var(--creme);display:grid;gap:1.6rem}
@media (min-width:700px){.partner-karte{grid-template-columns:auto 1fr;align-items:start}}
.partner-karte img{width:112px;height:112px;border-radius:50%;object-fit:cover}
.partner-karte__monogramm{width:112px;height:112px;border-radius:50%;background:var(--navy-dunkel);border:2px solid var(--creme);display:flex;align-items:center;justify-content:center;font:700 2.1rem/1 var(--display);color:var(--creme);letter-spacing:.02em;flex:none}
.partner-karte__rolle{color:var(--rot-hell);font:600 .78rem/1.4 var(--display);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6rem;display:block;max-width:32ch}
.partner-karte__beschreibung{color:var(--navy-mute);line-height:1.6;max-width:52ch;margin-top:.6rem}
.partner-karte__punkte{margin-top:1.1rem;display:flex;flex-direction:column;gap:.5rem}
.partner-karte__punkte li{color:var(--navy-mute);font-size:.95rem;padding-left:1.1rem;position:relative}
.partner-karte__punkte li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--rot)}
.partner-karte__zitat{margin-top:1.2rem;font:italic 500 1.05rem/1.5 var(--display);color:var(--creme)}
.partner-karte__kontakt{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center;margin-top:1.4rem}

/* ---------- Kontakt ---------- */
.kontakt-grid{display:grid;gap:clamp(2rem,4vw,3rem);align-items:start}
@media (min-width:960px){.kontakt-grid{grid-template-columns:1.15fr .85fr}}
.formular{display:grid;gap:1.3rem}
.formular__zeile{display:grid;gap:1.3rem}
@media (min-width:560px){.formular__zeile--zwei{grid-template-columns:1fr 1fr}}
.formular__feld{display:flex;flex-direction:column;gap:.5rem}
.formular__feld label{font:600 .82rem/1 var(--display);letter-spacing:.04em}
.formular__feld input,.formular__feld select,.formular__feld textarea{background:var(--creme);border:1.5px solid var(--creme-linie);border-radius:var(--radius-klein);padding:.85em 1em;font-size:1rem;color:var(--tinte);transition:border-color .25s,box-shadow .25s}
/* Rot-Gluehen im Fokus statt nur Randfarbe (Hinweis "jury", Korrekturlauf R2): die Felder wirkten
   ohne Fokuszustand wie ein generischer Formularbaustein ohne Markenbezug; das Signalrot-Gluehen
   greift denselben Energieakzent auf, der sonst auf der Seite fuer aktive Zustaende steht. */
.formular__feld input:focus,.formular__feld select:focus,.formular__feld textarea:focus{border-color:var(--rot);box-shadow:0 0 0 3px color-mix(in srgb, var(--rot) 18%, transparent)}
.formular__feld textarea{resize:vertical;min-height:130px}
.formular__einwilligung{display:flex;gap:.8rem;align-items:flex-start;font-size:.92rem;color:var(--gedaempft)}
.formular__einwilligung input{margin-top:.3em;width:18px;height:18px;accent-color:var(--rot);flex:none}
.formular__einwilligung a{text-decoration:underline;color:var(--tinte)}
.formular__hinweis{font-size:.85rem;color:var(--gedaempft)}
.formular__status{font-size:.9rem;color:var(--rot);min-height:1.2em}

/* Jury-Augen (Kontaktseite): .info-panel trug bisher die Klasse .glas, gedacht fuer Glaseffekt vor
   Navy/Bild-Hintergrund. Auf Creme-Grund (.abschnitt--creme) wurde daraus nur eine blass-graue,
   generisch wirkende Flaeche (color-mix Navy 60% auf Creme). Ersetzt durch eine eigene, deckende
   Navy-Karte, wie .partner-karte und .stapel__karte-inner es auf Creme-Abschnitten bereits tun:
   gleiche Markensprache statt Baukasten-Sidebar-Widget. */
.info-panel{background:var(--navy);color:var(--creme);padding:clamp(1.8rem,3vw,2.4rem);border-radius:var(--radius);box-shadow:0 40px 90px -40px color-mix(in srgb, var(--navy-dunkel) 70%, transparent);display:flex;flex-direction:column;gap:1.6rem}
@media (min-width:960px){.info-panel{position:sticky;top:calc(var(--kopf-h) + 1.5rem)}}
.info-panel__zeile{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--navy-linie);padding-top:1rem}
.info-panel__zeile:first-of-type{border-top:0;padding-top:0}
.info-panel__label{font:600 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--navy-mute);display:block;margin-bottom:.3rem}
.info-panel__wert{font:600 1.15rem/1.3 var(--display)}
.kopier-knopf{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--navy-linie);border-radius:999px;padding:.5em 1em;font:500 .82rem/1 var(--text);color:var(--creme);flex:none}
.abschnitt--creme .kopier-knopf{border-color:var(--creme-linie);color:var(--tinte)}
/* Korrektur (Jury-Augen, Kontaktseite): .abschnitt--creme setzt den Kopier-Knopf pauschal auf dunklen
   Text, das gilt aber nicht innerhalb eigener Navy-Karten auf Creme-Grund (.partner-karte, .info-panel):
   dort stand dunkler Text auf Navy, gemessen Kontrast ca. 1,1:1, praktisch unsichtbar. Gleiche
   Spezifitaet (zwei Klassen), gewinnt durch spaetere Reihenfolge. */
.partner-karte .kopier-knopf,.info-panel .kopier-knopf{border-color:var(--navy-linie);color:var(--creme)}
.kopier-knopf:hover{border-color:var(--rot);color:var(--rot)}
.info-panel__person{display:flex;align-items:center;gap:1rem;border-top:1px solid var(--navy-linie);padding-top:1.3rem}
.info-panel__person img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.info-panel__person b{display:block;font:600 1rem/1.2 var(--display)}
.info-panel__person span{color:var(--navy-mute);font-size:.85rem}

.kontaktzeile{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center}

/* ---------- Rechtstexte ---------- */
.rechtstext{max-width:760px}
.rechtstext h2{font-size:clamp(1.3rem,1vw + 1rem,1.7rem);margin-top:2.6rem;margin-bottom:.9rem}
.rechtstext h2:first-child{margin-top:0}
.rechtstext p{margin-bottom:1rem;line-height:1.7;color:var(--tinte)}
.rechtstext ul{margin-bottom:1rem;display:flex;flex-direction:column;gap:.35rem}
.rechtstext li{padding-left:1.2rem;position:relative;line-height:1.6}
.rechtstext li::before{content:"";position:absolute;left:0;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--rot)}
.rechtstext a{text-decoration:underline}

/* ---------- Fußzeile ---------- */
.fussleiste{background:var(--navy-dunkel);color:var(--navy-mute);padding-block:clamp(3rem,5vw,4.5rem) 2rem}
.fussleiste__oben{display:grid;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--navy-linie)}
@media (min-width:760px){.fussleiste__oben{grid-template-columns:1.3fr 1fr 1fr}}
.fussleiste__marke{display:flex;align-items:center;gap:.7rem;color:var(--creme);margin-bottom:1rem}
.fussleiste__marke img{width:34px}
.fussleiste__marke-text{font:700 .95rem/1 var(--display)}
.fussleiste__spalte h3{font:600 .78rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--creme);margin-bottom:1rem}
.fussleiste__spalte ul{display:flex;flex-direction:column;gap:.6rem}
.fussleiste__spalte a:hover{color:var(--creme)}
.fussleiste__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.6rem;font-size:.85rem}
.fussleiste__unten a:hover{color:var(--creme)}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .marquee__track{animation:none}
  [data-reveal],.held__panel,.kachel::before{opacity:1!important;transform:none!important}
  [data-mask-reveal] img{clip-path:inset(0 0 0 0)!important}
  .mask-bild img,.umsetzt__kachel img{transform:none!important}
}

/* ---------- Sichtbarkeitshilfen ---------- */
[data-reveal]{will-change:transform,opacity}
.nur-mobil{display:block}
.nur-desktop{display:none}
@media (min-width:760px){.nur-mobil{display:none}.nur-desktop{display:block}}