/* ============================================================
   SFV BURGDORF  -  stil.css
   Ein einziges Stylesheet fuer die gesamte oeffentliche Seite.

   INHALT
     1  Schriften (lokal)
     2  Farben und Masse: heller Modus
     3  Farben: dunkler Modus
     4  Grundlagen und Reset
     5  Typografie
     6  Layout: Mitte, Abschnitt, Raster
     7  Kopfzeile und Navigation
     8  Schaltflaechen, Chips, Marken
     9  Seitenkopf (Hero)
    10  Kennzahlen
    11  Karten: Gewaesser, Personen, Taetigkeiten
    12  Termine
    13  Blog und Bilder
    14  Aufklappbares (Satzung, Regeln, Schonzeiten)
    15  Baender und Aufrufe
    16  Formulare
    17  Drehrad (Fang melden)
    18  Fusszeile
    19  Bewegung
   ============================================================ */


/* ============================================================
   1  SCHRIFTEN  -  lokal, kein Google, kein Fremdserver

   Die Dateien liegen unter /fonts/. Das ist eine bewusste
   Entscheidung: eine eingebundene Webschrift von fremdem Server
   uebertraegt die IP-Adresse jedes Besuchers dorthin. Genau
   deshalb kommt diese Seite ohne Einwilligungsbanner aus.
   DM Sans ist eine Variable Font, eine Datei deckt 100-1000 ab.

   ------------------------------------------------------------
   HERKUNFT UND LIZENZ  -  BITTE NICHT ENTFERNEN
   ------------------------------------------------------------

   Copyright 2020 The Anton Project Authors
   (https://github.com/googlefonts/AntonFont.git)

   Copyright 2014 The DM Sans Project Authors
   (https://github.com/googlefonts/dm-fonts)

   Beide Zeilen stehen hier woertlich so, wie sie in den
   OFL.txt der Projekte stehen. Am 25. August 2026 geprueft.

   Beide stehen unter der SIL OPEN FONT LICENSE, Version 1.1.
   Erlaubt sind Nutzung, Selbst-Hosten, Veraenderung und
   Weitergabe, auch kommerziell. Nicht erlaubt ist der Verkauf
   der Schriftdateien fuer sich allein.

   Die OFL verlangt, dass Copyright-Hinweis und Lizenztext die
   Schriftdateien begleiten. Der vollstaendige Text liegt daher
   zweimal im Projekt:

       fonts/LIESMICH-Schriften-Lizenz.txt
           -> reist mit den Schriftdateien mit, wenn sie
              jemals weitergegeben werden

       lizenztexte/schriften-anton-dmsans-OFL-1.1.txt
           -> wird unter /lizenzen auf der Website angezeigt

   Beide Dateien bitte behalten, solange die Schriften
   verwendet werden.
   ============================================================ */
