/* ── LEFT PANEL ── */
.panel {
  position: fixed;
  left: 0;
  top: calc(var(--bild-achse) - var(--menue-h) / 2);
  height: var(--menue-h);
  width: var(--sw);
  z-index: 200;
  background: var(--white);
  transform: translateX(calc(-100% - 2px));
  transition: transform 0.3s ease;
  overflow: hidden;
}
.panel.open {
  transform: translateX(0);
}
.panel-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.panel-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
/* ── RANDPFEILE DES LINKEN MENUES ─────────────────────────
   Die Spalte rollt ohne sichtbare Leiste (scrollbar-width:none) — dass
   ueberhaupt noch etwas ausserhalb des Ausschnitts liegt, war damit
   nicht zu sehen. Zwei flache Dreiecke sagen es: eines oben, sobald
   darueber etwas liegt, eines unten, solange darunter noch etwas kommt.

   Sie sind voll ausgefuellt und schwarz: die Richtung, in die es noch
   weitergeht, soll man sehen, nicht suchen. Ihre dem Text zugewandte Seite — beim oberen
   die untere Kante, beim unteren die obere — ist genau so breit wie der
   Satzspiegel: 22 px Rand links wie rechts, also var(--sw) minus 44.
   Damit stehen sie zugleich mittig zur Achse der Spalte, ohne dass es
   gerechnet werden muss. Der Stich betraegt 20 px, der Abstand zum Menue
   20 px — sie liegen ausserhalb davon und koennen keinen Text verdecken.
   Sie fahren mit dem Menue auf und legen dabei genau dessen Weg zurueck
   (--sw + 2px, wie seine eigene Verschiebung), damit sie an ihm kleben
   statt vor- oder nachzulaufen.                                      */
.panel-pfeil {
  position: fixed;
  z-index: 201;
  left: 22px;
  width: calc(var(--sw) - 44px);
  height: 20px;
  pointer-events: none;
  transform: translateX(calc(-1 * (var(--sw) + 2px)));
  transition:
    transform 0.3s ease,
    opacity 0.22s ease;
  opacity: 0;
}
/* Die schwarze Fläche steckt in einem eigenen Kind. Der Rahmen darum
   trägt das Auf- und Zufahren, das Kind das Wubbeln — ein Element hat
   nur EIN transform, und so fährt der Pfeil mit dem Menü auf UND wippt
   mit dessen Inhalt: eine Bewegung, ein Objekt.                     */
