/* =========================================================================
   Variante G «Partitur»
   Viele Stimmen, ein System.

   Die einzige Variante mit eigenem Markup: die Vorlagen liegen unter
   templates/partitur/, base.css liefert nur noch die Grundlagen und die
   Vorschau-Hilfen. Was hier steht, gehört deshalb zum grossen Teil dieser
   Variante allein und nicht dem Vertrag aus base.css.

   Der Aufbau folgt einer Partiturseite: links die Randspalte mit den
   Probebuchstaben, so wie dort die Instrumentennamen vor den Systemen
   stehen, rechts die Systeme, durchzogen von Taktstrichen, am Schluss der
   Doppelstrich.
   ========================================================================= */

/* --- Schrift ----------------------------------------------------------- */

/*
 * Archivo als Variable Font: eine Datei je Lage, mit Achsen für Gewicht und
 * Breite. Die Variante braucht beides, weil Titel breit und Fliesstext normal
 * gesetzt sind. Geholt mit `php tools/fetch-fonts.php`, Einzelheiten in
 * LIBRARIES.md. Im Betrieb wird nichts nachgeladen.
 */
@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo/archivo-variable.woff2") format("woff2");
    font-weight: 400 700;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo/archivo-variable-italic.woff2") format("woff2");
    font-weight: 400 700;
    font-stretch: 62% 125%;
    font-style: italic;
    font-display: swap;
}

/* --- Farben und Masse --------------------------------------------------- */

:root {
    /* Die vier Rollen: Papier, Notenschwarz, Blaustift, Rotstift. */
    --papier: #f7f8fa;
    --papier-tief: #eaecf1;
    --tinte: #101114;
    --tinte-weich: #565a66;
    --blau: #2430d6;
    --blau-tief: #1b23a6;
    --rot: #d0281d;
    --rot-tief: #a91d14;

    /* Linien. Notenlinien sind kräftiger als das Taktraster im Hintergrund. */
    --linie: rgba(16, 17, 20, 0.22);
    --linie-zart: rgba(16, 17, 20, 0.07);
    /*
     * Der Unterstrich eines Feldes ist keine Zierlinie, sondern die Grenze
     * eines Bedienelements: gedeckt genug für 3.27:1 gegen das Papier. Mit
     * `--linie` wären es 1.63:1.
     */
    --c-field-border: #858a92;
    --takt: clamp(9rem, 12vw, 14rem);

    --ledger-w: 15.5rem;
    --rand: clamp(1.25rem, 4vw, 3.5rem);
    --system-y: clamp(3rem, 6vw, 5.5rem);
    --lese: 68ch;

    /* Vertrag aus base.css: gilt für den Umschalter und die Vergleichsseite. */
    --c-bg: var(--papier);
    --c-surface: var(--papier);
    --c-surface-alt: var(--papier-tief);
    --c-text: var(--tinte);
    --c-muted: var(--tinte-weich);
    --c-accent: var(--blau);
    --c-accent-text: var(--blau);
    --c-accent-ink: #ffffff;
    --c-accent-soft: #e4e6fb;
    --c-border: var(--linie);
    --c-header-bg: var(--papier);
    --c-header-ink: var(--tinte);
    --c-footer-bg: var(--tinte);
    --c-footer-ink: #d8dbe2;

    --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-head: var(--font-body);
    --head-weight: 700;
    --head-spacing: -0.028em;
    --head-transform: none;
    --body-size: 1.0625rem;
    --line: 1.62;

    --radius: 0;
    --radius-lg: 0;
    --shadow: none;
    --border-width: 1px;
    --wrap: 1140px;
    --wrap-header: 1240px;
}

/* --- Grundlagen --------------------------------------------------------- */

body {
    font-variant-numeric: lining-nums;
    font-stretch: 100%;
    color-scheme: light;
}

/*
 * Die Flächen, die der Browser stellt und nicht das Stylesheet: Markierung,
 * Schreibmarke, Bildlaufleiste. Ohne sie bleibt an jeder Seite ein Rest
 * Voreinstellung stehen, der zu keiner Variante gehört.
 */
::selection {
    background: var(--blau);
    color: #ffffff;
}

