/* =========================================================================
   Variante F -- "Konzert"
   Nachtblau, Messing als Zierfarbe, alles auf Haarlinien ausgerichtet.

   Die Variante soll aufgeräumt und hochwertig wirken: eine einzige dunkle
   Fläche (der Textbereich unter dem Bannerbild), sonst helle Seiten mit
   klaren Linien statt Kartenstapeln. Das Messing ist der einzige Schmuck
   und nimmt das Material der Blasinstrumente auf. Es tritt nur als Linie,
   Punkt und Zahl auf, nie als Fläche.

   Abgrenzung zu den bestehenden Varianten: B «Klar» nimmt sich über eine
   schmale Spalte und fehlende Farbe zurück, C «Modern» arbeitet mit
   dunklen Bändern und grosser Typografie. F bleibt hell und breit, holt
   die Übersicht aber aus dem Raster: geteilte Überschriften, Linien über
   jeder Spalte, gleiche Ziffernbreite in den Zahlen, die untereinander
   stehen.
   ========================================================================= */

/* Schibsted Grotesk, SIL Open Font License 1.1, liegt unter
   public/assets/fonts/. Ein Variable Font von 400 bis 700, deshalb steht im
   Gewicht ein Bereich und keine Zahl.

   Sie hat am 14.09.2026 Inter abgelöst. Inter trug den sachlichen Auftritt
   zwar, ist aber auf so vielen Seiten im Einsatz, dass sie nichts mehr über
   die Seite aussagt, auf der sie steht. Schibsted Grotesk kommt aus dem
   Zeitungssatz: enge Laufweite und grosse x-Höhe wie zuvor, dazu ein
   eigener Ton und Ziffern, die in einer Tabelle stehen können. Beides ist
   genau das, was diese Variante braucht, die ihre Übersicht aus dem Raster
   holt. */

@font-face {
    font-family: "Schibsted Grotesk";
    src: url("../fonts/schibsted-grotesk/schibsted-grotesk-variable.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Schibsted Grotesk";
    src: url("../fonts/schibsted-grotesk/schibsted-grotesk-variable-italic.woff2") format("woff2");
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}

:root {
    --c-bg: #ffffff;
    --c-surface: #ffffff;
    --c-surface-alt: #f4f6f9;
    --c-text: #101a26;
    --c-muted: #56637a;

    --c-accent: #14304e;
    --c-accent-text: #14304e;
    --c-accent-ink: #ffffff;
    --c-accent-soft: #e8edf4;
    --c-border: #dde3ec;
    /* Rand der Formularfelder: Gedecktes Blaugrau, 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: #8692a3;
    --c-header-bg: #ffffff;
    --c-header-ink: #101a26;
    --c-footer-bg: #0e2540;
    --c-footer-ink: #c9d4e2;

    /* Messing in drei Helligkeiten, weil eine Farbe für drei Gründe nicht
       reicht:
         --c-messing        nur Linien und Punkte. Auf Weiss erreicht es
                            3.4:1 und ist damit keine Textfarbe.
         --c-messing-text   dieselbe Farbe abgedunkelt auf 5.6:1, für die
                            kleinen Auszeichnungen über den Seitentiteln
                            und die Rollen im Vorstand.
         --c-messing-hell   für Text auf dem Nachtblau, dort 8.2:1. */
    --c-messing: #b5822e;
    --c-messing-text: #8a5f1a;
    --c-messing-hell: #e3b571;

    /* Helle Schrift auf dem Nachtblau: 9:1 auf --c-accent. */
    --c-auf-blau: #c9d4e2;

    --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-head: var(--font-body);
    --head-weight: 600;
    --head-spacing: -0.025em;
    --body-size: 1.0625rem;
    --line: 1.65;

    /* Enge Radien: sichtbar gesetzt, aber nicht rund. Flächen sollen
       präzise wirken, nicht weich. */
    --radius: 4px;
    --radius-lg: 4px;
    --shadow: none;
    --border-width: 1px;

    --wrap: 1200px;
    --wrap-header: 1260px;
    --wrap-narrow: 42rem;
    --section-y: 4.75rem;
}

/* Die Zahlen der Seite laufen auf gleicher Ziffernbreite, damit Werte
   untereinander auf einer Achse stehen. */
.donate__iban-value,
.cta__note,
.factlist dd {
    font-variant-numeric: tabular-nums;
}

/* Das Zahlenband ist davon ausgenommen. Seine vier Werte stehen
   nebeneinander, nicht untereinander, es gibt dort also keine Achse
   auszurichten. Dafür tragen sie Text um die Zahl herum, und die feste
   Ziffernbreite reisst dann eine Lücke auf: «ab 5. Klasse» wurde damit zu
   «ab 5 . Klasse». */
.fact__value {
    font-variant-numeric: proportional-nums;
}

/* --- Kopfbereich -------------------------------------------------------
   Bleibt beim Scrollen stehen, damit die Navigation auf langen Seiten
   erreichbar ist. Die Messinglinie am oberen Rand läuft über die ganze
   Breite und ist die einzige Zier im Kopf. */

.site-header {
    position: sticky;
    top: 0;
    border-top: 3px solid var(--c-messing);
    border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
    min-height: 4.75rem;
}

/* Sprungziele müssen unter der stehenden Kopfleiste hervorkommen. Ohne
   diesen Abstand verdeckt sie die Überschrift, auf die der Link zeigt. */
#inhalt,
.section[id] {
    scroll-margin-top: 6rem;
}

.brand__mark {
    background: var(--c-accent);
    /* Die Note im Signet steht in Messing auf dem Nachtblau. Reine Zier,
       daneben steht der Vereinsname als Text. */
    color: var(--c-messing-hell);
    border-radius: 3px;
}

.brand__name {
    font-weight: 600;
    font-size: 1.18rem;
    letter-spacing: -0.03em;
}

.brand__sub {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
}

.site-nav__link {
    font-size: 0.95rem;
    font-weight: 500;
}

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

.site-nav__link[aria-current="page"] {
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--c-messing);
}

