/* ===========================================================================
   16-trainingsansicht.css — die Vollbildansicht fuers Tablet in der Halle.
   Gehoert allein zu TrainingsplanAnsicht.php.

   Alle Masse hier sind groesser als im uebrigen Portal, und das ist kein
   Geschmack: Das Portal ist fuer eine Armlaenge am Schreibtisch gebaut. Ein
   Tablet liegt auf der Bank oder wird schraeg gehalten, mit Blick zwischen
   Feld und Bildschirm. Der Ablauftext steht deshalb bei 19px statt bei den
   ueblichen 15-16, und die Bedienknoepfe sind 56px statt der 44, die gerade
   noch als Untergrenze gelten - der Trainer hat kalte Finger und schaut
   nebenbei aufs Feld.

   Farben kommen ausnahmslos aus den Variablen aus 00-basis-nav.css. Die
   Ansicht folgt damit dem Thema des Nutzers und bekommt bewusst KEINEN
   eigenen Hell-Schalter: eine Ausnahme nur fuer diese Seite muesste man
   danach ueberall erklaeren.
   =========================================================================== */

.tra-body {
    margin: 0;
    /* dvh statt vh: auf dem iPad faellt sonst die untere Bedienleiste hinter
       die Safari-Leiste, sobald sie sich beim Scrollen einblendet. */
    height: 100dvh;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    /* Die Spalte MUSS begrenzt werden. Ohne sie bekommt die einzige
       implizite Spalte die Breite "auto" und waechst auf den Inhalt: die
       Zeitleiste mit acht Segmenten und langen Uebungstiteln schob die Seite
       im Hochformat 150 Pixel ueber den Bildschirm hinaus, Kopfzeile und
       Fussleiste hingen links draussen. minmax(0, 1fr) erlaubt den Kindern
       zu schrumpfen - erst dadurch greifen text-overflow und min-width:0
       weiter unten ueberhaupt. */
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    background: var(--darker-background);
    color: var(--text-color);
    /* Der Browser soll die Seite selbst nicht mitscrollen - jede Karte
       scrollt fuer sich, sonst wandert beim Wischen die ganze Ansicht. */
    overscroll-behavior: none;
}

/* --- Kopfzeile ---------------------------------------------------------- */

