/* =====================================================================
   styles/home.css
   Bausteine, die auf der Startseite entstanden sind und inzwischen auch
   auf /presse, /ueber-uns und /anfahrt gebraucht werden (Hero-Split,
   Presse-Bänder, Ursula-Block, Lehrpfad-Spotlight, Entstehung, Danke).

   Vorher steckte all das als <style>-Block direkt in index.html – jetzt
   liegt es in einer Datei, die der Browser zwischenspeichern kann.
   ===================================================================== */

/* ==========================================================
   NEUES FARBSYSTEM – Sonnen-Gelb (warmer Honig) + Tief-Bark
   ========================================================== */
:root {
  --sun: #F5C13C;            /* Hauptfarbe: warmes Honig-Gelb */
  --sun-soft: #F8D571;
  --sun-deep: #D89A1A;       /* Hover */
  --sun-bg: #FBE5A8;         /* helles Gelb für sanfte Flächen */
  --ink: #2B1F12;            /* tiefes Bark/Schwarzbraun */
  --ink-soft: #4A3520;
  --cream-warm: #FDF6E3;     /* sehr helles Creme */
  --leaf: #4A5D2E;           /* gedämpftes Olive für Hinweise */
  --accent-red: #C13B2A;     /* Notfall-Akzent in der Palette */
  --accent-red-soft: #E88C7D; /* zartes Rot, hell genug fuer dunkle Flaechen */
  --pumpkin: #E07A2F;        /* warmes Orange: Aktuell-Teaser der Startseite */
}

body { background: var(--cream-warm); color: var(--ink); }

/* === Aktuell-Teaser: Igelsuchspiel (erster Punkt der Startseite) ===
   Stand früher als Banner über dem Header. Jetzt ein eigener Abschnitt
   direkt unter dem Hero: warmes Orange, damit er sich deutlich von den
   creme und gruenen Flaechen ringsum abhebt, plus ein pulsierendes
   "Neu"-Kennzeichen.

   WICHTIG: Auf dem hellen Orange ist creme Text zu schwach (nur 2,8:1).
   Deshalb laeuft der ganze Block auf dunklem Bark-Text und die Rahmen,
   das Kennzeichen und der Fotorahmen sind dunkel statt gelb – Gelb auf
   Orange verschwimmt (1,8:1). */
.neu-teaser {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 251, 243, 0.22), transparent 55%),
    var(--pumpkin);
  color: var(--ink);
  padding: 44px 0 48px;
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
}
.neu-teaser-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: center;
}

/* Auffaelliges Kennzeichen: dunkle Pille mit pulsierendem gelben Punkt. */
.nt-flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 7px 18px 7px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #FFFBF3;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 0 0 6px rgba(43, 31, 18, 0.18);
}
.nt-flag-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 0 rgba(245, 193, 60, 0.8);
  animation: nt-pulse 1.8s ease-out infinite;
}
@keyframes nt-pulse {
  70% { box-shadow: 0 0 0 12px rgba(245, 193, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 193, 60, 0); }
}
.nt-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--ink);
}
.nt-lead {
  margin: 0 0 22px;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.55;
  max-width: 46ch;
}
.nt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.nt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap-min);
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
}
.nt-btn--primary {
  background: #FFFBF3;
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(43, 31, 18, 0.26);
}
.nt-btn--primary:hover,
.nt-btn--primary:focus-visible { background: var(--ink); color: #FFFBF3; }
.nt-btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid rgba(43, 31, 18, 0.55);
}
.nt-btn--ghost:hover,
.nt-btn--ghost:focus-visible { background: rgba(43, 31, 18, 0.12); color: var(--ink); }
.nt-btn .nt-arrow { transition: transform 0.2s ease; }
.nt-btn:hover .nt-arrow { transform: translateX(3px); }

.nt-photo { margin: 0; }
.nt-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
  border: 4px solid var(--ink);
  box-shadow: 0 14px 34px rgba(43, 31, 18, 0.28);
}
.nt-photo figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .nt-flag-pulse { animation: none; }
  .nt-btn .nt-arrow { transition: none; }
  .nt-btn:hover .nt-arrow { transform: none; }
}
@media (max-width: 900px) {
  .neu-teaser-grid { grid-template-columns: 1fr; gap: 26px; }
  .neu-teaser { padding: 34px 0 38px; }
}

/* === Aktuelles-Band: eigene Kurzmeldungen vom Igelpark ===
   Sitzt zwischen dem orangen Aktuell-Teaser und dem gruenen Ziele-Band,
   deshalb eine ruhige Papierflaeche als Atempause. Die Meldungen sind
   bewusst Karten mit hartem Schatten – dieselbe Formensprache wie die
   Presse-Karten weiter unten, nur ohne Zeitungsbezug. */
.aktuell-band {
  background:
    radial-gradient(circle at 88% 12%, rgba(245, 193, 60, 0.18), transparent 58%),
    var(--paper);
  padding: 56px 0 62px;
  border-bottom: 3px solid var(--ink);
}
.ab-head {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 30px;
}
.ab-eyebrow {
  background: var(--leaf);
  color: var(--cream-warm);
  margin-bottom: 0;
}
.ab-title {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 16px 0 0;
}
.ab-title em {
  background: var(--sun);
  color: var(--ink);
  padding: 2px 12px;
  border-radius: 10px;
  font-style: italic;
  display: inline-block;
  transform: rotate(-1deg);
}
.ab-sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.ab-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
}
.ab-item {
  background: var(--cream-warm);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 24px 26px;
}
/* Die oberste (neueste) Meldung darf ein Foto daneben haben. */
.ab-item--lead {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: center;
}
.ab-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-red-deep);
}
.ab-flag {
  background: var(--accent-red);
  color: var(--cream-warm);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.ab-body h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 10px;
}
.ab-body p {
  margin: 0 0 12px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.ab-actions { margin: 0; }
.ab-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap-min);
  font-weight: 800;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ab-link:hover,
.ab-link:focus-visible { color: var(--accent-red-deep); }

.ab-media { margin: 0; }
.ab-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 3px solid var(--ink);
}
.ab-media figcaption {
  margin-top: 10px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.ab-foot {
  margin: 26px 0 0;
  text-align: center;
}
.ab-foot a {
  font-weight: 800;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (max-width: 860px) {
  .ab-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .ab-item--lead { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 520px) {
  .aktuell-band { padding: 42px 0 48px; }
  .ab-item { padding: 20px 20px; box-shadow: 4px 4px 0 var(--ink); }
}

/* === Header & Banner farblich anpassen === */
.saison-banner {
  background: var(--sun) !important;
  color: var(--ink) !important;
}
.site-header { background: rgba(253, 246, 227, 0.96) !important; border-bottom: 1px solid rgba(43, 31, 18, 0.08); }
.nav a { color: var(--ink); }
.nav a.active { background: var(--ink); color: var(--sun); }
.nav a:hover { color: var(--ink); background: var(--sun-bg); }
.logo-text strong { color: var(--ink); }

.btn-primary {
  background: var(--ink);
  color: var(--sun);
}
.btn-primary:hover { background: var(--ink-soft); color: var(--sun); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: var(--sun); }
@keyframes pillPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 31, 18, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(43, 31, 18, 0); }
}

/* ============ SECTION-HEADERS NEU ============ */
.section-header { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.section-header .eyebrow {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--sun-deep);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.section-header h2 { color: var(--ink); }
.section-header p { color: var(--ink-soft); font-size: 1.1rem; }

/* ============ URSULA – jetzt ZUERST ============ */
.ursula-first {
  background: var(--cream-warm);
  padding: 90px 0;
  position: relative;
}
.ursula-grid-new {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: center;
}
.ursula-photo-block {
  position: relative;
  aspect-ratio: 4/5;
  max-width: 480px;
}
.ursula-photo-block .frame {
  position: absolute;
  inset: 0;
  background: var(--sun);
  border-radius: 24px;
  transform: rotate(-2deg);
  z-index: 1;
}
.ursula-photo-block .photo {
  position: absolute;
  inset: 12px;
  border-radius: 20px;
  background: url('/cdn-img/cropped/ursula-ertl.jpg') top center/cover no-repeat;
  border: 4px solid var(--ink);
  z-index: 2;
  box-shadow: 0 16px 40px rgba(43, 31, 18, 0.18);
}

/* Auf dem Handy steht das Foto über dem Text und bleibt handlich groß. */
@media (max-width: 600px) {
  .ursula-grid-new { grid-template-columns: 1fr; }
  .ursula-photo-block {
    width: min(100%, 300px);
    max-width: 300px;
    margin: 0 auto 24px;
  }
  .ursula-photo-block .photo { inset: 7px; }
}
.ursula-text .ursula-eyebrow {
  display: inline-block;
  background: var(--ink);
  color: var(--sun);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ursula-text h1 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 24px;
  letter-spacing: -0.02em;
}
.ursula-text h1 .highlight {
  background: var(--sun);
  padding: 2px 12px;
  border-radius: 8px;
  font-style: italic;
}
.ursula-quote-bold {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--ink);
  border-left: 4px solid var(--sun);
  padding-left: 20px;
  margin: 24px 0;
}
.ursula-text p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.65; }
.ursula-sig {
  font-family: 'Caveat', cursive;
  font-size: 1.9rem;
  color: var(--sun-deep);
  margin: 16px 0 24px;
}
.ursula-cta { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .ursula-grid-new {
    grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr);
    gap: 28px;
    align-items: start;
  }
  .ursula-photo-block { width: 100%; max-width: 300px; margin: 0; }
}
@media (max-width: 600px) {
  .ursula-first { padding: 64px 0; }
  .ursula-grid-new {
    grid-template-columns: minmax(105px, 0.58fr) minmax(0, 1.42fr);
    gap: 16px;
  }
  .ursula-photo-block .photo { inset: 7px; border-radius: 14px; }
  .ursula-photo-block .frame { border-radius: 16px; }
  .ursula-text .ursula-eyebrow { font-size: 0.74rem; padding: 5px 9px; margin-bottom: 10px; }
  .ursula-text h1 { font-size: clamp(1.65rem, 8vw, 2.2rem); margin-bottom: 14px; }
  .ursula-text p { font-size: 0.9rem; line-height: 1.52; }
  .ursula-quote-bold { font-size: 1.05rem; padding-left: 12px; margin: 18px 0; }
  .ursula-sig { font-size: 1.45rem; }
  .ursula-cta .btn { width: 100%; justify-content: center; padding-inline: 10px; font-size: 0.78rem; }
}

