/* ==========================================================================
   Christliche Pfadfinder Schönberg – Stamm Probst Friedrich
   Ein einzelnes Stylesheet, bewusst ohne Framework und ohne Build-Schritt.
   Reihenfolge: Schriften, Farben, Grundlagen, Bausteine, Abschnitte, Hilfen.
   ========================================================================== */

/* --------------------------------------------------------------- Schriften */
/* Selbst gehostet: keine Verbindung zu Google Fonts, damit die Seite ohne
   Cookie-Banner und ohne Datenabfluss an Dritte auskommt. */
@font-face {
  font-family: "Schola";
  src: url("fonts/schola-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/lato-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/lato-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- Tokens */
:root {
  /* Grün aus dem Stammeslogo, Ziegelrot als Akzent, Creme als Papierton */
  --gruen-900: #10261a;
  --gruen-800: #173824;
  --gruen-700: #1f4a2f;
  --gruen-600: #2c6540;
  --gruen-500: #3d8054;
  --gruen-100: #dcebe0;
  --gruen-50:  #eff5f0;
  --ziegel:    #c0431f;
  --ziegel-h:  #dc8a60;
  --messing:   #b88a2e;

  --papier:    #fdfbf5;
  --papier-2:  #f5f0e4;
  --rand:      #e2dbc9;
  --tinte:     #262a24;
  --tinte-mut: #5c6259;

  --fg:        var(--tinte);
  --fg-mut:    var(--tinte-mut);
  --bg:        var(--papier);
  --bg-2:      var(--papier-2);
  --linie:     var(--rand);
  --marke:     var(--gruen-700);
  --marke-kontrast: #ffffff;
  /* Eigene Toene fuer Formulare: --rand ist als Kartenkante gedacht und
     waere als Feldrand mit 1,3:1 zu schwach (WCAG 1.4.11 will 3:1).
     --fehler steht getrennt von --ziegel, weil der Akzentton auf dunklem
     Grund nur 3,5:1 erreicht. */
  --feld-rand: #8f887a;
  --fehler:    var(--ziegel);

  /* Fließende Typografie: skaliert zwischen 360 px und 1400 px Viewport */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-xl:   clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  --t-2xl:  clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  --t-3xl:  clamp(2.125rem, 1.6rem + 2.3vw, 3.5rem);
  --t-4xl:  clamp(2.5rem, 1.7rem + 3.6vw, 4.75rem);

  /* Abstandsraster */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --breite:   76rem;   /* normale Inhaltsbreite */
  --breite-s: 44rem;   /* Lesespalte für Fließtext */
  --breite-gal: 90rem; /* Bildergalerien, breiter als der Text */
  --radius:   14px;
  --radius-s: 8px;
  --schatten: 0 1px 2px rgba(16, 38, 26, .06), 0 6px 20px -8px rgba(16, 38, 26, .14);
  --schatten-l: 0 2px 4px rgba(16, 38, 26, .07), 0 18px 48px -16px rgba(16, 38, 26, .22);
  --kopf-h: 4.25rem;
}

/* Dunkelmodus: nur die Tokens werden getauscht, nicht die Bausteine. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier:   #141813;
    --papier-2: #1c221b;
    --rand:     #30382e;
    --tinte:    #e8e9e2;
    --tinte-mut:#a6ac9f;
    --gruen-100:#24402c;
    --gruen-50: #1a2a1e;
    --marke:    #8fc49f;
    --marke-kontrast: #10261a;
    --ziegel-h: #e0a07e;
    --feld-rand: #6e7a6b;
    --fehler:   #ef8a6a;
    --schatten:   0 1px 2px rgba(0,0,0,.4), 0 6px 20px -8px rgba(0,0,0,.6);
    --schatten-l: 0 2px 4px rgba(0,0,0,.4), 0 18px 48px -16px rgba(0,0,0,.7);
  }
}

/* -------------------------------------------------------------- Grundlagen */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anker nicht unter die fixierte Kopfzeile scrollen lassen */
  scroll-padding-top: calc(var(--kopf-h) + var(--s-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Lato, "Segoe UI", system-ui, sans-serif;
  font-size: var(--t-base);
  line-height: 1.65;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: Schola, Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
  /* Zusammengesetzte deutsche Woerter werden laenger als 360 px breite
     Telefone. Weiche Trennstellen (­) im Text geben vor, wo getrennt
     wird; break-word ist die Notbremse fuer alles, was spaeter dazukommt.
     Ohne das schneidet overflow-x: hidden am body den Rest einfach ab. */
  overflow-wrap: break-word;
  hyphens: manual;
}
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--marke); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

img, svg, picture { max-width: 100%; display: block; }
img { height: auto; }

:focus-visible {
  outline: 3px solid var(--gruen-500);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Auf den dunkelgruenen Flaechen hat --gruen-500 nur 1,7:1 gegen den Grund.
   Dort markiert ein weisser Rahmen (8,2:1). Dasselbe gilt fuer die Kopfzeile,
   solange sie durchsichtig ueber dem Hero liegt. */
.abschnitt--gruen :focus-visible,
.eckdaten :focus-visible,
.fuss :focus-visible,
.hero :focus-visible,
.kopf:not([data-gescrollt="ja"]) :focus-visible { outline-color: #fff; }

/* Ueber dem Hero liegt ein FOTO, kein bekannter Farbgrund: Auf hellen
   Stellen verschwindet ein weisser Rahmen, auf dunklen ein gruener. Darum
   dort ein zweifarbiger Ring - weisser Rahmen mit dunklem Hof aussen
   herum. Einer von beiden hebt sich immer ab, egal was das Bild zeigt.
   Der Hof liegt per Schatten 0..9 px aussen, der Rahmen zeichnet darueber
   bei 3..6 px. Dasselbe gilt fuer die Sprungmarke: sie sitzt ebenfalls
   ueber dem Hero. */
.hero :focus-visible,
.kopf:not([data-gescrollt="ja"]) :focus-visible,
.sprungmarke:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 9px rgba(10, 24, 15, .88);
}
/* Im geoeffneten Handymenue liegt kein Foto mehr hinter den Links, sondern
   die helle Menueflaeche. Dort tut es der normale gruene Rahmen. */
.nav[data-offen="ja"] :focus-visible {
  outline-color: var(--gruen-500);
  box-shadow: none;
}

::selection { background: var(--gruen-100); color: var(--gruen-900); }

/* --------------------------------------------------------------- Bausteine */
.wrap {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}
.wrap--schmal { width: min(100% - 2.5rem, var(--breite-s)); }
/* Bildergalerien duerfen breiter laufen als der Fliesstext: Text will
   eine gut lesbare Zeilenlaenge, Bilder wollen Flaeche. */
.wrap--galerie { width: min(100% - 2.5rem, var(--breite-gal)); }

.abschnitt { padding-block: clamp(var(--s-8), 9vw, var(--s-10)); }
.abschnitt--getoent { background: var(--bg-2); }
.abschnitt--gruen {
  background: var(--gruen-700);
  color: #eef5ef;
}
.abschnitt--gruen h2, .abschnitt--gruen h3 { color: #fff; }
.abschnitt--gruen a { color: #cfe6d5; }

/* Kleine Überschriftenmarke über jedem Abschnitt */
.kicker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marke);
  margin-bottom: var(--s-3);
}
.kicker::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: currentColor;
  flex: none;
}
.abschnitt--gruen .kicker { color: #9cc9a9; }

.vorspann {
  font-size: var(--t-lg);
  color: var(--fg-mut);
  max-width: 54ch;
}
.abschnitt--gruen .vorspann { color: #c6ddcb; }

.kopfzeile-block { margin-bottom: var(--s-7); }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--voll {
  background: var(--gruen-700);
  color: #fff;
}
.btn--voll:hover { background: var(--gruen-600); }

.btn--rand {
  border-color: currentColor;
  color: var(--fg);
  background: transparent;
}
.btn--rand:hover { background: var(--gruen-50); }

.btn--hell {
  background: #fff;
  color: var(--gruen-800);
}
.btn--hell:hover { background: var(--gruen-50); }

.btn--geist {
  border-color: rgba(255,255,255,.55);
  color: #fff;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}
.btn--geist:hover { background: rgba(255,255,255,.2); }

.btn-reihe { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Karten ----------------------------------------------------------------- */
.karte {
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.abschnitt--getoent .karte { background: var(--papier); }

/* ------------------------------------------------------------- Kopfzeile  */
.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--kopf-h);
  display: flex;
  align-items: center;
  transition: background-color .25s, box-shadow .25s, border-color .25s;
  border-bottom: 1px solid transparent;
}
/* Über dem Hero transparent, danach als feste Leiste */
.kopf[data-gescrollt="ja"] {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--linie);
  box-shadow: var(--schatten);
}

.kopf__innen {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.marke {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
  flex: none;
}
.marke img { width: 2.6rem; height: auto; }
.marke__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.marke__zeile1 {
  font-family: Schola, Georgia, serif;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.marke__zeile2 {
  font-size: 0.6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-mut);
}
/* Über dem Hero steht die Marke auf dem Bild und braucht helle Farbe.
   Knöpfe sind ausgenommen: sie bringen ihre Farben selbst mit. */
.kopf:not([data-gescrollt="ja"]) .marke,
.kopf:not([data-gescrollt="ja"]) .nav__liste a:not(.btn) { color: #fff; }
.kopf:not([data-gescrollt="ja"]) .marke__zeile2 { color: rgba(255,255,255,.75); }
.kopf:not([data-gescrollt="ja"]) .marke,
.kopf:not([data-gescrollt="ja"]) .nav__liste a:not(.btn) { text-shadow: 0 1px 12px rgba(0,0,0,.5); }

.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-3), 1.6vw, var(--s-5));
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__liste a {
  color: var(--fg);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 700;
  padding-block: var(--s-2);
  position: relative;
}
.nav__liste a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}
.nav__liste a:hover::after,
.nav__liste a[aria-current="true"]::after { transform: scaleX(1); }
.nav__liste .btn { padding: 0.55rem 1.1rem; font-size: var(--t-sm); }
.nav__liste .btn::after { display: none; }
/* Der Kontaktknopf muss seine Knopffarben in JEDER Lage behalten: über dem
   Hero, gescrollt, hell, dunkel und im geöffneten Handymenü. Sonst gewinnt
   die Textfarbe der Navigationslinks und es stünde dunkle Schrift auf
   dunkelgrünem Grund – 1,4:1 und damit unlesbar. */
.kopf .nav__liste a.btn--voll {
  background: var(--gruen-700);
  color: #fff !important;
  text-shadow: none !important;
}
.kopf .nav__liste a.btn--voll:hover { background: var(--gruen-600); }

/* Menüschalter nur im schmalen Layout */
.menue-schalter {
  display: none;
  /* flex: none, damit der Schalter bei 320 px nicht zusammengedrueckt wird
     und als Tippziel unter 44 px faellt. */
  flex: none;
  width: 2.75rem; height: 2.75rem;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-s);
  color: inherit;
  cursor: pointer;
}
.menue-schalter svg { width: 1.4rem; height: 1.4rem; }
.menue-schalter .ikon-zu { display: none; }
.menue-schalter[aria-expanded="true"] .ikon-auf { display: none; }
.menue-schalter[aria-expanded="true"] .ikon-zu { display: block; }

/* Bei 320 px reichte die Kopfzeile nicht fuer Logo, Markentext und
   Menueschalter: der Schalter wurde hinausgedrueckt. Beide treten einen
   Schritt zurueck, statt den Schalter schmaler zu machen - er soll als
   Tippziel seine 44 px behalten. */
@media (max-width: 23rem) {
  .marke img { width: 2.2rem; }
  .marke__zeile1 { font-size: 0.9375rem; }
  .marke__zeile2 { font-size: 0.625rem; }
}

@media (max-width: 56rem) {
  .menue-schalter { display: flex; }
  .kopf:not([data-gescrollt="ja"]) .menue-schalter { color: #fff; }

  .nav {
    position: fixed;
    inset: var(--kopf-h) 0 auto;
    background: var(--bg);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten-l);
    padding: var(--s-4) 1.25rem var(--s-6);
    display: none;
  }
  .nav[data-offen="ja"] { display: block; }

  /* Diese Regeln gelten nur fuer das ausklappbare Menue der Startseite
     (.nav). Unterseiten benutzen dieselbe Liste ohne diesen Rahmen - ohne
     die Einschraenkung stellten sich ihre zwei Links untereinander und
     wurden von der festen Hoehe der Kopfzeile abgeschnitten. */
  .nav .nav__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav .nav__liste li + li { border-top: 1px solid var(--linie); }
  .nav .nav__liste a:not(.btn) {
    color: var(--fg) !important;
    text-shadow: none !important;
  }
  .nav .nav__liste a {
    display: block;
    padding: var(--s-4) var(--s-2);
    font-size: var(--t-lg);
  }
  .nav .nav__liste a::after { display: none; }
  .nav .nav__liste li:last-child { margin-top: var(--s-4); border-top: 0; }
  .nav .nav__liste .btn { width: 100%; padding: var(--s-4); font-size: var(--t-base); }
}

/* ------------------------------------------------------------------- Hero */
.hero {
  position: relative;
  min-height: min(92svh, 54rem);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--kopf-h) + var(--s-6));
  padding-bottom: var(--s-8);
  isolation: isolate;
  color: #fff;
}
.hero__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Verlauf, damit die Schrift auf jedem Bildausschnitt lesbar bleibt */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(10,24,15,.92) 0%, rgba(10,24,15,.72) 28%,
                    rgba(10,24,15,.28) 58%, rgba(10,24,15,.42) 100%);
}
.hero h1 { color: #fff; margin-bottom: var(--s-4); }
.hero__augbraue {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Weiss statt des zarten Gruens: ueber den hellsten Stellen des Hero-Fotos
     kam #b9d9c3 nur auf 3,3:1, noetig sind 4,5:1. */
  color: #fff;
  margin-bottom: var(--s-4);
}
.hero__text {
  font-size: var(--t-lg);
  color: rgba(255,255,255,.92);
  max-width: 46ch;
  margin-bottom: var(--s-6);
}

/* Eckdatenleiste direkt unter dem Hero */
.eckdaten {
  background: var(--gruen-800);
  color: #dceae0;
}
.eckdaten__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.14);
  list-style: none;
  margin: 0;
  padding: 0;
}
.eckdaten__liste li {
  background: var(--gruen-800);
  padding: var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.eckdaten__wert {
  font-family: Schola, Georgia, serif;
  font-size: var(--t-lg);
  color: #fff;
  line-height: 1.2;
}
.eckdaten__bez {
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #93b79e;
}

/* ------------------------------------------------------ Werte / Grundsätze */
.werte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s-5);
}
.wert {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.wert__ikon {
  width: 3rem; height: 3rem;
  color: var(--marke);
  flex: none;
}
.wert h3 { margin: 0; font-size: var(--t-lg); }
.wert p { color: var(--fg-mut); font-size: var(--t-sm); margin: 0; }

/* ------------------------------------------------------------- Was wir tun */
.tun { display: flex; flex-direction: column; gap: clamp(var(--s-7), 7vw, var(--s-9)); }
.tun__zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(var(--s-5), 5vw, var(--s-8));
}
.tun__zeile:nth-child(even) .tun__bild { order: 2; }
.tun__bild {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten-l);
}
.tun__bild img { width: 100%; }
.tun__text h3 { font-size: var(--t-2xl); }
.tun__text p { color: var(--fg-mut); }