.panel-pfeil > i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--black);
}
.panel-pfeil.offen {
  transform: translateX(0);
}
.panel-pfeil.an {
  opacity: 1;
}
.panel-pfeil.hoch {
  top: calc(var(--bild-achse) - var(--menue-h) / 2 - 40px);
}
.panel-pfeil.hoch > i {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.panel-pfeil.runter {
  top: calc(var(--bild-achse) + var(--menue-h) / 2 + 20px);
}
.panel-pfeil.runter > i {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
body.locked .panel-pfeil {
  display: none !important;
}
/* Klicken und Ueberfahren (24.09.2026). Ein Klick auf einen Randpfeil
   blaettert die Spalte um ein Blatt weiter, in die Richtung, in die er
   zeigt (panel/panel-scroll.js): so weit, dass die eben sichtbaren
   Kategorien aus dem Blick sind und die naechsten dastehen. Einen Klick
   nimmt er aber nur an, solange er wirklich dasteht - mit dem Menue
   aufgefahren (offen) und gueltig (an). Sonst bleibt er durchlaessig:
   ein unsichtbarer Pfeil faengt nichts ab (Ausnahme: der Nachlauf,
   unten).
   Unter dem Zeiger graut er leicht auf, wie der Generieren-Knopf. Der
   steht dort auf 75 % Deckkraft, Schwarz auf Weiss ergibt #404040 -
   hier als volle Farbe statt als Deckkraft, damit das Grau auf jedem
   Grund dasselbe ist und nichts durch das Dreieck scheint. Im
   Zurueckmodus bleibt er rot: die Regel dort wiegt schwerer.        */
.panel-pfeil.an.offen {
  pointer-events: auto;
}
/* Nachlauf (25.09.2026): ein Pfeil, der kurz nach einem Klick auf ihn
   erlischt - das letzte Blatt ist erreicht -, faengt noch 0,6 s lang
   Klicks ab. Ein Klick zu viel ginge sonst durch ihn hindurch ins Bild
   und klappte das Menue zu.                                          */
.panel-pfeil.nachlauf.offen {
  pointer-events: auto;
}
.panel-pfeil > i {
  transition: background-color 0.15s;
}
.panel-pfeil:hover > i {
  background: var(--grau-700);
}

.sec {
  padding: 26px 22px 0;
  text-align: right;
  max-width: 100%;
  box-sizing: border-box;
}
.sec:first-child {
  padding-top: 28px;
}
/* Jede Kategorie laesst sich verschieben — die Luft unten gehoert der,
   die gerade am Ende steht (Prototyp V3). */
.sec-last,
.panel-scroll > .sec:last-child {
  padding-bottom: 24px;
}

/* ── DER WEG DURCH DAS MENUE ──────────────────────────────────────
   Erst der Modus, dann der Stil, dann die Aufloesung, dann alles
   Uebrige. Was noch nicht an der Reihe ist, steht blass da und nimmt
   keine Klicks an — sichtbar bleibt es trotzdem, damit man sieht, was
   noch kommt und wie weit man ist.                                  */
.panel-scroll > .stufe-zu {
  opacity: 0.22;
  pointer-events: none;
  filter: grayscale(1);
  transition:
    opacity 0.4s ease,
    filter 0.4s ease;
}
.panel-scroll > .sec {
  transition:
    opacity 0.4s ease,
    filter 0.4s ease;
}
.sec {
  position: relative;
}
/* ── UMSORTIEREN IM LINKEN MENUE ──────────────────────────────────
   Wer die Maustaste auf einer Kategorie HÄLT, nimmt sie am Stück auf
   (ui/long-press.js). Die Rückmeldung ist die SCHRIFT: was in der Hand
   liegt, steht rot — Beschriftung, Chips, Tags, Felder. Eine rote Fläche
   verdeckte gerade das, was man beim Einsortieren im Auge behalten will.
   ROT IST NUR, WAS IN DER HAND IST. Früher stand unter Umschalt alles
   Verschiebbare blass rot und das unter dem Zeiger voll; diese flächige
   Rötung ist weg. Es bleibt eine einzige Kennung: `zieht` (Prototyp V3). */
body.sortier .panel-scroll > .sec.sortierbar {
  -webkit-user-select: none;
  user-select: none;
} /* Zeiger: die Faust, siehe ui/cursors.js */
.sec.zieht {
  --sr: var(--red);
}
.sec.zieht,
.sec.zieht .sec-label,
.sec.zieht .chip,
.sec.zieht .tag,
.sec.zieht textarea,
.sec.zieht input,
.sec.zieht select {
  color: var(--sr);
  opacity: 1;
}
/* Der Platzhalter trägt seine eigene Farbe und braucht darum seine eigene
   Zeile — sonst stünde die Freie Beschreibung als einzige grau da, während
   der Rest der Kategorie rot ist. */
.sec.zieht textarea::placeholder,
.sec.zieht input::placeholder {
  color: var(--red);
  opacity: 1;
}
/* Was gerade wandert, steht voll und dick — Beschriftung, Chips und Tags. */
.sec.zieht,
.sec.zieht .sec-label,
.sec.zieht .chip,
.sec.zieht .tag {
  -webkit-text-stroke: 0.45px currentColor;
}
.sec.zieht,
.sec.zieht .sec-label,
.sec.zieht .chip,
.sec.zieht .tag,
.sec.zieht textarea,
.sec.zieht input,
.sec.zieht select {
  color: var(--red);
}
.sec.zieht {
  opacity: 1;
}
.sec.ziel {
  box-shadow: 0 -1px 0 var(--black);
}