/* ---------------------------------------------------------------------------
   EagleShot – Farbschema aus dem Startbild (medien/load.mov, Adler-Golfball).
   Gemessen: Grund #012016..#093d2e (H≈160, sehr dunkel, hoch gesättigt),
   Akzent-Gold #e9bc52 (H≈42), Ball #fbfbfb.

   Die MARKENFLAECHE (Kopfzeile, Menü) ist in BEIDEN Themes dunkelgrün – so
   sieht man sofort, welche App das ist. Der Inhaltsbereich bleibt im
   Hell-Theme hell: Kurven, Bänder und Ampeln sind Messdaten, die auf hellem
   Grund am ruhigsten lesen. Gold ist Sekundärakzent (Aktiv-Zustand), nicht
   Fließtext – bei L≈62 trägt es auf Weiß keinen Kontrast.
--------------------------------------------------------------------------- */
:root{
  --marke:#08302280; --marke-tief:#012016; --marke-mittel:#093d2e;
  --gold:#e9bc52; --gold-tief:#b98a24;
  --grund:#F2F4F1; --flaeche:#FFFFFF; --chrome:#093d2e; --tinte:#1B231F;
  --neben:#5E6D64; --linie:#D8DED7; --akzent:#0f6b47; --gelb:#B07D06;
  --rot:#BE3A2B; --band:#3D6B8E; --cursor:#D6482F; --chipgrund:#E3EFE8;
  /* auf der Markenfläche gilt eine eigene Schrift-/Linienfarbe */
  --chrome-tinte:#EAF2ED; --chrome-neben:#93B3A4; --chrome-linie:#15503b;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --grund:#071a13; --flaeche:#0d2820; --chrome:#012016; --tinte:#E4EDE7;
  --neben:#8FA89A; --linie:#17392c; --akzent:#4dbb85; --gelb:#DFA82C;
  --rot:#E0664F; --band:#6FA0C4; --cursor:#FF7A5C; --chipgrund:#10382a;
  --chrome-tinte:#EAF2ED; --chrome-neben:#8AA99A; --chrome-linie:#0c3123;
}}
:root[data-theme="dark"]{
  --grund:#071a13; --flaeche:#0d2820; --chrome:#012016; --tinte:#E4EDE7;
  --neben:#8FA89A; --linie:#17392c; --akzent:#4dbb85; --gelb:#DFA82C;
  --rot:#E0664F; --band:#6FA0C4; --cursor:#FF7A5C; --chipgrund:#10382a;
  --chrome-tinte:#EAF2ED; --chrome-neben:#8AA99A; --chrome-linie:#0c3123;
}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--tinte);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer}

/* Kopfzeile */
header{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:.55rem 1rem;background:var(--chrome);border-bottom:1px solid var(--linie);
  position:sticky;top:0;z-index:20}
header h1{font-size:1rem;margin:0;font-weight:650;letter-spacing:-.01em}
header .sub{color:var(--neben);font-size:.8rem}
.spacer{flex:1}
.btn{background:var(--flaeche);border:1px solid var(--linie);border-radius:7px;
  padding:.3rem .7rem;font-size:.82rem}
.btn:hover{border-color:var(--akzent)}
.btn.aktiv{background:var(--akzent);color:#fff;border-color:var(--akzent)}
.chip{display:inline-block;border-radius:99px;padding:.08rem .55rem;
  font-size:.74rem;font-weight:600}
.chip-gruen{background:var(--chipgrund);color:var(--akzent)}
.chip-gelb{background:color-mix(in srgb,var(--gelb) 16%,var(--flaeche));color:var(--gelb)}
.chip-rot{background:color-mix(in srgb,var(--rot) 16%,var(--flaeche));color:var(--rot)}
.chip-na,.chip-neutral{background:var(--grund);color:var(--neben);border:1px solid var(--linie)}

/* Layout */
main{padding:1rem;max-width:1600px;margin:0 auto}
.cockpit{display:grid;grid-template-columns:minmax(280px,26%) 1fr;gap:1rem;
  align-items:start}
@media(max-width:1000px){.cockpit{grid-template-columns:1fr}}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;
  padding:.8rem}
.karte h2{margin:0 0 .6rem;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.09em;color:var(--neben);font-weight:700}

/* Video */
video{width:100%;border-radius:8px;background:#000;display:block}
#buehne{width:100%;height:520px;overflow:hidden;border-radius:8px;
  background:linear-gradient(180deg,var(--grund),var(--chrome))}
#buehne canvas{touch-action:none;cursor:grab;
  width:100%!important;height:100%!important;display:block;border-radius:8px}
#buehne canvas:active{cursor:grabbing}
.transport{margin-top:.6rem;display:flex;flex-direction:column;gap:.45rem}
.slider-wrap{position:relative;padding-top:.9rem}
.marken{position:absolute;top:0;left:0;right:0;height:.85rem;pointer-events:none}
.marke{position:absolute;transform:translateX(-50%);font-size:.62rem;
  color:var(--neben);white-space:nowrap}
.marke::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:5px;
  background:var(--linie)}
