/* =====================================================================
   styles/site-extras.css
   Bausteine aus der Überarbeitung (Herbst 2026), die auf allen Seiten
   gebraucht werden: SVG-Icons statt Emojis, Sprachumschalter DE | EN,
   Spenden-Schaltflächen, Hinweis zum Abholgebiet, Karte mit
   Zwei-Klick-Lösung, Fotos in „Aktuelles“ und Quiz-Fallback.

   Alle Farben kommen aus der bestehenden Palette in styles/main.css.
   Kontraste geprüft (WCAG AA, Fließtext mind. 4.5:1):
     --ink #2B1F12 auf --sun #F5C13C ........ 9.9:1
     --ink auf --cream-warm #FDF6E3 ......... 15.6:1
     #FFFFFF auf --leaf #4A5D2E ............. 7.2:1
     #FFFFFF auf --accent-red #C13B2A ....... 5.6:1
   ===================================================================== */

/* ---------- Icons ---------- */
.icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  vertical-align: -0.16em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: 2.2rem; height: 2.2rem; stroke-width: 2; }
.icon--xl { width: 3rem; height: 3rem; stroke-width: 1.8; }
.nav a .icon { margin-right: 6px; }

/* ---------- Header: rechte Seite auch am Desktop sichtbar ---------- */
.header-actions { display: flex; align-items: center; gap: 8px; }

/* ---------- Sprachumschalter DE | EN ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 2px;
  background: var(--ink);
  flex-shrink: 0;
}
.lang-switch a,
.lang-switch span[aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 8px;
  border-radius: 999px;
  color: #fff !important;
  text-decoration: none;
}
.lang-switch a:hover,
.lang-switch a:focus-visible { background: rgba(255, 255, 255, 0.16); text-decoration: none; color: #fff; }
/* Aktive Sprache: weiße Schrift + Unterstrich, keine Füllung – immer gut lesbar auf dem dunklen Button */
.lang-switch [aria-current] {
  background: transparent;
  color: #fff !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.lang-switch .lang-sep { color: #fff !important; opacity: 0.7; padding: 0 1px; }

/* ---------- Spenden-Schaltflächen ---------- */
.btn-donate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap-min);
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--leaf);
  color: #FFFFFF;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn-donate:hover,
.btn-donate:focus-visible {
  background: #3A4A22;
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--ink);
}
.btn-donate .icon { width: 1.25em; height: 1.25em; }

/* Band direkt nach dem Hero der Startseite */
.donate-strip {
  background: var(--cream-warm);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: 18px 0;
  position: relative;
  z-index: 2;
}
.donate-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  flex-wrap: wrap;
}
.donate-strip p {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  max-width: 640px;
  line-height: 1.45;
}

/* Footer */
.footer-donate {
  margin: 14px 0 0;
}
.site-footer a.btn-donate,
.site-footer a.btn-donate:hover { color: #FFFFFF; text-decoration: none; }
.site-footer a.btn-donate { border-color: var(--sun); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); }

/* ---------- Abholgebiet Villach / Villach-Land ---------- */
.area-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  background: var(--cream-warm);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-left-width: 10px;
  border-left-color: var(--sun-deep);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 0 0 20px;
  max-width: 720px;
  box-shadow: var(--shadow-sm);
}
.area-notice .icon { width: 1.9rem; height: 1.9rem; color: var(--leaf); margin-top: 2px; }
.area-notice p { margin: 0; color: var(--ink); line-height: 1.5; }
.area-notice p + p { margin-top: 6px; }
.area-notice strong { color: var(--ink); }
.area-notice--center { margin-inline: auto; }
.area-notice--compact { padding: 12px 16px; font-size: 0.95rem; margin-bottom: 12px; }
.area-notice--compact .icon { width: 1.5rem; height: 1.5rem; }

