/* ============================================================
   Bernice Ministry – Onepager
   Design abgeleitet aus den Flyer-PDFs (Grün/Creme/Orange/Pink)
   ============================================================ */

/* ---------- Schriften ----------
   Bewusst lokal eingebunden statt über fonts.googleapis.com: Beim Laden von
   Google-Servern würde die IP-Adresse jedes Besuchers an Google übertragen,
   was in Deutschland datenschutzrechtlich problematisch ist.
   Beide Familien stehen unter der SIL Open Font License (siehe
   assets/fonts/OFL-*.txt). Es sind Variable Fonts – eine Datei deckt den
   gesamten angegebenen Strichstärkenbereich ab. */

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/baloo2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/baloo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../assets/fonts/nunitosans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../assets/fonts/nunitosans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --green-dark: #14512e;
  --green: #1f7a45;
  --green-light: #2f9c5b;
  /* Das Gruen des Logos ist #108e45. Fuer die Wortmarke daneben ist es um
     9 % abgedunkelt: Als Text braucht sie 4,5:1 Kontrast, das Original
     schafft auf Creme nur 3,83:1. Nebeneinander ist der Unterschied nicht
     zu sehen. Gleiche Trennung wie bei --pink und --pink-text. */
  --green-logo: #0f813f;
  --cream: #fdf3e0;
  --cream-soft: #f7ecd6;
  --orange: #f2a71e;
  /* --pink ist der Flyer-Ton und bleibt dekorativen Flächen vorbehalten
     (Farbstreifen, Aufzählungszeichen, Kartenmarkierung).
     Für Text und farbige Flächen mit Text ist er zu hell: er erreicht auf
     Creme nur 3,84:1 statt der geforderten 4,5:1. Dafür gibt es --pink-text,
     den dunkelsten noch flyer-nahen Ton (4,99:1 auf Creme, 5,49:1 für Weiß
     darauf). */
  --pink: #e3288f;
  --pink-text: #c41f7a;
  --ink: #1c2b22;
  --white: #ffffff;
  --radius: 18px;
  /* Der Inhaltsrahmen. 1280px fuellt einen 1440er-Laptop, ohne dass die
     Seite auf einem grossen Monitor auseinanderfaellt. Die Textabsaetze
     bleiben davon unberuehrt, sie sind einzeln auf 60-62 Zeichen begrenzt --
     laengere Zeilen liest niemand gern. Breiter werden nur die Bilder,
     Karten und Kacheln. */
  --max-width: 1280px;
  --font-head: 'Baloo 2', 'Quicksand', sans-serif;
  --font-body: 'Nunito Sans', 'Inter', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--green-dark);
  margin: 0 0 0.4em;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

a { color: var(--green); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.stripe {
  height: 8px;
  background: linear-gradient(90deg, var(--orange) 0 50%, var(--pink) 50% 100%);
}

/* ---------- Language visibility ----------
   WICHTIG: Die Selektoren müssen mit "body " beginnen. Ohne diesen Präfix
   trifft [lang="de"] auch das <html lang="de">-Element selbst und blendet
   damit die gesamte Seite aus (html { display: none }) — die Seite bliebe
   komplett weiß. */
body [lang="de"], body [lang="en"] { display: none; }
body.lang-de [lang="de"] { display: revert; }
body.lang-en [lang="en"] { display: revert; }
body.lang-de span[lang="de"],
body.lang-en span[lang="en"] { display: inline; }

/* Sprunglink: für Tastaturnutzer, die sonst bei jedem Seitenaufruf erst durch
   Logo, Sprachumschalter und Menü tabben müssten. Nur sichtbar, wenn er den
   Fokus hat. */
.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 100;
  background: var(--green-dark);
  color: var(--white);
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}

.skip-link:focus { left: 0; }

main:focus { outline: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid rgba(31, 122, 69, 0.15);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Sobald gescrollt wird, setzt js/script.js die Klasse is-scrolled.
   Die Kopfzeile hebt sich dann durch Schatten und kräftigere Linie vom
   darunter durchlaufenden Inhalt ab. */
.site-header.is-scrolled {
  border-bottom-color: rgba(31, 122, 69, 0.3);
  box-shadow: 0 4px 16px rgba(20, 81, 46, 0.13);
}

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* Kopfzeile: Reihenfolge über "order", damit sie auf Mobil umsortiert werden kann.
   Desktop: Logo links, dann Menü, dann Sprachumschalter ganz rechts. */
.site-header .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  order: 1;
  margin-right: auto;
  flex-shrink: 0;
}

