/* ==========================================================================
   DAS GEWAND
   1. Hochstädter Angelverein „Großschlag“ von 1977 e. V.

   Diese Datei lädt als letzte, nach tailwind.css und site.css, und legt der
   Seite ein neues Kleid an: Waldgrün und Gold, Fraunces als Auszeichnung,
   weiche Ecken, eine große Bildbühne. Das Konzept stammt aus dem Entwurf
   „AIG Maintal Gewässerportal" vom 17.09.2026; die Inhalte, Bausteine und
   Skripte darunter bleiben unverändert.

   Warum eine eigene Datei statt Änderungen in site.css: Sie lässt sich
   mit einer Zeile im <head> wieder abnehmen, und man sieht auf einen
   Blick, was zum Gewand gehört und was zur Substanz.

   Inhalt
     1. Farben und Kurven (überschreibt die Tokens aus site.css)
     2. Tailwind-Farbklassen umlegen (die stehen fest im gebauten CSS)
     3. Schrift
     4. Kopfzeile und Menü
     5. Bühne (Startseite)
     6. Bausteine der Startseite
     7. Gewässerstatus
     8. Bestehende Bausteine im neuen Kleid
     9. Unterseiten
    10. Fußzeile
    11. Breiten und reduzierte Bewegung
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FARBEN UND KURVEN
   -------------------------------------------------------------------------- */
:root {
  --wald: #153e2e;
  --wald-tief: #08291f;
  --wald-nacht: #061f18;
  --wald-akzent: #2e6a51;
  --moos: #506d47;
  --leinen: #f3f0e7;
  --creme: #fbfaf6;
  --salbei: #e5e8dc;
  --salbei-tief: #d7dbcf;
  --rot: #b83b2f;

  --canvas: var(--leinen);
  --panel: var(--creme);
  --panel-alt: #e9e6de;
  --ink: #1b251f;
  --ink-2: #4d5a52;
  --line: #d7dbcf;
  --line-stark: #b3bdae;

  --dunkel: var(--wald);
  --dunkel-tief: var(--wald-tief);
  --stahl: #7f8f86;
  --stahl-hell: #b7c4ba;

  --gold: #f1c34c;
  --gold-tief: #d9a726;
  --signal: var(--wald-akzent);
  --signal-hover: var(--wald);

  --auf-dunkel: rgba(255, 255, 255, .8);
  --auf-dunkel-leise: rgba(255, 255, 255, .58);

  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-weich: cubic-bezier(.23, 1, .32, 1);
  --radius: 1.1rem;
  --radius-klein: .75rem;

  --schatten-karte: 0 10px 30px rgba(21, 62, 46, .055);
  --schatten-hoch: 0 25px 60px rgba(8, 41, 31, .18);
}

::selection { color: var(--wald-tief); background: var(--gold); }

/* --------------------------------------------------------------------------
   2. TAILWIND-FARBKLASSEN UMLEGEN
   Die Utilities tragen feste Hexwerte aus dem alten Wappenschema. Hier
   bekommen sie die neuen Werte; die Klassennamen im HTML bleiben.
   -------------------------------------------------------------------------- */
.bg-canvas { background-color: var(--leinen); }
.bg-canvas\/95 { background-color: rgba(251, 250, 246, .94); }
.bg-panel { background-color: var(--creme); }
.bg-panelalt { background-color: var(--salbei); }
.bg-dunkel { background-color: var(--wald); }
.bg-dunkeltief { background-color: var(--wald-tief); }
.bg-signal { background-color: var(--wald-akzent); }
.border-linie, .border-dunkel { border-color: var(--line); }
.border-ink { border-color: var(--wald); }
.border-signal, .border-l-signal { border-color: var(--wald-akzent); }
.border-l-signal { border-left-color: var(--wald-akzent); }
.md\:border-l-signal { border-left-color: var(--wald-akzent); }
.border-l-gold { border-left-color: var(--gold); }
.border-white\/15 { border-color: rgba(255, 255, 255, .12); }
.text-ink { color: var(--ink); }
.text-ink2 { color: var(--ink-2); }
.text-dunkel { color: var(--wald); }
.text-signal { color: var(--wald-akzent); }
.text-gold, .text-\[\#f2b325\] { color: var(--gold); }
.text-\[\#c9c3ba\] { color: rgba(255, 255, 255, .6); }
.text-\[\#ded9d1\] { color: rgba(255, 255, 255, .78); }
.hover\:text-signal:hover { color: var(--wald); }
.hover\:text-dunkel:hover { color: var(--wald); }
.focus\:border-signal:focus { border-color: var(--wald-akzent); }
.decoration-gold, .decoration-\[\#f2b325\] { text-decoration-color: var(--gold); }
.decoration-signal, .hover\:decoration-signal:hover { text-decoration-color: var(--wald-akzent); }
.divide-linie > :not([hidden]) ~ :not([hidden]) { border-color: var(--line); }
.signalzahl { color: var(--gold); }

/* Der alte Hintergrundhauch in Graphit und Gold wird grün. */
.umgebung {
  background:
    radial-gradient(ellipse 90% 60% at 12% 0%, rgba(21, 62, 46, .07), transparent 60%),
    radial-gradient(ellipse 80% 50% at 88% 100%, rgba(241, 195, 76, .08), transparent 62%);
}

/* --------------------------------------------------------------------------
   3. SCHRIFT
   Fraunces für alles, was groß steht. Sie hat eine optische Größenachse:
   in Überschriften wird sie schlanker und schärfer, klein bleibt sie weich.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, .font-display, .regelliste h3, .fangansicht-zu {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.04;
}
h3, .font-display.text-lg, .font-display.text-xl { letter-spacing: -.02em; }
.font-display.text-3xl, .font-display.text-4xl, .font-display.text-5xl, .font-display.text-6xl {
  font-weight: 560;
  letter-spacing: -.04em;
  line-height: .98;
}
.font-display em, .display-title em { color: var(--gold); font-style: normal; font-weight: 550; }

/* Die kleinen Rubrikzeilen über den Überschriften: kein Monospace mehr,
   sondern schwere, breit laufende Versalien mit einer Welle davor. */
.font-mono.uppercase {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .15em;
}
.font-mono.tracking-\[0\.2em\] { letter-spacing: .15em; }
.font-mono.tracking-\[0\.2em\]::before,
.rubrik::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: .55rem;
  vertical-align: -3px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e6a51' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1'/%3E%3Cpath d='M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1'/%3E%3Cpath d='M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1'/%3E%3C/svg%3E");
}
.auf-dunkel .font-mono.tracking-\[0\.2em\]::before,
.rubrik--hell::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1c34c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1'/%3E%3Cpath d='M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1'/%3E%3Cpath d='M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1'/%3E%3C/svg%3E");
}
.rubrik {
  display: inline-flex;
  align-items: center;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--wald-akzent);
}
.rubrik--hell { color: var(--gold); }

.display-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.5rem, 4.8vw, 4.6rem);
  font-weight: 560;
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--ink);
  text-wrap: balance;
}
.display-title--hell { color: #fff; }
.lead { color: rgba(27, 37, 31, .78); font-size: 1.15rem; line-height: 1.75; }
.body-copy { color: var(--ink-2); line-height: 1.75; }

/* --------------------------------------------------------------------------
   4. KOPFZEILE UND MENÜ
   -------------------------------------------------------------------------- */
header[data-kopf] {
  background: rgba(251, 250, 246, .94);
  border-bottom: 1px solid rgba(21, 62, 46, .1);
  box-shadow: 0 8px 30px rgba(8, 41, 31, .04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
header[data-kopf].kompakt { box-shadow: 0 10px 34px rgba(8, 41, 31, .09); }
header[data-kopf] .wortmarke-name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--wald);
}
header[data-kopf] .wortmarke-zeile {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 850;
  letter-spacing: .14em;
  color: rgba(21, 62, 46, .65);
}
header[data-kopf] .wappen img { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .12)); }

