/* ==========================================================================
   Gönnervereinigung Nachwuchs Erlenacker – Site-Stylesheet
   Mobile-first, keine Frameworks. Aufbau:
     1. Fonts   2. Tokens   3. Basis   4. Layout   5. Header/Navigation
     6. Hero    7. Komponenten   8. Formulare   9. Dialoge/Carousel   10. Footer
   Breakpoints: 40rem (Tablet klein), 48rem (Tablet), 60rem (Desktop), 75rem (Navigation als Leiste)
   ========================================================================== */

/* 1. Fonts (Fjalla One, selbst gehostet) ---------------------------------- */
@font-face {
    font-family: "Fjalla One";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/fjalla-one-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: "Fjalla One";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/fjalla-one-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;
}

/* 2. Tokens ---------------------------------------------------------------- */
:root {
    /* Farben: bisheriges Schema (Bordeaux + Grau), aufgehellt */
    --c-accent: #851515;
    --c-accent-dark: #641010;
    --c-accent-tint: #f7ecec;
    --c-text: #333;
    --c-text-soft: #5b5b5b;
    --c-bg: #fff;
    --c-bg-soft: #f7f6f4;
    --c-surface: #eeece9;
    --c-border: #dcd9d4;
    --c-error: #b00020;
    --c-focus: #1a5fb4;

    /* Schrift: Arial für Fliesstext, Fjalla One für Überschriften und UI */
    --font-body: Arial, Helvetica, sans-serif;
    --font-head: "Fjalla One", Impact, "Arial Narrow", sans-serif;

    /* Schriftgrössen: eine Skala, fliessend zwischen Handy und Desktop */
    --fs-sm: 0.875rem;
    --fs-base: 1.0625rem;
    --fs-md: 1.1875rem;
    --fs-lg: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
    --fs-xl: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
    --fs-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);

    /* Abstände */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2.5rem;
    --sp-7: 4rem;

    --radius: 0.75rem;
    --shadow: 0 2px 10px rgb(0 0 0 / 0.08);
    --shadow-lg: 0 8px 30px rgb(0 0 0 / 0.2);
    --touch: 2.75rem; /* Mindestgrösse für Touch-Ziele */
    --gutter: 1rem;
}

/* 3. Basis ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 4.5rem;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    color: var(--c-text);
    font: var(--fs-base) / 1.6 var(--font-body);
    overflow-wrap: break-word;
}

main { flex: 1 0 auto; }

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

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-3);
    color: var(--c-accent);
    font-family: var(--font-head);
    font-weight: 400;
    line-height: 1.2;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5, h6 { font-size: var(--fs-base); }

p { margin: 0 0 var(--sp-4); }

a {
    color: var(--c-accent);
    text-underline-offset: 0.18em;
}

a:hover { color: var(--c-accent-dark); text-decoration-thickness: 0.12em; }

:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
}

[hidden] { display: none !important; }

address { font-style: normal; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: var(--sp-3);
    top: -4rem;
    z-index: 200;
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-accent);
    color: #fff;
    border-radius: 0 0 var(--radius) var(--radius);
}

.skip-link:focus { top: 0; color: #fff; }

svg.icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    flex: none;
}

.text-center { text-align: center; }
.text-right { text-align: right; }

/* Redaktionsinhalt (Rich-Text-Editor) */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin-top: var(--sp-5); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 var(--sp-4); }
.prose li { margin-bottom: var(--sp-1); }
.prose img { max-width: 100%; height: auto; margin: var(--sp-3) auto; border-radius: var(--radius); }
.prose iframe { max-width: 100%; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.prose th, .prose td { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); text-align: left; }
.prose blockquote { margin: var(--sp-4) 0; padding: var(--sp-2) var(--sp-4); border-left: 4px solid var(--c-accent); background: var(--c-bg-soft); }

/* 4. Layout ----------------------------------------------------------------- */
.container {
    width: min(100% - 2 * var(--gutter), 72rem);
    margin-inline: auto;
}

.main-content { padding-block: var(--sp-6) var(--sp-7); }

.content-panel {
    max-width: 52rem;
    margin-inline: auto;
}

.stack > * + * { margin-top: var(--sp-5); }
.spacer { height: var(--sp-5); }

