/* Baukasten-Editor der Stage-Vorlagen (anzeige-editor.js): Vollfläche im Reiter Anzeige der Koordination.
   Werkzeug-Optik hell, Farben nur über Rollen-Token; die Vorschau selbst zeichnet anzeige.css im Shadow Root und
   trägt das Branding des Events. Knöpfe 42 px (app.css), Timing 0,16 s. */

.ae { display: flex; flex-direction: column; gap: 16px; }

/* Kopf: zurück, Name, Stand, Rückgängig, Verwerfen, Veröffentlichen */
.ae-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.ae-name { flex: 1 1 220px; max-width: 360px; }
.ae-status { display: inline-flex; align-items: center; min-height: 42px; font-size: 13px; color: var(--fg-2); }
.ae-status.ok { color: var(--fg-1); }
.ae-status.fehler { color: var(--fg-danger); }
.ae-veroeff { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ae-grund { font-size: 12.5px; color: var(--fg-2); text-align: right; max-width: 320px; }
.ae-grund:empty { display: none; }

/* Stellen, die nicht passen */
.ae-treffer {
  margin: 0; padding: 12px 16px 12px 32px; display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--border-danger); border-radius: var(--radius-2); background: var(--bg-1);
  font-size: 13px; color: var(--fg-1);
}
.ae-treffer[hidden] { display: none; }

/* Drei Spalten: Palette, Vorschau, Optionen */
.ae-haupt { display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.ae-palette, .ae-optionen {
  display: flex; flex-direction: column; gap: 10px; padding: 16px;
  border: 1px solid var(--border-2); border-radius: var(--radius-2); background: var(--bg-1);
}
.ae-palette h2, .ae-optionen h2 { margin: 0; }
.ae-klein { margin: 0; font-size: 12.5px; color: var(--fg-2); }
.ae-fehler { color: var(--fg-danger); }
.ae-lage { white-space: nowrap; }
.ae-h { margin: 6px 0 0; font-size: 13px; font-weight: 600; }
.ae-bausteine { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ae-baustein { width: 100%; justify-content: flex-start; text-align: left; touch-action: none; cursor: grab; }
.ae-baustein:disabled { cursor: default; }
.ae-baustein.zieht { cursor: grabbing; box-shadow: var(--shadow-2); }
.ae-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.ae-hoehe { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 8px; }
.ae-hoehe .feldfehler { grid-column: 1 / -1; }

.ae-mitte { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.ae-wahl { align-self: stretch; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.ae-wahl label.feld { flex: 1 1 140px; }
.ae-uhrfeld { flex: 2 1 220px; }
.ae-uhrkopf { display: flex; gap: 6px; }
.ae-uhrfeld input[type=range] { height: 42px; margin: 0; accent-color: var(--bg-accent); }
.ae-hilfe { align-self: stretch; }

/* Bühne: die Vorschau (1080 x 1920 logische Pixel) per scale() auf die Breite der Spalte, darüber die Ebene */
.ae-buehne {
  position: relative; width: min(100%, 440px); overflow: hidden;
  border: 1px solid var(--border-1); border-radius: var(--radius-1); background: var(--bg-3);
}
.ae-host { position: absolute; left: 0; top: 0; display: block; width: 1080px; height: 1920px; transform-origin: 0 0; pointer-events: none; }
.ae-pruefhost { position: fixed; left: -20000px; top: 0; visibility: hidden; }
.ae-ueber { position: absolute; inset: 0; }

/* Module auf der Ebene: Rahmen, Name, Zustand als Text (nie nur Farbe) */
.ae-modul {
  position: absolute; box-sizing: border-box; cursor: grab; touch-action: none; outline: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-1) 35%, transparent);
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}
.ae-modul:hover { box-shadow: inset 0 0 0 1px var(--bg-1), inset 0 0 0 2px var(--border-strong); }
.ae-modul:focus-visible { box-shadow: inset 0 0 0 2px var(--bg-1), inset 0 0 0 4px var(--border-strong), var(--shadow-focus); }
.ae-modul.gewaehlt { box-shadow: inset 0 0 0 2px var(--bg-1), inset 0 0 0 4px var(--border-strong); }
.ae-modul.aufgenommen { box-shadow: inset 0 0 0 2px var(--bg-1), inset 0 0 0 4px var(--border-accent); cursor: grabbing; }
.ae-modul.passt-nicht { box-shadow: inset 0 0 0 2px var(--bg-1), inset 0 0 0 4px var(--border-danger); }
.ae-modul.zieht { opacity: .6; }
.ae-chips { position: absolute; left: 4px; top: 4px; right: 4px; display: flex; flex-wrap: wrap; gap: 3px; pointer-events: none; }
.ae-chip {
  padding: 1px 5px; border-radius: var(--radius-1); font-size: 11px; font-weight: 600; line-height: 1.35;
  background: var(--bg-strong); color: var(--fg-on-strong); white-space: nowrap;
}
.ae-gew, .ae-auf { display: none; }
.ae-modul.gewaehlt:not(.aufgenommen) .ae-gew, .ae-modul.aufgenommen .ae-auf { display: inline; }
.ae-chip.ae-warn { background: var(--bg-1); color: var(--fg-danger); box-shadow: inset 0 0 0 1px var(--border-danger); }
.ae-chip.ae-leise { background: var(--bg-1); color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--border-1); }
.ae-meldung {
  position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 3px 6px; pointer-events: none;
  border-radius: var(--radius-1); background: var(--bg-1); color: var(--fg-danger);
  box-shadow: inset 0 0 0 1px var(--border-danger); font-size: 11.5px; font-weight: 600; line-height: 1.3;
}

/* Griffe: Trennlinie zwischen Spalten (Breite), unterer Rand einer Zeile (Höhe) */
.ae-trenner, .ae-zeilenrand { position: absolute; z-index: 2; touch-action: none; }
.ae-trenner { cursor: col-resize; }
.ae-zeilenrand { cursor: row-resize; }
.ae-trenner::after, .ae-zeilenrand::after {
  content: ""; position: absolute; background: var(--border-strong); opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.ae-trenner::after { left: 6px; width: 4px; top: 0; bottom: 0; }
.ae-zeilenrand::after { top: 4px; height: 4px; left: 0; right: 0; }
.ae-trenner:hover::after, .ae-zeilenrand:hover::after { opacity: 1; }

/* Ablageziel beim Ziehen: Linie im Akzent */
.ae-ziel { position: absolute; z-index: 3; border-radius: var(--radius-1); background: var(--bg-accent); pointer-events: none; }
.ae-ziel[hidden] { display: none; }

@media (max-width: 1000px) {
  .ae-haupt { grid-template-columns: minmax(0, 1fr); }
  .ae-buehne { width: min(100%, 400px); }
}
@media (prefers-reduced-motion: reduce) {
  .ae-modul, .ae-trenner::after, .ae-zeilenrand::after { transition: none; }
}