/* ── 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;
  background: var(--black);
  pointer-events: none;
  transform: translateX(calc(-1 * (var(--sw) + 2px)));
  transition:
    transform 0.3s ease,
    opacity 0.22s ease;
  opacity: 0;
}
.panel-pfeil.offen {
  transform: translateX(0);
}
.panel-pfeil.an {
  opacity: 1;
}
.panel-pfeil.hoch {
  top: calc(var(--bild-achse) - var(--menue-h) / 2 - 40px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.panel-pfeil.runter {
  top: calc(var(--bild-achse) + var(--menue-h) / 2 + 20px);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
body.locked .panel-pfeil {
  display: none !important;
}

.sec {
  padding: 26px 22px 0;
  text-align: right;
  max-width: 100%;
  box-sizing: border-box;
}
.sec:first-child {
  padding-top: 28px;
}
.sec-last {
  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 ──────────────────────────────────
   Mit gedrueckter Umschalttaste laesst sich eine Kategorie am Stueck
   ziehen. Die Rueckmeldung ist die SCHRIFT: solange die Maustaste
   gedrueckt ist, steht alles rot, was mitwandert — Beschriftung, Chips,
   Tags, Felder. Eine rote Flaeche verdeckte gerade das, was man beim
   Einsortieren im Auge behalten will.                                */
body.sortier .panel-scroll > .sec.sortierbar {
  user-select: none;
} /* Zeiger: die Hand, siehe Kapsel im Kopf */
/* ── WAS SICH SCHIEBEN LAESST, ZEIGT SICH ──────────────────────────
   Solange Umschalt gehalten wird, steht ALLES Verschiebbare in Rot — im
   linken Menue die Kategorien samt ihren Chips, in der Leiste die
   Miniaturen, rechts die Materialplaetze. Blass, solange es nur dabeisteht;
   voll und eine Spur dicker, was unter dem Zeiger liegt. So sieht man mit
   einem Blick, was man greifen kann und was zu dem Block gehoert.    */
body.sortier .panel-scroll > .sec.sortierbar {
  --sr: rgba(232, 57, 28, 0.7);
}
body.sortier .panel-scroll > .sec.sortierbar:hover {
  --sr: rgba(232, 57, 28, 0.9);
}
body.sortier .panel-scroll > .sec.sortierbar.zieht,
.sec.zieht {
  --sr: var(--red);
}
body.sortier .panel-scroll > .sec.sortierbar,
body.sortier .panel-scroll > .sec.sortierbar .sec-label,
body.sortier .panel-scroll > .sec.sortierbar .chip,
body.sortier .panel-scroll > .sec.sortierbar .tag,
body.sortier .panel-scroll > .sec.sortierbar textarea,
body.sortier .panel-scroll > .sec.sortierbar input,
body.sortier .panel-scroll > .sec.sortierbar select {
  color: var(--sr);
  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);
}