/* 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}
/* Sprungziele (effekte.js setzt data-sprungziel, wenn es den Fokus auf einen ganzen Bereich legt): Der Rahmen eines
   fensterbreiten, tausende Pixel hohen Bereichs liegt außerhalb des Bildes oder unter der Kopfzeile und zeigte sich
   nur als lose rote Linie. Der Bereich ist kein Bedienelement, die Ankunft zeigt der Bildlauf selbst. */
[data-sprungziel]:focus-visible{outline:none}
.abschnitt--navy,.held,.kopf,.menue-voll,.fussleiste{--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)}
/* Eyebrow mit ganzem Satz: mindestens 14 px und lockerer, das enge Versal-Etikett bleibt den Kurzmarken */
.label--satz{font-size:.875rem;line-height:1.35;letter-spacing:.12em}
.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;text-wrap:balance}
.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--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__liste a[aria-current="page"]{color:var(--rot-hell);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}
.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}}
/* Ohne JavaScript öffnet der Burger nichts: dann stehen die vier Verweise umbrechend in der Kopfzeile */
@media (max-width:899px){
  html:not(.js) .kopf__burger{display:none}
  html:not(.js) .kopf__inner{flex-wrap:wrap;gap:0 1.5rem;padding-block:.5rem}
  html:not(.js) .kopf__nav{display:block;width:100%}
  html:not(.js) .kopf__nav ul{flex-wrap:wrap;gap:0 1.4rem}
  html:not(.js) .kopf__nav a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- 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%;background:var(--navy-dunkel)}
.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. */
/* Seit 12.09.2026 (Held fotorealistisch, MM): die Verlaufsschichten sind schwächer, damit das
   Foto trägt. Links unten (h1, CTA) bleibt eine Navy-Abdunklung, oben und rechts liegt das Bild
   frei. Kontrast Creme auf Bild wird nach dem Bau per Pixelprobe geprüft (_held_foto/kontrast.mjs). */
.held__stage::after{content:"";position:absolute;inset:0;background:
    linear-gradient(90deg,color-mix(in srgb, var(--navy-dunkel) 54%, transparent) 0%,color-mix(in srgb, var(--navy-dunkel) 28%, transparent) 42%,transparent 72%),
    linear-gradient(180deg,color-mix(in srgb, var(--navy-dunkel) 30%, transparent) 0%,color-mix(in srgb, var(--navy-dunkel) 3%, transparent) 34%,color-mix(in srgb, var(--navy-dunkel) 68%, 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))}
/* Zeilenmaske von SplitText (motion.js, linesClass split-zeile, die Maske heißt split-zeile-mask und trägt
   overflow:clip): unten Luft für die Unterlängen von g, p, j bei Zeilenhöhe .94, der negative Rand hält den
   Zeilenabstand unverändert. */
.split-zeile-mask{padding-bottom:.16em;margin-bottom:-.16em}
/* Gegenprüfung 17.09.2026: Ohne eigenen Formatierungskontext wandert der negative Rand der letzten Zeile durch die
   Überschrift hindurch und zieht das Folgeelement um .16em heran (ueber-uns: Unterlänge berührte die Zitatkarte) */
