/* =========================================================================
   Nesselbrunn – Stylesheet
   Visuell abgeglichen mit dem Original (Sydney/Elementor) per Playwright-Diff:
   - Brand-Farbe gruen #608c40 (Sydney "Marburger-Land"-Gruen)
   - Roboto, Body 18px / 1.68, Textfarbe #47425d
   - Hero zentriert, weisser Titel, gruener Header bei Scroll-Top transparent
   ========================================================================= */

/* ---------- Reset & Basics ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.68;
    color: #47425d;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #608c40; text-decoration: none; transition: color .2s ease; }
a:hover { color: #4d7034; }
h1,h2,h3,h4,h5,h6 {
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #3a3a3a;
    line-height: 1.3;
    margin: 0 0 .8em;
}
h1 { font-size: 2.4rem; font-weight: 300; }
h2 { font-size: 2rem;   font-weight: 300; }
h3 { font-size: 1.4rem; font-weight: 400; }
p  { margin: 0 0 1em; }
.container {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}
.skip-link {
    position: absolute; left: -9999px; top: -9999px;
    background: #000; color: #fff; padding: .6em 1em; z-index: 9999;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0,0,0,.05);
    padding-bottom: 20px;
    z-index: 100;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
    gap: 20px;
}
.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #608c40;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 400;
}
.site-logo img { height: 62px; width: auto; }
.main-nav .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}
.main-nav .menu a {
    color: #608c40;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 18px;
    text-transform: none;
    letter-spacing: normal;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.main-nav .menu a:hover {
    color: #4d7034;
    border-bottom-color: #608c40;
}
/* Aktives Menue per Body-Klasse highlighten -- Markup ist auf allen
   Seiten identisch (kommt aus _build/partials/header.html). */
.home              .main-nav .menu-item-home a,
.page-news         .main-nav .menu-item-news a,
.page-termine      .main-nav .menu-item-termine a,
.page-ortsbeirat   .main-nav .menu-item-ortsbeirat a,
.page-dorfleben    .main-nav .menu-item-dorfleben a,
.page-service      .main-nav .menu-item-service a,
.page-kontakt      .main-nav .menu-item-kontakt a,
.page-single-post  .main-nav .menu-item-dorfleben a {
    color: #608c40;
    border-bottom-color: #608c40;
    font-weight: 300;
}