/* ============ LEHRPFAD-STATIONEN ============ */
.lehrpfad-band {
  background: var(--ink);
  color: var(--cream-warm);
  padding: 90px 0;
  position: relative;
}
.lehrpfad-band .section-header h2 { color: var(--sun); }
.lehrpfad-band .section-header .eyebrow { color: var(--sun-soft); }
.lehrpfad-band .section-header p { color: rgba(253, 246, 227, 0.85); }

.station-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(43,31,18,0.12);
  border: 1px solid rgba(43,31,18,0.12);
  border-radius: 18px;
  overflow: hidden;
}
.station-card {
  background: var(--cream-warm);
  color: var(--ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  transition: background 0.2s, color 0.2s;
  position: relative;
}
.station-card:hover {
  background: var(--ink);
  color: var(--cream-warm);
  text-decoration: none;
  z-index: 1;
}
.station-card:hover h3,
.station-card:hover .sc-tagline,
.station-card:hover .sc-cat { color: var(--cream-warm); opacity: 1; }
.station-card:hover .sc-arrow { color: var(--sun); }

/* Kopfzeile: Nummer + Kategorie */
.station-card .sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.station-card .sc-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--sun-deep);
  line-height: 1;
}
.station-card:hover .sc-num { color: var(--sun); }
.station-card .sc-cat {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(43,31,18,0.07);
  padding: 3px 9px;
  border-radius: 999px;
}
.station-card:hover .sc-cat {
  background: rgba(253,246,227,0.15);
  color: rgba(253,246,227,0.75);
}
.station-card .sc-body { flex: 1; display: flex; flex-direction: column; }
.station-card h3 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 7px;
  color: var(--ink);
  font-family: inherit;
  font-style: normal;
  line-height: 1.25;
}
.station-card .sc-tagline {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0 0 14px;
  flex: 1;
  line-height: 1.45;
}
.station-card .sc-arrow {
  font-size: 0.74rem;
  color: var(--sun-deep);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: flex-start;
  transition: transform 0.2s;
}
.station-card:hover .sc-arrow { transform: translateX(4px); }

@media (max-width: 900px) { .station-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .station-grid { grid-template-columns: 1fr; } }

.lehrpfad-cta-row {
  text-align: center;
  margin-top: 50px;
}
.lehrpfad-cta-row .btn-sun {
  background: var(--sun);
  color: var(--ink);
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.lehrpfad-cta-row .btn-sun:hover { background: var(--sun-soft); color: var(--ink); text-decoration: none; transform: translateY(-2px); }

/* =====================================================
   #StopptKinderarmut-INSPIRIERTER STIL
   ===================================================== */
:root {
  --mint: #6FB8B0;        /* Mintgrün */
  --mint-deep: #4E928A;
  --yellow-flash: #FAEC30; /* Knall-Gelb */
  --pink-flash:  #FF0080;  /* Pink-Magenta */
  --orange-flash: #FF8C00;
  --black-flash: #1A1A1A;  /* Tief-Schwarz */
}

/* Top-Farbleiste (4 dünne Streifen)
   Die Streifen zeigen dieselben vier Farben, mit denen auch die
   Bereiche in der Navigation hinterlegt sind: Honiggelb (Lehrpfad,
   Kinder, Shop), Salbei (Igelwissen, Anfahrt), Waldgrün (Naturgarten,
   Unterstützen) und Terrakotta (Über uns). So gehört der Kopfbereich
   farblich zusammen. */
.top-stripe-bar {
  display: flex;
  height: 7px;
  width: 100%;
}
.top-stripe-bar > div { flex: 1; }
.top-stripe-bar .s-yellow { background: var(--color-honey); }
.top-stripe-bar .s-orange { background: var(--color-sage); }
.top-stripe-bar .s-pink   { background: var(--color-forest); }
.top-stripe-bar .s-mint   { background: var(--color-terracotta); }

/* Vertikaler Schriftzug rechts am Rand */
.side-tag-vertical {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: 'Anton', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  opacity: 0.5;
  pointer-events: none;
  z-index: 5;
  display: none; /* nur ab tablet */
}
@media (min-width: 900px) { .side-tag-vertical { display: block; } }

/* ===========================================
   HERO 2.0 – Photo Split (hell & freundlich)
   =========================================== */
.hero-split {
  position: relative;
  background:
    radial-gradient(ellipse at 0% 100%, var(--sun-bg) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 0%, var(--sun) 0%, transparent 50%),
    var(--cream-warm);
  color: var(--ink);
  padding: 80px 0 0;
  overflow: hidden;
}
.hero-split.hero-ursula {
  /* Statt einer flachen gelben Fläche ein warmer Lichtverlauf: oben Creme wie
     im Header, ein sonniger Kern hinter dem Titelbild, nach unten wieder
     ruhiger. So bekommt der Hero Tiefe und das Foto einen Lichtraum. */
  background:
    radial-gradient(120% 62% at 50% 24%,
      rgba(248, 213, 113, 0.95) 0%,
      rgba(251, 229, 168, 0.60) 48%,
      rgba(251, 229, 168, 0) 78%),
    linear-gradient(180deg,
      var(--cream-warm) 0%,
      var(--sun-bg) 30%,
      var(--sun-bg) 66%,
      #F8DFA2 100%) !important;
  padding-top: 0;
}
.hero-split .container { position: relative; z-index: 3; }

.hero-ursula-photo {
  position: relative;
  z-index: 2;
  /* Das Titelbild läuft nicht mehr randlos über die ganze Fläche, sondern
     sitzt als zentriertes Bildfeld mittig auf dem warmen Hintergrund. */
  width: min(100% - 2 * var(--page-gutter), 680px);
  margin: 44px auto 0;
  /* Leicht liegendes Format (5:4): In diesem Ausschnitt sind Ursula und der
     Igel auf ihren Händen gemeinsam vollständig zu sehen. Das Seitenverhältnis
     gilt auf allen Geräten – Desktop, Tablet und Handy zeigen deshalb genau
     denselben Ausschnitt, nur kleiner. */
  aspect-ratio: 5 / 4;
  /* Kein harter Rahmen und kein Schlagschatten mehr – die Unterkante des
     Bildes läuft weich in den Hintergrund aus (siehe Maske am img). */
  overflow: visible;
}
/* Warmer Lichtschein hinter dem Foto, damit das weiche Bildfeld nicht
   im Nichts hängt, sondern aus dem Hintergrund heraus zu leuchten scheint. */
.hero-ursula-photo::before {
  content: "";
  position: absolute;
  inset: -10% -9% -12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(216, 154, 26, 0.34) 0%,
    rgba(216, 154, 26, 0.16) 52%,
    rgba(216, 154, 26, 0) 100%);
  filter: blur(22px);
  pointer-events: none;
}
.hero-ursula-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Das Bild kommt aus der Image CDN bereits als fertiger 5:4-Ausschnitt
     (ursula-titelseite-hero.jpg, 1200x960 aus dem Original), in dem Kopf,
     Gesicht, Igel und die behandschuhten Hände vollständig liegen. Es wird
     hier also nicht noch einmal beschnitten. Der Fokuspunkt sitzt trotzdem
     oben: Sollte das Bildfeld durch Rundung je ein paar Pixel vom 5:4
     abweichen, geht die Differenz unten verloren und nie am Kopf. */
  object-position: center top;
  border-radius: 30px;
  /* Verlauf nach außen: die Unterkante löst sich weich in den warmen
     Hintergrund auf, statt als harte Bildkante über der Headline zu stehen.
     Ein Maskenlayer genügt – kein mask-composite nötig. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}

.hero-ursula .hero-split-grid {
  grid-template-columns: minmax(0, 760px);
  min-height: auto;
}
.hero-ursula .hs-text {
  /* Kompakter als zuvor (56px/72px), damit Notruf-Button und Kennzahlen
     unmittelbar unter dem Titelbild sichtbar werden. Der weiche Bildauslauf
     liefert schon Luft nach oben, daher nur wenig Innenabstand. */
  padding: 18px 0 48px;
  text-shadow: none;
}
.hero-ursula .hs-text h1,
.hero-ursula .hs-text p.hs-lead {
  color: var(--ink);
}
.hero-ursula .hs-text h1 {
  max-width: 610px;
  font-size: clamp(2.8rem, 5.6vw, 4.9rem);
}
.hero-ursula .hs-text p.hs-lead { max-width: 600px; }
.hero-ursula .hs-btn-ghost {
  color: var(--ink);
  border-color: var(--ink);
  background: transparent;
}
.hero-ursula .hs-btn-ghost:hover {
  background: var(--cream-warm);
  color: var(--ink);
}
.hero-ursula .hs-btn-sun { box-shadow: 0 8px 22px rgba(24, 29, 25, 0.28); }
.hero-ursula .hero-shop-link {
  color: var(--ink) !important;
  background: rgba(253, 246, 227, 0.72) !important;
  border-color: rgba(43, 31, 18, 0.22) !important;
}
.hero-ursula .hero-stats {
  width: fit-content;
  padding: 20px 24px;
  border: 1px solid rgba(253, 246, 227, 0.32);
  border-radius: 18px;
  background: rgba(24, 29, 25, 0.72);
  backdrop-filter: blur(8px);
  text-shadow: none;
}
.hero-ursula .hero-stats .hs-stat strong { color: var(--sun); }
.hero-ursula .hero-stats .hs-stat span { color: var(--cream-warm); }

