/* ========================================================
   Odenwälder Direktvermarkter e.V. — Frontend
   Look & Feel abgestimmt auf die Druckbroschüre 2025:
   Schriften: Source Serif 4 (Minion-Pro-Verwandte) + Open Sans / Open Sans Condensed
   Farbwelt: Bordeaux / Sage / Latte / Warmes Dunkelbraun
   ======================================================== */

/* --------- Schriften, lokal ausgeliefert ---------------------------------
   Ersetzt den früheren @import von fonts.googleapis.com: keine Verbindung
   zu Google beim Seitenaufruf (DSGVO) und kein Render-blockierender
   CSS-Wasserfall (HTML -> CSS -> Font-CSS -> Fontdatei).

   Nur die Subsets latin und latin-ext — Kyrillisch, Griechisch, Hebräisch,
   Vietnamesisch, Math und Symbols brauchen wir nicht.
   Open Sans und Source Serif 4 sind Variable Fonts: eine Datei deckt den
   ganzen Gewichtsbereich ab.

   Aktualisieren: Dateien von fonts.google.com neu ziehen und hier ersetzen,
   Dateinamen beibehalten.
   ------------------------------------------------------------------------ */

@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/fonts/source-serif-4-300-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/fonts/source-serif-4-300-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/open-sans-400-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/open-sans-400-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/open-sans-condensed-300-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/open-sans-condensed-300-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/open-sans-condensed-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/open-sans-condensed-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Broschüren-CI */
    --bordeaux:      #6B1414;   /* CMYK 30/100/98/44 aus Broschüre */
    --bordeaux-deep: #4A0E0E;
    --sage:          #848F7F;   /* RGB 132/143/127 aus Broschüre */
    --sage-light:    #A9B7A2;   /* RGB 169/183/162 aus Broschüre */
    --sage-dark:     #5c6656;
    --latte:         #E9DFC6;   /* Broschüren-Beige, für Web etwas heller */
    --latte-warm:    #DDD0B0;
    --paper:         #F5EEDF;   /* Cremeweiß / Papiergrund */
    --ink:           #383431;   /* warmes Dunkelbraun statt Schwarz */
    --muted:         #83786A;   /* gedeckt für Meta-Text */
    --line:          #d3c7a9;

    /* Aliases für Rückwärtskompatibilität mit bestehenden Klassen */
    --forest:        var(--sage-dark);
    --forest-dark:   #2f3a29;
    --forest-soft:   var(--sage);
    --terracotta:    var(--bordeaux);
    --terracotta-deep: var(--bordeaux-deep);
    --cream:         var(--paper);
    --cream-warm:    var(--latte);
    --stone:         var(--muted);

    --font-serif: "Source Serif 4", "Minion Pro", Georgia, serif;
    --font-sans:  "Open Sans", system-ui, sans-serif;
    --font-condensed: "Open Sans Condensed", "Open Sans", system-ui, sans-serif;

    --wrap: 1180px;
    --gutter: clamp(1rem, 3vw, 2rem);

    /* Höhe des sticky Headers = Logo-Höhe + 2× 1.25rem Padding + 1px Border.
       Einzige Quelle für alle sticky-Offsets darunter — bei Logo-Änderung nur hier anfassen.
       Logo-Seitenverhältnis 4.137:1, d.h. 85px hoch = 352px breit. */
    --header-h: 126px;   /* Logo 85px + 40px + 1px */
}

/* Umschaltpunkt Desktop-Nav → Burger. Rechnung bei 0.95rem Nav-Schrift:
   Logo 352px + 32px Gap + ~459px Navigation = 843px Inhaltsbreite.
   Unter ~960px Viewport (abzüglich Gutter) geht das nicht mehr nebeneinander auf. */
@media (max-width: 960px) {
    :root { --header-h: 101px; }   /* Logo dort 60px + 40px + 1px */
}

/* Ab hier passen Logo (248px) + Menü-Button nicht mehr nebeneinander */
@media (max-width: 420px) {
    :root { --header-h: 89px; }    /* Logo dort 48px + 40px + 1px */
}

/* Zwei Papier-Ebenen:
   --paper-noise    → SVG-Feinkörnung, überall auf dem Grundton (Body, Header)
   --paper-texture  → echte gekaufte Papier-Kachel (Fotolia) für starke Broschüren-Anmutung
                       auf ausgezeichneten Sektionen (Plakat, Latte, Member-Hero) */
:root {
    --paper-noise:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.11  0 0 0 0 0.10  0 0 0 0 0.07  0 0 0 0.14 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
    --paper-texture: url("/assets/img/textures/papier-tile.jpg");
}

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

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

body {
    margin: 0;
    background: var(--paper);
    background-image: var(--paper-noise);
    background-repeat: repeat;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: clamp(1rem, 0.4vw + 0.9rem, 1.075rem);
    line-height: 1.65;
}

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.005em;
    color: var(--bordeaux);
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 4.5vw + 0.5rem, 4.25rem); font-weight: 400; font-variation-settings: "opsz" 60; }
h2 { font-size: clamp(1.85rem, 2.5vw + 0.5rem, 2.85rem); font-weight: 500; font-variation-settings: "opsz" 48; }
h3 { font-size: clamp(1.25rem, 1.2vw + 0.5rem, 1.6rem); font-weight: 500; font-variation-settings: "opsz" 24; }
h4 { font-family: var(--font-condensed); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage-dark); }

