/* =========================================================
   Leinacher Wucht – Stylesheet
   Vereinsfarbe anpassen: nur --gruen (und ggf. --gruen-dunkel) ändern.
   ========================================================= */
/* Schriften lokal eingebunden (kein Abruf bei Google → datenschutzfreundlich). Lizenz: SIL Open Font License 1.1 */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }

:root {
  --gruen: #15843c;          /* Vereinsgrün (von der bisherigen Website) */
  --gruen-dunkel: #0b3d1d;   /* dunkle Variante für Kopfbereich & Fußzeile */
  --gruen-hell: #e3efe2;     /* helle Tönung für Flächen */
  --kalk: #f4f5f1;           /* Seitenhintergrund, Muschelkalk-Weiß */
  --weiss: #ffffff;
  --text: #18211c;
  --text-leise: #56635b;
  --linie: #d5dbd3;
  --gold: #d8bf5f;           /* Logo-Gold, nur auf dunklem Grün einsetzen */
  --fehler: #b3261e;

  --schrift-titel: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --schrift-text: "Source Sans 3", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --breite: 72rem;
  --r-klein: 6px;
  --r-gross: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--kalk);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gruen); text-underline-offset: 3px; }
a:hover { color: var(--gruen-dunkel); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  color: var(--gruen-dunkel);
}
h1 { font-size: clamp(2.6rem, 6vw, 4.25rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
h3 { font-size: 1.5rem; font-weight: 600; }
p { margin: 0 0 1em; max-width: 68ch; }

.huelle { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.abschnitt { padding-block: clamp(3rem, 7vw, 5.5rem); }
.abschnitt--weiss { background: var(--weiss); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--text); padding: .6rem 1rem; z-index: 100; }
.springen:focus { left: 1rem; }

/* Platzhalter-Markierung: im fertigen Text die Klasse einfach entfernen */
.platzhalter { color: var(--text-leise); font-style: italic; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--weiss) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.marke { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--gruen-dunkel); }
.marke__zeichen {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--gruen); color: var(--weiss);
  display: grid; place-items: center;
  font-family: var(--schrift-titel); font-weight: 800; font-size: 1.15rem;
}
.marke__zeichen img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.marke__name { font-family: var(--schrift-titel); font-weight: 800; font-size: 1.45rem; line-height: 1; }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25rem; }
.nav a {
  display: block; padding: .5rem .75rem; border-radius: var(--r-klein);
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 1rem;
}
.nav a:hover { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.nav a[aria-current="page"] { color: var(--gruen); box-shadow: inset 0 -3px 0 var(--gruen); border-radius: 0; }
.nav .knopf { margin-left: .5rem; }

.nav-schalter {
  display: none; background: none; border: 1px solid var(--linie); border-radius: var(--r-klein);
  padding: .55rem .7rem; cursor: pointer; color: var(--gruen-dunkel); font: inherit; font-weight: 600;
}

@media (max-width: 900px) {
  .nav-schalter { display: inline-flex; align-items: center; gap: .4rem; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--weiss); border-bottom: 1px solid var(--linie); display: none; }
  .nav.offen { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; padding: .75rem 1.25rem 1.25rem; gap: 0; }
  .nav a { padding: .8rem .5rem; border-bottom: 1px solid var(--linie); border-radius: 0; }
  .nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--gruen); padding-left: 1rem; }
  .nav .knopf { margin: 1rem 0 0; text-align: center; border-bottom: 0; border-radius: var(--r-klein); }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.25rem; border-radius: var(--r-klein); border: 2px solid var(--gruen);
  background: var(--gruen); color: var(--weiss) !important; font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; line-height: 1.2;
}
.knopf:hover { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); }
.knopf--rand { background: transparent; color: var(--gruen) !important; }
.knopf--rand:hover { background: var(--gruen-hell); color: var(--gruen-dunkel) !important; border-color: var(--gruen); }
.knopf--hell { background: var(--weiss); border-color: var(--weiss); color: var(--gruen-dunkel) !important; }
.knopf--hell:hover { background: var(--gruen-hell); border-color: var(--gruen-hell); }
.knopf svg { width: 1.1em; height: 1.1em; }

