/* =====================================================================
   ESTAruppin – Design v7 "Warm & ruhig"
   Durchgehend warme Farbflaechen (kein Weiss), 3 Akzentfarben:
   Gelb, Blau, Rot (nur fuer Spenden/CTA). Inhalte: content.js.
   ===================================================================== */
/* ---------------------------------------------------------------------
   Schriften LOKAL einbinden (Datenschutz: keine Verbindung zu Google).
   Die Dateien liegen in assets/fonts/. Anleitung zum Beschaffen der
   Dateien: LOKALE-DATEIEN-ANLEITUNG.md
   Fehlen die Dateien noch, greift automatisch die Rückfall-Schrift aus
   --display / --text (System-Schrift) – die Seite bleibt lesbar.
   font-display:swap = Text ist sofort sichtbar, Schrift wird nachgezogen.
   --------------------------------------------------------------------- */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('assets/fonts/BricolageGrotesque-Variable.woff') format('woff');
  font-weight:500 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Instrument Sans';
  src:url('assets/fonts/InstrumentSans-Variable.woff') format('woff');
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Instrument Sans';
  src:url('assets/fonts/InstrumentSans-Italic-Variable.woff') format('woff');
  font-weight:400 600; font-style:italic; font-display:swap;
}

:root{
  --basis:#FAF7F0; --flaeche-terra:#F7E0CD; --flaeche-salbei:#DEE9DF;
  --karte:#FFFEFB; --ink:#34342F; --muted:#5E5E57;
  --terra:#E98D66; --salbei:#76A088; --cta:#C4602F;
  --display:'Bricolage Grotesque',ui-rounded,'Segoe UI',system-ui,sans-serif;
  --body:'Instrument Sans','Segoe UI',system-ui,sans-serif;
}

/* Vietnamesisch: Die eingebundene Fließtext-Schrift „Instrument Sans" enthält
   keine vietnamesischen Zeichen (ế ệ ạ ừ …). Ohne diese Regel setzt der
   Browser einzelne Buchstaben MITTEN IM WORT aus einer Ersatzschrift –
   sichtbar als Schriftmischung („Erpresserbrief-Effekt"). Deshalb bei
   lang="vi" komplett auf die Systemschrift umschalten: einheitlich und
   vollständig. Andere Sprachen ohne passende Schrift (Griechisch,
   Bulgarisch, Arabisch …) fallen ohnehin geschlossen zurück, weil dort GAR
   kein Zeichen in der Schrift enthalten ist – nur Vietnamesisch ist der
   Mischfall.
   Gesetzt wird lang="vi" in main.js (documentElement.setAttribute). */
