/* ══════════════════════════════════════════════════════════════════
   ED — FOTO-EDITOR: GESTALT
   Aus dem Prototyp V3 übernommen (Zeilen 2212–2221 und 4981–5537; das
   Einstellrad steht in components/dial.css).
   ──────────────────────────────────────────────────────────────────
   Die Oberfläche liegt als #ed über der ganzen App (fixed, z 40),
   weißer Grund. Oben drei schwebende Felder im Idiom von
   #annot-toolbar, in der Mitte die Bühne mit dem Bild, unten die
   Werkzeugreihe, das Einstellrad und die Beschriftung. Alle Farben
   kommen aus den Variablen der App.
   Die Regeln für Film, Effekte, Papier, Zuschnitt und Bereinigen stehen
   schon hier, wie in V3 in einem Block; ihre Teile kommen mit 15.2–15.4.
   ══════════════════════════════════════════════════════════════════ */

/* ── Der Knopf in der unteren Leiste ──────────────────────────────
   Dasselbe Maß und dieselbe Sprache wie die Nachbarn: 48 px Fläche,
   44er Zeichen, grau in Ruhe, schwarz unter der Hand. Gesperrt und
   glühend: canvas.css, gemeinsam mit dem Anzeichnen. */
#ed-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--leiste-grau);
  transition: color 0.15s;
}
#ed-btn:hover {
  color: var(--black);
}
#ed-btn.an {
  color: var(--black);
}
/* Ohne Editor im Plan (V3-Tafel: ab Pro) stehen weder der Knopf noch das
   Zeichen an den Karten da (editor/binding.js). */
body.feature-off-editor #ed-btn,
body.feature-off-editor .cv-edit {
  display: none !important;
}

#ed {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--white, #fff);
  color: var(--black, #000);
  font-family: var(--sans, 'Urbanist', 'Century Gothic', Futura, sans-serif);
  font-size: 12px;
  font-weight: 300;
  display: none;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
}
#ed.on {
  display: flex;
}
#ed * {
  box-sizing: border-box;
}
#ed button {
  font-family: inherit;
}

/* ── SCHWEBENDE FELDER ──
   Dasselbe Feld wie die Anmerkungsleiste der App: 22 px Rundung. Kein
   Grund, kein Rahmen, kein Schatten: das Feld steht im weißen Streifen
   über dem Bild und braucht nichts, was es absetzt. */
.ed-feld {
  position: absolute;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  z-index: 3;
  border-radius: 22px;
  padding: 7px 14px;
}
#ed-oben {
  position: relative;
  height: 64px;
  flex: 0 0 64px;
  z-index: 3;
}
/* Das Feld steht mittig im weißen Streifen über dem Bild — gleich viel
   Luft darüber wie darunter. Den genauen Wert setzt der Aufbau (layout.js),
   weil der Streifen mit dem Format des Bildes wächst; die 13 hier sind nur
   der Stand vor dem ersten Durchgang. */
#ed-modi {
  left: 50%;
  top: 13px;
  transform: translateX(-50%);
  gap: 4px;
}
/* Das Verlassen-Zeichen links oben, auf der Höhe des Modi-Felds; grau in
   Ruhe, schwarz unter der Hand wie die übrigen Zeichen (.ed-zeichen), das
   rote Glühen bleibt ihm. */
#ed-esc {
  left: 14px;
  top: 13px;
  padding: 7px 8px;
}
/* Wie im Kontaktbogen: der Weg hinaus steht hellgrau da und wird unter
   der Hand schwarz — anders als die Werkzeuge daneben. */
