/* Heimat- und Schützenverein Bevern – Neuauftritt 2026
   Farben aus dem Wappen: Tannengrün, Gelb (nur als Akzent), Oliv. */

@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(/theme/fonts/BarlowCondensed-500.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:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/theme/fonts/BarlowCondensed-600.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:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/theme/fonts/BarlowCondensed-700.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 Sans 3';font-style:italic;font-weight:400;font-display:swap;src:url(/theme/fonts/SourceSans3-400i.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 Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/theme/fonts/SourceSans3-400.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 Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/theme/fonts/SourceSans3-600.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 Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url(/theme/fonts/SourceSans3-700.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}

:root {
    --gruen-950: #00281d;
    --gruen-900: #003a2b;
    --gruen: #01553e;
    --gruen-600: #0b6b4f;
    --gruen-200: #c9dcd3;
    --gruen-100: #e7efeb;
    --gruen-50: #f4f8f6;
    --gelb: #ffed00;
    --oliv: #bbc172;
    --text: #1b2420;
    --text-leise: #56635d;
    --linie: #d8e2dd;
    --weiss: #fff;

    --schrift: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    --titel: 'Barlow Condensed', 'Arial Narrow', sans-serif;

    --breite: 1180px;
    --rand: clamp(16px, 4vw, 40px);
    --radius: 10px;
    --schatten: 0 1px 2px rgb(0 40 29 / .06), 0 8px 24px rgb(0 40 29 / .08);
    --schatten-hoch: 0 2px 4px rgb(0 40 29 / .08), 0 16px 40px rgb(0 40 29 / .14);
    --abstand: clamp(28px, 3.2vw, 44px); /* einheitlicher Abstand zwischen Inhaltselementen */
    --dauer: 220ms;
    --kurve: cubic-bezier(.2, .7, .2, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
    margin: 0;
    background: var(--weiss);
    color: var(--text);
    font: 400 1.0625rem/1.65 var(--schrift);
    text-rendering: optimizeLegibility;
}

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

a { color: var(--gruen); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--gruen-600); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 {
    font-family: var(--titel);
    font-weight: 700;
    line-height: 1.1;
    color: var(--gruen-900);
    margin: 1.6em 0 .5em;
    letter-spacing: .005em;
    text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); margin-top: .4em; }
h2 { font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.4rem); }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
strong, b { font-weight: 700; }

.skip {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--gelb); color: var(--gruen-950); padding: 10px 16px; border-radius: 6px; font-weight: 700;
}
.skip:focus { top: 12px; }

.invisible, .sr-only {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Kopf ---------- */

.kopf {
    position: sticky; top: 0; z-index: 50;
    background: rgb(255 255 255 / .96);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--linie);
    transition: box-shadow var(--dauer) var(--kurve);
}
.kopf.ist-gescrollt { box-shadow: 0 6px 24px rgb(0 40 29 / .10); }
/* Menüband mit Feld-Hintergrund (gepflügter Acker mit Eichen und Backsteinhof, Entscheidung Dieter 10.10.2026),
   sehr blass, nach links zum Wappen hin ausgeblendet. Nur ab 1024 px. */
