/* Igel-Hilfe Schweiz – gemeinsames Stylesheet (Regeln: ../design.md) */
/* ---------- Schriften (lokal in fonts/, OFL; Quelle Google Fonts: DM Sans variabel 400–600 + Kursiv 400, Young Serif 400; keine Verbindung zu Google) ---------- */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dm-sans-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dm-sans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dm-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dm-sans-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dm-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dm-sans-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/dm-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/dm-sans-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/young-serif-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/young-serif-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Animierte Elemente bis zum Start verstecken (Klasse wird im <head> gesetzt) */
.titel-anim main h1, .titel-anim main h2,
.titel-anim [data-anim-karten] > *, .titel-anim [data-anim-bild],
.titel-anim [data-anim-text] > p, .titel-anim p[data-anim-text],
.titel-anim [data-anim-zeilen] > *,
.titel-anim [data-anim-buttons] > .btn, .titel-anim [data-anim-buttons] > span { visibility: hidden; }

/* ---------- Farbpalette ---------- */
:root {
  --karte-hoehe: 420px;
  --karte-halb: calc(var(--karte-hoehe) / 2);
  --wald: #2F403E;        /* bleibt – Primärfarbe dunkel */
  --erde: #796956;        /* bleibt – Logo-Braun */
  --wald-tief: #223130;   /* Footer, dunkle Flächen */
  --salbei: #B8C5B2;      /* ersetzt #A7BDB1, etwas wärmer */
  --salbei-hell: #E4EADF;
  --koralle: #F16151;     /* Akzentfarbe, Spenden-CTA – ersetzt Signalrot #FC2820 */
  --koralle-dunkel: #D9493A;
  --honig: #F1DD8A;       /* alternative Akzentfarbe */
  --honig-dunkel: #E3C964;
  --papier: #F7F3EC;      /* ersetzt kühles #F3F8F7 */
  --sand: #ECE4D6;
  --linie: #DAD0BF;
  --tinte: #1F2A28;       /* ersetzt Navy #272B5C für Text */
  --tinte-weich: #56615D;

  --serif: "Young Serif", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  /* Eckradien – Basis ist der Radius des Hero-Bildes (18px)
     L    = Basis   → Bilder, Karten, Flächen, Galerie
     M    = 2/3     → kleine Kacheln innerhalb einer Sektion
     S    = 1/3     → kleinste UI-Elemente (Sprachwahl, Menü-Hover)
     Pill = rund    → Buttons und Labels
     Das Logo behält seine eigene Form und bekommt keinen Radius. */
  --radius-l: 18px;
  --radius-m: 12px;
  --radius-s: 6px;
  --radius-pill: 999px;
  --gutter: clamp(16px, 4vw, 80px);

  /* Abstände – 8er-Raster, Sektionen fluid
     Sektion      = vertikaler Abstand zwischen allen Sektionen
     Sektion/2    = Hero oben, Info-Balken, Texteinzug in Farbsektionen
     Spalten      = Abstand zwischen Text- und Bildspalten
     Titel        = Abstand unter jedem H2 (≈ 1/3 Sektion)
     Raster       = Abstand zwischen Karten, Kacheln, Galeriebildern */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --sektion: clamp(64px, 8vw, 120px);
  --sektion-halb: calc(var(--sektion) / 2);
  --spalten: clamp(32px, 5vw, 96px);
  --abstand-titel: clamp(24px, 2.5vw, 40px);
  --raster: var(--space-4);
  /* Titelgrössen: H2 = H1 ÷ 1.618 (Goldener Schnitt), auf kleinen Bildschirmen durch Mindestgrössen begrenzt */
  --h1: clamp(2.6rem, 6.4vw, 6rem);
  --h2: clamp(2.125rem, 3.955vw, 3.708rem);

  /* Standard-Lauftext – Vorlage ist der Einleitungstext im Hero.
     Gilt für alle Fliesstexte, sofern nichts anderes vorgegeben ist.
     Auf Farbflächen wird nur die Farbe angepasst. */
  --lauftext-familie: var(--sans);   /* gemeinsame Schriftfamilie von Lauftext und Akzenttext */
  --lauftext: 400 1.15rem/1.65 var(--lauftext-familie);
  --lauftext-farbe: var(--tinte-weich);
  /* Akzenttext – grössere, etwas fettere Version des Lauftexts für einzelne hervorgehobene Absätze */
  --akzenttext: 500 clamp(1.35rem, 1.9vw, 1.75rem)/1.5 var(--lauftext-familie);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Sprungziele nicht unter dem Sticky-Header verstecken */
[id] { scroll-margin-top: calc(var(--header-hoehe, 84px) + var(--space-6)); }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; color: var(--wald); }
p { margin: 0 0 1em; }
.lauftext,
.hero .lead, .liste-tun p, .klappe p, .bio p, .helfen .intro, .helfen .ausklang, .person p, .dank p, .bild-text p, .leistungen p, .optionen p, .formulierungen p, .schritte p, .schritte-kopf p, .aufruf-band p, .kontakt-info p, .unterstuetzung .text-spalte > p {
  font: var(--lauftext); color: var(--lauftext-farbe);
}
h2 { font-size: var(--h2); letter-spacing: -.01em; margin-bottom: var(--abstand-titel); }
.wrap { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }
.titel-zentriert { text-align: center; }
/* Akzenttext: linksbündig, ca. ⅔ der Inhaltsbreite */
.akzenttext { font: var(--akzenttext); color: var(--lauftext-farbe); max-width: 66.666%; margin: 0; }
.nur-screenreader { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Helle Sektion direkt vor einer Farbfläche bekommt den Sektionsabstand auch unten */
.vor-farbe { padding-bottom: var(--sektion); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 14px var(--space-5); border-radius: var(--radius-pill);
  font: 600 1rem/1 var(--sans); text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .25s cubic-bezier(.2, .8, .3, 1.2);
}
/* Hover: subtiles Wachsen, Klick: leichtes Eindrücken */
.btn:hover { transform: scale(1.04); }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn svg { width: 18px; height: 18px; transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-spenden { background: var(--koralle); color: #fff; }
.btn-spenden:hover { background: var(--koralle-dunkel); }
.btn-wald { background: var(--wald); color: #fff; }
.btn-wald:hover { background: var(--wald-tief); }
.btn-rand { border-color: var(--wald); color: var(--wald); }
.btn-rand:hover { background: var(--wald); color: #fff; }
.btn-hell { background: var(--papier); color: var(--wald); }
.btn-hell:hover { background: #fff; }
:focus-visible { outline: 3px solid var(--koralle); outline-offset: 3px; }

/* ---------- Header ---------- */
.topbar { background: var(--wald); color: #E8EEE9; font-size: .875rem; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-2); }
.topbar a { text-decoration: none; }
.topbar strong { font-weight: 600; color: #fff; }
.lang { display: flex; gap: 4px; }
.lang a { padding: 2px 8px; border-radius: var(--radius-s); opacity: .7; }
.lang a[aria-current] { opacity: 1; background: rgba(255,255,255,.14); }

header.site {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247,243,236,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
/* Drei Spalten: Logo | Menü (zentriert) | Aktionen – Aussenspalten gleich breit */
header.site .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5); padding-block: var(--space-3); }
.logo { grid-column: 1; justify-self: start; }
.header-aktionen { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--space-3); }
.logo img { width: 58px; height: 58px; }
nav.haupt ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
nav.haupt a {
  display: block; padding: 8px 12px; border-radius: var(--radius-s);
  text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--tinte);
}
nav.haupt a:hover { background: var(--sand); }
nav.haupt a[aria-current] { color: var(--wald); box-shadow: inset 0 -2px 0 var(--erde); border-radius: 0; }

nav.haupt .drop { display: inline-flex; align-items: center; gap: 4px; }
/* Untermenü „Wissen und Hilfe“: öffnet bei Hover oder Tastaturfokus */
nav.haupt .hat-untermenue { position: relative; }
nav.haupt .untermenue {
  position: absolute; top: calc(100% + var(--space-2)); left: 50%; translate: -50% 0;
  display: block; min-width: 230px; margin: 0; padding: var(--space-2); list-style: none;
  background: var(--papier); border-radius: var(--radius-m); box-shadow: 0 18px 40px -16px rgba(31, 42, 40, .35);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
nav.haupt .untermenue::before { content: ""; position: absolute; inset: calc(-1 * var(--space-2)) 0 auto; height: var(--space-2); } /* Hover-Brücke */
nav.haupt .hat-untermenue:hover .untermenue, nav.haupt .hat-untermenue:focus-within .untermenue {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
nav.haupt .untermenue a { border-radius: var(--radius-s); white-space: nowrap; }
nav.haupt .untermenue a[aria-current] { box-shadow: none; background: var(--salbei-hell); border-radius: var(--radius-s); }
nav.haupt .drop svg { width: 14px; height: 14px; }
.menu-btn { display: none; background: none; border: 0; padding: 8px; color: var(--wald); }
.menu-btn svg { width: 28px; height: 28px; }
/* Mobiles Menü (Vollbild, unter 1100 px) */
.mobil-menue {
  position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--papier); padding: var(--space-3) var(--gutter) var(--space-6);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.mobil-menue.offen { opacity: 1; visibility: visible; }
html.menue-offen, html.menue-offen body { overflow: hidden; }
.mm-kopf { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-3); border-bottom: 1px solid var(--linie); }
.mm-kopf .logo img { width: 58px; height: 58px; display: block; }
.mm-zu { background: none; border: 0; padding: 8px; color: var(--wald); cursor: pointer; border-radius: var(--radius-pill); transition: background .2s; }
.mm-zu:hover { background: var(--sand); }
.mm-zu svg { width: 28px; height: 28px; display: block; }
.mm-liste { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.mm-liste > li { border-bottom: 1px solid var(--linie); opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .3, 1.2); }
.mobil-menue.offen .mm-liste > li { opacity: 1; transform: none; transition-delay: calc(80ms + var(--i) * 45ms); }
.mm-liste > li > a, .mm-auf {
  display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--space-3);
  padding: var(--space-4) 0; background: none; border: 0; text-align: left; cursor: pointer;
  font: 400 clamp(1.5rem, 6vw, 2rem)/1.2 var(--serif); color: var(--wald); text-decoration: none;
}
.mm-liste > li > a[aria-current], .mm-auf.aktiv { color: var(--erde); }
.mm-liste > li > a[aria-current]::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--koralle); flex: none; }
.mm-auf svg { width: 24px; height: 24px; flex: none; transition: transform .3s ease; }
.mm-auf[aria-expanded="true"] svg { transform: rotate(180deg); }
.mm-unter { list-style: none; margin: 0 0 var(--space-4); padding: 0 0 0 var(--space-4); border-left: 2px solid var(--salbei); display: grid; gap: 2px; }
.mm-unter[hidden] { display: none; }
.mm-unter a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); font: 500 1.125rem/1.4 var(--sans); color: var(--tinte); text-decoration: none; }
.mm-unter a:hover, .mm-unter a[aria-current] { background: var(--salbei-hell); }
.mm-fuss { margin-top: auto; padding-top: var(--space-6); display: grid; gap: var(--space-4); justify-items: start; opacity: 0; transition: opacity .4s ease .3s; }
.mobil-menue.offen .mm-fuss { opacity: 1; }
.mm-fuss .btn-spenden { display: inline-flex; width: 100%; justify-content: center; }
.mm-tel { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 1.125rem/1.4 var(--sans); color: var(--wald); text-decoration: none; }
.mm-tel svg { width: 20px; height: 20px; color: var(--erde); }
.mm-lang { display: flex; gap: 4px; }
.mm-lang a { padding: 4px 12px; border-radius: var(--radius-s); font: 600 .9rem/1.4 var(--sans); color: var(--tinte-weich); text-decoration: none; }
.mm-lang a[aria-current] { background: var(--wald); color: #fff; }
@media (prefers-reduced-motion: reduce) { .mm-liste > li { transform: none; } .liste-tun li:has(.tun-link):hover { scale: none !important; } }

/* ---------- Hero ---------- */
.hero { padding-top: var(--sektion-halb); }
.hero-kopf {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--spalten);
  grid-template-areas: "links lead"; align-items: stretch;
  margin-bottom: var(--sektion-halb);
}
.hero-links { grid-area: links; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); }
.hero h1 { font-size: var(--h1); letter-spacing: -.015em; }
.hero h1 em { font-style: normal; color: var(--erde); }
.hero .lead { grid-area: lead; }
.hero .lead > p:last-of-type { margin-bottom: 0; }
/* Titel links, Text rechts: ist der Text kürzer als der Titel, verteilen sich die Absätze – erste Zeile oben bündig, letzte Zeile unten bündig mit dem Titel */
.hero-kopf:not(.titel-breit) .lead { display: flex; flex-direction: column; justify-content: space-between; }
.hero-kopf:not(.titel-breit) .lead > p { margin-bottom: 0; }
.hero-kopf:not(.titel-breit) .lead > p + p { margin-top: var(--space-5); }
.hero .lead .ctas { margin-top: var(--space-6); } /* Buttons im Lead (z. B. bei langem Titel) */
.hero .ctas { grid-area: ctas; display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Hero-Bild ragt in die folgende Farbsektion: Farbe beginnt hinter dem unteren Drittel des Bildes */
.hero.bild-in-farbe { --ueberlapp: clamp(100px, 15vw, 250px); --ueberlapp-farbe: var(--koralle); background: linear-gradient(to bottom, transparent calc(100% - var(--ueberlapp)), var(--ueberlapp-farbe) 0); }
.hero-bild img {
  width: 100%; height: clamp(300px, 46vw, 760px); object-fit: cover; object-position: 50% 62%;
  border-radius: var(--radius-l);
}
/* Hero-Bild mit angehängtem Band (z. B. «Unser Verein»: Non-Profit-Hinweis und Spenden-Button) – Bild und Band bilden eine Karte */
.hero-bild.mit-band img { border-radius: var(--radius-l) var(--radius-l) 0 0; display: block; }
.hero-band { display: flex; align-items: center; justify-content: space-between; gap: var(--spalten); background: #fff; border-radius: 0 0 var(--radius-l) var(--radius-l); padding: var(--space-6) var(--sektion-halb); }
.hero-band p { margin: 0; max-width: 40em; font: 500 clamp(1.15rem, 1.4vw, 1.35rem)/1.55 var(--sans); color: var(--tinte); }
.hero-band strong { font-weight: 600; }
.hero-band .btn { flex: none; }

/* ---------- Das tun wir ---------- */
/* Helle Sektionen: Abstand nur oben, die letzte vor einer Farbfläche zusätzlich unten */
section.block, .galerie { padding-top: var(--sektion); }
.tun, .galerie { padding-bottom: var(--sektion); }
.tun .kopf { text-align: center; }
.liste-tun { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--raster); }
/* Karten in den Palettenfarben – Schrift/Icon je nach Fläche */
.liste-tun li {
  --karte-bg: var(--wald); --karte-text: #CBD6CE; --karte-icon: #fff;
  background: var(--karte-bg); border-radius: var(--radius-l);
  padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4);
}
.liste-tun li:nth-child(2) { --karte-bg: var(--erde); --karte-text: #F4EEE5; --karte-icon: #fff; }
.liste-tun li:nth-child(3) { --karte-bg: var(--honig); --karte-text: var(--tinte); --karte-icon: var(--wald); }
.liste-tun li:nth-child(4) { --karte-bg: var(--salbei); --karte-text: var(--tinte); --karte-icon: var(--wald); }
.liste-tun li:nth-child(5) { --karte-bg: var(--sand); --karte-text: var(--tinte-weich); --karte-icon: var(--wald); }
.liste-tun .ic { color: var(--karte-icon); display: block; }
.liste-tun .ic svg { display: block; width: 40px; height: 40px; }
.liste-tun p { margin: 0; }
.liste-tun li p { color: var(--karte-text); }
/* ganze Kachel ist Link (Text-Link mit über die Kachel gespannter Fläche) */
.liste-tun li:has(.tun-link) { position: relative; transition: scale .25s cubic-bezier(.2, .8, .3, 1.2), background-color .25s ease; } /* eigene scale-Eigenschaft: stört die GSAP-Einblendung (transform) nicht */
.liste-tun li:has(.tun-link):hover { scale: 1.02 !important; background-color: color-mix(in srgb, var(--karte-bg) 90%, #000); } /* subtil wachsen, Farbe leicht dunkler; !important, weil GSAP nach der Einblendung inline «scale: none» setzt */
.liste-tun li:has(.tun-link:focus-visible) { outline: 2px solid var(--wald); outline-offset: 3px; }
.liste-tun .tun-link { color: inherit; text-decoration: none; outline: none; }
.liste-tun .tun-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.station { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: clamp(220px, 19vw, 380px) clamp(220px, 19vw, 380px); gap: var(--raster); }
.galerie h2 { text-align: center; }
.station figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-l); }
.station .ebene { position: absolute; inset: 0; } /* eine Bildebene (Bild + Beschriftung); beim Wechsel liegen kurz zwei Ebenen übereinander */
.station .ebene.kommt { z-index: 1; }
.station figure:first-child { grid-row: span 2; }
.station img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.station figure:hover img { transform: scale(1.03); }
.station figcaption, .karten-slider figcaption {
  position: absolute; left: var(--space-3); bottom: var(--space-3);
  background: rgba(247,243,236,.92); color: var(--wald);
  font-size: .85rem; font-weight: 500; padding: 6px var(--space-3); border-radius: var(--radius-pill);
}

/* ---------- Keine Igelklappe (Bild links, Text rechts) ---------- */
.klappe { background: var(--koralle); color: #fff; padding: var(--sektion) 0; }
.klappe .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spalten); align-items: stretch; }
/* Desktop: Bild links, Text rechts (Text mit Einzug zum rechten Rand) */
.klappe .bild { order: -1; }
.klappe.bild-rechts .bild { order: 2; } /* Text links, Bild rechts – gleiches Layout wie .bio */
.klappe.bild-rechts .text { padding-left: var(--sektion-halb); padding-right: 0; }
.klappe .text { padding-right: var(--sektion-halb); }
.klappe .bild { position: relative; min-height: clamp(320px, 32vw, 560px); border-radius: var(--radius-l); overflow: hidden; }
.klappe .bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* Strichzeichnung freigestellt: steht ohne Rahmen auf der Fläche, die Hände wachsen aus der Unterkante der Sektion */
.klappe .bild.illustration { border-radius: 0; overflow: visible; margin-bottom: calc(var(--sektion) * -1); }
.klappe .bild.illustration img { object-fit: contain; object-position: 50% 100%; }
/* Klingelndes Telefon: Ebenen auf einer Bühne im Seitenverhältnis der Zeichnung (1200 × 857), unten bündig */
.anruf-buehne { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1200 / 857; }
.klappe .anruf-buehne img { position: absolute; inset: auto; height: auto; object-fit: initial; }
.klappe .anruf-buehne .anruf-basis   { left: 0; top: 0; width: 100%; }
.klappe .anruf-buehne .anruf-telefon { left: 6.75%; top: 13.186%; width: 22.667%; transform-origin: 52% 46%; animation: hoerer 2.6s ease-in-out infinite; }
.klappe .anruf-buehne .anruf-welle-1 { left: 31.333%; top: 13.769%; width: 2.417%; }
.klappe .anruf-buehne .anruf-welle-2 { left: 32.667%; top: 9.918%; width: 3.833%; }
.klappe .anruf-buehne .anruf-welle { transform-origin: 0% 50%; opacity: 0; animation: schallwelle 2.6s ease-out infinite; }
.klappe .anruf-buehne .anruf-welle.anruf-welle-2 { animation-delay: .22s; }
@keyframes hoerer { 0%, 30%, 100% { transform: rotate(0); } 3% { transform: rotate(-7deg); } 7% { transform: rotate(6deg); } 11% { transform: rotate(-6deg); } 15% { transform: rotate(5deg); } 19% { transform: rotate(-3deg); } 23% { transform: rotate(2deg); } }
@keyframes schallwelle { 0% { opacity: 0; transform: translate(-60%, 15%) scale(.6); } 10% { opacity: 1; } 38% { opacity: 1; } 60% { opacity: 0; transform: translate(70%, -18%) scale(1.25); } 100% { opacity: 0; transform: translate(70%, -18%) scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .klappe .anruf-buehne .anruf-telefon, .klappe .anruf-buehne .anruf-welle { animation: none; opacity: 1; } }
/* Freistehende Strichzeichnung ohne Rahmen, mittig in der Bildspalte */
.klappe .bild.zeichnung, .bio .bild.zeichnung { border-radius: 0; overflow: visible; }
.klappe .bild.zeichnung img, .bio .bild.zeichnung img { object-fit: contain; object-position: 50% 50%; }
/* Schwebende Objekte: Ebenen der Zeichnung (1200 × 666) auf je ein Objekt zugeschnitten */
.bild.zeichnung.schweben { display: flex; align-items: center; }
.schwebe-buehne { position: relative; width: 100%; aspect-ratio: 1200 / 666; }
.bild.zeichnung.schweben .teil { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; animation: schweben var(--dauer, 6s) ease-in-out var(--verzug, 0s) infinite; will-change: transform; }
.teil-auto    { clip-path: inset(0 51.67% 56.46% 0);        --dauer: 6.4s; --verzug: -1.2s; --hub: -2.2%; --dreh: -1.2deg; }
.teil-maeher  { clip-path: inset(0 8.33% 54.95% 57.5%);     --dauer: 5.6s; --verzug: -3.1s; --hub: -2.6%; --dreh: 1.5deg; }
.teil-spray   { clip-path: inset(49.55% 76.67% 6.91% 0);    --dauer: 5.2s; --verzug: -0.4s; --hub: -2.4%; --dreh: 2deg; }
.teil-igel    { clip-path: inset(45.05% 25% 0 23.33%);      --dauer: 7.2s; --verzug: -2.2s; --hub: -1.4%; --dreh: -.6deg; }
.teil-roboter { clip-path: inset(54.05% 0 6.91% 75%);       --dauer: 5.9s; --verzug: -4.3s; --hub: -2.8%; --dreh: -1.8deg; }
.teil-auto { transform-origin: 24% 22%; } .teil-maeher { transform-origin: 75% 22%; } .teil-spray { transform-origin: 12% 71%; } .teil-igel { transform-origin: 49% 77%; } .teil-roboter { transform-origin: 87% 73%; }
@keyframes schweben { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(var(--hub)) rotate(var(--dreh)); } }
@media (prefers-reduced-motion: reduce) { .bild.zeichnung.schweben .teil { animation: none; } }
.klappe h2 { color: #fff; }
.klappe p { color: #fff; max-width: 38em; }
.klappe .abgabe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }
.klappe .abgabe > span { font-size: .95rem; color: #fff; }

/* Bild/Text-Sektionen: Text vertikal zum Bild zentriert */
.klappe .text, .bio .text { align-self: center; }

/* ---------- Biodiversitätsflächen ---------- */
.bio { background: var(--wald); color: #E6ECE7; padding: var(--sektion) 0; }
.bio .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spalten); align-items: stretch; }
.bio .text { padding-left: var(--sektion-halb); }
.bio h2 { color: #fff; }
.bio .text:has(h2.langes-wort) { container-type: inline-size; }
.bio h2.langes-wort { font-size: min(var(--h2), 9.2cqi); } /* «Biodiversitätsflächen» (10.6 em) passt immer auf eine Zeile; sonst bricht die Wort-Animation mitten im Wort um */
.bio p { color: #CBD6CE; max-width: 38em; }
.bio .btn { margin-top: var(--space-6); }
.klappe .text p:last-of-type, .bio .text p:last-of-type { margin-bottom: 0; }
.bio .bild { position: relative; min-height: clamp(320px, 32vw, 560px); border-radius: var(--radius-l); overflow: hidden; }
.bio .bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Auch Sie können helfen ---------- */
.helfen .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spalten); align-items: center; }
.helfen .bild img { width: 100%; aspect-ratio: 4/5; max-height: 85vh; object-fit: cover; border-radius: var(--radius-l); }
.helfen .intro { margin: 0 0 var(--space-6); max-width: 42em; }
.helfen h3 { font-size: 1.5rem; margin-bottom: var(--space-4); }
.gutes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.gutes li {
  font-size: 1.0625rem; line-height: 1.5;
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4); border-radius: var(--radius-m); background: var(--salbei-hell); font-weight: 500;
}
.gutes li svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--wald); }
.gutes.gefahren li svg { width: 24px; height: 24px; margin-top: 1px; } /* eigene Icons je Gefahr statt Haken */
/* Spendenkachel: ganze Fläche ist der Link, Hover wie bei den Buttons */
.gutes li.spende { padding: 0; background: none; }
.gutes li.spende a {
  display: flex; gap: var(--space-3); align-items: flex-start; width: 100%; height: 100%;
  padding: var(--space-4); border-radius: var(--radius-m);
  background: var(--koralle); color: #fff; text-decoration: none;
  transition: background-color .2s ease, transform .25s cubic-bezier(.2, .8, .3, 1.2);
}
.gutes li.spende a:hover { background: var(--koralle-dunkel); transform: scale(1.02); }
.gutes li.spende a:active { transform: scale(.97); transition-duration: .1s; }
.gutes li.spende svg { color: #fff; }

.helfen .ausklang { margin-top: var(--space-6); max-width: 42em; }
.helfen .ausklang p:last-child { margin-bottom: 0; }
.helfen .ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---------- Hero mit langem Titel: H1 über die ganze Breite, Text rechts darunter ---------- */
@media (min-width: 821px) {
  .hero-kopf.titel-breit { grid-template-areas: "links links" ". lead"; row-gap: var(--abstand-titel); }
}

/* ---------- Bild-Text-Sektion auf hellem Grund (Bild 4:5, Inhalt vertikal zentriert) ---------- */
/* Einheitliches Raster: alle zweispaltigen Bereiche 1:1 mit Abstand --spalten → gemeinsame Mittelachse */
.bild-text .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spalten); align-items: center; }
.bild-text.bild-rechts .bild { order: 2; }
.bild-text .bild img { width: 100%; aspect-ratio: 4 / 5; max-height: 85vh; object-fit: cover; border-radius: var(--radius-l); }
.bild-text .text p { max-width: 42em; }
/* Karten-Slider: Bilder liegen als Stapel übereinander, die oberste Karte wird weggeschoben */
.karten-slider .deck { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 85vh; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.karten-slider .deck.zieht { cursor: grabbing; }
.karten-slider { position: relative; z-index: 2; }
/* In Farbsektionen (.bio/.klappe) füllt der Stapel die Spaltenhöhe statt 4:5 */
.bio .bild.karten-slider, .klappe .bild.karten-slider { min-height: 0; overflow: visible; border-radius: 0; display: flex; flex-direction: column; }
.bio .karten-slider .deck, .klappe .karten-slider .deck { flex: 1; aspect-ratio: auto; max-height: none; min-height: clamp(320px, 32vw, 560px); } /* gezogene Karte gleitet über den Text */
section:has(.karten-slider) { overflow-x: clip; } /* weggeschobene Karte erzeugt keinen seitlichen Scroll */
.bild.karten-slider .deck > figure { position: absolute; inset: 0; margin: 0; will-change: transform; } /* Karte mit Beschriftung (Stil wie «Alltag in Bildern») */
.karten-slider figcaption { left: var(--space-4); bottom: var(--space-4); z-index: 1; pointer-events: none; }
.bild.karten-slider .deck img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; border-radius: var(--radius-l); box-shadow: 0 18px 40px -22px rgba(31, 42, 40, .45); will-change: transform; -webkit-user-drag: none; }
.slider-steuerung { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
.slider-pfeil { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--koralle); border-radius: var(--radius-pill); background: transparent; color: var(--koralle); cursor: pointer; transition: background .2s, color .2s, transform .25s cubic-bezier(.2, .8, .3, 1.2); }
.slider-pfeil svg { width: 22px; height: 22px; }
.slider-pause .ic-play, .slider-pause.pausiert .ic-pause { display: none; } /* Pause-Knopf zwischen den Pfeilen (Bildwechsel «Alltag in Bildern») */
.slider-pause.pausiert .ic-play { display: block; }
.slider-pause svg { width: 20px; height: 20px; }
.slider-pfeil:hover, .slider-pfeil:focus-visible { background: var(--koralle); color: #fff; transform: scale(1.04); }
.slider-pfeil:focus-visible { outline: 2px solid var(--wald); outline-offset: 3px; }
/* Sprunglink «Zum Inhalt springen»: erster Tab-Stopp jeder Seite, nur bei Tastaturfokus sichtbar */
.sprunglink { position: absolute; left: var(--space-3); top: var(--space-3); z-index: 1000; transform: translateY(-160%); background: var(--wald); color: #fff; font: 600 1rem/1 var(--sans); padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill); text-decoration: none; transition: transform .2s ease; }
.sprunglink:focus { transform: none; outline: 2px solid var(--koralle); outline-offset: 2px; }
main:focus { outline: none; }
.formular-koeder { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* Spamschutz-Feld der WordPress-Formulare, für Menschen unsichtbar */
.formular .form-status.fehler { color: var(--koralle-dunkel); }
.formular .form-status a { color: inherit; text-underline-offset: 3px; }
.formular-hinweis { margin-top: var(--space-5); } /* Meldung nach dem Senden ohne JavaScript */
.formular-hinweis p { margin: 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-m); background: var(--salbei-hell); color: var(--wald); font-weight: 500; }
.formular-hinweis.fehler p { background: var(--koralle); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bild-text .text p:last-child { margin-bottom: 0; }
/* Variante mit Bildkacheln: Text oben, Kacheln füllen die Spalte bis zur Unterkante des grossen Bildes */
.bild-text.mit-kacheln .wrap { align-items: stretch; }
.bild-text.mit-kacheln .text { display: flex; flex-direction: column; }
/* Grosses Bild rückt an die Kacheln heran: Abstand = Kachelabstand (--raster), Textspalte bleibt auf der Mittelachse */
.bild-text.mit-kacheln.bild-rechts .bild { margin-left: calc(var(--raster) - var(--spalten)); }
.bild-text.mit-kacheln:not(.bild-rechts) .bild { margin-right: calc(var(--raster) - var(--spalten)); }
.bild-kacheln {
  flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr;
  gap: var(--raster); margin: var(--space-6) 0 0; padding: 0; list-style: none; min-height: 320px;
}
.bild-kacheln li { position: relative; border-radius: var(--radius-l); overflow: hidden; }
.bild-kacheln img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Leistungskarten mit Titel (Farben wie die Karten der Startseite, im 5er-Zyklus) ---------- */
.leistungen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--raster); }
.leistungen li {
  --karte-bg: var(--wald); --karte-titel: #fff; --karte-text: #CBD6CE; --karte-icon: #fff;
  flex: 0 0 calc((100% - 3 * var(--raster)) / 4);
  background: var(--karte-bg); border-radius: var(--radius-l);
  padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4);
}
.leistungen li:nth-child(5n+2) { --karte-bg: var(--erde); --karte-titel: #fff; --karte-text: #F4EEE5; --karte-icon: #fff; }
.leistungen li:nth-child(5n+3) { --karte-bg: var(--honig); --karte-titel: var(--wald); --karte-text: var(--tinte); --karte-icon: var(--wald); }
.leistungen li:nth-child(5n+4) { --karte-bg: var(--salbei); --karte-titel: var(--wald); --karte-text: var(--tinte); --karte-icon: var(--wald); }
.leistungen li:nth-child(5n+5) { --karte-bg: var(--sand); --karte-titel: var(--wald); --karte-text: var(--tinte-weich); --karte-icon: var(--wald); }
.leistungen .ic { color: var(--karte-icon); }
.leistungen .ic svg { display: block; width: 40px; height: 40px; }
.leistungen .inhalt { display: flex; flex-direction: column; gap: var(--space-2); }
.leistungen h3 { font-size: 1.5rem; color: var(--karte-titel); margin: 0; }
.leistungen li p { margin: 0; color: var(--karte-text); }

/* Leistungskarten zu dritt (z. B. drei Möglichkeiten) */
.leistungen.drei li { flex-basis: calc((100% - 2 * var(--raster)) / 3); }
/* Checkliste einspaltig (für längere Sätze) */
.gutes.einspaltig { grid-template-columns: 1fr; }

/* ---------- Hinweise mit Formulierungsbeispielen ---------- */
.formulierungen .kopf-text { max-width: 52em; margin-bottom: var(--sektion-halb); }
.formulierungen .kopf-text p:last-child { margin-bottom: 0; }
.formulierungen a:not(.btn) { color: var(--wald); text-underline-offset: 3px; }
.formulierungen h3 { font-size: 1.5rem; margin-bottom: var(--space-4); }
.hinweise { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--spalten); align-items: start; }
.beispiele { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.beispiele .fall { margin: 0 0 var(--space-2); font-weight: 600; color: var(--tinte); }
/* Zitat-Kachel: Klick kopiert den Satz; Hover wie bei Button-Kacheln (Wachsen auf 1.02) mit Tooltip */
.zitat-kachel {
  position: relative; display: block; width: 100%; margin: 0; text-align: left; cursor: pointer;
  padding: var(--space-4) var(--space-5); border: 0; border-radius: var(--radius-m);
  background: var(--salbei-hell); color: var(--tinte); font: var(--lauftext);
  transition: background-color .2s ease, transform .25s cubic-bezier(.2, .8, .3, 1.2);
}
.zitat-kachel:hover { background: var(--salbei); transform: scale(1.02); }
.zitat-kachel:active { transform: scale(.97); transition-duration: .1s; }
.zitat-kachel::after {
  content: attr(data-tooltip); position: absolute; right: var(--space-4); top: 0;
  transform: translateY(-40%); opacity: 0; pointer-events: none;
  padding: 6px var(--space-3); border-radius: var(--radius-pill);
  background: var(--wald); color: #fff; font: 600 .8rem/1 var(--sans); letter-spacing: .02em; white-space: nowrap;
  transition: opacity .2s ease, transform .2s ease;
}
.zitat-kachel:hover::after, .zitat-kachel:focus-visible::after, .zitat-kachel.kopiert::after { opacity: 1; transform: translateY(-70%); }
.zitat-kachel.kopiert::after { background: var(--koralle); }
.zitat-kachel + .oder { margin: var(--space-2) 0; }
.formulierungen .ausklang { max-width: 52em; margin-top: var(--sektion-halb); }
.formulierungen .ausklang .btn { margin-top: var(--space-6); }

/* ---------- Koralle-Fläche mit Schritt-für-Schritt-Kacheln ---------- */
.koralle-flaeche { background: var(--koralle); color: #fff; padding: var(--sektion) 0; }
.koralle-flaeche h2 { color: #fff; }
/* «Wann brauchen Igel Hilfe?»: Titel und Text oben zentriert, darunter die Schritte nebeneinander;
   Telefon und Kontakt stehen unten im letzten Schritt (dort, wo der Igel übergeben wird). */
.schritte-kopf { margin-bottom: var(--sektion-halb); text-align: center; }
.schritte-kopf p { color: #fff; margin: 0 auto; max-width: 46rem; }
.schritte-kopf p + p { margin-top: var(--space-5); }
.schritte-kopf .ueberleitung { font-weight: 600; }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--raster); counter-reset: schritt; }
.schritte li {
  counter-increment: schritt; background: var(--papier); border-radius: var(--radius-l);
  padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4);
}
.schritte li::before { content: counter(schritt); font: 400 3rem/1 var(--serif); color: var(--koralle); }
.schritte li p { margin: 0; color: var(--tinte); }
.schritte li strong { font-weight: 600; } /* die Handlung pro Schritt, zum Überfliegen */
.schritte-aktionen { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; padding-top: var(--space-2); } /* unten in der Kachel */

/* ---------- Aufruf-Band: Waldgrün, Text links, Button rechts ---------- */
.aufruf-band {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spalten);
  background: var(--wald); border-radius: var(--radius-l); padding: var(--sektion-halb);
}
.aufruf-band h2 { color: #fff; margin-bottom: var(--space-2); }
.aufruf-band p { color: #CBD6CE; margin: 0; }
.aufruf-band .btn { flex: none; white-space: nowrap; }
.aufruf-band .aufruf-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); flex: none; }
.aufruf-band.gestapelt { flex-direction: column; align-items: flex-start; gap: var(--space-6); } /* langer Titel: Text über die ganze Breite, Buttons darunter */
.aufruf-band.gestapelt h2 { max-width: 22em; }
.aufruf-band.gestapelt p { max-width: 52em; }
.aufruf-band.mit-bild { flex-direction: row; align-items: center; } /* Text und Buttons links, animierte Zeichnung rechts */
.aufruf-band .band-inhalt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.aufruf-band .band-bild { flex: none; width: clamp(150px, 15vw, 230px); height: auto; margin-block: calc(-1 * var(--space-5)); }
/* Regionale Wissensplattformen (sektionen/): Igelkurse mit Anmeldeformular, Hinweis am Schluss */
.material-bild { display: block; width: 100%; max-width: 400px; height: auto; margin-top: var(--sektion-halb); } /* animierte Strichzeichnung unter dem Text */
.unterstuetzung.material .wrap { align-items: center; } /* Text und Zeichnung vertikal mittig zum Bestellformular */
.unterstuetzung.material .text-spalte { position: static; }
@media (min-width: 821px) { .unterstuetzung.material .formular-karte { order: -1; } } /* Desktop: Formular links, Text + Zeichnung rechts; auf dem Handy Text zuerst */
.kurse .kontakt-raster { align-items: center; } /* Text vertikal mittig zum Anmeldeformular */
.kurse .kurs-text h3 { font-size: 1.5rem; margin-bottom: var(--space-4); hyphens: auto; overflow-wrap: break-word; } /* «Tierarztpraxisassistent*innen» ist auf dem Handy breiter als die Spalte */
.kurse .kurs-text p { font: var(--lauftext); color: var(--lauftext-farbe); max-width: 42em; }
/* Regionale Wissensplattformen: Übersicht mit Karte und Liste, Pfad auf den Kantonsseiten */
.regionen-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spalten); align-items: start; } /* Karte über die ganze Inhaltsbreite, darunter Hinweis links und Kacheln rechts (DOM: Karte, Liste, Hinweis – auf dem Handy bleibt die Liste vor dem Hinweis) */
.regionen-raster .regionen-karte { grid-column: 1 / -1; }
.regionen-raster .sektion-hinweis { grid-column: 1; grid-row: 2; max-width: none; }
.regionen-raster .regionen-liste { grid-column: 2; grid-row: 2; }
.regionen-karte { position: relative; height: clamp(300px, 46vw, 760px); border-radius: var(--radius-l); overflow: hidden; background: var(--sand); } /* so hoch wie ein Hero-Bild */
#regionen-karte { position: absolute; inset: 0; z-index: 0; font-family: var(--sans); }
#regionen-karte .leaflet-tile-pane { filter: grayscale(1) contrast(.95) brightness(1.03); }
.regionen-pin { background: none; border: 0; }
.regionen-pin svg { width: 34px; height: 44px; overflow: visible; transform-origin: 50% 100%; transition: transform .25s cubic-bezier(.2, .8, .3, 1.2); filter: drop-shadow(0 3px 4px rgba(31, 42, 40, .3)); }
.regionen-pin path { fill: var(--koralle); stroke: #fff; stroke-width: 2; }
.regionen-pin circle { fill: #fff; }
.regionen-pin.pin-station path { fill: var(--wald); } /* eigene Klasse: .station ist die Bento-Galerie der Startseite */
.regionen-pin.pin-folgt path { fill: var(--erde); }
.regionen-pin:hover svg, .regionen-pin.aktiv svg { transform: scale(1.3); }
.regionen-pin.aktiv path { fill: var(--wald); }
.regionen-popup .leaflet-popup-content-wrapper { border-radius: var(--radius-m); box-shadow: 0 10px 30px -12px rgba(31, 42, 40, .45); }
.regionen-popup .leaflet-popup-content { margin: var(--space-4) var(--space-5); display: grid; gap: var(--space-2); font: 400 1rem/1.4 var(--sans); color: var(--tinte); }
.regionen-popup strong { font: 400 1.25rem/1.2 var(--serif); color: var(--wald); }
.regionen-popup a { color: var(--wald); font-weight: 600; text-underline-offset: 3px; }
.regionen-popup span { color: var(--tinte-weich); }
.regionen-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-content: start; }
.regionen-liste a, .regionen-liste .region-folgt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-m); background: var(--salbei-hell);
  font: 500 1.0625rem/1.3 var(--sans); color: var(--wald); text-decoration: none;
  transition: background .2s, transform .25s cubic-bezier(.2, .8, .3, 1.2);
}
.regionen-liste svg { flex: none; width: 18px; height: 18px; color: var(--koralle); transition: transform .25s cubic-bezier(.2, .8, .3, 1.2); }
.regionen-liste a:hover, .regionen-liste a:focus-visible { background: var(--salbei); transform: scale(1.02); }
.regionen-liste a:hover svg { transform: translateX(3px); }
.regionen-liste .region-folgt { background: var(--papier); border: 1px dashed var(--linie); color: var(--tinte-weich); }
.regionen-liste small { font: 600 .75rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--erde); }
.sektion-hinweis p + p { margin-top: var(--space-3); }
.pfad { padding-top: var(--space-5); }
.pfad a { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 .95rem/1.4 var(--sans); color: var(--erde); text-decoration: none; }
.pfad a:hover { color: var(--wald); }
.pfad svg { width: 16px; height: 16px; }
/* Kantonsseiten: Igel gefunden (Koralle), Stationen, Notfallnummern, Behörden */
.notfall { background: var(--koralle); color: #fff; padding: var(--sektion) 0; }
.notfall .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spalten); align-items: stretch; } /* Schritte so hoch wie der Text links */
.notfall h2 { color: #fff; }
.notfall .notfall-text { align-self: center; } /* Text links vertikal mittig zu den Kacheln rechts */
.notfall-text > p { font: var(--lauftext); color: #fff; max-width: 38em; margin: 0; }
/* Checkliste «Handlungsbedarf …»: ruhige Liste mit feinen Trennlinien statt einzelner Kacheln, damit die Schritt-Kacheln rechts im Vordergrund stehen */
.notfall .notfall-text .gutes { gap: 0; }
.notfall .notfall-text .gutes li { background: none; border-radius: 0; padding: var(--space-3) 0; color: #fff; font-weight: 400; }
.notfall .notfall-text .gutes li + li { border-top: 1px solid rgba(255, 255, 255, .35); }
.notfall .notfall-text .gutes li svg { color: #fff; }
.notfall-text .liste-titel { font: 600 1.15rem/1.4 var(--sans); color: #fff; margin: var(--space-6) 0 var(--space-4); } /* Überschrift über der Checkliste */
.notfall .gutes { align-content: start; } /* Liste bleibt kompakt, auch wenn die Spalte höher ist */
.notfall-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--raster); counter-reset: schritt; } /* beide Kacheln gleich hoch */
.notfall-schritte li { counter-increment: schritt; background: var(--papier); border-radius: var(--radius-l); padding: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.notfall-schritte li::before { content: counter(schritt); font: 400 3rem/1 var(--serif); color: var(--koralle); }
.notfall-schritte p { margin: 0; font: var(--lauftext); color: var(--tinte); }
/* Illustration füllt den Raum unter dem Text */
.schritt-bild { flex: 1 1 0; align-self: stretch; min-height: 90px; position: relative; } /* füllt nur den freien Raum, bestimmt die Höhe nicht mit */
.schritt-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.notfall-schritte li .btn { order: 3; position: relative; z-index: 1; } /* Button unten in der Kachel */
.notfall-schritte li:has(.btn) .schritt-bild { order: 2; margin-bottom: calc(-1 * (3.25rem + var(--space-4))); } /* Zeichnung reicht rechts neben den Button hinunter */
.abschnitt-kopf { max-width: 52em; margin-bottom: var(--abstand-titel); }
.abschnitt-kopf h2 { margin-bottom: var(--space-4); }
.abschnitt-kopf p { margin: 0; font: var(--lauftext); color: var(--lauftext-farbe); }
.abschnitt-kopf p + p { margin-top: var(--space-3); }
/* Zusatzblöcke im Stationsteil (z. B. «Gibt es eine Igelstation im Kanton Jura?», «Weitere Pflegestellen in den Nachbarregionen») */
.stationen-zusatz { margin-top: var(--sektion-halb); }
.stationen-zusatz h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin-bottom: var(--space-4); text-wrap: balance; }
.stationen-zusatz .gutes { max-width: 46rem; margin: var(--space-4) auto; text-align: left; }
.stationen-zusatz .gutes + p { margin-top: var(--space-4); }
.abschnitt-kopf.zentriert { margin-inline: auto; text-align: center; max-width: none; }
.abschnitt-kopf.zentriert h2 { max-width: 18em; margin-inline: auto; text-wrap: balance; } /* lange Titel auf dem Desktop auf zwei ausgewogene Zeilen */
.abschnitt-kopf.zentriert p { max-width: 52em; margin-inline: auto; }
.stationen, .behoerden { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raster); }
.behoerden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stationen.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stationen.einzeln { grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin-inline: auto; } /* eine einzelne Karte (z. B. weitere Anlaufstelle) zentriert */
@media (min-width: 1101px) { .behoerden.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* drei Behördenkarten nebeneinander */ /* 2 oder 4 Karten: zweispaltig statt Lücke im 3er-Raster */
.station-karte, .behoerde { background: var(--salbei-hell); border-radius: var(--radius-l); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.behoerde { background: var(--sand); }
.station-karte.station-global { background: var(--sand); }
.station-karte.mit-logo { position: relative; }
.station-karte.mit-logo .kontakt-zeilen { padding-right: 112px; } /* Platz für das Logo rechts unten */
.station-logo { position: absolute; right: var(--space-5); bottom: var(--space-5); width: 96px; height: 96px; object-fit: contain; }
.station-karte h3, .behoerde h3 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.station-karte p, .behoerde p { margin: 0; font: var(--lauftext); color: var(--tinte-weich); }
.station-karte a, .behoerde a { color: var(--wald); text-underline-offset: 3px; overflow-wrap: anywhere; }
.station-karte .achtung { background: var(--koralle); color: #fff; border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); font: 500 1rem/1.5 var(--sans); }
.behoerde .nachsatz { border-left: 3px solid var(--koralle); padding-left: var(--space-3); color: var(--tinte); }
.kontakt-zeilen { list-style: none; margin: auto 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--linie); display: grid; gap: var(--space-2); }
.kontakt-zeilen li { display: flex; align-items: flex-start; gap: var(--space-3); font: 400 1rem/1.5 var(--sans); color: var(--tinte); min-width: 0; }
.kontakt-zeilen svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--erde); }
.behoerde .kontakt-zeilen { margin-top: var(--space-2); }
/* Organisation mit mehreren Stationen (z. B. Igelhilfe Baselbiet): Standorte untereinander, je mit Trennlinie */
.standort { border-top: 1px solid var(--linie); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.standort h4 { font: 600 1.05rem/1.4 var(--sans); color: var(--wald); margin: 0; }
.standort .kontakt-zeilen { margin: 0; padding: 0; border-top: 0; }
.notfallnummern { margin-top: var(--sektion-halb); background: var(--wald); border-radius: var(--radius-l); padding: var(--sektion-halb); }
.notfallnummern h3 { color: #fff; font-size: 1.75rem; margin-bottom: var(--space-6); }
.notfallnummern ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spalten); }
.notfallnummern li { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.notfallnummern strong { font: 600 .85rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--honig); }
.notfallnummern .nummer { font: 400 1.75rem/1.2 var(--serif); color: #fff; text-decoration: none; white-space: nowrap; } /* Nummern nie umbrechen */
.notfallnummern .nummer:hover { color: var(--honig); }
.notfallnummern span { font: 400 .95rem/1.5 var(--sans); color: #CBD6CE; }
.notfallnummern span a { color: #fff; text-underline-offset: 3px; overflow-wrap: anywhere; }
.notfallnummern li > a:not(.nummer) { font: 400 .95rem/1.5 var(--sans); color: #fff; text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (min-width: 1101px) { .notfallnummern ul.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-6); } } /* 5 Nummern (mit kantonalem Notfalldienst): 3 + 2 statt 4 + 1 */
/* Igelbeobachtungen melden (Kantonsseiten, optional): zwei Listen als Karten, darunter ein Nachsatz */
.bio .gutes + p { margin-top: var(--space-5); } /* Text nach einer Checkliste auf Waldgrün (z. B. Lebensraum), wie in den hellen Bild-Text-Sektionen */
.beobachtungen .liste-titel { font: 600 1.15rem/1.4 var(--sans); color: var(--wald); margin: 0 0 var(--space-2); }
.beobachtungen .gutes li { background: var(--papier); }
.behoerden.einzeln { grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin-inline: auto; } /* nur eine Kontaktkarte (z. B. Naturzentrum Glarnerland) */
.beobachtung-nachsatz { max-width: 52em; margin: var(--abstand-titel) auto 0; text-align: center; font: var(--lauftext); color: var(--tinte); border-top: 1px solid var(--linie); padding-top: var(--space-5); }
.notfallnummern .klein { margin: var(--space-6) 0 0; padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, .15); font: 400 .95rem/1.6 var(--sans); color: #CBD6CE; max-width: 60em; }
#stationen .sektion-hinweis { margin-top: var(--space-6); }
.aufruf-band.honig { background: var(--honig); }
.aufruf-band.honig h2 { color: var(--wald); }
.aufruf-band.honig p { color: var(--tinte); }
.sektion-hinweis { max-width: 52em; background: var(--sand); border-radius: var(--radius-m); padding: var(--space-5) var(--space-6); }
.sektion-hinweis h3 { font: 600 .85rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--erde); margin-bottom: var(--space-2); }
.sektion-hinweis p { margin: 0; font: var(--lauftext); color: var(--tinte-weich); }
.sektion-hinweis.koralle { background: var(--koralle); }
.sektion-hinweis.koralle h3, .sektion-hinweis.koralle p { color: #fff; }

/* ---------- Kontakt: Infos links (mit Bild), Formular rechts ---------- */
.kontakt-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spalten); align-items: stretch; }
.kontakt-info { display: flex; flex-direction: column; gap: var(--space-5); }
.kontakt-info .gruppe h3 { font: 600 .85rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--erde); margin: 0 0 var(--space-2); }
.kontakt-info .gruppe p { margin: 0; color: var(--tinte); }
.kontakt-info .gruppe + .gruppe { padding-top: var(--space-5); border-top: 1px solid var(--linie); }
.kontakt-info a { color: var(--wald); text-underline-offset: 3px; }
.kontakt-info .kontakt { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; font-weight: 500; }
.kontakt-info .kontakt svg { width: 20px; height: 20px; color: var(--erde); }
.kontakt-info .kontakt-hinweise { padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-4); } /* etwas mehr Luft zur Telefonnummer, die zwei Sätze enger zusammen */
.kontakt-info .kontakt-hinweise p { margin: 0; }
/* Kontakt-Hero: links Titel, Text und Kontaktdaten (sticky), rechts das Formular */
.hero-kontakt { padding-bottom: calc(var(--sektion) + var(--karte-halb)); }
/* Karte auf der Grenze zwischen hellem Hero und Waldgrün */
.karte-grenze { position: relative; z-index: 2; margin-block: calc(var(--karte-halb) * -1); }
.karte { height: var(--karte-hoehe); border-radius: var(--radius-l); overflow: hidden; background: var(--sand); box-shadow: 0 24px 48px -24px rgba(31, 42, 40, .35); }
.karte iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.95); transition: filter .5s ease; }
.karte:hover iframe, .karte:focus-within iframe { filter: none; }
@media (hover: none) { .karte iframe { filter: none; } }
.karte-grenze + .unterstuetzung { padding-top: calc(var(--sektion) + var(--karte-halb)); }
.hero-kontakt .kontakt-raster { align-items: start; }
.hero-recht { padding-bottom: var(--sektion); }
.hero-recht .kontakt-raster { align-items: start; }
.hero-recht h1 { margin-bottom: 0; }
.hero-recht .kontakt-info { padding-top: .35em; }
.hero-recht .kontakt-links { position: sticky; top: calc(var(--header-hoehe, 84px) + var(--space-6)); }
.hero-recht .kontakt-info { max-width: 42em; }
.kontakt-info .gruppe.text p { color: var(--tinte-weich); }
.kontakt-info .gruppe.text p + p { margin-top: var(--space-3); }
.kontakt-info .gruppe.text ul { margin: var(--space-3) 0; padding-left: 1.2em; color: var(--tinte-weich); font: var(--lauftext); }
.kontakt-info .gruppe.text li + li { margin-top: var(--space-2); }
.kontakt-info .gruppe.text li::marker { color: var(--erde); }
.kontakt-links h1, .hero-recht h1 { font-size: var(--h1); letter-spacing: -.015em; margin-bottom: var(--abstand-titel); }
.kontakt-links h1 em { font-style: normal; color: var(--erde); }
.kontakt-links .lead p:last-child { margin-bottom: 0; }
.kontakt-links .kontakt-info { margin-top: var(--sektion-halb); }

