/* Startseite („Start“), neu gebaut am 24.10.2026.
 * Eigene Datei, damit die bisherige Fassung (Stile in bereiche.css unter
 * „heute-“) unberührt bleibt und sich wieder einsetzen lässt.
 * Abstände zwischen den Karten setzt .inhalt (gap), nicht diese Datei.
 * Nur Werte aus tokens.css; Mischfarben über color-mix.
 */

/* --- Begrüßung --- */
.start-gruss__text { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold);
                     line-height: 1.2; }
.start-gruss__tag { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-muted); }

/* --- Die große Karte: die nächste Probe --- */
.start-held { position: relative; overflow: hidden; isolation: isolate;
              display: flex; flex-direction: column; gap: var(--space-2);
              padding: var(--space-5); border-radius: var(--radius-xl);
              color: var(--text-on-primary); box-shadow: var(--shadow-md);
              background: linear-gradient(140deg, var(--chor), var(--chor-hover)); }
/* Zwei ruhige Kreise im Hintergrund, nur als Schmuck. */
.start-held::before, .start-held::after {
    content: ""; position: absolute; z-index: -1; border-radius: 50%;
    background: color-mix(in srgb, var(--text-on-primary) 9%, transparent); }
.start-held::before { width: 200px; height: 200px; right: -70px; top: -80px; }
.start-held::after { width: 120px; height: 120px; right: 40px; bottom: -70px; }
.start-held__kopf { display: flex; align-items: center; justify-content: space-between;
                    gap: var(--space-2); }