[data-split]{display:flow-root}
.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-text{color:var(--navy-mute);font-size:.98rem;line-height:1.55}
@media (max-width:680px){
  .held__pin{justify-content:flex-start}
  /* Mobil sitzt der Textblock oben. Sobald der Held gepinnt ist, liegt die klebende Kopfzeile
     (84 px) über seinem oberen Rand und schnitt die erste h1-Zeile ab (Sichtprüfung 12.09.2026,
     mobil-t0.25 bis t1). Der obere Innenabstand hält den Text unter der Kopfzeile; vor dem Pin
     ist das nur etwas mehr Luft, der Übergang beim Einrasten bleibt ohne Sprung. */
  .held__intro{padding-top:calc(var(--kopf-h) + .75rem);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. */
/* Lesefluss ohne Scrollstrecke (17.09.2026): gilt mit der Klasse held--kein-pin (Skript-Fallback, Kulisse),
   ohne JavaScript (html ohne .js) und bei reduzierter Bewegung (html.rm, beides aus js/kopf.js im Kopf).
   Vorher entschied das ein eingebettetes Skript im Held, das die CSP live blockte: Besucher mit reduzierter
   Bewegung bekamen den Umbau erst nach dem Laden (gemessen CLS 0,18), ohne JavaScript lagen die vier Panels
   übereinander. Die Kulisse der Unterseiten bleibt ausgenommen, sie hat ihre eigene Höhe. */
.held--kein-pin .held__pin,
html:not(.js) .held:not(.held--kulisse) .held__pin,
html.rm .held:not(.held--kulisse) .held__pin{height:auto!important;min-height:0!important}
.held--kein-pin .held__panels,
html:not(.js) .held:not(.held--kulisse) .held__panels,
html.rm .held:not(.held--kulisse) .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,
html:not(.js) .held:not(.held--kulisse) .held__panel,
html.rm .held:not(.held--kulisse) .held__panel{position:static;width:auto;opacity:1!important;transform:none!important}
.held--kein-pin .held__kapitel,
html:not(.js) .held:not(.held--kulisse) .held__kapitel,
html.rm .held:not(.held--kulisse) .held__kapitel{display:none}
/* min-height:0 gehört zur Kulisse selbst: die Grundregel oben hält 100svh als Mindesthöhe, die erst die vom
   Skript nachgereichte Klasse held--kein-pin aufhob. Das war ein Layoutsprung nach dem ersten Zeichnen
   (ueber-uns live gemessen: CLS 0,10). Die Klasse steht jetzt zusätzlich fest im Markup. */
.held--kulisse .held__pin{height:min(78svh,780px)!important;min-height:0!important}

/* Scrollstrecke der Startseite als CSS (17.09.2026), statt GSAP-Pin: Der Abschnitt ist so hoch wie der erste
   Bildschirm plus die Strecke, die Bühne haftet (position:sticky). Der GSAP-Pin baute das DOM nach dem Laden um
   (pin-spacer, position:fixed) und setzte die Bühne beim Ein- und Ausrasten um die Kopfzeilenhöhe (85 px)
   versetzt: gemessen per PerformanceObserver CLS 0,50 im Prüflauf und 1,04 mit echtem Mausrad. Haftende
   Elemente zählt der Browser nicht als Layoutsprung, und die Höhe steht ab dem ersten Zeichnen fest.
   Strecke: 400vh, bis 680 px 320vh (wie vorher pinHöhe() in held-einbindung.js). Nur mit JavaScript und ohne
   reduzierte Bewegung; sonst gelten die Lesefluss-Regeln oben. Die Panels starten unsichtbar, das Skript
   blendet sie je Kapitel ein (vorher lagen bis zum Skriptstart alle vier sichtbar übereinander). */
html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin){height:calc(100svh + 400vh)}
html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__pin{position:sticky;top:0}
html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__panel{opacity:0}
@media (max-width:680px){html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin){height:calc(100svh + 320vh)}}
.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}
.bild-nachweis{position:absolute;right:0;bottom:0;z-index:1;margin:0;max-width:100%;padding:.3rem .6rem;font-size:.68rem;line-height:1.35;color:rgba(251,250,246,.86);background:rgba(12,16,48,.72);border-top-left-radius:8px}
.bild-nachweis a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.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}
/* Der Eyebrow-Satz läuft nicht unter die große Kartennummer (rechts oben, rund 1,15 Ziffernbreiten je Stelle) */
.stapel__inhalt .label--satz{max-width:calc(100% - clamp(5.4rem,11.5vw,12.5rem))}
/* 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: Engagement-Mosaik (index) und Masken-Reveal ---------- */
/* Statt sechs gleich großer 4:3-Kacheln (Jury: "wirkt wie Standard-Bildergalerie") ein Mosaik mit
   Hierarchie: das Hochformat aus dem Käfig ist der Anker über zwei Zeilen, rechts daneben zwei
   mittlere Bilder, darunter drei kleine. Die Zeilenhöhen ergeben sich aus den Seitenverhältnissen
   der beiden mittleren Bilder (16:9 plus 3:2), der Anker füllt diese Höhe. Bewegung: die einmalige
   Aufdeckung (Block "Aufdeckung" weiter unten), kein zusätzlicher Effekt, das Kontingent der
   Startseite ist mit Held und Leistungen voll. */