p { margin: 0 0 1em; }
a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terracotta); }

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

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* --------- Icons (Lucide, inline über icon() in includes/db.php) --------- */
.icon {
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
}
/* Im Fließtext: an der Schrift ausgerichtet, mit etwas Luft zum Wort */
.icon--inline {
    vertical-align: -0.15em;
    margin-left: .35em;
    opacity: .7;
}
/* Vor dem Text (Zurück-Link): Abstand auf die andere Seite */
a > .icon--inline:first-child {
    margin-left: 0;
    margin-right: .4em;
}

/* --------- Skip-Link / A11y --------- */
.skip {
    position: absolute; left: -9999px;
    background: var(--forest); color: var(--cream);
    padding: .75rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --------- Header --------- */
.site-header {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line);
    background: var(--cream);
    background-image: var(--paper-noise);
    position: sticky;
    top: 0;
    z-index: 20;
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem;
}
.site-header__brand {
    display: block;
    text-decoration: none;
}
.site-header__brand img { height: 85px; width: auto; display: block; }

@media (max-width: 960px) {
    .site-header__brand img { height: 60px; }
}

@media (max-width: 420px) {
    .site-header__brand img { height: 48px; }
}

.site-nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 1.75rem;
    font-size: 0.95rem;
}
.site-nav a {
    color: var(--ink);
    text-decoration: none;
    padding: .25rem 0;
    border-bottom: 2px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: var(--forest);
    border-bottom-color: var(--terracotta);
}

/* Mobile-Menu Toggle */
.nav-toggle {
    display: none;
    background: none; border: 1px solid var(--forest);
    padding: .4rem .75rem; border-radius: 3px;
    color: var(--forest);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    cursor: pointer;
}

@media (max-width: 960px) {
    .nav-toggle { display: inline-block; }
    .site-nav { display: none; width: 100%; margin-top: 1rem; }
    .site-nav.is-open { display: block; }
    .site-nav ul { flex-direction: column; gap: .5rem; }
    .site-header__inner { flex-wrap: wrap; }
}

/* --------- Hero (Fullbleed mit Text-Overlay) --------- */
.hero {
    position: relative;
    min-height: clamp(520px, 78vh, 780px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: var(--cream);
    background: var(--forest-dark);
}
.hero__bg {
    position: absolute; inset: 0;
    z-index: 0;
}
.hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 30%;   /* höher als center — verhindert abgeschnittene Köpfe */
}
/* Farbschleier zur Textlesbarkeit — Verlauf von unten (dunkel) nach oben (aufhellend) */
.hero__bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg,
            rgba(20,39,24,0.05) 0%,
            rgba(20,39,24,0.35) 45%,
            rgba(20,39,24,0.82) 100%),
        linear-gradient(90deg,
            rgba(20,39,24,0.4) 0%,
            rgba(20,39,24,0.1) 45%,
            rgba(20,39,24,0.0) 100%);
    pointer-events: none;
}
.hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    max-width: var(--wrap);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
.hero__text {
    max-width: 44rem;
}
.hero__kicker {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cream);
    font-weight: 600;
    display: inline-block;
    margin-bottom: 1.25rem;
    padding-left: 3.5rem;
    position: relative;
}
.hero__kicker::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 2.75rem; height: 1px; background: var(--terracotta);
}
.hero h1 {
    color: var(--cream);
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero__lede {
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1vw + 0.9rem, 1.45rem);
    line-height: 1.5;
    color: var(--cream-warm);
    font-variation-settings: "opsz" 24; font-weight: 400;
    max-width: 40ch;
    text-shadow: 0 1px 16px rgba(0,0,0,0.3);
}
.hero__caption {
    position: absolute;
    right: var(--gutter);
    top: 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(243,236,221,0.55);
    z-index: 1;
}
@media (max-width: 640px) {
    .hero__kicker { padding-left: 2rem; }
    .hero__kicker::before { width: 1.25rem; }
}

/* --------- Buttons --------- */
.btn {
    display: inline-block;
    padding: .875rem 1.75rem;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: transform .12s, background .12s, color .12s;
}
.btn--primary { background: var(--forest); color: var(--cream); }
.btn--primary:hover { background: var(--forest-dark); color: var(--cream); transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--forest); border-color: var(--forest); }
.btn--outline:hover { background: var(--forest); color: var(--cream); }
.btn--terracotta { background: var(--terracotta); color: var(--cream); }
.btn--terracotta:hover { background: var(--terracotta-deep); color: var(--cream); transform: translateY(-1px); }

.hero__ctas { margin-top: 2rem; display: flex; gap: .75rem; flex-wrap: wrap; }

/* --------- Sektionen mit Wechsel-Rhythmus --------- */
.section {
    padding: clamp(3rem, 6vw, 5.5rem) 0;
    position: relative;
}
.section--dark {
    background: var(--forest-dark);
    color: var(--cream);
    position: relative;
    overflow: hidden;
}
.section--dark::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--paper-noise);
    opacity: 0.5;
    pointer-events: none;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--cream); }
.section--dark a { color: var(--cream); }

.section-head {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.section-head .kicker {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--terracotta);
    font-weight: 600;
    display: block;
    margin-bottom: .75rem;
}