.hero-split-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  min-height: 600px;
}
@media (max-width: 900px) {
  .hero-split-grid { grid-template-columns: 1fr; min-height: auto; }
  /* Mobil bleibt das zentrierte Bildfeld etwas kompakter, damit der Notruf
     ohne langes Scrollen erreichbar ist. */
  .hero-ursula-photo {
    width: min(100% - 2 * var(--page-gutter), 480px);
    margin-top: 26px;
  }
  .hero-ursula-photo::before { inset: -7% -6% -9%; filter: blur(16px); }
  .hero-ursula-photo img { border-radius: 22px; }
  .hero-ursula .hero-split-grid { min-height: auto; }
  .hero-ursula .hs-text {
    padding: 14px 0 44px;
    text-shadow: none;
  }
  .hero-ursula .hs-text h1,
  .hero-ursula .hs-text p.hs-lead { color: var(--ink); }
  .hero-ursula .hs-btn-ghost {
    color: var(--ink);
    border-color: var(--ink);
    background: transparent;
  }
  .hero-ursula .hero-shop-link {
    color: var(--ink) !important;
    background: rgba(253, 246, 227, 0.72) !important;
    border-color: rgba(43, 31, 18, 0.22) !important;
  }
}

.hs-text { padding: 40px 0; }
.hs-eyebrow {
  display: inline-block;
  background: var(--accent-red);
  color: var(--cream-warm);
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hs-text h1 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 5.6rem);
  line-height: 0.98;
  color: var(--ink);
  margin: 0 0 24px;
  letter-spacing: -0.025em;
}
.hs-text h1 span.sun-mark {
  background: var(--accent-red);
  color: var(--cream-warm);
  padding: 4px 14px;
  border-radius: 10px;
  display: inline-block;
  transform: rotate(-1.5deg);
}
.hs-text p.hs-lead {
  font-size: 1.18rem;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 520px;
  line-height: 1.55;
}
.hs-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hs-btn-red {
  background: var(--accent-red);
  color: var(--cream-warm);
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 22px rgba(193, 59, 42, 0.30);
}
.hs-btn-red:hover { background: var(--accent-red-deep); color: var(--cream-warm); transform: translateY(-2px); text-decoration: none; }
.hs-btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--ink);
  transition: all 0.2s;
}
.hs-btn-ghost:hover { background: var(--ink); color: var(--sun); text-decoration: none; }
.hs-btn-sun {
  background: var(--sun);
  color: var(--ink);
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 22px rgba(245, 193, 60, 0.40);
  border: 2px solid transparent;
}
.hs-btn-sun:hover { background: #e8b12a; color: var(--ink); transform: translateY(-2px); text-decoration: none; box-shadow: 0 12px 28px rgba(245, 193, 60, 0.55); }

/* Fabrik-Linien im Hintergrund */
.hero-split .geo-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  z-index: 1;
}

/* Hero-Stats unten */
.hero-stats {
  display: flex;
  gap: 48px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 2px dashed rgba(43, 31, 18, 0.20);
  flex-wrap: wrap;
}
.hero-stats .hs-stat strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--accent-red);
  line-height: 1;
}
.hero-stats .hs-stat span {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 6px;
  display: block;
}


/* ============ EMERGENCY-CTA ============ */
.emergency-cta {
  background: var(--accent-red);
  color: var(--cream-warm);
  border-radius: 28px;
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}
.emergency-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 90% 20%, rgba(255,255,255,0.12), transparent 40%);
  pointer-events: none;
}
.emergency-cta h2 { color: var(--cream-warm); margin-bottom: 14px; font-family: 'Fraunces', serif; font-style: italic; }
.emergency-cta p { font-size: 1.15rem; opacity: 0.95; max-width: 620px; margin: 0 auto 28px; }
.emergency-cta .phone-big {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--cream-warm);
  color: var(--accent-red);
  padding: 20px 36px;
  border-radius: 999px;
  font-family: 'Fraunces', serif;
  font-size: 1.8rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
}
.emergency-cta .phone-big:hover { transform: translateY(-3px) scale(1.02); text-decoration: none; color: var(--accent-red); }

/* ============ DANKESCHÖN ============ */
.thanks-band {
  background: var(--ink);
  color: var(--cream-warm);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.thanks-band::before,
.thanks-band::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.thanks-band::before {
  width: 430px;
  height: 430px;
  top: -240px;
  right: -80px;
  background: var(--sun);
  opacity: 0.14;
}
.thanks-band::after {
  width: 300px;
  height: 300px;
  bottom: -190px;
  left: -90px;
  background: var(--leaf);
  opacity: 0.18;
}
.thanks-band .container { position: relative; z-index: 2; }
.thanks-heading {
  max-width: 820px;
  margin-bottom: 48px;
}
.thanks-heading .eyebrow {
  background: var(--sun);
  color: var(--ink);
}
.thanks-heading h2 {
  color: var(--cream-warm);
  font-family: 'Fraunces', serif;
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-style: italic;
  line-height: 0.98;
  margin: 20px 0 18px;
}
.thanks-heading h2 em {
  color: var(--sun);
  font-style: italic;
}
.thanks-heading p {
  color: rgba(253, 246, 227, 0.76);
  font-size: 1.12rem;
  line-height: 1.65;
  margin: 0;
}
.thanks-surface {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
  gap: 22px;
  align-items: start;
}
.thanks-panel {
  background: var(--cream-warm);
  color: var(--ink);
  border: 2px solid var(--sun);
  border-radius: 28px;
  padding: clamp(26px, 4vw, 42px);
  box-shadow: 12px 14px 0 rgba(245, 193, 60, 0.2);
}
.thanks-panel.communities {
  background: var(--sun-bg);
  border-color: var(--cream-warm);
  margin-top: 46px;
  transform: rotate(0.7deg);
}
.thanks-panel-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 12px;
  border-bottom: 2px solid rgba(43, 31, 18, 0.14);
}
.thanks-panel-mark {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-red);
  color: var(--cream-warm);
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 800;
}
.thanks-panel h3 {
  color: var(--ink);
  font-family: 'Fraunces', serif;
  font-size: 1.55rem;
  font-style: italic;
  margin: 0;
}
.thanks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}
.thanks-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 1px solid rgba(43, 31, 18, 0.12);
  color: var(--ink-soft);
  font-weight: 800;
  line-height: 1.35;
}
.thanks-list li::before {
  content: '♥';
  color: var(--accent-red);
  font-size: 0.78rem;
  flex: 0 0 auto;
}
.thanks-list.single { grid-template-columns: 1fr; }
.thanks-dedication {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 28px);
  margin-top: 34px;
  padding: clamp(26px, 4vw, 40px);
  border: 2px solid var(--sun);
  border-radius: 28px;
  background: rgba(253, 246, 227, 0.07);
}
.thanks-dedication-mark {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sun);
  font-size: 1.9rem;
  line-height: 1;
}
.thanks-dedication-body { min-width: 0; }
.thanks-dedication h3 {
  color: var(--sun);
  font-family: 'Fraunces', serif;
  font-size: 1.75rem;
  font-style: italic;
  margin: 0 0 14px;
}
.thanks-dedication p {
  color: rgba(253, 246, 227, 0.82);
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 0 0 14px;
}
.thanks-dedication p:last-child { margin-bottom: 0; }
.thanks-dedication strong { color: var(--cream-warm); }
.thanks-signature {
  color: var(--sun);
  font-family: 'Caveat', cursive;
  font-size: 1.8rem;
  margin: 34px 0 0;
  text-align: right;
}
@media (max-width: 900px) {
  .thanks-surface { grid-template-columns: 1fr; }
  .thanks-panel.communities { margin-top: 0; transform: none; }
}
@media (max-width: 620px) {
  .thanks-band { padding: 72px 0; }
  .thanks-list { grid-template-columns: 1fr; }
  .thanks-panel { border-radius: 22px; box-shadow: 7px 8px 0 rgba(245, 193, 60, 0.2); }
  .thanks-dedication {
    flex-direction: column;
    gap: 16px;
    border-radius: 22px;
  }
  .thanks-signature { text-align: left; }
}

/* =====================================================
   NATURGARTEN-Sektion (gross, mit Tipps)
   ===================================================== */