@font-face{
  font-family:'Anton';
  font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/anton-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Anton';
  font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/anton-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'DM Sans';
  font-style:normal; font-weight:100 1000; font-display:swap;
  src:url(../fonts/dmsans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';
  font-style:normal; font-weight:100 1000; font-display:swap;
  src:url(../fonts/dmsans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ============================================================
   2  FARBEN UND MASSE  -  heller Modus (Standard)

   Die Palette stammt unveraendert aus AngelvereinV2.

     Royalblau  #2A319A   Marke und Handlung. Alles Anklickbare.
     Teal-Gruen #1A6B5E   Akzent. Sparsam: Hover, Fokus, Marken.
     Warmes Off-White     Flaeche. Kein grelles Weiss.

   Faustregel: rund 70 Prozent Blau und Neutral, 10 Prozent
   Gruen, der Rest Flaeche.

   KEINE neuen Hexwerte im Dokument erfinden. Jede Farbe steht
   hier und in Abschnitt 3, sonst bricht der Dunkelmodus.
   ============================================================ */
:root{
  /* Marke */
  --brand:      #2A319A;
  --brand-700:  #232a82;
  --brand-300:  #6b72c9;
  --accent:     #1A6B5E;
  --accent-600: #155a4f;
  --accent-300: #3f9384;

  /* Flaechen und Text */
  --bg:          #f0eee7;
  --surface:     #faf9f4;
  --surface-alt: #e7e3d8;
  --text:        #1f2330;
  --text-muted:  #565a6d;
  --line:        #d9d5c9;

  /* Funktion */
  --focus:      #1A6B5E;
  --focus-ring: 0 0 0 3px rgba(26,107,94,.45);
  --danger:     #b3402f;
  --erfolg:     #1A6B5E;
  --jugend:     #5E8C3A;

  /* Blog-Kategorien. Jeder Ton ist gegen --surface gerechnet und
     erreicht WCAG AA. Beim Nachjustieren nachrechnen, nicht schaetzen. */
  --kat-blau:   #2A319A;
  --kat-gruen:  #1A6B5E;
  --kat-gold:   #8a6d1f;
  --kat-stahl:  #47566b;
  --kat-kupfer: #A65D3A;

  /* Dunkle Flaechen, modusunabhaengig dunkel (Hero, Baender) */
  --tief:         #0c1714;
  --auf-tief:     #ffffff;
  --auf-tief-still: rgba(255,255,255,.78);

  /* Masse */
  --maxw:      1180px;
  --schmal:    720px;
  --rund:      18px;
  --rund-klein:10px;
  --pille:     999px;
  --luft:      clamp(16px,3vw,32px);
  --rand-x:    clamp(20px,5vw,56px);

  /* Schrift */
  --schrift-display: "Anton", Impact, sans-serif;
  --schrift-text:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Schatten, in den Grundton getoent statt reinem Schwarz */
  --schatten-s: 0 2px 8px rgba(20,26,43,.07);
  --schatten-m: 0 10px 30px rgba(20,26,43,.10);
  --schatten-l: 0 26px 55px rgba(12,23,20,.35);

  /* WICHTIG, und lange vergessen: Damit weiss der Browser, in
     welchem Modus er seine EIGENEN Bedienelemente zeichnen soll.
     Betroffen sind der Kalender hinter einem Datumsfeld, die
     Uhrzeitauswahl, aufklappende Listen und die Bildlaufleiste.

     Ohne diese Zeile zeichnet der Browser sie immer hell. Im
     Dunkelmodus stand dann ein schwarzes Kalendersymbol auf
     dunklem Feld, praktisch unsichtbar, und beim Klick sprang
     ein grellweisser Kalender auf. Das sah nicht nach Absicht
     aus, sondern nach Fehler. */
  color-scheme: light;
}


/* ============================================================
   3  DUNKLER MODUS

   Drei Bloecke sind noetig:
     a) prefers-color-scheme  -> folgt dem Betriebssystem
     b) [data-modus="dunkel"] -> Besucher hat dunkel gewaehlt
     c) [data-modus="hell"]   -> Besucher hat auf einem dunkel
        eingestellten System zurueck auf hell geschaltet

   Ohne (c) liesse sich auf einem dunklen System nicht zurueck
   auf hell stellen. Eine neue Farbe muss in ALLE passenden
   Bloecke.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root:not([data-modus="hell"]){
    --brand:      #7d9ce0;
    --brand-700:  #9bb3ea;
    --brand-300:  #3a4196;
    --accent:     #4cc0a8;
    --accent-600: #6fcfbb;
    --accent-300: #2c6f62;

    --bg:          #25282a;
    --surface:     #2e3133;
    --surface-alt: #373a3c;
    --text:        #f3eee1;
    --text-muted:  #bdb7a8;
    --line:        #43474a;

    --focus:      #4cc0a8;
    --focus-ring: 0 0 0 3px rgba(76,192,168,.5);
    --danger:     #d8745f;
    --erfolg:     #4cc0a8;
    --jugend:     #8fbf60;

    --kat-blau:   #7d9ce0;
    --kat-gruen:  #4cc0a8;
    --kat-gold:   #d8bb66;
    --kat-stahl:  #a3b3c9;
    --kat-kupfer: #d98f66;

    --schatten-s: 0 2px 8px rgba(0,0,0,.30);
    --schatten-m: 0 10px 30px rgba(0,0,0,.38);

    color-scheme: dark;
  }
}
:root[data-modus="dunkel"]{
  --brand:      #7d9ce0;
  --brand-700:  #9bb3ea;
  --brand-300:  #3a4196;
  --accent:     #4cc0a8;
  --accent-600: #6fcfbb;
  --accent-300: #2c6f62;

  --bg:          #25282a;
  --surface:     #2e3133;
  --surface-alt: #373a3c;
  --text:        #f3eee1;
  --text-muted:  #bdb7a8;
  --line:        #43474a;

  --focus:      #4cc0a8;
  --focus-ring: 0 0 0 3px rgba(76,192,168,.5);
  --danger:     #d8745f;
  --erfolg:     #4cc0a8;
  --jugend:     #8fbf60;

  --kat-blau:   #7d9ce0;
  --kat-gruen:  #4cc0a8;
  --kat-gold:   #d8bb66;
  --kat-stahl:  #a3b3c9;
  --kat-kupfer: #d98f66;

  --schatten-s: 0 2px 8px rgba(0,0,0,.30);
  --schatten-m: 0 10px 30px rgba(0,0,0,.38);

  color-scheme: dark;
}


/* ============================================================
   4  GRUNDLAGEN
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--schrift-text);
  font-size:clamp(1rem,.97rem + .18vw,1.06rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;display:block;}
img{height:auto;}

a{color:var(--brand);text-underline-offset:.18em;text-decoration-thickness:.08em;}
a:hover{color:var(--accent);}

:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px;}

.icon{flex:none;}

/* Nur fuer Screenreader: unsichtbar fuers Auge, lesbar fuers
   Vorleseprogramm.

   HERKUNFT UND LIZENZ - BITTE NICHT ENTFERNEN
   Dieser Regelsatz ist als "visually-hidden" bzw. "sr-only"
   aus dem Projekt HTML5 Boilerplate bekannt und steht dort
   unter der MIT-Lizenz.

       Copyright (c) HTML5 Boilerplate
       https://html5boilerplate.com

   Lizenztext im Wortlaut: lizenztexte/html5-boilerplate-MIT.txt,
   angezeigt unter /lizenzen auf der Website.

   Ob neun Deklarationen ueberhaupt schutzfaehig sind, ist
   fraglich, und die Regel steht so oder aehnlich in hunderten
   Projekten. Der Hinweis kostet zwei Zeilen, das Weglassen
   koennte teuer werden.

   Kein display:none und kein visibility:hidden: beides nimmt
   den Text auch dem Vorleseprogramm weg, und dann ist die
   Beschriftung fuer niemanden mehr da. */
.nur-vorlesen{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Sprungmarke: sichtbar, sobald sie den Fokus bekommt */
.sprungmarke{
  position:absolute;left:12px;top:-100px;z-index:200;
  background:var(--brand);color:#fff;padding:12px 20px;
  border-radius:var(--pille);font-weight:700;text-decoration:none;
  transition:top .18s;
}
.sprungmarke:focus{top:12px;color:#fff;}


/* ============================================================
   5  TYPOGRAFIE  -  zwei Stimmen

   Anton, gemischt gesetzt: nur h1 und h2. Die grossen Momente.
   DM Sans 700: h3 und alles darunter. Die ruhige Stimme.

   Anton ist schmal und kraeftig. Unter etwa 28 px wird sie
   unruhig, deshalb steht sie nie im Fliesstext. Und sie steht
   nie in Versalien: grosse Versalien wirken laut, dieselbe
   Schrift gemischt gesetzt klingt freundlich.
   ============================================================ */
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.12;text-wrap:balance;}

h1{
  font-family:var(--schrift-display);
  font-weight:400;
  font-size:clamp(2.4rem,1.6rem + 3.4vw,4.1rem);
  letter-spacing:-.005em;
}
h2{
  font-family:var(--schrift-display);
  font-weight:400;
  font-size:clamp(1.9rem,1.4rem + 2.1vw,2.9rem);
  letter-spacing:-.005em;
}
h3{font-size:clamp(1.14rem,1.08rem + .3vw,1.32rem);font-weight:700;line-height:1.3;}
h4{font-size:1.02rem;font-weight:700;}

p{margin:0 0 1em;max-width:68ch;}
p:last-child{margin-bottom:0;}

.gross{font-size:clamp(1.06rem,1rem + .35vw,1.22rem);color:var(--text-muted);}
.still{color:var(--text-muted);}
.betont{color:var(--accent);}

/* Zahl im Fliesstext, z. B. eine Kennzahl */
.zahl{font-variant-numeric:tabular-nums;}

.text-liste{margin:0 0 1em;padding-left:1.15em;}
.text-liste li{margin-bottom:.4em;max-width:66ch;}


/* ============================================================
   6  LAYOUT
   ============================================================ */
.mitte{width:min(var(--maxw),100%);margin-inline:auto;padding-inline:var(--rand-x);}
.mitte-schmal{width:min(var(--schmal),100%);margin-inline:auto;}

.abschnitt{padding-block:clamp(56px,8vw,110px);}
.abschnitt--eng{padding-block:clamp(40px,5vw,68px);}
.abschnitt--flaeche{background:var(--surface);}

/* Abschnittskopf. Ueberschrift und Text stehen untereinander,
   nicht als Kopfzeile links plus Absatz rechts: eine Sektion
   hat eine Aussage, nicht zwei nebeneinander. */
.kopf{margin-bottom:clamp(28px,4vw,48px);max-width:60ch;}
.kopf p{margin-top:.6em;}

/* ------------------------------------------------------------
   Blockkopf mit durchlaufender Linie

   Aus AngelvereinV2 uebernommen: Ueberschrift links, daneben
   eine feine Linie bis zum rechten Rand.

   Wofuer das gut ist: Auf Seiten wie "Fang melden" und
   "Mitglied werden" folgen mehrere Arbeitsschritte
   aufeinander. Ohne Beschriftung sieht man zwar Kaesten, weiss
   aber nicht, wo man gerade ist. Die Linie teilt die Seite in
   Abteile, ohne einen weiteren Rahmen zu zeichnen, und kostet
   keine zusaetzliche Flaeche.

   Die Ueberschrift darin ist eine h3: Sie steht unter der h2
   des Abschnitts. Ebenen nicht ueberspringen.
   ------------------------------------------------------------ */
.linien-kopf{
  display:flex;align-items:baseline;gap:16px;
  margin-bottom:clamp(16px,2vw,22px);
}
.linien-kopf h3{margin:0;flex:none;}
.linien-kopf .linie{
  flex:1;height:1px;background:var(--line);
  /* Die Grundlinie der Schrift sitzt tiefer als die optische
     Mitte. Ohne diese Korrektur klebt die Linie am Text. */
  transform:translateY(-4px);
}
/* Bewusst KEINE Schrittnummern ("Schritt 1 von 3") daneben.
   Die Ueberschrift sagt bereits, worum es geht, und eine Nummer
   davor macht aus einer klaren Ansage eine Formularstrecke. */


/* ============================================================
   7  KOPFZEILE UND NAVIGATION

   Eine Zeile am Desktop, hoechstens 76 px hoch. Passt das Menue
   nicht mehr, kommen Punkte weg oder werden kuerzer - eine
   zweizeilige Navigation ist kaputt, kein Feature.
   ============================================================ */
.kopfzeile{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)){ .kopfzeile{background:var(--bg);} }

.kopfzeile-innen{
  width:min(var(--maxw),100%);margin-inline:auto;padding-inline:var(--rand-x);
  height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px;
}

.marke{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);flex:none;}
.marke img{width:42px;height:42px;}
.marke-name{font-family:var(--schrift-display);font-size:1.02rem;line-height:1.08;letter-spacing:.005em;}
.marke-name span{display:block;font-family:var(--schrift-text);font-size:.7rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-top:3px;}

.nav{display:flex;align-items:center;gap:6px;}
.nav a{
  display:inline-block;padding:9px 13px;border-radius:var(--pille);
  font-size:.9rem;font-weight:600;text-decoration:none;color:var(--text);
  white-space:nowrap;transition:background .16s,color .16s;
}
.nav a:hover{background:var(--surface-alt);color:var(--text);}
.nav a[aria-current="page"]{background:var(--brand);color:#fff;}

.werkzeuge{display:flex;align-items:center;gap:8px;flex:none;}
.rund-knopf{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--pille);
  background:var(--surface);color:var(--text);cursor:pointer;transition:.16s;
}
.rund-knopf:hover{border-color:var(--brand);color:var(--brand);}
.klappknopf{display:none;}

/* Ab hier passt das Menue nicht mehr in eine Zeile */
@media (max-width:1080px){
  .nav{
    position:fixed;inset:76px 0 auto;z-index:99;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:14px var(--rand-x) 22px;
    box-shadow:var(--schatten-m);
    display:none;
  }
  .nav.ist-offen{display:flex;}
  .nav a{padding:13px 16px;border-radius:var(--rund-klein);font-size:1rem;}
  .klappknopf{display:grid;}
  .marke-name span{display:none;}
}
@media (max-width:420px){
  .kopfzeile-innen{padding-inline:18px;gap:10px;}
  .marke-name{font-size:.9rem;}
}


/* ------------------------------------------------------------
   Aktueller Hinweis

   Ein schmales Band unter der Kopfzeile, fuer Sperrungen und
   kurzfristige Absagen. Zwei Toene: Blaugruen fuer Auskuenfte,
   Rot fuer Sperrungen und Absagen.

   Rot ist bewusst die Ausnahme. Ein Band, das staendig rot
   leuchtet, wird nach drei Tagen ueberlesen, und dann fehlt die
   Farbe genau dann, wenn sie gebraucht wird.
   ------------------------------------------------------------ */
.ansage{
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--accent) 12%, var(--surface));
  color:var(--text);
}
.ansage--warnung{
  background:color-mix(in srgb, var(--danger) 12%, var(--surface));
  border-bottom-color:color-mix(in srgb, var(--danger) 35%, var(--line));
}
.ansage-innen{
  width:min(var(--maxw),100%);margin-inline:auto;padding-inline:var(--rand-x);
  padding-block:11px;
  display:flex;align-items:flex-start;gap:12px;
}
.ansage-innen > .icon{flex:none;margin-top:2px;color:var(--accent);}
.ansage--warnung .ansage-innen > .icon{color:var(--danger);}
.ansage p{margin:0;flex:1;font-size:.92rem;line-height:1.5;max-width:none;}
.ansage a{font-weight:700;white-space:nowrap;}