#ed-esc-knopf {
  color: var(--zeichen-hinaus);
}
#ed-esc-knopf:hover {
  color: var(--black, #000);
}
/* Der feine Strich trennt die Arbeitsweisen von den zwei Zeichen. */
.ed-feld-trenner {
  width: 1px;
  height: 24px;
  margin: 0 8px;
  flex-shrink: 0;
  background: var(--border, #e6e6e6);
}

/* 48er Knöpfe ohne Rahmen und Grund, Ruhe grau, Hover schwarz */
.ed-zeichen {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mid, #686868);
  transition:
    color 0.12s,
    opacity 0.12s;
}
.ed-zeichen:hover {
  color: var(--black, #000);
}
.ed-zeichen:disabled {
  color: var(--zeichen-gesperrt);
  cursor: default;
}
.ed-zeichen:disabled:hover {
  color: var(--zeichen-gesperrt);
}
/* Der Haken, wenn das Ausgeben nicht durchkommt: er bleibt stehen und
   glüht zweimal rot auf — dieselbe Antwort wie bei den Knöpfen der App.
   Den Grund sagt die Zeile unter dem Rad, und sie bleibt dort stehen. */
@keyframes ed-zeichen-gluehen {
  0%,
  100% {
    filter: none;
  }
  35% {
    filter: var(--glut-rot);
  }
}
.ed-zeichen.gluehen,
.ed-zeichen.gluehen:hover {
  color: var(--red, #e8391c);
  animation: ed-zeichen-gluehen 0.85s ease-in-out 2;
}

/* == DIE BEARBEITUNG ZURÜCKNEHMEN ================================
   Rechts neben dem Haken, und es benimmt sich wie „Alles zurücksetzen“
   unten in der Leiste: ein Doppelklick wendet den Knopf — die Scheibe
   fährt rot zu —, und erst der nächste Klick führt aus. Escape oder ein
   Klick daneben nimmt die Wendung zurück. Zu sehen ist es nur, wenn es
   etwas zurückzunehmen GIBT: an einem Bild, das schon einmal durch den
   Editor ging. (@property --lw-fuell steht in canvas.css.) */
#ed-zurueck {
  position: relative;
  display: none;
}
#ed.kannzurueck #ed-zurueck {
  display: flex;
}
#ed-zurueck svg {
  position: relative;
  z-index: 1;
}
#ed-zurueck::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  --lw-fuell: 0deg;
  background: conic-gradient(from 45deg, var(--red, #e8391c) var(--lw-fuell), transparent 0);
  transition: --lw-fuell 0.44s cubic-bezier(0.4, 0, 0.3, 1);
}
#ed.fragt-zurueck #ed-zurueck::before {
  --lw-fuell: 360deg;
}
/* geladen schwarz auf Rot wie alle Scheibenknöpfe */
#ed.fragt-zurueck #ed-zurueck,
#ed.fragt-zurueck #ed-zurueck:hover {
  color: var(--black, #000);
}

/* Modus-Knöpfe: Text, gewählt invertiert */
.ed-modus {
  height: 28px;
  padding: 0 14px 0 calc(14px + var(--t-reiter-sperrung));
  border: none;
  border-radius: 14px;
  background: none;
  cursor: pointer;
  font-size: var(--t-reiter-groesse);
  letter-spacing: var(--t-reiter-sperrung);
  text-transform: uppercase;
  font-weight: var(--t-reiter-gewicht);
  color: var(--mid, #686868);
  transition:
    color 0.12s,
    background 0.12s;
  white-space: nowrap;
}
.ed-modus:hover {
  color: var(--black, #000);
}
.ed-modus.on {
  background: var(--black, #000);
  color: var(--white);
}

/* ── DER PAPIERABZUG (Teil 15.2) ──────────────────────────────────
   Kein zweiter Editor, sondern eine ANSICHT: das Bild, wie es gerade
   steht, auf einem Blatt — Format, Ränder, Papier. Das Blatt wird
   GESETZT, nicht zentriert: seine Ober- und Unterkante liegen genau
   dort, wo unter „Anpassen“ die Kanten des Bildes liegen. Die Kante ist
   ein Schatten statt eines Rahmens — ein Rahmen legte zwei Punkte dazu. */
#ed-papier {
  position: absolute;
  inset: 0;
  display: none;
  background: #fff;
}
#ed.papier #ed-papier {
  display: block;
}
#ed.papier #ed-huelle,
#ed.papier #ed-steg,
#ed.papier #ed-pinsel {
  visibility: hidden;
}
#ed-blatt {
  position: absolute;
  background: #fff;
  box-shadow: var(--schatten-blatt);
  overflow: hidden;
  box-sizing: border-box;
  touch-action: none;
}
/* Ein Hauch Licht auf der Kante, wo es herkommt, ein Hauch Schatten
   gegenüber — als letztes Kind ÜBER Bild und Relief. Nimmt keine Zeiger. */
