@charset "UTF-8";
/* ==========================================================================
   ABS - Aktive Bürger Süderbrarup
   Design-System, eine einzige Stilvorlage für die gesamte Website.

   Aufbau der Datei
   01  Schrift (@font-face, lokal, keine externen Anfragen)
   02  Farb- und Maß-Token
   03  Grundlagen / Normalisierung
   04  Typografie
   05  Hilfsklassen und Raster
   06  Sprungmarke
   07  Kopfbereich und Navigation
   08  Bühne (Hero) und Seitenkopf
   09  Schaltflächen
   10  Karten
   11  Kategorie-Marken (Chips)
   12  Hinweis- und Warnkästen
   13  Filterleiste
   14  Formulare
   15  Galerie und Lightbox
   16  Beitrag (Fließtext der Berichte)
   17  Dateiliste (Dokumente)
   18  Personen (Vorstand), Termine, Suchtreffer
   19  Fußzeile
   20  Druck
   21  Reduzierte Bewegung

   Regeln, die hier eingehalten werden und einzuhalten sind:
   - Kein !important.
   - Gelb (#F2EB00) ist ausschließlich Fläche, Linie oder Marker.
     Niemals gelber Text auf hellem Grund, niemals Gelb als einziges
     Unterscheidungsmerkmal.
   - Text auf gelber Fläche ist immer #10306E oder #14181F.
   - Fokusring: 3px #10306E mit 2px Abstand; auf blauem Grund 3px #F2EB00.
   ========================================================================== */


/* ==========================================================================
   01  SCHRIFT
   Poppins wird lokal geladen. Die woff2-Dateien liegen zum Zeitpunkt der
   Erstellung noch NICHT vor - siehe assets/fonts/LIESMICH.md.
   Bis dahin greift die Fallback-Kette, die Seite bleibt vollständig nutzbar.
   ========================================================================== */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-v21-latin-regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-v21-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-v21-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   02  TOKEN
   Farbnamen exakt nach Projektvorgabe. Nicht umbenennen.
   ========================================================================== */

:root {
  /* Farben */
  --abs-blau: #10306E;
  --abs-blau-dunkel: #0A2050;
  --abs-blau-mittel: #2B54A8;
  --abs-blau-tint: #EDF1F9;
  --abs-gelb: #F2EB00;
  --abs-gelb-tint: #FFFCE0;
  --abs-text: #14181F;
  --abs-text-leise: #55606F;
  --abs-flaeche: #FFFFFF;
  --abs-grund: #F6F7FA;
  --abs-linie: #DDE3EC;

  /* Abgeleitete Farben, nur für Zustände */
  --abs-gelb-tief: #D9D300;      /* Hover auf gelber Fläche */
  --abs-fehler: #A2131C;         /* Fehlertext, Kontrast auf Weiß 7,4:1 */
  --abs-fehler-tint: #FDECEC;

  /* Schrift */
  --abs-schrift: "Poppins", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;

  /* Typo-Skala, flüssig über clamp() */
  --abs-groesse-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --abs-groesse-s: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --abs-groesse-m: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  --abs-groesse-l: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --abs-groesse-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --abs-groesse-2xl: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem);
  --abs-groesse-3xl: clamp(2rem, 1.6rem + 1.9vw, 3rem);

  /* Zeilenhöhen */
  --abs-zeile-eng: 1.2;
  --abs-zeile-normal: 1.65;

  /* Maximale Zeilenlänge im Fließtext */
  --abs-zeilenlaenge: 68ch;

  /* Abstände */
  --abs-raum-1: 0.25rem;
  --abs-raum-2: 0.5rem;
  --abs-raum-3: 0.75rem;
  --abs-raum-4: 1rem;
  --abs-raum-5: 1.5rem;
  --abs-raum-6: 2rem;
  --abs-raum-7: 3rem;
  --abs-raum-8: 4.5rem;

  /* Maße */
  --abs-breite: 1140px;          /* Standardbreite des Inhalts */
  --abs-breite-schmal: 760px;    /* Lesespalte, Formulare, Rechtstexte */
  --abs-radius: 6px;
  --abs-radius-gross: 12px;
  --abs-rand: 1px solid var(--abs-linie);

  /* Schatten, sehr zurückhaltend */
  --abs-schatten: 0 1px 2px rgba(16, 48, 110, 0.08),
    0 2px 8px rgba(16, 48, 110, 0.06);
  --abs-schatten-hoch: 0 2px 4px rgba(16, 48, 110, 0.1),
    0 8px 24px rgba(16, 48, 110, 0.12);

  /* Bewegung */
  --abs-uebergang: 150ms ease;

  /* Kopfhöhe, wird für scroll-margin der Sprungziele gebraucht */
  --abs-kopfhoehe: 4.25rem;
}


/* ==========================================================================
   03  GRUNDLAGEN
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background-color: var(--abs-grund);
  color: var(--abs-text);
  font-family: var(--abs-schrift);
  font-size: var(--abs-groesse-m);
  line-height: var(--abs-zeile-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100%;
}

/* Bilder und Medien bleiben in ihrem Container */
img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Formularelemente erben die Schrift */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Einheitlicher, immer sichtbarer Fokus */
:focus-visible {
  outline: 3px solid var(--abs-blau);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Auf dunkelblauen Flächen ist der Ring gelb, sonst unsichtbar */
.buehne :focus-visible,
.seiten-kopf :focus-visible,
.fusszeile :focus-visible {
  outline-color: var(--abs-gelb);
}

/* Sprungziele nicht unter den klebenden Kopf schieben */
:target {
  scroll-margin-top: calc(var(--abs-kopfhoehe) + var(--abs-raum-4));
}

hr {
  border: 0;
  border-top: var(--abs-rand);
  margin: var(--abs-raum-6) 0;
}


/* ==========================================================================
   04  TYPOGRAFIE
   ========================================================================== */

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--abs-raum-3);
  color: var(--abs-blau);
  font-weight: 700;
  line-height: var(--abs-zeile-eng);
  text-wrap: balance;
}

h1 {
  font-size: var(--abs-groesse-3xl);
}

h2 {
  font-size: var(--abs-groesse-2xl);
}

h3 {
  font-size: var(--abs-groesse-xl);
}

h4 {
  font-size: var(--abs-groesse-l);
  font-weight: 600;
}

p {
  margin: 0 0 var(--abs-raum-4);
}

a {
  color: var(--abs-blau-mittel);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--abs-blau-dunkel);
  text-decoration-thickness: 2px;
}

strong,
b {
  font-weight: 600;
}

small {
  font-size: var(--abs-groesse-s);
}