/* --------- Bauernmarkt-Plakat (Terrakotta-Bruch) --------- */
.plakat {
    background: var(--terracotta);
    color: var(--cream);
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    position: relative;
    overflow: hidden;
}
.plakat::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--paper-texture);
    background-size: 400px;
    mix-blend-mode: multiply;
    opacity: 0.55;
    pointer-events: none;
}
.plakat__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    position: relative;
    z-index: 1;
}
.plakat__date {
    font-family: var(--font-serif);
    font-variation-settings: "opsz" 60;
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.02em;
}
.plakat__date .day {
    font-size: clamp(4.5rem, 12vw, 8rem);
    display: block;
}
.plakat__date .month {
    font-family: var(--font-condensed);
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    display: block;
    letter-spacing: 0.08em;
    margin-top: .5rem;
    font-weight: 700;
    text-transform: uppercase;
}
.plakat__date .year {
    font-family: var(--font-sans);
    font-size: 1rem;
    letter-spacing: 0.3em;
    display: block;
    margin-top: .75rem;
    opacity: 0.8;
}
.plakat h2 { color: var(--cream); }
.plakat__lede {
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 0.5vw + 0.9rem, 1.25rem);
    line-height: 1.55;
    max-width: 40ch;
    font-variation-settings: "opsz" 24; font-weight: 400;
}
@media (max-width: 720px) {
    .plakat__grid { grid-template-columns: 1fr; }
}

/* --------- Mitglieder-Grid (3 Spalten Desktop → 2 Tablet → 1 Mobil) --------- */
.members-teaser {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
    .members-teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .members-teaser { grid-template-columns: 1fr; }
}
.member-card {
    background: var(--paper);
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s;
    overflow: hidden;
}
/* HTML hidden-Attribut wirken lassen — sonst schlaegt display:flex es tot */
.member-card[hidden] { display: none; }

.member-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(56, 52, 49, 0.13);
    color: var(--ink);
}
.member-card__image {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--latte);
}
.member-card__badge {
    position: absolute;
    top: .6rem;
    left: .6rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .6rem;
    background: rgba(92, 102, 86, 0.92);
    color: var(--paper);
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 3px;
    backdrop-filter: blur(2px);
}
.member-card__badge .icon { width: 14px; height: 14px; }
.member-card__image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
}
.member-card:hover .member-card__image img { transform: scale(1.04); }
.member-card__body {
    padding: 1.1rem 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.member-card__name {
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 0.4vw + 1.05rem, 1.35rem);
    font-variation-settings: "opsz" 30; font-weight: 500;
    color: var(--bordeaux);
    line-height: 1.18;
}
.member-card__meta {
    font-size: 0.85rem;
    color: var(--stone);
}
.member-card__tags {
    display: flex; gap: .35rem; flex-wrap: wrap;
    margin-top: .5rem;
}
.member-card__tag {
    font-size: 0.72rem;
    padding: .15rem .5rem;
    background: var(--cream);
    color: var(--forest-soft);
    border: 1px solid var(--line);
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.member-card__desc {
    font-size: 0.85rem;
    color: var(--stone);
    line-height: 1.45;
    margin-top: .1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ─── Teilnehmer-Detailseite: nutzt dasselbe member-body__grid wie die
   Mitgliedsseite — kein eigenes Breiten-/Zentrier-Sonderfall nötig. ─── */
.participant-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
    margin: 0 0 1.25rem;
}

/* ─── Bauernmarkt-Teilnehmer, gruppiert nach Kategorie ─── */
.teilnehmer-gruppe + .teilnehmer-gruppe {
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.teilnehmer-gruppe__h {
    font-family: var(--font-condensed);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin: 0 0 1.2rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--line);
}

.section__more {
    text-align: center;
    margin-top: clamp(2rem, 3vw, 3rem);
}

/* --------- News-Anriss (Startseite) --------- */
.news-list {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.news-item {
    padding: 1.25rem 0;
    border-top: 1px solid var(--line);
}
/* Variante mit Vorschaubild: 120-Pixel-Thumb links, Text rechts.
   Auf schmalen Displays fällt das Bild nach oben und wird volle Breite. */
.news-item--with-image {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1.25rem;
    align-items: start;
}
.news-item__thumb {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: var(--latte);
}
.news-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-item__body { min-width: 0; }
.news-item__date {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--stone);
    font-weight: 500;
}
.news-item__title {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-variation-settings: "opsz" 36; font-weight: 500;
    color: var(--forest);
    margin: .5rem 0 .5rem;
    line-height: 1.2;
}
.news-item__title a {
    color: inherit;
    text-decoration: none;
}
.news-item__title a:hover {
    color: var(--bordeaux);
}
.news-item__link {
    display: inline-block;
    margin-top: .5rem;
    font-family: var(--font-sans);
    font-size: .9rem;
    color: var(--bordeaux);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
.news-item__link:hover {
    color: var(--bordeaux-deep, var(--bordeaux));
}
@media (max-width: 520px) {
    .news-item--with-image {
        grid-template-columns: 1fr;
    }
    .news-item__thumb {
        aspect-ratio: 16 / 9;
    }
}

/* --------- News-Vollansicht (/aktuelles) --------- */
.news-list--full {
    display: block;
}
.news-post {
    padding: 2.25rem 0;
    border-top: 1px solid var(--line);
}
.news-post:first-child { border-top: 0; padding-top: 0; }
.news-post__image {
    margin: 0 0 1.25rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
    background: var(--latte);
}
.news-post__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-post__head { margin-bottom: 1rem; }
.news-post__date {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--stone);
    font-weight: 500;
}
.news-post__title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    font-variation-settings: "opsz" 48; font-weight: 500;
    color: var(--forest);
    margin: .35rem 0 0;
    line-height: 1.15;
}
.news-post__body p { max-width: 62ch; }
.news-post__link { margin-top: 1.5rem; }

