/* Kleingartenanlage Humboldt – Theme-Stylesheet
   Bitter + Source Sans 3, Gartengrün/Creme. */

:root {
  /* Grün-Skala */
  --kga-green-25: oklch(0.985 0.008 85);
  --kga-green-50: oklch(0.96 0.028 150);
  --kga-green-75: oklch(0.95 0.025 150);
  --kga-green-80: oklch(0.95 0.03 150);
  --kga-green-90: oklch(0.94 0.03 150);
  --kga-green-100: oklch(0.88 0.02 150);
  --kga-green-150: oklch(0.85 0.04 150);
  --kga-green-200: oklch(0.78 0.06 150);
  --kga-green-500: oklch(0.58 0.10 55); /* Terrakotta-Akzent */
  --kga-green-600: oklch(0.50 0.10 150);
  --kga-green-600-hover: oklch(0.44 0.10 150);
  --kga-green-650: oklch(0.55 0.10 150);
  --kga-green-700: oklch(0.42 0.09 150);
  --kga-green-720: oklch(0.40 0.08 150);
  --kga-green-740: oklch(0.38 0.08 150);
  --kga-green-800: oklch(0.34 0.03 150);
  --kga-green-850: oklch(0.32 0.04 150);
  --kga-green-860: oklch(0.30 0.02 150);
  --kga-green-900: oklch(0.28 0.02 150);
  --kga-green-910: oklch(0.28 0.03 150);

  /* Footer-Grüntöne (auf dunklem Grund) */
  --kga-footer-bg: var(--kga-green-850);
  --kga-footer-border: oklch(0.42 0.04 150);
  --kga-footer-hover: oklch(0.40 0.05 150);
  --kga-footer-text: oklch(0.92 0.02 150);
  --kga-footer-text-soft: oklch(0.86 0.02 150);
  --kga-footer-text-soft2: oklch(0.82 0.02 150);
  --kga-footer-text-soft3: oklch(0.78 0.02 150);
  --kga-footer-text-soft4: oklch(0.88 0.02 150);

  /* Creme / Neutral */
  --kga-cream: oklch(0.985 0.008 85);
  --kga-cream-light: oklch(0.99 0.006 85);
  --kga-cream-card: oklch(0.995 0.004 85);
  --kga-border: oklch(0.90 0.012 85);

  /* Textfarben */
  --kga-text: oklch(0.30 0.015 80);
  --kga-text-soft: oklch(0.36 0.015 80);
  --kga-text-soft2: oklch(0.42 0.015 80);
  --kga-text-soft3: oklch(0.46 0.015 80);
  --kga-text-muted: oklch(0.52 0.02 80);
  --kga-text-quote: oklch(0.34 0.03 150);

  /* Schatten */
  /* Links im Fließtext: das vertraute Blau, an dem jeder erkennt,
     dass etwas anklickbar ist. */
  --kga-link: oklch(0.45 0.15 252);
  --kga-link-hover: oklch(0.35 0.14 252);

  --kga-shadow-soft: oklch(0.30 0.02 80 / 0.05);
  --kga-shadow-card: oklch(0.30 0.02 80 / 0.04);
  --kga-shadow-hover: oklch(0.30 0.04 150 / 0.14);
  --kga-shadow-hero: oklch(0.30 0.04 150 / 0.18);
  --kga-shadow-btn: oklch(0.40 0.09 150 / 0.25);

  --kga-font-head: 'Bitter', Georgia, serif;
  --kga-font-body: 'Source Sans 3', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--kga-font-body);
  font-size: 19px;
  line-height: 1.65;
  color: var(--kga-text);
  background: var(--kga-cream);
  -webkit-font-smoothing: antialiased;
}

/* Links im Fließtext sind blau. Dauerhaft unterstrichen wird nur in den
   Beiträgen unter „Aktuelles“ – siehe .kga-article__body weiter unten.
   Überall sonst kommt die Unterstreichung erst beim Überfahren dazu.

   :where() hat absichtlich keine Spezifität: jede Klassenregel sticht diese
   Grundeinstellung, ohne dass man sie überschreiben muss. */
:where(a) {
  color: var(--kga-link);
  text-decoration: none;
}
:where(a:hover, a:focus-visible) {
  color: var(--kga-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Strukturelle Links bringen ihre eigene Gestalt mit – Knöpfe, Karten,
   Menüpunkte, Logo. Sie bleiben wie bisher. */
.kga-brand,
.kga-nav__link,
.kga-btn,
.kga-card,
.kga-skip-link,
.kga-section__link,
.kga-article__back,
.kga-doc__action,
.kga-linklist__link,
.kga-mailbox__mail,
.kga-abteilung__link,
.kga-footer__legal a {
  color: inherit;
  text-decoration: none;
}

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

::selection { background: var(--kga-green-75); }

.kga-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--kga-cream);
}

