/* === Bereichsspezifische Komponenten ===
 * Ausgelagert aus seiten.css, die mit 387 Zeilen an die Grenze kam.
 * Hier: Aufgaben, Zuständigkeiten, Lehrplan, Ausbildung, Startseite,
 * Heimatbildschirm (Chorwahl).
 * Nutzt wie überall ausschließlich Variablen aus tokens.css.
 */

/* --- Aufgaben und Zuständigkeiten --- */
.aufgabe { display: flex; align-items: flex-start; gap: var(--space-3);
           padding: var(--space-3) var(--space-4); background: var(--surface); }
.aufgabe--ueberfaellig { background: var(--danger-bg); }
.aufgabe--heute { background: var(--warning-bg); }
.aufgabe--erledigt .aufgabe__titel { text-decoration: line-through;
                                     color: var(--text-subtle); }
.aufgabe__haken { width: 26px; height: 26px; flex: 0 0 26px; margin-top: 2px;
                  display: grid; place-items: center;
                  border: 1.5px solid var(--border-strong);
                  border-radius: var(--radius-sm);
                  background: var(--surface); color: var(--success);
                  font-weight: var(--weight-bold); }
.aufgabe--erledigt .aufgabe__haken { background: var(--success);
                                     border-color: var(--success); color: #fff; }
.aufgabe__text { flex: 1; min-width: 0; }
.aufgabe__text summary { cursor: pointer; list-style: none;
                         display: flex; flex-direction: column; gap: 2px; }
.aufgabe__text summary::-webkit-details-marker { display: none; }
.aufgabe__text summary:hover .aufgabe__titel { color: var(--chor); }
.aufgabe__titel { font-weight: var(--weight-medium); }
.aufgabe__formular { margin-top: var(--space-3); padding-top: var(--space-3);
                     border-top: 1px dashed var(--border); }

/* Ausgeblendete Menschen — ihr Kuerzel tritt zurueck, steht aber noch da.
 * Die Leiterliste selbst ist am 16.09.2026 aus den Einstellungen in die
 * Zugangsverwaltung gezogen; ihre Zeilen tragen jetzt .zugang. */
.person__kuerzel--still { background: var(--surface-3); color: var(--text-subtle); }

.zustaendig { background: var(--surface); }
.zustaendig__kopf { display: flex; align-items: center; gap: var(--space-3);
                    padding: var(--space-3) var(--space-4); cursor: pointer;
                    list-style: none; }
.zustaendig__kopf::-webkit-details-marker { display: none; }
.zustaendig__kopf:hover { background: var(--surface-2); }
.zustaendig__wer { flex: 0 0 34px; height: 34px; display: grid; place-items: center;
                   border-radius: var(--radius-pill); background: var(--accent-bg);
                   color: var(--accent-fg); font-size: var(--text-sm);
                   font-weight: var(--weight-bold); }
.zustaendig__wer--offen { background: var(--surface-3); color: var(--text-subtle); }
.zustaendig .aufgabe__formular { padding-inline: var(--space-4);
                                 padding-bottom: var(--space-3); }

/* --- Lehrplan-Stufen --- */
.stufen-liste { display: flex; flex-direction: column; gap: var(--space-2); }
.stufe-karte { border: 1px solid var(--border); border-radius: var(--radius);
               background: var(--surface); overflow: hidden; }
.stufe-karte--erreicht { border-color: var(--success); background: var(--success-bg); }
.stufe-karte__kopf { display: flex; align-items: center; gap: var(--space-3);
                     padding: var(--space-3); cursor: pointer; list-style: none; }
.stufe-karte__kopf::-webkit-details-marker { display: none; }
.stufe-karte__haken { width: 30px; height: 30px; flex: 0 0 30px;
                      display: grid; place-items: center;
                      border-radius: var(--radius-pill);
                      border: 1.5px solid var(--border-strong);
                      background: var(--surface); color: var(--text-subtle);
                      font-weight: var(--weight-bold); }
.stufe-karte--erreicht .stufe-karte__haken { background: var(--success);
                                             border-color: var(--success); color: #fff; }
.stufe-karte__text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stufe-karte__name { font-weight: var(--weight-medium); }
.stufe-karte__text .klein { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stufe-karte__pfeil { flex: 0 0 auto; color: var(--text-subtle);
                      transition: transform var(--dauer-schnell) var(--ease); }
/* Offen: Rahmen in Primaerfarbe, Pfeil gedreht, Inhalt auf heller Flaeche —
 * so hebt er sich vom (bei erreichten Stufen gruenen) Kopf ab. */
/* Ueberschrift je Chor in der Stufenliste. Traegt dessen Farbe (aus
 * gruppen.farbe ueber data-chorfarbe) — im Kinderchor stehen die beiden
 * ersten Stufen damit sichtbar unter "im Schaefchenchor". */
.stufen-trenner { display: flex; align-items: center; gap: var(--space-3);
                  margin: var(--space-3) 0 var(--space-1);
                  font-size: var(--text-xs); font-weight: var(--weight-bold);
                  letter-spacing: .04em; text-transform: uppercase;
                  color: var(--chor-text); }
.stufen-trenner:first-child { margin-top: 0; }
.stufen-trenner::after { content: ''; flex: 1; height: 1px; background: var(--chor);
                         opacity: .35; }
.stufe-karte[open] { border-color: var(--chor); box-shadow: 0 0 0 3px var(--chor-weich); }
.stufe-karte[open] .stufe-karte__pfeil { transform: rotate(180deg); color: var(--chor); }
.stufe-karte__koerper { padding: var(--space-3); background: var(--surface);
                        border-top: 1px solid var(--border); }
.stimmdaten { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.stimmdaten__verlauf summary { cursor: pointer; }
.stimmdaten__stand { padding: 2px 0; }

/* --- Startseite eines Chors ---
 * Seit dem Umbau zeigt sie nur den gewaehlten Chor. Die Probenkarte traegt
 * deshalb die Seite und darf gross sein; vorher teilte sie sich den
 * Bildschirm mit dem Chor, in dem man gerade nicht arbeitet. */
.tagzeile { color: var(--text-muted); font-size: var(--text-sm);
            margin: var(--space-1) 0 calc(var(--space-2) * -1); }
.heute-probe { display: flex; flex-direction: column; gap: var(--space-2); }
.heute-probe__lage { font-size: var(--text-lg); line-height: 1.3; }
/* Der Fuss des Heimatbildschirms sitzt unten, nicht mitten auf der Seite:
 * ueber den Choerkarten bleibt auf einem hohen Schirm viel Luft. */
body:has(.heimat) .inhalt {
    min-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top)
                     - 2 * var(--space-4));
}
/* Probentag: die Karte nimmt die Farbe des Chors an, in dem man steht. */
.heute-probe--jetzt { border-color: var(--chor); background: var(--chor-weich); }
.vortrag--vorbei { opacity: .55; }
/* Uebergaenge sind das Einzige, was beide Choere verbindet. Sie bleiben
 * deshalb bewusst in der neutralen Hinweisfarbe statt in der Chorfarbe. */
.heute-uebergang { display: block; color: inherit; border-color: var(--info); }
.heute-uebergang:hover { text-decoration: none; background: var(--info-bg); }
.heute-uebergang .karte__titel { display: flex; align-items: center; gap: var(--space-2); }
.heute-link { color: var(--text-muted); display: inline-flex;
              align-items: center; gap: 4px; }
.heute-link:hover { color: var(--chor); text-decoration: none; }
/* Derselbe Link als Formularknopf (legt die Probe erst an) */
.heute-link--knopf { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.heute-probe__links { flex-wrap: wrap; gap: var(--space-4); }
/* Kompakte Zeilen fuer Listen, die man ueberfliegt statt liest */
.person--kompakt { min-height: 48px; padding-block: 6px; }
.person--heute { background: var(--accent-bg); }
.heute-geburtstag { color: var(--accent-fg); }
.karte__fuss { display: block; padding: var(--space-3) var(--space-4);
               border-top: 1px solid var(--border); }
.serie { flex: 0 0 36px; height: 36px; display: grid; place-items: center;
         border-radius: var(--radius-pill); background: var(--danger-bg);
         color: var(--danger); font-weight: var(--weight-bold);
         font-size: var(--text-sm); }
.zustaendig--inaktiv .person__name { color: var(--text-subtle); }

/* --- Merkmale statt Kennzahl-Kacheln --- */
.merkmale { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
            margin: 0; }
.merkmale > div { display: flex; align-items: baseline; gap: var(--space-2); }
.merkmale dt { font-size: var(--text-xs); color: var(--text-muted); margin: 0; }
.merkmale dd { margin: 0; font-weight: var(--weight-medium); }
/* Einzelne Proben, zugeklappt am Ende der Anwesenheitskarte. Die Liste
 * zieht sich mit negativem Rand bis an die Kartenkante. */
.verlauf__klapp summary { cursor: pointer; color: var(--chor);
                          font-size: var(--text-sm); list-style: none; }
.verlauf__klapp summary::-webkit-details-marker { display: none; }
.verlauf__klapp summary:hover { text-decoration: underline; }
.verlauf__klapp .zeilen { margin: var(--space-3) calc(var(--space-4) * -1)
                                  calc(var(--space-4) * -1);
                          border-top: 1px solid var(--border); }

/* --- Ausbildungsstand und Stimmen --- */
.bedarf { display: flex; flex-wrap: wrap; gap: var(--space-2);
          margin: var(--space-3) 0; }
.bedarf__stufe { display: flex; flex-direction: column; align-items: center;
                 gap: 2px; padding: var(--space-2) var(--space-3);
                 border: 1px solid var(--border); border-radius: var(--radius);
                 background: var(--surface); color: var(--text); min-width: 68px; }
.bedarf__stufe:hover { text-decoration: none; border-color: var(--chor); }
.bedarf__stufe--aktiv { border-color: var(--chor); background: var(--chor-weich);
                        border-width: 2px; }
.bedarf__stufe--leer { opacity: .45; }
.bedarf__zahl { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.bedarf__marke { font-size: var(--text-xs); color: var(--text-muted);
                 white-space: nowrap; }

.fortschritt { display: flex; align-items: center; gap: var(--space-3);
               padding: var(--space-3) var(--space-4); background: var(--surface);
               color: inherit; min-height: 54px; }
.fortschritt:hover { text-decoration: none; background: var(--surface-2); }
.fortschritt__balken { flex: 0 0 60px; height: 6px; background: var(--surface-3);
                       border-radius: var(--radius-pill); overflow: hidden; }
.fortschritt__fuellung { display: block; height: 100%; background: var(--success);
                         border-radius: var(--radius-pill); }
.kennzahl--offen { border-color: var(--warning); background: var(--warning-bg); }

/* Kacheln, die filtern (Stimmenverteilung). Sie sehen aus wie die anderen,
 * lassen sich aber antippen — deshalb nur Zeiger und Rand beim Darueber-
 * fahren, damit die Seite nicht unruhig wird. Die aktive Kachel steht nach
 * --offen, damit sie die Warnfarbe der noch nicht Eingeteilten schlaegt. */
.kennzahl--waehlbar { color: inherit; cursor: pointer; }
.kennzahl--waehlbar:hover { text-decoration: none; border-color: var(--chor); }
.kennzahl--aktiv { border-color: var(--chor); background: var(--chor-weich); }
.kennzahl--aktiv .kennzahl__wert { color: var(--chor-text); }
.kennzahl--aktiv .kennzahl__marke { color: var(--chor-text); }
/* Gefaerbte Kacheln fuer die Stimmdaten im Steckbrief. Welche Farbe ein
 * Wert bekommt, steht am Wert (auswahlwerte.farbe) — hier stehen nur die
 * drei Bedeutungen, die es dafuer gibt. */
.kennzahl--success { border-color: var(--success); background: var(--success-bg); }
.kennzahl--success .kennzahl__wert { color: var(--success); }
.kennzahl--warning { border-color: var(--warning); background: var(--warning-bg); }
.kennzahl--warning .kennzahl__wert { color: var(--warning); }
.kennzahl--danger  { border-color: var(--danger);  background: var(--danger-bg); }
.kennzahl--danger .kennzahl__wert { color: var(--danger); }

/* --- Aufklappbare Karte (Probe anlegen, Vortraege, Unterlagen) ---
 * Hiess bis zum 11.09.2026 ".saison", nach der einzigen Stelle, die sie
 * damals benutzte. Die Funktion "Ganze Saison anlegen" gibt es nicht mehr. */
.klappkarte__kopf { cursor: pointer; list-style: none; gap: var(--space-2); }
.klappkarte__kopf::-webkit-details-marker { display: none; }
.klappkarte__kopf:hover { background: var(--surface-2); }
.klappkarte[open] .klappkarte__kopf { border-bottom: 1px solid var(--border); }
.detail__notiz--kind { border-top: 1px dashed var(--border);
                       padding-top: var(--space-3); }
.eingabe--schmal { flex: 0 0 auto; width: auto; }

/* --- Probenplan-Editor ---
 * Auf dem Handy zwei Zeilen je Punkt (Uhrzeit + Was, darunter Wer), ab
 * Tablet alles nebeneinander. Das X steht rechts ueber beide Zeilen.
 *
 * Beide Textfelder sahen gleich aus, und sobald etwas darinstand, war der
 * Platzhalter weg — man erkannte nicht mehr, welches die Ueberschrift ist.
 * Dagegen zweierlei: links eine feste Beschriftung (auf dem Handy, wo die
 * Spalte ohnehin frei war) und ab Tablet eine Kopfzeile. Dazu ein
 * Schriftbild wie im fertigen Plan: Titel kraeftig, "Wer?" kleiner. */
.planzeilen { display: flex; flex-direction: column; }
.planzeile { display: grid; gap: var(--space-2); align-items: center;
             padding: var(--space-2) 0; border-bottom: 1px solid var(--border);
             grid-template-columns: 96px 1fr 36px;
             grid-template-areas: "zeit was weg" "wermarke wer weg"; }
.planzeile--zwei { grid-template-areas: "wasmarke was weg" "wermarke wer weg"; }
.planzeile:last-child { border-bottom: none; }
.planzeile__zeit { grid-area: zeit; }
.planzeile__was  { grid-area: was; font-weight: var(--weight-medium); }
.planzeile__wer  { grid-area: wer; font-size: var(--text-sm); }
.planzeile__marke--was { grid-area: wasmarke; }
.planzeile__marke--wer { grid-area: wermarke; }
.planzeile__marke { font-size: var(--text-xs); color: var(--text-subtle);
                    padding-left: 2px; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }
/* Hoch, runter, weg. Auf dem Handy uebereinander in der schmalen Spalte
 * rechts — die Zeile ist dort ohnehin zweizeilig und hoch genug. */
.planzeile__knoepfe { grid-area: weg; display: grid; gap: 1px; align-content: center;
                      justify-items: center; }
.planzeile__knopf { width: 34px; height: 28px; display: grid; place-items: center;
                    color: var(--text-subtle); border-radius: var(--radius-sm);
                    transition: background var(--dauer-schnell) var(--ease); }
.planzeile__knopf:hover { color: var(--text); background: var(--surface-2); }
.planzeile__knopf--weg:hover { color: var(--danger); background: var(--danger-bg); }
/* Ganz oben gibt es kein Hoch, ganz unten kein Runter — der Knopf bleibt
 * stehen, damit die Zeilen nicht springen, wird aber blass und stumm. */
.planzeile__knopf[disabled] { opacity: .25; cursor: default; }
.planzeile__knopf[disabled]:hover { color: var(--text-subtle); background: none; }
.planzeile .eingabe { padding: 8px var(--space-2); }

/* Die Kopfzeile gibt es nur nebeneinander — auf dem Handy stuende sie ueber
 * zwei uebereinanderliegenden Feldern und passte zu keinem. */
.planzeile--kopf { display: none; }

@media (min-width: 600px) {
    .planzeile { grid-template-columns: 110px 1fr 1fr 36px;
                 grid-template-areas: "zeit was wer weg"; }
    /* Nebeneinander ist die Zeile einzeilig — dann stehen auch die drei
     * Knoepfe nebeneinander und brauchen mehr Spalte. */
    .planzeile--zwei { grid-template-columns: 1fr 1fr 110px;
                       grid-template-areas: "was wer weg"; }
    .planzeile--zwei .planzeile__knoepfe { grid-auto-flow: column; gap: var(--space-1); }
    /* Nebeneinander sagt die Kopfzeile dasselbe — einmal statt in jeder Zeile. */
    .planzeile__marke { display: none; }
    .planzeile--kopf { display: grid; padding-bottom: 0; border-bottom: 0;
                       font-size: var(--text-xs); color: var(--text-subtle);
                       text-transform: uppercase; letter-spacing: .04em;
                       font-weight: var(--weight-semibold); }
    .planzeile--kopf .planzeile__was,
    .planzeile--kopf .planzeile__wer { font-weight: var(--weight-semibold);
                                       font-size: var(--text-xs); }
}
.planbild { width: 100%; height: auto; border: 1px solid var(--border);
            border-radius: var(--radius); background: var(--surface); }


/* === Heimatbildschirm: in welchem Chor arbeitest du? ===================
 * Zwei Tueren, keine Liste. Jede Karte traegt oben ein Band in der Farbe
 * ihres Chors — dieselbe Farbe, die danach die ganze App traegt. Dadurch
 * erkennt man beim Eintreten wieder, wo man gelandet ist.
 *
 * --chorfarbe wird je Karte gesetzt (data-chorfarbe aus gruppen.farbe),
 * nicht am Body: hier stehen beide Choere nebeneinander. */
.kopf--heimat { justify-content: space-between; box-shadow: none; }

.heimat { display: grid; gap: var(--space-4); }

.chortuer { display: flex; flex-direction: column;
            background: var(--surface); color: var(--text);
            border: 1px solid var(--border); border-radius: var(--radius-lg);
            overflow: hidden; box-shadow: var(--shadow-sm);
            transition: transform var(--dauer-schnell) var(--ease),
                        box-shadow var(--dauer-schnell) var(--ease); }
.chortuer:hover { text-decoration: none; transform: translateY(-2px);
                  box-shadow: var(--shadow-md); }
.chortuer:active { transform: none; }

.chortuer__band { display: flex; align-items: center; gap: var(--space-3);
                  padding: var(--space-4);
                  background: var(--chor); color: var(--text-on-primary); }
.chortuer__name { font-size: var(--text-xl); font-weight: var(--weight-bold);
                  flex: 1; min-width: 0;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Weisse Plakette auf dem farbigen Band: die Probe heute ist der eine Grund,
 * aus dem man die App am Probentag ueberhaupt oeffnet. */
.chortuer__heute { flex: 0 0 auto; padding: 3px var(--space-3);
                   border-radius: var(--radius-pill);
                   background: var(--surface); color: var(--chor-text);
                   font-size: var(--text-xs); font-weight: var(--weight-bold); }
.chortuer__pfeil { flex: 0 0 auto; opacity: .85; }

.chortuer__koerper { display: flex; align-items: baseline; gap: var(--space-4);
                     padding: var(--space-4); }
.chortuer__zahlen { display: flex; align-items: baseline; gap: var(--space-2);
                    flex: 0 0 auto; }
.chortuer__zahl { font-size: var(--text-2xl); font-weight: var(--weight-bold);
                  line-height: 1; font-variant-numeric: tabular-nums; }
.chortuer__marke { font-size: var(--text-sm); color: var(--text-muted); }
.chortuer__termin { display: flex; flex-direction: column; gap: 2px;
                    font-size: var(--text-sm); color: var(--text-muted);
                    text-align: right; margin-left: auto; }

.chortuer__fuss { display: flex; flex-wrap: wrap; gap: var(--space-2);
                  padding: 0 var(--space-4) var(--space-4); }
.chortuer__marker { display: inline-flex; align-items: center; gap: 5px;
                    padding: 3px var(--space-3); border-radius: var(--radius-pill);
                    background: var(--chor-weich); color: var(--chor-text);
                    font-size: var(--text-xs); font-weight: var(--weight-medium); }
.chortuer__marker--still { background: var(--surface-2); color: var(--text-muted); }

/* Der Probentag hebt die Karte heraus: ein Ring in der Chorfarbe statt
 * eines zweiten Farbtons, damit die Trennung der Choere eindeutig bleibt. */
.chortuer--heute { border-color: var(--chor);
                   box-shadow: 0 0 0 3px var(--chor-weich), var(--shadow); }

/* --- Die Liedersammlung auf dem Heimatbildschirm ---
 * Keine dritte Tuer: sie gehoert beiden Choeren. Deshalb flacher als eine
 * Chorkarte, ohne farbiges Band, ohne Chorfarbe — und ueber die volle
 * Breite, wenn die beiden Tueren nebeneinander stehen.
 * Das Notensymbol traegt beide Chorfarben ineinander. Es ist die einzige
 * Stelle der App, an der sie sich beruehren. */
.regal { display: flex; align-items: center; gap: var(--space-4);
         padding: var(--space-4);
         background: var(--surface); color: var(--text);
         border: 1px solid var(--border); border-radius: var(--radius-lg);
         box-shadow: var(--shadow-sm);
         transition: transform var(--dauer-schnell) var(--ease),
                     box-shadow var(--dauer-schnell) var(--ease); }
.regal:hover { text-decoration: none; transform: translateY(-2px);
               box-shadow: var(--shadow-md); }
.regal:active { transform: none; }
.regal__symbol { flex: 0 0 auto; display: grid; place-items: center;
                 width: 46px; height: 46px; border-radius: var(--radius);
                 background: linear-gradient(135deg, var(--primary), var(--accent));
                 color: var(--text-on-primary); }
/* Seit dem 20.09.2026 steht je Chor ein Regal da. Der Verlauf aus beiden
 * Chorfarben war die Aussage „gehoert beiden" — jetzt traegt jedes die
 * Farbe SEINES Chors, sonst saehen die zwei gleich aus. */
.regal__symbol--chor { background: var(--chor); }
.regal__text { display: flex; flex-direction: column; gap: 2px;
               flex: 1; min-width: 0; }
.regal__name { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.regal__unten { font-size: var(--text-sm); color: var(--text-muted); }
.regal__pfeil { flex: 0 0 auto; color: var(--text-subtle); }

.heimat__fuss { display: flex; justify-content: center; gap: var(--space-2);
                margin-top: auto; padding-top: var(--space-4); }

/* Ab Tablet nebeneinander: zwei Tueren in einer Reihe. */
@media (min-width: 700px) {
    .heimat { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    /* Die Regale stehen nebeneinander wie die Tueren darueber: je Chor
       eine Spalte, Chor und seine Noten also untereinander. */
}

/* Suchtreffer, die NICHT im eigenen Chor liegen: abgesetzt und ruhiger,
 * damit die Trennung sichtbar bleibt und der Weg trotzdem offen ist. */
.anderswo { border-top: 1px solid var(--border); margin-top: var(--space-2); }
.anderswo__kopf { padding: var(--space-3) var(--space-4) var(--space-1); }
.anderswo .person { opacity: .75; }
.anderswo .person:hover { opacity: 1; }

/* --- Einsatz eines Leiters: in welchen Choeren? ---
 * Dieselben Haekchen entscheiden spaeter, welchen Chor jemand mit eigenem
 * Zugang oeffnen darf. Jede Wahl traegt die Farbe ihres Chors, damit die
 * Zuordnung ohne Lesen erkennbar ist. */
.stapel--eng { gap: var(--space-2); }
.einsatz { border: 0; padding: 0; margin: 0;
           display: flex; flex-wrap: wrap; gap: var(--space-2); }
.einsatz .feld__marke { display: block; margin-bottom: var(--space-1); width: 100%; }
.einsatz__wahl { display: inline-flex; align-items: center; gap: var(--space-2);
                 padding: 7px var(--space-3); border-radius: var(--radius-pill);
                 border: 1px solid var(--border-strong); background: var(--surface);
                 font-size: var(--text-sm); font-weight: var(--weight-medium);
                 color: var(--text-muted); cursor: pointer;
                 transition: border-color var(--dauer-schnell) var(--ease),
                             background var(--dauer-schnell) var(--ease); }
.einsatz__wahl:has(input:checked) { border-color: var(--chor); color: var(--chor-text);
                                    background: var(--chor-weich); }
.einsatz__wahl input { accent-color: var(--chor); width: 16px; height: 16px; }

/* === Live-Ablauf: der Abend als Zeitstrahl =============================
 * Die Schiene links ist der Entwurf. Sie laeuft durch alle Punkte und
 * faerbt sich in der Chorfarbe, soweit der Abend gekommen ist — beim
 * laufenden Punkt anteilig (--anteil, je Zeile gesetzt), danach grau.
 * Dadurch sieht man mit einem Blick, wie weit der Abend ist, und nicht
 * nur, was gerade dran waere.
 *
 * Kein Antippen, keine Zustaende: die Anzeige rechnet sich aus Plan und
 * Uhrzeit. Deshalb auch kein Knopf irgendwo in dieser Karte. */
.lauf { background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius-lg); overflow: hidden;
        box-shadow: var(--shadow-sm); }

.lauf__kopf { display: flex; align-items: center; justify-content: space-between;
              padding: var(--space-3) var(--space-4);
              border-bottom: 1px solid var(--border); }
.lauf__marke { display: inline-flex; align-items: center; gap: var(--space-2);
               font-size: var(--text-xs); font-weight: var(--weight-bold);
               letter-spacing: .06em; text-transform: uppercase;
               color: var(--chor-text); }
/* Der pulsierende Punkt sagt ohne Worte: das laeuft gerade. */
.lauf__puls { width: 8px; height: 8px; border-radius: var(--radius-pill);
              background: var(--chor); animation: lauf-puls 2.4s var(--ease) infinite; }
@keyframes lauf-puls {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .3; transform: scale(.7); }
}
.lauf__uhr { display: inline-flex; align-items: baseline; gap: var(--space-2);
             font-size: var(--text-lg); font-weight: var(--weight-bold);
             font-variant-numeric: tabular-nums; }
.lauf__rest { font-size: var(--text-xs); font-weight: var(--weight-medium);
              color: var(--text-muted); letter-spacing: 0; }

/* --- Die Schiene --- */
.strahl { list-style: none; margin: 0; padding: var(--space-2) var(--space-4) var(--space-4); }
.strahl__punkt { display: grid; grid-template-columns: 44px 16px 1fr;
                 column-gap: var(--space-3); align-items: start;
                 min-height: 40px; }
.strahl__zeit { padding-top: 7px; font-size: var(--text-sm);
                font-variant-numeric: tabular-nums; color: var(--text-subtle); }

/* Linie plus Knoten in einer Spalte: die Linie absolut ueber die volle
 * Zeilenhoehe, der Knoten darueber. */
.strahl__schiene { position: relative; align-self: stretch; }
.strahl__schiene::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
                           width: 2px; transform: translateX(-50%);
                           background: var(--surface-3); }
.strahl__schiene::after { content: ''; position: absolute; left: 50%; top: 11px;
                          width: 9px; height: 9px; transform: translate(-50%, -50%);
                          border-radius: var(--radius-pill);
                          background: var(--surface);
                          box-shadow: inset 0 0 0 2px var(--surface-3); }
/* Der erste und der letzte Knoten sitzen am Ende der Linie, nicht mittendrin. */
.strahl__punkt:first-child .strahl__schiene::before { top: 11px; }
.strahl__punkt:last-child  .strahl__schiene::before { bottom: calc(100% - 11px); }

/* Vorbei: Linie und Knoten voll in der Chorfarbe. */
.strahl__punkt--vorbei .strahl__schiene::before { background: var(--chor); }
.strahl__punkt--vorbei .strahl__schiene::after { background: var(--chor);
                                                 box-shadow: none; }
/* Vorbei ist vorbei: enger und kleiner. Das laesst den laufenden Punkt
 * herausstehen und haelt die Karte kurz genug fuer einen Blick. */
.strahl__punkt--vorbei { min-height: 32px; }
.strahl__punkt--vorbei .strahl__titel { color: var(--text-subtle);
                                        font-size: var(--text-sm);
                                        font-weight: var(--weight-normal); }
.strahl__punkt--vorbei .strahl__zeit { color: var(--text-subtle); opacity: .7;
                                       font-size: var(--text-xs); padding-top: 8px; }
.strahl__punkt--vorbei .strahl__text { padding-top: 6px; }
.strahl__punkt--vorbei .strahl__wer { font-size: var(--text-xs); opacity: .8; }
.strahl__punkt--vorbei .strahl__schiene::after { width: 7px; height: 7px; }

/* Laufend: die Linie bis --anteil gefuellt, der Knoten gross mit Hof. */
.strahl__punkt--laeuft .strahl__schiene::before {
    background: linear-gradient(var(--chor) var(--anteil, 0%),
                                var(--surface-3) var(--anteil, 0%));
}
.strahl__punkt--laeuft .strahl__schiene::after {
    width: 13px; height: 13px; background: var(--chor); box-shadow: none;
    outline: 4px solid var(--chor-weich);
}
.strahl__punkt--laeuft { padding-block: var(--space-2); }
.strahl__punkt--laeuft .strahl__zeit { color: var(--chor-text);
                                       font-weight: var(--weight-bold); }
.strahl__punkt--laeuft .strahl__titel { font-size: var(--text-2xl);
                                        font-weight: var(--weight-bold);
                                        line-height: 1.15; }

.strahl__text { display: flex; flex-direction: column; gap: 2px;
                padding-top: 4px; min-width: 0; }
.strahl__titel { font-weight: var(--weight-medium); }
.strahl__unten { display: flex; flex-wrap: wrap; align-items: center;
                 gap: var(--space-2); margin-top: var(--space-1); }
/* Die eine Zahl, die waehrend der Probe zaehlt. */
.strahl__rest { padding: 3px var(--space-3); border-radius: var(--radius-pill);
                background: var(--chor-weich); color: var(--chor-text);
                font-size: var(--text-xs); font-weight: var(--weight-bold); }
.strahl__wer { font-size: var(--text-sm); color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
    .lauf__puls { animation: none; }
}

/* --- Was fuer den ganzen Abend gilt: Aufteilung und Organisation ---
 * Sie haengen an keinem Augenblick, gehoeren also nicht in den Zeitstrahl.
 * Gleichzeitig muessen sie dastehen, ohne dass jemand etwas aufklappt —
 * die Karte soll das verschickte Bild ersetzen. Deshalb ruhige Paare
 * "Was -> Wer/Wo" unter einem Trenner, dicht gesetzt. */
.planteil { border-top: 1px solid var(--border); background: var(--surface-2);
            padding: var(--space-3) var(--space-4) var(--space-4); }
.planteil__ueber { margin: 0 0 var(--space-3); font-size: var(--text-xs);
                   color: var(--text-subtle); text-transform: uppercase;
                   letter-spacing: .05em; font-weight: var(--weight-semibold); }
.planteil__block + .planteil__block { margin-top: var(--space-4); }
.planteil__marke { margin: 0 0 var(--space-1); font-size: var(--text-sm);
                   font-weight: var(--weight-bold); color: var(--chor-text); }

.paare { margin: 0; }
/* Zwei Spalten wie auf dem gedruckten Plan: links was, rechts wer/wo.
 * 7,5rem lassen auf 390 px noch rund 210 px fuer den Wert — "Vater, ich
 * komme jetzt zu dir" passt damit in eine Zeile. Laengeres bricht um,
 * statt die Spalte zu sprengen. */
.paare__zeile { display: grid; grid-template-columns: minmax(0, 7.5rem) 1fr;
                gap: var(--space-3); padding: 6px 0;
                border-top: 1px solid var(--border); }
.paare__zeile:first-child { border-top: 0; }
.paare__was { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.paare__wer { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); }

/* Erst auf sehr schmalen Schirmen untereinander — darunter bliebe neben
 * "Einzelunterricht" nur noch ein Streifen fuer den Namen. */
@media (max-width: 340px) {
    .paare__zeile { grid-template-columns: 1fr; gap: 0; }
}

/* Ab Tablet nebeneinander: der Zeitstrahl links, das Zeitlose rechts.
 * Auf dem Handy bleibt es untereinander — dort zaehlt die Reihenfolge. */
@media (min-width: 700px) {
    .lauf { display: grid; grid-template-columns: 1fr minmax(240px, 320px);
            grid-template-areas: "kopf kopf" "strahl teil"; }
    .lauf__kopf   { grid-area: kopf; }
    .strahl       { grid-area: strahl; }
    .planteil     { grid-area: teil; border-top: 0;
                    border-left: 1px solid var(--border); }
}

/* --- Was die App zum Plan dazutut ---
 * Steht in der Organisationskarte, unter den Feldern. "Verabschieden" ist
 * ein Vorschlag und deshalb antippbar: jeder Name eine Marke mit x. Wer
 * heute nicht dran ist, fliegt raus und steht naechste Woche wieder da. */
.dazu { margin-top: var(--space-3); padding: var(--space-3);
        border-radius: var(--radius); background: var(--chor-weich);
        display: flex; flex-direction: column; gap: var(--space-3); }
.dazu__marke { margin: 0 0 var(--space-2); font-size: var(--text-xs);
               font-weight: var(--weight-bold); color: var(--chor-text);
               text-transform: uppercase; letter-spacing: .04em; }
.dazu__hinweis, .dazu__leer { margin: var(--space-2) 0 0;
                              font-size: var(--text-xs); color: var(--text-muted); }
.dazu__leer { margin-top: 0; }
.dazu__namen { margin: 0; font-size: var(--text-sm);
               font-weight: var(--weight-medium); }

.marken { list-style: none; margin: 0; padding: 0;
          display: flex; flex-wrap: wrap; gap: var(--space-2); }
.marke { display: inline-flex; align-items: center; gap: var(--space-1);
         padding: 4px 4px 4px var(--space-3); border-radius: var(--radius-pill);
         background: var(--surface); border: 1px solid var(--border-strong);
         font-size: var(--text-sm); font-weight: var(--weight-medium); }
.marke__name { white-space: nowrap; }
/* 24 px: kleiner trifft man auf dem Handy nicht, groesser sprengt die Marke. */
.marke__weg { width: 24px; height: 24px; display: grid; place-items: center;
              border-radius: var(--radius-pill); color: var(--text-subtle); }
.marke__weg:hover { color: var(--danger); background: var(--danger-bg); }

/* --- Programm eines Vortrags ---
 * Eine Karte, je Lied ein Block: Platz, Titel, rechts hoch/runter/weg wie
 * im Probenplan. Darunter die Solos und Duette, eingerückt unter den
 * Titel, damit die Platznummer links eine Kante bildet. */
.programm { list-style: none; margin: 0; padding: 0; }
.programm__lied { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.programm__lied:first-child { border-top: none; }
.programm__kopf { display: flex; align-items: flex-start; gap: var(--space-3); }
.programm__platz { flex: 0 0 28px; height: 28px; display: grid; place-items: center;
                   border-radius: var(--radius-pill); background: var(--chor-weich);
                   color: var(--chor-text); font-size: var(--text-sm);
                   font-weight: var(--weight-bold); }
.programm__titel { flex: 1; min-width: 0; display: flex; flex-direction: column;
                   gap: 2px; padding-top: 3px; font-weight: var(--weight-semibold); }
.programm__titel a { color: var(--text); }
.programm__knoepfe { display: flex; gap: 1px; flex: 0 0 auto; }
.programm__rollen { list-style: none; margin: var(--space-2) 0 0 40px; padding: 0;
                    display: flex; flex-direction: column; gap: var(--space-1); }
.programm__rolle { display: flex; align-items: center; gap: var(--space-2);
                   flex-wrap: wrap; font-size: var(--text-sm); }
.programm__art { padding: 1px var(--space-2); border-radius: var(--radius-pill);
                 background: var(--surface-2); color: var(--text-muted);
                 font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.programm__kinder { flex: 1; min-width: 0; }
/* Ein Name bricht nie in der Mitte um, nur zwischen zwei Namen. */
.programm__kinder a { color: var(--text); white-space: nowrap; }
.programm__neu { margin: var(--space-2) 0 0 40px; }
.programm__neu-kopf { display: inline-flex; align-items: center; gap: var(--space-1);
                      cursor: pointer; list-style: none; font-size: var(--text-sm);
                      color: var(--chor-text); font-weight: var(--weight-medium); }
.programm__neu-kopf::-webkit-details-marker { display: none; }
.programm__neu[open] .programm__neu-kopf { margin-bottom: var(--space-2); }
.programm__formular { display: flex; flex-direction: column; gap: var(--space-2);
                      align-items: flex-start; }
.programm__formular .eingabe { width: 100%; }
.programm__kinderwahl { width: 100%; display: flex; flex-direction: column;
                        gap: var(--space-2); }
/* Ein weiteres Kind: Auswahl und x nebeneinander, nicht im Raster der
 * Planzeile (von der nur das Entfernen geliehen ist). */
.planzeile.programm__kind { display: flex; align-items: center; gap: var(--space-1); }
.programm__hinzu { display: flex; flex-direction: column; gap: var(--space-2); }
.programm__hinzu-reihe { display: flex; gap: var(--space-2); }
.programm__hinzu-reihe .eingabe { flex: 1; min-width: 0; }

/* Im Probenplan und im Steckbrief: das Programm zum Lesen, ohne Knöpfe. */
.programm-kurz { list-style: none; margin: 0; padding: 0;
                 display: flex; flex-direction: column; gap: var(--space-2); }
.programm-kurz__titel { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.programm-kurz__rolle { font-size: var(--text-sm); color: var(--text-muted); }
/* Die Karte „Vortrag“ im Probenplan: Rahmen und Kopf in der Chorfarbe,
 * damit sie sich vom Plan des Abends absetzt. */
.vortragskarte { border-color: var(--chor); }
.vortragskarte__kopf { background: var(--chor-weich); color: var(--chor-text);
                       border-bottom-color: var(--chor); }
.programm-kurz__lied { display: flex; align-items: flex-start; gap: var(--space-3); }
.programm-kurz__nr { flex: 0 0 24px; height: 24px; display: grid; place-items: center;
                     border-radius: var(--radius-pill); background: var(--chor-weich);
                     color: var(--chor-text); font-size: var(--text-xs);
                     font-weight: var(--weight-bold); }
.programm-kurz__inhalt { display: flex; flex-direction: column; gap: 2px; min-width: 0;
                         padding-top: 2px; }

/* Ein Vortrag in der Probenliste öffnet sein Programm. Der Text ist der
 * Link und sieht aus wie vorher, der Papierkorb daneben bleibt ein Knopf. */
a.person__text { color: inherit; }
a.person__text:hover { text-decoration: none; }
a.person__text:hover .person__name { color: var(--chor); }

/* --- Solo und Duett im Steckbrief --- */
.auftritte { list-style: none; margin: 0; padding: 0; }
.auftritt { display: flex; flex-direction: column; gap: 2px;
            padding: var(--space-3) var(--space-4); }
.auftritt__lied { font-weight: var(--weight-medium); color: var(--text); }

/* Der nächste Vortrag als erster Termin in der Probenliste: das Datum in
 * der Chorfarbe, damit er sich von den Proben abhebt. */
.probe--vortrag .probe__datum { background: var(--chor-weich); color: var(--chor-text); }
.probe--vortrag .probe__jahr { color: var(--chor-text); }
.probe--vortrag .probe__pfeil { color: var(--chor); }

/* Der Vortrag im Live-Probenplan auf der Startseite: abgesetzt vom Abend
 * durch einen Strich in der Chorfarbe und die Überschrift in Chorfarbe. */
.planteil--vortrag { border-top: 2px solid var(--chor); background: var(--chor-weich); }
.planteil--vortrag .planteil__ueber { color: var(--chor-text); display: flex;
                                      align-items: center; gap: var(--space-1); }