/* Im Mobilmenü stehen die Einträge untereinander; eine Linie unter dem
   aktiven Eintrag wäre dort von der Trennlinie aus base.css nicht zu
   unterscheiden. Die Markierung wandert deshalb an den linken Rand.
   Beide Regeln gehören in dieselbe Media Query wie das Mobilmenü. */
@media (max-width: 75rem) {
    .site-nav__link[aria-current="page"] {
        box-shadow: inset 3px 0 0 var(--c-messing);
    }

    .site-nav {
        box-shadow: 0 14px 28px rgb(16 26 38 / 10%);
    }
}

.btn--accent:hover {
    background: #1d4571;
    filter: none;
}

.link-arrow {
    border-bottom-color: var(--c-messing);
}

/* --- Hero --------------------------------------------------------------
   Bild als ruhiges Band, darunter der Text auf der einzigen dunklen
   Fläche der Seite. Der Text steht nicht über dem Bild: er soll auf
   jedem Gerät gleich gut lesbar sein und nicht von der Bildstelle
   abhängen, die gerade unter ihm liegt. */

.hero {
    background: var(--c-accent);
}

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

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

.hero__panel {
    padding-block: clamp(2.25rem, 5vw, 3.25rem);
    color: #ffffff;
}

.hero__title {
    color: #ffffff;
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 1.08;
    max-width: 26ch;
}

.hero__lead {
    color: var(--c-auf-blau);
    font-size: clamp(1.05rem, 1.9vw, 1.25rem);
    max-width: 44rem;
}

/* Auf dem Nachtblau kann der Knopf nicht nachtblau sein. Er kehrt sich
   um: weisse Fläche, blaue Schrift. */
.hero__panel .btn--accent {
    background: #ffffff;
    color: var(--c-accent);
}

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

.hero__panel .link-arrow {
    color: #ffffff;
    border-bottom-color: var(--c-messing-hell);
}

/* --- Seitenköpfe der Unterseiten --------------------------------------- */

.page-head {
    background: var(--c-surface-alt);
    border-bottom: 1px solid var(--c-border);
    padding-block: clamp(2.75rem, 6vw, 4.25rem);
}

.page-head__eyebrow {
    color: var(--c-messing-text);
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    font-weight: 600;
}

.page-head__title {
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: -0.035em;
    line-height: 1.06;
    max-width: 22ch;
}

.page-head__lead {
    color: var(--c-text);
    font-size: 1.12rem;
    max-width: 44rem;
}

/* --- Abschnitte --------------------------------------------------------
   Eine Überschrift, die einen ganzen Abschnitt anführt, bekommt eine
   Linie über die volle Breite. Das ist die Ordnung, aus der diese
   Variante ihre Übersicht holt. */

.section__title {
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    letter-spacing: -0.03em;
}

.section__title--lead {
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--c-border);
}

.lead,
.page-head__lead {
    line-height: 1.55;
}

/* Zitat: helle blaue Fläche mit Messinglinie darüber, kein Rahmen und
   kein Schatten. */
.card--quote {
    background: var(--c-accent-soft);
    border: 0;
    border-top: 1px solid var(--c-messing);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 1.75rem;
}

.quote {
    font-style: normal;
    font-weight: 500;
    font-size: 1.12rem;
    line-height: 1.5;
    color: var(--c-accent-text);
    letter-spacing: -0.015em;
}

.card {
    box-shadow: none;
}

/* --- Zahlenband --------------------------------------------------------
   Jede Angabe steht unter einer eigenen Messinglinie. Das wirkt auch
   dann noch richtig, wenn das Raster auf zwei Spalten fällt; eine
   Trennlinie zwischen den Spalten würde dort an der falschen Stelle
   stehen. */

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

