/*
Theme Name: ASV Legden
Description: Custom WordPress-Theme für den ASV Legden 1966 e.V. (Angelsportverein, Münsterland). Eigenständiges Theme mit ACF-Feldern, ohne Eltern-Theme.
Author: Tim
Version: 5.6
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: asv-legden
*/

/* ===== 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 */
}

/* ===== 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: 16px;
    color: var(--dunkel);
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content { flex: 1; }

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

/* ===== HEADER ===== */
.site-header {
    background: var(--gruen);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-branding a { color: white; }
.site-branding h1 { font-size: 1.4rem; }
.site-branding p { color: rgba(255,255,255,0.7); font-size: 0.85rem; }

/* Social-Media-Icons (direkt neben dem Schriftzug) */
.social-icons { display: flex; gap: 0.85rem; align-items: center; }
.social-icons a { color: #fff; display: inline-flex; }
.social-icons a:hover { opacity: 0.75; }
.social-icons svg { width: 26px; height: 26px; display: block; }

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


/* ===== NAVIGATION ===== */
.hauptnavigation ul { list-style: none; display: flex; gap: 1.5rem; }
.hauptnavigation a { color: white; font-weight: 500; }
.hauptnavigation a:hover { text-decoration: none; opacity: 0.8; }

/* ===== 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(--gruen);
    min-width: 180px;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    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 rgba(255,255,255,0.12);
    font-weight: 400;
}

.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 #fff;
        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: rgba(0,0,0,0.18);
        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 ===== */
.site-content         { width: 80%; max-width: 80%; margin: 2rem auto; text-align: center; }
.site-content *       { text-align: center; }
.site-content input,
.site-content textarea,
.site-content select  { text-align: left; }
.inhalt-wrapper { padding-top: 2rem; padding-bottom: 2rem; }


@media (max-width: 1200px) { .site-content { max-width: 90%; } }
@media (max-width: 900px)  { .site-content { max-width: 96%; } }

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 ===== */
.site-footer {
    background: var(--dunkel);
    color: #aaa;
    text-align: center;
    padding: 1.5rem;
    margin-top: 3rem;
    font-size: 0.85rem;
}

.site-footer a { color: #aaa; }
.site-footer a:hover { color: white; text-decoration: none; }

.footer-nav ul { list-style: none; display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; }
.footer-nav li { display: inline; }
.footer-nav a { color: #aaa; }
.footer-nav a:hover { color: white; }

/*Front-Page-php*/
/* ===== HERO ===== */
.hero {
    background: var(--hero-hell);
    color: var(--dunkel);
    text-align: center;
    padding: 5rem 2rem;
    border-bottom: 1px solid #e0e4e0;
}

/* Hero mit Hintergrundbild + Overlay für Lesbarkeit */
.hero--bild {
    position: relative;
    color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: none;
}
.hero--bild::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,35,18,0.55), rgba(0,35,18,0.65));
}
.hero--bild .hero-content {
    position: relative;
    z-index: 1;
}

.hero h2 {
    font-size: 2.2rem;
    margin-bottom: 1.25rem;
    display: inline-block;
    padding-bottom: 0.6rem;
    border-bottom: 3px solid var(--gruen);
}
.hero p { font-size: 1.1rem; margin-bottom: 2rem; opacity: 0.85; }

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

/* Mit Bild: heller Button für Kontrast auf dunklem Overlay */
.hero--bild .btn { background: #fff; color: var(--gruen); }
.hero--bild .btn:hover { background: #f0f0f0; }

/* Gutenberg Button-Block im Hero (falls über Editor befüllt) */
.hero .wp-block-buttons { margin-top: 0.5rem; }
.hero .wp-block-button__link {
    background: white;
    color: var(--gruen);
    padding: 0.8rem 2rem;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
}
.hero .wp-block-button__link:hover { background: #f0f0f0; }

/* ===== INFOBOXEN ===== */
.infoboxen {
    background: white;
    padding: 3rem 0;
    border-bottom: 1px solid #eee;
}

.infoboxen-grid {
    display: grid;
    /* auto-fit: 3 → 2 → 1 Spalten je nach Breite, ohne harten Sprung */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
}

.infobox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.5rem;
    border-radius: 6px;
    background: #f9f9f9;
}

.infobox-zahl {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--gruen);
    line-height: 1;
}

.infobox-label {
    font-size: 0.95rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

/* Aktuelles + Logo nebeneinander */
.aktuelles-layout.mit-logo {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}
.aktuelles-layout.mit-logo .aktuelles-spalte { flex: 1; min-width: 0; }
.aktuelles-logo {
    flex: 0 0 280px;
    text-align: center;
    align-self: center;
    margin-top: 2.5rem;
}
.aktuelles-logo img { max-width: 100%; height: auto; display: inline-block; }

@media (max-width: 768px) {
    .aktuelles-layout.mit-logo { flex-direction: column; }
    /* Logo neben den Beiträgen auf Mobile ausblenden */
    .aktuelles-logo { display: none; }
}

/* ===== KALENDER ===== */
.kalender-bereich { padding: 3rem 0; background: var(--hell); }
.kalender-bereich h2 { font-size: 1.8rem; margin-bottom: 1.5rem; }
.kalender-wrapper iframe {
    width: 100%;
    border: 0;
    border-radius: 8px;
    display: block;
}
.kalender-abo { margin-top: 1.25rem; }
.btn-kalender {
    display: inline-block;
    background: var(--gruen);
    color: var(--hell);
    padding: 0.75rem 1.75rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
}
.btn-kalender:hover { opacity: 0.88; text-decoration: none; }
@media (max-width: 768px) {
    .kalender-wrapper iframe { height: 400px !important; }
}

/* ===== SOCIAL-BEREICH (Startseite) ===== */
.social-bereich {
    padding: 3rem 0 3.5rem;
    background: var(--gruen-zart);
    text-align: center;
}
.social-bereich h2 { font-size: 1.8rem; margin-bottom: 0.75rem; }
.social-bereich p { max-width: 600px; margin: 0 auto 1.75rem; color: #555; line-height: 1.7; }
.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.8rem 1.7rem;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.social-btn:hover { opacity: 0.9; text-decoration: none; }
.social-btn svg { display: block; }
.social-btn--fb { background: #1877f2; }
.social-btn--ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }

/* ===== PROJEKTE & WETTER (Startseite) ===== */
.pw-bereich { padding: 3rem 0; background: var(--hell); }
.pw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.pw-projekte h2, .pw-wetter h2 { font-size: 1.6rem; margin-bottom: 1.5rem; color: var(--gruen); text-align: center; }
.pw-projekt, .pw-projekt * { text-align: left; }
.pw-projekt {
    background: var(--hell);
    border: 1px solid #e0e6e0;
    border-radius: 8px;
    padding: 1.25rem 1.4rem;
    margin-bottom: 1rem;
}
.pw-projekt h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.pw-projekt h3 a { color: var(--dunkel); }
.pw-projekt h3 a:hover { color: var(--gruen); }
.pw-projekte .btn-aktuelles { display: block; width: fit-content; margin: 0.5rem auto 0; }

.pw-wetter-widget { line-height: 1.6; }

@media (max-width: 768px) {
    .pw-grid { grid-template-columns: 1fr; gap: 2rem; }
}

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

.cta-bereich h2 { font-size: 2rem; margin-bottom: 1rem; }
.cta-bereich p  { font-size: 1.05rem; margin-bottom: 2rem; opacity: 0.88; max-width: 560px; 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; }

/* ===== AKTUELLES ===== */
.aktuelles { padding: 3rem 0; }
.aktuelles h2 { font-size: 1.8rem; margin-bottom: 2rem; }
.mehr { color: var(--gruen); font-weight: 500; display: inline-block; margin-top: 0.5rem; }

.aktuelles-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; justify-content: center; }
.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: center; }
.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: center; }
.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 ===== */
.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-top: 0.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;
}