/* Skip-Link */
.kga-skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--kga-green-600);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  z-index: 100;
}
.kga-skip-link:focus { left: 16px; }

/* Header */
.kga-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kga-cream-light);
  border-bottom: 1px solid var(--kga-border);
  box-shadow: 0 1px 3px var(--kga-shadow-soft);
}
.kga-header__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}
.kga-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}
.kga-brand__mark {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  display: block;
  object-fit: contain;
}
/* Ersatzdarstellung, falls die Logodatei fehlt: Kreis mit Vereinskürzel */
.kga-brand__mark--text {
  background: var(--kga-green-600);
  color: oklch(0.97 0.02 150);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kga-font-head);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: 0.5px;
  box-shadow: inset 0 0 0 3px oklch(0.99 0.006 85 / 0.25);
}
.kga-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.kga-brand__name {
  font-family: var(--kga-font-head);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 25px);
  color: var(--kga-green-900);
}
.kga-brand__tag { font-size: 14px; color: var(--kga-text-muted); letter-spacing: 0.4px; }

.kga-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.kga-nav__link {
  padding: 12px 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--kga-text-soft);
  border-radius: 8px;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.kga-nav__link:hover,
.kga-nav__link:focus-visible {
  background: var(--kga-green-75);
  color: var(--kga-green-720);
}
.kga-nav__link.is-active {
  font-weight: 600;
  color: var(--kga-green-720);
  border-bottom-color: var(--kga-green-600);
}

/* Buttons */
.kga-btn {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 15px 28px;
  font-size: 19px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  border: none;
}
.kga-btn--primary {
  background: var(--kga-green-600);
  color: oklch(0.98 0.01 150);
  box-shadow: 0 2px 6px var(--kga-shadow-btn);
}
.kga-btn--primary:hover, .kga-btn--primary:focus-visible { background: var(--kga-green-600-hover); }
.kga-btn--secondary {
  background: var(--kga-cream-light);
  color: var(--kga-green-740);
  border: 2px solid var(--kga-green-200);
}
.kga-btn--secondary:hover, .kga-btn--secondary:focus-visible { background: var(--kga-green-90); }

/* Sektionen */
.kga-section { max-width: 1140px; margin: 0 auto; padding: clamp(48px, 6vw, 84px) 24px; scroll-margin-top: 90px; }
/* Die Sektion ist auf 1140px begrenzt – damit die Tönung trotzdem über die
   volle Fensterbreite läuft, wird sie per Schlagschatten seitlich verlängert
   und oben/unten wieder auf die Sektionshöhe beschnitten. */
.kga-section--tinted {
  background: var(--kga-green-50);
  box-shadow: 0 0 0 100vmax var(--kga-green-50);
  clip-path: inset(0 -100vmax);
}
.kga-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
}
.kga-eyebrow { display: block; font-size: 15px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--kga-green-500); margin-bottom: 8px; }
.kga-section__title { font-family: var(--kga-font-head); font-weight: 700; font-size: clamp(26px, 3.6vw, 38px); color: var(--kga-green-900); margin: 0; }
.kga-section__link { font-size: 18px; font-weight: 600; color: var(--kga-green-700); min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; }
.kga-section__link:hover, .kga-section__link:focus-visible { text-decoration: underline; }

/* Hero */
.kga-hero { background: var(--kga-green-50); }
.kga-hero__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 72px) 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
}
.kga-hero__copy { flex: 1 1 360px; min-width: 280px; }
.kga-hero__media { flex: 1 1 380px; min-width: 280px; }
.kga-hero__badge {
  display: inline-block;
  background: var(--kga-cream-light);
  color: var(--kga-green-700);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.6px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--kga-green-150);
  margin-bottom: 22px;
}
.kga-hero__title {
  font-family: var(--kga-font-head);
  font-weight: 700;
  /* Etwas zurückgenommen – „Herzlich Willkommen“ wirkte in voller Größe zu wuchtig. */
  font-size: clamp(27px, 4.2vw, 40px);
  line-height: 1.15;
  color: var(--kga-green-910);
  margin: 0 0 20px;
  text-wrap: balance;
}
.kga-hero__text { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: var(--kga-text-soft); margin: 0 0 32px; max-width: 46ch; }
.kga-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.kga-hero__image { width: 100%; height: clamp(240px, 38vw, 400px); box-shadow: 0 10px 30px var(--kga-shadow-hero); }