/* Lead und Absatz gehören zusammen: die Grundregel der Kopfzeile hält darunter bis zu 4,5 rem Luft,
   zwischen den beiden Textblöcken klaffte dadurch eine leere Zeile (gemessen 1440 px: 72 px). */
.engagement .kopf-zeile{margin-bottom:clamp(1.1rem,1.8vw,1.6rem)}
.engagement__absatz{max-width:64ch;color:var(--gedaempft)}
/* Handy: eine Spalte. Zwei Spalten ergaben bei 390 px Kacheln von 165 px, zu klein für Gesichter und
   Banner. Den Rhythmus tragen die wechselnden Seitenverhältnisse. */
.mosaik{--unterschrift:calc(.5rem + 1.3 * .95rem + .4rem);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.1rem,1.4vw,1.2rem);margin-top:clamp(2.5rem,5vw,4rem)}
.mosaik__stueck{display:grid;min-width:0}
.mosaik__figur{margin:0}
.mosaik__rahmen{position:relative;overflow:hidden;border-radius:var(--radius-klein);background:color-mix(in srgb,var(--navy) 8%,var(--creme));aspect-ratio:3/2}
.mosaik__rahmen picture{position:absolute;inset:0;display:block}
.mosaik__rahmen img{width:100%;height:100%;object-fit:cover}
/* Bildausschnitte: Gesichter, Handschuhe und Banner bleiben im Bild, beschnitten wird Hallenboden.
   Ein Ausschnitt wirkt nur dort, wo das Bild höher als sein Rahmen ist: beim Anker immer, bei Ring und
   Banner einspaltig unter 640 px; das Plakat passt mit 3:2 ohne Beschnitt. */
.mosaik__stueck--anker img{object-position:50% 34%}
.mosaik__stueck--ring img{object-position:50% 22%}
.mosaik__stueck--banner img{object-position:50% 12%}
.mosaik__stueck--anker .mosaik__rahmen{aspect-ratio:4/5}
.mosaik__stueck--gruppe .mosaik__rahmen{aspect-ratio:16/9}
.mosaik__stueck--karte .mosaik__rahmen{aspect-ratio:4/3}
/* Bildunterschrift nur, wo der Name wirklich im Bild lesbar ist (Shirt, Autogrammkarte, Banner).
   Unter dem Bild in Tinte auf Creme statt als Versal-Plakette im Foto: dort hing der Kontrast am
   jeweiligen Bildinhalt. Der kurze rote Strich ist dieselbe Geste wie die Linie der Kopfnavigation. */
/* Nähe: 8 px zum eigenen Bild, zum nächsten Bild mindestens das Dreifache (Unterkante plus Rasterabstand).
   Gegenprüfung 17.09.2026: mit 12 px zu 14,4 px stand die Unterschrift fast mittig zwischen zwei Bildern. */
.mosaik__name{display:flex;align-items:center;gap:.7em;margin-top:.5rem;padding-bottom:.4rem;font:500 .95rem/1.3 var(--text);color:var(--tinte)}
.mosaik__name::before{content:"";flex:none;width:1.5em;height:2px;background:var(--rot)}
/* Ab 640 px trägt das Mosaik (Anker 6 Spalten, kleine Kacheln 4 Spalten): gestapelt wäre der
   Abschnitt bei 768 px rund doppelt so hoch. */
