/* ==========================================================================
   1. Hochstädter Angelverein „Großschlag“ von 1977 e. V.
   site.css: Eigene Stile ergänzend zu Tailwind (vorgebaut)

   AUFBAU DIESER DATEI
   1. Design-Tokens (Farben, Schatten, Kurven)
   2. Basis und Typografie
   3. Lesbarkeit im Freien (Kontrast, Trefferflächen)
   4. Wappen und Wortmarke
   5. Signaturelement: Tiefenlinien
   6. Der Kopfbereich der Startseite
   7. Eintritts-Choreografie (Reveal)
   8. Newsticker
   9. Interaktives Element: Anschlag halten
   10. Reduzierte Bewegung und Pausen

   OHNE VIDEO, OHNE ERZEUGTE BILDER
   Ausser dem Vereinswappen gibt es keine einzige Bilddatei. Alles andere
   entsteht aus CSS und selbstgezeichnetem SVG. Nichts muss erst erzeugt
   werden, und es gibt keinen Ladevorgang, der schiefgehen kann.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN-TOKENS
   Die Palette ist aus dem Vereinswappen abgelesen, nicht erfunden:
   das Graphit der Konturen, das Grau des Schildes, das Gold des Hochstädter
   Wappens und sein rotes H.

   Die Arbeitsteilung der beiden Buntfarben folgt dem Wappen selbst.
   Im Wappen steht Rot AUF Gold, also:
     Rot  trägt auf hellem Grund. Handlungsaufforderungen, Fokus, Akzente.
     Gold trägt auf dunklem Grund. Zahlen, kleine Beschriftungen, Datumsangaben.
   Gold auf Weiss waere unlesbar und kommt deshalb nirgends vor.
   -------------------------------------------------------------------------- */
:root {
  --canvas: #f5f3ef;
  --panel: #fdfcfa;
  --panel-alt: #eceae4;

  --ink: #1c1b19;
  --ink-2: #4a4741;
  --line: #d8d3ca;
  --line-stark: #a9a29a;

  /* Die dunklen Flaechen: das Graphit der Wappenkonturen. */
  --dunkel: #2a2b2d;
  --dunkel-tief: #1a1b1c;

  /* Das Schildgrau. */
  --stahl: #8f9297;
  --stahl-hell: #b9bcc0;

  /* Die Buntfarben des Hochstaedter Wappens. */
  --gold: #f2b325;
  --gold-tief: #d99a10;
  --signal: #c1281f;
  --signal-hover: #9a1f18;

  /* Helle Schrift auf dunklem Grund, warm statt blaeulich. */
  --auf-dunkel: #ded9d1;
  --auf-dunkel-leise: #c9c3ba;

  /* Genau zwei Kurven, überall verwendet. Nichts schnappt. */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-weich: cubic-bezier(.33, 1, .68, 1);

  --schatten-karte: 0 1px 2px rgba(28, 27, 25, .06), 0 8px 24px rgba(28, 27, 25, .07);
  --schatten-hoch: 0 2px 6px rgba(28, 27, 25, .10), 0 18px 48px rgba(28, 27, 25, .14);
}

/* --------------------------------------------------------------------------
   2. BASIS UND TYPOGRAFIE
   -------------------------------------------------------------------------- */

/* overflow-x: clip auf BEIDEN Elementen, hidden zuerst als Rückfall.
   hidden allein lässt die Seite per Skript weiterhin seitlich schieben,
   und ein einziger Ankerlink verschiebt sonst das ganze Layout. */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  /* 17px Grundgröße: am Wasser wird bei Sonne und mit nassen Fingern gelesen. */
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 768px) {
  body { font-size: 18px; }
}

h1, h2, h3, h4 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* Eine einzige feste Hintergrundebene für die ganze Seite. Dadurch fühlt
   sich Scrollen an wie Bewegung durch einen Ort, nicht an Kästen vorbei. */
.umgebung {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 12% 0%, rgba(143, 146, 151, .12), transparent 60%),
    radial-gradient(ellipse 80% 50% at 88% 100%, rgba(217, 154, 16, .07), transparent 62%);
}

/* Hebt Inhalt über die feste Hintergrundebene.

   ACHTUNG, KASKADE: Diese Regel setzt position und steht in site.css, also
   NACH tailwind.css. Sie schlägt damit jede Tailwind-Positionsklasse gleicher
   Spezifität. Ein Element, das sticky, absolute oder fixed sein soll, darf
   .ueber deshalb NICHT zusätzlich tragen, sonst wird es stillschweigend
   wieder relative. Der klebende Kopf ist genau darüber schon einmal
   gestolpert. Er trägt jetzt nur sticky und z-50, das reicht völlig. */