.tra-kopf {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    padding-top: calc(8px + env(safe-area-inset-top));
    background: var(--tigers-nav-bg);
    color: var(--white);
    border-bottom: 1px solid var(--border-light);
}
.tra-kopf-mitte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tra-kopf-titel {
    font-size: 1.05rem; font-weight: 700; color: var(--tigers-yellow);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tra-kopf-meta {
    font-size: 0.82rem; opacity: 0.8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tra-kopf-rechts { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.tra-uhr { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.tra-knopf {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 14px;
    border-radius: var(--radius-small);
    background: rgba(255,255,255,0.1);
    color: var(--white); text-decoration: none;
    font-weight: 600;
}
.tra-knopf:hover, .tra-knopf:focus-visible { background: rgba(255,255,255,0.2); }
@media (max-width: 600px) { .tra-knopf-text { display: none; } }

/* Speicherzustand. Er muss sichtbar sein, ohne dass man ihn sucht: eine
   Notiz, die still nicht ankommt, ist schlimmer als gar keine Notiz. */
.tra-stand {
    font-size: 0.78rem; padding: 4px 10px; border-radius: 999px;
    white-space: nowrap;
}
.tra-stand[data-zustand="ruhe"]       { color: var(--white); opacity: 0.55; }
.tra-stand[data-zustand="offen"]      { background: var(--warn-solid); color: var(--on-warn-solid); font-weight: 700; }
.tra-stand[data-zustand="abgelaufen"] { background: var(--err-solid); color: var(--white); font-weight: 700; }

/* --- Zeitleiste --------------------------------------------------------- */

.tra-leiste {
    min-width: 0;
    position: relative;
    padding: 6px 12px 8px;
    background: var(--background-color);
    border-bottom: 1px solid var(--border-light);
}
.tra-leiste-spur { display: flex; gap: 3px; }

.tra-seg {
    flex: 1 1 0;
    min-width: 0;
    /* 34px statt 56: die Leiste ist die Zweitbedienung, nicht die erste.
       Sie muss vor allem lesbar anzeigen, wo man steht - der Sprung ist die
       Zugabe. Die 56px stehen unten bei den Pfeilen, die man im Gehen
       trifft. */
    height: 34px;
    padding: 0 6px;
    border: none;
    border-radius: 5px;
    /* Ueber --ink statt ueber feste Grautoene: die Variable dreht sich mit
       dem Thema. --bg-summary ist im Dunkelmodus fast weiss und war hier
       zusammen mit opacity:0.6 praktisch unlesbar. */
    background: rgba(var(--ink) / 0.10);
    color: rgba(var(--ink) / 0.75);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tra-seg-abschnitt { flex-grow: 0 !important; flex-basis: 10px; min-width: 10px; padding: 0; background: rgba(var(--ink) / 0.28); }
.tra-seg.aktiv {
    background: var(--tigers-yellow);
    color: var(--tigers-black);
    font-weight: 700;
}
.tra-seg:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 2px; }

/* Jetzt-Marke. Erscheint nur bei einem Plan von heute (PHP entscheidet das,
   nicht CSS) und steht anteilig im laufenden Segment. */
.tra-jetzt {
    position: absolute;
    top: 6px; bottom: 8px;
    width: 2px;
    background: var(--err-solid);
    pointer-events: none;
}
.tra-jetzt-fahne {
    position: absolute; top: -3px; left: -4px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--err-solid);
}
.tra-zeithinweis {
    margin-top: 4px;
    text-align: right;
    font-size: 0.76rem;
    color: var(--warn-text);
}

/* --- Buehne und Karten -------------------------------------------------- */

.tra-buehne { min-width: 0; overflow: hidden; position: relative; }
.tra-spur   { display: flex; height: 100%; will-change: transform; }

.tra-seite {
    flex: 0 0 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    /* Das Wischen legt seine Achse selbst fest (s. trainingsansicht.js).
       pan-y sagt dem Browser, dass er das senkrechte Scrollen uebernehmen
       darf, das waagerechte aber uns gehoert. */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.tra-rolle {
    max-width: 1100px;   /* sonst laufen die Ablaufzeilen ueber die ganze
                            Bildschirmbreite und man verliert beim Lesen die
                            Zeile */
    margin: 0 auto;
}

.tra-kopfzeile { margin-bottom: 14px; }
.tra-titel {
    margin: 0 0 8px;
    font-size: 1.9rem;
    line-height: 1.15;
    color: var(--text-dark);
}
.tra-marken { display: flex; flex-wrap: wrap; gap: 6px; }
.tra-marke {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(var(--ink) / 0.10);
    color: rgba(var(--ink) / 0.88);
    font-size: 0.85rem;
    font-weight: 600;
}
.tra-marke-zeit     { background: var(--tigers-yellow); color: var(--tigers-black); }
.tra-marke-gruppe   { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); }
.tra-marke-parallel { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); }

.tra-spalten { display: grid; gap: 18px; grid-template-columns: 1fr; }
/* Tablet quer und Desktop: Text links, Bild rechts. Das ist der Bau-Fall.
   Hoch und Handy bleiben einspaltig in der Reihenfolge des Markups -
   Ablauf, Korrektur, dann Bild, dann Aufbau. */
@media (min-width: 900px) {
    .tra-spalten { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.tra-feld { margin-bottom: 16px; }
.tra-feld-titel {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-placeholder);
    margin-bottom: 4px;
}
.tra-feld p, .tra-planungsnotiz p, .tra-variante p { margin: 0 0 8px; }

/* Ablauf ist der Text, den man im Vorbeigehen erfassen koennen muss. */
.tra-ablauf p { font-size: 1.18rem; line-height: 1.5; }

/* Korrekturhinweis abgesetzt: waehrend der Uebung ist das die zweite
   Information, auf die der Blick faellt. */
.tra-korrektur {
    padding: 12px 14px;
    border-left: 4px solid var(--tigers-yellow);
    background: var(--overlay-light);
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
}
.tra-korrektur p { font-size: 1.05rem; line-height: 1.45; }

.tra-planungsnotiz {
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: var(--radius-small);
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
}
.tra-planungsnotiz .tra-feld-titel { color: var(--warn-text); }

/* Der Rueckblick der Vorlage (Stufe 2, 2026-09-11). Bewusst RUHIGER als die
   Planungsnotiz darueber: die gilt heute, dieser Kasten erzaehlt vom letzten
   Mal. Gelber Streifen links statt farbiger Flaeche - er soll gefunden, aber
   nicht zuerst gelesen werden. --bg-summary und --tigers-yellow-ink waeren
   hier im Dunkelmodus hell auf hell, deshalb rgba(var(--ink) / …). */
.tra-vorprotokoll {
    padding: 10px 14px;
    margin-bottom: 16px;
    border-radius: var(--radius-small);
    background: rgba(var(--ink) / 0.06);
    border-left: 3px solid var(--tigers-yellow);
}
.tra-vorprotokoll .tra-feld-titel { color: rgba(var(--ink) / 0.6); }
.tra-vorprotokoll p { font-size: 0.98rem; line-height: 1.45; color: rgba(var(--ink) / 0.88); }

.tra-aufbau p, .tra-varianten p, .tra-parallel p { font-size: 1rem; line-height: 1.45; }

.tra-variante { margin-bottom: 12px; }
.tra-var-gruppe {
    font-weight: 400; font-size: 0.8rem; color: var(--text-placeholder);
    margin-left: 6px;
}
.tra-var-korrektur {
    font-size: 0.92rem; color: var(--warn-text); margin-top: 2px;
}
.tra-parallel {
    padding: 12px 14px;
    border-radius: var(--radius-small);
    border: 1px dashed var(--border-gray);
}

.tra-mehr summary {
    cursor: pointer;
    min-height: 44px;
    display: flex; align-items: center;
    font-weight: 600;
    color: var(--primary-blue);
}
.tra-mehr p { font-size: 0.98rem; line-height: 1.5; }

/* --- Bilder, Skizzen, Video --------------------------------------------- */

.tra-bild-knopf {
    display: block; width: 100%; padding: 0; margin: 0 0 12px;
    border: 1px solid var(--border-light); border-radius: var(--radius-small);
    background: var(--bg-flaeche); cursor: zoom-in; overflow: hidden;
}
.tra-bild { display: block; width: 100%; height: auto; }
.tra-bild-klein { max-width: 260px; margin-top: 8px; border-radius: var(--radius-small); }

.tra-skizze {
    position: relative;
    margin-bottom: 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-small);
    background: var(--bg-flaeche);
    overflow: hidden;
}
/* Alle Schritte liegen uebereinander, sichtbar ist immer genau einer. So
   sind sie beim Umschalten schon geladen und es flackert nicht. */
.tra-skizze-schritt { display: block; width: 100%; height: auto; }
.tra-skizze-schritt:not(:first-child) { position: absolute; inset: 0; }
.tra-skizze-schritt { opacity: 0; transition: opacity 180ms linear; }
.tra-skizze-schritt.an { opacity: 1; }
.tra-skizze-zaehler {
    position: absolute; right: 8px; bottom: 8px;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(0,0,0,0.65); color: #fff; font-size: 0.74rem;
}

.tra-videoknopf {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 56px; margin-bottom: 12px;
    border: none; border-radius: var(--radius-small);
    background: var(--tigers-yellow); color: var(--tigers-black);
    font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}

/* --- Abschnitts- und Abschlusskarte ------------------------------------- */

.tra-seite-abschnitt, .tra-seite-schluss { display: flex; align-items: center; justify-content: center; }
.tra-abschnitt-karte, .tra-schluss-karte { text-align: center; max-width: 640px; width: 100%; }
.tra-abschnitt-kennung {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    background: var(--tigers-yellow); color: var(--tigers-black);
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.tra-abschnitt-karte h1 { font-size: 2.6rem; margin: 14px 0 10px; color: var(--text-dark); }
.tra-abschnitt-meta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 1.05rem; color: var(--text-placeholder); }
.tra-abschnitt-meta span + span::before { content: ''; }

/* Pause. Dieselbe zentrierte Bauform wie die Abschnittskarte, aber ohne das
   gelbe Band: Sie ist kein Kapitelanfang, sondern eine Unterbrechung. Das
   Segment in der Zeitleiste behaelt seine Breite nach Dauer - anders als der
   Abschnitt, der dort nur ein Strich ist. */
.tra-seite-pause { display: flex; align-items: center; justify-content: center; }
.tra-pause-karte { text-align: center; max-width: 640px; width: 100%; }
.tra-pause-symbol { display: block; font-size: 3.2rem; margin-bottom: 14px; color: var(--text-placeholder); }
.tra-pause-kennung {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    background: rgba(var(--ink) / 0.14); color: var(--text-dark);
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.tra-pause-karte h1 { font-size: 2.1rem; margin: 14px 0 10px; color: var(--text-dark); }
.tra-pause-meta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 1.05rem; color: var(--text-placeholder); }
.tra-seg-pause { background: rgba(var(--ink) / 0.16); }

.tra-schluss-karte h1 { font-size: 2.1rem; margin: 0 0 6px; color: var(--text-dark); }
.tra-schluss-meta { color: var(--text-placeholder); margin: 0 0 16px; }
.tra-schluss-liste { text-align: left; }
.tra-schluss-eintrag {
    padding: 12px 14px; margin-bottom: 10px;
    border-radius: var(--radius-small);
    background: var(--bg-flaeche); border: 1px solid var(--border-light);
}
.tra-schluss-eintrag p { margin: 4px 0 0; white-space: pre-wrap; }
.tra-schluss-leer { color: var(--text-placeholder); }
.tra-schluss-zurueck {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 56px; padding: 0 22px; margin-top: 18px;
    border-radius: var(--radius-small);
    background: var(--tigers-yellow); color: var(--tigers-black);
    font-weight: 700; text-decoration: none;
}

/* --- Fussleiste --------------------------------------------------------- */

.tra-fuss {
    min-width: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: var(--tigers-nav-bg);
    border-top: 1px solid var(--border-light);
}
.tra-fuss-mitte { display: flex; align-items: center; gap: 14px; }

/* Die Pfeile sitzen in den UNTEREN Ecken, nicht oben: ein Tablet wird in der
   Halle unten gehalten, und der Daumen kommt dort ohne Umgreifen hin. */
.tra-fussknopf {
    flex: 0 0 auto;
    width: 72px; height: 56px;
    border: none; border-radius: var(--radius-small);
    background: rgba(255,255,255,0.12);
    color: var(--white); font-size: 1.4rem; cursor: pointer;
}
.tra-fussknopf:disabled { opacity: 0.25; cursor: default; }
.tra-fussknopf:not(:disabled):active { background: rgba(255,255,255,0.28); }

.tra-notizknopf {
    position: relative;
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 56px; padding: 0 22px;
    border: none; border-radius: var(--radius-small);
    background: var(--tigers-yellow); color: var(--tigers-black);
    font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.tra-notizknopf:disabled { opacity: 0.3; cursor: default; }
/* Der Punkt sagt beim Durchblaettern, wo schon etwas steht - ohne dass die
   Schublade dafuer geoeffnet werden muss. */
.tra-notiz-punkt {
    position: absolute; top: 8px; right: 10px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--tigers-black);
}
.tra-pos { color: var(--white); opacity: 0.7; font-variant-numeric: tabular-nums; }

/* --- Notiz-Schublade ---------------------------------------------------- */

.tra-dunkel {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(0,0,0,0.45);
}
.tra-schublade {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
    padding: 14px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    background: var(--background-color);
    border-top: 2px solid var(--tigers-yellow);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow-strong);
}
.tra-schublade-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 10px;
    font-weight: 700; font-size: 1.05rem;
}
.tra-schublade textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    font: inherit;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--text-input);
    background: var(--bg-flaeche);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-small);
    resize: none;
}
.tra-fertig {
    min-height: 48px; padding: 0 22px;
    border: none; border-radius: var(--radius-small);
    background: var(--tigers-yellow); color: var(--tigers-black);
    font: inherit; font-weight: 700; cursor: pointer;
}
.tra-schublade-fuss { min-height: 20px; padding-top: 6px; font-size: 0.82rem; color: var(--ok-text); }