/* Bild-Platzhalter (entspricht den image-slots aus dem Entwurf) */
.kga-media {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--kga-green-50);
}
.kga-media img { width: 100%; height: 100%; object-fit: cover; }
.kga-media--rounded { border-radius: 18px; }
.kga-media--card { border-radius: 0; }
.kga-media__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: repeating-linear-gradient(135deg, var(--kga-green-50) 0 14px, oklch(0.94 0.022 150) 14px 28px);
  border: 2px dashed var(--kga-green-150);
  color: var(--kga-green-740);
  font-size: 16px;
  font-weight: 600;
}

/* News-Karten */
.kga-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.kga-card {
  display: flex;
  flex-direction: column;
  background: var(--kga-cream-card);
  border: 1px solid var(--kga-border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 3px var(--kga-shadow-card);
  transition: transform 0.15s, box-shadow 0.15s;
}
.kga-card:hover, .kga-card:focus-visible { transform: translateY(-4px); box-shadow: 0 12px 28px var(--kga-shadow-hover); }
.kga-card__media { width: 100%; height: 190px; }
.kga-card__body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.kga-card__date { font-size: 15px; font-weight: 600; color: var(--kga-green-500); margin-bottom: 10px; }
.kga-card__title { font-family: var(--kga-font-head); font-weight: 600; font-size: 23px; line-height: 1.25; color: var(--kga-green-900); margin: 0 0 12px; text-wrap: balance; }
.kga-card__excerpt { font-size: 18px; line-height: 1.55; color: var(--kga-text-soft2); margin: 0 0 18px; flex: 1; }
.kga-card__more { font-size: 18px; font-weight: 600; color: var(--kga-green-700); }

/* Termine */
.kga-events {
  background: var(--kga-cream-card);
  border: 1px solid var(--kga-green-100);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px oklch(0.30 0.03 150 / 0.06);
}
.kga-event {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--kga-border);
}
.kga-event:last-child { border-bottom: none; }
.kga-event__date {
  flex: none;
  width: 74px;
  height: 74px;
  border-radius: 12px;
  background: var(--kga-green-600);
  color: oklch(0.97 0.02 150);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.kga-event__day { font-family: var(--kga-font-head); font-weight: 700; font-size: 28px; }
.kga-event__month { font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-top: 3px; }
.kga-event__body { flex: 1 1 200px; min-width: 180px; }
.kga-event__title { font-family: var(--kga-font-head); font-weight: 600; font-size: 22px; color: var(--kga-green-900); margin: 0 0 4px; }
.kga-event__meta { font-size: 18px; color: var(--kga-text-soft3); margin: 0; }
.kga-event__weekday { font-size: 15px; font-weight: 600; color: var(--kga-green-700); background: var(--kga-green-80); padding: 8px 14px; border-radius: 999px; }

/* Artikel */
.kga-article { max-width: 780px; margin: 0 auto; padding: clamp(28px, 4vw, 52px) 24px clamp(48px, 6vw, 80px); }
/* display:flex statt inline-flex – sonst setzt sich die Datumszeile daneben
   statt darunter. width:fit-content hält die Klickfläche trotzdem schmal. */
.kga-article__back { display: flex; width: fit-content; align-items: center; gap: 8px; min-height: 44px; font-size: 18px; font-weight: 600; color: var(--kga-green-700); margin-bottom: 28px; cursor: pointer; }
.kga-article__back:hover, .kga-article__back:focus-visible { text-decoration: underline; }
.kga-article__eyebrow { display: inline-block; font-size: 15px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--kga-green-500); margin-bottom: 14px; }
.kga-article__title { font-family: var(--kga-font-head); font-weight: 700; font-size: clamp(30px, 5.2vw, 46px); line-height: 1.15; color: var(--kga-green-910); margin: 0 0 28px; text-wrap: balance; }
/* Einzige Stelle mit dauerhafter Unterstreichung: der Text eines Beitrags
   unter „Aktuelles“. */