code,
kbd {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  background-color: var(--abs-blau-tint);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/* Externe Verweise werden zusätzlich zum Text markiert.
   Der Pfeil ist Dekoration. In den Link gehört zusätzlich ein
   <span class="nur-sr"> (öffnet eine externe Seite)</span>. */
.extern::after {
  content: "\2197";
  margin-left: 0.25em;
  font-size: 0.85em;
  line-height: 1;
}


/* ==========================================================================
   05  HILFSKLASSEN UND RASTER
   ========================================================================== */

/* Nur für Screenreader sichtbar */
.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Zentrierter Inhaltsrahmen */
.huelle {
  width: 100%;
  max-width: var(--abs-breite);
  margin-inline: auto;
  padding-inline: var(--abs-raum-4);
}

/* Schmale Lesespalte, für Rechtstexte, Formulare, Berichte */
.huelle-schmal {
  width: 100%;
  max-width: var(--abs-breite-schmal);
  margin-inline: auto;
  padding-inline: var(--abs-raum-4);
}

/* Abschnitt mit Standardluft nach oben und unten */
.bereich {
  padding-block: var(--abs-raum-7);
}

/* Abschnitt auf weißer statt grauer Fläche */
.bereich-hell {
  background-color: var(--abs-flaeche);
}

/* Abschnitt auf sehr hellem Blau */
.bereich-tint {
  background-color: var(--abs-blau-tint);
}

/* Überschrift eines Abschnitts, links Titel, rechts weiterführender Link */
.abschnitt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abs-raum-3);
  margin-bottom: var(--abs-raum-5);
}

.abschnitt-kopf > h2 {
  margin-bottom: 0;
}

/* Leiser Text, z. B. Datumsangaben */
.text-leise {
  color: var(--abs-text-leise);
  font-size: var(--abs-groesse-s);
}

/* Liste ohne Aufzählungszeichen */
.liste-blank {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Hinweis, wenn eine per JavaScript gefüllte Liste leer bleibt */
.leer-hinweis {
  margin: 0;
  padding: var(--abs-raum-5);
  background-color: var(--abs-flaeche);
  border: var(--abs-rand);
  border-radius: var(--abs-radius);
  color: var(--abs-text-leise);
}

/* Brotkrumenpfad */
.brotkrumen {
  font-size: var(--abs-groesse-s);
  color: var(--abs-text-leise);
  padding-block: var(--abs-raum-3);
}

.brotkrumen ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--abs-raum-2);
  margin: 0;
  padding: 0;
}

.brotkrumen li + li::before {
  content: "\203A";
  margin-right: var(--abs-raum-2);
  color: var(--abs-text-leise);
}


/* ==========================================================================
   06  SPRUNGMARKE
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--abs-raum-4);
  top: var(--abs-raum-2);
  z-index: 100;
  transform: translateY(-160%);
  display: inline-block;
  padding: var(--abs-raum-3) var(--abs-raum-4);
  background-color: var(--abs-gelb);
  color: var(--abs-blau);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--abs-blau);
  border-radius: var(--abs-radius);
  transition: transform var(--abs-uebergang);
}

.skip-link:focus {
  transform: translateY(0);
}


/* ==========================================================================
   07  KOPFBEREICH UND NAVIGATION
   Struktur siehe projekt/_bausteine.html, Block B.
   Unter 900px erscheint der Umschalter, die Navigation klappt auf.
   ========================================================================== */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--abs-flaeche);
  border-bottom: 3px solid var(--abs-gelb);
  box-shadow: var(--abs-schatten);
}

.kopf-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abs-raum-4);
  width: 100%;
  max-width: var(--abs-breite);
  margin-inline: auto;
  padding: var(--abs-raum-3) var(--abs-raum-4);
  min-height: var(--abs-kopfhoehe);
}

/* Logo links */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--abs-raum-3);
  text-decoration: none;
  color: var(--abs-blau);
}

/* width:auto haelt das Seitenverhaeltnis 480:268 der Logodatei.
   52px sind das Minimum, bei dem das Wappen in der Fahne noch als
   Wappen lesbar ist. Darunter laeuft die Binnenzeichnung zu. */
.logo img,
.logo svg {
  width: auto;
  height: 52px;
}

/* Auf schmalen Geraeten passen Logo, Namenszug und Menue-Knopf nicht
   in eine Zeile. Der Knopf rutscht dann unter das Logo und der Kopf
   wird doppelt so hoch, bevor ueberhaupt Inhalt kommt.

   Geloest wird das ueber den Namenszug, nicht ueber das Logo:
   Er wird optisch ausgeblendet - aber ausdruecklich NICHT mit
   display:none. Das Logobild traegt alt="", weil der Name danebensteht.
   Verschwaende der Name ganz, haette der Logo-Link keinen
   zugaenglichen Namen mehr und Vorlesesoftware saegte nur "Link".
   So bleibt er hoerbar und ist nur nicht mehr zu sehen. */
@media (max-width: 559px) {
  /* nowrap nur bei geschlossenem Menü: Aufgeklappt muss die Navigation
     in eine eigene Zeile unter Logo und Knopf umbrechen, sonst quetscht
     sie sich rechts neben das Logo. Ohne :has() (iOS vor 15.4) entfällt
     die Regel ganz - Logo und Knopf passen auch dann in eine Zeile. */
  .kopf-innen:not(:has(.hauptnav.ist-offen)) { flex-wrap: nowrap; }

  .logo-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-name {
  font-weight: 700;
  font-size: var(--abs-groesse-l);
  letter-spacing: 0.02em;
}

.logo-zusatz {
  font-size: var(--abs-groesse-xs);
  color: var(--abs-text-leise);
  font-weight: 400;
}

/* Umschalter für die mobile Navigation, echtes <button> */
.nav-schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--abs-raum-2);
  padding: var(--abs-raum-2) var(--abs-raum-3);
  background-color: var(--abs-flaeche);
  color: var(--abs-blau);
  font-weight: 600;
  border: 2px solid var(--abs-blau);
  border-radius: var(--abs-radius);
  cursor: pointer;
}

.nav-schalter:hover {
  background-color: var(--abs-blau-tint);
}

.nav-schalter[aria-expanded="true"] {
  background-color: var(--abs-blau);
  color: var(--abs-flaeche);
}

/* Drei Balken, rein dekorativ, im HTML mit aria-hidden="true" */
.nav-schalter-symbol {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 14px;
}

.nav-schalter-symbol span {
  display: block;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--abs-uebergang), opacity var(--abs-uebergang);
}

.nav-schalter[aria-expanded="true"] .nav-schalter-symbol span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-schalter[aria-expanded="true"] .nav-schalter-symbol span:nth-child(2) {
  opacity: 0;
}

.nav-schalter[aria-expanded="true"] .nav-schalter-symbol span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Navigation */
.hauptnav {
  display: none;
  width: 100%;
}

/* Von abs.js gesetzt, wenn der Umschalter betätigt wurde */
.hauptnav.ist-offen {
  display: block;
}