:root {
    caret-color: var(--blau);
    scrollbar-color: var(--linie) transparent;
    accent-color: var(--blau);
}

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

/* Tabellenziffern überall, wo Zahlen untereinander stehen sollen. */
.ziffern {
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0.01em;
}

/* --- Der Bogen: Randspalte und Notenblatt ------------------------------- */

/*
 * Drei Zeilen: Blatt, Schlussteil und ein Rest, der die Randspalte bis zum
 * unteren Rand durchziehen lässt. Ohne die dritte Zeile endet `1 / -1` am
 * expliziten Raster, also schon nach dem Blatt, und der Strich der
 * Randspalte bricht über dem Schlussteil ab.
 *
 * Kein `min-height: 100vh`: bei einer Ganzseitenaufnahme ist die Fensterhöhe
 * die Höhe des ganzen Dokuments, und die Regel hängt dann eine leere Fläche
 * von Bildschirmhöhe an die Seite.
 */
.score {
    display: grid;
    grid-template-columns: var(--ledger-w) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
}

.ledger {
    grid-row: 1 / -1;
    border-right: 1px solid var(--linie);
    background: var(--papier);
}

/*
 * Die Randspalte ist so hoch wie ihr Inhalt. Ein `min-height: 100vh` sähe
 * im Betrieb gleich aus, macht aber jede Ganzseitenaufnahme kaputt: dort
 * ist die Fensterhöhe die Höhe des ganzen Dokuments, und die Spalte zöge
 * sich über die volle Länge.
 */
.ledger__inner {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 1.75rem 1.5rem 2rem;
}

/* Der Werktitel oben in der Randspalte, mit der Systemklammer davor. */
.work {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    color: var(--tinte);
    text-decoration: none;
}

.work .brace {
    flex: none;
    color: var(--blau);
}

.work__text {
    display: grid;
    min-width: 0;
}

.work__name {
    font-size: 1.0625rem;
    font-weight: 700;
    font-stretch: 112%;
    letter-spacing: -0.02em;
    line-height: 1.12;
}

.work__sub {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    font-weight: 600;
    font-stretch: 88%;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--tinte-weich);
}

.work:hover .work__name { color: var(--blau); }

/* Die Navigation: Probebuchstabe und Name, wie die Besetzung einer Partitur. */
.parts {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/*
 * main.js schliesst die Navigation auf schmalen Geräten über `hidden`. Ohne
 * diese Zeile bliebe sie offen: das `display: flex` oben schlägt die
 * Voreinstellung des Browsers für [hidden].
 */
.parts[hidden] { display: none; }

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

/*
 * Die aktive Seite ist ein durchgehendes blaues Band über die ganze Breite
 * der Randspalte, nicht ein farbiger Punkt. Blaustift trägt in dieser
 * Variante Flächen.
 */
.part {
    display: block;
    padding: 0.45rem 1.5rem;
    margin: 0 -1.5rem;
    color: var(--tinte);
    font-size: 0.98rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.part:hover { background: var(--papier-tief); }

.part[aria-current="page"] {
    background: var(--blau);
    color: #ffffff;
    font-weight: 700;
    font-stretch: 106%;
}

/* Das Verzeichnis der Probebuchstaben dieser Seite, von theme-partitur.js
   gebaut. Ohne JavaScript bleibt es leer und ausgeblendet. */
.marks {
    display: grid;
    gap: 0.1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linie);
}

.marks[hidden] { display: none; }

.marks__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.25rem 0;
    color: var(--tinte-weich);
    text-decoration: none;
}