.ansage-zu{
  flex:none;display:grid;place-items:center;
  width:30px;height:30px;margin:-3px -6px 0 0;
  border:0;border-radius:var(--pille);background:transparent;
  color:var(--text-muted);cursor:pointer;transition:.15s;
}
.ansage-zu:hover{background:var(--surface);color:var(--text);}
.ansage-zu:focus-visible{box-shadow:var(--focus-ring);}

/* Beim Drucken hat ein Hinweisband nichts verloren */
@media print{ .ansage{display:none !important;} }


/* ============================================================
   8  SCHALTFLAECHEN, CHIPS, MARKEN

   Formregel im ganzen Projekt, ohne Ausnahme:
     Schaltflaechen und Chips  ->  vollrund
     Karten, Bilder, Panels    ->  18 px
     Eingabefelder             ->  10 px
   ============================================================ */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--pille);border:1.5px solid transparent;
  font-family:var(--schrift-text);font-size:.95rem;font-weight:700;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  background:var(--brand);color:#fff;
  transition:background .16s,border-color .16s,color .16s,transform .1s;
}
.knopf:hover{background:var(--brand-700);color:#fff;}
.knopf:active{transform:translateY(1px);}
.knopf:focus-visible{box-shadow:var(--focus-ring);}

.knopf--rand{background:transparent;border-color:var(--line);color:var(--text);}
.knopf--rand:hover{background:transparent;border-color:var(--brand);color:var(--brand);}

/* Auf dunklem Grund. Ohne diese Variante steht ein Rand-Knopf
   unsichtbar auf dem Foto. */
.knopf--hell{background:#fff;color:var(--tief);}
.knopf--hell:hover{background:#fff;color:var(--tief);opacity:.9;}
.knopf--geist{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;}
.knopf--geist:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;}

.knopf--voll{width:100%;}
.knopf--klein{padding:9px 16px;font-size:.86rem;}

.knopf-reihe{display:flex;flex-wrap:wrap;gap:12px;}

/* Textlink mit Pfeil */
.weiterlink{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:700;font-size:.94rem;text-decoration:none;color:var(--brand);
}
.weiterlink .icon{transition:transform .18s;}
.weiterlink:hover{color:var(--accent);}
.weiterlink:hover .icon{transform:translateX(3px);}

/* Chip: kleine Faktenmarke, z. B. eine Fischart am Gewaesser */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 13px;border-radius:var(--pille);
  border:1px solid var(--line);background:var(--surface);
  font-size:.8rem;font-weight:600;color:var(--text-muted);
  white-space:nowrap;
}
.chip .icon{color:var(--accent);}
.chip-reihe{display:flex;flex-wrap:wrap;gap:7px;}

/* Marke: farbige Kennzeichnung, z. B. Jugendtermin */
.marke-klein{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:var(--pille);
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid currentColor;
}
.marke-jugend{color:var(--jugend);}
.marke-blau{color:var(--kat-blau);}


/* ============================================================
   9  SEITENKOPF (Hero)

   Zwei Bauformen:
     .hero        Startseite, grosses Foto, Text darueber
     .seitenkopf  Unterseiten, flacher, gleiche Sprache

   Der Text liegt auf einem Farbverlauf, nicht direkt auf dem
   Foto. Ohne diesen Verlauf ist Weiss auf hellem Wasser nicht
   lesbar, und genau das passiert bei wechselnden Bildern.
   ============================================================ */
.hero,.seitenkopf{position:relative;isolation:isolate;background:var(--tief);color:var(--auf-tief);}

.hero-foto,.seitenkopf-foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;
}
/* Der Verlauf ueber dem Foto.

   Er ist deutlich heller als zuvor (.78/.58/.86 waren es
   einmal). Das Foto soll ein Foto bleiben und nicht hinter
   einer Milchglasscheibe verschwinden.

   Ungleichmaessig mit Absicht: In der Mitte, wo kein Text
   steht, ist er am duennsten. Unten, wo Ueberschrift und
   Schaltflaechen sitzen, bleibt er kraeftig genug, damit
   weisse Schrift auch auf hellem Wasser lesbar ist. Genau das
   ist der Grund fuer den Verlauf: Die Bilder wechseln, und ein
   Sonnenfleck an der falschen Stelle macht sonst eine ganze
   Ueberschrift unlesbar. */
.hero::after,.seitenkopf::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(12,23,20,.52) 0%, rgba(12,23,20,.26) 42%, rgba(12,23,20,.74) 100%);
}

.hero-innen,.seitenkopf-innen{
  width:min(var(--maxw),100%);margin-inline:auto;padding-inline:var(--rand-x);
}
/* Der Titelbereich fuellt den Bildschirm, egal wie gross er ist.

   Hier stand vorher min(82svh, 720px). Der feste Deckel von
   720 px war der Fehler: Auf einem 1440 px hohen Monitor blieb
   der Titelbereich bei 720 px stehen, und die Haelfte des
   naechsten Abschnitts stand schon im Bild. Der erste Eindruck
   war damit kein Bild mehr, sondern ein halbes Bild mit einer
   angeschnittenen Ueberschrift darunter.

   Ohne Deckel skaliert der Bereich mit. 90svh statt 100svh mit
   Absicht: Der schmale Streifen, der unten noch hervorlugt,
   sagt "hier geht es weiter", ohne einen ganzen Abschnitt
   vorwegzunehmen. svh statt vh, damit die Adressleiste auf dem
   Handy nicht dazwischenfunkt. */
