/*
Theme Name: ventumo
Description: WordPress-Theme für Angelvereine – ein gemeinsames Theme für alle Vereine, Referenz ist der ASV Legden 1966 e.V. Eigenständiges Theme mit ACF-Feldern, ohne Eltern-Theme. Der Ordnername „ventumo“ ist die Identität des Themes und bleibt auf jeder Instanz gleich.
Author: Tim
Version: 5.23
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ventumo
*/

/* ===== FARBEN ===== */
:root {
    --gruen:      #019242;
    --dunkel:     #222222;
    --hell:       #ffffff;
    --hero-hell:  #dfe5df;
    --gruen-zart: #eef5ef;
    --karte-label:    #5b6b60;                    /* gedämpftes Grau-Grün für Labels in Karten */
    --karte-schatten: 0 4px 18px rgba(0,0,0,0.07); /* weicher, diffuser Karten-Schatten */
    --footer:         #141414;                     /* eine Stufe dunkler als --dunkel, damit der Footer sich vom dunklen CTA abhebt */
    --footer-linie:   rgba(255,255,255,0.09);      /* feine Haarlinie oben am Footer */
    --hero-schleier:  linear-gradient(rgba(0,35,18,0.55), rgba(0,35,18,0.65)); /* dunkelgrün über Kopfbildern, damit weiße Schrift lesbar bleibt */

    /* Breiten (Desktop): Bänder laufen über die volle Breite,
       der Inhalt sitzt zentriert im .container */
    --inhalt-breit: 1320px;  /* max. Breite des Inhalts inkl. Rand */
    --rand:         3rem;    /* seitlicher Rand innerhalb des Containers */
    --text-breit:   75ch;    /* max. Zeilenlänge für Fließtext */

    /* Design-System 2.0 (#173): Schriftgrößen und Abstände wachsen mit dem
       Fenster (clamp: Handy-Wert, Wachstum, Desktop-Höchstwert). */
    --fs-h1:        clamp(2.2rem, 1.3rem + 3.2vw, 4rem);      /* Startseiten-Kopf */
    --fs-h1-seite:  clamp(1.9rem, 1.4rem + 1.9vw, 3rem);      /* Seitenkopf der Unterseiten */
    --fs-h2:        clamp(1.6rem, 1.25rem + 1.5vw, 2.5rem);   /* Bandüberschrift */
    --fs-h2-spalte: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);    /* Überschrift in einer Spalte neben Bild */
    --fs-h3:        clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);  /* Karten, Personen */
    --fs-lead:      clamp(1.05rem, 0.97rem + 0.4vw, 1.3rem);  /* Einleitungen, Kopf-Text */
    --band:         clamp(3.5rem, 2.4rem + 3.6vw, 6rem);      /* Abstand oben/unten je Band */
    --karten-abstand: clamp(1.25rem, 0.8rem + 1.2vw, 2rem);
    --gruen-dunkel: #016b31;   /* Hover auf Grün */
    --gruen-kante:  #d3e2d6;   /* Kartenrahmen auf zart-grünen Flächen */
}

/* ===== VEREINSFARBE (#189) =====
   Trägt ein Verein im Vereinsmodus eine eigene Farbe ein, gibt das Theme sie als
   --vereinsfarbe aus und hängt die Klasse .mit-vereinsfarbe an <body> (inc/vereinsfarbe.php).
   Dann leiten sich alle Grüntöne aus dieser einen Farbe ab. Ohne eigene Farbe gelten
   unverändert die festen Werte oben. Die Anteile sind so gewählt, dass aus dem Grün
   wieder (fast genau) die festen Werte entstehen. */