.section-title { text-align: center; margin-block: var(--sp-6) var(--sp-4); }

/* 5. Header und Navigation -------------------------------------------------- */
.header-band {
    position: relative;
    height: clamp(8rem, 22vw, 14rem);
    overflow: hidden;
    background: var(--c-surface);
}

.header-band > picture {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease-in-out;
}

.header-band > picture.is-active { opacity: 1; }

.header-band > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* leichter Weissschleier: heller Eindruck, Bild bleibt erkennbar */
.header-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.4));
    pointer-events: none;
}

.brand {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    max-width: min(88%, 32rem);
    padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--gutter);
    background: rgb(255 255 255 / 0.93);
    border-radius: 0 999px 999px 0;
    box-shadow: var(--shadow);
    color: var(--c-text-soft);
    text-decoration: none;
}

.brand img { height: clamp(2.75rem, 9vw, 5rem); width: auto; max-width: 100%; }

.brand__tagline {
    display: block;
    margin-top: var(--sp-1);
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    line-height: 1.3;
}

.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--c-bg);
    border-bottom: 3px solid var(--c-accent);
    box-shadow: var(--shadow);
}

.site-nav__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    min-height: 3.5rem;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch);
    height: var(--touch);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--c-accent);
    cursor: pointer;
}

.icon-btn:hover { background: var(--c-accent-tint); color: var(--c-accent-dark); }

.nav-toggle { margin-left: auto; }

.nav-logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    padding: 0 var(--sp-2);
    border-radius: var(--radius);
}

.nav-logo:hover { background: var(--c-accent-tint); }
.nav-logo img { height: 2.5rem; width: auto; max-width: none; }

.site-menu {
    display: none;
    flex: 0 0 100%;
    margin: 0;
    padding: 0 0 var(--sp-3);
    list-style: none;
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
}

.site-nav.is-open .site-menu { display: block; }

.site-menu a {
    display: block;
    padding: var(--sp-3) var(--sp-2);
    font-family: var(--font-head);
    font-size: var(--fs-md);
    color: var(--c-text);
    text-decoration: none;
}

.site-menu a:hover, .site-menu a[aria-current="page"] { color: var(--c-accent); }

.site-menu__row { display: flex; align-items: center; }
.site-menu__row > a { flex: 1; }

.submenu-toggle {
    flex: none;
    width: var(--touch);
    height: var(--touch);
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: var(--c-text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.submenu-toggle .icon { width: 1.1rem; height: 1.1rem; transition: transform 0.2s; }
.has-children.is-open > .site-menu__row .submenu-toggle .icon { transform: rotate(180deg); }

.submenu {
    display: none;
    margin: 0;
    padding: 0 0 var(--sp-2) var(--sp-4);
    list-style: none;
    border-left: 2px solid var(--c-accent-tint);
}

.has-children.is-open > .submenu { display: block; }
.submenu a { font-family: var(--font-body); font-size: var(--fs-base); padding-block: var(--sp-2); }

@media (min-width: 75rem) {
    .site-nav__bar { width: min(100% - 2 * var(--gutter), 84rem); }
    .nav-toggle { display: none; }

    .site-menu {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        gap: 0 var(--sp-1);
        padding: 0;
        max-height: none;
        overflow: visible;
    }

    .site-menu > li { position: relative; }
    .site-menu a { padding: var(--sp-4) 0.65rem; }
    .site-menu > li > .site-menu__row > a { position: relative; }

    .site-menu > li > .site-menu__row > a::after {
        content: "";
        position: absolute;
        left: 0.65rem;
        right: 0.65rem;
        bottom: 0.6rem;
        height: 2px;
        background: var(--c-accent);
        transform: scaleX(0);
        transition: transform 0.2s;
    }

    .site-menu > li:hover > .site-menu__row > a::after,
    .site-menu > li:focus-within > .site-menu__row > a::after { transform: scaleX(1); }

    .submenu-toggle { margin-left: calc(-1 * var(--sp-2)); width: 2rem; }

    .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 60;
        min-width: 15rem;
        padding: var(--sp-1) 0;
        background: var(--c-bg);
        border: 1px solid var(--c-border);
        border-top: 3px solid var(--c-accent);
        border-radius: 0 0 var(--radius) var(--radius);
        box-shadow: var(--shadow-lg);
    }

    .submenu a { padding: var(--sp-2) var(--sp-4); }
    .submenu a:hover { background: var(--c-accent-tint); }

    .has-children:focus-within > .submenu { display: block; }
}

@media (min-width: 75rem) and (hover: hover) {
    .has-children:hover > .submenu { display: block; }
}

/* 6. Hero (Seitentitel + Abstract) ------------------------------------------- */
.hero {
    position: relative;
    background: var(--c-bg-soft);
    border-bottom: 1px solid var(--c-border);
}

.hero__media { height: clamp(9rem, 26vw, 20rem); overflow: hidden; }

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: var(--hero-opacity, 1);
    filter: grayscale(var(--hero-gray, 0));
}