.kopf { isolation: isolate; }
@media (min-width: 1024px) {
    .kopf::before {
        content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
        background: url(/theme/feld-acker.webp) center 70% / cover no-repeat; opacity: .2;
        -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 20%, #000 72%);
        mask-image: linear-gradient(to right, transparent 0, transparent 20%, #000 72%);
    }
    /* Menüpunkte und Name bleiben vor dem Feld gut lesbar */
    .kopf :is(.hauptnavigation .level_1 > li > a, .hauptnavigation .level_1 > li > strong, .marke__text) {
        text-shadow: 0 0 2px #fff, 0 0 8px #fff, 0 0 14px #fff;
    }
}

.kopf__innen {
    max-width: var(--breite); margin: 0 auto; padding: 10px var(--rand);
    display: flex; align-items: center; gap: 24px;
}

.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--gruen-900); margin-right: auto; }
.marke:hover { color: var(--gruen-900); }
.marke__wappen { width: 46px; height: auto; transition: transform var(--dauer) var(--kurve); }
.marke:hover .marke__wappen { transform: rotate(-4deg) scale(1.04); }
.marke__text { display: flex; flex-direction: column; line-height: 1; font-family: var(--titel); }
.marke__ort { font-size: 1.75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.marke__name { font-size: .98rem; font-weight: 600; color: var(--text-leise); margin-top: 3px; }

/* Navigation (Contao nav_default) */
.hauptnavigation ul { list-style: none; margin: 0; padding: 0; }
.hauptnavigation .level_1 { display: flex; align-items: center; gap: 2px; }
.hauptnavigation .level_1 > li { position: relative; }
.hauptnavigation a, .hauptnavigation strong.active, .hauptnavigation span.active {
    display: block; padding: 10px 14px; border-radius: 8px;
    font-family: var(--titel); font-weight: 600; font-size: 1.12rem; letter-spacing: .02em;
    color: var(--gruen-900); text-decoration: none;
    transition: background var(--dauer), color var(--dauer);
}
.hauptnavigation a:hover { background: var(--gruen-100); color: var(--gruen); }
.hauptnavigation .active, .hauptnavigation .trail > a {
    color: var(--gruen);
    background: linear-gradient(var(--gelb), var(--gelb)) no-repeat 14px calc(100% - 6px) / calc(100% - 28px) 3px;
}
.hauptnavigation .level_2 {
    position: absolute; left: 0; top: 100%; min-width: 230px; padding: 8px;
    background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten-hoch);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity var(--dauer), transform var(--dauer), visibility 0s linear var(--dauer);
}
.hauptnavigation .level_1 > li:hover > .level_2,
.hauptnavigation .level_1 > li:focus-within > .level_2 {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.hauptnavigation .level_2 a, .hauptnavigation .level_2 .active { font-size: 1.05rem; padding: 8px 12px; background: none; }
.hauptnavigation .level_2 a:hover { background: var(--gruen-100); }
.hauptnavigation .level_2 .active { color: var(--gruen); background: var(--gruen-50); }
/* Gleitende Pille in Haupt- und Untermenü (hus.js setzt Lage und Größe): folgt der Maus zügig und weich */
@media (min-width: 1024px) and (hover: hover) {
    .hauptnavigation .level_1.mit-pille { position: relative; }
    /* eigene Startwerte je Liste: sonst erbt die Pille des Untermenüs die Lage aus dem Hauptmenü und erscheint versetzt */
    .hauptnavigation .mit-pille { --pille-x: 0px; --pille-y: 0px; --pille-b: 0px; --pille-h: 0px; --pille-o: 0; }
    .hauptnavigation .mit-pille::before {
        content: ""; position: absolute; left: 0; top: 0; width: var(--pille-b, 0); height: var(--pille-h, 0);
        transform: translate(var(--pille-x, 0), var(--pille-y, 0)); border-radius: 8px; background: var(--gruen-100);
        opacity: var(--pille-o, 0); pointer-events: none;
        transition: transform 230ms cubic-bezier(.25, .8, .3, 1), width 230ms cubic-bezier(.25, .8, .3, 1),
            height 230ms cubic-bezier(.25, .8, .3, 1), opacity 160ms;
    }
    .hauptnavigation .mit-pille.ohne-uebergang::before { transition: none; }
    .hauptnavigation .mit-pille > li { z-index: 1; }
    .hauptnavigation .level_2.mit-pille > li { position: relative; }
    .hauptnavigation .mit-pille a:hover { background-color: transparent; }
    .hauptnavigation .level_2.mit-pille a:hover { background: none; }
}

.menue-knopf { display: none; }

@media (max-width: 1023px) {
    .marke__wappen { width: 40px; }
    .marke__ort { font-size: 1.5rem; }
    .menue-knopf {
        display: inline-flex; align-items: center; gap: 10px;
        background: var(--gruen); color: var(--weiss); border: 0; border-radius: 8px;
        padding: 10px 14px; font: 600 1.05rem var(--titel); letter-spacing: .03em; cursor: pointer;
    }
    .menue-knopf__striche, .menue-knopf__striche::before, .menue-knopf__striche::after {
        display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
        transition: transform var(--dauer) var(--kurve), opacity var(--dauer);
    }
    .menue-knopf__striche { position: relative; }
    .menue-knopf__striche::before, .menue-knopf__striche::after { content: ''; position: absolute; left: 0; }
    .menue-knopf__striche::before { top: -6px; }
    .menue-knopf__striche::after { top: 6px; }
    .menue-knopf[aria-expanded="true"] .menue-knopf__striche { background: transparent; }
    .menue-knopf[aria-expanded="true"] .menue-knopf__striche::before { transform: translateY(6px) rotate(45deg); }
    .menue-knopf[aria-expanded="true"] .menue-knopf__striche::after { transform: translateY(-6px) rotate(-45deg); }

    /* Ohne JavaScript bleibt die Navigation einfach sichtbar */
    .kopf__innen { flex-wrap: wrap; }
    .hauptnavigation { flex-basis: 100%; }
    /* Mobiles Menü klappt weich auf und legt sich über den Inhalt (Kopf ist fest positioniert, nichts wird verschoben) */
    .js .hauptnavigation {
        display: block; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
        transition: max-height 420ms var(--kurve), opacity 260ms, visibility 0s linear 420ms;
    }
    .js .kopf.menue-offen .hauptnavigation {
        max-height: calc(100vh - 116px); max-height: calc(100dvh - 116px); overflow-y: auto; opacity: 1; visibility: visible; padding-bottom: 12px;
        transition: max-height 420ms var(--kurve), opacity 200ms; transition-delay: 0s;
    }
    .js .hauptnavigation .level_1 > li, .js .hauptnavigation .kopf-suche {
        opacity: 0; transform: translateY(-8px); transition: opacity 260ms, transform 320ms var(--kurve);
    }
    .js .kopf.menue-offen .hauptnavigation .level_1 > li, .js .kopf.menue-offen .hauptnavigation .kopf-suche { opacity: 1; transform: none; }
    .js .kopf.menue-offen .level_1 > li:nth-child(1) { transition-delay: 60ms; }
    .js .kopf.menue-offen .level_1 > li:nth-child(2) { transition-delay: 100ms; }
    .js .kopf.menue-offen .level_1 > li:nth-child(3) { transition-delay: 140ms; }
    .js .kopf.menue-offen .level_1 > li:nth-child(4) { transition-delay: 180ms; }
    .js .kopf.menue-offen .level_1 > li:nth-child(5) { transition-delay: 220ms; }
    .js .kopf.menue-offen .hauptnavigation .kopf-suche { transition-delay: 260ms; }
    .js .kopf.menue-offen { box-shadow: 0 18px 40px rgb(0 40 29 / .18); }
    .hauptnavigation .level_1 { flex-direction: column; align-items: stretch; gap: 0; }
    .hauptnavigation .level_1 > li { border-top: 1px solid var(--linie); }
    .hauptnavigation a, .hauptnavigation strong.active, .hauptnavigation span.active { font-size: 1.25rem; padding: 12px 6px; }
    .hauptnavigation .active, .hauptnavigation .trail > a { background: none; }
    .hauptnavigation .level_2 {
        position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none;
        padding: 0 0 8px 14px; min-width: 0;
    }
}

/* ---------- Inhalt ---------- */

.inhalt { min-height: 50vh; position: relative; }
.inhalt > .mod_article { position: relative; z-index: 1; }
/* Detailansicht einer Nachricht bzw. eines Termins auf der Listenseite: nur der Leser bleibt */
.inhalt.ist-detail > .mod_article > :is(.content-headline, .abschnitt-leise, .ansicht-leiste, .mod_calendar) { display: none; }
.inhalt.ist-detail > .mod_article > :is(.mod_newsreader, .mod_eventreader) { margin-top: clamp(24px, 4vw, 48px); }

/* ---------- Strichzeichnung im Hintergrund ----------
   Aus theme/zeichnungen/ (hus.js lädt nach dem ersten Scrollen nach). Liegt unter dem Fold, zeichnet sich als Linienpfade,
   sobald sie ein Stück sichtbar ist; danach blendet das feine Endbild (<motiv>-fein.webp) weich darüber, damit alle
   Details exakt erhalten sind. Bleibt beim Weiterscrollen stehen (sticky), bis der Inhalt endet. Bei reduzierter
   Bewegung sofort das Endbild. Ränder laufen weich aus (Maske), keine harten Bildkanten. */
.zeichnung {
    --zw: clamp(260px, 26vw, 420px);
    /* Normal knapp unter dem ersten Bildschirm; auf kurzen Seiten so hoch, dass die ganze Zeichnung hineinpasst */
    position: absolute; top: min(78vh, max(0px, 100% - var(--zw) * 1.42 - 24px)); bottom: 0; left: 0; right: 0;
    z-index: 0; pointer-events: none; overflow: clip;
}
.zeichnung.ist-zu-kurz { display: none; }
.zeichnung__rahmen {
    position: sticky; top: 112px; width: var(--zw);
    margin-left: auto; margin-right: max(8px, calc((100vw - var(--breite)) / 2 - var(--zw) / 2));
    opacity: .16;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 78%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 78%, transparent);
    mask-composite: intersect;
}
.zeichnung__bild {
    display: block; width: 100%; height: auto; transition: opacity 1.4s;
    fill: none; stroke: var(--gruen); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
}
.zeichnung__bild path { vector-effect: non-scaling-stroke; }
.zeichnung__fein { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s; }
.zeichnung.ist-fertig .zeichnung__fein { opacity: 1; }
.zeichnung.ist-fertig .zeichnung__bild { opacity: 0; }
/* Querformat-Motive (Kirche, Vogelstange) etwas breiter */
.zeichnung--kirche, .zeichnung--vogelstange { --zw: clamp(320px, 34vw, 600px); }
/* Kutsche: breites Panorama, darf groß sein */
.zeichnung--kutsche { --zw: clamp(560px, 66vw, 1240px); }
@media (prefers-reduced-motion: no-preference) {
    .js .zeichnung path { stroke-dasharray: 1; stroke-dashoffset: 1; }
    .js .zeichnung:not(.ist-gezeichnet) .zeichnung__rahmen { visibility: hidden; }
    .js .zeichnung.ist-gezeichnet path {
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 1.2s cubic-bezier(.5, 0, .3, 1) calc(var(--n) * 2.8s / var(--teile));
    }
}
@media (max-width: 1023px) { .zeichnung { display: none; } }
.inhalt > .mod_article { padding-bottom: clamp(32px, 6vw, 72px); }
.inhalt > .mod_article > * {
    max-width: var(--breite); margin-left: auto; margin-right: auto;
    padding-left: var(--rand); padding-right: var(--rand);
    margin-bottom: var(--abstand);
}
.inhalt > .mod_article > *:last-child { margin-bottom: 0; }
.inhalt > .mod_article > *:first-child:not(.buehne) { margin-top: clamp(24px, 4vw, 48px); }