@media (min-width:640px){
  .mosaik{grid-template-columns:repeat(12,minmax(0,1fr))}
  .mosaik__stueck--anker{grid-column:1/7;grid-row:1/3}
  /* Der Anker füllt beide Zeilen: die Figur streckt sich im Rasterfeld, der Rahmen nimmt, was über
     der Bildunterschrift bleibt. */
  .mosaik__stueck--anker .mosaik__figur{display:grid;grid-template-rows:minmax(0,1fr) auto}
  .mosaik__stueck--anker .mosaik__rahmen{aspect-ratio:auto;min-height:0}
  .mosaik__stueck--gruppe{grid-column:7/13;grid-row:1}
  /* Das Plakat hält unter sich dieselbe Zone frei, die links die Unterschrift des Ankers belegt: so enden
     beide Bilder auf einer Kante (vorher 31,8 px Stufe), und der obere Block setzt sich von der Nachreihe ab. */
  .mosaik__stueck--plakat{grid-column:7/13;grid-row:2;padding-bottom:var(--unterschrift)}
  /* Seit 25.09.2026 zwei Kacheln in der Nachreihe (Gruppenfoto mit Kindern entfernt, Einwilligung nicht dokumentiert), je halbe Breite. */
  .mosaik__stueck--klein{grid-column:span 6;grid-row:3}
  .mosaik__stueck--klein .mosaik__rahmen{aspect-ratio:4/3}
}
/* Masken-Startzustand nur bei vorhandenem JavaScript (Korrekturlauf Befund 7): html.js wird von
   js/kopf.js ganz oben im <head> gesetzt (eigene Datei, eingebettete Skripte blockt die CSP), 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 ("Das haben wir umgesetzt" auf
   leistungen.html; das Engagement-Mosaik der Startseite nutzt seit 17.09.2026 die Aufdeckung). */
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.6rem,3vw,2.2rem) clamp(1.1rem,2.4vw,1.6rem) clamp(1.1rem,2.4vw,1.6rem);background:linear-gradient(180deg,transparent 0%,color-mix(in srgb, var(--navy-dunkel) 82%, transparent) 38%,color-mix(in srgb, var(--navy-dunkel) 96%, transparent) 100%);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:#d9dae4}

/* ---------- Unser Weg (horizontal) ---------- */
.weg{position:relative;overflow:hidden}
/* Scrollstrecke als CSS (17.09.2026), statt GSAP-Pin, gleiches Muster wie der Held der Startseite: effekte.js
   setzt die Klasse weg--aktiv und die Abschnittshöhe (Inhalt plus waagerechter Laufweg), der Innenrahmen haftet
   unter der Kopfzeile. Der GSAP-Pin hängte den Abschnitt beim Einrasten in einen pin-spacer um, der Browser
   wertete das als Layoutsprung (ueber-uns live gemessen: CLS 1,7 bis 1,9 mit echtem Mausrad). overflow:hidden
   wandert auf den Innenrahmen, weil ein Vorfahr mit overflow:hidden das Haften verhindert; ebenso der
   Innenabstand, damit der haftende Rahmen so steht wie vorher der gepinnte Abschnitt. */
.weg--aktiv{overflow:visible;padding-block:0}
/* Feinschliff 17.09.2026: Der haftende Rahmen ist genau so hoch wie das Fenster unter der Kopfzeile und zentriert
   seinen Inhalt. Vorher war er höher als das Fenster (1440 x 900: 1026 gegen 816 px), die Karten liefen unten aus
   dem Bild. Passt der Inhalt trotzdem nicht (kleines Handy, Handy quer), nimmt effekte.js weg--aktiv zurück. */
.weg--aktiv .weg__haft{position:sticky;top:var(--kopf-h);overflow:hidden;height:calc(100svh - var(--kopf-h));display:flex;flex-direction:column;justify-content:safe center;gap:clamp(1rem,3vh,2.4rem);padding-block:clamp(1rem,3.5vh,3rem)}
.weg--aktiv .kopf-zeile{margin-bottom:0}
/* Ohne Haften (kein JavaScript, reduzierte Bewegung, Inhalt passt nicht): Karten umbrechen im Lesefluss,
   statt rechts abgeschnitten zu werden */
/* Raster statt umbrechender Flex-Zeile (Gegenprüfung 17.09.2026): Eine allein stehende dritte Karte wuchs sonst auf
   die volle Spaltenbreite und wurde samt Bild deutlich höher als die beiden anderen (932 x 430 quer) */
