/* ====================================================================
   Übungsleiter-App  (/team/)
   --------------------------------------------------------------------
   Der Bereich ist kein Website-Unterordner, sondern eine App, die auf
   dem Startbildschirm liegt und in der Turnhalle einhändig bedient
   wird. Deshalb ein eigenes Stylesheet statt der Marketing-Seite:
   dichter gesetzt, groessere Tippflaechen, dunkler Modus.

   Die Marke bleibt: Nunito, Koralle, Creme und die kontrastgeprueften
   Varianten aus css/style.css werden hier weiterverwendet, nicht neu
   erfunden. Hinter jedem var() steht trotzdem ein fester Wert — damit
   diese Datei fuer sich allein vollstaendig ist und die App auch dann
   richtig aussieht, wenn style.css einmal nicht mitkommt.
   ==================================================================== */

:root {
    /* --- Flaechen ------------------------------------------------- */
    --t-grund:      #FBF6F0;   /* Seitenhintergrund, eine Spur ruhiger als Creme */
    --t-flaeche:    #FFFFFF;   /* Karten */
    --t-flaeche-2:  #FFF8F0;   /* hervorgehobene Karten */
    --t-rand:       #EFE4D6;
    --t-rand-stark: #E2D4C2;

    /* --- Schrift -------------------------------------------------- */
    --t-text:       var(--c-ink,      #2B2B36);
    --t-text-leise: var(--c-muted,    #6E6A72);

    /* --- Akzente -------------------------------------------------- */
    --t-akzent:     var(--c-koralle,  #FF6B5C);          /* Raender, Fokus, Dekor */
    --t-akzent-t:   var(--c-koralle-kontrast, #B8392A);  /* Text in Akzentfarbe */
    --t-akzent-w:   var(--c-koralle-soft,     #FFE7E3);  /* Akzent als Flaeche */
    --t-gut:        var(--c-gruen,    #3DBA8B);
    --t-gut-t:      var(--c-gruen-kontrast,   #1F6B4F);
    --t-gut-w:      var(--c-gruen-soft,       #DCF3EA);
    --t-warn-w:     var(--c-gelb-soft,        #FFF0CE);
    --t-warn-t:     var(--c-gelb-text,        #856512);

    /* Fuellung fuer alles, worauf TEXT steht — Knoepfe und volle Chips.
       Die Markenkoralle selbst taugt dafuer nicht: Weiss darauf erreicht
       2,8:1, WCAG AA verlangt 4,5:1. "Einbuchen" ist die wichtigste
       Beschriftung der App und wird in der Halle auch bei Sonne durchs
       Hallenfenster gelesen. --c-koralle-kontrast haelt die Marke und
       kommt auf 5,7:1 — sowohl fuer die Beschriftung als auch fuer den
       Umriss des Knopfes gegen die weisse Karte. Koralle schaffte dort
       nur 2,8:1 und der Knopf verschwaemme mit dem Hintergrund. */
    --t-voll:       var(--c-koralle-kontrast, #B8392A);
    --t-voll-t:     #FFFFFF;
    --t-voll-gut:   var(--c-gruen-kontrast,   #1F6B4F);

    /* Auf der dunklen Scan-Leiste kehrt sich das um: dort erreicht der
       dunkle Ton nur 2,44:1 und der Knopf verschwindet fast. Die helle
       Koralle steht mit 5:1 gegen die Leiste und traegt dunkle Schrift
       mit ebenfalls 5:1. Gleiche Regel, anderer Untergrund. */
    --t-scan-voll:   var(--c-koralle, #FF6B5C);
    --t-scan-voll-t: #2B2B36;

    /* --- Kopf- und Fussleiste ------------------------------------- */
    --t-leiste:     #2B2B36;
    --t-leiste-t:   #FFFFFF;

    /* --- Form ----------------------------------------------------- */
    --t-radius:     16px;
    --t-radius-sm:  11px;
    --t-radius-pill: 999px;
    --t-schatten:   0 1px 2px rgba(43,43,54,.05), 0 4px 14px rgba(43,43,54,.05);
    --t-schatten-h: 0 2px 6px rgba(43,43,54,.08), 0 12px 28px rgba(43,43,54,.09);

    /* Sichere Bereiche: Notch oben, Home-Indikator unten. Ohne diese
       Polster schoebe sich die Kopfleiste im installierten Zustand unter
       die Statusleiste und die Fussleiste unter den Balken am unteren
       Rand — beides genau dort, wo getippt wird. */
    --t-oben:       env(safe-area-inset-top,    0px);
    --t-unten:      env(safe-area-inset-bottom, 0px);
    --t-links:      env(safe-area-inset-left,   0px);
    --t-rechts:     env(safe-area-inset-right,  0px);

    --t-leiste-h:   56px;   /* Kopfleiste ohne sicheren Bereich */
    --t-tabs-h:     60px;   /* Fussleiste ohne sicheren Bereich */
}

/* Dunkler Modus. Turnhallen im Winter sind abends dunkel, und ein weiss
   leuchtendes Handy blendet die halbe Gruppe. Die Koralle wird dafuer
   aufgehellt: der Markenton erreicht auf dunklem Grund nur 3,1:1, der
   hellere kommt auf 6,4:1 und bleibt erkennbar dieselbe Farbe. */
@media (prefers-color-scheme: dark) {
    :root {
        /* Karten liegen sichtbar ueber dem Grund: Flaeche 1,22:1, Rand
           1,89:1. Ohne diese Trennung verschwaemme die Liste im dunklen
           Modus zu einer einzigen Flaeche. */
        --t-grund:      #15151C;
        --t-flaeche:    #262633;
        --t-flaeche-2:  #30303F;
        --t-rand:       #43435A;
        --t-rand-stark: #55556E;

        --t-text:       #F3EFEA;
        --t-text-leise: #A6A0AE;

        --t-akzent:     #FF8577;
        --t-akzent-t:   #FFAFA4;
        --t-akzent-w:   #3A2320;
        --t-gut:        #4FD3A0;
        --t-gut-t:      #7FE3BC;
        --t-gut-w:      #17342A;
        --t-warn-w:     #3A3018;
        --t-warn-t:     #F0CE7E;

        /* Umgekehrt zum hellen Modus: hier ist die helle Koralle die
           Flaeche und die Schrift dunkel — ein dunkler Knopf auf dunklem
           Grund verschwaende sonst die Aufmerksamkeit, die er braucht. */
        --t-voll:       #FF8577;
        --t-voll-t:     #15151C;
        --t-voll-gut:   #4FD3A0;
        /* Die Leiste ist hier ohnehin dunkel — derselbe Ton passt. */
        --t-scan-voll:   #FF8577;
        --t-scan-voll-t: #15151C;

        --t-leiste:     #1E1E28;
        --t-leiste-t:   #F3EFEA;

        --t-schatten:   0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
        --t-schatten-h: 0 2px 6px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.4);
    }
}

/* ==================================================================
   Grundgeruest
   ================================================================== */

html.t-app, html.t-app body {
    background: var(--t-grund);
    color: var(--t-text);
}
/* style.css faerbt alle Ueberschriften fest mit --c-ink. Das ist auf der
   hellen Vereinsseite richtig, im dunklen Modus aber dunkel auf dunkel —
   die Abschnittstitel waeren praktisch unsichtbar. Die Regel hier ist
   spezifischer und zieht sie zurueck in die Textfarbe des Modus. */
html.t-app h1, html.t-app h2, html.t-app h3, html.t-app h4 {
    color: var(--t-text);
}

html.t-app body {
    font-family: var(--font-base, 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    /* Kein Gummiband-Effekt beim Ueberscrollen — in einer App ueber dem
       Rand hinauszuziehen sieht nach kaputter Seite aus. */
    overscroll-behavior-y: none;
}

/* Die Fussleiste liegt fix ueber dem Inhalt. Ohne dieses Polster
   verschwindet die letzte Zeile jeder Liste dahinter. */
.t-inhalt {
    padding: 16px calc(14px + var(--t-links)) calc(24px + var(--t-tabs-h) + var(--t-unten)) calc(14px + var(--t-rechts));
    max-width: 640px;
    margin: 0 auto;
}
.t-inhalt--schmal { max-width: 520px; }
/* Seiten ohne Fussleiste (Anmeldung, Fehlerseiten) brauchen das Polster nicht. */
.t-inhalt--frei { padding-bottom: calc(32px + var(--t-unten)); }

/* ==================================================================
   Kopfleiste
   ================================================================== */

.t-bar {
    position: sticky; top: 0; z-index: 30;
    background: var(--t-leiste);
    color: var(--t-leiste-t);
    padding: calc(var(--t-oben) + 8px) calc(14px + var(--t-rechts)) 10px calc(14px + var(--t-links));
    display: flex; align-items: center; gap: 10px;
    min-height: var(--t-leiste-h);
    box-sizing: content-box;
}
.t-bar__zurueck {
    flex: none;
    width: 40px; height: 40px; margin-left: -8px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: inherit; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.t-bar__zurueck:hover, .t-bar__zurueck:focus-visible { background: rgba(255,255,255,.12); color: inherit; }
.t-bar__zurueck svg { width: 22px; height: 22px; }

.t-bar__mitte { flex: 1; min-width: 0; }
.t-bar__titel {
    margin: 0;
    font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em;
    color: inherit;
    /* Ein langer Kursname darf die Leiste nicht auf drei Zeilen sprengen. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.t-bar__sub {
    font-size: .8rem; opacity: .72; margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.t-bar__tat {
    flex: none;
    min-width: 40px; height: 40px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: rgba(255,255,255,.14); color: inherit;
    border: 0; border-radius: var(--t-radius-sm);
    font: inherit; font-size: .82rem; font-weight: 700;
    text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.t-bar__tat:hover, .t-bar__tat:focus-visible { background: rgba(255,255,255,.24); color: inherit; }
.t-bar__tat svg { width: 19px; height: 19px; }

/* Zaehler in der Kopfleiste: „12 anwesend“ ist die eine Zahl, die
   waehrend der Stunde staendig abgelesen wird — sie bleibt im Blick,
   auch wenn die Liste weit nach unten gescrollt ist. */
.t-bar__zaehler {
    flex: none;
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 5px 11px;
    background: rgba(255,255,255,.14);
    border-radius: var(--t-radius-pill);
    font-variant-numeric: tabular-nums;
}
.t-bar__zaehler b { font-size: 1.12rem; font-weight: 800; line-height: 1; }
.t-bar__zaehler span { font-size: .72rem; opacity: .78; }

/* ==================================================================
   Fussleiste (Reichweite des Daumens)
   ================================================================== */

.t-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex;
    background: var(--t-flaeche);
    border-top: 1px solid var(--t-rand);
    padding: 0 var(--t-rechts) var(--t-unten) var(--t-links);
    /* Auf iOS liegt die Leiste ueber scrollendem Inhalt — ohne eigenen
       Hintergrund blitzt dieser beim Scrollen durch. */
    box-shadow: 0 -1px 0 rgba(43,43,54,.04);
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    .t-tabs {
        background: color-mix(in srgb, var(--t-flaeche) 82%, transparent);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
    }
}
.t-tab {
    flex: 1;
    min-height: var(--t-tabs-h);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--t-text-leise); text-decoration: none;
    font-size: .7rem; font-weight: 700; letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
}
.t-tab svg { width: 23px; height: 23px; }
.t-tab:hover { color: var(--t-text-leise); }
.t-tab.aktiv { color: var(--t-akzent-t); }
.t-tab.aktiv svg { stroke-width: 2.4; }

/* ==================================================================
   Karten
   ================================================================== */

.t-karte {
    background: var(--t-flaeche);
    border: 1px solid var(--t-rand);
    border-radius: var(--t-radius);
    box-shadow: var(--t-schatten);
    padding: 15px 16px;
    margin-bottom: 11px;
}
.t-karte--flach { box-shadow: none; }
.t-karte h2, .t-karte h3 {
    margin: 0 0 10px;
    font-size: 1rem; font-weight: 800; letter-spacing: -.01em;
    color: var(--t-text);
}

/* Anklickbare Karte (Terminliste, Kursliste) */
a.t-karte {
    display: flex; align-items: center; gap: 12px;
    color: var(--t-text); text-decoration: none;
    transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
    -webkit-tap-highlight-color: transparent;
}
a.t-karte:hover, a.t-karte:focus-visible {
    color: var(--t-text);
    border-color: var(--t-akzent);
    box-shadow: var(--t-schatten-h);
    transform: translateY(-1px);
}
a.t-karte:active { transform: translateY(0) scale(.995); }
.t-karte__mitte { flex: 1; min-width: 0; }
.t-karte__titel { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.t-karte__sub   { color: var(--t-text-leise); font-size: .85rem; margin-top: 2px; }
.t-karte__pfeil { flex: none; color: var(--t-akzent); display: flex; }
.t-karte__pfeil svg { width: 20px; height: 20px; }

/* Der Tag als Marke am linken Rand — beim Durchscrollen der naechsten
   Stunden ist das Datum der Anker, nicht der Kursname. */
.t-karte__tag {
    flex: none;
    width: 52px; text-align: center;
    padding: 6px 0;
    background: var(--t-flaeche-2);
    border: 1px solid var(--t-rand);
    border-radius: var(--t-radius-sm);
    font-variant-numeric: tabular-nums;
}
.t-karte__tag .wt  { font-size: .66rem; font-weight: 800; text-transform: uppercase;
                     letter-spacing: .05em; color: var(--t-text-leise); }
.t-karte__tag .zt  { font-size: .96rem; font-weight: 800; margin-top: 1px; }
.t-karte.heute { border-color: var(--t-akzent); background: var(--t-flaeche-2); }
.t-karte.heute .t-karte__tag { background: var(--t-voll); border-color: var(--t-voll); color: var(--t-voll-t); }
.t-karte.heute .t-karte__tag .wt { color: inherit; opacity: .72; }
.t-karte.vorbei { opacity: .5; }

/* ==================================================================
   Chips
   ================================================================== */

.t-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--t-radius-pill);
    font-size: .72rem; font-weight: 800; letter-spacing: .01em;
    white-space: nowrap;
    background: var(--t-flaeche-2); color: var(--t-text-leise);
    border: 1px solid var(--t-rand);
}
.t-chip--gut  { background: var(--t-gut-w);    color: var(--t-gut-t);    border-color: transparent; }
.t-chip--warn { background: var(--t-warn-w);   color: var(--t-warn-t);   border-color: transparent; }
.t-chip--rot  { background: var(--t-akzent-w); color: var(--t-akzent-t); border-color: transparent; }
.t-chip--voll { background: var(--t-voll);     color: var(--t-voll-t);              border-color: transparent; }

/* ==================================================================
   Knoepfe
   ================================================================== */

.t-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 46px; padding: 10px 18px;
    border: 1px solid transparent; border-radius: var(--t-radius-sm);
    background: var(--t-voll); color: var(--t-voll-t);
    font: inherit; font-size: .94rem; font-weight: 800;
    cursor: pointer; text-decoration: none;
    transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.t-knopf:hover, .t-knopf:focus-visible { color: var(--t-voll-t); box-shadow: var(--t-schatten-h); transform: translateY(-1px); }
.t-knopf:active { transform: translateY(0) scale(.97); }
.t-knopf:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.t-knopf svg { width: 19px; height: 19px; }

.t-knopf--geist {
    background: var(--t-flaeche); color: var(--t-text);
    border-color: var(--t-rand-stark);
}
.t-knopf--geist:hover, .t-knopf--geist:focus-visible { color: var(--t-text); border-color: var(--t-akzent); }
.t-knopf--gut  { background: var(--t-voll-gut); }
.t-knopf--breit { width: 100%; }

/* ==================================================================
   Segmentierte Umschalter  (Nächste Stunden | Alle Turnstunden)
   ================================================================== */

.t-seg {
    display: flex; gap: 3px;
    background: var(--t-flaeche-2);
    border: 1px solid var(--t-rand);
    border-radius: var(--t-radius-sm);
    padding: 3px;
    margin-bottom: 13px;
}
.t-seg button {
    flex: 1;
    min-height: 40px; padding: 7px 10px;
    border: 0; border-radius: 9px;
    background: transparent; color: var(--t-text-leise);
    font: inherit; font-size: .86rem; font-weight: 800;
    cursor: pointer; white-space: nowrap;
    transition: background-color .16s ease, color .16s ease;
    -webkit-tap-highlight-color: transparent;
}
.t-seg button.aktiv {
    background: var(--t-flaeche); color: var(--t-text);
    box-shadow: 0 1px 3px rgba(43,43,54,.12);
}

/* ==================================================================
   Kennzahlen
   ================================================================== */

.t-zahlen { display: flex; gap: 8px; margin-bottom: 13px; }
.t-zahl {
    flex: 1; min-width: 0;
    background: var(--t-flaeche);
    border: 1px solid var(--t-rand);
    border-radius: var(--t-radius-sm);
    box-shadow: var(--t-schatten);
    padding: 11px 8px; text-align: center;
}
.t-zahl .v svg { width: 24px; height: 24px; }
.t-zahl .v {
    font-size: 1.4rem; font-weight: 800; line-height: 1.1;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.t-zahl .l {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .045em; color: var(--t-text-leise); margin-top: 3px;
}
.t-zahl--warn .v { color: var(--t-akzent-t); }
.t-zahl--gut  .v { color: var(--t-gut-t); }

/* ==================================================================
   Formularfelder
   ================================================================== */

.t-feld {
    width: 100%; box-sizing: border-box;
    min-height: 46px; padding: 11px 13px;
    /* 16px verhindert, dass iOS beim Antippen hineinzoomt. */
    font: inherit; font-size: 16px;
    color: var(--t-text);
    background: var(--t-flaeche);
    border: 1px solid var(--t-rand-stark);
    border-radius: var(--t-radius-sm);
}
.t-feld::placeholder { color: var(--t-text-leise); opacity: .75; }
.t-feld:focus {
    outline: none;
    border-color: var(--t-akzent);
    box-shadow: 0 0 0 3px var(--t-akzent-w);
}
.t-feld--suche { background-image: none; margin-bottom: 11px; }
.t-label { display: block; font-size: .85rem; font-weight: 800; margin: 0 0 5px; }

/* ==================================================================
   Meldungen
   ================================================================== */

.t-hinweis {
    border-radius: var(--t-radius-sm);
    padding: 11px 14px; margin-bottom: 11px;
    font-size: .9rem; font-weight: 600;
    display: flex; align-items: flex-start; gap: 9px;
}
.t-hinweis svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.t-hinweis--gut  { background: var(--t-gut-w);    color: var(--t-gut-t); }
.t-hinweis--warn { background: var(--t-warn-w);   color: var(--t-warn-t); }
.t-hinweis--rot  { background: var(--t-akzent-w); color: var(--t-akzent-t); }
.t-hinweis--info { background: var(--t-flaeche-2); color: var(--t-text-leise); border: 1px solid var(--t-rand); }

.t-leer {
    text-align: center; color: var(--t-text-leise);
    padding: 34px 18px; font-size: .92rem;
}
.t-leer svg { width: 40px; height: 40px; opacity: .35; margin-bottom: 9px; }

/* ==================================================================
   Skelett beim Laden
   --------------------------------------------------------------------
   Statt „Lade …“ die Umrisse dessen, was gleich kommt. Der Sprung von
   einer Textzeile auf drei Karten ist der unruhigste Moment der App.
   ================================================================== */

.t-skelett {
    background: var(--t-flaeche);
    border: 1px solid var(--t-rand);
    border-radius: var(--t-radius);
    padding: 15px 16px; margin-bottom: 11px;
}
.t-skelett i {
    display: block; height: 11px; border-radius: 6px;
    background: linear-gradient(90deg, var(--t-rand) 25%, var(--t-flaeche-2) 37%, var(--t-rand) 63%);
    background-size: 400% 100%;
    animation: t-schimmer 1.4s ease-in-out infinite;
}
.t-skelett i + i { margin-top: 9px; }
.t-skelett i.kurz { width: 45%; }
.t-skelett i.mittel { width: 72%; }
@keyframes t-schimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ==================================================================
   Scan-Bereich  (Schnellweg: QR und Zahlencode)
   ================================================================== */

.t-scan {
    background: var(--t-leiste); color: var(--t-leiste-t);
    padding: 14px calc(14px + var(--t-rechts)) 15px calc(14px + var(--t-links));
}
.t-scan__innen { max-width: 640px; margin: 0 auto; }
.t-scan__reihe { display: flex; gap: 9px; align-items: stretch; }
.t-scan__knopf {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 50px; padding: 10px 16px;
    background: var(--t-scan-voll); color: var(--t-scan-voll-t);
    border: 0; border-radius: var(--t-radius-sm);
    font: inherit; font-size: .92rem; font-weight: 800; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.t-scan__knopf:disabled { opacity: .55; cursor: default; }
.t-scan__knopf svg { width: 20px; height: 20px; }
.t-scan__code {
    flex: 1; min-width: 0; box-sizing: border-box;
    min-height: 50px; padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.22); border-radius: var(--t-radius-sm);
    background: rgba(255,255,255,.08); color: var(--t-leiste-t);
    font: inherit; font-size: 1.28rem; font-weight: 800;
    letter-spacing: .16em; text-align: center;
    font-variant-numeric: tabular-nums;
}
.t-scan__code::placeholder { color: rgba(255,255,255,.4); letter-spacing: .16em; font-weight: 700; }
.t-scan__code:focus {
    outline: none;
    border-color: var(--t-akzent);
    background: rgba(255,255,255,.14);
}
.t-scan__hint { font-size: .78rem; opacity: .6; margin-top: 8px; text-align: center; }

#lt-scanner-wrap { display: none; margin-top: 12px; }
#lt-scanner-video {
    width: 100%; max-height: 48vh; background: #000;
    border-radius: var(--t-radius-sm); object-fit: cover; display: block;
}
#lt-scanner-status { font-size: .84rem; opacity: .8; margin-top: 8px; text-align: center; }

/* ==================================================================
   Teilnehmerzeile  (das Herzstueck)
   ================================================================== */

.t-tn {
    display: flex; align-items: center; gap: 11px;
    background: var(--t-flaeche);
    border: 1px solid var(--t-rand);
    border-radius: var(--t-radius);
    box-shadow: var(--t-schatten);
    padding: 11px 12px 11px 14px;
    margin-bottom: 9px;
}
.t-tn__txt { flex: 1; min-width: 0; }
.t-tn__nm  { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.t-tn__zu  { color: var(--t-text-leise); font-size: .82rem; margin-top: 2px;
             display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.t-tn__knopf {
    flex: none;
    min-height: 46px; min-width: 92px; padding: 8px 15px;
    border: 1px solid transparent; border-radius: var(--t-radius-sm);
    background: var(--t-voll); color: var(--t-voll-t);
    font: inherit; font-size: .9rem; font-weight: 800;
    cursor: pointer;
    transition: transform .12s ease, background-color .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.t-tn__knopf:active { transform: scale(.96); }
.t-tn__knopf:disabled { opacity: .5; cursor: default; transform: none; }
.t-tn__knopf--zurueck {
    background: transparent; color: var(--t-text-leise);
    border-color: var(--t-rand-stark);
    min-width: 0; padding: 8px 13px; font-size: .84rem; font-weight: 700;
}
.t-tn__gesperrt { flex: none; color: var(--t-akzent-t); font-size: .8rem; font-weight: 800; text-align: right; }

/* Anwesend: die Zeile tritt zurueck, bleibt aber lesbar. Der gruene
   Balken links ist beim Ueberfliegen schneller erfassbar als ein Haken
   irgendwo in der Zeile. */
.t-tn.da {
    background: var(--t-gut-w);
    border-color: transparent;
    box-shadow: none;
    padding-left: 11px;
    border-left: 3px solid var(--t-gut);
}
.t-tn.da .t-tn__nm { color: var(--t-gut-t); }
.t-tn.da .t-tn__zu { color: var(--t-gut-t); opacity: .82; }
.t-tn__haken {
    flex: none; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--t-voll-gut); color: #fff;
}
.t-tn__haken svg { width: 15px; height: 15px; }

/* Der Moment der Buchung. Ohne Rueckmeldung tippt man in der Halle
   zweimal, weil man nicht sicher ist, ob es gezaehlt hat. */
.t-tn--frisch { animation: t-gebucht .5s ease-out; }
@keyframes t-gebucht {
      0% { transform: scale(1);    box-shadow: 0 0 0 0 var(--t-gut); }
     35% { transform: scale(1.015); }
    100% { transform: scale(1);    box-shadow: 0 0 0 14px transparent; }
}

.t-guthaben {
    display: inline-block; padding: 2px 8px;
    border-radius: var(--t-radius-pill);
    font-size: .72rem; font-weight: 800;
    background: var(--t-gut-w); color: var(--t-gut-t);
    font-variant-numeric: tabular-nums;
}
.t-guthaben.leer { background: var(--t-akzent-w); color: var(--t-akzent-t); }

/* Trefferliste nach dem Scan: hebt sich als eigener Block ab. */
.t-treffer {
    background: var(--t-flaeche);
    border: 2px solid var(--t-gut);
    border-radius: var(--t-radius);
    padding: 14px 15px; margin-bottom: 13px;
}
.t-treffer h2 { margin: 0 0 2px; font-size: 1.05rem; font-weight: 800; }
.t-treffer .meta { color: var(--t-text-leise); font-size: .84rem; margin-bottom: 11px; }

/* Abschnittsueberschrift ueber der Namensliste */
.t-abschnitt {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin: 20px 0 9px;
}
.t-abschnitt h3 { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.t-abschnitt .anzahl { color: var(--t-text-leise); font-size: .82rem; font-weight: 700;
                       font-variant-numeric: tabular-nums; }

/* ==================================================================
   Kontaktzeile in der Teilnehmerliste eines Kurses
   ================================================================== */

.t-kontakt { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.t-kontakt a {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 7px 13px;
    border: 1px solid var(--t-rand-stark); border-radius: var(--t-radius-sm);
    color: var(--t-akzent-t); text-decoration: none;
    font-size: .84rem; font-weight: 700;
}
.t-kontakt a:hover { border-color: var(--t-akzent); color: var(--t-akzent-t); }
.t-kontakt svg { width: 15px; height: 15px; }

/* ==================================================================
   Ruecksicht
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
    .t-skelett i { animation: none; }
    .t-tn--frisch { animation: none; }
    a.t-karte, .t-knopf, .t-tn__knopf { transition: none; }
    a.t-karte:hover, .t-knopf:hover { transform: none; }
}

/* Tastaturbedienung sichtbar halten — im Browser am Vereinsrechner
   wird die Liste durchgetabbt. */
.t-app :focus-visible {
    outline: 3px solid var(--t-akzent);
    outline-offset: 2px;
}

/* Wird von konto.php zum Ein- und Ausblenden der 2FA-Schritte benutzt. */
.hidden { display: none; }

/* Knopf, der wie ein Link aussieht — "Mit Backup-Code anmelden". */
.tl-link {
    background: none; border: 0; padding: 0;
    font: inherit; color: var(--t-akzent-t);
    text-decoration: underline; cursor: pointer;
}