html[lang="vi"]{
  --display:'Segoe UI',system-ui,-apple-system,'Noto Sans',sans-serif;
  --body:'Segoe UI',system-ui,-apple-system,'Noto Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--basis);color:var(--ink);line-height:1.7;font-size:18px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--terra)}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.02}
/* v186: Lange Wörter in großer Schrift ragten auf dem Handy über den Rand („Datenschutzerklärung“,
   russische Überschriften) – die ganze Seite ließ sich dann seitlich verschieben. Silbentrennung nach
   der Seitensprache (html lang wird gesetzt), als Notbremse Umbruch im Wort. */
h1,h2,h3,h4{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
p,li,dd,td,th,label,summary,figcaption{overflow-wrap:break-word}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(22px,4vw,56px)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

.kicker{display:inline-flex;align-items:center;gap:.6em;font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.26em;color:#575755}
.kicker .piece{width:15px;height:15px}
h2{font-size:clamp(2.2rem,5vw,3.9rem)}
.lead{font-size:clamp(1.12rem,1.6vw,1.35rem);line-height:1.7;max-width:58ch;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;text-decoration:none;
  font-weight:700;padding:17px 32px;border-radius:999px;border:none;font-size:1rem;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3),background .2s}
.btn::after{content:"→";transition:transform .2s}
.btn:hover{transform:translateY(-2px)}.btn:hover::after{transform:translateX(5px)}
.btn.rot{background:var(--cta);color:#fff}
.btn.weiss{background:var(--karte);color:var(--ink)}
.btn.linie{background:transparent;color:currentColor;box-shadow:inset 0 0 0 2px currentColor}

/* ---------- Abschnitte mit weichen Uebergaengen ------------------------ */
section{padding:clamp(64px,9vw,130px) 0;position:relative}
.flaeche-terra{background:var(--flaeche-terra)}
.flaeche-salbei{background:var(--flaeche-salbei)}
.kurve{display:block;width:100%;height:70px;margin-bottom:-1px}
.kurve path{fill:currentColor}

/* ---------- Kopfzeile + helles Vollbild-Menue --------------------------- */
/* Skip-Link ("Zum Inhalt springen"): liegt außerhalb des Bildschirms und wird
   erst sichtbar, wenn er per Tabulator angesprungen wird. Bewusst NICHT mit
   display:none oder visibility:hidden versteckt – damit wäre er auch für
   Screenreader und Tastatur weg und damit nutzlos. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:900;
  background:var(--cta);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;
  font-weight:600;text-decoration:none;
}
.skip-link:focus{
  left:0; outline:3px solid var(--ink); outline-offset:2px;
}
/* Damit der Sprungpunkt nicht unter der festen Kopfzeile klebt. */
#inhalt{scroll-margin-top:90px}
/* Bereichs-Kacheln oben auf der Angebote-Seite (08.09.2026). Die Abschnitte
   darunter bekommen einen Sprung-Abstand, damit die Ueberschrift nach dem
   Klick nicht unter dem festen Seitenkopf verschwindet. */
.bereichs-uebersicht{padding-bottom:clamp(40px,6vw,72px)}
section[id]{scroll-margin-top:104px}
#inhalt:focus{outline:none}

header{position:fixed;top:0;left:0;right:0;z-index:600;padding:16px 0;transition:background .5s ease,box-shadow .5s ease;
  background:rgba(250,243,225,0)}
header.solid{background:rgba(250,243,225,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(38,34,47,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo-nackt{display:flex;align-items:center;text-decoration:none}
.logo-nackt img{height:64px;width:auto;transition:transform .2s}
.logo-nackt:hover img{transform:rotate(-3deg) scale(1.04)}
@media(max-width:560px){.logo-nackt img{height:46px}}
/* v186: Kopfzeile auf dem Handy (Christoph, Test 30.09.2026: Logo fehlte, „Menü“ rechts abgeschnitten).
   Ursache: Die drei Knöpfe haben feste Innenabstände (inline im Markup), das Logo feste Höhe –
   auf ~400 px passte die Summe nicht, das Logo wurde zu einem Strich gequetscht bzw. die Reihe lief
   über den Rand. Jetzt: Logo schrumpft MIT Seitenverhältnis, Knöpfe werden kompakter, „Menü“ zeigt
   nur das Symbol (der Name steht weiter im aria-label für Screenreader). */
@media(max-width:560px){
  .nav{gap:10px}
  .logo-nackt{flex:1 1 auto;min-width:56px}
  .logo-nackt img{height:auto;width:100%;max-width:150px}
  .kopf-rechts{flex:0 0 auto;gap:8px!important}
  header .wrap.nav{padding:0 16px}
  .kopf-rechts>.btn.klein{padding:0 12px!important;font-size:.86rem!important}
  .kopf-rechts>.btn.klein::after{display:none}
  #menue-knopf{width:44px;padding:0!important;justify-content:center;font-size:0!important;gap:0}
}
.kopf-rechts{display:flex;gap:12px;align-items:center}
/* Alle drei Kopf-Elemente exakt gleich hoch und mittig – ohne Rahmen/Trenner.
   Feste Höhe schlägt das uneinheitliche Padding der beiden .btn.klein-Regeln. */
.kopf-rechts>.btn.klein,.kopf-rechts>#menue-knopf{height:44px;padding:0 24px;font-size:.92rem;line-height:1;display:inline-flex;align-items:center}
.kopf-rechts>.btn.klein::after{line-height:1}
/* Sprach-Symbol: dezenter, halbtransparenter Salbeigrün-Hintergrund. So bildet
   es eine ruhige Reihe mit Spenden und Menü, wirkt aber leichter als ein dritter
   dunkler Block. Der zarte helle Schein hält das Icon auch auf dem Bild lesbar. */
/* Sprach-Symbol: kräftiges Salbeigrün mit weißem Icon. So ist es auf jedem
   Hintergrund gut erkennbar (auch bei durchsichtiger Leiste über dem Bild) und
   bildet mit Spenden (orange) und Menü (dunkel) eine harmonische Reihe. */
#sprach-knopf{background:var(--salbei);border:0;width:44px;height:44px;padding:0;cursor:pointer;color:#fff;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;transition:filter .2s}
#sprach-knopf svg{display:block}
#sprach-knopf:hover{filter:brightness(1.12)}
#menue-knopf{background:var(--ink);color:#fff;border:none;border-radius:999px;padding:12px 24px;
  font:600 .92rem var(--body);cursor:pointer;display:inline-flex;gap:10px;align-items:center}
#menue-knopf i{width:20px;height:2px;background:#fff;position:relative;display:inline-block;font-style:normal}
#menue-knopf i::before,#menue-knopf i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff}
#menue-knopf i::before{top:-6px}#menue-knopf i::after{top:6px}
#menue{position:fixed;inset:0;background:var(--basis);z-index:800;overflow-y:auto;
  padding:clamp(90px,14vh,150px) clamp(28px,7vw,110px) clamp(70px,10vh,110px);
  transform:translateY(-102%);transition:transform .55s cubic-bezier(.75,0,.2,1)}
#menue.offen{transform:none}
#menue .menue-liste{display:grid;gap:4px;max-width:900px}
/* v186: Spalte darf nicht breiter als der Bildschirm werden – sonst liefen lange Menüpunkte
   (z. B. Griechisch, Vietnamesisch) rechts hinaus; jetzt bricht der Eintrag um. */
#menue .menue-liste{grid-template-columns:minmax(0,1fr)}
#menue a.punkt .titel{min-width:0;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
#menue a.punkt{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,4.6vh,3.2rem);
  letter-spacing:-.02em;text-decoration:none;display:flex;align-items:baseline;gap:18px;padding:10px 0;
  width:max-content;max-width:100%;transition:transform .25s}
#menue a.punkt .nr{font-size:.85rem;font-weight:600;letter-spacing:.2em;color:var(--muted)}
#menue a.punkt:hover{transform:translateX(14px)}
#menue a.punkt:hover .titel,#menue a.punkt.aktiv .titel{background:var(--terra);border-radius:12px;padding:0 16px}
#menue .menue-fuss{margin-top:clamp(40px,7vh,70px);display:flex;justify-content:space-between;gap:20px;
  flex-wrap:wrap;color:var(--muted);font-size:.92rem;max-width:900px}
#menue-zu{position:fixed;top:22px;right:clamp(22px,4vw,56px);background:var(--ink);color:#fff;border:none;
  border-radius:999px;width:54px;height:54px;font-size:1.2rem;cursor:pointer;z-index:801;display:none}
#menue.offen ~ #menue-zu,#menue.offen #menue-zu{display:block}
#menue #menue-zu{display:block;position:absolute}

/* ---------- Hero (bildschirmfuellend; Kopfzeile verschmilzt oben) ------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--ink);padding:130px 0 70px}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.hero .slide.aktiv{opacity:1}
.hero .slide img,.hero .slide video{width:100%;height:100%;object-fit:cover;object-position:center}
.hero .slide.aktiv img{animation:ken 12s ease forwards}
@keyframes ken{to{transform:scale(1.09)}}
/* Nur ein dezenter Verlauf: oben ein Hauch dunkler (damit die durchsichtige
   Kopfzeile lesbar bleibt), unten kräftiger für die weiße Schrift. Kein
   Cremeband – so bleibt die „Weite“ des Bildes erhalten. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(38,34,47,.28) 0%,rgba(38,34,47,.06) 18%,rgba(38,34,47,.06) 55%,rgba(38,34,47,.72) 100%)}
.hero .inhalt{position:relative;z-index:2;width:100%}
.hero .kicker{color:#fff;opacity:.9;margin-bottom:18px}
.hero h1{color:#fff;font-size:clamp(3rem,9.5vw,8rem);line-height:.95}
.hero h1 .w2{color:transparent;-webkit-text-stroke:3px #fff}
.hero h1 .w3{color:var(--terra)}
.hero h1 .cursor{display:inline-block;width:.05em;background:var(--terra);margin-left:.05em;
  animation:blink 1s steps(1) infinite;height:.85em;vertical-align:-.04em;border-radius:3px}
@keyframes blink{50%{opacity:0}}
.hero p.unter{color:#fff;font-size:clamp(1.05rem,1.8vw,1.35rem);margin-top:20px;max-width:48ch;opacity:.95}
.hero .aktionen{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero .fortschritt{position:absolute;right:clamp(22px,4vw,56px);bottom:70px;display:flex;flex-direction:column;gap:8px;z-index:3}
.hero .fortschritt span{width:4px;height:30px;border-radius:99px;background:rgba(255,255,255,.35);cursor:pointer}
.hero .fortschritt span.aktiv{background:#fff}
.hero-hinweis{font-size:.78rem;color:var(--muted);text-align:center;padding:12px 20px}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.reveal.sichtbar{opacity:1;transform:none}
.typeziel{min-height:1em}

/* ---------- Aktuelles ----------------------------------------------------- */
.news-gross{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(18px,2.6vw,30px)}
@media(max-width:900px){.news-gross{grid-template-columns:1fr}}
.news-neben{display:grid;gap:clamp(18px,2.6vw,30px)}
/* v181: Die Seitenkacheln strecken sich nicht mehr auf die Höhe der großen Kachel.
   Das Bild bestimmt die Höhe (Plakate im Hochformat blieben sonst mit großen
   Freiflächen oben und unten stehen), der Text sitzt mittig daneben. */
.news-gross{align-items:start}
.news-neben .karte.quer .bildbox img{position:relative!important;height:auto;max-height:440px;display:block}
.news-neben .karte.quer .text{align-self:center}
@media(max-width:760px){.news-neben .karte.quer .bildbox img{position:absolute!important;height:100%}}

/* ---------- Erzaehl-Layout ------------------------------------------------ */
.erzaehlung{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,6vw,100px);align-items:start}
@media(max-width:900px){.erzaehlung{grid-template-columns:1fr}}
.erzaehlung .links{position:sticky;top:120px}
/* v186: auf schmalen Bildschirmen (eine Spalte) nicht sticky – sonst schob sich die Spalte beim Scrollen über den Text (Christoph, Handy-Test 30.09.2026). */
@media(max-width:900px){.erzaehlung .links{position:static}}
.erzaehlung .rechts>*+*{margin-top:34px}
.textblock h3{font-size:1.5rem;margin-bottom:12px}
.textblock p{max-width:64ch}
.zahlenreihe{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,56px);margin-top:44px}
.zahl b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(3rem,6vw,5.2rem);line-height:1}
.zahl span{font-size:.92rem;color:var(--muted)}

/* ---------- Karten & Cluster ---------------------------------------------- */
.karte{background:var(--karte);border-radius:26px;overflow:hidden;text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;position:relative;
  transition:transform .35s cubic-bezier(.2,.7,.3,1.15),box-shadow .35s}