.weg:not(.weg--aktiv) .weg__track{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));width:auto}
.weg:not(.weg--aktiv) .weg__karte{width:auto}
.weg__track{display:flex;gap:1.4rem;width:max-content;padding-block:.5rem}
.weg__karte{width:min(78vw,440px);background:color-mix(in srgb,var(--creme) 5%,var(--navy));border:1px solid var(--navy-linie);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 (max-width:899px){
  .weg--aktiv .weg__karte{padding:1.3rem 1.4rem;gap:.7rem}
  .weg--aktiv .weg__zahl{font-size:2.2rem}
  .weg--aktiv .weg__text{font-size:.95rem;line-height:1.5}
  .weg--aktiv .weg__karte img{aspect-ratio:auto;height:clamp(110px,20vh,190px);width:100%}
}
@media (min-width:900px){
  .weg__track{gap:2.2rem}
  /* Querformat-Karten: Text links, Bild rechts. Drei Karten sind damit gut doppelt so breit wie die Inhaltsspalte,
     der waagerechte Lauf ist als Bewegung lesbar (vorher 190 px Weg bei 1440, ab 1630 px Fensterbreite gar keiner) */
  .weg--aktiv .weg__karte{width:min(64vw,820px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:clamp(1.6rem,2.5vw,2.4rem);row-gap:1rem;align-content:start}
  .weg--aktiv .weg__karte img{grid-column:2;grid-row:1 / -1;align-self:stretch;width:100%;height:100%;min-height:230px;max-height:min(44vh,400px);aspect-ratio:auto}
  .weg:not(.weg--aktiv) .weg__track{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
}

/* ---------- Referenzen als Beweisstücke (ueber-uns) ---------- */
/* Ersetzt das endlos laufende Band mit 168x118-Vorschaubildern (Jury: "eher Logoleiste als
   inszenierter Beweis-Moment"). Das Material trägt es: die Luftaufnahmen liegen seit dem
   17.09.2026 bis 1920 px vor. Rhythmus statt Gleichform, in vier Zeilen: Aufmacher über die volle
   Spalte (Titel im Bild), zwei versetzte Paare (7 und 5 Spalten, dann 5 und 7), ein eingerückter
   Schluss. Jedes Bild behält dabei annähernd sein eigenes Format, keines wird in ein fremdes
   Hochformat gezwungen. Kein Band, keine Pausentaste, keine Dubletten mehr für Screenreader.
   Bewegung: einmalige Aufdeckung (Block "Aufdeckung" darunter) plus leichter Zug im Bildausschnitt
   (effekte.js, Block "Beweisstücke"), ausdrücklich ohne Pin, weil "Unser Weg" direkt darüber schon
   eine haftende Strecke ist. */
.beweis__zaehlung{display:flex;align-items:baseline;gap:.45em;font:500 .95rem/1 var(--text);color:var(--gedaempft)}
.beweis__zaehlung b{font:600 clamp(1.6rem,2vw,2.2rem)/1 var(--display);color:var(--tinte);letter-spacing:-.03em}
/* Eigener Listen-Reset: die Grundregel weiter oben gilt nur für ul, eine ol behält sonst ihre
   Zählmarken und 40 px Innenabstand. Die Zählung übernimmt die sichtbare Nummer im Titel. */
.beweis__liste{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.2rem,5vw,3.4rem);list-style:none;margin:0;padding:0}
.beweis__stueck{min-width:0}
.beweis__figur{position:relative;margin:0}
.beweis__rahmen{position:relative;overflow:hidden;border-radius:var(--radius);background:color-mix(in srgb,var(--navy) 8%,var(--creme));aspect-ratio:4/3}
.beweis__rahmen picture{position:absolute;inset:0;display:block}
.beweis__rahmen img{width:100%;height:100%;object-fit:cover}
/* Reserve für den Bildzug (6 % oben und unten): die Klasse setzt effekte.js erst, wenn GSAP wirklich
   da ist und Bewegung erlaubt ist. Ohne sie steht das Bild deckungsgleich im Rahmen. */
.beweis__rahmen--zug picture{top:-6%;bottom:auto;height:112%}
/* Filmtitel-Satz: die laufende Nummer steht als leichter Index links neben dem Namen, nicht als
   Versal-Etikett darüber. Gleiche Idee wie .weg__zahl und .stapel__zahl auf den anderen Seiten,
   nur kleiner: die Ziffer zählt, der Name trägt. */
.beweis__titel{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(.7rem,1.2vw,1.1rem);row-gap:.25rem;margin-top:clamp(.9rem,1.6vw,1.3rem);padding-top:clamp(.8rem,1.4vw,1.1rem);border-top:1px solid var(--creme-linie)}
.beweis__nr{grid-column:1;grid-row:1/span 2;align-self:start;font:300 clamp(1.5rem,1.3vw + 1.05rem,2.3rem)/1.02 var(--display);letter-spacing:-.03em;color:var(--rot)}
.beweis__name{grid-column:2;grid-row:1;font-weight:600;font-size:clamp(1.5rem,1.3vw + 1.05rem,2.3rem);line-height:1.02;letter-spacing:-.025em}
/* Ort eine Stufe dunkler als --gedaempft (dort gemessen 4,63:1, zu knapp an der Grenze). */
.beweis__ort{grid-column:2;grid-row:2;font:400 1rem/1.4 var(--text);color:color-mix(in srgb,var(--tinte) 74%,var(--creme))}
/* Handy: jedes Bild in seinem natürlichen Format, der Titel immer unter dem Bild. */
.beweis__stueck--aufmacher .beweis__rahmen{aspect-ratio:5/3}
.beweis__stueck--breit-links .beweis__rahmen{aspect-ratio:16/9}
.beweis__stueck--schluss .beweis__rahmen{aspect-ratio:3/2}
/* Gegenlicht-Bild: der Ausschnitt hält die Sonne links oben und das Dach unten im Bild. */
.beweis__stueck--kompakt-rechts img{object-position:34% 50%}
.beweis__stueck--schluss img{object-position:50% 46%}
/* Ab 640 px steht der Titel des Aufmachers im Bild, darunter eine Verlaufsschicht über dem unteren
   Bilddrittel (z-index 1), der Titel darüber (z-index 2). Alle drei Textteile in Creme: die rote
   Ziffer maß im Bild nur 2,1:1 bis 2,4:1. Kontrast am Ort des Textes per Pixelprobe gemessen. */
@media (min-width:640px){
  .beweis__stueck--aufmacher .beweis__rahmen::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 34%,color-mix(in srgb,var(--navy-dunkel) 58%,transparent) 66%,color-mix(in srgb,var(--navy-dunkel) 92%,transparent) 100%)}
  .beweis__stueck--aufmacher .beweis__titel{position:absolute;z-index:2;left:clamp(1.4rem,3vw,2.8rem);right:clamp(1.4rem,3vw,2.8rem);bottom:clamp(1.3rem,2.6vw,2.2rem);margin:0;padding:0;border:0;color:var(--creme)}
  .beweis__stueck--aufmacher .beweis__nr,
  .beweis__stueck--aufmacher .beweis__ort{color:var(--creme)}
  /* Drei Stufen: h2 des Abschnitts (2.6vw + 1.1rem), darunter der Aufmacher, darunter die übrigen fünf.
     Mit der h2-Formel waren Überschrift und Aufmachername von 640 bis 1660 px auf den Pixel gleich groß;
     deutlich kleiner würde der Aufmacher im Tablet-Band kaum noch aus der Reihe ragen (Gegenprüfung). */
  .beweis__stueck--aufmacher .beweis__nr,
  .beweis__stueck--aufmacher .beweis__name{font-size:clamp(1.9rem,2.3vw + 1rem,3.4rem)}
  .beweis__stueck--aufmacher .beweis__ort{font-size:1.05rem}
}
/* Tablet-Band: der volle Zwölfer-Raster braucht Platz, sonst schrumpfen die schmalen Stücke auf
   Briefmarkengröße. Ein Paar nebeneinander (03 und 04), der Rest über die volle Spalte. */