/* ---------- Karte: Zwei-Klick-Lösung ---------- */
.map-consent {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
  background: #E8E2D0;
}
.map-consent-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
}
.map-consent-panel {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: min(90%, 420px);
  background: rgba(253, 246, 227, 0.97);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 18px 20px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.map-consent-panel p { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.45; color: var(--ink); }
.map-consent-panel a { color: var(--ink); text-decoration: underline; }
.map-consent-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap-min);
  padding: 10px 22px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--sun);
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.map-consent-btn:hover,
.map-consent-btn:focus-visible { background: var(--sun-deep); }
.map-consent-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 2px 6px;
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.85);
  color: #333;
}
.map-consent-credit a { color: #333; }
.map-consent iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Aktuelles: Fotos direkt auf der Seite ---------- */
.ab-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.ab-gallery figure { margin: 0; }
.ab-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid var(--ink);
  background: var(--paper-shadow);
}
.ab-gallery figcaption {
  font-size: 0.82rem;
  line-height: 1.35;
  margin-top: 5px;
  color: var(--ink-soft);
}
.ab-status { margin: 0; font-weight: 700; }

/* ---------- Mini-Quiz: Fallback ohne JavaScript / bei Fehlern ---------- */
.wq-fallback {
  margin: 0;
  line-height: 1.5;
}
.wq-fallback a { font-weight: 800; text-decoration: underline; }

/* ---------- Spendenbereich /mitmachen ---------- */
.bank-data dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.bank-data dt { font-weight: 800; }
.bank-data dd { margin: 0; overflow-wrap: anywhere; }
.bank-data .iban { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 0.03em; }
.copy-btn {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--cream-warm);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  vertical-align: middle;
}
.copy-btn:hover, .copy-btn:focus-visible { background: var(--sun-bg); }
/* Noch offene Angabe – gut sichtbar markiert, bis der Verein sie liefert.
   Nach dem Ersetzen class="platzhalter" und data-platzhalter entfernen. */
.bank-data .platzhalter { font-style: italic; border-left: 3px dashed currentColor; padding-left: 8px; }

/* ---------- Hinweis Zweisprachigkeit ---------- */
.lang-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 720px;
  margin: 18px auto 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--cream-warm);
  border: 2px solid var(--ink);
  color: var(--ink);
  text-align: left;
}
.lang-note .icon { width: 1.6rem; height: 1.6rem; color: var(--leaf); }
.lang-note p { margin: 0; line-height: 1.5; color: var(--ink); }

/* ---------- Besuchs-Infos (ersetzt „Weitere Informationen auf Anfrage“) ---------- */
.visit-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.visit-facts li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.visit-facts .icon { margin-top: 3px; }

@media (max-width: 940px) {
  .lang-switch { font-size: 0.8rem; }
  .lang-switch a, .lang-switch span[aria-current] { min-width: 36px; min-height: 40px; padding: 0 6px; }
}
/* ---------- Handy: Kopfzeile passt immer in die Bildschirmbreite ----------
   Logo + Sprachumschalter + Notruf + Menü waren zusammen breiter als ein
   Handy-Display; dadurch wurde die ganze Seite seitlich verschoben. */
@media (max-width: 560px) {
  .header-inner { gap: 8px; padding-inline: 12px; }
  .logo { flex-shrink: 1; min-width: 0; gap: 8px; }
  .logo-text { min-width: 0; }
  .logo-text .brand { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .logo-text .brand-sub { display: none; }
  .logo-mark-img { width: 42px; height: 42px; }
  .header-actions { gap: 6px; flex-shrink: 0; }
  .lang-switch { font-size: 0.78rem; padding: 1px; }
  .lang-switch a, .lang-switch span[aria-current] { min-width: 30px; min-height: 40px; padding: 0 5px; }
  .lang-switch .lang-sep { padding: 0; }
  .header-sos, .burger { min-width: 44px; min-height: 44px; }
}
@media (max-width: 360px) {
  .logo-text .brand { font-size: 0.9rem; }
  .logo-mark-img { width: 36px; height: 36px; }
}

/* Sicherheitsnetz: kein seitliches Verschieben der Seite am Handy
   (clip statt hidden, damit die Kopfzeile „sticky“ bleibt) */
html, body { overflow-x: clip; }

/* ---------- Startseite: Feinheiten zu den neuen Bausteinen ---------- */
.anfahrt-band .ab-facts a { color: var(--sun); font-weight: 800; text-decoration: underline; }
.anfahrt-band .ab-facts .icon { color: var(--sun); }
.emergency-cta .emergency-emoji .icon { width: 2.6rem; height: 2.6rem; color: var(--sun); }
.emergency-cta .area-notice { margin-top: 6px; }
.hs-text .area-notice { margin: 18px 0 6px; }
.help-cta .btn-donate { order: -1; }
.ziel-icon .icon, .help-icon .icon { stroke-width: 1.9; }

/* =====================================================================
   FEINSCHLIFF – Typografie, Buttons, Karten, Sektionsabstände
   Vereinheitlicht nur Maße (Größe, Zeilenhöhe, Radius, Schatten,
   Innenabstand). Farben, Schriften und Aufbau bleiben unverändert.
   Bewusst eigenständige Bausteine (Presse-Karten mit Versatzschatten,
   Polaroid-Fallgeschichten, Memory-Spiel, großer Notruf-Button) sind
   ausgenommen.
   ===================================================================== */

/* ---------- Überschriften: eine Stufenfolge H1–H4 ----------
   Gilt dort, wo kein Baustein eigene Werte setzt (Grundregel). */
h1 { font-weight: 800; line-height: 1.08; }
h2 { font-weight: 800; line-height: 1.12; }
h3 { line-height: 1.22; }
h4 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.3; }