.ueber { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   3. LESBARKEIT IM FREIEN
   Vorgabe aus dem Briefing: hoher Kontrast, kein feines Grau.
   Sekundärtext ist --ink-2 (#4a4741) und erreicht auf --canvas rund 7,8:1.
   -------------------------------------------------------------------------- */
.text-sekundaer { color: var(--ink-2); }

/* Trefferflächen mindestens 44px, sobald mit dem Finger bedient wird.
   display wird bewusst MIT Ausrichtung gesetzt: ein blankes inline-flex
   würde Beschriftungen linksbündig kippen lassen. */
@media (pointer: coarse) {
  .btn, .nav-link, .fuss-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Auf dunklem Grund braucht der Fokus einen hellen Ring, sonst verschwindet
   das Rot im Graphit. Gold ist hier die Wappenfarbe der Wahl. */
.auf-dunkel :focus-visible {
  outline-color: var(--gold);
}

.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--dunkel-tief);
  color: #fff;
  padding: .75rem 1.25rem;
  font-weight: 700;
}
.sprunglink:focus { left: .5rem; top: .5rem; }

/* Schaltflächen */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: 2px;
  padding: .85rem 1.5rem;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Der eine Ruf zur Tat, im Rot des Wappen-H. */
.btn-signal { background: var(--signal); color: #fff; }
.btn-signal:hover { background: var(--signal-hover); }

/* Der ruhige zweite Knopf, im Graphit der Konturen. Beim Zeigen wechselt
   er ins Vereinsgold mit dunkler Schrift, wie der weisse Knopf im Auftakt.
   So haben alle Nebenknoepfe der Seite denselben Zeigezustand. */
.btn-dunkel { background: var(--dunkel); color: #fff; }
.btn-dunkel:hover,
.btn-dunkel:focus-visible { background: var(--gold); color: var(--dunkel-tief); }

.btn-linie {
  border: 2px solid var(--dunkel);
  color: var(--dunkel);
  background: transparent;
}
.btn-linie:hover,
.btn-linie:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--dunkel-tief); }

/* Umrissknopf auf dunklem Grund */
/* Der zweite Knopf im Auftakt. Dauerhaft weiss gefuellt, damit er neben dem
   roten Knopf als gleichwertiges Angebot dasteht und nicht als blasser
   Zweitschlag. Beim Zeigen wechselt er ins Vereinsgold: Das ist die dritte
   Farbe der Seite und kommt sonst nur in kleinen Dosen vor, hier traegt sie
   eine ganze Flaeche und der Wechsel wird dadurch deutlich.
   Die Schrift bleibt in beiden Zustaenden dunkel, auf Weiss wie auf Gold. */
.btn-hell {
  border: 2px solid #fff;
  color: var(--dunkel-tief);
  background: #fff;
}
.btn-hell:hover,
.btn-hell:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dunkel-tief);
}

/* --------------------------------------------------------------------------
   4. WAPPEN UND WORTMARKE
   Das Wappen liegt als Datei in assets/img/logo.png, freigestellt.
   Es steht ohne weisse Hinterlegung auf hellem wie auf dunklem Grund:
   sein Schild ist hellgrau und seine Konturen sind schwarz, das traegt
   auf beiden Untergruenden.

   Fehlt die Datei einmal, blendet das onerror-Attribut am Bild sie aus und
   ein schlichtes Ersatzzeichen springt ein, damit nichts kaputt aussieht.
   -------------------------------------------------------------------------- */
.wappen {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wappen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wappen .ersatz { display: none; }

.wappen.ohne-logo img { display: none; }
.wappen.ohne-logo .ersatz {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--dunkel);
  color: #fff;
  border-radius: 4px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: .62em;
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
}
.auf-dunkel .wappen.ohne-logo .ersatz {
  background: #fff;
  color: var(--dunkel-tief);
}

/* --------------------------------------------------------------------------
   5. SIGNATURELEMENT: TIEFENLINIEN
   Die Seite hat ein einziges eigenes Motiv: die Tiefenkarte des Gewässers.
   Die Höhenlinien zeichnen sich beim Scrollen selbst und trennen die
   Abschnitte. Nähme man sie weg, sähe die Seite deutlich beliebiger aus.
   Genau das macht sie zur Signatur.
   -------------------------------------------------------------------------- */
.tiefenlinie {
  display: block;
  width: 100%;
  height: auto;
  color: var(--line-stark);
  overflow: visible;
}

.tiefenlinie path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  /* Die Länge setzt JS, damit der Strich sauber aufzieht statt zu springen. */
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: calc(var(--len, 1200) * (1 - var(--zeichnen, 0)));
}

.tiefenlinie path:nth-child(2) { opacity: .72; }
.tiefenlinie path:nth-child(3) { opacity: .48; }
.tiefenlinie path:nth-child(4) { opacity: .3; }

