/* =========================================================================
   Base layer
   Structure, spacing and behaviour shared by every design variant.
   Colours, typography and layout accents come from the theme file that is
   loaded after this one. Themes talk to this layer through the custom
   properties declared in :root below.
   ========================================================================= */

:root {
    /* Colour contract -- every theme redefines these. */
    --c-bg: #ffffff;
    --c-surface: #ffffff;
    --c-surface-alt: #f4f4f5;
    --c-text: #1c1c1e;
    --c-muted: #5c5c66;
    --c-accent: #8c3a2b;
    /* Accent used as text on light ground. Themes whose accent is too
       light for body text redefine this to a darker shade. */
    --c-accent-text: var(--c-accent);
    --c-accent-ink: #ffffff;
    --c-accent-soft: #f3e6e2;
    --c-border: #dcdce0;
    --c-header-bg: #ffffff;
    --c-header-ink: #1c1c1e;
    --c-footer-bg: #1c1c1e;
    --c-footer-ink: #e8e8ea;

    /* Typography contract. */
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-head: var(--font-body);
    --head-weight: 700;
    --head-spacing: -0.01em;
    --head-transform: none;
    --body-size: 1.0625rem;
    --line: 1.65;

    /* Shape contract. */
    --radius: 6px;
    --radius-lg: 12px;
    --shadow: none;
    --border-width: 1px;

    /* Rhythm. */
    --wrap: 1140px;
    /* Der Kopfbereich darf breiter sein als der Textkoerper, damit
       Vereinsname, Navigation und Spenden-Knopf nebeneinander passen. */
    --wrap-header: 1240px;
    --wrap-narrow: 44rem;
    --gutter: 1.25rem;
    --section-y: 4rem;
}

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

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-body);
    font-size: var(--body-size);
    line-height: var(--line);
    -webkit-font-smoothing: antialiased;
    /* Deutsche Komposita wie "Klassenmusizieren" sind breiter als eine
       schmale Spalte auf einem kleinen Geraet. Ohne diese Zeile schiebt
       ein einzelnes Wort die ganze Seite waagrecht auf. Greift nur dann,
       wenn das Wort sonst ueberlaufen wuerde. */
    overflow-wrap: break-word;
}

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