.marks__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border: 1.5px solid var(--linie);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.marks__name {
    font-size: 0.85rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marks__item:hover .marks__mark { border-color: var(--tinte); color: var(--tinte); }
.marks__item:hover .marks__name { color: var(--tinte); }

/* Wo man gerade ist: die Marke füllt sich, so wie der Dirigent die Stelle
   ansagt, bei der das Orchester steht. */
.marks__item[aria-current="true"] .marks__mark {
    background: var(--tinte);
    border-color: var(--tinte);
    color: var(--papier);
}

.marks__item[aria-current="true"] .marks__name {
    color: var(--tinte);
    font-weight: 700;
}

.parts__cta { justify-content: center; }

/* Der Fortschritt der Seite als Strich in der Randspalte. */
.ledger__progress {
    position: relative;
    height: 2px;
    background: var(--linie-zart);
}

.ledger__playhead {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    background: var(--blau);
    transform: scaleX(var(--fortschritt, 0));
    transform-origin: left;
}

/* --- Das Notenblatt ----------------------------------------------------- */

.sheet {
    min-width: 0;
    /* Die Taktstriche laufen durch die ganze Seite, nicht je Abschnitt. */
    background-image: repeating-linear-gradient(
        to right,
        var(--linie-zart) 0 1px,
        transparent 1px var(--takt)
    );
}

/* --- Der Seitenkopf: Titel auf dem System ------------------------------- */

.opening {
    padding: clamp(2.5rem, 6vw, 5rem) var(--rand) var(--system-y);
    border-bottom: 1px solid var(--linie);
}

.opening__system { min-width: 0; }

/*
 * Das Kopfband: Taktart, Vortragsbezeichnung und der Name des Abschnitts.
 * Es ist die eine blaue Fläche der Variante und läuft über die ganze Breite
 * des Blattes, die Ränder eingeschlossen.
 */
.band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.1rem;
    margin: calc(var(--rand) * -1) calc(var(--rand) * -1) clamp(2rem, 4vw, 3.25rem);
    padding: 0.6rem var(--rand);
    background: var(--blau);
    color: #ffffff;
}

.timesig {
    display: grid;
    line-height: 0.9;
    font-size: 0.95rem;
    font-weight: 700;
    font-stretch: 100%;
}

.band__tempo { font-size: 0.95rem; }

/* Die Marke eines Abschnitts, im Kopf der Spalte neben dem Titel. */
.mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border: 2px solid var(--tinte);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

/* Die Crescendo-Gabel: was über die Jahre gewachsen ist. */
.hairpin {
    width: 5rem;
    height: 1rem;
    color: var(--tinte-weich);
    overflow: visible;
}

.hairpin path { vector-effect: non-scaling-stroke; }

/* Die Leitzeile. Breit gesetzt, weil eine Partiturseite ihren Titel gross führt. */
.theme {
    margin: 0 0 0.6rem;
    font-size: clamp(1.95rem, 5vw, 4.2rem);
    font-weight: 700;
    font-stretch: 118%;
    letter-spacing: -0.035em;
    line-height: 1.04;
    text-wrap: balance;
    max-width: 22ch;
    /*
     * «Klassenmusizieren» ist auf einem Telefon breiter als die Spalte. Ohne
     * Trennung schiebt das eine Wort die ganze Seite waagrecht auf.
     */
    hyphens: auto;
}

.theme--seite {
    font-size: clamp(2.1rem, 4.6vw, 3.9rem);
    margin-bottom: 0.9rem;
}

.ward { display: inline-block; }

/*
 * Der Titel sitzt auf dem System. Das System liegt hinter der letzten Zeile
 * und läuft nach links bis an den Rand des Blattes weiter, wie ein System,
 * das am Seitenrand beginnt.
 */
.opening__staff {
    position: relative;
    padding-bottom: 1.6rem;
    margin-bottom: 1.6rem;
}

.opening__staff .theme {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

/*
 * Die Breite steht ausdrücklich da und nicht als Gegenrand: ein absolut
 * gesetztes ersetztes Element (und eine SVG ist eines) nimmt bei
 * `width: auto` seine Eigenbreite, hier die 1000 der viewBox, und `right`
 * wird dabei übergangen. Auf einem Telefon schob das die Seite um 610px auf.
 */
.stave {
    position: absolute;
    left: calc(var(--rand) * -1);
    bottom: 0;
    width: calc(100% + var(--rand));
    height: 3.5rem;
    overflow: visible;
}

.stave line {
    stroke: var(--linie);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.opening__lead {
    max-width: 46ch;
    margin: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    color: var(--tinte-weich);
}

.opening__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    margin: 2rem 0 0;
}

/*
 * Das Bild steht rechts im System und wird vom Rand des Blattes
 * angeschnitten, nicht randlos darübergelegt.
 */
.opening__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: end;
}