.kga-article__body a {
  color: var(--kga-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.kga-article__body a:hover { color: var(--kga-link-hover); }

.kga-article__media { width: 100%; height: clamp(240px, 46vw, 420px); margin-bottom: 36px; box-shadow: 0 8px 24px var(--kga-shadow-hover); }
.kga-article__body { font-size: clamp(19px, 2vw, 21px); line-height: 1.75; color: oklch(0.32 0.015 80); }
.kga-article__body p { margin: 0 0 24px; }
.kga-article__body blockquote {
  margin: 32px 0;
  padding: 20px 28px;
  border-left: 5px solid var(--kga-green-600);
  background: var(--kga-green-50);
  border-radius: 0 12px 12px 0;
  font-family: var(--kga-font-head);
  font-size: 22px;
  font-style: italic;
  color: var(--kga-text-quote);
}
.kga-article__footer { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--kga-border); }

/* Dokumente */
.kga-doc-list { display: flex; flex-direction: column; gap: 16px; }
.kga-doc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: var(--kga-cream-card);
  border: 1px solid var(--kga-border);
  border-radius: 14px;
}
.kga-doc__icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--kga-green-50);
  color: var(--kga-green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.kga-doc__body { flex: 1 1 200px; min-width: 180px; }
.kga-doc__title { font-family: var(--kga-font-head); font-weight: 600; font-size: 20px; color: var(--kga-green-900); margin: 0 0 2px; }
.kga-doc__meta { font-size: 16px; color: var(--kga-text-muted); margin: 0; }
.kga-doc__action { font-size: 17px; font-weight: 600; color: var(--kga-green-700); }
.kga-doc__action:hover, .kga-doc__action:focus-visible { text-decoration: underline; }
.kga-empty { font-size: 18px; color: var(--kga-text-soft3); }

/* Kontakt */
.kga-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; margin-top: 36px; }
.kga-contact-card { background: var(--kga-green-50); border: 1px solid var(--kga-green-100); border-radius: 16px; padding: 28px; }
.kga-contact-card h3 { font-family: var(--kga-font-head); font-weight: 600; font-size: 20px; color: var(--kga-green-900); margin: 0 0 14px; }
.kga-contact-card address, .kga-contact-card p { font-style: normal; font-size: 18px; line-height: 1.8; color: var(--kga-text-soft); margin: 0; }
.kga-contact-card a { color: var(--kga-link); font-weight: 600; text-decoration: none; }

/* Standardseiten */
.kga-page-header { max-width: 1140px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) 24px 0; }
.kga-page-title { font-family: var(--kga-font-head); font-weight: 700; font-size: clamp(28px, 4.5vw, 42px); color: var(--kga-green-910); margin: 0; text-wrap: balance; }
.kga-page-content { max-width: 780px; margin: 0 auto; padding: 28px 24px clamp(48px, 6vw, 80px); font-size: clamp(18px, 1.6vw, 19px); }
.kga-page-content h2 { font-family: var(--kga-font-head); font-weight: 600; font-size: 26px; color: var(--kga-green-900); margin: 36px 0 14px; }
.kga-page-content p { margin: 0 0 22px; }
.kga-page-content ul, .kga-page-content ol { margin: 0 0 22px; padding-left: 1.4em; }
.kga-page-content a { color: var(--kga-link); text-decoration: none; }