h1, h2, h3 {
    font-family: var(--font-head);
    font-weight: var(--head-weight);
    letter-spacing: var(--head-spacing);
    line-height: 1.2;
    margin: 0 0 0.6em;
    text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.visually-hidden {
    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: -9999px;
    top: 0;
    z-index: 100;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    padding: 0.75rem 1.25rem;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

.wrap {
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
}

/* --- Buttons ----------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: 0.7em 1.4em;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.btn--accent {
    background: var(--c-accent);
    color: var(--c-accent-ink);
}

.btn--accent:hover {
    filter: brightness(1.08);
}

.btn--ghost {
    background: transparent;
    color: var(--c-accent-text);
    border-color: currentColor;
}

.btn--ghost:hover {
    background: var(--c-accent-soft);
}

.btn--lg {
    padding: 0.85em 1.8em;
    font-size: 1.05rem;
}

.link-arrow {
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--c-accent);
    padding-bottom: 2px;
}

.link-arrow::after {
    content: " \2192";
}

/* --- Header and navigation --------------------------------------------- */

.site-header {
    background: var(--c-header-bg);
    color: var(--c-header-ink);
    position: relative;
    z-index: 20;
}

.site-header__inner {
    /* Ueberschreibt die Breite aus .wrap: die Kopfleiste braucht mehr
       Platz als die Lesespalte, sonst passen Vereinsname, Navigation und
       Spenden-Knopf nicht nebeneinander. */
    width: min(100% - 2 * var(--gutter), var(--wrap-header));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.5rem;
    padding-block: 0.75rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: inherit;
    text-decoration: none;
    /* Nicht schrumpfen: sonst wird der Vereinsname schmaler als sein
       Text und laeuft in die Navigation. Der Platz wird stattdessen
       ueber --wrap-header und den Umschaltpunkt zum Mobilmenue geregelt. */
    flex: 0 0 auto;
}

.brand__mark {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: var(--radius);
    background: var(--c-accent);
    color: var(--c-accent-ink);
}

.brand__mark svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

.brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand__name {
    font-family: var(--font-head);
    font-weight: var(--head-weight);
    font-size: 1.15rem;
    letter-spacing: var(--head-spacing);
}

.brand__sub {
    font-size: 0.78rem;
    color: var(--c-muted);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Auf Handybreite weicht das Wort "Menü", nicht der Vereinsname. Der
   Knopf behaelt seinen zugaenglichen Namen, das Label wird nur optisch
   ausgeblendet. */
@media (max-width: 27rem) {
    :root { --gutter: 1rem; }

    .brand__name { font-size: 1.02rem; }

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

/* Unter dieser Breite reicht der Platz neben dem Menue-Knopf nicht mehr
   fuer den Namenszusatz. Der Vereinsname bleibt, der Zusatz steht im
   Fusszeilenbereich weiterhin vollstaendig. */
@media (max-width: 24rem) {
    .brand__sub { display: none; }
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.55rem;
    background: transparent;
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius);
    color: inherit;
    font: inherit;
    font-weight: 600;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle__bars {
    position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Der Kopf-Button ist zweizeilig umgebrochen, sobald die Navigation eng
   wurde. Er bleibt jetzt einzeilig und gibt stattdessen Breite ab. */
.site-nav__cta {
    white-space: nowrap;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__link {
    display: block;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.site-nav__link:hover {
    background: var(--c-surface-alt);
}

.site-nav__link[aria-current="page"] {
    color: var(--c-accent-text);
    font-weight: 700;
}

@media (max-width: 75rem) {
    .nav-toggle { display: inline-flex; }

    .site-nav {
        position: absolute;
        inset: 100% 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 1rem var(--gutter) 1.5rem;
        background: var(--c-header-bg);
        border-block: var(--border-width) solid var(--c-border);
        box-shadow: 0 12px 24px rgb(0 0 0 / 12%);
    }

    .site-nav[hidden] { display: none; }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
    }

    .site-nav__link {
        padding: 0.75rem 0.5rem;
        border-bottom: var(--border-width) solid var(--c-border);
        border-radius: 0;
    }

    .site-nav__cta { text-align: center; }
}

/* Einspaltige Raster ohne eigene Spaltenangabe: ohne diese Regel gilt
   fuer ihre Elemente min-width: auto, und ein langes Wort macht die Zeile
   breiter als ihren Container. */
.block__list,
.checklist,
.person__bio,
.site-footer__links,
.factlist,
.form,
.field,
.donate__main,
.donate__faq,
.contact__aside {
    grid-template-columns: minmax(0, 1fr);
}

/* Hinweis zu den Rastern oben und unten: einspaltige Raster sind als
   minmax(0, 1fr) geschrieben, nicht als 1fr. Ein blosses 1fr entspricht
   minmax(auto, 1fr), und dieses auto bedeutet "mindestens so breit wie der
   Inhalt". Ein langes Wort macht die Spalte dann breiter als das Fenster. */

/* --- Sections ---------------------------------------------------------- */

.section {
    padding-block: var(--section-y);
}

.section--alt {
    background: var(--c-surface-alt);
}

.section__title {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    text-transform: var(--head-transform);
}

.page-head {
    padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.page-head__eyebrow {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-muted);
    font-weight: 600;
}

.page-head__title {
    font-size: clamp(2rem, 5.5vw, 3.2rem);
    text-transform: var(--head-transform);
}

.page-head__lead {
    max-width: 46rem;
    font-size: 1.15rem;
    color: var(--c-muted);
}

.prose {
    max-width: var(--wrap-narrow);
}

.prose--narrow {
    max-width: 38rem;
}

.prose .section__title {
    margin-top: 2rem;
}

.prose .section__title:first-child {
    margin-top: 0;
}

.lead {
    font-size: 1.15rem;
}

/* --- Hero -------------------------------------------------------------- */

.hero {
    position: relative;
}

.hero__media img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    object-position: center 40%;
}

.hero__panel {
    padding-block: 2.5rem;
}

.hero__eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--c-muted);
}

.hero__title {
    font-size: clamp(2rem, 5.4vw, 3.4rem);
    text-transform: var(--head-transform);
    margin-bottom: 0.4em;
}

.hero__lead {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    max-width: 40rem;
    color: var(--c-muted);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

/* --- Intro ------------------------------------------------------------- */

.intro {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
}

@media (max-width: 52rem) {
    .intro { grid-template-columns: minmax(0, 1fr); }
}

.card {
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.5rem;
}

.card__title {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.card--quote {
    background: var(--c-accent-soft);
    border-color: transparent;
}

.quote {
    font-family: var(--font-head);
    font-size: 1.2rem;
    line-height: 1.45;
    font-style: italic;
}

/* --- Facts ------------------------------------------------------------- */

.facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 52rem) {
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fact {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.fact__value {
    font-family: var(--font-head);
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: var(--head-weight);
    line-height: 1;
    color: var(--c-accent-text);
}

.fact__label {
    font-size: 0.95rem;
    color: var(--c-muted);
}

/* --- Call to action ---------------------------------------------------- */

.section--cta {
    background: var(--c-surface-alt);
}

/* Zahlenband und Aufruf teilen sich die Flaeche, deshalb hier kein
   zweiter voller Abstand. */
.section--facts + .section--cta {
    padding-top: 0;
}

.cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cta__text { flex: 1 1 22rem; }
.cta__title { font-size: clamp(1.5rem, 3vw, 2.1rem); text-transform: var(--head-transform); }
.cta__action { flex: 0 1 auto; }

.cta__note {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--c-muted);
}

/* --- Content blocks ---------------------------------------------------- */

.blocks {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 52rem) {
    .blocks { grid-template-columns: minmax(0, 1fr); }
}

.block {
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.75rem;
}

.block__head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.block__num {
    font-family: var(--font-head);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-accent-text);
    letter-spacing: 0.08em;
}

.block__title {
    font-size: 1.3rem;
    margin: 0;
    /* Als Flex-Element schrumpft die Ueberschrift sonst nicht unter die
       Breite ihres laengsten Wortes, und der Umbruch aus body greift nicht. */
    min-width: 0;
}

/* Ein Block traegt entweder eine Liste oder einen Fliesstext. */
.block__text {
    margin: 0;
    color: var(--c-muted);
}

/* Fuenf gleichwertige Punkte laufen in zwei Spalten unschoen aus. */
.blocks--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 62rem) {
    .blocks--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 44rem) {
    .blocks--three { grid-template-columns: minmax(0, 1fr); }
}

/* Ueberschrift, die einen ganzen Abschnitt anfuehrt statt nur eine Spalte. */
.section__title--lead {
    margin-bottom: 1.75rem;
}

.legal__stand {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: var(--border-width) solid var(--c-border);
    font-size: 0.9rem;
    color: var(--c-muted);
}

.factlist code {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 0.92em;
    word-break: break-word;
}

.block__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.7rem;
}

.block__list li {
    position: relative;
    padding-left: 1.4rem;
}

.block__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--c-accent);
}

