/* ============ Fonts: self-hosted (DSGVO – kein Google-CDN) ============ */
/* Arimo – Fließtext */
@font-face{font-family:"Arimo";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/arimo-v36-latin-regular.woff2") format("woff2")}
@font-face{font-family:"Arimo";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/arimo-v36-latin-italic.woff2") format("woff2")}
@font-face{font-family:"Arimo";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/arimo-v36-latin-600.woff2") format("woff2")}
@font-face{font-family:"Arimo";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/arimo-v36-latin-700.woff2") format("woff2")}
/* "Gravesend Sans Cameo" (CI-Kachelschrift) kommt über das Adobe-Fonts-Kit des Vereins
   (use.typekit.net/pyu3kkx.css – dasselbe Kit wie auf grenzenlos-ab.de). Nur Schnitt 900.
   Jede Glyphe IST eine Kachel mit gestanztem Buchstaben – daher keine CSS-Boxen in .tiles.
   Oswald ist nur noch Fallback, falls das Kit nicht lädt. */
@font-face{font-family:"Oswald";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/oswald-v57-latin-regular.woff2") format("woff2")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/oswald-v57-latin-500.woff2") format("woff2")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/oswald-v57-latin-600.woff2") format("woff2")}
:root{
  --gruen:#007D30;
  --gruen-dunkel:#00551F;
  --gruen-tief:#00340F;
  --hell:#F4F4F1;
  --linie:#E2E2DD;
  --ink:#1D1D1B;
  --grau:#5F645C;
  /* Seitenpolster von `.wrap`, links und rechts zusammen. Steht als Variable,
     weil die Größe des Seitentitels damit rechnet; die Media Queries am Ende
     ziehen sie mit. */
  --rand:64px;
  --font-tiles:"gravesend-sans","Oswald",sans-serif; /* Cameo-Schnitt: NUR für .tiles */
  --font-head:"Arimo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Arimo","Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Der Stern hat Spezifität 0 – jede Element-Regel sticht ihn aus. Im Entwurf
   gab es keine, in WordPress bringt Hello Elementor welche mit und Überschriften
   wie Absätze kämen mit fremden Abständen daher. Deshalb hier noch einmal
   ausdrücklich; die Abstände des Entwurfs stehen weiter unten je Baustein. */
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,figure,blockquote{margin:0}
/* Kehrseite dieser Rücksetzung: in einem Textbaustein, den die Redaktion in
   Elementor tippt, standen mehrere Absätze ohne jeden Abstand aufeinander –
   sichtbar auf „Über uns" unter „Wer wir sind", wo vier Absätze zu einer Wand
   zusammenliefen. Die eigenen Bausteine des Entwurfs setzen ihre Abstände
   selbst und enthalten je genau einen Absatz; `p + p` greift dort also nicht
   und verschiebt nichts. */
.elementor-widget-text-editor p + p,
.elementor-widget-text-editor p + ul,
.elementor-widget-text-editor ul + p{margin-top:1.1em}
/* Dasselbe für die Zeilenhöhe: Hello Elementor drückt Überschriften auf 1.2,
   der Entwurf lässt sie die 1.65 des Fließtexts erben. Bausteine mit eigener
   Zeilenhöhe (.ncard h3, .tiles) setzen sie weiter unten selbst. */
h1,h2,h3,h4,h5,h6{line-height:inherit}
html{scroll-behavior:smooth}
/* Der Kopf klebt oben – ohne diesen Abstand verschwindet das Sprungziel
   (#konten, #faq) beim Anspringen dahinter. `--kopf` misst das JS, weil der
   Kopf je nach Fensterbreite 84px oder 68px hoch ist; die früher fest
   verdrahteten 110px stimmten immer nur für den Desktop. */
:target{scroll-margin-top:calc(var(--kopf,84px) + 26px)}
body{font-family:var(--font-body);color:var(--ink);background:#fff;line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
::selection{background:var(--gruen);color:#fff}
img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}

/* ============ Kachel-Headline (CI-Element: grüner Balken, weiße Boxen, grüne Buchstaben) ============ */
/* `font-size` ausdrücklich, obwohl 17px auch die geerbte Größe wäre: das
   Polster der grünen Leiste steht in `em` und hing damit an dem, was das
   Element gerade erbt. Solange die Kachel ein <div> war, war das immer der
   Fließtext. Seit sie je nach Ort <h1>, <h2> oder <h3> ist, käme die
   Überschriftengröße des Browsers dazu und die Leiste würde doppelt so dick.
   Die Buchstaben selbst bekommen ihre Größe ohnehin über `.t`. */
.tiles{
  display:inline-flex;flex-wrap:wrap;align-self:flex-start;
  color:#fff;padding:.42em .5em;font-size:17px;
  column-gap:.5em;row-gap:.32em;
  font-family:var(--font-tiles);font-weight:900;text-transform:uppercase;line-height:1;
  position:relative;isolation:isolate;
}
/* Grüne Leiste liegt auf ::before und zieht per scaleX von links auf, die Buchstaben
   klappen ihr hinterher. WICHTIG: kein clip-path auf .tiles selbst – ein voll
   geclipptes Element zählt für den IntersectionObserver als unsichtbar und
   bekäme nie den .go-Trigger. */
.tiles::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--gruen);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.6,.1,.3,1) var(--bd,0s);
}
.tiles.go::before{transform:scaleX(1)}
/* Ein Wort bricht NICHT zwischen seinen Kacheln um.
   Kurzzeitig stand hier `flex-wrap:wrap` als Notnagel gegen Wortungetüme in
   künftigen Seitentiteln. Das war ein Fehlgriff: damit sinkt die Mindestbreite
   jeder Kachel-Headline auf einen einzigen Buchstaben, und jeder Flex- oder
   Grid-Kontext darf sie auf diese Breite zusammendrücken. Auf der Musterkarte
   des Grenzenlos-Passes ist genau das passiert – „GRENZENLOS-PASS" stand
   einspaltig senkrecht in der Karte und schob deren Inhalt unten heraus.
   Nötig ist der Notnagel ohnehin nicht: die Schriftgröße der Seitentitel
   rechnet sich aus dem längsten Wort (siehe `.phero .tiles .t`), ein Überlauf
   kann dort gar nicht entstehen. */
.tiles .w{display:flex;gap:.06em;perspective:520px}
/* Kachel-Optik (weiße Box, gestanzter Buchstabe) liefert der Cameo-Glyph selbst –
   die Textfarbe füllt die Kachel, das Grün der Leiste scheint durch den Buchstaben */
.tiles .t{
  display:block;transform-origin:50% 60%;
  transition:transform .5s cubic-bezier(.2,.75,.3,1.05) var(--fd,0s),opacity .3s linear var(--fd,0s);
}
/* Split-Flap: Buchstaben klappen wie eine Anzeigetafel auf, sobald .go gesetzt wird */
.tiles:not(.go) .t{opacity:0;transform:rotateX(-95deg)}

/* ============ Wipe-Signatur: Bild-Vorhang + Scroll-Parallax ============ */
/* Vorhang als ::after auf dem Wrapper – NIE clip-path auf dem beobachteten
   Element selbst (IntersectionObserver-Falle, siehe .tiles) */
.imgwipe{position:relative;display:block;overflow:hidden}
.imgwipe::after{
  content:"";position:absolute;inset:0;background:var(--gruen);
  transform:scaleX(1);transform-origin:100% 50%;
  transition:transform .65s cubic-bezier(.6,.1,.3,1) var(--rvd,.05s);
}
.imgwipe.in::after{transform:scaleX(0)}
/* Micro-Parallax NUR auf News-Bildern.
   Der Kommentar sagte das schon immer, der Selektor tat es nicht: `.erow
   .imgwipe img` stand mit in der Liste. Eine laufende CSS-Animation setzt
   `transform` und schlägt damit jede Transition auf derselben Eigenschaft –
   der Hover-Zoom der Einrichtungs-Fotos auf „Ich brauche Hilfe" war deshalb
   in jedem Browser mit `animation-timeline` (Chrome ab 115) wirkungslos. Man
   sah nichts und suchte den Fehler im Hover. */
@supports (animation-timeline: view()){
  .ncard .imgwipe img{animation:par linear both;animation-timeline:view()}
  @keyframes par{from{transform:translateY(-5%) scale(1.12)}to{transform:translateY(5%) scale(1.12)}}
}

/* ============ Kachel-DNA im Kleinen ============ */
.ekachel .num{
  position:absolute;top:0;left:0;z-index:3;background:var(--gruen);color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:.12em;padding:9px 13px;
}
.ncard .datum::before{content:"";display:inline-block;width:8px;height:8px;background:var(--gruen);margin-right:9px}
.ekachel .mehr span::before,.doorX .pfeil::before{content:"";display:inline-block;width:9px;height:9px;background:#fff;margin-right:11px}

/* ============ Buttons: eckig, CI ============ */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:15px;padding:16px 34px;border:2px solid transparent;
  position:relative;overflow:hidden;z-index:0;
  transition:color .25s,border-color .25s;
}
/* Wipe-Signatur: Hover-Farbe zieht wie die Kachel-Leisten von links auf */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .32s cubic-bezier(.6,.1,.3,1);
}
.btn:hover::before{transform:scaleX(1)}
.btn-gruen{background:var(--gruen);color:#fff}
.btn-gruen::before{background:var(--gruen-dunkel)}
/* Hello Elementor bringt `a:active, a:hover{color:#336}` mit. Das ist (0,1,1)
   und schlägt `.btn-gruen` (0,1,0) – der weiße Text wurde beim Überfahren
   dunkelblau. Die anderen Varianten haben ohnehin eine eigene Hover-Farbe,
   nur dem grünen Button fehlte sie. */
.btn-gruen:hover{color:#fff}
.btn-weiss{background:#fff;color:var(--gruen)}
.btn-weiss::before{background:var(--gruen-dunkel)}
.btn-weiss:hover{color:#fff}
.btn-outline{border-color:#fff;color:#fff}
.btn-outline::before{background:#fff}
.btn-outline:hover{color:var(--gruen)}
.btn-outline-g{border-color:var(--gruen);color:var(--gruen)}
.btn-outline-g::before{background:var(--gruen)}
.btn-outline-g:hover{color:#fff}

/* ============ Header ============ */
/* Dezente Material-Nuance: minimal dunkler an der Unterkante, oben reines Weiß */
header{position:sticky;top:0;z-index:60;background:linear-gradient(to top,#F2F2EF,#fff 72%);border-bottom:1px solid var(--linie)}
.nav{display:flex;align-items:center;gap:26px;height:84px}
.nav .logo{
  margin-right:auto;flex:none;align-self:flex-start;
  background:var(--gruen);padding:20px 22px 18px;
  box-shadow:0 8px 22px rgba(0,40,14,.25);
  /* Schild bleibt oben angeschlagen und streckt sich nach unten, Logo wandert mit */
  transition:padding-top .5s cubic-bezier(.34,1.56,.64,1);
}
.nav .logo:hover{padding-top:30px}
.nav .logo img{height:76px;width:auto;filter:brightness(0) invert(1)}
@media (max-width:1080px){.nav .logo{padding:14px 16px 12px}.nav .logo:hover{padding-top:22px}.nav .logo img{height:54px}}
.nav-links{display:flex;gap:2px}
.nav-links a{
  text-decoration:none;color:var(--ink);font-weight:600;font-size:15.5px;
  padding:8px 13px;position:relative;transition:color .15s;
  /* Kein Umbruch INNERHALB eines Menüpunkts („Ich brauche / Hilfe") – wird es
     eng, greifen die Stufen unten, bei 1080px übernimmt der Burger. */
  white-space:nowrap;
}
.nav-links a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:3px;background:var(--gruen);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .25s cubic-bezier(.6,.1,.3,1);
}
.nav-links a:hover{color:var(--gruen)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--gruen)}
.nav-links a:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
.nav .btn{padding:10px 18px;font-size:13.5px}

/* Mit „Einrichtungen" samt Pfeil ist die Leiste einen halben Menüpunkt breiter
   als der Entwurf. Damit vor dem Burger-Haltepunkt nichts umbricht, wird sie
   in zwei Stufen enger: erst Abstände, dann zusätzlich die Schrift. Die
   ::after-Unterstreichung läuft mit dem Seitenpolster mit. */
@media (max-width:1460px){
  .nav{gap:18px}
  .nav-links a{padding:8px 10px}
  .nav-links a::after{left:10px;right:10px}
}
@media (max-width:1240px){
  .nav-links a{padding:8px 8px;font-size:14.5px}
  .nav-links a::after{left:8px;right:8px}
  .nav-drop>a{gap:6px}
  .nav .btn{padding:9px 14px;font-size:13px}
}

/* ---- Aufklapper „Einrichtungen" in der Leiste ---- */
/* Öffnen und Schließen macht das CSS allein: :hover für die Maus,
   :focus-within hält das Feld offen, solange die Tastatur darin steht.
   Es gibt deshalb keinen Zustand, den ein Skript pflegen müsste. */
/* Das Feld beginnt exakt an der Unterkante der Kopfzeile. Bezugspunkt ist
   deshalb die Leiste selbst (position:relative), NICHT der Menüpunkt – und
   das Nav-Widget dazwischen darf ebenfalls keiner sein: Elementor stellt
   jedes Widget auf position:relative (Fallstrick 13), dann endete top:100%
   schon unter der Linkzeile. Ohne left/right bleibt das Feld waagerecht an
   der statischen Position, also an seinem Menüpunkt. */
.nav{position:relative}
.nav .elementor-widget.elementor-widget-shortcode{position:static}
.nav-drop>a{display:inline-flex;align-items:center;gap:8px}
.drop-pfeil{
  width:7px;height:7px;flex:none;margin-top:-4px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .22s,margin-top .22s;
}
.nav-drop:hover>a .drop-pfeil,
.nav-drop:focus-within>a .drop-pfeil{transform:rotate(225deg);margin-top:4px}
/* Grenzenlos-Grün mit weißer Schrift; das weiße Quadrat als Markierung
   kommt aus der Burger-Schublade – ein Menü, eine Sprache. */
.drop-panel{
  /* +1px: die Kopfzeile trägt unter der Leiste noch ihren 1px-Rahmen –
     ohne den Versatz schiene er als dunkle Kante oben im Feld durch. */
  position:absolute;top:calc(100% + 1px);min-width:236px;
  display:flex;flex-direction:column;padding:12px 0;
  background:var(--gruen);
  box-shadow:0 22px 44px rgba(0,40,14,.28);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,transform .28s cubic-bezier(.2,.7,.3,1),visibility 0s linear .25s;
}
/* Unsichtbare Brücke über den Streifen zwischen Menüpunkt und Feld – sonst
   klappt das Menü zu, während die Maus die untere Hälfte der Leiste quert. */
.drop-panel::before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px}
.nav-drop:hover .drop-panel,
.nav-drop:focus-within .drop-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* Die Wipe-Unterstreichung der Leiste passt nicht in eine Liste; Hover und
   aktuelle Seite bekommen eine weiße Zeile mit Text im CI-Grün – wie der
   weiße Button auf grünem Grund. Das Quadrat wechselt dort auf Grün; beim
   Tastatur-Fokus (Zeile bleibt grün) bleibt es weiß. */
.nav-links .drop-panel a{padding:10px 22px 10px 42px;font-size:14.5px;color:#fff;white-space:nowrap}
.nav-links .drop-panel a::after{content:none}
.nav-links .drop-panel a:hover,
.nav-links .drop-panel a.active{color:var(--gruen);background:#fff}
.nav-links .drop-panel a:focus-visible{outline-color:#fff}
.drop-panel a::before{
  content:"";position:absolute;left:20px;top:calc(50% - 5px);width:10px;height:10px;
  background:#fff;opacity:0;transform:scale(.35);transition:opacity .2s,transform .2s,background .2s;
}
.drop-panel a:hover::before,
.drop-panel a.active::before{background:var(--gruen)}
.drop-panel a:hover::before,
.drop-panel a:focus-visible::before,
.drop-panel a.active::before{opacity:1;transform:none}

/* ============ Burger und Menü-Schublade (unter 1080px) ============ */
/* Der Entwurf hatte nur die Leiste. Unter 1080px blendet `.nav-links` sich aus –
   bis hierher gab es darunter überhaupt keine Navigation mehr.
   Der Knopf ist ein grünes Quadrat in der Formensprache der Kachel-Headline:
   gleiche Farbe, gleiche harte Kante, kein Radius. */
.burger{
  display:none;flex:none;position:relative;
  width:52px;height:52px;padding:0;border:0;cursor:pointer;
  background:var(--gruen);transition:background .25s;
}
.burger:hover{background:var(--gruen-dunkel)}
/* Positionen relativ zur Mitte, damit der Knopf auf kleinen Handys schrumpfen
   darf, ohne dass die Striche verrutschen. */
.burger .bstrich{
  position:absolute;left:26%;right:26%;height:3px;background:#fff;
  transition:transform .32s cubic-bezier(.6,.1,.3,1),opacity .2s;
}
.burger .bstrich:nth-child(1){top:calc(50% - 9.5px)}
.burger .bstrich:nth-child(2){top:calc(50% - 1.5px)}
.burger .bstrich:nth-child(3){top:calc(50% + 6.5px)}
.burger[aria-expanded="true"] .bstrich:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] .bstrich:nth-child(2){opacity:0;transform:scaleX(.3)}
.burger[aria-expanded="true"] .bstrich:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Die Schublade beginnt unter dem Kopf (`--kopf` setzt das JS), nicht darüber:
   Logo und Burger bleiben sichtbar, das X im Burger ist der Schließen-Knopf.
   Deshalb braucht es keinen zweiten. z-index bleibt unter dem Kopf (60). */
.menue-mobil{
  position:fixed;top:var(--kopf,84px);left:0;right:0;bottom:0;z-index:55;
  display:flex;justify-content:flex-end;
  background:rgba(0,30,10,.55);
  opacity:0;transition:opacity .32s ease;
}
.menue-mobil[hidden]{display:none}
.menue-mobil.auf{opacity:1}
.mm-innen{
  width:min(400px,100%);background:var(--gruen-tief);color:#fff;
  padding:34px 30px 40px;display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  box-shadow:-18px 0 44px rgba(0,20,8,.35);
  transform:translateX(100%);
  transition:transform .42s cubic-bezier(.6,.1,.3,1);
}
.menue-mobil.auf .mm-innen{transform:none}
.mm-links{display:flex;flex-direction:column}
.mm-links a{
  position:relative;display:block;text-decoration:none;color:#fff;
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:18px;line-height:1.25;padding:15px 0 15px 26px;
  border-bottom:1px solid rgba(255,255,255,.16);
  opacity:0;transform:translateX(18px);
  transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.3,1),color .2s;
}
/* Hello Elementor bringt `a:hover{color:#336}` mit – gleiche Spezifität wie
   `.mm-links a`, entschieden würde nach Ladereihenfolge. Deshalb ausdrücklich. */
.mm-links a:hover,.mm-links a:focus{color:#fff}
/* Gestaffelter Einflug wie bei den Buchstaben einer Kachel-Headline. Die
   Verzögerung nur im offenen Zustand – beim Schließen soll alles zusammen
   verschwinden, gestaffelt wirkte es hakelig. */
.menue-mobil.auf .mm-links a{opacity:1;transform:none;transition-delay:var(--md,0s)}
/* Dasselbe weiße Quadrat wie vor dem Datum einer Neuigkeit und in der
   Öffnungsplakette – hier markiert es die aktuelle Seite. */
.mm-links a::before{
  content:"";position:absolute;left:0;top:calc(50% - 5px);width:10px;height:10px;background:#fff;
  opacity:0;transform:scale(.35);transition:opacity .25s,transform .25s;
}
.mm-links a.active::before,.mm-links a:hover::before,.mm-links a:focus-visible::before{
  opacity:1;transform:none;
}
/* Unterpunkte (die sechs Einrichtungen): eingerückt und eine Stufe leiser,
   das Quadrat wandert mit in die Einrückung. */
.mm-links a.sub{
  font-size:15px;letter-spacing:.04em;padding:11px 0 11px 48px;
  border-bottom-color:rgba(255,255,255,.10);
}
.mm-links a.sub::before{left:26px;top:calc(50% - 4px);width:8px;height:8px}
/* Der Spendenknopf in der Schublade ist der Ersatz für den, den das Handy
   aus der Kopfzeile verbannt. Auf dem Tablet steht der echte noch daneben –
   dort wäre die Kopie nur eine zweite Schaltfläche mit derselben Aufschrift.
   Deshalb aus, und im 640er-Block wieder an. */
.mm-fuss{
  margin-top:auto;padding-top:30px;display:none;flex-direction:column;gap:16px;align-items:flex-start;
  opacity:0;transform:translateX(18px);
  transition:opacity .4s ease .28s,transform .45s cubic-bezier(.2,.7,.3,1) .28s;
}
.menue-mobil.auf .mm-fuss{opacity:1;transform:none}
/* Die Seite darunter soll nicht mitscrollen. `overflow` am <body> wirkt auf den
   Viewport, solange das <html> auf `visible` steht – das tut es. */
body.menue-auf{overflow:hidden}

/* ============ Pages ============ */
/* ACHTUNG: Hier stand im Entwurf `.page{display:none}` – die Umschaltung des
   Client-Side-Routers. In WordPress vergibt body_class() an JEDE Seite die
   Klasse "page", die Regel hätte also die komplette Website unsichtbar
   gemacht. Zusammen mit `.page.active` und dem Vorhang ersatzlos entfernt:
   WordPress liefert echte Seiten, es gibt nichts mehr umzuschalten. */

/* ============ Hero (Startseite) ============ */
.hero{
  position:relative;min-height:min(92vh,900px);
  display:flex;align-items:flex-end;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:-4%;
  /* width/height explizit auf auto: Elementor setzt für Container-::before ein
     width:100%, das den negativen inset aushebelt – das Bild begann dann bei
     -4% und endete 4% VOR der rechten Kante (weißer Streifen). */
  width:auto;height:auto;
  background:url('../img/hero-cafe.webp') center/cover no-repeat;
  animation:kb 26s ease-in-out infinite alternate;
}
@keyframes kb{to{transform:scale(1.09)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,25,8,.78) 0%,rgba(0,25,8,.25) 34%,transparent 55%)}
/* Einzelwert statt Kurzschreibweise: dieses Element trägt zugleich `.wrap` und
   holt sein seitliches Polster von dort. Ein `padding:0 0 72px` löschte das mit
   und der Inhalt lief auf schmalen Fenstern gegen den Rand. Dasselbe gilt für
   `.fgrid`, `.fbottom` und `.phero .inner`. */
.hero-content{position:relative;z-index:2;padding-bottom:72px;width:100%}
.hero-claim{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:30px}
.hero-t1{font-size:clamp(15px,1.9vw,26px)}
.hero-t2{font-size:clamp(22px,3.4vw,46px)}
.hero-content .sub{
  color:#fff;font-size:clamp(18px,2vw,23px);max-width:34em;font-weight:400;
  margin:0 0 30px;text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.hero-content .sub b{font-weight:700}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-scroll{
  position:absolute;right:44px;bottom:44px;z-index:2;color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  writing-mode:vertical-rl;display:flex;align-items:center;gap:12px;opacity:.85;
}
.hero-scroll::after{content:"";width:1px;height:56px;background:#fff;animation:drop 2s ease infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ Spenden-Laufband ============ */
.laufband{position:relative;background:var(--gruen);overflow:hidden;padding:12px 0}
.laufband .tag{
  position:absolute;left:0;top:0;bottom:0;z-index:2;background:var(--gruen-dunkel);
  display:flex;align-items:center;padding:0 22px;color:#fff;
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12px;
}
.lauf{display:flex;align-items:center;width:max-content;animation:lauf 80s linear infinite}
.laufband:hover .lauf{animation-play-state:paused}
@keyframes lauf{to{transform:translateX(-50%)}}
.lauf .li{display:flex;align-items:baseline;color:#fff;font-size:15px;white-space:nowrap;padding-right:27px}
.lauf .li::before{content:"";width:8px;height:8px;background:rgba(255,255,255,.5);align-self:center;margin-right:27px}
/* Ziffern im Cameo-Schnitt = kleine weiße Kacheln im grünen Band */
.lauf .ln{font-family:var(--font-tiles);font-weight:900;font-size:16px;margin-right:10px}

/* ============ Zahlen / Mission ============ */
.mission{padding:96px 0 0}
.mission .lead{font-size:clamp(21px,2.4vw,28px);line-height:1.5;max-width:30em;font-weight:400}
.mission .lead b{color:var(--gruen);font-weight:700}
.zahlen{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);margin:64px 0 0}
.zahl{padding:36px 26px;border-left:1px solid var(--linie);text-align:center}
.zahl:first-child{border-left:none}
/* Ruhige Typo: eine Baseline für Zahl + Einheit, Einheiten einheitlich grau,
   tabular-nums verhindert Zittern beim Hochzählen. Alle Boxen zentriert –
   die sehr unterschiedlichen Inhaltsbreiten (»6« vs. »150.000 KM«) wirken
   linksbündig unruhig */
.zahl .n{
  font-family:var(--font-head);font-weight:700;font-size:clamp(34px,3.2vw,48px);
  color:var(--gruen);line-height:1;white-space:nowrap;
  display:flex;align-items:baseline;justify-content:center;gap:.16em;min-height:1em;
  font-variant-numeric:tabular-nums;
}
.zahl .n small{font-size:.32em;font-weight:700;letter-spacing:.16em;color:var(--grau);text-transform:uppercase}
.zahl .t{font-size:14px;color:var(--grau);margin:14px auto 0;line-height:1.5;max-width:15em}

/* ============ Ghost-Typo (Outline-Zahl hinter der Mission) ============ */
.mission{position:relative}
.mission .wrap{position:relative;isolation:isolate}
.mission .ghost{
  position:absolute;right:-30px;top:-78px;z-index:-1;pointer-events:none;user-select:none;
  font-family:var(--font-head);font-weight:700;font-size:clamp(140px,17vw,260px);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px #ECECE8;
}
@supports (animation-timeline: view()){
  .mission .ghost{animation:ghostpar linear both;animation-timeline:view()}
  @keyframes ghostpar{from{transform:translateY(28px)}to{transform:translateY(-28px)}}
}

/* ============ Öffnungsstatus (Plaketten + Angebots-Zeilen) ============ */
/* immer als eigene Zeile, linksbündig */
.status{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--grau);white-space:nowrap;
}
.status i{width:7px;height:7px;background:#B8BCB4;flex:none}
.status.offen{color:var(--gruen)}
.status.offen i{background:var(--gruen)}
.plate .status{margin:5px 0 0}
.erow .status-slot{margin:0 0 18px}

/* ============ Unterstützer im Claimband ============ */
/* Das Sponsorenband gibt es an zwei Stellen: im Claim-Band der Startseite und
   auf der Seite "Unterstützer". Deshalb steht die Gestaltung hier ungebunden;
   unter `.claimband` folgt nur noch der zusätzliche Abstand. Die Logos sind
   weiß, das Band braucht also in jedem Fall einen dunklen Grund. */
.sup{display:flex;flex-direction:column;align-items:center;gap:24px}
.claimband .sup{margin-top:22px}
.sup-label{
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.24em;font-size:11.5px;color:#fff;
}
.sup-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px 54px;max-width:1000px}
.sup-logos img{height:54px;width:auto;opacity:.85;transition:opacity .25s}
.sup-logos img:hover{opacity:1}
.sup-mehr{
  color:#fff;text-decoration:none;
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12px;
  border-bottom:2px solid rgba(255,255,255,.65);padding-bottom:4px;
}

/* ============ Seitenwechsel: grüner Vorhang (Wipe-Signatur) ============ */
/* Im Entwurf war das der Vorhang des Client-Side-Routers. In WordPress lädt
   jede Seite neu – dieselbe Bewegung liefern hier Cross-Document View
   Transitions, ganz ohne JavaScript.
   Browser ohne Unterstützung (derzeit Firefox) überspringen die unbekannte
   At-Regel und wechseln die Seite wie bisher. Es gibt also nichts abzufangen.

   Zeiten und Kurve sind aus dem Entwurf übernommen (dort `.page-curtain`):
     0.00–0.50s  die alte Seite wischt nach rechts weg, dahinter kommt Grün
     0.58–1.23s  die neue Seite wischt von links darüber
   Der Entwurf ließ den Vorhang in .5s zufahren, wechselte bei 520ms die Seite
   und öffnete in .65s mit 80ms Vorlauf – zusammen 1,23s. Eine erste Fassung
   mit 440ms war messbar dieselbe Bewegung, wirkte aber gehetzt: bei dieser
   Kurve liegt fast die ganze Strecke in der Mitte, und die braucht Zeit, sonst
   sieht man nur einen Blitz. */
@view-transition{navigation:auto}

::view-transition-group(root){background:var(--gruen)}
/* Ohne das rechnet der Browser die beiden Schnappschüsse additiv zusammen
   (`plus-lighter` ist der Standard, damit Überblendungen sauber aussehen).
   Bei einem Wischer überlagern sie sich aber hart – dort würde das Bild an der
   Kante ausbleichen. */
::view-transition-old(root),
::view-transition-new(root){mix-blend-mode:normal}
::view-transition-old(root){
  animation:gl-seite-raus .5s cubic-bezier(.7,.1,.3,1) both;
}
::view-transition-new(root){
  animation:gl-seite-rein .65s cubic-bezier(.7,.1,.3,1) .58s both;
}
@keyframes gl-seite-raus{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
@keyframes gl-seite-rein{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ============ Section head ============ */
.section{padding:100px 0}
/* Im Entwurf standen die Ausnahmen als style-Attribut an der Sektion. In
   Elementor lässt sich das Padding dort nicht überschreiben: dessen
   Element-Regel hat dieselbe Spezifität wie `.section`. Deshalb als Klassen,
   die im Baukasten unter "CSS-Klassen" eingetragen werden. */
.section.ohne-oben{padding-top:0}
.section.ohne-unten{padding-bottom:0}
.shead{margin-bottom:48px}
.shead .tiles{margin-bottom:22px}
/* Dieselbe Rechnung wie beim Seitentitel, nur mit 30px Deckel: auf dem Handy
   stand eine Abschnittsüberschrift sonst mit 20px unter einer 58px-Headline
   und wirkte wie eine Bildunterschrift. */
.shead .tiles .t{font-size:clamp(17px,calc((100vw - var(--rand,64px)) / (1.05 * var(--z,14) + 1)),30px)}
.shead p{color:var(--grau);max-width:44em;font-size:18px}

/* ============ Einrichtungen Grid ============ */
.egrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ekachel{position:relative;text-decoration:none;overflow:hidden;background:#000;display:block}
.ekachel img.foto{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s ease,opacity .4s;opacity:.94}
.ekachel:hover img.foto{transform:scale(1.06);opacity:.8}
.ekachel::after{
  content:"";position:absolute;left:0;right:0;top:0;bottom:var(--plate);
  background:var(--gruen);mix-blend-mode:multiply;opacity:0;transition:opacity .45s;
}
.ekachel:hover::after{opacity:.5}
.ekachel{--plate:104px} /* Plate-Höhe – muss zu ::after/.mehr bottom passen */
.ekachel .plate{
  position:absolute;left:0;right:0;bottom:0;min-height:var(--plate);background:#fff;
  padding:13px 20px 12px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-top:4px solid var(--gruen);
}
.ekachel .plate .pname{
  display:block;font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:18px;color:var(--gruen);line-height:1.2;
}
.ekachel .plate .ort{font-size:12.5px;color:var(--grau);line-height:1.4;margin-top:3px}
.ekachel .plate img{height:52px;width:auto;flex:none}
.ekachel .mehr{
  position:absolute;top:0;left:0;right:0;bottom:var(--plate);display:grid;place-items:center;z-index:2;
  opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s;
}
.ekachel:hover .mehr{opacity:1;transform:none}
.ekachel .mehr span{
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:14px;
  color:#fff;border:2px solid #fff;padding:12px 26px;background:rgba(0,125,48,.85);
}

/* ============ Split Doors ============ */
.doors{display:flex;min-height:560px}
.doorX{
  position:relative;flex:1;display:flex;align-items:flex-end;text-decoration:none;
  background-size:cover;background-position:center;transition:flex .55s cubic-bezier(.6,.05,.3,1);
  overflow:hidden;
}
.doorX:hover{flex:1.2}
.doorX::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,35,12,.88),rgba(0,35,12,.28) 55%,rgba(0,35,12,.15));transition:background .4s}
.doorX:hover::after{background:linear-gradient(to top,rgba(0,85,31,.92),rgba(0,85,31,.35) 60%,rgba(0,85,31,.15))}
.doorX .inner{position:relative;z-index:2;padding:46px 48px;color:#fff;width:100%}
.doorX .tiles{margin-bottom:16px}
.doorX .tiles .t{font-size:clamp(17px,1.7vw,24px)}
.doorX p{max-width:30em;font-size:16.5px;color:rgba(255,255,255,.92);margin-bottom:22px}
.doorX .pfeil{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:14px;border-bottom:2px solid #fff;padding-bottom:5px}
.doors-title{background:var(--hell);text-align:center;padding:74px 32px 66px}
.doors-title h2{font-family:var(--font-head);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.6vw,34px);letter-spacing:.06em}
.doors-title p{color:var(--grau);margin-top:10px}
.doors-title h2 em{color:var(--gruen);font-style:normal}

/* ============ Aktuelles ============ */
.news3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* `1fr` heißt minmax(auto,1fr) – eine Spalte darf also breiter werden, wenn ihr
   Inhalt eine größere Mindestbreite hat, und ein Bild bringt seine eigene
   Breite mit. Mit drei gleich großen Beispielbildern fällt das nie auf; im
   Archiv mit 394 Beiträgen liegen 600er neben 1500er Fotos, und das Raster
   verzieht sich zu 304 | 540 | 304. `min-width:0` nimmt der Spalte das Recht,
   sich am Bild auszurichten. */
.news3>*{min-width:0}
.ncard img{max-width:100%}
.ncard{text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--linie);transition:box-shadow .25s,transform .25s;display:flex;flex-direction:column}
.ncard:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(29,29,27,.13)}
.ncard img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center top}
.ncard .body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:9px;flex:1}
.ncard .datum{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--gruen);font-weight:700}
.ncard h3{font-size:20px;font-weight:700;line-height:1.3}
.ncard p{font-size:15px;color:var(--grau)}
/* Aus dem Archiv kommen Titel und Anrisse, die kein Mensch mehr redigiert.
   Ein einziger Anriss bestand aus einer 486px langen Adresse – in einer 350px
   breiten Karte schob die allein die ganze Seite 143px nach rechts. Der Anriss
   ist inzwischen repariert (`seed/19-anrisse.php`), aber die nächste
   Dateiadresse in einem Titel kommt bestimmt. */
.ncard h3,.ncard p,.ptitel,.btext{overflow-wrap:anywhere}
.ncard .body span.link{margin-top:auto;padding-top:12px;font-weight:700;color:var(--gruen);font-size:14.5px}

/* ============ Claim-Band ============ */
.claimband{
  position:relative;background:url('../img/viele_haende.jpg') center/cover no-repeat fixed;
  min-height:min(94vh,880px);display:flex;align-items:center;justify-content:center;
  padding:120px 32px;text-align:center;
}
@media (hover:none){.claimband{background-attachment:scroll}}
/* Eigenes Motiv je Unterseite. Bewusst als Klasse und nicht als Hintergrundbild
   im Baukasten: `.claimband` setzt den Hintergrund als Kurzschreibweise, die
   Elementors Regel bei gleicher Spezifität je nach Ladereihenfolge schlägt. */
.claimband.motiv-schlange{background-image:url('../img/schlange.jpg')}
.claimband.motiv-haende{background-image:url('../img/haende_herz.jpg')}
.claimband::after{content:"";position:absolute;inset:0;background:rgba(0,52,15,.66)}
.claimband .inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:34px}
.claimband .tiles{justify-content:center;align-self:center}
.claimband .tiles .t{font-size:clamp(19px,2.6vw,34px)}
.claimband p{color:rgba(255,255,255,.92);max-width:38em;font-size:18px}

/* ============ Footer ============ */
footer{background:var(--gruen-tief);color:rgba(255,255,255,.82)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:44px;padding-top:72px;padding-bottom:48px}
/* Die Spaltenköpfe standen als h4 im Baukasten – auf jeder Seite ein Sprung
   von h2 auf h4. Jetzt h2; damit die Optik davon unabhängig bleibt, gilt die
   Regel für jede Ebene. Die Elementor-Kette ist mitgenannt, weil die
   Kit-Typografie über `.elementor-heading-title` sonst die Schriftgröße
   einer echten h2 durchdrückt (Fallstrick 5). */
footer h2,footer h3,footer h4,
footer .elementor-widget-heading .elementor-heading-title{
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:13.5px;line-height:1.4;color:#fff;margin-bottom:18px;
}
footer ul{list-style:none}
footer li{margin-bottom:9px;font-size:15px}
footer a{color:rgba(255,255,255,.82);text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
.flogo img{height:64px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.flogo p{margin-top:18px;font-size:15px;max-width:26em}
.fkonto{margin-top:16px;padding:14px 16px;background:rgba(255,255,255,.08);font-size:14px;line-height:1.6}
.fkonto b{color:#fff;font-family:var(--font-head);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px;display:block;margin-bottom:4px}
.fbottom{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;padding-bottom:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:13.5px}

/* ============ Unterseiten ============ */
.phero{position:relative;min-height:460px;display:flex;align-items:flex-end;background-size:cover;background-position:center;overflow:hidden}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,30,10,.82),rgba(0,30,10,.25) 60%,rgba(0,30,10,.2))}

/* ---- Das Kopfbild setzt sich ----------------------------------------------
   Das Bild kommt eine Spur zu groß und zu dunkel herein und legt sich in
   anderthalb Sekunden zurecht. Bewusst NICHT der grüne Vorhang: den gibt es
   schon beim Seitenwechsel, und zweimal derselbe Wischer hintereinander wäre
   eine Bewegung zu viel. Auch kein Einblenden von unten wie beim übrigen
   Inhalt – das Kopfbild ist die Fläche, vor der das passiert, nicht ein
   Baustein darin.

   Warum ein `::before` und nicht das Element selbst: das Bild hängt als
   `background-image` an `.phero`, und ein `transform` dort würde Krümelpfad,
   Überschrift und Vorspann mitziehen. `background:inherit` holt sich dasselbe
   Bild in eine eigene Ebene, die sich allein bewegen kann. Das `overflow:hidden`
   oben schneidet sie ab, solange sie größer als der Kopf ist – sonst lugte
   das statische Bild darunter an den Kanten hervor.

   **Zwei Klassen, und das ist der Kern der Sache:**

   `js-an` setzt `vorhang.js` im `<head>`, also vor dem ersten Frame. Daran
   hängt der AUSGANGSZUSTAND – dunkel und eine Spur zu groß. `kopf-an` setzt
   `grenzenlos.js`, wenn der Seitenvorhang durch ist, und startet erst dann die
   Bewegung.

   Beides zusammenzulegen ging schief und war zu sehen: entstand das `::before`
   erst mit `kopf-an`, zeigte der Kopf bis dahin sein fertiges Bild, sprang im
   Moment des Vorhangendes in den dunklen Ausgangszustand zurück und lief von
   dort los. Steht der Ausgangszustand dagegen von Anfang an, gibt es nichts
   zurückzuspringen – man sieht das Bild dunkel warten und sich dann setzen.

   Ohne JavaScript fehlt `js-an`, es gibt kein `::before`, und das Kopfbild ist
   von der ersten Sekunde an normal. Dass `kopf-an` auch wirklich kommt,
   garantiert das Sicherheitsnetz in `vorhang.js`. */
.js-an .phero:not(.ohne-bild)::before{
  content:"";position:absolute;inset:0;
  /* width/height wie beim Startseiten-Hero: Elementor gibt Container-::before
     ein `width:100%`, das die Kantenlänge aus `inset` aushebelt. */
  width:auto;height:auto;z-index:0;
  background:inherit;
  transform:scale(1.07);
  filter:brightness(.45) saturate(.75);
}
.js-an .phero.kopf-an:not(.ohne-bild)::before{
  animation:phero-setzen 1.7s cubic-bezier(.16,.84,.3,1) both;
}
@keyframes phero-setzen{
  from{transform:scale(1.07);filter:brightness(.45) saturate(.75)}
  to{transform:scale(1);filter:none}
}

/* Der Startseiten-Hero zoomt schon dauerhaft langsam (`kb`). Er bekommt
   deshalb nur die Aufhellung dazu – `transform` ist dort vergeben, und zwei
   Animationen auf derselben Eigenschaft schlagen sich gegenseitig aus. */
.js-an .hero::before{filter:brightness(.45) saturate(.75)}
.js-an .hero.kopf-an::before{animation:kb 26s ease-in-out infinite alternate,hero-hell 1.5s ease both}
@keyframes hero-hell{from{filter:brightness(.45) saturate(.75)}to{filter:none}}
/* Der Inhalt sitzt unten im Bild. Solange er kleiner ist als `min-height`,
   trägt der obere Abstand nichts bei – sobald ein langer Titel darüber
   hinauswächst (auf dem Handy steht „Ich brauche Hilfe" dreizeilig), klebte
   der Krümelpfad ohne ihn direkt unter der Kopfzeile.
   Einzelwerte, keine Kurzschreibweise: `.inner` ist zugleich das `.wrap` und
   holt sein seitliches Polster von dort – ein `padding:44px 0 60px` löschte
   das mit und die Seite lief randlos. */
.phero .inner{position:relative;z-index:2;width:100%;padding-top:44px;padding-bottom:60px}
/* Die Kachel-Headline ist die h1 der Seite und soll das auch aussehen –
   auf dem Handy genauso wie auf dem Desktop.
   Eine einzelne clamp() für alle Titel scheitert daran, dass „Sozialberatung"
   und „Über uns" völlig verschiedene Grenzen haben: was das lange Wort
   erlaubt, lässt das kurze auf einem Drittel seiner Möglichkeiten verhungern.
   Deshalb rechnet die Größe je Titel:
     --z   Buchstaben des längsten Wortes (setzt das JS beim Zerlegen)
     1.05  Kachelbreite in em, Fuge eingerechnet. Ausgemessen, und zwar am
           BREITESTEN Fall: „Veranstaltungen" braucht .99em je Zeichen,
           „Sozialberatung" nur .89 – bei gleicher Buchstabenzahl. Eine auf
           dem schmalen Wort geeichte Konstante ließ das breite überlaufen.
     +1    das Polster der grünen Leiste (.5em links und rechts)
   Die Obergrenze ist zusätzlich an die Fensterbreite gebunden. Ohne das
   nutzte ein kurzer Titel auf dem Handy die vollen 58px aus – „Über uns" stand
   dann zweizeilig in einem 350×136-Block und erschlug alles darunter. Was auf
   1280px eine Headline ist, ist auf 390px ein Plakat.
     390px → 33px   500px → 42px   640px → 54px   ab 683px → 58px
   Auf 390px heißt das: „Über uns" 33px, „Sozialberatung" 25px – jeder Titel
   so groß, wie er sein kann, aber keiner größer als die Seite verträgt. */
.phero .tiles .t{
  font-size:clamp(
    18px,
    calc((100vw - var(--rand,64px)) / (1.05 * var(--z,14) + 1)),
    min(58px, 8.5vw)
  );
}
/* Mehr Luft zwischen Brotkrume, Überschrift und Vorspann – bei der alten
   Schriftgröße reichten 18/20px, unter einer 58px-Headline klebt das. */
.phero .crumb{margin-bottom:26px}
.phero .tiles{margin-bottom:6px}
.phero p{color:#fff;font-size:clamp(17px,1.8vw,21px);max-width:36em;margin-top:34px;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.crumb{margin-bottom:18px}
/* .85 ergab auf dem einfarbig grünen Kopfband (Seiten ohne Foto: Presse,
   Aktuelles, Unterstützer, Impressum) nur 4,28:1 – knapp unter den 4,5:1, die
   WCAG AA für Fließtext verlangt. .94 hebt es auf 4,85:1. Über einem Foto mit
   dunklem Verlauf war es ohnehin nie eng. */
.crumb span{color:rgba(255,255,255,.94);font-size:14px}
.crumb a{color:#fff;text-decoration:none;font-weight:600}

/* Pass-Band */
.passband{background:var(--gruen);color:#fff;padding:88px 0}
.passband .cols{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.passband h2{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(26px,3vw,36px);line-height:1.15;margin-bottom:20px}
.passband p{color:rgba(255,255,255,.94);margin-bottom:14px}
.passband .steps{counter-reset:s;display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(255,255,255,.35)}
.passband .step{display:flex;gap:22px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.35);align-items:flex-start}
.passband .step::before{
  counter-increment:s;content:counter(s);flex:none;
  font-family:var(--font-head);font-weight:600;font-size:22px;
  width:52px;height:52px;background:#fff;color:var(--gruen);display:grid;place-items:center;
}
.passband .step b{display:block;font-size:18px;margin-bottom:3px}
.passband .step span{font-size:15.5px;color:rgba(255,255,255,.9)}
.passband .btn{margin-top:26px}
/* Dummy-Pass-Karte: Kreditkarten-Look, absolut positioniert (drückt das Band
   nicht auf), ragt unten heraus. border-radius = bewusste Ausnahme: stellt ein
   physisches Kartenobjekt dar, kein UI-Element. */
.passband{position:relative;overflow:visible}
.passkarte{
  position:absolute;z-index:3;bottom:-84px;
  /* horizontal zentriert unter der rechten Spalte (Spaltenbreite 553px im 1240er-Wrap) */
  right:max(98px,calc((100% - 1240px)/2 + 98px));
  width:min(420px,90%);aspect-ratio:1.586;
  background:var(--gruen-dunkel);color:#fff;border-radius:16px;
  padding:22px 26px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 32px 64px rgba(0,20,8,.5);
  transform:rotate(-5deg);
}
/* dezentes Karo-Wasserzeichen */
.passkarte::before{
  content:"";position:absolute;right:-46px;top:-46px;width:230px;height:230px;
  background:repeating-conic-gradient(rgba(255,255,255,.055) 0 25%,transparent 0 50%) 0 0/58px 58px;
  transform:rotate(8deg);
}
.pk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.passkarte .pk-tiles{font-size:11.5px}
/* `.passkarte` davor, sonst verliert die Regel: Elementor bringt
   `.elementor img{height:auto}` mit – (0,1,1) gegen (0,1,0). Das Logo rendert
   dann in Originalgröße (368px breit), schiebt den Kartentext nach unten aus
   der Karte und hat „Inhaberin / Gültig bis" komplett verschluckt. */
.passkarte .pk-logo{height:32px;width:auto;flex:none}
.pk-chip{
  width:46px;height:34px;border-radius:6px;flex:none;
  background:repeating-conic-gradient(#fff 0 25%,rgba(255,255,255,.5) 0 50%) 0 0/16px 16px;
}
.pk-nr{
  font-family:var(--font-head);font-weight:700;font-size:clamp(17px,1.6vw,21px);
  letter-spacing:.16em;font-variant-numeric:tabular-nums;text-shadow:0 1px 1px rgba(0,0,0,.35);
}
.pk-unten{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.pk-unten b{
  display:block;font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:9.5px;color:rgba(255,255,255,.65);margin-bottom:2px;
}
.pk-unten span{font-size:15px;font-weight:600;letter-spacing:.04em}
/* dezenter Fade-in-up beim Reinscrollen – eigene Regel, weil .rv-Standard
   die Rotation der Karte überschreiben würde */
.passkarte.rv{opacity:0;transform:rotate(-5deg) translateY(44px);transition:opacity .8s ease .15s,transform .8s cubic-bezier(.2,.7,.3,1) .15s}
.passkarte.rv.in{opacity:1;transform:rotate(-5deg) translateY(0)}

/* Einrichtungs-Zeilen – geboxt statt full-width (Bilder sonst je nach
   Browserbreite zu stark beschnitten), Fotos als <img> für Vorhang + Parallax */
.erow{display:grid;grid-template-columns:1fr 1fr;min-height:480px}
/* Das Foto ist ein Link zur Einrichtung – dasselbe Ziel wie der Knopf im Text.
   Es liegt jetzt eine Ebene tiefer (`.efoto > .imgwipe > img`), deshalb müssen
   Höhe und Mindesthöhe auf den Link wandern: der ist das Rasterkind. */
.erow .efoto{display:block;height:100%;overflow:hidden;position:relative}
.erow .imgwipe{height:100%;min-height:320px}
.erow img.foto{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.25,.6,.3,1)}
/* Rückmeldung, dass das Foto ein Weg ist und kein Bild. Der Knopf im Text
   bleibt der sichtbare Weg – das Foto ist die bequeme Abkürzung daneben,
   und die darf man sehen, bevor man klickt.
   Zwei Dinge gleichzeitig, beide leise: das Bild rückt eine Spur näher, und
   ein grüner Schleier legt sich darüber. Der Schleier allein sähe nach einem
   Fehler aus, das Heranrücken allein übersieht man auf einem 480px hohen
   Foto glatt. */
.erow .efoto::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(200deg,rgba(0,125,48,.30),rgba(0,52,15,.42));
  opacity:0;transition:opacity .45s ease;
}
.erow .efoto:hover img.foto{transform:scale(1.05)}
.erow .efoto:hover::after{opacity:1}
.erow .text{padding:64px 68px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.erow:nth-child(even){direction:rtl}
.erow:nth-child(even) .text{direction:ltr}
.erow:nth-child(even){background:var(--hell)}
.erow .ehead{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px;margin-bottom:12px}
.erow .ename{
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:clamp(24px,2.2vw,30px);color:var(--gruen);line-height:1.15;
}
.erow .text img.slogo{height:62px;width:auto}
.erow .text p{color:#3C403A;max-width:34em;margin-bottom:18px}
.erow .info{display:flex;gap:36px;flex-wrap:wrap;margin:6px 0 24px;padding:16px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);width:100%}
.erow .info div{font-size:14.5px;line-height:1.5}
.erow .info b{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--gruen);display:block;margin-bottom:3px}
.erow .btn{font-size:13px;padding:13px 26px}

/* Projekte */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pkachel{position:relative;overflow:hidden;display:block;text-decoration:none}
.pkachel img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s}
.pkachel:hover img{transform:scale(1.06)}
.pkachel .label{
  position:absolute;left:0;bottom:0;background:var(--gruen);color:#fff;
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:15px;padding:12px 20px;
}
.pkachel .desc{position:absolute;inset:0;background:rgba(0,85,31,.9);color:#fff;display:grid;place-items:center;padding:30px;opacity:0;transition:opacity .35s;text-align:center;font-size:15.5px}
.pkachel:hover .desc{opacity:1}

/* FAQ */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 4px;font-weight:700;font-size:18px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-head);font-size:26px;color:var(--gruen);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 4px 24px;color:var(--grau);max-width:44em}

/* ---- Das Kleingedruckte auf „Ich möchte helfen" ---- */
/* Dieselbe Bauform wie die häufigen Fragen, nur mit mehreren Absätzen je
   Abschnitt – die 24px Fußpolster der Fragen wären zwischen ihnen zu viel und
   ließen einen Abschnitt in Streifen zerfallen. */
/* Eigenes `scroll-margin-top` statt des `:target`-Werts ganz oben: beim Klick
   auf eine Kachel scrollt das JS selbst (es muss ja vorher aufklappen), und in
   diesem Frame greift die `:target`-Regel noch nicht – der Abschnitt landete
   drei Pixel unter der Kopfzeile statt darunter mit Luft. */
.spendenwege details{scroll-margin-top:calc(var(--kopf,84px) + 26px)}
.spendenwege details > p{padding-bottom:12px}
.spendenwege details > p:last-child{padding-bottom:24px}
.spendenwege b{color:var(--ink)}
/* Der Strich muss sein: gegen Grau reicht die grüne Farbe allein nicht als
   Unterscheidung (axe meldet das als `link-in-text-block`). */
.spendenwege a{color:var(--gruen);text-decoration:underline}

/* Helfen-Wege */
/* Vier Kacheln sind die entworfene Anzahl: bei 1240px Breite ergibt minmax(240px)
   genau vier Spalten à 285px. Ein fünfter Eintrag rutscht in die zweite Zeile,
   statt alle fünf so schmal zu quetschen, dass Überschriften umbrechen. */
.wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}

/* Einsatzfelder im Block „Zeit schenken" */
.zeitliste{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.zeitliste li{font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:12px;color:var(--gruen);background:#fff;
  border:1px solid var(--linie);padding:12px 17px}
/* .wkachel.rv nötig: die spätere .rv-Regel würde die transition-Shorthand sonst
   überschreiben und der Schatten spränge instant */
.wkachel,.wkachel.rv{border:1px solid var(--linie);border-top:4px solid var(--gruen);padding:34px 30px 30px;display:flex;flex-direction:column;gap:10px;transition:opacity .7s ease,box-shadow .6s cubic-bezier(.25,.6,.3,1),transform .6s cubic-bezier(.25,.6,.3,1);background:#fff}
.wkachel:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(29,29,27,.12)}
.wkachel .num{
  align-self:flex-start;background:var(--gruen);color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:.12em;padding:8px 13px;
}
.wkachel h3{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:21px}
.wkachel p{font-size:15px;color:var(--grau)}
.wkachel .link{margin-top:auto;padding-top:14px;font-weight:700;color:var(--gruen);font-size:14.5px;text-decoration:none}
/* Die ganze Kachel klickbar: die Trefferfläche des einen echten Links wird
   über die Kachel gezogen. Kein verschachteltes <a>, kein zweites Ziel für
   Screenreader – und der Zeiger wird überall zur Hand. */
.wkachel{position:relative}
.wkachel .link::after{content:"";position:absolute;inset:0}

/* ============ Projektseiten ============ */
/* Die drei Projekte haben keine Seitenspalte mit Öffnungszeiten, hatten aber
   trotzdem die schmale Textspalte der Einrichtungen – über 400px blieben
   rechts leer, und „Raus aus dem Alltag" wurde zu anderthalb Bildschirmen
   Liste. Jetzt: Einleitung auf Lesebreite, Angebote über die volle Breite.

   Lesebreite bleibt Lesebreite. Der Platz rechts ist kein Grund, Fließtext
   über 1240px laufen zu lassen – ab etwa 90 Zeichen je Zeile findet das Auge
   den Zeilenanfang nicht mehr. Nur die Kacheln nehmen die Breite. */
.projekt-lead{max-width:46em}
.projekt-lead p{font-size:18.5px;line-height:1.62;color:#3C403A;margin-bottom:16px}
.projekt-lead p:last-child{margin-bottom:0}
.projekt-lead b{font-weight:700;color:var(--ink)}

.pblock + .pblock{margin-top:64px}
/* `minmax(340px,…)` ergibt bei 1176px Innenbreite genau drei Spalten (vier
   bräuchten 1360px), bei 1080px zwei und auf dem Handy eine – ohne einen
   einzigen Haltepunkt. Das `min(…,100%)` ist die Pflichtsicherung: unter
   340px Containerbreite sprengte die Spur sonst das Raster. */
/* `auto-fill`, nicht `auto-fit`: eine Gruppe mit nur zwei Angeboten soll
   dieselbe Kachelbreite haben wie die Gruppe mit sechs darüber. `auto-fit`
   ließe die beiden auf halbe Seitenbreite auseinanderziehen, und die Spalten
   der Abschnitte fluchteten nicht mehr. */
.pkarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:14px}
/* `.pkarte.rv` nötig, siehe `.wkachel` – die spätere `.rv`-Regel würde die
   transition-Kurzschreibweise sonst ersetzen und der Schatten spränge hart. */
.pkarte,.pkarte.rv{border:1px solid var(--linie);border-top:4px solid var(--gruen);
  padding:32px 30px 28px;display:flex;flex-direction:column;gap:12px;background:#fff;
  transition:opacity .7s ease,box-shadow .6s cubic-bezier(.25,.6,.3,1),transform .6s cubic-bezier(.25,.6,.3,1)}
.pkarte:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(29,29,27,.12)}
/* h2 ODER h3, je nachdem ob eine Gruppenüberschrift darüber steht – die Ebene
   richtet sich nach der Gliederung, das Aussehen bleibt gleich. */
.pkarte h2,.pkarte h3{font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:20px;line-height:1.25}
.pkarte p{font-size:15.5px;line-height:1.6;color:var(--grau)}
.pkarte p + p{margin-top:14px}
/* Ein Bild in der Kachel steht unten und schiebt sich an den Fuß – so fluchten
   die Bildkanten mehrerer Kacheln einer Reihe, auch wenn die Texte darüber
   unterschiedlich lang sind. */
.pkarte .pkbild{margin-top:auto;padding-top:16px;display:block;width:100%;height:auto}

/* Eins für Grenzenlos */
.eins{background:var(--hell);padding:80px 0}
.eins .cols{display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:center}
.eins img{height:150px;width:auto}
/* Aktionslogo und Partnerlogo untereinander. Der Partner steht bewusst
   kleiner darunter: er trägt die Aktion mit, ist aber nicht die Aktion.
   Die Trennlinie macht aus zwei gestapelten Logos eine erkennbare Zuordnung –
   ohne sie sähe es aus, als gehörte das zweite Logo zum Text daneben. */
.einslogos{display:flex;flex-direction:column;align-items:center;gap:20px}
.eins .einslogos .eins-logo img{height:150px;width:auto}
.eins .einslogos .eins-partner{padding-top:20px;border-top:1px solid var(--linie);width:100%;
  display:flex;justify-content:center}
.eins .einslogos .eins-partner img{height:auto;width:auto;max-width:230px}
/* Auf der eigenen Seite der Aktion stehen die beiden Logos ohne Textspalte
   daneben – also nebeneinander statt untereinander, getrennt durch einen
   Strich. Die Größen brauchen zwei Klassen im Selektor: `.elementor img
   {height:auto}` steht bei (0,1,1) und schlüge eine einklassige Regel. */
.partnerband{display:flex;align-items:center;justify-content:center;
  gap:40px;flex-wrap:wrap;margin-top:44px}
.partnerband .p-aktion img{height:120px;width:auto}
/* `min-height` gibt dem Trennstrich die Höhe des Aktionslogos – sonst hängt er
   als 40px kurzer Strich neben einem viel höheren Logo. */
.partnerband .p-partner{padding-left:40px;border-left:1px solid var(--linie);
  display:flex;align-items:center;min-height:120px}
/* FESTE Breite, nicht `width:auto`. Das EDEKA-Logo ist eine SVG-Datei ohne
   eigene Maße (nur mit viewBox), und in einer Zeilen-Flexbox rechnet der
   Browser `width:auto` bei so einer Datei zu NULL aus – das Logo war da,
   messbar 0×0, und übrig blieb der Trennstrich. Mit einer festen Breite
   ergibt sich die Höhe aus dem Seitenverhältnis der viewBox. */
.partnerband .p-partner img{width:min(200px,100%);height:auto}
.eins h2{font-family:var(--font-head);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);margin-bottom:12px}
.eins p{color:#3C403A;max-width:44em;margin-bottom:20px}

/* Konten */
.kgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
.spendenknoepfe{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap}
/* Der Spendenquittungs-Hinweis zwischen Konten und Spendenknöpfen. Die
   Überschrift folgt der CI-Zwischenzeile (wie .eins h2 / .wkachel h3), das
   grüne Quadrat davor ist die vertraute Marke aus Plakette und Schublade.
   Die eigene Linkfarbe muss sein: ohne sie färbt Hello Elementor den
   Verweis rosa (a{color:#c36}, siehe Fallstricke unten). */
.quittung{margin:54px 0 4px;max-width:44em}
.quittung h3{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:21px;margin-bottom:14px;
}
.quittung h3::before{content:"";flex:none;width:12px;height:12px;background:var(--gruen)}
.quittung p{color:#3C403A}
.quittung a{color:var(--gruen);text-decoration:underline;font-weight:600}
.kbox{background:var(--gruen-dunkel);color:#fff;padding:30px 32px;position:relative}
.kbox b{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:15px;display:block;margin-bottom:10px}
.kbox div{font-size:15.5px;line-height:1.8}
.kbox button{
  position:absolute;top:24px;right:24px;background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff;
  font-family:var(--font-head);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:11.5px;padding:8px 14px;cursor:pointer;
}
.kbox button:hover{background:#fff;color:var(--gruen-dunkel)}

/* ============ Vorstand (Über uns) ============ */
/* Fünf Karten mit Porträt. `min-width:0` wie beim Neuigkeiten-Raster: sonst
   bestimmt das breiteste Foto die Spaltenbreite und das Raster verzieht sich. */
/* `auto-fit` statt fünf festen Spalten: bei 1240px ergibt minmax(190px) genau
   die entworfenen fünf, und auf schmaleren Fenstern fallen sie von selbst auf
   vier, drei, zwei und eine zurück – ohne eine einzige Media-Query-Zeile. */
.vorstand{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.vorstand>*{min-width:0}
.vperson{background:var(--hell);border-top:4px solid var(--gruen);padding:26px 24px 28px;display:flex;flex-direction:column;gap:6px}
/* Mit Porträt sitzt das Bild bündig oben in der Karte, das Polster wandert an
   den Text – sonst stünde das Foto in einem grauen Rahmen. */
.vorstand.mit-portraet .vperson{padding:0 0 28px;overflow:hidden}
.vorstand.mit-portraet .vtext{display:flex;flex-direction:column;gap:6px;padding:24px 24px 0}
.vbild{margin:0}
/* Festes Hochformat, damit fünf unterschiedlich beschnittene Fotos eine Linie
   ergeben. `object-position:top` schneidet im Zweifel unten ab, nicht am Kopf. */
.vbild img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top}
.vbild-leer{aspect-ratio:3/4;background:
  repeating-linear-gradient(135deg,#E9E9E4 0 10px,#F2F2EF 10px 20px)}
/* „Ehrenamtlicher Vorsitzender" ist eine Zeile, „Ehrenamtlicher
   stellvertretender Vorsitzender" sind drei – ohne Mindesthöhe stünde jeder
   Name auf einer anderen Linie. Dasselbe für zweizeilige Namen. */
.vfunktion{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--gruen);line-height:1.5;min-height:4.5em}
.vname{font-size:19px;font-weight:700;line-height:1.3;min-height:2.6em}
.vberuf{font-size:14.5px;color:var(--grau)}

/* ============ Zeitstrahl (Historie) ============ */
.zeitstrahl{list-style:none;position:relative}
.zeitstrahl::before{content:"";position:absolute;left:110px;top:10px;bottom:10px;width:1px;background:var(--linie)}
.meilenstein{display:grid;grid-template-columns:110px 1fr;gap:40px;padding-bottom:42px;position:relative}
.meilenstein:last-child{padding-bottom:0}
.meilenstein::before{content:"";position:absolute;left:106px;top:11px;width:9px;height:9px;background:var(--gruen)}
/* Der Punkt auf der Linie sitzt bei 106px, die Jahresspalte ist 110px breit und
   rechtsbündig – die Zahl klebte am grünen Quadrat. Das Polster rückt sie ab. */
.meilenstein .jahr{font-family:var(--font-head);font-weight:700;font-size:22px;color:var(--gruen);text-align:right;line-height:1.35;padding-right:22px}
.meilenstein .mtext b{display:block;font-size:19px;font-weight:700;line-height:1.35;margin-bottom:6px}
.meilenstein .mtext p{color:var(--grau);font-size:15.5px;max-width:44em}

/* ============ Downloads ============ */
.downloads{display:flex;flex-direction:column;gap:2px}
.dl{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
  padding:22px 26px;background:var(--hell);text-decoration:none;color:inherit;transition:background .25s}
.dl:hover{background:#EAEAE4}
.dltyp{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.1em;
  color:#fff;background:var(--gruen);padding:7px 10px}
.dltext b{display:block;font-size:17px;font-weight:700}
.dltext span{font-size:14.5px;color:var(--grau)}
.dlpfeil{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:12px;color:var(--gruen);white-space:nowrap}
.dlpfeil::after{content:" →"}

/* ============ Termine ============ */
/* Dieselbe Bauform wie die Download-Liste – eine Reihe heller Zeilen mit einer
   grünen Marke links. Statt des Dateityps steht dort das Datum: die eine
   Angabe, nach der man in einer Terminliste sucht.
   Bewusst keine Karten: „Kultur ohne Grenzen" verschenkt ein bis zwei Dutzend
   Freikarten im Monat, als Kachelraster wären das drei Bildschirme. */
.termine{display:flex;flex-direction:column;gap:2px}
.tnote{color:var(--grau);max-width:44em;margin-bottom:22px}
/* Zweispaltig, damit die Liste nicht zum Bildschirmmeter wird: „Kultur ohne
   Grenzen" hat im Monat ein bis zwei Dutzend Freikarten-Termine, die
   Tiersprechstunde 26 im Jahr. Zeilenweise gefüllt (1 2 / 3 4), nicht
   spaltenweise – chronologisch liest man von links nach rechts, und
   spaltenweise müsste die Zeilenzahl vorher feststehen. */
.tliste{display:grid;grid-template-columns:1fr 1fr;gap:2px;list-style:none;margin:0;padding:0}
.tkarte,.tkarte.rv{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:24px;
  padding:16px 26px;background:var(--hell);
  transition:background .25s,opacity .7s ease,transform .7s ease}
.tdatum{font-family:var(--font-head);font-weight:700;color:#fff;background:var(--gruen);
  padding:8px 10px;text-align:center;line-height:1.15;min-width:64px}
.tdatum b{display:block;font-size:18px}
.tdatum > span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.92}
.ttitel{display:block;font-size:17px;font-weight:700;line-height:1.35}
.tmeta{font-size:14.5px;color:var(--grau)}
.tmehr{margin-top:28px}

/* ============ Pressespiegel ============ */
/* Jahrgangsleiste über dem Pressespiegel. Dieselbe Formensprache wie der
   Themenfilter über den Neuigkeiten – es ist dieselbe Handlung. */
.jahrleiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:40px}
.jahrleiste>span{font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:11.5px;color:var(--grau);margin-right:8px}
.jahrleiste a{display:inline-flex;align-items:baseline;gap:7px;
  font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.04em;
  color:var(--ink);background:#fff;border:1px solid var(--linie);padding:9px 13px;
  text-decoration:none;font-variant-numeric:tabular-nums;transition:border-color .2s,color .2s}
.jahrleiste a:hover{border-color:var(--gruen);color:var(--gruen)}
/* .55 ergab 3,79:1 gegen Weiß – zu wenig für 11px. .75 liegt bei 7,4:1 und
   bleibt der Jahreszahl daneben trotzdem deutlich untergeordnet. */
.jahrzahl{font-size:11px;opacity:.75}
.jahrkopf{font-family:var(--font-head);font-weight:700;font-size:22px;
  margin:52px 0 14px;scroll-margin-top:calc(var(--kopf,84px) + 12px)}
.jahrleiste+.jahrkopf{margin-top:0}

.pressliste{border-top:1px solid var(--linie)}
.pzeile{display:grid;grid-template-columns:130px 132px 1fr 100px;gap:28px;align-items:baseline;
  padding:20px 6px;border-bottom:1px solid var(--linie);text-decoration:none;color:inherit;transition:background .25s}
a.pzeile:hover{background:var(--hell)}
.pdatum{font-size:14px;color:var(--grau);font-variant-numeric:tabular-nums}
.pmedium{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--gruen)}
.ptitel{font-size:16.5px;line-height:1.45}
.plink{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:11.5px;color:var(--gruen);white-space:nowrap;text-align:right;opacity:0;transition:opacity .25s}
.plink::after{content:" →"}
a.pzeile:hover .plink,a.pzeile:focus-visible .plink{opacity:1}

/* ============ Kontaktkacheln ============ */
.kontaktgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kkachel{background:#fff;border:1px solid var(--linie);border-top:4px solid var(--gruen);
  padding:30px 28px 28px;display:flex;flex-direction:column}
.kkachel .khead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.kkachel .kname{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:21px}
.kkachel .slogo{height:44px;width:auto}
.kkachel .status-slot{margin-bottom:18px}
.kdaten{list-style:none;display:flex;flex-direction:column;gap:13px;padding-top:18px;border-top:1px solid var(--linie)}
.kdaten li{font-size:14.5px;line-height:1.5}
.kdaten b{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:11.5px;color:var(--gruen);display:block;margin-bottom:3px}
.kdaten a{color:inherit;text-decoration:none;border-bottom:1px solid var(--linie)}
.kdaten a:hover{color:var(--gruen);border-color:var(--gruen)}
.klink{margin-top:auto;padding-top:22px;font-family:var(--font-head);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--gruen);text-decoration:none}
.klink::after{content:" →"}

/* ============ Preiskacheln (Kindernest) ============ */
.preise{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* Zwei Kacheln in einem Dreierraster ließen rechts ein Drittel leer stehen –
   auf der Aktionsseite von „Eins für Grenzenlos" sind es genau zwei Zahlen. */
.preise.zwei{grid-template-columns:repeat(2,1fr)}
.zahlen-stand{margin-top:16px;font-size:14.5px;color:var(--grau)}
.preis{background:var(--hell);border-top:4px solid var(--gruen);padding:28px 26px}
.preis .pwert{font-family:var(--font-head);font-weight:700;font-size:36px;color:var(--gruen);line-height:1.1;margin-bottom:8px}
.preis .plabel{font-size:15px;color:var(--grau);line-height:1.5}

/* ============ Formular ============ */
/* Formular und Anschrift nebeneinander – rechts vom Formular wäre sonst eine
   große leere Fläche, und wer lieber anruft, findet die Nummer sofort. */
.kontaktspalten{display:grid;grid-template-columns:1fr 360px;gap:64px;align-items:start}
.kontaktspalten .kkachel{background:#fff}

.gform{max-width:760px;display:flex;flex-direction:column;gap:20px}
.gform label{display:flex;flex-direction:column;gap:7px}
.gform label>span{font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:11.5px;color:var(--gruen)}
.greihe{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.gform input[type=text],.gform input[type=email],.gform textarea{
  font:inherit;font-size:16px;color:var(--ink);background:#fff;width:100%;
  border:1px solid var(--linie);padding:13px 15px;transition:border-color .2s;
}
.gform input[type=text]:focus,.gform input[type=email]:focus,.gform textarea:focus{
  outline:none;border-color:var(--gruen);
}
.gform textarea{resize:vertical;min-height:170px;line-height:1.6}
.gform label.gcheck{flex-direction:row;align-items:flex-start;gap:12px}
.gcheck input{width:18px;height:18px;flex:none;margin-top:4px;accent-color:var(--gruen)}
/* Muss spezifischer sein als `.gform label>span` (eine Klasse, zwei Elemente),
   sonst steht die Einwilligung in versalem Grün wie eine Feldbeschriftung. */
.gform label.gcheck>span{font-family:var(--font-body);font-weight:400;text-transform:none;
  letter-spacing:0;font-size:14.5px;color:var(--grau);line-height:1.6}
/* Unterstrichen, nicht nur grün: mitten in einem Absatz ist Farbe allein
   kein Unterschied, den jeder sieht (WCAG 1.4.1). */
.gcheck a{color:var(--gruen);text-decoration:underline}
.gform .btn{align-self:flex-start}
/* Bot-Falle: für Menschen unsichtbar, für Formular-Roboter verlockend.
   Nicht display:none – manche Skripte überspringen versteckte Felder. */
.gl-falle{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.gmeldung{padding:16px 22px;font-size:15.5px;line-height:1.6;border-left:4px solid}
.gmeldung.gut{background:#EDF5EF;border-color:var(--gruen);color:var(--gruen-dunkel)}
.gmeldung.schlecht{background:#FBEDEC;border-color:#B3261E;color:#7A1A15}

/* ============ Reine Textseiten (Impressum, Datenschutz, Satzung) ============ */
.text-seite,.rechtsblock{max-width:820px}
.text-seite h2,.rechtsblock h2{font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:21px;margin:42px 0 12px}
.text-seite>h2:first-child,.rechtsblock>h2:first-child{margin-top:0}
.text-seite h3,.rechtsblock h3{font-weight:700;font-size:17.5px;margin:26px 0 8px}
.text-seite p,.rechtsblock p{margin-bottom:14px;color:#3C403A}
.text-seite ul,.rechtsblock ul{margin:0 0 16px 22px;color:#3C403A}
.text-seite li,.rechtsblock li{margin-bottom:7px}
/* Einzelne übernommene Beiträge tragen die nackte Adresse als Linktext, weil
   die Alt-Website das so gemacht hat. Bei 820px passt das knapp; ohne
   Umbrucherlaubnis schöbe eine 800px-Adresse auf schmalen Fenstern die ganze
   Seite auseinander. */
.text-seite a,.rechtsblock a{color:var(--gruen);overflow-wrap:anywhere}

/* ============ Suche (404-Seite und Trefferliste) ============ */
.suchfeld{display:flex;flex-wrap:wrap;gap:12px;max-width:600px;margin:24px 0 8px}
.suchfeld input{
  flex:1 1 240px;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--linie);padding:13px 15px;transition:border-color .2s;
}
.suchfeld input:focus{outline:none;border-color:var(--gruen)}
.suchfeld .btn{flex:none}
/* Knöpfe nebeneinander, die auf schmalen Fenstern umbrechen. Gleiche Maße wie
   `.spendenknoepfe`, aber ohne dessen Namen – es geht hier nicht ums Spenden. */
.knopfreihe{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
/* Die Trefferliste borgt sich die Bauform der Downloads. Dort ist die Plakette
   immer „PDF", hier heißt sie mal „Seite", mal „Einrichtung" – ohne Mindestmaß
   stünde jeder Titel auf einer anderen Linie, weil jede Zeile ihr eigenes
   Raster ist. */
.treffer .dltyp{min-width:104px;text-align:center}

/* ============ Speisekarte ============ */
/* Eine echte Tabelle, kein Bild: Preise sollen sich vorlesen, kopieren und auf
   dem Handy umbrechen lassen. */
.speisekarte{max-width:820px;background:#fff;border-top:4px solid var(--gruen)}
.speisekarte + .speisekarte{margin-top:28px}
.skkopf{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:24px 28px 20px}
.skkopf b{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:20px}
.skkopf span{font-size:14.5px;color:var(--grau)}
.speisekarte table{width:100%;border-collapse:collapse}
.speisekarte th,.speisekarte td{text-align:left;padding:13px 28px;border-top:1px solid var(--linie)}
.speisekarte thead th{font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:11px;color:var(--gruen);padding-top:10px;padding-bottom:10px}
.speisekarte thead th:not(:first-child),.skpreis{text-align:right;white-space:nowrap}
.speisekarte td{font-size:15.5px}
.skpreis{font-variant-numeric:tabular-nums;width:110px}
.skohne{color:var(--grau)}
.skgruppe th{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:11.5px;color:var(--ink);background:var(--hell);padding-top:11px;padding-bottom:11px}
/* Getränke: eine Spalte weniger, dieselbe Tabelle. Die Kopfzeile trennt sie
   von den Gerichten – ohne sie liefe „Kaffee 0,50 €" als weitere Zeile unter
   den Hauptgerichten weiter. */
.speisekarte table.getraenke{margin-top:8px}
.speisekarte table.getraenke thead th{border-top-width:8px;border-top-color:var(--hell)}
/* Die Zeichen hinter dem Gericht: klein und grau, aber nicht so klein, dass
   man sie nicht lesen kann – sie sind der Grund, warum manche Gäste die Karte
   überhaupt studieren. `vertical-align` statt des <sup>-Standards, sonst
   springt die Zeilenhöhe der Tabellenzeile. */
.skcode{font-size:11.5px;color:var(--grau);letter-spacing:.04em;
  vertical-align:baseline;position:relative;top:-.35em;margin-left:.3em}

/* ---- Kennzeichnung (Zusatzstoffe und Allergene) ---- */
/* 24 Einträge, gesetzlich vorgeschrieben und für die meisten Gäste nie von
   Interesse – deshalb eingeklappt. Wer sie braucht, findet sie direkt unter
   der Karte statt im Kleingedruckten am Seitenende. */
.kennz{margin-top:20px;border-top:1px solid var(--linie);background:#fff}
.kennz summary{cursor:pointer;padding:16px 28px;font-size:14.5px;font-weight:700;
  color:var(--gruen);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.kennz summary::-webkit-details-marker{display:none}
.kennz summary::after{content:"+";font-family:var(--font-head);font-size:22px;line-height:1;transition:transform .25s}
.kennz[open] summary::after{transform:rotate(45deg)}
.kennzblock{padding:0 28px 20px}
.kennzblock b{display:block;font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:11px;color:var(--gruen);margin-bottom:8px}
.kennzblock dl{display:grid;grid-template-columns:2.2em 1fr;gap:2px 10px;font-size:14px;color:var(--grau)}
.kennzblock dt{font-weight:700;color:var(--ink)}

/* ============ Spenderliste ============ */
.spender-stand{font-size:14.5px;color:var(--grau);margin-bottom:20px}
.spenderliste{list-style:none;columns:3;column-gap:44px}
.spenderliste li{font-size:14.5px;line-height:1.55;margin-bottom:9px;break-inside:avoid;color:#3C403A}

/* Namensliste im Fließtext (aktive Hilfe). Zweispaltig statt dreispaltig wie
   die Spenderliste: hier stehen ganze Firmierungen mit Ort, keine Kurznamen –
   in drei Spalten à 240px bräche „Mainteam Bild Text Kommunikation" dreimal um.
   `!important` gegen `.text-seite ul{margin-left:22px}`: die Aufzählungspunkte
   sind hier weg, also braucht es die Einrückung dafür auch nicht. */
.text-seite ul.namen{list-style:none;columns:2;column-gap:44px;margin:0 0 22px!important}
.text-seite ul.namen li{font-size:15px;line-height:1.5;margin-bottom:8px;break-inside:avoid}

/* ============ Sponsorenband außerhalb des Claim-Bands ============ */
.supband{background:var(--gruen-tief);color:#fff;padding:76px 0}

/* Sektion auf hellem Grund – der Wechsel gliedert lange Seiten. */
.section.hell{background:var(--hell)}
/* Kopfband für Seiten ohne eigenes Motiv (Impressum, Datenschutz). */
.phero.klein{min-height:240px}
/* Eckdaten nebeneinander statt untereinander – für den Pressekontakt. */
.kdaten-breit{flex-direction:row;flex-wrap:wrap;gap:14px 56px;max-width:820px}

/* ============ Ansichten aus dem Theme (Beitrag, Einrichtung, Projekt) ============ */
/* Ohne Foto bleibt das Kopfband einfarbig grün statt halbdurchsichtig über
   nichts zu liegen. */
.phero.ohne-bild{background:var(--gruen);min-height:340px}
.phero.ohne-bild::after{display:none}
.crumb.dunkel span{color:var(--grau)}
.crumb.dunkel a{color:var(--ink)}

.bkopf{max-width:820px}
.bkopf .datum{display:block;margin-bottom:16px;font-family:var(--font-head);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--gruen)}
.bkopf .datum::before{content:"";display:inline-block;width:8px;height:8px;background:var(--gruen);margin-right:9px}
.bkopf h1{font-family:var(--font-head);font-weight:700;font-size:clamp(28px,3.4vw,44px);line-height:1.2}
.zurueck{margin-top:52px}

/* ============ Bilder in Beiträgen ============ */
/* **Nie beschneiden.** Das Archiv besteht zu großen Teilen aus abfotografierten
   Plakaten im Hochformat, und bei 19 Beiträgen IST das Plakat der Inhalt – der
   Text stand drüben im Bild. Das Beitragsbild lief vorher auf
   `aspect-ratio:16/9` mit `object-fit:cover`: von einem 1240×1753-Plakat blieb
   das obere Drittel übrig, Datum, Uhrzeit und halbes Programm waren weg.

   Also vollständig und mittig, mit gedeckelter Höhe – ein 2040px hohes Foto
   füllt sonst drei Bildschirme, bevor der erste Satz kommt. Wer es größer
   braucht, klappt es auf (siehe `.lupe`).

   Eine getönte Fläche hinter dem Bild gab es hier kurzzeitig, damit die
   leeren Streifen neben einem Hochformat nach Absicht aussehen. Sie taten
   das Gegenteil: sie haben den Rand erst betont. Ohne sie liest sich der
   freie Platz als Rand der Seite, nicht als Loch. */
   Linksbündig, nicht zentriert: das Bild fluchtet damit mit dem Krümelpfad,
   der Überschrift und dem Text darunter. Zentriert stand ein Hochformat als
   einziges Element der Seite aus der Flucht – es sah aus, als gehörte es
   nicht dazu. */
.bildbuehne{display:flex;justify-content:flex-start}
.bildbuehne img{display:block;width:auto;max-width:100%;height:auto}

.bbild{margin-top:46px}
.bbild img{max-height:min(680px,78vh)}

/* Die Galerie am Fuß eines Beitrags.
   Die Bilder standen vorher mitten im Text, jedes über die volle Spaltenbreite.
   Bei drei oder vier Bildern zerreißt das den Beitrag, und weil sie nicht
   beschnitten werden dürfen, blieb neben jedem Hochformat ein breiter leerer
   Streifen. Klein und nebeneinander sind sie eine Bildstrecke – und der Text
   läuft durch. `single.php` löst sie dafür aus dem Inhalt heraus.

   Quadratische Miniaturen dürfen beschneiden: hier zählt der Überblick, das
   ganze Bild ist einen Klick entfernt. */
.bgalerie{margin-top:48px}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,45%),1fr));gap:8px}
.bgrid .bildzoom{overflow:hidden;background:var(--hell)}
.bgrid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  transition:transform .5s cubic-bezier(.25,.6,.3,1)}
.bgrid .bildzoom:hover img{transform:scale(1.05)}

/* `.text-seite` statt `.btext`: dieselbe Bauform brauchen inzwischen auch die
   Projekt- und Einrichtungsseiten, und `.btext` trägt ohnehin immer beides.
   In Beiträgen kommt das nicht mehr vor – dort wandern die Bilder in die
   Galerie –, wohl aber in von Hand gepflegten Texten. */
.text-seite .beitragsbild{margin:30px 0;display:flex;flex-direction:column;align-items:center}
.text-seite .beitragsbild img{display:block;width:auto;max-width:100%;height:auto;
  max-height:min(560px,70vh)}
.text-seite .beitragsbild figcaption{font-size:14.5px;color:var(--grau);
  margin:10px 0 0;text-align:center}
/* Für Bilder, die schon von sich aus klein wirken sollen. */
.text-seite .beitragsbild.schmal img{max-width:520px}

/* Der Aufklapper. Ein `<button>` und kein Klick-Handler auf dem Bild: nur so
   ist er mit der Tastatur erreichbar und wird als Bedienelement angesagt.

   `button.` davor ist Pflicht, nicht Zierde: Hello Elementor bringt
   `[type="button"], button{border:1px solid #c36; color:#c36}` mit – Spezifität
   (0,1,0), also gleichauf mit `.bildzoom`, und da sein Stylesheet später lädt,
   gewinnt es. Jede Miniatur hätte einen pinken Rahmen bekommen. Mit dem Tag
   davor steht die Regel bei (0,1,1) und liegt vorn. Dasselbe gilt für :hover,
   wo Hello zusätzlich `background-color:#c36` setzt. */
button.bildzoom,
button.bildzoom:hover,
button.bildzoom:focus{display:block;max-width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;font:inherit;color:inherit}
button.bildzoom:focus-visible{outline:3px solid var(--gruen);outline-offset:3px}

/* Das aufgeklappte Bild. `<dialog>` bringt Fokusfalle, Escape und den Schleier
   von sich aus mit – dieselbe Arbeit von Hand wäre die halbe Burger-Schublade.

   Zwei Dinge sind nötig, damit das Bild wirklich in der Mitte steht – beide
   hatten gefehlt, und zusammen ergaben sie ein Bild in der oberen linken Ecke:

   1. **`margin:auto`.** Der Browser zentriert ein modales `<dialog>` genau
      darüber (`position:fixed; inset:0; margin:auto`), und der Stern-Reset ganz
      oben in dieser Datei (`*{margin:0}`) hebelt das aus.
   2. **KEIN `width`/`height`.** Der Browser gibt dem Dialog `width:fit-content`,
      damit die Box auf den Inhalt schrumpft. Ein `width:auto` dagegen bedeutet
      bei `inset-inline:0 0` „so breit wie erlaubt" – die Box wurde 96vw × 96vh
      groß und war damit selbst zentriert, das Bild darin saß oben links. */
.lupe{border:0;padding:0;background:none;margin:auto;max-width:96vw;max-height:96vh;
  overflow:visible}
.lupe::backdrop{background:rgba(0,25,8,.88)}
.lupe img{display:block;max-width:96vw;max-height:96vh;width:auto;height:auto;margin-inline:auto}

/* Die Bildunterschrift steht erst hier, nicht unter dem Vorschaubild: „Das Team
   des Café Grenzenlos" wäre unter 150px Breite dreizeilig, und aus der Reihe
   kleiner Quadrate würde eine Liste. Aufgeklappt ist Platz dafür.
   Die Breite ist gedeckelt, weil sonst eine lange Unterschrift die Box breiter
   macht als das Bild – der Dialog richtet sich nach seinem breitesten Kind. */
.lupe-bu{max-width:min(96vw,46ch);margin:12px auto 0;text-align:center;
  color:rgba(255,255,255,.86);font-size:14.5px;line-height:1.5}
.lupe.mit-bu img{max-height:calc(96vh - 3.4rem)}

/* Der Schließen-Knopf sitzt IN der oberen rechten Bildecke, nicht darüber.
   Über dem Bild (`top:-46px`) rutschte er bei einem hohen Hochformat aus dem
   Fenster – die Box schrumpft ja auf das Bild, und darüber ist dann nichts
   mehr. Das dunkle Feld darunter hält ihn auch auf hellen Bildern lesbar.
   `button.` davor aus demselben Grund wie bei `.bildzoom` – ohne das Tag
   gewinnt Hello Elementors `[type="button"]:hover{background-color:#c36}`
   und der Knopf wird pink. */
button.lupe-zu,
button.lupe-zu:focus{position:absolute;top:10px;right:10px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.55);background:rgba(0,25,8,.62);color:#fff;
  font-size:24px;line-height:1;cursor:pointer;transition:background .2s}
button.lupe-zu:hover{background:rgba(0,25,8,.88);color:#fff}
button.lupe-zu:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* Blätter-Pfeile der Galerie: gleiche Bauform wie der Schließen-Knopf,
   sichtbar nur mit Nachbarn (.mit-nav setzt das JS). Sie liegen auf der
   Bildkante statt daneben – die Box schrumpft aufs Bild, daneben ist im
   Dialog kein Platz, der mitwachsen würde. */
button.lupe-pfeil,
button.lupe-pfeil:focus{position:absolute;top:calc(50% - 26px);width:44px;height:52px;
  display:none;align-items:center;justify-content:center;padding:0 0 5px;
  border:1px solid rgba(255,255,255,.55);background:rgba(0,25,8,.62);color:#fff;
  font-size:32px;line-height:1;cursor:pointer;transition:background .2s}
.lupe.mit-nav button.lupe-pfeil{display:flex}
button.lupe-links{left:10px}
button.lupe-rechts{right:10px}
button.lupe-pfeil:hover{background:rgba(0,25,8,.88);color:#fff}
button.lupe-pfeil:focus-visible{outline:3px solid #fff;outline-offset:2px}
.leer{color:var(--grau)}
/* Der Link im „nichts gefunden"-Satz braucht den Strich. Sonst unterscheidet
   ihn nur die Farbe vom Fließtext, und die reicht hier nicht: gegen das Grau
   von `.leer` kommt das Grün auf weniger als 3:1 – anders als im normalen
   Fließtext, wo daneben fast Schwarz steht (axe: link-in-text-block). */
.leer a{text-decoration:underline}

/* Themenfilter über der Neuigkeiten-Liste */
.katfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:46px}
/* `.kat.rv` nötig: die spätere `.rv`-Regel würde die transition-Kurzschreibweise
   sonst ersetzen und der Farbwechsel beim Überfahren fiele weg. */
.kat,.kat.rv{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;color:var(--ink);background:#fff;border:1px solid var(--linie);
  padding:12px 17px;text-decoration:none;
  transition:border-color .2s,color .2s,background .2s,opacity .7s ease,transform .7s ease}
.kat:hover{border-color:var(--gruen);color:var(--gruen)}
.kat.aktiv{background:var(--gruen);border-color:var(--gruen);color:#fff}
.katzahl{font-size:11px;opacity:.75;font-variant-numeric:tabular-nums}
.kat.aktiv .katzahl{opacity:.92}

.blaettern{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:56px}
.blaettern .page-numbers{font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.06em;
  padding:11px 17px;border:1px solid var(--linie);color:var(--ink);text-decoration:none;
  transition:border-color .2s,color .2s}
.blaettern a.page-numbers:hover{border-color:var(--gruen);color:var(--gruen)}
.blaettern .page-numbers.current{background:var(--gruen);border-color:var(--gruen);color:#fff}
.blaettern .dots{border-color:transparent;padding-inline:4px}

.ekopf{display:grid;grid-template-columns:1fr 380px;gap:64px;align-items:start}
.eseite{position:sticky;top:calc(var(--kopf,84px) + 26px);display:flex;flex-direction:column;gap:24px}
/* `align-self` ist nötig: in einer Flex-Spalte streckt `stretch` die Querachse,
   und das ist beim Bild die Breite – `width:auto` verliert dagegen, das Logo
   wird auseinandergezogen. `center` statt `flex-start`, damit das Logo über der
   Kontaktbox steht und nicht daneben ins Leere zeigt; die größere Höhe gibt ihm
   den Platz, den ein Einrichtungslogo verdient. */
.eseite .slogo{height:104px;width:auto;max-width:100%;object-fit:contain;align-self:center}
.eseite .kontaktgrid{grid-template-columns:1fr}
.emerkposten{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.emerk{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:11.5px;color:#fff;background:var(--gruen);padding:8px 13px}

/* ============ Nur für Vorleseprogramme ============ */
/* Der Klartext einer Kachel-Headline. Optisch weg, für Screenreader da –
   sichtbar sind die einzelnen Buchstabenkacheln, und die tragen aria-hidden.
   `clip-path` statt `display:none` oder `visibility:hidden`: die beiden
   nehmen den Text auch aus dem Barrierebaum, und dann steht dort nichts. */
.nur-vorleser{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ============ Tastatur-Fokus ============ */
/* Nur bei Tastaturbedienung sichtbar – beim Klicken mit der Maus würde der
   Rahmen stören. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gruen);outline-offset:3px;
}
.claimband a:focus-visible,.phero a:focus-visible,.doorX:focus-visible,
.passband a:focus-visible,footer a:focus-visible{outline-color:#fff}

/* Toast */
.toast{
  position:fixed;bottom:22px;left:50%;transform:translate(-50%,90px);z-index:100;
  background:var(--gruen-dunkel);color:#fff;padding:15px 30px;font-weight:600;font-size:15px;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.15);pointer-events:none;box-shadow:0 14px 34px rgba(0,52,15,.4);
}
.toast.show{transform:translate(-50%,0)}

/* Reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* ============================================================
   Responsive
   ------------------------------------------------------------
   Der Entwurf war reines Desktop-CSS. Vier Stufen:

     1080px  Tablet quer – die Menüleiste weicht dem Burger,
             drei Spalten werden zwei
      860px  Tablet hoch – alles mit fester Seitenspalte
             (Einrichtung, Kontakt, Pressespiegel) wird einspaltig
      640px  Handy – ein Strang, kleinere Polster, der
             Spendenknopf zieht in die Schublade um
      420px  kleines Handy – nur noch Feinjustage

   Zwei Fallen:
   1. Regeln, die gegen Elementor ankämpfen (`.fliess`, `.sub`, `.lead`),
      brauchen auch hier ihre volle Kette `body .elementor .e-con > …`.
      Ein Media Query erhöht die Spezifität nicht.
   2. Die Schriftgrößen der Kachel-Headlines stehen auf `clamp()`. Feste
      Werte hier würden die Staffelung aushebeln – stattdessen die
      vw-Mitte der clamp() verschieben.
   ============================================================ */

@media (max-width:1080px){
  /* --- Navigation: Leiste raus, Burger rein --- */
  .nav-links{display:none}
  .burger{display:block}
  /* Das grüne Schild ist absichtlich höher als die Kopfzeile und hängt unten
     heraus – die Signatur der Marke. Mit dem kleineren Logo (54px) passte es
     plötzlich in die 84px hinein und hing gar nicht mehr. Also die Leiste
     kürzen statt das Logo vergrößern; nebenbei gewinnt der Inhalt 20px. */
  .nav{height:64px}
  /* Im Markup steht die Navigation vor dem Spendenknopf – auf dem Desktop
     richtig, auf dem Tablet stünde der Burger dadurch links neben dem Knopf.
     Menüauslöser gehören ganz nach außen. `:has()` statt `:nth-child(2)`,
     damit die Regel nicht stillschweigend die falsche Kachel erwischt, wenn
     jemand die Kopfzeile im Baukasten umsortiert. */
  .nav > .elementor-element:has(.burger){order:1}

  /* --- Raster --- */
  .zahlen{grid-template-columns:repeat(2,1fr)}
  .zahl{border-left:none;border-top:1px solid var(--linie)}
  .egrid,.news3{grid-template-columns:1fr 1fr}
  .wgrid{grid-template-columns:1fr 1fr}
  .kontaktgrid{grid-template-columns:1fr 1fr}
  .passband .cols,.erow,.eins .cols,.kgrid{grid-template-columns:1fr}
  .erow:nth-child(even){direction:ltr}
  .erow .text{padding:44px 32px}
  .fgrid{grid-template-columns:1fr 1fr;gap:38px}
  .spenderliste{columns:2}

  /* Die Türen stapeln sich. `min-height` muss dabei von der Reihe auf die
     einzelne Tür wandern, sonst wären drei gestapelte Türen zusammen 560px
     hoch – also je 187px.
     Auf der Startseite ist `.doors` ein Elementor-Container, und der bekommt
     `--flex-direction:row` fest verdrahtet mitgegeben – aus einer Regel mit
     drei Klassen (0,3,0), gegen die `.doors` (0,1,0) nicht ankommt. Deshalb
     hier zusätzlich die Custom Property umstellen, aus der Elementors eigene
     Regel ihre Richtung liest. Elementors Haltepunkte (767/1024px) liegen
     neben unseren 1080px – über die Oberfläche wäre das nicht zu treffen. */
  .doors{flex-direction:column;min-height:0}
  body .elementor .e-con.doors{--flex-direction:column}
  .doorX{min-height:360px}
  .doorX:hover{flex:1.2}

  /* --- Luft --- */
  .section{padding:76px 0}
  .mission{padding:72px 0 0}
  /* Die Outline-Zahl hinter der Mission ragte mit `right:-30px` aus dem Wrap.
     Auf dem Desktop verschwindet das im Seitenrand, ab hier steht sie über
     dem Fensterrand und schob die Seite 6px nach rechts. */
  .mission .ghost{right:0}
  .claimband{padding:96px 32px;min-height:min(80vh,700px)}
}

@media (max-width:860px){
  :root{--rand:48px}
  .wrap{padding:0 24px}

  /* --- Feste Seitenspalten fallen weg --- */
  /* `1fr 380px` bei 812px Innenmaß ginge gerade noch auf, aber der Fließtext
     bliebe unter 380px. Ab hier steht die Spalte unter dem Text. */
  .ekopf{grid-template-columns:1fr;gap:46px}
  .eseite{position:static;top:auto}
  .kontaktspalten{grid-template-columns:1fr;gap:46px}
  .greihe{grid-template-columns:1fr}

  /* --- Pressespiegel: aus vier Spalten werden zwei Zeilen --- */
  /* `130px 132px 1fr 100px` plus dreimal 28px Abstand braucht mindestens
     446px – bei 390px Fensterbreite lief allein diese Zeile 120px über. */
  .pzeile{grid-template-columns:1fr auto;gap:4px 20px;padding:18px 4px}
  .pdatum{grid-column:1;grid-row:1}
  .pmedium{grid-column:2;grid-row:1;text-align:right}
  .ptitel{grid-column:1/-1;grid-row:2}
  /* „Ansehen" erschien nur beim Überfahren. Auf dem Handy gibt es kein
     Überfahren – und die ganze Zeile ist ohnehin der Link. */
  .plink{display:none}

  .preise{grid-template-columns:1fr 1fr}
  .section{padding:64px 0}
  .passband{padding:72px 0}
  /* Die Musterkarte hing mit `bottom:-84px` rechts aus dem grünen Band heraus.
     Einspaltig ragte sie damit in den nächsten Abschnitt. Ab hier ist sie das
     letzte Element im Band statt ein freischwebendes. */
    /* 94% statt 86%: bei 1.586 Seitenverhältnis wächst die Höhe mit der Breite
     mit, und unter 400px reichte die Karte für ihren eigenen Inhalt nicht mehr.
     Mehr geht nicht – die um 5° gedrehte Karte braucht Platz für ihre schräge
     Hülle, sonst schiebt sie die Seite auf. */
  .passkarte{position:static;width:min(420px,94%);margin:10px auto 0;right:auto;bottom:auto}
  .erow .text{padding:40px 26px}
  .erow .info{gap:24px}
  .doorX .inner{padding:40px 30px}
}

@media (max-width:640px){
  :root{--rand:40px}
  .wrap{padding:0 20px}

  /* --- Kopf --- */
  /* Logo, Burger und Spendenknopf zusammen brauchten 438px – das war der
     Überlauf, der auf JEDER Seite gemeldet wurde. Der Knopf steht jetzt in der
     Schublade (das JS klont ihn dorthin), sichtbar bleiben Logo und Burger. */
  .nav{height:56px;gap:14px}
  .nav .btn{display:none}
  .mm-fuss{display:flex}
  /* Auf dem Tablet soll neben der Schublade noch etwas von der Seite zu sehen
     sein – dafür der 400px-Deckel. Auf einem Handy ist das falsch: bei 412px
     (Pixel) oder 430px (iPhone Pro Max) blieb links ein 12 bis 30px breiter
     Streifen Schleier stehen, durch den die Seite durchschimmerte. */
  .mm-innen{width:100%}
  .nav .logo{padding:12px 14px 10px}
  .nav .logo:hover{padding-top:18px}
  .nav .logo img{height:46px}

  /* --- Raster: ein Strang --- */
  /* `.preise.zwei` muss mit in die Aufzählung: der Modifikator steht bei
     (0,2,0) und schlüge die einklassige Regel sonst auch hier. Ein Media Query
     erhöht die Spezifität nicht (siehe „Drei Fallen" in CLAUDE.md). */
  .egrid,.news3,.wgrid,.pgrid,.kontaktgrid,.preise,.preise.zwei,.tliste{grid-template-columns:1fr}

  /* Nebeneinander ist hier kein Platz mehr – und der Trennstrich muss von der
     Seite nach oben wandern, sonst steht er unter dem Umbruch quer.
     `--flex-direction` wie bei `.doors` oben: die Richtung des
     Elementor-Containers kommt aus der Custom Property, nicht aus
     `flex-direction`. */
  .partnerband{flex-direction:column;gap:28px}
  body .elementor .e-con.partnerband{--flex-direction:column}
  .partnerband .p-partner{padding-left:0;padding-top:28px;width:100%;min-height:0;
    border-left:0;border-top:1px solid var(--linie);justify-content:center}
  .zahlen{grid-template-columns:1fr 1fr}
  .zahl{padding:26px 14px}
  /* „150.000 KM" steht auf `white-space:nowrap` und sprengte die halbe Zeile.
     Die vw-Mitte der clamp() greift jetzt schon vor dem Minimum. Reicht das in
     einer 175px-Spalte nicht, rutscht die Einheit unter die Zahl – `flex-wrap`
     betrifft nur die Flexzeile, die Zahl selbst bleibt zusammen. Zwei Spalten
     sind wichtiger als eine durchgehende Grundlinie: einspaltig wird aus dem
     Band eine fünf Bildschirme lange Liste. */
  .zahl .n{font-size:clamp(26px,7.4vw,48px);flex-wrap:wrap}
  /* Fünf Zahlen auf zwei Spalten lassen die letzte allein – und weil die
     Trennlinie am Kästchen hängt, bricht sie dann mitten in der Zeile ab.
     Eine ungerade letzte Zahl nimmt deshalb beide Spalten.
     Zwei Selektoren, weil es die Zahlen an zwei Bauformen gibt: auf der
     Startseite als einzelne Elementor-Widgets (die Brücke stellt sie auf
     `display:contents`, gezählt wird also die Hülle), auf „Über uns" als
     direkte Kinder aus dem Shortcode. */
  .zahlen > .zahl:last-child:nth-child(odd),
  .zahlen > .elementor-element:last-child:nth-child(odd) .zahl{grid-column:1/-1}
  .zahl .t{font-size:13px;max-width:none}
  .fgrid{grid-template-columns:1fr;gap:34px;padding-top:54px;padding-bottom:36px}
  .spenderliste{columns:1}
  .text-seite ul.namen{columns:1}

  /* Das Laufband: die Beschriftung lag links über der Bahn und verdeckte auf
     390px mehr als die halbe Breite – von den Spenden war nur noch ein
     Wortfetzen zu sehen. Ab hier steht sie als eigene Zeile darüber. */
  .laufband{padding:0 0 12px}
  .laufband .tag{position:static;padding:9px 20px;margin-bottom:12px;font-size:11px}

  /* --- Hero --- */
  .hero{min-height:78vh}
  .hero-scroll{display:none}
  .hero-content{padding-bottom:52px}
  .hero-t1{font-size:17px}
  .hero-t2{font-size:clamp(25px,7.4vw,34px)}
  .phero{min-height:330px}
  .phero .inner{padding-top:26px;padding-bottom:42px}
  .phero .crumb{margin-bottom:18px}
  .phero p{margin-top:24px}
  .phero.ohne-bild{min-height:270px}
  .phero.klein{min-height:200px}

  /* --- Luft --- */
  .section{padding:52px 0}
  .shead{margin-bottom:34px}
  .shead p{font-size:16.5px}
  .mission{padding-top:56px}
  /* Die Outline-Zahl ragte mit `right:-30px` aus dem Wrap heraus – auf dem
     Desktop hinter dem Text, auf dem Handy über den Rand. */
  .mission .ghost{right:0;top:-52px;font-size:clamp(104px,26vw,260px)}
  .claimband{padding:68px 20px;min-height:0}
  .doors-title{padding:50px 20px 44px}
  .doorX{min-height:320px}
  .doorX .inner{padding:34px 22px}
  .erow .text{padding:34px 20px}
  /* Name und Einrichtungslogo standen in einer Zeile mit `space-between`.
     Manche Logos sind breite Banner und wurden bei fester Höhe 121px breit –
     zusammen mit „Sozialberatung" in 24px passte das nicht mehr in 350px. */
  .erow .ehead{flex-wrap:wrap;gap:10px 16px}
  .erow .text img.slogo{height:auto;width:auto;max-height:48px;max-width:100%}
  .eins{padding:56px 0}
  .eins .cols{gap:30px}
  .eins img{height:110px}
  .passband{padding:56px 0}
  .passband .cols{gap:40px}
  .supband{padding:56px 0}
  .sup-logos{gap:18px 32px}
  .sup-logos img{height:42px}
  .bbild{margin-top:32px}
  .zurueck{margin-top:38px}
  .blaettern{margin-top:40px}
  .text-seite h2,.rechtsblock h2{font-size:19px;margin:34px 0 10px}
  /* Deutsche Bandwurmwörter in einer 320px-Spalte: „Vertretungsberechtigter"
     allein ist breiter als der Rest der Zeile. WordPress setzt lang="de-DE",
     also hat der Browser das Trennwörterbuch – nutzen wir es. */
  .text-seite,.rechtsblock,.btext,.faq details p,.ncard p{hyphens:auto}

  /* --- Vorstand: zwei Karten nebeneinander --- */
  /* `auto-fit` würde bei 350px auf eine einzige Spalte fallen – dann wäre
     jedes Porträt 350×467px groß und die fünf Köpfe zusammen 2300px hoch.
     Zwei Spalten halten die Seite lesbar; dafür rückt die Typo nach unten. */
  .vorstand{grid-template-columns:1fr 1fr;gap:10px}
  .vorstand.mit-portraet .vtext{padding:18px 15px 0}
  .vperson{padding-bottom:20px}
  .vfunktion{font-size:10.5px;letter-spacing:.1em;min-height:5.6em}
  .vname{font-size:16px;min-height:3.2em}
  .vberuf{font-size:13.5px}

  /* --- Zeitstrahl: Jahreszahl über den Text statt daneben --- */
  /* Die 110px-Spalte plus 40px Abstand nahmen ein Drittel der Zeilenbreite. */
  .zeitstrahl::before{left:4px}
  .meilenstein{grid-template-columns:1fr;gap:2px;padding-left:26px;padding-bottom:32px}
  .meilenstein::before{left:0;top:9px}
  .meilenstein .jahr{text-align:left;padding-right:0;font-size:19px}

  /* --- Downloads: der Pfeil rutscht unter den Titel --- */
  .dl{grid-template-columns:auto 1fr;gap:12px 18px;padding:18px 20px}
  .dlpfeil{grid-column:2}

  /* --- Termine: enger, aber weiter zweispaltig --- */
  /* Das Datum unter den Titel zu setzen wäre hier falsch: in einer Liste
     sucht man die Daten in einer Spalte, nicht verstreut. */
  .tkarte,.tkarte.rv{gap:14px;padding:13px 16px}
  .tdatum{min-width:56px;padding:7px 8px}
  .tdatum b{font-size:16px}

  /* --- Konten: der Kopieren-Knopf steht unter der IBAN --- */
  /* Absolut oben rechts lief er sonst in lange Banknamen hinein. Im Markup
     kommt er zuerst, deshalb ordnet `order` ihn nach hinten. */
  .kbox{display:flex;flex-direction:column;padding:26px 22px 24px}
  .kbox b{order:1}
  .kbox div{order:2}
  .kbox button{position:static;order:3;align-self:flex-start;margin-top:16px}
  .spendenknoepfe{gap:12px}

  /* --- Kontaktkacheln: Name und Logo untereinander --- */
  /* Manche Einrichtungslogos sind breite Banner; mit `height:44px` wurden sie
     220px breit und schoben den Namen aus der Kachel. `max-height` + `max-width`
     bei `height:auto` ist das native „contain" ohne Leerraum. */
  .kkachel{padding:26px 22px 24px}
  .kkachel .khead{flex-direction:column;align-items:flex-start;gap:12px}
  .kkachel .kname{font-size:19px}
  .kkachel .slogo{height:auto;width:auto;max-height:42px;max-width:100%;object-fit:contain}
  .eseite .slogo{height:auto;max-height:92px}
  .kdaten-breit{flex-direction:column;gap:13px}

  /* Musterkarte: die Höhe folgt der Breite (Seitenverhältnis 1.586), unter
     400px reicht sie für den eigenen Inhalt nicht mehr. Erst rücken die
     Innenmaße zusammen; das Seitenverhältnis einer Kreditkarte bleibt bis
     hinunter zu 340px erhalten (siehe dort). */
  .passkarte{padding:14px 16px}
  .pk-top{gap:10px}
  .pk-logo{height:26px}
  .passkarte .pk-tiles{font-size:10px}
  .pk-chip{width:34px;height:24px}
  .pk-nr{font-size:15px;letter-spacing:.12em}
  .pk-unten{gap:10px}
  .pk-unten b{font-size:9px;margin-bottom:1px}
  .pk-unten span{font-size:13px}

  /* --- Kleinkram --- */
  .faq summary{font-size:16.5px;padding:18px 2px;gap:14px}
  .speisekarte th,.speisekarte td{padding:11px 18px}
  .skkopf{padding:20px 18px 16px}
  .skpreis{width:auto}
  .kennz summary{padding:15px 18px}
  .kennzblock{padding:0 18px 18px}
  .jahrleiste{gap:6px;margin-bottom:32px}
  .jahrleiste a{padding:8px 11px;font-size:12px}
  .katfilter{gap:6px;margin-bottom:34px}
  .kat{padding:10px 13px;font-size:11.5px}
  .blaettern .page-numbers{padding:10px 14px;font-size:13px}
  .gform textarea{min-height:150px}
  .zeitliste{gap:8px}
}

@media (max-width:420px){
  .nav{height:52px}
  .nav .logo img{height:40px}
  .burger{width:46px;height:46px}
  .btn{padding:14px 24px;font-size:14px;letter-spacing:.1em}
  .zahl{padding:22px 12px}
  .erow .info{flex-direction:column;gap:14px}
  .fbottom{flex-direction:column;gap:8px}
  .wkachel{padding:28px 22px 26px}
  .mm-innen{padding:28px 24px 34px}
  /* Speisekarte: „Mit Pass" und „Ohne Pass" stehen auf `nowrap` und brauchten
     zusammen mit dem Gericht 360px. Ab hier dürfen die Spaltenköpfe umbrechen –
     die Preise darunter bleiben einzeilig. */
  .speisekarte th,.speisekarte td{padding:10px 12px}
  .speisekarte thead th:not(:first-child){white-space:normal}
  .speisekarte td{font-size:14.5px}
  .skkopf{padding:18px 12px 14px}
  .kennz summary{padding:14px 12px}
  .kennzblock{padding:0 12px 16px}
}

/* ============================================================
   Reduzierte Bewegung
   ------------------------------------------------------------
   Die Signatur dieser Website IST Bewegung: Kacheln klappen auf,
   Bildvorhänge ziehen zur Seite, Zahlen zählen hoch, das Hero-Bild
   fährt langsam heran. Für Menschen mit vestibulärer Störung ist
   genau das der Auslöser für Schwindel und Übelkeit.

   Deshalb hier nicht „Dauer auf 0", sondern der ENDZUSTAND: alles
   ist da, sofort und vollständig. Nichts wird versteckt, nichts
   geht verloren – es bewegt sich nur nichts mehr. Die zwei
   Endlosanimationen (Laufband, Scroll-Pfeil) hören ganz auf; ein
   dauerlaufendes Element lässt sich nicht „zu Ende" zeigen.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  /* Kachel-Headlines: Leiste ausgefahren, Buchstaben stehen */
  .tiles::before,.tiles.go::before{transform:scaleX(1)}
  .tiles .t,.tiles:not(.go) .t{opacity:1;transform:none}

  /* Bildvorhänge offen, Einblendungen sichtbar */
  .imgwipe::after{transform:scaleX(0)}
  .rv,.rv.in{opacity:1;transform:none}
  .passkarte.rv,.passkarte.rv.in{opacity:1;transform:rotate(-5deg)}

  /* Das Kopfbild steht sofort da. `content:none` statt „Animation aus": ohne
     das Pseudoelement bleibt es beim Hintergrundbild des Elements selbst –
     eine zweite, deckungsgleiche Ebene ohne Bewegung wäre nur Ballast. Wichtig
     ist dabei der Ausgangszustand: bliebe das Pseudoelement mit
     `brightness(.45)` stehen, wäre der Kopf dauerhaft zu dunkel. */
  .js-an .phero:not(.ohne-bild)::before{content:none}
  .js-an .hero::before,
  .js-an .hero.kopf-an::before{filter:none;animation:none}

  /* Das Heranzoomen des Fotos beim Überfahren ist Bewegung, kein Farbwechsel –
     also raus. Der Zeigefinger als Cursor bleibt Rückmeldung genug. */
  .erow .efoto:hover img.foto{transform:none}

  /* Seitenwechsel ohne Vorhang – ein bildschirmfüllender Wischer bei jedem
     Klick ist genau die Bewegung, um die es hier geht. */
  ::view-transition-group(root){background:none}
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none}

  /* Endlosanimationen aus */
  .lauf{animation:none}
  .hero::before{animation:none}
  .hero-scroll::after{animation:none}
  .mission .ghost{animation:none;transform:none}
  /* Nur die News-Bilder: die Einrichtungs-Fotos haben den Parallax nicht mehr
     und brauchen deshalb auch das Übermaß von 1.12 nicht, das ihm Luft gab. */
  .ncard .imgwipe img{animation:none;transform:scale(1.12)}

  /* Alles Übrige: keine Übergänge, keine Verschiebung beim Überfahren.
     Farbwechsel bleiben – sie sind Rückmeldung, keine Bewegung. */
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .ekachel:hover img.foto,.pkachel:hover img,.ncard:hover,.wkachel:hover{transform:none}
  /* Die Türen wachsen beim Überfahren – ohne Übergang wäre das ein Ruck im
     ganzen Layout statt einer Bewegung. Also gar nicht erst. */
  .doorX:hover{flex:1}
  .nav .logo:hover{padding-top:20px}
}

/* ============================================================
   Elementor-Brücke
   ------------------------------------------------------------
   Elementor legt um jedes Widget mehrere Hüllen:
       .elementor-element > .elementor-widget-container > [Inhalt]
   Beim Shortcode-Widget heißt die innere Hülle abweichend
       .elementor-element > .elementor-shortcode > [Inhalt]
   Das Design des Entwurfs setzt an mehreren Stellen aber DIREKTE
   Kindbeziehungen voraus – etwa `.doors > .doorX{flex:1}`. Mit den
   Hüllen dazwischen wird der Wrapper zum Flex-Item und die Kachel
   selbst schrumpft auf ihre Inhaltsgröße.

   `display:contents` nimmt die Hüllen aus dem Layoutfluss, ohne sie
   zu entfernen – der Inhalt rückt eine Ebene hoch und verhält sich
   wie im Entwurf. Bewusst eng gefasst auf die betroffenen Container,
   damit Elementors eigenes Styling anderswo unberührt bleibt.
   ============================================================ */
/* Elementor setzt für seine Widgets `margin:0` auf Überschrift und Absatz –
   damit fallen die Abstände des Entwurfs (footer h4, .flogo p …) weg.
   Außerdem färbt es Überschriften mit der Kit-Primärfarbe. Die steht jetzt
   zwar auf CI-Grün, im dunklen Footer müssen die Zeilen aber weiß bleiben.
   `.elementor-heading-title` (Klasse) sticht `footer h4` (Elemente) in der
   Spezifität aus – deshalb hier explizit. */
footer .elementor-widget-heading .elementor-heading-title{margin-bottom:18px;color:#fff}
.shead .elementor-widget-heading .elementor-heading-title{margin-bottom:14px}

/* Elementor färbt Text-Widgets mit der Kit-Textfarbe (dunkles Anthrazit).
   Im dunkelgrünen Footer muss die helle Farbe von `footer{color:…}` geerbt
   werden, sonst steht dort Schwarz auf Dunkelgrün. */
footer .elementor-widget-text-editor,
footer .elementor-widget-text-editor p,
footer .elementor-widget-text-editor span{color:inherit}

/* Elementor legt auf jedes Widget eine eigene transition-Kurzschreibweise:

     .elementor-element:where(:not(.e-con))…:not(:has(.elementor-widget-container))
     { transition: background .3s, border .3s, border-radius .3s, box-shadow .3s,
                   transform var(--e-transform-transition-duration,.4s) }

   Das `:not(:has(.elementor-widget-container))` zählt mit – die Regel steht bei
   (0,2,0) und schlägt `.rv` (0,1,0). Für die Fließtext-Blöcke, die als einzige
   `.rv` direkt auf der Widget-Hülle tragen, bedeutete das: `opacity` fehlt in
   der Liste, der Block sprang von 0 auf 1 statt einzublenden, und `transform`
   lief mit Elementors 0,4s statt mit unseren 0,7s. Zu sehen war ein Ruck.
   Container (`.e-con`) nimmt Elementor selbst aus, die sind nicht betroffen. */
body .elementor .elementor-element.rv{transition:opacity .7s ease,transform .7s ease}

/* Containern der obersten Ebene gibt Elementor `max-width:100%` mit höherer
   Spezifität als `.wrap`. Ein `.wrap` ganz oben in der Seite (die Zeilen der
   Einrichtungen auf „Ich brauche Hilfe") lief dadurch über die volle Breite,
   während dasselbe `.wrap` verschachtelt korrekt bei 1240px blieb. */
body .e-con.wrap{max-width:1240px}
/* Dasselbe für Widgets: der Missions-Absatz soll bei 30em umbrechen. Dagegen
   steht `.elementor.elementor .e-con > .elementor-widget{max-width:100%}` –
   vier Klassen, deshalb hier die gleiche Kette plus `body`. */
body .elementor .e-con > .elementor-widget.lead{max-width:30em}
/* Und noch einmal für den Vorspann der Startseite. `.hero-content .sub` trägt
   seit dem Übertrag `max-width:34em`, das aber nie gegriffen hat – die Zeile
   lief über die vollen 1240px, während die Headline darüber bei 831px endet.
   36em landen bei derselben Breite, der Vorspann bricht also mit der
   Überschrift. */
body .elementor .e-con > .elementor-widget.sub{max-width:36em}
/* Fließtext in einem Elementor-Baustein bekommt dasselbe Maß wie die
   Beitragsspalte (820px, rund 80 Zeichen). Ohne das läuft er über die vollen
   1176px des Rasters – bei 126 Zeichen je Zeile findet das Auge beim
   Rücksprung den Zeilenanfang nicht mehr. */
body .elementor .e-con > .elementor-widget.fliess{max-width:820px}

/* Elementor-Container sind Flexboxen – darin fallen benachbarte Außenabstände
   nicht mehr zusammen wie im Blockfluss des Entwurfs. Unter der Sektions-
   überschrift (48px) käme der eigene Abstand des Konten-Rasters (40px)
   sonst noch obendrauf. */
.shead + .elementor-element .kgrid{margin-top:0}

/* Elementor stellt jedes Widget auf `position:relative`. Die Pass-Karte hängt
   aber mit `bottom:-84px` am grünen Band – mit dem Widget als Bezugspunkt
   rutschte sie 80px zu hoch und ragte nicht mehr unten heraus. */
.passband .elementor-widget{position:static}

.doors > .elementor-element,
.doors > .elementor-element > .elementor-widget-container,
.doors > .elementor-element > .elementor-shortcode,
.egrid > .elementor-element,
.egrid > .elementor-element > .elementor-widget-container,
.egrid > .elementor-element > .elementor-shortcode,
.zahlen > .elementor-element,
.zahlen > .elementor-element > .elementor-widget-container,
.zahlen > .elementor-element > .elementor-shortcode,
.news3 > .elementor-element,
.news3 > .elementor-element > .elementor-widget-container,
.news3 > .elementor-element > .elementor-shortcode{
  display:contents;
}