/* ============================================================================
   design.css — gemeinsame Hülle für alle Seiten des Themes „ruecksicht"
   Angelegt am 13.08.2026, weil Navigation und Fußbereich auf jeder Seite
   sichtbar sein sollen (Wunsch von Thomas) und nicht an zwei Stellen gepflegt
   werden dürfen.

   Enthält NUR: Farb- und Schrifttoken, Kopf, Navigation, Fuß, Krisenhinweis,
   Salbeiband und das Kontakt-Widget. Absichtlich KEINE Grundtypografie und kein
   Reset — die Inhaltsseiten holen das weiterhin aus site.css, die
   Entwurfsvorlagen bringen ihre eigene mit. Diese Datei wird NACH site.css
   geladen und gewinnt deshalb bei Kopf und Fuß.

   Alle Klassen des Widgets tragen das Kürzel kw-, damit sie nicht mit den
   Formularklassen aus site.css kollidieren.
   ========================================================================= */

@font-face { font-family:"TeX Gyre Pagella"; font-weight:400; font-display:swap;
  src:url("../fonts/tex-gyre-pagella-regular.woff2") format("woff2"); }
@font-face { font-family:"TeX Gyre Pagella"; font-weight:600; font-display:swap;
  src:url("../fonts/tex-gyre-pagella-bold.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:400; font-display:swap;
  src:url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:600; font-display:swap;
  src:url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:700; font-display:swap;
  src:url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }

:root{
  /* --ink wird hier bewusst mitgesetzt: site.css hatte #2b2723, die
     Entwurfsvorlagen #2d2420. Ein Wert für alle Seiten, Unterschied nicht
     sichtbar, Kontrast auf Creme 14:1. */
  --ink:#2d2420;
  --creme:#faf6ec; --sand:#efe7d4; --salbei:#c3cba3; --gruen:#6b9e61;
  --dgruen:#33502c; --tgruen:#2e3d13; --gelb:#ffdd55;
  --serif:"TeX Gyre Pagella",Georgia,serif;
  --sans:"Source Sans 3","Segoe UI",sans-serif;
}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.wrap.weit{max-width:1320px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:#fff;color:#2d2420;
  padding:.6rem 1rem;border-radius:8px;box-shadow:0 6px 18px rgba(45,36,32,.25)}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--dgruen);outline-offset:3px;border-radius:6px}