nav[aria-label="Hauptnavigation"] .nav-link {
  position: relative;
  color: rgba(27, 37, 31, .66);
  font-size: .91rem;
  font-weight: 750;
  padding: .5rem .7rem;
  transition: color .18s var(--ease);
}
nav[aria-label="Hauptnavigation"] .nav-link::after {
  content: "";
  position: absolute;
  left: .7rem;
  right: 100%;
  bottom: .05rem;
  height: 2px;
  background: var(--wald-akzent);
  transition: right .18s var(--ease);
}
nav[aria-label="Hauptnavigation"] .nav-link:hover,
nav[aria-label="Hauptnavigation"] .nav-link[aria-current="page"] { color: var(--wald); }
nav[aria-label="Hauptnavigation"] .nav-link:hover::after,
nav[aria-label="Hauptnavigation"] .nav-link[aria-current="page"]::after { right: .7rem; }
nav[aria-label="Hauptnavigation"] .nav-link[aria-current="page"] { border: 0; }

/* Der Kontaktknopf als Pille, wie im Entwurf. */
nav[aria-label="Hauptnavigation"] .kopf-kontakt {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  margin-left: .5rem;
  padding: 0 1rem;
  border: 1px solid rgba(21, 62, 46, .18);
  border-radius: 999px;
  background: #fff;
  color: var(--wald);
  font-weight: 800;
  transition: background .18s var(--ease), color .18s var(--ease), transform .15s var(--ease);
}
nav[aria-label="Hauptnavigation"] .kopf-kontakt::after { display: none; }
nav[aria-label="Hauptnavigation"] .kopf-kontakt:hover { background: var(--wald); color: #fff; }
nav[aria-label="Hauptnavigation"] .kopf-kontakt svg { width: 16px; height: 16px; }

[data-burger] {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wald);
  display: inline-grid;
  place-items: center;
  transition: background .18s var(--ease), transform .14s var(--ease);
}
[data-burger]:hover { background: var(--salbei); }
[data-burger]:active { transform: scale(.96); }
[data-burger] svg { width: 24px; height: 24px; }
[data-burger] .zu { display: none; }
[data-burger][aria-expanded="true"] .auf { display: none; }
[data-burger][aria-expanded="true"] .zu { display: block; }

[data-mobilmenue] { background: var(--creme); border-top: 1px solid rgba(21, 62, 46, .09); }
[data-mobilmenue] .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 .65rem;
  border-bottom: 1px solid rgba(21, 62, 46, .07);
  color: var(--wald);
  font-weight: 750;
  font-size: 1.05rem;
}
[data-mobilmenue] .nav-link::after {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23153e2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
[data-mobilmenue] .menue-gruppe { color: var(--wald-akzent); }
[data-mobilmenue] .text-ink2.nav-link { color: var(--ink-2); font-weight: 650; }

/* --------------------------------------------------------------------------
   5. BÜHNE (STARTSEITE)
   Ein Foto, ein grüner Schleier von links, ein Hauch Korn, darüber die
   Überschrift in Fraunces. Der alte Auftakt ohne Bild ist damit Geschichte.
   -------------------------------------------------------------------------- */
.buehne {
  position: relative;
  overflow: hidden;
  background: var(--wald-tief);
  color: #fff;
}
.buehne__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.buehne__schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 27, 21, .96) 0%, rgba(5, 27, 21, .83) 38%, rgba(5, 27, 21, .23) 72%, rgba(5, 27, 21, .13) 100%),
    linear-gradient(0deg, rgba(5, 27, 21, .55), transparent 50%);
}
.buehne__korn {
  position: absolute;
  inset: 0;
  opacity: .1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}
.buehne__inhalt {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  min-height: 680px;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.buehne__text { max-width: 710px; padding-bottom: 1rem; }
.buehne__text h1 {
  margin-top: 1.6rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(3.6rem, 8vw, 7.8rem);
  font-weight: 560;
  line-height: .84;
  letter-spacing: -.055em;
  color: #fff;
  text-wrap: balance;
}
.buehne__text h1 em { color: var(--gold); font-style: normal; font-weight: 550; }
.buehne__text > p {
  margin-top: 2rem;
  max-width: 620px;
  color: rgba(255, 255, 255, .8);
  font-size: clamp(1.06rem, 1.5vw, 1.25rem);
  line-height: 1.7;
}
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }

/* Die Wappenkarte unten rechts. */
.buehne__wappen {
  position: absolute;
  right: 2rem;
  bottom: 4.5rem;
  z-index: 10;
  display: flex;
  width: 326px;
  align-items: center;
  gap: 1rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  background: rgba(6, 34, 26, .8);
  padding: 1rem 1.1rem;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .28);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.buehne__wappen img { width: 86px; height: 86px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .24)); }