/* --------- Footer --------- */
.site-footer {
    background: var(--forest-dark);
    color: var(--cream);
    padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
    position: relative;
    overflow: hidden;
    margin-top: clamp(3rem, 5vw, 4rem);
}
.site-footer::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--paper-noise);
    opacity: 0.4;
    pointer-events: none;
}
.site-footer a { color: var(--cream); text-decoration-color: var(--terracotta); }
.site-footer a:hover { color: var(--cream-warm); }
.footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    position: relative;
    z-index: 1;
}
.footer h4 {
    color: var(--terracotta);
    margin-bottom: 1rem;
    font-size: 0.85rem;
    letter-spacing: 0.14em;
}
.footer__meta {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(243,236,221,0.15);
    font-size: 0.82rem;
    color: rgba(243,236,221,0.65);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
    position: relative; z-index: 1;
}

/* ========================================================
   Unter-Seiten: Page-Lead, Filter, Detail, Formular
   ======================================================== */

.page-lead {
    padding: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(0.75rem, 1.5vw, 1.25rem);
    border-bottom: 1px solid var(--line);
}
.page-lead h1 { margin-top: 0.25rem; margin-bottom: 0.5rem; }
.page-lead .page-lede { margin: 0; }
.page-lead .kicker,
.section-head .kicker,
.hero__kicker,
.kicker {
    font-family: var(--font-condensed);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bordeaux);
    display: inline-block;
}
.page-lede {
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 0.5vw + 0.95rem, 1.35rem);
    line-height: 1.5;
    color: var(--sage-dark);
    font-variation-settings: "opsz" 24; font-weight: 400;
    max-width: 44rem;
}

/* --------- Suchfeld (Filter-Navigation Mitgliederverzeichnis) --------- */
.filter-search input[type=search] {
    width: 100%;
    padding: .65rem 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    font: inherit;
    color: var(--ink);
    -webkit-appearance: none;
    appearance: none;
}
.filter-search input[type=search]:focus {
    outline: none;
    border-color: var(--bordeaux);
    box-shadow: 0 0 0 3px rgba(107,20,20,0.12);
}
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------- Verzeichnis: Zweispalter mit Filter-Spalte rechts ---------
   Löst die frühere waagerechte Filter-Leiste ab. Die kostete auf Desktop rund
   180px Höhe, bevor der erste Betrieb sichtbar wurde — Suche und 26 Kategorie-
   Chips übereinander. Aufbau analog .subpage/.subnav (Verein-Unterseiten),
   gleiche Spaltenbreite, gleiche Seitenbreite wie Bauernmarkt und Kontakt.

   Die Anzahl-Zeile bekommt eine eigene Rasterzeile über der Kartenspalte, damit
   Suchfeld und erste Kartenreihe auf einer Oberkante beginnen.

   DOM-Reihenfolge ist bewusst Suche → Anzahl → Karten → Kategorien: das ist
   zugleich die mobile Reihenfolge und die sinnvolle Tab-Reihenfolge. Der Desktop
   sortiert allein über grid-template-areas um, ohne `order` — sonst würde die
   Tastatur-Navigation von der sichtbaren Reihenfolge abweichen. */
.directory {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    grid-template-areas:
        "count  ."
        "main   search"
        "main   filter";
    /* Die dritte Zeile MUSS 1fr sein. "main" spannt über Zeile 2 und 3 — stehen
       beide auf auto, verteilt Grid die Höhe der Kartenspalte gleichmäßig auf
       sie, und das Suchfeld bekommt eine halbe Seitenhöhe zugewiesen. Die
       Kategorien starteten dadurch erst auf Höhe der sechsten Kartenreihe.
       Mit 1fr schluckt die Filterzeile den Überschuss, Zeile 2 bleibt so hoch
       wie das Suchfeld. */
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}
.directory__main          { grid-area: main; min-width: 0; }
.directory .count-line    { grid-area: count; }
.directory .filter-search { grid-area: search; }
.directory .filter-nav    { grid-area: filter; margin-top: 1rem; }

.directory__grid {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) {
    .directory__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .directory__grid { grid-template-columns: 1fr; }
}

/* Die Kategorien laufen beim Scrollen mit. Ihre Grid-Zeile ist so hoch wie die
   Kartenspalte daneben, deshalb trägt sticky über die ganze Seitenlänge.
   Bewusst ohne max-height: die Liste bekäme sonst einen eigenen Scrollbalken. */
.filter-nav {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.filter-nav__title {
    font-family: var(--font-condensed);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin: 0 0 -.35rem;
}
.filter-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--line);
}
.filter-nav__list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    padding: .45rem 0 .45rem 1.1rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-serif);
    font-size: 1.02rem;
    line-height: 1.25;
    transition: color .12s, border-color .12s;
}
.filter-nav__list a:hover {
    color: var(--bordeaux);
    border-left-color: var(--sage);
}
.filter-nav__list a[aria-current="page"] {
    color: var(--bordeaux);
    border-left-color: var(--bordeaux);
    font-weight: 600;
}
.filter-nav__count {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--muted);
    flex: 0 0 auto;
}
.filter-nav__list a[aria-current="page"] .filter-nav__count { color: var(--bordeaux); }

