/* =====================================================================
   GEMEINDEVEREIN MEDOW E.V. – Gestaltung der Website
   ---------------------------------------------------------------------
   Aufbau dieser Datei
     1. Farben und Grundwerte      5. Ortsteile
     2. Grundgeruest               6. Inhaltsabschnitte
     3. Kopfzeile und Navigation   7. Dokumentseiten
     4. Titelbereich               8. Kleinere Bildschirme, Druck

   Es werden keine Schriften aus dem Internet geladen. Die Website
   verwendet ausschliesslich Schriften, die auf dem Geraet vorhanden
   sind. Damit entsteht keine Verbindung zu Google oder anderen
   Anbietern. Das ist Voraussetzung fuer die Datenschutzerklaerung.
   ===================================================================== */


/* === 1. FARBEN UND GRUNDWERTE ======================================= */

:root {
  /* Markenfarben aus dem Vereinslogo */
  --gruen-hell:  #7fb032;
  --gelb:        #e2a10c;
  --blau:        #1594d2;

  /* Flaechen und Schrift */
  --tinte:       #16302a;   /* Grundfarbe der Schrift        */
  --tinte-weich: #46605a;   /* Nebentexte                    */
  --gruen:       #2b5b48;   /* Akzentfarbe fuer Links, Titel */
  --gruen-dunkel:#173d30;
  --grund:       #ffffff;   /* Seitenhintergrund             */
  --flaeche:     #f2f6ee;   /* abgesetzte Abschnitte         */
  --flaeche-2:   #e7eee0;
  --linie:       #d8e0d4;
  --dunkel:      #16302a;   /* dunkle Panels                 */
  --auf-dunkel:  #ffffff;
  --auf-dunkel-2:#c7d8c9;

  --radius:      10px;
  --radius-gross:16px;
  --schatten:    0 1px 2px rgba(22,48,42,.05), 0 8px 28px rgba(22,48,42,.07);

  --breite:      1220px;   /* maximale Inhaltsbreite */
  --rand:        clamp(20px, 5vw, 56px);

  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
}

/* Dunkler Modus: greift automatisch, wenn das Geraet darauf steht.
   Es werden nur Farben getauscht, das Layout bleibt gleich. */
@media (prefers-color-scheme: dark) {
  :root {
    --tinte:       #e8efe6;
    --tinte-weich: #a9bdb1;
    --gruen:       #9ccc5a;
    --gruen-dunkel:#b7db84;
    --grund:       #0f1c18;
    --flaeche:     #16261f;
    --flaeche-2:   #1d3129;
    --linie:       #2b433a;
    --dunkel:      #16261f;
    --auf-dunkel-2:#b2c9b8;
    --schatten:    0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;   /* damit Sprungmarken nicht unter der Kopfzeile landen */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 17px/1.68 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
button { font: inherit; }
a { color: inherit; text-underline-offset: 4px; }

h1, h2, h3, h4, p, figure, ul, ol, blockquote { margin: 0; }
p + p { margin-top: 1.05em; }

h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.06;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: 1.16rem; line-height: 1.35; }

h1 em, h2 em { font-style: italic; color: var(--gruen); }

/* Sichtbarer Fokusrahmen fuer Tastaturbedienung */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 4px;
  border-radius: 3px;
}

/* Sprunglink fuer Screenreader und Tastatur */
.skip {
  position: absolute; left: 16px; top: -80px; z-index: 60;
  background: var(--grund); color: var(--tinte);
  padding: 14px 20px; border-radius: var(--radius);
  box-shadow: var(--schatten); text-decoration: none; font-weight: 600;
  transition: top .18s ease;
}
.skip:focus { top: 14px; }


/* === 2. GRUNDGERUEST ================================================ */

.wrap {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.section { padding-block: clamp(64px, 9vw, 118px); }
.section.anschluss { padding-top: 0; }        /* schliesst direkt an den Abschnitt davor an */
.abstand-oben  { margin-top: 26px; }
.abstand-oben-l { margin-top: 34px; }

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gruen);
  margin-bottom: 18px;
}

.lead        { font-size: 1.16rem; color: var(--tinte-weich); }
.small       { font-size: .89rem; color: var(--tinte-weich); }
.section-kopf { max-width: 780px; }
.section-kopf p:not(.eyebrow) { margin-top: 20px; color: var(--tinte-weich); font-size: 1.06rem; }