.opening__figure {
    margin: 0 calc(var(--rand) * -1) 0 0;
    min-width: 0;
    border-left: 1px solid var(--linie);
}

.opening__figure img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: 62% center;
}

/* --- Knöpfe: der Rotstift markiert, was zählt -------------------------- */

.ink {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.3rem;
    border: 1.5px solid var(--tinte);
    background: transparent;
    color: var(--tinte);
    font: inherit;
    font-weight: 600;
    font-stretch: 104%;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.ink:hover {
    background: var(--tinte);
    color: var(--papier);
}

.ink--rot {
    border-color: var(--rot);
    background: var(--rot);
    color: #ffffff;
}

.ink--rot:hover {
    background: var(--rot-tief);
    border-color: var(--rot-tief);
    color: #ffffff;
}

.ink--gross {
    padding: 0.85rem 1.7rem;
    font-size: 1.05rem;
}

/*
 * Der Knopf in der Randspalte. Er steht auf jeder Seite und ist deshalb der
 * leisere der beiden: Umriss statt Fläche, damit im ersten Bild nicht zwei
 * gleiche rote Flächen dieselbe Bitte doppelt stellen.
 */
.ink--rotlinie {
    border-color: var(--rot);
    color: var(--rot-tief);
    justify-content: center;
}

.ink--rotlinie:hover {
    background: var(--rot);
    border-color: var(--rot);
    color: #ffffff;
}

/* Der Rotstiftkringel um den Spendenknopf. */
.circled {
    position: relative;
    display: inline-flex;
}

.kringel {
    position: absolute;
    left: -0.7rem;
    right: -0.7rem;
    top: -0.55rem;
    bottom: -0.55rem;
    width: auto;
    height: auto;
    color: var(--rot);
    pointer-events: none;
    overflow: visible;
}

.kringel path { vector-effect: non-scaling-stroke; }

/* Der Legatobogen: die Unterstreichung wächst, statt zu erscheinen. */
.slur {
    color: var(--blau);
    font-weight: 600;
    text-decoration: none;
    background-image: linear-gradient(var(--blau), var(--blau));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1.5px;
    transition: background-size 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.slur:hover,
.slur:focus-visible { background-size: 100% 1.5px; }

/* --- Systeme: die Abschnitte ------------------------------------------- */

.system {
    display: grid;
    grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr);
    gap: 0 clamp(1.5rem, 3vw, 3rem);
    padding: var(--system-y) var(--rand);
    border-bottom: 1px solid var(--linie);
}

.system__head {
    min-width: 0;
    position: sticky;
    top: 2rem;
    align-self: start;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/*
 * Ohne Trennung bricht «Klassenmusizieren» in dieser schmalen Spalte mitten
 * im Wort um. `lang="de-CH"` steht am <html>, die Trennung greift also.
 */
.system__title {
    margin: 0;
    flex: 1 1 8rem;
    min-width: 0;
    hyphens: auto;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    font-weight: 700;
    font-stretch: 92%;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-wrap: balance;
}

.system__body { min-width: 0; }

.system__body--zwei {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: clamp(1.75rem, 3vw, 3rem);
}

.passage { min-width: 0; max-width: var(--lese); }

.passage__title {
    margin: 0 0 0.7rem;
    font-size: 1.05rem;
    font-weight: 700;
    font-stretch: 92%;
    letter-spacing: 0.02em;
}

.passage__lead {
    max-width: var(--lese);
    margin: 0;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    line-height: 1.45;
}

.passage--schmal { max-width: 62ch; }

/*
 * Die Anweisung des Komponisten. In einer Partitur steht sie kursiv über
 * dem System, angeschlossen an eine Haarlinie, nicht in einem Kasten.
 */
.cue {
    margin: 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--tinte);
}

.cue p {
    margin: 0;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-style: italic;
    line-height: 1.42;
    color: var(--tinte);
}

/* --- Stimmen: untereinander, in einer Klammer -------------------------- */

.voices {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 clamp(0.75rem, 1.5vw, 1.25rem);
    align-items: stretch;
}

.voices .brace {
    height: 100%;
    color: var(--blau);
}

/*
 * Die Klammer wird über die Höhe der Stimmen gezogen. Ohne diese Zeile
 * streckt sich die Strichstärke mit und die Klammer wird oben und unten
 * dünner als in der Mitte.
 */
.brace path { vector-effect: non-scaling-stroke; }

.voices__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    min-width: 0;
}