/* ---------- Höhenlinien-Hintergrund (Leinachtal) ---------- */
.hoehenlinien { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hoehenlinien path { fill: none; stroke: currentColor; stroke-width: 1.4; }

/* ---------- Startseite: Bühne ---------- */
.buehne {
  position: relative; overflow: hidden;
  background: var(--gruen-dunkel); color: var(--weiss);
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem);
}
.buehne .hoehenlinien { color: color-mix(in srgb, var(--gruen) 70%, var(--gruen-dunkel)); }
.buehne__innen { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.buehne__titel {
  font-family: var(--schrift-titel); font-weight: 800; color: var(--weiss);
  font-size: clamp(4rem, 13vw, 10rem); line-height: .82; letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
}
.buehne__titel span { display: block; }
.buehne__titel span:first-child { font-weight: 600; font-size: .5em; letter-spacing: .01em; color: var(--gruen-hell); margin-bottom: .12em; }
.buehne__text { font-size: 1.2rem; max-width: 34ch; color: color-mix(in srgb, var(--weiss) 85%, var(--gruen)); margin-bottom: 2rem; }
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; }
.buehne .knopf--rand { color: var(--weiss) !important; border-color: color-mix(in srgb, var(--weiss) 60%, transparent); }
.buehne .knopf--rand:hover { background: color-mix(in srgb, var(--weiss) 12%, transparent); }

.naechster {
  background: var(--weiss); color: var(--text); border-radius: var(--r-gross);
  padding: 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.55);
}
.naechster__hinweis { grid-column: 1 / -1; margin: 0; font-weight: 600; color: var(--text-leise); font-size: .95rem; }
.naechster h2 { font-size: 1.9rem; margin: 0 0 .35rem; }
.naechster p { margin: 0 0 .75rem; color: var(--text-leise); }

/* ---------- Datumsblock (wiederverwendet) ---------- */
.datum {
  width: 4.5rem; flex: none; text-align: center; border-radius: var(--r-klein); overflow: hidden;
  border: 2px solid var(--gruen-dunkel); background: var(--weiss);
  font-family: var(--schrift-titel); line-height: 1;
}
.datum__monat { display: block; background: var(--gruen-dunkel); color: var(--gold); font-weight: 700; font-size: .95rem; padding: .3rem 0; }
.datum__tag { display: block; font-weight: 800; font-size: 2.2rem; padding: .35rem 0 .15rem; color: var(--gruen-dunkel); }
.datum__wtag { display: block; font-size: .85rem; color: var(--text-leise); padding-bottom: .35rem; font-family: var(--schrift-text); }

/* ---------- Zweispaltig ---------- */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 5vw, 4rem); }
.zweispaltig > :first-child h2 { position: sticky; top: 6rem; }

.eckdaten { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; color: var(--text-leise); }
.eckdaten strong { color: var(--text); }

/* ---------- Terminliste ---------- */
.termine { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.termin { display: flex; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid var(--linie); align-items: flex-start; }
.termin h3 { margin: .1rem 0 .25rem; }
.termin__meta { margin: 0 0 .4rem; color: var(--text-leise); font-size: .98rem; }
.termin p:last-child { margin-bottom: 0; }
.monat { font-family: var(--schrift-titel); font-weight: 700; font-size: 1.6rem; color: var(--gruen); margin: 2.5rem 0 .5rem; }
.monat:first-of-type { margin-top: 0; }
.kopfzeile-abschnitt { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.kopfzeile-abschnitt h2 { margin: 0; }

/* ---------- Bilder ---------- */
.bilderstreifen { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 11rem); gap: .75rem; }
.bilderstreifen figure { margin: 0; overflow: hidden; border-radius: var(--r-klein); background: var(--gruen-hell); }
.bilderstreifen figure:first-child { grid-row: span 2; }
.bilderstreifen img { width: 100%; height: 100%; object-fit: cover; }

.alben { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.5rem; }
.album { text-decoration: none; color: inherit; display: block; }
.album img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--r-klein); background: var(--gruen-hell); }
.album h3 { margin: .75rem 0 .1rem; color: var(--gruen-dunkel); }
.album p { margin: 0; color: var(--text-leise); font-size: .95rem; }
.album:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .6rem; }
.raster__bild { display: block; width: 100%; padding: 0; border: 0; background: var(--gruen-hell); cursor: zoom-in; border-radius: var(--r-klein); overflow: hidden; }
.raster img { aspect-ratio: 1; object-fit: cover; width: 100%; }

.lightbox { position: fixed; inset: 0; background: rgba(8, 24, 14, .94); display: none; place-items: center; z-index: 200; padding: 3.5rem 1rem; }
.lightbox.offen { display: grid; }
.lightbox img { max-height: 82vh; width: auto; border-radius: var(--r-klein); }
.lightbox figcaption { color: var(--weiss); text-align: center; margin-top: .75rem; }
.lightbox__knopf { position: absolute; background: rgba(255,255,255,.12); color: var(--weiss); border: 0; width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.5rem; cursor: pointer; }
.lightbox__knopf:hover { background: rgba(255,255,255,.25); }
.lightbox__zu { top: 1rem; right: 1rem; }
.lightbox__zurueck { left: 1rem; top: 50%; translate: 0 -50%; }
.lightbox__vor { right: 1rem; top: 50%; translate: 0 -50%; }

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf { position: relative; overflow: hidden; background: var(--gruen-dunkel); color: var(--weiss); padding-block: clamp(2.5rem, 6vw, 4rem); }
.seitenkopf .hoehenlinien { color: color-mix(in srgb, var(--gruen) 55%, var(--gruen-dunkel)); }
.seitenkopf .huelle { position: relative; }
.seitenkopf h1 { color: var(--weiss); margin: 0 0 .5rem; }
.seitenkopf p { margin: 0; color: color-mix(in srgb, var(--weiss) 80%, var(--gruen)); font-size: 1.15rem; }
.brotkrumen { font-size: .95rem; margin-bottom: .75rem; color: var(--gruen-hell); }
.brotkrumen a { color: var(--gruen-hell); }