.menu-toggle {
    display: none;
    background: transparent;
    border: 2px solid rgba(255,255,255,0.6);
    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: white;
    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; position: relative; }

    .site-branding { flex: 1; }

    .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 rgba(255,255,255,0.15);
    }
}

@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: 2rem;
    margin-bottom: 0;
    text-align: center;
    display: inline-block;
    padding-bottom: 0.6rem;
    border-bottom: 3px solid var(--gruen);
}

/* 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: 1000px;
    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%; }
.geschichte-text { text-align: center; }
.geschichte-text h2 { font-size: 1.7rem; 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: 1.7rem; margin-bottom: 2rem; text-align: center; }

.vorstand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.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: 1.7rem; margin-bottom: 1.5rem; }
.vereinsziele-text { width: 100%; line-height: 1.8; text-align: center; }
.vereinsziele-text p { margin-bottom: 1rem; }
.vereinsziele-text ul { padding-left: 1.5rem; 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: 1.6rem; 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); }

@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: 1.8rem; 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: 1.8rem; 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: 1.8rem; color: var(--gruen); margin-bottom: 2rem; }
.gewa-partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

/* ===== SPORTWART TEMPLATE ===== */
.sw-aufgaben-kopf { padding: 3rem 0 0.5rem; background: var(--hell); }
.sw-aufgaben-kopf h2 { font-size: 1.8rem; 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; }
.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; }
}

