/*
  Schützengesellschaft Rußdorf 1878 e.V. — Relaunch 2026
  Farbwelt: Vereinsgrün #075612 als Leitfarbe für Kopfleiste, Hero, dunkle
  Abschnitte und Fußzeile. Gold der Wappenumschrift als Akzent, Heraldik-Rot
  der Schwingen als Signalfarbe, warmes Papier als heller Grund.
  Reine FTP-Umgebung: keine externen Anfragen, kein CDN, kein Tracking.
*/
@import url("fonts.css");

/* ============================================================
   1) Design-Tokens
   ============================================================ */
:root {
  /* ---- Vereinsgrün ----------------------------------------
     #075612 ist die verbindliche Vereinsfarbe (vom Auftraggeber
     vorgegeben). Sie trägt Kopfleiste, Hero, dunkle Abschnitte
     und Fußzeile. Kontrast gegen Weiß 8,94:1, gegen Papier 8,02:1.
     Die übrigen Stufen sind daraus abgeleitet.                */
  --gruen-950: #04380C;   /* tiefste Stufe: Topbar, Hero-Grund */
  --gruen-900: #075612;   /* DIE Vereinsfarbe                  */
  --gruen-800: #0A6B18;   /* Karten auf dunklem Grund          */
  --gruen-700: #0E8420;   /* Ränder, Hover                     */
  --gruen-100: #C9DFCC;   /* Fließtext auf Grün — 6,35:1       */
  --gruen-50:  #F1F6F1;

  --rot:       #8A1A16;
  --rot-hell:  #A82722;

  /* Gold aus der Wappenumschrift.
     Achtung: --gold erreicht auf dem Vereinsgrün nur 4,02:1 und
     taugt dort nur für große Schrift. Für kleine Labels auf Grün
     deshalb --gold-hell (5,73:1), für Gold als Text auf hellem
     Grund --gold-ink (5,1:1). */
  --gold:      #D9A62E;
  --gold-hell: #F0CB6B;
  --gold-ink:  #856210;

  --laub:      #3C7A46;
  --nuss:      #6B4A2E;

  --papier:    #F7F2EA;
  --papier-2:  #EDE9DC;
  --ink:       #16281A;
  --ink-soft:  #4C5B4F;
  --titel:     #0C2A12;

  /* Rollen */
  --bg:        var(--gruen-900);
  --surface:   #FFFFFF;
  --text-dark: var(--ink);
  --text-light: var(--gruen-50);

  /* Typografie */
  --font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Literata", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --step--1: clamp(0.84rem, 0.8rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.09rem);
  --step-1:  clamp(1.15rem, 1.07rem + 0.4vw, 1.35rem);
  --step-2:  clamp(1.7rem, 1.4rem + 1.3vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.7rem + 2.4vw, 3.4rem);
  --step-4:  clamp(2.9rem, 2rem + 4.2vw, 5.4rem);
  --step-5:  clamp(3.6rem, 2.2rem + 6.4vw, 7rem);

  /* Layout */
  --container: 1180px;
  --dock-h: 58px;
  --radius: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-1: 0 6px 22px rgba(4, 40, 10, 0.14);
  --shadow-2: 0 24px 60px rgba(4, 40, 10, 0.26);
  --shadow-gold: 0 10px 36px rgba(217, 166, 46, 0.34);
  --glass-bg: rgba(12, 42, 18, 0.55);
  --glass-border: rgba(217, 166, 46, 0.24);
  --glass-blur: 16px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   2) Reset und Basis
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text-dark);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--titel);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 800; text-transform: uppercase; }
h2 { font-size: var(--step-3); text-transform: uppercase; }
h3 { font-size: var(--step-1); }

p { max-width: 68ch; }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.text-center { text-align: center; }
.text-center p { margin-inline: auto; }
.stack > * + * { margin-top: 1.1rem; }
.daten { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-ink); margin-bottom: 0.8rem;
}
.eyebrow::before {
  content: ""; width: 1.9rem; height: 2px; background: var(--gold); border-radius: 2px;
}
.on-dark .eyebrow, .sec-dark .eyebrow { color: var(--gold); }
.lead { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.6; }
.sec-dark .lead { color: var(--gruen-100); }

/* ============================================================
   3) Sprunglink und Fokus
   ============================================================ */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 3000;
  background: var(--gruen-950); color: var(--gold);
  padding: 0.7rem 1.2rem; border-radius: var(--radius-pill);
  font-weight: 700; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Der Fokusrahmen muss sich vom Hintergrund um mindestens 3:1 abheben
   (WCAG 2.2, 2.4.11). Gold allein schafft auf Weiß nur 2,2:1. Deshalb
   zwei Ringe: dunkel innen, hell außen — einer von beiden hebt sich auf
   jedem Grund ab, auf Papier wie auf dem Vereinsgrün. */
:focus-visible {
  outline: 3px solid var(--titel);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px var(--gold-hell);
}
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible {
  outline-color: var(--gold-hell);
  box-shadow: 0 0 0 6px var(--gruen-950);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   4) Knöpfe
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--gold-hell), var(--gold));
  color: var(--gruen-950);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover { box-shadow: 0 16px 46px rgba(217, 166, 46, 0.5); }