/* ---------- Formulare ---------- */
.formular-karte { position: relative; background: var(--sand); border-radius: var(--radius-l); padding: var(--sektion-halb); color: var(--tinte); }

/* Aufmerksamkeits-Schimmer: Lichtkante läuft zweimal um den Rand (Klasse .schimmern, gesetzt von js/main.js) */
@property --schimmer-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.formular-karte::before {
  content: ""; position: absolute; inset: -4px; padding: 4px; border-radius: calc(var(--radius-l) + 4px);
  background: conic-gradient(from var(--schimmer-winkel), transparent 0deg 210deg, var(--koralle) 290deg, #fff 332deg, var(--koralle) 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; pointer-events: none;
}
.formular-karte.schimmern::before { animation: schimmer-lauf 2s cubic-bezier(.45, 0, .2, 1), schimmer-blende 2s ease; }
.formular-karte.schimmern { animation: schimmer-schein 2s ease; }
@keyframes schimmer-lauf { from { --schimmer-winkel: 0deg; } to { --schimmer-winkel: 720deg; } }
@keyframes schimmer-blende { 0% { opacity: 0; } 12%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes schimmer-schein { 0%, 100% { box-shadow: 0 0 0 0 rgba(241, 97, 81, 0); } 30% { box-shadow: 0 0 0 10px rgba(241, 97, 81, .18); } }
.dank .formular-karte, .bio .formular-karte, .unterstuetzung .formular-karte { background: var(--papier); }
.formular-karte h3 { font-size: 1.75rem; margin: 0 0 var(--space-2); hyphens: auto; overflow-wrap: break-word; }
.formular-karte .hinweis-pflicht { font-size: .9375rem; color: var(--tinte-weich); margin: 0 0 var(--space-5); }
.formular { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
.formular .feld { grid-column: span 6; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.formular .feld.halb { grid-column: span 3; }
.formular .feld.drittel { grid-column: span 2; }
.formular .feld.zweidrittel { grid-column: span 4; }
.formular label, .formular legend { font: 600 .9375rem/1.4 var(--sans); color: var(--tinte); padding: 0; }
.formular input[type=text], .formular input[type=email], .formular input[type=tel], .formular select, .formular textarea {
  width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--tinte);
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-m); padding: 12px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.formular textarea { min-height: 140px; resize: vertical; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: none; border-color: var(--wald); box-shadow: 0 0 0 3px rgba(47, 64, 62, .15); }
.formular .optionen-wahl { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 2px; }
.formular .optionen-wahl label {
  display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-pill); padding: 8px 14px; font-weight: 500;
  transition: background-color .2s ease, border-color .2s ease;
}
.formular .optionen-wahl label:has(input:checked) { background: var(--salbei-hell); border-color: var(--wald); }
.formular .optionen-wahl input { accent-color: var(--wald); margin: 0; }
.formular input[type=file] { font: 400 .9375rem/1.4 var(--sans); }
.formular .bestaetigung { flex-direction: row; align-items: flex-start; gap: var(--space-3); font-weight: 400; }
.formular .bestaetigung input { accent-color: var(--wald); margin-top: 4px; flex: none; }
.formular .absenden { grid-column: span 6; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }
.formular .form-status { margin: 0; font-size: .9375rem; color: var(--tinte-weich); }
.formular .pflicht { color: var(--koralle-dunkel); }

/* ---------- Unterstützung: Waldgrün, Text links (sticky), Formular rechts ---------- */
.unterstuetzung { background: var(--wald); padding: var(--sektion) 0; }
.unterstuetzung .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spalten); align-items: start; }
.unterstuetzung .text-spalte { position: sticky; top: calc(var(--header-hoehe, 84px) + var(--space-6)); }
.unterstuetzung h2 { color: #fff; }
.unterstuetzung .text-spalte > p { color: #CBD6CE; }
.hinweis-box { margin-top: var(--space-6); background: var(--koralle); color: #fff; border-radius: var(--radius-m); padding: var(--space-5); }
.hinweis-box p { margin: 0; color: #fff; font: var(--lauftext); }
.hinweis-box strong { display: block; margin-bottom: var(--space-2); }

/* ---------- Varianten der Farbsektionen ---------- */
/* Waldgrün-Sektion mit Bild links (Standard: Bild rechts) */
.bio.bild-links .bild { order: -1; }
.bio.bild-links .text { padding-left: 0; padding-right: var(--sektion-halb); }
/* Checkliste in einer Farbsektion */
.bio .gutes, .klappe .gutes { margin-top: var(--space-4); }
.hero .lead .gutes { margin: var(--space-4) 0 var(--space-5); }
.hero .lead .gutes:last-child { margin-bottom: 0; }
.bild-text .gutes { margin: var(--space-4) 0 0; }
.bild-text .gutes + p { margin-top: var(--space-5); }
.bio .text .btn + .btn { margin-left: var(--space-3); }
.bio .gutes li, .klappe .gutes li { color: var(--tinte); } /* Kacheln sind hell – Schrift nicht von der Farbsektion erben */

/* ---------- Seite „Unser Verein“ ---------- */
/* Team: Personen nebeneinander, Foto 4:5, darunter Name, Funktion, Statement */
.team { padding-bottom: var(--sektion); }
.team-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spalten); }
.person .portrait {
  aspect-ratio: 4 / 5; border-radius: var(--radius-l); overflow: hidden; margin: 0 0 var(--space-5);
}
.person .portrait img { width: 100%; height: 100%; object-fit: cover; }
/* Platzhalter, solange kein Foto vorliegt: Initialen auf Palettenfarbe */
.person .portrait.platzhalter {
  display: grid; place-items: center; background: var(--portrait-bg, var(--salbei));
  font: 400 clamp(3rem, 7vw, 6rem)/1 var(--serif); color: var(--wald);
}
/* Platzhalter-Zeichnung statt Foto: Strichzeichnung auf Salbei, unten bündig (die Schultern laufen am Rand aus) */
.person .portrait.zeichnung { background: var(--salbei); padding: 12% 8% 0; }
.person .portrait.zeichnung img { object-fit: contain; object-position: 50% 100%; transform: translateY(3%); }
.person h3 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.person .funktion {
  font: 600 .85rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--erde); margin: 0 0 var(--space-4);
}
.person p:last-child { margin-bottom: 0; }

/* Dank: Farbsektion Waldgrün – links Titel und Text, rechts Kachel-Raster mit den Unterstützern */
.dank { background: var(--wald); padding: var(--sektion) 0; }
.dank .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spalten); align-items: start; }
/* Textspalte bleibt beim Scrollen unter dem Header stehen – nur innerhalb ihrer Sektion (Grid-Container) */
.dank .text-spalte {
  padding-left: var(--sektion-halb);
  position: sticky; top: calc(var(--header-hoehe, 84px) + var(--space-6)); align-self: start;
}
.dank h2 { color: #fff; }
.dank p { color: #CBD6CE; max-width: 38em; }
.dank .text p:last-of-type { margin-bottom: 0; }

/* Kacheln: 2 Spalten im Format 3:2; eine Unterstützer-Kachel mit Text (.gross) steht darunter über beide Spalten */
.logo-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raster); }
.logo-raster li {
  aspect-ratio: 3 / 2; background: #fff; border-radius: var(--radius-l);
  display: grid; place-items: center; padding: var(--space-6);
}
.logo-raster img { max-width: 100%; max-height: 72px; object-fit: contain; }
.logo-raster .nur-name { font: 600 1.25rem/1.2 var(--sans); color: var(--tinte-weich); text-align: center; }
.logo-raster li.gross {
  grid-column: 1 / -1; aspect-ratio: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5);
  padding: var(--sektion-halb);
}
.logo-raster li.gross img { max-height: 120px; max-width: 240px; }
.logo-raster li.gross blockquote { margin: 0; }
.logo-raster li.gross blockquote p { color: var(--tinte-weich); max-width: none; }
.logo-raster li.gross blockquote p:last-child { margin-bottom: 0; }
.logo-raster li.gross cite { display: block; margin-top: var(--space-4); font: 600 .85rem/1.4 var(--sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--erde); }