@media (max-width: 48rem) {
  .tun__zeile { grid-template-columns: 1fr; gap: var(--s-5); }
  .tun__zeile:nth-child(even) .tun__bild { order: 0; }
}

/* ---------------------------------------------------------------- Gruppen */
.gruppen {
  display: grid;
  /* min(): bei 320 px ist die Spalte nur noch so breit wie der Platz. Mit
     festen 19rem ragten die Karten dort ueber den Rand hinaus. */
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--s-5);
}
.gruppe {
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(var(--s-5), 3vw, var(--s-6));
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
  overflow: hidden;
}
.abschnitt--getoent .gruppe { background: var(--papier); }
/* Farbkante links: Meute und Sippe unterscheidbar machen */
.gruppe::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--gruppe-farbe, var(--gruen-600));
}
.gruppe--meute { --gruppe-farbe: var(--ziegel); }
.gruppe--sippe { --gruppe-farbe: var(--gruen-600); }

.gruppe__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.gruppe h3 { margin: 0; font-size: var(--t-2xl); }
.gruppe__alter {
  font-weight: 700;
  font-size: var(--t-sm);
  color: #fff;
  background: var(--gruppe-farbe);
  padding: .25rem .7rem;
  border-radius: 999px;
  white-space: nowrap;
}
.gruppe__beschreibung { color: var(--fg-mut); margin: 0; }