.hero__text {
    width: min(100% - 2 * var(--gutter), 52rem);
    margin-inline: auto;
    padding-block: var(--sp-5);
    text-align: center;
}

.hero__title { margin: 0; font-size: var(--fs-2xl); }
.hero__lead { margin-top: var(--sp-2); color: var(--c-text-soft); font-size: var(--fs-md); }
.hero__lead:empty { display: none; }

@media (min-width: 48rem) {
    .hero--image .hero__text {
        position: absolute;
        left: 50%;
        bottom: var(--sp-5);
        transform: translateX(-50%);
        width: min(100% - 2 * var(--gutter), 46rem);
        padding: var(--sp-4) var(--sp-5);
        background: rgb(255 255 255 / 0.93);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }
}

/* 7. Komponenten ------------------------------------------------------------- */
.btn,
button[type="submit"],
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch);
    padding: var(--sp-2) var(--sp-5);
    border: 0;
    border-radius: var(--radius);
    background: var(--c-accent);
    color: #fff;
    font: inherit;
    font-family: var(--font-head);
    font-size: var(--fs-md);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover { background: var(--c-accent-dark); color: #fff; }

.card {
    padding: var(--sp-4);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.card--soft { background: var(--c-bg-soft); }

/* Kachel-Raster (Navigation, Suche, Teaser) */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    text-decoration: none;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.tile:hover { border-color: var(--c-accent); box-shadow: var(--shadow); color: var(--c-text); }

.tile__media { aspect-ratio: 16 / 10; background: var(--c-surface); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }

.tile__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.tile__title { margin: 0 0 var(--sp-1); font-size: var(--fs-lg); }

.tile__text {
    margin: 0;
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.home-intro { text-align: center; max-width: 46rem; margin-inline: auto; }
/* Gönner-Karte der Startseite */
.donor-card {
    max-width: 40rem;
    margin-inline: auto;
    padding: var(--sp-5) var(--sp-4);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-top: 4px solid var(--c-accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
}

.donor-card__title { margin: 0 0 var(--sp-5); font-size: var(--fs-lg); line-height: 1.35; }
.donor-card__total { font-size: 1.5em; line-height: 1; }

.donor-card__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.donor-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-3);
    background: var(--c-accent-tint);
    border-radius: var(--radius);
}

.donor-stat__badge {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--sp-1);
    border-radius: 50%;
    background: var(--c-accent);
    color: #fff;
}

.donor-stat__badge svg.icon { width: 1.6rem; height: 1.6rem; }

.donor-stat__number {
    font-family: var(--font-head);
    font-size: var(--fs-2xl);
    font-weight: 400;
    line-height: 1.1;
    color: var(--c-accent);
}

.donor-stat__label { color: var(--c-text-soft); }

.donor-card__thanks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin: var(--sp-5) 0 0;
    font-family: var(--font-head);
    font-size: var(--fs-lg);
    color: var(--c-accent);
}

.donor-card__thanks svg.icon { width: 1.25rem; height: 1.25rem; }

@media (min-width: 40rem) {
    .donor-card { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
}

/* Kalenderblatt (aus HtmlHelperExtensions.CalendarSheet/UnknownDate) */
time.icon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 5.5rem;
    overflow: hidden;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 0.6rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
    color: var(--c-text);
    font-family: var(--font-head);
    line-height: 1.25;
    text-align: center;
}