.btn-outline {
  border: 2px solid var(--gold-ink); color: var(--gold-ink);
  background: rgba(255, 255, 255, 0.6);
}
.btn-outline:hover { background: var(--gold-ink); color: #fff; }

.btn-ghost-light {
  border: 2px solid rgba(240, 203, 107, 0.55); color: var(--gold-hell);
  backdrop-filter: blur(6px);
}
.btn-ghost-light:hover { background: rgba(240, 203, 107, 0.16); color: #fff; }

.btn-block { display: flex; width: 100%; }

/* ============================================================
   5) Kopfleiste
   ============================================================ */
.topbar {
  background: var(--gruen-950); color: var(--gruen-100);
  font-size: 0.8rem;
}
.topbar .container {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.6rem;
  align-items: center; justify-content: center; padding: 0.5rem 0;
}
.topbar a:hover { color: var(--gold); }
.topbar .sep { opacity: 0.35; }

.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(7, 86, 18, 0.82);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid rgba(217, 166, 46, 0.16);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled { background: rgba(4, 56, 12, 0.96); box-shadow: var(--shadow-1); }

.navbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; }

.brand { display: flex; align-items: center; gap: 0.85rem; }
.brand-logo {
  height: 58px; width: auto; flex: 0 0 auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
  transition: transform 0.4s var(--ease);
}
.brand:hover .brand-logo { transform: scale(1.06) rotate(-3deg); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong {
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--gruen-50);
}
.brand-text span {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}

.nav-menu ul { display: flex; gap: 0.15rem; list-style: none; padding: 0; margin: 0; }
.nav-menu a {
  display: block; padding: 0.5rem 0.85rem; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 0.76rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--gruen-100);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-menu a:hover { background: rgba(217, 166, 46, 0.16); color: #fff; }
.nav-menu a[aria-current] { background: var(--gold); color: var(--gruen-950); font-weight: 600; }

.nav-toggle {
  display: none; width: 48px; height: 48px; border-radius: 12px;
  background: var(--gold); color: var(--gruen-950);
  border: 0; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1; flex: 0 0 auto;
}
.nav-toggle:hover { background: var(--gold-hell); }
.nav-backdrop, .nav-close { display: none; }

@media (max-width: 62rem) {
  /* WICHTIG: backdrop-filter macht die Kopfleiste zum Bezugsrahmen fuer
     alles, was darin position:fixed ist. Das Menue wuerde sich dann am
     Header ausrichten statt am Bildschirm - und bliebe unsichtbar.
     Deshalb hier ohne Weichzeichner. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none;
                 background: var(--gruen-900); }
  .site-header.is-scrolled { background: var(--gruen-950); }

  .nav-toggle { display: inline-flex; }
  .brand-logo { height: 46px; }
  .brand-text strong { font-size: 1.15rem; }
  .nav-menu {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(21rem, 86vw); max-width: 100vw;
    /* 2200: ueber Cookie-Hinweis (2000), Barrierefreiheits-Feld (1600),
       den beiden runden Knoepfen (1500) und der Hinweisleiste (1400).
       Mit 1200 lag das Menue UNTER all dem - der dunkle Grund des
       Cookie-Hinweises legte sich darueber, und es sah aus, als stuende
       die Navigation hinter der Seite. Nur Lightbox (2500) und
       Sprunglink (3000) bleiben oben, und das zu Recht. */
    background: var(--gruen-900); z-index: 2200;
    padding: 4.5rem 1.2rem 2rem;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(100%); transition: transform 0.35s var(--ease);
    border-left: 2px solid var(--gold);
    box-shadow: -12px 0 32px rgba(4, 40, 10, 0.4);
  }
  /* Ein echter Knopf, kein gezeichnetes Zeichen.

     Hier stand ein ::before mit pointer-events:none, weil der
     Umschalt-Knopf im Header darunter verdeckt liegt. Ein Tipp auf das
     Kreuz tat deshalb nichts - es sah nur so aus, als koennte man
     schliessen. 3rem sind ausserdem eine Flaeche, die man am Handy
     trifft; das Zeichen allein war 21 mal 30 Pixel gross. */
  .nav-close {
    display: block; position: absolute; top: .55rem; right: .7rem;
    width: 3rem; height: 3rem; padding: 0;
    border: 0; border-radius: 50%; background: transparent; cursor: pointer;
    font-size: 2rem; line-height: 1; color: var(--gold-hell);
  }
  .nav-close:hover { background: rgba(240, 203, 107, 0.16); }
  .nav-menu.is-open { transform: translateX(0); }
  .nav-menu ul { flex-direction: column; gap: 0.2rem; }
  .nav-menu a {
    padding: 0.95rem 1rem; font-size: 0.95rem;
    border-bottom: 1px solid rgba(240, 203, 107, 0.16);
    border-radius: 8px; letter-spacing: .06em;
  }
  .nav-menu li:last-child a { border-bottom: 0; }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 2100;
    background: rgba(4, 56, 12, 0.62); opacity: 0; pointer-events: none;
    transition: opacity 0.3s var(--ease);
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

  /* Der springende Punkt.

     Das Menue steckt IM <header>, und der hat position:sticky mit
     z-index:900 - damit ist er ein eigener Stapelkontext. Jeder z-Wert
     darin wird an dieser 900 gemessen, egal wie hoch er steht. Das Menue
     mit 2200 lag deshalb in Wahrheit auf Hoehe 900 und damit unter dem
     abdunkelnden Grund (2100), unter dem Cookie-Hinweis und unter allem
     anderen Schwebenden. Genau das sah aus, als stuende die Navigation
     hinter der Seite.

     Solange das Menue offen ist, hebt diese Zeile den ganzen Header ueber
     den Grund. Erst dadurch wirkt der z-Wert des Menues. */
  body.nav-offen .site-header { z-index: 2200; }

  /* Solange das Menue offen ist, hat daneben nichts zu leuchten. */
  body.nav-offen .a11y-fab,
  body.nav-offen .cookie-fab,
  body.nav-offen .a11y-panel,
  body.nav-offen .contact-dock,
  body.nav-offen .notice-bar { display: none; }
}

/* ============================================================
   6) Hero
   ============================================================ */
/* ============================================================
   6) Hero

   Ausnahme im Farbsystem: Der Hero traegt Braun, alles andere
   Vereinsgruen. Ausdrueckliche Vorgabe des Auftraggebers.
   Die Brauntoene gelten NUR hier und faerben nichts anderes ein.
   ============================================================ */
.hero {
  --h-braun-950: #12100E;
  --h-braun-900: #1A1613;

  position: relative; isolation: isolate;
  min-height: min(90vh, 840px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--h-braun-950);
  color: var(--text-light);
}

/* Der Verlauf der ersten Fassung: warmer Goldschimmer links,
   Braun von hell nach dunkel nach rechts. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(75% 60% at 22% 30%, rgba(217, 166, 46, 0.20), transparent 62%),
    linear-gradient(to right,
      rgba(18, 16, 14, 0.94) 12%,
      rgba(18, 16, 14, 0.60) 62%,
      rgba(18, 16, 14, 0.82) 100%);
}
/* Sehr langsam wandernder Lichtschein - gibt dem Hero Tiefe. */
.hero::after {
  content: ""; position: absolute; inset: -40%; z-index: -2;
  background: radial-gradient(circle at 32% 50%, rgba(217, 166, 46, 0.13), transparent 55%);
  animation: schein 16s ease-in-out infinite alternate;
}
@keyframes schein {
  from { transform: translate(0, 0) scale(1); opacity: 0.65; }
  to   { transform: translate(6%, -4%) scale(1.15); opacity: 1; }
}

.hero-inner {
  position: relative;
  display: flex; flex-direction: column; gap: 2.4rem;
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}
@media (min-width: 58rem) {
  .hero-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 3.2rem; }
  .hero-panel { flex: 1 1 auto; max-width: 40rem; }
  .hero-bild  { flex: 0 0 clamp(20rem, 34vw, 27rem); margin: 0; }
}