.termin {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border-top: 1px solid var(--linie);
  padding-top: var(--s-4);
}
.termin li { display: flex; gap: var(--s-3); align-items: flex-start; }
.termin svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--marke); margin-top: .2rem; }
.termin strong { display: block; }
.termin span { color: var(--fg-mut); font-size: var(--t-sm); }

.hinweis-rhythmus {
  font-size: var(--t-sm);
  color: var(--fg-mut);
  background: var(--gruen-50);
  border-radius: var(--radius-s);
  padding: var(--s-3) var(--s-4);
  margin: 0;
}

/* -------------------------------------------------------------------- Team */
/* Die Spaltenzahl ist bewusst fest vorgegeben statt per auto-fill:
   Zehn Personen gehen nur bei 2 oder 5 Spalten glatt auf. auto-fill traf
   je nach Fensterbreite auch 3 oder 4 - dann blieb eine halbe Reihe uebrig. */
/* Die Wand ist ein Flex-Verbund, kein Raster. Ein Raster setzt eine
   angefangene letzte Reihe linksbuendig an - bei neun Personen in fuenf
   Spalten klafft dann rechts ein Loch. Flex zentriert die Restreihe. Die
   Zahl der Leute aendert sich jedes Jahr; das Layout soll das aushalten,
   ohne dass jemand Spaltenzahlen nachrechnet.
   Das 1px im calc ist Rundungsreserve: ohne sie faellt die letzte Kachel
   einer vollen Reihe bei krummen Breiten um. */