.voice {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 1.1rem;
    min-width: 0;
    padding: 0.9rem 0;
    border-top: 1px solid var(--linie);
}

.voice:last-child { border-bottom: 1px solid var(--linie); }

.voice__value {
    font-size: clamp(1.8rem, 3.4vw, 2.9rem);
    font-weight: 700;
    font-stretch: 112%;
    letter-spacing: -0.03em;
    line-height: 1;
}

.voice__label {
    font-size: 0.95rem;
    color: var(--tinte-weich);
}

/* Die fünf Stimmen der Wirkung: gleichzeitig sichtbar, nicht als Karten. */
.voice--text {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 0.3rem clamp(1.25rem, 2.5vw, 2.5rem);
    align-items: start;
    padding: 1.1rem 0;
}

.voice__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    font-stretch: 96%;
    line-height: 1.3;
}

.voice__text {
    margin: 0;
    max-width: 56ch;
    color: var(--tinte-weich);
}

/* --- Angaben: Beschriftung links, Wert rechts -------------------------- */

.entries {
    margin: 0;
    display: grid;
    max-width: 54rem;
}

.entry {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 0.2rem 1.5rem;
    padding: 0.8rem 0;
    border-top: 1px solid var(--linie);
}

.entry:last-child { border-bottom: 1px solid var(--linie); }

.entry__label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    font-stretch: 88%;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinte-weich);
    padding-top: 0.25rem;
}

.entry__label code {
    font-family: inherit;
    letter-spacing: 0.06em;
    text-transform: none;
}

.entry__value {
    margin: 0;
    font-size: 1.05rem;
}

/* --- Besetzung: der Vorstand ------------------------------------------- */

.cast {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: 0;
    border-top: 1px solid var(--linie);
}

.cast__item {
    min-width: 0;
    border-bottom: 1px solid var(--linie);
    border-right: 1px solid var(--linie);
    padding: 1.5rem 1.5rem 1.75rem 0;
}

.player { display: grid; gap: 1rem; }

.player__photo {
    width: 100%;
    max-width: 11rem;
    aspect-ratio: 3 / 4;
    background: var(--papier-tief);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.player__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Freigestellte Instrumente sollen nicht wie ein Gesicht angeschnitten
 * werden. Der Abstand steht in rem, nicht in Prozent: prozentuales Padding
 * bemisst sich an der Breite des Elternelements, nicht an der eigenen.
 */
.player__photo--instrument {
    background: #ffffff;
    border: 1px solid var(--linie);
    padding: 1.1rem;
}

.player__photo--instrument img {
    object-fit: contain;
}

.player__initials {
    font-size: 1.6rem;
    font-weight: 700;
    font-stretch: 92%;
    letter-spacing: 0.06em;
    color: var(--tinte-weich);
}

.player__name {
    margin: 0 0 0.15rem;
    font-size: 1.08rem;
    font-weight: 700;
    font-stretch: 100%;
    letter-spacing: -0.015em;
}

.player__role {
    margin: 0 0 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    font-stretch: 88%;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--blau);
}

.player__bio {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.2rem;
    font-size: 0.93rem;
    color: var(--tinte-weich);
}

/* --- Spendenkonto ------------------------------------------------------- */

.konto { min-width: 0; }

.konto__halter {
    margin: 0 0 1.25rem;
    color: var(--tinte-weich);
}

.konto__iban {
    display: grid;
    gap: 0.3rem;
    margin: 0 0 1.75rem;
    padding: 1rem 0;
    border-top: 2px solid var(--tinte);
    border-bottom: 1px solid var(--linie);
}

.konto__iban-label {
    font-size: 0.7rem;
    font-weight: 600;
    font-stretch: 88%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tinte-weich);
}

.konto__iban-value {
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    font-weight: 700;
    font-stretch: 100%;
}