/* ---------- Vorstandschaft ---------- */
.personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 2rem 1.5rem; list-style: none; padding: 0; margin: 0; }
.person__bild { aspect-ratio: 4 / 5; border-radius: var(--r-klein); background: var(--gruen-hell); display: grid; place-items: center; overflow: hidden; margin-bottom: .9rem; }
.person__bild img { width: 100%; height: 100%; object-fit: cover; }
.person__bild span { font-family: var(--schrift-titel); font-weight: 800; font-size: 3.5rem; color: color-mix(in srgb, var(--gruen) 45%, var(--gruen-hell)); }
.person__amt { margin: 0; color: var(--gruen); font-weight: 700; font-size: .98rem; }
.person h3 { margin: .1rem 0 .2rem; }
.person p { margin: 0; color: var(--text-leise); font-size: .95rem; }

/* ---------- Chronik ---------- */
.zeitleiste { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: 7.2rem; top: .5rem; bottom: .5rem; width: 3px; background: var(--gruen-hell); }
.zeitleiste > li { display: grid; grid-template-columns: 6rem 1fr; gap: 2.75rem; padding-bottom: 2.5rem; position: relative; }
.zeitleiste > li::after { content: ""; position: absolute; left: 6.8rem; top: .55rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--weiss); border: 4px solid var(--gruen); }
.zeitleiste__jahr { font-family: var(--schrift-titel); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--gruen-dunkel); text-align: right; }
.zeitleiste h3 { margin-bottom: .3rem; }

/* ---------- Wuchtlied ---------- */
.lied { max-width: 40rem; }
.strophe { margin: 0 0 2rem; padding-left: 1.25rem; border-left: 3px solid var(--gruen-hell); font-size: 1.15rem; line-height: 1.75; }
.strophe--refrain { border-left-color: var(--gruen); background: var(--weiss); padding: 1rem 1.25rem; border-radius: 0 var(--r-klein) var(--r-klein) 0; }
.strophe__name { display: block; font-weight: 700; color: var(--gruen); font-size: .95rem; margin-bottom: .25rem; }
audio { width: 100%; margin: 0 0 2.5rem; }

/* ---------- Mitgliedschaft ---------- */
.beitraege { width: 100%; border-collapse: collapse; background: var(--weiss); border-radius: var(--r-klein); overflow: hidden; }
.beitraege th, .beitraege td { text-align: left; padding: 1rem 1.25rem; border-bottom: 1px solid var(--linie); }
.beitraege th { background: var(--gruen-dunkel); color: var(--weiss); font-weight: 600; }
.beitraege td:last-child, .beitraege th:last-child { text-align: right; white-space: nowrap; }
.beitraege tr:last-child td { border-bottom: 0; }
.schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.schritte li { counter-increment: schritt; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
.schritte li::before {
  content: counter(schritt); width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--gruen); color: var(--weiss); display: grid; place-items: center;
  font-family: var(--schrift-titel); font-weight: 800; font-size: 1.5rem;
}
.schritte h3 { margin: .45rem 0 .2rem; font-size: 1.3rem; }
.schritte p { margin: 0; }