/* Kategorien innerhalb der geöffneten Gruppe — eine Ebene tiefer, ruhiger
   gesetzt, damit die Gruppenebene die Liste weiter gliedert. */
.filter-nav__sub {
    list-style: none;
    margin: .1rem 0 .6rem;
    padding: 0;
    border-left: 2px solid var(--line);
    margin-left: 1.1rem;
}
.filter-nav__list .filter-nav__sub a {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    padding: .3rem 0 .3rem .9rem;
    color: var(--muted);
}
.filter-nav__list .filter-nav__sub a:hover {
    color: var(--bordeaux);
    border-left-color: var(--sage);
}
.filter-nav__list .filter-nav__sub a[aria-current="page"] {
    color: var(--bordeaux);
    border-left-color: var(--bordeaux);
    font-weight: 600;
}

/* Mobil: Suche oben, darunter die Betriebe, Kategorien ans Seitenende.
   Die Kategorien werden dort zu umbrechenden Chips — eine waagerecht
   scrollende Leiste wäre am Seitenende leicht zu übersehen. */
@media (max-width: 900px) {
    .directory {
        grid-template-columns: 1fr;
        grid-template-areas:
            "search"
            "count"
            "main"
            "filter";
        grid-template-rows: none;   /* einspaltig spannt nichts, alle Zeilen auto */
    }
    .directory .filter-search { margin-bottom: 1.5rem; }
    .directory .filter-nav {
        position: static;
        gap: .75rem;
        margin-top: 2rem;
        border-top: 1px solid var(--line);
        padding-top: 1.5rem;
    }
    .filter-nav__title { margin: 0; }
    .filter-nav__list {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        border-left: none;
    }
    .filter-nav__list a {
        padding: .4rem .85rem;
        margin-left: 0;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: var(--paper);
        font-family: var(--font-condensed);
        font-size: 0.95rem;
    }
    .filter-nav__list a[aria-current="page"] {
        background: var(--bordeaux);
        border-color: var(--bordeaux);
        color: var(--paper);
    }
    .filter-nav__list a[aria-current="page"] .filter-nav__count { color: var(--paper); opacity: .75; }

    /* Die geöffnete Gruppe bekommt eine volle Zeile, ihre Kategorien
       stehen als eigene Chip-Reihe darunter. */
    .filter-nav__list > li.is-open { flex: 0 0 100%; }
    .filter-nav__sub {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        margin: .6rem 0 0;
        padding: 0;
        border-left: none;
    }
    .filter-nav__list .filter-nav__sub a {
        padding: .3rem .7rem;
        font-size: 0.88rem;
        border: 1px dashed var(--line);
        border-radius: 20px;
        background: transparent;
    }
    .filter-nav__list .filter-nav__sub a[aria-current="page"] {
        background: var(--bordeaux);
        border-style: solid;
        border-color: var(--bordeaux);
        color: var(--paper);
    }
}

.count-line {
    font-family: var(--font-condensed);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.5rem;
    font-weight: 700;
}
.count-line em {
    font-style: normal;
    color: var(--bordeaux);
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
}
.empty-state p { margin-bottom: 1rem; }

/* Info-Kasten auf Bauernmarkt-Seite, solange die Teilnehmer 2026 noch nicht stehen */
.teilnehmer-hinweis {
    background: var(--paper);
    border-left: 4px solid var(--bordeaux);
    padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
    max-width: 44rem;
}
.teilnehmer-hinweis p {
    margin: 0;
    line-height: 1.55;
    color: var(--ink);
}
.teilnehmer-hinweis p + p {
    margin-top: 0.75rem;
    color: var(--muted);
}
.teilnehmer-hinweis strong {
    color: var(--bordeaux);
}

/* --------- Mitglied-Detailseite --------- */
.breadcrumb {
    padding: 1rem 0;
    font-family: var(--font-condensed);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--latte);
    border-bottom: 1px solid var(--line);
}
.breadcrumb a {
    color: var(--sage-dark);
    text-decoration: none;
}
.breadcrumb a:hover { color: var(--bordeaux); }

.member-hero {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: var(--latte);
    position: relative;
    overflow: hidden;
}
.member-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--paper-texture);
    background-size: 400px;
    mix-blend-mode: multiply;
    opacity: 0.4;
    pointer-events: none;
}
.member-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    position: relative;
    z-index: 1;
}
.member-hero__text .kicker {
    margin-bottom: 0.75rem;
}
.member-hero__text h1 {
    margin: 0 0 0.5rem;
}
.member-hero__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(56, 52, 49, 0.18);
    margin: 0;
}
.member-hero__image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 780px) {
    .member-hero__grid { grid-template-columns: 1fr; }
    .member-hero__image { box-shadow: 0 10px 24px rgba(56, 52, 49, 0.15); }
}

.contact-card {
    background: var(--latte);
    border: 1px solid var(--line);
    padding: 1.5rem 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.contact-card::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--paper-texture);
    background-size: 400px;
    mix-blend-mode: multiply;
    opacity: 0.3;
    pointer-events: none;
}
.contact-card > * { position: relative; z-index: 1; }
.contact-card h3 {
    font-family: var(--font-condensed);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bordeaux);
    margin-bottom: 1rem;
}
.contact-card__addr {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}
.contact-card__list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem 1rem;
    margin: 0;
    font-size: 0.95rem;
}
.contact-card__list dt {
    font-family: var(--font-condensed);
    font-weight: 700;
    color: var(--sage-dark);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    padding-top: 3px;
}
.contact-card__list dd { margin: 0; }