.hero-panel h1 {
  color: #fff; margin-bottom: 0.9rem;
  font-size: clamp(2.3rem, 1.4rem + 2.8vw, 4rem);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  overflow-wrap: break-word;
}
.hero-panel h1 .zeile-gold { color: var(--gold-hell); display: block; }
.hero-panel .lead { color: #D8D2C6; max-width: 44ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }

.hero-wappen {
  width: 4.4rem; height: auto; margin-bottom: 1.2rem;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.55));
}

/* Effektrahmen fuer das Bild - nach dem Muster des Saunabad-Projekts:
   abgerundet, tiefer Schatten, feine Goldkante, Verlauf nach unten. */
.hero-bild { width: 100%; max-width: 27rem; margin: 0 auto; }
.hero-rahmen {
  position: relative; overflow: hidden;
  border-radius: 1.4rem;
  aspect-ratio: 4 / 5;
  background: var(--h-braun-950);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.65),
              0 0 0 1px rgba(240, 203, 107, 0.28);
}
@media (min-width: 58rem) {
  .hero-rahmen { aspect-ratio: auto; height: min(56vh, 520px); }
}
.hero-rahmen img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 6s ease;
}
.hero-rahmen:hover img { transform: scale(1.07); }
.hero-rahmen::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(18, 16, 14, 0) 52%, rgba(18, 16, 14, 0.62) 100%);
}

/* Pflichtkennzeichnung nach Art. 50 Abs. 4 S. 1 KI-VO: unmittelbar an
   der Abbildung, sichtbar beim Betrachten des Bildes. */
.hero-rahmen .ki-hinweis {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0;
  padding: 0.5rem 0.75rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
}