/* Knoepfe */
.button {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--gruen); color: #fff;
  padding: 15px 26px; border-radius: 999px;
  text-decoration: none; font-weight: 650; font-size: .97rem;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.button:hover { background: var(--gruen-dunkel); transform: translateY(-1px); box-shadow: var(--schatten); }
@media (prefers-color-scheme: dark) { .button { color: #0f1c18; } }

.button.gelb { background: var(--gelb); color: #2a1f00; }
.button.gelb:hover { background: #f5b93a; }

.button.hell {
  background: transparent; color: var(--tinte);
  border-color: var(--linie);
}
.button.hell:hover { background: var(--flaeche); }

.textlink {
  font-weight: 650; font-size: .97rem; color: var(--gruen);
  text-decoration: underline; text-decoration-thickness: 1.5px;
}
.textlink:hover { text-decoration-thickness: 2.5px; }


/* === 3. KOPFZEILE UND NAVIGATION ==================================== */

.header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.header.gescrollt { border-bottom-color: var(--linie); box-shadow: 0 2px 16px rgba(22,48,42,.05); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 14px;
}

.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand img { width: 42px; height: 42px; flex: none; }
.brand span {
  font-size: .68rem; font-weight: 700; letter-spacing: .15em;
  line-height: 1.35; text-transform: uppercase; color: var(--tinte-weich);
}
.brand strong {
  display: block; font-size: 1.16rem; letter-spacing: .1em; color: var(--tinte);
}

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  text-decoration: none; font-size: .95rem; font-weight: 500;
  padding: 9px 14px; border-radius: 999px;
  transition: background .15s ease;
}
.nav a:hover { background: var(--flaeche); }
.nav .nav-cta {
  background: var(--gruen); color: #fff; font-weight: 650; margin-left: 8px;
}
.nav .nav-cta:hover { background: var(--gruen-dunkel); }
@media (prefers-color-scheme: dark) { .nav .nav-cta { color: #0f1c18; } }

.menu-toggle {
  display: none; align-items: center; gap: 9px;
  background: transparent; color: var(--tinte);
  border: 1px solid var(--linie); border-radius: 999px;
  padding: 9px 16px; cursor: pointer; font-weight: 600; font-size: .92rem;
}
.menu-toggle .balken { display: block; width: 16px; height: 9px; position: relative; }
.menu-toggle .balken::before,
.menu-toggle .balken::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1.8px;
  background: currentColor; border-radius: 2px; transition: transform .2s ease, top .2s ease;
}
.menu-toggle .balken::before { top: 0; }
.menu-toggle .balken::after  { top: 7px; }
.menu-toggle[aria-expanded="true"] .balken::before { top: 4px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .balken::after  { top: 4px; transform: rotate(-45deg); }


/* === 4. TITELBEREICH ================================================ */

.hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 6vw, 76px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}

.hero h1 { margin-bottom: 26px; }
.hero .lead { max-width: 46ch; }

.hero-aktionen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  margin-top: 34px;
}

.hero-fakten {
  display: flex; flex-wrap: wrap; gap: 12px 34px;
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid var(--linie);
  font-size: .88rem; color: var(--tinte-weich);
}
.hero-fakten div strong {
  display: block; font-family: var(--serif); font-size: 1.42rem;
  font-weight: 400; color: var(--tinte); letter-spacing: -.02em;
}

/* Titelbild mit versetzter Farbflaeche dahinter */
.hero-bild { position: relative; }
.hero-bild::before {
  content: ""; position: absolute; inset: 22px -20px -20px 22px;
  background: var(--flaeche-2); border-radius: var(--radius-gross); z-index: 0;
}
.hero-bild figure { position: relative; z-index: 1; margin: 0; }
.hero-bild img {
  display: block; width: 100%; border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
}
.hero-bild figcaption {
  margin-top: 14px; font-size: .87rem; color: var(--tinte-weich);
}


/* === 5. ORTSTEILE =================================================== */

.orte { background: var(--flaeche); padding-block: clamp(52px, 7vw, 88px); }

.orte-kopf {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 18px; margin-bottom: 34px;
}
.orte-kopf h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }

.orte-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
}
.ort {
  position: relative; overflow: hidden;
  border-radius: var(--radius); background: var(--flaeche-2);
  box-shadow: var(--schatten);
}
.ort img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.ort:hover img { transform: scale(1.045); }
.ort figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px; color: #fff;
  font-family: var(--serif); font-size: 1.12rem; letter-spacing: .01em;
  background: linear-gradient(transparent, rgba(10,26,20,.82));
}