.naturgarten-band {
  background: var(--cream-warm);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.naturgarten-band::before {
  content: '';
  position: absolute;
  top: -200px;
  left: -200px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--leaf) 0%, transparent 70%);
  opacity: 0.10;
  pointer-events: none;
}
.naturgarten-band::after {
  content: '';
  position: absolute;
  bottom: -150px;
  right: -150px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, var(--sun) 0%, transparent 70%);
  opacity: 0.18;
  pointer-events: none;
}
.naturgarten-band > .container { position: relative; z-index: 2; }

.ng-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.ng-header h2 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 18px 0 14px;
}
.ng-header h2 em {
  background: var(--leaf);
  color: var(--cream-warm);
  padding: 4px 14px;
  border-radius: 10px;
  font-style: italic;
  display: inline-block;
  transform: rotate(-1deg);
}
.ng-header p {
  color: var(--ink-soft);
  font-size: 1.15rem;
  line-height: 1.6;
}

/* === Tipp-Karten === */
.ng-tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}
@media (max-width: 900px) { .ng-tips-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ng-tips-grid { grid-template-columns: 1fr; } }

.ng-tip {
  background: var(--cream-warm);
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  padding: 26px 24px;
  position: relative;
  transition: all 0.25s;
  overflow: hidden;
}
.ng-tip:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(43, 31, 18, 0.18); }

/* Karte 1 und 2 hatten oben Platz für ein Bild reserviert. Die Bilder sind
   entfernt (tote Verweise), daher entfällt auch der Reserve-Abstand. */
.ng-tip.card-3 { background: var(--sun); }
.ng-tip-num {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.8rem;
  background: var(--sun);
  color: var(--ink);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--ink);
  z-index: 2;
}
.ng-tip h3,
.ng-tip h4 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
  margin: 0 0 10px;
  padding-right: 60px;
}
.ng-tip p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 12px;
}
.ng-tip ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ng-tip ul li {
  padding: 5px 0 5px 22px;
  position: relative;
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.45;
}
.ng-tip ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  background: var(--leaf);
  color: var(--cream-warm);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.74rem;
  font-weight: 800;
}

/* === CTA-Banner === */
.ng-cta {
  background: var(--ink);
  color: var(--cream-warm);
  border-radius: 24px;
  padding: 32px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.ng-cta h3 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--sun);
  margin: 0 0 6px;
  font-size: 1.4rem;
}
.ng-cta p { margin: 0; color: rgba(253, 246, 227, 0.85); }

/* =====================================================
   WISSEN + QUIZ + SPIEL direkt auf der Homepage
   ===================================================== */
.wq-section {
  background: var(--cream-warm);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.wq-bg-blob {
  position: absolute;
  top: -100px;
  right: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--sun) 0%, transparent 70%);
  opacity: 0.30;
  pointer-events: none;
}
.wq-section > .container { position: relative; z-index: 2; }

.wq-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 900px) { .wq-grid { grid-template-columns: 1fr; } }

.wq-quiz,
.wq-facts {
  background: var(--cream-warm);
  border: 2.5px solid var(--ink);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  min-height: 440px;
}
.wq-quiz { background: var(--sun); transform: rotate(-1deg); }
.wq-facts { background: var(--cream-warm); transform: rotate(0.5deg); }
@media (max-width: 900px) {
  .wq-quiz, .wq-facts { transform: none; }
}

.wq-quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.wq-tag {
  display: inline-block;
  background: var(--ink);
  color: var(--sun);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wq-counter {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wq-progress {
  height: 10px;
  background: rgba(43, 31, 18, 0.12);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 20px;
}
.wq-progress-bar {
  background: var(--ink);
  height: 100%;
  width: 25%;
  transition: width 0.4s;
}

.wq-q {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.35rem;
  margin: 0 0 18px;
  color: var(--ink);
  line-height: 1.25;
}

.wq-answers {
  display: grid;
  gap: 10px;
  flex: 1;
}
.wq-answers button {
  background: var(--cream-warm);
  border: 2px solid var(--ink);
  padding: 12px 16px;
  border-radius: 14px;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  /* Daumenmass: eine Antwort muss auch auf dem Handy sicher zu treffen sein. */
  min-height: var(--tap-min);
}
.wq-answers button:hover:not(:disabled) {
  background: var(--ink);
  color: var(--sun);
  transform: translateX(4px);
}
.wq-answers button:disabled { cursor: default; }
.wq-answers button.correct { background: var(--leaf); color: var(--cream-warm); border-color: var(--leaf); }
.wq-answers button.wrong { background: var(--accent-red); color: var(--cream-warm); border-color: var(--accent-red); }

.wq-feedback {
  margin-top: 14px;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  min-height: 1.4em;
  color: var(--ink);
}

/* === Fun Facts === */
.wq-fact {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 14px 0;
}
.wq-fact-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 800;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--accent-red);
  margin-bottom: 12px;
}
.wq-fact-lbl {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.wq-fact-text {
  color: var(--ink);
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 280px;
}

.wq-fact-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}
.wq-fact-nav button {
  background: var(--ink);
  color: var(--sun);
  border: 0;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s;
}
.wq-fact-nav button:hover { transform: scale(1.1); }
.wq-fact-dots {
  display: flex;
  gap: 6px;
}
.wq-fact-dots span {
  width: 8px;
  height: 8px;
  background: rgba(43, 31, 18, 0.25);
  border-radius: 50%;
  transition: all 0.2s;
}
.wq-fact-dots span.active { background: var(--accent-red); width: 22px; border-radius: 999px; }

/* =====================================================
   UNTERER SEITENBEREICH – Neu, kraftvoll
   ===================================================== */

/* === 3 Schritte – Bold mit Foto-Karten === */
.steps-bold-section {
  background: var(--cream-warm);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.steps-bold-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 80% 0%, var(--sun-bg) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 100%, rgba(193, 59, 42, 0.06) 0%, transparent 50%);
  pointer-events: none;
}
.steps-bold-section > .container { position: relative; z-index: 2; }

.steps-bold-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  color: var(--ink);
  margin: 18px 0 0;
  letter-spacing: -0.02em;
}
.steps-bold-title em {
  background: var(--sun);
  color: var(--ink);
  padding: 4px 14px;
  border-radius: 10px;
  font-style: italic;
  display: inline-block;
  transform: rotate(-1deg);
  margin-top: 4px;
}

.steps-bold-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .steps-bold-grid { grid-template-columns: 1fr; } }

.step-bold-card {
  position: relative;
  background: var(--cream-warm);
  border: 2.5px solid var(--ink);
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  min-height: 460px;
}
.step-bold-card:hover {
  transform: translateY(-8px) rotate(-1deg);
  box-shadow: 0 18px 40px rgba(43, 31, 18, 0.20);
  text-decoration: none;
  color: var(--ink);
}
/* Die Igelfotos der drei Schritte sind Aufnahmen bei bedecktem Himmel und
   wirken unbehandelt kühl und grau. Deshalb bekommen sie hier ein warmes
   Licht: etwas mehr Helligkeit und Farbe plus ein goldener Schleier von
   oben. Das ist reine Darstellung – die Bilddateien selbst bleiben
   unverändert. Der dunkle Verlauf am unteren Rand bleibt erhalten, damit
   die Zahl und die Kartenkante weiter genug Kontrast haben. */
.step-bold-card .sb-photo {
  height: 240px;
  background-size: cover;
  background-position: center;
  position: relative;
  filter: brightness(1.1) saturate(1.22) contrast(1.05);
}
.step-bold-card .sb-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(247, 192, 83, 0.32) 0%, rgba(216, 132, 63, 0.16) 45%, rgba(216, 132, 63, 0) 72%),
    linear-gradient(180deg, transparent 50%, rgba(43, 31, 18, 0.5) 100%);
}
.step-bold-card .sb-num {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--ink);
  color: var(--sun);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.3rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 3px solid var(--cream-warm);
  z-index: 2;
}
.step-bold-card .sb-body {
  padding: 26px 26px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Die Karten benutzen h4, weil über ihnen die h3 „Drei Schritte“ steht.
   h3 bleibt der Vollständigkeit halber mit drin. */
.step-bold-card h3,
.step-bold-card h4 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.7rem;
  margin: 0 0 10px;
  color: var(--ink);
}
.step-bold-card p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 18px;
  flex: 1;
}
.step-bold-card .sb-arrow {
  display: inline-block;
  font-weight: 800;
  color: var(--accent-red);
  letter-spacing: 0.02em;
}
.steps-bold-section .step-bold-card:not(.red) h3,
.steps-bold-section .step-bold-card:not(.red) h4 {
  color: var(--ink) !important;
}
.steps-bold-section .step-bold-card:not(.red) p {
  color: var(--ink-soft) !important;
}
.step-bold-card.featured {
  background: var(--sun);
  transform: translateY(-12px);
}
.step-bold-card.featured:hover { transform: translateY(-18px) rotate(-1deg); }
.step-bold-card.featured .sb-num { background: var(--accent-red); color: var(--cream-warm); }
.step-bold-card.red {
  background: var(--accent-red);
  border-color: var(--ink);
  color: var(--cream-warm);
}
.step-bold-card.red h3, .step-bold-card.red:hover h3,
.step-bold-card.red h4, .step-bold-card.red:hover h4 { color: #FFFFFF !important; /* Gold auf Rot lag bei 2,7:1 */ }
.step-bold-card.red p { color: rgba(253, 246, 227, 0.9); }
.step-bold-card.red .sb-arrow { color: var(--sun); }
.step-bold-card.red .sb-num { background: var(--cream-warm); color: var(--accent-red); border-color: var(--ink); }
.step-bold-card.red:hover { color: var(--cream-warm); }

/* === Entstehung – Polaroid-Wand === */
.entstehung-bold {
  background: var(--ink);
  color: var(--cream-warm);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.entst-header { text-align: center; margin-bottom: 60px; max-width: 720px; margin-left: auto; margin-right: auto; }
.entst-header h2 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  color: var(--sun);
  margin: 18px 0 14px;
  line-height: 1.05;
}
.entst-header h2 em {
  background: var(--accent-red);
  color: var(--cream-warm);
  padding: 2px 12px;
  border-radius: 8px;
  font-style: italic;
}
.entst-header p { color: rgba(253, 246, 227, 0.82); font-size: 1.1rem; max-width: 580px; margin: 0 auto; }

.polaroid-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 64px;
  padding: 0 20px;
}
@media (max-width: 900px) { .polaroid-wall { grid-template-columns: repeat(2, 1fr); } }