/* --------------------------------------------------------------------------
   6. DER KOPFBEREICH DER STARTSEITE
   Kein Video, kein Foto, keine Bildschirmhöhe als Maß. Der Bereich ist so
   hoch wie sein Inhalt. Ein Kopfbereich, der den Bildschirm füllt, schiebt
   auf dem Handy alles Nützliche unter die Kante, und genau dort wird diese
   Seite am häufigsten geöffnet.
   Der Grund ist das Graphit der Wappenkonturen, damit das Wappen selbst die
   hellste Sache im Bild ist. Am 09.09.2026 zwei Stufen aufgehellt (Vorstand:
   insgesamt zu dunkel), die Fusszeile im gleichen Zug von #1a1b1c auf
   #2c2d30 (Abschnitt 20).
   -------------------------------------------------------------------------- */
.auftakt {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 100% 70% at 24% 0%, rgba(158, 161, 166, .4), transparent 62%),
    radial-gradient(ellipse 90% 80% at 92% 100%, rgba(12, 12, 13, .48), transparent 60%),
    linear-gradient(168deg, #474a4f 0%, #353739 48%, #27282b 100%);
  color: var(--auf-dunkel);
}

/* Die Tiefenlinien im Kopfbereich.

   WICHTIG, und einmal falsch gemacht: Sie liefen quer durch die Unterzeile
   und machten den Text unruhig. Dekoration gehoert nicht in die Textspur.
   Sie sitzen deshalb jetzt im unteren Drittel, wo sie wie eine Wasserlinie
   unter dem Inhalt liegen, und sie sind nur noch halb so kraeftig. */
.auftakt-linien {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  color: rgba(185, 188, 192, .13);
  pointer-events: none;
}
.auftakt-linien svg {
  position: absolute;
  left: 50%;
  bottom: -4%;
  width: 172%;
  min-width: 64rem;
  transform: translateX(-50%);
}

.auftakt-inhalt { position: relative; z-index: 1; }

/* Ein weicher Schleier unter dem Text. Er liegt zwischen den Linien und der
   Schrift, damit auch die unterste Zeile auf ruhigem Grund steht.
   Der Verlauf laeuft nach aussen aus, damit die Flaeche nicht flach wird. */
.auftakt-inhalt::before {
  content: "";
  position: absolute;
  inset: -12% -25%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 68% 62% at 42% 44%,
              rgba(18, 19, 20, .6) 0%, rgba(18, 19, 20, .4) 44%,
              rgba(18, 19, 20, 0) 76%);
}

/* Ein sehr langsames Wandern des Lichts. Negative Verzögerung, damit beim
   ersten Bild schon mitten im Zyklus gestartet wird und nichts aufblitzt. */
.auftakt::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(102deg, transparent 32%, rgba(242, 179, 37, .07) 45%, transparent 56%);
  animation: licht-wandern 34s var(--ease-weich) infinite alternate -11s;
}
@keyframes licht-wandern {
  from { transform: translate3d(-3%, -1%, 0); }
  to   { transform: translate3d(3%, 1%, 0); }
}

/* Kleine Beschriftung über dunklem Grund. Eigene helle Schriftfarbe, nicht
   geerbt, sonst zieht sie sich die dunkle Grundfarbe der Seite. */
.schild {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--auf-dunkel);
  background: rgba(12, 12, 13, .5);
  border: 1px solid rgba(185, 188, 192, .3);
  border-radius: 999px;
  padding: .38rem .95rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Die drei harten Zahlen als Leiste am Fuß des Kopfbereichs. Sie machen den
   Auftakt nützlich statt nur schön: wer am Wasser steht, sieht die Grenzen
   sofort, ohne zu scrollen.
   Die Zahlen stehen in Gold, weil Gold hier auf dunklem Grund liegt und dort
   seine volle Leuchtkraft hat. Auf hellem Grund waere es unlesbar. */
.grenzleiste {
  border-top: 1px solid rgba(185, 188, 192, .22);
}
.grenzleiste dt {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.grenzleiste .signalzahl { color: var(--gold); }

/* --------------------------------------------------------------------------
   6b. ABSCHNITTE MIT BILDHINTERGRUND

   Das Bild liegt als echtes img-Element im Abschnitt, nicht als CSS-Hintergrund.
   Der Grund: nur ein img kann loading="lazy" tragen. So lädt keins der Bilder,
   bevor der Besucher in seine Nähe kommt, und wer nur die Termine oben liest,
   lädt gar keins.

   Darüber liegt IMMER ein Schleier. Die Schrift steht damit auf ruhigem Grund,
   egal wie hell die Stelle im Bild gerade ist. Ohne den Schleier wäre jede
   Textzeile eine Wette darauf, was zufällig hinter ihr liegt.

   Der Kopfbereich der Startseite bekommt bewusst KEIN Bild. Er ist heute reines
   CSS und damit 0 Byte. Ein Bild dort würde beim allerersten Aufruf geladen,
   also genau dann, wenn jemand am Wasser mit wenig Empfang wartet.
   -------------------------------------------------------------------------- */
.bildabschnitt {
  position: relative;
  overflow: hidden;
  background: var(--dunkel);
  color: var(--auf-dunkel);
}

.bildabschnitt > .grundbild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Der Schleier. --schleier steuert, wie tief er deckt, je Abschnitt gesetzt. */
.bildabschnitt > .grundschleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(20, 21, 22, var(--schleier-oben, .78)) 0%,
      rgba(20, 21, 22, var(--schleier, .72)) 45%,
      rgba(20, 21, 22, var(--schleier-unten, .86)) 100%);
}