/* === 6. INHALTSABSCHNITTE =========================================== */

/* --- Aktuelles und Termine --- */
.termine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px; margin-top: 42px;
}
.termin {
  display: flex; gap: 18px; padding: 24px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--grund); box-shadow: var(--schatten);
}
.termin > div { min-width: 0; }
.termin .datum {
  flex: none; align-self: flex-start;
  width: 60px; text-align: center;
  border-radius: 8px; background: var(--flaeche); padding: 9px 4px 11px;
  border-top: 3px solid var(--gruen-hell);
}
.termin .datum .tag {
  display: block; font-family: var(--serif); font-size: 1.65rem; line-height: 1.05;
}
.termin .datum .monat {
  display: block; font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-weich);
  margin-top: 3px;
}
.termin h3 { margin-bottom: 7px; }
.termin p { font-size: .95rem; color: var(--tinte-weich); }
.termin .ort-zeit {
  display: block; margin-top: 10px; font-size: .85rem;
  color: var(--tinte-weich); font-weight: 600;
}

.termine-leer {
  margin-top: 40px; padding: clamp(30px, 5vw, 46px) 24px;
  text-align: center; line-height: 1.6;
  border: 1px dashed var(--linie); border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--tinte-weich); font-size: 1.04rem;
}

/* --- Zwecke des Vereins --- */
.zweck-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 30px; margin-top: 52px;
}
.zweck { border-top: 3px solid var(--gruen-hell); padding-top: 22px; }
.zweck:nth-child(2) { border-color: var(--blau); }
.zweck:nth-child(3) { border-color: var(--gelb); }
.zweck:nth-child(4) { border-color: var(--gruen); }
.zweck .nummer {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinte-weich);
}
.zweck h3 { margin: 18px 0 12px; }
.zweck p { font-size: .97rem; color: var(--tinte-weich); }

/* --- Gruendung --- */
.gruendung { background: var(--flaeche); }
.gruendung-grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
}
.zahl {
  font-family: var(--serif); font-size: clamp(4rem, 9vw, 7rem);
  line-height: .95; letter-spacing: -.04em; color: var(--gruen);
  margin-top: 38px;
}
.zahl + p { margin-top: 12px; font-weight: 600; max-width: 22ch; }
.gross {
  font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.42;
}
.datum-label {
  font-weight: 700; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gruen); margin-bottom: 16px;
}

/* --- Vorstand --- */
.gruppe-label {
  display: flex; align-items: center; gap: 14px;
  margin: 46px 0 18px;
  font-size: .76rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tinte-weich);
}
.gruppe-label::after {
  content: ""; flex: 1; height: 1px; background: var(--linie);
}
.vorstand-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.vorstand-grid.vier { grid-template-columns: repeat(4, 1fr); }
.person {
  display: flex; align-items: center; gap: 15px;
  padding: 18px 20px; border: 1px solid var(--linie);
  border-radius: var(--radius); background: var(--grund);
}
.person .initialen {
  flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--flaeche); color: var(--gruen);
  font-family: var(--serif); font-size: 1.02rem; letter-spacing: .02em;
}
.person h3 { font-size: 1rem; }
.person p { font-size: .85rem; color: var(--tinte-weich); margin-top: 3px; }