/* Das Logo ist breiter als hoch (191:155). Feste 42x42 wuerden es stauchen,
   deshalb gibt nur die Hoehe den Ton an. */
.brand img { height: 42px; width: auto; flex-shrink: 0; }

.brand .wordmark {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--green-logo);
  font-size: 1.15rem;
  line-height: 1.05;
}

nav.main-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  order: 2;
}

nav.main-nav a {
  position: relative;
  text-decoration: none;
  color: var(--green-dark);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  padding-bottom: 5px;
}

/* Nur auf Geraeten mit echtem Zeiger. Auf Touch-Geraeten bleibt :hover nach
   dem Antippen haengen, wodurch der Menuepunkt dauerhaft pink blieb. */
@media (hover: hover) and (pointer: fine) {
  nav.main-nav a:hover { color: var(--pink-text); }
}

/* Beim Scrollen markiert js/script.js den Abschnitt, in dem man sich gerade
   befindet, mit .is-active – dargestellt als pinker Balken unter dem Menüpunkt. */
nav.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

nav.main-nav a.is-active { color: var(--pink-text); }
nav.main-nav a.is-active::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  nav.main-nav a::after { transition: none; }
}

/* Mobil: Logo und Sprachumschalter in der ersten Reihe, Menü darunter über
   die volle Breite. Verhindert, dass der Schriftzug unter die Menüpunkte läuft. */
@media (max-width: 640px) {
  .lang-toggle { order: 2; }

  nav.main-nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(31, 122, 69, 0.15);
  }

  nav.main-nav a { font-size: 0.88rem; }

  .brand .wordmark { font-size: 1.05rem; }
}

.lang-toggle {
  display: inline-flex;
  border: 2px solid var(--green);
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  order: 3;
  flex-shrink: 0;
}

.lang-toggle button {
  border: none;
  background: transparent;
  color: var(--green-dark);
  padding: 6px 14px;
  cursor: pointer;
  /* Feste Zeilenhoehe, damit die Pille auf ganzen Pixeln landet. Ohne sie
     ergibt "normal" 27,5 px Inhaltshoehe und der Rahmen wird auf halben
     Pixeln gerastert. */
  line-height: 16px;
  /* Die aussenliegenden Ecken bekommen dieselbe Rundung wie die Pille.
     Vorher war die Fuellung eckig und wurde von overflow: hidden am Bogen
     weichgezeichnet abgeschnitten; dazwischen schien das Creme des
     Hintergrunds als hellere Naht durch - im gescrollten Zustand mit
     Schatten besonders auffaellig. */
  border-radius: inherit;
}

#lang-de { border-top-right-radius: 0; border-bottom-right-radius: 0; }
#lang-en { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.lang-toggle button.active {
  background: var(--green);
  color: var(--white);
}

/* ---------- Hero ---------- */
.hero {
  padding: 48px 0 32px;
}

.hero .eyebrow {
  display: inline-block;
  background: var(--pink-text);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  margin-bottom: 12px;
}

/* Auf sehr schmalen Displays läuft die H1 sonst über fünf Zeilen und füllt
   den ganzen ersten Bildschirm, bevor ein Wort Inhalt zu sehen ist. */
@media (max-width: 480px) {
  .hero h1 { font-size: 1.65rem; }
}

/* Grosses Foto direkt unter der Ueberschrift. Auf die Containerbreite
   begrenzt, weil die Vorlage nur 1280px breit ist. */
.hero-bild {
  margin: 22px 0 0;
}

.hero-bild img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* Auf breiten Bildschirmen wird das Bild oben und unten beschnitten. Im
   Hochkantformat des Handys wirkt die volle Hoehe richtig, auf dem Desktop
   nimmt sie zu viel vom ersten Bildschirm ein. Der Beschnitt sitzt mittig,
   die Kinder an den Baenken bleiben vollstaendig im Bild.
   Beim Beschneiden muss die Hoehe wieder frei werden, sonst rechnet der
   Browser weiter mit dem Seitenverhaeltnis aus width und height. */
@media (min-width: 760px) {
  .hero-bild img {
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center;
  }
}