.pw-item {
  background-color: var(--cream-warm);
  padding: 12px 12px 36px;
  border-radius: 6px;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-clip: content-box;
  aspect-ratio: 3/4;
  position: relative;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s;
  cursor: default;
}
.pw-item::before {
  content: '';
  position: absolute;
  inset: 12px 12px 36px 12px;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
}
.pw-item span {
  position: absolute;
  bottom: 8px;
  left: 12px;
  right: 12px;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 1.15rem;
  color: var(--ink);
  z-index: 2;
}
.pw-item.r1 { transform: rotate(-3deg); }
.pw-item.r2 { transform: rotate(2deg); }
.pw-item.r-l { transform: rotate(-1.5deg) translateY(20px); }
.pw-item.r-r { transform: rotate(2.5deg) translateY(-15px); }
.pw-item:hover { transform: rotate(0) translateY(-6px) scale(1.04); z-index: 5; }
@media (max-width: 700px) {
  .pw-item.r1, .pw-item.r2, .pw-item.r-l, .pw-item.r-r { transform: none; }
}

.entst-quote-block {
  text-align: center;
  max-width: 740px;
  margin: 0 auto;
}
.entst-quote-block .quote-text {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  line-height: 1.4;
  color: var(--cream-warm);
  margin: 0 0 28px;
  position: relative;
}
.entst-quote-block .quote-text em {
  background: var(--sun);
  color: var(--ink);
  padding: 2px 10px;
  border-radius: 6px;
  font-style: italic;
}
.entst-quote-block .quote-cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* === Sticky SOS und Footer ans Schema === */
.sticky-sos { background: var(--accent-red) !important; }
.sticky-sos:hover { background: #A02E1F !important; }
.site-footer { background: var(--ink); color: var(--cream-warm); }
.site-footer a { color: var(--sun-soft); }
.site-footer h4 { color: var(--sun); }

/* ==========================================================
   PRESSE – Zeitungsartikel Kronen Zeitung (6.9.2026)
   ========================================================== */
.presse-band {
  position: relative;
  background: var(--cream-warm);
  padding: 70px 0 78px;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
}
.presse-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(43, 31, 18, 0.10) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.55;
  pointer-events: none;
}
.presse-band > .container { position: relative; z-index: 2; }


/* Der jeweils neueste Bericht bekommt einen wärmeren Hintergrund,
   damit man beim Scrollen sofort sieht: hier beginnt etwas Neues. */
.presse-band--neu { background: var(--sun-bg); }

/* „Neu“-Marke in der Sprungmarke im Seitenkopf */
.presse-cta-neu {
  display: inline-block;
  background: var(--accent-red);
  color: var(--cream-warm);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Intro-Spalte über den Zeitungsseiten --- */
.presse-intro {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
}
.presse-intro .presse-eyebrow { margin-inline: auto; }

/* --- Die beiden Zeitungsseiten in voller Breite (lesbar) --- */
.presse-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}
.presse-page {
  margin: 0;
  width: 100%;
  max-width: 640px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 10px 12px 0 rgba(43, 31, 18, 0.14);
  overflow: hidden;
}
.presse-page--wide { max-width: 1180px; }
/* Breiten der Faksimiles: jede Datei wird nur so groß gezeigt, wie sie
   wirklich ist – hochskalierte Zeitungsseiten werden sonst unscharf. */
.presse-page--titel { max-width: 830px; }
.presse-page--seite { max-width: 917px; }
.presse-page--schmal { max-width: 610px; }
.presse-page--spalte { max-width: 613px; }
.presse-page--ausschnitt { max-width: 722px; }
.presse-page figcaption {
  padding: 12px 16px 14px;
  border-top: 3px solid var(--ink);
  background: var(--cream-warm);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
}

/* Ganze Seite ist ein Button – öffnet die Lupe */
.presse-page-view {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: #fff;
  cursor: zoom-in;
  line-height: 0;
}
.presse-page-view img {
  display: block;
  width: 100%;
  height: auto;
}
.presse-page-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--sun);
  font-size: max(0.82rem, 14px);
  font-weight: 800;
  line-height: 1;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(43, 31, 18, 0.35);
}
.presse-page-view:hover .presse-page-zoom,
.presse-page-view:focus-visible .presse-page-zoom {
  background: var(--accent-red);
  color: #fff;
}
.presse-page-view:focus-visible {
  outline: 4px solid var(--accent-red);
  outline-offset: -4px;
}

@media (max-width: 700px) {
  .presse-pages { gap: 34px; }
  .presse-page { border-width: 2px; box-shadow: 6px 7px 0 rgba(43, 31, 18, 0.14); }
  .presse-page-zoom { right: 8px; bottom: 8px; padding: 9px 13px; }
}

/* ==========================================================
   PRESSE – VOLLTEXT des Zeitungsartikels
   Der Bericht als echter Text: nichts abgeschnitten, nichts
   nur im Bild versteckt, in jeder Schriftgröße lesbar.
   ========================================================== */

/* --- Kopf: Kicker, Schlagzeile, Vorspann, Autorin --- */

/* --- Lesetext: großzügige Zeilen, angenehme Zeilenlänge --- */

/* Initial wie in der Zeitung */

/* Auf großen Schirmen zwei Spalten – wie im Blatt, ohne Kürzung */

/* --- Zitat aus dem Artikel --- */

/* --- Bildunterschriften der Zeitungsseiten --- */

/* --- Quellenzeile --- */

/* --- Intro-Text --- */
.presse-eyebrow {
  background: var(--ink);
  color: var(--sun);
  margin-bottom: 18px;
}
.presse-intro h2 {
  font-family: 'Anton', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  line-height: 1.03;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 8px;
  color: var(--ink);
}
.presse-source {
  display: block;
  font-family: 'Caveat', cursive;
  font-size: 1.25rem;
  color: var(--accent-red);
  margin-bottom: 18px;
}
.presse-lead {
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0 0 26px;
}

/* ==========================================================
   UNSERE IGELPFLEGERIN BÄRBEL – eigener Text, eigene Fotos
   Bewusst anders gestaltet als die Faksimile-Bänder: Hier spricht
   Ursula selbst, deshalb Zitatform plus Fotogalerie aus der Station.
   ========================================================== */
.pflegerin-band {
  background: var(--cream-warm);
  padding: 64px 0 72px;
  border-bottom: 3px solid var(--ink);
}
.pflegerin-head {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}
.pflegerin-head .hs-eyebrow {
  background: var(--leaf);
  color: var(--cream-warm);
  margin-bottom: 16px;
}
.pflegerin-head h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.06;
  margin: 0;
  color: var(--ink);
}
.pflegerin-head h2 em {
  background: var(--sun);
  border-radius: 10px;
  padding: 2px 12px;
  font-style: italic;
  display: inline-block;
  transform: rotate(-1deg);
}

.pflegerin-card {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 28px;
  align-items: start;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 9px 0 rgba(43, 31, 18, 0.14);
  padding: 30px 32px;
}
.pflegerin-text {
  margin: 0;
  border-left: 6px solid var(--sun);
  padding-left: 22px;
}
.pflegerin-text p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.pflegerin-lead {
  font-size: 1.18rem !important;
  font-weight: 700;
  color: var(--ink) !important;
}
.pflegerin-text cite {
  display: block;
  font-family: 'Caveat', cursive;
  font-style: normal;
  font-size: 1.3rem;
  color: var(--accent-red);
}

.pflegerin-schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.pflegerin-schritte li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  background: var(--cream-warm);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.94rem;
  line-height: 1.5;
  font-weight: 600;
}
.pflegerin-schritte span { font-size: 1.35rem; line-height: 1.1; }