@media (min-width:640px) and (max-width:899px){
  .beweis__liste{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;column-gap:clamp(1.2rem,2.2vw,2rem)}
  .beweis__stueck{grid-column:1/-1}
  .beweis__stueck--aufmacher .beweis__rahmen{aspect-ratio:2/1}
  .beweis__stueck--kompakt-rechts{grid-column:1/2}
  .beweis__stueck--kompakt-links{grid-column:2/3}
  .beweis__stueck--breit-rechts .beweis__rahmen{aspect-ratio:3/2}
  .beweis__stueck--schluss .beweis__rahmen{aspect-ratio:2/1}
}
@media (min-width:900px){
  .beweis__liste{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;column-gap:clamp(1.4rem,2.4vw,2.6rem);row-gap:clamp(2.6rem,4.2vw,3.8rem)}
  .beweis__stueck{grid-column:1/-1}
  .beweis__stueck--aufmacher .beweis__rahmen{aspect-ratio:21/9}
  /* Paar eins: 7 Spalten in 16:9 neben 5 Spalten in 5:4 ergibt fast dieselbe Bildhöhe, der Versatz
     des rechten Stücks ist damit eine Entscheidung und kein Zufall. */
  .beweis__stueck--breit-links{grid-column:1/8}
  .beweis__stueck--kompakt-rechts{grid-column:8/13;margin-top:clamp(1.5rem,3vw,3rem)}
  .beweis__stueck--kompakt-rechts .beweis__rahmen{aspect-ratio:5/4}
  .beweis__stueck--kompakt-links{grid-column:1/6;margin-top:clamp(1.5rem,3vw,3rem)}
  .beweis__stueck--breit-rechts{grid-column:6/13}
  .beweis__stueck--breit-rechts .beweis__rahmen{aspect-ratio:3/2}
  .beweis__stueck--schluss{grid-column:3/13}
  .beweis__stueck--schluss .beweis__rahmen{aspect-ratio:2/1}
}