/* ---------- Banner ---------- */
.banner { position: relative; overflow: hidden; background: var(--gruen); color: var(--weiss); border-radius: var(--r-gross); padding: clamp(2rem, 5vw, 3.5rem); display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; }
.banner .hoehenlinien { color: color-mix(in srgb, var(--weiss) 14%, var(--gruen)); }
.banner > :not(.hoehenlinien) { position: relative; }
.banner h2 { color: var(--weiss); margin-bottom: .3rem; }
.banner p { margin: 0; color: var(--gruen-hell); }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-size: 1.75rem; margin-top: 2.5rem; }
.hinweisbox { background: #fff7dc; border: 1px solid #ecd58a; border-radius: var(--r-klein); padding: 1rem 1.25rem; margin-bottom: 2rem; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--gruen-dunkel); color: color-mix(in srgb, var(--weiss) 78%, var(--gruen)); padding-block: 3.5rem 2rem; font-size: .98rem; }
.fuss a { color: var(--weiss); }
.fuss__raster { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }
.fuss h2 { font-size: 1.35rem; color: var(--weiss); margin-bottom: .75rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.fuss address { font-style: normal; }
.fuss__unten { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.15); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.fuss .marke { color: var(--weiss); margin-bottom: 1rem; }
.fuss .marke__zeichen { background: var(--weiss); color: var(--gruen-dunkel); }

/* ---------- Anmeldung ---------- */
.anmeldung { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.anmeldung__bild { position: relative; overflow: hidden; background: var(--gruen-dunkel); color: var(--weiss); padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; }
.anmeldung__bild .hoehenlinien { color: color-mix(in srgb, var(--gruen) 70%, var(--gruen-dunkel)); }
.anmeldung__bild > :not(.hoehenlinien) { position: relative; }
.anmeldung__bild .marke { color: var(--weiss); }
.anmeldung__bild .marke__zeichen { background: var(--weiss); color: var(--gruen-dunkel); }
.anmeldung__spruch { font-family: var(--schrift-titel); font-weight: 800; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: .95; max-width: 12ch; margin: 0; }
.anmeldung__bild p { color: var(--gruen-hell); margin: 0; }
.anmeldung__form { display: grid; place-items: center; padding: 2.5rem 1.5rem; background: var(--weiss); }
.formular { width: min(100%, 24rem); }
.formular h1 { font-size: 2.6rem; margin-bottom: .25rem; }
.formular > p { color: var(--text-leise); }
.feld { margin-bottom: 1.15rem; }
.feld label { display: block; font-weight: 600; margin-bottom: .35rem; }
.feld input[type="text"], .feld input[type="email"], .feld input[type="password"] {
  width: 100%; padding: .8rem .9rem; font: inherit; color: var(--text);
  border: 2px solid var(--linie); border-radius: var(--r-klein); background: var(--weiss);
}
.feld input:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-hell); }
.feld--fehler input { border-color: var(--fehler); }
.passwort { position: relative; }
.passwort input { padding-right: 6rem !important; }
.passwort button { position: absolute; right: .4rem; top: 50%; translate: 0 -50%; background: none; border: 0; color: var(--gruen); font: inherit; font-weight: 600; cursor: pointer; padding: .4rem .6rem; border-radius: var(--r-klein); }
.passwort button:hover { background: var(--gruen-hell); }
.zeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; font-size: .98rem; }
.zeile label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.zeile input { width: 1.1rem; height: 1.1rem; accent-color: var(--gruen); }
.formular .knopf { width: 100%; padding-block: .9rem; }
.meldung { display: none; background: #fdecea; color: var(--fehler); border-radius: var(--r-klein); padding: .75rem 1rem; margin-bottom: 1.25rem; font-weight: 600; }
.meldung.sichtbar { display: block; }
.formular__fuss { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); color: var(--text-leise); font-size: .95rem; }

/* ---------- Interner Bereich ---------- */
.intern { display: grid; grid-template-columns: 16rem 1fr; min-height: 100vh; }
.seitenleiste { background: var(--gruen-dunkel); color: var(--weiss); padding: 1.5rem 1rem; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.seitenleiste .marke { color: var(--weiss); padding: 0 .5rem 1.5rem; }
.seitenleiste .marke__zeichen { background: var(--weiss); color: var(--gruen-dunkel); }
.seitenleiste nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.seitenleiste nav a { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; border-radius: var(--r-klein); color: var(--gruen-hell); text-decoration: none; font-weight: 600; }
.seitenleiste nav a:hover { background: rgba(255,255,255,.08); color: var(--weiss); }
.seitenleiste nav a[aria-current="page"] { background: var(--gruen); color: var(--weiss); }
.seitenleiste svg { width: 1.2rem; height: 1.2rem; flex: none; }
.seitenleiste__unten { margin-top: auto; border-top: 1px solid rgba(255,255,255,.15); padding-top: 1rem; }
.nutzer { display: flex; align-items: center; gap: .75rem; padding: 0 .5rem .75rem; }
.nutzer__bild { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--gold); color: var(--gruen-dunkel); display: grid; place-items: center; font-weight: 700; }
.nutzer small { display: block; color: var(--gruen-hell); }

.intern__haupt { padding: clamp(1.5rem, 4vw, 3rem); min-width: 0; }
.intern__kopf { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.intern__kopf h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin: 0; }
.intern__kopf p { margin: .25rem 0 0; color: var(--text-leise); }