time.icon em {
    display: block;
    width: 100%;
    padding: 0.15rem var(--sp-2);
    background: var(--c-accent);
    color: #fff;
    font-size: var(--fs-sm);
    font-style: normal;
}

time.icon .day { font-size: 2rem; padding-top: 0.1rem; }
time.icon .month { font-size: var(--fs-sm); color: var(--c-text-soft); }
time.icon .month:last-child { padding-bottom: 0.25rem; }

/* Veranstaltungen */
.event-header { display: flex; align-items: center; gap: var(--sp-4); font-family: var(--font-head); font-size: var(--fs-lg); }
.event-list { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }

.event-card {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-4);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    text-decoration: none;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.event-card:hover { border-color: var(--c-accent); box-shadow: var(--shadow); color: var(--c-text); }
.event-card__title { margin: 0 0 var(--sp-1); font-size: var(--fs-lg); }
.event-card p { margin: 0; color: var(--c-text-soft); }

/* Blog / Neuigkeiten */
.post-list { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }

.post-card {
    display: grid;
    gap: var(--sp-3) var(--sp-5);
    padding: var(--sp-4);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    text-decoration: none;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.post-card:hover { border-color: var(--c-accent); box-shadow: var(--shadow); color: var(--c-text); }
.post-card__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 0.5rem; background: var(--c-surface); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__date { display: block; color: var(--c-text-soft); font-size: var(--fs-sm); }
.post-card__title { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.post-card__more { color: var(--c-accent); font-family: var(--font-head); }

@media (min-width: 40rem) {
    .post-card--media { grid-template-columns: 13rem 1fr; align-items: start; }
}

/* Startseite: nächste Veranstaltungen / News */
.latest { display: grid; gap: var(--sp-4); }

.latest__col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.latest__title { margin: 0; text-align: center; font-size: var(--fs-lg); }
.latest__list { display: grid; gap: var(--sp-3); flex: 1; align-content: start; }
.latest__more { align-self: center; font-family: var(--font-head); }

.latest-item {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    color: var(--c-text);
    text-decoration: none;
    background: var(--c-surface);
    transition: box-shadow 0.2s;
}

.latest-item:hover { box-shadow: var(--shadow); color: var(--c-text); }
.latest-item--event { background: var(--c-accent-tint); }
.latest-item h3 { margin: var(--sp-1) 0; font-size: var(--fs-md); }
.latest-item p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-soft); }
.latest-item__date { font-size: var(--fs-sm); color: var(--c-text-soft); }
.latest-item__event { display: flex; align-items: center; gap: var(--sp-3); }
.latest-item__loc { font-family: var(--font-head); }

@media (min-width: 60rem) {
    .latest { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

/* Dokumente und Akkordeon */
.accordion { margin-bottom: var(--sp-3); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); }

.accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    min-height: var(--touch);
    font-family: var(--font-head);
    font-size: var(--fs-md);
    color: var(--c-accent);
    cursor: pointer;
    list-style: none;
}

.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::after { content: "+"; font-size: 1.5rem; line-height: 1; }
.accordion[open] > summary::after { content: "\2212"; }
.accordion > summary h4 { margin: 0; font-size: inherit; }
.accordion__body { padding: 0 var(--sp-4) var(--sp-4); }

.doc-list { margin: 0; padding: 0; list-style: none; }

.doc-list a {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    min-height: var(--touch);
    color: var(--c-text);
    text-decoration: none;
    border-bottom: 1px solid var(--c-border);
}

.doc-list a:hover { color: var(--c-accent); }
.doc-list .icon { color: var(--c-accent); }

/* Gönnerseite */
.sponsor-premium {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    max-width: 28rem;
    margin-inline: auto;
    padding: var(--sp-5);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    text-align: center;
    text-decoration: none;
}

a.sponsor-premium:hover { border-color: var(--c-accent); box-shadow: var(--shadow); color: var(--c-text); }
.sponsor-premium img { max-height: 10rem; width: auto; }

.sponsor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: var(--sp-4);
    margin: 0 0 var(--sp-5);
    padding: 0;
    list-style: none;
}

.sponsor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 100%;
    min-height: 11rem;
    padding: var(--sp-4);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    text-align: center;
    text-decoration: none;
}