#ed-blatt::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0.5px 0.5px 0 rgba(255, 255, 255, 0.3),
    inset -0.5px -0.5px 0 rgba(0, 0, 0, 0.035);
}
/* Transparentpapier wirft weniger. */
#ed-blatt.durchsichtig {
  box-shadow:
    0 0 0.5px rgba(0, 0, 0, 0.1),
    0.5px 1px 1.5px rgba(0, 0, 0, 0.05),
    1px 7px 14px -3px rgba(0, 0, 0, 0.03);
}
/* Das Relief des Bogens liegt ÜBER allem — über dem freien Rand und über
   dem Abzug darauf. Genau so ist es auf Papier. */
#ed-blatt-bild {
  position: absolute;
  display: block;
  transform-origin: 50% 50%;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
#ed-blatt.zieht #ed-blatt-bild {
  cursor: grabbing;
}
#ed-blatt-textur,
#ed-blatt-glanz {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 256px 256px;
}
#ed-blatt-textur {
  mix-blend-mode: soft-light;
}
#ed-blatt-glanz {
  mix-blend-mode: screen;
  background-size: auto;
  opacity: 0;
  background-image: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0) 6%,
    rgba(255, 255, 255, 0.5) 24%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.26) 64%,
    rgba(255, 255, 255, 0) 82%
  );
}
#ed-blatt.durchsichtig #ed-blatt-bild {
  opacity: 0.92;
}

/* ── BÜHNE ── */
#ed-buehne {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
}
#ed-huelle {
  position: absolute;
  transform-origin: 0 0;
  background: var(--xlight, #f5f5f5);
}
/* Liegt ein Filmsteg auf, ist der Grund der Hülle SCHWARZ: seine Kante
   fällt in den dunklen Rand des Stegs und nicht als weißer Riss ins Bild. */
#ed.mit-steg #ed-huelle {
  background: var(--black);
}
#ed-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#ed-maske {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0.55;
  pointer-events: none;
}
/* Den Zeiger legt die App: derselbe Stift wie beim Anzeichnen. */
#ed.malt #ed-huelle {
  cursor: crosshair;
}
#ed.vergleicht #ed-huelle {
  cursor: grabbing;
}

/* Während ein frischer Strich repariert wird (Zehntelsekunden), pulst er —
   danach ist er fort, und man sieht nur noch das Ergebnis. */
#ed.schimmert #ed-maske {
  animation: ed-puls 1.2s ease-in-out infinite;
}
/* Rechnet die KI, pulst ihr Knopf — und nichts auf dem Bild. Eigene
   Klasse `ki-rechnet` statt `beschaeftigt`: gesperrt ist der Editor auch
   beim Verlassen und Sichern, und dort pulste der KI-Knopf sonst mit. */
#ed.ki-rechnet .ed-knopf[data-k='ki'] {
  animation: ed-puls 1.2s ease-in-out infinite;
}
@keyframes ed-puls {
  0%,
  100% {
    opacity: 0.28;
  }
  50% {
    opacity: 1;
  }
}
/* Der Dauerpuls: feine, GESCHLOSSENE Ringe laufen ständig nach außen und
   lösen sich auf — aber nur an dem Knopf, der IN DER MITTE steht und
   geklickt wird, während die Nachbarn nur einen Wert halten. Drei
   Wellen, gegeneinander verstimmt (2,70 / 2,98 / 3,04 s), darum treffen
   sie sich nie wieder. Fein wird die Linie über die Deckkraft (0,23),
   nicht über die Stärke (1,2 px). */