.pflege-galerie {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}
.pflege-galerie figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 6px 6px 0 rgba(43, 31, 18, 0.14);
}
.pflege-galerie img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-bottom: 3px solid var(--ink);
}
.pflege-galerie figcaption {
  padding: 14px 16px 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.pflege-galerie-quelle {
  margin: 16px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}
.pflege-galerie-quelle a { color: var(--ink); font-weight: 700; }

@media (max-width: 900px) {
  .pflegerin-card { grid-template-columns: minmax(0, 1fr); padding: 24px 22px; }
  .pflege-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 560px) {
  .pflegerin-band { padding: 44px 0 50px; }
  .pflegerin-card { box-shadow: 5px 5px 0 rgba(43, 31, 18, 0.14); }
  .pflegerin-text { padding-left: 16px; border-left-width: 5px; }
  .pflege-galerie { grid-template-columns: minmax(0, 1fr); }
  .pflege-galerie img { height: 210px; }
}

/* ==========================================================
   PRESSE ONLINE – MeinBezirk.at (28.8.2026)
   ========================================================== */
.presse-online {
  background: var(--sun-bg);
  padding: 66px 0 74px;
  border-bottom: 3px solid var(--ink);
}
.presse-online-card {
  background: var(--cream-warm);
  border: 3px solid var(--ink);
  border-radius: 28px;
  box-shadow: 12px 14px 0 rgba(43, 31, 18, 0.14);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}
/* Karte ohne Foto (Radiobeitrag): Text über die volle Breite. */
.presse-online-card--ohne-bild { grid-template-columns: 1fr; }
@media (max-width: 940px) {
  .presse-online-card { grid-template-columns: 1fr; }
}
.presse-online-media {
  margin: 0;
  position: relative;
  border-right: 3px solid var(--ink);
  background: var(--ink);
}
@media (max-width: 940px) {
  .presse-online-media { border-right: 0; border-bottom: 3px solid var(--ink); }
}
.presse-online-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}
.presse-online-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--cream-warm);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: 3px 4px 0 rgba(43, 31, 18, 0.22);
}
.presse-online-body {
  padding: clamp(26px, 3.6vw, 44px);
}
.presse-online-eyebrow {
  background: var(--accent-red);
  color: var(--cream-warm);
  margin-bottom: 16px;
}
.presse-online-body h2 {
  font-family: 'Anton', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.06;
  text-transform: none;
  margin: 0 0 8px;
  color: var(--ink);
}
.presse-online-meta {
  display: block;
  font-family: 'Caveat', cursive;
  font-size: 1.2rem;
  color: var(--accent-red);
  margin-bottom: 16px;
}
.presse-online-lead {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.presse-online-quote {
  margin: 0 0 24px;
  background: #fff;
  border: 2px solid var(--ink);
  border-left: 8px solid var(--leaf);
  border-radius: 16px;
  padding: 18px 20px;
}
.presse-online-quote p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.45;
  margin: 0 0 10px;
  color: var(--ink);
}
.presse-online-quote cite {
  display: block;
  font-style: normal;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.presse-online-quote cite strong { color: var(--ink); font-size: 0.92rem; }

.presse-online-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.presse-online-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 13px 24px;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 4px 5px 0 rgba(43, 31, 18, 0.2);
}
.presse-online-link:hover { background: var(--ink-soft); color: var(--sun-soft); }
.presse-online-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- Dankeschön an die Redaktion --- */
.presse-danke {
  margin: 34px 0 0;
  background: var(--ink);
  color: var(--cream-warm);
  border: 3px solid var(--ink);
  border-radius: 24px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px 22px;
  align-items: center;
}
@media (max-width: 640px) {
  .presse-danke { grid-template-columns: 1fr; }
}
.presse-danke .pd-mark {
  grid-row: span 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sun);
  border: 2px solid var(--cream-warm);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
}
@media (max-width: 640px) { .presse-danke .pd-mark { grid-row: auto; } }
.presse-danke strong {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1.15;
  color: var(--sun);
}
.presse-danke span {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(253, 246, 227, 0.9);
}

/* ===== Lehrpfad-Stationen & Wissens-Mosaik (vormals zweiter Inline-Block) ===== */
  /* ===================================================
     LEHRPFAD SPOTLIGHT – Sektion 2.5
     =================================================== */
  .lehrpfad-spotlight {
    background: var(--ink);
    color: var(--cream-warm);
    padding: 0 0 80px;
    position: relative;
    overflow: hidden;
  }
  .lehrpfad-spotlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 10% 20%, rgba(245,193,60,0.10) 0, transparent 35%),
      radial-gradient(circle at 90% 80%, rgba(74,93,46,0.15) 0, transparent 40%);
    pointer-events: none;
  }

  /* Top-Bar */
  .lps-top-bar {
    background: var(--sun);
    padding: 14px 0;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  .lps-eyebrow {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink);
  }

  /* Header */
  .lps-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
    padding: 64px 20px 48px;
    position: relative;
    z-index: 2;
  }
  .lps-header h2 {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 800;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.05;
    color: var(--cream-warm);
    margin: 0 0 20px;
  }
  .lps-header h2 em {
    color: var(--sun);
    font-style: italic;
  }
  .lps-lead {
    font-size: 1.15rem;
    color: rgba(253, 246, 227, 0.85);
    line-height: 1.65;
    margin: 0 0 32px;
  }
  .lps-cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .lps-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--sun);
    color: var(--ink);
    padding: 16px 32px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    border: 2px solid var(--sun);
    transition: all 0.2s;
  }
  .lps-btn-primary:hover { background: var(--sun-soft); transform: translateY(-2px); text-decoration: none; color: var(--ink); }
  .lps-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--cream-warm);
    padding: 16px 32px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    border: 2px solid rgba(253,246,227,0.5);
    transition: all 0.2s;
  }
  .lps-btn-ghost:hover { background: rgba(253,246,227,0.1); border-color: var(--cream-warm); text-decoration: none; color: var(--cream-warm); }

  /* Fakten-Zeile */
  .lps-facts {
    display: flex;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    margin: 0 auto 56px;
    max-width: 900px;
    border: 2px solid rgba(253,246,227,0.15);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 2;
  }
  .lps-fact {
    flex: 1;
    min-width: 160px;
    padding: 28px 20px;
    text-align: center;
    border-right: 1px solid rgba(253,246,227,0.12);
  }
  .lps-fact:last-child { border-right: none; }
  .lps-fact.lps-fact-accent { background: rgba(245,193,60,0.12); }
  .lps-fact strong {
    display: block;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 800;
    font-size: 1.9rem;
    color: var(--sun);
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .lps-fact span {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(253,246,227,0.6);
  }

  /* Map-Wrap */
  .lps-map-wrap {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 0;
    border-radius: 24px;
    overflow: hidden;
    border: 2px solid rgba(253,246,227,0.15);
    min-height: 480px;
    position: relative;
    z-index: 2;
  }
  @media (max-width: 960px) {
    .lps-map-wrap { grid-template-columns: 1fr; }
  }

  .lps-map-container {
    min-height: 420px;
    background: #1a1a2e;
    position: relative;
  }
  .lps-map-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Address Card */
  .lps-address-card {
    background: var(--cream-warm);
    color: var(--ink);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .lps-addr-icon {
    width: 56px;
    height: 56px;
    background: var(--sun);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink);
    margin-bottom: 18px;
    border: 2px solid var(--ink);
    flex-shrink: 0;
  }
  .lps-addr-body h3 {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 1.6rem;
    color: var(--ink);
    margin: 0 0 14px;
  }
  .lps-addr-main {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink);
    margin: 0 0 16px;
  }
  .lps-addr-hint {
    font-size: 0.9rem;
    line-height: 2;
    color: var(--ink-soft);
    margin: 0 0 20px;
  }
  .lps-directions-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: var(--sun);
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s;
    width: fit-content;
  }
  .lps-directions-btn:hover { background: var(--ink-soft); color: var(--sun); text-decoration: none; transform: translateY(-2px); }

  .lps-addr-separator {
    height: 1px;
    background: rgba(43,31,18,0.1);
    margin: 28px 0;
  }

  .lps-addr-contact { margin-top: auto; }
  .lps-contact-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 10px;
  }
  .lps-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--accent-red);
    text-decoration: none;
    transition: all 0.2s;
    line-height: 1;
    margin-bottom: 6px;
  }
  .lps-phone-link:hover { color: var(--ink); text-decoration: none; }
  .lps-contact-name {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 6px 0 0;
    font-style: italic;
  }


/* ============================================================
   NEUE BAUSTEINE DER STARTSEITE (Stand: Überarbeitung 2026)

   Die Startseite ist gekürzt: lange Bereiche (Presse, Ursulas
   Geschichte, Entstehung, Dankeschön, Karte) leben jetzt auf
   eigenen Unterseiten und werden hier nur noch angeteasert.
   ============================================================ */

/* --- Hero: Marke über Projektname --- */
.hs-text h1 .hs-sub {
  display: block;
  margin-top: 6px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  /* Deutlich kleiner als die Marke: die Hierarchie soll man sehen,
     nicht lesen müssen. */
  font-size: clamp(1.25rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  color: var(--ink-soft);
  letter-spacing: 0;
  text-transform: none;
}
.hero-ursula .hs-text h1 .hs-sub { color: #6B5636; }
.hs-text p.hs-claim {
  font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  margin-top: 14px;
}
.hs-phone-line {
  margin: 16px 0 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
}
.hs-phone-line a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-red-deep);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  min-height: 44px;
}
.hs-phone-line a:hover { color: var(--accent-red); }

/* --- Shop-Teaser im Hero (früher komplett inline) --- */
.hero-shop-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(43, 31, 18, 0.18);
  border-radius: 14px;
  padding: 12px 18px;
  min-height: 46px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  transition: background 0.18s, transform 0.15s;
}
.hero-shop-link:hover { background: rgba(245, 193, 60, 0.25); transform: translateY(-2px); text-decoration: none; }
.hero-shop-link .hsl-arrow { opacity: 0.6; font-size: 0.8rem; }