.hero-innen{
  min-height:90svh;
  padding-block:clamp(64px,9vw,96px) clamp(48px,7vw,80px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.seitenkopf-innen{padding-block:clamp(56px,8vw,96px) clamp(40px,6vw,72px);}

.hero h1,.seitenkopf h1{color:#fff;max-width:16ch;}
.hero-text,.seitenkopf-text{
  color:var(--auf-tief-still);max-width:52ch;
  font-size:clamp(1.05rem,1rem + .4vw,1.24rem);
  margin-top:.2em;
}
.hero .knopf-reihe,.seitenkopf .knopf-reihe{margin-top:clamp(24px,3vw,34px);}

/* Hinweis auf ein KI-Bild. Klein, aber es gehoert hin. */
.bildhinweis{
  position:absolute;right:10px;bottom:8px;z-index:1;
  font-size:.68rem;letter-spacing:.05em;color:rgba(255,255,255,.62);
}


/* ============================================================
   10  KENNZAHLEN

   Keine Kartenkaesten. Vier Zahlen brauchen Luft und eine
   Trennlinie, keinen Rahmen um jede einzelne.
   ============================================================ */
.kennzahlen{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,3vw,36px);
}
.kennzahl{border-top:2px solid var(--brand);padding-top:16px;}
.kennzahl b{
  display:block;font-family:var(--schrift-display);font-weight:400;
  font-size:clamp(2rem,1.4rem + 2.2vw,3rem);line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.kennzahl span{display:block;margin-top:8px;font-size:.9rem;color:var(--text-muted);}

/* Auf dunklem Grund */
.auf-tief .kennzahl{border-top-color:rgba(255,255,255,.5);}
.auf-tief .kennzahl b{color:#fff;}
.auf-tief .kennzahl span{color:var(--auf-tief-still);}

@media (max-width:760px){ .kennzahlen{grid-template-columns:repeat(2,1fr);} }


/* ============================================================
   11  KARTEN
   ============================================================ */

/* --- Gewaesser: Bild oben, Fakten unten ------------------- */
.gewaesser-raster{display:grid;gap:clamp(18px,2.6vw,28px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}

.gewaesser-karte{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rund);overflow:hidden;
  box-shadow:var(--schatten-s);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.gewaesser-karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-m);border-color:var(--brand-300);}
.gewaesser-bild{aspect-ratio:16/10;width:100%;object-fit:cover;background:var(--surface-alt);}
.gewaesser-inhalt{padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:12px;flex:1;}
.gewaesser-inhalt h3{margin:0;}
.gewaesser-inhalt p{font-size:.95rem;color:var(--text-muted);margin:0;}
.gewaesser-fuss{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;}

/* Einzelnes Gewaesser auf /gewaesser: abwechselnd Bild links
   und rechts. Hoechstens zwei hintereinander gleich, danach
   bricht die Kennzahlenzeile das Muster. */
.gewaesser-block{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(22px,4vw,52px);align-items:center;
}
.gewaesser-block:nth-child(even) .gewaesser-block-bild{order:2;}
.gewaesser-block + .gewaesser-block{margin-top:clamp(48px,7vw,96px);}
.gewaesser-block-bild{border-radius:var(--rund);overflow:hidden;box-shadow:var(--schatten-m);}
.gewaesser-block-bild img{aspect-ratio:4/3;width:100%;object-fit:cover;}
.gewaesser-daten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0;}
.gewaesser-datum-feld{border-left:2px solid var(--accent);padding-left:12px;}
.gewaesser-datum-feld b{display:block;font-size:.95rem;font-weight:700;}
.gewaesser-datum-feld span{display:block;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:2px;}
.koordinaten{font-variant-numeric:tabular-nums;font-size:.95rem;}

@media (max-width:840px){
  .gewaesser-block{grid-template-columns:1fr;}
  .gewaesser-block:nth-child(even) .gewaesser-block-bild{order:0;}
}

/* --- Taetigkeiten: was der Verein macht -------------------- */
.taetigkeiten{display:grid;gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--rund);overflow:hidden;
  grid-template-columns:repeat(2,1fr);}
.taetigkeit{background:var(--surface);padding:clamp(22px,3vw,34px);
  display:flex;flex-direction:column;gap:10px;}
.taetigkeit .icon{color:var(--accent);}
.taetigkeit h3{margin:0;}
.taetigkeit p{margin:0;font-size:.95rem;color:var(--text-muted);}
@media (max-width:720px){ .taetigkeiten{grid-template-columns:1fr;} }

/* --- Personen: Vorstand, Warte, Media ----------------------

   Aufbau wie in AngelvereinV2: rundes Foto oben, darunter
   zentriert das Amt, der Name und ein kurzer Satz.

   Warum kein Kasten mehr drumherum: Zwoelf umrandete Karten
   nebeneinander ergeben ein Gitter aus Rahmen, und das Auge
   sieht die Rahmen statt der Gesichter. Ohne Rahmen traegt das
   runde Foto die Gliederung, und die Zeilen darunter ordnen
   sich ihm unter. Das ist auch der Grund fuer die Reihenfolge
   Amt vor Name: Wer den Vorstand durchsieht, sucht ein Amt und
   nicht eine Person.

   Zentriert und umbrechend, damit eine einzelne uebrig
   bleibende Karte in der Mitte sitzt und nicht linksbuendig
   allein am Rand steht. Der Verein kann Leute hinzufuegen und
   entfernen, ohne dass das Raster kippt. */
.personen{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(26px,3.5vw,44px);
}
.person{
  flex:0 1 190px;max-width:230px;text-align:center;
}

.person-bild,.person-kuerzel{
  display:block;width:clamp(104px,14vw,148px);aspect-ratio:1;
  margin:0 auto 14px;border-radius:var(--pille);
  object-fit:cover;background:var(--surface-alt);
  border:1px solid var(--line);
}
.person-kuerzel{
  display:grid;place-items:center;
  background:var(--brand);color:#fff;border-color:transparent;
  font-family:var(--schrift-display);font-size:clamp(1.8rem,3vw,2.4rem);
  letter-spacing:.02em;
}

/* Das Amt steht ueber dem Namen und ist die eigentliche
   Orientierung. Klein, in der Akzentfarbe, gesperrt. */
.person em{
  display:block;font-style:normal;
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:5px;
}
.person b{display:block;font-size:1.06rem;line-height:1.25;}
.person p{margin:8px 0 0;font-size:.88rem;color:var(--text-muted);}

/* Der Vorsitz bekommt ein etwas groesseres Foto statt einer
   eigenen Sonderzeile. Das reicht als Hervorhebung und bricht
   die Reihe nicht auf. */
.person--vorsitz{flex-basis:230px;max-width:270px;}
.person--vorsitz .person-bild,
.person--vorsitz .person-kuerzel{width:clamp(124px,17vw,176px);}

@media (max-width:430px){
  .personen{gap:28px;}
  .person{flex-basis:140px;}
}


/* ============================================================
   12  TERMINE
   ============================================================ */

/* Zaehler oben auf der Termin-Seite */
.termin-zaehler{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-top:2px solid var(--brand);padding-top:18px;margin-bottom:clamp(28px,4vw,44px);
}
.termin-zaehler b{
  font-family:var(--schrift-display);font-weight:400;line-height:1;
  font-size:clamp(2.6rem,2rem + 3vw,4rem);color:var(--brand);
  font-variant-numeric:tabular-nums;
}
.termin-zaehler span{font-size:1.05rem;color:var(--text-muted);}

.termin-liste{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0;}

.termin{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2.4vw,24px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rund);
  padding:clamp(16px,2.2vw,22px);
  transition:border-color .18s;
}
.termin:hover{border-color:var(--brand-300);}
.termin--vorbei{background:transparent;opacity:.72;}

.termin-datum{
  width:66px;flex:none;text-align:center;
  border-right:1px solid var(--line);padding-right:clamp(12px,2vw,20px);
}
.termin-datum b{display:block;font-family:var(--schrift-display);font-weight:400;
  font-size:1.85rem;line-height:1;color:var(--brand);font-variant-numeric:tabular-nums;}
.termin-datum span{display:block;font-size:.76rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);margin-top:4px;}
.termin-datum i{display:block;font-style:normal;font-size:.7rem;color:var(--text-muted);}

.termin-inhalt h3{margin:0 0 4px;}
.termin-inhalt p{margin:6px 0 0;font-size:.93rem;color:var(--text-muted);}
.termin-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.85rem;color:var(--text-muted);}
.termin-meta span{display:inline-flex;align-items:center;gap:6px;}
.termin-meta .icon{color:var(--accent);}
.termin-kopfzeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:4px;}

/* "In meinen Kalender". Steht unten am Termin und ist bewusst
   ein Textlink, keine Schaltflaeche: Die eine Handlung, die an
   einem Termin wirklich zaehlt, ist Hingehen, nicht Eintragen. */
.termin-kalender{margin-top:12px;font-size:.88rem;}