/* Footer */
.kga-footer { background: var(--kga-footer-bg); color: var(--kga-footer-text); }
.kga-footer__grid {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(44px, 5vw, 68px) 24px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
}
.kga-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.kga-footer__mark {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  display: block; object-fit: contain;
}
.kga-footer__mark--text {
  background: var(--kga-green-650); color: oklch(0.97 0.02 150);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--kga-font-head); font-weight: 700; font-size: 20px;
}
.kga-footer__name { font-family: var(--kga-font-head); font-weight: 700; font-size: 21px; color: #fff; }
.kga-footer__lead { font-size: 17px; line-height: 1.6; color: var(--kga-footer-text-soft2); margin: 0; }
.kga-footer__heading { font-family: var(--kga-font-head); font-weight: 600; font-size: 19px; color: #fff; margin: 0 0 16px; }
.kga-footer address, .kga-footer__col p { font-style: normal; font-size: 17px; line-height: 1.85; color: var(--kga-footer-text-soft); margin: 0; }
.kga-footer a.kga-footer__inline-link { color: #fff; text-decoration: underline; }
.kga-footer__bottom {
  border-top: 1px solid var(--kga-footer-border);
  max-width: 1140px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.kga-footer__copy { font-size: 16px; color: var(--kga-footer-text-soft3); }
.kga-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 4px; }
.kga-footer__legal a { font-size: 16px; color: var(--kga-footer-text-soft4); padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px; }
.kga-footer__legal a:hover, .kga-footer__legal a:focus-visible { background: var(--kga-footer-hover); text-decoration: underline; }

/* ==========================================================================
   Bausteine der überarbeiteten Struktur
   ========================================================================== */

/* Die gelben Baustellen-Markierungen (.kga-todo) sind zum Livegang am
   24.08.2026 entfallen – samt der Twig-Zweige, die sie erzeugt haben.
   Fehlt eine Angabe, steht jetzt nichts da statt eines Hinweises an die
   Redaktion. Sollte irgendwo doch noch ein solcher Bezeichner auftauchen,
   erscheint er als gewöhnlicher Text und fällt beim Lesen auf. */

/* Startseite: Kurzinfo-Modul */
.kga-intro {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  align-items: flex-start;
  margin-top: 8px;
}
.kga-intro__copy { flex: 1 1 380px; min-width: 300px; font-size: clamp(18px, 1.6vw, 19px); }
.kga-intro__copy p { margin: 0 0 20px; }
.kga-intro__media { flex: 1 1 320px; min-width: 280px; }
/* Ohne Bild fehlt die rechte Spalte. Der Text würde sonst über die volle
   Sektionsbreite laufen – rund neunzig Zeichen pro Zeile, deutlich zu viel
   zum bequemen Lesen. Die Kennzahlen passen in dieser Breite weiterhin
   nebeneinander. */
.kga-intro--einspaltig .kga-intro__copy { max-width: 68ch; }
.kga-intro__label {
  font-family: var(--kga-font-head); font-weight: 600; font-size: 19px;
  color: var(--kga-green-900); margin: 28px 0 12px;
}

/* Kennzahlen (Parzellen, Abteilungen, Gründungsjahr) */
.kga-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 26px 0; padding: 0;
}
.kga-fact {
  background: var(--kga-cream-card);
  border: 1px solid var(--kga-green-100);
  border-radius: 14px;
  padding: 18px 20px;
}
.kga-fact__label {
  font-size: 14px; font-weight: 600; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--kga-green-600); margin: 0 0 6px;
}
.kga-fact__value {
  font-family: var(--kga-font-head); font-weight: 700; font-size: 26px;
  color: var(--kga-green-900); margin: 0; line-height: 1.2;
}

/* Abteilungen mit Zugangsangabe */
.kga-abteilungen {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
}
.kga-abteilung {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--kga-cream-card); border: 1px solid var(--kga-border);
  border-left: 3px solid var(--kga-green-600);
  border-radius: 12px; padding: 14px 18px;
}
.kga-abteilung__name {
  font-family: var(--kga-font-head); font-weight: 600; font-size: 19px;
  color: var(--kga-green-900);
}
.kga-abteilung__zugang { font-size: 16px; line-height: 1.45; color: var(--kga-text-muted); }
.kga-abteilung__link { font-size: 15px; font-weight: 600; color: var(--kga-green-700); margin-top: 4px; text-decoration: underline; }

/* Vorstand und Wegeobleute */
.kga-mailbox {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  background: var(--kga-green-50); border: 1px solid var(--kga-green-100);
  border-left: 4px solid var(--kga-green-600);
  border-radius: 14px; padding: 20px 24px; margin: 28px 0 8px;
}
.kga-mailbox__label {
  font-size: 14px; font-weight: 600; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--kga-green-600);
}
.kga-mailbox__mail {
  font-family: var(--kga-font-head); font-weight: 700; font-size: 22px;
  color: var(--kga-green-900); text-decoration: underline;
}
.kga-people {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin: 20px 0 8px;
}
.kga-person {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--kga-cream-card); border: 1px solid var(--kga-border);
  border-radius: 14px; padding: 18px 20px;
}
.kga-person__funktion {
  font-size: 14px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--kga-green-600);
}
.kga-person__name {
  font-family: var(--kga-font-head); font-weight: 600; font-size: 20px;
  color: var(--kga-green-900);
}
.kga-contact-card__hint { display: inline-block; font-size: 15px; line-height: 1.5; color: var(--kga-text-muted); margin-top: 8px; }