.bildabschnitt > .bildinhalt {
  position: relative;
  z-index: 2;
}

/* Karten auf dunklem Bildgrund. Die helle Karte würde dort wie ein Loch
   wirken, darum eine eigene, durchscheinende Fassung. */
.karte-dunkel {
  position: relative;
  background: rgba(24, 25, 27, .62);
  border: 1px solid rgba(185, 188, 192, .22);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  transition: background-color .4s var(--ease), transform .4s var(--ease),
              border-color .4s var(--ease);
}
.karte-dunkel:hover {
  background: rgba(24, 25, 27, .78);
  border-color: rgba(242, 179, 37, .4);
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   7. EINTRITTS-CHOREOGRAFIE
   Der Startzustand hängt an der Klasse .js, die ein winziges Skript im Kopf
   setzt. Ohne JavaScript wird sie nie vergeben, und alle Inhalte stehen von
   Anfang an sichtbar da statt auf einen Beobachter zu warten.
   Start- UND Endzustand tragen dasselbe Präfix, sonst gewinnt später eine
   andere Regel und der Eintritt läuft stumm nie.
   -------------------------------------------------------------------------- */
.js .reveal .teil {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.sichtbar .teil {
  opacity: 1;
  transform: none;
}

.js .reveal.sichtbar .teil:nth-child(1) { transition-delay: 0ms; }
.js .reveal.sichtbar .teil:nth-child(2) { transition-delay: 80ms; }
.js .reveal.sichtbar .teil:nth-child(3) { transition-delay: 160ms; }
.js .reveal.sichtbar .teil:nth-child(4) { transition-delay: 240ms; }
.js .reveal.sichtbar .teil:nth-child(5) { transition-delay: 320ms; }
.js .reveal.sichtbar .teil:nth-child(6) { transition-delay: 400ms; }

/* Staffelung nach dem Eintritt zurücknehmen, sonst hängt jedes spätere Hover
   um die Verzögerung hinterher. Die Aufräumregel muss die nth-child-Regeln in
   der Spezifität schlagen, darum hier !important. */
.js .reveal.fertig .teil:nth-child(n) { transition-delay: 0s !important; }

/* Ein lebendiges Element je Abschnitt, auf Flüsterstärke. */
.puls::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(242, 179, 37, .3), 0 0 32px rgba(242, 179, 37, .18);
  opacity: 0;
  pointer-events: none;
}
.im-blick .puls::before {
  animation: puls-atmen 6s var(--ease-weich) infinite alternate -2.4s;
}
@keyframes puls-atmen {
  from { opacity: 0; }
  to   { opacity: .8; }
}

/* Karten */
.karte {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: var(--schatten-karte);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease),
              border-color .4s var(--ease);
}
.karte:hover {
  box-shadow: var(--schatten-hoch);
  transform: translateY(-3px);
  border-color: var(--line-stark);
}

/* --------------------------------------------------------------------------
   8. NEWSTICKER
   Die Spur wird per JS so oft verdoppelt, bis sie breiter als 2560px ist.
   Sonst klafft auf breiten Bildschirmen eine Lücke am Schleifenpunkt.
   Die Animation läuft nur, solange der Ticker im Blick ist.
   -------------------------------------------------------------------------- */
.ticker {
  position: relative;
  overflow: hidden;
  background: var(--dunkel);
  color: var(--auf-dunkel);
}
.ticker::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--dunkel) 0%, transparent 5%,
              transparent 95%, var(--dunkel) 100%);
}

.ticker-spur {
  display: flex;
  width: max-content;
  will-change: transform;
}
.im-blick .ticker-spur {
  animation: ticker-lauf 48s linear infinite;
}
@keyframes ticker-lauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.ticker:hover .ticker-spur,
.ticker:focus-within .ticker-spur { animation-play-state: paused; }