@media (max-width:520px){
  .termin{grid-template-columns:1fr;}
  .termin-datum{width:auto;text-align:left;border-right:0;padding-right:0;
    border-bottom:1px solid var(--line);padding-bottom:10px;
    display:flex;align-items:baseline;gap:8px;}
  .termin-datum span,.termin-datum i{margin-top:0;}
}


/* ============================================================
   13  BLOG UND BILDER

   Jeder Beitrag traegt seine Kategoriefarbe: als Leiste oben,
   als Kategoriename und als leicht getoente Flaeche. Damit ist
   der Beitrag vom Rest der Seite farblich abgesetzt, ohne dass
   die Seite bunt wird - der Ton kommt aus einer festen Liste,
   nicht aus freier Wahl.
   ============================================================ */
.kategorie-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,3.5vw,40px);}
.kategorie-filter a{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:var(--pille);
  border:1.5px solid var(--line);background:var(--surface);
  font-size:.88rem;font-weight:600;color:var(--text);text-decoration:none;
  transition:.16s;
}
.kategorie-filter a:hover{border-color:var(--brand);color:var(--brand);}
.kategorie-filter a[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:#fff;}

.beitrag-raster{display:grid;gap:clamp(18px,2.6vw,26px);
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}

.beitrag{
  --ton:var(--kat-blau);
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-top:4px solid var(--ton);
  border-radius:var(--rund);overflow:hidden;
  background:color-mix(in srgb, var(--ton) 5%, var(--surface));
  transition:transform .2s,box-shadow .2s;
}
.beitrag:hover{transform:translateY(-3px);box-shadow:var(--schatten-m);}
.beitrag--blau  {--ton:var(--kat-blau);}
.beitrag--gruen {--ton:var(--kat-gruen);}
.beitrag--gold  {--ton:var(--kat-gold);}
.beitrag--stahl {--ton:var(--kat-stahl);}
.beitrag--kupfer{--ton:var(--kat-kupfer);}

.beitrag-bild{aspect-ratio:3/2;width:100%;object-fit:cover;background:var(--surface-alt);}
.beitrag-inhalt{padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:10px;flex:1;}
.beitrag-kategorie{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ton);
}
.beitrag-inhalt h3{margin:0;}
.beitrag-datum{font-size:.84rem;color:var(--text-muted);}
.beitrag-inhalt p{margin:0;font-size:.94rem;color:var(--text-muted);}
.beitrag-fuss{margin-top:auto;padding-top:14px;}

/* Video im Beitrag.

   Liegt selbst auf unserem Webspace, es wird nichts eingebettet
   und nichts von einem fremden Server geholt. Deshalb kommt die
   Seite auch mit Video ohne Einwilligung aus.

   Das Seitenverhaeltnis steht fest, damit die Karte beim Laden
   nicht springt: Ohne Angabe kennt der Browser die Groesse erst,
   wenn er das Video anfasst, und bei preload="none" tut er das
   nie von allein. */
.beitrag-video{
  width:100%;aspect-ratio:16/9;
  border-radius:var(--rund-klein);
  background:var(--tief);
  margin-top:4px;
}

/* Galerie im Beitrag */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:4px;}
.galerie button{
  padding:0;border:0;border-radius:var(--rund-klein);overflow:hidden;
  cursor:pointer;background:var(--surface-alt);aspect-ratio:1;
}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .25s;}
.galerie button:hover img{transform:scale(1.06);}

/* Lichtkasten */
.lichtkasten{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:20px;
  background:rgba(6,12,11,.88);
}
.lichtkasten.ist-offen{display:grid;}
.lichtkasten img{max-width:min(1100px,100%);max-height:86svh;object-fit:contain;border-radius:var(--rund-klein);}
.lichtkasten-zu{
  position:absolute;top:16px;right:16px;width:46px;height:46px;
  display:grid;place-items:center;border-radius:var(--pille);
  border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.4);color:#fff;cursor:pointer;
}

/* ------------------------------------------------------------
   Gewaesserkarten: Downloadliste

   Eine Zeile je Gewaesser, Name links, Knopf rechts. Keine
   Karten mit Rahmen: Fuenf Zeilen mit je einem Knopf sind eine
   Liste, kein Raster.
   ------------------------------------------------------------ */
.karten-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.karte-zeile{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;
  padding:clamp(14px,2vw,18px) 0;
  border-bottom:1px solid var(--line);
}
.karte-zeile:first-child{border-top:1px solid var(--line);}
.karte-was{display:flex;flex-direction:column;gap:3px;min-width:0;}
.karte-was b{font-size:1.06rem;}
.karte-was .still{font-size:.85rem;}

/* Ein Knopf, der noch nichts tut. Er sieht wie ein Knopf aus,
   damit die Zeile ruhig bleibt, verhaelt sich aber nicht wie
   einer: kein Zeiger, kein Hover, nicht anklickbar. Ein Knopf,
   der beim Klicken nichts macht, aergert mehr als gar keiner. */
.knopf--aus{
  background:transparent;border-color:var(--line);color:var(--text-muted);
  cursor:default;pointer-events:none;
}

/* Leerer Zustand: es gibt in dieser Kategorie noch nichts */
.leer{
  text-align:center;padding:clamp(40px,7vw,72px) 24px;
  border:1.5px dashed var(--line);border-radius:var(--rund);color:var(--text-muted);
}
.leer .icon{color:var(--accent);margin:0 auto 12px;}
.leer p{margin-inline:auto;}


/* ============================================================
   14  AUFKLAPPBARES

   details/summary statt eigenem Skript: das klappt auch ohne
   JavaScript und ist per Tastatur bedienbar, ohne dass wir
   etwas dafuer tun muessen.
   ============================================================ */
.klapp{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rund);
  overflow:hidden;
}
.klapp + .klapp{margin-top:12px;}
.klapp > summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(16px,2.2vw,22px) clamp(18px,2.4vw,26px);
  font-size:1.06rem;font-weight:700;cursor:pointer;list-style:none;
  transition:background .16s;
}
.klapp > summary::-webkit-details-marker{display:none;}
.klapp > summary:hover{background:var(--surface-alt);}
.klapp > summary:focus-visible{box-shadow:var(--focus-ring);}
.klapp > summary .icon{color:var(--brand);transition:transform .22s;}
.klapp[open] > summary .icon{transform:rotate(180deg);}
.klapp[open] > summary{border-bottom:1px solid var(--line);}
.klapp-innen{padding:clamp(18px,2.6vw,28px);}
.klapp-innen > :last-child{margin-bottom:0;}
.klapp-innen h3{margin-top:1.4em;}
.klapp-innen h3:first-child{margin-top:0;}
.klapp-stand{font-size:.8rem;font-weight:600;color:var(--text-muted);letter-spacing:.03em;}

/* Lizenztext im Wortlaut.

   Bewusst dieselbe Darstellung wie in der Datei: feste
   Zeichenbreite, keine Umbrueche an anderer Stelle. Ein
   Lizenztext, den das Layout umbricht, sieht schnell nach
   "sinngemaess" aus, und genau das darf er nicht.

   Er scrollt IN SEINEM EIGENEN KASTEN nach rechts. Ohne das
   scrollt bei langen Zeilen die ganze Seite seitlich, und auf
   dem Handy ist danach jede Ueberschrift verschoben. */
.lizenztext{
  margin:0;padding:clamp(14px,2vw,20px);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--rund-klein);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.8rem;line-height:1.6;color:var(--text);
  white-space:pre;overflow-x:auto;overscroll-behavior-x:contain;
  max-height:60svh;overflow-y:auto;
  -webkit-text-size-adjust:100%;
}
.lizenztext:focus-visible{box-shadow:var(--focus-ring);}

/* Fischarten-Uebersicht: Schonzeit und Mindestmass.
   Bewusst keine Tabelle mit Linie unter jeder Zeile, sondern
   Karten - zwoelf Zeilen mit Haarlinien liest niemand. */
.fischliste{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  list-style:none;margin:0;padding:0;}
.fischart{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--rund-klein);
  padding:14px 16px;
}
.fischart b{display:flex;align-items:center;gap:8px;font-size:1rem;}
.fischart b .icon{color:var(--accent);}
.fischart-werte{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px;font-size:.88rem;}
.fischart-werte span{display:block;}
.fischart-werte em{display:block;font-style:normal;font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-muted);}
.fischart-hinweis{margin-top:8px;font-size:.82rem;color:var(--text-muted);}
.fischart--pruefen{border-left:3px solid var(--danger);}