.ed-knopf .ed-puls {
  display: none;
}
.ed-knopf.ed-tat.karu-mitte .ed-puls {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  /* GESCHLOSSENER Ring — alle vier Seiten tragen Farbe. */
  border: 1.2px solid var(--black);
  animation: ed-atem 2700ms ease-in infinite;
}
.ed-knopf.ed-tat.karu-mitte .ed-puls.w2 {
  animation-duration: 2975ms;
  animation-delay: -1129ms;
}
.ed-knopf.ed-tat.karu-mitte .ed-puls.w3 {
  animation-duration: 3040ms;
  animation-delay: -2301ms;
}
@keyframes ed-atem {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  14% {
    opacity: 0.23;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
.ed-knopf.ed-tat .ed-ikone {
  transition: stroke-width 0.12s ease;
}
/* Beim Überfahren wird die Linie nur einen Hauch kräftiger. */
.ed-knopf.ed-tat:hover .ed-ikone {
  stroke-width: 1.9;
}
.ed-knopf.glueht {
  animation: ed-glut 0.42s ease-out;
}
@keyframes ed-glut {
  0% {
    background: var(--white);
    color: var(--black, #000);
  }
  100% {
    background: var(--black, #000);
    color: var(--white);
  }
}
.ed-knopf.glueht::before,
.ed-knopf.glueht::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid var(--black, #000);
}
.ed-knopf.glueht::before {
  animation: ed-welle 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.ed-knopf.glueht::after {
  animation: ed-welle 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.13s forwards;
}
@keyframes ed-welle {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* == DER ZUSCHNEIDERAHMEN — NUR IN DER FREIFORM (Teil 15.3) =========
   Er lag früher über JEDEM Zuschnitt und verdeckte beim Begradigen gerade
   das, worauf man schaut. Nur die FREIFORM hat keine Chips — da braucht
   es den Rahmen. 1 px weiß, 1 px dunkel außen, Aufhellung ringsum über
   einen riesigen Schatten. */
#ed-rahmen {
  position: absolute;
  display: none;
  outline: 1px solid var(--white);
  outline-offset: 0;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.35),
    0 0 0 9999px rgba(255, 255, 255, 0.55);
  cursor: move;
}
#ed.zuschneidet.frei #ed-rahmen {
  display: block;
}
.ed-gitter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.7) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 1px, transparent 1px);
  background-size:
    33.3333% 100%,
    100% 33.3333%;
  background-position:
    -1px 0,
    0 -1px;
}
#ed-rahmen.geste .ed-gitter {
  opacity: 1;
}
/* Die Griffe des Zuschneiderahmens: 26 px, damit man sie trifft. Der
   Zeiger wird zum Doppelpfeil in der Richtung, in die der Griff zieht —
   gezeichnet, schwarz mit weißem Saum, viermal gedreht; die Systemzeiger
   bleiben als Rückfall dahinter stehen. */
#ed {
  --gz-waag:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g transform='rotate(0 16 16)'><path d='M5 16 L11 10 L11 14 L21 14 L21 10 L27 16 L21 22 L21 18 L11 18 L11 22 Z' fill='black' stroke='white' stroke-width='2' stroke-linejoin='miter' paint-order='stroke'/></g></svg>")
      16 16,
    ew-resize;
  --gz-senk:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g transform='rotate(90 16 16)'><path d='M5 16 L11 10 L11 14 L21 14 L21 10 L27 16 L21 22 L21 18 L11 18 L11 22 Z' fill='black' stroke='white' stroke-width='2' stroke-linejoin='miter' paint-order='stroke'/></g></svg>")
      16 16,
    ns-resize;
  --gz-nwse:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g transform='rotate(45 16 16)'><path d='M5 16 L11 10 L11 14 L21 14 L21 10 L27 16 L21 22 L21 18 L11 18 L11 22 Z' fill='black' stroke='white' stroke-width='2' stroke-linejoin='miter' paint-order='stroke'/></g></svg>")
      16 16,
    nwse-resize;
  --gz-nesw:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g transform='rotate(-45 16 16)'><path d='M5 16 L11 10 L11 14 L21 14 L21 10 L27 16 L21 22 L21 18 L11 18 L11 22 Z' fill='black' stroke='white' stroke-width='2' stroke-linejoin='miter' paint-order='stroke'/></g></svg>")
      16 16,
    nesw-resize;
}
.ed-griff {
  position: absolute;
  width: 26px;
  height: 26px;
  --gs: 3px; /* Stärke des weißen Winkels */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
}
.ed-griff::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 0 solid var(--white);
  transition: border-width 0.1s ease;
}
/* Der Zeiger steht darauf, oder es wird gerade daran gezogen. */
.ed-griff:hover,
.ed-griff.zieht {
  --gs: 5px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
}
.ed-griff.nw {
  left: -4px;
  top: -4px;
  cursor: var(--gz-nwse) !important;
}
.ed-griff.nw::before {
  border-left-width: var(--gs);
  border-top-width: var(--gs);
}
.ed-griff.ne {
  right: -4px;
  top: -4px;
  cursor: var(--gz-nesw) !important;
}
.ed-griff.ne::before {
  border-right-width: var(--gs);
  border-top-width: var(--gs);
}
.ed-griff.sw {
  left: -4px;
  bottom: -4px;
  cursor: var(--gz-nesw) !important;
}
.ed-griff.sw::before {
  border-left-width: var(--gs);
  border-bottom-width: var(--gs);
}
.ed-griff.se {
  right: -4px;
  bottom: -4px;
  cursor: var(--gz-nwse) !important;
}
.ed-griff.se::before {
  border-right-width: var(--gs);
  border-bottom-width: var(--gs);
}
.ed-griff.n {
  left: 50%;
  top: -4px;
  margin-left: -13px;
  cursor: var(--gz-senk) !important;
}
.ed-griff.n::before {
  border-top-width: var(--gs);
  left: 0;
  right: 0;
}
.ed-griff.s {
  left: 50%;
  bottom: -4px;
  margin-left: -13px;
  cursor: var(--gz-senk) !important;
}
.ed-griff.s::before {
  border-bottom-width: var(--gs);
}
.ed-griff.w {
  left: -4px;
  top: 50%;
  margin-top: -13px;
  cursor: var(--gz-waag) !important;
}
.ed-griff.w::before {
  border-left-width: var(--gs);
}
.ed-griff.e {
  right: -4px;
  top: 50%;
  margin-top: -13px;
  cursor: var(--gz-waag) !important;
}
.ed-griff.e::before {
  border-right-width: var(--gs);
}
/* Das Gummiband der Eckpunkte im Bereinigen (Teil 15.4): von der letzten
   Ecke zum Zeiger, gestrichelt im Stiftrot. */