.content-text, .content-table, .content-gallery, .content-download, .content-downloads, .content-image, .content-player { margin-bottom: 1.6em; }

/* Text mit Bild: nicht mehr gequetscht */
.media { display: flow-root; }
.media > figure { margin: 0 0 1em; }
.media > figure img { border-radius: var(--radius); }
@media (min-width: 760px) {
    .media--left > figure { float: left; width: min(42%, 420px); margin: .3em 2rem 1rem 0; }
    .media--right > figure { float: right; width: min(42%, 420px); margin: .3em 0 1rem 2rem; }
}
figure figcaption, .caption { font-size: .92rem; color: var(--text-leise); margin-top: .5em; }

/* Seitentitel */
.inhalt h1:first-child { margin-top: 0; }

/* Bühne (Startseite): Textelement mit Bild und CSS-Klasse "buehne" */
.inhalt > .mod_article > .buehne {
    max-width: none; padding: 0; margin: 0 0 clamp(36px, 6vw, 72px);
    position: relative; isolation: isolate; color: var(--weiss);
    min-height: clamp(420px, 72vh, 720px);
    display: flex; flex-direction: column; justify-content: flex-end;
}
.buehne > figure { position: absolute; inset: 0; z-index: -2; margin: 0; }
.buehne > figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; border-radius: 0; }
.buehne::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgb(0 40 29 / .10) 0%, rgb(0 40 29 / .25) 40%, rgb(0 40 29 / .88) 100%),
        linear-gradient(90deg, rgb(0 40 29 / .55) 0%, rgb(0 40 29 / 0) 70%);
}
.buehne > .rte, .buehne > h1, .buehne > h2 {
    width: 100%; max-width: var(--breite); margin-left: auto; margin-right: auto;
    padding-left: var(--rand); padding-right: var(--rand);
}
.buehne > h1, .buehne > h2 {
    color: var(--weiss); font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem); line-height: .98; margin-top: 0; margin-bottom: .3em;
    text-shadow: 0 2px 24px rgb(0 0 0 / .25);
}
.buehne > .rte { padding-bottom: clamp(40px, 7vw, 88px); font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); }
.buehne > .rte p { max-width: 56ch; margin-bottom: 1.2em; text-shadow: 0 1px 12px rgb(0 0 0 / .3); }
.buehne a { color: var(--weiss); }

/* Knöpfe: Links in einem Absatz mit Klasse "knopf" oder Bühnenlinks */
.knopf, .buehne .rte a, .mehr-link a {
    display: inline-flex; align-items: center; gap: .5em;
    background: var(--gelb); color: var(--gruen-950); text-decoration: none;
    font: 700 1.15rem/1 var(--titel); letter-spacing: .03em;
    padding: 14px 22px; border-radius: 8px; margin: 0 10px 10px 0;
    transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer), background var(--dauer);
}
.buehne .rte a + a { background: rgb(255 255 255 / .14); color: var(--weiss); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .7); }
.knopf:hover, .buehne .rte a:hover, .mehr-link a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 0 0 / .18); color: var(--gruen-950); }
.buehne .rte a + a:hover { background: rgb(255 255 255 / .24); color: var(--weiss); }
.mehr-link { text-align: center; }
.mehr-link p { max-width: none; }
.mehr-link a { background: var(--gruen); color: var(--weiss); }
.mehr-link a:hover { color: var(--weiss); background: var(--gruen-600); }

/* Abschnitte der Startseite: Überschrift-Element mit Klasse "abschnitt" */
.inhalt > .mod_article > .abschnitt { margin-top: clamp(40px, 7vw, 88px); margin-bottom: 20px; }
.abschnitt h2, h2.abschnitt { margin: 0; }
.abschnitt::after { content: ''; display: block; width: 56px; height: 4px; background: var(--gelb); margin-top: 12px; border-radius: 2px; }
.abschnitt-leise { color: var(--text-leise); }

/* ---------- Nachrichten-Karten ---------- */

.mod_newslist.karten {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(18px, 2.4vw, 28px);
}
.mod_newslist.karten .pagination, .mod_newslist.karten h2, .mod_newslist.karten .empty { grid-column: 1 / -1; }