/* ============================================================
   15  BAENDER UND AUFRUFE

   Das wiederkehrende "wir freuen uns ueber neue Gesichter" auf
   Startseite und Vereinsseite. Ein Bild im Hintergrund, Text
   darueber, zwei Schaltflaechen.
   ============================================================ */
.band{position:relative;isolation:isolate;background:var(--tief);color:var(--auf-tief);overflow:hidden;}
.band-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
/* Beim Band laeuft der Verlauf schraeg von links, weil der Text
   links steht. Links bleibt er kraeftig, nach rechts gibt er das
   Bild frei. Auch hier deutlich heller als zuvor. */
.band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg, rgba(12,23,20,.80) 0%, rgba(12,23,20,.52) 55%, rgba(12,23,20,.24) 100%);}
.band-innen{
  width:min(var(--maxw),100%);margin-inline:auto;padding-inline:var(--rand-x);
  padding-block:clamp(52px,7vw,92px);
}
.band h2{color:#fff;max-width:15ch;}
.band p{color:var(--auf-tief-still);max-width:54ch;font-size:clamp(1.02rem,.98rem + .3vw,1.16rem);}
.band .knopf-reihe{margin-top:clamp(22px,3vw,32px);}

/* Hinweiskasten im Fliesstext */
.hinweis{
  display:flex;gap:14px;align-items:flex-start;
  background:color-mix(in srgb, var(--accent) 8%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius:var(--rund);padding:clamp(16px,2.2vw,22px);
}
.hinweis .icon{color:var(--accent);margin-top:2px;}
.hinweis p{margin:0;font-size:.94rem;}
.hinweis--warnung{
  background:color-mix(in srgb, var(--danger) 8%, var(--surface));
  border-color:color-mix(in srgb, var(--danger) 35%, var(--line));
}
.hinweis--warnung .icon{color:var(--danger);}


/* ============================================================
   16  FORMULARE

   Beschriftung UEBER dem Feld, Hilfetext darunter, Fehlertext
   unter dem Feld. Nie ein Platzhalter als Beschriftung: der
   Text verschwindet beim Tippen, und dann weiss niemand mehr,
   was in das Feld gehoerte.
   ============================================================ */
.formular{display:flex;flex-direction:column;gap:20px;}
.feld{display:flex;flex-direction:column;gap:7px;}
.feld > label{font-size:.9rem;font-weight:700;}
.pflicht{color:var(--danger);}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld input[type="date"],
.feld input[type="number"],
.feld input[type="password"],
.feld select,
.feld textarea{
  width:100%;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:var(--rund-klein);
  background:var(--surface);color:var(--text);
  font-family:var(--schrift-text);font-size:1rem;line-height:1.45;
  transition:border-color .16s;
}
.feld textarea{min-height:130px;resize:vertical;}

/* ------------------------------------------------------------
   Datum und Uhrzeit

   Diese beiden Felder sind die einzigen, die der Browser
   teilweise selbst zeichnet. Ohne Nachhilfe fallen sie neben
   den uebrigen Feldern auf: andere Schrift, andere Hoehe, ein
   graues Symbol am Rand, das mit nichts auf der Seite etwas zu
   tun hat.

   Vier Kleinigkeiten raeumen das auf. Die wichtigste ist
   color-scheme weiter oben: Die entscheidet, ob der aufklappende
   Kalender hell oder dunkel erscheint.
   ------------------------------------------------------------ */
.feld input[type="date"],
.feld input[type="time"]{
  /* Ein Datumsfeld bringt eine eigene Mindestbreite mit und
     sprengt damit in einem Raster die Spalte. */
  min-width:0;
  /* Sonst nimmt es die Systemschrift statt DM Sans. */
  font-family:inherit;
  /* Gleiche Hoehe wie ein Textfeld: Der innere Aufbau aus
     Tag, Monat und Jahr misst sich anders. */
  line-height:1.45;
}

/* Das Kalender- und Uhrsymbol am rechten Rand. Zurueckhaltend,
   bis der Zeiger darauf liegt: Es ist eine Hilfe, keine
   Schaltflaeche, die um Aufmerksamkeit bittet. */
.feld input[type="date"]::-webkit-calendar-picker-indicator,
.feld input[type="time"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  padding:4px;
  margin-right:-2px;
  border-radius:6px;
  opacity:.55;
  transition:opacity .15s, background .15s;
}
.feld input[type="date"]:hover::-webkit-calendar-picker-indicator,
.feld input[type="time"]:hover::-webkit-calendar-picker-indicator,
.feld input[type="date"]:focus::-webkit-calendar-picker-indicator,
.feld input[type="time"]:focus::-webkit-calendar-picker-indicator{
  opacity:1;
  background:var(--surface-alt);
}

/* Der noch leere Teil eines Datums (TT.MM.JJJJ) soll wie ein
   Platzhalter aussehen und nicht wie eingetragener Inhalt.
   Sobald etwas darin steht, faerbt der Browser es selbst um. */
.feld input[type="date"]::-webkit-datetime-edit-year-field:not([aria-valuenow]),
.feld input[type="date"]::-webkit-datetime-edit-month-field:not([aria-valuenow]),
.feld input[type="date"]::-webkit-datetime-edit-day-field:not([aria-valuenow]),
.feld input[type="time"]::-webkit-datetime-edit-hour-field:not([aria-valuenow]),
.feld input[type="time"]::-webkit-datetime-edit-minute-field:not([aria-valuenow]){
  color:var(--text-muted);
}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--brand-300);}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{
  border-color:var(--brand);box-shadow:var(--focus-ring);
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--text-muted);opacity:.85;}
.feld-hilfe{font-size:.83rem;color:var(--text-muted);}
.feld-fehler{font-size:.85rem;font-weight:600;color:var(--danger);}

.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:620px){ .feld-paar{grid-template-columns:1fr;} }

/* ------------------------------------------------------------
   Feldgruppe: ein Kasten mit Beschriftung

   KEIN <fieldset> UND KEIN <legend>, sondern ein div mit
   role="group" und aria-labelledby. Der Grund steht unter (1).
   Fuer Vorleseprogramme ist das gleichwertig: Die Gruppe wird
   als Gruppe angesagt, mit ihrer Beschriftung.

   HIER STECKTEN ZWEI FEHLER, und der zweite Anlauf war der
   schlimmere von beiden:

   1) Die Beschriftung hing auf der Rahmenlinie.
      Ein <legend> sitzt von Haus aus MITTEN im Rahmen, halb
      innen, halb aussen. Bei einer duennen Linie ist das
      gewollt, bei einem Kasten mit Flaeche und Rundung sieht
      es kaputt aus.

      Der erste Versuch war der bekannte Kniff float:left mit
      width:100%. Er holt die Beschriftung zwar aus dem
      Sonderverhalten heraus, ABER er macht sie zu einem Float
      ueber die volle Breite. Bloecke ueberlappen Floats, nur
      ihre Textzeilen weichen aus. Ein einfacher Absatz im
      Kasten (der Hilfetext bei der erziehungsberechtigten
      Person) wurde dadurch doppelt so hoch wie noetig, und der
      naechste Abstand kam obendrauf. Ergebnis: ein riesiges
      Loch mitten im Formular.

      Statt daran herumzujustieren ist das Element jetzt ein
      normales span in einer Flexspalte. Keine Sonderregeln,
      keine Floats, jeder Abstand kommt aus einem einzigen gap.

   2) Verborgene Gruppen blieben sichtbar.
      Das Skript blendet die Gruppe fuer die
      erziehungsberechtigte Person und die fuer die zweite
      Person mit dem Attribut hidden aus. hidden bedeutet
      display:none, aber das steht im Browser-Stylesheet und
      verliert gegen jedes display im Projekt-Stylesheet.
      Ergebnis: Bei "Kinder & Jugend" standen BEIDE Gruppen
      untereinander, es wurde also nach einer
      erziehungsberechtigten Person UND nach einer zweiten
      Person gefragt.
      Dieselbe Falle gab es schon bei .schloss-reihe im
      Drehrad. Wer hier display setzt, muss hidden mitdenken.
   ------------------------------------------------------------ */