.konto__note {
    margin: 0.85rem 0 0;
    font-size: 0.88rem;
    color: var(--tinte-weich);
    max-width: 42ch;
}

/*
 * Der Rückfall des TWINT-Knopfs, falls das Modul von RaiseNow ausbleibt.
 * Er muss auch dann sichtbar sein: hier dunkel auf hellem Grund, damit er
 * nicht weiss auf weiss endet.
 */
.twint-button {
    background: var(--tinte);
    color: #ffffff;
    border: 1.5px solid var(--tinte);
    border-radius: 0;
}

.twint-button:hover {
    background: var(--papier);
    color: var(--tinte);
}

/* --- Wiederholungszeichen: die häufigen Fragen ------------------------- */

.repeats {
    display: grid;
    max-width: 62rem;
    border-top: 1px solid var(--linie);
}

.repeat { border-bottom: 1px solid var(--linie); }

.repeat__q {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 0;
    cursor: pointer;
    font-weight: 700;
    font-stretch: 96%;
    list-style: none;
}

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

/* Die beiden Punkte des Wiederholungszeichens. */
.repeat__dots {
    flex: none;
    position: relative;
    width: 0.9rem;
    height: 1.15rem;
    background:
        linear-gradient(var(--blau), var(--blau)) 0 0 / 1px 100% no-repeat,
        linear-gradient(var(--blau), var(--blau)) 3px 0 / 3px 100% no-repeat;
    transition: background-image 0.16s ease;
}

.repeat__dots::before,
.repeat__dots::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blau);
}

.repeat__dots::before { top: 0.2rem; }
.repeat__dots::after { bottom: 0.2rem; }

.repeat[open] .repeat__dots {
    background:
        linear-gradient(var(--rot), var(--rot)) 0 0 / 1px 100% no-repeat,
        linear-gradient(var(--rot), var(--rot)) 3px 0 / 3px 100% no-repeat;
}

.repeat[open] .repeat__dots::before,
.repeat[open] .repeat__dots::after { background: var(--rot); }

.repeat__a {
    padding: 0 0 1.2rem 1.75rem;
    max-width: 62ch;
    color: var(--tinte-weich);
}

/* --- Formular: Linien, auf die geschrieben wird ------------------------ */

.system__body--formular {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    gap: clamp(1.75rem, 3vw, 3.5rem);
    align-items: start;
}

.formular { min-width: 0; max-width: 38rem; }

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

.form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: 1.4rem;
}

.form__honey { position: absolute; left: -9999px; }

.field { display: grid; gap: 0.35rem; min-width: 0; }

.field__label {
    font-size: 0.7rem;
    font-weight: 600;
    font-stretch: 88%;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--tinte-weich);
}

.field__req { color: var(--rot); }

.field__input {
    width: 100%;
    padding: 0.45rem 0.1rem;
    border: 0;
    border-bottom: 1.5px solid var(--c-field-border);
    border-radius: 0;
    background: transparent;
    font: inherit;
    color: var(--tinte);
    transition: border-color 0.16s ease;
}

.field__input:hover { border-bottom-color: var(--tinte); }

.field__input:focus {
    outline: 0;
    border-bottom-color: var(--blau);
    border-bottom-width: 2px;
}

.field__input:focus-visible {
    outline: 3px solid var(--blau);
    outline-offset: 3px;
}

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

.field__input--wahl { padding-right: 1.5rem; }

.field--error .field__input { border-bottom-color: var(--rot); }

.field__error {
    margin: 0;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--rot);
}

.field__hint {
    margin: 0;
    font-size: 0.87rem;
    color: var(--tinte-weich);
}

.form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding-top: 0.5rem;
}

.form__note,
.form__privacy {
    margin: 0;
    font-size: 0.87rem;
    color: var(--tinte-weich);
    max-width: 52ch;
}

.flash {
    padding: 0.85rem 1.1rem;
    background: var(--blau);
    color: #ffffff;
    font-weight: 600;
}

.flash--error {
    background: var(--rot);
    color: #ffffff;
}

.beiblatt { display: grid; gap: 1.5rem; min-width: 0; }