.nav-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: var(--abs-raum-2) 0 var(--abs-raum-3);
}

.nav-link {
  display: block;
  padding: var(--abs-raum-3) var(--abs-raum-2);
  color: var(--abs-blau);
  font-weight: 600;
  text-decoration: none;
  border-bottom: var(--abs-rand);
}

.nav-link:hover {
  color: var(--abs-blau-dunkel);
  background-color: var(--abs-blau-tint);
}

/* Aktive Seite: gelbe Markierung UND Fettung, nicht nur Farbe */
.nav-link[aria-current="page"] {
  color: var(--abs-blau-dunkel);
  background-color: var(--abs-gelb-tint);
  border-left: 4px solid var(--abs-gelb);
  padding-left: calc(var(--abs-raum-2) + 4px);
}

/* „Spenden“ im aufgeklappten Menü (unter 900px): umrandeter Knopf über
   die ganze Breite, abgesetzt unter den übrigen Einträgen. */
.nav-link.nav-spenden {
  margin-top: var(--abs-raum-3);
  border: 2px solid var(--abs-blau);
  border-radius: var(--abs-radius);
  text-align: center;
}

/* Auf der Spendenseite selbst: gelb gefüllt statt Seitenstrich */
.nav-link.nav-spenden[aria-current="page"] {
  background-color: var(--abs-gelb);
  border: 2px solid var(--abs-blau);
  color: var(--abs-blau-dunkel);
  padding-left: var(--abs-raum-2);
  text-decoration: none;
}

/* Blau füllen nur mit echter Maus: Auf iPhone und iPad bliebe der
   Hover-Zustand nach dem Antippen sonst stehen. */
@media (hover: hover) {
  .nav-link.nav-spenden:not([aria-current="page"]):hover {
    background-color: var(--abs-blau);
    color: var(--abs-flaeche);
  }
}

@media (min-width: 900px) {
  .nav-schalter {
    display: none;
  }

  .hauptnav {
    display: block;
    width: auto;
  }

  .nav-liste {
    flex-direction: row;
    align-items: center;
    gap: var(--abs-raum-1);
    padding: 0;
  }

  .nav-link {
    padding: var(--abs-raum-2) var(--abs-raum-3);
    border-bottom: 3px solid transparent;
    border-radius: var(--abs-radius) var(--abs-radius) 0 0;
  }

  .nav-link[aria-current="page"] {
    background-color: transparent;
    border-left: 0;
    border-bottom-color: var(--abs-gelb);
    padding-left: var(--abs-raum-3);
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  /* „Spenden“ steht als umrandeter Knopf am Ende der Menüzeile: Rahmen
     statt Fläche, damit er auffällt, ohne sich vor die Inhalte zu
     drängen. Etwas Abstand zu „Kontakt“, aber nicht an den rechten Rand
     gerückt – dort stand er zu weit ab (Rückmeldung 28.09.2026). */
  .nav-link.nav-spenden,
  .nav-link.nav-spenden[aria-current="page"] {
    margin-top: 0;
    margin-left: var(--abs-raum-4);
    padding: calc(var(--abs-raum-2) - 2px) var(--abs-raum-3);
    border: 2px solid var(--abs-blau);
    border-radius: var(--abs-radius);
  }
}


/* ==========================================================================
   08  BÜHNE (HERO) UND SEITENKOPF
   Blaue Fläche, gelber Akzentbalken. Kein Verlauf mit Gelb auf Weiß.
   ========================================================================== */

.buehne {
  background-color: var(--abs-blau);
  color: var(--abs-flaeche);
  border-bottom: 6px solid var(--abs-gelb);
}

.buehne-innen {
  width: 100%;
  max-width: var(--abs-breite);
  margin-inline: auto;
  padding: var(--abs-raum-7) var(--abs-raum-4) var(--abs-raum-7);
}

/* Kurzer gelber Balken über der Überschrift */
.buehne-balken {
  display: block;
  width: 72px;
  height: 6px;
  background-color: var(--abs-gelb);
  margin-bottom: var(--abs-raum-4);
  border-radius: 3px;
}

.buehne-titel {
  color: var(--abs-flaeche);
  font-size: var(--abs-groesse-3xl);
  margin-bottom: var(--abs-raum-4);
  max-width: 20ch;
}

.buehne-text {
  font-size: var(--abs-groesse-l);
  max-width: var(--abs-zeilenlaenge);
  margin-bottom: var(--abs-raum-5);
  color: var(--abs-flaeche);
}

/* Fließtextlinks auf blauem Grund sind weiß, im Überfahren gelb.
   Schaltflächen sind ausgenommen: sie bringen ihre eigene Farbgebung
   mit. Ohne :not(.btn) würde diese Regel gewinnen (Spezifität 0-1-1
   gegenüber 0-1-0 bei .btn-sekundaer) und weiße Schrift auf die gelbe
   Fläche zwingen - unlesbar. Siehe Kontrastregel im Dateikopf. */
.buehne a:not(.btn) {
  color: var(--abs-flaeche);
}

.buehne a:not(.btn):hover {
  color: var(--abs-gelb);
}

.buehne-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abs-raum-3);
}

/* Seitenkopf der Unterseiten: schmaler als die Bühne, gleiche Farbwelt */
.seiten-kopf {
  background-color: var(--abs-blau);
  color: var(--abs-flaeche);
  border-bottom: 4px solid var(--abs-gelb);
  padding-block: var(--abs-raum-6);
}

.seiten-kopf h1 {
  color: var(--abs-flaeche);
  margin-bottom: var(--abs-raum-2);
}

.seiten-kopf p {
  max-width: var(--abs-zeilenlaenge);
  margin-bottom: 0;
  color: var(--abs-flaeche);
}

/* Schaltflächen ausgenommen, siehe Begründung bei .buehne a */
.seiten-kopf a:not(.btn) {
  color: var(--abs-flaeche);
}


/* ==========================================================================
   09  SCHALTFLÄCHEN
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abs-raum-2);
  padding: var(--abs-raum-3) var(--abs-raum-5);
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: var(--abs-radius);
  font-weight: 600;
  font-size: var(--abs-groesse-m);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--abs-uebergang),
    color var(--abs-uebergang), border-color var(--abs-uebergang);
}

/* Primär: blaue Fläche, weißer Text */
.btn-primaer {
  background-color: var(--abs-blau);
  border-color: var(--abs-blau);
  color: var(--abs-flaeche);
}

.btn-primaer:hover {
  background-color: var(--abs-blau-dunkel);
  border-color: var(--abs-blau-dunkel);
  color: var(--abs-flaeche);
}

/* Sekundär: gelbe Fläche, blauer Text */
.btn-sekundaer {
  background-color: var(--abs-gelb);
  border-color: var(--abs-blau);
  color: var(--abs-blau);
}