a.sponsor-card:hover { border-color: var(--c-accent); box-shadow: var(--shadow); color: var(--c-text); }
.sponsor-card__logo { display: flex; align-items: center; justify-content: center; height: 6rem; width: 100%; }
.sponsor-card__logo img { max-height: 6rem; width: auto; max-width: 100%; object-fit: contain; }
.sponsor-card small { color: var(--c-text-soft); }

.sponsor-names {
    columns: 14rem;
    column-gap: var(--sp-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sponsor-names li { break-inside: avoid; padding: 0.15rem 0; }

/* Vorstand */
.member-list { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }

.member-card {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    font-family: var(--font-head);
    font-size: var(--fs-md);
}

.member-card__photo { flex: none; width: 6.5rem; height: 6.5rem; border-radius: 50%; overflow: hidden; background: var(--c-surface); }
.member-card__photo img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 40rem) {
    .member-card { gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); }
    .member-card__photo { width: 9rem; height: 9rem; }
}

/* Suche */
.search-result { display: flex; gap: var(--sp-4); align-items: center; }
.search-result__logo { flex: none; width: 8rem; }
.search-result a { color: inherit; text-decoration: none; }

/* Zitat, Flyer, Call-to-Action, Video */
.quote { margin: 0; text-align: center; font-size: var(--fs-md); }
.quote small { display: block; margin-top: var(--sp-2); color: var(--c-text-soft); }

.flyer { display: grid; gap: var(--sp-4); align-items: center; }
.flyer img { border-radius: var(--radius); }

@media (min-width: 40rem) {
    .flyer { grid-template-columns: minmax(0, 18rem) 1fr; }
}

.cta { padding: var(--sp-5); background: var(--c-accent-tint); border-left: 4px solid var(--c-accent); border-radius: var(--radius); }
.cta h4 { margin-top: 0; }

.video-embed iframe, .video-embed video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
video.video { width: 100%; }

/* 8. Formulare -------------------------------------------------------------- */
.form-group { margin-bottom: var(--sp-4); }

.form-group > label,
.form-label {
    display: block;
    margin-bottom: var(--sp-1);
    font-weight: bold;
}

.form-control {
    display: block;
    width: 100%;
    min-height: var(--touch);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid #a9a6a1;
    border-radius: 0.5rem;
    background: var(--c-bg);
    color: var(--c-text);
    font: inherit;
}

textarea.form-control { min-height: 8rem; resize: vertical; }
input[type="file"].form-control { padding: var(--sp-2); }
.form-control:focus-visible { border-color: var(--c-focus); }
.form-control:user-invalid { border-color: var(--c-error); }

.form-row { display: grid; gap: var(--sp-3); }
.form-row--street { grid-template-columns: 2fr 1fr; }
.form-row--city { grid-template-columns: 1fr 2fr; }

.form-actions { text-align: right; }

.form-errors { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--c-error); background: #fdeceb; color: var(--c-error); }
.form-errors:empty, .form-errors.validation-summary-valid { display: none; }
.form-errors ul { margin: 0; padding-left: 1.2em; }
.field-validation-error { color: var(--c-error); font-size: var(--fs-sm); }

/* reCAPTCHA-Kontrollkästchen (304 px breit; auf schmalen Handys leicht verkleinert) */
.captcha { min-height: 4.875rem; }
.captcha-error { margin: var(--sp-2) 0 0; color: var(--c-error); font-size: var(--fs-sm); }

@media (max-width: 23.5rem) {
    .captcha .g-recaptcha { transform: scale(0.85); transform-origin: 0 0; }
    .captcha { min-height: 4.25rem; }
}

/* Honigtopf gegen Spam-Bots: für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 9. Dialoge, Carousel, Cookie-Hinweis -------------------------------------- */
.dialog {
    width: min(100% - 2rem, 34rem);
    max-height: calc(100dvh - 2rem);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--c-bg);
    color: var(--c-text);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
}

.dialog::backdrop { background: rgb(30 20 20 / 0.55); }

/* Nicht modal geöffnet, damit die Bild-Aufgabe von reCAPTCHA (hängt am body) bedienbar bleibt; der Hintergrund ist ein Schatten */
.dialog--floating[open] {
    position: fixed;
    inset: 0;
    margin: auto;
    height: fit-content;
    z-index: 500;
    box-shadow: var(--shadow-lg), 0 0 0 100vmax rgb(30 20 20 / 0.55);
}