/* Linklisten der Gartenfachberatung */
.kga-linklist { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.kga-linklist__item {
  background: var(--kga-cream-card); border: 1px solid var(--kga-border);
  border-radius: 14px; padding: 16px 20px;
}
.kga-linklist__link {
  display: block; font-family: var(--kga-font-head); font-weight: 600;
  font-size: 19px; color: var(--kga-green-700); text-decoration: none;
}
a.kga-linklist__link:hover, a.kga-linklist__link:focus-visible { text-decoration: underline; }
.kga-linklist__hint { display: block; font-size: 16px; color: var(--kga-text-muted); margin-top: 4px; }

/* Statusbox (freie Parzellen, fehlende Dokumente) */
.kga-notice {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start;
  background: var(--kga-green-50); border: 1px solid var(--kga-green-100);
  border-left: 4px solid var(--kga-green-600);
  border-radius: 16px; padding: 24px 26px; margin: 28px 0 32px;
}
.kga-notice__badge {
  flex: none; background: var(--kga-green-600); color: oklch(0.97 0.02 150);
  border-radius: 999px; padding: 4px 14px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
}
.kga-notice__body { flex: 1 1 260px; }
.kga-notice__title {
  font-family: var(--kga-font-head); font-weight: 700; font-size: 21px;
  color: var(--kga-green-900); margin: 0 0 6px;
}
.kga-notice__text { font-size: 18px; line-height: 1.6; color: var(--kga-text-soft); margin: 0; }

/* Hervorgehobene Ordnungen in der Dokumentenliste */
.kga-doc--highlight {
  border-color: var(--kga-green-200);
  border-left: 4px solid var(--kga-green-600);
  background: var(--kga-green-50);
}

/* Fotogalerie Vereinsheim */
.kga-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 26px 0 30px;
}
.kga-galerie__item { margin: 0; border-radius: 14px; overflow: hidden; min-height: 170px; }
.kga-galerie__item img { width: 100%; height: 100%; object-fit: cover; }

/* Terminkategorien */
.kga-termin-gruppe {
  font-family: var(--kga-font-head); font-weight: 600; font-size: 25px;
  color: var(--kga-green-900); margin: 40px 0 16px;
}
.kga-termin-gruppe:first-of-type { margin-top: 8px; }
.kga-termin-intro { font-size: 18px; color: var(--kga-text-soft); margin: 0 0 18px; max-width: 68ch; }
.kga-events + .kga-events { margin-top: 12px; }

/* Termin ohne feststehendes Datum */
.kga-event__date--offen { background: var(--kga-text-muted); }

/* Rückblick auf vergangene Termine */
.kga-past { margin-top: clamp(40px, 5vw, 64px); }
.kga-past__title {
  font-family: var(--kga-font-head); font-weight: 600; font-size: 24px;
  color: var(--kga-text-soft2); margin: 0 0 18px;
}
.kga-events--past { opacity: 0.72; }
.kga-events--past .kga-event__date { background: var(--kga-text-muted); }

/* Aktionszeile unter Textseiten */
.kga-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }

/* Sichtbarer Fokus für Tastaturnutzung (Barrierearmut) */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--kga-green-600);
  outline-offset: 2px;
}

/* ==========================================================================
   Handy und Tablet

   Alles darüber bleibt unverändert – dieser Block ergänzt nur, was auf
   schmalen Bildschirmen sonst klemmt. Der Menüknopf ist auf dem Desktop
   ausgeblendet, dort ändert sich also nichts.
   ========================================================================== */

/* Menüknopf: standardmäßig aus (Desktop) */
.kga-nav-toggle,
.kga-nav-burger { display: none; }