.checklist {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist li {
    position: relative;
    padding-left: 1.6rem;
}

.checklist li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.45em;
    width: 0.45rem;
    height: 0.85rem;
    border-right: 2px solid var(--c-accent);
    border-bottom: 2px solid var(--c-accent);
    transform: rotate(40deg);
}

/* --- Fact list (Verein) ------------------------------------------------ */

.factlist {
    margin: 0;
    display: grid;
    gap: 0;
    border-top: var(--border-width) solid var(--c-border);
}

.factlist__row {
    display: grid;
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: 1rem;
    padding-block: 1rem;
    border-bottom: var(--border-width) solid var(--c-border);
}

@media (max-width: 40rem) {
    .factlist__row { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

.factlist dt {
    font-weight: 600;
    color: var(--c-muted);
}

.factlist dd {
    margin: 0;
}

/* --- Board ------------------------------------------------------------- */

.board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 60rem) {
    .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 38rem) {
    .board { grid-template-columns: minmax(0, 1fr); }
}

.person {
    height: 100%;
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.person__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--c-accent-soft);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.person__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}

.person__initials {
    font-family: var(--font-head);
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    font-weight: var(--head-weight);
    color: var(--c-accent-text);
    opacity: 0.55;
    letter-spacing: 0.05em;
}

.person__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.person__name {
    font-size: 1.2rem;
    margin: 0;
}

.person__role {
    margin: 0;
    font-weight: 600;
    color: var(--c-accent-text);
    font-size: 0.95rem;
}