.btn-sekundaer:hover {
  background-color: var(--abs-gelb-tief);
  color: var(--abs-blau-dunkel);
}

/* Geist: nur Rahmen, für nachgeordnete Aktionen auf hellem Grund */
.btn-geist {
  background-color: transparent;
  border-color: var(--abs-blau);
  color: var(--abs-blau);
}

.btn-geist:hover {
  background-color: var(--abs-blau-tint);
  color: var(--abs-blau-dunkel);
}

/* Geist hell: dieselbe Rolle auf blauem Grund (Bühne, Fußzeile) */
.btn-geist-hell {
  background-color: transparent;
  border-color: var(--abs-flaeche);
  color: var(--abs-flaeche);
}

.btn-geist-hell:hover {
  background-color: var(--abs-flaeche);
  color: var(--abs-blau);
}

/* Kleine Variante, z. B. in Karten */
.btn-klein {
  padding: var(--abs-raum-2) var(--abs-raum-4);
  min-height: 36px;
  font-size: var(--abs-groesse-s);
}

/* Mehrere Schaltflächen nebeneinander */
.btn-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abs-raum-3);
}


/* ==========================================================================
   10  KARTEN
   ========================================================================== */

/* min() verhindert seitliches Überlaufen ab 320px Breite */
.karten-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--abs-raum-5);
}

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--abs-flaeche);
  border: var(--abs-rand);
  border-radius: var(--abs-radius-gross);
  overflow: hidden;
  transition: box-shadow var(--abs-uebergang),
    border-color var(--abs-uebergang);
}

.karte:hover {
  border-color: var(--abs-blau-mittel);
  box-shadow: var(--abs-schatten-hoch);
}

/* Bild oben, festes Seitenverhältnis gegen Layoutsprünge */
.karte-bild {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--abs-blau-tint);
  border-bottom: var(--abs-rand);
}

.karte-koerper {
  display: flex;
  flex-direction: column;
  gap: var(--abs-raum-2);
  padding: var(--abs-raum-5);
  flex: 1 1 auto;
}

.karte-titel {
  font-size: var(--abs-groesse-l);
  margin-bottom: 0;
}

.karte-meta {
  color: var(--abs-text-leise);
  font-size: var(--abs-groesse-s);
  margin-bottom: 0;
}

.karte-text {
  margin-bottom: 0;
}

.karte-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abs-raum-3);
  padding: var(--abs-raum-4) var(--abs-raum-5);
  border-top: var(--abs-rand);
  background-color: var(--abs-grund);
  margin-top: auto;
}

/* Macht die ganze Karte anklickbar, ohne das Linkziel zu verstecken.
   Nur EIN .karte-link je Karte verwenden. */
.karte-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.karte-link {
  text-decoration: none;
  color: inherit;
}

.karte-link:hover {
  text-decoration: underline;
}


/* ==========================================================================
   11  KATEGORIE-MARKEN (CHIPS)
   Vier Ausschüsse. Die Unterscheidung trägt immer der Text.
   Die Farbe ist nur Zusatz, zusätzlich unterscheiden sich Fläche
   und Rahmenführung.
   ========================================================================== */

.marke {
  display: inline-block;
  padding: 0.2em 0.7em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: var(--abs-groesse-xs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.marke-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abs-raum-2);
}

/* Rubriken ohne eigene Farbe (neu im Verwaltungsbereich angelegt,
   Jahresrückblick): weiße Fläche mit feinem Rahmen, blauer Text */
.marke:not([class*="marke-"]) {
  background-color: var(--abs-flaeche);
  border-color: var(--abs-linie);
  color: var(--abs-blau);
}

/* Gemeindevertretung: volle blaue Fläche, weißer Text (12,4:1) */
.marke-gemeindevertretung {
  background-color: var(--abs-blau);
  border-color: var(--abs-blau);
  color: var(--abs-flaeche);
}

/* Wirtschaft und Finanzen: gelbe Fläche, dunkler Text (14,8:1) */
.marke-wirtschaft {
  background-color: var(--abs-gelb);
  border-color: var(--abs-blau);
  color: var(--abs-text);
}

/* Bau, Planung, Umwelt: mittelblaue Fläche, weißer Text (7,1:1) */
.marke-bau {
  background-color: var(--abs-blau-mittel);
  border-color: var(--abs-blau-mittel);
  color: var(--abs-flaeche);
}

/* Soziales, Jugend, Senioren, Kultur: helle Fläche mit Rahmen (11,1:1) */
.marke-soziales {
  background-color: var(--abs-blau-tint);
  border-color: var(--abs-blau);
  border-style: dashed;
  color: var(--abs-blau);
}


/* ==========================================================================
   12  HINWEIS- UND WARNKÄSTEN
   ========================================================================== */

.hinweis {
  background-color: var(--abs-gelb-tint);
  border: var(--abs-rand);
  border-left: 6px solid var(--abs-gelb);
  border-radius: var(--abs-radius);
  padding: var(--abs-raum-5);
  color: var(--abs-text);
}

.hinweis > :last-child {
  margin-bottom: 0;
}

.hinweis-titel {
  font-size: var(--abs-groesse-l);
  margin-bottom: var(--abs-raum-2);
  color: var(--abs-blau);
}

/* Warnung: eigener Text "Achtung" im HTML voranstellen,
   die Farbe allein trägt die Information nicht. */
.warnung {
  background-color: var(--abs-fehler-tint);
  border: 1px solid var(--abs-fehler);
  border-left: 6px solid var(--abs-fehler);
  border-radius: var(--abs-radius);
  padding: var(--abs-raum-5);
  color: var(--abs-text);
}

.warnung > :last-child {
  margin-bottom: 0;
}

.warnung .hinweis-titel {
  color: var(--abs-fehler);
}


/* ==========================================================================
   13  FILTERLEISTE
   Zustand über aria-pressed am Knopf, nicht über eine Zusatzklasse.
   ========================================================================== */

.filter-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abs-raum-2);
  padding: var(--abs-raum-4);
  background-color: var(--abs-flaeche);
  border: var(--abs-rand);
  border-radius: var(--abs-radius);
  margin-bottom: var(--abs-raum-5);
}

.filter-titel {
  font-size: var(--abs-groesse-s);
  font-weight: 600;
  color: var(--abs-text-leise);
  margin-right: var(--abs-raum-2);
}

.filter-knopf {
  padding: var(--abs-raum-2) var(--abs-raum-4);
  min-height: 40px;
  background-color: var(--abs-flaeche);
  color: var(--abs-blau);
  font-size: var(--abs-groesse-s);
  font-weight: 600;
  border: 2px solid var(--abs-linie);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--abs-uebergang),
    border-color var(--abs-uebergang), color var(--abs-uebergang);
}