body.mit-vereinsfarbe {
    --gruen:         var(--vereinsfarbe);
    --gruen-dunkel:  color-mix(in srgb, var(--gruen) 73%, #000);     /* Hover */
    --gruen-kante:   color-mix(in srgb, var(--gruen) 20%, #fff);     /* Kartenrahmen */
    --gruen-zart:    color-mix(in srgb, var(--gruen) 8%, #fff);      /* getönte Bänder */
    --hero-hell:     color-mix(in srgb, var(--gruen) 8%, #ececec);
    --karte-label:   color-mix(in srgb, var(--gruen) 15%, #636363);  /* gedämpfte Labels */
    --gruen-nacht:   color-mix(in srgb, var(--gruen) 24%, #000);     /* Grundton des Bildschleiers */
    --hero-schleier: linear-gradient(color-mix(in srgb, var(--gruen-nacht) 55%, transparent),
                                     color-mix(in srgb, var(--gruen-nacht) 65%, transparent));
}

/* ===== KARTEN (global) =====
   Einheitlicher Look für alle Karten-/Box-Typen: weiß, weicher Schatten,
   runde Ecken, KEIN farbiger Streifen. Grün wird nur noch als Akzent
   (Preis/Label) eingesetzt. So entsteht überall klarer Kontrast – auch auf
   den zart-grün getönten Abschnitten (.gewa-partner, .mw-beitraege, …). */
.beitrag-karte,
.vr-ressort-person,
.partner-karte,
.aufnahme-kontakt {
    background: var(--hell);
    border-radius: 16px;
    padding: 1.85rem 1.5rem;
    box-shadow: var(--karte-schatten);
}

/* ===== RESET & BASIS ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.0625rem;   /* 17px – etwas größer als früher 16px, liest sich ruhiger (#173) */
    line-height: 1.6;
    color: var(--dunkel);
    background: var(--hell);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; }

.site-content { flex: 1; }

a { color: var(--gruen); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== HEADER =====
   Heller Kopf (#140): weißer Grund, Schrift grün, feine Linie unten.
   Seit #174: Wappen + Vereinsname + Untertitel links, Menü rechts,
   „Mitglied werden“ als Knopf; bleibt beim Scrollen oben (sticky).
   Die Social-Links stehen seit #174 im Fuß. */
.site-header {
    background: var(--hell);
    border-bottom: 1px solid #e0e4e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 0.7rem clamp(1.25rem, 3vw, 3rem);
    display: flex;
    align-items: center;
    gap: 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    font-size: 1rem;   /* Menü bleibt bei 16px, auch wenn der Fließtext 17px hat (#173) */
}
/* Angemeldet: unter der WordPress-Leiste kleben (ab 601px ist sie fest oben) */
@media (min-width: 783px) { .admin-bar .site-header { top: 32px; } }
@media (min-width: 601px) and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.kopf-marke { display: flex; align-items: center; gap: 0.85rem; color: var(--gruen); }
.kopf-marke:hover { text-decoration: none; }
.kopf-wappen { height: 54px; width: auto; }
.kopf-name .site-titel { display: block; font-size: 1.22rem; font-weight: 800; line-height: 1.1; }
.kopf-name small {
    display: block; margin-top: 0.2rem; font-size: 0.78rem; font-weight: 500;
    color: var(--karte-label); letter-spacing: 0.02em;
}

/* Navigation immer rechts */
.hauptnavigation { margin-left: auto; }


/* ===== NAVIGATION ===== */
.hauptnavigation ul { list-style: none; display: flex; gap: 1.5rem; }

/* „Mitglied werden“ (Klasse menu-cta, siehe inc/kopf-fuss.php) als grüner Knopf */
@media (min-width: 769px) {
    /* Hauptpunkt + Pfeil bleiben zusammen; bei vielen Punkten bricht die Zeile um */
    .hauptnavigation > div > ul,
    .hauptnavigation > ul { align-items: center; gap: 0.5rem 2rem; flex-wrap: wrap; justify-content: flex-end; }
    .hauptnavigation .menu > li > a { white-space: nowrap; }
    .hauptnavigation .menu-cta > a {
        display: inline-block; background: var(--gruen); color: var(--hell);
        padding: 0.62rem 1.3rem; border-radius: 6px;
    }
    .hauptnavigation .menu-cta > a:hover { background: var(--gruen-dunkel); color: var(--hell); }
}
.hauptnavigation a { color: var(--gruen); font-weight: 600; }
.hauptnavigation a:hover { text-decoration: none; color: var(--dunkel); }

/* ===== DROPDOWN ===== */
.hauptnavigation .menu-item-has-children { position: relative; }

/* Pfeil-Indikator */
.hauptnavigation .menu-item-has-children > a::after {
    content: ' \25BE'; /* ▾ */
    font-size: 0.8rem;
}

.hauptnavigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--hell);
    min-width: 180px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    z-index: 200;
    flex-direction: column;
    gap: 0;
    list-style: none;
}

@media (min-width: 769px) {
    .hauptnavigation .menu-item-has-children:hover > .sub-menu,
    .hauptnavigation .menu-item-has-children:focus-within > .sub-menu {
        display: flex;
    }
}

/* Untermenü-Umschalter (nur Mobile sichtbar) */
.submenu-toggle { display: none; }

.hauptnavigation .sub-menu a {
    display: block;
    padding: 0.6rem 1rem;
    white-space: nowrap;
    border-bottom: 1px solid #edf0ed;
    font-weight: 500;
}
.hauptnavigation .sub-menu a:hover { background: var(--gruen-zart); }

.hauptnavigation .sub-menu li:last-child a { border-bottom: none; }

@media (max-width: 768px) {
    .hauptnavigation .menu-item-has-children > a::after { content: ''; }

    /* Hauptseite + Aufklapp-Button nebeneinander */
    .hauptnavigation .menu-item-has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .hauptnavigation .menu-item-has-children > a { flex: 1; }

    .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
    }
    .submenu-pfeil {
        display: block;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid var(--gruen);
        transition: transform 0.2s;
    }
    .submenu-toggle[aria-expanded="true"] .submenu-pfeil { transform: rotate(180deg); }

    /* Untermenüs standardmäßig zu, nur bei geöffneter Hauptseite anzeigen */
    .hauptnavigation .sub-menu {
        display: none;
        position: static;
        width: 100%;
        background: var(--gruen-zart);
        box-shadow: none;
        border-radius: 0;
        min-width: auto;
    }
    .hauptnavigation .menu-item-has-children.sub-menu-offen > .sub-menu {
        display: flex;
    }
    .hauptnavigation .sub-menu a { padding-left: 2rem; }
}

/* ===== INHALT =====
   Die Seite ist grundsätzlich zentriert – aber über Vererbung, nicht mehr über
   `.site-content * { text-align: center }` (#173). So kann ein Baustein (Karte,
   Textspalte, Fließtext) einfach `text-align: left` setzen, und alles darin folgt. */
.site-content         { width: 80%; max-width: 80%; margin: 2rem auto; text-align: center; }
.site-content input,
.site-content textarea,
.site-content select  { text-align: left; }

/* Fließtext und Text in Karten/Spalten steht links – zentrierte Mehrzeiler lesen
   sich schlecht. Zentriert bleiben Köpfe, Einleitungen, Personen und Knöpfe.
   Bausteine mit eigener Regel (.seite-inhalt, .beitrag-inhalt, .gewaesser-info,
   .aufnahme-inhalt, .ao-text) setzen text-align: left dort. */
.kontakt-text-inhalt,
.geschichte-text,
.vl-karte-inhalt,
.gd-inhalt { text-align: left; }

/* Seiten ohne Bänder (Beitrag, Archiv, Suche, 404): Luft zu Header und Footer –
   seit mobil randlos (#173) auf allen Breiten. Doppelte Klasse, weil .container
   weiter unten das Padding sonst überschreibt. */
.container.inhalt-wrapper { padding-top: 2rem; padding-bottom: 2rem; }

/* ===== VOLLE BREITE (Desktop) =====
   Abschnitte (<section>) und Hero sind Bänder über die volle Fensterbreite;
   der Inhalt sitzt im .container (max. --inhalt-breit, zentriert).
   Der Header bleibt bewusst über die volle Breite verteilt – die Navigation
   braucht den Platz (an der Inhaltskante ausgerichtet bricht sie um).
   Unter 769px gelten weiter die Mobil-Regeln weiter unten. */
@media (min-width: 769px) {
    .site-content { width: 100%; max-width: none; margin: 0; }
    .container    { max-width: var(--inhalt-breit); margin-left: auto; margin-right: auto;
                    padding-left: var(--rand); padding-right: var(--rand); }

    /* Fließtext nicht über die volle Breite laufen lassen */
    .standard-seite .seite-inhalt,
    .beitrag-inhalt { max-width: var(--text-breit); margin-left: auto; margin-right: auto; }
}

article {
    background: white;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

article h2 { margin-bottom: 0.5rem; font-size: 1.3rem; }
article h2 a { color: var(--dunkel); }
article h2 a:hover { color: var(--gruen); }

/* ===== FOOTER (#174) =====
   Vier Spalten: Verein mit Social · Kontakt · zwei Linkspalten aus dem Hauptmenü;
   darunter © und Rechtliches (Menü „Fußzeile“). Linksbündig. */
.site-footer {
    background: var(--footer);
    border-top: 1px solid var(--footer-linie);
    color: #b9b9b9;
    text-align: left;
    margin-top: 0;   /* das letzte Band stößt direkt an den Footer – seit #173 auch mobil */
    font-size: 0.95rem;
}
.site-footer a { color: #b9b9b9; }
.site-footer a:hover { color: var(--hell); text-decoration: none; }

.fuss-raster {
    display: grid;
    grid-template-columns: 1.5fr 1.3fr 1fr 1fr;
    gap: 2.5rem;
    padding: 4rem 0 3rem;
}
.fuss-spalte p { line-height: 1.65; }
.fuss-marke img { height: 74px; width: auto; background: var(--hell); border-radius: 12px; padding: 8px 10px; }
.fuss-name { color: var(--hell); font-weight: 700; font-size: 1.1rem; margin-top: 1rem; }
.fuss-titel {
    color: var(--hell); font-size: 0.78rem; letter-spacing: 0.12em;
    text-transform: uppercase; margin-bottom: 1rem;
}
.fuss-spalte ul { list-style: none; display: grid; gap: 0.55rem; }
.fuss-kontakt li { display: flex; gap: 0.6rem; align-items: flex-start; }
.fuss-kontakt svg {
    width: 18px; height: 18px; flex: none; margin-top: 0.2rem;
    fill: none; stroke: #7fbf98; stroke-width: 1.8;
}
.fuss-kontakt-mehr { padding-left: calc(18px + 0.6rem); }
.fuss-social { display: flex; gap: 0.6rem; margin-top: 1.3rem; }
.fuss-social a {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
}
.fuss-social a:hover { border-color: rgba(255,255,255,0.5); }

.fuss-unten {
    border-top: 1px solid var(--footer-linie);
    padding: 1.2rem 0;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    font-size: 0.85rem; color: #8d8d8d;
}
.footer-nav ul { list-style: none; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-nav a { color: #8d8d8d; }
.site-footer .container { text-align: left; }   /* .container zentriert sonst */

/* ===== BÄNDER (Design-System 2.0, #173) =====
   Gemeinsamer Baustein für Abschnitte: abwechselnd weiß / zart-grün, Abstand
   wächst mit dem Fenster. Kopf = kleine Überzeile + grüne Überschrift (+ Text). */
.band        { padding: var(--band) 0; }
.band--weiss { background: var(--hell); }
.band--zart  { background: var(--gruen-zart); }
.band-kopf   { max-width: 780px; margin: 0 auto clamp(2rem, 1.4rem + 1.6vw, 3rem); text-align: center; }
.band-dach   { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
               text-transform: uppercase; color: var(--karte-label); margin-bottom: 0.7rem; }
.band-kopf h2 { font-size: var(--fs-h2); color: var(--gruen); }
.band-kopf p:not(.band-dach) { margin-top: 0.9rem; font-size: var(--fs-lead); color: #555; }
.band-knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2.5rem; }

/* Zweitrangiger Knopf: grüner Rand statt grüner Fläche */
.btn-rand {
    display: inline-block; border: 2px solid var(--gruen); color: var(--gruen);
    padding: 0.62rem 1.4rem; border-radius: 6px; font-weight: 600;
}
.btn-rand:hover { background: var(--gruen); color: var(--hell); text-decoration: none; }

/* ===== STARTSEITE (front-page.php) ===== */
/* Kopf: kurze Botschaft, bis zu zwei Wege. Ohne Bild heller Grund. */
.st-hero {
    position: relative;
    background: var(--hero-hell);
    color: var(--dunkel);
    min-height: clamp(30rem, 20rem + 24vw, 40rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 1.5rem 8rem;   /* unten Platz für die Zahlen-Karte */
}
.st-hero--bild { color: var(--hell); }
.st-hero-inhalt { position: relative; z-index: 1; max-width: 920px; }
.st-hero h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
.st-hero h1::after {
    content: ''; display: block; width: 72px; height: 3px;
    background: var(--gruen); margin: 1.4rem auto 0;
}
.st-hero-text { font-size: var(--fs-lead); opacity: 0.92; max-width: 44ch; margin: 1.3rem auto 0; }
.st-hero--bild .band-dach { color: #cfe6d6; }
.st-hero-knoepfe { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }
.st-hero .btn { padding: 0.9rem 2rem; border-radius: 6px; }
.st-hero--bild .btn { background: var(--hell); color: var(--gruen); }
.st-hero--bild .btn:hover { background: #f0f0f0; }
/* Zweiter Knopf im Kopf: nur Rand – auf dem Bild weiß, ohne Bild grün */
.btn-glas {
    display: inline-block; border: 2px solid var(--gruen); color: var(--gruen);
    padding: 0.8rem 1.8rem; border-radius: 6px; font-weight: 600;
}
.btn-glas:hover { text-decoration: none; background: rgba(1,146,66,0.08); }
.st-hero--bild .btn-glas { border-color: rgba(255,255,255,0.75); color: var(--hell); }
.st-hero--bild .btn-glas:hover { background: rgba(255,255,255,0.12); }

/* Kopfbild (Startseiten-Kopf + Seitenkopf) als echtes <img> statt CSS-Hintergrund
   (#172): so lädt jedes Gerät die passende Größe (srcset). Liegt wie vorher ein
   Hintergrund ganz unten – isolation hält z-index:-1 innerhalb des Bands,
   darüber der Schleier (::before), darüber der Inhalt. */
.st-hero--bild,
.seiten-hero--bild { isolation: isolate; }
.kopfbild {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.st-hero--bild::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-schleier);
}

.btn {
    background: var(--gruen);
    color: var(--hell);
    padding: 0.8rem 2rem;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
}
.btn:hover { background: var(--gruen-dunkel); text-decoration: none; }

/* Zahlen: grüne Karte, die in den Kopf hineinragt (ersetzt die grauen Infoboxen) */
.st-zahlen { background: var(--gruen-zart); }
.st-zahlen-karte {
    position: relative;
    z-index: 2;
    margin: -4.5rem auto 0;
    max-width: 980px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--gruen);
    color: var(--hell);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0,35,18,0.18);
}
.st-zahl { padding: 1.8rem 1rem 1.6rem; }
.st-zahl + .st-zahl { border-left: 1px solid rgba(255,255,255,0.22); }
.st-zahl-wert {
    display: block; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
    font-weight: 800; line-height: 1; letter-spacing: -0.02em;
}
.st-zahl-label {
    display: block; margin-top: 0.5rem; font-size: 0.8rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(255,255,255,0.85);
}
.st-zahlen + .band { padding-top: calc(var(--band) - 0.5rem); }

/* ===== BILDKARTE (#173) – gemeinsamer Baustein für Beitragskarten =====
   Immer mit Bild: Beitragsbild → erstes Bild im Beitrag → Wappen auf Zart-Grün
   (asv_bild_karte() in inc/karten.php). Text steht links. Flex statt Grid,
   damit auch 1–2 Karten mittig stehen. */
.bild-karten { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--karten-abstand); }
.bild-karte {
    flex: 0 1 calc((100% - 2 * var(--karten-abstand)) / 3);
    display: flex;
    flex-direction: column;
    background: var(--hell);
    border-radius: 16px;
    box-shadow: var(--karte-schatten);
    overflow: hidden;
    padding: 0;                 /* allgemeine article-Regel zurücksetzen */
    margin: 0;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bild-karte:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.bild-karte-bild {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--gruen-zart), var(--gruen-kante));
}
.bild-karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.bild-karte-bild--wappen { display: flex; align-items: center; justify-content: center; }
.bild-karte-bild--wappen img { width: auto; height: 58%; object-fit: contain; opacity: 0.9; }
.bild-karte-inhalt { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.5rem; }
.bild-karte-meta {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 0.85rem; color: var(--karte-label); margin-bottom: 0.7rem;
}
.bild-karte h3 { font-size: var(--fs-h3); margin-bottom: 0.55rem; }
.bild-karte h3 a { color: var(--dunkel); }
.bild-karte h3 a:hover { color: var(--gruen); text-decoration: none; }
/* Auszug auf drei Zeilen begrenzen – Karten bleiben gleich hoch */
.bild-karte-auszug {
    color: #4f574f; font-size: 0.97rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bild-karte .mehr { margin-top: auto; padding-top: 1rem; font-weight: 600; }

/* Kategorie-Pille (z. B. „Senioren“ auf einer Karte) */
.pille {
    background: #e4f3ea; color: #01732f; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px;
}

/* Datumszeile über Beitragstiteln (auch „Gruppe - 1“) */
.st-karte-meta {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--karte-label);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}

/* Termine auf der Startseite: die Agenda aus „Termine - 1“, schmaler */
.st-agenda { max-width: 900px; margin: 0 auto; }
.st-agenda-fuss { max-width: 900px; margin: 1.2rem auto 0; text-align: right; }

/* ===== SOCIAL-KNÖPFE – in Vereinsgrün (#173), nicht in Facebook-Blau/Instagram-Bunt ===== */
.social-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.8rem;
    border-radius: 6px;
    background: var(--gruen);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.social-btn:hover { background: var(--gruen-dunkel); text-decoration: none; }
.social-btn svg { display: block; width: 22px; height: 22px; }

/* ===== CTA-BEREICH ===== */
.cta-bereich {
    background: var(--dunkel);
    color: white;
    text-align: center;
    padding: var(--band) 1.5rem;
    margin-top: 0;
}

.cta-bereich h2 { font-size: var(--fs-h2); margin-bottom: 1rem; }
.cta-bereich p  { font-size: var(--fs-lead); margin-bottom: 2rem; opacity: 0.88; max-width: 46ch; margin-left: auto; margin-right: auto; }

.btn-hell {
    background: white;
    color: var(--dunkel);
    padding: 0.85rem 2.2rem;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
}
.btn-hell:hover { background: #f0f0f0; text-decoration: none; }

/* ===== LINKS & KNÖPFE ===== */
.mehr { color: var(--gruen); font-weight: 500; display: inline-block; margin-top: 0.5rem; }

.btn-aktuelles {
    display: inline-block;
    background: var(--gruen);
    color: var(--hell);
    padding: 0.65rem 1.4rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
}
.btn-aktuelles:hover { opacity: 0.88; text-decoration: none; }

/* ===== EINZELBEITRAG (single.php) ===== */
.beitrag-einzel {
    background: white;
    padding: 2rem;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.beitrag-header { margin-bottom: 1.5rem; }
.beitrag-header h1 { font-size: 1.8rem; margin-bottom: 0.5rem; }

.beitrag-meta { color: #666; font-size: 0.9rem; }
.beitrag-meta a { color: var(--gruen); }

.beitrag-bild { margin: 1.5rem 0; }
.beitrag-bild img { width: 100%; height: auto; border-radius: 4px; display: block; }

.beitrag-inhalt { line-height: 1.8; text-align: left; }
.beitrag-inhalt p { margin-bottom: 1rem; }
.beitrag-inhalt h2, .beitrag-inhalt h3 { margin: 1.5rem 0 0.5rem; }

.beitrag-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
    font-size: 0.9rem;
}

.beitrag-navigation a { color: var(--gruen); }
.beitrag-navigation a:hover { text-decoration: underline; }

/* ===== STATISCHE SEITE (page.php) ===== */
.seite-einzel {
    background: white;
    padding: 2rem;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.seite-header { margin-bottom: 1.5rem; border-bottom: 2px solid var(--gruen); padding-bottom: 1rem; }
.seite-header h1 { font-size: 1.8rem; }

.seite-bild { margin: 1.5rem 0; }
.seite-bild img { width: 100%; height: auto; border-radius: 4px; display: block; }

.seite-inhalt { line-height: 1.8; text-align: left; }
.seite-inhalt p { margin-bottom: 1rem; }
.seite-inhalt h2, .seite-inhalt h3 { margin: 1.5rem 0 0.5rem; }

/* ===== CONTAINER (für Abschnitte außerhalb .site-content) ===== */
.container { width: 100%; padding: 0 2rem; text-align: center; }

/* ===== ARCHIV & SUCHE =====
   Das Archiv nutzt seit #168 den Seitenkopf (.seiten-hero), .archiv-kopf
   nur noch die Suche. */
.archiv-kopf {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gruen);
}
.archiv-kopf h1 { font-size: 1.8rem; }
.archiv-kopf em { font-style: normal; color: var(--gruen); }
.archiv-beschreibung { color: #666; margin: 0 0 1.5rem; }
.keine-beitraege { color: #666; font-style: italic; }

/* ===== SUCHFORMULAR ===== */
.search-form { display: flex; gap: 0.5rem; margin: 1.5rem 0; }
.search-field {
    flex: 1;
    padding: 0.6rem 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}
.search-submit {
    background: var(--gruen);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}
.search-submit:hover { filter: brightness(0.88); }

/* ===== PAGINIERUNG ===== */
.seiten-navigation { margin-top: 2rem; }
.nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.nav-links .page-numbers {
    padding: 0.4rem 0.8rem;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: var(--dunkel);
}
.nav-links .page-numbers.current { background: var(--gruen); color: white; border-color: var(--gruen); }
.nav-links a.page-numbers:hover { border-color: var(--gruen); color: var(--gruen); text-decoration: none; }

/* ===== MOBILES MENÜ ===== */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Skip-Link: nur bei Tastatur-Fokus sichtbar, springt zum Inhalt */
.skip-link:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1000;
    width: auto; height: auto;
    margin: 0;
    padding: 0.75rem 1.25rem;
    clip: auto;
    background: var(--gruen);
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
}

/* Tastatur-Fokus (#172): deutlicher Ring, nur bei Tastaturbedienung
   (:focus-visible – Mausklicks bleiben ohne Rahmen). Auf dunklen Bändern weiß. */
:focus-visible {
    outline: 3px solid var(--gruen);
    outline-offset: 3px;
    border-radius: 2px;
}
.hero--bild :focus-visible,
.seiten-hero--bild :focus-visible,
.cta-bereich :focus-visible,
.site-footer :focus-visible { outline-color: #fff; }

/* Wer im System „Bewegung reduzieren“ eingestellt hat, bekommt keine
   Übergänge (Karten-Lift, Bild-Zoom, Menü-Pfeil) – nur den Endzustand. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

.menu-toggle {
    display: none;
    background: transparent;
    border: 2px solid rgba(1,146,66,0.5);
    border-radius: 4px;
    padding: 0.5rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gruen);
    border-radius: 2px;
    position: relative;
    transition: transform 0.2s, opacity 0.2s;
}
.hamburger-icon { margin: 0 auto; }
.hamburger-icon::before { content: ''; top: -7px; }
.hamburger-icon::after  { content: ''; top: 5px; }

/* X-Icon wenn Menü offen */
.menu-toggle[aria-expanded="true"] .hamburger-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .hamburger-icon::before { transform: rotate(45deg); top: 0; }
.menu-toggle[aria-expanded="true"] .hamburger-icon::after  { transform: rotate(-45deg); top: -2px; }

@media (max-width: 768px) {
    .site-header { flex-wrap: wrap; gap: 0.75rem; }   /* bleibt sticky (#174) */

    .kopf-marke { flex: 1; min-width: 0; }
    .kopf-wappen { height: 42px; }
    .kopf-name .site-titel { font-size: 1.02rem; }
    .kopf-name small { font-size: 0.7rem; }
    /* Offenes Menü darf scrollen – der Kopf klebt oben und wäre sonst zu hoch */
    .hauptnavigation.menu-offen { max-height: calc(100vh - 5rem); overflow-y: auto; }

    .menu-toggle { display: flex; }

    .hauptnavigation {
        display: none;
        width: 100%;
        order: 3;
        padding: 0.5rem 0 1rem;
    }
    .hauptnavigation.menu-offen { display: block; }

    .hauptnavigation ul {
        flex-direction: column;
        gap: 0;
    }
    .hauptnavigation ul li a {
        display: block;
        padding: 0.6rem 0;
        border-bottom: 1px solid #edf0ed;
    }
}

@media (min-width: 769px) {
    .menu-toggle { display: none; }
    .hauptnavigation { display: block !important; }
}

/* ===== ÜBER UNS TEMPLATE ===== */

/* Seiten-Header (kleiner Hero) */
.seiten-hero {
    background: var(--hero-hell);
    color: var(--dunkel);
    padding: 3rem 0;
    text-align: center;
    border-bottom: 1px solid #e0e4e0;
}
.seiten-hero h1 {
    font-size: var(--fs-h1-seite);
    margin-bottom: 0;
    text-align: center;
    display: inline-block;
    padding-bottom: 0.6rem;
    border-bottom: 3px solid var(--gruen);
}

/* Seiten-Header mit Bild (#168): wie der Hero der Startseite – Bild unter
   dunkelgrünem Schleier, weiße Schrift, gleiche Höhe. Das Bild setzt
   asv_seiten_hero() (inc/seitenkopf.php). Muss nach .seiten-hero stehen. */
.seiten-hero--bild {
    position: relative;
    color: #fff;
    padding: 5rem 0;
    border-bottom: none;
}
.seiten-hero--bild::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-schleier);
}
.seiten-hero--bild .container {
    position: relative;
    z-index: 1;
}

/* Intro-Text unter der farbigen Box */
.seiten-intro {
    background: var(--hell);
    padding: 2.5rem 0 0.5rem;
    text-align: center;
}
.seiten-intro p {
    max-width: var(--text-breit);
    margin: 0 auto;
    font-size: 1.15rem;
    line-height: 1.7;
    color: #555;
}

/* Vereinsgeschichte */
.geschichte {
    padding: 3.5rem 0;
    background: var(--hell);
}
.geschichte-inner { display: flex; gap: 3rem; align-items: flex-start; }
.geschichte-inner.mit-bild .geschichte-text { flex: 1; }
.geschichte-inner:not(.mit-bild) .geschichte-text { width: 100%; max-width: var(--text-breit); margin: 0 auto; }
.geschichte-text { text-align: center; }
.geschichte-text h2 { font-size: var(--fs-h2-spalte); margin-bottom: 1rem; color: var(--dunkel); }
.geschichte-text p  { line-height: 1.8; margin-bottom: 1rem; }
.geschichte-bild { flex: 0 0 340px; }
.geschichte-bild img { width: 100%; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

@media (max-width: 768px) {
    .geschichte-inner { flex-direction: column; }
    .geschichte-bild  { flex: none; width: 100%; }
}

/* Vorstand */
.vorstand {
    padding: 3.5rem 0;
    background: var(--gruen-zart);
}
.vorstand h2 { font-size: var(--fs-h2); margin-bottom: 2rem; text-align: center; }

.vorstand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
@media (max-width: 1100px) {
    .vorstand-grid { grid-template-columns: repeat(3, 1fr); }
}

.vorstand-karte {
    background: var(--hell);
    border-radius: 8px;
    padding: 1.5rem 1rem;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.vorstand-karte img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 0.75rem;
    border: 3px solid var(--gruen);
}

.vorstand-karte-platzhalter {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #e0e0e0;
    margin: 0 auto 0.75rem;
    border: 3px solid var(--gruen);
}

.vorstand-karte h3 { font-size: 1rem; margin-bottom: 0.25rem; color: var(--dunkel); }
.vorstand-karte p  { font-size: 0.85rem; color: #666; }

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

/* Vereinsziele */
.vereinsziele {
    padding: 3.5rem 0;
    background: var(--hell);
}
.vereinsziele h2 { font-size: var(--fs-h2); margin-bottom: 1.5rem; }
.vereinsziele-text { width: 100%; line-height: 1.8; text-align: center; }
.vereinsziele-text p { margin-bottom: 1rem; }
/* Liste ist zentriert gesetzt – Punkte deshalb innen, sonst hängen sie am linken Rand */
.vereinsziele-text ul { list-style-position: inside; padding-left: 0; margin-bottom: 1rem; }
.vereinsziele-text li { margin-bottom: 0.4rem; }

/* ===== VORSTAND-RESSORT TEMPLATE ===== */
/* Pro Person ein Abschnitt: Text links, Ansprechpartner rechts */
.vr-ressort { padding: 3rem 0; background: var(--hell); }
.vr-ressort.getoent { background: var(--gruen-zart); }

.vr-ressort-inner {
    display: flex;
    gap: 3rem;
    align-items: center;
}
.vr-ressort-text { flex: 1; min-width: 0; }
.vr-ressort-text, .vr-ressort-text * { text-align: left; }
.vr-ressort-text h2 { font-size: var(--fs-h2-spalte); color: var(--gruen); margin-bottom: 1rem; }
.vr-aufgabe { line-height: 1.8; }
.vr-aufgabe p { margin-bottom: 1rem; }
.vr-aufgabe ul, .vr-aufgabe ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.vr-aufgabe li { margin-bottom: 0.35rem; }

.vr-ressort-person {
    flex: 0 0 260px;
    text-align: center;
}
.vr-ressort-person img,
.vr-person-platzhalter {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 0.85rem;
    border: 3px solid var(--gruen);
    display: block;
}
.vr-person-platzhalter { background: #e0e0e0; }
.vr-ressort-person h3 { font-size: 1.1rem; margin-bottom: 0.2rem; color: var(--dunkel); }
.vr-funktion { color: var(--gruen); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; }
.vr-ressort-person p { font-size: 0.9rem; margin-bottom: 0.25rem; }
.vr-ressort-person a { color: var(--dunkel); }
.vr-ressort-person a:hover { color: var(--gruen); }

.vr-zurueck-bereich { padding: 2rem 0; background: var(--hell); }

/* ===== VORSTAND TEMPLATE (page-vorstand.php) =====
   Übersicht aller Bereiche – im Stil der übrigen Seiten: Standard-Hero,
   grüne H2, Abschnitte abwechselnd weiß / grün getönt, Personen als Karten
   mit grüner Funktion (.vr-funktion aus dem gemeinsamen Theme-CSS).
   group_vorstand – Feldnamen unverändert. */
.vs-bereich-sektion { padding: 3.5rem 0; background: var(--hell); }
.vs-bereich-sektion.gruen { background: var(--gruen-zart); }
.vs-bereich-sektion h2 { font-size: var(--fs-h2); color: var(--gruen); margin-bottom: 0.75rem; }
.vs-bereich-intro { max-width: 700px; margin: 0 auto 1.25rem; color: #555; line-height: 1.7; }
.vs-bereich-mail { margin: 0 auto 2rem; }
.vs-bereich-mail a { color: var(--gruen); font-weight: 600; }
.vs-bereich-mail a:hover { text-decoration: underline; }

/* Personen-Karten: feste Höchstbreite je Karte, Reihe zentriert –
   so passen bei voller Breite bis zu 4–5 nebeneinander, ohne dass 2–3 Karten
   auf Riesenbreite gezogen werden. */
.vs-personen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
    justify-content: center;
    gap: 1.5rem;
}
.vs-person-karte {
    background: var(--hell);
    border: 1px solid #e0e6e0;
    border-radius: 12px;
    padding: 1.6rem 1.4rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.vs-person-karte:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.vs-bereich-sektion.gruen .vs-person-karte { border-color: #d3e2d6; }
/* Optionales Foto: gleicher Kreis wie auf den Warte-Seiten (.vr-ressort-person) */
.vs-person-foto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gruen); display: block; margin: 0 auto 0.9rem; }
.vs-person-name { font-weight: 700; color: var(--dunkel); font-size: 1.05rem; margin-bottom: 0.15rem; }
.vs-person-karte .vr-funktion { margin-bottom: 0.6rem; }
.vs-person-karte p { font-size: 0.9rem; margin-bottom: 0.25rem; }
.vs-person-karte p:last-child { margin-bottom: 0; }
.vs-person-karte a { color: var(--karte-label); word-break: break-word; }
.vs-person-karte a:hover { color: var(--gruen); }

@media (max-width: 600px) {
    .vs-personen-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .vr-ressort-inner { flex-direction: column; }
    .vr-ressort-person { flex: none; width: 100%; max-width: 320px; margin: 0 auto; }
    .vr-ressort { padding: 2.5rem 0; }
}

/* ===== JUGENDWART TEMPLATE ===== */
.jw-themen { padding: 3.5rem 0; background: var(--hell); }
.jw-themen h2 { font-size: var(--fs-h2); color: var(--gruen); margin-bottom: 0.75rem; }
.jw-themen-intro { max-width: 700px; margin: 0 auto 2.5rem; color: #555; line-height: 1.7; }
.jw-themen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
}
.jw-thema {
    background: var(--hell);
    border: 1px solid #e0e6e0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}
.jw-thema:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.jw-thema-bild img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}
.jw-thema-inhalt { padding: 1.5rem; text-align: left; }
.jw-thema-inhalt, .jw-thema-inhalt * { text-align: left; }
.jw-thema-inhalt h3 {
    font-size: 1.25rem;
    color: var(--dunkel);
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--gruen);
    display: inline-block;
}
.jw-thema-inhalt p { line-height: 1.7; color: #555; }

@media (max-width: 600px) {
    .jw-themen-grid { grid-template-columns: 1fr; }
}

/* ===== GEWÄSSERWARTE TEMPLATE ===== */
.gewa-aufgaben { padding: 3.5rem 0; background: var(--hell); }
.gewa-aufgaben h2 { font-size: var(--fs-h2); color: var(--gruen); margin-bottom: 0.75rem; }
.gewa-aufgaben-intro { max-width: 700px; margin: 0 auto 2.5rem; color: #555; line-height: 1.7; }

.gewa-aufgaben-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
.gewa-aufgabe {
    position: relative;
    background: var(--hell);
    border: 1px solid #e0e6e0;
    border-radius: 12px;
    padding: 2.25rem 1.75rem 1.75rem;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.gewa-aufgabe:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.gewa-nr {
    position: absolute;
    top: 0.4rem;
    right: 1rem;
    font-size: 3.6rem;
    font-weight: 800;
    color: var(--gruen-zart);
    line-height: 1;
    z-index: 0;
}
.gewa-aufgabe h3 {
    position: relative;
    z-index: 1;
    font-size: 1.2rem;
    color: var(--dunkel);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--gruen);
    display: inline-block;
    text-align: left;
}
.gewa-aufgabe p { position: relative; z-index: 1; line-height: 1.7; color: #555; text-align: left; }

.gewa-partner { padding: 3.5rem 0; background: var(--gruen-zart); }
.gewa-partner.sw-partner { background: var(--hell); }
.gewa-partner h2 { font-size: var(--fs-h2); color: var(--gruen); margin-bottom: 2rem; }
.gewa-partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
    justify-content: center;
    gap: 1.5rem;
}

/* ===== SPORTWART TEMPLATE ===== */
.sw-aufgaben-kopf { padding: 3rem 0 0.5rem; background: var(--hell); }
.sw-aufgaben-kopf h2 { font-size: var(--fs-h2); color: var(--gruen); }

.sw-streifen { padding: 2.75rem 0; background: var(--hell); }
.sw-streifen.gruen { background: var(--gruen-zart); }

/* Äußerer Flex: Aufgaben-Inhalt + optionales Bild */
.sw-streifen-inner {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}
.sw-streifen-inner.mit-bild { align-items: center; }
.sw-streifen.bild-links .sw-streifen-inner.mit-bild { flex-direction: row-reverse; }

/* Innerer Flex: Titel + Text nebeneinander */
.sw-streifen-haupt {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

/* Bild neben der Aufgabe */
.sw-streifen-bild {
    flex: 0 0 320px;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.14);
}
.sw-streifen-bild img { width: 100%; display: block; transition: transform 0.3s ease; }
.sw-streifen-bild:hover img { transform: scale(1.04); }

.sw-streifen-titel { flex: 0 0 200px; }
.sw-streifen-titel, .sw-streifen-titel * { text-align: left !important; }
.sw-nr {
    display: block;
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--gruen);
    line-height: 1;
    margin-bottom: 0.35rem;
}
.sw-streifen-titel h3 {
    font-size: 1.4rem;
    color: var(--dunkel);
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--gruen);
    display: inline-block;
}
.sw-streifen-text { flex: 1; min-width: 0; line-height: 1.8; }
/* Nummerierte Streifen (Sportwart, Kontakt): Titel + Text zusammen begrenzen,
   sonst laufen die Textzeilen über die volle Breite. */
.sw-streifen-inner,
.anliegen-streifen-inner { max-width: 1100px; margin-left: auto; margin-right: auto; }
.sw-streifen-text, .sw-streifen-text * { text-align: left !important; }
.sw-streifen-text p { margin-bottom: 1rem; }
.sw-streifen-text ul, .sw-streifen-text ol { padding-left: 1.5rem; margin-bottom: 1rem; }

@media (max-width: 768px) {
    .sw-streifen-inner,
    .sw-streifen-inner.mit-bild,
    .sw-streifen.bild-links .sw-streifen-inner.mit-bild { flex-direction: column; gap: 1.25rem; align-items: stretch; }
    .sw-streifen-haupt { flex-direction: column; gap: 1rem; }
    .sw-streifen-titel { flex: none; }
    .sw-streifen-bild { flex: none; }
}

/* ===== THEMA / BEITRAGSSEITE (page-thema.php) =====
   Landingpage für ein Thema: Standard-Hero + abwechselnde Text/Bild-Blöcke.
   Bild-Seite und grüne Tönung wechseln (Muster wie .sw-streifen), Überschrift
   steht über dem Text. group_thema. */
.thema-block { padding: 3rem 0; background: var(--hell); }
.thema-block.gruen { background: var(--gruen-zart); }
.thema-inner.mit-bild { display: flex; gap: 2.75rem; align-items: center; }
.thema-block.bild-links .thema-inner.mit-bild { flex-direction: row-reverse; }
.thema-text { flex: 1; min-width: 0; }
.thema-text, .thema-text * { text-align: left !important; }
.thema-titel {
    font-size: 1.6rem;
    color: var(--dunkel);
    padding-bottom: 0.5rem;
    margin-bottom: 1.1rem;
    border-bottom: 3px solid var(--gruen);
    display: inline-block;
}
.thema-body { line-height: 1.8; color: #333; }
.thema-body p { margin-bottom: 1rem; }
.thema-body p:last-child { margin-bottom: 0; }
.thema-body ul, .thema-body ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.thema-body li { margin-bottom: 0.35rem; }
.thema-bild {
    flex: 0 0 42%;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.14);
}
.thema-bild img { width: 100%; display: block; transition: transform 0.3s ease; }
.thema-bild:hover img { transform: scale(1.04); }

@media (max-width: 768px) {
    .thema-inner.mit-bild,
    .thema-block.bild-links .thema-inner.mit-bild { flex-direction: column; gap: 1.5rem; align-items: stretch; }
    .thema-bild { flex: none; }
}

/* ===== STANDARD-SEITE (page.php) ===== */
.standard-seite {
    padding: 3rem 0;
    background: var(--hell);
}
.standard-seite .seite-inhalt {
    max-width: var(--text-breit);
    line-height: 1.8;
}
.standard-seite .seite-inhalt p  { margin-bottom: 1rem; }
.standard-seite .seite-inhalt h2 { font-size: 1.4rem; margin: 1.5rem 0 0.5rem; }
.standard-seite .seite-inhalt h3 { font-size: 1.2rem; margin: 1.25rem 0 0.4rem; }
.standard-seite .seite-inhalt ul,
.standard-seite .seite-inhalt ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.standard-seite .seite-inhalt li { margin-bottom: 0.35rem; }
.standard-seite .seite-bild { margin-bottom: 2rem; }
.standard-seite .seite-bild img { border-radius: 6px; }

/* ===== KONTAKT TEMPLATE ===== */

/* Kurzer Text */
.kontakt-text { padding: 2.5rem 0 0; background: var(--hell); }
.kontakt-text-inhalt { max-width: var(--text-breit); margin: 0 auto; line-height: 1.8; }
.kontakt-text-inhalt p { margin-bottom: 1rem; }

/* Anliegen: nummerierte Streifen – Optik wie beim Sportwart (Thema statt Formular) */
.anliegen-kopf { padding: 3rem 0 0.5rem; background: var(--hell); }
.anliegen-kopf h2 { font-size: var(--fs-h2); color: var(--gruen); }

.anliegen-streifen { padding: 2.5rem 0; background: var(--hell); }
.anliegen-streifen.gruen { background: var(--gruen-zart); }
.anliegen-streifen-inner {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}
.anliegen-streifen-titel { flex: 0 0 200px; }
.anliegen-streifen-titel, .anliegen-streifen-titel * { text-align: left !important; }
.anliegen-nr {
    display: block;
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--gruen);
    line-height: 1;
    margin-bottom: 0.35rem;
}
.anliegen-streifen-titel h3 {
    font-size: 1.4rem;
    color: var(--dunkel);
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--gruen);
    display: inline-block;
}
.anliegen-streifen-text { flex: 1; min-width: 0; line-height: 1.8; }
.anliegen-streifen-text, .anliegen-streifen-text * { text-align: left !important; }
.anliegen-streifen-text p { margin-bottom: 1rem; }
.anliegen-streifen-text ul, .anliegen-streifen-text ol { padding-left: 1.5rem; margin-bottom: 1rem; }

/* Ansprechpartner (eine zentrale Kontaktkarte) */
.kontakt-partner { padding: 3rem 0 3.5rem; background: var(--gruen-zart); }
.kontakt-partner h2 { font-size: var(--fs-h2); margin-bottom: 2rem; }
.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}
.partner-karte h3 { font-size: 1.1rem; margin-bottom: 0.6rem; color: var(--dunkel); }
.partner-karte p { line-height: 1.6; margin-bottom: 0.3rem; font-size: 0.95rem; }
.partner-adresse { color: #555; }
.partner-karte a { color: var(--gruen); }
/* Einzelne Kontaktkarte (nur eine Ansprechperson): zentriert, schmaler */
.partner-karte--solo { max-width: 380px; margin: 0 auto; text-align: center; }

@media (max-width: 768px) {
    .anliegen-streifen-inner { flex-direction: column; gap: 1rem; }
    .anliegen-streifen-titel { flex: none; }
    .kontakt-partner { padding: 2.5rem 0; }
}

/* ===== MITGLIED WERDEN TEMPLATE ===== */

.mw-vorteile {
    padding: 3.5rem 0;
    background: var(--hell);
}
.mw-vorteile h2 { font-size: var(--fs-h2); margin-bottom: 1.5rem; }

.vorteile-liste {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 2rem;
}
.vorteile-liste li {
    padding: 0.75rem 1rem;
    background: #f9f9f9;
    border-radius: 6px;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .vorteile-liste { grid-template-columns: 1fr; }
}

.mw-beitraege {
    padding: 3.5rem 0;
    background: var(--gruen-zart);
}
.mw-beitraege h2 { font-size: var(--fs-h2); margin-bottom: 1.5rem; }

.beitraege-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.beitrag-karte {
    text-align: center;
}
.beitrag-karte-typ {
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--karte-label);
    margin-bottom: 0.85rem;
}
.beitrag-karte-preis { font-size: 2rem; font-weight: 700; color: var(--gruen); margin-bottom: 0.45rem; line-height: 1.1; }
.beitrag-karte-hinweis { font-size: 0.82rem; color: #666; }

.mw-aufnahme {
    padding: 3.5rem 0;
    background: var(--hell);
}
.aufnahme-inner {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}
.aufnahme-text { flex: 1; }
.aufnahme-text h2 { font-size: var(--fs-h2-spalte); margin-bottom: 1rem; }
.aufnahme-inhalt { line-height: 1.8; text-align: left; }
.aufnahme-inhalt p { margin-bottom: 1rem; }
.aufnahme-inhalt ol, .aufnahme-inhalt ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.aufnahme-inhalt li { margin-bottom: 0.4rem; }

.aufnahme-kontakt {
    flex: 0 0 260px;
}
.aufnahme-kontakt h3 { font-size: 1rem; margin-bottom: 1rem; color: var(--dunkel); }
.aufnahme-kontakt p  { font-size: 0.95rem; margin-bottom: 0.4rem; }
.aufnahme-kontakt a  { color: var(--gruen); }
.kontakt-name        { font-weight: 600; margin-bottom: 0.75rem !important; }

.mw-dokumente {
    padding: 3rem 0 3.5rem;
    background: var(--gruen-zart);
}
.mw-dokumente h2 { font-size: var(--fs-h2); margin-bottom: 1.5rem; }

@media (max-width: 768px) {
    .aufnahme-inner  { flex-direction: column; }
    .aufnahme-kontakt { flex: none; width: 100%; }
    .mw-vorteile, .mw-beitraege, .mw-aufnahme, .mw-dokumente { padding: 2.5rem 0; }
}

/* ===== VEREINSLEBEN TEMPLATE ===== */
.vl-abteilungen { padding: 3.5rem 0; background: var(--hell); }

.vl-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.vl-karte {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background: var(--hell);
    display: flex;
    flex-direction: column;
}

.vl-karte-bild img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.vl-karte-inhalt {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.vl-karte-inhalt h2,
.vl-karte-inhalt h3 {
    font-size: 1.4rem;
    color: var(--dunkel);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--gruen);
}

.vl-karte-inhalt p { line-height: 1.7; color: #555; flex: 1; margin-bottom: 1.25rem; }

.vl-btn {
    display: inline-block;
    color: var(--gruen);
    font-weight: 600;
    font-size: 0.95rem;
}
.vl-btn:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .vl-grid { grid-template-columns: 1fr; }
    .vl-abteilungen { padding: 2.5rem 0; }
}

/* ===== ÜBER UNS: Vereinsleben-Kopf, schlichter Vorstand (#142) ===== */
.uu-titel { font-size: var(--fs-h2); margin-bottom: 0.75rem; }
.uu-einleitung { max-width: var(--text-breit); margin: 0 auto 2rem; color: #555; line-height: 1.75; }
/* Geschichte und Vereinsleben sind beide weiß – sonst doppelter Abstand dazwischen */
.geschichte + .uu-vereinsleben { padding-top: 0; }

.uu-vorstand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
    justify-content: center;
    gap: 1.25rem;
}
.uu-person {
    background: var(--hell);
    border: 1px solid #e0e6e0;
    border-radius: 12px;
    padding: 1.3rem 1.2rem;
}
.uu-person-amt {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--gruen); margin-bottom: 0.35rem;
}
.uu-person-name { font-weight: 700; font-size: 1.08rem; }
.uu-person-kontakt { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.6; }
.uu-person-kontakt a { display: block; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .uu-vorstand-grid { grid-template-columns: 1fr; }
}
/* ===== GEWÄSSER TEMPLATE ===== */
.gewaesser-bereich { padding: 3.5rem 0; background: var(--hell); }

/* Anker-Offset damit der Header den Eintrag nicht verdeckt */
.gewaesser-eintrag { scroll-margin-top: 80px; }

.gewaesser-eintrag {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    margin-bottom: 3.5rem;
    padding-bottom: 3.5rem;
    border-bottom: 1px solid #eee;
}
.gewaesser-eintrag:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.gewaesser-eintrag.umgekehrt { flex-direction: row-reverse; }

.gewaesser-foto { flex: 0 0 380px; }
.gewaesser-foto img { width: 100%; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.gewaesser-info { flex: 1; text-align: left; }
.gewaesser-info h2 {
    font-size: var(--fs-h2-spalte);
    margin-bottom: 1rem;
    color: var(--dunkel);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--gruen);
}

.gewaesser-beschreibung { line-height: 1.8; margin-bottom: 1.25rem; }
.gewaesser-beschreibung p { margin-bottom: 0.75rem; }

.gewaesser-meta {
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
    line-height: 1.6;
    color: #555;
}
.meta-label { font-weight: 600; color: var(--dunkel); margin-right: 0.4rem; }

.gewaesser-zurueck { margin-top: 2rem; }
.gewaesser-zusatztext { margin-top: 2rem; line-height: 1.8; }
.gewaesser-zusatztext p { margin-bottom: 1rem; }

/* ===== GEWÄSSER-DETAILSEITE (page-gewaesser-einzel.php) ===== */
.gd { padding: 3rem 0 3.5rem; background: var(--hell); }

/* Titelbild links, Inhalt rechts */
.gd-haupt.mit-bild {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}
.gd-titelbild { flex: 0 0 380px; }
.gd-titelbild img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    display: block;
}
.gd-inhalt { flex: 1; min-width: 0; }

@media (max-width: 768px) {
    .gd-haupt.mit-bild { flex-direction: column; }
    .gd-titelbild { flex: none; width: 100%; }
}

.gd-beschreibung {
    margin: 0 0 2rem;
    line-height: 1.9;
    font-size: 1.05rem;
}
.gd-beschreibung p { margin-bottom: 1rem; }
.gd-beschreibung h2, .gd-beschreibung h3 { margin: 1.5rem 0 0.5rem; }

/* Dokumente */
.gd-dokumente { margin-top: 3rem; }
.gd-dokumente h2 { font-size: var(--fs-h2-spalte); margin-bottom: 1.25rem; color: var(--dunkel); }
.dok-liste {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0;
}
.dok-liste a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.2rem;
    background: #f7f9f7;
    border: 1px solid #e0e6e0;
    border-radius: 8px;
    color: var(--dunkel);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.dok-liste a:hover { background: #eef3ee; border-color: var(--gruen); text-decoration: none; }
.dok-icon { font-size: 1.3rem; line-height: 1; }
.dok-name { flex: 1; text-align: left; font-weight: 500; }
.dok-pfeil { color: var(--gruen); font-weight: 700; font-size: 1.1rem; }

/* Besonderheiten / Fakten – getöntes Info-Panel (Abschnitt ist weiß, daher
   Tönung statt weißer Karte; linksbündig für gute Lesbarkeit des Fließtexts) */
.gd-fakten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1rem;
}
.gd-fakt {
    background: var(--gruen-zart);
    border-radius: 14px;
    padding: 1.4rem 1.6rem;
}
.gd-fakt h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gruen);
    margin-bottom: 0.6rem;
}
.gd-fakt p { line-height: 1.7; color: #444; }

/* Galerie aus dem Seiteninhalt (Gutenberg-Block) */
.gd-galerie-inhalt { margin-top: 3rem; }
.gd-galerie-inhalt h2 { font-size: var(--fs-h2-spalte); margin-bottom: 0.75rem; color: var(--dunkel); }
.gd-galerie-inhalt p { line-height: 1.8; margin-bottom: 1rem; }
.gd-galerie-intro {
    max-width: var(--text-breit);
    margin: 0 auto 1.75rem;
    line-height: 1.8;
    color: #444;
}
.gd-galerie-intro p { margin-bottom: 0.75rem; }

/* Gutenberg-Galerie in nativer Größe, nur leicht gestylt */
.gd-galerie-inhalt .wp-block-image img,
.gd-galerie-inhalt figure img {
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.gd-galerie-inhalt .wp-block-gallery img:hover { transform: scale(1.04); }

/* Einzelnes Bild (kein Galerie-Block) */
.gd-galerie-inhalt > .wp-block-image { text-align: center; }

/* "Weitere Bilder anzeigen" */
.galerie-versteckt { display: none !important; }
.galerie-mehr {
    display: block;
    margin: 1.5rem auto 0;
    background: var(--gruen);
    color: var(--hell);
    border: none;
    padding: 0.7rem 1.8rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}
.galerie-mehr:hover { opacity: 0.88; }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
}
.lightbox[hidden] { display: none; }
.lightbox-img {
    max-width: 92%;
    max-height: 88%;
    border-radius: 6px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.5);
}
.lightbox-close {
    position: absolute;
    top: 1.25rem;
    right: 1.75rem;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 600px) {
    .gd-titelbild img { max-height: 260px; }
    .gd-galerie-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

.gewaesser-datei { margin-top: 1.25rem; }
.btn-datei {
    display: inline-block;
    background: var(--gruen);
    color: var(--hell);
    padding: 0.7rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
}
.btn-datei::before { content: '\2193'; margin-right: 0.5rem; }
.btn-datei:hover { opacity: 0.88; text-decoration: none; }

.gewaesser-detail { margin-top: 1.25rem; }
.btn-gewaesser {
    display: inline-block;
    background: var(--gruen);
    color: var(--hell);
    padding: 0.7rem 1.6rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
}
.btn-gewaesser:hover { opacity: 0.88; text-decoration: none; }

@media (max-width: 768px) {
    .gewaesser-eintrag,
    .gewaesser-eintrag.umgekehrt { flex-direction: column; }
    .gewaesser-foto { flex: none; width: 100%; }
    .gewaesser-bereich { padding: 2.5rem 0; }
    .gewaesser-eintrag { margin-bottom: 2.5rem; padding-bottom: 2.5rem; }
}

/* ===== ANGELORDNUNG TEMPLATE ===== */
.angelordnung-bereich { padding: 3.5rem 0; background: var(--hell); }

.angelordnung-inhalt { max-width: 100%; }

.ao-abschnitt {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #eee;
}
.ao-abschnitt:last-child { border-bottom: none; }

.ao-abschnitt h2 {
    display: inline-block;
    font-size: 1.3rem;
    color: var(--dunkel);
    margin-bottom: 0.75rem;
    padding-left: 1rem;
    border-left: 4px solid var(--gruen);
}

.ao-text { line-height: 1.8; text-align: left; max-width: var(--text-breit); margin: 0 auto; }
.ao-text p  { margin-bottom: 0.75rem; }
.ao-text ul, .ao-text ol { padding-left: 1.5rem; margin-bottom: 0.75rem; }
.ao-text li { margin-bottom: 0.35rem; }

@media (max-width: 768px) {
    .angelordnung-bereich { padding: 2.5rem 0; }
}

/* ===== JUGENDSCHUTZKONZEPT TEMPLATE ===== */
.js-bereich { padding: 3.5rem 0; background: var(--hell); }

.js-text {
    line-height: 1.8;
    text-align: left;
    max-width: var(--text-breit);
    margin: 0 auto 2.5rem;
}
.js-text * { text-align: left; }
.js-text p  { margin-bottom: 0.9rem; }
.js-text ul, .js-text ol { padding-left: 1.5rem; margin-bottom: 0.9rem; }
.js-text li { margin-bottom: 0.4rem; }
.js-text h2, .js-text h3 { margin: 1.5rem 0 0.6rem; }

.js-pdf { max-width: 1100px; margin: 0 auto; text-align: center; }
.js-pdf h2 {
    display: inline-block;
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--gruen);
}
.js-pdf-frame {
    border: 1px solid #e0e6e0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: #f4f4f4;
}
.js-pdf-frame iframe {
    width: 100%;
    height: 80vh;
    min-height: 500px;
    border: 0;
    display: block;
}

@media (max-width: 768px) {
    .js-bereich { padding: 2.5rem 0; }
    .js-pdf-frame iframe { height: 65vh; min-height: 380px; }
}

/* ===== RECHTSTEXT TEMPLATE (Impressum / Datenschutz) ===== */
.rechtstext-bereich { padding: 3.5rem 0; background: var(--hell); }

.rechtstext-inhalt {
    max-width: var(--text-breit);
    margin: 0 auto;
    text-align: left;
    line-height: 1.8;
    color: var(--dunkel);
}
.rechtstext-inhalt * { text-align: left; }
.rechtstext-inhalt h2 {
    font-size: 1.4rem;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--gruen);
}
.rechtstext-inhalt h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
.rechtstext-inhalt p  { margin-bottom: 1rem; }
.rechtstext-inhalt ul, .rechtstext-inhalt ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.rechtstext-inhalt li { margin-bottom: 0.4rem; }
.rechtstext-inhalt a  { color: var(--gruen); word-break: break-word; }
.rechtstext-inhalt a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .rechtstext-bereich { padding: 2.5rem 0; }
    .rechtstext-inhalt h2 { font-size: 1.25rem; }
}

/* ===== GRÜNE ABSCHNITTS-ÜBERSCHRIFTEN (Unterseiten) ===== */
.geschichte-text h2,
.vorstand h2,
.vereinsziele h2,
.mw-vorteile h2,
.mw-beitraege h2,
.mw-dokumente h2,
.aufnahme-text h2,
.kontakt-text h2,
.kontakt-partner h2,
.gewaesser-info h2,
.gd-dokumente h2,
.gd-galerie-inhalt h2,
.vl-abteilungen h2 {
    color: var(--gruen);
}

/* ===== RESPONSIVE ===== */

/* Bilder immer innerhalb ihres Containers */
img { max-width: 100%; height: auto; display: block; }

/* ── Tablet (≤ 768px) ── */
@media (max-width: 768px) {

    /* Abstände */
    .site-header            { padding: 0.75rem 1.25rem; }
    /* Volle Breite nutzen – nur das Padding sorgt für den Rand
       (vorher zusätzlich max-width 96% → doppelter Rand) */
    /* Randlos wie auf dem Desktop (#173): Bänder und Kopf laufen bis an den
       Bildschirmrand, nur der .container hält den Text vom Rand weg.
       (Früher: Inhalt als Kasten mit grauem Rand.) */
    .site-content           { width: 100%; max-width: 100%; margin: 0; padding: 0; }
    .container              { padding: 0 1.25rem; }

    /* Startseiten-Kopf + Zahlen */
    .st-hero                { min-height: 0; padding: 4.5rem 1.25rem 6.5rem; }
    .st-hero-knoepfe a      { flex: 1 1 100%; }
    .st-zahlen-karte        { margin-top: -3.5rem; border-radius: 14px; }
    .st-zahl                { padding: 1.2rem 0.3rem 1.1rem; }
    .st-zahl-label          { font-size: 0.66rem; letter-spacing: 0.06em; }

    /* Karten untereinander; Wappen-Ersatz flacher, echte Fotos bleiben 16:10 */
    .bild-karte             { flex-basis: 100%; }
    .bild-karte-bild--wappen { aspect-ratio: 5 / 2; }
    .band-knoepfe a         { flex: 1 1 100%; }
    .st-agenda-fuss         { text-align: left; }

    /* Seiten-Hero (Schriftgröße regelt --fs-h1-seite) */
    .seiten-hero            { padding: 2rem 1.25rem; }
    .seiten-hero--bild      { padding: 3rem 1.25rem; }
    /* Archiv: Luft zwischen Kopf und erster Karte */
    .seiten-hero + .inhalt-wrapper { padding-top: 1.5rem; }

    /* Fuß: Verein und Kontakt über die volle Breite, Linkspalten nebeneinander */
    .fuss-raster            { grid-template-columns: 1fr 1fr; gap: 2.2rem 1.5rem; padding: 3rem 0 2rem; }
    .fuss-spalte--marke,
    .fuss-spalte--kontakt   { grid-column: 1 / -1; }
    .fuss-unten             { flex-direction: column; align-items: flex-start; gap: 0.6rem; }

    /* Seiten- und Beitragstitel */
    .beitrag-header h1,
    .seite-header h1,
    .archiv-kopf h1         { font-size: 1.5rem; }

    /* Beitrag-Navigation untereinander */
    .beitrag-navigation     { flex-direction: column; gap: 0.5rem; }

    /* Suchformular stapeln */
    .search-form            { flex-direction: column; }
    .search-submit          { width: 100%; }

    /* Abschnitte Über uns */
    .geschichte,
    .vorstand,
    .vereinsziele           { padding: 2.5rem 0; }
}

/* ── Smartphone (≤ 480px) ── */
@media (max-width: 480px) {

    /* Abstände weiter reduzieren */
    .site-header            { padding: 0.75rem 1rem; }
    .container              { padding: 0 1rem; }

    /* Seiten-Hero */
    .seiten-hero            { padding: 1.75rem 1rem; }
    .seiten-hero--bild      { padding: 2.5rem 1rem; }

    /* Karten */
    .beitrag-einzel,
    .seite-einzel           { padding: 1.25rem 1rem; }

    /* Buttons volle Breite */
    .btn, .btn-hell,
    .btn-aktuelles, .btn-datei,
    .btn-gewaesser          { display: block; text-align: center; }
}

/* ===================================================================
   RESPONSIVE-SCHUTZ (gilt auf allen Breiten)
   Verhindert horizontales Scrollen und macht redaktionellen Inhalt
   (Gutenberg/WYSIWYG: Tabellen, Embeds, lange Wörter) mobiltauglich.
   =================================================================== */

/* Kein horizontales Scrollen durch über den Rand ragende Elemente */
html, body { overflow-x: hidden; max-width: 100%; }
/* clip statt hidden, wo möglich: hidden macht body zum Scroll-Container, dann
   klebt der Kopf (position: sticky, #174) nicht mehr oben. */
@supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
}

/* Lange Wörter / URLs umbrechen statt das Layout zu sprengen */
body { overflow-wrap: break-word; word-wrap: break-word; }

/* Eingebettete Medien skalieren mit (YouTube etc.), nie breiter als der Container */
iframe, video, embed, object { max-width: 100%; }

/* Gutenberg-Einbettungen (z.B. YouTube) im Seitenverhältnis responsiv */
.wp-block-embed__wrapper { position: relative; }
.wp-block-embed.is-type-video .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
    position: absolute; inset: 0; width: 100%; height: 100%;
}

