/* ============================================================
   Brücke Gütersloh e. V. – Seitenstile
   Erzeugt von tools/aus-bundle-bauen.mjs aus dem freigegebenen
   Entwurf. Schriften werden selbst gehostet (kein Google-CDN).
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   FARBSYSTEM — die einzige Stelle, an der Farben festgelegt werden.
   Alles andere im Projekt greift nur noch über var(--…) darauf zu.
   Wer die Anmutung der Seite ändern will, ändert hier die Werte,
   nicht die einzelnen Seiten.
   ============================================================ */
:root {
  color-scheme: light;   /* verhindert das automatische Nachdunkeln in mobilen Browsern */

  /* --- Grundflächen ------------------------------------------- */
  --grund:             #F7F1E6;      /* Seitengrund und Karten */
  --grund-sanft:       #F1EADC;   /* leicht abgesetzte Sektion */
  --grund-sanft-2:     #EEE6D6;   /* Hover-Pille, Dropdown-Hover */
  --grund-sanft-3:     #F1EADC;
  --grund-gruen:       #E4EBDF;   /* grün getönte Fläche */
  --grund-gruen-2:     #E4EBDF;
  --grund-blau:        #EAE6DA;
  --grund-blau-2:      #EFEADE;

  /* --- Text ---------------------------------------------------- */
  --text-stark:        #262A26;   /* Überschriften */
  --text:              #2E322D;   /* Fließtext */
  --text-zweit:        #55524A;   /* Sekundärtext, Navigation */
  --text-dritt:        #66625A;   /* Bildunterschriften, Hinweise */
  --text-leise:        #696459;   /* Labels, Kleingedrucktes */
  --auf-dunkel:        #D8D2C4;   /* Text auf dunklem Grund */
  --auf-dunkel-leise:  #B9B2A3;
  --weiss:             #fff;      /* Text/Icon auf dunklem Grund */

  /* --- Dunkle Flächen ------------------------------------------ */
  --dunkel:            #26382B;   /* Footer, dunkle Blöcke, Schatten */
  --dunkel-tief:       #1B2A20;
  --dunkel-800:        #334636;
  --dunkel-750:        #2F4234;
  --dunkel-700:        #364B3A;
  --dunkel-mittel:     #405A44;
  --blau-akzent:       #5C7A52;
  --link-hover:        #3B5C35;

  /* --- Grün: Marke, Aktionen ----------------------------------- */
  --gruen:             #44683C;   /* Links, Hauptknopf */
  --gruen-tief:        #33512F;
  --gruen-hell:        #4F7A46;   /* Hover, Fokusring */
  --gruen-heller:      #56754E;   /* war #6A9160: weiss darauf 3.60, als Text 3.20 */
  --gruen-heller-2:    #56754E;
  --gruen-blass:       #93A67F;
  --gruen-blass-2:     #B3C4A0;
  --gruen-blass-3:     #C2CFAF;

  /* --- Linien und Ränder --------------------------------------- */
  --linie:             #E6DDCB;   /* Haarlinie, häufigster Rand */
  --linie-gruen:       #CFD8BF;
  --linie-gruen-hell:  #DCE2CD;

  /* --- Rot: Fehler und Hinweise -------------------------------- */
  --rot:              #C1503F;
  --rot-tief:         #9E3B2C;
  --rot-blass:        #E5B7AE;
  --rot-grund:        #FBEDEA;

  /* --- Farbtripel für rgba() (Schatten, Schleier) --------------- */
  --dunkel-rgb:        38,56,43;
  --dunkel-tief-rgb:   27,42,32;
  --weiss-rgb:         255,255,255;
  --gruen-hell-rgb:    79,122,70;
  --gruen-blass-rgb:   147,166,127;
  --gruen-blass-2-rgb: 179,196,160;
  --gruen-glow-rgb:    208,222,183;
  --linie-gruen-hell-rgb: 220,226,205;

  /* --- Gold: Akzent aus dem Herbstlaub des Brückenfotos -------- */
  --hero-zeile2:      #D8D2C4;   /* zweite Zeile der Hero-Ueberschrift */

  --gold:             #93641B;
  --gold-hell:        #D2A052;
}

  body { margin:0; background:var(--grund); color:var(--text); font-family:"Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
  a { color:var(--gruen); text-decoration:none; text-underline-offset:3px; }
  a:hover { color:var(--link-hover); }
  .fr { font-family:"Fraunces",Georgia,serif; }
  @keyframes rise { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
  .rise { opacity:0; animation:rise .9s cubic-bezier(.16,1,.3,1) forwards; }
  @media (prefers-reduced-motion:reduce){ .rise { animation:none; opacity:1; } }
  .reveal { opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal.in { opacity:1; transform:none; }
  .card { transition:transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, border-color .32s ease; }
  .card:hover { transform:translateY(-7px); box-shadow:0 30px 54px -26px rgba(var(--dunkel-rgb),0.45); border-color:var(--linie-gruen); }
  .card:hover .marrow { transform:translateX(5px); }
  .marrow { display:inline-block; transition:transform .25s ease; }
  @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} .card,.marrow{transition:none;} }
  .draw { stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.6s ease-out .2s forwards; }
  .draw.d2 { animation-delay:.55s; }
  @keyframes draw { to { stroke-dashoffset:0; } }
  @media (prefers-reduced-motion:reduce){ .draw{animation:none;stroke-dashoffset:0;} }
  .hdr-menu{ display:none; }
  /* Vier Angebote + Idee-Kachel: die Idee schließt die letzte Reihe */
  .angebot-idee{ grid-column:span 2; }
  @media (max-width:1023px){ .hdr-nav{ display:none !important; } .hdr-menu{ display:block !important; } }
  .hdr-menu[open] .hdr-panel{ display:block; }
  .hdr-menu summary{ list-style:none; cursor:pointer; }
  .hdr-menu summary::-webkit-details-marker{ display:none; }
  /* Responsive – Tablet & Smartphone */
  @media (max-width:1023px){
    [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
    [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
    [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
    [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
    [style*="grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)"]{grid-template-columns:1fr !important;}
    aside[style*="position:sticky"]{position:static !important;}
    .angebot-idee{grid-column:span 2;}
  }
  @media (max-width:700px){
    [style*="grid-template-columns:"]{grid-template-columns:1fr !important;}
    .angebot-idee{grid-column:auto;}
    dl[style*="repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important;gap:28px 16px !important;}
    [style*="grid-template-columns:130px 1fr"]{gap:6px !important;}
    section[style*="padding:112px 0"]{padding:64px 0 !important;}
    section[style*="padding:96px 0"]{padding:56px 0 !important;}
    section[style*="padding:72px 0"]{padding:48px 0 !important;}
    [style*="padding:48px"]{padding:28px 22px !important;}
    [style*="padding:64px 24px"]{padding:48px 24px !important;}
    [style*="justify-self:start"]{justify-self:stretch !important;text-align:center;}
  }
  a { color:var(--gruen); text-decoration:none; }
  .card { transition:transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, border-color .32s ease; }
  .card:hover { transform:translateY(-7px); box-shadow:0 30px 54px -26px rgba(var(--dunkel-rgb),0.45); border-color:var(--linie-gruen); }
  .card:hover .marrow { transform:translateX(5px); }
  .marrow { display:inline-block; transition:transform .25s ease; }
  @keyframes srise { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
  @supports (animation-timeline: view()) {
    .sreveal { animation:srise .8s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% entry 45%; }
  }
  @media (prefers-reduced-motion:reduce){ .sreveal { animation:none; } }
  .card { transition:transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, border-color .32s ease; }
  .card:hover { transform:translateY(-7px); box-shadow:0 30px 54px -26px rgba(var(--dunkel-rgb),0.45); border-color:var(--linie-gruen); }
  @keyframes srise { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
  @supports (animation-timeline: view()) {
    .sreveal { animation:srise .8s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% entry 45%; }
  }
  @media (prefers-reduced-motion:reduce){ .sreveal { animation:none; } .card { transition:none; } }
  .card { transition:transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, border-color .32s ease; }
  .card:hover { transform:translateY(-7px); box-shadow:0 30px 54px -26px rgba(var(--dunkel-rgb),0.45); border-color:var(--linie-gruen); }
  @keyframes srise { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
  @supports (animation-timeline: view()) {
    .sreveal { animation:srise .8s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% entry 45%; }
  }
  @media (prefers-reduced-motion:reduce){ .sreveal { animation:none; } .card { transition:none; } }
  .faq summary { list-style:none; cursor:pointer; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary .plus { transition:transform .3s ease; }
  .faq[open] summary .plus { transform:rotate(45deg); }
  .faq { transition:border-color .25s ease, box-shadow .25s ease; }
  .faq[open] { border-color:var(--linie-gruen); box-shadow:0 20px 44px -30px rgba(var(--dunkel-rgb),0.4); }
  .faq[open] summary .qt { color:var(--text-stark); }
  :focus-visible { outline:3px solid var(--gruen-hell); outline-offset:3px; border-radius:6px; }
  @keyframes srise { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
  @supports (animation-timeline: view()) {
    .sreveal { animation:srise .8s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% entry 45%; }
  }
  @media (prefers-reduced-motion:reduce){ .sreveal { animation:none; } }
  .card { transition:transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, border-color .32s ease; }
  .card:hover { transform:translateY(-7px); box-shadow:0 30px 54px -26px rgba(var(--dunkel-rgb),0.45); border-color:var(--linie-gruen); }
  @keyframes srise { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
  @supports (animation-timeline: view()) {
    .sreveal { animation:srise .8s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% entry 45%; }
  }
  @media (prefers-reduced-motion:reduce){ .sreveal { animation:none; } .card { transition:none; } }
  .fi { width:100%;background:var(--grund);border:1.5px solid var(--auf-dunkel);border-radius:12px;padding:13px 15px;font-size:16px;color:var(--text);font-family:inherit;box-sizing:border-box; }
  .fi:focus { outline:none;border-color:var(--gruen-hell);box-shadow:0 0 0 3px var(--grund-gruen); }
  .fi::placeholder { color:var(--text-dritt); }
  :focus-visible { outline:3px solid var(--gruen-hell);outline-offset:3px;border-radius:4px; }
  .card { transition:transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, border-color .32s ease; }
  .card:hover { transform:translateY(-7px); box-shadow:0 30px 54px -26px rgba(var(--dunkel-rgb),0.45); border-color:var(--linie-gruen); }
  @keyframes srise { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
  @supports (animation-timeline: view()) {
    .sreveal { animation:srise .8s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% entry 45%; }
  }
  @media (prefers-reduced-motion:reduce){ .sreveal { animation:none; } .card { transition:none; } }
  .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* Zusätze für die statische Fassung */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--dunkel); color: var(--weiss); padding: 12px 20px;
  border-radius: 0 0 10px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Mobil-Header: Wortmarke bleibt sichtbar. Damit Logo + Name + Menue-Button
   in ~375px Breite passen, wird das Logo etwas geschrumpft, der Name
   geringfuegig kleiner gesetzt und der Untertitel "gemeinnuetziger Verein"
   ausgeblendet — er waere durch das letter-spacing sonst der breiteste
   Baustein und wuerde den Menue-Button aus dem Bildschirm draengen. */
@media (max-width: 700px) {
  .hdr-logo { height: 36px !important; }
  .hdr-wortmarke-name { font-size: 16px !important; }
  .hdr-wortmarke-sub { display: none !important; }
}

/* Dropdown-Navigation (Desktop) – rein per CSS, öffnet bei Hover und
   Tastatur-Fokus, damit sie auch ohne JavaScript bedienbar bleibt. */
.nav-group { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 99px;
  font-weight: 500; font-size: 16px; color: var(--text-zweit);
  text-decoration: none; cursor: pointer;
}
.nav-group:hover .nav-trigger,
.nav-group:focus-within .nav-trigger,
.nav-group.offen .nav-trigger { background: var(--grund-sanft-2); color: var(--text-stark); }
.nav-caret { transition: transform .2s ease; }
.nav-group:hover .nav-caret,
.nav-group:focus-within .nav-caret,
.nav-group.offen .nav-caret { transform: rotate(180deg); }
.nav-drop {
  display: none;
  position: absolute; left: 0; top: 100%;
  padding-top: 10px; min-width: 248px;
}
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop,
.nav-group.offen .nav-drop { display: block; }
.nav-drop-card {
  background: var(--grund); border: 1px solid var(--linie); border-radius: 16px;
  box-shadow: 0 30px 50px -30px rgba(var(--dunkel-rgb),0.45); padding: 8px;
}
.nav-drop a {
  display: block; padding: 10px 14px; border-radius: 10px;
  font-size: 15px; color: var(--text); text-decoration: none; white-space: nowrap;
}
.nav-drop a:hover, .nav-drop a:focus-visible { background: var(--grund-sanft-2); color: var(--text-stark); }
@media (prefers-reduced-motion: reduce) {
  .nav-caret, .nav-drop { transition: none; }
}

/* Nach einem Klick auf den geoeffneten Trigger unterdrueckt diese Klasse
   das automatische Wieder-Aufklappen per Hover/Focus. Das Skript entfernt
   sie beim mouseleave/blur, damit der naechste Hover normal funktioniert. */
.nav-group.zu:hover .nav-drop,
.nav-group.zu:focus-within .nav-drop { display: none; }
.nav-group.zu:hover .nav-trigger,
.nav-group.zu:focus-within .nav-trigger { background: transparent; color: var(--text-zweit); }
.nav-group.zu:hover .nav-caret,
.nav-group.zu:focus-within .nav-caret { transform: none; }

/* Hover-Pille auch fuer die einfachen Reiter Start / Kontakt / Spenden,
   damit sie sich nicht mehr traege anfuehlen als die Dropdowns. */
.hdr-nav a[data-key] { transition: background .18s ease, color .18s ease; }
.hdr-nav a[data-key]:hover,
.hdr-nav a[data-key]:focus-visible { background: var(--grund-sanft-2); color: var(--text-stark); outline: none; }

/* Foerderpartner-Button: Herz fuellt sich weiss, Hintergrund bekommt
   einen zarten gruenen Glow. Uebergang kurz, damit es schwungvoll wirkt. */
.foerder-btn { transition: background .25s ease, box-shadow .25s ease, transform .25s ease; }
.foerder-btn-herz path { transition: fill .25s ease; fill: transparent; }
.foerder-btn:hover, .foerder-btn:focus-visible {
  background: var(--gruen-heller-2);
  box-shadow: 0 18px 38px -14px rgba(var(--gruen-hell-rgb),0.75), 0 0 0 6px rgba(var(--gruen-blass-2-rgb),0.35);
  transform: translateY(-1px);
  outline: none;
}
.foerder-btn:hover .foerder-btn-herz path,
.foerder-btn:focus-visible .foerder-btn-herz path { fill: var(--weiss); }
@media (prefers-reduced-motion: reduce) {
  .foerder-btn, .foerder-btn-herz path, .hdr-nav a[data-key] { transition: none; }
  .foerder-btn:hover, .foerder-btn:focus-visible { transform: none; }
}

/* Editoriale Angebots-Liste auf der Startseite – ersetzt das Karten-Raster.
   Bewusst wenig Rand, dafür große Nummerierung und deutlicher Hover. */
.angebot-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--grund-gruen-2); }
.angebot-zeile { border-bottom: 1px solid var(--grund-gruen-2); }
.angebot-link {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 32px 12px;
  color: inherit;
  text-decoration: none;
  transition: background .35s ease, padding .35s ease;
  position: relative;
}
.angebot-link::before {
  content: "";
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; background: var(--gruen-hell);
  transform: scaleY(0); transform-origin: center;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  border-radius: 3px;
}
.angebot-link:hover, .angebot-link:focus-visible {
  background: var(--grund-sanft); padding-left: 24px; outline: none;
}
.angebot-link:hover::before, .angebot-link:focus-visible::before { transform: scaleY(1); }

.angebot-nr {
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  font-weight: 400; line-height: 1;
  color: var(--gruen-blass-2); letter-spacing: -0.02em;
  transition: color .35s ease, transform .35s ease;
}
.angebot-link:hover .angebot-nr,
.angebot-link:focus-visible .angebot-nr {
  color: var(--gruen); transform: translateX(4px);
}
.angebot-titel {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.2; font-weight: 600; color: var(--text-stark);
}
.angebot-text {
  margin: 10px 0 0; max-width: 62ch;
  font-size: 16px; line-height: 1.65; color: var(--text-zweit);
}
.angebot-meta {
  margin: 14px 0 0; display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dritt);
}
.angebot-punkt {
  display: inline-block; width: 7px; height: 7px; border-radius: 99px;
  background: var(--gruen-hell);
  box-shadow: 0 0 0 3px rgba(var(--gruen-hell-rgb),0.18);
}
.angebot-pfeil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 99px;
  background: var(--grund-sanft-2); color: var(--gruen);
  transition: background .35s ease, color .35s ease, transform .35s ease;
  flex: none;
}
.angebot-link:hover .angebot-pfeil,
.angebot-link:focus-visible .angebot-pfeil {
  background: var(--gruen-hell); color: var(--weiss); transform: translateX(6px);
}
@media (max-width: 860px) {
  .angebot-link {
    grid-template-columns: 60px 1fr;
    gap: 20px; padding: 24px 8px;
  }
  .angebot-pfeil { display: none; }
  .angebot-link:hover, .angebot-link:focus-visible { padding-left: 16px; }
  .angebot-nr { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .angebot-link, .angebot-link::before, .angebot-nr, .angebot-pfeil { transition: none; }
}

.uebersicht-link { transition: background .25s ease, color .25s ease, border-color .25s ease; }
.uebersicht-link:hover, .uebersicht-link:focus-visible {
  background: var(--dunkel); color: var(--weiss); border-color: var(--dunkel);
}
@media (max-width: 640px) {
  .uebersicht-link { justify-self: start !important; }
}

/* ============================================================
   Tragende Brücke — Angebots-Sektion auf der Startseite.
   Beim Reinscrollen baut sich die Brücke Stein für Stein auf:
   Boden → Pfeiler → Deck → Bogen → Tragseile → Voussoirs →
   fünf Schlusssteine (die Angebote). Position der SVG-Elemente
   sitzt außen (SVG-transform), die CSS-Animation innen — sonst
   überschreibt "transform: none" die Position und die Steine
   verschwinden. Der Rückfall (Liste) trägt die gleichen Links,
   die auch ohne JavaScript funktionieren.
   ============================================================ */
.bruecke-buehne {
  background: linear-gradient(180deg, var(--grund-blau-2) 0%, var(--grund) 65%);
  border: 1px solid var(--grund-gruen-2);
  border-radius: 24px;
  padding: 48px 32px 40px;
  overflow: hidden;
  position: relative;
}
.bruecke-svg-wrap {
  position: relative;
  width: 100%;
  height: clamp(240px, 34vw, 340px);
  max-width: 900px;
  margin: 0 auto;
}
.bruecke-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

/* Statischer Grundriss — auch ohne Skript sichtbar */
.bruecke-boden {
  stroke: var(--gruen-tief); stroke-width: 2; stroke-linecap: round;
}
.bruecke-pfeiler { fill: var(--dunkel-750); }
.bruecke-deck    { stroke: var(--dunkel); stroke-width: 3; stroke-linecap: round; }
.bruecke-bogen   {
  fill: none; stroke: var(--dunkel); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.35;
}

/* Nur wenn die Sektion "animierbar" ist (Skript hat sie so markiert),
   starten die Steine unsichtbar und die Linien werden gezeichnet. */
.bruecke-buehne.animierbar .bruecke-boden {
  stroke-dasharray: 900; stroke-dashoffset: 900;
}
.bruecke-buehne.animierbar .bruecke-deck {
  stroke-dasharray: 700; stroke-dashoffset: 700;
}
.bruecke-buehne.animierbar .bruecke-bogen {
  stroke-dasharray: 900; stroke-dashoffset: 900;
}
.bruecke-buehne.animierbar .bruecke-pfeiler {
  transform: scaleY(0);
  transform-origin: center bottom;
  transform-box: fill-box;
}
.bruecke-seil {
  stroke: var(--gruen-tief); stroke-width: 1;
  opacity: 0;
}
.bruecke-stein {
  fill: var(--dunkel-700);
  stroke: rgba(var(--weiss-rgb),0.08);
  stroke-width: 0.5;
}
.bruecke-stein-innen {
  opacity: 0;
  transform: scale(0.3);
  transform-origin: 0 0;
}
.bruecke-angebot-innen {
  opacity: 0;
  transform: translateY(-40px) scale(0.2);
  transform-origin: 0 0;
}
.bruecke-nummer {
  fill: var(--link-hover);
  font-family: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-size: 13px; font-weight: 600;
  text-anchor: middle; letter-spacing: 0.01em;
  opacity: 0;
  cursor: pointer;
  transition: fill .2s ease, font-weight .2s ease;
}
.bruecke-angebot:hover .bruecke-nummer,
.bruecke-angebot.aktiv .bruecke-nummer,
.bruecke-angebot:focus-visible .bruecke-nummer {
  fill: var(--dunkel); font-weight: 700;
}

/* .gebaut → Animation läuft ab */
.bruecke-buehne.gebaut .bruecke-boden {
  animation: bruecke-draw 0.7s ease-out 0s forwards;
}
.bruecke-buehne.gebaut .bruecke-pfeiler {
  animation: bruecke-rise 0.55s cubic-bezier(.5, .1, .3, 1.15) forwards;
}
.bruecke-buehne.gebaut .bruecke-pfeiler.links  { animation-delay: 0.55s; }
.bruecke-buehne.gebaut .bruecke-pfeiler.rechts { animation-delay: 0.7s; }
.bruecke-buehne.gebaut .bruecke-deck {
  animation: bruecke-draw 0.7s ease-out 1s forwards;
}
.bruecke-buehne.gebaut .bruecke-bogen {
  animation: bruecke-draw 1s ease-out 1.25s forwards;
}
.bruecke-buehne.gebaut .bruecke-seil {
  animation: bruecke-fadein 0.35s ease forwards;
}
.bruecke-buehne.gebaut .bruecke-stein-innen {
  animation: bruecke-pop 0.5s cubic-bezier(.4, 1.6, .4, 1) forwards;
}
.bruecke-buehne.gebaut .bruecke-angebot-innen {
  animation: bruecke-drop 0.65s cubic-bezier(.5, .1, .3, 1.35) forwards;
}
.bruecke-buehne.gebaut .bruecke-nummer {
  animation: bruecke-fadein 0.35s ease forwards;
}

@keyframes bruecke-draw   { to { stroke-dashoffset: 0; } }
@keyframes bruecke-rise   { to { transform: scaleY(1); } }
@keyframes bruecke-fadein { to { opacity: 1; } }
@keyframes bruecke-pop    { to { opacity: 1; transform: scale(1); } }
@keyframes bruecke-drop   { to { opacity: 1; transform: translateY(0) scale(1); } }

/* Schlusssteine (5 Angebote) — anklickbar, mit Hover-Anhebung */
.bruecke-angebot { cursor: pointer; outline: none; }
.bruecke-angebot .kreis {
  fill: var(--gruen-hell); stroke: var(--gruen-tief); stroke-width: 1.5;
  transition: fill .25s ease, filter .25s ease;
}
.bruecke-angebot .nr {
  fill: var(--weiss); font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700; text-anchor: middle;
  letter-spacing: 0.06em;
}
.bruecke-angebot-hover {
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.bruecke-buehne.gebaut .bruecke-angebot:hover .bruecke-angebot-hover,
.bruecke-buehne.gebaut .bruecke-angebot.aktiv .bruecke-angebot-hover,
.bruecke-buehne.gebaut .bruecke-angebot:focus-visible .bruecke-angebot-hover {
  transform: translateY(-8px) scale(1.2);
}
.bruecke-angebot:hover .kreis,
.bruecke-angebot.aktiv .kreis,
.bruecke-angebot:focus-visible .kreis {
  fill: var(--gruen-blass);
  filter: drop-shadow(0 6px 14px rgba(var(--gruen-hell-rgb),0.55));
}

/* Info-Panel unter der Brücke — wechselt beim Hover/Klick der Steine */
.bruecke-panel {
  margin: 24px auto 0;
  max-width: 640px;
  padding: 24px 28px;
  background: var(--grund);
  border: 1px solid var(--grund-gruen-2);
  border-radius: 14px;
  min-height: 148px;
  transition: opacity .25s ease;
}
.bruecke-panel-meta {
  margin: 0 0 8px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gruen);
}
.bruecke-panel-marker[hidden] { display: none; }
.bruecke-panel-marker {
  padding: 3px 10px;
  background: var(--gruen-hell); color: var(--weiss);
  border-radius: 99px;
  font-size: 10px; letter-spacing: 0.1em;
}
.bruecke-panel-titel {
  margin: 4px 0 10px;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  line-height: 1.2; font-weight: 600;
  color: var(--text-stark); letter-spacing: -0.01em;
  text-wrap: balance;
}
.bruecke-panel-text {
  margin: 0 0 14px;
  font-size: 15.5px; line-height: 1.65;
  color: var(--text-zweit); max-width: 62ch;
}
.bruecke-panel-link {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--gruen); text-decoration: none;
  border-bottom: 1px solid var(--gruen-blass-2);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.bruecke-panel-link:hover,
.bruecke-panel-link:focus-visible {
  color: var(--text-stark); border-color: var(--dunkel);
}

.bruecke-buttons { text-align: center; margin-top: 16px; }
.bruecke-neubau {
  background: transparent;
  border: 1px solid var(--linie-gruen);
  padding: 8px 16px;
  border-radius: 99px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-zweit);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.bruecke-neubau:hover,
.bruecke-neubau:focus-visible {
  background: var(--dunkel); color: var(--weiss); border-color: var(--dunkel); outline: none;
}

/* Textueller Rückfall — ohne JavaScript sichtbar, sonst versteckt */
.bruecke-rueckfall {
  margin: 24px 0 0; padding: 0;
  list-style: none;
  display: grid; gap: 8px;
  max-width: 640px; margin-left: auto; margin-right: auto;
}
.bruecke-rueckfall a {
  display: block;
  padding: 10px 14px;
  border: 1px solid var(--grund-gruen-2);
  border-left: 3px solid var(--gruen-hell);
  border-radius: 4px;
  color: var(--text-stark); text-decoration: none;
  font-size: 15px;
}
.bruecke-rueckfall a:hover,
.bruecke-rueckfall a:focus-visible {
  background: var(--grund-sanft); outline: none;
}
.bruecke-buehne.animierbar .bruecke-rueckfall { display: none; }

/* Chip-Streifen — auf schmalen Bildschirmen die primäre Interaktion.
   Standard: versteckt (Desktop nutzt Steine + Deck-Labels).
   Wird per Media-Query weiter unten für Handy sichtbar geschaltet. */
.bruecke-chips {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 20px auto 0;
  max-width: 640px;
  padding: 0;
}
.bruecke-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--linie-gruen);
  border-radius: 99px;
  background: var(--grund);
  color: var(--text-stark);
  font-family: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  min-height: 44px;
}
.bruecke-chip .chip-nr {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gruen);
}
.bruecke-chip:hover,
.bruecke-chip:focus-visible {
  border-color: var(--gruen-hell); outline: none;
}
.bruecke-chip.aktiv {
  background: var(--gruen-hell); color: var(--weiss); border-color: var(--gruen-tief);
}
.bruecke-chip.aktiv .chip-nr { color: var(--linie-gruen-hell); }
.bruecke-chip:active { transform: scale(0.97); }

@media (max-width: 640px) {
  /* Auf Handy bricht die Bühne aus der Sektions-Innenkante aus und
     füllt die volle Viewport-Breite. Nur so bekommt die Brücke echtes
     Format — 80 % der Besucher:innen kommen mit dem Handy. */
  .bruecke-buehne {
    padding: 0 0 28px;
    border-radius: 0;
    border-left: none; border-right: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw; max-width: 100vw;
  }

  /* SVG-Wrap füllt die ganze Breite. viewBox wird per JS enger gezoomt
     (siehe site.js), damit die Steine und der Bogen effektiv größer
     werden ohne Verzerrung. Aspect passt zur viewBox. */
  .bruecke-svg-wrap {
    height: auto;
    aspect-ratio: 760 / 300;
    padding: 24px 0 8px;
  }

  /* Steine visuell prominent — Nummern lesbar. */
  .bruecke-angebot .kreis { r: 24; }
  .bruecke-angebot .nr    { font-size: 17px; }

  /* Deck-Labels aus (Chips ersetzen sie). */
  .bruecke-nummer { display: none; }

  /* Chips als horizontale, per Wisch scrollbare Zeile — nicht mehr
     gestapelt. Snap-Punkte für sauberes Wischen; Scrollbalken versteckt. */
  .bruecke-chips {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 20px 20px 4px;
    margin: 0;
    gap: 10px;
    max-width: none;
    justify-content: flex-start;
  }
  .bruecke-chips::-webkit-scrollbar { display: none; }
  .bruecke-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Panel + Buttons behalten Innenrand */
  .bruecke-panel  {
    padding: 22px 22px; border-radius: 12px;
    margin: 20px 20px 0;
  }
  .bruecke-buttons { margin-top: 16px; padding: 0 20px; }
  .bruecke-rueckfall { padding: 0 20px; margin-top: 20px; }

  .bruecke-panel-titel { font-size: 1.3rem; }
  .bruecke-panel-text  { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .bruecke-buehne.animierbar .bruecke-boden,
  .bruecke-buehne.animierbar .bruecke-deck,
  .bruecke-buehne.animierbar .bruecke-bogen {
    stroke-dasharray: none; stroke-dashoffset: 0;
  }
  .bruecke-buehne.animierbar .bruecke-pfeiler { transform: none; }
  .bruecke-buehne.animierbar .bruecke-seil,
  .bruecke-buehne.animierbar .bruecke-nummer { opacity: 1; }
  .bruecke-buehne.animierbar .bruecke-stein-innen,
  .bruecke-buehne.animierbar .bruecke-angebot-innen {
    opacity: 1; transform: none;
  }
  .bruecke-buehne .bruecke-neubau { display: none; }
}

/* ============================================================
   STARTSEITE — Bausteine der neuen Gestaltung (12.08.2026)

   Bewegung ist eine Zugabe, keine Bedingung: die „Vorher"-Zustände
   hängen alle an .js, das ein winziges Skript im Kopf setzt. Ohne
   JavaScript ist die Seite vollständig sichtbar, nur ohne Bewegung.
   ============================================================ */

/* Feines Papierkorn — nimmt der warmen Fläche das Bildschirmhafte. */
body::before{
  content:''; position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* Ohne JavaScript darf nichts dauerhaft unsichtbar bleiben. */
html:not(.js) .reveal,
html:not(.js) .sreveal,
html:not(.js) .rise{opacity:1 !important;transform:none !important;animation:none !important;}

.opt-gross{font-variation-settings:'opsz' 144;letter-spacing:-.006em;}

/* --- Hero der Startseite -------------------------------------------
   Drei Schichten, die als ein Bild wirken sollen: das Morgennebel-Foto,
   darüber ein Dämmerungsverlauf, der den hellen Himmel absenkt, und
   ganz oben die gezeichnete Brücke. Die Brücke leuchtet in denselben
   Messing- und Goldtönen wie das Morgenlicht im Foto — deshalb liest
   sie sich als Teil der Landschaft und nicht als Grafik darauf.       */
.st-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--dunkel-tief);}
.st-hero-bild{position:absolute;inset:-6% 0;z-index:-3;will-change:transform;}
.st-hero-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block;
  filter:saturate(1.14) contrast(1.05) brightness(1.05);}
.js .st-hero-bild img{animation:st-heran 3.2s cubic-bezier(.16,1,.3,1) both;}
@keyframes st-heran{from{transform:scale(1.08);}to{transform:scale(1);}}

/* Dämmerung: der Himmel im Foto ist cremehell, sonst ginge das Leuchten
   der Brücke darin unter und die Schrift wäre nicht lesbar. */
/* Der Schleier hat zwei Aufgaben, die sich widersprechen: die Schrift muss
   lesbar bleiben, das Morgenlicht soll aber nicht ins Trübe kippen. Deshalb
   kein flächiges Abdunkeln, sondern ein kräftiger Verlauf nur unter der
   Textspalte — rechts bleibt das Foto praktisch unangetastet. Die Werte sind
   gegen die tatsächlichen Bildpixel durchgerechnet, nicht geschätzt. */
.st-hero-schleier{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(to bottom,rgba(28,34,24,.10) 0%,rgba(28,34,24,0) 45%,
    rgba(24,36,26,.30) 82%,rgba(24,36,26,.62) 100%),
  linear-gradient(100deg,rgba(20,30,22,.95) 0%,rgba(20,30,22,.87) 38%,
    rgba(20,30,22,.62) 56%,rgba(20,30,22,.26) 72%,rgba(20,30,22,0) 88%);}

/* Die Brücke selbst: additiv aufgetragen, damit ihr Licht sich mit dem
   Dunst mischt statt darauf zu liegen. */
.st-bruecke{position:absolute;inset:0;z-index:-1;width:100%;height:100%;
  mix-blend-mode:screen;opacity:.92;pointer-events:none;}
.js .st-bruecke{animation:st-aufblenden 2.6s ease .5s both;}
@keyframes st-aufblenden{from{opacity:0;}to{opacity:.92;}}

.st-hero-inhalt{position:relative;padding:112px 0 104px;min-height:min(80vh,700px);
  display:flex;flex-direction:column;justify-content:center;max-width:660px;}

/* Zeilen steigen hinter einer Kante hervor, statt nur einzublenden. */
.st-maske{display:block;overflow:hidden;}
.st-maske > *{display:block;}
.js .st-maske > *{transform:translateY(105%);animation:st-hervor 1.05s cubic-bezier(.16,1,.3,1) both;}
.st-v1 > *{animation-delay:.20s;} .st-v2 > *{animation-delay:.33s;}
.st-v3 > *{animation-delay:.46s;} .st-v4 > *{animation-delay:.60s;}
.st-v5 > *{animation-delay:.74s;}
@keyframes st-hervor{to{transform:none;}}

/* --- Gruppenfoto mit Vorhang --- */
.st-gruppe{position:relative;overflow:hidden;border-radius:6px;margin:0;
  box-shadow:0 40px 70px -46px rgba(var(--dunkel-rgb),.75);}
.st-gruppe img{width:100%;height:auto;display:block;}
.js .st-gruppe{clip-path:inset(0 50% 0 50%);transition:clip-path 1.25s cubic-bezier(.16,1,.3,1);}
.js .st-gruppe img{transform:scale(1.09);transition:transform 1.6s cubic-bezier(.16,1,.3,1);}
.js .st-gruppe.da{clip-path:inset(0 0 0 0);}
.js .st-gruppe.da img{transform:none;}
.st-bildzeile{position:absolute;left:0;right:0;bottom:0;padding:56px 34px 24px;
  background:linear-gradient(to top,rgba(20,32,24,.86),rgba(20,32,24,0));
  color:#EFE8DA;font-size:14.5px;letter-spacing:.02em;}
.st-bildzeile b{color:var(--weiss);font-weight:600;}
.js .st-bildzeile{opacity:0;transition:opacity .7s ease .55s;}
.js .st-gruppe.da .st-bildzeile{opacity:1;}

/* --- Anliegen-Reihen --- */
.st-reihe{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:56px;align-items:center;
  padding:52px 0;border-top:1px solid var(--linie);}
.st-reihe.st-gedreht{grid-template-columns:190px minmax(0,1fr);}
.st-reihe.st-gedreht .st-text{order:2;}
.st-reihe.st-gedreht .st-portrait{order:1;}
/* Spezifität: die Sonderabsätze stehen bewusst mit .st-text davor,
   sonst gewinnt die allgemeine Regel .st-text p.st-fliess. */
.st-text .st-satz{font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-variation-settings:'opsz' 144;letter-spacing:-.008em;
  font-size:clamp(24px,3vw,35px);line-height:1.22;margin:0 0 18px;
  color:var(--text-stark);max-width:20ch;}
.st-text p.st-fliess{margin:0 0 18px;color:var(--text-dritt);max-width:50ch;font-size:16.5px;}
.st-text .st-wer{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:15px;color:var(--text-dritt);margin:0 0 18px;}
.st-text .st-wer b{color:var(--text-stark);font-weight:600;font-size:16px;}

/* Runde Einzelporträts (17.09.2026). Die Quelldateien sind bereits
   rund freigestellt; die WebP-Fassungen sind 3 % nach innen beschnitten,
   damit am Kreisrand kein Weiß durchblitzt.                          */
.st-gesicht{width:158px;height:158px;border-radius:50%;margin:0 auto;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:var(--grund-sanft);
  border:4px solid var(--grund);
  box-shadow:0 0 0 1px var(--linie), 0 22px 38px -22px rgba(var(--dunkel-rgb),.65);}
.js .st-gesicht{transform:scale(.88);opacity:0;
  transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .9s cubic-bezier(.16,1,.3,1);}
.js .st-reihe.da .st-gesicht{transform:none;opacity:1;}
.st-gesicht.st-lars{background-image:url('/assets/img/team/portrait-lars-320.webp');}
.st-gesicht.st-oguz{background-image:url('/assets/img/team/portrait-oguz-320.webp');}
.st-gesicht.st-tiziano{background-image:url('/assets/img/team/portrait-tiziano-320.webp');}

/* --- Botschaft aus der Nachbarschaft --- */
.st-botschaft{position:relative;background:var(--dunkel);color:var(--auf-dunkel);overflow:hidden;}
.st-botschaft-innen{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  align-items:stretch;max-width:72rem;margin:0 auto;}
/* Höhe so gewählt, dass das Seitenverhältnis der Spalte fast dem des
   Fotos entspricht — sonst schneidet der Zuschnitt oben das
   handgeschriebene Schild ab, und genau darum geht es hier. */
.st-botschaft-bild{position:relative;min-height:640px;}
.st-botschaft-bild img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 26%;}
.st-botschaft-bild::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(38,56,43,0) 62%,rgba(38,56,43,.9) 100%);}
.st-botschaft-text{padding:92px 40px 92px 48px;display:flex;flex-direction:column;justify-content:center;}
.st-botschaft-text blockquote{margin:0 0 26px;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-variation-settings:'opsz' 144;letter-spacing:-.018em;
  font-size:clamp(28px,3.6vw,44px);line-height:1.18;color:var(--weiss);}
.st-botschaft-text blockquote i{font-style:normal;display:inline-block;}
.js .st-botschaft-text blockquote i{opacity:0;transform:translateY(.38em);
  transition:opacity .62s ease,transform .62s cubic-bezier(.16,1,.3,1);}
.js .st-botschaft-text.da blockquote i{opacity:1;transform:none;}
.st-botschaft-text blockquote .st-gold{color:var(--gold-hell);}

/* ------------------------------------------------------------------
   Handy: nicht das Desktop-Layout geschrumpft, sondern umgebaut.
   Auf einem 375px-Schirm tragen die drei Fotos die ganze Wirkung —
   sie brauchen Fläche, nicht Reste.
   ------------------------------------------------------------------ */
@media (max-width:900px){
  /* Hero neu aufgebaut statt geschrumpft. Das Mattenfoto ist quer, der
     Schirm hochkant — als Hintergrund bleibt davon nur Holzboden übrig,
     und ein Schleier, der die Schrift lesbar macht, deckt das Motiv zu.
     Auf dem Handy bekommt das Foto deshalb ein eigenes Band, der Text
     steht darunter auf der grünen Fläche. Beides voll lesbar. */
  /* Foto und Text gehoeren zusammen. Der vorherige Aufbau — Fotoband
     oben, flacher dunkler Textblock darunter — wirkte auseinander-
     gerissen und leer. Jetzt fuellt das Foto den ganzen Hero und der
     Text steht darin, wie am Desktop. Lesbar bleibt er, weil der
     Schleier nach unten dicht wird, wo das Foto ohnehin dunkel ist. */
  /* Textblock in die Mitte, damit die unteren 35% ganz der Landschaft
     gehoeren. Der Himmel dort oben ist gleichmaessig hell und laesst sich
     sauber absenken; die Baumreihe unten braucht dann gar keinen Schleier
     mehr und bleibt voll sichtbar. */
  .st-hero{min-height:88vh;display:flex;align-items:center;background:var(--dunkel-tief);}
  /* Der Schlusssatz ist auf dem Handy entbehrlich — Knopf und Rufnummer
     stehen direkt darunter. Das schafft den Platz fuer die Landschaft. */
  .st-nur-breit{display:none;}
  .st-hero-bild{position:absolute;inset:0;height:auto;z-index:-3;}
  /* Das Foto ist quer: im Hochformat ist immer die volle Hoehe im Bild,
     also rund zwei Drittel Himmel. Ein leichter Zoom mit Ursprung unten
     holt die Baumreihe herauf, ohne die Schaerfe zu opfern. */
  .st-hero-bild img,
  .js .st-hero-bild img{animation:none;transform:scale(1.2);transform-origin:50% 100%;}
  .st-hero-bild::after{display:none;}
  .st-bruecke{top:0;height:44%;bottom:auto;z-index:-1;}

  /* Die Adresszeile stand ueber dem Willkommen und wirkte wichtiger als
     die Anrede. Sie steht ohnehin im Abschluss und in der Fusszeile. */
  .st-hero-inhalt .st-v1{display:none;}

  /* Auf dunklem Grund wirkte die zweite Zeile grau und unscharf. */
  .st-hero{--hero-zeile2:#F1E6D2;}
  /* Schleier und Brücke enden mit dem Fotoband — sonst zöge der Bogen
     über den Textbereich und der Verlauf über die ganze Fläche. */
  /* Oben nur so viel absenken, dass der Bogen leuchtet; nach unten dicht
     genug, dass die Schrift auf dem Foto steht. Werte sind gegen die
     echten Bildpixel gerechnet, nicht geschaetzt. */
  /* Oben leicht absenken, damit der Bogen leuchtet; im Band um 38-45%
     bleibt die Landschaft offen; ab 45% wird es zuegig dicht, weil dort
     die Ueberschrift beginnt. Gegen die echten Bildpixel gerechnet. */
  /* Der Schleier folgt dem Foto, statt es platt zu decken. Gemessenes
     Helligkeitsprofil: bis 55% heller Himmel (243), ab 61% die Baumreihe
     (44), unten das Feld (87-103). Deshalb dicht nur im schmalen Band um
     50-60%, wo die Ueberschrift auf hellem Himmel steht — darunter traegt
     das Foto die Lesbarkeit selbst und bleibt sichtbar. */
  /* Gemessenes Profil dieses Motivs: heller Himmel bis 28% (159-194),
     darunter Waldhuegel und Felder, die von sich aus dunkel sind (12-67).
     Der Schleier muss deshalb nur oben tragen und am Horizont, wo die
     Ueberschrift beginnt — weiter unten wuerde er das Bild zudruecken. */
  .st-hero-schleier{top:0;height:auto;inset:0;bottom:0;z-index:-2;background:
    linear-gradient(to bottom,rgba(28,24,16,.40) 0%,rgba(26,28,20,.46) 18%,
      rgba(24,30,22,.56) 28%,rgba(24,30,22,.42) 42%,rgba(24,32,24,.34) 62%,
      rgba(24,32,24,.30) 78%,rgba(24,32,24,.16) 100%);}

  .st-hero-inhalt{padding:0 0 88px;min-height:0;max-width:none;}
  .st-hero-inhalt h1{margin-bottom:14px !important;}
  .st-hero-inhalt p[style*="max-width:47ch"]{font-size:16.5px !important;
    line-height:1.58 !important;margin-bottom:22px !important;}

  /* Gruppenfoto über die volle Breite, Bildzeile darunter statt darüber.
     Als Auflage verdeckte sie die Hälfte des Bildes. */
  .st-gruppe{margin-left:-24px;margin-right:-24px;border-radius:0;
    width:calc(100% + 48px);box-shadow:none;}
  .st-bildzeile{position:static;background:none;padding:14px 24px 0;
    color:var(--text-dritt);font-size:14px;line-height:1.6;}
  .st-bildzeile b{color:var(--text-stark);}
  .js .st-bildzeile{opacity:1;}

  /* Anliegen-Reihen: Gesicht und Angebotszeile bilden zusammen den Kopf
     der Reihe, damit der Kreis nicht allein über dem Text schwebt. */
  /* Abstände: auf dem Handy klaffte zwischen Bildzeile und erster Reihe
     eine leere Fläche von rund 150px. Die Werte stehen als Inline-Stil
     in der Quelle, deshalb hier mit !important nachgezogen. */
  section[style*="padding:96px 0 0"]{padding-top:60px !important;}
  section[style*="padding:26px 0 96px"]{padding:4px 0 64px !important;}
  .st-reihe{margin-top:0 !important;}

  .st-reihe,.st-reihe.st-gedreht{grid-template-columns:1fr !important;gap:16px;padding:40px 0;}
  /* justify-self steht inline auf center — ohne !important bliebe das
     Porträt mittig, während der Text darunter links steht. */
  .st-reihe .st-portrait,.st-reihe.st-gedreht .st-portrait{order:1;
    justify-self:start !important;
    display:flex;align-items:center;gap:14px;text-align:left !important;}
  .st-reihe .st-text,.st-reihe.st-gedreht .st-text{order:2;}
  .st-gesicht{width:88px;height:88px;border-width:3px;margin:0;flex:none;}
  .st-portrait small{margin-top:0 !important;font-size:12px !important;}

  /* Brückenfoto ist hochkant — auf 340px passten Schild und Brücke nicht
     beide ins Bild. */
  .st-botschaft-innen{grid-template-columns:1fr !important;}
  .st-botschaft-bild{min-height:0;aspect-ratio:3/4;}
  .st-botschaft-bild img{object-position:50% 20%;}
  .st-botschaft-bild::after{background:linear-gradient(180deg,rgba(38,56,43,0) 62%,rgba(38,56,43,.95) 100%);}
  .st-botschaft-text{padding:36px 24px 60px;}

  /* Tippflaechen nach WCAG 2.5.8: mindestens 24px. Telefon- und
     E-Mail-Links standen bei 17px, die Pfeil-Links bei 19-22px. Verlinkte
     Woerter mitten im Satz sind von der Regel ausgenommen und bleiben. */
  a[href^="tel:"], a[href^="mailto:"]{display:inline-block;padding-block:4px;}
  a[style*="display:inline-flex"],
  a[style*="display:inline-block"],
  a[style*="display:block"],
  .bruecke-panel-link{padding-block:4px;}
  /* Pfeil-Links erkennt man am mitgefuehrten .marrow. :has wird von
     aelteren Browsern ignoriert — dann bleibt es beim alten Mass,
     die Seite funktioniert trotzdem. */
  a:has(> .marrow){padding-block:4px;}

  /* Tippflächen: Menüeinträge lagen bei 39px, die Telefonnummer bei 23px —
     beides unter dem Richtwert. Verlinkte Wörter mitten im Satz sind davon
     ausgenommen und bleiben wie sie sind. */
  .hdr-panel a{min-height:44px;display:flex !important;align-items:center;}
  /* Die Telefonzeile liegt ueber einem sonnenbeschienenen Feld und war
     dort als einziges Element unter der Kontrastgrenze. Statt den ganzen
     Verlauf dunkler zu ziehen — und die Landschaft wieder zuzudruecken —
     bekommt nur diese Zeile eine eigene, dezente Unterlage. */
  .st-hero a[href^="tel:"]{display:inline-block;padding:8px 12px;
    background:rgba(22,30,22,.55);border-radius:3px;}
}

@media (prefers-reduced-motion:reduce){
  .st-hero-bild img,.st-maske > *{animation:none !important;transform:none !important;}
  .st-gruppe,.st-gruppe img,.st-gesicht,.st-botschaft-text blockquote i,.st-bildzeile{
    clip-path:none !important;transform:none !important;opacity:1 !important;transition:none !important;}
}

/* Fließtext der Rechtsseiten */
.prosa { font-size: 16.5px; line-height: 1.75; color: var(--text-zweit); }
.prosa h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px; font-weight: 600; color: var(--text-stark);
  margin: 40px 0 12px; line-height: 1.3;
}
.prosa h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px; font-weight: 600; color: var(--text-stark);
  margin: 28px 0 8px;
}
.prosa p { margin: 0 0 14px; max-width: 68ch; }
.prosa ul, .prosa ol { margin: 0 0 16px; padding-left: 22px; max-width: 68ch; }
.prosa li { margin-bottom: 7px; }
.prosa a { color: var(--gruen); text-decoration: underline; text-underline-offset: 3px; }
.prosa a:hover { color: var(--link-hover); }
.prosa strong { color: var(--text-stark); font-weight: 600; }
.prosa hr { border: 0; border-top: 1px solid var(--linie); margin: 32px 0; }
.prosa .hinweis {
  margin-top: 40px; border-top: 1px solid var(--linie); padding-top: 24px;
  font-size: 14px; color: var(--text-dritt);
}