.filter-knopf:hover {
  border-color: var(--abs-blau);
  background-color: var(--abs-blau-tint);
}

/* Gewählt: gefüllt, zusätzlich Häkchen als Textzeichen */
.filter-knopf[aria-pressed="true"] {
  background-color: var(--abs-blau);
  border-color: var(--abs-blau);
  color: var(--abs-flaeche);
}

.filter-knopf[aria-pressed="true"]::before {
  content: "\2713\00a0";
}

/* Trefferzahl neben der Filterleiste, per JS gefüllt, aria-live */
.filter-anzahl {
  margin-left: auto;
  font-size: var(--abs-groesse-s);
  color: var(--abs-text-leise);
}


/* ==========================================================================
   14  FORMULARE
   ========================================================================== */

.formular {
  display: flex;
  flex-direction: column;
  gap: var(--abs-raum-5);
  max-width: var(--abs-breite-schmal);
}

.feld {
  display: flex;
  flex-direction: column;
  gap: var(--abs-raum-2);
}

.feld-label {
  font-weight: 600;
  color: var(--abs-blau);
}

/* Pflichtfeldstern, im Label mit <span class="feld-pflicht" aria-hidden="true">*</span>
   und einer erklärenden Legende oberhalb des Formulars. */
.feld-pflicht {
  color: var(--abs-fehler);
  margin-left: 0.15em;
}

.feld-hilfe {
  font-size: var(--abs-groesse-s);
  color: var(--abs-text-leise);
}

.feld input,
.feld textarea,
.feld select {
  width: 100%;
  padding: var(--abs-raum-3);
  min-height: 44px;
  background-color: var(--abs-flaeche);
  color: var(--abs-text);
  border: 2px solid var(--abs-linie);
  border-radius: var(--abs-radius);
  transition: border-color var(--abs-uebergang);
}

.feld textarea {
  min-height: 10rem;
  resize: vertical;
}

.feld input:hover,
.feld textarea:hover,
.feld select:hover {
  border-color: var(--abs-blau-mittel);
}

.feld input:focus,
.feld textarea:focus,
.feld select:focus {
  border-color: var(--abs-blau);
}

/* Fehlerzustand: Rahmen, Hintergrund UND Textmeldung.
   Die Meldung beginnt im HTML immer mit dem Wort "Fehler:". */
.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"],
.feld select[aria-invalid="true"] {
  border-color: var(--abs-fehler);
  background-color: var(--abs-fehler-tint);
}

.feld-fehler {
  font-size: var(--abs-groesse-s);
  font-weight: 600;
  color: var(--abs-fehler);
}

/* Kontrollkästchen und Auswahlfelder in einer Zeile mit Beschriftung */
.feld-kasten {
  display: flex;
  align-items: flex-start;
  gap: var(--abs-raum-3);
}

.feld-kasten input {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin-top: 0.25rem;
  flex: 0 0 auto;
  accent-color: var(--abs-blau);
}


/* ==========================================================================
   15  GALERIE UND LIGHTBOX
   Die Lightbox ist ein natives <dialog>, keine Fremdbibliothek.
   ========================================================================== */

.galerie-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--abs-raum-4);
}

.galerie-figur {
  margin: 0;
  background-color: var(--abs-flaeche);
  border: var(--abs-rand);
  border-radius: var(--abs-radius);
  overflow: hidden;
}

/* Das Vorschaubild sitzt in einem Button, damit es per Tastatur
   erreichbar ist. */
.galerie-knopf {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.galerie-bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: var(--abs-blau-tint);
  transition: transform var(--abs-uebergang);
}

.galerie-knopf:hover .galerie-bild {
  transform: scale(1.03);
}

.galerie-untertitel {
  padding: var(--abs-raum-3);
  font-size: var(--abs-groesse-s);
  color: var(--abs-text-leise);
  border-top: var(--abs-rand);
}

.lightbox {
  width: min(92vw, 1100px);
  max-width: 92vw;
  max-height: 92vh;
  padding: 0;
  background-color: var(--abs-flaeche);
  border: 0;
  border-radius: var(--abs-radius-gross);
  box-shadow: var(--abs-schatten-hoch);
  overflow: hidden;
}

.lightbox::backdrop {
  background-color: rgba(10, 32, 80, 0.85);
}

.lightbox-bild {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background-color: var(--abs-text);
}

.lightbox-leiste {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--abs-raum-4);
  padding: var(--abs-raum-4);
  border-top: var(--abs-rand);
}

.lightbox-text {
  margin: 0;
  font-size: var(--abs-groesse-s);
  color: var(--abs-text-leise);
}

.lightbox-schliessen {
  flex: 0 0 auto;
  min-height: 44px;
  padding: var(--abs-raum-2) var(--abs-raum-4);
  background-color: var(--abs-blau);
  color: var(--abs-flaeche);
  font-weight: 600;
  border: 2px solid var(--abs-blau);
  border-radius: var(--abs-radius);
  cursor: pointer;
}

.lightbox-schliessen:hover {
  background-color: var(--abs-blau-dunkel);
}


/* ==========================================================================
   16  BEITRAG - FLIESSTEXT DER BERICHTE
   ========================================================================== */

.beitrag {
  background-color: var(--abs-flaeche);
  border: var(--abs-rand);
  border-radius: var(--abs-radius-gross);
  padding: var(--abs-raum-6) var(--abs-raum-5);
}

.beitrag-kopf {
  border-bottom: 3px solid var(--abs-gelb);
  padding-bottom: var(--abs-raum-4);
  margin-bottom: var(--abs-raum-5);
}

.beitrag-titel {
  margin-bottom: var(--abs-raum-3);
  /* Lange Wörter wie "Gemeindevertretung" passen auf dem Handy nicht in
     eine Zeile - trennen statt die Seite seitlich rollen zu lassen. */
  -webkit-hyphens: auto; /* Safari bis iOS 16 */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Datum, Kategorie, Verfasser */
.beitrag-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abs-raum-3);
  font-size: var(--abs-groesse-s);
  color: var(--abs-text-leise);
  margin-bottom: 0;
}

.beitrag h2 {
  font-size: var(--abs-groesse-xl);
  margin-top: var(--abs-raum-6);
}

.beitrag h3 {
  font-size: var(--abs-groesse-l);
  margin-top: var(--abs-raum-5);
}

.beitrag p,
.beitrag li {
  max-width: var(--abs-zeilenlaenge);
}

.beitrag ul,
.beitrag ol {
  margin: 0 0 var(--abs-raum-4);
  padding-left: 1.4em;
}

.beitrag li {
  margin-bottom: var(--abs-raum-2);
}

.beitrag ul {
  list-style: square;
}

/* Listen ohne Aufzählungszeichen (z. B. Schlagworte) - .beitrag ul ist
   spezifischer als .liste-blank und setzte sonst wieder Punkte davor. */