.ticker-eintrag {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.5rem;
  white-space: nowrap;
  font-size: .95rem;
}
.ticker-datum {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   10. REDUZIERTE BEWEGUNG UND PAUSEN
   -------------------------------------------------------------------------- */

/* Versteckter Tab: alles pausieren. animation-play-state vererbt sich NICHT,
   darum werden Elemente UND Pseudoelemente direkt getroffen. */
body.pausiert *,
body.pausiert *::before,
body.pausiert *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }

  /* Jedes choreografierte Element zeigt seinen fertigen Endzustand.
     WICHTIG: dasselbe .js-Präfix wie die Startzustände, die hier aufgehoben
     werden. Ohne das Präfix wäre die versteckende Regel spezifischer und
     würde stillschweigend gewinnen, und die Seite bliebe leer. */
  .js .reveal .teil { opacity: 1; transform: none; }
  .tiefenlinie path { stroke-dashoffset: 0; }

  /* Positionierende transforms je Element wieder setzen. Ein pauschales
     transform: none würde die Tiefenlinien im Kopfbereich aus dem Bild
     schieben schieben. */
  .auftakt-linien svg { transform: translate(-50%, -50%); }
}

/* --------------------------------------------------------------------------
   10. GEWÄSSERSEITE: STECKBRIEFE, SPERRZEITEN, REGELLISTE

   Diese Bausteine sind neu dazugekommen, als die Angaben aus dem Leitfaden
   der AIG Maintal und aus der Gewässerordnung auf die Seite kamen.

   Warum sie hier stehen und nicht in Tailwind: Tailwind wird nur neu gebaut,
   wenn Node installiert ist. Diese fünf Bausteine plus die fünf fehlenden
   Hilfsklassen am Ende sind handgeschrieben, damit die Seite ohne Bauschritt
   vollständig ist.
   -------------------------------------------------------------------------- */

/* Steckbrief: Bezeichnung und Wert als Paar. Ab 480px zweispaltig, damit
   die Bezeichnung als Spalte lesbar bleibt und der Wert daneben steht. */
.steckbrief > div {
  padding: .6rem 0;
  border-top: 1px solid var(--line);
}
.steckbrief > div:first-child { border-top: 0; padding-top: 0; }
.steckbrief dt {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: .2rem;
}
.steckbrief dd { margin: 0; }

@media (min-width: 30rem) {
  .steckbrief > div {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 1rem;
    align-items: baseline;
  }
  .steckbrief dt { margin-bottom: 0; }
}

/* Die engere Fassung steht in den acht Gewässerkarten, wo weniger Platz ist. */
.steckbrief-eng > div { padding: .5rem 0; font-size: .95rem; }
@media (min-width: 30rem) {
  .steckbrief-eng > div { grid-template-columns: 6.5rem 1fr; gap: .85rem; }
}

/* Hakenliste. Das Zeichen kommt aus CSS, nicht aus dem Text: sonst läse ein
   Vorleser bei jedem Punkt „Häkchen" mit vor. */
.liste-haken { list-style: none; margin: 0; padding: 0; }
.liste-haken li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .55rem;
}
.liste-haken li:last-child { margin-bottom: 0; }
.liste-haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--signal);
}

/* Sperrzeiten. Monospace, damit die Ziffern untereinander stehen und man
   die Zeiträume vergleichen kann, ohne zu rechnen. */
.sperrliste { list-style: none; margin: 0; padding: 0; }
.sperrliste li {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  padding: .5rem .85rem;
  background: var(--panel-alt, #f2efe9);
  border-left: 3px solid var(--signal);
  border-radius: 2px;
  margin-bottom: .4rem;
}
.sperrliste li:last-child { margin-bottom: 0; }

/* Regelliste. Die Nummern stehen im Original der Gewässerordnung und werden
   am Wasser zitiert, deshalb sind sie sichtbar und gezählt statt dekoriert. */
.regelliste { list-style: none; margin: 0; padding: 0; counter-reset: regel; }
.regelliste > li {
  counter-increment: regel;
  position: relative;
  padding: 1.4rem 0 1.4rem 3.25rem;
  border-top: 1px solid var(--line);
}
.regelliste > li:first-child { border-top: 0; padding-top: 0; }
.regelliste > li::before {
  content: counter(regel, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.4rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 500;
  color: var(--signal);
}
.regelliste > li:first-child::before { top: 0; }
.regelliste h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 .35rem;
}
.regelliste p { margin: 0; color: var(--ink-2); }

/* Fünf Hilfsklassen, die im gebauten Tailwind fehlen, weil sie erst mit
   diesen Abschnitten dazugekommen sind. */
.border-l-gold { border-left-color: var(--gold); }
.max-w-\[64ch\] { max-width: 64ch; }
.pt-4 { padding-top: 1rem; }
.text-\[0\.92rem\] { font-size: .92rem; }
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   11. GEWÄSSERLISTE AUF DER STARTSEITE

   Acht Zeilen, je Gewässer eine: links der Name, rechts der Verein, dem es
   gehört. Auf schmalen Geräten untereinander, sonst nebeneinander mit einer
   Punktlinie dazwischen, damit das Auge die Zuordnung halten kann.
   -------------------------------------------------------------------------- */
.gewaesserliste { list-style: none; margin: 0; padding: 0; }
/* Keine Trennlinien zwischen den Zeilen: Die Punktlinie in der Zeile fuehrt
   das Auge bereits von links nach rechts. Eine zweite Linie quer dazu macht
   aus acht Namen ein Gitter, und das Gitter erdrueckt die Namen. */
.gewaesserliste li { padding: .62rem 0; }
.gewaesserliste li:first-child { padding-top: 0; }
.gewaesserliste li:last-child { padding-bottom: 0; }
.gew-name { display: block; font-weight: 600; }
.gew-verein {
  display: block;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--ink-2);
  margin-top: .15rem;
}

