/* =========================================================================
   Variante E -- "Frisch"
   Waldgrün mit sonnigem Akzent, runde Formen, viel Luft.

   Die einzige Variante ohne Ecken. Sie soll offen und familiennah wirken,
   ohne kindlich zu werden: die Rundungen sind grosszügig, die Typografie
   bleibt sachlich.
   ========================================================================= */

/* Fira Sans, SIL Open Font License 1.1, liegt unter public/assets/fonts/.
   Sie ersetzt den Systemschrift-Stapel, der je nach Gerät Segoe UI, Roboto
   oder Helvetica traf. Fira Sans ist für Bildschirme kleiner Geräte
   entworfen, humanistisch geschnitten und damit freundlicher als die
   geometrischen Grotesken, ohne an Lesbarkeit zu verlieren. */

@font-face {
    font-family: "Fira Sans";
    src: url("../fonts/fira-sans/fira-sans-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fira Sans";
    src: url("../fonts/fira-sans/fira-sans-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Fira Sans";
    src: url("../fonts/fira-sans/fira-sans-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --c-bg: #ffffff;
    --c-surface: #ffffff;
    --c-surface-alt: #f2f7f4;
    --c-text: #16241d;
    --c-muted: #55665e;

    --c-accent: #1c6b45;
    --c-accent-text: #1c6b45;
    --c-accent-ink: #ffffff;
    --c-accent-soft: #e3f0e9;
    --c-border: #d5e5dc;
    /* Rand der Formularfelder: Gedecktes Graugrün, 3.16:1 auf Weiss. Der Zierwert
       darüber ist mit rund 1.3:1 zu schwach, um ein Feld als Feld
       erkennbar zu machen. */
    --c-field-border: #7d9788;
    --c-header-bg: #ffffff;
    --c-header-ink: #16241d;
    --c-footer-bg: #16241d;
    --c-footer-ink: #dfeae4;

    /* Sonniger Zweitakzent. Nur als Fläche und Zier: auf Weiss erreicht er
       nur 1.9:1 und taugt nicht für Text. */
    --c-sonne: #f5b301;

    --font-body: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-head: var(--font-body);
    --head-weight: 700;
    /* Fira Sans steht von Haus aus enger als die Systemschriften; das
       bisherige negative Tracking der Überschriften wäre zu viel, und der
       Fliesstext verträgt eine Spur mehr Grösse. */
    --head-spacing: -0.01em;
    --body-size: 1.08rem;
    --line: 1.68;

    /* Rund bleibt der Charakter dieser Variante, aber massvoll. Radien um
       26px und ein Schatten unter jeder Fläche lassen jede Seite wie ein
       Baukasten aus schwebenden Kacheln aussehen. */
    --radius: 8px;
    --radius-lg: 12px;
    --shadow: none;
    --wrap: 1120px;
    --section-y: 4.5rem;
}

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

.site-header {
    border-bottom: 1px solid var(--c-border);
}

.brand__mark {
    border-radius: 50%;
    background: var(--c-accent);
}

.brand__sub {
    color: var(--c-muted);
}

/* Die Knöpfe bleiben rund, die Navigationspunkte nicht: sonst sind sechs
   weitere Pillen in der Kopfzeile, und der Spendenknopf verliert seine
   Sonderstellung. */
.site-nav__link {
    border-radius: var(--radius);
    font-size: 0.96rem;
}

.site-nav__link:hover {
    background: var(--c-accent-soft);
}

.site-nav__link[aria-current="page"] {
    background: var(--c-accent-soft);
}

.site-nav__cta {
    border-radius: 999px;
}

.btn {
    border-radius: 999px;
}

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

   Der Text stand vorher in einer weissen Karte, die sich über den unteren
   Bildrand schob. Das ist der Aufmacher jeder Produktseite und hatte hier
   keinen Grund: das Bild verliert unten seinen besten Teil, und der Titel
   braucht kein eigenes Podest. Bild und Text stehen jetzt untereinander. */

.hero {
    background: var(--c-surface-alt);
    padding-bottom: 0.5rem;
}

.hero__media img {
    aspect-ratio: 21 / 8;
}

@media (max-width: 46rem) {
    .hero__media img { aspect-ratio: 3 / 2; }
}

.hero__panel {
    padding-block: 2.75rem 2rem;
}

.hero__title {
    font-size: clamp(1.9rem, 4.6vw, 2.9rem);
    line-height: 1.12;
    /* Über die volle Breite läuft der Vereinsname auf eine einzige Zeile
       und liest sich wie eine Werbezeile. */
    max-width: 22ch;
}

.hero__lead {
    color: var(--c-muted);
}

.hero__actions {
    align-items: center;
    gap: 1.5rem;
}

/* --- Abschnitte -------------------------------------------------------- */

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

.page-head__eyebrow {
    color: var(--c-accent);
    letter-spacing: 0.12em;
    font-size: 0.76rem;
}

.card {
    border-radius: var(--radius-lg);
}

/* Das Zitat lag auf voller Akzentfläche und hatte einen gelben Strich
   darunter. Es steht jetzt auf hellem Grund mit einer Linie an der Seite:
   ein Zitat, kein Werbebanner. */
.card--quote {
    background: transparent;
    color: inherit;
    border: 0;
    border-top: 1px solid var(--c-accent);
    border-radius: 0;
    padding: 0.9rem 0 0.25rem;
}

.quote {
    font-style: normal;
    font-size: 1.1rem;
    line-height: 1.55;
}

/* --- Zahlenband -------------------------------------------------------- */

.section--facts {
    background: transparent;
    padding-top: 0;
}

/* Keine Kacheln und keine Plakatzahlen: vier Angaben nebeneinander,
   getrennt durch eine Linie. Vier grosse Zahlen über kleinen Zeilen sind
   das Kennzeichen der Verkaufsseite, nicht das eines Vereins. */
.facts {
    gap: 0;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    padding-block: 1.5rem;
}

.fact {
    padding-inline: 1.25rem;
    border-left: 1px solid var(--c-border);
}

.fact:first-child {
    border-left: 0;
    padding-left: 0;
}

@media (max-width: 52rem) {
    .fact:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }

    .facts { row-gap: 1.25rem; }
}

.fact__value {
    font-size: 1.5rem;
    color: var(--c-accent);
}

.fact__label {
    font-size: 0.95rem;
}

/* --- Blöcke ------------------------------------------------------------ */

/* Fünf Aussagen brauchen nicht fünf Kacheln. Eine Linie darüber ordnet
   sie ebenso, ohne dass die Seite nach Baukasten aussieht. */
.block {
    border: 0;
    border-top: 1px solid var(--c-border);
    background: transparent;
    border-radius: 0;
    padding: 1.1rem 0 0;
}

.block__head {
    align-items: center;
    margin-bottom: 0.6rem;
}

.block__title { font-size: 1.2rem; }

.block__list li::before {
    background: var(--c-accent);
}

/* --- Personen mit rundem Porträt ---------------------------------------

   Das runde Porträt bleibt, die Kachel darum nicht. Zentrierter Name über
   einer Rolle im Pillen-Etikett, alles auf einer Pastellfläche, ist die
   Team-Seite von der Stange. Linksbündig liest sich dieselbe Angabe wie
   eine Vereinsliste. */

.board { gap: 2rem 1.75rem; }

.person {
    border: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

.person__photo {
    width: 7.5rem;
    height: 7.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--c-accent-soft);
}

.person__photo img { object-position: center 20%; }

.person__photo--instrument {
    background: var(--c-surface-alt);
    padding: 0.85rem;
}

.person__initials {
    color: var(--c-accent);
    opacity: 1;
    font-size: 2rem;
    font-weight: 700;
}

.person__body {
    padding: 1rem 0 0;
}

.person__name { font-size: 1.15rem; }

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

.person__bio {
    font-size: 0.92rem;
}

/* --- Spenden ----------------------------------------------------------- */

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

.donate__iban-value { color: #ffe9a8; }

.faq {
    border-color: transparent;
    background: var(--c-surface-alt);
    border-radius: var(--radius);
}

.faq__q::after { color: var(--c-accent); }

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

/* Sichtbarer Rand statt randloser Füllfläche: ein Eingabefeld soll als
   Eingabefeld erkennbar sein, auch ohne Mauszeiger darüber. */
.field__input {
    border-radius: var(--radius);
}

.field__input--area { border-radius: var(--radius); }

/* --- Aufruf ------------------------------------------------------------ */

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

/* Der Abschnitt hat schon seine eigene Fläche; eine zweite Karte darauf
   wäre eine Verpackung um die Verpackung. */
.cta {
    padding-block: 0.5rem;
}

.site-footer__title {
    color: var(--c-sonne);
}

.site-footer {
    border-top: 3px solid var(--c-sonne);
}