/* --- Bild und Video gross ----------------------------------------------- */

.tra-lupe {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,0.9);
}
.tra-lupe-inhalt { max-width: 100%; max-height: 100%; display: flex; }
.tra-lupe-inhalt img,
.tra-lupe-inhalt video { max-width: 100%; max-height: 88vh; object-fit: contain; }
.tra-lupe-inhalt iframe { width: min(90vw, 1280px); height: min(50.6vw, 720px); border: 0; }
.tra-lupe-zu {
    position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px;
    width: 56px; height: 56px;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,0.15); color: #fff; font-size: 1.4rem; cursor: pointer;
}

/* --- hidden muss hidden bleiben ----------------------------------------

   Nicht kosmetisch, sondern ein bereits eingetretener Fehler: .tra-lupe hat
   display:flex, und eine Klassenregel schlaegt die display:none, die der
   Browser dem hidden-Attribut mitgibt. Ergebnis war ein schwarzer Schleier
   ueber der ganzen Ansicht, ohne dass irgendwo ein Fehler stand.

   Deshalb hier fuer alle drei Ueberlagerungen ausdruecklich. 11-modern-web-
   misc.css enthaelt nackte div-Regeln - die koennen jederzeit dasselbe
   ausloesen, auch bei den Kaesten, die heute noch ohne display auskommen. */
.tra-lupe[hidden],
.tra-schublade[hidden],
.tra-dunkel[hidden],
.tra-jetzt[hidden],
.tra-notiz-punkt[hidden] { display: none !important; }

/* --- Bewegung abbestellt ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .tra-spur { transition: none !important; }
    .tra-skizze-schritt { transition: none; }
}