/* --------- Kontaktformular --------- */
.form-section {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
}
.contact-form {
    display: grid;
    gap: 1.25rem;
    max-width: 620px;
}
.contact-form label {
    display: block;
    font-family: var(--font-condensed);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin-bottom: 0.4rem;
}
.contact-form .req { color: var(--bordeaux); }
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea {
    width: 100%;
    padding: .8rem 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.4;
    border-radius: 2px;
    transition: border-color .12s, box-shadow .12s;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--bordeaux);
    box-shadow: 0 0 0 3px rgba(107,20,20,0.12);
}
.contact-form textarea { min-height: 180px; resize: vertical; }

.form-consent {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.4;
}
.form-consent input[type=checkbox] {
    margin-top: 4px;
    accent-color: var(--bordeaux);
    width: 18px; height: 18px;
    flex-shrink: 0;
}
.form-hpot { display: none !important; }   /* Honeypot */

.alert {
    padding: 1rem 1.25rem;
    border-left: 4px solid;
    background: var(--latte);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}
.alert--success { border-color: var(--sage-dark); }
.alert--error { border-color: var(--bordeaux); }
/* Dauerhafter Hinweis, keine Reaktion auf eine Eingabe — deshalb ruhiger
   als die Erfolgs-/Fehlermeldung, auf Papierton statt Latte. */
.alert--info {
    border-color: var(--sage);
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--sage-dark);
}
.alert--info p { margin: 0; }
.alert--info p + p { margin-top: .6rem; }
.alert--info strong { color: var(--bordeaux); }

/* --------- Bauernmarkt-Feedback (Detailseite) --------- */
.feedback-box {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--bordeaux);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    max-width: 44rem;
}
.feedback-box__intro { margin-bottom: 1.5rem; }
.feedback-box__intro h2 { margin: .25rem 0 .5rem; color: var(--bordeaux); }
.feedback-box__intro p { margin: 0; color: var(--muted); }

.feedback-form { display: grid; gap: 1.25rem; }
.feedback-form label {
    display: block;
    font-family: var(--font-condensed);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin-bottom: .4rem;
}
.feedback-form input[type=email],
.feedback-form textarea {
    width: 100%;
    padding: .8rem 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    font: inherit;
    color: var(--ink);
}
.feedback-form input:focus,
.feedback-form textarea:focus {
    outline: none;
    border-color: var(--bordeaux);
    box-shadow: 0 0 0 3px rgba(107,20,20,0.12);
}
.feedback-form textarea { min-height: 120px; resize: vertical; }

.feedback-form__rating {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.thumb {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.1rem;
    background: transparent;
    border: 2px solid var(--line);
    cursor: pointer;
    font: inherit;
    font-family: var(--font-condensed);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: var(--ink);
    transition: transform .15s, border-color .15s, background .15s;
}
.thumb .icon { width: 22px; height: 22px; }
.thumb:hover { transform: translateY(-1px); border-color: var(--sage); }
.thumb--up.is-active {
    background: var(--sage-light);
    border-color: var(--sage-dark);
    color: var(--sage-dark);
}
.thumb--down.is-active {
    background: rgba(107,20,20,.08);
    border-color: var(--bordeaux);
    color: var(--bordeaux);
}

/* --------- Prose (verein, impressum, datenschutz) --------- */
.prose {
    max-width: 62ch;
}
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose p, .prose ul { max-width: 62ch; }
.prose ul { padding-left: 1.25rem; }
.prose ul li { margin-bottom: .35rem; }

/* ========================================================
   Mitglied-Detailseite — Fullbleed-Hero + starke Layout-Bausteine
   ======================================================== */

.detail-hero {
    position: relative;
    min-height: clamp(300px, 40vh, 420px);   /* niedriger, damit Portfolio-Bilder (940×600) nicht überstreckt werden */
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--sage-dark);
    color: var(--paper);
}
.detail-hero__bg {
    position: absolute; inset: 0; z-index: 0;
}
.detail-hero__bg img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: 50% 35%;
}
.detail-hero__bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg,
            rgba(20,20,20,0.05) 0%,
            rgba(20,20,20,0.30) 45%,
            rgba(20,20,20,0.78) 100%),
        linear-gradient(90deg,
            rgba(20,20,20,0.35) 0%,
            rgba(20,20,20,0.0) 55%);
    pointer-events: none;
}
.detail-hero__inner {
    position: relative; z-index: 1;
    width: 100%;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem);
}
.detail-hero__inner .hero__kicker {
    color: var(--paper);
    padding-left: 3rem;
    margin-bottom: 1rem;
}
.detail-hero__tags {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-top: 1rem;
}
.detail-tag {
    display: inline-block;
    padding: .3rem .75rem;
    background: rgba(245, 238, 223, 0.15);
    border: 1px solid rgba(245, 238, 223, 0.35);
    color: var(--paper);
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 2px;
    backdrop-filter: blur(4px);
}
.detail-hero__badge {
    display: inline-block;
    margin-top: 1.5rem;
    padding: .55rem 1.1rem;
    background: var(--bordeaux);
    color: var(--paper);
    font-family: var(--font-condensed);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 2px;
}