.team-wand {
  --spalten: 2;
  --luecke: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-6) var(--luecke);
  margin-top: var(--s-6);
}
.team-wand > .person {
  flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--luecke) - 1px) / var(--spalten));
}
@media (min-width: 52rem) {
  .team-wand { --spalten: 3; --luecke: var(--s-5); }
}
@media (min-width: 72rem) {
  /* Zielzustand am Schreibtisch: fuenf nebeneinander, rund 260 px breit -
     mehr geht nicht, ohne die 600-px-Quellen hochzurechnen. */
  .team-wand { --spalten: 5; }
}
.person { margin: 0; }
.person img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-s);
  background: var(--bg-2);
  transition: transform .25s;
}
.person:hover img { transform: translateY(-3px); }

.person figcaption {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin-top: var(--s-3);
}
.person__name {
  font-family: Schola, Georgia, serif;
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: 1.2;
}
.person__rolle {
  font-size: var(--t-sm);
  color: var(--fg-mut);
  line-height: 1.35;
  text-wrap: pretty;
}

/* -------------------------------------------------------------------- FAQ */
.faq { display: flex; flex-direction: column; gap: var(--s-3); }
.faq details {
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  background: var(--bg);
  overflow: hidden;
}
.abschnitt--getoent .faq details { background: var(--papier); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-4) var(--s-5);
  font-weight: 700;
  font-size: var(--t-lg);
  font-family: Schola, Georgia, serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: .7rem; height: .7rem;
  border-right: 2.5px solid var(--marke);
  border-bottom: 2.5px solid var(--marke);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq summary:hover { background: var(--gruen-50); }