/* ---------- Spenden-Popup (RaiseNow) ---------- */
html.popup-offen { overflow: hidden; }
.spenden-popup, .medien-popup {
  width: min(640px, 100% - 2 * var(--gutter)); max-height: calc(100dvh - 2 * var(--space-6));
  padding: 0; border: 0; border-radius: var(--radius-l);
  background: var(--papier); color: var(--tinte);
  box-shadow: 0 30px 80px -20px rgba(31, 42, 40, .5);
  overflow: hidden; flex-direction: column;
}
.spenden-popup[open], .medien-popup[open] { display: flex; animation: popup-auf .3s cubic-bezier(.2, .8, .3, 1.2); }
.spenden-popup::backdrop, .medien-popup::backdrop { background: rgba(31, 42, 40, .55); backdrop-filter: blur(4px); }
@keyframes popup-auf { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.popup-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
}
.popup-kopf h2 { font-size: 1.75rem; margin: 0; }
.popup-schliessen {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: var(--radius-pill); background: var(--sand); color: var(--wald); cursor: pointer;
  transition: background-color .2s ease, transform .25s cubic-bezier(.2, .8, .3, 1.2);
}
.popup-schliessen:hover { background: var(--linie); transform: scale(1.04); }
.popup-schliessen svg { width: 20px; height: 20px; }
.popup-inhalt { overflow-y: auto; padding: 0 var(--space-5) var(--space-5); }
.popup-inhalt iframe { display: block; width: 100%; height: 640px; border: 0; background: #fff; border-radius: var(--radius-m); }
/* Medien-Popup: Video/Audio im Format 16:9 */
.medien-popup { width: min(960px, 100% - 2 * var(--gutter)); }
.medien-popup .popup-kopf h2 { font-size: 1.5rem; }
.medien-popup .popup-inhalt iframe { height: auto; aspect-ratio: 16 / 9; background: var(--tinte); }

/* ---------- Kacheln mit Aktion (z. B. Spendemöglichkeiten) ---------- */
.optionen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raster); }
.optionen li {
  --karte-bg: var(--wald); --karte-titel: #fff; --karte-text: #CBD6CE;
  background: var(--karte-bg); border-radius: var(--radius-l);
  padding: var(--sektion-halb); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
}
.optionen li.koralle { --karte-bg: var(--koralle); --karte-titel: #fff; --karte-text: #fff; }
.optionen.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spalten); }
/* Weitere Farben im 5er-Zyklus der Palette */
.optionen li.erde { --karte-bg: var(--erde); --karte-titel: #fff; --karte-text: #F4EEE5; }
.optionen li.salbei { --karte-bg: var(--salbei); --karte-titel: var(--wald); --karte-text: var(--tinte); }
.optionen li.sand { --karte-bg: var(--sand); --karte-titel: var(--wald); --karte-text: var(--tinte-weich); }
.optionen .quelle { font: 600 .85rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--karte-titel); opacity: .8; }
.optionen.drei-spalten h3 { font-size: 1.5rem; }
/* Downloads: ganzflächige Link-Kacheln in Salbei-hell, Datei-Icon oben, Pfeil nach unten */
.downloads { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raster); }
.downloads a {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); height: 100%;
  padding: var(--space-6); background: var(--salbei-hell); border-radius: var(--radius-l); color: var(--wald); text-decoration: none;
  transition: background .2s, transform .25s cubic-bezier(.2, .8, .3, 1.2);
}
.downloads .datei { width: 40px; height: 40px; margin-bottom: var(--space-4); color: var(--wald); }
.downloads .name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; }
.downloads .meta { font: 600 .85rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--erde); }
.downloads .runter { position: absolute; right: var(--space-6); bottom: var(--space-6); width: 24px; height: 24px; color: var(--koralle); transition: transform .25s cubic-bezier(.2, .8, .3, 1.2); }
.downloads a:hover, .downloads a:focus-visible { background: var(--salbei); transform: scale(1.02); }
.downloads a:hover .runter, .downloads a:focus-visible .runter { transform: translateY(4px); }
.downloads a:focus-visible { outline: 2px solid var(--wald); outline-offset: 3px; }
.optionen li.honig { --karte-bg: var(--honig); --karte-titel: var(--wald); --karte-text: var(--tinte); }
.optionen h3 { font-size: 1.75rem; color: var(--karte-titel); margin: 0; }
.optionen li p { margin: 0; color: var(--karte-text); }
.optionen .btn { margin-top: auto; }
.optionen .inhalt { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
/* Kacheln im Hochformat (4:5), Text oben, Button unten */
.optionen.hochformat li { aspect-ratio: 4 / 5; }
/* Sektion direkt nach dem Hero: Abstand kommt vom Hero (--sektion-halb), Bild folgt mit gleichem Abstand */
section.block.nach-hero { padding-top: 0; }
.nach-hero .hero-bild { margin-top: var(--sektion-halb); }
/* Kacheln mit Strichzeichnung (Vorlagen in Illustrationen/): rechts unten, wächst aus der Unterkante */
.optionen li.deko { position: relative; overflow: hidden; }
.optionen li.ganz-klickbar { cursor: pointer; } /* ganze Kachel ist Link (main.js), Button reagiert schon beim Hover über der Fläche */
.optionen li.ganz-klickbar:hover .btn { transform: scale(1.04); }
.optionen li.ganz-klickbar:hover .btn svg { transform: translateX(3px); }
.optionen li.ganz-klickbar:hover .btn-hell { background: #fff; }
.optionen li.ganz-klickbar:hover .btn-wald { background: var(--wald-tief); }
.optionen li.deko > * { position: relative; z-index: 1; }
.optionen li.deko .inhalt { max-width: 58%; }
.optionen li.deko::after { content: ""; position: absolute; right: 4%; top: var(--space-5); bottom: -6%; width: 40%; background: no-repeat right bottom / contain; pointer-events: none; } /* oben Abstand zur Kante, unten wachsen die Linien aus der Kachel */
.optionen li.deko-telefon::after { background-image: url(../img/igel-schritt-anrufen-hell.svg); bottom: var(--space-5); } /* animierte Zeichnung aus «Igel gefunden», sitzt auf dem Boden: unten nicht abschneiden */
.optionen li.deko-haende::after { background-image: url(../img/deko-igel-in-haenden.svg); }
/* Spenden-Kachel mit Herzen: Titel oben, Button unten, Igel in Händen wächst rechts unten aus der Kante, kleine Herzen steigen vom Igel auf */
.optionen li.mit-herzen { justify-content: space-between; gap: var(--sektion-halb); min-height: clamp(260px, 22vw, 340px); }
.optionen li.mit-herzen .inhalt { max-width: 62%; }
.optionen li.mit-herzen::after { background-image: url(../img/deko-igel-in-haenden-v2.svg?v=2); top: auto; right: 5%; bottom: 0; width: 30%; height: auto; aspect-ratio: 699 / 681; background-position: center bottom; } /* Igel in Händen aus der Telefon-Zeichnung (ohne Hörer) */
.optionen li.mit-herzen .herzen, .optionen li.mit-herzen .igel-laecheln { position: absolute; right: 5%; bottom: 0; width: 30%; aspect-ratio: 699 / 681; z-index: 0; pointer-events: none; }
.herzen i { position: absolute; left: 40%; top: 10%; width: 22px; height: 22px; opacity: 0; animation: herz-steigt 5.4s ease-out infinite; }
.herzen svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #F8F4E5; stroke-width: 2.8px; stroke-linejoin: round; stroke-linecap: round; } /* nur Aussenlinie, gleich dick wie die Linien der Zeichnung */
.herzen path { vector-effect: non-scaling-stroke; }
.herzen i:nth-child(2) { left: 52%; top: 4%; width: 16px; height: 16px; animation-delay: .9s; --drift: -18px; }
.herzen i:nth-child(3) { left: 64%; top: 8%; width: 26px; height: 26px; animation-delay: 1.8s; --drift: 12px; }
.herzen i:nth-child(4) { left: 46%; top: 12%; width: 14px; height: 14px; animation-delay: 2.7s; --drift: 20px; }
.herzen i:nth-child(5) { left: 58%; top: 14%; width: 20px; height: 20px; animation-delay: 3.6s; --drift: -12px; }
.herzen i:nth-child(6) { left: 72%; top: 16%; width: 15px; height: 15px; animation-delay: 4.5s; --drift: -8px; }
@keyframes herz-steigt {
  0% { opacity: 0; transform: translate(0, 0) scale(.5) rotate(-8deg); }
  15% { opacity: 1; }
  70% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--drift, 8px), -170px) scale(1.05) rotate(8deg); }
}
/* Hover: mehr Herzen (schneller, dichter) und der Igel lächelt (Lächeln zeichnet sich an der Schnauze) */
.herzen i.mehr { display: none; animation-duration: 3.2s; }
.mit-herzen:hover .herzen i.mehr, .mit-herzen:focus-within .herzen i.mehr { display: block; }
.herzen i.mehr:nth-child(7) { left: 36%; top: 14%; width: 18px; height: 18px; animation-delay: 0s; --drift: -16px; }
.herzen i.mehr:nth-child(8) { left: 50%; top: 6%; width: 24px; height: 24px; animation-delay: .4s; --drift: 14px; }
.herzen i.mehr:nth-child(9) { left: 62%; top: 10%; width: 15px; height: 15px; animation-delay: .8s; --drift: -8px; }
.herzen i.mehr:nth-child(10) { left: 74%; top: 12%; width: 21px; height: 21px; animation-delay: 1.2s; --drift: 18px; }
.herzen i.mehr:nth-child(11) { left: 44%; top: 8%; width: 13px; height: 13px; animation-delay: 1.6s; --drift: 6px; }
.herzen i.mehr:nth-child(12) { left: 56%; top: 16%; width: 19px; height: 19px; animation-delay: 2s; --drift: -20px; }
.herzen i.mehr:nth-child(13) { left: 68%; top: 6%; width: 16px; height: 16px; animation-delay: 2.4s; --drift: 10px; }
.herzen i.mehr:nth-child(14) { left: 48%; top: 12%; width: 22px; height: 22px; animation-delay: 2.8s; --drift: -4px; }
.igel-laecheln svg { display: block; width: 100%; height: 100%; overflow: visible; }
.igel-laecheln path { fill: none; stroke: #F8F4E5; stroke-width: 5.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s cubic-bezier(.3, .7, .3, 1); } /* verlängert den bestehenden Mundwinkel nach oben (wächst aus der Zeichnung heraus) */
.mit-herzen:hover .igel-laecheln path, .mit-herzen:focus-within .igel-laecheln path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .herzen { display: none; } .igel-laecheln path { transition: none; } }
.optionen li.deko-wille::after { background-image: url(../img/deko-igel-letzter-wille.svg); }
.optionen li.deko-spende::after { background-image: url(../img/deko-igel-hilfe-spenden.svg); }
.optionen li.deko-shop::after { background-image: url(../img/deko-igel-hilfe-shop.svg); }
/* Hochformat-Kacheln: Text oben über die volle Breite, Zeichnung im unteren Teil rechts */
.optionen.hochformat li.deko .inhalt { max-width: none; }
.optionen.hochformat li.deko:not(.deko-haende)::after { position: static; order: 1; flex: 1 1 auto; align-self: stretch; width: auto; height: auto; min-height: 110px; margin-bottom: var(--space-5); background-position: center; } /* füllt den Raum zwischen Text und Button, überlappt nie */
.optionen.hochformat li.deko .btn { order: 2; }
/* Kachel darf über 4:5 hinaus wachsen, statt Inhalt abzuschneiden: Rundung per clip-path statt overflow */
.optionen.hochformat li.deko { overflow: visible; clip-path: inset(0 round var(--radius-l)); min-width: 0; }
.optionen li.deko-garten::after { background-image: url(../img/deko-igel-im-garten.svg); width: 46%; }
/* Interaktive Variante (Startseite): Zeichnung als inline-SVG; berührt man den Igel mit der Maus, rollt er sich zur Kugel zusammen */
.optionen li.deko-garten.interaktiv::after { content: none; }
.optionen li.deko > .garten-igel { position: absolute; right: 4%; top: var(--space-5); width: 46%; height: calc(106% - var(--space-5)); z-index: 0; overflow: visible; pointer-events: none; }
.garten-igel .gi-ziel { pointer-events: all; cursor: pointer; }
.garten-igel .gi-auge { transform-box: fill-box; transform-origin: center; animation: igel-blinzeln 5s infinite; } /* blinzelt ab und zu wie die Igel in «Igel gefunden» (nur im Ausgangsbild) */
@keyframes igel-blinzeln { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@media (prefers-reduced-motion: reduce) { .garten-igel .gi-auge { animation: none; } }
/* Bild-für-Bild-Animation (wie Zeichentrick): immer nur ein Bild sichtbar, kurze Überblendung glättet die Wechsel */
.gi-bild { opacity: 0; transition: opacity .07s linear; }
.gi-bild.ist-aktiv { opacity: 1; }

/* ---------- Info-Balken & Footer ---------- */
.info { background: var(--salbei-hell); padding: var(--sektion-halb) 0; }
.info .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.info .label { font: 600 .85rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--erde); margin-bottom: var(--space-2); } /* Bezeichnungen als normaler Text, keine Überschriften */
.info p { margin: 0; font-size: 1.0625rem; }
.info p.klein { margin-bottom: var(--space-2); }
.info .gruppe + .gruppe { margin-top: var(--space-5); }
.info a { text-decoration: none; }
.info .kontakt { display: inline-flex; align-items: center; gap: var(--space-2); }
.info .kontakt svg { flex: none; width: 20px; height: 20px; color: var(--erde); }
.info a:hover { text-decoration: underline; }
.info .klein { color: var(--tinte-weich); font-size: .9375rem; }