/* --- Mitglied werden --- */
.beitritt {
  background: var(--dunkel); color: var(--auf-dunkel);
  border-radius: var(--radius-gross);
  padding: clamp(32px, 5vw, 64px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 70px);
}
/* Im dunklen Modus hebt sich das Panel sonst kaum vom Hintergrund ab */
@media (prefers-color-scheme: dark) {
  .beitritt { background: var(--flaeche-2); border: 1px solid var(--linie); }
}
.beitritt .eyebrow { color: #b7db84; }
.beitritt h2 { color: #fff; }
.beitritt h2 em { color: #a8d34a; }
.beitritt > div > p { color: var(--auf-dunkel-2); margin-top: 22px; }
.beitritt .button { margin-top: 30px; }
.beitritt-detail {
  border-left: 1px solid rgba(255,255,255,.16);
  padding-left: clamp(24px, 3vw, 46px);
}
.preis {
  font-family: var(--serif); font-size: clamp(2.8rem, 5vw, 3.7rem);
  line-height: 1.1; color: #fff;
}
.preis span {
  display: block; font: 600 .95rem/1.5 var(--sans);
  color: var(--auf-dunkel-2); margin-top: 8px;
}
.beitritt-detail .frei { margin-top: 22px; font-size: .95rem; color: var(--auf-dunkel-2); }
.beitritt-detail .frei strong { color: #fff; }
.beitritt-detail .fussnote { margin-top: 14px; font-size: .86rem; color: var(--auf-dunkel-2); }
.beitritt ol { margin: 30px 0 0; padding-left: 20px; }
.beitritt li { margin-bottom: 16px; padding-left: 6px; font-size: .96rem; color: var(--auf-dunkel-2); }
.beitritt li::marker { color: #a8d34a; font-weight: 700; }
.beitritt li strong { color: #fff; display: block; margin-bottom: 2px; }
.beitritt a { color: #cfe6a6; }
.beitritt .button { color: #2a1f00; }
.beitritt .beitragsordnung-link { display: block; margin-top: 18px; font-size: .92rem; }

/* --- Dokumente --- */
.dokumente { margin-top: 40px; border-top: 1px solid var(--linie); }
.dokument {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px 10px;
  border-bottom: 1px solid var(--linie); text-decoration: none;
  transition: background .15s ease, padding-inline .15s ease;
}
.dokument:hover { background: var(--flaeche); padding-inline: 18px 10px; }
.dokument strong { display: block; font-size: 1.1rem; }
.dokument small { display: block; margin-top: 4px; font-size: .87rem; color: var(--tinte-weich); }
.dokument .pfeil { font-size: 1.25rem; color: var(--gruen); flex: none; }

/* --- Kontakt --- */
.kontakt { background: var(--flaeche); }
.kontakt .eyebrow { color: var(--gruen); }
.kontakt-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 70px); align-items: start;
}
.mail {
  display: inline-block; margin: 26px 0 8px;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem); font-weight: 650;
  overflow-wrap: anywhere; color: var(--gruen);
}
.adresse {
  background: var(--grund); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 26px 28px; font-size: .97rem;
}
.adresse dt {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinte-weich); margin-bottom: 5px;
}
.adresse dd { margin: 0 0 18px; }
.adresse dd:last-child { margin-bottom: 0; }

/* --- Fusszeile --- */
.footer {
  border-top: 1px solid var(--linie);
  padding-block: 30px;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px 26px;
  font-size: .88rem; color: var(--tinte-weich);
}
.footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }


/* === 7. DOKUMENTSEITEN (Satzung, Beitragsordnung, Recht) ============ */

.doc { max-width: 830px; padding-block: 46px 90px; }
.doc-zurueck {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--gruen);
}
.doc-zurueck:hover { text-decoration: underline; }
.doc h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 22px 0 16px; }
.doc .doc-meta { color: var(--tinte-weich); font-size: .95rem; }

.doc-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 8px; }
.doc-aktionen button {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; color: var(--tinte);
  border: 1px solid var(--linie); border-radius: 999px;
  padding: 10px 20px; cursor: pointer; font-size: .93rem; font-weight: 600;
}
.doc-aktionen button:hover { background: var(--flaeche); }

.doc h2 {
  font: 700 1.2rem/1.35 var(--sans);
  letter-spacing: 0; margin: 42px 0 14px;
  padding-top: 18px; border-top: 1px solid var(--linie);
  scroll-margin-top: 90px;
}
.doc h3 { margin: 26px 0 10px; font-size: 1.02rem; }
.doc p  { margin: 12px 0; }
.doc a  { overflow-wrap: anywhere; }   /* lange Links brechen auf schmalen Displays um */
.doc ol, .doc ul { margin: 12px 0; padding-left: 24px; }
.doc li { margin: 7px 0; }
.doc ol.absaetze { list-style: none; padding-left: 0; counter-reset: abs; }
.doc ol.absaetze > li {
  counter-increment: abs; position: relative; padding-left: 42px; margin: 14px 0;
}
.doc ol.absaetze > li::before {
  content: "(" counter(abs) ")";
  position: absolute; left: 0; top: 0;
  font-variant-numeric: tabular-nums; color: var(--tinte-weich); font-weight: 600;
}