.mitteilung { background: var(--gruen); color: var(--weiss); border-radius: var(--r-gross); padding: 1.5rem 1.75rem; margin-bottom: 2rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem; }
.mitteilung svg { width: 1.75rem; height: 1.75rem; color: var(--gold); }
.mitteilung h2 { color: var(--weiss); font-size: 1.5rem; margin: 0 0 .25rem; }
.mitteilung p { margin: 0; color: var(--gruen-hell); }
.mitteilung small { display: block; margin-top: .5rem; color: color-mix(in srgb, var(--weiss) 65%, var(--gruen)); }

.kacheln { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; align-items: start; }
.kachel { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 1.5rem; }
.kachel__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.kachel h2 { font-size: 1.6rem; margin: 0; }
.kachel .termin { padding: .9rem 0; }
.kachel .termin:last-child { border-bottom: 0; }
.kachel .datum { width: 3.75rem; }
.kachel .datum__tag { font-size: 1.75rem; }
.kachel .termin h3 { font-size: 1.25rem; }
.zusage { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.zusage button { white-space: nowrap; }
.zusage button { font: inherit; font-size: .9rem; font-weight: 600; padding: .3rem .75rem; border-radius: 999px; border: 1.5px solid var(--linie); background: var(--weiss); cursor: pointer; color: var(--text); }
.zusage button[aria-pressed="true"] { background: var(--gruen); border-color: var(--gruen); color: var(--weiss); }

.dateien { list-style: none; margin: 0; padding: 0; }
.dateien li { display: flex; align-items: center; gap: .9rem; padding: .75rem 0; border-bottom: 1px solid var(--linie); }
.dateien li:last-child { border-bottom: 0; }
.dateityp { width: 2.6rem; height: 2.6rem; flex: none; border-radius: var(--r-klein); background: var(--gruen-hell); color: var(--gruen-dunkel); display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.dateien a { font-weight: 600; text-decoration: none; color: var(--text); }
.dateien a:hover { color: var(--gruen); text-decoration: underline; }
.dateien small { display: block; color: var(--text-leise); }

.mitglieder { width: 100%; border-collapse: collapse; font-size: .98rem; }
.mitglieder th, .mitglieder td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--linie); }
.mitglieder th { color: var(--text-leise); font-weight: 600; }
.tabelle-scroll { overflow-x: auto; }
.marke-klein { display: inline-block; font-size: .8rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--gruen-hell); color: var(--gruen-dunkel); }
.voll { grid-column: 1 / -1; }

.intern-schalter { display: none; }