.hero-satz {
  margin-top: 20px;
  font-size: 1.15rem;
  max-width: 60ch;
}

/* ---------- Was wir tun ---------- */
.arbeit-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

/* Muss vor dem Media-Query stehen: Bei gleicher Spezifitaet gewinnt die
   spaetere Regel, und der Query hebt diese Begrenzung wieder auf. */
.arbeit-text p { max-width: 62ch; }

@media (min-width: 860px) {
  /* Text traegt den Abschnitt, die Karte steht als schmale Randspalte daneben
     statt wie zuvor einen eigenen Bildschirm zu beanspruchen. */
  .arbeit-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; }

  /* Hier laeuft der Text bis an die Karte heran statt bei 62 Zeichen zu
     enden. Bewusste Ausnahme von der Lesebreite, die sonst auf der ganzen
     Seite gilt: Die Luecke zwischen Textende und Karte war fast 300 Pixel
     breit und liess den Abschnitt auseinanderfallen. Den Abstand haelt jetzt
     allein der Spaltenzwischenraum. */
  .arbeit-text p { max-width: none; }
}


.arbeit-karte .map-figure-klein { max-width: 300px; }

.arbeit-layout + .stats { margin-top: 32px; }

/* ---------- Section shells ---------- */
section { padding: 48px 0; }

.section-title {
  border-bottom: 3px dotted var(--green);
  padding-bottom: 10px;
  margin-bottom: 24px;
}

.section-alt {
  background: var(--cream-soft);
}

/* ---------- Karte „Wo wir arbeiten" ---------- */
.map-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

@media (min-width: 860px) {
  .map-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; }
}

/* Die Karte ist quadratisch und würde sonst deutlich höher ausfallen als der
   Text daneben. Die Begrenzung hält beide Spalten in ähnlicher Höhe. */
.map-figure {
  margin: 0;
  max-width: 420px;
  width: 100%;
}

.map-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

.map-figure figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: #4a5a4f;
  max-width: 60ch;
}

/* Beschriftungen in der Karte. Sie liegen als SVG-Text vor, damit sie beim
   Zoomen scharf bleiben und die Sprachumschaltung sie mitschaltet. */
.map-label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  fill: var(--green-dark);
}

.map-label-jinja { font-size: 20px; font-weight: 800; fill: var(--pink); }
.map-label-country { font-size: 17px; letter-spacing: 2px; fill: var(--green); opacity: 0.55; }
.map-label-water { fill: #3d7f9e; font-weight: 600; }
/* Deckkraft 0,85 statt 0,5: bei 0,5 erreichten die Labels nur 2,5:1 Kontrast. */
.map-label-neighbour { font-size: 13px; fill: var(--green-dark); opacity: 0.85; font-weight: 600; }
.map-label-small { font-size: 12px; font-weight: 600; }

/* Die Sprachumschaltung blendet Elemente über [lang] aus. Für SVG-Text braucht
   es eine eigene Regel, weil "display: revert" dort nicht zuverlässig auf
   "inline" zurückfällt. */
body.lang-de svg text[lang="de"],
body.lang-en svg text[lang="en"] { display: inline; }

.map-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.map-facts li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
}

.map-facts .icon { color: var(--pink); flex-shrink: 0; }

/* ---------- Dream list ---------- */
.dream-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

/* Ab dieser Breite stehen die vier Karten zu zweit nebeneinander. Sonst
   liefe der Text im breiten Rahmen ueber 150 Zeichen pro Zeile. */
@media (min-width: 900px) {
  .dream-list { grid-template-columns: 1fr 1fr; }
}

.dream-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.dream-list .icon {
  color: var(--pink);
  font-size: 1.2rem;
  line-height: 1.4;
  flex-shrink: 0;
}

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

.stat-card {
  background: var(--green);
  color: var(--white);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
}

.stat-card .number {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 800;
  display: block;
  /* Beim Hochzaehlen wechseln die Ziffern viele Male. Mit gleich breiten
     Ziffern zappelt die Zahl dabei nicht herum. */
  font-variant-numeric: tabular-nums;
}

.stat-card .label {
  font-size: 0.92rem;
  opacity: 0.95;
}

/* ---------- Children stories ---------- */
.stories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 700px) {
  .stories { grid-template-columns: 1fr 1fr; }
}