footer.site { background: var(--wald-tief); color: #B9C5BE; font-size: .9375rem; }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); }
footer.site nav { display: flex; gap: var(--space-5); }
footer.site a { text-decoration: none; }
footer.site a:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .optionen, .optionen.zwei { grid-template-columns: 1fr; max-width: 40rem; margin-inline: auto; }
  .downloads { grid-template-columns: 1fr; max-width: 40rem; margin-inline: auto; }
  .stationen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notfallnummern ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leistungen li { flex-basis: calc((100% - var(--raster)) / 2); }
  .leistungen.drei { max-width: 40rem; margin-inline: auto; }
  .leistungen.drei li { flex-basis: 100%; }
  nav.haupt { display: none; }
  .menu-btn { display: block; }
  .liste-tun { grid-template-columns: repeat(2, 1fr); }
  .liste-tun li:last-child { grid-column: span 2; }
  .info .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .leistungen { max-width: 40rem; margin-inline: auto; }
  .leistungen li { flex-basis: 100%; } /* untereinander, sobald zwei Spalten zu eng werden */
  .leistungen:not(.drei) { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; } /* «Unsere Arbeit umfasst vor allem»: alle Kacheln so hoch wie die höchste */
  .kontakt-raster, .unterstuetzung .wrap { grid-template-columns: minmax(0, 1fr); }
  .unterstuetzung .text-spalte { position: static; }
  .notfall .wrap, .behoerden { grid-template-columns: minmax(0, 1fr); }
  .notfall-schritte li:has(.btn) .schritt-bild { margin-bottom: 0; } /* schmal: Zeichnung über dem Button statt daneben */
  .regionen-raster { grid-template-columns: minmax(0, 1fr); }
  .regionen-raster .regionen-liste, .regionen-raster .sektion-hinweis { grid-column: 1; grid-row: auto; }
  .regionen-karte { height: 340px; }
  .regionen-liste { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } /* unter ~340 px einspaltig */
  .stationen, .stationen.zwei { grid-template-columns: minmax(0, 1fr); }
  .station-karte.mit-logo .kontakt-zeilen { padding-right: 0; }
  .station-logo { position: static; align-self: flex-end; width: 80px; height: 80px; margin-top: calc(var(--space-2) * -1); }
  .notfallnummern ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .hero-kontakt .kontakt-raster { row-gap: var(--sektion-halb); }
  .hero-recht .kontakt-links { position: static; }
  br.nur-breit { display: none; } /* fester Umbruch nur auf breiten Bildschirmen */
  .optionen li.deko .inhalt { max-width: none; }
  .optionen li.deko::after { width: 46%; top: auto; height: 48%; bottom: -4%; }
  .optionen li.deko-garten::after { width: 38%; }
  .optionen li.deko > .garten-igel { width: 38%; top: auto; height: 48%; bottom: -4%; }
  .optionen li.deko-telefon::after { bottom: var(--space-4); }
  .optionen li.mit-herzen .inhalt { max-width: none; }
  .optionen li.mit-herzen::after, .optionen li.mit-herzen .herzen, .optionen li.mit-herzen .igel-laecheln { width: 31%; height: auto; right: 4%; bottom: 0; }
  :root { --karte-hoehe: 320px; }
  .aufruf-band { flex-direction: column; align-items: center; text-align: center; }
  .aufruf-band.mit-bild { flex-direction: column; }
  .aufruf-band .band-inhalt { align-items: center; }
  .aufruf-band .band-bild { order: -1; width: 120px; margin-block: 0; }
  .akzenttext { max-width: none; }
  .hinweise { grid-template-columns: 1fr; }
  .bild-text .wrap { grid-template-columns: 1fr; }
  .bild-text.mit-kacheln.bild-rechts .bild, .bild-text.mit-kacheln:not(.bild-rechts) .bild { margin-left: 0; margin-right: 0; }
  .bild-text .bild, .bild-text.bild-rechts .bild { order: 2; }
  .bild-text .bild img { aspect-ratio: 4 / 3; }
  .bild-kacheln { flex: none; min-height: 0; grid-auto-rows: auto; }
  .bild-kacheln li { aspect-ratio: 1; }
  .bio.bild-links .bild { order: 0; }
  .bio.bild-links .text { padding-right: 0; }
  .team-raster { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; }
  .dank .wrap { grid-template-columns: 1fr; }
  .dank .text-spalte { padding-left: 0; position: static; }
  main h2 { text-align: center; }
  .bio .wrap, .klappe .wrap, .helfen .wrap { grid-template-columns: 1fr; }
  .hero-kopf { grid-template-columns: 1fr; grid-template-areas: "titel" "lead" "ctas"; row-gap: var(--space-5); }
  .hero-links { display: contents; }
  .hero h1 { grid-area: titel; }
  .hero .lead { justify-self: start; }
  .hero h1 { margin-bottom: 0; }
  .hero-bild img { height: 340px; }
  .hero-band { flex-direction: column; align-items: flex-start; gap: var(--space-5); padding: var(--space-5); }
  .station { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 180px 180px; }
  .station figure:first-child { grid-column: span 2; grid-row: auto; }
  .bio .text { padding-left: 0; }
  .bio .bild { min-height: 280px; }
  .klappe .bild { min-height: 280px; }
  .klappe .text, .klappe.bild-rechts .text { padding-right: 0; padding-left: 0; }
  .klappe .bild { order: 0; }
  .helfen .bild { display: none; }
  .topbar .oeff { display: none; }
}
@media (max-width: 520px) {
  .notfallnummern ul { grid-template-columns: minmax(0, 1fr); }
  .hero h1.lange-woerter { font-size: clamp(1.75rem, 8.4vw, 2.6rem); } /* «Wissensplattformen» passt ohne Trennung auf eine Zeile (weiche Trennstriche stören die Wort-Animation) */
  .formular .feld.halb, .formular .feld.drittel, .formular .feld.zweidrittel { grid-column: span 6; }
  .formular-karte { padding: var(--space-5); }
  .formular-karte h3 { font-size: 1.5rem; }
  .schritte { grid-template-columns: 1fr; }
  .leistungen li { flex-basis: 100%; flex-direction: row; align-items: flex-start; padding: var(--space-5) var(--space-4); }
  .leistungen .ic { flex: none; }
  .logo-raster li { padding: var(--space-4); }
  .logo-raster li.gross { padding: var(--space-5); }
  header.site .btn-spenden { display: none; }
  .liste-tun, .gutes { grid-template-columns: 1fr; }
  .liste-tun li:last-child { grid-column: auto; }
  .liste-tun { grid-auto-rows: 1fr; } /* alle Kacheln so hoch wie die höchste */
  .info .wrap { grid-template-columns: 1fr; gap: var(--space-5); }
  .hero .ctas { flex-direction: column; }
  .hero .ctas .btn { justify-content: space-between; }
  .liste-tun li { flex-direction: row; align-items: center; padding: var(--space-4); gap: var(--space-4); }
  .liste-tun .ic { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .spenden-popup[open], .medien-popup[open] { animation: none; }
  .formular-karte.schimmern, .formular-karte.schimmern::before { animation: none; }
  .formular-karte.schimmern::before { opacity: 1; background: var(--koralle); } /* ruhige Hervorhebung statt Bewegung */
  .btn:hover, .optionen li.ganz-klickbar:hover .btn, .gutes li.spende a:hover, .zitat-kachel:hover { transform: none; }
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}