.beitrag ul.liste-blank {
  list-style: none;
  padding-left: 0;
}

/* Abstand unter der Kurzfassung, auch wenn der Text mit einem Absatz
   statt mit einer Zwischenüberschrift beginnt. */
.beitrag .hinweis {
  margin-bottom: var(--abs-raum-5);
}

.beitrag blockquote {
  margin: var(--abs-raum-5) 0;
  padding: var(--abs-raum-4) var(--abs-raum-5);
  background-color: var(--abs-blau-tint);
  border-left: 6px solid var(--abs-blau);
  border-radius: 0 var(--abs-radius) var(--abs-radius) 0;
  font-size: var(--abs-groesse-l);
}

.beitrag blockquote > :last-child {
  margin-bottom: 0;
}

.beitrag blockquote cite {
  display: block;
  margin-top: var(--abs-raum-2);
  font-size: var(--abs-groesse-s);
  font-style: normal;
  color: var(--abs-text-leise);
}

/* Tabellen bekommen einen eigenen Rollbereich,
   damit die Seite nicht seitlich rollt. */
.tabelle-huelle {
  overflow-x: auto;
  margin-bottom: var(--abs-raum-5);
  border: var(--abs-rand);
  border-radius: var(--abs-radius);
}

.beitrag table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--abs-groesse-s);
}

.beitrag caption {
  padding: var(--abs-raum-3);
  text-align: left;
  font-weight: 600;
  color: var(--abs-blau);
  border-bottom: var(--abs-rand);
}

.beitrag th,
.beitrag td {
  padding: var(--abs-raum-3);
  text-align: left;
  border-bottom: var(--abs-rand);
  vertical-align: top;
}

.beitrag thead th {
  background-color: var(--abs-blau);
  color: var(--abs-flaeche);
  border-bottom: 0;
}

.beitrag tbody tr:nth-child(even) {
  background-color: var(--abs-grund);
}

.beitrag figure {
  margin: var(--abs-raum-5) 0;
}

.beitrag figure img {
  width: 100%;
  border-radius: var(--abs-radius);
  border: var(--abs-rand);
}

.beitrag figcaption {
  margin-top: var(--abs-raum-2);
  padding-left: var(--abs-raum-3);
  border-left: 4px solid var(--abs-gelb);
  font-size: var(--abs-groesse-s);
  color: var(--abs-text-leise);
}

@media (min-width: 700px) {
  .beitrag {
    padding: var(--abs-raum-7) var(--abs-raum-7);
  }
}

/* Berichtsseiten auf großen Bildschirmen so breit wie Kopf und Navigation
   (--abs-breite statt --abs-breite-schmal, 06.10.2026). Text füllt die Karte.
   Greift über :has() auch bei schon veröffentlichten Seiten, ohne die
   Vorlage zu ändern; Rechtstexte und Formulare (ebenfalls .huelle-schmal)
   bleiben schmal. Mobil unverändert. */
@media (min-width: 1000px) {
  main:has(.beitrag-kopf) .huelle-schmal {
    max-width: var(--abs-breite);
  }
  article.beitrag p,
  article.beitrag li {
    max-width: none;
  }
}


/* ==========================================================================
   17  DATEILISTE (DOKUMENTE ZUM HERUNTERLADEN)
   ========================================================================== */

.datei-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abs-raum-3);
}

.datei-eintrag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abs-raum-3);
  padding: var(--abs-raum-4);
  background-color: var(--abs-flaeche);
  border: var(--abs-rand);
  border-left: 6px solid var(--abs-blau);
  border-radius: var(--abs-radius);
}

.datei-eintrag:hover {
  border-left-color: var(--abs-gelb);
  box-shadow: var(--abs-schatten);
}

/* Dateiart als Kürzel, z. B. PDF */
.datei-typ {
  flex: 0 0 auto;
  padding: 0.15em 0.6em;
  background-color: var(--abs-blau);
  color: var(--abs-flaeche);
  font-size: var(--abs-groesse-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 3px;
}

.datei-name {
  flex: 1 1 14rem;
  font-weight: 600;
}

.datei-groesse {
  flex: 0 0 auto;
  font-size: var(--abs-groesse-s);
  color: var(--abs-text-leise);
}


/* ==========================================================================
   18  PERSONEN, TERMINE, SUCHTREFFER
   ========================================================================== */

/* Vorstand und Kandidatinnen/Kandidaten */
.personen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--abs-raum-5);
}

.person {
  display: flex;
  flex-direction: column;
  gap: var(--abs-raum-2);
  padding: var(--abs-raum-5);
  background-color: var(--abs-flaeche);
  border: var(--abs-rand);
  border-top: 6px solid var(--abs-blau);
  border-radius: var(--abs-radius);
  text-align: left;
}

.person-bild {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--abs-gelb);
  background-color: var(--abs-blau-tint);
}

.person-name {
  font-size: var(--abs-groesse-l);
  margin-bottom: 0;
}

.person-rolle {
  font-weight: 600;
  color: var(--abs-blau-mittel);
  margin-bottom: 0;
}

.person-text {
  color: var(--abs-text-leise);
  font-size: var(--abs-groesse-s);
  margin-bottom: 0;
}

/* Geplante Veranstaltungen der ABS auf der Startseite.
   Kein Kalender, nur eine gepflegte Liste. */
.termin-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abs-raum-3);
}

.termin {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abs-raum-3);
  padding: var(--abs-raum-4);
  background-color: var(--abs-flaeche);
  border: var(--abs-rand);
  border-radius: var(--abs-radius);
}

.termin-datum {
  flex: 0 0 auto;
  padding: 0.2em 0.7em;
  background-color: var(--abs-gelb);
  color: var(--abs-blau);
  font-weight: 700;
  font-size: var(--abs-groesse-s);
  border-radius: var(--abs-radius);
}

.termin-text {
  flex: 1 1 12rem;
  margin-bottom: 0;
}

/* Suche */
.such-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abs-raum-3);
  margin-bottom: var(--abs-raum-5);
}

.such-eingabe {
  flex: 1 1 16rem;
  padding: var(--abs-raum-3);
  min-height: 48px;
  border: 2px solid var(--abs-linie);
  border-radius: var(--abs-radius);
  background-color: var(--abs-flaeche);
}

.such-eingabe:focus {
  border-color: var(--abs-blau);
}

.treffer-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abs-raum-4);
}

.treffer {
  padding: var(--abs-raum-5);
  background-color: var(--abs-flaeche);
  border: var(--abs-rand);
  border-radius: var(--abs-radius);
}

.treffer-titel {
  font-size: var(--abs-groesse-l);
  margin-bottom: var(--abs-raum-1);
}

.treffer-pfad {
  font-size: var(--abs-groesse-xs);
  color: var(--abs-text-leise);
  margin-bottom: var(--abs-raum-2);
}