/* ---------- Aufdeckung: Bilder laufen einmal vollständig auf (Referenzen, Engagement) ---------- */
/* Anders als der gescrubbte Masken-Reveal weiter oben hängt hier nichts an der Scrollposition und
   nichts an GSAP: effekte.js setzt den Startzustand selbst (Klasse .aufdecken--bereit, nur für
   Rahmen, die noch unter dem Fenster liegen), ein IntersectionObserver setzt .ist-da, die Transition
   läuft immer bis zum Ende. Eine halb offene Maske im Stand gibt es damit nicht mehr (Jury-Befund am
   Entwurf: inset 45 % im Ruhezustand). Ohne JavaScript, bei blockiertem GSAP oder bei reduzierter
   Bewegung greift keine dieser Regeln, die Bilder stehen sofort vollständig da.
   Technik: ein Vorhang in der Farbe des Abschnitts (::before) zieht sich per transform zurück, kein
   clip-path am Rahmen. Gemessen 17.09.2026: ein zugeklappter clip-path nimmt dem Rahmen seine
   sichtbare Fläche, der Browser lädt loading="lazy"-Bilder darin nicht und der Observer meldet nie
   einen Eintritt. Der Vorhang liegt über Bild, Verlauf und (beim Aufmacher) dem Titel im Bild.
   Richtung nach Format: Panoramen laufen von links auf, kompakte Formate von unten. */
.aufdecken--bereit::before{content:"";position:absolute;inset:-1px;z-index:3;background:var(--creme);transform-origin:50% 0}
.aufdecken--bereit[data-aufdecken="links"]::before{transform-origin:100% 50%}
/* Startlage ohne Übergang, der Übergang hängt erst am Zielzustand: die Klasse kommt zur Laufzeit, mit
   dem Übergang in derselben Regel wäre schon der Startwert scale(1.1) über 1,15 s angefahren worden
   (Gegenprüfung 17.09.2026: bei frühem Sprung in den Abschnitt fiel der Zoom dadurch ganz aus). */
.aufdecken--bereit img{transform:scale(1.1)}
.aufdecken--bereit.ist-da::before{transform:scaleY(0);transition:transform 1.15s var(--ease-fest)}
.aufdecken--bereit[data-aufdecken="links"].ist-da::before{transform:scaleX(0)}
.aufdecken--bereit.ist-da img{transform:none;transition:transform 1.15s var(--ease-fest)}
/* Nachbarn in derselben Zeile kommen leicht versetzt, von links nach rechts. Bei den Referenzen hängt
   das an der Fensterbreite: im Tablet-Band steht "kompakt-links" rechts, ab 900 px sind es die beiden
   rechten Stücke; einspaltig gibt es keine Nachbarn und keinen Verzug. Der Verzug hängt wie der Übergang
   erst am Zielzustand .ist-da: ein transition-delay ohne Dauer am wartenden Rahmen gilt als laufender
   Übergang (kombinierte Dauer größer null), WebKit meldete dafür 0,12 s nach dem Laden ein transitionend
   und die rechten Stücke verloren ihren Vorhang, bevor sie je im Fenster waren (live gemessen 18.09.2026). */