input[type=range]{width:100%;accent-color:var(--akzent)}
.knopfreihe{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.zeit{margin-left:auto;font-size:.78rem;color:var(--neben)}
.phase-tag{font-size:.72rem;font-weight:700;color:var(--akzent);
  text-transform:uppercase;letter-spacing:.06em}

/* Graphen */
.video-kopf{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.3rem}
.video-kopf h2{margin:0;flex:1}
.graph-wahl{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.7rem}
.graph-wahl .btn{cursor:grab}
/* Auffaelligkeitspunkt am Kurvenknopf (Schweregrad 3). Aussendurchmesser
   wie das frueher gesetzte Zeichen ● (gemessen 0,8 em), duenner weisser
   Rand, innen rot - auf dem gruenen aktiven Knopf war das reine Zeichen
   weiss und damit kein Signal. */
.graph-wahl .punkt{display:inline-block;width:.8em;height:.8em;border-radius:50%;
  background:var(--rot);border:1px solid #fff;vertical-align:-.06em;margin-left:.3em}
.graph-wahl .btn.zieht{opacity:.45;cursor:grabbing}
/* Nicht umkehrbare Aktion: gedaempft, bis man daraufzeigt - sie soll
   auffindbar sein, aber nicht einladen (2026-09-03). */
.btn.gefahr{margin-top:.5rem;color:var(--rot);border-color:var(--linie);
  background:transparent}
.btn.gefahr:hover{background:color-mix(in srgb,var(--rot) 10%,transparent);
  border-color:var(--rot)}
.graphen{display:grid;gap:.7rem;
  /* Feste Spaltenzahl statt auto-fit: mit minmax(440px,1fr) passten auf
     breiten Schirmen DREI Graphen nebeneinander, die dann zu klein zum
     Ablesen waren (Nutzer-Befund 2026-08-30). Hoechstens zwei, nie drei.
     KEIN min() in minmax(): in repeat(auto-fit, ...) ist das nicht ueberall
     gueltig, die Regel faellt dann komplett aus und alles landet einspaltig. */
  grid-template-columns:1fr}
@media (min-width:900px){.graphen{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Ist nur EINE Kurve eingeschaltet, nimmt sie die ganze Breite neben dem
   Video - sonst stuende sie in der linken Spalte und rechts waere Leere.
   Der Graph waechst dabei proportional mit (viewBox 460x168, width:100%,
   height:auto), wird also groesser statt verzerrt. */
.graphen > .graph:only-child{grid-column:1 / -1}
.graph{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;
  padding:.6rem .7rem .35rem}
.graph .kopf{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.15rem}
.graph .kopf b{font-size:.86rem}
.graph .kopf span{font-size:.72rem;color:var(--neben)}
.graph .readout{display:flex;gap:.9rem;align-items:baseline;
  font-size:.78rem;margin:.2rem 0 .1rem;min-height:1.3em}
.readout .delta{font-weight:700;font-size:.95rem}
.readout .abstand{color:var(--neben)}
.readout .lage{color:var(--neben)}
svg{display:block;width:100%;height:auto;overflow:visible}

/* Tabellen */
.tabellen{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
  gap:1rem;margin-top:1rem}
table{border-collapse:collapse;width:100%;font-size:.82rem}
th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--neben);padding:.35rem .5rem;border-bottom:1px solid var(--linie)}
td{padding:.35rem .5rem;border-bottom:1px solid var(--linie)}
tr:last-child td{border-bottom:none}
tbody tr.hl{background:var(--chipgrund)}
.klein{font-size:.72rem;color:var(--neben)}

/* Session */
.session-liste{display:grid;gap:.5rem}
.swing-karte{display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:9px;
  cursor:pointer;text-align:left;width:100%}
.swing-karte:hover{border-color:var(--akzent)}
.swing-karte .name{font-weight:600}
.hinweis{background:var(--chipgrund);border-left:3px solid var(--akzent);
  border-radius:6px;padding:.6rem .8rem;font-size:.82rem;color:var(--neben)}

/* Session-Zusammenfassung */
.auftraege{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.auftrag{background:var(--flaeche);border:1px solid var(--linie);
  border-left:5px solid var(--rot);border-radius:10px;padding:.9rem 1.1rem}
.auftrag.leer{border-left-color:var(--akzent)}
.auftrag-label{font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--neben)}
.auftrag h3{margin:.25rem 0 .3rem;font-size:1.25rem;letter-spacing:-.01em}
.auftrag-zahl{font-size:.85rem;color:var(--rot);margin:.1rem 0}
.auftrag.leer .auftrag-zahl{color:var(--akzent)}
.auftrag p{margin:.15rem 0}
table.matrix td.zelle{text-align:center;font-size:1.05rem;line-height:1}
.amp-gruen{color:var(--akzent)} .amp-gelb{color:var(--gelb)}
.amp-rot{color:var(--rot)} .amp-na,.amp-ok,.amp-unter_boden{color:var(--neben)}
table.matrix th.dreh{font-size:.62rem;letter-spacing:.02em;white-space:nowrap}
table.matrix td.muster{font-weight:700;color:var(--rot)}
.legende{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.2rem}

/* Fault-Karte (Arbeitsauftrag) */
.fault-cue{font-size:1.05rem;font-weight:700;margin:.45rem 0 .3rem;
  color:var(--akzent)}
.fault-drills ul{margin:.15rem 0 .3rem 1.1rem;padding:0;font-size:.82rem}
.fault-drills li{margin:.15rem 0}
/* Die Begruendung steht offen und weit oben (Nutzervorgabe 2026-09-04):
   Der Cue folgt aus ihr, nicht umgekehrt. Ohne Ueberschrift, ohne
   Einrueckung - blosser Fliesstext zwischen Befundzeile und Cue, in
   derselben Farbe wie die Befundzeile darueber: beides gehoert zum
   Befund, der Cue darunter ist die Antwort darauf. */
.fault-warum-offen{font-size:.86rem;line-height:1.45;margin:.4rem 0 .1rem;
  color:var(--rot)}
.fault-warum{font-size:.82rem;margin:.3rem 0}
.fault-warum summary{cursor:pointer;color:var(--neben)}
.fault-warum p{margin:.35rem 0}
.hinweis-luecke{color:var(--neben);font-style:italic;margin:.45rem 0 .2rem}
.auftrag .chip{display:inline-block;margin-top:.3rem}

/* Admin-Ansicht (Inbox) */
.admin-log{max-height:16rem;overflow:auto;background:#f6f7f8;border-radius:6px;
  padding:.5rem .6rem;font-size:.74rem;line-height:1.35;white-space:pre-wrap;
  margin:.5rem 0 0;color:var(--neben)}
.admin-log:empty{display:none}
#admin-inhalt pre.mono{background:#f6f7f8;border-radius:6px;padding:.5rem .6rem;
  font-size:.8rem;display:inline-block}

/* Admin: Loeschen */
.btn.gefahr{border-color:var(--rot);color:var(--rot);background:#fff}
.btn.gefahr:hover:not(:disabled){background:var(--rot);color:#fff}
.btn.klein-btn{padding:.12rem .45rem;font-size:.72rem}
.admin-liste{list-style:none;margin:.3rem 0 0;padding:0}
.admin-liste li{display:flex;align-items:center;gap:.4rem;padding:.25rem 0;
  border-top:1px solid var(--linie);font-size:.82rem}

/* Video-Raster (Bezugsgitter) */
/* overflow:hidden, weil das Video fuer die Address-Zentrierung waagerecht
   verschoben wird (video.zentriereVideo). Ohne das Abschneiden ragte das
   verschobene Bild ueber die Karte hinaus; die Huelle behaelt ihre Groesse,
   das Raster darin bleibt stehen - genau darum geht es. */
.video-huelle{position:relative;line-height:0;overflow:hidden;border-radius:8px;
  /* Der Streifen, der durch die Verschiebung frei wird - dunkel statt
     durchsichtig, damit man den Bildrand sieht und nicht raet. */
  background:#000}
#video{transition:transform .15s ease}
/* Schalter an, aber nichts verschoben (keine Messung oder Versatz ueber der
   Grenze): nicht gruen quittieren, was nicht passiert ist. */
.btn#btn-zentriert.warnt{border-color:var(--gelb);color:var(--gelb)}
.video-raster{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;border-radius:8px;mix-blend-mode:difference}

/* Trennzeile Metriken / Verlaufsbefunde in der Matrix */
/* Blockueberschriften in der Matrix (Metriken / Verlaeufe) */
table.matrix tr.trenner td{padding:.75rem .4rem .3rem;font-size:.68rem;
  font-weight:600;color:var(--neben);border-bottom:1px solid var(--linie);
  letter-spacing:.04em;text-transform:uppercase}
/* erste Ueberschrift schliesst direkt an den Tabellenkopf an */
table.matrix tbody tr.trenner:first-child td{padding-top:.35rem}

/* ---------------------------------------------------------------------------
   Markenfläche: Kopfzeile und Menü stehen in beiden Themes auf Dunkelgrün.
--------------------------------------------------------------------------- */
header{background:var(--chrome);border-bottom:1px solid var(--chrome-linie);
  color:var(--chrome-tinte);gap:.6rem}
header h1{color:var(--chrome-tinte);letter-spacing:.01em;font-weight:700;
  white-space:nowrap}
header .sub{color:var(--chrome-neben);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
header .startknopf-logo{border-radius:6px;display:block;flex:none}
header .btn{background:transparent;border-color:var(--chrome-linie);
  color:var(--chrome-tinte)}
header .btn:hover{border-color:var(--gold);color:var(--gold)}
header select.btn option{background:var(--flaeche);color:var(--tinte)}
.konto{color:var(--chrome-neben);font-size:.78rem;white-space:nowrap}

/* Burger */
.burger{background:transparent;border:1px solid var(--chrome-linie);
  border-radius:7px;padding:.42rem .5rem;display:flex;flex-direction:column;
  gap:3px;flex:none}
.burger span{display:block;width:16px;height:2px;border-radius:2px;
  background:var(--chrome-tinte);transition:transform .18s,opacity .18s}
.burger:hover span{background:var(--gold)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* [hidden] muss gewinnen: .menu setzt display:flex, und eine
   Klassenregel schlaegt das Attribut - das Menue stand dadurch beim Start
   offen. Gilt fuer alle Elemente, die display bekommen. */
[hidden]{display:none !important}

/* Menü als Schublade – nicht als Dropdown: die Einträge tragen eine
   Erläuterung, dafür ist eine Liste am linken Rand ruhiger. */
/* unterhalb der Kopfzeile: sonst verdeckt die Schublade den Burger und
   man kaeme nur noch ueber den Schleier wieder raus. */
.menu{position:fixed;top:var(--kopf-h,3rem);left:0;bottom:0;
  width:min(19rem,82vw);z-index:40;
  background:var(--chrome);border-right:1px solid var(--chrome-linie);
  padding:.6rem;display:flex;flex-direction:column;gap:.15rem;
  box-shadow:0 0 40px #0008;overflow:auto}
.menu-eintrag{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  background:transparent;border:0;border-radius:9px;padding:.6rem .7rem;
  text-align:left;color:var(--chrome-tinte);width:100%}
.menu-eintrag b{font-size:.92rem;font-weight:650}
.menu-eintrag span{font-size:.74rem;color:var(--chrome-neben);line-height:1.35}
.menu-eintrag:hover{background:#ffffff12}
.menu-eintrag.aktiv{background:var(--gold);color:#20180a}
.menu-eintrag.aktiv span{color:#20180acc}
.menu-fuss{margin-top:auto;padding:.6rem .2rem 0;border-top:1px solid var(--chrome-linie)}
.menu-schleier{position:fixed;left:0;right:0;bottom:0;
  top:var(--kopf-h,3rem);background:#0009;z-index:39}

/* Schwungwechsel in der Kopfzeile */
.schwungnav{display:flex;align-items:center;gap:.25rem;flex:none}
.schwungnav select{max-width:min(26rem,38vw)}
.nav-pfeil{font-size:1.15rem;line-height:1;padding:.15rem .55rem}
.nav-pfeil:disabled{opacity:.35;cursor:default}
.nav-pfeil:disabled:hover{border-color:var(--chrome-linie);color:var(--chrome-tinte)}

/* Warteanzeige (medien/wait.mp4, Adler aus dem Startbild) */
.warten{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:2.5rem 1rem;color:var(--neben)}
/* Das Video bringt seinen eigenen dunkelgruenen Grund mit (Marke) - es
   bekommt deshalb eine abgerundete Flaeche statt eines Blend-Modus, sonst
   sieht es auf hellem Untergrund schmutzig aus. */
.warten video{width:112px;height:auto;border-radius:14px;display:block}
.warten p{margin:0;font-size:.82rem}

/* Sessionauswahl */
.session-wahl{display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.session-karte{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;
  padding:.7rem .8rem;text-align:left;width:100%}
.session-karte:hover{border-color:var(--akzent)}
.session-karte.aktiv{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.session-karte .titel{font-weight:650;font-size:.9rem}
.session-karte .zeile{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;
  font-size:.75rem;color:var(--neben)}
.nutzer-block{margin:.2rem 0 1.1rem}
.nutzer-block > h3{margin:0 0 .45rem;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--neben);font-weight:650}

/* Zwei Takte in der Session-Streuung (Nutzerwunsch 2026-09-06).
   Erst das Bündel der Einzelschwünge, dann - wenn es ganz ausgeblendet ist -
   der Median der Session als EINE Kurve, dann von vorn. Das Ausblenden hat
   denselben Grund wie der frühere Puls (2026-08-31): Bei zehn und mehr
   Schwüngen verdecken die Linien das Pro-Band auch bei 60 %; so liegt es
   regelmäßig frei, ohne dass man etwas umschalten muss.
   Beide Animationen teilen sich die 8 s und die Marken 35 %/65 %: Genau
   dort steht die eine bei 0 und die andere fängt an. Wer eine Marke
   verschiebt, muss beide anfassen, sonst überlappen die Takte.
   Alle Graphen werden gemeinsam aufgebaut, die Takte laufen deshalb
   synchron; ein Versatz je Graph würde flimmern. */
@keyframes takt-schwuenge{
  0%,22%{opacity:.6} 35%,65%{opacity:0} 78%,100%{opacity:.6}
}
@keyframes takt-median{
  0%,35%{opacity:0} 45%,55%{opacity:.9} 65%,100%{opacity:0}
}
.graph .takt-schwuenge{animation:takt-schwuenge 8s ease-in-out infinite}
.graph .takt-median{animation:takt-median 8s ease-in-out infinite}
/* Wer Bewegung abbestellt hat, bekommt beide Ebenen ruhig nebeneinander -
   der Median ist eine einzelne Linie und verdeckt nichts. */
@media (prefers-reduced-motion:reduce){
  .graph .takt-schwuenge{animation:none;opacity:.6}
  .graph .takt-median{animation:none;opacity:.9}
}

/* Passwortfeld mit Anzeigen-Schalter (app/js/login.js) */
.pw-zeile{position:relative;margin:.2rem 0}
.pw-zeile input{width:100%;padding-right:2.4rem}
/* top/bottom statt fester Hoehe: So ist der Schalter exakt so hoch wie das
   Feld. Mit height:2rem ragte er oben und unten je 2,5 px heraus - bei einem
   Feld von 27 px faellt das auf. */
.pw-auge{position:absolute;right:.25rem;top:0;bottom:0;width:2rem;
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;border:0;background:none;color:var(--neben);cursor:pointer}
.pw-auge:hover{color:var(--tinte)}
.pw-auge[aria-pressed="true"]{color:var(--akzent)}

/* Wartende Konten im Admin (SPEC 12d) */
.konto-zeile{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  padding:.4rem 0;border-top:1px solid var(--linie)}

/* Zielkurven (SPEC 12b): der Massstab eines Trainingsziels.
   Im Zielkasten eine knappe Liste, im Editor die grosse Flaeche. */
.massstab{margin:.6rem 0 .2rem;padding:.5rem .6rem;border:1px solid var(--linie);
  border-radius:8px;background:var(--grund)}
.massstab-kopf{display:flex;gap:.5rem;align-items:baseline;margin-bottom:.3rem}
.massstab-zeile{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  padding:.3rem 0;border-top:1px solid var(--linie)}
.massstab-neu{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;
  padding-top:.45rem;margin-top:.3rem;border-top:1px solid var(--linie)}

/* Der Editor. Die Zeichenflaeche bekommt eine feste Hoehe: Beim Ziehen darf
   sie nicht mitwachsen, sonst laeuft die Kante unter dem Finger weg. */
.zielkurve-svg{width:100%;height:320px;display:block;touch-action:none}
.zielgriff{cursor:ns-resize}
.zielgriff:hover{r:8}
.zielgriff.tot{cursor:not-allowed}
.zielkurve-knoepfe{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.session-wahl{display:flex;flex-direction:column;gap:.1rem;margin:.5rem 0}
.session-wahl-zeile{display:flex;gap:.6rem;align-items:center;padding:.2rem .3rem;
  border-radius:6px;cursor:pointer}
.session-wahl-zeile:hover{background:var(--grund)}
.session-wahl-zeile input{accent-color:var(--akzent)}

/* Startseite: Ziele mit Fortschritt oben, Sessions, QR ganz unten */
.startteil{margin:0 0 1.6rem}
.start-ueberschrift{margin:0 0 .2rem;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--neben);font-weight:650}
.start-unter{margin:0 0 .6rem;font-size:.78rem;color:var(--neben)}

/* Fortschritt (app/js/fortschritt.js): je Messgroesse eine Kachel.
   Vorher standen hier Saetze wie "Rot-Quote: 78 % -> 30 % besser" -
   inhaltlich richtig, aber vier Ziele mal zwei Schlaeger ergaben eine Wand
   aus Zeilen, in der man nichts wiederfand. */
.fortschritt-teil{margin-top:.6rem;border-top:1px solid var(--linie);
  padding-top:.5rem}
.fortschritt{margin:.5rem 0 0}
.fortschritt-kopf{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;
  margin-bottom:.35rem}
.fk-club{font-weight:700;font-size:.9rem}
.fk-n{font-size:.75rem;color:var(--neben)}
.fk-todo{font-size:.78rem;margin-left:auto;color:var(--tinte)}
.fk-todo-label{color:var(--neben)}
.fortschritt-leer,.fortschritt-drift{font-size:.76rem;color:var(--neben);
  margin:.35rem 0 0}
/* Drift heisst: Die Kacheln zeigen eine Groesse, die die Pipeline gerade
   nicht mehr obenan sieht. Das ist keine Randnotiz - deshalb markiert. */
.fortschritt-drift{color:var(--gelb)}

/* auto-FILL, nicht auto-fit: Bei nur einer Kachel soll sie ihre Groesse
   behalten und nicht ueber die ganze Zeile gezogen werden - eine 700 px
   breite Kachel mit "50 %" darin sieht aus wie ein Fehler. */
.kachelreihe{display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,11.5rem),1fr))}
.kachel{display:flex;flex-direction:column;gap:.1rem;background:var(--grund);
  border:1px solid var(--linie);border-radius:9px;padding:.5rem .6rem}
.kachel-label{font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--neben);font-weight:650}
/* Proportionale Ziffern: tabular-nums gibt jeder Ziffer die Breite der 0
   und laesst grosse Zahlen locker wirken. Spalten gibt es hier keine. */
.kachel-wert{font-size:1.4rem;font-weight:650;line-height:1.15;
  letter-spacing:-.01em}
.kachel-delta{font-size:.74rem;font-weight:600}
.kachel-delta.neutral{color:var(--neben);font-weight:400}
.kachel-luecke{font-size:.68rem;color:var(--neben)}
/* Feste Groesse statt width:100%: Mit viewBox 108x30 in einer breiteren
   Box zentriert der Browser den Inhalt (xMidYMid) - die Linie schwebte
   dadurch rechts in der Kachel. preserveAspectRatio="none" waere die
   andere Loesung, verzerrt aber Strichstaerke und Punkte. */
.kachel .spark{display:block;margin-top:.35rem;overflow:visible}
/* Kapazitaet bekommt kein Urteil (Kernprinzip 4) - die Kachel bleibt
   farblich neutral, damit "mehr mph" nicht wie "besser" aussieht. */
.kachel.art-kapazitaet .kachel-wert{color:var(--neben)}
/* Marke als Knopf zur Startseite - sieht aus wie Text, verhält sich wie Link.
   Heißt bewusst NICHT .marke: die Klasse gibt es schon für die Phasenmarken
   über dem Video-Slider, und die sind position:absolute - der Knopf landete
   dadurch links außerhalb des Bildes ("agleShot" statt "EagleShot").
   flex:none, damit er in schmalen Fenstern nicht gequetscht wird; weichen
   soll stattdessen der Untertitel. */
header .startknopf{display:flex;align-items:center;gap:.5rem;background:transparent;
  border:0;padding:.1rem .2rem;border-radius:7px;flex:none;white-space:nowrap}
header .startknopf:hover h1{color:var(--gold)}
header .startknopf h1{margin:0}

/* Konto-QR - steht am Seitenende (Nutzervorgabe 2026-09-04) */
.qr-zeile{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.qr{background:#fff;border:1px solid var(--linie);border-radius:10px;
  padding:.5rem;flex:none;image-rendering:pixelated}
.qr-id{display:inline-block;word-break:break-all;font-size:.8rem;
  background:var(--grund);border:1px solid var(--linie);border-radius:6px;
  padding:.2rem .45rem}

/* Garmin-R10-Tabelle: schmale Werteliste, kein Ampelraster */
table.r10{max-width:26rem}
table.r10 td{padding:.3rem .4rem}
table.r10 td.zahl{text-align:right;white-space:nowrap;font-weight:600}
table.r10 td.deutung{color:var(--neben);font-size:.78rem;padding-left:.6rem;
  white-space:nowrap}
table.r10 tr.abgeleitet td{border-top:1px solid var(--linie);color:var(--neben)}
table.r10 tr.abgeleitet td.zahl{color:var(--tinte)}

/* R10-Grafiken: Treffmoment und Ballflug */
.r10-bilder{display:flex;gap:1rem;flex-wrap:wrap;margin:.7rem 0}
/* KPI-Kacheln im Launch-Monitor-Stil; feste Markenfarben wie die Grafiken,
   deshalb unabhaengig vom Hell/Dunkel-Thema */
/* Grid statt Flex: bei Flex dehnte sich eine umgebrochene letzte Kachel
   ueber die volle Breite */
.kpi-leiste{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));
  gap:.45rem;margin:0 0 .8rem}
.kpi{background:#0a3527;border-radius:8px;
  padding:.45rem .5rem .4rem;text-align:center}
.kpi-label{display:block;font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;color:#E8B33B;font-weight:700;white-space:nowrap}
.kpi-wert{display:block;font-size:1.45rem;line-height:1.15;font-weight:700;
  color:#FFFFFF}
.r10-bilder.kompakt{margin:.2rem 0 .9rem;gap:.7rem}
/* Gleiche RENDER-Hoehe beider Grafiken: Breitenanteile umgekehrt
   proportional zum Seitenverhaeltnis der viewBoxen
   (Treffmoment 520/800 = 0.65 -> 1/0.65 = 1.54;
    Ballflug 120/320 = 0.375 -> 1/0.375 = 2.67). */
.r10-bilder.kompakt figure{flex:1 1 0;min-width:150px}
.r10-bilder.kompakt figure:first-child{flex-grow:1.54}
.r10-bilder.kompakt figure:last-child{flex-grow:2.67}
.r10-bilder.kompakt figure{display:flex}   /* ohne figcaption kein Leerraum */
.r10-bilder figure{margin:0;flex:1 1 300px;min-width:0}
.r10-bilder svg{width:100%;height:auto}
.klein.warnung{color:var(--rot);background:color-mix(in srgb,var(--rot) 8%,transparent);
  border-left:2px solid var(--rot);padding:.35rem .5rem;border-radius:0 5px 5px 0}

/* Dialoge in der Seite (kern.js: frage/melde) - siehe Kommentar dort:
   confirm()/alert() darf der Browser stumm schalten, <dialog> nicht. */
.dialogfeld{border:1px solid var(--linie);border-radius:10px;padding:1.1rem 1.3rem;
  background:var(--flaeche);color:var(--tinte);max-width:min(34rem,90vw);
  max-height:80vh;overflow:auto;box-shadow:0 12px 40px #0006}
.dialogfeld::backdrop{background:#0009}
.dialogfeld h3{margin:0 0 .6rem;font-size:1rem}
.dialog-zeile{margin:.15rem 0;font-size:.85rem;line-height:1.45}
.dialogfeld pre.dialog-zeile{font-family:ui-monospace,Menlo,monospace;font-size:.74rem;
  color:var(--neben);margin:0;white-space:pre-wrap;word-break:break-all}
.dialog-luft{height:.6rem}
.dialog-knoepfe{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}

/* Zeitleiste auf der Startseite (app/js/timeline.js, Paket 3 ab 2026-09-05).
   Eine senkrechte Schiene mit einem Punkt je Session. Der Platz rechts
   neben dem Punkt gehoert dem Eintrag - dort waechst spaeter der Dialog
   zwischen Schueler und Pro. */
.timeline{position:relative;margin:.2rem 0 .4rem;padding-left:1.15rem}
.timeline::before{content:"";position:absolute;left:.29rem;top:.35rem;bottom:.35rem;
  width:2px;background:var(--linie)}
.tl-tag{position:relative;margin:1rem 0 .45rem;font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--neben)}
.tl-tag:first-child{margin-top:.2rem}
.tl-eintrag{position:relative;margin:0 0 .5rem}
.tl-punkt{position:absolute;left:-1.02rem;top:.95rem;width:.55rem;height:.55rem;
  border-radius:50%;background:var(--flaeche);border:2px solid var(--akzent)}
.tl-karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;
  padding:.6rem .75rem}
.tl-karte.aktiv{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
/* Ganze Box anklickbar (Pro-Ebene 1) - der Zeiger und der Rand sagen es,
   sonst raet man, ob nur der Knopf geht. */
.tl-karte.tl-klickbar{cursor:pointer}
.tl-karte.tl-klickbar:hover{border-color:var(--akzent)}
.tl-kopf{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.tl-zeit{font-size:.9rem;font-weight:650}
.tl-wer{font-size:.78rem;font-weight:700;color:var(--akzent)}
/* Dieselbe Schriftfarbe wie die Auftrags- und Zielzeile darunter: Seit die
   beiden nicht mehr pauschal grau sind (2026-09-06), stand die Kopfzeile
   heller als der Text unter ihr - die Karte las sich von unten nach oben.
   Klein bleibt sie, das trennt Fakten von Aussage genug. */
.tl-fakten{font-size:.78rem;color:var(--tinte);flex:1}
/* Schmal: Die Fakten bekommen eine eigene Zeile, damit Ampel und "Öffnen"
   nicht mitten im Text umbrechen. Sonst steht der Knopf irgendwo. */
@media (max-width:560px){
  .tl-fakten{flex-basis:100%;order:3;flex:none}
  .tl-kopf .chip{margin-left:auto}
}
/* Auftrags- und Zielzeile: eine Schrift, eine Groesse. Die Farbe traegt
   die Unterscheidung - grau heisst "hier wurde nichts gemessen", nicht
   "hier ist alles gut". Bis 2026-09-06 lief die ganze Zeile ueber .klein
   und war damit IMMER grau; als Signal war das wertlos. */
.tl-auftrag{margin:.3rem 0 0;font-size:.84rem;color:var(--tinte)}
.tl-auftrag.tl-unbewertbar{color:var(--neben)}
/* Der Dialogplatz. Heute stehen hier die Notizen des Pros; leer bleibt er
   unsichtbar, damit die Zeitleiste nicht aus leeren Kaesten besteht. */
.tl-dialog:empty{display:none}
.tl-dialog{margin-top:.6rem;border-top:1px solid var(--linie);padding-top:.5rem}
.tl-notiz{margin:.35rem 0;font-size:.84rem}
.tl-notiz p{margin:.1rem 0 0;white-space:pre-wrap}

/* Frei gezogene Gerade über dem Video (app/js/videolinie.js).
   Über dem Raster, aber durchlässig für Zeiger - sonst käme man an das
   Video darunter nicht mehr heran. Erst im Zeichenmodus fängt sie. */
.video-linie{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none}
.video-huelle.zeichnet{cursor:crosshair}
/* Ueber einer Linie zeigt der Zeiger, dass sie zu greifen ist. */
.video-huelle.greifbar:not(.zeichnet){cursor:move}
/* Die Bedienung liegt IM Bild, oben rechtsbündig in einer Zeile
   (Nutzervorgabe 2026-09-05). Halbtransparenter Grund, damit die Knöpfe
   auf hellem Himmel wie auf dunklem Rasen lesbar bleiben. */
.video-werkzeuge{position:absolute;top:.4rem;right:.4rem;display:flex;gap:.3rem;
  z-index:2}
.video-werkzeuge .btn{background:#000000a6;color:#fff;border-color:#ffffff59;
  line-height:1.1;backdrop-filter:blur(2px)}
.video-werkzeuge .btn:hover{border-color:var(--gold)}
.video-werkzeuge .btn.aktiv{background:var(--gold);color:#1B231F;
  border-color:var(--gold)}
.video-werkzeuge .btn:disabled{opacity:.4;cursor:not-allowed}
/* Symbolknopf: das Zeichen traegt die Bedeutung, nicht ein Wort. */
.video-werkzeuge .btn.ikon{display:inline-flex;align-items:center;
  padding:.12rem .3rem}
/* Beide Symbole 25 % groesser (Nutzervorgabe 2026-09-06): 18 -> 22,5 px
   beim Liniensymbol, .72 -> .9rem beim Papierkorb. Nur hier, nicht an
   .klein-btn selbst - die Klasse traegt auch die Knoepfe der Zeitleiste. */
.video-werkzeuge .btn.ikon svg{display:block;width:22.5px;height:22.5px}
.video-werkzeuge .btn.klein-btn{font-size:.9rem}
/* Winkel zur Senkrechten, waehrend gezogen wird. Als HTML neben dem
   Linienende - im SVG wuerde die gestreckte viewBox die Schrift
   mitverzerren. translate(...) haelt das Schild am Zeiger, ohne dass es
   ueber den Rand laeuft. */
/* Die Farbe kommt aus dem JS (Linienfarbe), damit man bei zwei Linien
   sieht, welche Zahl zu welcher gehoert. */
/* line-height ausdruecklich: .video-huelle setzt 0 (kein Spalt unter dem
   Video), und geerbt schrumpfte der dunkle Grund auf das Padding - ein
   flacher Balken quer durch die Zahl statt eines Schildes dahinter. */
.linie-winkel{position:absolute;transform:translate(.5rem,-1.6rem);
  background:#000000c4;border-radius:6px;padding:.1rem .35rem;line-height:1.25;
  font-size:.74rem;font-weight:650;font-variant-numeric:tabular-nums;
  white-space:nowrap;pointer-events:none;z-index:3}
.linie-winkel.nach-links{transform:translate(-100%,-1.6rem) translateX(-.5rem)}
.linie-winkel.nach-oben{transform:translate(.5rem,.4rem)}
.linie-winkel.nach-links.nach-oben{transform:translate(-100%,.4rem) translateX(-.5rem)}

/* Pro-Ebene 1: Schülerwahl (app/js/pro.js, 2026-09-06) */
.schueler-wahl{display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.schueler-karte{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;
  padding:.7rem .8rem;text-align:left;width:100%}
.schueler-karte:hover{border-color:var(--akzent)}
.schueler-karte .name{font-weight:700;font-size:1rem}
.schueler-karte .zeile{display:flex;gap:.35rem;flex-wrap:wrap;
  font-size:.76rem;color:var(--neben)}
/* Der Schülerkontext in der Kopfzeile - sagt, in wem man gerade ist. */
header .schueler-chip{flex:none;white-space:nowrap;font-weight:650;
  border-color:var(--gold);color:var(--gold);background:transparent}
header .schueler-chip:hover{background:color-mix(in srgb,var(--gold) 16%,transparent)}
/* Gesperrte Menüpunkte (ohne gewählten Schüler) */
.menu-eintrag:disabled{opacity:.45;cursor:not-allowed}
.menu-eintrag:disabled:hover{background:transparent}

/* Beiträge zu einer Session (app/js/timeline.js, 2026-09-06) */
.tl-chat{margin-left:.15rem}
.tl-notiz-kopf{display:flex;gap:.4rem;align-items:baseline}
.tl-notiz-knoepfe{margin-left:auto;display:flex;gap:.25rem;flex:none;
  align-items:center}
/* Feste Box fuer die Symbolknoepfe. Emoji bringen je Zeichen eine eigene
   Zeilenhoehe mit - gemessen 2026-09-06: Stift 31,1 px, Papierkorb 23,1 px
   im selben Knopf. Wer die Hoehe der Schrift ueberlaesst, bekommt zwei
   verschieden grosse Knoepfe nebeneinander. */
.tl-notiz-knoepfe .btn{display:inline-flex;align-items:center;
  justify-content:center;width:1.9rem;height:1.6rem;padding:0;
  font-size:.85rem;line-height:1;
  /* margin:0 als Riegel, nicht als Kosmetik: Knopfklassen bringen
     stellenweise eigene Margen mit (`.btn.gefahr` etwa ein margin-top von
     .5rem fuer den Platz unter einer Karte). In einer zentrierten Reihe
     schiebt so eine Marge einen der beiden nach unten - genau das war hier
     schon einmal der Fall, gemessen 4 px Versatz. */
  margin:0}
.tl-schreiben{margin:.4rem 0 .2rem}
.tl-schreibfeld{width:100%;font:inherit;font-size:.86rem;line-height:1.4;
  padding:.45rem .55rem;border:1px solid var(--linie);border-radius:8px;
  background:var(--grund);color:var(--tinte);resize:vertical}
.tl-schreibfeld:focus{outline:2px solid var(--akzent);outline-offset:-1px}
.tl-schreiben .knopfreihe{margin-top:.35rem}

/* Lesenotiz des Pros je Session (app/js/timeline.js, 2026-09-06) */
.tl-gesehen{flex:none;color:var(--neben)}
.tl-gesehen.an{border-color:var(--akzent);color:var(--akzent);font-weight:650}

/* Wer schreibt? Rolle statt "eigen/fremd" - beide Seiten sehen denselben
   Verlauf, und die Frage ist, wer etwas sagt. Die Rolle steht daneben im
   Klartext; Rand und Einzug sind der zweite Kanal, nie der einzige. */
/* Innenabstand rundum, nicht nur links: Bei der eingefaerbten Fassung
   klebte der Text sonst oben und unten am Rand der Flaeche, und der
   Aendern-Knopf sass direkt auf der Kante. */
.tl-notiz{border-left:3px solid var(--linie);padding:.45rem .6rem .5rem .55rem}
.tl-von-pro{border-left-color:var(--akzent)}
.tl-von-schueler{border-left-color:var(--band);margin-left:1.4rem;
  background:color-mix(in srgb,var(--band) 6%,transparent);
  border-radius:0 8px 8px 0}
/* Rollensymbol vor dem Namen. Feste Breite, damit Namen untereinander
   bündig bleiben - 🎓 und 🏌️ sind verschieden breit. */
/* Symbol und Knoepfe im Kopf nicht auf der Grundlinie ausrichten - sonst
   haengt ein Emoji tiefer als der Name daneben. */
.tl-notiz-kopf{align-items:center}
.tl-rolle{display:inline-block;width:1.35em;font-size:.95em;
  font-style:normal;line-height:1;flex:none}

/* Schuelerbezug in der aufgeklappten Schublade (router.markiereNav) */
.menu-schueler{padding:.5rem .9rem;margin-bottom:.2rem;font-size:.82rem;
  font-weight:650;color:var(--gold);border-bottom:1px solid var(--chrome-linie)}