/* --- Teaser „Die Frau hinter dem Pfad" --- */
.ursula-teaser { background: var(--sun); }
.ut-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}
.ut-photo { margin: 0; }
.ut-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 38%;
  border: 4px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(43, 31, 18, 0.22);
}
.ut-text .eyebrow { color: var(--accent-red-deep); }
.ut-text h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  margin: 10px 0 14px;
  color: var(--ink);
}
.ut-text h2 em { font-style: italic; }
.ut-lead { font-size: 1.08rem; color: var(--ink); margin: 0 0 14px; }
.ut-quote {
  font-family: 'Caveat', cursive;
  font-size: 1.7rem;
  color: var(--ink);
  margin: 0 0 20px;
}
@media (max-width: 720px) {
  .ut-grid { grid-template-columns: 1fr; gap: 26px; }
  .ut-photo { width: min(100%, 280px); margin: 0 auto; }
}

/* --- Stationen-Vorschau: nur drei Karten, dafür großzügiger --- */
.station-grid--preview { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lehrpfad-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 38px;
}

/* --- Anfahrt kompakt --- */
.anfahrt-band { background: var(--cream-warm); }
.ab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: center;
}
.ab-text h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin: 10px 0 14px;
}
.ab-text h2 em { font-style: italic; }
.ab-address {
  font-style: normal;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 0 0 22px;
  line-height: 1.6;
}
@media (max-width: 860px) {
  .ab-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ==========================================================
   NEWS – Zeitungsartikel als Kurzmeldungen unter dem Hero
   Bewusst kompakt: die Notfall-Schritte sollen weiterhin
   ohne langes Scrollen erreichbar bleiben.
   ========================================================== */
.news-band {
  position: relative;
  background: var(--paper);
  padding: 52px 0 58px;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}

.news-header {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 34px;
}
.news-eyebrow { background: var(--ink); margin-bottom: 0; }
.news-title {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.02;
  color: var(--ink);
  margin: 16px 0 0;
  letter-spacing: -0.02em;
}
.news-title em {
  background: var(--sun);
  color: var(--ink);
  padding: 2px 12px;
  border-radius: 10px;
  font-style: italic;
  display: inline-block;
  transform: rotate(-1deg);
  /* Lange Komposita (z. B. „Pressemitteilung“) sollen auf schmalen
     Displays umbrechen statt aus dem Farbfeld zu laufen. */
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
}
.news-sub {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.6;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.news-card {
  display: flex;
  flex-direction: column;
  background: var(--cream-warm);
  border: 3px solid var(--ink);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.news-card:hover,
.news-card:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 var(--ink);
}

.news-media {
  position: relative;
  margin: 0;
  border-bottom: 3px solid var(--ink);
  background: var(--paper-shadow);
}
.news-media img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}
.news-flag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--accent-red);
  color: var(--cream-warm);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.news-flag--online { background: var(--leaf); }

.news-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 22px;
}
.news-meta {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-red-deep);
}
.news-body h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.news-body p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.news-more {
  margin-top: 4px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.news-foot {
  margin: 28px 0 0;
  text-align: center;
}
.news-foot a {
  font-weight: 800;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (max-width: 860px) {
  .news-header { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .news-grid { grid-template-columns: 1fr; gap: 22px; }
  .news-media img { height: 190px; }
}
@media (max-width: 520px) {
  .news-band { padding: 40px 0 46px; }
  .news-card { box-shadow: 4px 4px 0 var(--ink); }
}
/* Kurzmeldung darunter */
.hn-more-title {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ink);
  margin: 0 0 18px;
  text-align: center;
}
.news-grid--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px;
  margin: 0 auto;
}
.news-card--wide {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: stretch;
}
.news-card--wide .news-media {
  border-bottom: 0;
  border-right: 3px solid var(--ink);
}
.news-card--wide .news-media img { height: 100%; min-height: 190px; }
.news-card--wide .news-body h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}

@media (max-width: 700px) {
  .news-card--wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .news-card--wide .news-media {
    border-bottom: 3px solid var(--ink);
    border-right: 0;
  }
  .news-card--wide .news-media img { height: 190px; min-height: 0; }
}


/* =====================================================================
   NEUE STARTSEITEN-BAUSTEINE (Überarbeitung September 2026)

   Die Startseite ist auf drei Ziele zugeschnitten: Soforthilfe,
   Lehrpfad besuchen, Projekt unterstützen. Dafür sind unten drei
   neue Bänder dazugekommen (.ziele-band, .unterstuetzen-band,
   .news-feature) plus ein paar kleine Ergänzungen an bestehenden
   Blöcken. Alle Schaltflächen halten die Mindestgröße --tap-min ein,
   damit sie sich auch mit dem Daumen sicher treffen lassen.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1) DREI ZIELE – die Abkürzung direkt unter dem Hero
   --------------------------------------------------------------------- */
.ziele-band {
  background: var(--leaf);
  color: var(--cream-warm);
  padding: 76px 0 84px;
}
.ziele-band .section-header { margin-bottom: 44px; }
.ziele-band .section-header h2 { color: var(--cream-warm); }
.ziele-band .section-header h2 em {
  background: var(--sun);
  color: var(--ink);
  padding: 2px 12px;
  border-radius: 10px;
  font-style: italic;
  display: inline-block;
  transform: rotate(-1deg);
}
.ziele-band .section-header .eyebrow { color: var(--sun-soft); }

.ziele-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ziel-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--cream-warm);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 30px 26px 26px;
  box-shadow: 6px 6px 0 var(--ink);
}
.ziel-card--notfall { background: #FDECE8; }
.ziel-card--lehrpfad { background: var(--sun-bg); }
/* Die dritte Karte hatte bisher keinen eigenen Ton und sah damit aus wie
   ein Standardkasten. Ein zartes Grün ordnet sie dem Helfen-Bereich zu. */
.ziel-card--helfen { background: #EAF0DE; }

.ziel-icon {
  font-size: 2.1rem;
  line-height: 1;
}
.ziel-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
.ziel-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  /* Der Text schiebt die Schaltfläche nach unten, damit die Knöpfe
     aller drei Karten auf einer Linie sitzen. */
  flex: 1 1 auto;
}

.ziel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  margin-top: 6px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  font-weight: 800;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.ziel-btn:hover { transform: translateY(-2px); text-decoration: none; }
.ziel-btn--red  { background: var(--accent-red); color: var(--cream-warm); }
.ziel-btn--red:hover { background: var(--accent-red-deep); color: var(--cream-warm); }
.ziel-btn--sun  { background: var(--sun); color: var(--ink); }
.ziel-btn--sun:hover { background: var(--sun-deep); color: var(--ink); }
.ziel-btn--leaf { background: var(--leaf); color: var(--cream-warm); }
.ziel-btn--leaf:hover { background: var(--moss-dark); color: var(--cream-warm); }

@media (max-width: 900px) {
  .ziele-grid { grid-template-columns: 1fr; gap: 20px; }
  .ziele-band { padding: 54px 0 60px; }
}


/* ---------------------------------------------------------------------
   2) NOTFALL – Ergänzungen am bestehenden Schritte-Band

   Der rote Notruf-Kasten ist von ganz unten nach oben gewandert: im
   Ernstfall soll er ohne Scrollen zu sehen sein.
   --------------------------------------------------------------------- */
.emergency-cta > * { position: relative; z-index: 2; }
.emergency-cta--top { margin-bottom: 52px; }
.emergency-cta .emergency-signature {
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  margin: 20px 0 0;
  opacity: 0.9;
}

.steps-bold-title--sub {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 30px;
  text-align: center;
}
.steps-bold-title--sub em {
  background: var(--sun);
  color: var(--ink);
  padding: 3px 12px;
  border-radius: 10px;
  font-style: italic;
  display: inline-block;
  transform: rotate(-1deg);
}

/* Fütter-Hinweis: gut sichtbar, aber ruhig – keine zweite Alarmfarbe. */
.steps-feed-warning {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 780px;
  margin: 30px auto 0;
  padding: 18px 24px;
  background: var(--sun-bg);
  border: 3px solid var(--ink);
  border-left-width: 10px;
  border-radius: 16px;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.45;
  color: var(--ink);
}
.steps-feed-warning .sfw-icon { flex: 0 0 auto; font-size: 1.4rem; }

.steps-bold-more {
  margin: 26px 0 0;
  text-align: center;
}
.steps-bold-more a {
  display: inline-block;
  min-height: var(--tap-min);
  padding: 13px 4px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (max-width: 620px) {
  .emergency-cta { padding: 38px 22px; border-radius: 22px; }
  .emergency-cta .phone-big { font-size: 1.45rem; padding: 18px 26px; }
  .steps-feed-warning { font-size: 1.02rem; padding: 16px 18px; align-items: flex-start; }
}


/* ---------------------------------------------------------------------
   3) LEHRPFAD – ein Foto und die Wege in die Tiefe
   --------------------------------------------------------------------- */
.station-grid--preview { margin-bottom: 40px; }

.lehrpfad-shot {
  margin: 0 auto 34px;
  max-width: 760px;
}
.lehrpfad-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 8px 8px 0 rgba(43, 31, 18, 0.35);
}
.lehrpfad-shot figcaption {
  margin-top: 12px;
  font-size: 0.95rem;
  font-style: italic;
  text-align: center;
  color: var(--cream-warm);
  opacity: 0.9;
}


/* ---------------------------------------------------------------------
   4) ANFAHRT – die harten Fakten als kurze Liste

   Bewusst nur, was gesichert ist: ganzjährig offen, Eintritt frei.
   Zu Parkplätzen und Barrierefreiheit steht hier nichts – der Hinweis
   verweist stattdessen auf Rückfragen.
   --------------------------------------------------------------------- */
.ab-address .ab-hint {
  display: inline-block;
  margin-top: 6px;
  font-style: italic;
  opacity: 0.9;
}
.ab-facts {
  list-style: none;
  margin: 22px 0 26px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ab-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 9px 16px;
  background: rgba(253, 246, 227, 0.12);
  border: 2px solid rgba(253, 246, 227, 0.35);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
}
.ab-facts li > .icon { flex-shrink: 0; }
/* Text samt Links bleibt ein Fließtext-Block und darf umbrechen */
.ab-facts li > span { min-width: 0; overflow-wrap: anywhere; }
/* Am Handy: eine Info pro Zeile, mehrzeilige Einträge als Karte statt Pille */
@media (max-width: 560px) {
  .ab-facts { flex-direction: column; align-items: stretch; }
  .ab-facts li {
    display: flex;
    align-items: flex-start;
    border-radius: 14px;
    padding: 10px 14px;
    line-height: 1.45;
  }
  .ab-facts li > .icon { margin-top: 2px; }
}


/* ---------------------------------------------------------------------
   5) UNTERSTÜTZEN – fünf konkrete Wege zu helfen
   --------------------------------------------------------------------- */
.unterstuetzen-band {
  background: var(--sun-bg);
  padding: 78px 0 84px;
}
.unterstuetzen-band .section-header { margin-bottom: 40px; }

.help-grid {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.help-item {
  background: var(--cream-warm);
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 24px 22px;
  box-shadow: 5px 5px 0 var(--ink);
}
.help-icon { display: block; font-size: 1.8rem; line-height: 1; margin-bottom: 10px; }
.help-item h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--ink);
}
.help-item p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.help-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
.help-cta .btn { min-height: var(--tap-min); }
/* Die Haupt-Schaltfläche darf deutlich größer sein als die beiden
   Nebenwege – sie ist der wichtigste Knopf dieses Abschnitts. */
