/* layout.css – Grid, Portrait/Landscape-Layouts (CLAUDE.md Abschnitt 6). */

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.screen {
  height: 100%;
}

.hidden {
  display: none !important;
}

/* ---- Modus-Auswahl-Screen ------------------------------------------- */

#mode-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  text-align: center;
}

#mode-select .app-logo {
  width: 96px;
  height: 96px;
  border-radius: 22%;
}

#mode-select .mode-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 720px;
}

/* ---- App-Shell: Portrait (Standard) ---------------------------------- */

#app-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  flex: 0 0 auto;
}

.status-bar .spacer { flex: 1; }

/* Die Statuszeile bleibt EINZEILIG: Umbrach sie, kostete sie auf dem Handy
   61 statt 40 px – Höhe, die Video und Diagramm fehlt. Ist es zu eng, wird
   hinten gekürzt; dort steht die fps-Angabe, die man am seltensten braucht. */
.status-bar #status-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.video-area {
  position: relative;      /* Anker für den Tracking-Fortschrittsbalken */
  background: var(--bg-dark);
  aspect-ratio: 16 / 9;   /* wird beim Videoladen auf dessen Seitenverhältnis gesetzt */
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 55vh;       /* Hochkant-Videos dürfen das Diagramm nicht verdrängen */
  overflow: hidden;
  /* Auch auf den schwarzen Rändern neben dem Bild wird gezoomt und geschoben –
     ohne dies zöge der Browser dort seine eigene Seitenlupe auf. */
  touch-action: none;
}

#video-canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  touch-action: none;     /* ROI-Ziehen darf nicht scrollen */
  /* Nur die Maus betrifft das: Ohne dies beginnt ein Zug über dem Video eine
     Textmarkierung, die sich blau über Werkzeugleiste und Beschriftungen legt. */
  user-select: none;
  -webkit-user-select: none;
}

/* Bei Zoom verschiebt ein Zug den Ausschnitt (pan.js) – am PC ist das ohne
   Zeigerwechsel unsichtbar. */
#video-canvas.pan-bereit { cursor: grab; }
#video-canvas.pan-laeuft { cursor: grabbing; }

/* NACH den Pan-Regeln, damit das Markieren bei gleicher Spezifität gewinnt:
   Ist der Knopf gedrückt, zieht der Finger den Rahmen, nicht den Ausschnitt. */
#video-canvas.roi-armed {
  cursor: crosshair;
}

/* Zoomfaktor als Plakette in der Bildecke – sie soll das Video möglichst wenig
   verdecken, darum kleiner als ein Knopf der Werkzeugleiste. */
.video-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  /* Etwas unter den 44 px aus Abschnitt 5: Die Plakette liegt ÜBER dem
     Messbild, jeder Pixel mehr verdeckt Bildinhalt. Sie sitzt frei in der Ecke,
     ohne Nachbarn, die man versehentlich träfe. */
  min-height: 40px;
  padding: 4px 10px;
  font-size: var(--text-sm);
  background: rgba(15, 17, 21, 0.72);
}

/* Während Markieren und Kalibrieren fängt die Plakette nichts ab (main.js) */
.video-badge.durchlaessig {
  pointer-events: none;
  opacity: 0.35;
}

/* Werkzeugleiste im Programmkopf – volle Breite, resized NICHT mit dem
   Splitter (liegt außerhalb der Chart-Spalte). */
.action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* lieber umbrechen als seitlich wegscrollen */
  gap: 6px;
  padding: 5px 8px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  flex: 0 0 auto;
  /* KEIN overflow-x: Die aufgeklappten Menüs stehen absolut positioniert und
     würden daran abgeschnitten. Durch die Bündelung in Menüs passt die Leiste
     ohnehin in ein bis zwei Zeilen. */
  position: relative;
}