.person__bio {
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.25rem;
    font-size: 0.93rem;
    color: var(--c-muted);
}

/* --- Donations --------------------------------------------------------- */

.donate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 56rem) {
    .donate { grid-template-columns: minmax(0, 1fr); }
}

.donate__main {
    display: grid;
    gap: 1.5rem;
}

.donate__account {
    background: var(--c-accent);
    color: var(--c-accent-ink);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
}

.donate__account a { color: inherit; }

.donate__title {
    margin: 0 0 0.75rem;
    font-size: 1.3rem;
    color: inherit;
}

.donate__holder {
    margin-bottom: 1.25rem;
    opacity: 0.9;
}

.donate__iban {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0 0 1.25rem;
}

.donate__iban-label {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.75;
}

.donate__iban-value {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: clamp(1rem, 2.4vw, 1.35rem);
    letter-spacing: 0.03em;
    word-break: break-word;
}

.donate__twint {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid rgb(255 255 255 / 28%);
    font-size: 0.9rem;
    opacity: 0.9;
}

.donate__twint-badge {
    flex: 0 0 auto;
    padding: 0.25rem 0.5rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.donate__faq {
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

.faq {
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
}

.faq__q {
    cursor: pointer;
    padding: 1rem 1.25rem;
    font-family: var(--font-head);
    font-weight: var(--head-weight);
    font-size: 1.05rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
    content: "+";
    font-size: 1.4rem;
    line-height: 1;
    color: var(--c-accent-text);
    transition: transform 0.2s ease;
}

.faq[open] .faq__q::after {
    transform: rotate(45deg);
}

.faq__a {
    padding: 0 1.25rem 1.25rem;
    color: var(--c-muted);
}

/* --- Contact ----------------------------------------------------------- */

.contact {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 56rem) {
    .contact { grid-template-columns: minmax(0, 1fr); }
}

.contact__aside {
    display: grid;
    gap: 1.25rem;
}

.card--note {
    background: var(--c-accent-soft);
    border-color: transparent;
    font-size: 0.95rem;
}

.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    border: var(--border-width) solid var(--c-border);
    background: var(--c-surface-alt);
}

.alert--error {
    border-color: #b3261e;
    background: #fdecea;
    color: #7a1810;
}

.alert--info {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}

.alert--ok {
    border-color: #1e7a44;
    background: #e8f6ee;
    color: #14532d;
}

.form {
    display: grid;
    gap: 1.25rem;
}

.form__honey {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__row--split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

@media (max-width: 40rem) {
    .form__row--split { grid-template-columns: minmax(0, 1fr); }
}

.field {
    display: grid;
    gap: 0.35rem;
}

.field__label {
    font-weight: 600;
    font-size: 0.95rem;
}

.field__req { color: var(--c-accent-text); }

.field__input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font: inherit;
    color: inherit;
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius);
}

.field__input:focus {
    border-color: var(--c-accent);
}

.field__input--area {
    resize: vertical;
    min-height: 6rem;
}

.field--error .field__input {
    border-color: #b3261e;
}

.field__error {
    margin: 0;
    font-size: 0.88rem;
    color: #b3261e;
}

.field__hint {
    margin: 0;
    font-size: 0.88rem;
    color: var(--c-muted);
}

.form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.form__note {
    margin: 0;
    font-size: 0.88rem;
    color: var(--c-muted);
}

.form__privacy {
    margin: 0;
    font-size: 0.88rem;
    color: var(--c-muted);
}

/* --- Variants comparison ----------------------------------------------- */

.variants {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 75rem) {
    .variants { grid-template-columns: minmax(0, 1fr); }
}

.variant {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.variant.is-current {
    border-color: var(--c-accent);
    border-width: 2px;
}

.variant__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.variant__letter {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font-family: var(--font-head);
    font-weight: 700;
}

.variant__name { margin: 0; font-size: 1.25rem; }
.variant__claim { margin: 0; font-size: 0.9rem; color: var(--c-muted); }

.variant__frame {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
}

.variant__frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    height: 1700px;
    border: 0;
    transform: scale(0.28);
    transform-origin: top left;
}

.variant__summary {
    margin: 0;
    font-size: 0.95rem;
    color: var(--c-muted);
    flex: 1 1 auto;
}