.story-card {
  background: var(--white);
  border: 2px dashed var(--green);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

.story-photo {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg, var(--cream-soft), var(--cream-soft) 12px, #eee0c2 12px, #eee0c2 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
}

.story-photo svg { width: 56px; height: 56px; opacity: 0.6; }

.story-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.story-body { padding: 18px 20px; }

.story-body h3 { margin-bottom: 4px; }

.story-body p { color: #4a5a4f; font-size: 0.95rem; margin-bottom: 0; }

/* ---------- Donation ---------- */
.donate-purposes {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 62ch;
}

.donate-purposes li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.donate-purposes .icon { color: var(--pink); }

/* Zweispaltiger Spendenbereich: links warum und wie viel, rechts wohin.
   Einspaltig lief beides untereinander und liess neben dem auf Lesebreite
   begrenzten Text die halbe Seite frei. Erst ab 1000px, darunter passen
   Kontodaten und Erklaerung nicht sinnvoll nebeneinander. */
@media (min-width: 1000px) {
  .spenden-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 44px;
    align-items: start;
  }
}

/* In der schmalen Spalte stehen die beiden Zusatzkonten untereinander,
   nicht nebeneinander wie im vollen Rahmen. */
@media (min-width: 1000px) {
  .spenden-konten .bank-cards { grid-template-columns: 1fr; }
}

.bank-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.bank-card {
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  overflow: hidden;
}

.bank-card .bank-header {
  background: var(--green);
  color: var(--white);
  padding: 10px 18px;
  font-family: var(--font-head);
  font-weight: 700;
}

.bank-card .bank-body {
  padding: 16px 18px;
  font-size: 0.92rem;
}

.bank-card dt { font-weight: 700; color: var(--green-dark); margin-top: 8px; }
.bank-card dt:first-child { margin-top: 0; }
.bank-card dd { margin: 0 0 4px; }

/* Hauptweg: das Konto, über das deutsche Spender eine Bescheinigung erhalten.
   Es steht allein und breiter, damit gar nicht erst die Frage aufkommt,
   welches der drei Konten das richtige ist. */
.bank-card-primary {
  max-width: 560px;
  border-width: 3px;
  box-shadow: 0 4px 18px rgba(20, 81, 46, 0.1);
}

.bank-card-primary .bank-body { font-size: 1rem; }

/* Auf schmalen Displays bricht die IBAN um; flex mit gap hält den Abstand zur
   Schaltfläche dann gleich, statt sie an der umgebrochenen Zeile kleben zu
   lassen. */
.iban-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.iban {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Die Schaltfläche fügt js/script.js ein – ohne Zwischenablage-Unterstützung
   erscheint sie gar nicht erst, statt wirkungslos dazustehen. */
.copy-btn {
  border: 2px solid var(--green);
  background: transparent;
  color: var(--green-dark);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.copy-btn:hover { background: var(--green); color: var(--white); }

.copy-feedback {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--green);
}

.bank-note {
  margin: 0;
  padding: 12px 18px 16px;
  font-size: 0.88rem;
  border-top: 1px dotted rgba(31, 122, 69, 0.4);
}

.bank-note-warn { color: #8a4b00; border-top-color: rgba(242, 167, 30, 0.6); }

/* Nebenwege: nativ aufklappbar, ohne JavaScript und mit Tastatur bedienbar. */
.more-ways { margin-top: 28px; }

.more-ways > summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--green-dark);
  padding: 10px 0;
  border-top: 3px dotted var(--green);
  border-bottom: 3px dotted var(--green);
}

.more-ways > summary:hover { color: var(--pink-text); }
.more-ways > summary:focus-visible { outline: 2px solid var(--pink-text); outline-offset: 3px; }
.more-ways[open] > summary { margin-bottom: 20px; }

/* Der Kernsatz des Spendenbereichs: Eine Patenschaft muss niemand allein
   tragen. Bewusst hervorgehoben, weil die frühere Betragsstaffel genau diese
   Aussage nicht transportiert hat. */
.share-note {
  background: var(--cream-soft);
  border-left: 4px solid var(--pink-text);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
  max-width: 62ch;
}

/* Schlichter Absatz, bewusst ohne farbigen Kasten: Zwei Hervorhebungen im
   selben Abschnitt wuerden einander die Wirkung nehmen. Er leitet von den
   Betragszeilen zu "Weitere Spendenzwecke" ueber. */
/* Kleingedruckter Zusatz unter der Patenschaft. Hiess frueher
   .special-needs-note und trug den Hinweis zu Kindern mit besonderem
   Bedarf; die Gestaltung passt unveraendert zum Betragshinweis. */
.patenschaft-hinweis {
  font-size: 0.92rem;
  margin-bottom: 32px;
  max-width: 62ch;
}

/* Betragszeilen: Anteile einer Patenschaft */
.donation-note {
  margin-top: 24px;
  background: var(--cream-soft);
  border-left: 4px solid var(--orange);
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.92rem;
}

/* ---------- Contact ---------- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.contact-card {
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-align: center;
}

.contact-card a {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  /* E-Mail-Adressen sind eine einzige lange Zeichenkette ohne Leerzeichen und
     ragen sonst auf schmalen Displays aus der Karte heraus
     (bernicechildrenministry@gmail.com braucht 266px in einer 272px breiten
     Karte). break-word erlaubt den Umbruch nur, wenn es sonst nicht passt. */
  overflow-wrap: break-word;
  max-width: 100%;
}