.feldgruppe{
  border:1px solid var(--line);border-radius:var(--rund);
  padding:clamp(18px,2.4vw,26px);margin:0;
  background:var(--surface);
  display:flex;flex-direction:column;gap:18px;
}

/* Muss NACH dem display stehen, siehe (2) oben. */
.feldgruppe[hidden]{display:none;}

.feldgruppe-titel{
  font-size:.78rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
}

/* Haken und Auswahl */
.haken{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:.94rem;line-height:1.5;}
.haken input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--brand);cursor:pointer;}
.haken:hover{color:var(--brand);}

/* Auswahlkarten (Beitragsart) */
.wahlkarten{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.wahlkarte{position:relative;}
.wahlkarte input{position:absolute;opacity:0;width:0;height:0;}
.wahlkarte span{
  display:flex;flex-direction:column;gap:4px;height:100%;
  border:1.5px solid var(--line);border-radius:var(--rund);
  padding:16px 18px;cursor:pointer;background:var(--surface);transition:.16s;
}
.wahlkarte b{font-size:1.02rem;}
.wahlkarte i{font-style:normal;font-size:.86rem;color:var(--text-muted);}
.wahlkarte span:hover{border-color:var(--brand-300);}
.wahlkarte input:checked + span{border-color:var(--brand);background:color-mix(in srgb, var(--brand) 8%, var(--surface));}
.wahlkarte input:focus-visible + span{box-shadow:var(--focus-ring);}

/* Honigtopf. Muss fuer Menschen unsichtbar bleiben, darf aber
   nicht display:none sein - manche Skripte fuellen genau die
   Felder nicht aus, die ausgeblendet sind. */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Rueckmeldung nach dem Absenden */
.meldung{
  display:flex;gap:14px;align-items:flex-start;
  border-radius:var(--rund);padding:clamp(16px,2.2vw,22px);
  margin-bottom:clamp(24px,3vw,34px);
  border:1px solid var(--line);background:var(--surface);
}
.meldung .icon{margin-top:2px;}
.meldung h3{margin:0 0 4px;}
.meldung p{margin:0;font-size:.94rem;color:var(--text-muted);}
.meldung--gut{border-color:color-mix(in srgb, var(--erfolg) 45%, var(--line));
  background:color-mix(in srgb, var(--erfolg) 8%, var(--surface));}
.meldung--gut .icon{color:var(--erfolg);}
.meldung--schlecht{border-color:color-mix(in srgb, var(--danger) 45%, var(--line));
  background:color-mix(in srgb, var(--danger) 8%, var(--surface));}
.meldung--schlecht .icon{color:var(--danger);}

/* Beitragskarten auf "Mitglied werden" */
.preis-raster{display:grid;gap:clamp(16px,2.4vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.preis{
  display:flex;flex-direction:column;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rund);
  padding:clamp(22px,3vw,30px);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.preis:hover{transform:translateY(-3px);box-shadow:var(--schatten-m);border-color:var(--brand-300);}
.preis h3{margin:0;}
.preis-wert{display:flex;align-items:baseline;gap:6px;}
.preis-wert b{font-family:var(--schrift-display);font-weight:400;line-height:1;
  font-size:clamp(2.2rem,1.8rem + 1.6vw,2.9rem);color:var(--brand);}
.preis-wert span{font-size:.92rem;color:var(--text-muted);}

/* Eine beschlossene Erhoehung gehoert an den Preis, nicht in
   eine Fussnote am Seitenende. Wer den Beitrag vergleicht,
   soll gleich sehen, was naechstes Jahr gilt. */
.preis-hinweis{
  margin:-6px 0 0;font-size:.84rem;font-weight:600;color:var(--accent);
}
.preis ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.preis li{display:flex;gap:9px;align-items:flex-start;font-size:.93rem;}
.preis li .icon{color:var(--accent);margin-top:3px;}


/* ============================================================
   17  DREHRAD  -  Fang melden

   Optik eines Zahlenschlosses. Es wird ausschliesslich aus
   gueltigen Werten gewaehlt, ein Tippfehler ist damit gar nicht
   moeglich. Bedienbar per Wischen, Ziehen, Mausrad, Klick,
   Pfeiltasten und den grossen Tasten ueber und unter dem Rad.

   Die Zeilenhoehe 46 px steht auch in js/drehrad.js. Wird sie
   hier geaendert, muss sie DORT mitgeaendert werden, sonst
   rastet das Rad zwischen zwei Werten ein.
   ============================================================ */
.fang-werkzeug{max-width:960px;margin-inline:auto;}
.fang-block{margin-bottom:clamp(28px,4vw,48px);}

.rad{display:flex;flex-direction:column;align-items:stretch;min-width:0;}
.rad-titel{
  display:block;text-align:center;font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;
}
.rad-rahmen{
  position:relative;border:1.5px solid var(--line);border-radius:14px;
  background:var(--bg);overflow:hidden;
}
.rad-fenster{
  position:relative;height:230px;overflow-y:scroll;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;outline:none;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);
}
.rad-fenster::-webkit-scrollbar{display:none;}
.rad-fenster:focus-visible{box-shadow:var(--focus-ring);border-radius:12px;}
.rad-liste{padding-block:92px;}                    /* (230 - 46) / 2 */
.rad-wert{
  height:46px;display:flex;align-items:center;justify-content:center;
  scroll-snap-align:center;scroll-snap-stop:always;
  font-size:1.1rem;line-height:1.1;text-align:center;color:var(--text-muted);
  cursor:pointer;padding-inline:10px;-webkit-user-select:none;user-select:none;
  transition:color .15s,font-size .15s;
}
.rad-wert.ist-gewaehlt{color:var(--text);font-weight:700;font-size:1.2rem;}
.rad-band{
  position:absolute;left:6px;right:6px;top:50%;height:46px;transform:translateY(-50%);
  pointer-events:none;border-radius:9px;
  border-top:1.5px solid var(--brand);border-bottom:1.5px solid var(--brand);
  background:color-mix(in srgb, var(--brand) 10%, transparent);
}
.rad-taste{
  width:100%;height:40px;border-radius:10px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--text);cursor:pointer;
  display:grid;place-items:center;transition:.16s;
}
.rad-taste--hoch{margin-bottom:8px;}
.rad-taste--runter{margin-top:8px;}
.rad-taste:hover{border-color:var(--brand);background:var(--brand);color:#fff;}
.rad-taste:focus-visible{box-shadow:var(--focus-ring);}

/* ------------------------------------------------------------
   Kopf der Meldung: Mitgliedsnummer und Fangtag

   Beides gehoert zur Meldung als Ganzes, nicht zum einzelnen
   Fisch, und steht deshalb nebeneinander. Der Fangtag stand
   frueher allein unter "Was hast du gefangen?": dort wirkte
   das schmale Rad verloren, waehrend hier die halbe Zeile
   leer blieb.

   Zwei Spalten nach Inhalt, zusammen zentriert. Unter 720 px
   untereinander, weil zwei Raeder nebeneinander auf einem
   Handy jedes zu schmal machen wuerden.
   ------------------------------------------------------------ */
.fang-kopf{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, max-content));
  justify-content:center;
  align-items:start;
  gap:clamp(14px,2.2vw,22px);
}
@media (max-width:720px){
  .fang-kopf{grid-template-columns:minmax(0,1fr);justify-items:center;}
}

/* Beide Karten sind gleich aufgebaut: Beschriftung, dann Rad.
   Nichts sonst. Genau daran haengt, dass die Auswahlbalken der
   beiden Raeder auf derselben Hoehe liegen.

   Wer in eine der beiden Karten unten etwas einfuegt, verschiebt
   sie gegen die andere, und die Balken laufen auseinander.
   Zusaetzliches gehoert deshalb in eine eigene Rasterzeile
   darunter, so wie der Gastkarten-Schalter. */
.nummernschloss,
.fangtag-karte{
  display:flex;flex-direction:column;align-items:center;
  max-width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rund);
  padding:clamp(20px,3vw,30px);box-shadow:var(--schatten-s);
}

/* Das Rad fuer den Fangtag braucht mehr Breite als eine Ziffer:
   "Sa, 23. Aug" ist laenger als eine 7. */