.hero-fakten {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
  margin-top: 2rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(240, 203, 107, 0.24);
}
.hero-fakt strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.75rem; line-height: 1; color: var(--gold-hell);
}
.hero-fakt span {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #C6BFB2;
}

/* ============================================================
   7) Abschnitte
   ============================================================ */
.sec { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.sec-paper { background: var(--papier); }
.sec-paper-2 { background: var(--papier-2); }
.sec-dark { background: var(--gruen-900); color: var(--text-light); }
.sec-dark h2, .sec-dark h3 { color: var(--gruen-50); }
.sec-dark a:not(.btn) { color: var(--gold); }

.sec-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head.zentriert { margin-inline: auto; text-align: center; }
.sec-head.zentriert .eyebrow { justify-content: center; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.card {
  background: var(--surface); border: 1px solid rgba(12, 42, 18, 0.09);
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 2.4vw, 2rem);
  box-shadow: var(--shadow-1);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.sec-dark .card {
  background: var(--gruen-800); border-color: rgba(217, 166, 46, 0.16);
  color: var(--gruen-100); box-shadow: none;
}
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--ink-soft); }
.sec-dark .card p { color: var(--gruen-100); }

.card-ikone {
  width: 3rem; height: 3rem; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: linear-gradient(135deg, var(--gold-hell), var(--gold));
  margin-bottom: 1rem;
}

/* Bild-Text-Abschnitt */
.split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 58rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.umgekehrt .split-media { order: 2; }
}
.split-media { position: relative; }
.split-media img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
.split-media::before {
  content: ""; position: absolute; inset: auto -1.1rem -1.1rem auto;
  width: 62%; height: 62%; border: 2px solid var(--gold);
  border-radius: var(--radius-lg); z-index: -1;
}

/* Aufzählung mit Häkchen */
.liste { list-style: none; padding: 0; margin: 0; }
.liste li { position: relative; padding-left: 1.9rem; margin-bottom: 0.65rem; }
.liste li::before {
  content: "▸"; position: absolute; left: 0; top: 0;
  color: var(--gold-ink); font-weight: 700;
}
.sec-dark .liste li::before { color: var(--gold); }

/* Kennzahlen */
.zahlen { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.zahl {
  text-align: center; padding: 1.6rem 1rem;
  background: var(--gruen-800); border: 1px solid rgba(217, 166, 46, 0.18);
  border-radius: var(--radius);
}
.zahl strong {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); line-height: 1; color: var(--gold);
}
.zahl span {
  display: block; margin-top: 0.5rem; font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--gruen-100);
}

/* Öffnungszeiten */
.zeiten-karte {
  background: linear-gradient(150deg, var(--gruen-800), var(--gruen-900));
  border: 1px solid rgba(217, 166, 46, 0.24);
  border-radius: var(--radius-lg); padding: 1.6rem 1.8rem; color: var(--gruen-50);
}
.zeiten-karte dl { margin: 0; }
.zeiten-karte dt {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.2rem;
}
.zeiten-karte dd { margin: 0 0 1rem; font-size: 1.1rem; }
.zeiten-karte dd:last-child { margin-bottom: 0; }

/* ============================================================
   8) Meldungen
   ============================================================ */
.meldung { border-left: 3px solid var(--gold); padding-left: 1.4rem; }
.meldung + .meldung { margin-top: 2rem; }
.meldung-datum {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-ink);
}
.sec-dark .meldung-datum { color: var(--gold); }
.meldung h3 { margin: 0.35rem 0 0.7rem; }

/* Redaktioneller Hinweis */
.hinweis-box {
  background: linear-gradient(135deg, rgba(217, 166, 46, 0.16), rgba(217, 166, 46, 0.06));
  border: 1px solid var(--gold); border-left: 5px solid var(--gold-ink);
  border-radius: var(--radius); padding: 1.1rem 1.4rem; margin-bottom: 2rem;
}
.hinweis-box h3 { margin-bottom: 0.3rem; color: var(--titel); }
.hinweis-box p { margin: 0; }

/* ============================================================
   9) Vorstand
   ============================================================ */
.person { text-align: center; }
.person-bild {
  width: 5.5rem; height: 5.5rem; margin: 0 auto 1rem;
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-hell), var(--gold));
  color: var(--gruen-950); font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 800; letter-spacing: 0.02em;
}
.person h3 { margin-bottom: 0.15rem; }
.person-amt {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.8rem;
}
.sec-dark .person-amt { color: var(--gold); }
.person .liste { text-align: left; font-size: 0.92rem; }

/* ============================================================
   10) Kalender
   ============================================================ */
.kalender {
  background: var(--surface); border: 1px solid rgba(12, 42, 18, 0.1);
  border-radius: var(--radius-lg); padding: clamp(1.1rem, 2.4vw, 1.9rem);
  box-shadow: var(--shadow-1);
  --frei: #E9E3D8; --angefragt: #D9A62E; --bestaetigt: #8A1A16; --gesperrt: #6E6660;
}
.kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.kal-titel { font-family: var(--font-display); font-size: 1.7rem; text-transform: uppercase; margin: 0; }
.kal-nav { display: flex; gap: 0.4rem; }
.kal-nav button {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--papier-2); color: var(--titel);
  font-size: 1.2rem; line-height: 1; display: grid; place-items: center;
  transition: background 0.2s var(--ease);
}
.kal-nav button:hover:not(:disabled) { background: var(--gold); }
.kal-nav button:disabled { opacity: 0.4; cursor: default; }