.treffer-auszug {
  margin-bottom: 0;
}

/* Fundstelle im Auszug hervorheben, gelbe Fläche mit dunklem Text */
.treffer-auszug mark {
  background-color: var(--abs-gelb);
  color: var(--abs-text);
  padding: 0 0.15em;
  font-weight: 600;
}


/* ==========================================================================
   19  FUSSZEILE
   ========================================================================== */

.fusszeile {
  background-color: var(--abs-blau-dunkel);
  color: var(--abs-flaeche);
  border-top: 6px solid var(--abs-gelb);
  padding-block: var(--abs-raum-7) var(--abs-raum-5);
  margin-top: var(--abs-raum-8);
}

/* Schaltflächen ausgenommen, siehe Begründung bei .buehne a */
.fusszeile a:not(.btn) {
  color: var(--abs-flaeche);
  text-decoration: underline;
}

.fusszeile a:not(.btn):hover {
  color: var(--abs-gelb);
}

.fuss-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abs-raum-6);
}

.fuss-titel {
  color: var(--abs-gelb);
  font-size: var(--abs-groesse-m);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--abs-raum-3);
}

.fuss-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abs-raum-2);
}

.fuss-text {
  margin-bottom: var(--abs-raum-3);
  font-size: var(--abs-groesse-s);
}

.fuss-unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abs-raum-3);
  margin-top: var(--abs-raum-6);
  padding-top: var(--abs-raum-4);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: var(--abs-groesse-s);
}

.fuss-unten p {
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .fuss-raster {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .fuss-raster {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ==========================================================================
   20  DRUCK
   ========================================================================== */

@media print {
  body {
    background-color: #FFFFFF;
    color: #000000;
    font-size: 11pt;
  }

  .kopf,
  .hauptnav,
  .nav-schalter,
  .skip-link,
  .filter-leiste,
  .such-leiste,
  .lightbox,
  .btn,
  .brotkrumen {
    display: none;
  }

  .fusszeile {
    background-color: transparent;
    color: #000000;
    border-top: 1pt solid #000000;
    margin-top: 1cm;
    padding-block: 0.5cm 0;
  }

  .fusszeile a,
  .fuss-titel {
    color: #000000;
  }

  .buehne,
  .seiten-kopf {
    background-color: transparent;
    color: #000000;
    border-bottom: 1pt solid #000000;
  }

  .buehne-titel,
  .seiten-kopf h1,
  .seiten-kopf p,
  .buehne-text {
    color: #000000;
  }

  .beitrag,
  .karte,
  .hinweis,
  .warnung,
  .treffer,
  .datei-eintrag {
    border: 1pt solid #666666;
    box-shadow: none;
    break-inside: avoid;
  }

  h1,
  h2,
  h3 {
    color: #000000;
    break-after: avoid;
  }

  /* Ziel externer und interner Links im Druck sichtbar machen */
  a[href^="http"]::after,
  a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  .extern::after {
    content: "";
  }

  img {
    break-inside: avoid;
  }
}


/* ==========================================================================
   21  REDUZIERTE BEWEGUNG
   ========================================================================== */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }

  .galerie-knopf:hover .galerie-bild {
    transform: none;
  }
}


/* ==========================================================================
   19  SPENDENSEITE
   Bankverbindung als Begriffsliste, GiroCodes als Bilder. Keine Skripte,
   keine Fremddienste - die QR-Codes werden lokal erzeugt
   (_werkzeuge/girocode.py) und liegen als SVG unter assets/img/.
   ========================================================================== */

.bank-daten {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) 1fr;
  gap: var(--abs-raum-2) var(--abs-raum-5);
  margin: 0 0 var(--abs-raum-5);
  padding: var(--abs-raum-5);
  background-color: var(--abs-flaeche);
  border: var(--abs-rand);
  border-left: 6px solid var(--abs-blau);
  border-radius: var(--abs-radius);
}

.bank-daten dt {
  font-weight: 600;
  color: var(--abs-blau);
}

.bank-daten dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Kopierbarer Wert, z. B. IBAN: feste Schrift, damit Zeichen unterscheidbar
   bleiben (0/O, 1/l). */
.bank-daten .wert {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono",
    Menlo, monospace;
  font-size: var(--abs-groesse-m);
  letter-spacing: 0.04em;
}

@media (max-width: 480px) {
  .bank-daten {
    grid-template-columns: 1fr;
    gap: var(--abs-raum-1) 0;
  }
  .bank-daten dd {
    margin-bottom: var(--abs-raum-3);
  }
}

.girocode-raster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abs-raum-5);
  margin: 0 0 var(--abs-raum-5);
  padding: 0;
  list-style: none;
}

.girocode {
  flex: 1 1 200px;
  max-width: 260px;
  margin: 0;
  text-align: center;
}

.girocode img {
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 0 auto var(--abs-raum-2);
  padding: var(--abs-raum-2);
  background-color: #FFFFFF;   /* QR braucht echtes Weiss, kein Tint */
  border: var(--abs-rand);
  border-radius: var(--abs-radius);
}

.girocode figcaption {
  font-size: var(--abs-groesse-s);
  color: var(--abs-text-leise);
}

.girocode figcaption strong {
  display: block;
  font-size: var(--abs-groesse-l);
  color: var(--abs-blau);
}


/* ==========================================================================
   20  BILDER ZUM BERICHT  (Berichtsseiten, gefuellt von bericht-bilder.js)
   ========================================================================== */

.bericht-bilder {
  margin: var(--abs-raum-6) 0;
  padding-top: var(--abs-raum-5);
  border-top: var(--abs-rand);
}

.bericht-bilder h2 {
  font-size: var(--abs-groesse-l);
  margin-bottom: var(--abs-raum-4);
}

.bericht-bilder-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: var(--abs-raum-3);
  margin: 0 0 var(--abs-raum-4);
  padding: 0;
  list-style: none;
}

.bericht-bilder-raster a {
  display: block;
  border-radius: var(--abs-radius);
  overflow: hidden;
  border: var(--abs-rand);
  background-color: var(--abs-grund);
  transition: border-color var(--abs-uebergang), box-shadow var(--abs-uebergang);
}

.bericht-bilder-raster a:hover,
.bericht-bilder-raster a:focus-visible {
  border-color: var(--abs-blau-mittel);
  box-shadow: var(--abs-schatten);
}

.bericht-bilder-raster img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}


/* ==========================================================================
   21  DANKE SAGEN  (Berichtsseiten, danke.js)
   ========================================================================== */

.danke {
  margin: var(--abs-raum-6) 0 0;
  padding: var(--abs-raum-5);
  background-color: var(--abs-blau-tint);
  border: var(--abs-rand);
  border-radius: var(--abs-radius);
}

.danke-text {
  margin-bottom: var(--abs-raum-3);
}