.faq__inhalt { padding: 0 var(--s-5) var(--s-5); color: var(--fg-mut); }
.faq__inhalt > :first-child { margin-top: 0; }

/* ----------------------------------------------------------------- Spenden */
.spenden-raster {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(var(--s-5), 4vw, var(--s-8));
  align-items: start;
}
@media (max-width: 52rem) { .spenden-raster { grid-template-columns: 1fr; } }

.konto {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.konto dl { margin: 0; display: grid; gap: var(--s-4); }
.konto dt {
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  /* Heller als das Gruen der Abschnittsmarke: der Kasten hat durch seinen
     weissen Schleier einen helleren Grund, dort kam #9cc9a9 nur auf 4,1:1. */
  color: #b0d8bb;
  margin-bottom: var(--s-1);
}
.konto dd { margin: 0; color: #fff; }
.konto .iban {
  font-family: ui-monospace, "DejaVu Sans Mono", Menlo, monospace;
  font-size: var(--t-lg);
  letter-spacing: .02em;
  word-break: break-all;
}
.kopieren {
  margin-top: var(--s-3);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  border-radius: 999px;
  padding: .45rem 1rem;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.kopieren:hover { background: rgba(255,255,255,.22); }
.kopieren svg { width: 1rem; height: 1rem; }

.verwendung {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
}
.verwendung li { display: flex; gap: var(--s-3); }
.verwendung svg { width: 1.4rem; height: 1.4rem; flex: none; color: #9cc9a9; margin-top: .25rem; }

/* ----------------------------------------------------------------- Kontakt */
.kontakt-raster {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.25fr);
  gap: clamp(var(--s-5), 4vw, var(--s-8));
  align-items: start;
}
@media (max-width: 54rem) { .kontakt-raster { grid-template-columns: 1fr; } }

.direktkontakt { display: flex; flex-direction: column; gap: var(--s-4); }
.direktkontakt__zeile {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  padding: var(--s-4);
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  background: var(--bg);
  transition: border-color .18s, background-color .18s;
}
.abschnitt--getoent .direktkontakt__zeile { background: var(--papier); }
a.direktkontakt__zeile:hover { border-color: var(--gruen-500); background: var(--gruen-50); }
.direktkontakt__zeile svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--marke); margin-top: .15rem; }
.direktkontakt__bez {
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-mut);
  display: block;
}
.direktkontakt__wert { font-weight: 700; }

