/* ── RIGHT CONTEXT ── */
aside.ctx {
  position: fixed;
  right: 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;
  display: grid;
  /* auto statt 48px: die ComfyUI-Leiste ist ausgeblendet und belegt dann 0 px,
     wird sie wieder eingeblendet, bekommt sie ihre Höhe automatisch */
  grid-template-rows: 1fr auto;
  gap: 4px;
  align-self: unset;
}
/* ── Materialplatz: Rechteck + schwarzer Masken-Keil ────────── */
.mat-slot {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  cursor: pointer;
  perspective: 800px;
}
/* Die rote Flaeche liegt auf dem Platz, der in der Hand ist — und nur auf
   ihm (langer Druck, Prototyp V3). */
.mat-slot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--red);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 5;
}
.mat-slot.zieht::after {
  opacity: 1;
}
body.sortier .mat-slot {
  user-select: none;
}
/* Bildausschnitt begrenzen — auf der Seite selbst, nicht auf der Kartenseite */
.mat-img,
.mat-front {
  border-radius: 0;
}
.mat-img {
  overflow: hidden;
}
/* Karte: wendet sich per Doppelklick, wie die Historien-Miniaturen.
   Aufbau bewusst identisch zu .hist-card — kein overflow auf den Seiten:
   das flacht in Firefox den 3D-Kontext ab, backface-visibility greift dann
   nicht und die Vorderseite scheint durch die Rückseite. */