@media (max-width: 480px) {
  /* Etwas kleiner, damit die lange Adresse meist ohne Umbruch auskommt. */
  .contact-card a { font-size: 0.88rem; }
}

/* Gleiche Absicherung für lange Werte in den Kontokarten. */
.bank-card dd { overflow-wrap: break-word; }

/* Laufband auf der Startseite: Der Streifen wandert stetig nach links.
   Volle Fensterbreite, damit die Bilder wirklich "durchwischen" statt im
   Container zu stecken. */
.gal-band {
  overflow: hidden;
  margin-top: 4px;
  /* Weiche Kanten links und rechts, damit die Bilder nicht abrupt abreissen. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.gal-track {
  display: flex;
  width: max-content;
  /* Die Dauer haengt an der Anzahl der Bilder: Das Band wandert um seine
     halbe Laenge, also wird es bei gleicher Dauer schneller, je mehr
     Bilder dazukommen. 182s halten bei 26 Bildern dasselbe Tempo wie
     140s bei 20. Beim Ergaenzen bitte mitziehen. */
  animation: gal-lauf 182s linear infinite;
}

/* Der Abstand steckt bewusst im Rand der Bilder und nicht in "gap".
   Mit gap laege der Anfang der Kopie bei -50% minus einem halben Abstand,
   sodass die Verschiebung von der Abstandsgroesse abhaengt - auf Mobil mit
   kleinerem Abstand sprang der Streifen dadurch bei jedem Durchlauf.
   Mit Rand gehoert der Abstand zum Element, und -50% trifft exakt. */
.gal-bild {
  display: block;
  flex-shrink: 0;
  margin-right: 14px;
  border-radius: 12px;
  overflow: hidden;
}

.gal-track img {
  height: 230px;
  width: auto;
  display: block;
}

@keyframes gal-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Beim Ueberfahren anhalten, damit man ein Bild in Ruhe ansehen kann.
   Gilt nur fuer die reine CSS-Fassung; mit JavaScript uebernimmt das Skript. */
@media (hover: hover) and (pointer: fine) {
  .gal-band:not(.band-zieh):hover .gal-track { animation-play-state: paused; }
}

/* Schiebbares Band. Die Klasse setzt das Skript, deshalb bleibt ohne
   JavaScript die reine CSS-Fassung oben stehen und laeuft wie bisher.
   Statt den Streifen zu verschieben, wird hier der Container gescrollt:
   Nur so greifen Ziehen mit der Maus und Wischen am Handy auf dieselbe
   Bewegung zu, und auf dem Handy gibt es den gewohnten Nachlauf gratis. */
.gal-band.band-zieh {
  overflow-x: auto;
  /* html traegt scroll-behavior: smooth; hier waere das fatal, jeder
     Schritt der Animation wuerde einzeln weich anfahren. */
  scroll-behavior: auto;
  scrollbar-width: none;
  touch-action: pan-x;
  cursor: grab;
}

.gal-band.band-zieh::-webkit-scrollbar { display: none; }

.gal-band.band-zieh.band-greift { cursor: grabbing; }

.gal-band.band-zieh .gal-track { animation: none; }

/* Waehrend des Ziehens darf kein Bild als Text markiert oder als Bild
   herausgezogen werden, sonst bricht die Geste ab. */