.kal-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; }
.kal-wt {
  text-align: center; padding: 0.4rem 0; font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft);
}
.kal-tag {
  position: relative; aspect-ratio: 1; border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--frei); font-family: var(--font-mono); font-size: 0.9rem;
  border: 1px solid transparent;
}
.kal-tag.ist-fremd { opacity: 0.32; }
.kal-tag.ist-heute { border-color: var(--gruen-800); font-weight: 700; }
.kal-tag.st-angefragt { background: var(--angefragt); color: var(--gruen-950); }
.kal-tag.st-bestaetigt { background: var(--bestaetigt); color: #fff; }
.kal-tag.st-gesperrt { background: var(--gesperrt); color: #fff; }
.kal-tag .punkt {
  position: absolute; bottom: 0.32rem; width: 0.3rem; height: 0.3rem;
  border-radius: 50%; background: currentColor; opacity: 0.75;
}
.kal-tag[title] { cursor: help; }

.kal-legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.3rem; font-size: 0.86rem; }
.kal-legende span { display: inline-flex; align-items: center; gap: 0.45rem; }
.kal-legende i { width: 0.95rem; height: 0.95rem; border-radius: 4px; display: inline-block; }
.kal-termine { margin-top: 1.4rem; border-top: 1px solid rgba(12, 42, 18, 0.1); padding-top: 1.2rem; }
.kal-termine h3 { font-size: 1.2rem; margin-bottom: 0.7rem; }
.kal-termine ul { list-style: none; padding: 0; margin: 0; font-size: 0.92rem; }
.kal-termine li { display: flex; gap: 0.9rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(42,35,30,0.06); }
.kal-termine li:last-child { border-bottom: 0; }
.kal-termine b { font-family: var(--font-mono); color: var(--gold-ink); white-space: nowrap; }
.kal-hinweis { color: var(--ink-soft); font-style: italic; }

/* ============================================================
   11) Galerie und Lightbox
   ============================================================ */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.9rem; list-style: none; padding: 0; margin: 0; }
.galerie li { margin: 0; }
.galerie button {
  display: block; width: 100%; padding: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--papier-2); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  line-height: 0;
}
.galerie button:hover { transform: translateY(-4px) scale(1.015); box-shadow: var(--shadow-2); }
/* height:auto ist hier das Entscheidende: main.js setzt width und height
   aus dem Manifest, und ohne diese Zeile zählt height="1200" als
   Höhenangabe — aspect-ratio bliebe wirkungslos. */
.galerie img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
.galerie-leer { color: var(--ink-soft); font-style: italic; grid-column: 1 / -1; }

.ki-hinweis {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 0.35rem 0.5rem; font-family: var(--font-mono); font-size: 0.66rem;
  text-align: center; color: #fff;
  background: linear-gradient(to top, rgba(4, 56, 12, 0.88), transparent);
}
.bild-ki { position: relative; }