.danke .btn-reihe {
  align-items: center;
  margin-bottom: 0;
}

.danke .btn[disabled] {
  cursor: default;
  opacity: 0.75;
}

.danke [role="status"]:empty {
  display: none;
}

/* ==========================================================================
   22  BERICHT TEILEN  (Berichtsseiten, teilen.js, Symbole in img/teilen.svg)
   Am PC: Karte unter dem Knopf. Bis 48rem: Blatt von unten mit Schleier.
   ========================================================================== */

/* .btn setzt display und überstimmt damit das hidden-Attribut */
.btn[hidden] {
  display: none;
}

.teilen-huelle {
  position: relative;
}

.teilen-symbol {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.teilen {
  position: absolute;
  z-index: 60;
  top: calc(100% + var(--abs-raum-2));
  right: 0;
  width: 23rem;
  max-width: calc(100vw - 2 * var(--abs-raum-4));
  padding: var(--abs-raum-4);
  background-color: var(--abs-flaeche);
  border: var(--abs-rand);
  border-radius: var(--abs-radius-gross);
  box-shadow: var(--abs-schatten-hoch);
}

.teilen[hidden],
.teilen-schleier[hidden] {
  display: none;
}

.teilen-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abs-raum-3);
  margin-bottom: var(--abs-raum-3);
}

.teilen-titel {
  margin: 0;
  font-size: var(--abs-groesse-l);
}

.teilen-schliessen {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--abs-text-leise);
  cursor: pointer;
}

.teilen-schliessen:hover {
  background-color: var(--abs-grund);
  color: var(--abs-text);
}

.teilen-liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abs-raum-2);
}

.teilen-liste li {
  margin: 0;
}

.teilen-liste li[hidden] {
  display: none;
}

.teilen-liste .teilen-breit {
  grid-column: 1 / -1;
}

/* Ein Eintrag: Logo und Name, als Verweis oder Knopf gleich aussehend */
.teilen-option {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  gap: var(--abs-raum-3);
  width: 100%;
  min-height: 48px;
  padding: var(--abs-raum-2) var(--abs-raum-3);
  border: 1px solid transparent;
  border-radius: var(--abs-radius);
  background-color: var(--abs-grund);
  color: var(--abs-text);
  font: inherit;
  font-size: var(--abs-groesse-s);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--abs-uebergang), border-color var(--abs-uebergang);
}

.teilen-option:hover {
  background-color: var(--abs-blau-tint);
  border-color: var(--abs-linie);
  color: var(--abs-blau-dunkel);
}

.teilen-logo {
  width: 24px;
  height: 24px;
  flex: none;
}

/* Markenfarben nur für das Logo; der Name bleibt in Textfarbe */
.teilen-whatsapp .teilen-logo  { color: #25D366; }
.teilen-facebook .teilen-logo  { color: #0866FF; }
.teilen-x .teilen-logo         { color: #000000; }
.teilen-instagram .teilen-logo { color: #E4405F; }
.teilen-tiktok .teilen-logo    { color: #000000; }
.teilen-mail .teilen-logo,
.teilen-kopieren .teilen-logo,
.teilen-geraet .teilen-logo    { color: var(--abs-blau); }

/* Snapchat-Gelb ist auf hellem Grund unsichtbar: schwarzes Logo auf Gelb */
.teilen-snapchat .teilen-logo {
  color: #000000;
  background-color: #FFFC00;
  border-radius: 6px;
  padding: 2px;
}

.teilen-meldung {
  margin: var(--abs-raum-3) 0 0;
}

.teilen-meldung:empty {
  display: none;
}

.teilen-schleier {
  display: none;
}

/* Handy und schmale Fenster: Blatt von unten, Hintergrund abgedunkelt */
@media (max-width: 48rem) {
  .teilen {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    max-height: 85vh;
    max-height: 85dvh; /* sichtbare Höhe, auch bei eingeblendeter Safari-Leiste */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--abs-raum-4) var(--abs-raum-4) calc(var(--abs-raum-5) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--abs-radius-gross) var(--abs-radius-gross) 0 0;
    animation: teilen-hoch 0.2s ease-out;
  }

  .teilen-schleier {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 59;
    background-color: rgba(10, 25, 55, 0.45);
    /* Wischen auf dem Schleier bewegt nicht die Seite dahinter (iOS) */
    touch-action: none;
  }
}

@keyframes teilen-hoch {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .teilen {
    animation: none;
  }
}

@media print {
  .teilen,
  .teilen-schleier,
  .danke {
    display: none;
  }
}


/* ==========================================================================
   VORLESEN (Berichtsseiten, assets/js/vorlesen.js)
   ========================================================================== */

.vorlesen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abs-raum-3);
  margin-top: var(--abs-raum-4);
}

.vorlesen[hidden] {
  display: none;
}

/* Der gerade gelesene Absatz: gelbe Randlinie und zarte Fläche, kein Text
   in Gelb (Kontrastregel). */
.vorlesen-aktiv {
  background-color: var(--abs-gelb-tint);
  box-shadow: -6px 0 0 0 var(--abs-gelb);
  border-radius: 2px;
}

@media print {
  .vorlesen {
    display: none;
  }

  .vorlesen-aktiv {
    background-color: transparent;
    box-shadow: none;
  }
}


/* ==========================================================================
   SPENDEN: ein GiroCode mit Betragsauswahl, Kopierknöpfe (assets/js/spenden.js)
   ========================================================================== */

.kopier-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abs-raum-3);
  margin: 0 0 var(--abs-raum-3);
}

.kopier-reihe[hidden],
.betrag-wahl[hidden] {
  display: none;
}

.kopier-stand {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--abs-groesse-s);
  color: var(--abs-text-leise);
  min-height: 1.5em;
}

/* Hinweis "Am Handy" nur auf schmalen Bildschirmen */
.nur-schmal {
  display: none;
}

@media (max-width: 767px) {
  .nur-schmal {
    display: block;
  }
}

.girocode-klappe {
  margin: 0 0 var(--abs-raum-5);
}

.girocode-klappe > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--abs-blau);
  margin-bottom: var(--abs-raum-4);
}

.betrag-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abs-raum-2);
  margin: 0 0 var(--abs-raum-4);
}

.betrag-wahl .btn[aria-pressed="true"] {
  background-color: var(--abs-blau);
  border-color: var(--abs-blau);
  color: var(--abs-flaeche);
}

/* Ein einzelner, großer Code mit breiter weißer Ruhezone */
.girocode-einzeln {
  max-width: 300px;
  margin: 0;
}

.girocode-einzeln img {
  max-width: 260px;
  padding: var(--abs-raum-4);
}

@media print {
  .kopier-reihe,
  .betrag-wahl,
  .girocode-klappe > summary {
    display: none;
  }
}