.fangtag-karte > div{width:190px;max-width:100%;}


/* Wenn mit Gastkarte geangelt wird, werden die Ziffernraeder
   ABGEBLENDET statt ausgeblendet. Ausblenden liess die linke
   Karte auf die Hoehe der Beschriftung zusammenfallen, und die
   Zeile sprang bei jedem Klick. Abgeblendet bleibt die Form
   stehen, und dass die Nummer gerade nicht gebraucht wird, sieht
   man trotzdem sofort. */
.nummernschloss.ist-gast .schloss-reihe{
  opacity:.3;
  pointer-events:none;
  filter:saturate(.2);
  transition:opacity .2s, filter .2s;
}
.schloss-reihe{display:flex;gap:10px;}
/* Sicherheitsnetz: Das Skript blendet die Ziffernraeder heute ab
   statt sie auszublenden. Setzt sie jemand spaeter doch wieder auf
   hidden, greift das ohne diese Zeile nicht, weil display:flex aus
   dem Projekt-Stylesheet das display:none des Browsers schlaegt. */
.schloss-reihe[hidden]{display:none;}
.rad--schmal{width:64px;}
.rad--schmal .rad-wert{font-size:1.3rem;}
.rad--schmal .rad-wert.ist-gewaehlt{font-size:1.5rem;}
/* Der Gastkarten-Schalter, dritte Zeile im selben Raster.

   Er laeuft ueber beide Spalten und ist damit genau so breit wie
   die zwei Karten zusammen. Flaeche, Rahmenstaerke, Rundung und
   Schatten sind dieselben wie oben, damit die drei als eine
   Gruppe zu lesen sind und nicht als zwei Karten plus etwas
   Angehaengtes.

   Senkrecht etwas flacher als die Karten: Dort steht ein Rad,
   hier eine Zeile Text. Gleiche Polsterung haette einen
   auffallend hohen, halbleeren Balken ergeben. Waagerecht ist
   sie gleich, damit die Innenkanten fluchten. */
.gast-haken{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:center;
  gap:12px;cursor:pointer;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--rund);
  box-shadow:var(--schatten-s);
  padding:clamp(14px,2vw,18px) clamp(20px,3vw,30px);
  font-size:.9rem;line-height:1.45;
  transition:border-color .16s,background .16s;
}
.gast-haken:hover{border-color:var(--accent-300);}
.gast-haken:has(input:checked){
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.gast-haken:has(input:focus-visible){box-shadow:var(--focus-ring);}
.gast-haken input{width:20px;height:20px;flex:none;accent-color:var(--accent);cursor:pointer;}

/* Ein Fang */
.fang-zeile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rund);
  padding:clamp(18px,2.6vw,26px);box-shadow:var(--schatten-s);margin-bottom:16px;
}
.fang-zeile-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;}
.fang-zeile-titel{font-family:var(--schrift-display);font-weight:400;font-size:1.35rem;}
.fang-weg{
  display:inline-flex;align-items:center;gap:7px;background:transparent;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--pille);padding:8px 14px;
  color:var(--text-muted);font-family:var(--schrift-text);font-weight:700;font-size:.78rem;transition:.16s;
}
.fang-weg:hover{border-color:var(--danger);color:var(--danger);}
.fang-weg:focus-visible{box-shadow:var(--focus-ring);}
.fang-zeile.ist-allein .fang-weg{display:none;}

.fang-raeder{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,20px);}
@media (max-width:720px){ .fang-raeder{grid-template-columns:1fr 1fr;gap:18px;} }
@media (max-width:380px){ .fang-raeder{grid-template-columns:1fr;} }

/* Zurueckgesetzt-Haken je Fang */
.zurueck-haken{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.92rem;
}
.zurueck-haken input{width:20px;height:20px;flex:none;accent-color:var(--accent);cursor:pointer;}
.zurueck-haken:hover{color:var(--accent);}

/* Zusammenzaehlung */
.fang-summe{
  background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--rund);
  padding:clamp(20px,3vw,30px);
}
.summe-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:16px;}
.summe-kopf h3{margin:0;}
.summe-nummer{
  display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:var(--pille);
  background:var(--brand);color:#fff;font-weight:700;font-size:.84rem;letter-spacing:.03em;
}
.summe-anzahl{font-size:.84rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted);}
.summe-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.summe-liste li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rund-klein);
  padding:12px 16px;
}
.summe-fisch{font-family:var(--schrift-display);font-weight:400;font-size:1.1rem;}
.summe-mass{font-size:.92rem;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.summe-ort{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:.88rem;}
.summe-ort .icon{color:var(--accent);}
.summe-zurueck{
  display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--accent);
}
.summe-bilanz{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--line);font-size:.92rem;
}
.summe-bilanz b{font-variant-numeric:tabular-nums;}

/* Nachfrage vor dem Absenden */
.nachfrage{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:24px;
  background:rgba(6,12,11,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.nachfrage.ist-offen{display:grid;}
.nachfrage-karte{
  width:min(560px,100%);max-height:88svh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rund);
  box-shadow:var(--schatten-l);padding:clamp(24px,4vw,36px);
}
.nachfrage-karte h3{font-size:1.45rem;}
.nachfrage-liste{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.nachfrage-liste li{padding:13px 16px;border-radius:var(--rund-klein);
  background:var(--surface-alt);border:1px solid var(--line);font-size:.98rem;}
.nachfrage-tasten{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;}


/* ============================================================
   18  FUSSZEILE
   ============================================================ */
/* KEIN margin-top an der Fusszeile.

   Hier stand einmal margin-top:clamp(40px,6vw,80px). Das ergab
   auf jeder Seite einen hellbeigen Streifen zwischen dem
   letzten Abschnitt und der Fusszeile: Der Aussenabstand liess
   den Seitengrund durchscheinen. Besonders unter einem
   Bildband sah das aus wie ein vergessener Rest.

   Der Abstand kommt vom padding des letzten Abschnitts, nicht
   von der Fusszeile. Die setzt direkt an. */
.fusszeile{background:var(--surface-alt);border-top:1px solid var(--line);
  padding-block:clamp(44px,6vw,72px) 28px;}
.fuss-raster{
  display:grid;gap:clamp(24px,4vw,48px);
  grid-template-columns:1.4fr 1fr 1fr;align-items:start;
}
.fuss-raster h4{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:14px;}
.fuss-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.fuss-liste a{color:var(--text);text-decoration:none;font-size:.94rem;}
.fuss-liste a:hover{color:var(--brand);text-decoration:underline;}
.fuss-marke p{font-size:.92rem;color:var(--text-muted);margin-top:14px;max-width:36ch;}
.fuss-kontakt{display:flex;flex-direction:column;gap:9px;font-size:.94rem;}
.fuss-kontakt a{display:inline-flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;}
.fuss-kontakt a:hover{color:var(--brand);}
.fuss-kontakt .icon{color:var(--accent);}
.fuss-unten{
  margin-top:clamp(30px,4vw,48px);padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:.86rem;color:var(--text-muted);
}
.fuss-unten a{color:var(--text-muted);}
@media (max-width:780px){ .fuss-raster{grid-template-columns:1fr;} }


/* ============================================================
   19  BEWEGUNG

   Zurueckhaltend: Inhalte werden beim Scrollen hereingebeten,
   mehr nicht. Kein Parallax, kein Scroll-Hijack. Die Zielgruppe
   dieser Seite reicht vom Jugendlichen bis zum Achtzigjaehrigen,
   und niemand davon will um seinen Inhalt kaempfen.

   Wer im Betriebssystem weniger Bewegung eingestellt hat,
   bekommt alles sofort und statisch.
   ============================================================ */
.zeigen{opacity:0;transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);}
.zeigen.ist-da{opacity:1;transform:none;}

/* Ohne JavaScript bleibt nichts unsichtbar liegen */
.kein-js .zeigen{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  .zeigen{opacity:1;transform:none;transition:none;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* Beim Drucken: Navigation, Baender und Bedienelemente weg */
@media print{
  .kopfzeile,.fusszeile,.band,.werkzeuge,.rad-taste,.nachfrage{display:none !important;}
  body{background:#fff;color:#000;}
  .zeigen{opacity:1;transform:none;}
}