/* Formular --------------------------------------------------------------- */
.formular {
  display: grid;
  gap: var(--s-4);
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(var(--s-5), 3vw, var(--s-6));
}
.abschnitt--getoent .formular { background: var(--papier); }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 36rem) { .feld-paar { grid-template-columns: 1fr; } }

.feld { display: flex; flex-direction: column; gap: var(--s-2); }
.feld label { font-weight: 700; font-size: var(--t-sm); }
.feld .optional { font-weight: 400; color: var(--fg-mut); }

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld select,
.feld textarea {
  font: inherit;
  color: var(--fg);
  background: var(--papier);
  border: 1.5px solid var(--feld-rand);
  border-radius: var(--radius-s);
  padding: .7rem .85rem;
  width: 100%;
  transition: border-color .18s, box-shadow .18s;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .feld input,
  :root:not([data-theme="light"]) .feld select,
  :root:not([data-theme="light"]) .feld textarea { background: #0f140e; }
}
.feld textarea { min-height: 9rem; resize: vertical; }
.feld :is(input, select, textarea):focus {
  /* Kein outline: none. Ein durchsichtiger Rahmen ist im Kontrastmodus von
     Windows sichtbar (dort setzt das System die Farbe), waehrend hier der
     farbige Rand plus Schatten die Markierung uebernimmt. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--gruen-500);
  box-shadow: 0 0 0 3px var(--gruen-100);
}
.feld :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--fehler);
  box-shadow: 0 0 0 3px rgba(192, 67, 31, .14);
}
.feld-fehler { font-size: var(--t-sm); color: var(--fehler); font-weight: 700; }
.feld-fehler:empty { display: none; }

.einwilligung {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: var(--t-sm);
  color: var(--fg-mut);
}
.einwilligung input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--gruen-700); }

/* Honigtopf: für Menschen unsichtbar, für einfache Bots ein Köder.
   Bewusst nicht display:none, das erkennen manche Bots. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.formular__hinweis { font-size: var(--t-sm); color: var(--fg-mut); margin: 0; }

.meldung {
  border-radius: var(--radius-s);
  padding: var(--s-4) var(--s-5);
  font-weight: 700;
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}
.meldung svg { width: 1.35rem; height: 1.35rem; flex: none; margin-top: .15rem; }
.meldung--gut { background: var(--gruen-100); color: var(--gruen-800); }
.meldung--schlecht { background: #fbe4dd; color: #8c2d12; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .meldung--gut { background: #1d3b27; color: #bfe3c9; }
  :root:not([data-theme="light"]) .meldung--schlecht { background: #43190e; color: #f3bfae; }
}
[hidden] { display: none !important; }

.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ------------------------------------------------------------------- Fuß  */
.fuss {
  background: var(--gruen-900);
  color: #b4c9ba;
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--t-sm);
}
.fuss a { color: #dcebe0; }
.fuss__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
/* Im Fuss sind es h2 (eine Ebene unter der h1 der Seite), sollen aber nicht
   wie die Abschnittsueberschriften aussehen - daher eine eigene Klasse. */
.fuss__titel {
  color: #fff;
  font-size: var(--t-base);
  margin-bottom: var(--s-3);
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.fuss address { font-style: normal; }   /* Browser setzt <address> sonst kursiv */
.fuss__marke img { width: 11rem; }
.fuss__unten {
  padding-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  color: #8ba693;
}
.fuss__unten ul { flex-direction: row; gap: var(--s-5); }

/* --------------------------------------------------------- Unterseiten    */
/* Impressum und Datenschutz haben keinen Menueschalter: ihre zwei Links
   stehen immer in der Zeile. Zusammen mit Logo und Markentext passt das auf
   schmalen Telefonen nicht mehr - ab etwa 390 px lief "Datenschutz" aus dem
   Bild. Der Markentext tritt dann zurueck, bleibt aber fuer Screenreader
   stehen: er ist der zugaengliche Name des Logo-Links. */
@media (max-width: 34rem) {
  .kopf--unterseite .marke__text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .kopf--unterseite .nav__liste { gap: var(--s-4); }
  .kopf--unterseite .nav__liste a { font-size: var(--t-xs); }
}

.rechtstext { padding-top: calc(var(--kopf-h) + var(--s-7)); }
.rechtstext h2 { font-size: var(--t-xl); margin-top: var(--s-7); }
.rechtstext h3 { font-size: var(--t-lg); margin-top: var(--s-5); }
.rechtstext address { font-style: normal; }
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  text-decoration: none;
  margin-bottom: var(--s-5);
}
.zurueck:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ Hilfen */
.nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sprungmarke {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 100;
  background: var(--gruen-700);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-s);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform .18s;
}
.sprungmarke:focus { transform: translateY(0); }

/* Sanft einblenden beim Scrollen.
   Wichtig: Der Startzustand ist an die Klasse .js gebunden, die ein winziges
   Skript im <head> setzt. Ohne JavaScript – oder wenn das Skript scheitert –
   bleibt der Inhalt dadurch normal sichtbar statt unsichtbar hängen. */
@media (prefers-reduced-motion: no-preference) {
  .js .einblenden {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease-out, transform .6s ease-out;
  }
  .js .einblenden[data-sichtbar="ja"] { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Druck: Navigation, Formular und Hintergründe weglassen */
@media print {
  .kopf, .hero::after, .formular, .menue-schalter, .sprungmarke { display: none !important; }
  body { background: #fff; color: #000; }
  .abschnitt { padding-block: 1.5rem; }
  .abschnitt--gruen { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}