.mat-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
}
.mat-slot.flipped .mat-card {
  transform: rotateY(180deg);
}
.mat-front,
.mat-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* backface-visibility allein genügt nicht: sobald ein Browser den 3D-Kontext
     abflacht, bleibt die abgewandte Seite sichtbar und scheint durch. Deshalb
     werden die Seiten zusätzlich hart umgeschaltet — nach der halben Drehzeit,
     wenn die Karte hochkant steht, also im unsichtbaren Moment. */
  /* Die abgewandte Seite ist auch unsichtbar (visibility): sonst liefe
     Tab auf ihren Knopf (V3, Audit bedienung-01). */
  transition:
    opacity 0s linear 0.2s,
    visibility 0s linear 0.2s;
}
.mat-back {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.mat-slot.flipped .mat-front {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.mat-slot.flipped .mat-back {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.mat-front {
  background: var(--white);
}
/* Platzhaltergrafik statt Platzhalterbild — die Flaeche bleibt hell */
.mat-slot:not(.flipped):hover .ph-x,
.mat-slot.drag-over .ph-x {
  stroke: var(--ph-dunkel);
}

/* Rückseite: roter Grund, weiße Schrift — hier steht die Materialbeschreibung */
/* kein opacity hier — das steuert die Seitenumschaltung weiter oben,
   ein opacity:1 an dieser Stelle würde sie überschreiben */
.mat-back {
  background: #e8391c;
  transform: rotateY(180deg);
}
/* Die Rückseite bleibt leer — rote Fläche heißt: Material ausgesetzt */

/* Materialbild: ohne Mouseover ausgegraut und halbtransparent */
.mat-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  filter: grayscale(1);
  opacity: 0.5;
  transition:
    filter 0.25s ease,
    opacity 0.25s ease;
}
.mat-slot:not(.flipped):hover .mat-img,
.mat-slot.drag-over .mat-img {
  filter: none;
  opacity: 1;
}
.mat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Masken-Keil: immer schwarz, Breite zeigt den Zustand.
   Die drei Punkte bleiben in gleicher Zahl, damit clip-path animieren kann. */
/* In Ruhe steht die Spitze ein Drittel der Strecke vom rechten Rand zur
   Mitte, also bei 83 %. Weit genug, um den Keil als Flaeche zu lesen,
   nah genug, um nicht ins Bild zu ragen.                           */
.mat-wedge {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--black);
  clip-path: polygon(100% 0, 100% 100%, 83% 50%);
  transition:
    clip-path 0.25s ease,
    background-color 0.15s ease;
}
/* Doppelklick auf den Keil dreht ihn um: er faehrt über den ganzen Platz
   auf und zeigt ein weisses Kreuz, wie die Rueckseite der
   Materialreferenz. Das Kreuz entfernt nur die Maske.
   Der Dreieck-Umriss behaelt dabei seine drei Punkte, sonst liesse sich
   der Weg dorthin nicht weich zeichnen.                            */

/* Kommt eine Maske an, wackelt die Spitze kurz nach — wie ein Pudding,
   der abgesetzt wird. Sie schiesst ueber die Mitte hinaus, kommt zurueck,
   schwingt kleiner werdend aus. Eine Rueckmeldung, die man sieht, ohne
   hinzusehen.                                                       */
@keyframes mat-wackeln {
  0% {
    clip-path: polygon(100% 0, 100% 100%, 83% 50%);
  }
  18% {
    clip-path: polygon(100% 0, 100% 100%, 28% 50%);
  }
  38% {
    clip-path: polygon(100% 0, 100% 100%, 64% 50%);
  }
  56% {
    clip-path: polygon(100% 0, 100% 100%, 40% 50%);
  }
  72% {
    clip-path: polygon(100% 0, 100% 100%, 56% 50%);
  }
  86% {
    clip-path: polygon(100% 0, 100% 100%, 46% 50%);
  }
  100% {
    clip-path: polygon(100% 0, 100% 100%, 50% 50%);
  }
}
.mat-wedge.wackelt {
  animation: mat-wackeln 0.72s cubic-bezier(0.33, 1, 0.5, 1);
}

/* Geladene Maske: der Keil BLEIBT, wo ihn das Ueberfahren hingefuehrt hat —
   mit der Spitze auf dem Kreuzungspunkt der Platzhaltermarkierung. Er stand
   vorher auf 72 % und rutschte damit nach dem Laden wieder ein Stueck
   zurueck; genau das sah aus, als loese sich die Maske wieder.        */
.mat-wedge.has-mask {
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
}
/* Ueberfahren und Ziehen: die Spitze faehrt bis in die Mitte des Platzes,
   also genau auf den Kreuzungspunkt der Platzhaltermarkierung.          */
.mat-wedge:hover,
.mat-wedge.drag-over {
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
}
/* Zugleich graut der schwarze Keil unter dem Zeiger leicht auf, wie der
   Generieren-Knopf — als volle Farbe, nicht als Deckkraft: unter dem Keil
   liegt das Materialbild, durch eine halb durchsichtige Fläche schiene es
   hindurch. Der rote Keil bleibt rot, auf ihm steht der Eimer (V3). */
.mat-wedge:not(.rot):hover {
  background: var(--grau-700);
}
/* Gewendet wird hier nichts mehr — an dieser schmalen Form sah das
   Kippen nur gequetscht aus. Stattdessen faehrt der Keil ein und wieder
   aus: die Spitze zieht sich an den rechten Rand zurueck, dort wechselt
   die Farbe, und dann schiebt er sich als roter Keil bis zur Mitte vor,
   mit demselben Nachwackeln wie beim Laden einer Maske. Geht der Zeiger,
   laeuft dasselbe Spiel zurueck in Schwarz.                         */
@keyframes mat-rot-rein {
  0% {
    clip-path: polygon(100% 0, 100% 100%, 50% 50%);
    background: var(--black);
  }
  26% {
    clip-path: polygon(100% 0, 100% 100%, 100% 50%);
    background: var(--black);
  }
  27% {
    clip-path: polygon(100% 0, 100% 100%, 100% 50%);
    background: var(--red);
  }
  52% {
    clip-path: polygon(100% 0, 100% 100%, 34% 50%);
    background: var(--red);
  }
  68% {
    clip-path: polygon(100% 0, 100% 100%, 60% 50%);
    background: var(--red);
  }
  81% {
    clip-path: polygon(100% 0, 100% 100%, 43% 50%);
    background: var(--red);
  }
  92% {
    clip-path: polygon(100% 0, 100% 100%, 54% 50%);
    background: var(--red);
  }
  100% {
    clip-path: polygon(100% 0, 100% 100%, 50% 50%);
    background: var(--red);
  }
}
@keyframes mat-schwarz-rein {
  0% {
    clip-path: polygon(100% 0, 100% 100%, 50% 50%);
    background: var(--red);
  }
  26% {
    clip-path: polygon(100% 0, 100% 100%, 100% 50%);
    background: var(--red);
  }
  27% {
    clip-path: polygon(100% 0, 100% 100%, 100% 50%);
    background: var(--black);
  }
  52% {
    clip-path: polygon(100% 0, 100% 100%, 34% 50%);
    background: var(--black);
  }
  68% {
    clip-path: polygon(100% 0, 100% 100%, 60% 50%);
    background: var(--black);
  }
  81% {
    clip-path: polygon(100% 0, 100% 100%, 43% 50%);
    background: var(--black);
  }
  92% {
    clip-path: polygon(100% 0, 100% 100%, 54% 50%);
    background: var(--black);
  }
  100% {
    clip-path: polygon(100% 0, 100% 100%, 50% 50%);
    background: var(--black);
  }
}
/* Der rote Keil steht bis zur Mitte und schlaegt dabei alles andere —
   er muss deshalb NACH der geladenen Maske und dem Ueberfahren stehen:
   gleiche Spezifitaet, und dann entscheidet die Reihenfolge.        */
.mat-wedge.rot,
.mat-wedge.rot:hover {
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
  background: var(--red);
  animation: mat-rot-rein 0.82s cubic-bezier(0.33, 1, 0.5, 1);
}
.mat-wedge.zurueck,
.mat-wedge.zurueck:hover {
  animation: mat-schwarz-rein 0.82s cubic-bezier(0.33, 1, 0.5, 1);
}
/* Der Eimer sitzt im Schwerpunkt des Dreiecks: bei den Punkten
   (100 % | 0), (100 % | 100 %) und (50 % | 50 %) liegt der bei 83 % / 50 %. */
.mat-wedge-del {
  position: absolute;
  left: 83%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  font-size: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.2s,
    visibility 0s linear 0.2s;
}
/* Er taucht erst auf, wenn der rote Keil ausgefahren ist — vorher gibt
   es keine Fläche, auf der er stehen könnte. Unsichtbar nimmt er auch
   keinen Fokus; die Verzögerung gilt beiden (V3).                  */
.mat-wedge.rot .mat-wedge-del {
  opacity: 0.9;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0.36s;
}
.mat-wedge-del:hover {
  opacity: 1;
}
/* Hier steht der EIMER, nicht mehr das Kreuz aus zwei Farbverläufen:
   gezeichnet, mit dem Strich vom Knopf (ui/icons.js svgBin). */
.mat-wedge-del svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Gelöscht wird nur auf der Rückseite: der Eimer oben RECHTS entfernt
   das Materialbild — wie der Eimer der Historien-Miniaturen (.hist-del)
   und der Karten im Kontaktbogen (.cv-del), die ihn ebenso oben rechts
   tragen. Der Abstand zu beiden Kanten bleibt 8 px. Die Rückseite ist um
   180 Grad gedreht und die gewendete Karte noch einmal — zusammen eine
   ganze Drehung, rechts ist also auch auf dem Schirm rechts.        */
.mat-del {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 5;
  font-size: 0;
  opacity: 0.92;
  transition: opacity 0.15s;
}
/* Derselbe Eimer wie auf dem Maskenkeil — die beiden gehören sichtbar
   zusammen. */
.mat-del svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* heller beim Überfahren — Rückmeldung, dass der Zeiger richtig sitzt */
.mat-del:hover {
  opacity: 1;
}
/* Beide Eimer — auf der Rückseite des Rechtecks und auf dem roten Keil —
   stehen WEISS auf ihrem Rot, wie die Zeichen auf den Rückseiten der
   Miniaturen und der Karten, und zwar auch unter dem Zeiger: dort geht
   nur der Deckel auf (e-auf), und der Knopf wird voll deckend.      */
.mat-del,
.mat-wedge-del {
  color: var(--white);
}

/* Ausgeblendete Zonen — bleiben im DOM, damit der übrige Code weiterläuft */
.ctx-hidden {
  display: none !important;
}
/* Waehrend eine Karte wendet, darf sie ueber ihren Platz hinausragen:
   die nahe Kante waechst durch die Perspektive, und ein Schnitt an der
   Kante liesse die Flaeche abgeschnitten kippen. Sobald sie steht, passt
   sie wieder in ihren Platz, und es wird wieder geschnitten.        */
body.mat-wendet .mat-list {
  overflow: visible;
}
body.mat-wendet aside.ctx {
  overflow: visible;
}
/* Und sie liegt ueber ihren Nachbarn. Jeder Platz traegt `perspective`
   und ist damit ein eigener Stapelzusammenhang; gemalt wird in der
   Reihenfolge des Dokuments, der Platz darunter also zuletzt. Er deckte
   die gewachsene Unterkante der wendenden Karte ab — sie sah beschnitten
   aus. Beim untersten Platz fiel es nie auf: unter ihm liegt nichts. */
.mat-slot.wendet {
  z-index: 30;
}
/* Drei Plätze teilen sich die Panelhöhe zu gleichen Teilen */
.mat-list {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

aside.ctx.open {
  transform: translateX(0);
}
/* Die senkrechten Linien beider Menues bleiben ausgeblendet — so
   gewuenscht.                                                        */
#ctx-line,
#panel-line {
  display: none !important;
}
#ctx-line {
  position: fixed;
  pointer-events: none;
  right: calc(var(--sw) + 22px);
  top: calc(var(--bild-achse) - var(--menue-h) / 2);
  height: var(--menue-h);
  width: 1px;
  background: var(--border);
  z-index: 199;
  transform: translateX(calc(var(--sw) + 26px));
  transition: transform 0.3s ease;
}
#ctx-line.open {
  transform: translateX(0);
}
body.menu-open #ctx-line {
  transform: translateX(calc(var(--sw) + 26px)) !important;
}
/* Vertikale Linie linkes Panel — Spiegel von #ctx-line */
#panel-line {
  position: fixed;
  pointer-events: none;
  left: calc(var(--sw) - 4px);
  top: calc(var(--bild-achse) - var(--menue-h) / 2);
  height: var(--menue-h);
  width: 1px;
  background: var(--border);
  z-index: 201;
  transform: translateX(calc(-1 * (var(--sw) + 26px)));
  transition: transform 0.3s ease;
}
#panel-line.open {
  transform: translateX(0);
}

#map {
  min-height: 0;
  background: var(--xlight);
  position: relative;
  overflow: hidden;
}