.btn-help-main {
  font-size: 1.2rem;
  padding: 18px 40px;
  box-shadow: 0 8px 22px rgba(193, 59, 42, 0.30);
}

@media (max-width: 620px) {
  .unterstuetzen-band { padding: 54px 0 60px; }
  .help-cta { flex-direction: column; align-items: stretch; }
  .help-cta .btn { justify-content: center; text-align: center; }
}


/* ---------------------------------------------------------------------
   6) PRESSE-TEASER – Kurzfassung statt ganzem Zeitungsartikel

   Auf der Startseite stehen nur Kennzeichnung, Zeitung, Datum,
   Überschrift, Vorschaubild und eine knappe Zusammenfassung. Die
   großen Scans der Zeitungsseiten liegen im Pressebereich und werden
   damit auf der Startseite gar nicht mehr geladen.
   --------------------------------------------------------------------- */
.news-feature {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  background: var(--sun-bg);
  border: 3px solid var(--ink);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--ink);
  margin-bottom: 44px;
}
.news-feature-media {
  position: relative;
  margin: 0;
  border-right: 3px solid var(--ink);
  background: var(--paper-shadow);
  display: flex;
  flex-direction: column;
}
.news-feature-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  flex: 1 1 auto;
}
.news-feature-media figcaption {
  flex: 0 0 auto;
  padding: 9px 14px;
  background: var(--ink);
  color: var(--cream-warm);
  font-size: 0.74rem;
  line-height: 1.4;
}
.news-feature-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 30px 30px;
}
.news-feature-body h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
}
.news-feature-body p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.news-quote {
  margin: 6px 0;
  padding: 14px 20px;
  background: var(--cream-warm);
  border-left: 6px solid var(--accent-red);
  border-radius: 0 12px 12px 0;
}
.news-quote p {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink);
}
.news-quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-red-deep);
}
.news-feature-btn {
  align-self: flex-start;
  min-height: var(--tap-min);
  margin-top: 6px;
}

@media (max-width: 860px) {
  .news-feature { grid-template-columns: minmax(0, 1fr); }
  .news-feature-media {
    border-right: 0;
    border-bottom: 3px solid var(--ink);
  }
  .news-feature-media img { height: 220px; min-height: 0; flex: 0 0 auto; }
  .news-feature-body { padding: 22px 20px 24px; }
  .news-feature-btn { align-self: stretch; justify-content: center; text-align: center; }
}


/* ---------------------------------------------------------------------
   7) KLEINIGKEITEN
   --------------------------------------------------------------------- */

/* „Mit Herz für Igel“ braucht mehr Platz als „11“ oder „24/7“. */
.hero-stats .hs-stat--wide strong { font-size: 1.9rem; }

/* Erinas Mini-Quiz: die Kopfzeile ist jetzt eine echte Überschrift,
   damit keine leere Überschrift mehr im Quiz steht. */
.wq-tag-head { margin: 0; }
.wq-headline em {
  background: var(--sun);
  color: var(--ink);
  padding: 2px 12px;
  border-radius: 10px;
  font-style: italic;
  display: inline-block;
  transform: rotate(-1deg);
}
.wq-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 44px;
}
.wq-cta-row > a { min-height: var(--tap-min); }
.wq-cta-ghost { border-color: var(--cream-warm); color: var(--cream-warm); }
.wq-cta-ghost:hover { background: var(--cream-warm); color: var(--ink); }

@media (max-width: 620px) {
  .wq-cta-row { flex-direction: column; align-items: stretch; }
  .wq-cta-row > a { justify-content: center; text-align: center; }
}
.emergency-cta .emergency-emoji { font-size: 2.4rem; display: block; }

/* ---------------------------------------------------------------------
   QUELLENANGABEN im Pressebereich

   Quelle, Datum, Autorin und Bildnachweis stehen als Definitionsliste
   direkt bei den Original-Zeitungsseiten. Als <dl> sind die Paare auch
   mit Vorlesehilfen als Begriff und Erklärung erkennbar.
   --------------------------------------------------------------------- */
.quellen-box {
  margin: 34px 0 0;
  padding: 24px 26px;
  background: var(--cream-warm);
  border: 3px solid var(--ink);
  border-radius: 18px;
  display: grid;
  gap: 14px;
}
.quellen-box > div {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 6px 18px;
  align-items: baseline;
}
.quellen-box dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-red-deep);
}
.quellen-box dd {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink);
}
.quellen-box a { color: var(--ink); font-weight: 700; }
.quellen-box--light { background: var(--paper); }

@media (max-width: 640px) {
  .quellen-box { padding: 20px 18px; }
  .quellen-box > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

/* ---------------------------------------------------------------------
   404 – SEITE NICHT GEFUNDEN

   Eine Fehlerseite ist kein Nichts: sie führt zurück. Deshalb steht
   hier eine vollständige, gut greifbare Liste aller Bereiche – und
   ganz oben der Notruf, weil auch ein Tippfehler in einem Notfall
   passieren kann.
   --------------------------------------------------------------------- */
.nf-hero {
  background: var(--sun-bg);
  padding: 70px 0 60px;
  text-align: center;
}
.nf-code {
  display: inline-block;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(3.4rem, 11vw, 6rem);
  line-height: 1;
  color: var(--sun-deep);
  opacity: 0.55;
}
.nf-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  line-height: 1.08;
  color: var(--ink);
  margin: 6px 0 16px;
}
.nf-hero h1 em {
  background: var(--sun);
  color: var(--ink);
  padding: 2px 14px;
  border-radius: 10px;
  font-style: italic;
  display: inline-block;
  transform: rotate(-1deg);
}
.nf-lead {
  max-width: 620px;
  margin: 0 auto 28px;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.nf-sos {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin: 0;
  padding: 16px 26px;
  background: var(--cream-warm);
  border: 3px solid var(--accent-red);
  border-radius: 18px;
  font-size: 1.02rem;
  color: var(--ink);
}
.nf-sos a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tap-min);
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--accent-red);
  color: var(--cream-warm);
  font-weight: 900;
  font-size: 1.05rem;
  text-decoration: none;
  white-space: nowrap;
}
.nf-sos a:hover, .nf-sos a:focus-visible { background: var(--accent-red-deep); color: var(--cream-warm); }

.nf-links {
  background: var(--cream-warm);
  padding: 60px 0 76px;
}
.nf-links h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  color: var(--ink);
  text-align: center;
  margin: 0 0 32px;
}
.nf-grid {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.nf-grid a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 12px;
  align-items: center;
  min-height: 76px;
  padding: 16px 18px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nf-grid a > span[aria-hidden] { grid-row: 1 / span 2; font-size: 1.5rem; }
.nf-grid a strong { font-size: 1.05rem; }
.nf-grid a .nf-sub { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.35; }
.nf-grid a:hover, .nf-grid a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 4px 5px 0 var(--ink);
  text-decoration: none;
}

.nf-note {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.nf-note a { color: var(--ink); font-weight: 700; }

@media (max-width: 620px) {
  .nf-hero { padding: 48px 0 44px; }
  .nf-sos { flex-direction: column; padding: 18px 20px; }
  .nf-links { padding: 46px 0 56px; }
}