.karte {
    position: relative; display: flex; flex-direction: column;
    background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--schatten);
    transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
}
.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.karte__bild { aspect-ratio: 16 / 10; overflow: hidden; background: var(--gruen-100); }
.karte__bild figure, .karte__bild .image_container { margin: 0; height: 100%; }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--kurve); }
.karte:hover .karte__bild img { transform: scale(1.05); }
.karte__bild figcaption { display: none; }
.karte__platzhalter { height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--gruen-100), var(--gruen-200)); }
.karte__platzhalter img { width: 64px; height: auto; opacity: .55; object-fit: contain; }
.karte__text { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.karte__datum { font-size: .9rem; font-weight: 600; color: var(--gruen-600); letter-spacing: .02em; margin-bottom: .35em; }
.karte__titel { margin: 0 0 .45em; font-size: 1.45rem; }
.karte__titel a { color: var(--gruen-900); text-decoration: none; }
.karte__titel a::after { content: ''; position: absolute; inset: 0; } /* ganze Karte klickbar */
.karte__anreisser { color: var(--text-leise); font-size: 1rem; line-height: 1.55; margin-bottom: .8em; }
.karte__mehr { margin: auto 0 0; font: 700 1.05rem var(--titel); color: var(--gruen); letter-spacing: .03em; }
.karte__mehr::after { content: ' →'; transition: margin var(--dauer); }
.karte:hover .karte__mehr::after { margin-left: 4px; }

/* Blätterfunktion */
.pagination { margin-top: 24px; }
.pagination ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pagination li a, .pagination li strong, .pagination li span {
    display: block; min-width: 44px; padding: 10px 12px; text-align: center; border-radius: 8px;
    border: 1px solid var(--linie); text-decoration: none; font-weight: 600;
}
.pagination li strong, .pagination .active { background: var(--gruen); color: var(--weiss); border-color: var(--gruen); }
.pagination p { text-align: center; color: var(--text-leise); font-size: .95rem; }

/* ---------- Termine ---------- */

.mod_eventlist.termine { display: grid; gap: 12px; }
.mod_eventlist.termine > .header { display: none; }
.termin {
    position: relative; display: flex; gap: 18px; align-items: center;
    background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
    padding: 12px 18px 12px 12px; box-shadow: var(--schatten);
    transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer), border-color var(--dauer);
}
.termin:hover { transform: translateX(4px); box-shadow: var(--schatten-hoch); border-color: var(--gruen-200); }
.termin__blatt {
    flex: 0 0 72px; display: flex; flex-direction: column; align-items: center; line-height: 1;
    background: var(--gruen); color: var(--weiss); border-radius: 8px; padding: 10px 0 8px;
    border-top: 6px solid var(--gelb);
}
.termin__tag { font: 700 2rem var(--titel); }
.termin__monat { font: 600 1rem var(--titel); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.termin__jahr { font: 600 .95rem var(--titel); letter-spacing: .04em; opacity: .9; margin-top: 3px; }
.termin__titel { margin: 0 0 .2em; font-size: 1.35rem; }
.termin__titel a { color: var(--gruen-900); text-decoration: none; }
.termin__titel a::after { content: ''; position: absolute; inset: 0; }
.termin__info { margin: 0; color: var(--text-leise); font-size: .98rem; }
.termin__ort::before { content: ' · '; }
.mod_eventlist.termine .empty { padding: 20px; background: var(--gruen-50); border-radius: var(--radius); color: var(--text-leise); }

/* Zwei Spalten auf der Startseite: Termine + Hinweis */
.zweispaltig { display: grid; gap: clamp(20px, 3vw, 36px); }
@media (min-width: 900px) { .zweispaltig { grid-template-columns: 1.4fr 1fr; align-items: start; } }

/* Infokasten (Textelement mit Klasse "kasten") */
.kasten {
    position: relative; overflow: hidden;
    background: var(--gruen); color: var(--weiss); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px);
    background-image: radial-gradient(circle at 100% 0%, rgb(255 237 0 / .16), transparent 45%);
}
.kasten h2, .kasten h3 { color: var(--weiss); margin-top: 0; }
.kasten a { color: var(--gelb); }
.kasten ul { padding-left: 1.1em; margin: 0 0 1em; }
.kasten li { margin-bottom: .35em; }
/* aktuelle Seite in der Gruppenliste: kein Link, kräftig und mit gelbem Balken markiert */
.kasten li.ist-aktiv { list-style: none; position: relative; font-weight: 700; color: var(--weiss); }
.kasten li.ist-aktiv span::before { content: ""; position: absolute; left: -15px; top: .2em; width: 4px; height: 1.15em; border-radius: 2px; background: var(--gelb); }

/* ---------- Kacheln (Hyperlink-Element, Vorlage hus_kachel, in Elementgruppe mit Klasse "kacheln") ---------- */

.kacheln { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.kacheln > .content-hyperlink { margin: 0; }
.kachel {
    position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; isolation: isolate;
    background: var(--gruen); text-decoration: none; box-shadow: var(--schatten);
    transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer);
}
.kachel picture, .kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 700ms var(--kurve); }
.kachel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 40 29 / 0) 35%, rgb(0 40 29 / .85) 100%); transition: background var(--dauer); }
.kachel__titel {
    position: absolute; left: 18px; right: 18px; bottom: 16px;
    font: 700 1.7rem/1.05 var(--titel); color: var(--weiss); letter-spacing: .01em;
}
.kachel__titel::after { content: ''; display: block; width: 36px; height: 3px; background: var(--gelb); margin-top: 8px; border-radius: 2px; transition: width var(--dauer) var(--kurve); }
.kachel:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.kachel:hover img { transform: scale(1.06); }
.kachel:hover .kachel__titel::after { width: 64px; }

/* ---------- Tabellen ---------- */

.content-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-table table, .layout_full table, .rte table {
    width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem;
    border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; background: var(--weiss);
}
.content-table caption { text-align: left; font: 700 1.3rem var(--titel); color: var(--gruen-900); padding: 0 0 10px; }
th, td { padding: 11px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
thead th, thead td { background: var(--gruen); color: var(--weiss); font: 600 1.08rem var(--titel); letter-spacing: .03em; border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--gruen-50); }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr { transition: background var(--dauer); }
tbody tr:hover { background: var(--gruen-100); }
tbody th { font-weight: 600; color: var(--gruen-900); }
/* Tabellen im Fließtext (alter Editor): feste Breiten und Höhen aus den style-Attributen aufheben */
.rte table { width: 100% !important; height: auto !important; margin: 0 0 1.2em; }
.rte :is(tr, td, th) { width: auto !important; height: auto !important; }
.rte :is(td, th) p { margin: 0; max-width: none; }
.rte :is(td, th) p + p { margin-top: .2em; }
.rte table:last-child { margin-bottom: 0; }