#ed-gummi {
  position: absolute;
  left: 0;
  top: 0;
  height: 0;
  border-top: 2px dashed rgba(216, 30, 22, 0.85);
  transform-origin: 0 0;
  pointer-events: none;
  display: none;
  z-index: 2;
}
/* Der Seed zeigt seine Nummer unten in der Beschriftung, nicht fett über
   der Marke. */
#ed-rad.seed .ed-rad-wert {
  display: none;
}
/* Während des Ziehens hält die Bühne den Zeiger fest — sonst spränge er
   zurück, sobald der Zeiger den Griff verlässt. */
#ed-buehne[data-griff='nw'],
#ed-buehne[data-griff='se'] {
  cursor: var(--gz-nwse) !important;
}
#ed-buehne[data-griff='ne'],
#ed-buehne[data-griff='sw'] {
  cursor: var(--gz-nesw) !important;
}
#ed-buehne[data-griff='n'],
#ed-buehne[data-griff='s'] {
  cursor: var(--gz-senk) !important;
}
#ed-buehne[data-griff='w'],
#ed-buehne[data-griff='e'] {
  cursor: var(--gz-waag) !important;
}

/* Fokusring des Porträts (die Tiefe): wo scharf ist. */
#ed-fokus {
  position: absolute;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1.5px solid var(--white);
  border-radius: 50%;
  display: none;
  cursor: grab;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
#ed-fokus::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--ring);
}
#ed.fokussiert #ed-fokus {
  display: block;
}
#ed-fokus:active {
  cursor: grabbing;
}

/* Zeigerkreis des Pinsels — dieselbe Zeichnung wie der Ring beim
   Anzeichnen: gepunktet und schwarz, unter Umschalt rot wie der
   Radierstift. */
#ed-pinsel {
  position: absolute;
  display: none;
  pointer-events: none;
  border-radius: 50%;
  border: 3px dotted var(--black);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  z-index: 2;
}
#ed-pinsel.radiert {
  border-color: var(--red, #e8391c);
}
#ed.malt #ed-pinsel {
  display: block;
}

/* ── UNTERES FELD ──
   Das Polster oben setzt der Aufbau (layout.js): der Block steht mittig im
   weißen Streifen unter dem Bild, und wie hoch der ist, hängt am Format.
   Die 4 hier sind nur der Stand vor dem ersten Durchgang. */