.beiblatt__block {
    padding-top: 0.9rem;
    border-top: 2px solid var(--tinte);
    font-size: 0.95rem;
}

.beiblatt__block--hinweis {
    border-top-color: var(--linie);
    color: var(--tinte-weich);
}

.beiblatt__title {
    margin: 0 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    font-stretch: 88%;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

/* --- Tutti: hier fallen die Stimmen zusammen --------------------------- */

.tutti {
    position: relative;
    padding: clamp(3.5rem, 7vw, 6rem) var(--rand) clamp(3.5rem, 7vw, 6rem);
    background: var(--tinte);
    color: var(--papier);
    text-align: center;
}

.fermata {
    display: block;
    width: 3rem;
    height: auto;
    margin: 0 auto 0.9rem;
    color: var(--papier);
}

/* Die eine Linie, auf die alles zusammenläuft. */
.tutti__line {
    width: min(46rem, 100%);
    height: 3px;
    margin: 0 auto 2rem;
    background: var(--papier);
    transform-origin: center;
}

.tutti__body { max-width: 46rem; margin: 0 auto; }

.tutti__title {
    margin: 0 0 0.7rem;
    font-size: clamp(1.7rem, 3.6vw, 2.9rem);
    font-weight: 700;
    font-stretch: 114%;
    letter-spacing: -0.03em;
    line-height: 1.08;
    text-wrap: balance;
}

.tutti__text {
    margin: 0 auto;
    max-width: 52ch;
    color: #c9ccd4;
}

.tutti__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.9rem 1.75rem;
    margin: 2rem 0 0;
}

.tutti .ink {
    border-color: var(--papier);
    color: var(--papier);
}

.tutti .ink:hover {
    background: var(--papier);
    color: var(--tinte);
}

.tutti .ink--rot {
    border-color: var(--rot);
    background: var(--rot);
    color: #ffffff;
}

.tutti .ink--rot:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--tinte);
}

.tutti__iban {
    font-size: 0.95rem;
    color: #c9ccd4;
}

.stand {
    margin: 0;
    padding: var(--system-y) var(--rand);
    font-size: 0.85rem;
    color: var(--tinte-weich);
}

/* --- Coda: der Schlussstrich ------------------------------------------- */

.coda {
    grid-column: 2;
    grid-row: 2;
    padding: 3rem var(--rand) 2.5rem;
    background: var(--papier);
}

/* Der Doppelstrich am Ende eines Werks: dünn, dann dick. */
.coda__bar {
    height: 9px;
    margin-bottom: 2.5rem;
    background:
        linear-gradient(var(--tinte), var(--tinte)) 0 0 / 100% 1px no-repeat,
        linear-gradient(var(--tinte), var(--tinte)) 0 5px / 100% 4px no-repeat;
}

.coda__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: 1.75rem clamp(1.5rem, 3vw, 3rem);
}

.coda__col { min-width: 0; font-size: 0.93rem; color: var(--tinte-weich); }

.coda__title {
    margin: 0 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    font-stretch: 88%;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--tinte);
}

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

/* Ein Verweis im Fussbereich ist ein Klickziel und misst mindestens 24px. */
.coda__links a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--tinte-weich);
    text-decoration: none;
}

.coda__links a:hover {
    color: var(--blau);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.coda__note {
    margin: 2rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--linie);
    font-size: 0.82rem;
    color: var(--tinte-weich);
}

/* --- Bewegung ----------------------------------------------------------
   Ein Einsatz, nicht viele Effekte: das System zieht sich, die Wörter
   landen darauf, und weiter unten setzen die Stimmen nacheinander ein.
   Fliesstext bewegt sich nie.

   `data-motion` setzt ein kurzes Skript im Kopf der Seite. Ohne Skript und
   bei `prefers-reduced-motion` greift keine der Regeln, und alles steht
   von Anfang an da.
   ----------------------------------------------------------------------- */

[data-motion="on"] .stave line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: linie-ziehen 0.66s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
    animation-delay: calc(var(--l, 0) * 70ms + 80ms);
}

@keyframes linie-ziehen {
    to { stroke-dashoffset: 0; }
}