/* Zwei-Spalten-Info-Layout */
.two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
}
@media (max-width: 720px) {
    .two-col { grid-template-columns: 1fr; }
}

.info-block {
    background: var(--paper);
    padding: 1.75rem 1.75rem 1.5rem;
    border-top: 3px solid var(--bordeaux);
    box-shadow: 0 4px 14px rgba(56, 52, 49, 0.08);
}
.info-block--hours { border-top-color: var(--sage); }
.info-block h2 {
    margin-top: 0;
    font-size: clamp(1.35rem, 1vw + 1rem, 1.75rem);
    font-weight: 500;
}
.info-block__body {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink);
}

/* Latte-Sektion (für Beschreibung) */
.section--latte {
    background: var(--latte);
    position: relative;
    overflow: hidden;
}
.section--latte::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--paper-texture);
    background-size: 400px;
    mix-blend-mode: multiply;
    opacity: 0.35;
    pointer-events: none;
}
.section--latte .prose {
    position: relative;
    z-index: 1;
    max-width: 62ch;
}
.section--latte .prose h2 { margin-top: 0; }
.section--latte .prose p {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.65;
}
.note-auto {
    font-family: var(--font-sans) !important;
    font-size: 0.85rem !important;
    color: var(--muted);
    font-style: italic;
    margin-top: 1.5rem !important;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

/* Kontakt-Grid: Adresse / Kontakt / Web */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}
.contact-block h4 {
    color: var(--bordeaux);
    margin-bottom: 1rem;
}
@media (max-width: 780px) {
    .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Karte in voller Breite */
.map-section {
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
    background: var(--paper);
    border-top: 1px solid var(--line);
}
.map-section h2 {
    margin-bottom: 1.5rem;
}
.map-frame {
    position: relative;
    overflow: hidden;
    background: var(--latte);
    max-width: none;
    box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}
.map-frame iframe {
    display: block;
    width: 100%;
}
.map-frame__actions {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 1rem var(--gutter);
    display: flex; gap: .75rem; flex-wrap: wrap;
    background: var(--paper);
    border-top: 1px solid var(--line);
}

/* ============================================================
   Mitglied-Detailseite v2 — 2-Spalten mit Sidebar rechts
   ============================================================ */

.section--tight { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 5vw, 4.5rem); }

/* Hero-Bereich: Bild in Container-Breite, Titel + Tags als Overlay drauf.
   Kein eigener Hintergrund — Papier-Grund läuft vom Body bis oben durch. */
.member-head {
    padding: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}
.member-head h1 {
    margin: .25rem 0 .75rem;
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    line-height: 1.15;
    color: var(--paper);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
.member-head__tags {
    display: flex; flex-wrap: wrap; gap: .5rem;
}

/* Tags im Overlay-Kontext (heller Text auf dunklem Bild-Gradient) */
.member-head__tags .detail-tag {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(245, 238, 223, 0.4);
    color: var(--paper);
    backdrop-filter: blur(4px);
}

/* Grid: 2fr Main | 1fr Sidebar — Main hat mehr Platz für Text und
   Erzeugnisse, Sidebar hält Kontakt-Facts + Karte kompakt. */
.member-body__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}
@media (max-width: 900px) {
    .member-body__grid { grid-template-columns: 1fr; }
}

.member-body__main { min-width: 0; }
.member-body__aside { min-width: 0; }

/* Sticky-Container in der Sidebar */
.member-aside__sticky {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    display: flex; flex-direction: column;
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .member-aside__sticky { position: static; }
}

/* Boxed Betriebsbild als Hero-Träger (Titel + Tags sitzen als Overlay drauf).
   16:9 passt zum Landschafts-Charakter, ohne bei 1180 px zu wuchtig zu werden. */
.member-photo {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
    background: var(--paper);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.member-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Dunkler Gradient von unten für Overlay-Lesbarkeit */
.member-photo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.4) 35%,
        rgba(0, 0, 0, 0.1) 65%,
        transparent 100%
    );
    pointer-events: none;
}
.member-photo__placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bordeaux);
    background-image: var(--paper-noise);
    color: var(--paper);
    padding: 2rem;
    text-align: center;
}
.member-photo__placeholder span {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 500;
    line-height: 1.2;
}

/* Overlay-Container mit Kicker + H1 + Tags, sitzt unten links im Bild */
.member-photo__overlay {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    color: var(--paper);
}
.member-photo__overlay .kicker {
    color: var(--paper);
    opacity: 0.92;
    margin-bottom: .25rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* Textblöcke im Main */
.member-block { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.member-block h2 {
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    margin: 0 0 .75rem;
}

/* Sidebar-Blöcke */
.member-badge {
    display: inline-block;
    align-self: flex-start;
    padding: .5rem .9rem;
    background: var(--bordeaux);
    color: var(--paper);
    font-family: var(--font-condensed, var(--font-sans));
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 3px;
}

.member-info {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
}
.member-info:last-child { border-bottom: none; padding-bottom: 0; }
.member-info h3 {
    font-family: var(--font-condensed, var(--font-sans));
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin: 0 0 .6rem;
}
.member-info p {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--ink);
}
.member-info a { color: var(--forest); }
.member-info a:hover { color: var(--bordeaux); }

.member-info__list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem .75rem;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.02rem;
}
.member-info__list dt {
    color: var(--stone);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    align-self: center;
}
.member-info__list dd {
    margin: 0;
    color: var(--ink);
}