.hinweis {
  margin: 26px 0; padding: 20px 24px;
  background: var(--flaeche); border-left: 4px solid var(--gelb);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .95rem;
}
.hinweis strong { display: block; margin-bottom: 5px; }

/* Inhaltsverzeichnis der langen Dokumente */
.toc {
  margin: 30px 0 10px; padding: 22px 26px;
  background: var(--flaeche); border-radius: var(--radius);
}
.toc > strong {
  display: block; font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinte-weich); margin-bottom: 12px;
}
.toc ol {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 30px;
}
.toc li { margin: 5px 0; break-inside: avoid; }
.toc a { font-size: .93rem; text-decoration: none; color: var(--gruen); }
.toc a:hover { text-decoration: underline; }


/* === 8. KLEINERE BILDSCHIRME ======================================== */

@media (max-width: 1080px) {
  .orte-grid    { grid-template-columns: repeat(3, 1fr); }
  .zweck-grid   { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
  .vorstand-grid, .vorstand-grid.vier { grid-template-columns: repeat(2, 1fr); }
  .hero-grid    { grid-template-columns: 1fr; gap: 40px; }
  .hero-bild::before { inset: 18px -14px -14px 18px; }
  .kontakt-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .beitritt      { grid-template-columns: 1fr; }
  .beitritt-detail {
    border-left: 0; border-top: 1px solid rgba(255,255,255,.16);
    padding-left: 0; padding-top: 30px;
  }
  .gruendung-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .menu-toggle { display: inline-flex; }

  /* Navigation klappt unter der Kopfzeile auf */
  .js .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--grund); border-bottom: 1px solid var(--linie);
    padding: 10px var(--rand) 18px;
    box-shadow: 0 14px 30px rgba(22,48,42,.10);
  }
  .js .nav.offen { display: flex; }
  .nav a { padding: 13px 12px; border-radius: 8px; font-size: 1rem; }
  .nav .nav-cta { margin: 8px 0 0; justify-content: center; text-align: center; }

  .orte-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ort figcaption { font-size: 1rem; padding: 22px 12px 10px; }
  .vorstand-grid, .vorstand-grid.vier { grid-template-columns: 1fr; }
  .hero-fakten { gap: 14px 26px; }
  .termin { padding: 20px; gap: 16px; }
  .doc .toc ol { columns: 1; }
  .footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .zweck-grid { grid-template-columns: 1fr; gap: 30px; }
  .orte-kopf  { display: block; }
  .orte-kopf .small { margin-top: 12px; }
}

@media (max-width: 420px) {
  .header-inner { gap: 10px; }
  .brand img { width: 36px; height: 36px; }
  .brand strong { font-size: 1rem; }
  .brand span { font-size: .62rem; }
  .menu-toggle { padding: 9px 13px; }
  .termin { flex-direction: column; gap: 14px; }
  .termin .datum { width: 100%; max-width: 60px; }
  .hero-bild::before { inset: 14px -8px -8px 14px; }
}

/* Sehr schmale Geraete: Ortsteile einspaltig, sonst werden die
   Ortsschilder unleserlich klein */
@media (max-width: 359px) {
  .orte-grid { grid-template-columns: 1fr; }
}

/* Bewegung reduzieren, wenn das Geraet es verlangt */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .ort:hover img { transform: none; }
}

/* Druckausgabe: Navigation und Schaltflaechen weglassen */
@media print {
  .header, .footer, .doc-aktionen, .doc-zurueck, .skip, .toc { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap, .doc { max-width: none; width: auto; padding: 0; }
  .doc h2 { break-after: avoid; border-top: 0; padding-top: 0; margin-top: 24pt; }
  .doc p, .doc li { orphans: 3; widows: 3; }
  .hinweis { border: 1px solid #999; background: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}