.lightbox {
  position: fixed; inset: 0; z-index: 2500; display: none;
  place-items: center; padding: 1.5rem;
  background: rgba(4, 56, 12, 0.96);
}
.lightbox.is-open { display: grid; }
.lightbox img { max-width: min(96vw, 1200px); max-height: 86vh; border-radius: var(--radius); }
.lightbox button {
  position: absolute; width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.5rem;
  display: grid; place-items: center; backdrop-filter: blur(6px);
}
.lightbox button:hover { background: var(--gold); color: var(--gruen-950); }
.lb-zu { top: 1.2rem; right: 1.2rem; }
.lb-vor { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lb-zur { right: 1.2rem; top: 50%; transform: translateY(-50%); }

/* ============================================================
   12) Kontaktwege und Formularteile

   Das Kontaktformular ist entfallen. Wer schreiben will, schreibt
   direkt — das spart einen Formularversand, eine Einwilligung und
   jede Frage nach SMTP. Die Feldstile bleiben, sie tragen weiterhin
   das Anfrageformular des Kalenders.
   ============================================================ */
.kontaktweg { display: flex; flex-direction: column; gap: 0.5rem; }
.kontaktweg h3 { margin: 0; }
.kontaktweg p { margin: 0; }
.kontaktweg > p:not(.kontakt-wert) { color: var(--ink-soft); font-size: 0.95rem; }
.kontakt-ico {
  width: 3rem; height: 3rem; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 0.4rem;
  background: var(--gruen-900); color: var(--gold-hell);
}
.kontakt-wert {
  font-family: var(--font-mono); font-size: 0.95rem; line-height: 1.5;
  margin-top: 0.4rem !important;
}
.kontakt-wert a { font-weight: 700; }

.kontakt-hinweis {
  margin-top: 2.5rem; padding: 1.8rem 1.9rem;
  background: var(--papier-2); border: 1px solid rgba(12, 42, 18, 0.14);
  border-left: 5px solid var(--gold); border-radius: var(--radius-lg);
}
.kontakt-hinweis h2 { margin-top: 0; }
.kontakt-hinweis p:last-child { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 0; }
@media (max-width: 30rem) {
  .kontakt-hinweis { padding: 1.3rem 1.2rem; }
  .kontakt-hinweis p:last-child .btn { width: 100%; }
}

.formular { display: grid; gap: 1.1rem; max-width: 42rem; }
.feld { display: flex; flex-direction: column; gap: 0.35rem; }
.feld label { font-weight: 600; font-size: 0.92rem; }
.feld input, .feld textarea {
  padding: 0.85rem 1rem; border: 1px solid rgba(12, 42, 18, 0.55);
  border-radius: 11px; background: #fff; color: var(--ink); width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.feld input:focus, .feld textarea:focus {
  border-color: var(--titel); box-shadow: 0 0 0 4px rgba(217, 166, 46, 0.45); outline: none;
}
.feld textarea { min-height: 9.5rem; resize: vertical; }
.feld-fehler { font-size: 0.85rem; color: var(--rot); font-weight: 600; min-height: 1.2em; }
.feld-hinweis { font-size: 0.84rem; color: var(--ink-soft); }
.status { padding: 0.85rem 1.1rem; border-radius: 11px; border: 1px solid rgba(42,35,30,0.14); background: #fff; }
.status:empty { display: none; }
.status.ok { border-color: var(--laub); background: #EDF5EE; }
.status.err { border-color: var(--rot); background: #F9ECEB; }

/* ============================================================
   13) Karte mit Einwilligung
   ============================================================ */
.schranke {
  display: grid; place-items: center; text-align: center;
  min-height: 20rem; padding: 2.5rem 1.5rem;
  background: var(--papier-2); border: 2px dashed rgba(12, 42, 18, 0.22);
  border-radius: var(--radius-lg);
}
.schranke p { color: var(--ink-soft); max-width: 44ch; margin: 0 auto 1.3rem; }
.rahmen-halter iframe,
#karte-halter iframe {
  display: block; width: 100%; min-height: 26rem; border: 0;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}
#karte-halter { width: 100%; }
#karte-halter .schranke { width: 100%; }
.rahmen-fuss { margin-top: 0.7rem; font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.knopf-schlicht { text-decoration: underline; text-underline-offset: 0.18em; padding: 0; }

/* ============================================================
   14) Rechtstexte
   ============================================================ */
.recht { border-bottom: 1px solid rgba(12, 42, 18, 0.13); }
.recht > summary {
  cursor: pointer; list-style: none; padding: 1.2rem 0.2rem;
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.recht > summary::-webkit-details-marker { display: none; }
.recht > summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.5rem; color: var(--gold-ink); }
.recht[open] > summary::after { content: "–"; }
.recht-inhalt { padding: 0 0.2rem 2rem; max-width: 70ch; }
.recht-inhalt h3 { margin-top: 1.7rem; font-size: 1.25rem; }
.recht-inhalt h4 { margin-top: 1.2rem; margin-bottom: 0.25rem; font-family: var(--font-body); font-size: 1rem; font-weight: 700; }
.recht-inhalt p, .recht-inhalt li { font-size: 0.95rem; }

/* ============================================================
   15) Fußzeile
   ============================================================ */
.site-footer { background: var(--gruen-950); color: var(--gruen-100); padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.footer-logo { height: 84px; width: auto; margin-bottom: 1rem; }
.site-footer h4 {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.site-footer a:hover { color: var(--gold); }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.3rem; border-top: 1px solid rgba(217, 166, 46, 0.18);
  display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem; justify-content: space-between;
  font-size: 0.84rem;
}
.footer-credit { display: inline-flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.footer-cookie-link { text-decoration: underline; text-underline-offset: 0.18em; font-size: 0.84rem; }
.admin-gear { opacity: 0.5; font-size: 1rem; }
.admin-gear:hover { opacity: 1; }

/* ============================================================
   16) Scroll-Reveal

   Wichtig: Das Ausblenden greift NUR, wenn JavaScript läuft
   (main.js setzt <html class="js">). Ohne Skript stünden die
   Abschnitte sonst dauerhaft auf opacity:0 — die halbe Seite
   wäre unsichtbar.
   ============================================================ */
.js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ============================================================
   17) Kontakt-Bodenleiste
   ============================================================ */
.contact-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
  display: none; grid-template-columns: repeat(3, 1fr);
  background: rgba(4, 56, 12, 0.97); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(217, 166, 46, 0.24); height: var(--dock-h);
}
.contact-dock a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.1rem; color: var(--gruen-100); font-size: 0.66rem; letter-spacing: 0.04em;
}
.contact-dock a:hover { color: var(--gold); }
.contact-dock .ico { font-size: 1.1rem; }
@media (max-width: 46rem) {
  .contact-dock { display: grid; }
  body.has-dock { padding-bottom: var(--dock-h); }
  .a11y-fab, .cookie-fab { bottom: calc(var(--dock-h) + 0.9rem) !important; }
}

/* ============================================================
   18) Barrierefreiheits-Werkzeug
   ============================================================ */
.a11y-fab, .cookie-fab {
  position: fixed; right: 1.1rem; z-index: 1500;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.3rem;
  background: linear-gradient(135deg, var(--gold-hell), var(--gold));
  color: var(--gruen-950); box-shadow: var(--shadow-gold);
  transition: transform 0.25s var(--ease);
}
.a11y-fab { bottom: 1.1rem; }
.cookie-fab { bottom: 5.1rem; background: linear-gradient(135deg, var(--gruen-700), var(--gruen-800)); color: var(--gold-hell); }
.a11y-fab:hover, .cookie-fab:hover { transform: scale(1.09); }

.a11y-panel {
  position: fixed; right: 1.1rem; bottom: 5.1rem; z-index: 1600;
  width: min(20rem, calc(100vw - 2.2rem));
  background: #fff; border: 1px solid rgba(12, 42, 18, 0.14);
  border-radius: var(--radius-lg); padding: 1.3rem; box-shadow: var(--shadow-2);
  display: none;
}
.a11y-panel.is-open { display: block; }
.a11y-panel h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid rgba(42,35,30,0.08); font-size: 0.9rem; }
.a11y-row:first-of-type { border-top: 0; }
.a11y-seg { display: flex; gap: 0.25rem; }
.a11y-seg button, .a11y-toggle {
  padding: 0.35rem 0.75rem; border-radius: var(--radius-pill);
  background: var(--papier-2); font-size: 0.82rem; font-weight: 600;
}
.a11y-seg button.is-active, .a11y-toggle.is-active { background: var(--gold); color: var(--gruen-950); }

/* Wirkung der Einstellungen.

   Die Merkmale sitzen am <html>, nicht am <body>: Fast alle Groessen im
   Stylesheet stehen in rem, und rem haengt am Wurzelelement. Am <body>
   gesetzt liess die Schriftgroesse nur den nackten Fliesstext wachsen,
   waehrend Ueberschriften, Knoepfe und Karten unveraendert blieben.

   Jeder Schalter tut genau eine Sache. Frueher unterstrich der hohe
   Kontrast die Links gleich mit - dann sah der eigene Schalter dafuer
   aus, als waere er kaputt. */
html.a11y-large  { font-size: 114%; }
html.a11y-xlarge { font-size: 130%; }

/* Anmerkung: Die Stufen der Schriftskala mischen rem und vw. Der
   vw-Anteil haengt an der Fensterbreite und waechst hier nicht mit -
   grosse Ueberschriften legen auf breiten Bildschirmen deshalb weniger
   zu als der Fliesstext. Ein Festschreiben der Stufen wurde geprueft und
   wieder verworfen: Es liess den Fliesstext am Handy bei einer Stufe um
   ein Drittel springen. Gleichmaessiges Wachsen ist wichtiger als der
   letzte Prozentpunkt bei Ueberschriften, die ohnehin schon gross sind. */

html.a11y-underline a { text-decoration: underline; text-underline-offset: 0.16em; }

/* :focus, nicht nur :focus-visible. Wer diesen Schalter umlegt, will den
   Rahmen sehen - auch nach einem Klick mit der Maus. :focus-visible zeigt
   ihn nur beim Tabben, und dann sieht es aus, als passiere nichts. */
html.a11y-focus :focus,
html.a11y-focus :focus-visible {
  outline: 4px solid var(--rot) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 7px #fff, 0 0 0 10px var(--rot) !important;
  border-radius: 4px;
}

html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
html.reduce-motion { scroll-behavior: auto; }
html.reduce-motion [data-reveal] { opacity: 1 !important; transform: none !important; }

html.a11y-contrast {
  --papier: #fff; --papier-2: #fff; --surface: #fff;
  --ink: #000; --ink-soft: #1c1c1c; --gold-ink: #6b4d00;
  --gruen-900: #000; --gruen-950: #000; --gruen-800: #111; --gruen-100: #fff; --titel: #000;
}
html.a11y-contrast body { background: #fff; color: #000; }
html.a11y-contrast .hero-media { display: none; }
html.a11y-contrast .card,
html.a11y-contrast .kontakt-hinweis { border-color: #000; }

/* ============================================================
   19) Cookie-Werkzeug
   ============================================================ */
.consent-overlay {
  position: fixed; inset: 0; z-index: 2000; display: none;
  background: rgba(4, 40, 10, 0.84); backdrop-filter: blur(6px);
  /* Kein place-items:center: Ist der Kasten hoeher als der Bildschirm,
     schiebt ein zentriertes Raster ihn oben aus dem Bild - und dorthin
     laesst sich nicht zurueckscrollen. Stattdessen scrollt das Fenster. */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 1rem;
}
.consent-overlay.is-open { display: block; }
.consent-card {
  background: var(--papier); border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 4vw, 2.6rem);
  width: min(38rem, 100%); margin: auto;
  box-shadow: var(--shadow-2); border-top: 5px solid var(--gold);
}
@media (min-height: 42rem) {
  /* Genug Platz: mittig, aber weiterhin scrollbar. */
  .consent-overlay.is-open { display: flex; align-items: center; justify-content: center; }
}
.consent-card h2 { font-size: var(--step-2); margin-bottom: 0.7rem; }
.consent-liste { list-style: none; padding: 0; margin: 1.3rem 0; display: grid; gap: 0.75rem; }
.consent-liste li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.92rem; }
.consent-liste .ck {
  flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--laub); color: #fff; display: grid; place-items: center; font-size: 0.8rem;
}
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-top: 1.4rem; }
.consent-link { text-decoration: underline; text-underline-offset: 0.18em; font-size: 0.9rem; color: var(--gold-ink); }