/* ---------- Galerien ---------- */

/* Galerie als Masonry: Bilder im Originalformat, Spalten von oben nach unten (Hoch- und Querformate gemischt) */
.content-gallery ul { list-style: none; margin: 0; padding: 0; columns: 160px 4; column-gap: 10px; }
.content-gallery li { margin: 0 0 10px; break-inside: avoid; }
.content-gallery figure { margin: 0; }
.content-gallery a { display: block; border-radius: 8px; overflow: hidden; background: var(--gruen-100); }
.content-gallery img { width: 100%; height: auto; transition: transform 500ms var(--kurve), filter var(--dauer); }
.content-gallery a:hover img { transform: scale(1.06); filter: saturate(1.1); }
.content-gallery figcaption { display: none; }

/* Leuchtkasten (Lightbox) */
.leuchtkasten { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.leuchtkasten::backdrop { background: rgb(0 20 14 / .92); }
.leuchtkasten__bild { width: 100%; height: 100%; display: grid; place-items: center; padding: 56px 64px; }
.leuchtkasten__bild img { max-width: 100%; max-height: calc(100vh - 112px); width: auto; height: auto; border-radius: 6px; box-shadow: 0 20px 60px rgb(0 0 0 / .5); }
.leuchtkasten button {
    position: fixed; z-index: 2; border: 0; cursor: pointer; color: var(--weiss);
    background: rgb(255 255 255 / .12); width: 48px; height: 48px; border-radius: 50%; font-size: 1.6rem; line-height: 1;
    display: grid; place-items: center; transition: background var(--dauer);
}
.leuchtkasten button:hover { background: rgb(255 255 255 / .26); }
.leuchtkasten__zu { top: 14px; right: 14px; }
.leuchtkasten__zurueck { left: 12px; top: 50%; transform: translateY(-50%); }
.leuchtkasten__vor { right: 12px; top: 50%; transform: translateY(-50%); }
.leuchtkasten__zaehler { position: fixed; bottom: 16px; left: 0; right: 0; text-align: center; color: rgb(255 255 255 / .8); font-size: .95rem; }

/* ---------- Downloads ---------- */

.content-download, .content-downloads ul, .enclosure { list-style: none; padding: 0; }
.content-download a, .content-downloads a, .enclosure a {
    display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 8px;
    background: var(--gruen-50); border: 1px solid var(--linie); text-decoration: none; font-weight: 600;
    transition: background var(--dauer), border-color var(--dauer);
}
.content-download a::before, .content-downloads a::before, .enclosure a::before {
    content: ''; width: 18px; height: 18px; flex: 0 0 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-5-5m5 5 5-5M4 19h16'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-5-5m5 5 5-5M4 19h16'/%3E%3C/svg%3E") center / contain no-repeat;
}
.content-download a:hover, .content-downloads a:hover, .enclosure a:hover { background: var(--gruen-100); border-color: var(--gruen-200); }
.size { color: var(--text-leise); font-weight: 400; font-size: .9em; }

/* ---------- Detailseiten Nachricht / Termin ---------- */

.mod_newsreader, .mod_eventreader { max-width: 980px !important; }
.layout_full .info, .event .info, .mod_eventreader .time {
    display: inline-block; background: var(--gruen-100); color: var(--gruen-900); font-weight: 600;
    padding: 4px 12px; border-radius: 999px; font-size: .95rem; margin-bottom: 1.4em;
}
.layout_full > h1 { margin-bottom: .35em; }
.layout_full figure img, .mod_eventreader figure img { border-radius: var(--radius); }

.teilen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2.4em 0 1em; padding-top: 1.4em; border-top: 1px solid var(--linie); }
.teilen__titel { font: 700 1.15rem var(--titel); color: var(--gruen-900); margin: 0 6px 0 0; }
.teilen a {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px;
    border: 1px solid var(--linie); text-decoration: none; font-weight: 600; color: var(--gruen-900);
}
.teilen a:hover { background: var(--gruen-50); border-color: var(--gruen-200); }
.teilen svg { width: 18px; height: 18px; }
.zurueck { margin-top: 1.4em; }
.zurueck a { font-weight: 600; text-decoration: none; }
.zurueck a::before { content: '← '; }

/* ---------- Fuß ---------- */

.fuss { background: var(--gruen-950); color: rgb(255 255 255 / .82); margin-top: clamp(40px, 8vw, 96px); font-size: 1rem; }
.fuss a { color: var(--weiss); text-decoration: none; }
.fuss a:hover { color: var(--gelb); text-decoration: underline; }
.fuss__innen {
    max-width: var(--breite); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--rand) 32px;
    display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.fuss__verein { display: flex; flex-direction: column; align-items: flex-start; }
.fuss__wappen { width: 64px; margin-bottom: 14px; }
.fuss__name { font: 700 1.35rem/1.15 var(--titel); color: var(--weiss); margin-bottom: .3em; }
.fuss__seit { font-size: .95rem; opacity: .7; }
.fuss h2, .fuss h3, .fuss .fuss__titel {
    font: 700 1.15rem var(--titel); color: var(--gelb); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .9em;
}
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: .5em; }
.fuss p { margin: 0 0 .6em; }
.fuss .mod_html, .fuss .content-text { margin: 0; }
.fuss__leiste {
    max-width: var(--breite); margin: 0 auto; padding: 18px var(--rand) 26px;
    border-top: 1px solid rgb(255 255 255 / .12);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .92rem; opacity: .75;
}
.fuss__leiste p { margin: 0; }
.fuss__macher { margin-left: auto !important; text-align: right; }

/* ---------- Einblenden beim Scrollen ----------
   Nur mit JavaScript und ohne Bewegungsreduktion. Ohne JS ist alles sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
    .js .einblenden { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--kurve), transform 700ms var(--kurve); }
    .js .einblenden.ist-sichtbar { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* Druck */
@media print {
    .kopf, .fuss, .teilen, .menue-knopf, .zeichnung { display: none !important; }
    .buehne { min-height: 0 !important; color: var(--text) !important; }
}

/* Galerie mit nur einem Bild: groß zeigen */
.content-gallery ul:has(> li:only-child) { columns: auto; max-width: 720px; }