.facts {
    gap: 1.5rem 2rem;
}

.fact {
    border-top: 2px solid var(--c-messing);
    padding-top: 0.9rem;
    gap: 0.25rem;
}

.fact__value {
    font-size: clamp(1.8rem, 3.6vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.04em;
}

/* Die Beschriftungen bleiben gemischt gesetzt, obwohl die kurzen
   Auszeichnungen dieser Variante sonst in Versalien stehen. Es sind ganze
   Satzteile, keine Etiketten; in Versalien verlieren sie die deutsche
   Grossschreibung, und «Klassenmusizieren» wurde in der schmalen Spalte
   eines Handys breiter als die Spalte und mitten im Wort umgebrochen. */
.fact__label {
    font-size: 0.9rem;
    font-weight: 500;
}

/* --- Textblöcke --------------------------------------------------------
   Keine Karten: die Blöcke stehen als Spalten unter je einer Linie. */

.block {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--c-border);
    border-radius: 0;
    box-shadow: none;
    padding: 1.25rem 0 0;
}

.block__head {
    margin-bottom: 0.6rem;
}

.block__title {
    font-size: 1.12rem;
    color: var(--c-accent-text);
}

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

.block__list li::before {
    background: var(--c-messing);
    width: 0.4rem;
    height: 0.4rem;
    top: 0.68em;
}

.checklist li::before {
    border-color: var(--c-messing);
}

/* --- Vorstand ----------------------------------------------------------
   Flache Karten mit Rahmen, kein Schatten im Ruhezustand. Beim Zeigen
   wird der Rahmen blau und ein zarter Schatten kommt dazu; mehr Bewegung
   braucht eine Personenliste nicht. */

.board {
    gap: 1.5rem;
}

.person {
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.person:hover {
    border-color: var(--c-accent);
    box-shadow: 0 10px 24px rgb(16 26 38 / 8%);
}

.person__photo {
    aspect-ratio: 1;
    background: #eef2f7;
}

/* Der helle Grund gilt nur für Porträts. Die Regel für das Ersatzbild
   steht in base.css und hat dieselbe Spezifität wie die Zeile darüber;
   weil die Theme-Datei später geladen wird, gewönne sonst der blaue Ton,
   und die freigestellten Instrumente stünden als weisses Rechteck darin. */
.person__photo--instrument {
    background: var(--c-surface);
}

.person__initials {
    font-weight: 600;
    opacity: 0.4;
}

.person__body {
    padding: 1.15rem 1.25rem 1.35rem;
    gap: 0.2rem;
}

.person__name {
    font-size: 1.12rem;
}

.person__role {
    color: var(--c-messing-text);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}

.person__bio {
    font-size: 0.92rem;
    margin-top: 0.55rem;
}

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

.donate__account {
    border-top: 1px solid var(--c-messing);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 1.75rem;
}

.donate__title {
    font-size: 1.3rem;
}

.donate__iban-value {
    color: var(--c-messing-hell);
    font-weight: 500;
}

.donate__holder,
.donate__iban-label {
    color: var(--c-auf-blau);
    opacity: 1;
}

.faq__q {
    font-weight: 600;
    font-size: 1.02rem;
}

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

/* --- Verein ------------------------------------------------------------ */

.factlist dt {
    color: var(--c-accent-text);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    /* Die Grossbuchstaben sitzen sonst auf der Grundlinie der ersten
       Textzeile daneben und wirken zu hoch. */
    padding-top: 0.2em;
}

.factlist__row {
    padding-block: 1.1rem;
}

/* --- Kontakt ----------------------------------------------------------- */

.field__label {
    font-size: 0.92rem;
}

.field__input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgb(20 48 78 / 12%);
}

.card--note {
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
}

/* --- Schlussaufruf -----------------------------------------------------
   Helle Fläche mit Messinglinie, nicht das zweite dunkle Band. Die eine
   dunkle Fläche der Seite steht im Hero und soll dort allein bleiben. */

.section--cta {
    background: var(--c-surface-alt);
    border-top: 3px solid var(--c-messing);
}

/* Zahlenband und Aufruf teilen sich in base.css eine Fläche, damit
   zwischen ihnen kein zweiter voller Abstand steht. Hier trennt die
   Messinglinie die beiden, deshalb braucht der Aufruf seinen Abstand
   wieder. */
.section--facts + .section--cta {
    padding-top: var(--section-y);
}

.cta__title {
    font-size: clamp(1.4rem, 2.8vw, 1.95rem);
}

/* --- Fussbereich ------------------------------------------------------- */

.site-footer {
    padding-block: 3.25rem 1.5rem;
}

.site-footer__title {
    color: var(--c-messing-hell);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
}