.gal-band.band-greift .gal-track { user-select: none; }
.gal-band.band-zieh .gal-track img { -webkit-user-drag: none; user-select: none; }

/* Wer Bewegung reduziert haben moechte, bekommt einen ruhigen Streifen,
   der sich von Hand schieben laesst. */
@media (prefers-reduced-motion: reduce) {
  .gal-band { overflow-x: auto; }
  .gal-track { animation: none; }
}

@media (max-width: 640px) {
  .gal-track img { height: 160px; }
  .gal-bild { margin-right: 10px; }
  .gal-track { animation-duration: 124s; }
}

.gal-more { margin-top: 18px; }

.gal-more a {
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--green);
  padding-bottom: 2px;
}

.gal-more a:hover { color: var(--pink-text); border-bottom-color: var(--pink-text); }

/* ---------- Geschichten von Kindern ---------- */

.kinder-intro { max-width: 62ch; margin-bottom: 28px; }

.kind-karte {
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

@media (min-width: 800px) {
  /* Bilder links, Text rechts. Die Bildspalte bleibt schmal, damit die
     beiden Hochformate nebeneinander passen, ohne den Text zu erdrücken. */
  .kind-karte { grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
}

.kind-bilder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.kind-bilder figure { margin: 0; }

.kind-bilder img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* Kein erzwungenes Seitenverhaeltnis: Die Aufnahmen sind mit 1:2,4 sehr
     hoch. Ein 3:4-Zuschnitt hat ihnen Kopf und Fuesse abgeschnitten. */
}

.kind-bilder figcaption {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green);
  margin-top: 5px;
  text-align: center;
  /* Versalien ueber CSS statt in Grossbuchstaben im Text: Screenreader
     lesen "Frueher" dann als Wort und nicht Buchstabe fuer Buchstabe. */
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kind-text h3 { margin-bottom: 0.5em; font-size: 1.4rem; }
.kind-text p { max-width: 60ch; }
.kind-text p:last-child { margin-bottom: 0; }

/* Der Satz, der zeigt, dass sich hier tatsaechlich mehrere eine Patenschaft
   teilen - das Gegenstueck zur Aussage im Spendenbereich. */

/* Im breiten Rahmen steht der Kasten neben der Geschichte statt darunter.
   Der Fliesstext ist auf 60 Zeichen begrenzt, rechts davon blieb sonst eine
   grosse leere Flaeche.
   Zwei Feinheiten:
   - Die Regel muss nach body.lang-* [lang] stehen und selbst mit body.lang-*
     beginnen. Ein blosses [lang] { display: grid } wuerde auch die gerade
     ausgeblendete Sprachfassung wieder sichtbar machen.
   - :has() begrenzt das Raster auf Karten, die den Kasten ueberhaupt haben.
     Graces Karte hat keinen und behaelt die volle Textbreite. Wo :has()
     fehlt, greift die Regel nicht und der Kasten steht wie bisher darunter. */
@media (min-width: 1100px) {
  body.lang-de .kind-text > [lang="de"]:has(> .kind-paten),
  body.lang-en .kind-text > [lang="en"]:has(> .kind-paten) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    column-gap: 28px;
    align-items: start;
  }

  .kind-text > [lang] > .kind-paten { margin-top: 0; margin-bottom: 0; }
}

.kind-story + .kind-paten { margin-top: 1em; }