/* Öffnungszeiten */
.hours-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .3rem .9rem;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1rem;
}
.hours-list dt {
    color: var(--stone);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    align-self: center;
}
.hours-list dd { margin: 0; color: var(--ink); }
.hours-freitext {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--ink);
    margin: 0;
}
.hours-note {
    margin: .6rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--stone);
    font-style: italic;
}

/* Karte in der Sidebar */
.member-map {
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--latte);
}
.member-map iframe { display: block; }
.member-map__actions {
    display: flex; gap: 1rem; flex-wrap: wrap;
    margin-top: .6rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
}
.member-map__actions a {
    color: var(--forest);
}

/* ========================================================
   Unterseiten-Hero (Bauernmarkt & Co.)
   Gleiche Bühne wie die Startseite, eine Spur flacher —
   die Startseite behält den größten Auftritt.
   ======================================================== */
/* Höhe ist bewusst nah am Seitenverhältnis des Motivs (2,4:1) gewählt.
   Ein flacherer Container würde oben den Willkommens-Bogen und unten die
   Marktstände abschneiden — übrig bliebe nur Himmel. */
.hero--page {
    min-height: clamp(440px, 70vh, 780px);
}
.hero--page h1 {
    font-size: clamp(2.1rem, 3.4vw + 0.5rem, 3.35rem);
}
/* Rest-Beschnitt oben klein halten: der Bogen steht dicht an der Bildkante. */
.hero--page .hero__bg img { object-position: 50% 12%; }

/* Handy: flacherer Container zum 4:3-Ausschnitt (siehe <picture> in bauernmarkt.php).
   Höher als ~340px würde das Bild seitlich so stark beschneiden, dass die
   Schrift auf dem Bogen abreißt. */
@media (max-width: 700px) {
    .hero--page { min-height: 340px; }
    .hero--page .hero__bg img { object-position: 45% 40%; }
}

/* ========================================================
   Zweispalter mit linker Bereichs-Navigation (Verein)
   ======================================================== */
.subpage {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
.subpage__main { min-width: 0; }

.subnav {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
}
.subnav__title {
    font-family: var(--font-condensed);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin: 0 0 .9rem;
}
.subnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--line);
}
.subnav a {
    display: block;
    padding: .6rem 0 .6rem 1.1rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.3;
    transition: color .12s, border-color .12s;
}
.subnav a:hover {
    color: var(--bordeaux);
    border-left-color: var(--sage);
}
.subnav a[aria-current="page"] {
    color: var(--bordeaux);
    border-left-color: var(--bordeaux);
    font-weight: 600;
}

/* Mobil: aus der Spalte wird eine waagerechte Chip-Reihe über dem Inhalt */
@media (max-width: 860px) {
    .subpage { grid-template-columns: 1fr; gap: 2rem; }
    .subnav { position: static; }
    .subnav__title { display: none; }
    .subnav ul {
        display: flex;
        gap: .5rem;
        overflow-x: auto;
        border-left: none;
        border-bottom: 1px solid var(--line);
        padding-bottom: .75rem;
        -webkit-overflow-scrolling: touch;
    }
    .subnav li { flex: 0 0 auto; }
    .subnav a {
        padding: .4rem .85rem;
        margin-left: 0;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: var(--paper);
        font-family: var(--font-condensed);
        font-size: 0.95rem;
        white-space: nowrap;
    }
    .subnav a[aria-current="page"] {
        background: var(--bordeaux);
        border-color: var(--bordeaux);
        color: var(--paper);
    }
}

/* ========================================================
   Vorstand
   ======================================================== */
.board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    margin-top: 2rem;
}
.board-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.board-card__image {
    aspect-ratio: 4 / 3;
    background: var(--latte);
    overflow: hidden;
}
.board-card__image img { width: 100%; height: 100%; object-fit: cover; }
.board-card__body { padding: 1.1rem 1.25rem 1.35rem; }
.board-card__role {
    font-family: var(--font-condensed);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bordeaux);
    display: block;
    margin-bottom: .35rem;
}
.board-card__name {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 .35rem;
}
.board-card__farm {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0 0 .6rem;
}
.board-card__contact {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1.7;
    margin: 0;
}
.board-card__contact a { color: var(--forest); word-break: break-word; }
.board-card__contact a:hover { color: var(--bordeaux); }

/* ========================================================
   Dokument-Download (Satzung, Broschüre)
   ======================================================== */
.doc {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 2.75rem);
    align-items: start;
    margin-top: 2rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--latte);
    border: 1px solid var(--line);
    border-radius: 3px;
}
.doc--textonly { grid-template-columns: 1fr; }
.doc__cover img {
    width: 100%;
    border: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(56,52,49,0.18);
}
.doc__body h3 { margin-top: 0; }
.doc__meta {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0 0 1.25rem;
}
.doc__actions { display: flex; gap: .75rem; flex-wrap: wrap; }

@media (max-width: 620px) {
    .doc { grid-template-columns: 1fr; }
    .doc__cover { max-width: 12rem; }
}

/* Hinweis, wenn ein Dokument noch nicht hinterlegt ist */
.doc-missing {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--latte);
    border: 1px dashed var(--line);
    border-radius: 3px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--muted);
}