@media (min-width:640px) and (max-width:899px){
  .beweis__stueck--kompakt-links .aufdecken--bereit.ist-da::before,.beweis__stueck--kompakt-links .aufdecken--bereit.ist-da img{transition-delay:.12s}
}
@media (min-width:900px){
  .beweis__stueck--kompakt-rechts .aufdecken--bereit.ist-da::before,.beweis__stueck--kompakt-rechts .aufdecken--bereit.ist-da img,
  .beweis__stueck--breit-rechts .aufdecken--bereit.ist-da::before,.beweis__stueck--breit-rechts .aufdecken--bereit.ist-da img{transition-delay:.12s}
}
@media (min-width:640px){
  .mosaik__stueck--gruppe .aufdecken--bereit.ist-da::before,.mosaik__stueck--gruppe .aufdecken--bereit.ist-da img,
  .mosaik__stueck--karte .aufdecken--bereit.ist-da::before,.mosaik__stueck--karte .aufdecken--bereit.ist-da img{transition-delay:.12s}
  .mosaik__stueck--plakat .aufdecken--bereit.ist-da::before,.mosaik__stueck--plakat .aufdecken--bereit.ist-da img,
  .mosaik__stueck--banner .aufdecken--bereit.ist-da::before,.mosaik__stueck--banner .aufdecken--bereit.ist-da img{transition-delay:.24s}
}

/* ---------- 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}
  [data-reveal],.held__panel,.kachel::before{opacity:1!important;transform:none!important}
  [data-mask-reveal] img{clip-path:inset(0 0 0 0)!important}
  .umsetzt__kachel img{transform:none!important}
  /* Aufdeckung und Bildzug: nichts davon läuft, jedes Bild steht ruhig und vollständig im Rahmen */
  [data-aufdecken]::before{display:none!important}
  [data-aufdecken] img{transform:none!important}
  .beweis__rahmen picture{top:0!important;height:100%!important;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}}

/* ---------- 404 ---------- */
.nichtda{min-height:calc(100svh - var(--kopf-h));display:grid;align-items:center}
.nichtda .label{display:block;margin-bottom:1.2rem}
.nichtda .h1{max-width:14ch;color:var(--creme)}
.nichtda .lead{margin-top:clamp(1.2rem,2.5vw,2rem)}
.nichtda__wege{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(1.8rem,3vw,2.6rem)}

/* ---------- Tippziele auf Touch-Geräten: mindestens 44 px (Feinschliff 17.09.2026) ---------- */
@media (pointer:coarse){
  .kopier-knopf{min-height:44px}
  .fussleiste__spalte ul{gap:0}
  .fussleiste__spalte a,.fussleiste__unten a,.menue-voll__fuss a{display:inline-flex;align-items:center;min-height:44px}
  .fussleiste__marke{min-height:44px;margin-bottom:.6rem}
  .stapel__link{position:relative}
  .stapel__link::after{content:"";position:absolute;inset:-14px -10px}
  /* Kapitelpunkte: die Fläche wächst über das Raster (gap 0, je 44 px), nicht über eine überlappende Zone */
  .held__kapitel{gap:0}
  .held__kapitel button{min-height:44px;min-width:44px}
}

/* ---------- Druck: Rechtstexte und Kontakt auf Weiß, ohne Navigation und Bewegung ---------- */
@media print{
  *,*::before,*::after{background:transparent!important;color:#111!important;box-shadow:none!important;text-shadow:none!important;animation:none!important;transition:none!important}
  html,body{background:#fff!important}
  .kopf{position:static!important;border-bottom:1px solid #999}
  .kopf__nav,.kopf__burger,.menue-voll,.skip,.kopier-knopf,.knopf,.held__kapitel,.held__stage,canvas,.formular button{display:none!important}
  .abschnitt{padding-block:1.2rem!important}
  [data-reveal],[data-split] *,.held__panel{opacity:1!important;transform:none!important}
  [data-mask-reveal] img{clip-path:none!important}
  [data-aufdecken]::before{display:none!important}
  [data-aufdecken] img{transform:none!important}
  .beweis__rahmen picture{top:0!important;height:100%!important;transform:none!important}
  a{text-decoration:underline}
  h1,h2,h3{break-after:avoid}
  p,li{orphans:3;widows:3}
}