.karte:hover{transform:translateY(-9px);box-shadow:0 30px 55px -30px rgba(38,34,47,.4)}
.karte.karte-sanft{background:#FBF8F2}
.karte .bildbox{overflow:hidden;aspect-ratio:16/10;position:relative;background:var(--flaeche-terra)}
.karte .bildbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.karte:hover .bildbox img{transform:scale(1.08)}
.farbfeld{position:absolute;inset:0}
.bild-grund{position:absolute;inset:0;background:#F1EADD}
img.bild-ganz{object-fit:contain!important;background:#fff;padding:18px}
.farbfeld i{position:absolute;left:18px;bottom:14px;font-style:normal;color:#fff;opacity:.6;font-size:.78rem}
.karte .text{padding:26px}
.karte .text p{color:var(--muted);font-size:.97rem;margin-top:10px}
.karte .tag{font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.karte .mehr{display:inline-flex;gap:6px;margin-top:16px;font-weight:600;font-size:.92rem}
.karte .mehr b{transition:transform .2s}
.karte:hover .mehr b{transform:translateX(5px)}
.badge{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;font-size:.82rem;font-weight:600;margin-top:14px}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.badge.frei{background:#E0EBE2;color:#3E6B51}
.badge.belegt{background:#F8DFD1;color:#A34E27}
.raster{display:grid;gap:clamp(16px,2.4vw,28px)}
.raster.drei{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.breit{grid-column:span 2}
@media(max-width:760px){.breit{grid-column:span 1}}
.karte.quer{flex-direction:row}
.karte.quer .bildbox{flex:0 0 46%;aspect-ratio:auto}
@media(max-width:760px){.karte.quer{flex-direction:column}.karte.quer .bildbox{aspect-ratio:16/10}}
.cluster-kachel .bildbox{aspect-ratio:4/3;border-radius:26px 26px 120px 26px}
.cluster-kachel .nr{position:absolute;top:16px;left:18px;z-index:2;background:var(--karte);border-radius:999px;
  padding:5px 14px;font:600 .8rem var(--body);letter-spacing:.12em}
.kapitel-kopf{display:flex;align-items:flex-start;gap:clamp(16px,3vw,40px);margin-bottom:clamp(26px,4vw,50px)}
.kapitel-kopf .nr{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,7vw,6rem);line-height:.9;
  color:transparent;-webkit-text-stroke:2.5px var(--ink);opacity:.35;flex:none}

/* ---------- Karte OPR (hell) ----------------------------------------------- */
.filterchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.filterchips button{border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;
  padding:9px 18px;font:600 .88rem var(--body);cursor:pointer;transition:.2s}
.filterchips button.aktiv,.filterchips button:hover{background:var(--terra);border-color:var(--terra)}
.kartenlayout{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);margin-top:34px;align-items:start}
@media(max-width:900px){.kartenlayout{grid-template-columns:1fr}}








#karteninfo{background:var(--karte);border-radius:26px;padding:clamp(24px,3vw,38px);min-height:240px;position:sticky;top:110px}
#karteninfo h3{margin:8px 0 10px;font-size:1.5rem}
#karteninfo p{color:var(--muted)}
#karteninfo .btn{margin-top:18px}
.ki-aktionen{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ki-aktionen .btn{margin-top:18px}
.ki-route{background:#EDE6D6;color:var(--ink)}
.ki-route:hover{background:#E3D9C4}
.klein{font-size:.82rem;color:var(--muted);margin-top:10px}

/* ---------- OpenStreetMap-Einbettung (Anfahrt) ---------- */
.gmap{border-radius:26px;overflow:hidden;background:var(--karte);border:1px solid rgba(52,52,47,.08)}












.gmap-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  padding:16px 22px;font-size:.9rem;color:var(--muted)}
.gmap-links .gmap-ort b{color:var(--ink);font-weight:600}
.gmap-route{margin-left:auto;font-weight:600;white-space:nowrap}
@media(max-width:560px){.gmap-route{margin-left:0}}

/* ---------- Standort-Karte (Leaflet / OpenStreetMap) ---------- */
.lkarte{width:100%;height:clamp(360px,52vh,560px);border-radius:26px;overflow:hidden;
  background:var(--flaeche-salbei);border:1px solid rgba(52,52,47,.08);z-index:0}
.lkarte-fehler{display:flex;align-items:center;justify-content:center;height:100%;
  padding:30px;text-align:center;color:var(--muted);font-size:.95rem}
.kartenhilfe{margin-top:12px}
/* Marker: runder Punkt, einheitlich salbeigrün wie auf der früheren Karte.
   Aktiv/Hover wird orange, abgeschlossene Projekte grau. */
.lpin{display:block;width:18px;height:18px;border-radius:50%;
  background:var(--salbei);border:2.5px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .15s,background .2s,opacity .2s;cursor:pointer}
.lpin:hover{transform:scale(1.2);background:var(--cta)}
.lpin.aktiv{transform:scale(1.5);background:var(--cta);box-shadow:0 2px 7px rgba(0,0,0,.5);z-index:5}
.lpin.gedimmt{opacity:.28}
.lpin-archiv{background:#B7B1A4}
.lpin-archiv.aktiv{background:var(--cta)}
/* Leaflet-Popups & Bedienelemente an die Seiten-Typografie angleichen */
.leaflet-container{font-family:var(--body,inherit)}
.leaflet-popup-content{font-size:.92rem;line-height:1.4}
.leaflet-control-zoom a{color:var(--ink)!important}

/* ---------- Foerderer / Team / Jobs / Social -------------------------------- */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee .spur{display:flex;gap:16px;width:max-content;animation:laufen 90s linear infinite}
.marquee:hover .spur{animation-play-state:paused}
@keyframes laufen{to{transform:translateX(-50%)}}
.foerderer-kachel{background:var(--karte);border-radius:18px;min-height:104px;min-width:250px;display:flex;
  align-items:center;justify-content:center;gap:12px;padding:20px 26px;font-weight:600;color:#4d4763;
  font-size:.95rem;text-align:center}
.foerderer-kachel img{max-height:60px;width:auto}
.foerderer-kachel .mono{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:800;font-size:1.15rem;flex:none;
  background:var(--flaeche-salbei)}
.foerderer-kachel.edel{flex-direction:column;min-width:0}

.team-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(20px,3vw,40px);margin-top:44px}
.team-person .portrait{border-radius:22px;overflow:hidden;aspect-ratio:3/4;background:var(--flaeche-salbei)}
.team-person .portrait img{width:100%;height:100%;object-fit:cover}
.team-person .portrait .initialen{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:3rem;color:var(--ink);opacity:.6}
.team-person h3{font-size:1.2rem;margin-top:16px}
.team-person .rolle{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.team-person p{font-size:.95rem;color:var(--muted);margin-top:8px}

.jobzeile{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:26px 4px;
  border-bottom:2px solid rgba(38,34,47,.15);text-decoration:none;transition:padding .25s,background .25s}
.jobzeile:first-of-type{border-top:2px solid rgba(38,34,47,.15)}
.jobzeile h3{font-size:clamp(1.2rem,2.4vw,1.7rem)}
.jobzeile .meta{color:var(--muted);font-size:.92rem;margin-top:4px}
.jobzeile .pfeil{font-size:1.6rem;transition:transform .25s;flex:none}
.jobzeile:hover{padding-left:16px;background:rgba(255,253,246,.7)}
.jobzeile:hover .pfeil{transform:translateX(8px)}

/* Stellenausschreibungen als Aufklapper (ab v136).
   Die Kopfzeile bleibt optisch die alte .jobzeile; die Linien wandern auf das
   umgebende <details>, damit zwischen Kopf und aufgeklapptem Text keine
   doppelte Linie steht. */
details.job{border-bottom:2px solid rgba(38,34,47,.15)}
details.job:first-of-type{border-top:2px solid rgba(38,34,47,.15)}
details.job > summary.jobzeile{border-top:0;border-bottom:0;cursor:pointer;list-style:none}
details.job > summary.jobzeile::-webkit-details-marker{display:none}
details.job > summary.jobzeile::marker{content:""}
details.job > summary.jobzeile .pfeil{transform:rotate(90deg)}
details.job[open] > summary.jobzeile .pfeil{transform:rotate(-90deg)}
details.job[open] > summary.jobzeile{background:rgba(255,253,246,.7)}
details.job .jobtext{padding:2px 4px 34px;max-width:820px}
details.job .jobtext p{margin-top:14px}
details.job .jobtext h4{margin-top:26px;font-size:1.05rem}
details.job .jobtext ul{margin-top:10px;padding-inline-start:22px;display:grid;gap:7px}
details.job .jobtext .kurzfassung{font-weight:600;margin-top:0}
details.job .jobtext .nurdeutsch{font-size:.88rem;color:var(--muted);
  border-inline-start:3px solid var(--salbei);padding-inline-start:12px}

.sw-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(14px,2vw,24px)}
.sw-post{border-radius:22px;overflow:hidden;position:relative;aspect-ratio:1/1;text-decoration:none;
  color:#fff;display:flex;align-items:flex-end;background:var(--flaeche-salbei);
  transition:transform .3s}
.sw-post:hover{transform:translateY(-6px)}
.sw-post.reveal{transition:opacity .35s ease,transform .35s ease}
.sw-post img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s}
.sw-post:hover img{transform:scale(1.06)}
.sw-post .schleier{position:absolute;inset:0;background:linear-gradient(190deg,transparent 45%,rgba(38,34,47,.75))}
.sw-post .sw-text{position:relative;z-index:2;padding:18px;font-size:.92rem;font-weight:500}
/* v182: Kanalübersicht – Titel, Kontoname und Art der Karte; Filterknöpfe. */
.sw-post .sw-text b{display:block;font-weight:700;line-height:1.25}
.sw-post .sw-konto{display:block;font-size:.8rem;opacity:.85;margin-top:4px;word-break:break-all}
.sw-post .sw-art{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.18);font-size:.74rem;font-weight:600;letter-spacing:.04em}
.sw-post[hidden]{display:none}
.sw-filter .btn{font:inherit;font-weight:600;cursor:pointer;gap:8px}
.sw-filter .btn::after{content:none} /* Filter, kein Link – darum kein Pfeil */
.sw-filter .btn small{font-size:.75em;opacity:.7;margin-left:2px}
.sw-filter .btn.aktiv{background:var(--ink);color:#fff;border-color:var(--ink)}
.sw-post .sw-chip{position:absolute;top:14px;left:14px;z-index:2;background:var(--karte);color:var(--ink);
  border-radius:999px;padding:5px 13px;font-size:.76rem;font-weight:600}
.folgen{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

form.kontakt{background:var(--karte);border-radius:30px;padding:clamp(28px,4vw,50px);display:grid;gap:20px;max-width:780px}
form.kontakt label{font-weight:600;font-size:.9rem;display:grid;gap:8px}
form.kontakt input,form.kontakt select,form.kontakt textarea{font:inherit;padding:15px 17px;
  border:2px solid #E4E0D6;border-radius:14px;background:var(--basis);width:100%;transition:.2s}
form.kontakt input:focus,form.kontakt select:focus,form.kontakt textarea:focus{
  outline:none;border-color:var(--salbei);box-shadow:0 0 0 4px rgba(47,167,223,.16)}
form.kontakt .hinweis{font-size:.85rem;color:var(--muted)}
.check{display:flex;gap:11px;align-items:flex-start;font-weight:400!important;font-size:.9rem!important}
form.kontakt label.check,label.check{display:flex;flex-direction:row;align-items:flex-start;gap:11px}
form.kontakt label.check input,label.check input{width:16px!important;height:16px;flex:none;margin-top:4px;
  padding:0!important;accent-color:var(--salbei);transform:scale(1.25);transform-origin:left top}
.check input{width:auto!important;margin-top:4px}

/* ---------- Ladesequenz & Overlay -------------------------------------------- */
#loader{position:fixed;inset:0;background:var(--basis);z-index:1000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:34px;transition:opacity .5s,transform .6s}
#loader.done{opacity:0;transform:scale(1.03);pointer-events:none}
.puzzle-grid{display:grid;grid-template-columns:repeat(3,46px);gap:0;transform:rotate(-6deg);
  border-radius:18px;overflow:hidden;box-shadow:0 14px 34px rgba(52,52,47,.16)}
.puzzle-grid svg{width:66px;height:66px;margin:-10px;opacity:0;transform:scale(.2) rotate(30deg);
  animation:pop .45s cubic-bezier(.2,1.5,.4,1) forwards;overflow:visible}
.puzzle-grid path{stroke:var(--basis);stroke-width:1.5;stroke-linejoin:round}
@keyframes pop{to{opacity:1;transform:scale(1) rotate(0)}}
#loader img{width:min(290px,58vw);opacity:0}
#loader.logo img{animation:logoIn .5s ease forwards}
#loader.logo .puzzle-grid{display:none}
@keyframes logoIn{to{opacity:1}}
#loader .balken{width:min(290px,58vw);height:3px;background:#E4E0D6;border-radius:99px;overflow:hidden}
#loader .balken i{display:block;height:100%;width:0;background:var(--ink);animation:lade 1.9s ease forwards}
@keyframes lade{to{width:100%}}

#modal{position:fixed;inset:0;background:rgba(38,34,47,.5);backdrop-filter:blur(8px);z-index:900;
  display:flex;align-items:center;justify-content:center;padding:22px;opacity:0;transition:opacity .25s}
#modal.offen{opacity:1}
.modal-kasten{background:var(--karte);border-radius:30px;max-width:980px;width:100%;max-height:88vh;
  overflow:auto;display:grid;grid-template-columns:40% 60%;position:relative;
  transform:translateY(18px) scale(.98);transition:transform .25s}
/* Variante 1: einspaltig, Textkopf oben, Foto als Band */
.modal-kasten.modal-v2{display:block;max-width:760px}
.modal-v2 .modal-text{padding:clamp(26px,4vw,44px)}
.modal-v2 .modal-kopf .tag{font-size:.82rem}
.modal-v2 .modal-teaser{font-size:1.12rem;color:var(--ink);line-height:1.5;margin-top:6px}
.modal-v2 .modal-text>p{margin:0 0 16px;line-height:1.7}
.modal-v2 .modal-text>p:last-of-type{margin-bottom:0}
.modal-band{margin:22px 0 22px;border-radius:18px;overflow:hidden;background:var(--flaeche-terra);
  aspect-ratio:3/2;position:relative}
.modal-band img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.modal-trenner{height:4px;border-radius:4px;background:var(--akzent);opacity:.5;margin:22px 0 6px;width:70px}
#modal.offen .modal-kasten{transform:none}
.modal-bild{position:relative;min-height:340px}
.modal-bild .farbfeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.modal-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;padding:14px}
.modal-text{padding:clamp(26px,4vw,48px)}
.modal-text h3{font-size:2rem;margin:8px 0 14px}
.modal-text h4{font-size:1.05rem;margin:24px 0 10px}
.modal-liste{list-style:none;display:grid;gap:9px}
.modal-liste li{padding-left:26px;position:relative;font-size:.97rem;color:#4d4763}
.modal-liste li::before{content:"";position:absolute;left:0;top:.44em;width:13px;height:13px;border-radius:5px;background:var(--terra)}
.modal-liste.blau li::before{background:var(--salbei)}
.zielgruppe{margin-top:18px;font-size:.92rem;background:var(--flaeche-terra);border-radius:12px;padding:10px 14px;display:inline-block}
.personen{display:grid;gap:12px;margin-top:6px}
.person{display:flex;gap:14px;align-items:center;background:var(--basis);border-radius:16px;padding:12px 16px}
.person .pf{width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--flaeche-salbei);flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800}
.person .pf img{width:100%;height:100%;object-fit:cover}
.person b{display:block;font-size:.97rem}
.person span{font-size:.85rem;color:var(--muted);display:block}
.modal-aktionen{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
/* Marie-Luise Langenberg, 30.08.2026: Der Schliessen-Knopf war absolut oben rechts
   im Kasten verankert und scrollte beim Lesen aus dem Bild. Seit v139 klebt er
   (position:sticky) oben rechts und bleibt dadurch immer sichtbar. */
.modal-zu{position:sticky;top:16px;float:right;margin:16px 16px -60px 0;z-index:3;
  background:var(--karte);border:none;border-radius:50%;
  width:44px;height:44px;font-size:1.05rem;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.22)}
@media(max-width:760px){.modal-kasten{grid-template-columns:1fr}.modal-bild{min-height:210px}}

/* ---------- Fusszeile (hell) --------------------------------------------------- */
footer{background:var(--flaeche-salbei);color:var(--ink);padding:90px 0 36px}
footer .slogan-gross{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(2.2rem,6.5vw,5.4rem);line-height:.98;margin-bottom:56px}
footer .slogan-gross em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--ink)}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--cta)}
footer .spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:38px}
footer h3{margin-bottom:14px;font-size:.8rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;color:var(--muted)}
footer ul{list-style:none;display:grid;gap:9px;font-size:.95rem}
footer .unten{border-top:2px solid rgba(38,34,47,.15);margin-top:56px;padding-top:24px;
  font-size:.83rem;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;color:var(--muted)}

.seitenkopf{padding:clamp(150px,20vh,210px) 0 30px}
.seitenkopf h1{font-size:clamp(2.6rem,7vw,5.6rem)}
.seitenkopf .lead{margin-top:22px}
.kopfzeile-abschnitt{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px;justify-content:space-between}

:focus-visible{outline:3px solid var(--salbei);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* Kompatibilitaet aelterer Seitenbausteine in der neuen Palette */
.panel{border-radius:36px;padding:clamp(28px,5vw,64px)}
.panelchen{padding:clamp(22px,3vw,34px)}
.panelchen h3{margin-bottom:10px}
.ton-gelb,.ton-lila{background:var(--flaeche-terra)}
.ton-terra{background:var(--flaeche-terra)}
.ton-blau,.ton-gruen,.ton-ink{background:var(--flaeche-salbei)}
.ton-ink h2,.ton-ink h3,.ton-lila{color:var(--ink)}
.statzeile{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.stat{background:var(--karte);border-radius:20px;padding:16px 24px}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1}
.stat span{font-size:.85rem;color:var(--muted)}
.datum{font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
#qr-spenden,#qr-newsletter{display:inline-block;background:var(--karte);padding:8px;border-radius:14px;flex:none}

/* ---------- v10: Feinschliff ------------------------------------------ */

.bildbox.ganz{aspect-ratio:auto;background:var(--flaeche-salbei)}
.bildbox.ganz img{position:static;width:100%;height:auto;max-height:460px;object-fit:contain}
.karte .bildbox-aktuell{aspect-ratio:4/3;background:var(--flaeche-salbei)}
.karte .bildbox-aktuell img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.karte:hover .bildbox-aktuell img{transform:none}
details.lang{margin-top:20px;border-top:2px solid #EDE8DC;padding-top:14px}
details.lang summary{cursor:pointer;font-weight:600;color:var(--salbei);list-style:none;display:flex;gap:10px;align-items:center}
details.lang summary::before{content:"+";font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1}
details.lang[open] summary::before{content:"–"}
details.lang p{margin-top:12px;font-size:.97rem;color:#4d4763}
details.lang a{color:var(--salbei);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.archiv-liste{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px}
.archiv-liste li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:10px 2px;border-bottom:1px solid #EDE8DC}
.archiv-liste li:last-child{border-bottom:none}
.archiv-liste .datum{flex:none;min-width:130px}
.archiv-liste .archiv-titel{flex:1;min-width:200px;font-weight:600;color:var(--ink)}
.archiv-liste a{flex:none;color:var(--salbei);font-weight:600;font-size:.9rem;white-space:nowrap}
details.lizenz-details summary{cursor:pointer;font-size:.9rem;font-weight:600;color:var(--salbei);list-style:none;display:flex;gap:10px;align-items:center}
details.lizenz-details summary::-webkit-details-marker{display:none}
details.lizenz-details summary::before{content:"+";font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1}
details.lizenz-details[open] summary::before{content:"–"}
.lizenz-text{margin-top:12px;max-height:340px;overflow:auto;background:#F7F4EC;border:1px solid #EDE8DC;border-radius:10px;padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;line-height:1.5;color:#4d4763;white-space:pre-wrap;word-break:break-word}
.wirkungsraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:20px}
.wirkungsraster.klein-r{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.wirkung{background:var(--karte);border-radius:18px;padding:18px 20px}
.flaeche-terra .wirkung,.flaeche-salbei .wirkung{background:var(--karte)}
.wirkung b{display:block;font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1;letter-spacing:-.02em}
.wirkung span{font-size:.86rem;color:var(--muted);display:block;margin-top:6px}





.kapitel-kopf{display:block}

/* ---------- v11 ---------------------------------------------------------- */
/* Hintergrundbild-Auswahl waagerecht */
.hero .fortschritt{flex-direction:row;right:auto;left:50%;transform:translateX(-50%);bottom:26px}
.hero .fortschritt span{width:32px;height:4px}
/* Teamfotos: einheitliche Groesse, keine gestreckten Einzelkarten */
.team-reihe{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.team-person{max-width:250px}
/* Portraittexte in Overlays */
details.p-mehr{margin-top:6px}
details.p-mehr summary{cursor:pointer;font-size:.85rem;font-weight:600;color:var(--salbei);list-style:none}
details.p-mehr summary::before{content:"+ "}
details.p-mehr[open] summary::before{content:"– "}
details.p-mehr p{font-size:.9rem;color:#4d4763;margin-top:6px}
/* Mitgliedsstufen */
label.stufe{cursor:pointer;display:block;position:relative;border:3px solid transparent;transition:border-color .2s}
label.stufe input{position:absolute;opacity:0}
label.stufe:has(input:checked){border-color:var(--salbei)}
label.stufe b{font-family:var(--display);font-size:1.3rem;display:block}
label.stufe .beitrag{display:inline-block;font-weight:700;color:#3E6B52;background:#DEE9DF;padding:5px 14px;border-radius:999px;margin:6px 0 10px}
label.stufe p{color:var(--muted);font-size:.92rem}

/* ---------- v12 ---------------------------------------------------------- */
/* Portraits der Schulsozialarbeit, gegliedert nach Einsatzgebiet */
h5.gebiet{margin:20px 0 10px;font-size:.85rem;font-weight:700;color:#575755;
  text-transform:uppercase;letter-spacing:.14em}
.personen-gross{display:grid;gap:14px}
.person-gross{display:flex;gap:16px;background:var(--karte);border-radius:16px;padding:14px;
  box-shadow:0 2px 10px rgba(52,52,47,.06)}
.person-gross .portraet{width:104px;aspect-ratio:3/4;flex:none;border-radius:12px;overflow:hidden;
  background:var(--flaeche-salbei);display:flex;align-items:center;justify-content:center}
.person-gross .portraet img{width:100%;height:100%;object-fit:cover}
.person-gross .initialen{font-family:var(--display);font-size:1.6rem;color:var(--salbei)}
.person-gross b{display:block;font-size:1.05rem}
.person-gross .rolle{display:block;font-size:.88rem;color:var(--muted);margin-top:2px}
.person-gross .kontaktzeile{display:block;font-size:.88rem;margin-top:6px}
.person-gross:has(.p-mehr[open]){flex-direction:column}
.person-gross:has(.p-mehr[open]) .portraet{display:none}
.person-gross>div{min-width:0}
/* Kartenstatus */

/* Wirkungskacheln als Links mit Mehr-erfahren */
a.wirkung{text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
a.wirkung:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(52,52,47,.12)}
.wirkung i{display:block;margin-top:8px;font-style:normal;font-size:.78rem;font-weight:600;color:var(--salbei)}
/* kleines (ca.) in grossen Zahlen */
.zahl b small{font-size:.32em;font-weight:500;color:var(--muted);letter-spacing:.02em;margin-right:.25em;vertical-align:.6em}
/* kleine Buttons + Mehrsprachen-Hinweis */
.btn.klein{padding:8px 14px;font-size:.85rem}
.mehrsprachig{margin-top:12px;font-size:.95rem}
.mehrsprachig a{font-weight:700}

details.p-mehr p+p{margin-top:8px}

/* ---------- v14 ---------------------------------------------------------- */
/* Eindrucksfotos & Aufzählungen in den Porträts */
.p-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:12px}
.p-galerie figure{margin:0}
.p-galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.p-galerie:has(figure:only-child){grid-template-columns:minmax(0,420px)}
.p-galerie figure:only-child img{aspect-ratio:auto;max-height:340px}
.p-galerie figcaption{font-size:.75rem;color:var(--muted);margin-top:4px;line-height:1.35}
.projekt-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:16px 0}
.projekt-galerie figure{margin:0}
.projekt-galerie img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#F7F4EC;border-radius:12px;display:block}
.projekt-galerie img.gal-cover{object-fit:cover;aspect-ratio:4/3;background:none}
/* Galerie mit nur einem Bild: nicht über die halbe Breite strecken */
.projekt-galerie:has(figure:only-child){grid-template-columns:minmax(0,420px)}
.projekt-galerie figure:only-child img{aspect-ratio:auto;max-height:340px;object-fit:cover}
.projekt-galerie .gal-dokument-fig{grid-column:1/-1;max-width:520px;margin:0 auto}
.projekt-galerie img.gal-dokument{aspect-ratio:auto;object-fit:contain;background:none;border:1px solid #E4DED0}
.projekt-galerie figcaption{font-size:.78rem;color:var(--muted);margin-top:5px;line-height:1.4}
.app-qr{margin:22px 0 6px}
.app-qr-reihe{display:flex;flex-wrap:wrap;gap:18px;margin-top:10px}
.app-qr-karte{margin:0;background:#F1EADD;border-radius:16px;padding:16px;text-align:center;min-width:150px}
.app-qr-karte .qr-ziel{display:inline-block;background:#FFFEFB;padding:8px;border-radius:10px;line-height:0}
.app-qr-karte .qr-ziel img,.app-qr-karte .qr-ziel canvas{display:block;width:110px;height:110px}
.qr-bild{display:block;border-radius:8px}
.app-qr-karte figcaption{margin-top:10px;font-size:.85rem;color:var(--ink);display:flex;flex-direction:column;gap:8px;align-items:center}
ul.p-liste{margin:6px 0 4px 2px;padding-left:20px}
ul.p-liste li{font-size:.9rem;color:#4d4763;margin-top:3px}
.p-links{font-size:.85rem;margin-top:10px}
details.p-mehr p{margin-top:8px}
/* Versionsnummer im Fuss */
.version{opacity:.65;font-size:.85em}

/* Gewässer-Beschriftung */


/* Einzelfallhelfer-Würdigung */
.karte.kollektiv{display:grid;grid-template-columns:auto 1fr;gap:12px 36px;align-items:center;padding:34px 40px}
.kollektiv-zahl{font-family:var(--display);font-size:3.8rem;line-height:1;color:var(--salbei);
  display:grid;justify-items:center;gap:6px}
.kollektiv-zahl small{font-family:var(--text);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.karte.kollektiv p{margin:0}
@media (max-width:640px){.karte.kollektiv{grid-template-columns:1fr;justify-items:start}}

.check span{flex:1;min-width:0}

/* Förderer im luftigen KommMit-Stil: ohne farbige Fläche, ohne Kachelhintergrund */
.foerderer-luftig .foerderer-kachel{background:transparent;box-shadow:none;border:none;padding:0;
  display:flex;align-items:center;justify-content:center;text-align:center;height:150px;min-height:150px}
.foerderer-luftig .foerderer-kachel img{width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;object-position:center;padding:24px;box-sizing:border-box}
.foerderer-luftig .foerderer-kachel span{font-weight:600;color:#5E5E57;line-height:1.4;padding:16px}
/* Klicks gehen immer an die Standort-Punkte, nie an Wasser oder Grenzen */
#ebene-wasser *,#ebene-grenzen *{pointer-events:none}

/* Standort-Fenster */
.ki-bereich{display:inline-block;font-weight:700;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--salbei);background:var(--flaeche-salbei);
  padding:5px 12px;border-radius:999px}
.ki-name{margin:12px 0 0;font-size:1.55rem;line-height:1.08;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:8px}
.ki-badge{font-family:var(--body);font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:#8a8a80;background:#EEEAE0;padding:3px 9px;border-radius:999px;
  vertical-align:middle}
.ki-standortbox{margin-top:16px;background:var(--flaeche-terra);border-radius:16px;
  padding:14px 16px}
.ki-standort-label{display:block;font-weight:700;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--cta);margin-bottom:8px}
.ki-standort-liste{list-style:none;display:flex;flex-direction:column;gap:10px}
.ki-standort-liste li{display:flex;align-items:flex-start;gap:9px;line-height:1.3;color:var(--muted)}
.ki-standort-liste li.aktiv{color:var(--ink)}
.ki-pin{flex:0 0 auto;width:11px;height:11px;margin-top:5px;border-radius:50%;
  background:#C9BBA8;border:2px solid #fff;box-shadow:0 0 0 1px #C9BBA8}
.ki-standort-liste li.aktiv .ki-pin{background:var(--cta);box-shadow:0 0 0 1px var(--cta)}
.ki-ort-text{flex:1;display:flex;flex-direction:column}
.ki-ort-name{font-size:1rem;font-weight:600;color:var(--ink)}
.ki-standort-liste li:not(.aktiv) .ki-ort-name{font-weight:600;color:var(--muted)}
.ki-standort-liste li.aktiv .ki-ort-name{color:var(--cta)}
.ki-zusatz{font-size:.82rem;color:var(--muted);font-weight:400;margin-top:1px}
.ki-teaser{margin-top:14px;color:var(--muted)}
.ki-kontakt{margin-top:14px;font-size:.9rem;border-top:1px solid #EAE6DA;padding-top:12px}
.ki-kontakt p+p{margin-top:8px}

/* v25: Sprachen-Panel */
#sprach-panel{position:absolute;right:16px;top:calc(100% + 6px);background:#fff;border:1px solid #E4DED0;border-radius:12px;box-shadow:0 10px 30px rgba(58,58,52,.16);padding:14px 16px;max-width:320px;font-size:.85rem;line-height:1.45;z-index:60}
#sprach-panel b{color:#3E3E38}
#sprach-panel p{margin:.4em 0 0}
#sprach-panel a{color:#5E8570;font-weight:600}
header .wrap.nav{position:relative}

/* v25: Leitbild-Kasten */
.leitbild{position:relative;margin:26px 0 4px;max-width:760px;padding:6px 0 6px 30px}
.leitbild::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--salbei),var(--terra))}
.leitbild-marke{display:inline-block;font-family:var(--display);font-weight:800;letter-spacing:.02em;
  font-size:.82rem;text-transform:uppercase;color:var(--salbei-d);margin-bottom:10px}
.leitbild p{margin:.5em 0;font-size:1.02rem;line-height:1.68;color:#413F39;max-width:60ch}
.leitbild p.gross{font-family:var(--display);font-size:clamp(1.18rem,1.9vw,1.5rem);line-height:1.5;
  font-weight:600;color:#2F2E29;margin-bottom:.35em}

/* v26: Sprach-Auswahlmenü */
.sp-titel{display:block;font-family:var(--display);font-size:.92rem;color:#3E3E38;margin-bottom:10px}
.sp-liste{display:flex;flex-direction:column;gap:2px;
  max-height:min(56vh,480px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;padding-right:4px}
.sp-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:9px;
  background:none;cursor:pointer;font-size:.9rem;color:#3E3E38;text-align:left;transition:background .15s}
.sp-opt:hover:not([disabled]){background:rgba(118,160,136,.14)}
.sp-opt.aktiv{background:rgba(118,160,136,.18);font-weight:600}
.sp-opt[disabled]{opacity:.5;cursor:default}
.sp-flag{font-size:1.1rem;width:1.4em;text-align:center;flex:none}
.sp-label{flex:1}
.sp-check{color:var(--salbei-d);font-weight:700}
.sp-bald{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:#9B978B;
  background:#EDE9DD;padding:2px 7px;border-radius:20px}
.sp-hinweis{margin-top:12px;padding-top:10px;border-top:1px solid #EDE9DD;font-size:.8rem;color:#6B6B65}
.sp-hinweis a{color:var(--salbei-d);font-weight:600}

/* v26: Rechts-nach-links für Arabisch/Farsi */
[dir="rtl"] body{direction:rtl}
[dir="rtl"] .kopf-rechts{flex-direction:row-reverse}
[dir="rtl"] .lead,[dir="rtl"] .leitbild p,[dir="rtl"] p{text-align:right}
[dir="rtl"] #sprach-panel{right:auto;left:16px}
[dir="rtl"] .sp-opt{text-align:right;flex-direction:row-reverse}
[dir="rtl"] .leitbild{padding:6px 30px 6px 0}
[dir="rtl"] .leitbild::before{left:auto;right:0}

/* Abgeschlossene Projekte (Archiv) – dezent grün abgesetzt */
.wirkung-archiv{box-shadow:inset 0 0 0 1.5px var(--salbei)}
.archiv-bereich .kapitel-kopf h2{color:var(--salbei)}
.archiv-bereich .karte.projekt{opacity:.92}

/* Projekt- und Förderlogos im Modal ------------------------------------- */
/* Projektlogo: oben, direkt unter dem Titel */
.projektlogo{margin:4px 0 14px}
.projektlogo img{max-height:64px;max-width:260px;width:auto;height:auto;display:block}
/* Förderlogos: unten, laut BMI-Vorgabe auf weißem Hintergrund, mit Schutzzone (Padding),
   nicht verzerrt, nicht umgefärbt. */
.foerderlogos{margin:22px 0 6px;padding:18px 20px;background:#fff;border:1px solid #E4DED0;border-radius:14px}
.foerderlogos .fl-titel{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.foerderlogos .fl-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:28px}
.foerderlogos .fl-reihe img{height:auto;width:auto;max-height:96px;max-width:240px;display:block}
/* erzwungener Zeilenwechsel in der Logoleiste (content.js: umbruchDanach) – Thalia 28.09.2026: Land und Landkreis oben, Kommunen darunter */
.foerderlogos .fl-umbruch{flex-basis:100%;height:0}
.modal-liste .standort-zeit{color:var(--muted);font-size:.92em}
.foerderlogos .fl-text{font-size:.92rem;line-height:1.5;margin:0 0 10px;color:var(--tinte,#333)}
.foerderlogos .fl-reihe img.fl-gross{max-height:150px;max-width:380px}
/* v183: Förderleiste in einer Aktuelles-Karte – kompakter als im Projektfenster. */
.karte .fl-meldung{margin:16px 0 0;padding:12px 14px}
.karte .fl-meldung .fl-text{font-size:.8rem}
.karte .fl-meldung .fl-reihe{gap:16px}
.karte .fl-meldung .fl-reihe img{max-height:56px;max-width:150px}
.karte .fl-meldung .fl-reihe img.fl-gross{max-height:80px;max-width:220px}
/* Programm-Logoleisten (mehrere Logos in einer vorgeschriebenen Reihe, z. B. Kultur macht Stark): eigene Zeile, breit – content.js: leiste:true */
.foerderlogos .fl-reihe img.fl-leiste{flex-basis:100%;width:min(100%,640px);max-width:100%;max-height:none}
/* Förderhinweis oben im Projektfenster (Vorgabe einzelner Fördermittelgeber) */
.foerder-oben{display:flex;align-items:center;gap:16px;background:var(--sand,#f4f2ec);border:1px solid var(--linie,#ddd8cc);border-radius:12px;padding:10px 16px;margin:14px 0 4px}
.foerder-oben img{height:auto;width:auto;max-height:84px;max-width:300px;flex:0 0 auto}
.foerder-oben p{margin:0;font-size:.88rem;line-height:1.45;color:var(--muted,#5a5a5a)}
@media(max-width:560px){.foerder-oben{flex-direction:column;align-items:flex-start}.foerder-oben img{max-width:240px;max-height:70px}}

@media(max-width:520px){.foerderlogos .fl-reihe img.fl-gross{max-height:110px;max-width:260px}}
@media(max-width:520px){.foerderlogos .fl-reihe img{max-height:76px;max-width:180px}}

/* Siegel „Initiative Transparente Zivilgesellschaft" auf der Transparenz-Seite */
.transparenz-siegel{margin:14px 0 4px}
.transparenz-siegel img{height:auto;width:auto;max-height:70px;max-width:260px;display:block}

/* Förderlogos, die laut Vorgabe auf weißem Hintergrund stehen müssen (z. B. BMI).
   Logo groß und erkennbar, knappe Ränder – das PNG selbst ist auf den Inhalt
   zugeschnitten, das Padding hier bildet die Schutzzone. */
.foerderer-kachel.auf-weiss{background:#fff}
.foerderer-luftig .foerderer-kachel.auf-weiss{background:#fff;border-radius:14px;box-shadow:0 0 0 1px #EDE7DA}
.foerderer-luftig .foerderer-kachel.auf-weiss img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;padding:20px;box-sizing:border-box}

/* Straßennummern-Schilder auf der Karte – nur Deko, keine Mausinteraktion */



/* ---------- Auszeichnungen: Preis-Raster ---------- */
/* ---------- Auszeichnungen: Zeitstrahl ---------- */
.tl{position:relative;max-width:880px;margin:0 auto}
.tl::before{content:'';position:absolute;left:50%;top:8px;bottom:8px;width:2px;background:linear-gradient(to bottom,transparent,#B9CDBF 8%,#B9CDBF 92%,transparent);transform:translateX(-50%)}
.tl-item{position:relative;width:50%;padding:0 44px 34px}
.tl-item.links{left:0;text-align:right}
.tl-item.rechts{left:50%}
.tl-jahr{position:absolute;top:6px;display:inline-flex;padding:4px 14px;border-radius:999px;background:var(--salbei);color:#fff;font-weight:700;font-size:.85rem;font-family:var(--display);z-index:2}
.tl-jahr.leer{background:#B9CDBF;width:14px;height:14px;padding:0;border-radius:50%;top:14px}
.tl-item.links .tl-jahr{right:-31px}
.tl-item.rechts .tl-jahr{left:-31px}
.tl-item.links .tl-jahr.leer{right:-7px}
.tl-item.rechts .tl-jahr.leer{left:-7px}
.tl-karte{background:var(--karte);border-radius:26px;padding:22px 26px;box-shadow:0 2px 12px -6px rgba(38,34,47,.18);display:inline-block;text-align:left;max-width:100%;transition:transform .35s cubic-bezier(.2,.7,.3,1.15),box-shadow .35s}
.tl-item.links .tl-karte{border-radius:26px 26px 26px 80px}
.tl-item.rechts .tl-karte{border-radius:26px 26px 80px 26px}
.tl-karte:hover{transform:translateY(-6px);box-shadow:0 26px 48px -28px rgba(38,34,47,.4)}
.tl-verleiher{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.tl-titel{font-family:var(--display);font-size:1.12rem;line-height:1.3;margin:8px 0 10px;color:var(--ink)}
.tl-links{display:flex;gap:16px;flex-wrap:wrap}
.tl-links a{display:inline-flex;gap:6px;font-size:.83rem;font-weight:600;color:var(--salbei);text-decoration:none}
.tl-links a b{font-weight:600;transition:transform .2s}
.tl-links a:hover b{transform:translateX(4px)}
@media(max-width:720px){
  .tl::before{left:14px;transform:none}
  .tl-item{width:100%;left:0!important;text-align:left;padding:0 0 30px 52px}
  .tl-item.links .tl-jahr,.tl-item.rechts .tl-jahr{left:-6px;right:auto}
  .tl-item.links .tl-jahr.leer,.tl-item.rechts .tl-jahr.leer{left:8px;right:auto}
  .tl-item.links .tl-karte,.tl-item.rechts .tl-karte{border-radius:26px 26px 80px 26px}
}

/* ---------- Förderer: gruppiert ---------- */
.foerderer-gruppe-titel{font-size:1.15rem;color:var(--ink);margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid var(--flaeche-terra)}

/* ---------- Team-Akkordeon (Über uns) ---------- */
.team-akkordeon{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.team-gruppe{background:var(--karte);border-radius:20px;overflow:hidden;box-shadow:0 2px 10px -6px rgba(38,34,47,.16)}
.team-gruppe summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;padding:20px 26px;font-family:var(--display);font-size:1.2rem;color:var(--ink);transition:background .2s}
.team-gruppe summary::-webkit-details-marker{display:none}
.team-gruppe summary::after{content:"+";margin-left:auto;font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1;color:var(--salbei);transition:transform .25s}
.team-gruppe[open] summary::after{content:"–"}
.team-gruppe summary:hover{background:rgba(118,160,136,.08)}
.tg-titel{flex:1}
.tg-zahl{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 10px;border-radius:999px;background:#E0EBE2;color:#3E6B51;font-size:.9rem;font-weight:700;font-family:var(--sans)}
.team-gruppe .team-reihe{padding:0 26px 26px}

/* Sammel-Akkordeon Projekt-Teams: jedes Team einzeln aufklappbar */
.sammel-inhalt{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px}
.team-unter{background:rgba(118,160,136,.06);border-radius:14px;overflow:hidden}
.team-unter summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;padding:14px 20px;font-family:var(--display);font-size:1.05rem;color:var(--ink);transition:background .2s}
.team-unter summary::-webkit-details-marker{display:none}
.team-unter summary::after{content:"+";margin-left:auto;font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1;color:var(--salbei);transition:transform .25s}
.team-unter[open] summary::after{content:"–"}
.team-unter summary:hover{background:rgba(118,160,136,.12)}
.team-unter .team-reihe{padding:0 20px 20px;margin-top:14px!important}

/* ---- Footer-Siegel: Transparente Zivilgesellschaft + Diakonie-Kronenkreuz ---- */
.footer-siegel{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.footer-siegel img{height:52px;width:auto;display:block;opacity:.92;transition:opacity .2s}
.footer-siegel a:hover img{opacity:1}
.footer-kronenkreuz{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;
  border-top:1px solid rgba(52,52,47,.14);max-width:340px}
/* v162: Der Anker um das Kronenkreuz ist das Flex-Kind und schrumpfte auf ~31 px, das Bild (max-width:100%)
   wurde bei fester Höhe 46 px zusammengedrückt – Silkes „verzogen“. Anker fixieren, Bild quadratisch. */
.footer-kronenkreuz > a{flex-shrink:0;display:block}
.footer-kronenkreuz .kronenkreuz{height:46px;width:46px;max-width:none;display:block;opacity:.92;flex-shrink:0}
.footer-kronenkreuz span{font-size:.8rem;line-height:1.4;color:var(--muted)}

/* ---- Social Wall: eigener, schnellerer Reveal (glattes Nachladen Reihe 2 + QR) ---- */
.sw-reveal{opacity:0;transform:translateY(22px);transition:opacity .45s ease,transform .45s ease}
.sw-reveal.sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sw-reveal{opacity:1;transform:none;transition:none}
}

/* ---- Interaktive Standort-Navigation (Karte) ---- */
.ki-standort-liste.klickbar li[data-springe]{cursor:pointer;transition:background .15s}
.ki-standort-liste.klickbar li[data-springe]:hover,
.ki-standort-liste.klickbar li[data-springe]:focus-visible{background:rgba(118,160,136,.14);outline:none}
.ki-standort-liste.klickbar li.aktiv{background:rgba(118,160,136,.2)}
.ki-blaettern{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle}
.ki-pfeil{width:22px;height:22px;line-height:1;border:1px solid var(--linie,#d8d2c4);background:var(--karte,#fff);
  border-radius:50%;font-size:15px;cursor:pointer;color:var(--ink,#34342f);padding:0;display:inline-flex;
  align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.ki-pfeil:hover{background:rgba(118,160,136,.18);border-color:#76A088}


@keyframes kpunkt-blink{
  0%,100%{stroke:#C4602F}
  30%{stroke:#F7C21E;stroke-width:3.4}
  60%{stroke:#C4602F;stroke-width:2.4}
}

/* =====================================================================
   Karten-Einwilligung („Klick zum Laden“)
   ---------------------------------------------------------------------
   Datenschutz: Vor dem Klick wird KEINE Verbindung zu OpenStreetMap
   aufgebaut. Erst der Klick lädt Kartensoftware und Kacheln.
   Diese Fläche ersetzt optisch die Karte, bis geklickt wurde.
   ===================================================================== */
.karte-einwilligung{
  width:100%;height:clamp(360px,52vh,560px);border-radius:26px;
  background:var(--karte);border:1px solid rgba(52,52,47,.1);
  display:flex;align-items:center;justify-content:center;text-align:center;
  cursor:pointer;transition:background .2s,border-color .2s;
}
.karte-einwilligung:hover,.karte-einwilligung:focus-visible{
  background:var(--basis);border-color:var(--salbei);outline:none;
}
.karte-einwilligung-inhalt{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px;max-width:440px}
.karte-einwilligung-pin{font-size:2rem}
.karte-einwilligung-inhalt b{font-size:1.2rem}
.karte-einwilligung-text{color:var(--muted);font-size:.95rem}
.karte-einwilligung-knopf{margin-top:6px;pointer-events:none}
.karte-einwilligung-ds{color:var(--muted);font-size:.8rem;line-height:1.45;margin-top:4px}

/* =====================================================================
   Karte: Gruppen-Punkte und Auswahlliste
   ---------------------------------------------------------------------
   Problem: An einer Adresse sitzen teils mehrere Angebote (an der
   Geschäftsstelle sogar 14). Einzeln gezeichnet lägen sie exakt
   übereinander – man käme nur an eines heran.
   Lösung: EIN Punkt mit Zahl darin; Klick zeigt rechts die Liste.
   Die Koordinaten bleiben dabei exakt an der echten Adresse.
   ===================================================================== */
.lpin-gruppe{
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:12px;font-weight:700;color:#fff;line-height:1;
  background:var(--terra);
}
.lpin-gruppe:hover{background:var(--cta)}
.lpin-gruppe.aktiv{background:var(--cta)}

/* Auswahlliste rechts neben der Karte */
.gruppenwahl h3{font-size:1.25rem}
.gruppenwahl-hinweis{color:var(--muted);font-size:.94rem;margin:8px 0 16px}
.gruppenwahl-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  max-height:min(52vh,460px);overflow-y:auto}
.gruppenwahl-liste button{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  background:var(--basis);border:1px solid rgba(52,52,47,.09);border-radius:14px;
  padding:12px 14px;cursor:pointer;font:inherit;color:inherit;
  transition:background .15s,border-color .15s,transform .1s;
}
.gruppenwahl-liste button:hover,.gruppenwahl-liste button:focus-visible{
  background:#fff;border-color:var(--salbei);transform:translateX(2px);outline:none;
}
.gw-punkt{flex:0 0 auto;width:11px;height:11px;border-radius:50%}
.gw-text{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.gw-text b{font-size:.97rem;line-height:1.3}
.gw-ort{color:var(--muted);font-size:.85rem}
.gw-pfeil{flex:0 0 auto;color:var(--muted);transition:transform .15s}
.gruppenwahl-liste button:hover .gw-pfeil{transform:translateX(3px);color:var(--cta)}

/* =====================================================================
   KI-Übersetzungs-Hinweis (Einblendung + Kennzeichen im Sprachmenü)
   ===================================================================== */
.ki-toast{
  position:fixed;left:50%;bottom:26px;z-index:2000;
  transform:translateX(-50%) translateY(20px);opacity:0;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;
  width:min(680px,calc(100vw - 28px));
  background:var(--ink);color:#FAF7F0;
  border-radius:22px;padding:22px 26px;
  border-inline-start:7px solid var(--terra);
  box-shadow:0 18px 48px rgba(0,0,0,.38);
  font-size:1.06rem;line-height:1.55;
  transition:opacity .35s,transform .35s}
.ki-toast-da{opacity:1;transform:translateX(-50%) translateY(0)}
.ki-toast-weg{opacity:0;transform:translateX(-50%) translateY(20px)}
.ki-toast-symbol{flex:0 0 auto;font-size:1.9rem}
.ki-toast-text{flex:1 1 260px}
.ki-toast-zu{
  flex:0 0 auto;margin-inline-start:auto;cursor:pointer;
  background:#FAF7F0;color:var(--ink);border:none;border-radius:99px;
  font:700 1rem var(--body,inherit);padding:11px 30px;
  transition:transform .15s,box-shadow .15s}
.ki-toast-zu:hover,.ki-toast-zu:focus-visible{outline:none;transform:scale(1.05);
  box-shadow:0 0 0 3px rgba(250,247,240,.35)}
@media(max-width:520px){.ki-toast{font-size:1rem;padding:18px 20px}
  .ki-toast-zu{width:100%;margin-inline-start:0}}
@media (prefers-reduced-motion:reduce){.ki-toast{transition:opacity .2s}}

.sp-ki{font-size:.75rem;opacity:.75;margin-left:2px}
.sp-ki-info{font-size:.78rem;opacity:.85}

/* ---------- Anmeldung mit Formular-Einwurf (v157, GauklerKids) ---------- */
.lang-bild{margin:18px 0 6px}
.lang-bild img{width:100%;border-radius:18px;display:block}
.lang-bild figcaption{font-size:.85rem;color:var(--muted);margin-top:8px}
.anmeldung{margin-top:26px;padding:22px clamp(16px,3vw,28px);border-radius:22px;background:var(--flaeche-salbei)}
.anmeldung h4{margin-top:0}
.anmeldung h5{margin:14px 0 8px;font-size:.95rem}
.anm-liste li::before{background:var(--salbei)}
.anm-form{display:grid;gap:14px;margin-top:14px}
.anm-felder{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.anm-felder label{font-weight:600;font-size:.88rem;display:grid;gap:6px}
.anm-felder label:last-child{grid-column:1/-1}
.anm-form input,.anm-form textarea{font:inherit;padding:12px 14px;border:1px solid #cfd8d0;border-radius:12px;background:var(--karte);width:100%}
.anm-form input:focus,.anm-form textarea:focus{outline:2px solid var(--salbei);outline-offset:1px}
.anm-drop{display:grid;gap:4px;justify-items:center;text-align:center;padding:26px 16px;border:2px dashed var(--salbei);border-radius:16px;background:var(--karte);cursor:pointer}
.anm-drop.aktiv,.anm-drop:focus-visible{border-color:var(--cta);background:var(--flaeche-terra);outline:none}
.anm-dateien{list-style:none;display:grid;gap:6px;padding:0;margin:0}
.anm-dateien li{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--karte);border-radius:10px;font-size:.92rem}
.anm-dateien li span{color:var(--muted)}
.anm-weg{margin-left:auto;border:0;background:transparent;cursor:pointer;font-size:1rem;color:var(--muted)}
.anm-meldung{min-height:1.2em;color:var(--cta);margin:0}
.anm-danke{margin-top:12px}
.anmeldung [hidden]{display:none!important}

/* v190: Social Wall – Abschnitt „Neueste Beiträge“. Beitragsbilder sind Hochformat 4:5 (Instagram-Maß 1080×1350). */
.sw-h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0 0 14px}
.sw-lead{margin:-4px 0 18px;color:var(--muted);max-width:62ch}
.sw-abschnitt[hidden]{display:none}
.sw-beitraege{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(14px,2vw,24px)}
.sw-beitrag{background:var(--karte);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(38,34,47,.06)}
.sw-beitrag[hidden]{display:none}
.sw-beitrag .sw-bild{aspect-ratio:4/5;overflow:hidden;background:#fff}
.sw-beitrag .sw-bild img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.sw-beitrag .sw-bild.oben img{object-position:top}
.sw-beitrag .sw-bild.logo img{object-fit:contain;padding:18%;box-sizing:border-box}
.sw-beitrag-text{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.sw-beitrag h3{font-size:1rem;line-height:1.3;margin:0;overflow-wrap:break-word}
.sw-datum{font-size:.8rem;color:var(--muted);font-weight:600}
.sw-links{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding-top:6px}
.sw-links .btn{margin:0;padding:7px 12px;gap:6px;font-size:.82rem}

/* v194: Termine in Meldungen als Liste (main.js meldungsAbsaetze) */
.termin-liste{margin:10px 0 0;padding-inline-start:1.2em}
.termin-liste li{margin:4px 0;line-height:1.45}

/* v198: Spam-Falle unsichtbar, ohne die Seite zu verbreitern. Vorher left:-9999px – auf Arabisch/Farsi/Sorani (rechts-nach-links)
   wurde die Spenden-Seite dadurch 9977 px breit und ließ sich seitlich verschieben. */
.spamfalle{position:absolute!important;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0}