/* ---------- Mobile Menu ---------- */
.nav-toggle {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 6px;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.nav-toggle span {
    display: block;
    height: 3px;
    width: 28px;
    background: #608c40;
    border-radius: 2px;
    transition: transform .3s, opacity .3s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid rgba(0,0,0,.08);
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    .main-nav.is-open { max-height: 600px; }
    .main-nav .menu {
        flex-direction: column;
        gap: 0;
        padding: 8px 20px 16px;
    }
    .main-nav .menu li { width: 100%; }
    .main-nav .menu a {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid rgba(0,0,0,.05);
    }
}

/* ---------- Hero (Sommer-Landschaft, zentriert) ---------- */
.hero {
    position: relative;
    min-height: 280px;
    background: #2a3a1f;
    background-image: url("../images/20170605_205728-1024x576.jpg");
    background-size: cover;
    background-position: center 30%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
    overflow: hidden;
    text-align: center;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.30) 100%);
}
.hero-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.05);
    pointer-events: none;
}
.hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    max-width: 900px;
    padding: 0 15px;
    margin: 0 auto;
}
.hero-title {
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: .25em;
    margin: 0 0 .15em;
    text-shadow: 0 2px 14px rgba(0,0,0,.35);
    animation: fadeInUp 1s .2s both;
}
.hero-divider {
    display: block;
    width: 80px;
    height: 1px;
    background: rgba(255,255,255,.7);
    margin: 10px auto 14px;
    animation: fadeInLeft 1s .8s both;
}
.hero-sub {
    font-family: "Roboto", sans-serif;
    font-size: .8rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .3em;
    margin: 0 0 .3em;
    color: rgba(255,255,255,.92);
    animation: fadeInUp 1s 1.2s both;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---------- Main ---------- */
.site-main { padding: 40px 0; }
.page-title {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 16px;
    font-weight: 300;
}
.page-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: #608c40;
}
.page-intro { text-align: center; max-width: 720px; margin: 0 auto 20px; color: #777; }

/* ---------- Page Sections ---------- */
.page-section { padding: 30px 0; }

/* build.py erzeugt fuer Multi-Spalten-Sections:
   <section.page-section> > <div.col.col-N> ...
   Sind mehrere col-* Geschwister vorhanden, soll ein Flex-Row entstehen. */
.page-section > .col {
    box-sizing: border-box;
    padding: 0 15px;
}
.page-section:has(> .col + .col) {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 0;
    align-items: stretch;
}
.page-section > .col-12 { flex: 0 0 100%; max-width: 100%; }
.page-section > .col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.page-section > .col-6  { flex: 0 0 50%; max-width: 50%; }
.page-section > .col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.page-section > .col-3  { flex: 0 0 25%; max-width: 25%; }

/* Card-Optik fuer Icon-Box-Spalten */
.page-section > .col-4:has(.icon-box) {
    display: flex;
    flex-direction: column;
}
.page-section > .col-4:has(.icon-box) > .icon-box-card,
.page-section > .col-4:has(.icon-box) {
    /* Karte zeichnen direkt am col-4: Hintergrund, Radius */
}
.page-section > .col-4:has(.icon-box) {
    background-clip: padding-box;
}
.page-section > .col-4:has(.icon-box)::before {
    /* keine Pseudo-Karte - wir stylen den inneren Content direkt */
}
.page-section > .col-4 .icon-box,
.page-section > .col-4 .img-carousel {
    background: #f7f7f7;
}
.page-section > .col-4 .icon-box {
    border-radius: 6px 6px 0 0;
    margin: 0 15px;
    padding-top: 30px;
}
.page-section > .col-4 .img-carousel {
    border-radius: 0 0 6px 6px;
    margin: 0 15px;
    padding: 16px 5px 16px;
    overflow: hidden;
}

@media (max-width: 800px) {
    .page-section > .col-4,
    .page-section > .col-6,
    .page-section > .col-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---------- Icon Boxes ---------- */
.icon-box {
    text-align: center;
    padding: 20px 16px 8px;
}
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #608c40;
    color: #fff !important;
    font-size: 28px;
    margin: 0 auto 16px;
    transition: transform .25s, background .25s;
}
.icon-circle:hover {
    background: #4d7034;
    transform: translateY(-3px);
}
.icon-box-title {
    margin: 0 0 .6em;
    font-size: 1.25rem;
    font-weight: 400;
}
.icon-box-title a { color: #3a3a3a; }
.icon-box-title a:hover { color: #608c40; }
.icon-box-description {
    color: #777;
    font-size: .95rem;
    margin: 0;
}

/* ---------- Carousel / Bild-Strip ----------
   Im Original werden 3 Mini-Bilder nebeneinander gezeigt (Sydney/Swiper, autoplay).
   Wir machen es als statischer 3-Strip mit gleicher Hoehe. */
.img-carousel {
    padding: 16px 0 0;
    overflow: hidden;
}
.img-carousel,
.carousel {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
}
.carousel-track {
    display: flex;
    gap: 0;
    width: 100%;
}
.carousel-slide {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}
.carousel-slide a { display: block; }
.carousel-slide img,
.carousel-slide figure {
    width: 100%;
    height: 130px;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
    display: block;
}
.carousel-slide figure { padding: 0; }
.carousel-slide figure img { height: 100%; }
/* Falls mehr als 3 Slides: nur die ersten 3 zeigen */
.img-carousel .carousel-slide:nth-child(n+4),
.carousel .carousel-slide:nth-child(n+4) { display: none; }

/* ---------- Heading-Widget ---------- */
.heading-widget { text-align: center; margin: 0 0 1em; }
.heading-widget--left { text-align: left; }
.heading-title.size-xl   { font-size: 2.5rem; font-weight: 300; }
.heading-title.size-lg   { font-size: 1.8rem; font-weight: 400; }
.heading-title.size-md   { font-size: 1.3rem; font-weight: 400; }
.heading-title.size-sm   { font-size: 1.05rem; color: #777; font-weight: 400; }

/* ---------- Divider ---------- */
.divider-line {
    display: block;
    width: 60px;
    height: 2px;
    background: #608c40;
    margin: 8px auto 16px;
}

/* ---------- Buttons ---------- */
.btn-wrap { text-align: center; padding: 10px 0; }
.btn,
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #608c40;
    color: #fff !important;
    padding: 15px 30px;
    border-radius: 4px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-transform: none;
    letter-spacing: normal;
    transition: background .25s, transform .25s;
}
.btn:hover, .btn-link:hover { background: #4d7034; transform: translateY(-2px); }
.btn-sm { padding: 7px 16px; font-size: 15px; }
.btn-content { display: inline-flex; align-items: center; gap: 8px; }
.align-center { text-align: center; }

/* ---------- WordPress-Klassen (Bilder im Fliesstext) ---------- */
.alignright { float: right; margin: 0 0 1em 1.5em; }
.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.aligncenter { display: block; margin: 1em auto; }

/* Clear nach Sections */
.page-section::after { content: ""; display: table; clear: both; }

/* ---------- Aktuelles (Posts-Grid) ---------- */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}
.post-card {
    background: #fff;
    border: 1px solid #c8d9b8;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    transition: transform .25s, box-shadow .25s;
}
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.post-title {
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0 0 .8em;
}
.post-title a {
    color: #608c40;
    text-decoration: none;
}
.post-title a:hover { color: #4d7034; }
.post-body p:last-child { margin-bottom: 0; }

/* ---------- Single Post (Detailseiten Aktuelles) ---------- */
.single-post {
    max-width: 820px;
    margin: 0 auto;
}
.single-post-title {
    text-align: center;
    margin-bottom: 1em;
    padding-bottom: 16px;
    position: relative;
    font-weight: 300;
}
.single-post-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: #608c40;
}
.single-post-body img { margin: 1em auto; }
.back-link {
    margin-top: 3em;
    text-align: center;
}
.back-link a {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid #608c40;
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
    color: #608c40;
    transition: background .2s, color .2s;
}
.back-link a:hover {
    background: #608c40;
    color: #fff !important;
}

/* ---------- Footer (schlank: Pflicht-Links + Copyright) ---------- */
.site-footer {
    background: #2c2c2c;
    color: #bbb;
    padding: 30px 0;
    margin-top: 60px;
}
.footer-inner {
    text-align: center;
}
.footer-links {
    margin-bottom: 10px;
}
.footer-links a {
    color: #bbb;
    font-size: .95rem;
    transition: color .2s;
}
.footer-links a:hover { color: #608c40; }
.footer-sep {
    margin: 0 .6em;
    color: #555;
}
.footer-copyright {
    margin: 0;
    font-size: .85rem;
    color: #777;
}

/* ---------- Back-to-top ---------- */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #608c40;
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s, background .25s;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    z-index: 50;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: #4d7034; transform: translateY(-2px); }

/* ---------- Tabellen ---------- */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}
th, td {
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,.08);
    text-align: left;
    vertical-align: top;
}
th { background: #f7f7f7; font-weight: 500; }

/* =====================================================================
   DESIGN-SYSTEM: Rechts- und Infoseiten (Impressum, Datenschutz, AGB, ...)
   ---------------------------------------------------------------------
   Ausfuehrliche Doku: .claude/docs/design-system.md
   Wiederverwendbare Klassen:
     .legal-section  — abgegrenzter Inhaltsblock mit gruen unterstrichener H3
     .legal-intro    — kleiner grauer Vorspann unter dem Seitentitel
     .legal-card     — hellgruene Karte mit gruenem Linksrand, fuer
                       Adress-/Kontakt-/Infoblocks
   Aktivierungs-Body-Klasse:
     .legal-page     — beschraenkt Lese-Spalte auf 820px und setzt
                       gemeinsame Typografie. Auf der jeweiligen Seite
                       zusaetzlich .page-impressum / .page-datenschutz fuer
                       seitenspezifische Tweaks moeglich.
   ===================================================================== */

/* Lese-Spalte und gemeinsame Typografie */
.legal-page .site-main p { max-width: 820px; margin-left: auto; margin-right: auto; }
.legal-page h2, .legal-page h3, .legal-page h4, .legal-page h5 {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* Sektion innerhalb einer Rechts-/Infoseite */
.legal-section {
    max-width: 820px;
    margin: 0 auto 2.5em;
}
.legal-section h3 {
    margin-top: 0;
    padding-bottom: .35em;
    border-bottom: 2px solid #608c40;
    font-size: 1.4rem;
    color: #3a3a3a;
}
.legal-section h4 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #3a3a3a;
    margin: 1.5em 0 .4em;
}
.legal-section ul,
.legal-section ol {
    max-width: 820px;
    margin: .6em auto 1em;
    padding-left: 1.4em;
}
.legal-section li { margin: .25em 0; }

/* Vorspann/Lead-Text */
.legal-intro {
    max-width: 820px;
    margin: 0 auto 1.5em;
    color: #6b6b6b;
    font-size: .95em;
}

/* Adress-/Kontakt-Karte (gruener Akzent) */
.legal-card {
    display: block;
    background: #f7f9f5;
    border-left: 4px solid #608c40;
    padding: 1.1em 1.4em;
    margin: 1em 0 0;
    font-style: normal;
    border-radius: 4px;
    line-height: 1.7;
}
.legal-card strong {
    display: inline-block;
    margin-bottom: .25em;
    font-size: 1.05em;
    color: #3a3a3a;
}
.legal-card a { color: #608c40; }
.legal-card a:hover { color: #4d7034; text-decoration: underline; }

/* ---------- Videos ---------- */
.page-videos iframe,
.page-videos video {
    max-width: 100%;
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 4px;
    margin: 1em 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* ---------- Print ---------- */
@media print {
    .site-header, .site-footer, .back-to-top, .nav-toggle { display: none !important; }
    .hero { color: #000; background: none; min-height: auto; }
    .hero::before, .hero-overlay { display: none; }
    a { color: #000; text-decoration: underline; }
}


/* ---------- Termine-Liste (auf termine.html und Home) ---------- */
.termine-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.termin-item {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
    align-items: flex-start;
}
.termin-item:last-child { border-bottom: 0; }
.termin-datum {
    flex: 0 0 auto;
    white-space: nowrap;
    color: #608c40;
    font-size: 1.05rem;
    line-height: 1.2;
}
.termin-datum strong { font-size: 1.1rem; }
.termin-uhrzeit { color: #777; font-size: .95rem; }
.termin-info { flex: 1; }
.termin-titel {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 500;
    color: #2c2c2c;
}
.termin-ort, .termin-beschreibung {
    margin: 2px 0;
    font-size: 1rem;
    color: #555;
}
/* Kompakt-Variante (Startseite): Datum + Titel in einer Zeile */
.termine-list-compact .termin-item  { display: block; }
.termine-list-compact .termin-datum { display: inline; flex: none; margin-right: 3px; }
.termine-list-compact .termin-info  { display: contents; }
.termine-list-compact .termin-titel { display: inline; margin: 0; font-size: 1.05rem; }
.termine-list-compact .termin-ort   { display: block; margin: 2px 0 0; }

/* ---------- News-Liste (auf Home) ---------- */
.news-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.news-item {
    padding: 14px 0;
    border-bottom: 1px solid #eee;
}
.news-item:last-child { border-bottom: 0; }
.news-titel { margin: 0 0 4px; font-size: 1.15rem; font-weight: 500; }
.news-titel a { color: #2c2c2c; text-decoration: none; }
.news-titel a:hover { color: #608c40; }
.news-meta { margin: 0 0 4px; font-size: .9rem; color: #888; }
.news-anriss { margin: 0; font-size: 1rem; color: #555; }

/* ---------- "Mehr"-Link unter Listen ---------- */
.more-link {
    display: inline-block;
    margin-top: 8px;
    color: #608c40;
    font-weight: 500;
    text-decoration: none;
    font-size: 1rem;
}
.more-link:hover { color: #4a6e30; text-decoration: underline; }


/* ---------- Service-Seite ---------- */
.service-blocks {
    max-width: 680px;
    margin: 0 0 40px;
}
.service-block {
    padding: 18px 0;
}
.service-block h3 {
    margin-bottom: .5em;
}
.service-block ul {
    margin: 0;
    padding-left: 1.2em;
}
.service-block li {
    margin-bottom: .3em;
}
.service-sep {
    border: 0;
    border-top: 2px solid #c8c8c8;
    margin: 0;
}

/* ---------- Ortsbeirat-Seite ---------- */
.page-ortsbeirat .site-main { padding-top: 28px; }
.page-ortsbeirat .page-section:nth-of-type(1) { padding-bottom: 4px; }
.page-ortsbeirat .page-section:nth-of-type(2) { padding-top: 4px; }

/* Sitzungsprotokolle: deutlich abgesetzt vom oberen Seiteninhalt */
.page-ortsbeirat #protokolle {
    border-top: 3px solid #608c40;
    margin-top: 1.5em;
    padding-top: 2em;
}
/* Heading untergeordnet zur Seitenüberschrift */
.page-ortsbeirat #protokolle .heading-widget { text-align: left; }
.page-ortsbeirat #protokolle .heading-title  { font-size: 1.4rem; font-weight: 500; }

/* Themenregister: abgesetzt vom Protokoll-Block */
.page-ortsbeirat #ob-themen {
    border-top: 2px solid #c8d9b8;
    padding-top: 1.5em;
    margin-top: 2.5em;
}

/* ---------- Kontakt-Seite ---------- */
.page-kontakt .page-intro { margin-bottom: 20px; }
.page-kontakt .page-section { padding-top: 12px; }

.kontakt-quickbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 28px;
    background: #edf3e7;
    border: 1px solid #c8d9b8;
    border-radius: 8px;
    padding: 18px 28px;
    margin: 0 auto 32px;
    max-width: 580px;
}
.kontakt-quickbar-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 1.15rem;
    font-weight: 500;
    color: #4d7034;
    text-decoration: none;
}
.kontakt-quickbar-item .fa { font-size: 1.1rem; }
.kontakt-quickbar-item a  { color: #4d7034; font-weight: 500; }
.kontakt-quickbar-item a:hover,
.kontakt-quickbar-item:hover { color: #3a5a24; text-decoration: underline; }
.kontakt-quickbar-sep { color: #b0c8a0; font-size: 1.3rem; }
@media (max-width: 480px) {
    .kontakt-quickbar-sep { display: none; }
    .kontakt-quickbar { gap: 14px; }
}

.person-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #c8d9b8;
    box-shadow: 0 6px 28px rgba(0,0,0,.18);
    padding: 32px 20px 28px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.person-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: block;
}
.person-name {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 500;
    color: #3a3a3a;
}
.person-role {
    margin: 0 0 10px;
    font-size: .9rem;
    font-weight: 600;
    color: #4d7034;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ortsbeirat-foto {
    margin: 0 auto;
    max-width: 820px;
}
.ortsbeirat-foto figcaption {
    margin-top: .6em;
    font-size: 1.05rem;
    color: #3a3a3a;
    font-style: normal;
}
.ortsbeirat-foto-namen {
    font-size: .9rem;
    color: #555;
}
.person-for {
    font-size: .9rem;
    color: #3a3a3a;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 6px;
}
.person-roles {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 18px;
}
.role-tag {
    display: inline-block;
    background: #edf3e7;
    color: #4d7034;
    font-size: .85rem;
    font-weight: 500;
    padding: 3px 12px;
    border-radius: 20px;
}
.role-tag-web {
    background: #e6f0fa;
    color: #2970a0;
}
.person-card address {
    font-style: normal;
    font-size: 1.05rem;
    color: #555;
    line-height: 1.7;
    text-align: center;
    margin-top: auto;
}
.person-card address a {
    color: #4d7034;
    text-decoration: none;
    white-space: nowrap;
}
.person-card address a:hover { text-decoration: underline; }

/* DSGVO-konforme 2-Klick-Loesung fuer Google Maps */
.page-kontakt .map-consent {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #e8efe1 0%, #d4dec5 100%);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.page-kontakt .map-consent-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    gap: 16px;
}
.page-kontakt .map-consent-overlay p {
    max-width: 520px;
    margin: 0;
    color: #444;
}
.page-kontakt .map-consent-overlay a { color: #4d7034; }
.page-kontakt .map-consent iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Statische Kartenbilder (karte_der_doerfer, MarburgerLand etc.)
   Einheitliches Design analog zur .map-consent-Komponente */
.static-map-wrap {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    margin: 1em 0;
    max-width: 100%;
}
.static-map-wrap img {
    display: block;
    width: 100%;
    height: auto;
}
/* Float-Variante fuer eingebettete Karten (z. B. Startseite) */
.static-map-wrap--right {
    float: right;
    margin: 0 0 1.2em 1.5em;
    max-width: 460px;
    width: 40%;
}
@media (max-width: 600px) {
    .static-map-wrap--right {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 1em 0;
    }
}

/* ---------- Müll-Widget (Startseite) ---------- */
.muell-widget-section {
    border-top: 1px solid #eee;
    padding-top: 20px;
    padding-bottom: 16px;
}
.muell-cards {
    display: flex;
    gap: 14px;
    margin-bottom: 10px;
}
@media (max-width: 480px) {
    .muell-cards { flex-direction: column; }
}
.muell-card {
    flex: 1;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 5px rgba(0,0,0,.09);
    min-width: 0;
}
.muell-card-head {
    padding: 7px 14px;
    color: #fff;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .02em;
}
.muell-card-body {
    padding: 8px 14px;
    font-size: 1rem;
    color: #47425d;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-top: none;
    border-radius: 0 0 6px 6px;
}
.muell-card--bio    .muell-card-head { background: #608c40; }
.muell-card--rest   .muell-card-head { background: #5a5a5a; }
.muell-card--papier .muell-card-head { background: #3a6fa8; }
.muell-card--gelb   .muell-card-head { background: #b08800; }

/* ---------- Protokolle-Seite ---------- */
.protokolle-intro {
    color: #444;
    margin-bottom: 1.8em;
    line-height: 1.65;
}
.protokolle-toc {
    background: #f5f7f2;
    border-left: 4px solid #608c40;
    padding: .8em 1.2em;
    margin-bottom: 2.5em;
    border-radius: 0 4px 4px 0;
}
.protokolle-toc strong {
    display: block;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #777;
    margin-bottom: .55em;
}
.protokolle-toc a {
    display: inline-block;
    margin: .2em .7em .2em 0;
    color: #608c40;
    font-size: .9em;
    text-decoration: none;
}
.protokolle-toc a:hover { text-decoration: underline; }

.protokoll-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5em;
}
.protokoll-item {
    border-top: 1px solid #e4e4e4;
    padding: 1.3em 0;
    scroll-margin-top: 112px;
}
.protokoll-item:last-child { border-bottom: 1px solid #e4e4e4; }
.protokoll-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4em 1em;
    margin-bottom: .55em;
}
.protokoll-label {
    font-weight: 700;
    color: #3a3a3a;
}
.protokoll-date {
    color: #666;
    font-size: .88em;
}
.protokoll-pdf-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .35em;
    color: #608c40;
    font-size: .85em;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #608c40;
    border-radius: 3px;
    padding: .2em .75em;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.protokoll-pdf-link:hover {
    background: #608c40;
    color: #fff;
}
.protokoll-summary {
    margin: 0 0 .5em;
    color: #555;
    line-height: 1.65;
    font-size: .95em;
}
.protokoll-tags { margin-top: .4em; }
.protokoll-tag {
    display: inline-block;
    background: #edf3e7;
    color: #4d7034;
    font-size: .75em;
    padding: .15em .65em;
    border-radius: 20px;
    margin-right: .3em;
    text-decoration: none;
}
.protokoll-tag:hover { background: #d5e6c7; }

.protokoll-period-label {
    border-top: 3px solid #608c40;
    padding: 1em 0 .3em;
    margin-top: 1.8em;
    font-size: .82em;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #608c40;
    font-weight: 700;
    list-style: none;
}

.protokoll-themen-intro {
    color: #666;
    font-size: .9em;
    margin-bottom: 1.8em;
}
.themen-section {
    margin-bottom: 2em;
    padding-top: .5em;
    scroll-margin-top: 112px;
}
.themen-section h3,
.themen-section h4 {
    font-size: 1em;
    border-bottom: 2px solid #608c40;
    padding-bottom: .3em;
    margin-bottom: .6em;
    color: #3a3a3a;
}
.themen-section a { color: #608c40; }

/* Akkordeon */
.thema-item {
    border-bottom: 1px solid #e8e8e8;
}
.thema-item summary {
    cursor: pointer;
    padding: .4em 0;
    display: flex;
    align-items: center;
    gap: .55em;
    font-size: .95em;
    color: #3a3a3a;
    font-weight: 500;
    list-style: none;
    user-select: none;
    transition: color .15s;
}
.thema-item summary::-webkit-details-marker { display: none; }
.thema-item summary::before {
    content: '\f054';
    font-family: FontAwesome;
    flex-shrink: 0;
    font-size: .7em;
    color: #608c40;
    transition: transform .2s ease;
    line-height: 1;
}
.thema-item[open] > summary::before { transform: rotate(90deg); }
.thema-item summary:hover { color: #608c40; }
.thema-item-body {
    padding: .25em 0 .8em 1.3em;
}
.thema-item-body p {
    color: #444;
    margin: 0 0 .6em;
    font-size: .93em;
    line-height: 1.65;
}
.thema-item-body ul {
    margin: 0;
    padding-left: 1em;
}
.thema-item-body li {
    margin-bottom: .35em;
    font-size: .9em;
    color: #444;
}
.thema-item-body a { color: #608c40; }
.pdf-inline {
    font-size: .82em;
    color: #888;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: .05em .45em;
    margin-left: .4em;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.pdf-inline:hover { color: #608c40; border-color: #608c40; }

.thema-abschnitt-label {
    display: block;
    font-size: .73em;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #888;
    font-weight: 700;
    margin: .9em 0 .25em;
}
.thema-abschnitt-label:first-child { margin-top: 0; }
.thema-zitat {
    border-left: 3px solid #dce8d0;
    padding-left: .8em;
    margin: .25em 0 .5em;
}
.thema-zitat p {
    margin: 0 0 .45em;
    font-style: italic;
    color: #444;
    font-size: .91em;
    line-height: 1.6;
}
.thema-zitat p:last-child { margin-bottom: 0; }
.zitat-quelle {
    font-style: normal;
    font-weight: 600;
    color: #608c40;
}

/* =====================================================================
   EVENT-BANNER (Maibaum, Dolles Dorf u.a. Detailseiten)
   ===================================================================== */
.has-event-banner .site-main { padding-top: 0; }

.event-banner {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: #2a3a1f;
}
.event-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
    opacity: .72;
    margin: 0;
}
.event-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.50) 100%);
}
.event-banner-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}
.event-banner-text h1 {
    color: #fff;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 300;
    text-shadow: 0 2px 18px rgba(0,0,0,.55);
    margin: 0 0 .35em;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.event-banner-text .event-sub {
    font-size: .82rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .28em;
    color: rgba(255,255,255,.88);
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
}

/* =====================================================================
   FOTO-RASTER (Galerien auf Event-Seiten)
   ===================================================================== */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
    margin: 1em 0 1.5em;
}
.photo-grid a {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: #ddd;
}
.photo-grid a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
    margin: 0;
}
.photo-grid a:hover img { transform: scale(1.06); }

.photo-grid-caption {
    font-size: .85rem;
    color: #888;
    margin: -.8em 0 1.5em;
    font-style: italic;
}

@media (max-width: 600px) {
    .event-banner { height: 220px; }
    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 4px;
    }
}

/* =====================================================================
   RESPONSIVER VIDEO-RAHMEN
   ===================================================================== */
.video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #111;
    margin: 1.5em 0;
}
.video-wrap iframe,
.video-wrap video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* =====================================================================
   DORFLEBEN-KARTEN MIT FOTO (ersetzt Icon-Boxes auf dorfleben.html)
   ===================================================================== */
.event-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 26px;
    margin-top: 1.5em;
}
.event-card {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #c8d9b8;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    transition: transform .25s ease, box-shadow .25s ease;
    background: #fff;
    text-decoration: none;
    display: block;
    color: inherit;
}
.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
    color: inherit;
}
.event-card-img {
    height: 195px;
    overflow: hidden;
    background: #608c40;
}
.event-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    transition: transform .35s ease;
}
.event-card:hover .event-card-img img { transform: scale(1.05); }
.event-card-body {
    padding: 18px 22px 22px;
}
.event-card-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: #3a3a3a;
    margin: 0 0 .5em;
}
.event-card-desc {
    font-size: .93rem;
    color: #777;
    margin: 0;
    line-height: 1.55;
}
@media (max-width: 600px) {
    .event-cards { grid-template-columns: 1fr; }
}

/* =====================================================================
   LIGHTBOX (Foto-Galerie)
   ===================================================================== */
.lb {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}
.lb--open {
    opacity: 1;
    pointer-events: auto;
}
.lb-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 90vh;
    cursor: default;
}
.lb-img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 3px;
    margin: 0;
    display: block;
    box-shadow: 0 10px 50px rgba(0, 0, 0, .7);
    user-select: none;
}
.lb-close,
.lb-prev,
.lb-next {
    position: fixed;
    background: rgba(255, 255, 255, .13);
    border: 0;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s;
    padding: 0;
    line-height: 1;
}
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover { background: rgba(255, 255, 255, .28); }
.lb-close {
    top: 14px;
    right: 14px;
    font-size: 26px;
}
.lb-prev {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
}
.lb-next {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
}
.lb-counter {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .65);
    font-size: .82rem;
    letter-spacing: .05em;
    pointer-events: none;
}
/* Pfeil-Buttons ausblenden wenn nur 1 Bild */
.lb--single .lb-prev,
.lb--single .lb-next { display: none; }
.muell-leer { font-size: .9rem; color: #888; margin: 0; }