@media (max-width: 780px) {

  /* --- Navigation als aufklappbares Menü --- */
  .kga-nav-toggle {
    /* nur optisch versteckt, bleibt fokussierbar */
    position: absolute;
    width: 1px; height: 1px;
    margin: 0; padding: 0; border: 0;
    opacity: 0;
    pointer-events: none;
  }
  .kga-nav-burger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid var(--kga-green-100);
    border-radius: 10px;
    background: var(--kga-green-50);
    color: var(--kga-green-720);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
  }
  .kga-nav-burger__icon {
    position: relative;
    width: 20px; height: 2px;
    background: currentColor;
    border-radius: 2px;
  }
  .kga-nav-burger__icon::before,
  .kga-nav-burger__icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 20px; height: 2px;
    background: currentColor;
    border-radius: 2px;
  }
  .kga-nav-burger__icon::before { top: -6px; }
  .kga-nav-burger__icon::after  { top: 6px; }

  /* Tastaturfokus sichtbar machen, obwohl die Checkbox unsichtbar ist */
  .kga-nav-toggle:focus-visible + .kga-nav-burger {
    outline: 3px solid var(--kga-green-600);
    outline-offset: 2px;
  }

  .kga-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 6px;
  }
  .kga-nav-toggle:checked ~ .kga-nav { display: flex; }

  /*
    Die Kopfzeile klebt oben am Bildschirmrand. Wird sie durch das offene
    Menü höher als der Bildschirm, ist ihr unterer Teil dauerhaft
    unerreichbar – ein klebendes Element lässt sich nicht über seine
    eigene Höhe hinausscrollen. Genau deshalb war der letzte Menüpunkt
    nicht zu sehen.

    Die Grenze setzt deshalb der gesamte Kopfbereich, nicht nur das Menü:
    So muss die Höhe der Namenszeile darüber nicht geraten werden – egal
    wie oft der Vereinsname umbricht, es passt immer.

    dvh statt vh, weil Handy-Browser ihre Adressleiste ein- und ausblenden;
    die vh-Zeile davor ist die Rückfallebene für ältere Browser.
  */
  .kga-header__inner {
    max-height: 100vh;
    max-height: 100dvh;
    /* Bewusst als zwei Einzelangaben statt der Kurzform „overflow: hidden auto“:
       ältere Handy-Browser kennen die Kurzform mit zwei Werten nicht und
       verwerfen dann die ganze Zeile – der Kopfbereich wäre gedeckelt, aber
       nicht scrollbar. Genau das ist passiert.
       Waagerecht aus, damit kein zweiter Rollbalken erscheint. */
    overflow-x: hidden;
    overflow-y: auto;
    /* Schwungscrollen auf älteren iPhones. */
    -webkit-overflow-scrolling: touch;
    /* Verhindert, dass die Seite darunter mitscrollt, wenn das Ende
       erreicht ist. */
    overscroll-behavior: contain;
  }

  .kga-nav__link {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border-bottom: 0;
    font-size: 17px;
    /* 44px bleibt die Mindestgröße für eine Fingerfläche – darunter
       gehen wir nicht, auch wenn es enger zugeht. */
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Der Unterstrich der aktiven Seite funktioniert in der Liste nicht –
     stattdessen ein Balken links. */
  .kga-nav__link.is-active {
    background: var(--kga-green-75);
    box-shadow: inset 3px 0 0 var(--kga-green-600);
  }

  /* --- Kopfzeile kompakter --- */
  .kga-header__inner { padding: 12px 18px; gap: 12px 16px; }
  .kga-brand { gap: 11px; }
  .kga-brand__mark { width: 46px; height: 46px; font-size: 19px; }
  .kga-brand__name { font-size: 19px; }
  .kga-brand__tag { font-size: 12.5px; }

  /* --- Grundtypografie etwas kleiner --- */
  body { font-size: 17.5px; }

  /* --- Seitenränder schmaler: auf 360px sind 24px je Seite zu viel --- */
  .kga-section,
  .kga-hero__inner,
  .kga-page-header,
  .kga-page-content,
  .kga-article,
  .kga-footer__grid,
  .kga-footer__bottom { padding-left: 18px; padding-right: 18px; }

  .kga-section { padding-top: 40px; padding-bottom: 40px; }
  .kga-hero__inner { padding-top: 32px; padding-bottom: 32px; }

  /* --- Hero: Knöpfe über die volle Breite, besser zu treffen --- */
  .kga-hero__actions { gap: 10px; }
  .kga-hero__actions .kga-btn { flex: 1 1 100%; justify-content: center; }
  .kga-btn { min-height: 50px; padding: 13px 22px; font-size: 17.5px; }

  /* --- Abschnittsköpfe untereinander statt nebeneinander --- */
  .kga-section__head { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* --- Termine: Datumskachel kleiner, Wochentag in eigene Zeile --- */
  .kga-event { gap: 14px; padding: 16px 18px; }
  .kga-event__date { width: 60px; height: 60px; }
  .kga-event__day { font-size: 23px; }
  .kga-event__title { font-size: 19px; }
  .kga-event__weekday { order: 3; margin-left: 74px; }

  /* --- Dokumente: Download-Link in eigene Zeile --- */
  .kga-doc { gap: 14px; padding: 16px 18px; }
  .kga-doc__action { flex: 1 1 100%; }

  /* --- Kennzahlen und Karten enger --- */
  .kga-facts { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .kga-fact { padding: 14px 16px; }
  .kga-fact__value { font-size: 22px; }
  .kga-contact-grid { gap: 18px; margin-top: 26px; }
  .kga-contact-card { padding: 22px; }
  .kga-people { gap: 10px; }

  /* --- Bilder nicht zu hoch werden lassen --- */
  .kga-article__media { height: clamp(180px, 52vw, 260px); margin-bottom: 26px; }

  /* --- Footer --- */
  .kga-footer__grid { gap: 28px; padding-top: 40px; }
  .kga-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    /* Luft nach unten: Handy-Browser blenden dort gern eigene Leisten ein
       (Adresszeile, Assistent). Ohne Polster klebt der letzte Link darunter. */
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .kga-footer__legal { margin-left: -14px; }

  /* Gleiches Polster unter dem aufgeklappten Menü, damit der letzte
     Menüpunkt nicht unter einer Browserleiste verschwindet. */
  .kga-nav-toggle:checked ~ .kga-nav { padding-bottom: 18px; }
}

/* Sehr schmale Geräte (unter 380px) */
@media (max-width: 380px) {
  .kga-brand__mark { width: 42px; height: 42px; }
  .kga-brand__mark--text { font-size: 17px; }
  .kga-brand__name { font-size: 17.5px; }
  .kga-event__weekday { margin-left: 0; }
  .kga-facts { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   Chronik – Zeitleiste
   Zweispaltig: Jahreszahl links, Ereignis rechts, dazwischen eine durch-
   laufende Linie mit einem Punkt je Eintrag. Auf schmalen Bildschirmen
   rutscht die Jahreszahl über den Text, die Linie entfällt.
   --------------------------------------------------------------------------- */
.kga-chronik {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.kga-chronik__eintrag {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 0 28px;
  padding-bottom: 34px;
  position: relative;
}
.kga-chronik__eintrag:last-child { padding-bottom: 0; }

/* Die Linie hängt am Eintrag, nicht an der Liste – so endet sie automatisch
   am letzten Punkt und läuft nicht ins Leere. */
.kga-chronik__eintrag::before {
  content: "";
  position: absolute;
  left: 137px;
  top: 22px;
  bottom: -4px;
  width: 2px;
  background: var(--kga-green-100);
}
.kga-chronik__eintrag:last-child::before { display: none; }

.kga-chronik__jahr {
  position: relative;
  font-family: Bitter, Georgia, serif;
  font-weight: 700;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--kga-green-700);
  text-align: right;
  padding-top: 1px;
}
.kga-chronik__jahr--offen { color: var(--kga-text-muted); }

/* Der Punkt auf der Linie */
.kga-chronik__jahr::after {
  content: "";
  position: absolute;
  right: -23px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--kga-green-600);
  box-shadow: 0 0 0 4px var(--kga-cream);
}
.kga-chronik__jahr--offen::after { background: var(--kga-green-150); }

.kga-chronik__titel {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.3;
}

.kga-chronik__text > :first-child { margin-top: 0; }
.kga-chronik__text > :last-child { margin-bottom: 0; }
.kga-chronik__text { color: var(--kga-text-soft); }

@media (max-width: 780px) {
  .kga-chronik__eintrag {
    grid-template-columns: 1fr;
    gap: 4px;
    padding-bottom: 26px;
  }
  .kga-chronik__eintrag::before { display: none; }
  .kga-chronik__jahr { text-align: left; font-size: 17px; }
  .kga-chronik__jahr::after { display: none; }
}

/* Tabellen aus Markdown. Gilt für alle Textbereiche, damit eine Tabelle
   überall gleich aussieht und nicht browserroh dasteht. */
.kga-page-content table,
.kga-article__body table,
.kga-chronik__text table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px;
  font-size: 17px;
}
.kga-page-content th,
.kga-article__body th,
.kga-chronik__text th {
  text-align: left;
  font-family: var(--kga-font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--kga-green-910);
  padding: 10px 14px 10px 0;
  border-bottom: 2px solid var(--kga-green-150);
}
.kga-page-content td,
.kga-article__body td,
.kga-chronik__text td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--kga-border);
  color: var(--kga-text-soft);
  font-variant-numeric: tabular-nums;
}
.kga-page-content tr:last-child td,
.kga-article__body tr:last-child td,
.kga-chronik__text tr:last-child td { border-bottom: none; }

/* Tabellen, die schmaler Bildschirme sprengen könnten, bekommen einen
   eigenen Schieberahmen – die Seite selbst scrollt nie seitwärts. */
.kga-tabelle-scroll {
  overflow-x: auto;
  margin: 0 0 6px;
}
.kga-tabelle-scroll table { margin-bottom: 0; }

.kga-voegel-tabelle td:last-child { color: var(--kga-text-muted); }
.kga-voegel-tabelle em { font-style: italic; }

.kga-tabelle-fuss {
  font-size: 15px;
  color: var(--kga-text-muted);
  margin: 0 0 22px;
}

/* Niedrige Handybildschirme: zehn Menüpunkte gehen sich sonst nicht aus.
   Etwas enger gesetzt, damit gar nicht erst gescrollt werden muss – die
   Obergrenze am Kopfbereich bleibt als Sicherheitsnetz bestehen. */
@media (max-width: 780px) and (max-height: 740px) {
  .kga-nav__link { padding: 8px 14px; font-size: 16.5px; }
  .kga-header__inner { padding: 10px 18px; gap: 8px 16px; }
  .kga-brand__mark { width: 40px; height: 40px; }
  .kga-brand__name { font-size: 17px; }
  .kga-brand__tag { font-size: 12px; }
}