/* ---- Kopf ---- */
header{background:var(--creme);padding:.9rem 0;border-bottom:1px solid #eee5d2}
.top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#2d2420}
.brand img{width:58px;height:59px;display:block}
.brand b{font-family:var(--serif);font-size:1.5rem;font-weight:600}
.brand small{display:block;font-size:.8rem;color:var(--gruen);letter-spacing:normal;
  text-transform:none;font-family:var(--sans)}
header nav{display:flex;gap:.6rem;flex-wrap:wrap}
.pill{background:var(--gelb);color:#2d2420;text-decoration:none;font-weight:600;
  padding:.55rem 1.4rem;border-radius:999px;font-size:1rem;transition:transform .15s;
  border:0;font-family:var(--sans);cursor:pointer;display:inline-block}
.pill:hover{transform:translateY(-2px)}
.pill.dark{background:var(--tgruen);color:#fff}
.pill[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--dgruen)}

/* ---- Salbeiband für Inhaltsflächen ---- */
.band{background:var(--salbei)}

/* ---- Krisenhinweis ---- */
.krisenzeile{max-width:70ch;margin:1.6rem auto 0;text-align:center;font-size:.82rem;
  color:#5c534a;background:#fff;border-radius:10px;border-left:4px solid #c9a227;
  padding:.7rem 1rem}
.krisenzeile b{color:#2d2420}
.band-schluss{padding-bottom:2.4rem}

/* ---- Fuß ---- */
footer{background:var(--creme);padding:1.3rem 0 .9rem}
.fuss-raster{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1.3rem}
@media(max-width:760px){.fuss-raster{grid-template-columns:1fr;gap:1.5rem}}
.fuss-raster h2{font-family:var(--serif);font-weight:600;font-size:1.05rem;
  color:#2d2420;margin:0;line-height:1.15}
.fuss-raster p{margin:.7rem 0 0;font-size:.88rem;color:#5f564d;white-space:pre-line;
  font-style:normal}
.fuss-raster ul{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.5rem}
.fuss-raster li{margin:0}
.fuss-raster a{color:#4a7040;font-weight:600;font-size:.88rem;text-decoration:underline}
.fuss-raster a:hover{color:var(--dgruen)}
.fuss-unten{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1rem;padding-top:.6rem;border-top:1px solid #e7ded0;
  font-size:.8rem;color:#6f675c}

/* ============================================================================
   Kontakt-Widget — modaler Dialog, öffnet beim Klick auf „Kontakt"
   Ohne JavaScript bleibt der Knopf ein normaler Link auf /kontakt/.
   ========================================================================= */
.kw{border:0;padding:0;background:transparent;max-width:min(640px,94vw);width:100%}
.kw::backdrop{background:rgba(28,32,22,.55)}
.kw-form{background:#fff;border-radius:18px;border-left:6px solid var(--gruen);
  padding:1.4rem clamp(1rem,3vw,1.8rem) 1.5rem;box-shadow:0 22px 60px rgba(45,36,32,.32);
  max-height:88vh;overflow-y:auto;font-family:var(--sans);color:#2d2420}
.kw-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.kw-kopf h2{font-family:var(--serif);font-weight:600;font-size:1.4rem;margin:0;
  color:var(--dgruen);line-height:1.15}
.kw-schliessen{flex:none;background:var(--sand);border:0;border-radius:999px;
  width:36px;height:36px;font-size:1.3rem;line-height:1;color:#4a4238;cursor:pointer}
.kw-schliessen:hover{background:#e3d8bf}
.kw-lead{margin:.5rem 0 0;font-size:.9rem;color:#5f564d}
.kw-lead a{color:var(--dgruen);font-weight:600}
.kw-krise{margin:.9rem 0 0;font-size:.8rem;color:#5c534a;background:var(--creme);
  border-radius:10px;border-left:4px solid #c9a227;padding:.6rem .9rem}
.kw-krise b{color:#2d2420}

.kw-reihe{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:560px){.kw-reihe{grid-template-columns:1fr}}
.kw-feld{margin:.9rem 0 0;display:block}
.kw-feld label{display:block;font-size:.82rem;font-weight:600;color:#4a4238;
  margin-bottom:.25rem}
.kw-feld input,.kw-feld textarea,.kw-feld select{width:100%;font:inherit;font-size:.95rem;
  color:#2d2420;background:var(--creme);border:1px solid #ddd2b8;border-radius:10px;
  padding:.55rem .7rem}
.kw-feld textarea{resize:vertical;min-height:6.5rem}
.kw-feld input:focus,.kw-feld textarea:focus,.kw-feld select:focus{background:#fff;border-color:var(--gruen)}
.kw-stern{color:#8a4526}

/* Honigtopf: für Menschen unsichtbar, aber nicht per display:none entfernt,
   damit Ausfüllhelfer und einfache Bots ihn finden. */
.kw-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.kw-hinweis{margin:.9rem 0 0;font-size:.78rem;color:#6f675c}
.kw-hinweis a{color:#4a7040;font-weight:600}
.kw-aktion{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.1rem}
.kw-senden{background:var(--gelb);color:var(--tgruen);font-family:var(--sans);
  font-weight:700;font-size:.95rem;border:0;border-radius:999px;
  padding:.7rem 1.6rem;cursor:pointer}
.kw-senden:hover{background:#ffd633}
.kw-senden[disabled]{opacity:.6;cursor:default}
.kw-seite{font-size:.82rem;color:#4a7040;font-weight:600}
.kw-status{margin:.8rem 0 0;font-size:.88rem;color:var(--dgruen);min-height:1.2em}
.kw-status.fehler{color:#8a3a1f}

/* Auswahlfeld "Empfänger" — Widget (kw-) und Kontaktseite (form-field).
   site.css stylt nur input/textarea, deshalb hier nachgezogen. */
.form-field select{width:100%;font:inherit;font-size:1rem;padding:.65rem .75rem;
  border:1.5px solid var(--line,#d8cfc0);border-radius:10px;background:#fff;color:var(--ink)}
.form-field select:hover{border-color:var(--brand-green,#4a7040)}

/* ---- Kontakt-Seite im neuen Design (13.08.2026, Theme v0.12.0) ----
   Kontraste auf Salbei #c3cba3 gerechnet: h2 (ink) 8,95:1, Eyebrow (tgruen)
   6,91:1, Intro #4a4238 5,82:1, Intro-Link (dgruen, fett) 5,33:1. */
.seite-kontakt{padding:2.4rem 0 3rem}
.sk-eyebrow{font-family:var(--sans);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;font-size:.78rem;color:var(--tgruen);margin:0 0 .4rem}
.seite-kontakt h2{font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(1.7rem,4.5vw,2.3rem);line-height:1.15;margin:0 0 .5rem}
.sk-intro{max-width:62ch;color:#4a4238;font-size:1.05rem;margin:0 0 1.6rem}
.sk-intro a{color:var(--dgruen);font-weight:700;white-space:nowrap}
.sk-form{max-width:720px;box-shadow:0 10px 30px rgba(45,36,32,.12)}
.sk-form .kw-krise{margin-top:0}

/* ---- Projektseite „Würde bewahren" (13.08.2026, Theme v0.13.0) ----
   Hero = Kartenfarbe der Startseite (Pflaume). Schleier .45 -> .55: weiße
   Schrift am hellen Verlaufsende #bd9ab5 gerechnet 6,84:1, am dunklen bis
   19:1. Karten-Mehr-Link liegt am dunklen Kartenende (Schleier .55). */
.wb-hero{position:relative;color:#fff;
  background:radial-gradient(125% 95% at 32% 10%,#bd9ab5,#7c5675,#30192c)}
.wb-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.45))}
.wb-hero .wrap{position:relative;z-index:1;padding-top:2.8rem;padding-bottom:2.8rem}
.wb-eyebrow{font-family:var(--sans);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;font-size:.78rem;margin:0 0 .5rem}
.wb-hero h1{font-family:var(--serif);font-weight:600;line-height:1.12;
  font-size:clamp(1.9rem,5vw,2.6rem);margin:0 0 .5rem;max-width:26ch}
.wb-untertitel{font-size:1.12rem;max-width:60ch;margin:0}
.wb-abschnitt{padding:0 0 3rem}
.wb-spende{background:#fff;border-radius:18px;border-left:6px solid #7c5675;
  padding:1.3rem 1.6rem;max-width:640px;margin:2.2rem 0 0;
  box-shadow:0 8px 24px rgba(45,36,32,.08)}
.wb-spende h3{font-family:var(--sans);font-weight:700;margin:0 0 .5rem;color:var(--ink)}
.wb-spende p{margin:0;color:#4a4238}
.wb-iban{letter-spacing:.06em;color:var(--ink)}
.wb-spende-hinweis{margin-top:.7rem;font-size:.92rem}
.wb-spende-hinweis a{color:var(--dgruen);font-weight:700}
.karte-mehr{margin:.6rem 0 0}
.karte-mehr a{color:#fff;font-weight:700}

/* ---- „Würde bewahren" Optik-Runde 2 (13.08.2026 abends, v0.14.0) ----
   Korrektur: .wb-hero h1 braucht explizit Weiß — site.css färbt h1 dunkel
   und gewann, weil die erste Fassung keine Farbe gesetzt hatte.
   Layout jetzt wie die Startseite: Salbeiband + weiße Karten. */
.wb-hero h1{color:#fff}
.wb-hero .wrap{padding-top:2.2rem;padding-bottom:2.2rem}
.wb-band{padding:2.2rem 0 2.6rem}
.wb-raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.4rem;
  align-items:start}
@media(max-width:880px){.wb-raster{grid-template-columns:1fr}}
.wb-brief{background:#fff;border-radius:18px;border-left:6px solid #7c5675;
  padding:1.6rem 1.9rem;box-shadow:0 8px 24px rgba(45,36,32,.10)}
.wb-inhalt{max-width:68ch}
.wb-inhalt p{margin:0 0 .85rem;color:#3f382f;font-size:1.02rem}
.wb-inhalt p:first-child{color:var(--ink)}
.wb-inhalt h3{font-family:var(--serif);font-weight:600;color:var(--tgruen);
  margin:1.3rem 0 .45rem;font-size:1.2rem}
.wb-inhalt ul{margin:.2rem 0 .9rem;padding-left:1.2rem;columns:2;
  column-gap:2rem;color:#3f382f}
.wb-inhalt li{margin:0 0 .35rem;break-inside:avoid}
@media(max-width:700px){.wb-inhalt ul{columns:1}}
.wb-seite{display:grid;gap:1.2rem;position:sticky;top:1rem}
.wb-seite .wb-spende{margin:0;max-width:none}
.wb-krise{background:#fff;border-radius:10px;border-left:4px solid #c9a227;
  padding:.8rem 1rem;font-size:.85rem;color:#5c534a;margin:0}
.wb-krise b{color:#2d2420}

/* ---- Marias Bereichsseiten (13.08.2026, Theme v0.15.0) ----
   Herofarben = Startseiten-Karten; Schleier wie wb-hero (.45/.55). Weiße
   Schrift am hellen Verlaufsende gerechnet: Tanne #74ab9f 7,10:1,
   Taube #74a0d8 7,29:1. */
/* 19.08.2026 (v0.19.0): Wiesenmotive der Maria-Kacheln als Hero-Hintergrund
   (Wunsch Thomas); getönte Verläufe bleiben als Fallback hinter dem Bild.
   Schleier je Motiv getönt, seitlich verlaufend: links (Textseite) deckend,
   nach rechts weit offen, damit das Motiv sichtbar bleibt (Thomas, 19.08.). */
.hero-tanne{background:url(/content/images/2026/08/wiese-salbei.jpg) center/cover no-repeat,
  radial-gradient(125% 95% at 32% 10%,#74ab9f,#337066,#0e2f28)}
.hero-tanne::after{background:linear-gradient(100deg,rgba(8,20,16,.5) 0%,rgba(8,20,16,.34) 45%,rgba(8,20,16,.08) 100%)}
.hero-taube{background:url(/content/images/2026/08/wiese-blau.jpg) center/cover no-repeat,
  radial-gradient(125% 95% at 32% 10%,#74a0d8,#40699f,#1f3358)}
.hero-taube::after{background:linear-gradient(100deg,rgba(12,16,32,.52) 0%,rgba(12,16,32,.38) 45%,rgba(12,16,32,.1) 100%)}
.hero-rosa{background:url(/content/images/2026/08/wiese-rosa.jpg) center/cover no-repeat,
  radial-gradient(125% 95% at 32% 10%,#d8a8b8,#9c6478,#43222f)}
.hero-rosa::after{background:linear-gradient(100deg,rgba(25,12,18,.66) 0%,rgba(25,12,18,.54) 45%,rgba(25,12,18,.18) 100%)}
.wb-brief.kante-tanne,.wb-spende.kante-tanne{border-left-color:#337066}
.wb-brief.kante-taube,.wb-spende.kante-taube{border-left-color:#40699f}
.wb-brief.kante-rosa,.wb-spende.kante-rosa{border-left-color:#9c6478}

/* Kurze Seiten: body ist 100vh-Flex (site.css), main dehnt sich mit — ohne
   diese Regel bleibt unter dem Salbeiband ein Creme-Streifen bis zum Fuß
   stehen (Thomas, 19.08.2026). Das Band füllt jetzt den Rest. */
.page-template main{display:flex;flex-direction:column}
.page-template main>.wb-band{flex:1 0 auto}
.wb-spende a{color:var(--dgruen);font-weight:700}

/* ---- Rechtliches: /impressum/ + /datenschutz/ (14.08.2026, Theme v0.16.0) ----
   Gleiche Farbpaare wie Kontakt-Seite und Brief-Karte, keine neuen Werte:
   Eyebrow (tgruen) 6,91:1 und Titel (ink) 8,95:1 auf Salbei (gerechnet,
   deckungsgleich mit sk-), Fliesstext #3f382f auf Weiss 10,86:1 (gerechnet).
   Kante der Karte in dgruen = Vereinsfarbe, rein dekorativ. */
.seite-recht{padding:2.4rem 0 3rem}
.seite-recht h2{font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(1.7rem,4.5vw,2.3rem);line-height:1.15;margin:0 0 .5rem}
.rl-karte{max-width:860px;border-left-color:var(--dgruen)}
.rl-inhalt ul{columns:1}
.rl-inhalt li{margin:0 0 .45rem}
.rl-inhalt h3{margin-top:1.7rem}

/* ---- Spendenseiten: /spenden/ + /spenden/online/ (17.08.2026, v0.17.0) ----
   Hero = Spendenkarte der Startseite (Gold f6). Schleier .45/.55 wie wb-hero;
   weiße Schrift am hellen Verlaufsende #ad8f48 gerechnet 7,97:1. Kante der
   Karten in der Mittelfarbe #8a6f34, rein dekorativ. */
.hero-gold{background:radial-gradient(125% 95% at 32% 10%,#ad8f48,#8a6f34,#3d2d0b)}
.wb-brief.kante-gold,.wb-spende.kante-gold{border-left-color:#8a6f34}
.sp-konto{margin:.2rem 0 0;font-size:1.05rem;color:#3f382f}
.sp-iban{display:block;font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(1.15rem,2.6vw,1.5rem);letter-spacing:.05em;margin:.15rem 0 .1rem}
.sp-qr{display:grid;grid-template-columns:150px 1fr;gap:1.1rem;align-items:center;
  margin:1.3rem 0 0;background:var(--creme);border-radius:14px;padding:1rem 1.1rem}
@media(max-width:560px){.sp-qr{grid-template-columns:1fr;justify-items:start}}
.sp-qr img{width:150px;height:150px;background:#fff;border-radius:10px;
  padding:.5rem;display:block}
.sp-qr p{margin:0;font-size:.95rem;color:#4a4238}
.sp-hinweis{margin:1.1rem 0 0;font-size:.95rem;color:#4a4238}
.sp-hinweis a{color:var(--dgruen);font-weight:700}
.sp-aktion{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:1.5rem 0 0}
.sp-knopf{display:inline-block;background:var(--gelb);color:var(--tgruen);font-weight:700;
  text-decoration:none;padding:.65rem 1.5rem;border-radius:999px;font-size:.95rem}
.sp-knopf:hover{background:#ffd633}
.sp-nebensatz{font-size:.85rem;color:#6f675c;margin:0}

/* Online-Spenden-Vorschau: das Demo-Widget aus dem PoC in der neuen
   Designsprache. Klassen und IDs bleiben (site.js steuert sie); diese Regeln
   laden nach site.css und gewinnen deshalb. Farbpaare wie oben gerechnet:
   tgruen auf Gelb 8,77:1, Weiß auf dgruen 9,03:1, ink auf Creme 13,7:1. */
.sw-karte{max-width:720px;margin-top:.4rem}
.sw-karte fieldset.group legend{font-family:var(--serif);font-weight:600;
  color:var(--tgruen);font-size:1.1rem}
.sw-karte .segmented{background:var(--sand)}
.sw-karte .segmented button{font-family:var(--sans);color:#4a4238;background:transparent;
  border:0;box-shadow:none}
.sw-karte .segmented button[aria-pressed="true"]{background:var(--tgruen);color:#fff}
.sw-karte .amount-btn{background:var(--creme);border:1.5px solid #ddd2b8;
  color:var(--ink);border-radius:999px;box-shadow:none}
.sw-karte .amount-btn:hover{border-color:var(--gruen)}
.sw-karte .amount-btn[aria-pressed="true"]{background:var(--dgruen);
  border-color:var(--dgruen);color:#fff}
.sw-karte .custom-amount label{color:#4a4238}
.sw-karte .custom-amount input{background:var(--creme);border:1px solid #ddd2b8;
  border-radius:10px;color:var(--ink)}
.sw-karte .custom-amount input:focus{background:#fff;border-color:var(--gruen)}
.sw-karte .custom-amount .euro{color:#4a4238}
.sw-karte .paymethod{background:var(--creme);border:1.5px solid #ddd2b8;
  border-radius:12px;color:var(--ink);box-shadow:none}
.sw-karte .paymethod:hover{border-color:var(--gruen)}
.sw-karte .paymethod[aria-pressed="true"]{background:#eef2e4;
  border-color:var(--dgruen);color:var(--tgruen)}
.sw-karte .donate-cta{background:var(--gelb);color:var(--tgruen);border:0;
  border-radius:999px;font-weight:700;padding:.7rem 1.6rem;cursor:pointer;box-shadow:none}
.sw-karte .donate-cta:hover{background:#ffd633}
.sw-karte .donate-summary{color:var(--dgruen)}
.sw-karte .donate-hint{color:#6f675c}
.sw-karte .donate-hint a{color:var(--dgruen);font-weight:700}
.seite-kontakt .krisenzeile{text-align:left;margin-left:0}

/* ---- /aktuelles/ im neuen Design (17.08.2026, v0.17.0) ----
   Beiträge als weiße Karten auf dem Salbeiband, Kante in der Vereinsfarbe. */
.seite-akt{padding:2.4rem 0 3rem}
.ak-liste{display:grid;gap:1rem;max-width:860px}
.ak-karte{background:#fff;border-radius:16px;border-left:6px solid var(--gruen);
  padding:1.1rem 1.4rem;box-shadow:0 8px 24px rgba(45,36,32,.08)}
.ak-meta{margin:0;font-size:.8rem;font-weight:600;letter-spacing:.04em;color:#6f675c}
.ak-karte h3{font-family:var(--sans);font-weight:700;font-size:1.25rem;
  margin:.15rem 0 .3rem;color:var(--ink)}
.ak-karte h3 a{color:var(--dgruen);text-decoration:none}
.ak-karte h3 a:hover{text-decoration:underline}
.ak-karte p{margin:0;color:#3f382f}
.seite-akt .pagination{display:flex;justify-content:space-between;gap:1rem;
  max-width:860px;margin:1.2rem 0 0;font-weight:600}
.seite-akt .pagination a{color:var(--dgruen)}
.seite-akt .krisenzeile{text-align:left;margin-left:0}

.fuss-krise{max-width:80ch;margin:.2rem 0 1.1rem;padding-top:1rem;border-top:1px solid #e7dfca;font-size:.82rem;line-height:1.55;color:#5c534a}
.fuss-krise b{color:var(--ink);white-space:nowrap}

/* Soziale Netzwerke im Fuss (21.08.2026): Textlinks mit eingebetteten Symbolen.
   Farbe #3f6236 auf Creme = 6,5:1, auf Weiss 7,0:1 (gemessen). */
.fuss-sozial{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem 1.1rem;margin-top:1.1rem}
.fuss-sozial .fs-titel{font-size:.88rem;color:#5f564d}
.fuss-sozial a{display:inline-flex;align-items:center;gap:.4rem;color:#3f6236;
  font-weight:600;font-size:.88rem;text-decoration:underline}
.fuss-sozial a:hover{color:var(--dgruen)}
.fuss-sozial svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}

/* ============================================================================
   Foto-Optik (25.08.2026, Theme v0.20.0) — Entscheidung Thomas: Die
   Designsprache der Startseite (vormals Wahlseite v2) gilt auf ALLEN Seiten.
   EIN Foto als fester Seitenhintergrund ohne Schleier, dunkles Glas
   rgba(40,28,20,.68) nur für Bänder/Heros, helles Milchglas für alle Karten.
   Salbeiband und Kartenverläufe entfallen. Diese Schicht steht bewusst am
   ENDE der Datei und überschreibt die früheren Rezepte gleicher Spezifität.
   Kontraste: helles Glas 6,5–10,9:1 (22.08. gemessen); Band .68 ≥ 5,1:1. */

/* Seitenhintergrund: Standard = warmes Wiesen-Rosa (wie die Startseite);
   Bereichsseiten behalten ihr Kachel-Motiv, Guido-Themen den Waldnebel.
   Creme bleibt Fallback hinter dem Foto. */
body{background:url(/content/images/2026/08/wiese-rosa-warm.jpg) center/cover fixed no-repeat,var(--creme)}
/* kinder-und-familientrauer + sternenkindtrauer: seit 27.08.2026 Standard-
   Hintergrund (wiese-rosa-warm) wie die uebrigen Maria-Seiten (Wunsch Thomas). */
body.page-begleitung-vor-dem-abschied{background:url(/content/images/2026/08/wiese-rosa.jpg) center/cover fixed no-repeat,var(--creme)}
body.page-wuerde-bewahren,body.page-vorwort,body.page-freude-schenken,body.page-lebenswerk,body.page-veroeffentlichungen{background:url(/content/images/2026/08/wald-nebel.jpg) center/cover fixed no-repeat,var(--creme)}

/* Bänder durchsichtig — das Foto trägt die Fläche; Band füllt kurze Seiten. */
.band{background:transparent}
main{display:flex;flex-direction:column}
main>.band{flex:1 0 auto}

/* Personen-Pillen (Startseiten-Navigation) jetzt in der ganzen Hülle. */
.pill.person{background:#fff;box-shadow:inset 0 0 0 1.5px #ddd2b8}
.pill.person[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--dgruen)}

/* Heros: dunkles Glas statt Motiv/Verlauf + Schleier. */
.wb-hero,.wb-hero.hero-tanne,.wb-hero.hero-taube,.wb-hero.hero-rosa,.wb-hero.hero-gold{
  background:rgba(40,28,20,.68);
  -webkit-backdrop-filter:blur(7px) saturate(1.05);backdrop-filter:blur(7px) saturate(1.05)}
.wb-hero::after,.hero-tanne::after,.hero-taube::after,.hero-rosa::after{background:none}
.wb-hero h1{text-shadow:0 1px 10px rgba(0,0,0,.35)}
.wb-eyebrow,.wb-untertitel{color:#f6efe6;text-shadow:0 1px 8px rgba(0,0,0,.35)}

/* Text direkt auf dem Foto bekommt den Creme-Schein der Startseite. */
.sk-eyebrow,.seite-kontakt h2,.seite-recht h2,.seite-akt h2,.seite-lea h2,
.sk-intro,.lea-intro,.backlink{text-shadow:0 1px 3px rgba(250,247,238,.9),0 2px 12px rgba(250,247,238,.7)}
.backlink{color:var(--dgruen)}

/* Helles Milchglas für alle Karten (ersetzt Weiß + farbige Kanten). */
.wb-brief,.wb-spende,.ak-karte,.sk-form,.sw-karte,.lea-hinweis,.content.wrap{
  background:rgba(255,255,255,.60);
  -webkit-backdrop-filter:blur(7px) saturate(1.05);backdrop-filter:blur(7px) saturate(1.05);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 12px 30px rgba(45,36,32,.14)}
/* page.hbs/post.hbs: Inhaltsfläche als Glas-Karte mit Radius und Luft. */
.content.wrap{border-radius:18px;padding-top:1.4rem;padding-bottom:1.6rem;
  margin-top:.8rem;margin-bottom:2rem}

/* Kontakt-Widget im Seiten-Look (25.08.2026, Wunsch Thomas): gleiche
   Milchglas-Karte wie das Formular der Kontaktseite (sk-form), gruene Kante
   entfaellt dort wie hier. Der Schleier hinter dem Dialog ist bewusst leicht,
   damit das Hintergrundfoto der aufrufenden Seite (z. B. Guidos Waldnebel)
   sichtbar bleibt und durch das Glas scheint. */
.kw::backdrop{background:rgba(28,32,22,.28)}
.kw-form{background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(9px) saturate(1.05);backdrop-filter:blur(9px) saturate(1.05);
  border:1px solid rgba(255,255,255,.65)}

/* ---- Spendenkasten der Unterseiten im Startseiten-Look (27.08.2026):
   Kopie des .spendenkarte-Rezepts der Wahlseite; Milchglas kommt aus der
   Foto-Optik-Schicht (.wb-spende). ---- */
.wb-spende.sp-kasten{text-align:center}
.wb-spende.sp-kasten h3{font-size:1.15rem;color:var(--dgruen);margin:0}
.wb-spende.sp-kasten .sp-eintrag{font-family:var(--serif);font-weight:600;font-size:1.02rem;
  margin:.45rem 0 0;color:var(--ink);white-space:pre-line;letter-spacing:.01em}
.wb-spende.sp-kasten .sp-zweck{margin:.4rem 0 0;font-size:.88rem;color:#3f382f}
.wb-spende.sp-kasten .sp-zweck b{color:var(--dgruen)}
.wb-spende.sp-kasten .sp-knopf{display:block;text-align:center;background:var(--gelb);
  color:var(--tgruen);font-weight:700;text-decoration:none;padding:.65rem 1.4rem;
  border-radius:999px;font-size:.92rem;margin-top:1rem}
.wb-spende.sp-kasten .sp-knopf:hover{background:#ffe27a}


/* ---------------------------------------------------------------------------
   Einwilligung nach Art. 9 DSGVO (28.08.2026) — Pflicht-Checkbox in Seite und
   Widget. Nicht vorangekreuzt; die Beschriftung traegt den Text, der in der
   Ablage als Fassung 1.0 mitprotokolliert wird.
   --------------------------------------------------------------------------- */
.kw-consent {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0 .6rem;
  align-items: start;
  margin: .2rem 0 .1rem;
}
.kw-consent input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: .15rem 0 0;
  accent-color: var(--dgruen, #33452c);
  flex: none;
}
.kw-consent label {
  font-size: .92rem;
  line-height: 1.45;
  color: var(--ink, #23281c);
  font-weight: 400;
  cursor: pointer;
}
.kw-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--dgruen, #33452c);
  outline-offset: 2px;
}