[data-motion="on"] .ward {
    opacity: 0;
    animation: wort-landen 0.62s cubic-bezier(0.2, 0.72, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * 52ms + 380ms);
}

@keyframes wort-landen {
    from { opacity: 0; transform: translateY(calc(var(--p, 3) * 0.14em)); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Die Stimmen setzen nacheinander ein, sobald das System sichtbar wird. */
[data-motion="on"] .voice,
[data-motion="on"] .entry,
[data-motion="on"] .cast__item {
    opacity: 0;
}

[data-motion="on"] .is-visible .voice,
[data-motion="on"] .is-visible .entry,
[data-motion="on"] .is-visible .cast__item {
    animation: einsatz 0.56s cubic-bezier(0.2, 0.72, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * 85ms);
}

@keyframes einsatz {
    from { opacity: 0; transform: translateY(0.7rem); }
    to   { opacity: 1; transform: translateY(0); }
}

[data-motion="on"] .voices .brace {
    transform: scaleY(0);
    transform-origin: top;
}

[data-motion="on"] .is-visible .brace {
    animation: klammer 0.5s cubic-bezier(0.2, 0.72, 0.2, 1) forwards;
}

@keyframes klammer {
    to { transform: scaleY(1); }
}

/* Der Höhepunkt: die Linie wächst aus der Mitte nach beiden Seiten. */
[data-motion="on"] .tutti__line { transform: scaleX(0); }

[data-motion="on"] .tutti.is-visible .tutti__line {
    animation: zusammenfallen 0.7s cubic-bezier(0.2, 0.72, 0.2, 1) forwards;
}

@keyframes zusammenfallen {
    to { transform: scaleX(1); }
}

[data-motion="on"] .tutti .fermata { opacity: 0; }

[data-motion="on"] .tutti.is-visible .fermata {
    animation: einsatz 0.5s cubic-bezier(0.2, 0.72, 0.2, 1) 0.45s forwards;
}

/* --- Schmalere Bildschirme --------------------------------------------- */

/*
 * Der Umschaltpunkt muss mit dem in main.js übereinstimmen (75rem). Unter
 * dieser Breite wird aus der Randspalte ein Kopfband und die Navigation
 * klappt auf.
 */
@media (max-width: 75rem) {
    .score {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }

    .ledger {
        grid-row: auto;
        position: sticky;
        top: 0;
        z-index: 20;
        border-right: 0;
        border-bottom: 1px solid var(--linie);
    }

    .ledger__inner {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.75rem;
        min-height: 0;
        padding: 0.85rem var(--rand);
    }

    .nav-toggle { display: inline-flex; }

    .parts {
        grid-column: 1 / -1;
        gap: 1rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--linie);
    }

    .parts__cta { margin-top: 0; justify-self: start; }

    .part { margin: 0; padding: 0.45rem 0.6rem; }

    /* Auf einem Kopfband hat das Abschnittsverzeichnis keinen Platz; die
       Marken stehen weiterhin bei den Abschnitten selbst. */
    .marks { display: none; }

    .ledger__progress {
        grid-column: 1 / -1;
        margin: 0 calc(var(--rand) * -1) -0.85rem;
    }

    .coda { grid-column: auto; grid-row: auto; }

    .system {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .system__head { position: static; }

    .system__body--formular { grid-template-columns: minmax(0, 1fr); }

    .voice--text { grid-template-columns: minmax(0, 1fr); }

    .entry { grid-template-columns: minmax(0, 1fr); }

    .cast__item { padding-right: 1rem; }

    /* Das Bild rückt unter die Zeile, statt neben ihr zu stehen. */
    .opening__row { grid-template-columns: minmax(0, 1fr); }

    .opening__figure {
        margin: 0 calc(var(--rand) * -1);
        border-left: 0;
        border-top: 1px solid var(--linie);
    }

    .opening__figure img {
        aspect-ratio: 16 / 10;
        object-position: center;
    }
}

@media (max-width: 40rem) {
    :root { --takt: 6.5rem; }


    .cast {
        grid-template-columns: minmax(0, 1fr);
    }

    .cast__item { border-right: 0; padding-right: 0; }

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

    .voice { gap: 0.1rem 0.8rem; }
}