/* Detailseiten: Zwischenüberschriften kleiner als der Titel */
.layout_full > h2, .layout_full .content-headline h2, .layout_full h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem); }
.layout_full > h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* Wappen als zarte Grafik im grünen Kasten */
.kasten::after {
    content: ''; position: absolute; right: clamp(12px, 14%, 120px); bottom: -22px; width: 170px; height: 211px; pointer-events: none;
    background: url(wappen.png) no-repeat center / contain; opacity: .1; filter: grayscale(1) brightness(2.4);
}
.kasten > * { position: relative; z-index: 1; }

/* Schießgruppen-Seiten: Terminliste links, Kasten mit den anderen Gruppen rechts */
@media (min-width: 900px) {
    .inhalt > .mod_article:has(> .mod_eventlist.termine ~ .kasten) {
        display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 44px);
        align-items: start; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand);
    }
    .inhalt > .mod_article:has(> .mod_eventlist.termine ~ .kasten) > * {
        grid-column: 1 / -1; max-width: none; padding-inline: 0; margin-inline: 0;
    }
    .inhalt > .mod_article:has(> .mod_eventlist.termine ~ .kasten) > .mod_eventlist.termine { grid-column: 1; grid-row: 2; margin-top: 0; }
    .inhalt > .mod_article:has(> .mod_eventlist.termine ~ .kasten) > .kasten { grid-column: 2; grid-row: 2; margin-top: 0; position: sticky; top: 100px; }
}
.inhalt > .mod_article:has(> .mod_eventlist.termine ~ .kasten) > .kasten { padding: clamp(22px, 3vw, 34px); }

/* Überschrift am Anfang eines Elements: der Elementabstand reicht, kein zusätzlicher Rand oben */
.inhalt > .mod_article > * > :is(h1, h2, h3, h4):first-child,
.inhalt > .mod_article > * > caption + * { margin-top: 0; }
.kasten p { margin-bottom: .55em; }

/* Bilder in Nachrichtenkarten: Hochformat (Flyer, Plakate) ganz zeigen, Hintergrund aus dem Bild weichgezeichnet */
.karte__bild { position: relative; }
.karte__bild.ist-hochkant::before {
    content: ''; position: absolute; inset: -20px; background: var(--bild) center / cover no-repeat;
    filter: blur(18px) saturate(1.1) brightness(.85); transform: scale(1.1);
}
.karte__bild.ist-hochkant img { position: relative; object-fit: contain; }
.karte:hover .karte__bild.ist-hochkant img { transform: scale(1.02); }

/* Kopf: großes Wappen oben, beim Scrollen schrumpft die Leiste */
@media (min-width: 1024px) {
    .kopf__innen { padding-top: 16px; padding-bottom: 16px; transition: padding var(--dauer) var(--kurve); }
    .marke__wappen { width: 76px; transition: width var(--dauer) var(--kurve), transform var(--dauer) var(--kurve); }
    .marke__ort { font-size: 2.2rem; transition: font-size var(--dauer) var(--kurve); }
    .marke__name { font-size: 1.1rem; transition: font-size var(--dauer) var(--kurve); }
    .kopf.ist-gescrollt .kopf__innen { padding-top: 8px; padding-bottom: 8px; }
    .kopf.ist-gescrollt .marke__wappen { width: 46px; }
    .kopf.ist-gescrollt .marke__ort { font-size: 1.7rem; }
    .kopf.ist-gescrollt .marke__name { font-size: .95rem; }
}
@media (max-width: 1023px) {
    .marke__wappen { width: 52px; transition: width var(--dauer) var(--kurve); }
    .kopf.ist-gescrollt .marke__wappen { width: 40px; }
}

/* Suche im Kopf */
.hauptnavigation { display: flex; align-items: center; gap: 10px; }
.kopf-suche { position: relative; display: flex; align-items: center; }
.kopf-suche input {
    width: 130px; height: 42px; padding: 0 40px 0 14px; border: 1px solid var(--linie); border-radius: 999px;
    background: var(--gruen-50); font: inherit; font-size: 1rem; color: var(--text);
    transition: width var(--dauer) var(--kurve), border-color var(--dauer), background var(--dauer);
}
.kopf-suche input:focus { width: 220px; outline: none; border-color: var(--gruen); background: var(--weiss); }
.kopf-suche button {
    position: absolute; right: 4px; top: 4px; width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: transparent; color: var(--gruen); cursor: pointer; display: grid; place-items: center;
}
.kopf-suche button:hover { background: var(--gruen-100); }
@media (max-width: 1023px) {
    .hauptnavigation { flex-direction: column; align-items: stretch; }
    .kopf-suche { margin-top: 12px; }
    .kopf-suche input, .kopf-suche input:focus { width: 100%; height: 48px; }
    .kopf-suche button { top: 7px; }
}