.start-held__marke { font-size: var(--text-xs); font-weight: var(--weight-bold);
                     text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.start-held__wann { padding: 2px var(--space-3); border-radius: var(--radius-pill);
                    font-size: var(--text-xs); font-weight: var(--weight-semibold);
                    background: color-mix(in srgb, var(--text-on-primary) 20%, transparent); }
.start-held__datum { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1.1; }
.start-held__zeile { font-size: var(--text-sm); opacity: .9; }
.start-held__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
/* Formulare (Probe von heute anlegen) sollen sich wie ihre Knöpfe einreihen. */
.start-held__knoepfe > form { display: contents; }
.start-knopf { display: inline-flex; align-items: center; justify-content: center;
               gap: var(--space-2); min-height: 46px; padding: 0 var(--space-4);
               border: 0; border-radius: var(--radius); cursor: pointer;
               font: inherit; font-weight: var(--weight-semibold); text-decoration: none; }
.start-knopf:hover { text-decoration: none; }
.start-knopf--voll { flex: 1 1 auto; background: var(--text-on-primary); color: var(--chor-hover); }
/* Rutscht ein Knopf in die zweite Reihe, füllt er sie ganz. */
.start-knopf--leise { flex: 1 1 auto;
                      background: color-mix(in srgb, var(--text-on-primary) 18%, transparent);
                      color: var(--text-on-primary); }
.start-knopf--leise:hover { background: color-mix(in srgb, var(--text-on-primary) 26%, transparent); }
.start-held__anlaesse { list-style: none; margin: var(--space-2) 0 0; padding: var(--space-3) 0 0;
                        display: flex; flex-direction: column; gap: var(--space-1);
                        border-top: 1px solid color-mix(in srgb, var(--text-on-primary) 25%, transparent);
                        font-size: var(--text-sm); }
.start-held__anlaesse li { display: flex; align-items: center; gap: var(--space-2); }

/* Kleine Überschrift über einem Abschnitt */
.start-marke { margin: 0; display: flex; align-items: center; gap: var(--space-1);
               font-size: var(--text-xs); font-weight: var(--weight-bold);
               text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }

/* --- Im Blick --- */
.start-blick__zeile { display: flex; align-items: center; gap: var(--space-3);
                      padding: var(--space-3) var(--space-4); color: inherit; }
a.start-blick__zeile:hover { background: var(--surface-2); text-decoration: none; }
.start-blick__symbol { flex: 0 0 34px; height: 34px; display: grid; place-items: center;
                       border-radius: var(--radius); }
.start-blick__symbol--info { background: var(--info-bg); color: var(--info); }
.start-blick__symbol--warning { background: var(--warning-bg); color: var(--warning); }
.start-blick__symbol--danger { background: var(--danger-bg); color: var(--danger); }
.start-blick__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.start-blick__titel { font-weight: var(--weight-medium); }
.start-namen { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.start-name { padding: 2px var(--space-2); border-radius: var(--radius-pill);
              background: var(--danger-bg); color: var(--text); font-size: var(--text-xs); }
.start-name:hover { text-decoration: none; }
.start-name b { color: var(--danger); margin-left: 2px; }
.start-name--mehr { background: var(--surface-2); color: var(--text-muted); }

/* --- Die letzten Proben --- */
.start-verlauf { display: block; padding: var(--space-4); color: inherit; }
.start-verlauf:hover { text-decoration: none; }
.start-verlauf__kopf { display: flex; align-items: flex-start; justify-content: space-between;
                       gap: var(--space-3); }
.start-verlauf__zahl { margin: var(--space-1) 0 0; font-size: var(--text-lg); }
.start-verlauf__zahl b { font-size: var(--text-2xl); }
.start-verlauf__quote { padding: 2px var(--space-3); border-radius: var(--radius);
                        font-size: var(--text-xl); font-weight: var(--weight-bold); }
.start-verlauf__quote--gut { background: var(--success-bg); color: var(--success); }
.start-verlauf__quote--mittel { background: var(--warning-bg); color: var(--warning); }
.start-verlauf__quote--wenig { background: var(--danger-bg); color: var(--danger); }
.start-balken { display: flex; align-items: flex-end; gap: var(--space-2); height: 120px;
                margin: var(--space-4) 0 var(--space-2); }
.start-balken__spalte { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column;
                        align-items: center; justify-content: flex-end; gap: 3px; }
/* --hoehe ist der Anteil am höchsten Balken: der höchste füllt knapp drei
 * Viertel der Spalte, der Rest bleibt für Zahl und Datum. */
.start-balken__balken { width: 100%; max-width: 34px; height: calc(var(--hoehe) * .72);
                        border-radius: 6px 6px 2px 2px;
                        background: color-mix(in srgb, var(--chor) 30%, var(--surface)); }
.start-balken__spalte--letzte .start-balken__balken { background: var(--chor); }
.start-balken__wert { font-size: var(--text-xs); color: var(--text-muted); }
.start-balken__spalte--letzte .start-balken__wert { color: var(--chor-text); font-weight: var(--weight-bold); }
.start-balken__tag { font-size: 10px; color: var(--text-subtle); white-space: nowrap; }
.start-verlauf__fuss { display: flex; justify-content: space-between; align-items: center;
                       margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.start-verlauf__weiter { display: inline-flex; align-items: center; gap: 2px; color: var(--chor-text); }

/* --- Geburtstage: ein Streifen zum Wischen --- */
.start-abschnitt__kopf { display: flex; align-items: center; justify-content: space-between;
                         margin-bottom: var(--space-2); }
/* Der Streifen läuft bis an den Bildschirmrand, damit die angeschnittene
 * Karte zeigt, dass es weitergeht. */
.start-gebstreifen { display: flex; gap: var(--space-2); overflow-x: auto;
                     margin-inline: calc(-1 * var(--space-4)); padding: 0 var(--space-4) 2px;
                     scroll-padding-inline: var(--space-4);
                     scroll-snap-type: x mandatory; scrollbar-width: none; }
.start-gebstreifen::-webkit-scrollbar { display: none; }
.start-geb { flex: 0 0 136px; scroll-snap-align: start; display: flex; flex-direction: column;
             gap: 1px; padding: var(--space-3); border-radius: var(--radius-lg);
             background: var(--surface); border: 1px solid var(--border);
             box-shadow: var(--shadow-sm); color: inherit; }
.start-geb:hover { text-decoration: none; border-color: var(--chor); }
.start-geb--heute { background: var(--chor-weich); border-color: var(--chor); }
.start-geb__wann { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--chor-text); }
.start-geb__name { margin-top: var(--space-1); font-weight: var(--weight-semibold); }
.start-geb__nach, .start-geb__alter { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-geb__nach { font-size: var(--text-sm); color: var(--text-muted); }
.start-geb__alter { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); }

/* --- Der nächste Vortrag --- */
.start-vortrag { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4);
                 color: inherit; }
.start-vortrag:hover { text-decoration: none; background: var(--surface-2); }
.start-vortrag__symbol { flex: 0 0 46px; height: 46px; display: grid; place-items: center;
                         border-radius: var(--radius-lg); background: var(--chor-weich);
                         color: var(--chor-text); }
.start-vortrag__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.start-vortrag__titel { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.start-vortrag__programm { margin-top: 2px; font-size: var(--text-sm); font-weight: var(--weight-medium);
                           color: var(--chor-text); }