/* Knöpfe behalten ihre Breite, statt gequetscht zu werden. OHNE das schrumpfen
   sie auf schmalen Schirmen unter ihre Textbreite: Die Beschriftung läuft dann
   aus dem Knopf heraus und überlagert die Nachbarn – auf dem Handy war die
   Leiste damit unlesbar (Flex-Kinder dürfen standardmäßig schrumpfen). */
.action-bar > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---- Klappmenüs in der Werkzeugleiste -------------------------------------- */

.menu {
  position: relative;       /* Bezug für das aufgeklappte Feld */
}

.menu > summary {
  list-style: none;         /* das voreingestellte Dreieck ersetzen wir selbst */
  cursor: pointer;
  user-select: none;
  /* Enger als ein gewöhnlicher Knopf, damit die drei Menüs auf einem 375 px
     breiten Schirm in EINE Zeile passen. Zwei Zeilen kosteten 53 px Höhe. */
  padding-left: 11px;
  padding-right: 11px;
}

.menu > summary::-webkit-details-marker { display: none; }

.menu > summary::after {
  content: " ▾";            /* im Markup wäre es Teil des übersetzten Textes */
  opacity: 0.6;
}

.menu[open] > summary {
  border-color: var(--color-accent);
  color: var(--text-primary);
}

.menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;              /* über Video-Canvas und Diagramm */
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
  max-width: min(86vw, 340px);
  padding: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

/* Volle Zeilenbreite: Auf dem Handy wird mit dem Daumen getroffen, nicht mit
   einem Mauszeiger – ein Menüeintrag darf nicht nur so breit sein wie sein
   Text. Die 44px sind die Touch-Target-Vorgabe aus Abschnitt 5. */
.menu-panel > * {
  width: 100%;
  min-height: 44px;
  text-align: left;
  white-space: normal;
}

/* Am rechten Rand aufklappende Menüs kippen nach links (setzt main.js) */
.menu-panel.nach-links {
  left: auto;
  right: 0;
}

/* ---- Objektauswahl mit Mülleimer je Zeile ----------------------------------
   Eigene Aufklappliste statt <select>: native Options können keine Knöpfe
   tragen, der Mülleimer sitzt aber laut Entwurf IN jeder Zeile rechts. */

.objekt-wahl {
  position: relative;
}

.objekt-wahl-knopf {
  width: 100%;
  justify-content: space-between;
}

/* Aufklapp-Pfeil wie bei den Menüknöpfen – im Markup wäre er Teil des Textes */
.objekt-wahl-knopf::after {
  content: "▾";
  opacity: 0.6;
  margin-left: 8px;
}

.objekt-liste {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 70;              /* über dem Menü-Panel (60) */
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.objekt-zeile {
  display: flex;
  align-items: stretch;
  gap: 2px;
}

/* Name + Punktzahl: füllt die Zeile, Mülleimer rechts daneben */
.objekt-zeile .objekt-waehlen {
  flex: 1;
  min-height: 44px;
  text-align: left;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 0 10px;
}

.objekt-zeile .objekt-waehlen.aktiv,
.objekt-zeile .objekt-waehlen:hover {
  background: var(--bg-primary);
}

.objekt-zeile .objekt-loeschen {
  flex: 0 0 44px;           /* Touch-Target (Abschnitt 5) */
  min-height: 44px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-lg);
}

.objekt-zeile .objekt-loeschen:hover {
  background: var(--bg-primary);
  color: #FF5252;           /* Löschabsicht sichtbar machen */
}

/* Auf den schmalsten Handys reichen drei Menüs plus Schloss sonst nicht in
   eine Zeile – der Umbruch kostete 50 px Höhe, die Video und Diagramm fehlen.
   Nur die Menü-KNÖPFE werden kleiner, die Einträge im aufgeklappten Feld
   behalten ihre Grösse. */