/* Suchergebnisse */
.mod_search form { margin-bottom: 1.5em; }
.mod_search .formbody { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.mod_search .widget-text { flex: 1 1 260px; margin: 0; }
.mod_search .widget-submit { margin: 0; }
.mod_search .widget-text input { width: 100%; }
.mod_search input[type="search"], .mod_search input[type="text"] {
    flex: 1 1 260px; height: 48px; padding: 0 16px; border: 1px solid var(--linie); border-radius: 8px; font: inherit;
}
.mod_search button, .mod_search .submit {
    height: 48px; padding: 0 22px; border: 0; border-radius: 8px; background: var(--gruen); color: var(--weiss);
    font: 700 1.1rem var(--titel); letter-spacing: .03em; cursor: pointer;
}
.mod_search .header { color: var(--text-leise); margin-bottom: 1em; }
.mod_search h3 { margin: 1.4em 0 .2em; font-size: 1.35rem; }
.mod_search h3 a { text-decoration: none; }
.mod_search .context { color: var(--text-leise); }
.mod_search mark, .mod_search .highlight { background: rgb(255 237 0 / .45); color: inherit; padding: 0 2px; border-radius: 2px; }
.mod_search .url { font-size: .9rem; color: var(--gruen-600); }

/* Veranstaltungskalender: vergangene Termine leiser, Termine anderer Vereine heller */
.termin.bygone { opacity: .55; }
.termine--jahr .termin:not(.cal_1) .termin__blatt { background: var(--gruen-100); color: var(--gruen-900); border-top-color: var(--gruen-200); }
.termine--jahr .termin.cal_1 { border-color: var(--gruen-200); background: linear-gradient(90deg, var(--gruen-50), var(--weiss) 40%); }

/* Umschalter Liste / Kalender */
.ansicht-umschalter { display: none; gap: 6px; background: var(--gruen-50); border: 1px solid var(--linie); border-radius: 999px; padding: 4px; width: max-content; }
.js .ansicht-umschalter { display: inline-flex; }
.ansicht-umschalter button {
    display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; cursor: pointer;
    padding: 9px 16px; border-radius: 999px; font: 600 1.08rem var(--titel); letter-spacing: .03em; color: var(--gruen-900);
    transition: background var(--dauer), color var(--dauer);
}
.ansicht-umschalter button svg { width: 20px; height: 20px; }
.ansicht-umschalter button:hover { background: var(--gruen-100); }
.ansicht-umschalter button[aria-pressed="true"] { background: var(--gruen); color: var(--weiss); }
.inhalt > .mod_article > .ansicht-leiste { margin-bottom: 20px; }
[hidden] { display: none !important; }

/* Monatskalender */
.mod_calendar { overflow-x: auto; }
.calendar { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; background: var(--weiss); }
.calendar thead tr:first-child th { background: var(--gruen); color: var(--weiss); padding: 14px 12px; font: 700 1.5rem var(--titel); }
.calendar thead .head.previous { text-align: left; }
.calendar thead .head.next { text-align: right; }
.calendar thead .head.current { text-align: center; }
.calendar thead .head a {
    color: var(--weiss); text-decoration: none; font: 600 1.05rem var(--titel); letter-spacing: .03em;
    display: inline-block; padding: 6px 12px; border-radius: 8px; background: rgb(255 255 255 / .12);
}
.calendar thead .head a:hover { background: rgb(255 255 255 / .24); }
.calendar th.label { background: var(--gruen-100); color: var(--gruen-900); font: 600 1rem var(--titel); text-align: center; padding: 8px 4px; letter-spacing: .05em; }
.calendar td { height: 104px; vertical-align: top; padding: 6px; border-bottom: 1px solid var(--linie); border-right: 1px solid var(--linie); }
.calendar td:last-child { border-right: 0; }
.calendar tbody tr:last-child td { border-bottom: 0; }
.calendar tbody tr:nth-child(even), .calendar tbody tr:hover { background: none; }
.calendar td .header { font: 600 1.05rem var(--titel); color: var(--text-leise); margin-bottom: 4px; }
.calendar td.today .header { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gelb); color: var(--gruen-950); }
.calendar td.empty { background: var(--gruen-50); }
.calendar td.weekend { background: rgb(244 248 246 / .6); }
.calendar .event { margin-bottom: 3px; }
.calendar .event a {
    display: block; font-size: .82rem; line-height: 1.25; padding: 3px 6px; border-radius: 5px; text-decoration: none;
    background: var(--gruen-100); color: var(--gruen-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calendar .event.cal_1 a { background: var(--gruen); color: var(--weiss); }
.calendar .event a:hover { filter: brightness(1.08); text-decoration: underline; }
@media (max-width: 700px) {
    .calendar td { height: 64px; padding: 4px 2px; }
    .calendar thead tr:first-child th { font-size: 1.15rem; padding: 10px 6px; }
    .calendar thead .head a { font-size: 0; padding: 8px 12px; }
    .calendar thead .head.previous a::before { content: "\2039"; font-size: 1.4rem; }
    .calendar thead .head.next a::before { content: "\203A"; font-size: 1.4rem; }
    .calendar .event { display: inline-block; margin: 0 1px; }
    .calendar .event a { width: 9px; height: 9px; padding: 0; border-radius: 50%; font-size: 0; }
}

/* Fuß: Wappen größer */
.fuss__wappen { width: 110px; }

/* Kopf mit JavaScript fest positionieren, Platzhalter konstant (kein Springen beim Schrumpfen) */
.js .kopf { position: fixed; left: 0; right: 0; top: 0; }
.js body { padding-top: var(--kopf-hoehe, 127px); }
@media (max-width: 1023px) { .js body { padding-top: var(--kopf-hoehe, 85px); } }

/* Bühne als Diashow (Bilder aus Galerie "buehne-bilder") */
.buehne-bilder { display: none !important; }
.buehne > figure, .buehne > .buehne__folie { position: absolute; inset: 0; z-index: -2; margin: 0; }
.buehne__folie picture, .buehne__folie img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.js .buehne > figure { opacity: 0; transition: opacity 1.6s ease; }
.js .buehne > figure.ist-aktiv, .js .buehne > figure:only-of-type { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    .js .buehne > figure.ist-aktiv img { animation: buehne-zoom 9s ease-out both; }
}
@keyframes buehne-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Bühne: Bild füllt die ganze Fläche (picture als Block), Abdunklung reicht bis unten */
.buehne > figure picture { display: block; width: 100%; height: 100%; }
.buehne > figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.buehne::before { inset: -1px; }
.buehne { overflow: hidden; }

/* Fuß: Spalten auf dem Desktop nach Inhalt gewichten (Kontakt braucht Platz für den Vereinsnamen) */
@media (min-width: 1024px) {
    .fuss__innen { grid-template-columns: 1.15fr .85fr 1.6fr .85fr; }
}

/* Scrollbalken: nur der Schieber in Vereinsgrün, Spur bleibt Browser-Standard */
html { scrollbar-color: var(--gruen) auto; }

/* Vergangene Termine im Veranstaltungskalender: standardmäßig ausgeblendet (Schalter in der Ansicht-Leiste) */
.ohne-vergangene .termin.bygone { display: none; }
.ansicht-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.schalter-vergangene { display: none; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; color: var(--gruen-900); user-select: none; }
.js .schalter-vergangene { display: inline-flex; }
.js [data-ansicht="kalender"] > .schalter-vergangene { display: none; }
.schalter-vergangene input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter-vergangene__spur { width: 44px; height: 26px; border-radius: 999px; background: var(--gruen-200); position: relative; transition: background var(--dauer); flex: 0 0 auto; }
.schalter-vergangene__spur::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--weiss); box-shadow: 0 1px 3px rgb(0 0 0 / .2); transition: transform var(--dauer) var(--kurve); }
.schalter-vergangene input:checked + .schalter-vergangene__spur { background: var(--gruen); }
.schalter-vergangene input:checked + .schalter-vergangene__spur::after { transform: translateX(18px); }
.schalter-vergangene input:focus-visible + .schalter-vergangene__spur { outline: 3px solid var(--gelb); outline-offset: 2px; }