@media (max-width: 23.5rem) {
    .dialog--floating .dialog__inner { padding-inline: var(--sp-3); }
}
.dialog__inner { position: relative; padding: var(--sp-5); }
.dialog__inner > :first-child { margin-top: 0; }
.dialog__close { position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 2; }
.dialog__title { padding-right: var(--touch); }

.dialog--lightbox { width: min(100% - 1rem, 80rem); background: transparent; box-shadow: none; overflow: visible; }
.dialog--lightbox .dialog__inner { padding: 0; display: flex; justify-content: center; }
.dialog--lightbox img { max-height: 88dvh; width: auto; max-width: 100%; border-radius: 0.5rem; background: #fff; }

.dialog--lightbox .icon-btn,
.carousel__btn {
    background: rgb(255 255 255 / 0.92);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow);
}

.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox-nav--prev { left: var(--sp-2); }
.lightbox-nav--next { right: var(--sp-2); }

.carousel { position: relative; margin-block: var(--sp-4); }

.carousel__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--radius);
    background: var(--c-surface);
}

.carousel__track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .carousel__track { scroll-behavior: smooth; }
}

.carousel__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.carousel__slide img { width: 100%; max-height: 70dvh; object-fit: contain; }
.carousel--cover .carousel__slide img { object-fit: cover; }
.carousel__slide a { display: block; cursor: zoom-in; }

.carousel__caption { padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--c-bg); text-align: center; }
.carousel__caption h3 { margin-bottom: var(--sp-1); font-size: var(--fs-md); }

.carousel__btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch);
    height: var(--touch);
    padding: 0;
    margin: 0;
    transform: translateY(-50%);
    border-radius: 50%;
    color: var(--c-accent);
    cursor: pointer;
}

.carousel__btn:hover { background: #fff; color: var(--c-accent-dark); }
.carousel__btn--prev { left: var(--sp-2); }
.carousel__btn--next { right: var(--sp-2); }

.carousel__dots { display: flex; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) 0 0; }

.carousel__dots button {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c-border);
    cursor: pointer;
}

.carousel__dots button[aria-current="true"] { background: var(--c-accent); }

.cookie-banner {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3) var(--sp-5);
    padding: var(--sp-4) var(--gutter);
    background: var(--c-bg);
    border-top: 3px solid var(--c-accent);
    box-shadow: 0 -4px 20px rgb(0 0 0 / 0.12);
    font-size: var(--fs-sm);
}

.cookie-banner p { margin: 0; max-width: 48rem; }

/* 10. Footer ---------------------------------------------------------------- */
.site-footer {
    flex: none;
    background: var(--c-bg-soft);
    border-top: 3px solid var(--c-accent);
    color: var(--c-text);
}

.footer-grid {
    display: grid;
    gap: var(--sp-5);
    padding-block: var(--sp-6);
    text-align: center;
}

.footer-title { margin: 0 0 var(--sp-2); font-family: var(--font-head); font-size: var(--fs-md); color: var(--c-accent); }
.footer-sponsor a { display: inline-block; color: var(--c-text); text-decoration: none; }
.footer-sponsor img { max-height: 5rem; width: auto; margin: 0 auto var(--sp-2); padding: var(--sp-2); background: #fff; border: 1px solid var(--c-border); border-radius: 0.5rem; }
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links a { display: inline-block; padding: var(--sp-1) 0; color: var(--c-text); text-decoration: none; }
.footer-links a:hover { color: var(--c-accent); text-decoration: underline; }

.footer-share { display: inline-flex; align-items: center; gap: var(--sp-2); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-5);
    padding-block: var(--sp-4);
    border-top: 1px solid var(--c-border);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
}

.footer-bottom a { color: inherit; }

@media (min-width: 48rem) {
    .footer-grid { grid-template-columns: repeat(3, 1fr); text-align: left; align-items: start; }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* <picture> in Rahmen mit fester Höhe: Höhe an das Bild weiterreichen */
.tile__media picture,
.post-card__media picture,
.member-card__photo picture,
.hero__media picture { width: 100%; height: 100%; }