@media (max-width: 420px) {
  .action-bar { gap: 5px; padding-left: 6px; padding-right: 6px; }

  .menu > summary {
    font-size: var(--text-sm);
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Das Videoelement bekommt der Nutzer nie zu sehen – gezeichnet wird ins Canvas.
   Dem BROWSER muss es aber als sichtbares, abspielendes Video gelten: WebKit auf
   iOS drosselt die Dekodierung von Videos, die ausserhalb des Sichtfensters
   liegen oder unsichtbar sind, bis zum Stillstand. Die Medien-Uhr laeuft dann
   weiter, waehrend kein neues Bild mehr praesentiert wird – drawImage kopiert
   dasselbe Bild erneut, die Overlays wandern darueber weiter. Genau das hat der
   Nutzer auf einem iPhone 15 beobachtet ("das Overlay laeuft weiter, aber das
   Video bleibt haengen"), waehrend dasselbe Video am Laptop einwandfrei lief.
   Ausloeser sind ALLE: display:none, visibility:hidden, opacity:0 und Positionen
   ausserhalb des Fensters (hier frueher left:-9999px, 2x2 px, opacity 0).
   Darum jetzt: im Sichtfenster, messbare Groesse, Deckkraft knapp ueber null.
   Drei Pixel mit 1 % Deckkraft in der Ecke sieht niemand; pointer-events:none
   haelt sie aus jeder Bedienung heraus. Kein z-index: -1 – dahinter gilt das
   Element als verdeckt, und Verdeckung ist selbst ein Drosselungsgrund. */
.offscreen {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 3px;
  height: 3px;
  opacity: 0.01;
  pointer-events: none;
}

.chart-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  overflow-x: auto;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  flex: 0 0 auto;
}

.chart-area {
  position: relative;      /* Chart.js füllt den Container responsiv */
  flex: 1;
  background: var(--bg-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  /* Abdichtung: Das absolut positionierte Chart-Canvas darf NIE über die
     Fläche hinausmalen. Ohne dies ragte es nach einem Resize-Fehltritt
     (Panel wuchs nach dem Vermessen fertig) über das Fit-Reglerfeld. */
  overflow: hidden;
}

/* WICHTIG: Das Canvas selbst NICHT per CSS dimensionieren – Chart.js
   verwaltet width/height selbst (sonst stimmen Klick-Koordinaten und
   Darstellung nicht mehr überein). Nur positionieren. */
#chart-canvas {
  position: absolute;
  top: 0;
  left: 0;
  /* Alle Gesten gehören dem Diagramm: Ziehen verschiebt den Ausschnitt,
     zwei Finger zoomen hinein (charts.js). Ohne dies griffe der Browser
     zu und zöge seine Seitenlupe auf, statt in die Kurve zu gehen. */
  touch-action: none;
}

/* Stapelansicht: 1–3 frei belegbare Diagramme untereinander + Ableitungspfeile */
.stack-container {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 4px;
  gap: 2px;
}

.stack-row {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Größenwahl je Feld – die Auswahl IST die Achsenbeschriftung */
.stack-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-bottom: 2px;
}

.stack-head-sep {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.stack-select {
  font-size: var(--text-xs);
  padding: 2px 4px;
  min-height: 0;           /* die 44px-Regel gilt für Bedienflächen, nicht hier */
  max-width: 45%;
}

/* Große Schirme (gleiche Schwelle wie die Achsen-Kapseln): Die 11px-Auswahl
   ist am Beamer unlesbar – moderat anheben, ohne die Kopfzeile zu sprengen. */
@media (min-width: 900px) and (min-height: 480px) {
  .stack-select {
    font-size: var(--text-sm);
    padding: 4px 8px;
  }
}

/* Chart.js braucht einen positionierten Container mit fester Höhe */
.stack-row > canvas {
  flex: 1;
  min-height: 0;
}

.stack-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--text-sm);
  padding: 0 8px;
}

.stack-arrow {
  flex: 0 0 auto;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  padding: 2px 0;
}

/* Zwei Zeilen: oben Ausschnitt und Zeitleiste über die VOLLE Breite, darunter
   die Knöpfe. Vorher teilten sich Griffe, Zeitleiste und vier Knöpfe eine
   Zeile – auf dem Handy blieben für 252 Bilder rund vier Zentimeter. */
.bottom-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 2px 10px 4px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  flex: 0 0 auto;
}