#ed-unten {
  position: relative;
  height: 168px;
  flex: 0 0 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0 0;
  gap: 2px;
  z-index: 3;
}
#ed.beschaeftigt #ed-unten,
#ed.beschaeftigt #ed-oben,
#ed.beschaeftigt #ed-buehne {
  pointer-events: none;
}
#ed.beschaeftigt .ed-knopf,
#ed.beschaeftigt .ed-modus,
#ed.beschaeftigt .ed-zeichen {
  opacity: 0.5;
}

/* Die Werkzeugreihe: waagerecht scrollbar, ohne sichtbare Leiste */
#ed-reihe {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
  padding: 2px 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex: 0 0 auto;
}
#ed-reihe::-webkit-scrollbar {
  display: none;
}

/* ── DAS KARUSSELL ───────────────────────────────────────────────
   Drei nebeneinander, der mittlere gewählt, im Kreis. Die Stücke liegen
   übereinander an derselben Stelle und werden von der Bahn
   auseinandergeschoben (transform) — wie die Kreise der Tarifwahl. */
#ed-reihe.karussell {
  display: block;
  position: relative;
  overflow: visible;
  width: 100%;
  padding: 2px 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}
#ed-reihe.karussell:active {
  cursor: grabbing;
}
#ed-reihe.karussell .karu-stueck {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  transform-origin: 50% 50%;
  transition: none;
  will-change: transform, opacity;
}
/* Der Wisch gehört der Bahn; der Klick kommt trotzdem an. Die Nachbarn
   werden nur kleiner — nicht blasser, nicht ausgegraut. */
#ed-reihe.karussell .karu-stueck .ed-punkt {
  display: none;
}

/* Runder 44er-Knopf: eine schwarze Scheibe mit weißem Zeichen, im Idiom
   der Abonnementkreise. Was gewählt ist, sagt die Größe in der Bahn. */