.variant__swatch {
    display: flex;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.variant__swatch li {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 4px;
    border: 1px solid rgb(0 0 0 / 15%);
}

.variant__actions { margin: 0; }

/* --- Footer ------------------------------------------------------------ */

.site-footer {
    background: var(--c-footer-bg);
    color: var(--c-footer-ink);
    padding-block: 3rem 1.5rem;
    /* Kein margin-top: jeder Abschnitt bringt sein eigenes Padding mit.
       Ein zusaetzlicher Aussenabstand erzeugte einen hellen Streifen
       zwischen dunklem Schlussabschnitt und dunklem Footer. */
}

.site-footer a {
    color: inherit;
    text-decoration: none;
}

.site-footer a:hover { text-decoration: underline; }

.site-footer__inner {
    /* Wie die Kopfleiste: Kopf und Fuss rahmen die Seite und laufen
       breiter als die Lesespalte. Bei vier Spalten in einer schmalen
       Zone brach sonst «Klassenmusizieren» mitten im Wort um. */
    width: min(100% - 2 * var(--gutter), var(--wrap-header));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
}

/* Vier Spalten am Schreibtisch, zwei auf dem Tablet, eine auf dem Handy.
   Die Bereiche duerfen sich nicht ueberlappen, sonst gewinnt die Regel,
   die weiter unten steht. */
@media (max-width: 62rem) {
    .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
    .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
}

.site-footer__title {
    font-family: var(--font-head);
    font-weight: var(--head-weight);
    margin-bottom: 0.5rem;
    /* Der Vereinsname steht hier als Titel und soll an Wortgrenzen
       umbrechen, nicht mitten im Wort. */
    overflow-wrap: normal;
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.3rem;
}

.site-footer__bottom {
    width: min(100% - 2 * var(--gutter), var(--wrap-header));
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgb(255 255 255 / 18%);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    font-size: 0.85rem;
    opacity: 0.8;
}

.site-footer__bottom p { margin: 0; }

.site-footer__note {
    font-style: italic;
}

.intro__text {
    max-width: 38rem;
}

/* --- Preview switcher (removed with the preview) ----------------------- */

.switcher {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    width: min(20rem, calc(100vw - 2rem));
    font-family: system-ui, sans-serif;
    color: #f4f4f5;
    background: #16181d;
    border: 1px solid #33363d;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgb(0 0 0 / 35%);
    overflow: hidden;
}

.switcher__handle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: #1f232a;
    border: 0;
    border-bottom: 1px solid #33363d;
    color: inherit;
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
}

.switcher__handle-icon {
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.switcher[data-collapsed="true"] .switcher__handle-icon {
    transform: rotate(-135deg);
}

.switcher[data-collapsed="true"] .switcher__body {
    display: none;
}

.switcher__body { padding: 0.75rem; }

.switcher__title {
    margin: 0 0 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9aa0aa;
}

.switcher__list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.switcher__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
}

.switcher__item:hover { background: #22262e; }

.switcher__item.is-active {
    background: #22262e;
    border-color: #4c525c;
}

.switcher__letter {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #363b44;
    font-size: 0.8rem;
    font-weight: 700;
}

.switcher__item.is-active .switcher__letter {
    background: #f4f4f5;
    color: #16181d;
}

.switcher__meta {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.switcher__name { font-size: 0.9rem; font-weight: 600; }
.switcher__claim { font-size: 0.75rem; color: #9aa0aa; }

.switcher__swatch {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
}

.switcher__swatch i {
    width: 0.55rem;
    height: 1.1rem;
    border-radius: 2px;
}

.switcher__compare {
    display: block;
    font-size: 0.82rem;
    color: #cbd0d8;
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border-top: 1px solid #33363d;
}

.switcher__compare:hover { text-decoration: underline; }

.switcher__hint {
    margin: 0.35rem 0 0;
    padding: 0 0.6rem;
    font-size: 0.72rem;
    color: #767c86;
}

.switcher kbd {
    display: inline-block;
    padding: 0 0.25rem;
    border: 1px solid #4c525c;
    border-radius: 3px;
    font-size: 0.7rem;
    font-family: inherit;
}

@media print {
    .switcher, .skip-link { display: none !important; }
}