/* ===== STANDARD-SEITE (page.php) ===== */
.standard-seite {
    padding: 3rem 0;
    background: var(--hell);
}
.standard-seite .seite-inhalt {
    max-width: 760px;
    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: 760px; margin: 0 auto; line-height: 1.8; }
.kontakt-text-inhalt p { margin-bottom: 1rem; }

/* Kontaktformular */
.kontakt-formular { padding: 3rem 0; background: var(--hell); }
.kontakt-formular h2 { font-size: 1.7rem; margin-bottom: 1.5rem; }
.kontakt-formular-inhalt { max-width: 640px; margin: 0 auto; text-align: center; }
.kontakt-formular-inhalt input[type="text"],
.kontakt-formular-inhalt input[type="email"],
.kontakt-formular-inhalt input[type="tel"],
.kontakt-formular-inhalt textarea {
    width: 100%;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
}
.kontakt-formular-inhalt textarea { min-height: 140px; }
.kontakt-formular-inhalt input[type="submit"],
.kontakt-formular-inhalt .wpcf7-submit {
    display: block;
    margin: 1rem auto 0;
    background: var(--gruen);
    color: var(--hell);
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}
.kontakt-formular-inhalt input[type="submit"]:hover,
.kontakt-formular-inhalt .wpcf7-submit:hover { opacity: 0.88; }

/* Ansprechpartner */
.kontakt-partner { padding: 3rem 0 3.5rem; background: var(--gruen-zart); }
.kontakt-partner h2 { font-size: 1.7rem; 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); }

@media (max-width: 768px) {
    .kontakt-formular, .kontakt-partner { padding: 2.5rem 0; }
}

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

.mw-vorteile {
    padding: 3.5rem 0;
    background: var(--hell);
}
.mw-vorteile h2 { font-size: 1.7rem; 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: 1.7rem; 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: 1.7rem; margin-bottom: 1rem; }
.aufnahme-inhalt { line-height: 1.8; text-align: center; }
.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: 1.7rem; 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 {
    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; }
}

/* ===== 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: center; }
.gewaesser-info h2 {
    font-size: 1.6rem;
    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: 1.6rem; 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: 1.6rem; margin-bottom: 0.75rem; color: var(--dunkel); }
.gd-galerie-inhalt p { line-height: 1.8; margin-bottom: 1rem; }
.gd-galerie-intro {
    max-width: 760px;
    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: center; }
.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: 900px;
    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: 900px; 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: 850px;
    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-formular 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) */
    .site-content           { width: 100%; max-width: 100%; margin: 1.5rem auto; padding: 0 1.25rem; }
    .container              { padding: 0 1.25rem; }

    /* Hero */
    .hero                   { padding: 3rem 1.25rem; }
    .hero h2                { font-size: 1.75rem; }
    .hero p                 { font-size: 1rem; }

    /* Seiten-Hero */
    .seiten-hero            { padding: 2rem 1.25rem; }
    .seiten-hero h1         { font-size: 1.6rem; }

    /* CTA */
    .cta-bereich            { padding: 2.5rem 1.25rem; }
    .cta-bereich h2         { font-size: 1.6rem; }
    .cta-bereich p          { font-size: 1rem; }

    /* Abschnittsüberschriften */
    .aktuelles h2,
    .geschichte-text h2,
    .vorstand h2,
    .vereinsziele h2        { font-size: 1.5rem; }

    /* 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; }
    .site-content           { padding: 0 1rem; }
    .container              { padding: 0 1rem; }

    /* Vereins-Branding */
    .site-branding h1       { font-size: 1.15rem; }
    .site-branding p        { font-size: 0.75rem; }

    /* Hero */
    .hero                   { padding: 2.5rem 1rem; }
    .hero h2                { font-size: 1.4rem; }

    /* Seiten-Hero */
    .seiten-hero            { padding: 1.75rem 1rem; }
    .seiten-hero h1         { font-size: 1.3rem; }

    /* CTA */
    .cta-bereich            { padding: 2rem 1rem; }
    .cta-bereich h2         { font-size: 1.35rem; }

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

    /* Infobox-Zahl kleiner */
    .infobox-zahl           { font-size: 2.2rem; }

    /* Buttons volle Breite */
    .btn, .btn-hell,
    .btn-aktuelles, .btn-kalender, .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%; }

/* 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%; }