@media (min-width: 30rem) {
  .gewaesserliste li {
    display: flex;
    align-items: baseline;
    gap: .75rem;
  }
  /* Die Punktlinie füllt den Rest der Zeile und hält Name und Verein
     optisch zusammen, ohne eine Tabelle zu brauchen. */
  .gewaesserliste li::after {
    content: "";
    order: 1;
    flex: 1 1 auto;
    height: 0;
    border-bottom: 1px dotted var(--line-stark, #c3c0b7);
    transform: translateY(-.28em);
  }
  .gew-name { order: 0; }
  .gew-verein { order: 2; margin-top: 0; text-align: right; flex: 0 0 auto; }
}

/* Fehlt ebenfalls im gebauten Tailwind. */
.max-w-\[56ch\] { max-width: 56ch; }

/* --------------------------------------------------------------------------
   12. KARTENLINKS

   Je Gewässer ein Link auf Google Maps mit den Koordinaten aus dem Leitfaden
   der AIG Maintal.

   Bewusst ein Link und keine eingebettete Karte: Eine eingebettete Karte lädt
   beim Seitenaufruf ungefragt von Google und überträgt die IP-Adresse jedes
   Besuchers. Das bräuchte ein Einwilligungsbanner. Ein Link überträgt nichts,
   solange niemand darauf klickt.
   -------------------------------------------------------------------------- */
.kartenlinks {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}

.kartenlink {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--signal);
  text-decoration: none;
  /* Die Unterstreichung sitzt am inneren span, damit das Symbol nicht
     mit unterstrichen wird. */
}
.kartenlink span {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.kartenlink:hover span,
.kartenlink:focus-visible span { text-decoration-thickness: 2px; }
.kartenlink:hover { color: var(--signal-hover); }

.kartenlink-pin {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  fill: currentColor;
}
/* Der Punkt im Pin wird ausgestanzt, sonst ist der Kopf eine volle Fläche. */
.kartenlink-pin circle { fill: var(--panel, #fff); }

/* Auf dunklem Grund trägt der Link die Goldfarbe, Rot verschwindet dort. */
.auf-dunkel .kartenlink { color: var(--gold); }
.auf-dunkel .kartenlink:hover { color: #fff; }
.auf-dunkel .kartenlink-pin circle { fill: var(--dunkel, #1a1b1c); }
.auf-dunkel .kartenlinks { border-top-color: rgba(255, 255, 255, .18); }

/* Die Gewässerliste auf der Startseite verlinkt jetzt auf die Sprungmarken
   der Detailseite. Der Name bleibt optisch ein Name, kein Knopf. */
/* Im Ruhezustand ohne Unterstrich: acht unterstrichene Namen untereinander
   lesen sich als Fehler, nicht als Angebot. Beim Zeigen und bei
   Tastaturfokus kommt der Unterstrich zurueck, damit erkennbar bleibt,
   dass die Namen anklickbar sind. */
a.gew-name {
  color: inherit;
  text-decoration: none;
}
a.gew-name:hover,
a.gew-name:focus-visible {
  color: var(--signal);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   13. FUSSZEILEN-LINKS OHNE UNTERSTRICH

   Fünf unterstrichene Wörter nebeneinander unter einer Trennlinie geben dem
   Fuß ein unruhiges Muster. Im Ruhezustand steht deshalb nur Text; beim
   Zeigen und bei Tastaturfokus kommt der Unterstrich zurück, damit erkennbar
   bleibt, dass es Links sind.

   Die E-Mail-Adresse behält ihren goldenen Unterstrich. Sie ist die einzige
   Handlung im Fuß und darf sich abheben.
   -------------------------------------------------------------------------- */
.fuss-link:not([class*="decoration-gold"]) {
  text-decoration: none;
}
.fuss-link:not([class*="decoration-gold"]):hover,
.fuss-link:not([class*="decoration-gold"]):focus-visible {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------------
   14. ZWEITE GRUPPE IM HANDY-MENÜ

   Die Fußzeilen-Ziele sind jetzt auch über das Menü erreichbar, aber unter
   einer eigenen Überschrift und kleiner gesetzt. Sonst stünden neun
   gleichgewichtige Zeilen untereinander und die fünf Hauptbereiche gingen
   darin unter.

   Zwei Hilfsklassen, die im gebauten Tailwind fehlen.
   -------------------------------------------------------------------------- */
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.text-\[11px\] { font-size: 11px; }

/* Die Zwischenüberschrift im Handy-Menü folgt derselben Regel wie die
   Einträge darunter: Mit dem Finger bedient wird mittig gesetzt, mit der
   Maus linksbündig. Eine feste Ausrichtung würde in einem der beiden Fälle
   aus der Reihe fallen. */
@media (pointer: coarse) {
  [data-mobilmenue] .menue-gruppe { text-align: center; }
}

/* --------------------------------------------------------------------------
   15. TERMINLISTE

   Eine Zeile je Termin: Datum, Sache, Zeit. Das Datum in Monospace mit
   Tabellenziffern, damit die Punkte untereinander stehen und man die Liste
   senkrecht abfahren kann.

   Gelaufene Termine werden nicht entfernt. Der Jahresplan ist eine Auskunft,
   und wer im Herbst nachsieht, will auch wissen, was er verpasst hat. Sie
   werden nur abgetönt, damit sie nicht mit dem Kommenden verwechselt werden.
   -------------------------------------------------------------------------- */
.terminliste { list-style: none; margin: 0; padding: 0; }

.termin {
  display: grid;
  grid-template-columns: 1fr;
  gap: .2rem .9rem;
  padding: .85rem 0;
  border-top: 1px solid var(--line);
}
.termin:first-child { border-top: 0; padding-top: 0; }

.termin-datum {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--signal);
}
.termin-titel { display: block; font-weight: 600; }
.termin-ort { display: block; font-size: .9rem; color: var(--ink-2); }

.termin-rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-top: .15rem;
}
.termin-zeit {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  white-space: nowrap;
}
.termin-marke {
  display: inline-flex;
  align-items: center;
  padding: .12rem .45rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  border-radius: 2px;
  white-space: nowrap;
}

@media (min-width: 40rem) {
  .termin {
    grid-template-columns: 6.6rem 1fr auto;
    align-items: baseline;
  }
  .termin-rechts { justify-content: flex-end; margin-top: 0; }
}

/* Gelaufen: abgetönt, aber lesbar. Kein Durchstreichen, das macht Ziffern
   unleserlich und behauptet außerdem, der Termin sei ausgefallen. */
.termin.vergangen { opacity: .48; }
.termin.vergangen .termin-datum { color: var(--ink-2); }
.termin.vergangen .termin-marke { background: var(--line-stark) !important; color: var(--ink); }

/* --------------------------------------------------------------------------
   16. NACHTRÄGE AUS DER GESAMTPRÜFUNG

   Der Ladepfeil war nur im Kopf der Unterlagen-Seite definiert, wird aber
   auch bei den PDF-Verweisen auf der Gewässer- und der Mitgliedschaftsseite
   benutzt. Ohne Regel hätte das Symbol dort keine Größe.
   Dazu zwei Abstandsklassen, die im gebauten Tailwind fehlen.
   -------------------------------------------------------------------------- */
.lade-pfeil { width: 1rem; height: 1rem; flex: 0 0 auto; }
.-mt-4 { margin-top: -1rem; }
.pt-5 { padding-top: 1.25rem; }

/* --------------------------------------------------------------------------
   17. DUNKLE KARTE AUF HELLEM GRUND

   Die Kombination „karte bg-dunkel" war kaputt: .karte setzt einen hellen
   Hintergrund und lädt nach Tailwind, also gewann sie gegen bg-dunkel. Die
   Karte stand fast weiß da, mit heller Schrift darauf, Kontrast 1,7 : 1.
   Vier Stellen: „Zum ersten Mal hier?" (Start), „Bereit?" (Mitgliedschaft),
   „In einem Satz" (Gewässer), „Wie man uns erreicht" (Vorstand).

   Hier bekommt die Kombination ihren eigenen, spezifischeren Satz. Farbe
   wie die dunklen Abschnitte, damit die Karte zur Seite gehört und nicht
   zu einem fremden Bausatz. Der Schatten fällt weg: Auf Dunkel wirkt er
   wie Schmutz. Statt dessen eine feine helle Kante.
   -------------------------------------------------------------------------- */
.karte.bg-dunkel {
  background: var(--dunkel);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}
.karte.bg-dunkel:hover {
  box-shadow: none;
  border-color: rgba(242, 179, 37, .45);
}

/* --------------------------------------------------------------------------
   18. TERMINLISTE: UHRZEITEN IN EINER SPALTE

   Vorher teilten sich Uhrzeit und Marke die rechte Spalte. Zeilen mit Marke
   schoben die Uhrzeit nach links, Zeilen ohne nicht, und die Zeiten standen
   im Zickzack. Jetzt steht rechts nur die Uhrzeit, rechtsbündig, damit „Uhr"
   auf allen Zeilen dieselbe Kante bildet. Die Marke hängt unter dem Ort,
   dort beschreibt sie den Termin, zu dem sie gehört.
   Überschreibt Abschnitt 15.
   -------------------------------------------------------------------------- */
.termin-zeit {
  display: block;
  margin-top: .15rem;
}
.termin-sache .termin-marke {
  margin-top: .45rem;
}
@media (min-width: 40rem) {
  .termin-zeit {
    text-align: right;
    margin-top: 0;
    align-self: baseline;
  }
}

/* --------------------------------------------------------------------------
   19. HINTERGRUNDVIDEO

   Liegt an derselben Stelle wie das Hintergrundbild und deckt es zu, sobald
   es abspielbereit ist. Vorher und darunter bleibt das Standbild sichtbar,
   deshalb gibt es nie einen leeren Rahmen.

   Eingeschaltet wird je Abschnitt über data-hintergrundvideo im HTML. Ohne
   dieses Attribut passiert hier gar nichts, siehe Abschnitt 7 in site.js.
   -------------------------------------------------------------------------- */
.bildabschnitt > .grundvideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.bildabschnitt > .grundvideo.laeuft { opacity: 1; }

/* Reduzierte Bewegung: Video bleibt unsichtbar, das Standbild trägt. Die
   Regel ist doppelt gesichert, weil JavaScript das Video dann gar nicht
   erst lädt. */
@media (prefers-reduced-motion: reduce) {
  .bildabschnitt > .grundvideo { display: none; }
}

/* --------------------------------------------------------------------------
   20. HELLE MITTE (Umbau 09.09.2026)

   Die Bildabschnitte der Startseite sind hell geworden; die Verweise in den
   Karten brauchen dafür Unterstreichungen in Linien- und Signalfarbe, die
   im vorkompilierten Tailwind fehlen. Nachgetragen nach dem Muster in 16.
   -------------------------------------------------------------------------- */
.decoration-linie { text-decoration-color: var(--line); }
.decoration-signal { text-decoration-color: var(--signal); }
.hover\:decoration-signal:hover { text-decoration-color: var(--signal); }

/* Sechs Einträge in der oberen Leiste: Auf der kleinsten Desktopstufe
   (1024 bis 1279 px) umbricht „Gewässer & Bestimmungen" sonst in zwei Zeilen.
   Etwas enger, etwas kleiner, nie umbrechen. Ab 1280 px gilt Tailwind. */
nav[aria-label="Hauptnavigation"] .nav-link { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
  nav[aria-label="Hauptnavigation"] .nav-link {
    padding-left: .5rem;
    padding-right: .5rem;
    font-size: .95rem;
  }
}

/* Fusszeile im Gleichschritt mit dem Auftakt aufgehellt. Die Utility
   bg-dunkeltief bleibt im HTML stehen, die Farbe kommt von hier. */
footer.bg-dunkeltief { background-color: #2c2d30; }

/* --------------------------------------------------------------------------
   21. FÄNGE: GROSSANSICHT
   Der Dialog füllt den Bildschirm mit dunklem Grund, das Bild sitzt mittig
   und wird nie beschnitten. Ein Kreuz oben rechts, sonst nichts.
   -------------------------------------------------------------------------- */
dialog.fangansicht {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  background: transparent;
  display: none;
  place-items: center;
  cursor: zoom-out;
}
dialog.fangansicht[open] { display: grid; }
dialog.fangansicht::backdrop { background: rgba(20, 21, 22, .94); }
dialog.fangansicht img {
  max-width: 94vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
dialog.fangansicht img:not([src]) { display: none; }
.fangansicht-zu {
  position: fixed;
  top: .75rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.fangansicht-zu:hover,
.fangansicht-zu:focus-visible { background: var(--gold); color: var(--dunkel-tief); }

/* --------------------------------------------------------------------------
   22. KARTE ALS SPRUNG
   Die acht Vereinskarten auf der Gewässerseite sind Links zum jeweiligen
   Steckbrief. Beim Zeigen färbt sich der Gewässername signalrot und die
   Karte hebt sich leicht; mehr braucht es nicht, um als Link erkannt zu werden.
   -------------------------------------------------------------------------- */
a.karte-sprung {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
a.karte-sprung:hover,
a.karte-sprung:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(28, 27, 25, .1);
  border-color: var(--line-stark);
}
a.karte-sprung:hover .text-ink2,
a.karte-sprung:focus-visible .text-ink2 { color: var(--signal); }