.kind-paten {
  background: var(--cream-soft);
  border-left: 4px solid var(--pink-text);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.kind-hinweis {
  font-size: 0.88rem;
  color: #4a5a4f;
  max-width: 62ch;
}

/* ---------- Bildergalerie ---------- */

.gal-intro { max-width: 62ch; margin-bottom: 28px; }
.spenden-intro, .kontakt-intro { max-width: 62ch; }

/* CSS-Spalten statt Raster mit festem Seitenverhaeltnis: Die Sammlung mischt
   Hoch- und Querformate, ein starres Raster wuerde die Hochformate beschneiden.
   So behaelt jedes Bild seine Proportionen. */
/* Die Spaltenzahl steht zusaetzlich als Eigenschaft, damit das Skript sie
   auslesen kann. So bleiben die Bruchstellen an einer einzigen Stelle. */
.gal-grid { --gal-spalten: 1; columns: 1; column-gap: 16px; }

@media (min-width: 600px)  { .gal-grid { --gal-spalten: 2; columns: 2; } }
@media (min-width: 900px)  { .gal-grid { --gal-spalten: 3; columns: 3; } }
@media (min-width: 1180px) { .gal-grid { --gal-spalten: 4; columns: 4; } }

.gal-grid .gal-item {
  /* verhindert, dass ein Bild ueber den Spaltenumbruch zerrissen wird */
  break-inside: avoid;
  margin-bottom: 16px;
}

/* Vom Skript gesetzt. Das CSS-Spaltenmodell bricht nach Textfluss um und
   kann Bilder nicht teilen; bei 25 Aufnahmen unterschiedlicher Hoehe blieb
   unten eine Stufe von rund 600 Pixeln. Mit echten Spalten sucht das Skript
   die Bruchstellen so, dass die laengste Spalte moeglichst kurz wird.
   Ohne JavaScript bleibt das Spaltenmodell oben stehen. */
.gal-grid.gal-verteilt {
  columns: auto;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.gal-spalte {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gal-grid.gal-verteilt .gal-item { margin-bottom: 0; }

.gal-item {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--green);
  background: var(--white);
  line-height: 0;
}

.gal-item img { width: 100%; height: auto; }

.gal-item:hover { border-color: var(--pink-text); }
.gal-item:focus-visible { outline: 3px solid var(--pink-text); outline-offset: 3px; }

/* Grossansicht. js/script.js blendet sie ein; ohne JavaScript bleiben die
   Bilder gewoehnliche Verweise auf die grosse Datei. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 81, 46, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 96px);
  width: auto;
  height: auto;
  border-radius: 10px;
}

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: var(--cream);
  color: var(--green-dark);
  border: none;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  padding: 8px 18px;
  cursor: pointer;
}

.lightbox-close:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

/* Blaetterpfeile. Sie liegen ueber dem Bildrand und sind gross genug, um auf
   dem Handy sicher getroffen zu werden (48px erfuellt die uebliche
   Mindestgroesse fuer Tippziele). */
.lightbox-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 999px;
  background: var(--cream);
  color: var(--green-dark);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px;
}

.lightbox-zurueck { left: 16px; }
.lightbox-vor     { right: 16px; }

.lightbox-pfeil:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .lightbox-pfeil:hover { background: var(--white); }
}

.lightbox-zaehler {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: var(--cream);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* Auf schmalen Displays ruecken die Pfeile an den Rand und das Bild bekommt
   oben und unten Platz fuer Schliessen-Schaltflaeche und Zaehler. */
@media (max-width: 560px) {
  .lightbox { padding: 64px 12px 52px; }
  .lightbox img { max-height: calc(100vh - 130px); }
  .lightbox-pfeil { width: 44px; height: 44px; font-size: 1.7rem; }
  .lightbox-zurueck { left: 6px; }
  .lightbox-vor     { right: 6px; }
}

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--green-dark);
  color: var(--white);
  position: relative;
  overflow: hidden;
  padding: 40px 0 24px;
}

footer.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../assets/hands-pattern.svg') repeat-x bottom;
  background-size: 300px 100px;
  opacity: 0.5;
  pointer-events: none;
}

footer .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

footer p { margin: 0; font-size: 0.85rem; opacity: 0.9; }

.footer-brand {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1rem;
}

.footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--white);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.9;
}

.footer-links a:hover { opacity: 1; }

/* ---------- Rechtstext-Seiten (Impressum, Datenschutz) ---------- */
.legal-page { padding: 48px 0 64px; }

.legal-page h2 {
  font-size: 1.25rem;
  margin-top: 2em;
}

.legal-page h2:first-of-type { margin-top: 1em; }

.legal-page p,
.legal-page li { max-width: 68ch; }

.legal-page ul { padding-left: 1.2em; }

.legal-page li { margin-bottom: 0.4em; }

.legal-page address {
  font-style: normal;
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: inline-block;
  margin-bottom: 1em;
}

.legal-note {
  background: var(--cream-soft);
  border-left: 4px solid var(--orange);
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.92rem;
}

.back-link {
  display: inline-block;
  margin-top: 32px;
  font-weight: 700;
  text-decoration: none;
}

.back-link:hover { color: var(--pink-text); }

/* ---------- Utility ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}