.bottom-bar .nav-track {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.bottom-bar .transport {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bottom-bar .transport .spacer { flex: 1; }

/* Vier Knöpfe (Anfang, Bild zurück, Wiedergabe, Bild vor) plus "Video laden"
   passen auf schmalen Handys nur mit engeren Lücken in EINE Zeile.
   Gemessen bei 375 px Fensterbreite (Platz in der Leiste: 375 − 2×10 px
   Polster = 355 px):
     4 × 48 px (Knopf, components.css .bottom-bar .btn-icon)  = 192 px
     5 × 10 px (Lücke)                                        =  50 px
     "Video laden" einzeilig                                  = 124,5 px
                                                     Summe    = 366,5 px
   11,5 px zu viel – der Text brach um und die Leiste wuchs von 48 auf 68 px
   Höhe, die Video und Diagramm fehlen. Mit 6 px Lücke und schmalerem Polster
   am Ladeknopf: 192 + 30 + 112,5 = 334,5 px, also 20,5 px Luft.
   Die Knöpfe selbst bleiben 48 × 48 px (Abschnitt 5). Gleiche Schwelle und
   gleiche Begründung wie bei der Aktionsleiste weiter oben. */
@media (max-width: 420px) {
  .bottom-bar .transport { gap: 6px; }

  .bottom-bar .transport #btn-load-video {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.bottom-bar .scrubber {
  width: 100%;
  min-height: 44px;       /* Touch-Target */
  background: transparent;
}

/* ---- Standard: gestapelt (Video oben, Diagramm unten) --------------------
   Das ist die Handy-Ansicht. Praxistests haben gezeigt, dass am Telefon nur
   hochkant sinnvoll zu arbeiten ist – quer bleibt für Video UND Diagramm zu
   wenig Höhe. Darum stapelt auch ein quer gehaltenes Handy weiter. */

.chart-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pane-splitter {
  display: none;          /* nur die geteilte Ansicht braucht ihn */
}

/* ---- Geteilt (Video links, Diagramm rechts): PC und große Tablets --------
   Bedingung ist die GRÖSSE, nicht die Ausrichtung. Ein quer gehaltenes Handy
   erfüllt zwar "landscape", hat aber nur rund 400 px Höhe – zwei Spalten
   darin sind unbrauchbar klein.
   Adaptive Teilung: --video-col wird beim Videoladen aus dem Seiten-
   verhältnis berechnet (Bildschirmhöhe × AR, begrenzt auf 35–65%). */

@media (min-width: 900px) and (min-height: 480px) {
  .main-area {
    flex-direction: row;
  }

  .video-area {
    /* Inline-Style (aspect-ratio vom Videoladen) hier bewusst übersteuern:
       die Spalte füllt die volle Höhe, das Canvas passt sich darin ein. */
    aspect-ratio: auto !important;
    max-height: none;
    flex: 0 0 var(--video-col, 50%);
    max-width: 80%;
    min-width: 20%;
  }

  .pane-splitter {
    display: block;
    flex: 0 0 8px;
    cursor: col-resize;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    position: relative;
    touch-action: none;
  }

  .pane-splitter::before {   /* Griff-Markierung */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 36px;
    border-radius: 1px;
    background: var(--border-medium);
  }

  .pane-splitter:hover::before,
  .pane-splitter:active::before {
    background: var(--color-primary);
  }

  .pane-splitter::after {    /* unsichtbar vergrößerte Touch-Fläche */
    content: "";
    position: absolute;
    inset: 0 -10px;
  }

  .chart-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .chart-tabs {
    border-top: none;
  }
}