/* ============================================================
   20) Hinweisleiste
   ============================================================ */
.notice-bar {
  position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 1400;
  width: min(24rem, calc(100vw - 2.2rem));
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid rgba(12, 42, 18, 0.14); border-top: 5px solid var(--rot);
  box-shadow: var(--shadow-2); padding: 1.2rem 1.3rem;
  transform: translateY(130%); transition: transform 0.6s var(--ease);
}
.notice-bar.is-visible { transform: none; }
.notice-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
.notice-top strong { font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; }
.close-x { font-size: 1.4rem; line-height: 1; width: 2rem; height: 2rem; border-radius: 50%; }
.close-x:hover { background: var(--papier-2); }
.notice-bar ul { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; }
.notice-bar li { margin-bottom: 0.3rem; }
.notice-aktuell {
  background: rgba(217, 166, 46, 0.16); border-radius: 10px;
  padding: 0.7rem 0.9rem; margin-bottom: 0.7rem; font-size: 0.9rem;
}
.notice-aktuell strong { display: block; margin-bottom: 0.15rem; }
@media (max-width: 46rem) { .notice-bar { bottom: calc(var(--dock-h) + 0.9rem); } }

/* ============================================================
   21) Fehlendes Bild
   ============================================================ */
.img-missing {
  display: grid; place-items: center; background: var(--papier-2);
  border: 2px dashed rgba(12, 42, 18, 0.24); border-radius: var(--radius);
  color: var(--ink-soft); font-size: 0.8rem; padding: 1rem; text-align: center;
}