/* ---------- Buttons: zwei Größen, gleiche Schrift ----------
   Standard 50 px hoch, groß (Hero, Anfahrt-Kopf) 56 px. */
.btn, .btn-donate, .nt-btn, .ziel-btn, .map-consent-btn,
.gallery-action .ga-btn-red, .gallery-action .ga-btn-ghost,
.anleitung-cta .cta-btn, .photo-next-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1.25;
}
/* Umgebaute <button>-Elemente am Lehrpfad erbten bisher die Fließtextgröße. */
.photo-next-actions .btn { font-weight: 800; }
/* Der große Hilfe-Button der Startseite bleibt bewusst größer. */
.btn.btn-help-main { min-height: 64px; padding: 18px 40px; font-size: 1.2rem; }
.hs-btn-red, .hs-btn-ghost, .hs-btn-sun,
.lps-btn-primary, .lps-btn-ghost,
.theme-hero .btn-sun, .theme-hero .btn-ghost-light {
  justify-content: center;
  min-height: 56px;
  padding: 16px 32px;
  line-height: 1.25;
}
/* Kleine Buttons behalten ihre Größe, erreichen aber die Mindest-Tippfläche. */
.prod-order-btn, .lps-directions-btn, .copy-btn { min-height: var(--tap-min); }

/* ---------- Karten: zwei Radien, ein Schatten, gleiche Innenabstände ---------- */
.art-card, .bank-box, .botschaft-card, .build-guide-card, .contact-card,
.element-card, .feature-card, .food-info-card, .game-card, .jahr-card,
.news-card, .ng-tip, .prod-card, .species-info-card, .step-bold-card,
.support-card, .task-card, .teaser, .ziel-card {
  border-radius: var(--radius-lg);
}
.help-item, .info-tile, .infobox, .beforeafter .panel, .stat-tile, .warn-card,
.gallery-action .ga-tile {
  border-radius: var(--radius-md);
}
/* Karten, die schon einen weichen Schatten hatten, bekommen denselben. */
.art-card, .bank-box, .botschaft-card, .build-guide-card, .food-info-card,
.help-item, .info-tile, .news-card, .prod-card, .species-info-card,
.support-card, .ziel-card, .gallery-action .ga-tile {
  box-shadow: var(--shadow-md);
}
.support-card:hover { box-shadow: var(--shadow-lg); }
/* Innenabstand der Textkarten */
.art-card, .contact-card, .feature-card, .game-card, .help-item, .info-tile,
.infobox, .ng-tip, .beforeafter .panel, .stat-tile, .task-card, .warn-card {
  padding: clamp(22px, 2.6vw, 26px) clamp(20px, 2.4vw, 24px);
}
.support-card, .bank-box, .ziel-card {
  padding: clamp(26px, 3vw, 32px) clamp(22px, 2.6vw, 28px);
}

/* ---------- Buttons in vergleichbaren Karten auf einer Linie ---------- */
.support-card { display: flex; flex-direction: column; }
.support-card > .btn:last-child { margin-top: auto; align-self: center; }

/* ---------- Sektionsabstände der Startseite ----------
   Gleicher Rhythmus wie auf den Unterseiten (main.css: section). */