.ed-knopf {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black, #000);
  color: var(--white);
}
/* Abgeschaltet oder gesperrt: die ganze Scheibe tritt zurück. */
.ed-knopf.aus {
  opacity: 0.55;
}
.ed-knopf:disabled {
  opacity: 0.32;
  cursor: default;
}
/* Umgekehrt hervorgehoben: weiße Scheibe, schwarzes Zeichen. */
.ed-knopf.hebt {
  background: var(--white);
  color: var(--black, #000);
  box-shadow: inset 0 0 0 1.5px var(--black, #000);
}
.ed-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.ed-ring.neg {
  transform: scaleX(-1) rotate(-90deg);
}
.ed-ring circle {
  fill: none;
  stroke-width: 1.5;
}
.ed-ring-spur {
  stroke: rgba(255, 255, 255, 0.22);
}
.ed-knopf.hebt .ed-ring-spur {
  stroke: rgba(0, 0, 0, 0.18);
}
/* Der Wertbogen hat KEINE runde Kappe: bei Wert null zeichnete sie einen
   dunklen Punkt oben auf jeden Kreis. Stumpf beginnt der Bogen dort, wo
   etwas anliegt, und sonst gar nicht. */
.ed-ring-wert {
  stroke: currentColor;
  stroke-linecap: butt;
  stroke-dasharray: 0 125.664;
  transition: stroke-dasharray 0.08s linear;
}
.ed-ring-wert[data-null='1'] {
  visibility: hidden;
}
/* Kreuz und Haken im Bereinigen tragen keinen Wert — also auch keinen
   Ring: eine schlichte schwarze Scheibe mit ihrem Zeichen. */
.ed-knopf.ed-schlicht .ed-ring {
  display: none;
}
.ed-knopf .ed-ikone {
  position: relative;
}
.ed-knopf .ed-punkt {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.12s;
}
.ed-knopf.an .ed-punkt {
  opacity: 1;
}

/* Trenner in der Reihe */
.ed-trenner {
  width: 1px;
  height: 28px;
  margin: 8px 4px 0;
  background: var(--border, #e6e6e6);
  flex-shrink: 0;
}

/* Stil-Chips (Teil 15.2): Filmikone 56 px */
.ed-gruppe {
  align-self: center;
  font-size: var(--t-status-groesse);
  font-weight: var(--t-status-gewicht);
  letter-spacing: var(--t-status-sperrung);
  text-transform: uppercase;
  color: var(--light, #b0b0b0);
  margin: 0 6px 0 4px;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 56px;
  text-align: center;
  flex-shrink: 0;
}
.ed-stil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  width: 60px;
}
/* Die Ikone ist rund wie ein Filmdeckel. Gewählt ist, was in der Mitte des
   Karussells steht; wie der Film heißt, sagt die Beschriftung. */
.ed-stil-ikone {
  width: 56px;
  height: 56px;
  display: block;
  border-radius: 50%;
  background: var(--black, #000);
}
/* 'Ohne Film' trägt keine Scheibe — es ist die Abwesenheit einer Wahl. */
.ed-stil-ikone.ohne {
  background: none;
  opacity: 0.42;
}
/* Die Kachel eines Filmstegs zeigt ihn selbst, ganz im Kreis. */
.ed-steg-kachel {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Die Auflage liegt in der Hülle, also genau auf dem Bild, und mischt sich
   mit ihm. KEIN z-index: eine Hülle mit z-index wäre ein eigener
   Stapelraum, und die Lagen darin mischten sich nur untereinander. */
#ed-auflagen {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#ed-auflagen img {
  position: absolute;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transform-origin: 50% 50%;
}

/* Der Filmsteg über der Bühne: sein Fenster liegt genau auf dem Bild, er
   selbst nimmt keine Zeigereingaben an. */
#ed-steg {
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 2;
  transform-origin: 50% 50%;
  image-rendering: auto;
}

/* Das Rad trägt im Editor keine eigene Beschriftung: was es bewegt, steht
   schon in der Zeile darunter. */
#ed .ed-rad-name {
  display: none;
}

/* Mitte: Rad, Chips oder Pad */
#ed-mitte {
  position: relative;
  width: 100%;
  height: 60px;
  flex: 0 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
#ed-rad,
#ed-rad2,
#ed-rad3 {
  width: min(560px, 80vw);
  height: 56px;
  flex: 0 0 56px;
}
/* Räder untereinander: oben WAS, darunter WIE STARK, darunter der
   Kontrast. Das untere Feld wächst je Zeile mit; die Bühne rechnet sich
   danach neu. */
#ed.zweiraeder #ed-mitte {
  height: 118px;
  flex: 0 0 118px;
}
#ed.zweiraeder #ed-unten {
  height: 226px;
  flex: 0 0 226px;
}
#ed.dreiraeder #ed-mitte {
  height: 176px;
  flex: 0 0 176px;
}
#ed.dreiraeder #ed-unten {
  height: 284px;
  flex: 0 0 284px;
}
#ed-chips {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 90vw;
}
#ed-chips.on {
  display: flex;
}
.ed-chip {
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--border, #e6e6e6);
  border-radius: 13px;
  background: none;
  cursor: pointer;
  font-size: var(--t-versal-groesse);
  font-weight: var(--t-versal-gewicht);
  letter-spacing: var(--t-versal-sperrung);
  text-transform: uppercase;
  color: var(--mid, #686868);
  transition:
    color 0.12s,
    border-color 0.12s;
  white-space: nowrap;
}
.ed-chip:hover {
  color: var(--black, #000);
}
.ed-chip.on {
  color: var(--black, #000);
  border: 1.5px solid var(--black, #000);
  padding: 0 11.5px;
}
.ed-chip.hochquer {
  width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}
.ed-chip.hochquer:disabled {
  color: var(--zeichen-gesperrt);
  cursor: default;
}

/* Beschriftung und Status: die Kleintexte der App */
#ed-beschriftung,
#ed-status {
  font-size: var(--t-status-groesse);
  font-weight: var(--t-status-gewicht);
  letter-spacing: var(--t-status-sperrung);
  padding-left: var(--t-status-sperrung);
  text-transform: uppercase;
  line-height: 1;
  color: var(--mid, #686868);
  white-space: nowrap;
  text-align: center;
  height: 12px;
}
#ed-beschriftung {
  color: var(--black, #000);
}
#ed-status {
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  margin-top: 2px;
}
#ed-status.on {
  opacity: 1;
}
/* Ein Fehler soll gelesen werden können: nicht in Versalien und nicht
   gesperrt, dafür zwei Punkt größer — so steht auch ein ganzer Satz in
   der Zeile. */
#ed-status.fehler {
  color: var(--red, #e8391c);
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: 11px;
}