/* Etwas Farbe im Hintergrund: sehr zarte Verläufe in Wappenfarben (Grün oben rechts, Oliv links) */
body {
    background:
        radial-gradient(1100px 620px at 105% -5%, rgb(1 85 62 / .07), transparent 62%),
        radial-gradient(900px 700px at -10% 38%, rgb(187 193 114 / .13), transparent 60%),
        radial-gradient(1000px 700px at 110% 78%, rgb(1 85 62 / .06), transparent 60%),
        var(--weiss);
    background-attachment: fixed;
}

/* Fuß: dezenter Verlauf von Tannengrün nach Dunkelgrün, leichter Goldschimmer oben links,
   darüber eine feine Filzstruktur wie beim Uniformstoff (SVG-Rauschen: helle und dunkle Fasern, kachelbar) */
.fuss {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.38'/%3E%3C/filter%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)' opacity='.5'/%3E%3Crect width='100%25' height='100%25' filter='url(%23h)' opacity='.16'/%3E%3C/svg%3E") 0 0 / 280px 280px,
        radial-gradient(700px 320px at 0% 0%, rgb(255 237 0 / .07), transparent 70%),
        linear-gradient(160deg, var(--gruen-900) 0%, var(--gruen-950) 55%, #001a13 100%);
}

/* Bühne: Steuerung mit Fortschrittsbalken je Bild */
.buehne__steuerung {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(16px, 2.6vw, 28px);
    max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand);
    display: flex; gap: 10px;
}
.buehne__balken {
    flex: 0 0 clamp(36px, 6vw, 64px); height: 22px; padding: 9px 0; border: 0; background: none; cursor: pointer;
}
.buehne__balken span { display: block; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .35); overflow: hidden; position: relative; transition: background var(--dauer); }
.buehne__balken:hover span { background: rgb(255 255 255 / .6); }
.buehne__balken span::after {
    content: ''; position: absolute; inset: 0; background: var(--gelb); transform: scaleX(0); transform-origin: left center;
}
.buehne__balken.ist-aktiv span::after { animation: folie-fortschritt var(--folie-dauer, 7s) linear forwards; }
.buehne__balken:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; border-radius: 4px; }
@keyframes folie-fortschritt { to { transform: scaleX(1); } }

/* Königsdiagramm (Historie) */
.koenigsdiagramm {
    background: var(--weiss); border: 1px solid var(--linie); border-radius: calc(var(--radius) * 1.4);
    padding: clamp(20px, 3vw, 36px); box-shadow: var(--schatten);
    display: grid; gap: 18px 36px; grid-template-columns: 1fr;
}
.koenigsdiagramm[hidden] { display: none; }
.koenigsdiagramm__kopf h2 { margin: 0 0 .3em; }
.koenigsdiagramm__hinweis { color: var(--text-leise); margin: 0; font-size: .98rem; }
.koenigsdiagramm__reiter { display: flex; flex-wrap: wrap; gap: 6px; }
.koenigsdiagramm__reiter button {
    border: 1px solid var(--linie); background: var(--gruen-50); color: var(--gruen-900); cursor: pointer;
    padding: 8px 16px; border-radius: 999px; font: 600 1.05rem var(--titel); letter-spacing: .03em;
    transition: background var(--dauer), color var(--dauer), border-color var(--dauer);
}
.koenigsdiagramm__reiter button:hover { background: var(--gruen-100); }
.koenigsdiagramm__reiter button[aria-pressed="true"] { background: var(--gruen); border-color: var(--gruen); color: var(--weiss); }
.koenigsdiagramm__inhalt { display: grid; gap: 28px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 760px) { .koenigsdiagramm__inhalt { grid-template-columns: minmax(220px, 300px) 1fr; } }
.koenigsdiagramm__ring { position: relative; max-width: 300px; margin: 0 auto; width: 100%; }
.koenigsdiagramm__ring svg { width: 100%; height: auto; display: block; }
.koenigsdiagramm__mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; pointer-events: none; }
.koenigsdiagramm__teil { cursor: default; transition: stroke-dasharray 1.1s var(--kurve), stroke-width 200ms var(--kurve), opacity 200ms; }
.koenigsdiagramm__teil.ist-hervor { stroke-width: 32; }
/* beim Hervorheben treten die übrigen Segmente zurück */
.koenigsdiagramm__inhalt:has(.ist-hervor) .koenigsdiagramm__teil:not(.ist-hervor) { opacity: .35; }
.koenigsdiagramm__legende li { border-radius: 8px; transition: background var(--dauer); }
.koenigsdiagramm__legende li.ist-hervor { background: var(--gruen-50); box-shadow: 0 0 0 7px var(--gruen-50); }
.koenigsdiagramm__tipp {
    position: absolute; z-index: 2; pointer-events: none; white-space: nowrap;
    transform: translate(-50%, calc(-100% - 14px));
    background: var(--gruen-950); color: var(--weiss); font-size: .95rem; line-height: 1.3;
    padding: 7px 11px; border-radius: 8px; box-shadow: 0 6px 18px rgb(0 40 29 / .25);
}
.koenigsdiagramm__tipp strong { color: var(--gelb); font-family: var(--titel); font-size: 1.05rem; letter-spacing: .02em; }
.koenigsdiagramm__tipp[hidden] { display: none; }
.koenigsdiagramm__mitte strong { font: 700 3.2rem var(--titel); color: var(--gruen-900); }
.koenigsdiagramm__mitte span { font-size: .95rem; color: var(--text-leise); }
.koenigsdiagramm__vorn { font-size: 1.15rem; margin-bottom: .8em; }
.koenigsdiagramm__legende { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 12px; }
.koenigsdiagramm__legende li { display: grid; grid-template-columns: 14px 90px 1fr; gap: 4px 12px; align-items: center; }
.koenigsdiagramm__farbe { width: 14px; height: 14px; border-radius: 4px; }
.koenigsdiagramm__zug { font: 700 1.2rem var(--titel); color: var(--gruen-900); }
.koenigsdiagramm__wert { color: var(--text-leise); font-size: .98rem; }
.koenigsdiagramm__wert strong { color: var(--text); }
.koenigsdiagramm__balken { grid-column: 2 / -1; height: 6px; background: var(--gruen-50); border-radius: 3px; overflow: hidden; }
.koenigsdiagramm__balken span { display: block; height: 100%; border-radius: 3px; transition: width 1.1s var(--kurve); }
.koenigsdiagramm__letzter { color: var(--text-leise); margin: 0 0 .3em; }
.koenigsdiagramm__frage { font: 700 1.3rem var(--titel); color: var(--gruen); margin: 0; }