/* Tabellen in redaktionellem Inhalt: horizontal scrollbar statt Überlauf */
.beitrag-inhalt, .seite-inhalt, .rechtstext-inhalt, .ao-text, .js-text,
.kontakt-text-inhalt, .aufnahme-inhalt, .gd-galerie-inhalt,
.sw-streifen-text, .vereinsziele-text, .geschichte-text {
    overflow-wrap: break-word;
}
.beitrag-inhalt table, .seite-inhalt table, .rechtstext-inhalt table,
.ao-text table, .js-text table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}

/* Vorformatierter Text / Code bricht um statt zu überlaufen */
pre { white-space: pre-wrap; word-wrap: break-word; max-width: 100%; }

/* ===== TERMINE-TEMPLATE (tpl-termine-1.php) =====
   Agenda-Liste kommender Termine, nach Monaten gruppiert (Entwurf C).
   Grün bleibt die Identität (Hero, Titel, Chips, Links, Standard-Strich);
   die Farben je Terminart sind nur kleine funktionale Kategorie-Marker. */
.tm-sektion { padding: 3.5rem 0; background: var(--hell); }
.tm-leer { color: #555; font-size: 1.1rem; }

/* Filter-Chips (zentriert über der Liste) */
.tm-chips { display: flex; gap: 0.55rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1.8rem; }
.tm-chip {
    border: 1px solid #cfd8d1; background: var(--hell); color: #4f574f;
    border-radius: 999px; padding: 0.4rem 0.95rem; font: inherit;
    font-size: 0.9rem; font-weight: 500; cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tm-chip:hover { border-color: var(--gruen); color: var(--gruen); }
.tm-chip.aktiv { background: var(--gruen); color: #fff; border-color: var(--gruen); }

/* Agenda-Karte – zentriert, Inhalt links wie die Startseiten-Terminliste */
.tm-agenda {
    max-width: 1100px; margin: 0 auto; background: var(--hell);
    border-radius: 16px; box-shadow: var(--karte-schatten);
    overflow: hidden; text-align: left;
}
/* .site-content * zentriert sonst alles – Agenda-Inhalt gezielt linksbündig
   halten (.tm-datum wird darunter wieder zentriert). */
.tm-agenda, .tm-agenda * { text-align: left; }
.tm-monat {
    background: var(--gruen-zart); color: #3d5546; font-weight: 700;
    font-size: 0.95rem; padding: 0.6rem 1.4rem; letter-spacing: 0.02em;
}
.tm-zeile { display: flex; align-items: center; gap: 1.2rem; padding: 1rem 1.4rem; border-bottom: 1px solid #e5e8e5; }
.tm-zeile:last-child { border-bottom: 0; }
.tm-strich { width: 4px; align-self: stretch; border-radius: 4px; background: var(--gruen); flex: 0 0 auto; }
.tm-datum { text-align: center; width: 54px; min-width: 54px; }
.tm-datum .tm-t { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--dunkel); }
.tm-datum .tm-m { display: block; font-size: 0.7rem; text-transform: uppercase; color: #8a938c; letter-spacing: 0.06em; }
.tm-mitte { flex: 1; min-width: 0; }
.tm-mitte h3 { font-size: 1.05rem; margin: 0 0 0.15rem; color: var(--dunkel); }
.tm-meta { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--karte-label); font-size: 0.88rem; }
.tm-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.tm-meta svg { width: 15px; height: 15px; fill: none; stroke: var(--karte-label); stroke-width: 1.8; flex: 0 0 auto; }
.tm-rechts { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.tm-rechts .mehr { margin-top: 0; white-space: nowrap; }

/* Kategorie-Tag */
.tm-kat {
    display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.76rem;
    font-weight: 600; padding: 0.22rem 0.6rem; border-radius: 999px;
    letter-spacing: 0.02em; white-space: nowrap;
}
.tm-kat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Funktionale Kategorie-Akzente (nur als Marker; kein neues Palettenschema) */
.tm-kat--angeln      { background: #e4f3ea; color: #01732f; }
.tm-kat--arbeit      { background: #eef0e0; color: #5c6626; }
.tm-kat--versammlung { background: #e6eef4; color: #315870; }
.tm-kat--jugend      { background: #e4f2fb; color: #1f6f9e; }
.tm-kat--fest        { background: #faeede; color: #a95f12; }
.tm-strich--angeln      { background: #019242; }
.tm-strich--arbeit      { background: #6f7a2f; }
.tm-strich--versammlung { background: #3f6d8a; }
.tm-strich--jugend      { background: #2e9bd6; }
.tm-strich--fest        { background: #d98324; }

@media (max-width: 600px) {
    .tm-zeile { flex-wrap: wrap; }
    .tm-rechts { margin-left: 0; width: 100%; justify-content: space-between; }
}
/* ===== GRUPPE (tpl-gruppe-1, #149) – Senioren, Jugend … =====
   Entwurf B „kompakt“: Steckbrief in Rahmen-Karten (zart getönt), darunter
   Termine + Beiträge nebeneinander (weiß), optional ein Hinweis-Band. */
.gr-blick { padding: 3.5rem 0; background: var(--gruen-zart); }
.gr-blick-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 400px));
    justify-content: center; gap: 1.5rem;
}
.gr-blick-karte { background: var(--hell); border: 1px solid #d3e2d6; border-radius: 12px; padding: 1.6rem 1.5rem; }
.gr-blick-karte h3 {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--gruen); margin-bottom: 0.9rem;
}
.gr-blick-karte p { color: #4f574f; line-height: 1.65; }
.gr-blick-karte p + h3 { margin-top: 1.3rem; }
.gr-blick-liste { list-style: none; display: grid; gap: 0.45rem; font-weight: 600; }
.gr-blick-person + .gr-blick-person { margin-top: 0.9rem; }
.gr-blick-person b { display: block; }
.gr-blick-person a { display: block; font-size: 0.92rem; overflow-wrap: anywhere; }

.gr-zwei { padding: 3.5rem 0; background: var(--hell); }
.gr-zwei h2 { font-size: var(--fs-h2); color: var(--gruen); margin-bottom: 2rem; }
.gr-zwei .mehr { margin-top: 1.25rem; }
.gr-zwei-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.gr-zwei-grid.einzeln { grid-template-columns: minmax(0, 900px); justify-content: center; }
.gr-kurzliste { background: var(--hell); border-radius: 16px; box-shadow: var(--karte-schatten); overflow: hidden; }
.gr-kurzliste, .gr-kurzliste * { text-align: left; }
.gr-kurz {
    padding: 1.1rem 1.4rem; border-bottom: 1px solid #e5e8e5;
    margin: 0; border-radius: 0; box-shadow: none; background: none;   /* allgemeine article-Regel zurücksetzen */
}
.gr-kurz:last-child { border-bottom: 0; }
.gr-kurz .st-karte-meta { margin-bottom: 0.2rem; }
.gr-kurz h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.gr-kurz h3 a { color: var(--dunkel); }
.gr-kurz h3 a:hover { color: var(--gruen); }
.gr-kurz p { color: #4f574f; font-size: 0.92rem; line-height: 1.55; }

/* Hinweis-Band (z. B. Jugendschutzkonzept) */
.gr-band { padding: 2.5rem 0; background: var(--gruen-zart); }
.gr-hinweis {
    max-width: 820px; margin: 0 auto; background: var(--hell);
    border: 1px solid #d3e2d6; border-left: 4px solid var(--gruen); border-radius: 12px;
    padding: 1.3rem 1.6rem; display: flex; gap: 1.5rem; align-items: center;
}
.gr-hinweis, .gr-hinweis * { text-align: left; }
.gr-hinweis-text { flex: 1; }
.gr-hinweis-text b { display: block; font-size: 1.08rem; margin-bottom: 0.2rem; }
.gr-hinweis-text p { color: #555; font-size: 0.95rem; }
.gr-hinweis .btn-aktuelles { white-space: nowrap; }

@media (max-width: 768px) {
    .gr-blick-grid { grid-template-columns: 1fr; }
    .gr-zwei-grid { grid-template-columns: 1fr; }
    .gr-hinweis { flex-direction: column; align-items: flex-start; }
}