/* ============================================================
   22) Bewegung abschalten
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   23) Druck
   ============================================================ */
@media print {
  .site-header, .topbar, .contact-dock, .a11y-fab, .a11y-panel,
  .cookie-fab, .consent-overlay, .notice-bar, .hero-cta, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .sec-dark, .hero { background: #fff !important; color: #000 !important; }
  .recht-inhalt { display: block !important; }
}

/* ============================================================
   24) Kopfbereich der Unterseiten
   ============================================================ */
.seitenkopf {
  background: var(--gruen-900); color: var(--text-light);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 3px solid var(--gold);
}
.seitenkopf h1 { color: #fff; margin-bottom: .6rem; font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem); }
.seitenkopf .eyebrow { color: var(--gold-hell); }
.seitenkopf .lead { color: var(--gruen-100); max-width: 58ch; }

/* ============================================================
   25) Dokumentenliste
   ============================================================ */
.dok-liste { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.dok-liste li { margin-bottom: .7rem; }
.dok-liste a, .dok-fehlt {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem; background: var(--surface);
  border: 1px solid rgba(12, 42, 18, 0.12); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.dok-liste a:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--gold); }
.dok-symbol {
  flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--rot); color: #fff;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .05em;
}
.dok-text { flex: 1 1 auto; min-width: 0; }
.dok-text strong { display: block; font-size: 1.02rem; }
.dok-text span { color: var(--ink-soft); font-size: .9rem; }
.dok-groesse { flex: 0 0 auto; color: var(--ink-soft); font-size: .85rem; white-space: nowrap; }
.dok-fehlt { opacity: .55; }
.dok-fehlt .dok-symbol { background: var(--ink-soft); }

/* ============================================================
   26) Terminliste unter dem Kalender
   ============================================================ */
.monatsliste {
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 2px solid var(--gold);
}
.monatsliste h3 { font-size: 1.3rem; margin-bottom: .8rem; }
.monatsliste ul { list-style: none; padding: 0; margin: 0; }
.monatsliste li {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid rgba(12, 42, 18, .09);
}
.monatsliste li:last-child { border-bottom: 0; }
.monatsliste b {
  font-family: var(--font-mono); color: var(--gold-ink);
  white-space: nowrap; min-width: 4.2rem;
}
.monatsliste span { flex: 1 1 14rem; }
.monatsliste em {
  font-style: normal; font-family: var(--font-mono); font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--papier-2); padding: .12rem .55rem; border-radius: 999px;
}
.monatsliste .leer { color: var(--ink-soft); font-style: italic; }