@media (max-width: 900px) {
  .intern { grid-template-columns: 1fr; }
  .seitenleiste { position: fixed; inset: 0 auto 0 0; width: 17rem; z-index: 60; translate: -100% 0; transition: translate .2s ease; }
  .seitenleiste.offen { translate: 0 0; box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
  .intern-schalter { display: inline-flex; margin-bottom: 1rem; }
  .kacheln { grid-template-columns: 1fr; }
  .anmeldung { grid-template-columns: 1fr; }
  .anmeldung__bild { min-height: 15rem; padding: 1.75rem 1.5rem; }
  .anmeldung__spruch { font-size: 2.6rem; margin-top: 1.5rem; }
}

/* ---------- Responsive allgemein ---------- */
@media (max-width: 900px) {
  .buehne__innen, .zweispaltig { grid-template-columns: 1fr; }
  .zweispaltig > :first-child h2 { position: static; }
  .fuss__raster { grid-template-columns: 1fr 1fr; }
  .fuss__raster > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .bilderstreifen { grid-template-columns: 1fr 1fr; grid-template-rows: 13rem 8rem 8rem; }
  .bilderstreifen figure:first-child { grid-column: 1 / -1; grid-row: auto; }
  .fuss__raster { grid-template-columns: 1fr; }
  .zeitleiste::before { left: 4.25rem; }
  .zeitleiste > li { grid-template-columns: 3.25rem 1fr; gap: 2rem; }
  .zeitleiste__jahr--lang { font-size: .95rem; }
  .zeitleiste > li::after { left: 3.8rem; }
  .zeitleiste__jahr { font-size: 1.4rem; }
  .termin { gap: 1rem; }
  .naechster { grid-template-columns: 1fr; }
}

@media print {
  .kopf, .fuss, .nav-schalter { display: none; }
  .seitenkopf, .buehne { background: none; color: var(--text); }
}

/* lange Wörter (z. B. "Jahreshauptversammlung") auf schmalen Bildschirmen umbrechen */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
.termin > div { min-width: 0; }
.intern { align-items: start; }
.kacheln > * { min-width: 0; }

/* =========================================================
   Ergänzungen: Logo, Termine, Vorstand, Chronik, Beitrag
   ========================================================= */
.marke__logo { height: 2.9rem; width: auto; }
.fuss .marke__logo, .anmeldung__bild .marke__logo { height: 3.4rem; }
.seitenleiste .marke__logo { height: 2.4rem; }
.seitenleiste .marke { flex-direction: column; align-items: flex-start; gap: .35rem; }
.seitenleiste .marke small { color: var(--gruen-hell); font-weight: 600; }

.buehne__logo { width: min(100%, 36rem); height: auto; margin: 0 0 1.75rem; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.buehne__innen { align-items: center; }

.datum__tag--lang { font-size: 1.6rem; padding-top: .55rem; padding-bottom: .3rem; }
.termin--vorbei { opacity: .55; }
.vergangen { margin-top: 3rem; }
.vergangen summary { cursor: pointer; font-weight: 700; color: var(--gruen); padding: .5rem 0; }
.vergangen .termine { margin-top: .75rem; }
.leer { color: var(--text-leise); font-size: 1.1rem; }

/* Vorstand: runde Porträts */
.gruppe-titel { font-size: 1.75rem; margin: 0 0 1.5rem; }
.personen + .gruppe-titel { margin-top: 3.5rem; }
.person__bild { width: 9.5rem; aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--weiss); box-shadow: 0 0 0 2px var(--gruen); }
.personen--klein { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.personen--klein .person__bild { width: 7.5rem; }

/* Chronik */
.einleitung { font-size: 1.2rem; line-height: 1.7; max-width: 62ch; }
.einleitung + p { max-width: 62ch; }
.sprungmarken { position: sticky; top: 4.5rem; z-index: 10; background: var(--kalk); border-bottom: 1px solid var(--linie); padding: .75rem 0; margin-bottom: 2.5rem; }
.sprungmarken ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; overflow-x: auto; }
.sprungmarken a { display: block; white-space: nowrap; padding: .35rem .85rem; border-radius: 999px; border: 1.5px solid var(--linie); text-decoration: none; font-weight: 600; color: var(--gruen-dunkel); background: var(--weiss); }
.sprungmarken a:hover { border-color: var(--gruen); }
.jahrzehnt { scroll-margin-top: 9rem; font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--gruen); margin: 1rem 0 2rem; }
.zeitleiste li { scroll-margin-top: 9rem; }
.zeitleiste figure { margin: 1rem 0 0; max-width: 34rem; }
.zeitleiste figure img { border-radius: var(--r-klein); }
.zeitleiste figcaption { font-size: .92rem; color: var(--text-leise); margin-top: .4rem; }
.zeitleiste p { margin-bottom: .6em; }
.gruender { columns: 2; column-gap: 2rem; padding-left: 1.1rem; margin: 0 0 .8rem; }
.schlusswort { position: relative; overflow: hidden; background: var(--gruen-dunkel); color: var(--gold); border-radius: var(--r-gross); padding: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.schlusswort p { position: relative; margin: 0 auto; max-width: 22ch; font-family: var(--schrift-titel); font-weight: 800; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.05; }
.schlusswort .hoehenlinien { color: color-mix(in srgb, var(--gruen) 55%, var(--gruen-dunkel)); }

/* Mitgliedsbeitrag */
.beitrag-gross { font-family: var(--schrift-titel); font-weight: 800; font-size: clamp(3.5rem, 8vw, 5.5rem); line-height: 1; color: var(--gruen-dunkel); margin: 0; }
.beitrag-gross small { font-size: .35em; font-weight: 600; color: var(--text-leise); margin-left: .35rem; }
.hinweis { display: flex; gap: .6rem; align-items: center; background: #fff7dc; border: 1px solid #ecd58a; border-radius: var(--r-klein); padding: .75rem 1rem; font-weight: 600; margin: 1.5rem 0 0; max-width: 34rem; }
.dauerauftrag { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 1.5rem 1.75rem; margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .9rem 2rem; }
.dauerauftrag dt { color: var(--text-leise); }
.dauerauftrag dd { margin: 0; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.iban { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.kopieren { font: inherit; font-size: .9rem; font-weight: 600; color: var(--gruen); background: var(--gruen-hell); border: 0; border-radius: 999px; padding: .25rem .8rem; cursor: pointer; }
.kopieren:hover { background: color-mix(in srgb, var(--gruen) 20%, var(--gruen-hell)); }
@media (max-width: 560px) {
  .dauerauftrag { grid-template-columns: 1fr; gap: .15rem; }
  .dauerauftrag dd { margin-bottom: .75rem; }
  .gruender { columns: 1; }
  .person__bild { width: 8rem; }
}

.lied__quelle { color: var(--text-leise); margin-bottom: 2rem; }

@media (min-width: 561px) { .zeitleiste__jahr--lang { font-size: 1.3rem; } }
.zeitleiste__jahr--lang { padding-top: .3rem; white-space: nowrap; }

/* =========================================================
   Interner Bereich (PHP): Formulare, Meldungen, Aktionen
   ========================================================= */
.flash { border-radius: var(--r-klein); padding: .85rem 1.1rem; margin-bottom: 1.5rem; font-weight: 600; }
.flash--erfolg { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.flash--info   { background: #fff7dc; color: #6b5300; }
.flash--fehler { background: #fdecea; color: var(--fehler); }

.seitenleiste__abmelden { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .65rem .75rem; border-radius: var(--r-klein); background: none; border: 0; color: var(--gruen-hell); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.seitenleiste__abmelden:hover { background: rgba(255,255,255,.08); color: var(--weiss); }
.seitenleiste__abmelden svg { width: 1.2rem; height: 1.2rem; }

.feld select, .feld textarea, .feld input[type="date"], .feld input[type="file"] {
  width: 100%; padding: .7rem .9rem; font: inherit; color: var(--text);
  border: 2px solid var(--linie); border-radius: var(--r-klein); background: var(--weiss);
}
.feld textarea { min-height: 6rem; resize: vertical; }
.feld select:focus, .feld textarea:focus, .feld input[type="date"]:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-hell); }
.feld small { display: block; color: var(--text-leise); margin-top: .3rem; }
.formular-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1rem; }
.formular-raster .voll { grid-column: 1 / -1; }

.knopf--klein { padding: .4rem .8rem; font-size: .92rem; border-width: 1.5px; }
.knopf--gefahr { background: var(--weiss); border-color: #e6b4b0; color: var(--fehler) !important; }
.knopf--gefahr:hover { background: #fdecea; border-color: var(--fehler); }
.aktionen { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.aktionen form { margin: 0; }

.zusage form { margin: 0; }
.zaehler { font-size: .9rem; color: var(--text-leise); margin-left: .25rem; align-self: center; }
.antworten { margin-top: .6rem; font-size: .95rem; }
.antworten summary { cursor: pointer; color: var(--gruen); font-weight: 600; }
.antworten p { margin: .35rem 0 0; }

.zugangsbox { background: var(--gruen-dunkel); color: var(--weiss); border-radius: var(--r-gross); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.zugangsbox h2 { color: var(--gold); font-size: 1.4rem; margin-bottom: .5rem; }
.zugangsbox dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.25rem; margin: 0 0 .75rem; }
.zugangsbox dt { color: var(--gruen-hell); }
.zugangsbox dd { margin: 0; font-weight: 700; font-size: 1.1rem; letter-spacing: .02em; }
.zugangsbox p { margin: 0; color: var(--gruen-hell); font-size: .95rem; }

.mitteilung details { margin-top: .9rem; }
.mitteilung summary { cursor: pointer; color: var(--gold); font-weight: 600; }
.mitteilung .feld label { color: var(--weiss); }
.mitteilung form { margin-top: .75rem; max-width: 40rem; }

.status { display: inline-block; font-size: .8rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; }
.status--aktiv { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.status--inaktiv { background: #eee; color: var(--text-leise); }
.mitglieder td { vertical-align: top; }
.kachel-stapel > .kachel + .kachel { margin-top: 1.5rem; }
.kachel > p:last-child { margin-bottom: 0; }
.dateien form { margin: 0 0 0 auto; }
.leise { color: var(--text-leise); }

/* ---------- Termine: Art & Filter ---------- */
.art { display: inline-block; vertical-align: middle; font-family: var(--schrift-text); font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: #eceee9; color: var(--text-leise); margin-left: .35rem; }
.art--oeffentlich { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.filter { display: flex; gap: .4rem; margin: -0.5rem 0 1.5rem; flex-wrap: wrap; }
.filter a { padding: .35rem .9rem; border-radius: 999px; border: 1.5px solid var(--linie); background: var(--weiss); text-decoration: none; font-weight: 600; color: var(--gruen-dunkel); }
.filter a[aria-current="page"] { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); color: var(--weiss); }
.auswahl { border: 0; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.auswahl legend { font-weight: 600; margin-bottom: .45rem; padding: 0; }
.auswahl label { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .9rem; border: 2px solid var(--linie); border-radius: var(--r-klein); cursor: pointer; background: var(--weiss); }
.auswahl label:has(input:checked) { border-color: var(--gruen); background: color-mix(in srgb, var(--gruen-hell) 50%, var(--weiss)); }
.auswahl input { accent-color: var(--gruen); margin-top: .3rem; width: 1.05rem; height: 1.05rem; }
.auswahl small { display: block; color: var(--text-leise); font-size: .88rem; }
@media (max-width: 560px) { .auswahl { grid-template-columns: 1fr; } }

/* ---------- Galerie intern ---------- */
.raster__eintrag { position: relative; margin: 0; }
.raster__eintrag form { position: absolute; top: .35rem; right: .35rem; margin: 0; }
.raster__loeschen { width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--fehler); font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.raster__loeschen:hover { background: #fdecea; }
.album__leer { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-klein); background: var(--gruen-hell); }
.alben--klein { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; }
.alben--klein h3 { font-size: 1.15rem; }
.aufklapp > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .6rem; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::before { content: "+"; font-family: var(--schrift-titel); font-weight: 800; font-size: 1.6rem; color: var(--gruen); width: 1.2rem; }
.aufklapp[open] > summary::before { content: "–"; }
.aufklapp > summary h2 { font-size: 1.6rem; margin: 0; }
.brotkrumen-intern { margin: 0 0 .25rem !important; color: var(--text-leise) !important; }

/* ---------- Kontaktformular ---------- */
.kontaktformular { max-width: 40rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hinweis-klein { font-size: .92rem; color: var(--text-leise); }
.danke { background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--gruen); border-radius: var(--r-klein); padding: 1.5rem 1.75rem; }
.danke h2 { font-size: 1.8rem; }

/* Bestätigungs-Formulare (ersetzt Inline-JavaScript) */
form[data-bestaetigen] { display: inline; }

/* ---------- Dokumente bearbeiten & Galerie-Ordner ---------- */
.aktionen--rechts { margin-left: auto; flex-wrap: nowrap; }
.dateien li.aktiv { background: color-mix(in srgb, var(--gruen-hell) 55%, var(--weiss)); margin: 0 -.75rem; padding-left: .75rem; padding-right: .75rem; border-radius: var(--r-klein); }
.mit-endung { display: flex; align-items: stretch; }
.mit-endung input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.mit-endung span { display: flex; align-items: center; padding: 0 .8rem; border: 2px solid var(--linie); border-left: 0; border-radius: 0 var(--r-klein) var(--r-klein) 0; background: var(--kalk); color: var(--text-leise); font-weight: 600; }
.pfad { color: var(--text-leise); margin-bottom: .25rem; font-size: .98rem; }
.werkzeuge { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.75rem; align-items: start; }
.abschnitt-titel { font-size: 1.6rem; margin: 0 0 1rem; }
.album--ordner { position: relative; }
.album--ordner::before { content: ""; position: absolute; top: .6rem; left: .6rem; width: 2rem; height: 1.6rem; border-radius: 3px; background: rgba(255,255,255,.92) no-repeat center / 1.2rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3d1d' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M3 6.5a1.5 1.5 0 0 1 1.5-1.5H9l2 2.5h8.5A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/%3E%3C/svg%3E"); box-shadow: 0 1px 4px rgba(0,0,0,.2); }
@media (max-width: 700px) { .werkzeuge { grid-template-columns: 1fr; } .aktionen--rechts { flex-wrap: wrap; } }

/* ---------- Galerie: Baumansicht ---------- */
.galerie-layout { display: grid; grid-template-columns: minmax(15rem, 20rem) 1fr; gap: 1.5rem; align-items: start; }
.baum-kachel { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; }
.baum-kachel .kachel__kopf { margin-bottom: .5rem; }
.baum-kachel .kachel__kopf .leise { font-size: .85rem; }
.baum { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--gruen-hell); }
.baum--wurzel { padding-left: 0; border-left: 0; }
.baum li { margin: 0; }
.baum details > summary { list-style: none; display: flex; align-items: center; cursor: pointer; }
.baum details > summary::-webkit-details-marker { display: none; }
.baum details > summary::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-right: .15rem; border-radius: 3px; transition: transform .15s;
  background: no-repeat center / .75rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315843c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
.baum details[open] > summary::before { transform: rotate(90deg); }
.baum__blatt { padding-left: 1.25rem; }
.baum a { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .35rem .5rem; border-radius: var(--r-klein); color: var(--text); text-decoration: none; font-weight: 600; min-width: 0; }
.baum--wurzel > li > details > summary a, .baum--wurzel > li.baum__blatt > a { font-family: var(--schrift-titel); font-size: 1.2rem; font-weight: 700; color: var(--gruen-dunkel); }
.baum a:hover { background: var(--gruen-hell); }
.baum a[aria-current="page"] { background: var(--gruen); color: var(--weiss); }
.baum__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baum__zahl { flex: none; font-family: var(--schrift-text); font-size: .8rem; font-weight: 600; color: var(--text-leise); background: var(--kalk); border-radius: 999px; padding: 0 .5rem; }
.baum a[aria-current="page"] .baum__zahl { background: rgba(255,255,255,.2); color: var(--weiss); }
@media (max-width: 900px) {
  .galerie-layout { grid-template-columns: 1fr; }
  .baum-kachel { position: static; max-height: none; }
}