.buehne__wappen small { display: block; color: rgba(255, 255, 255, .5); font-size: .62rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.buehne__wappen strong { display: block; margin-top: .35rem; font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; font-weight: 600; line-height: 1.12; }
.buehne__scroll {
  position: absolute;
  right: 2rem;
  bottom: 1rem;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255, 255, 255, .48);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.buehne__scroll span { display: block; width: 34px; height: 1px; background: rgba(255, 255, 255, .45); }

/* Knöpfe des neuen Gewands. Die alten .btn-Klassen bekommen unten in 8.
   dieselbe Form, damit Unterseiten und Startseite zusammenpassen. */
.knopf {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border-radius: var(--radius-klein);
  padding: 0 1.15rem;
  font-size: .91rem;
  font-weight: 850;
  transition: transform .15s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.knopf:active { transform: scale(.97); }
.knopf svg { width: 17px; height: 17px; }
.knopf--gold { background: var(--gold); color: #1c2a21; box-shadow: 0 10px 30px rgba(241, 195, 76, .18); }
.knopf--gold:hover { background: #ffcf55; }
.knopf--glas { border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .06); color: #fff; backdrop-filter: blur(8px); }
.knopf--glas:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .48); }
.knopf--wald { background: var(--wald); color: #fff; }
.knopf--wald:hover { background: var(--gold); color: var(--wald-tief); }
.knopf--linie { border: 1px solid rgba(21, 62, 46, .22); background: #fff; color: var(--wald); }
.knopf--linie:hover { background: var(--wald); color: #fff; }

/* Die drei Grenzen als Leiste unter der Bühne. */
.grenzen { border-bottom: 1px solid rgba(21, 62, 46, .1); background: var(--creme); }
.grenzen__zelle { display: flex; min-height: 112px; align-items: center; gap: 1rem; padding: 1.2rem 0; }
.grenzen__zelle + .grenzen__zelle { border-top: 1px solid rgba(21, 62, 46, .09); }
.grenzen__zahl {
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--wald);
  min-width: 3.2rem;
}
.grenzen__zahl--gold { color: var(--gold-tief); }
.grenzen__zelle strong { display: block; font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--wald); font-size: 1.12rem; }
.grenzen__zelle small { display: block; margin-top: .18rem; color: rgba(27, 37, 31, .55); font-size: .78rem; }

/* --------------------------------------------------------------------------
   6. BAUSTEINE DER STARTSEITE
   -------------------------------------------------------------------------- */
.abschnitt { padding: 6rem 0; }
.abschnitt--eng { padding: 4.5rem 0; }

/* Geschichte: Bild links mit Jahreszahl, Text rechts. */
.geschichte-bild { position: relative; min-height: 560px; }
.geschichte-bild::before {
  content: "";
  position: absolute;
  top: -25px;
  left: -25px;
  width: 175px;
  height: 175px;
  border: 1px solid rgba(21, 62, 46, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(21, 62, 46, .025);
}
.geschichte-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.4rem;
  object-fit: cover;
  box-shadow: 0 25px 60px rgba(16, 52, 39, .14);
}
.geschichte-bild__marke {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 999px;
  background: rgba(251, 250, 246, .92);
  padding: .55rem .8rem;
  color: var(--wald);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(9px);
}
.geschichte-bild__marke svg { width: 15px; height: 15px; }
.geschichte-bild__jahr {
  position: absolute;
  right: -1rem;
  bottom: 1.2rem;
  font-family: "Fraunces", Georgia, serif;
  color: var(--gold);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 700;
  line-height: .8;
  text-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}
.zitat {
  position: relative;
  border-left: 3px solid var(--gold);
  background: #e8ebdf;
  padding: 1.2rem 1.3rem 1.2rem 3.2rem;
  color: var(--wald);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}
.zitat svg { position: absolute; top: 1.25rem; left: 1rem; width: 19px; height: 19px; }
.zitat p { font-family: "Fraunces", Georgia, serif; font-size: 1.08rem; font-style: italic; line-height: 1.55; margin: 0; }

/* Dunkler Abschnitt mit drei Karten (Drei Dinge). */
.dunkelfeld { position: relative; overflow: hidden; background: #0b3126; color: #fff; }
.dunkelfeld::after {
  content: "";
  position: absolute;
  right: -150px;
  top: -240px;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 43% 57% 52% 48%;
  box-shadow: 0 0 0 52px rgba(255, 255, 255, .018), 0 0 0 104px rgba(255, 255, 255, .014);
  transform: rotate(22deg);
  pointer-events: none;
}
.kopfzeile { position: relative; z-index: 1; display: grid; gap: 2rem; }
.kopfzeile > p { max-width: 39rem; align-self: end; color: rgba(255, 255, 255, .62); font-size: 1.02rem; line-height: 1.75; }
.kopfzeile--hell > p { color: var(--ink-2); }
.dreier { position: relative; z-index: 1; display: grid; gap: 1rem; }
.dreier__karte {
  min-height: 320px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .055);
  padding: 1.45rem;
  color: #fff;
  backdrop-filter: blur(6px);
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.dreier__karte:hover { transform: translateY(-5px); border-color: rgba(241, 195, 76, .4); background: rgba(255, 255, 255, .08); }
.dreier__kopf { display: flex; align-items: center; justify-content: space-between; }
.dreier__kopf span { font-family: "Fraunces", Georgia, serif; color: rgba(255, 255, 255, .13); font-size: 3.5rem; font-weight: 700; line-height: 1; }
.dreier__kopf svg { width: 24px; height: 24px; color: var(--gold); }
.dreier__karte > small { display: block; margin-top: 2.6rem; color: var(--gold); font-size: .66rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.dreier__karte h3 { margin-top: .7rem; font-size: clamp(1.25rem, 2.3vw, 1.7rem); color: #fff; overflow-wrap: anywhere; hyphens: auto; }
.dreier__karte p { margin-top: 1rem; color: rgba(255, 255, 255, .62); line-height: 1.7; }

/* Bildgeschichte: Foto links, Text auf Creme rechts. */
.bildgeschichte { background: #e2e6da; padding: 2.5rem 0; }
.bildgeschichte__raster { display: grid; overflow: hidden; border-radius: var(--radius); }
.bildgeschichte__bild { position: relative; min-height: 460px; }
.bildgeschichte__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.bildgeschichte__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 41, 31, .42), transparent 55%); }
.bildgeschichte__bild > span {
  position: absolute;
  z-index: 2;
  bottom: 1.4rem;
  left: 1.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .91);
  padding: .5rem .8rem;
  color: var(--wald);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bildgeschichte__text { display: flex; flex-direction: column; justify-content: center; background: var(--creme); padding: clamp(2rem, 5vw, 4.5rem); }
.hakenliste { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.hakenliste li { display: flex; align-items: center; gap: .8rem; color: var(--wald); font-weight: 750; }
.hakenliste li > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--salbei); color: var(--wald-akzent); }
.hakenliste svg { width: 15px; height: 15px; }

/* Gewässerwelt: dunkelgrün mit feinem Raster, links das eigene Gewässer
   groß, rechts die Liste der anderen sieben mit Status. */
.gewaesserwelt { position: relative; overflow: hidden; background: var(--wald); color: #fff; }
.gewaesserwelt::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .08;
  background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: rotate(-7deg) scale(1.16);
  pointer-events: none;
}
.gewaesserwelt__raster { position: relative; z-index: 1; display: grid; gap: 1rem; }
.hauptgewaesser {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 520px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(69, 117, 93, .62), rgba(7, 42, 31, .92));
  padding: 1.5rem;
  color: #fff;
}
.hauptgewaesser::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -105px;
  width: 380px;
  height: 380px;
  border: 52px solid rgba(255, 255, 255, .04);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(255, 255, 255, .025);
  pointer-events: none;
}
.hauptgewaesser__kopf { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; }
.hauptgewaesser__nummer { font-family: "Fraunces", Georgia, serif; color: rgba(255, 255, 255, .16); font-size: 5rem; font-weight: 700; line-height: 1; }
.hauptgewaesser__kopf svg { width: 24px; height: 24px; color: var(--gold); }
.hauptgewaesser__text { position: relative; z-index: 2; }
.hauptgewaesser__text small { color: var(--gold); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.hauptgewaesser__text h3 { margin-top: .8rem; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 600; line-height: 1; color: #fff; }
.hauptgewaesser__text p { margin-top: 1.2rem; max-width: 570px; color: rgba(255, 255, 255, .66); line-height: 1.65; }
.hauptgewaesser__daten { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1rem; color: rgba(255, 255, 255, .8); font-size: .9rem; }
.hauptgewaesser__daten b { color: #fff; font-weight: 700; }
.hauptgewaesser__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .5rem;
  margin-top: 1.2rem;
  color: var(--gold);
  font-weight: 850;
  transition: gap .17s var(--ease);
}
.hauptgewaesser__link:hover { gap: .8rem; }
.hauptgewaesser__link svg { width: 17px; height: 17px; }

.gewaesserliste-neu {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius);
  background: rgba(4, 30, 22, .5);
  backdrop-filter: blur(7px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gewaesserzeile {
  display: grid;
  min-height: 74px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  padding: .75rem 1rem;
  color: #fff;
  transition: background .18s var(--ease);
}
.gewaesserzeile:hover { background: rgba(255, 255, 255, .05); }
.gewaesserliste-neu li:last-child .gewaesserzeile { border-bottom: 0; }
.gewaesserzeile > span:first-child { font-family: "Fraunces", Georgia, serif; color: rgba(255, 255, 255, .22); font-size: 1.15rem; font-weight: 700; }
.gewaesserzeile div { display: grid; }
.gewaesserzeile strong { color: #fff; font-size: .92rem; font-weight: 700; }
.gewaesserzeile small { margin-top: .16rem; color: rgba(255, 255, 255, .42); font-size: .7rem; }
.aig-hinweis {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-top: 2rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  background: rgba(255, 255, 255, .06);
  padding: 1rem 1.15rem;
  color: rgba(255, 255, 255, .66);
  font-size: .9rem;
  line-height: 1.6;
}
.aig-hinweis svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--gold); }
.aig-hinweis strong { color: #fff; }

/* Vereinsleben: drei Karten unterschiedlicher Größe. */
.leben { display: grid; gap: 1rem; }
.leben__karte {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding-right: 4.6rem;
  border: 1px solid rgba(21, 62, 46, .11);
  border-radius: var(--radius);
  background: var(--creme);
  padding: 1.4rem;
  box-shadow: var(--schatten-karte);
}
.leben__symbol { position: absolute; top: 1.2rem; right: 1.2rem; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: var(--salbei); color: var(--wald-akzent); }
.leben__symbol svg { width: 22px; height: 22px; }
.leben__karte small { display: block; margin-top: .2rem; color: var(--wald-akzent); font-size: .67rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.leben__karte h3 { margin-top: .55rem; color: var(--wald); font-size: clamp(1.25rem, 2.2vw, 1.6rem); overflow-wrap: anywhere; hyphens: auto; }
.leben__karte p { margin-top: .85rem; color: var(--ink-2); line-height: 1.65; }
.leben__karte--gross { background: #e7eadf; }
.leben__karte--gold { background: var(--gold); }
.leben__karte--gold .leben__symbol { background: rgba(21, 62, 46, .12); color: var(--wald); }
.leben__karte--gold small, .leben__karte--gold h3, .leben__karte--gold p { color: #293325; }

.zeitband { display: grid; gap: 1rem; margin-top: 3rem; border-top: 1px solid rgba(21, 62, 46, .12); padding-top: 2.5rem; }
.zeitband > div:not(.zeitband__linie) span { color: var(--wald-akzent); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.zeitband strong { display: block; margin-top: .4rem; font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--wald); font-size: 1.3rem; }
.zeitband p { margin-top: .4rem; color: var(--ink-2); font-size: .88rem; line-height: 1.55; }
.zeitband__linie { display: none; }

/* Kontaktbühne: dunkelgrüne Fläche, darin das Formular auf Creme. */
.kontaktfeld {
  position: relative;
  overflow: hidden;
  border-radius: 1.3rem;
  background: #0c3227;
  padding: 1.5rem;
  color: #fff;
  box-shadow: var(--schatten-hoch);
  display: grid;
  gap: 1.5rem;
}
.kontaktfeld::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -150px;
  width: 350px;
  height: 350px;
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(255, 255, 255, .025);
  pointer-events: none;
}
.kontaktfeld > * { position: relative; z-index: 1; }
.kontaktfeld__wappen { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.kontaktfeld__wappen img { width: 92px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .25)); }
.kontaktfeld h2 { margin-top: .8rem; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 600; line-height: 1.02; color: #fff; }
.kontaktfeld__text > p { margin-top: .9rem; max-width: 560px; color: rgba(255, 255, 255, .62); line-height: 1.6; }
.kontaktfeld__stelle { margin-top: 1.6rem; color: rgba(255, 255, 255, .62); font-size: .95rem; line-height: 1.6; }
.kontaktfeld__stelle b { color: #fff; }
.kontaktfeld__stelle a { color: var(--gold); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(241, 195, 76, .5); text-underline-offset: 4px; }
.kontaktfeld__stelle a:hover { text-decoration-color: var(--gold); }
.kontaktfeld form.karte { color: var(--ink); }
.kontaktfeld form.karte h3 { color: var(--wald); }

/* --------------------------------------------------------------------------
   7. GEWÄSSERSTATUS
   Farbe und Wort gemeinsam, nie Farbe allein (PRD, Abschnitt 12). Der
   Punkt vorn trägt die Farbe, das Wort trägt die Bedeutung.
   -------------------------------------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 999px;
  padding: .28rem .7rem .28rem .55rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .85);
}
.status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.status--offen { background: rgba(120, 200, 150, .18); color: #a9e3c1; }
.status--eingeschraenkt { background: rgba(241, 195, 76, .2); color: #f6d47a; }
.status--gesperrt { background: rgba(224, 96, 80, .22); color: #ffb3a8; }
.status--unbekannt { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); }
.status--pruefen { background: rgba(255, 255, 255, .12); color: #f6d47a; }

/* Auf hellem Grund (Gewässerseite) dieselben Marken, kräftiger. */
.karte .status, .statuskarte .status { background: var(--salbei); color: var(--wald); }
.karte .status--offen, .statuskarte .status--offen { background: #dcefe3; color: #1d5a3f; }
.karte .status--eingeschraenkt, .statuskarte .status--eingeschraenkt { background: #fbeec6; color: #7a5a06; }
.karte .status--gesperrt, .statuskarte .status--gesperrt { background: #f8d9d4; color: #8a2a20; }
.karte .status--unbekannt, .statuskarte .status--unbekannt { background: var(--salbei); color: var(--ink-2); }
.karte .status--pruefen, .statuskarte .status--pruefen { background: #fbeec6; color: #7a5a06; }

/* Die Statuskarte oben auf dem Gewässerabschnitt der Unterseite. */
.statuskarte {
  border: 1px solid rgba(21, 62, 46, .11);
  border-radius: var(--radius);
  background: var(--creme);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--schatten-karte);
  display: grid;
  gap: .6rem;
}
.statuskarte__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.statuskarte__zeile h3 { font-size: 1.15rem; margin: 0; }
.statuskarte__text { color: var(--ink-2); font-size: .95rem; line-height: 1.55; margin: 0; }
.statuskarte__stand { color: var(--ink-2); font-size: .78rem; margin: 0; }
.statuskarte__stand b { color: var(--wald); font-weight: 700; }

/* Aktuelle Sperren auf der Startseite. */
.sperrbrett { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.sperrbrett li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem 1rem;
  align-items: baseline;
  border: 1px solid rgba(21, 62, 46, .11);
  border-radius: var(--radius-klein);
  background: var(--creme);
  padding: .8rem 1rem;
}
.sperrbrett time { font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--wald); font-size: 1.05rem; white-space: nowrap; }
.sperrbrett b { display: block; color: var(--ink); font-weight: 700; }
.sperrbrett span { color: var(--ink-2); font-size: .9rem; }
.sperrbrett .leer { grid-template-columns: 1fr; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   8. BESTEHENDE BAUSTEINE IM NEUEN KLEID
   Karten, Knöpfe, Laufleiste, Terminliste, Listen. Die Klassen bleiben,
   nur Rundung, Farbe und Schrift ändern sich.
   -------------------------------------------------------------------------- */
.karte {
  border: 1px solid rgba(21, 62, 46, .11);
  border-radius: var(--radius);
  background: var(--creme);
  box-shadow: var(--schatten-karte);
}
.karte.border-l-4 { border-left-width: 4px; }
.karte.bg-dunkel { background: var(--wald); }

.btn {
  border-radius: var(--radius-klein);
  min-height: 50px;
  padding: .7rem 1.15rem;
  font-weight: 850;
  font-size: .91rem;
  letter-spacing: 0;
}
.btn-signal { background: var(--gold); color: #1c2a21; box-shadow: 0 10px 30px rgba(241, 195, 76, .18); }
.btn-signal:hover, .btn-signal:focus-visible { background: #ffcf55; color: #1c2a21; }
.btn-dunkel { background: var(--wald); color: #fff; }
.btn-dunkel:hover, .btn-dunkel:focus-visible { background: var(--gold); color: var(--wald-tief); }
.btn-linie { border: 1px solid rgba(21, 62, 46, .22); background: #fff; color: var(--wald); }
.btn-linie:hover, .btn-linie:focus-visible { background: var(--wald); border-color: var(--wald); color: #fff; }
.btn-hell { border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .06); color: #fff; }
.btn-hell:hover, .btn-hell:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--wald-tief); }

.ticker { background: var(--wald-nacht); border-top: 1px solid rgba(255, 255, 255, .06); }
.ticker-datum { color: var(--gold); font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: 0; }

.termin-datum { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: -.01em; color: var(--wald); }
.termin-marke { border-radius: 999px; font-family: "Source Sans 3", system-ui, sans-serif; font-weight: 800; letter-spacing: .08em; }
.termin-marke.bg-dunkel { background: var(--salbei); color: var(--wald); }
.termin-marke.bg-signal { background: var(--wald-akzent); color: #fff; }
.termin.vergangen .termin-datum { color: var(--ink-2); }

.liste-haken li::before { background: var(--wald-akzent); }
.sperrliste li { border-left-color: var(--wald-akzent); border-radius: var(--radius-klein); background: var(--salbei); font-family: "Source Sans 3", system-ui, sans-serif; font-weight: 600; }
.regelliste > li::before { color: var(--wald-akzent); font-family: "Fraunces", Georgia, serif; font-weight: 600; }
.steckbrief dt { font-family: "Source Sans 3", system-ui, sans-serif; font-weight: 800; letter-spacing: .1em; color: var(--wald-akzent); }
.kartenlink { color: var(--wald); }
.kartenlink:hover, .kartenlink:focus-visible { color: var(--wald-akzent); }
.kartenlink-pin { color: var(--wald-akzent); }
.gew-name { color: var(--wald); }
a.karte-sprung:hover .text-ink2, a.karte-sprung:focus-visible .text-ink2 { color: var(--wald-akzent); }
.schild { border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .8); border-radius: 999px; }
.tiefenlinie { color: rgba(21, 62, 46, .18); }
.auftakt-linien { color: rgba(255, 255, 255, .12); }

details.karte summary .text-signal { color: var(--wald-akzent); }
input, select, textarea { border-radius: var(--radius-klein) !important; }
input.border-linie, select.border-linie, textarea.border-linie { border-color: rgba(21, 62, 46, .18); background: #fff; }

.fang a { border-radius: var(--radius-klein); }
.fuss-link:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   9. UNTERSEITEN
   Der Seitenkopf jeder Unterseite: waldgrün mit dem feinen Raster.
   -------------------------------------------------------------------------- */
main > section.bg-dunkel:first-child,
main > section.bildabschnitt:first-child {
  position: relative;
  overflow: hidden;
  background: var(--wald);
}
main > section.bg-dunkel:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .08;
  background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: rotate(-7deg) scale(1.16);
  pointer-events: none;
}
main > section.bg-dunkel:first-child > div { position: relative; z-index: 1; }
main > section.bg-dunkel:first-child h1,
main > section.bildabschnitt:first-child h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 560;
  letter-spacing: -.045em;
  line-height: .98;
}
.grundschleier { background: linear-gradient(90deg, rgba(5, 27, 21, .93) 0%, rgba(5, 27, 21, .72) 45%, rgba(5, 27, 21, .35) 100%); opacity: 1; }

/* --------------------------------------------------------------------------
   10. FUSSZEILE
   -------------------------------------------------------------------------- */
footer.bg-dunkeltief { background-color: var(--wald-nacht); color: rgba(255, 255, 255, .5); }
footer.bg-dunkeltief .font-display { font-weight: 700; letter-spacing: -.02em; }
footer.bg-dunkeltief .text-white { color: #fff; }
footer.bg-dunkeltief .text-gold { color: var(--gold); }
footer .fuss-link { color: rgba(255, 255, 255, .55); }
footer .fuss-link:hover { color: var(--gold); }
footer .border-white\/15 { border-color: rgba(255, 255, 255, .09); }
.fuss-leitsatz { display: inline-flex; align-items: center; gap: .5rem; color: rgba(255, 255, 255, .42); font-size: .8rem; }
.fuss-leitsatz svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   11. BREITEN UND REDUZIERTE BEWEGUNG
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .grenzen__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grenzen__zelle { justify-content: center; }
  .grenzen__zelle + .grenzen__zelle { border-top: 0; border-left: 1px solid rgba(21, 62, 46, .09); padding-left: 1.5rem; }
  .dreier { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leben__karte--gross { grid-column: 1 / -1; }
  .kontaktfeld { padding: 2rem; }
}
@media (min-width: 768px) {
  .kopfzeile { grid-template-columns: 1.05fr .95fr; align-items: end; }
  .gewaesserwelt__raster { grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); }
  .zeitband { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; }
  .zeitband__linie { display: flex; width: 65px; align-items: center; gap: 4px; margin-top: .55rem; }
  .zeitband__linie::before { content: ""; height: 1px; flex: 1; background: rgba(21, 62, 46, .16); }
  .zeitband__linie i { width: 3px; height: 3px; border-radius: 50%; background: rgba(21, 62, 46, .26); }
  .bildgeschichte__raster { grid-template-columns: 1fr 1fr; }
  .bildgeschichte__bild { min-height: 640px; }
}
@media (min-width: 1024px) {
  .leben { grid-template-columns: 1.35fr .825fr .825fr; }
  .leben__karte--gross { grid-column: auto; }
  .kontaktfeld { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.05fr); padding: 2.4rem 2.6rem; align-items: start; }
  .buehne__inhalt { min-height: 740px; padding-top: 5rem; padding-bottom: 5rem; }
}
@media (max-width: 1023px) {
  .buehne__wappen { right: 1.5rem; bottom: 3.4rem; }
}
@media (max-width: 767px) {
  .buehne__bild { object-position: 62% center; }
  .buehne__schleier { background: linear-gradient(90deg, rgba(5, 27, 21, .93), rgba(5, 27, 21, .55)), linear-gradient(0deg, rgba(5, 27, 21, .72), transparent 50%); }
  .buehne__inhalt { min-height: 720px; align-items: center; padding-top: 4rem; padding-bottom: 9rem; }
  .buehne__text h1 { font-size: clamp(3.4rem, 17vw, 5.4rem); }
  .buehne__text > p { font-size: 1rem; }
  .buehne__wappen { right: auto; bottom: 1.7rem; left: 1rem; width: calc(100% - 2rem); }
  .buehne__wappen img { width: 68px; height: 68px; }
  .buehne__scroll { display: none; }
  .abschnitt { padding: 4.5rem 0; }
  .geschichte-bild { min-height: 420px; }
  .bildgeschichte { padding: 1rem 0; }
  .hauptgewaesser { min-height: 440px; }
}
@media (max-width: 520px) {
  .buehne__knoepfe { display: grid; }
  .buehne__knoepfe .knopf { width: 100%; }
  .dreier__karte { min-height: 260px; }
  .kontaktfeld { padding: 1.3rem; }
  .kontaktfeld__wappen { width: 90px; height: 90px; }
  .kontaktfeld__wappen img { width: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  .dreier__karte, .gewaesserzeile, .knopf, .btn { transition: none; }
}

/* Nachträge: Fußnavigation in zwei Spalten, Statusplatz in den Karten. */
.fussnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1.5rem; align-content: start; }
.fussnav a { min-height: 34px; display: flex; align-items: center; color: rgba(255, 255, 255, .55); font-size: .9rem; transition: color .16s var(--ease); }
.fussnav a:hover { color: var(--gold); }
[data-gewaesser-status]:empty { display: none; }
.gewaesserzeile [data-gewaesser-status] { justify-self: end; }
.statusplatz { margin: .5rem 0 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; font-size: .9rem; color: var(--ink-2); }
@media (max-width: 520px) { .fussnav { grid-template-columns: 1fr; } .gewaesserzeile { grid-template-columns: 30px minmax(0, 1fr); } .gewaesserzeile [data-gewaesser-status] { grid-column: 2; justify-self: start; } }

/* Hilfsklassen, die im gebauten Tailwind fehlen. */
.max-w-\[46ch\] { max-width: 46ch; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.m-0 { margin: 0; }
@media (min-width: 640px) {
  .sm\:items-center { align-items: center; }
  .sm\:justify-between { justify-content: space-between; }
}

/* Der Burger bleibt auf allen Breiten (20.09.2026). Ab 1024 px zeigt er
   nur noch „Weiteres": Vorstand, Unterlagen, Impressum, Datenschutz, als
   kleines Klappmenü rechts unter dem Kopf. Die Hauptpunkte stehen dort
   schon in der Leiste. Vorher war Unterlagen am Rechner nur über die
   Fußzeile zu finden. */
@media (min-width: 1024px) {
  [data-burger] { display: inline-grid; margin-left: .25rem; }
  [data-mobilmenue]:not([hidden]) {
    display: block;
    position: absolute;
    top: 100%;
    right: max(1.5rem, calc((100% - 78rem) / 2 + 1.5rem));
    width: 20rem;
    border: 1px solid rgba(21, 62, 46, .14);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(6, 31, 24, .18);
    overflow: hidden;
  }
  [data-mobilmenue] nav { padding: .75rem 1rem 1rem; }
  [data-mobilmenue] .nav-link:not(.text-ink2) { display: none; }
  [data-mobilmenue] .menue-gruppe { margin-top: .25rem; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  nav[aria-label="Hauptnavigation"] .nav-link, .kopf-kontakt { font-size: .88rem !important; }
  nav[aria-label="Hauptnavigation"] .nav-link { padding-left: .55rem; padding-right: .55rem; }
}

/* Das Foto des Weihers auf der Gewässerseite: volle Breite, beschnitten. */
.weiherbild { width: 100%; max-height: 440px; object-fit: cover; object-position: center 60%; border-radius: var(--radius); margin-bottom: 1.5rem; box-shadow: var(--schatten-karte); }

/* Bühnenvideo, nur schmal. Liegt über dem Foto und unter dem Schleier,
   blendet ein, sobald es läuft; bis dahin trägt das Foto. */
.buehne__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
  display: none;
}
@media (max-width: 767px) {
  .buehne__video { display: block; }
  .buehne__video.laeuft { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .buehne__video { display: none; }
}

/* Drei Abstandsklassen, die im gebauten Tailwind fehlten. Ohne sie klebten
   „Drei Dinge" und „Gewässerwelt" oben am Rand. */
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.mt-14 { margin-top: 3.5rem; }
@media (min-width: 768px) { .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; } }

/* Statusmarke und Erklärung: Luft dazwischen, auf allen Seiten. */
[data-gewaesser-status]:not([data-kurz]) { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }

/* --------------------------------------------------------------------------
   12. SCHRIFTHARMONIE (18.09.2026)
   Vorher liefen sieben Gewichte und ein halbes Dutzend Kleinstgrößen durch
   die Seite. Jetzt gilt:
     Fraunces        600 für alle Titel, große Titel etwas enger gesetzt.
     Source Sans 3   400 Text, 600 Hervorhebung, 700 für alles Kleine, Laute
                     und Klickbare (Rubriken, Marken, Knöpfe, Menü).
     Kleinschrift    eine Größe (.72rem) für Rubriken und Marken, eine
                     Laufweite (.12em).
   Zeilenabstände: große Titel eng (unter 1), Kartentitel und Fragen 1.2,
   damit zweizeilige Überschriften nicht aufeinanderkleben.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, .font-display, .display-title, .buehne__text h1, .regelliste h3 { font-weight: 600; }
.display-title, .buehne__text h1 { letter-spacing: -.04em; }
h3, .font-display.text-lg, .font-display.text-xl, .font-display.text-2xl,
.dreier__karte h3, .leben__karte h3, .hauptgewaesser__text h3, .kontaktfeld h2,
.statuskarte__zeile h3, .regelliste h3, .zeitband strong, .grenzen__zelle strong,
.buehne__wappen strong { line-height: 1.2; }
details > summary.font-display { line-height: 1.3; }
.dreier__karte h3, .leben__karte h3 { font-size: clamp(1.2rem, 2.1vw, 1.45rem); }
.hauptgewaesser__text h3 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }

.rubrik, .font-mono.uppercase, .dreier__karte > small, .leben__karte small,
.hauptgewaesser__text small, .zeitband > div:not(.zeitband__linie) span,
.buehne__wappen small, .buehne__scroll, .geschichte-bild__marke,
.bildgeschichte__bild > span, .status, .termin-marke, .steckbrief dt,
.wortmarke-zeile, .menue-gruppe {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rubrik, .font-mono.tracking-\[0\.2em\], .dreier__karte > small, .leben__karte small,
.hauptgewaesser__text small, .zeitband > div:not(.zeitband__linie) span,
.geschichte-bild__marke, .bildgeschichte__bild > span, .steckbrief dt { font-size: .72rem; }
.status, .termin-marke, .buehne__wappen small, .buehne__scroll, .wortmarke-zeile, .menue-gruppe { font-size: .66rem; }
.grenzen__zelle small { font-size: .8rem; text-transform: none; letter-spacing: 0; font-weight: 400; }

.knopf, .btn, .kopf-kontakt, nav[aria-label="Hauptnavigation"] .nav-link,
[data-mobilmenue] .nav-link, .hakenliste li, .hauptgewaesser__link,
.fussnav a, .kartenlink, .termin-titel, .gew-name { font-weight: 700; }
nav[aria-label="Hauptnavigation"] .nav-link { font-size: .92rem; }
.knopf, .btn { font-size: .92rem; letter-spacing: .01em; }
.font-mono:not(.uppercase) { font-family: "Source Sans 3", system-ui, sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }
.lead { font-size: 1.12rem; }
.kopfzeile > p, .body-copy, .dreier__karte p, .leben__karte p, .hauptgewaesser__text p { font-size: 1rem; line-height: 1.7; }

/* Nachträge 18.09.2026, zweite Runde */
/* Die Jahreszahl sitzt im Bild, nicht daneben. */
.geschichte-bild__jahr { right: 1.2rem; bottom: .9rem; font-size: clamp(3.2rem, 6vw, 5.2rem); }

/* Sperrbrett: eine Spalte, eine Schrift. Datum, Gewässer, Grund untereinander. */
.sperrbrett li { display: block; padding: .8rem 1rem .85rem; }
.sperrbrett time { display: block; font-family: "Source Sans 3", system-ui, sans-serif; font-weight: 700; font-size: .95rem; color: var(--wald-akzent); letter-spacing: 0; margin-bottom: .15rem; }
.sperrbrett b { display: inline; font-weight: 700; color: var(--ink); }
.sperrbrett b::after { content: ": "; }
.sperrbrett span { font-size: .95rem; }

/* In Karten nur eine Textgröße, egal welche Utility im Markup steht. */
.karte .text-lg, .karte p.text-ink2 { font-size: 1rem; line-height: 1.7; }
.karte .font-display.text-3xl { font-size: 1.875rem; }

/* --------------------------------------------------------------------------
   13. SCHMALE BILDSCHIRME: NICHTS RAGT ÜBER DEN RAND
   Auf dem iPhone 16 Pro (402 px) lief „Gemeinsam" in der Bühne über den
   Rand: 17vw Fraunces sind dort 68 px, das Wort misst 370 px. Jetzt
   13,5vw, dazu darf jede Überschrift notfalls trennen und nie breiter als
   ihr Kasten werden.
   -------------------------------------------------------------------------- */
h1, h2, h3, .display-title, .buehne__text h1, .kontaktfeld h2, .hauptgewaesser__text h3 {
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (max-width: 767px) {
  .buehne__text h1 { font-size: clamp(2.6rem, 12vw, 5rem); }
  .buehne__text { max-width: 100%; }
}
@media (max-width: 420px) {
  .display-title { font-size: clamp(2.1rem, 9.5vw, 2.5rem); }
  .kontaktfeld h2 { font-size: clamp(1.7rem, 8vw, 2rem); }
}

/* --------------------------------------------------------------------------
   14. KEIN WORT WIRD JE GETRENNT
   Abschnitt 13 erlaubte Überschriften notfalls das Trennen. Das war der
   falsche Weg: „Gemeinsa|m" ist schlimmer als ein kleinerer Titel. Jetzt
   gilt: Wörter bleiben ganz, und die Titelgröße richtet sich zusätzlich
   nach der Breite ihres Kastens (Container-Einheit cqi), damit das längste
   Wort immer hineinpasst, auf jeder Breite.
   -------------------------------------------------------------------------- */
h1, h2, h3, .display-title, .buehne__text h1, .kontaktfeld h2, .hauptgewaesser__text h3 {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
}
.buehne__text, .kopfzeile > div, .bildgeschichte__text, .kontaktfeld__text,
.hauptgewaesser__text, .teil:has(> .display-title), .max-w-3xl:has(> .display-title) {
  container-type: inline-size;
}
/* „Gemeinsam" misst in Fraunces gut 5,4 em: 17 cqi ergeben 92 Prozent der Kastenbreite. */
.buehne__text h1 { font-size: min(clamp(3.6rem, 8vw, 7.8rem), 17cqi); }
@media (max-width: 767px) {
  .buehne__text h1 { font-size: min(clamp(2.6rem, 12vw, 5rem), 17cqi); }
}
/* „Pflichtausrüstung." ist das längste Wort in einem Abschnittstitel (rund 9 em). */
.display-title { font-size: min(clamp(2.5rem, 4.8vw, 4.6rem), 10cqi); }
.kontaktfeld h2 { font-size: min(clamp(2rem, 4vw, 3.2rem), 9cqi); }
.hauptgewaesser__text h3 { font-size: min(clamp(1.8rem, 3.4vw, 2.8rem), 11cqi); }
@media (max-width: 420px) {
  .display-title { font-size: min(clamp(2.1rem, 9.5vw, 2.5rem), 10cqi); }
  .kontaktfeld h2 { font-size: min(clamp(1.7rem, 8vw, 2rem), 9cqi); }
}
/* Ein Flex-Kind mit inline-size-Containment verliert seine Breite aus dem
   Inhalt; deshalb bekommt der Textblock der Bühne die Breite ausdrücklich. */
.buehne__text { width: 100%; }

/* Hakenliste: Luft nach oben zum Text (die Nullsetzung oben schlug mt-8)
   und etwas mehr Abstand zwischen Haken und Wort. */
.hakenliste { margin-top: 2rem; gap: .9rem; }
.hakenliste li { gap: 1rem; }

/* --------------------------------------------------------------------------
   15. MINDESTGRÖSSE FÜR LESETEXT (18.09.2026)
   Kein Absatz, keine Liste, keine Tabelle kleiner als 1,12 rem, dem Maß
   des Einleitungstextes. Kleiner bleiben nur Rubriken, Marken, Daten der
   Laufleiste und die Stand-Zeile: das sind Beschriftungen, kein Lesetext.
   Der Einleitungstext bekommt einen Hauch mehr, damit die Stufung bleibt.
   -------------------------------------------------------------------------- */
main p:not(.rubrik):not(.font-mono):not(.font-display):not(.text-xs):not(.statuskarte__stand):not(.hauptgewaesser__daten):not(.statusplatz):not(.termin-sache),
main li:not(.termin):not(.fang):not(.ticker-eintrag),
main dd, main td, main th, main blockquote p,
.kopfzeile > p, .body-copy, .dreier__karte p, .leben__karte p, .hauptgewaesser__text p,
.sperrbrett span, .statuskarte__text, .aig-hinweis, .zeitband p, .karte .text-lg,
.karte p.text-ink2, .kontaktfeld__text > p, .kontaktfeld__stelle, footer p {
  font-size: 1.12rem;
  line-height: 1.7;
}
.lead { font-size: 1.2rem; }
.steckbrief-eng > div { font-size: 1.05rem; }
.hauptgewaesser__daten { font-size: 1rem; }
.gewaesserzeile strong { font-size: 1rem; }
.gewaesserzeile small { font-size: .78rem; }
.zitat p { font-size: 1.15rem; }
.termin-titel { font-size: 1.12rem; }
.termin-ort, .termin-zeit, .termin-datum { font-size: 1rem; }

/* Die Hauptgewässer-Kachel ist als Ganzes ein Link. */
a.hauptgewaesser { color: #fff; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), border-color .2s var(--ease); }
a.hauptgewaesser:hover, a.hauptgewaesser:focus-visible { transform: translateY(-3px); border-color: rgba(241, 195, 76, .45); }
a.hauptgewaesser:hover .hauptgewaesser__link { gap: .8rem; }
.font-normal { font-weight: 400; }
.mt-1\.5 { margin-top: .375rem; }

/* Beiträge: unter 768 px eine Spalte, darüber drei. Bei 640 bis 767 px waren
   drei Spalten zu schmal, Betrag und Altersgruppe brachen um. Der Betrag
   bleibt immer auf einer Zeile. */
.beitraege { grid-template-columns: 1fr; }
@media (min-width: 768px) { .beitraege { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.beitraege .font-display { white-space: nowrap; font-size: 1.875rem; }
.beitraege .font-mono { white-space: nowrap; }

/* Honigtopf der Sendeformulare (senden.php): für Menschen und Screenreader
   unsichtbar, Automaten füllen das Feld trotzdem aus. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
input[type="file"] { font-size: 1rem; }

/* --------------------------------------------------------------------------
   16. GROSSE SCHRIFT (20.09.2026)
   Wunsch des Vorstands: nichts Lesbares kleiner als der Einleitungstext,
   weil ältere Mitglieder die kleinen Größen schlecht lesen. Diese Schicht
   liegt absichtlich ganz am Ende und setzt sich mit !important gegen alle
   früheren Größen durch. Wer eine Größe ändern will, ändert sie hier und
   nirgends sonst. Drei Stufen:
     Lesetext     1,2 rem   Absätze, Listen, Tabellen, Formulare, Fußzeile
     Bedienung    1,05 rem  Menü, Knöpfe, Laufleiste, Zahlenbeschriftung
     Beschriftung 0,85 rem  Rubriken, Marken (Versalien wirken größer)
     Status       0,95 rem  „offen", „gesperrt" und die Kurzstatus je Gewässer
   -------------------------------------------------------------------------- */
:root { --lese: 1.2rem; --bedien: 1.05rem; --marke: .95rem; --statusgroesse: 1rem; }

main p:not(.font-display):not(.display-title):not(.rubrik):not(.rubrik--hell),
main li:not(.termin):not(.fang), main dd, main dt, main td, main th, main label,
main summary, main input, main select, main textarea, main figcaption,
main .text-sm, main .text-xs, main .text-base, main .text-\[0\.92rem\], main .text-\[11px\],
.buehne__text > p, .kopfzeile > p, .body-copy, .zitat p, .zeitband p,
.statuskarte__text, .statuskarte__stand, .statusplatz, .hauptgewaesser__daten, .aig-hinweis,
.kontaktfeld__text > p, .kontaktfeld__stelle, .sperrbrett span, .sperrbrett time, .sperrliste li,
.steckbrief-eng > div, .gewaesserzeile strong, .termin-ort, .termin-zeit, .termin-datum,
.termin-titel, .termin-sache, .kartenlink, .karte .text-lg, .karte p.text-ink2,
footer p, footer li, footer a, footer .text-sm, footer .text-xs, .fussnav a, .stand {
  font-size: var(--lese) !important;
  line-height: 1.6 !important;
}
.lead { font-size: 1.25rem !important; line-height: 1.7 !important; }
.zitat p { line-height: 1.55 !important; }

nav[aria-label="Hauptnavigation"] .nav-link, [data-mobilmenue] .nav-link, .kopf-kontakt,
.knopf, .btn, .hauptgewaesser__link, .ticker-eintrag, .ticker-datum, input[type="file"],
.grenzen__zelle small, .fuss-leitsatz, .amt-zusatz {
  font-size: var(--bedien) !important;
}

.rubrik, .rubrik--hell, main .uppercase, .dreier__karte > small, .leben__karte small,
.hauptgewaesser__text small, .zeitband > div:not(.zeitband__linie) span, .buehne__wappen small,
.buehne__scroll, .geschichte-bild__marke, .bildgeschichte__bild > span, .steckbrief dt,
.wortmarke-zeile, .menue-gruppe, .termin-marke, .schild, .text-\[11px\], .text-\[10px\] {
  font-size: var(--marke) !important;
  letter-spacing: .1em !important;
}
.status, .gewaesserzeile small, .statusplatz .status, [data-kurz] {
  font-size: var(--statusgroesse) !important;
  letter-spacing: .06em !important;
}

/* Zwischen 1024 und 1199 px ist das Menü mit sieben Punkten bei 1,05 rem zu
   breit; dort eine Stufe kleiner, ab 1200 px wieder voll. */
@media (min-width: 1024px) and (max-width: 1199px) {
  nav[aria-label="Hauptnavigation"] .nav-link, .kopf-kontakt { font-size: .93rem !important; }
  nav[aria-label="Hauptnavigation"] { gap: .1rem; }
}

/* Rasterkinder dürfen schmaler werden als ihr Inhalt es gern hätte. Ohne
   das wuchsen die Gewässerkarten bei 360 px über ihre Spalte hinaus, sobald
   die Schrift größer wurde. */
main .grid > * { min-width: 0; }

/* Sehr schmale Handys (320 px, iPhone SE der ersten Generation): Wappen,
   Wortmarke und Burger passten nicht nebeneinander, der Burger wurde
   zusammengedrückt und ragte über den Rand. Burger behält seine Breite,
   die Unterzeile der Wortmarke entfällt dort. */
[data-burger] { flex: 0 0 44px; }
[data-kopf] a[href="index.html"] > span:last-child { min-width: 0; }
@media (max-width: 359px) {
  .wortmarke-zeile { display: none; }
  [data-kopf] .wappen { width: 3rem; height: 3rem; }
}