.ursula-teaser, .aktuell-band, .ziele-band, .steps-bold-section,
.lehrpfad-band, .naturgarten-band, .wq-section, .anfahrt-band,
.unterstuetzen-band {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
.neu-teaser, .news-band {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
@media (max-width: 700px) {
  .ursula-teaser, .aktuell-band, .ziele-band, .steps-bold-section,
  .lehrpfad-band, .naturgarten-band, .wq-section, .anfahrt-band,
  .unterstuetzen-band { padding-top: 52px; padding-bottom: 52px; }
  .neu-teaser, .news-band { padding-top: 40px; padding-bottom: 40px; }
}

/* ---------- Kontraste (WCAG AA) ----------
   Nur Textfarben, Hintergründe bleiben. Auf dem Notfall-Rot #C94A38
   erreicht Creme 4,4:1, reines Weiß 4,65:1. Sonst werden jeweils die
   dunkleren Stufen derselben Palettenfarbe verwendet (themes.css). */
body .footer-phone, body .btn-sos, body .btn-emergency, body .hs-btn-red,
body .ziel-btn--red, body .step-bold-card.red, body .step-bold-card.red h4,
body .step-bold-card.red p, body .step-bold-card.red .sb-arrow,
body .donts-box, body .donts-box h3, body .donts-box li,
body .gallery-action .ga-thanks p, body .gallery-action .ga-thanks strong,
body .nf-sos a, body .triage-note a, body .pill.red, body .gallery-action .ga-btn-ghost {
  color: #FFFFFF;
}
body .step-bold-card.featured .sb-arrow { color: var(--color-text); }
body[data-page="start"] .ursula-teaser .ursula-sig { color: var(--terracotta-dark); }
body .gallery-action .ga-stat.alt strong { color: var(--color-honey); }
body[data-theme] .element-card .el-mass { color: var(--color-forest-dark); }
body[data-theme] .prod-body .prod-category { color: var(--color-nature-deep); }
body .shop-video-copy .prod-category { color: var(--color-forest); }
body .nf-code { color: var(--color-terracotta-deep); opacity: 1; }
body .pill:not(.dark):not(.red):not(.leaf) { color: var(--terracotta-dark); }
body .bg-ink .pill:not(.dark):not(.red):not(.leaf) { color: var(--color-honey); }
body .bg-sun-bg .eyebrow, body .bg-sun-bg a:not([class]) { color: var(--terracotta-dark); }
body .arten-table th[scope="row"] { color: var(--color-forest); }

/* Links im Fließtext sind nicht nur an der Farbe erkennbar. */
main p a:not([class]), main li a:not([class]), main dd a:not([class]),
main figcaption a:not([class]), main td a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
body .bg-red h2, body .bg-red h2 em, body .bg-red .section-header h2,
body .bg-red .eyebrow { color: #FFFFFF; }
body .station-card .sc-num, body .station-card .sc-arrow { color: var(--color-terracotta-deep); }
body .bg-ink .big-quote cite { color: var(--color-honey); }
body[data-theme="children"] main a:not([class]) { color: var(--terracotta-dark); }
body .feature-card .fc-num { opacity: 1; }
body .bg-ink .feature-card.bg-sun .fc-num { color: var(--color-text); }
body .bg-ink .feature-card.bg-red .fc-num { color: #FFFFFF; }
/* Text direkt auf roten Flächen: Weiß statt Gold oder halbtransparentem Creme.
   Helle Bausteine darin (Buttons, Pillen, Icons) sind nicht betroffen. */
body :is(.bg-red, .food-panel.bad, .donts-box, .step-bold-card.red)
  :is(h1, h2, h3, h4, p, li, strong, em, figcaption, cite, small, .eyebrow, .panel-title),
body :is(.bg-red, .food-panel.bad) :is(h1, h2, h3, h4, p, li) > span:not(.pill):not([class*="btn"]) {
  color: #FFFFFF;
}
body .bg-red .btn-ghost-light { background: transparent; color: #FFFFFF; }
/* Rot als Textfarbe auf hellem Grund: die dunklere Stufe desselben Rots. */
body .bg-red .pill, body .bg-red a.btn:not(.btn-sun):not(.btn-ghost-light),
body a.btn[href^="tel:"]:not(.btn-sos):not(.btn-emergency) { color: var(--color-emergency-dark); }
body #wq-facts-title { color: #FFFFFF; }
body .feature-card.bg-sun a:not([class]) { color: var(--color-text); }
/* Bildunterschrift der Igelpforte liegt auf der hellen Skizzen-Karte. */
body .pforte-sketch .pforte-foto figcaption { color: var(--color-text); }