:root {
  color-scheme: dark;
  font-size: 16px;
  --bg: #0f1018;
  --surface: #1c1d2b;
  --border: rgba(255, 255, 255, 0.075);
  --text: #f3f7ff;
  --muted: rgba(243, 247, 255, 0.65);
  /* --accent: #2ec4b6; */
  --accent: #d89904;
  --danger: #ff6f59;
  --grid: rgba(255, 255, 255, 0.08);
  --scrollbar-size: clamp(16px, 1.25vw, 22px);
  --scrollbar-size-touch: clamp(22px, 3.2vw, 32px);
  --scrollbar-track: rgba(255, 255, 255, 0.14);
  --scrollbar-thumb: var(--accent);
  --scrollbar-thumb-hover: var(--accent);
}

/* Häkchen, Optionsfelder und Schieberegler in der Akzentfarbe statt im Blau
   des Browsers - wie im Admin-Bereich. :where() hält die Spezifität bei null. */
:where(input, progress) {
  accent-color: var(--accent);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  height: 100vh;
  background: radial-gradient(circle at top, rgba(50, 57, 89, 0.35), transparent 60%), var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  display: flex;
  overscroll-behavior: none;
  overflow: hidden;
}

body.dragging {
  overflow: hidden;
  touch-action: none;
}

* {
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 44px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

@media (pointer: coarse) {
  :root {
    --scrollbar-size: var(--scrollbar-size-touch);
  }
}

/* Kopfleiste ueber die ganze Breite, darunter Arbeitsflaeche und rechtes Menue.
   Die Layout-Verwaltung hatte frueher eine eigene linke Spalte; sie steht jetzt
   im Layout-Menue der Kopfleiste, die Flaeche bekommt die Breite. */
#editor-app {
  flex: 1;
  min-height: 100vh;
  height: 100vh;
  display: grid;
  --editor-right-width: 320px;
  grid-template-columns: minmax(0, 1fr) var(--editor-right-width);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1rem 1.5rem;
  padding: 1rem 1.5rem 1.5rem;
  overflow: hidden;
}

.panel {
  background: var(--surface);
  border-radius: 18px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  min-height: 0;
}

.panel h2, .panel h3 {
  margin: 0;
  font-size: 1.3rem;
}

.panel h2 { font-size: 1.5rem; }

section.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.field-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.choice-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
}

.choice-item input[type="checkbox"] {
  margin: 0;
}

label {
  font-size: 0.95rem;
  color: var(--muted);
}

input[type="text"], input[type="number"], select, textarea {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  color: var(--text);
  font-size: 1rem;
}

select {
  min-height: 46px;
  width: 100%;
  padding-right: 3rem;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgba(255, 255, 255, 0.07);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%),
    linear-gradient(to bottom, rgba(216, 153, 4, 0.26), rgba(216, 153, 4, 0.26));
  background-position:
    calc(100% - 1.45rem) 50%,
    calc(100% - 1.05rem) 50%,
    calc(100% - 2.75rem) 50%;
  background-size:
    0.45rem 0.45rem,
    0.45rem 0.45rem,
    1px 1.65rem;
  background-repeat: no-repeat;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

select:hover {
  border-color: rgba(216, 153, 4, 0.55);
  background-color: rgba(255, 255, 255, 0.1);
}

select:focus-visible {
  outline: none;
  border-color: rgba(216, 153, 4, 0.72);
  box-shadow: 0 0 0 3px rgba(216, 153, 4, 0.22);
}

select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-stepper {
  display: grid;
  grid-template-columns: minmax(46px, auto) minmax(0, 1fr) minmax(46px, auto);
  gap: 0.4rem;
  align-items: stretch;
  width: 100%;
}

.number-stepper input[type="number"] {
  min-width: 0;
  text-align: center;
}

.number-stepper-button {
  min-width: 46px;
  min-height: 46px;
  border-radius: 10px;
  padding: 0.35rem 0.7rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 700;
  touch-action: manipulation;
}

.number-stepper-button:hover,
.number-stepper-button:focus-visible {
  background: rgba(216, 153, 4, 0.18);
  border-color: rgba(216, 153, 4, 0.6);
}

.number-stepper-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

select option {
  background: var(--surface);
  color: var(--text);
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(46, 196, 182, 0.6);
  outline-offset: 2px;
}

button {
  border: none;
  border-radius: 12px;
  padding: 0.75rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button.primary {
  background: var(--accent);
  color: #082d27;
  /* box-shadow: 0 16px 30px rgba(46, 196, 182, 0.35);  */
  box-shadow: 0 16px 30px rgba(216, 153, 4, 0.35);
}

button.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}

button:active { transform: scale(0.97); }

.canvas-wrapper {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
}

/* Einfuegen-Leiste links an der Arbeitsflaeche. Sie steht neben der Flaeche,
   nicht darauf - sonst laege sie ueber dem linken Rand der Leinwand. */
.einfuege-leiste {
  align-self: stretch;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 6px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  scrollbar-width: none;
}

.einfuege-knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 64px;
  min-height: 56px;
  padding: 6px 2px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  cursor: grab;
  /* Ziehen mit dem Finger: kein Rollen der Leiste, kein Kontextmenue des Browsers. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.einfuege-knopf:hover,
.einfuege-knopf:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border);
}

.einfuege-knopf:active {
  transform: none;
}

.einfuege-knopf[hidden] {
  display: none;
}

.einfuege-knopf__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(216, 153, 4, 0.14);
  color: var(--accent);
  font-size: 1.15rem;
  line-height: 1;
}

/* Lange Namen ("Aufgabenbild", "Emplacement photo") brechen auf zwei Zeilen um. */
.einfuege-knopf__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  hyphens: auto;
  overflow-wrap: break-word;
  color: var(--muted);
}

/* Das Symbol folgt beim Ziehen dem Zeiger; ueber der Flaeche zeigt es, dass
   es dort landen kann. */
.einfuege-geist {
  position: fixed;
  z-index: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 12px;
  border: 2px dashed var(--muted);
  background: rgba(20, 22, 30, 0.85);
  color: var(--accent);
  font-size: 1.3rem;
  pointer-events: none;
}

.einfuege-geist.ist-ueber-flaeche {
  border-style: solid;
  border-color: var(--accent);
}

body.einfuegen-zieht,
body.einfuegen-zieht * {
  cursor: grabbing;
}

.canvas-area {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  background-size: 40px 40px;
  background-image: linear-gradient(0deg, var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  border-radius: 16px;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

#properties-panel {
  overflow: auto;
}

#canvas-panel {
  overflow: hidden;
}

/* Eckig wie im fertigen Bild: Eine Rundung zeigt die Arbeitsflaeche nur, wenn
   sie als Eckenradius eingestellt ist - der Editor setzt sie dann inline. */
.placeholder {
  position: absolute;
  border: 2px dashed rgba(46, 196, 182, 0.8);
  border-radius: 0;
  background: rgba(46, 196, 182, 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  cursor: move;
  user-select: none;
  touch-action: none;
  transform-origin: center;
}

.placeholder.selected {
  border-style: solid;
  box-shadow: 0 0 0 2px rgba(46, 196, 182, 0.6);
}

/* Bezug beim Ausrichten mehrerer Elemente: das zuletzt gewaehlte Element.
   Nur die Rahmenfarbe, damit der inline gesetzte box-shadow der Deko-Effekte bleibt. */
.placeholder.is-anchor {
  border-color: #ffffff;
  border-style: solid;
}

.placeholder__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 800;
  line-height: 1;
  opacity: 0.75;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.placeholder__caption {
  position: absolute;
  left: 0.4rem;
  bottom: 0.3rem;
  right: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Kein Zuschnitt: Die Griffe zum Drehen und Groessenaendern sitzen ausserhalb
   des Elements und wurden davon weggeschnitten - Texte, Sticker, Formen und
   QR-Codes liessen sich deshalb weder drehen noch an den Ecken fassen. Die
   Inhalte beschneiden sich selbst: das Bild ueber "object-fit", der Text ueber
   seine Zeichenflaeche, die Form ueber ihr SVG. */
.layout-decoration {
  border-color: rgba(216, 153, 4, 0.86);
  background: rgba(216, 153, 4, 0.12);
  color: #ffffff;
}

.layout-decoration img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Aufgabenbild: waechst wie im fertigen Foto bis an den Rahmen heran, auch
   ueber die Dateigroesse hinaus. Linien-Symbole sind eine Maske. */
.layout-decoration .layout-decoration__aufgabenbild {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.layout-decoration__aufgabenbild--linie {
  display: block;
  -webkit-mask: var(--aufgabenbild) center / contain no-repeat;
  mask: var(--aufgabenbild) center / contain no-repeat;
}

.layout-decoration__aufgabenbild-leer {
  font-size: 0.85rem;
  text-align: center;
  pointer-events: none;
}

/* Elemente, die nur auf dem Ausdruck oder nur im Foto erscheinen: abgeschwächt
   und mit Abzeichen, damit der Unterschied zwischen Papier und Datei im Layout
   sichtbar bleibt. */
.layout-decoration--print-only,
.layout-decoration--photo-only {
  opacity: 0.55;
  border-style: dashed;
}

.layout-decoration--print-only.selected,
.layout-decoration--photo-only.selected {
  opacity: 1;
}

.layout-decoration__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(15, 16, 24, 0.82);
  color: #ffffff;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
}

.decoration-qr-single-hint {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid rgba(216, 153, 4, 0.86);
  background: rgba(216, 153, 4, 0.1);
  border-radius: 0 6px 6px 0;
}

.decoration-qr-single-hint .hint {
  margin: 0 0 6px;
}

.decoration-qr-single-hint .hint:last-child {
  margin-bottom: 0;
}

/* Dynamische Felder im Text-Dialog: Kürzel werden eingesetzt statt getippt. */
.dynamic-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.dynamic-field-button {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
}

.dynamic-field-button:hover {
  border-color: var(--accent);
  background: rgba(216, 153, 4, 0.16);
}

.hint.is-warning {
  color: var(--danger);
}

.hint.is-warning[hidden] {
  display: none;
}

/* Ein dynamischer Text zeigt auf der Arbeitsfläche den Wert des aktiven
   Events - der gestrichelte Rahmen sagt, dass dort ein Kürzel steht. */
.layout-decoration--dynamic {
  outline: 1px dashed rgba(216, 153, 4, 0.7);
  outline-offset: 2px;
}

/* Formen: Die Arbeitsflaeche soll zeigen, ob eine Form gefuellt ist - der
   Tönungs-Hintergrund der Elemente wuerde eine leere Form gefuellt aussehen lassen. */
.layout-decoration--shape {
  background: transparent;
}

.layout-decoration__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.layout-decoration--image img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* Huelle eines zugeschnittenen oder gespiegelten Bildes oder Stickers: schneidet
   den vergroesserten Ausschnitt ab, Schatten und Rundung haengen an ihr. */
.layout-decoration__grafik {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.layout-decoration__grafik img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

/* Textrahmen umschließt die Buchstaben: Rahmen als outline zeichnen, damit die
   Fläche exakt der Größe im Layout entspricht und der Text nicht beschnitten wird. */
.layout-decoration--text {
  border-width: 0;
  border-radius: 0;
  outline: 2px dashed rgba(216, 153, 4, 0.86);
}

.layout-decoration--text.selected {
  outline-style: solid;
}

.layout-decoration--text.is-anchor {
  outline-color: #ffffff;
  outline-style: solid;
}

.layout-decoration__text {
  display: block;
  pointer-events: none;
}

/* Die Griffe erscheinen nur am ausgewaehlten Element. Stuenden sie ueberall,
   laege der Dreh-Punkt eines Textes ueber dem Nachbarelement und finge dessen
   Klicks ab - das saehe aus, als reagiere das Element nicht. */
.resize-handle,
.rotate-handle {
  display: none;
}

.placeholder.selected > .resize-handle,
.placeholder.selected > .rotate-handle {
  display: block;
}

/* Gesperrt: kein Griff, und Klicks fallen auf das Element darunter. */
.placeholder.is-gesperrt {
  pointer-events: none;
}

.placeholder.is-gesperrt.selected > .resize-handle,
.placeholder.is-gesperrt.selected > .rotate-handle {
  display: none;
}

.resize-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid #0f1018;
  cursor: nwse-resize;
  touch-action: none;
  user-select: none;
}

.resize-handle.br { bottom: -7px; right: -7px; }
.resize-handle.bl { bottom: -7px; left: -7px; cursor: nesw-resize; }
.resize-handle.tr { top: -7px; right: -7px; cursor: nesw-resize; }
.resize-handle.tl { top: -7px; left: -7px; }

/* Die Griffe an den Kantenmitten aendern genau eine Seite. Sie sind eckig
   abgesetzt, damit sie sich von den runden Eckgriffen unterscheiden, und der
   Mauszeiger nennt die Richtung. Der obere sitzt 25 px unter dem Punkt zum
   Drehen - nah beieinander, aber ohne sich zu ueberdecken. */
.resize-handle.t,
.resize-handle.b,
.resize-handle.l,
.resize-handle.r {
  border-radius: 3px;
}

.resize-handle.t { top: -7px; left: 50%; margin-left: -7px; cursor: ns-resize; }
.resize-handle.b { bottom: -7px; left: 50%; margin-left: -7px; cursor: ns-resize; }
.resize-handle.l { left: -7px; top: 50%; margin-top: -7px; cursor: ew-resize; }
.resize-handle.r { right: -7px; top: 50%; margin-top: -7px; cursor: ew-resize; }

.rotate-handle {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #0f1018;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

/* Kein Platz ueber dem Element: Griff unter die Unterkante oder hinein. */
.rotate-handle.rotate-handle--unten {
  top: auto;
  bottom: -32px;
}

.rotate-handle.rotate-handle--innen {
  top: 18px;
}

/* Fingerbedienung (Klasse am body, gesetzt vom ersten Tipp): Die Griffe bleiben
   so klein wie mit der Maus, ihre Trefferflaeche waechst aber auf rund 44 px.
   Sie waechst nach aussen - nach innen nur wenig, damit das Element selbst
   greifbar bleibt und ein Tipp nahe der Ecke nicht die Groesse aendert. */
body.fingerbedienung .resize-handle::before,
body.fingerbedienung .rotate-handle::before {
  content: "";
  position: absolute;
  border-radius: 14px;
}

body.fingerbedienung .resize-handle.tl::before { inset: -22px -8px -8px -22px; }
body.fingerbedienung .resize-handle.tr::before { inset: -22px -22px -8px -8px; }
body.fingerbedienung .resize-handle.bl::before { inset: -8px -8px -22px -22px; }
body.fingerbedienung .resize-handle.br::before { inset: -8px -22px -22px -8px; }
body.fingerbedienung .resize-handle.t::before { inset: -22px -15px -8px -15px; }
body.fingerbedienung .resize-handle.b::before { inset: -8px -15px -22px -15px; }
body.fingerbedienung .resize-handle.l::before { inset: -15px -8px -15px -22px; }
body.fingerbedienung .resize-handle.r::before { inset: -15px -22px -15px -8px; }
body.fingerbedienung .rotate-handle::before { inset: -15px; }

/* Schmale Elemente wie eine Textzeile (Klasse "griffe-aussen" vom Editor): Hier
   waechst die Trefferflaeche nur nach aussen. Nach innen deckten die Griffe an
   Ober- und Unterkante sonst fast das ganze Element zu, und wer es verschieben
   wollte, aenderte seine Hoehe. */
body.fingerbedienung .placeholder.griffe-aussen > .resize-handle.tl::before { inset: -30px 0px 0px -30px; }
body.fingerbedienung .placeholder.griffe-aussen > .resize-handle.tr::before { inset: -30px -30px 0px 0px; }
body.fingerbedienung .placeholder.griffe-aussen > .resize-handle.bl::before { inset: 0px 0px -30px -30px; }
body.fingerbedienung .placeholder.griffe-aussen > .resize-handle.br::before { inset: 0px -30px -30px 0px; }
body.fingerbedienung .placeholder.griffe-aussen > .resize-handle.t::before { inset: -30px -15px 0px -15px; }
body.fingerbedienung .placeholder.griffe-aussen > .resize-handle.b::before { inset: 0px -15px -30px -15px; }
body.fingerbedienung .placeholder.griffe-aussen > .resize-handle.l::before { inset: -15px 0px -15px -30px; }
body.fingerbedienung .placeholder.griffe-aussen > .resize-handle.r::before { inset: -15px -30px -15px 0px; }

/* Der Dreh-Griff rueckt weiter weg: Seine Trefferflaeche laege sonst ueber der
   des oberen Kantengriffs. Der Abstand steht auch im Editor
   (DREHGRIFF_ABSTAND_FINGER) - er entscheidet dort, ob der Griff noch in die
   Arbeitsflaeche passt. */
body.fingerbedienung .rotate-handle {
  top: -66px;
}

body.fingerbedienung .rotate-handle.rotate-handle--unten {
  top: auto;
  bottom: -66px;
}

body.fingerbedienung .rotate-handle.rotate-handle--innen {
  top: 18px;
}

/* Zwei-Finger-Geste: Fuer ihre Dauer haengen alle Knoten der Arbeitsflaeche in
   dieser Huelle; sie wird nur verschoben und skaliert. */
.zoom-geste {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.drehwinkel-anzeige {
  position: absolute;
  z-index: 50;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(15, 16, 24, 0.85);
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
}

/* Das Raster wird als Muster gezeichnet; Weite und Farbe setzt der Editor. Es
   liegt ueber allen Elementen (auch ueber einem Mischmodus oder Schatten), unter
   Druckrand (2) und Hilfslinien (3), und nimmt keinen Zeiger an - auch nicht in
   der Trefferliste. */
.raster-flaeche {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: 0;
  background-image: linear-gradient(
      to right,
      var(--rasterfarbe, rgba(255, 255, 255, 0.35)) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      var(--rasterfarbe, rgba(255, 255, 255, 0.35)) 1px,
      transparent 1px
    );
}

/* Magnetlinien erscheinen nur waehrend des Ziehens und sind bewusst duenn:
   sie zeigen die Kante, an der gerade eingerastet ist. */
.fanglinie {
  position: absolute;
  background: var(--accent);
  pointer-events: none;
  z-index: 40;
}

.fanglinie--senkrecht {
  width: 1px;
}

.fanglinie--waagerecht {
  height: 1px;
}

/* Abstand zu einem Nachbarn beim Ziehen: Strich mit Endmarken und Weite in
   Bildpunkten. Gleiche Abstaende in der Akzentfarbe, die uebrigen hell. */
.abstand-marke {
  --abstand-farbe: rgba(255, 255, 255, 0.85);
  background: var(--abstand-farbe);
  z-index: 41;
}

.abstand-marke--gleich {
  --abstand-farbe: #ff4fa3;
}

.abstand-marke--waagerecht {
  height: 1px;
}

.abstand-marke--senkrecht {
  width: 1px;
}

.abstand-marke::before,
.abstand-marke::after {
  content: "";
  position: absolute;
  background: var(--abstand-farbe);
}

.abstand-marke--waagerecht::before,
.abstand-marke--waagerecht::after {
  top: -4px;
  width: 1px;
  height: 9px;
}

.abstand-marke--waagerecht::before {
  left: 0;
}

.abstand-marke--waagerecht::after {
  right: 0;
}

.abstand-marke--senkrecht::before,
.abstand-marke--senkrecht::after {
  left: -4px;
  width: 9px;
  height: 1px;
}

.abstand-marke--senkrecht::before {
  top: 0;
}

.abstand-marke--senkrecht::after {
  bottom: 0;
}

.abstand-marke__wert {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--abstand-farbe);
  color: #111111;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Druckrand: Was im roten Band liegt, kann der randlose Druck abschneiden; die
   gestrichelte Linie ist die Grenze fuer Texte und Gesichter. Liegt ueber den
   Elementen, nimmt aber keinen Zeiger an - auch nicht in der Trefferliste. */
.druckrand {
  position: absolute;
  pointer-events: none;
  /* Ueber den Elementen, unter Zoom-Leiste (20) und Papierkorb (25). */
  z-index: 2;
  box-shadow: inset 0 0 0 var(--druckrand, 0) rgba(255, 70, 70, 0.16);
}

.druckrand__linie {
  position: absolute;
  inset: var(--druckrand, 0);
  border: 1px dashed rgba(255, 90, 90, 0.75);
}

.schnittlinie {
  position: absolute;
  border: 0 dashed rgba(255, 90, 90, 0.95);
}

.schnittlinie--senkrecht {
  top: 0;
  bottom: 0;
  left: 50%;
  border-left-width: 2px;
  transform: translateX(-1px);
}

.schnittlinie--waagerecht {
  left: 0;
  right: 0;
  top: 50%;
  border-top-width: 2px;
  transform: translateY(-1px);
}

.schnittlinie__text {
  position: absolute;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 90, 90, 0.95);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.schnittlinie--senkrecht .schnittlinie__text {
  top: 6px;
  left: 0;
  transform: translateX(-50%);
}

.schnittlinie--waagerecht .schnittlinie__text {
  left: 6px;
  top: 0;
  transform: translateY(-50%);
}

/* Bildplatz mit Beispielfoto: Die Aufnahme-Nummer steht klein in der Ecke. */
.placeholder--foto .placeholder__frame {
  top: 6px;
  left: 6px;
  transform: none;
  min-width: 1.6em;
  padding: 0.15em 0.35em;
  border-radius: 999px;
  color: #ffffff;
  text-align: center;
  opacity: 0.95;
  text-shadow: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.list-item {
  padding: 0.65rem 0.75rem;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.list-item.selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(46, 196, 182, 0.5);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.toolbar {
  display: flex;
  gap: 0.75rem;
}

.toolbar.compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.toolbar.compact button {
  width: 100%;
}

.toolbar button {
  flex: 1;
}

.kopfleiste .osk-button {
  flex: 0 0 52px;
  width: 52px;
  min-width: 52px;
  min-height: 48px;
  padding: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.osk-button__icon {
  width: 28px;
  height: 28px;
  display: block;
  background: var(--accent);
  -webkit-mask: url("/static/content/tastatur.png") center / contain no-repeat;
  mask: url("/static/content/tastatur.png") center / contain no-repeat;
}

button:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.toast.visible {
  opacity: 1;
}

/* Meldung mit Button (Rueckgaengig nach dem Papierkorb): nur dann nimmt sie
   Klicks an, eine reine Meldung bleibt durchlaessig. */
.toast.visible.mit-aktion {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  pointer-events: auto;
}

.toast__aktion {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}

.toast__aktion:hover,
.toast__aktion:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}

/* Papierkorb: erscheint nur, waehrend ein Element verschoben wird. Er nimmt
   selbst keine Zeiger an - ob er getroffen ist, entscheidet die Zeigerlage
   beim Ziehen. */
.papierkorb {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 64px;
  padding: 0 1.4rem;
  border: 2px dashed rgba(255, 255, 255, 0.35);
  border-radius: 18px;
  background: rgba(15, 16, 24, 0.9);
  color: var(--muted);
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  pointer-events: none;
}

.papierkorb.is-sichtbar {
  opacity: 1;
  transform: translate(-50%, 0);
}

.papierkorb.is-darueber {
  border-style: solid;
  border-color: var(--danger);
  background: rgba(255, 111, 89, 0.25);
  color: #ffffff;
  transform: translate(-50%, 0) scale(1.08);
}

.papierkorb__symbol {
  flex: none;
}

/* !important, weil die Deckkraft einer Deko inline am Element steht. */
.placeholder.wird-geloescht {
  opacity: 0.3 !important;
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}
body.modal-open {
  overflow: hidden;
}
/* Die Rueckfrage liegt ueber jedem anderen Fenster: Sie kommt in mehreren
   Faellen aus einem offenen Dialog heraus (Bild einfuegen, Anordnung) und war
   darunter nicht zu sehen - der Klick auf "Einfuegen" sah aus, als geschehe
   nichts. */
.confirm-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1300;
}
.confirm-modal.open {
  display: flex;
}
.confirm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
.confirm-modal__dialog {
  position: relative;
  z-index: 1;
  min-width: 280px;
  max-width: 480px;
  background: #15172a;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
  padding: 20px;
}
.confirm-modal__title {
  margin: 0 0 8px 0;
  font-size: 18px;
}
.confirm-modal__message {
  margin: 0 0 16px 0;
  line-height: 1.4;
}
.confirm-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.confirm-modal__actions button {
  min-width: 96px;
}

.preview-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

.preview-modal.open {
  display: flex;
}

.preview-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(4px);
}

.preview-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 1180px);
  height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #15172a;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
  padding: 20px;
}

.preview-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.preview-modal__title {
  margin: 0;
  font-size: 1.2rem;
}

.preview-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.preview-modal__close {
  flex: 0 0 auto;
}

.preview-modal__actions [hidden],
.preview-modal__status[hidden] {
  display: none;
}

.preview-modal__status {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
}

.preview-modal__status.is-fehler {
  color: #ff9b9b;
}

/* "Als Demo-Inhalt in Galerie speichern": Rueckfrage ueber der Vorschau
   (1100), im Aussehen der Bestaetigung (confirm-modal, 1300). Drei Buttons
   brechen bei langen Beschriftungen um, statt aus dem Fenster zu laufen. */
.demo-modal .confirm-modal__dialog {
  max-width: 520px;
}

.demo-modal__hinweis {
  margin: 0 0 12px 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
}

.demo-modal__hinweis[hidden],
.demo-modal .confirm-modal__actions [hidden] {
  display: none;
}

.demo-modal .confirm-modal__actions {
  flex-wrap: wrap;
  margin-top: 16px;
}

.preview-modal__content {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: auto;
}

.preview-modal__content img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.decoration-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

.decoration-modal.open {
  display: flex;
}

.decoration-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(4px);
}

.decoration-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 560px);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #15172a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
  padding: 20px;
  overflow: hidden;
}

.decoration-modal__title {
  margin: 0;
  font-size: 1.2rem;
}

.decoration-modal__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  overflow: auto;
  padding-right: 0.25rem;
}

/* Kinder nicht stauchen, wenn der Inhalt (z. B. aufgeklappte Effekte) höher
   wird als das Modal — stattdessen scrollt der Body. */
.decoration-modal__body > * {
  flex-shrink: 0;
}

/* Beim Bearbeiten wirkt jede Aenderung sofort: Der Dialog steht dann seitlich
   neben der Flaeche, ohne Abdunkeln - das Element bleibt zu sehen. Ein Tipp
   daneben ist "Fertig". Am Handy kommt er als Blatt von unten. */
.decoration-modal--seitlich {
  justify-content: flex-end;
  align-items: stretch;
}

.decoration-modal--seitlich .decoration-modal__backdrop {
  background: transparent;
  backdrop-filter: none;
}

.decoration-modal--seitlich .decoration-modal__dialog {
  width: min(400px, calc(100vw - 32px));
  max-height: none;
  margin: 16px;
}

.decoration-modal__sofort {
  margin: -0.5rem 0 0;
}

@media (max-width: 760px) {
  .decoration-modal--seitlich {
    justify-content: stretch;
    align-items: flex-end;
  }

  .decoration-modal--seitlich .decoration-modal__dialog {
    width: 100%;
    max-height: 62vh;
    max-height: 62dvh;
    margin: 0;
    border-radius: 16px 16px 0 0;
  }
}

/* ---------------------------------------------------------------------------
   Dialog "Neues Layout": Formatkacheln

   Jede Kachel zeigt das Seitenverhältnis als Rechteck. Die Vorschaufläche ist
   immer gleich hoch (NEW_LAYOUT_TILE_MAX in editor.js), damit Beschriftung und
   Maße aller Kacheln auf derselben Höhe stehen.
   --------------------------------------------------------------------------- */
.new-layout-modal .decoration-modal__dialog {
  width: min(94vw, 680px);
}

.new-layout-modal__legend {
  font-weight: 600;
  color: var(--text);
}

/* Name und Beschreibung stehen nebeneinander: Untereinander schoben sie die
   Grafik und die Formate so weit nach unten, dass die Grafik erst nach dem
   Scrollen zu sehen war - und damit leicht uebersehen. */
.new-layout-modal__zeile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 520px) {
  .new-layout-modal__zeile {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Grafik im Dialog "Neu": ein eigener Kasten vor den Formaten, weil ihre
   Masse das Format waehlen. Beschriftung, Dateiwahl, Masse und Erklaerung
   stehen eng beieinander - ohne eigene Abstaende lagen die Absaetze weit
   auseinander. */
.new-layout-modal__bild {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(216, 153, 4, 0.45);
  border-radius: 12px;
  background: rgba(216, 153, 4, 0.06);
}

.new-layout-modal__bild .hint,
.new-layout-modal__kopf .hint {
  margin: 0;
}

.new-layout-modal__bild .hint[hidden] {
  display: none;
}

.new-layout-modal__kopf {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.new-layout-modal__bild input[type="file"] {
  color: var(--muted);
  font-size: 0.9rem;
}

.new-layout-modal__bild input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.new-layout-modal__bild input[type="file"]::file-selector-button:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.format-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 0.6rem;
}

.format-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  text-align: center;
}

.format-tile:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.format-tile--active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.format-tile__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
}

.format-tile__shape {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}

.format-tile--custom .format-tile__shape {
  border-style: dashed;
  background: transparent;
}

.format-tile__label {
  font-size: 0.82rem;
  line-height: 1.2;
}

.format-tile__size {
  font-size: 0.74rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.new-layout-modal__custom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.new-layout-modal__custom[hidden] {
  display: none;
}

.new-layout-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.font-download-list {
  margin: 0;
  padding-left: 1.25rem;
  font-weight: 600;
}

/* Die Liste hat ihren eigenen Reiter und darf so lang sein wie die Leiste;
   gerollt wird die Seitenleiste. */
.layer-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.layer-item {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.2rem;
}

.layer-item.selected {
  border-color: var(--accent);
  background: rgba(216, 153, 4, 0.12);
}

.layer-item--hidden .layer-item__label,
.layer-item--hidden .layer-item__vorschau {
  opacity: 0.45;
}

.layer-item button {
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 0.35rem 0.45rem;
  font-size: 0.95rem;
  font-weight: 500;
  min-height: 40px;
}

.layer-item button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

.layer-item button:disabled {
  opacity: 0.3;
  cursor: default;
}

.layer-item__main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  text-align: left;
}

.layer-item__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-item__eye,
.layer-item__lock,
.layer-item__move,
.layer-item__edit {
  flex: 0 0 auto;
}

/* Offenes Schloss nur an der Zeile unter der Maus und an der ausgewaehlten:
   Es ist der Normalfall, und die Zeile ist schmal - staendig sichtbar nahm es
   dem Namen der Ebene den Platz. Ein geschlossenes Schloss steht immer da. */
.layer-item__lock {
  opacity: 0.4;
}

.layer-item:not(.layer-item--locked):not(:hover):not(.selected) .layer-item__lock {
  display: none;
}

.layer-item--locked .layer-item__lock {
  opacity: 1;
}

/* Seit dem Schloss steht ein Button mehr in der Zeile: schmaler, damit der
   Name der Ebene lesbar bleibt. */
.layer-item button:not(.layer-item__main) {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

/* Kleines Bild des Inhalts; Bilder und Texte auf Schachbrett, damit
   Durchsichtiges und weisse Schrift zu erkennen sind. */
.layer-item__vorschau {
  /* Haelt alles, was darin absolut liegt, im Kaestchen - sonst bezoege es sich
     auf die ganze Liste. */
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-color: #f2f2f2;
  background-image: linear-gradient(45deg, #d9d9d9 25%, transparent 25%, transparent 75%, #d9d9d9 75%),
    linear-gradient(45deg, #d9d9d9 25%, transparent 25%, transparent 75%, #d9d9d9 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

.layer-item__vorschau img,
.layer-item__vorschau svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.layer-item__vorschau-text {
  font-size: 15px;
  line-height: 1;
}

.layer-item__vorschau--bildplatz {
  border: 2px dashed rgba(46, 196, 182, 0.8);
  background: rgba(46, 196, 182, 0.12);
  color: var(--accent);
  font-weight: 800;
  font-size: 15px;
}

.layer-item__vorschau--symbol {
  background: rgba(216, 153, 4, 0.14);
  color: var(--accent);
  font-size: 16px;
}

.layer-item__namensfeld {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px;
  padding: 0.2rem 0.4rem;
  font-size: 0.95rem;
}

.layer-item--dragging {
  opacity: 0.4;
}

/* Loeschbereich der Ebenen-Liste: erscheint, sobald eine Ebene an ihrem Griff
   gezogen wird, und klebt am unteren Rand der Seitenleiste - so ist er auch bei
   langer Liste zu erreichen. */
.ebenen-papierkorb {
  position: sticky;
  bottom: 0.5rem;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 64px;
  margin-top: 0.6rem;
  border: 2px dashed rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  background: rgba(15, 16, 24, 0.95);
  color: var(--muted);
  font-weight: 600;
  pointer-events: none;
}

.ebenen-papierkorb.is-sichtbar {
  display: flex;
}

.ebenen-papierkorb.is-darueber {
  border-style: solid;
  border-color: var(--danger);
  background: rgba(255, 111, 89, 0.25);
  color: #ffffff;
}

.layer-item--wird-geloescht {
  opacity: 0.3;
  outline: 2px solid var(--danger);
  outline-offset: 1px;
}

.layer-item--dropover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(216, 153, 4, 0.35);
}

.props-tabs {
  display: grid;
  /* Element, Ebenen, Layout */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.3rem;
  border-radius: 12px;
}

.props-tab {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 0.6rem 0.4rem;
  border-radius: 9px;
  font-weight: 600;
}

.props-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06);
}

.props-tab.active {
  background: var(--accent);
  color: #082d27;
}

.props-tabpanel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.props-tabpanel[hidden] {
  display: none;
}

.import-hint {
  position: relative;
  margin-top: 0.35rem;
  padding: 0.85rem 0.95rem 0.9rem;
  background: rgba(216, 153, 4, 0.14);
  border: 1px solid rgba(216, 153, 4, 0.5);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* display:flex oben schlaegt sonst das [hidden]-Attribut (UA-Regel, geringere
   Spezifitaet) - ohne diese Regel liesse sich der Hinweis nicht ausblenden. */
.import-hint[hidden] {
  display: none;
}

.import-hint__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text);
  padding-right: 1.2rem;
}

.import-hint__close {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 8px;
}

.import-hint__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.import-hint__dismiss {
  align-self: flex-start;
  background: transparent;
  border: 1px solid rgba(216, 153, 4, 0.5);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.8rem;
  border-radius: 9px;
}

.import-hint__dismiss:hover {
  background: rgba(216, 153, 4, 0.22);
}

.align-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.align-grid .align-button {
  min-height: 46px;
  font-size: 1.25rem;
  padding: 0.4rem;
}

.align-grid .align-button:disabled,
.align-grid .distribute-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.align-grid--distribute {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 0.4rem;
}

.align-grid .distribute-button {
  min-height: 46px;
  font-size: 1.25rem;
  padding: 0.4rem;
}

.decoration-modal__actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.decoration-effects {
  margin: 0.5rem 0 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.decoration-effects summary {
  cursor: pointer;
  padding: 0.75rem 0.85rem;
  color: var(--text);
  font-weight: 600;
  user-select: none;
}

.decoration-effects__content {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0 0.85rem 0.85rem;
}

.decoration-effects__toggle {
  margin-top: 0.15rem;
}

.decoration-effects__grid {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(120px, 1.2fr);
  gap: 0.55rem 0.75rem;
  align-items: center;
}

.decoration-effects__grid.disabled {
  opacity: 0.45;
}

/* Farbe, Endfarbe und Winkel einer Fuellung (Rahmen, Text, Form) je nach
   Auswahl. Das Farbfeld steckt in einer Huelle mit Hex-Feld, die muss mit
   verschwinden. */
[data-fill-show-for][hidden],
.color-field:has(> [data-fill-show-for][hidden]) {
  display: none;
}

/* Traeger des SVG-Filters fuer den Schatten nach innen - nimmt keinen Platz ein. */
.layout-effekt-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Rahmen mit Verlauf: Die Maske laesst von der Verlaufsflaeche nur den Ring in
   Rahmenbreite (Innenabstand) stehen. */
.layout-effekt-rahmen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.decoration-effects__grid label,
.decoration-effects__label {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Winkelrad des Schlagschattens: die Linie zeigt in die Richtung, in die der
   Schatten faellt. Der Winkel steckt in --effect-dial-angle. */
.effect-dial {
  --effect-dial-angle: 0deg;
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  cursor: grab;
  touch-action: none;
  justify-self: start;
}

.effect-dial.is-dragging {
  cursor: grabbing;
}

.effect-dial:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.effect-dial::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--muted);
}

.effect-dial__needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 2px;
  margin-top: -1px;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: rotate(var(--effect-dial-angle));
  pointer-events: none;
}

.effect-dial__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--accent);
  transform: rotate(var(--effect-dial-angle)) translateX(37px);
  pointer-events: none;
}

/* Abstand 0: der Schatten liegt genau unter dem Element, die Richtung ist ohne
   Wirkung - das zeigt die blasse Linie. */
.effect-dial.is-zero .effect-dial__needle,
.effect-dial.is-zero .effect-dial__knob {
  opacity: 0.35;
}

.effect-dial.disabled {
  cursor: default;
  opacity: 0.45;
}

.sticker-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
}

.sticker-picker__item {
  display: grid;
  grid-template-rows: auto minmax(72px, 1fr) auto;
  gap: 0.4rem;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.sticker-picker__item img {
  width: 100%;
  height: 90px;
  object-fit: contain;
}

.sticker-picker__item span {
  font-size: 0.85rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

@media (max-width: 1200px) {
  body {
    height: auto;
    overflow-y: auto;
  }
  #editor-app {
    height: auto;
    overflow: visible;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  #properties-panel,
  #canvas-panel {
    overflow: visible;
  }
  .canvas-wrapper,
  .canvas-area {
    min-height: 540px;
  }
  .preview-modal__dialog {
    width: min(96vw, 1180px);
    height: min(90vh, 900px);
    padding: 16px;
  }
}

/* Automatisches Speichern: Die Speichern-Schaltflaeche waere dann ohne
   Aufgabe. "Verwerfen" bleibt stehen - es ist der Weg zurueck. */
.auto-save-hidden {
  display: none !important;
}

/* Schriftart-Auswahl im Text-Dialog: Name plus Textprobe in der jeweiligen
   Schrift. Die Liste klappt im Fluss auf, damit sie nicht am scrollenden
   Modal-Inhalt abgeschnitten wird. */
.font-picker {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.font-picker__toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.85rem;
  color: var(--text);
  font-weight: 500;
  min-height: 56px;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.font-picker__toggle:hover {
  border-color: rgba(216, 153, 4, 0.55);
  background: rgba(255, 255, 255, 0.1);
}

.font-picker__toggle-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.font-picker__name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-picker__sample {
  font-size: 1.15rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-picker__caret {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
}

.font-picker__panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(10, 12, 24, 0.92);
  padding: 0.5rem;
}

.font-picker__search {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  color: var(--text);
  font-size: 1rem;
}

.font-picker__search:focus-visible {
  outline: none;
  border-color: rgba(216, 153, 4, 0.72);
  box-shadow: 0 0 0 3px rgba(216, 153, 4, 0.22);
}

.font-picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 300px;
  overflow-y: auto;
}

.font-picker__option {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
}

.font-picker__option.is-active {
  background: rgba(255, 255, 255, 0.1);
}

.font-picker__option.is-selected {
  background: rgba(216, 153, 4, 0.18);
}

.font-picker__empty {
  margin: 0;
  padding: 0.3rem 0.6rem;
}

/* Fertige Bildplatz-Anordnungen: Vorschau je Anordnung im Seitenverhaeltnis
   der Leinwand, darunter der Name. */
.arrangement-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
}

.arrangement-picker__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  padding: 0.6rem;
  min-height: 44px;
  text-align: center;
}

.arrangement-picker__thumb {
  width: 100%;
  height: 90px;
}

.arrangement-picker__canvas {
  fill: rgba(255, 255, 255, 0.08);
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1%;
}

.arrangement-picker__thumb rect:not(.arrangement-picker__canvas) {
  fill: rgba(46, 196, 182, 0.35);
  stroke: rgba(46, 196, 182, 0.9);
  stroke-width: 0.6%;
}

/* Farbwert als Text neben dem Farbfeld. Das Textfeld versteht auch die
   achtstellige Schreibweise aus dslrBooth und LumaBooth. */
.color-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.color-field input[type="color"] {
  flex: 0 0 auto;
}

.color-field__hex {
  flex: 0 1 7.5rem;
  width: 7.5rem;
  min-width: 0;
  font-family: Consolas, 'Courier New', monospace;
}

.color-field__hex.is-invalid {
  border-color: var(--danger);
}

/* Pipette: nimmt eine Farbe vom Bildschirm auf. Ist das Farbfeld gesperrt
   (etwa Texthintergrund aus), ist es die Pipette auch - ohne dass jede
   Sperrstelle sie kennen muss. */
.color-field__pipette {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

.color-field__pipette:hover {
  background: rgba(255, 255, 255, 0.14);
}

.color-field__pipette svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.color-field:has(> input[type="color"]:disabled) > .color-field__pipette {
  opacity: 0.45;
  pointer-events: none;
}

/* Einklappbare Menues: Geschaltet wird ueber Laschen im Zwischenraum
   zwischen Menue und Leinwand. Sie liegen absolut ueber dem Rand und belegen
   keinen Platz - weder verrutscht etwas im Menue, noch wird die Leinwand
   kleiner. Sie ragen nur 12 px ueber die Kante und liegen sonst im Innenrand
   ihres Menues - so sieht man, wozu sie gehoeren.
   Die Laschen der Seitenmenues haengen am Rasterfeld ihres Menues
   im Container - mit Start- und Endlinie, sonst reicht das Feld bis an den
   Rand des Containers.
   Die Klassen sitzen am Container, damit die schmale Ansicht unten die
   Werkzeugleiste mit dem linken Menue zusammen ausblenden kann. */
#editor-app {
  position: relative;
}

.panel-tab {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--surface);
  color: var(--muted);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  touch-action: manipulation;
}

.panel-tab:hover,
.panel-tab:focus-visible {
  color: var(--accent);
  border-color: rgba(216, 153, 4, 0.6);
}

.panel-tab:active {
  transform: none;
}

.panel-tab__chevron {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

/* Senkrechte Lasche am rechten Menue */
#toggle-properties-panel {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  top: 50%;
  left: -12px;
  width: 32px;
  height: 72px;
  margin-top: -36px;
}

#toggle-properties-panel .panel-tab__chevron {
  transform: rotate(180deg);
}

.back-button__icon {
  display: none;
  font-size: 1.35rem;
  line-height: 1;
}

/* Eingeklappt bleibt rechts nur ein Streifen als Anker fuer die Lasche. */
#editor-app.is-properties-panel-collapsed {
  --editor-right-width: 20px;
}

#editor-app.is-properties-panel-collapsed #properties-panel {
  padding: 0;
  min-height: 20px;
}

#editor-app.is-properties-panel-collapsed #properties-panel > * {
  display: none !important;
}

#editor-app.is-properties-panel-collapsed #toggle-properties-panel .panel-tab__chevron {
  transform: rotate(0deg);
}

/* Schmal stehen die Bereiche untereinander: Kopfleiste oben, Leinwand in der
   Mitte, rechtes Menue unten. Der Editor fuellt dann genau die Bildschirmhoehe
   - die Leinwand nimmt, was Kopfleiste und Menue uebrig lassen, das Menue
   rollt bei Bedarf in sich. Frueher rollte die ganze Seite und die Leinwand
   hatte eine feste Hoehe: Einklappen machte die Seite nur kuerzer, Platz fuer
   die Bearbeitung gewann niemand. Das Menue klappt nach unten ein, seine
   Lasche sitzt an der Kante zur Leinwand. */
@media (max-width: 1200px) {
  body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  #editor-app {
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
  }

  #properties-panel {
    max-height: 26vh;
    max-height: 26dvh;
    /* Rollende Bereiche melden sonst keine Mindesthoehe und wuerden vom
       Gitter auf wenige Bildpunkte gedrueckt. */
    min-height: min(26vh, 240px);
    min-height: min(26dvh, 240px);
    overflow-y: auto;
  }

  /* Eingeklappt gilt die Mindesthoehe nicht - sonst bliebe ein leerer Kasten. */
  #editor-app.is-properties-panel-collapsed #properties-panel {
    min-height: 0;
  }

  /* Das Gitter hat die Fensterhoehe; ein Bereich mit overflow: hidden meldet
     keine Mindesthoehe und wurde deshalb zusammengedrueckt. Mit sichtbarem
     Ueberlauf zaehlt sein Inhalt, und die Seite rollt stattdessen. */
  #canvas-panel {
    min-height: auto;
    overflow: visible;
  }

  /* Die Arbeitsflaeche hat eine Mindesthoehe. Frueher teilte sie sich die
     mittlere Zeile mit der Werkzeugleiste und durfte auf null schrumpfen -
     auf einem Tablet hochkant (768 x 1024) blieben ihr 10 Bildpunkte. Reicht
     das Fenster nicht fuer alles, rollt die Seite; ein eingeklapptes Menue
     gibt seinen Platz an die Flaeche ab. */
  .canvas-wrapper {
    flex: 1 1 auto;
    min-height: clamp(260px, 46vh, 1200px);
    min-height: clamp(260px, 46dvh, 1200px);
  }

  .canvas-area {
    min-height: 0;
  }

  #toggle-properties-panel {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    top: -12px;
    left: 50%;
    width: 72px;
    height: 28px;
    margin-top: 0;
    margin-left: -36px;
  }

  /* Aufgeklappt zeigt der Pfeil nach unten (dorthin klappt es), eingeklappt
     nach oben. */
  #toggle-properties-panel .panel-tab__chevron {
    transform: rotate(-90deg);
  }

  #editor-app.is-properties-panel-collapsed #toggle-properties-panel .panel-tab__chevron {
    transform: rotate(90deg);
  }

  /* Die Kopfleiste bricht um; Beschriftungen, die sich aus dem Symbol
     erschliessen, fallen weg. */
  .back-button__label {
    display: none;
  }

  .back-button__icon {
    display: inline;
  }

  .kopf-menue__zusatz {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Ohne Grafikbeschleunigung: Weichzeichner gegen dunkleren Schleier tauschen

   Siehe die ausfuehrliche Begruendung in admin.css. Im Layout-Editor faellt es
   besonders auf: Beim Ziehen eines Elements wird die Flaeche darunter ohnehin
   dauernd neu gezeichnet, und ein Weichzeichner rechnet dann bei jedem Bild
   mit. Die Klasse setzt editor.js nach dem Startzustand des Anzeigefensters.
   --------------------------------------------------------------------------- */
body.ohne-grafikbeschleunigung .confirm-modal__backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.ohne-grafikbeschleunigung .preview-modal__backdrop,
body.ohne-grafikbeschleunigung .decoration-modal__backdrop {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Text direkt auf der Arbeitsflaeche bearbeiten: Eingabefeld deckungsgleich
   ueber dem Element, darueber die schwebende Leiste. Beides haengt am body,
   deshalb feste Lage in Fensterkoordinaten; unter den Dialogen (1100+). */
.text-bearbeitung {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 1000;
}

.text-bearbeitung__rahmen {
  position: fixed;
  transform-origin: center;
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.text-bearbeitung__feld,
.text-bearbeitung__feld:focus-visible {
  position: absolute;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-kerning: none;
  caret-color: var(--accent);
}

.text-bearbeitung__feld::selection {
  background: rgba(216, 153, 4, 0.35);
}

/* Das gezeichnete Bild ist waehrend der Bearbeitung aus; Griffe zum Ziehen
   und Drehen gehoeren dann nicht dazu. */
.layout-decoration.is-text-editing > .resize-handle,
.layout-decoration.is-text-editing > .rotate-handle {
  display: none;
}

.text-leiste {
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  max-width: min(1100px, calc(100vw - 16px));
  padding: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(20, 22, 36, 0.97);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  color: var(--text);
}

.text-leiste__gruppe {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.text-leiste__gruppe + .text-leiste__gruppe {
  padding-left: 0.35rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.text-leiste__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.6rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

.text-leiste__knopf:hover {
  background: rgba(255, 255, 255, 0.12);
}

.text-leiste__knopf.is-active {
  border-color: var(--accent);
  background: rgba(216, 153, 4, 0.22);
}

.text-leiste__knopf svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.text-leiste__kursiv {
  font-style: italic;
  font-family: Georgia, serif;
}

.text-leiste__fett {
  font-weight: 800;
}

.text-leiste__abschluss {
  margin-left: auto;
}

.text-leiste__fertig {
  min-width: 48px;
  background: #2f9e55;
  color: #fff;
}

.text-leiste__fertig:hover {
  background: #37b563;
}

.text-leiste__verwerfen {
  color: var(--muted);
}

.text-leiste__groesse {
  width: 4.6rem;
  height: 40px;
  padding: 0 0.5rem;
  box-sizing: border-box;
  text-align: center;
}

.text-leiste__farbe {
  width: 40px;
  height: 40px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

/* Die Schriftauswahl ist in der Leiste ein schmaler Button; die Beschriftung
   bleibt fuer Vorleseprogramme da. Die Liste klappt schwebend auf. */
.text-leiste__schrift .font-picker {
  width: 11rem;
}

.text-leiste__schrift label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.text-leiste__schrift .font-picker__toggle {
  min-height: 40px;
  padding: 0.3rem 0.6rem;
}

.text-leiste__schrift .font-picker__toggle .font-picker__sample {
  display: none;
}

.text-leiste__schrift .font-picker__toggle .font-picker__name {
  font-size: 0.95rem;
  color: var(--text);
}

.text-leiste__schrift .font-picker__panel,
.text-leiste__menue {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 2;
  width: 18rem;
  max-height: 45vh;
  background: rgba(14, 16, 28, 0.98);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* display:flex der Grundregel schlaegt sonst das [hidden]-Attribut. */
.font-picker__panel[hidden],
#text-properties[hidden] {
  display: none;
}

/* In der schmalen Seitenleiste steht jede Beschriftung ueber ihrem Feld. */
#text-properties .decoration-effects__grid {
  grid-template-columns: minmax(0, 1fr);
}

/* "Weitere Einstellungen" springt hierher; ein kurzes Aufleuchten zeigt, wo. */
#text-properties.is-hervorgehoben {
  animation: text-eigenschaften-hinweis 1.2s ease-out;
  border-radius: 12px;
}

@keyframes text-eigenschaften-hinweis {
  from { box-shadow: 0 0 0 3px rgba(216, 153, 4, 0.9); }
  to { box-shadow: 0 0 0 3px rgba(216, 153, 4, 0); }
}

.text-leiste__schrift .font-picker__list {
  max-height: 32vh;
}

.text-leiste--nach-oben .text-leiste__schrift .font-picker__panel,
.text-leiste--nach-oben .text-leiste__menue {
  top: auto;
  bottom: calc(100% + 6px);
}

.text-leiste__menue {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 15rem;
  padding: 0.4rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.text-leiste__menue[hidden] {
  display: none;
}

.text-leiste__menue-eintrag {
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-weight: 500;
  text-align: left;
}

.text-leiste__menue-eintrag:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Uebersicht der Tastenkuerzel: alle Gruppen untereinander in einer Spalte -
   nebeneinander musste man beim Suchen zwischen zwei Spalten springen. Je Zeile
   Taste links, Wirkung rechts; die Tastenspalte ist ueberall gleich breit, damit
   die Wirkungen ueber alle Gruppen in einer Flucht stehen. */
.tastenkuerzel__dialog {
  width: min(94vw, 720px);
}

.tastenkuerzel__inhalt {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow-y: auto;
}

.tastenkuerzel__gruppe h4 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--accent);
}

.tastenkuerzel__gruppe dl {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: 0.45rem 0.85rem;
  margin: 0;
  /* Oben buendig: Bricht ein langer Griff um, bleibt die Wirkung an seiner
     ersten Zeile stehen statt an der letzten. */
  align-items: start;
}

.tastenkuerzel__gruppe dt,
.tastenkuerzel__gruppe dd {
  margin: 0;
}

.tastenkuerzel__gruppe dd {
  color: var(--muted);
  font-size: 0.92rem;
  /* Auf Hoehe der Schrift in der Taste daneben (deren Rand und Polster). */
  padding-top: 0.2rem;
}

/* Schmal (Handy): auch Taste und Wirkung untereinander. */
@media (max-width: 560px) {
  .tastenkuerzel__gruppe dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }

  .tastenkuerzel__gruppe dd {
    padding-top: 0;
    margin-bottom: 0.7rem;
  }
}

.tastenkuerzel kbd {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  /* Lange Griffe ("⠿ links an der Leiste an der Auswahl ziehen") brechen um,
     statt die Tastenspalte zu sprengen. */
  white-space: normal;
}

/* Ansichtsgroesse unten rechts in der Arbeitsflaeche. */
.zoom-leiste {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(15, 16, 24, 0.85);
}

.zoom-leiste__knopf,
.zoom-leiste__wert {
  min-width: 36px;
  height: 34px;
  padding: 0 0.5rem;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
}

.zoom-leiste__wert {
  min-width: 64px;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.zoom-leiste__knopf:hover,
.zoom-leiste__wert:hover {
  background: rgba(255, 255, 255, 0.1);
}

.canvas-area.is-verschiebbar,
.canvas-area.is-verschiebbar * {
  cursor: grab !important;
}

.canvas-area.is-am-verschieben,
.canvas-area.is-am-verschieben * {
  cursor: grabbing !important;
}

/* Auswahlrahmen beim Ziehen auf freier Flaeche. */
.auswahlrahmen {
  position: absolute;
  z-index: 40;
  border: 1px solid var(--accent);
  background: rgba(216, 153, 4, 0.12);
  pointer-events: none;
}

/* Griff zum Verschieben einer Ebene. */
.layer-item button.layer-item__griff {
  min-width: 28px;
  padding: 0.35rem 0.2rem;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  font-size: 1.05rem;
  letter-spacing: -1px;
}

.layer-list--ziehen,
.layer-list--ziehen * {
  cursor: grabbing !important;
  user-select: none;
}

.layer-einfuegelinie {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  pointer-events: none;
}

/* Griff links an der Leiste beim Bearbeiten von Text. */
.text-leiste__griff {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Breit genug, um ihn sicher zu fassen - an 22 px griff man oft daneben. */
  width: 36px;
  align-self: stretch;
  border-radius: 6px;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.text-leiste__griff:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.text-leiste.is-am-ziehen,
.text-leiste.is-am-ziehen .text-leiste__griff {
  cursor: grabbing;
}

.text-leiste.is-am-ziehen {
  opacity: 0.92;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------------------
   Kopfleiste: eine Zeile ueber Arbeitsflaeche und rechtem Menue. Links Zurueck,
   Bildschirmtastatur und das Layout-Menue, in der Mitte Leinwand, Einfuegen
   und Bildplaetze, rechts Rueckgaengig bis Speichern. Die Menues oeffnen
   Aufklappfenster unter ihrem Knopf; dort ist auch Platz fuer Erklaerungen.
   --------------------------------------------------------------------------- */
.kopfleiste {
  grid-column: 1 / -1;
  position: relative;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.kopfleiste__gruppe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.kopfleiste__gruppe--rechts {
  margin-left: auto;
}

.kopfleiste button {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
}

.kopfleiste .osk-button {
  flex: 0 0 auto;
}

.kopf-symbol {
  min-width: 44px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 1.2rem;
  line-height: 1;
}

.kopf-menue {
  position: relative;
}

.kopf-menue__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
}

.kopf-menue__titel {
  color: var(--text);
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kopf-menue__zusatz {
  color: var(--muted);
  font-size: 0.85em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Symbol vor der Beschriftung; wird es eng, bleibt nur das Symbol. */
.kopf-menue__symbol {
  color: var(--accent);
  font-size: 1.15rem;
  line-height: 1;
}

.kopf-mit-symbol {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.kopf-mit-symbol__symbol {
  display: inline-flex;
}

.kopf-menue__pfeil {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.kopf-menue.offen .kopf-menue__knopf {
  border-color: rgba(216, 153, 4, 0.7);
  color: var(--accent);
}

.kopf-menue.offen .kopf-menue__pfeil {
  transform: rotate(180deg);
}

.kopf-farbfeld {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.kopf-menue__fenster {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 70;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
}

/* display:flex schlaegt sonst das [hidden]-Attribut. */
.kopf-menue__fenster[hidden] {
  display: none;
}

.kopf-menue__fenster--rechts {
  left: auto;
  right: 0;
}

.kopf-menue__fenster--leinwand {
  width: min(420px, calc(100vw - 32px));
}

/* Die Layout-Liste traegt je Zeile Vorschaubild, Name, Groesse und das x zum
   Loeschen - in 360 px blieb vom Namen oft nur der Anfang. */
/* Breiter als die uebrigen Menues: Neben jedem Layout stehen zwei
   quadratische Buttons (Bibliothek, Loeschen), der Name braucht trotzdem
   Platz. */
.kopf-menue__fenster--layouts {
  width: min(540px, calc(100vw - 32px));
}

.kopf-menue__fenster h3 {
  margin: 0;
  font-size: 1.05rem;
}

.kopf-menue__fenster .hint {
  margin: 0;
}

.kopf-menue__fenster #layout-list {
  max-height: 42vh;
  overflow-y: auto;
}

/* Layout-Liste mit Vorschaubild: Kaestchen links in der Hoehe der Zeile,
   Breite folgt dem Seitenverhaeltnis der Leinwand (Fotostreifen schmal). */
#layout-list .list-item {
  justify-content: flex-start;
  gap: 0.65rem;
}

.list-item__vorschau {
  flex: 0 0 auto;
  height: 44px;
  max-width: 88px;
  min-width: 14px;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
}

.list-item__vorschau-bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-item__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

/* Gewinnbelege stehen in der Layout-Liste getrennt unter den Foto-Layouts. */
.list-heading {
  margin: 0.6rem 0 0.15rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.list-heading:first-child {
  margin-top: 0;
}

/* Art im Dialog "Neu": Foto-Layout oder Gewinnbeleg. */
.new-layout-modal__art {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.new-layout-modal__art .choice-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}

.choice-item input[type="radio"] {
  margin: 0;
}

/* Rechts neben jedem Layout ein rotes x zum Loeschen. Es steht neben dem
   Auswahl-Button, nicht darin - ein Button im Button ist kein gueltiges HTML. */
.list-item-zeile {
  /* Hoehe einer Zeile: Vorschau (44px), Innenabstand oben und unten
     (2 x 0.65rem) und Rand. Die Buttons daneben sind so breit wie hoch -
     schmal war das Bibliotheks-Sinnbild nicht zu erkennen. */
  --listen-zeilen-hoehe: calc(44px + 1.3rem + 2px);
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.list-item-zeile > .list-item {
  flex: 1 1 auto;
  min-width: 0;
}

.list-item__loeschen {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--listen-zeilen-hoehe);
  min-height: var(--listen-zeilen-hoehe);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  background: rgba(255, 111, 89, 0.12);
  color: var(--danger);
  font-size: 1.9rem;
  line-height: 1;
}

.list-item__loeschen:hover,
.list-item__loeschen:focus-visible {
  border-color: var(--danger);
  background: rgba(255, 111, 89, 0.22);
}

/* Buecher-Sinnbild neben dem Kreuz: legt das Layout in die Bibliothek des
   Geraets. Zurueckhaltend gefaerbt - es ist kein Loeschen. */
.list-item__bibliothek {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--listen-zeilen-hoehe);
  min-height: var(--listen-zeilen-hoehe);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.list-item__bibliothek:hover,
.list-item__bibliothek:focus-visible {
  border-color: var(--accent);
  color: var(--text);
}

/* Auswahl in "Aus Bibliothek laden": Vorschau, Name und Button je Zeile. */
.bibliothek-auswahl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bibliothek-auswahl__eintrag {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 11px;
}

.bibliothek-auswahl__vorschau {
  display: block;
  width: 72px;
  height: 54px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.bibliothek-auswahl__vorschau img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bibliothek-auswahl__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bibliothek-auswahl__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bibliothek-auswahl__meta {
  color: var(--muted);
  font-size: 0.85em;
}

.kopf-menue__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kopf-menue__zeile > button {
  flex: 1 1 0;
}

.kopf-menue__trenner {
  height: 1px;
  margin: 0.15rem 0;
  background: var(--border);
}

.kopf-eintrag--gefahr .kopf-eintrag__titel {
  color: var(--danger);
}

.kopf-eintrag {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
}

.kopfleiste .kopf-eintrag {
  padding: 0.55rem 0.6rem;
}

/* display:flex oben schlaegt sonst das [hidden]-Attribut. Beim Gewinnbeleg
   blieben so Eintraege im Menue, die ausgeblendet sein sollten - er bekam
   mehrere Bildplaetze, von denen auf dem Papier keiner etwas zeigte. */
.kopf-eintrag[hidden] {
  display: none;
}

.kopf-eintrag:hover,
.kopf-eintrag:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border);
}

.kopf-eintrag:active {
  transform: none;
}

.kopf-eintrag__symbol {
  flex: 0 0 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(216, 153, 4, 0.14);
  color: var(--accent);
  font-size: 1.05rem;
}

.kopf-eintrag--gefahr .kopf-eintrag__symbol {
  background: rgba(255, 111, 89, 0.14);
  color: var(--danger);
}

.kopf-eintrag__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.kopf-eintrag__titel {
  font-weight: 600;
}

.kopf-eintrag__hinweis {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.35;
}

.kopf-leinwand-masse {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: end;
}

.kopf-leinwand-masse > div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.kopf-leinwand-masse .number-stepper {
  grid-template-columns: 40px minmax(56px, 1fr) 40px;
}

.kopf-leinwand-masse .number-stepper-button {
  min-width: 40px;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

.kopf-leinwand-tauschen {
  font-size: 1.2rem;
}

/* Verlauf: je Schritt eine Zeile, der aktuelle Stand hervorgehoben, die
   zurueckgenommenen Schritte danach blass. */
.verlauf-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: min(60vh, 32rem);
  overflow-y: auto;
}

.verlauf-eintrag {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.45rem 0.7rem;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verlauf-eintrag:hover,
.verlauf-eintrag:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border);
}

.verlauf-eintrag--jetzt {
  background: rgba(216, 153, 4, 0.16);
  border-color: var(--accent);
  font-weight: 600;
}

.verlauf-eintrag--danach {
  color: var(--muted);
  font-style: italic;
}

/* Fuellung der Leinwand: zweite Farbe und Winkel bzw. Art, Farbe und Groesse
   des Musters nebeneinander. display:grid schlaegt sonst das [hidden]-Attribut. */
.kopf-hintergrund {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.35rem 0.5rem;
  align-items: end;
}

/* Ein Farbfeld (Fläche, Farbwert, Pipette, Palette) braucht die ganze Breite. */
.kopf-hintergrund > .kopf-hintergrund__voll {
  grid-column: 1 / -1;
}

.kopf-hintergrund[hidden],
.kopf-hintergrund > div[hidden] {
  display: none;
}

.kopf-hintergrund > div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.kopf-hintergrund .number-stepper {
  grid-template-columns: 40px minmax(56px, 1fr) 40px;
}

.kopf-hintergrund .number-stepper-button {
  min-width: 40px;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

/* Umschalter in der Kopfleiste (Modus "Mehrere"): Eingeschaltet bleibt er
   hervorgehoben, damit der Modus nicht unbemerkt an bleibt. */
.kopf-umschalter {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.kopf-umschalter__symbol {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kopf-umschalter__text {
  color: var(--text);
}

.kopf-umschalter[aria-pressed="true"] {
  border-color: rgba(216, 153, 4, 0.7);
  background: rgba(216, 153, 4, 0.16);
  color: var(--accent);
}

.kopf-umschalter[aria-pressed="true"] .kopf-umschalter__text {
  color: var(--accent);
}

/* ---------------------------------------------------------------------------
   Kontextmenue: Rechtsklick, langes Druecken oder Menuetaste. Es haengt am
   body und steht ueber Kopfleiste und Aufklappfenstern, aber unter den
   Dialogen. Am Finger sind die Zeilen hoeher, die Tastenkuerzel entfallen.
   --------------------------------------------------------------------------- */
.kontextmenue {
  position: fixed;
  z-index: 900;
  min-width: 220px;
  max-width: min(340px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.kontextmenue__kopf {
  padding: 0.35rem 0.6rem 0.45rem;
  color: var(--muted);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kontextmenue__trenner {
  flex: 0 0 1px;
  margin: 0.25rem 0.3rem;
  background: var(--border);
}

.kontextmenue__eintrag {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  min-height: 36px;
  padding: 0.4rem 0.6rem;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  font-weight: 500;
}

.kontextmenue__eintrag:hover:not(:disabled),
.kontextmenue__eintrag:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border);
}

.kontextmenue__eintrag:active {
  transform: none;
}

.kontextmenue__eintrag:disabled {
  opacity: 0.4;
  cursor: default;
}

.kontextmenue__eintrag--gefahr {
  color: var(--danger);
}

.kontextmenue__tasten {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 400;
  white-space: nowrap;
}

body.fingerbedienung .kontextmenue__eintrag {
  min-height: 46px;
  font-size: 1.02rem;
}

body.fingerbedienung .kontextmenue__tasten {
  display: none;
}

/* ---------------------------------------------------------------------------
   Kontextleiste an der Auswahl: schwebt ueber (oder unter) dem gewaehlten
   Element. Beim Ziehen und hinter Dialogen ist sie weg.
   --------------------------------------------------------------------------- */
.auswahl-leiste {
  position: fixed;
  z-index: 800;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  max-width: min(560px, calc(100vw - 16px));
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.auswahl-leiste[hidden],
body.dragging .auswahl-leiste,
body.modal-open .auswahl-leiste {
  display: none;
}

/* Griff links: Daran laesst sich die Leiste verschieben (wie die Textleiste). */
.auswahl-leiste__griff {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Breit genug, um ihn sicher zu fassen - an 22 px griff man oft daneben. */
  width: 36px;
  align-self: stretch;
  min-height: 40px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.auswahl-leiste__griff:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.auswahl-leiste.is-am-ziehen,
.auswahl-leiste.is-am-ziehen .auswahl-leiste__griff {
  cursor: grabbing;
}

.auswahl-leiste.ist-verschoben .auswahl-leiste__griff {
  color: var(--accent);
}

body.fingerbedienung .auswahl-leiste__griff,
body.fingerbedienung .text-leiste__griff {
  width: 48px;
}

.auswahl-leiste__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 0.45rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
}

.auswahl-leiste__knopf:hover,
.auswahl-leiste__knopf:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border);
}

.auswahl-leiste__knopf:active {
  transform: none;
}

.auswahl-leiste__knopf--text {
  font-size: 0.95rem;
  font-weight: 700;
}

.auswahl-leiste__knopf--gefahr {
  color: var(--danger);
}

.auswahl-leiste__knopf[aria-pressed="true"] {
  border-color: rgba(216, 153, 4, 0.7);
  background: rgba(216, 153, 4, 0.16);
  color: var(--accent);
}

.auswahl-leiste__farbe {
  width: 40px;
  height: 40px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
}

/* Die allgemeine Regel gibt Auswahlfeldern die volle Breite - in der Leiste
   braeche das die Zeile um. */
.auswahl-leiste__auswahl {
  flex: 0 0 auto;
  width: auto;
  min-height: 40px;
  max-width: 11rem;
}

.auswahl-leiste > :not(.pfeilfeld-rahmen) {
  flex: 0 0 auto;
}

.auswahl-leiste__trenner {
  width: 1px;
  align-self: stretch;
  margin: 4px 3px;
  background: var(--border);
}

body.fingerbedienung .auswahl-leiste__knopf,
body.fingerbedienung .auswahl-leiste__farbe {
  min-width: 46px;
  min-height: 46px;
}

/* Pfeilfeld: drei mal drei, die Mitte schaltet die Schrittweite reihum weiter;
   die Zeile darunter waehlt sie direkt. */
.pfeilfeld-rahmen {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 0 2px;
}

.pfeilfeld {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-auto-rows: 48px;
  gap: 4px;
  justify-content: center;
}

.pfeilfeld-schritte {
  display: flex;
  gap: 4px;
}

.pfeilfeld-schritte__knopf {
  min-width: 44px;
  min-height: 36px;
  padding: 0 0.4rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pfeilfeld-schritte__knopf:active {
  transform: none;
}

.pfeilfeld-schritte__knopf[aria-pressed="true"] {
  border-color: rgba(216, 153, 4, 0.7);
  background: rgba(216, 153, 4, 0.16);
  color: var(--accent);
}

body.fingerbedienung .pfeilfeld-schritte__knopf {
  min-width: 50px;
  min-height: 44px;
}

.pfeilfeld__knopf,
.pfeilfeld__schritt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 1.2rem;
  touch-action: none;
}

.pfeilfeld__knopf:active {
  background: rgba(216, 153, 4, 0.2);
  transform: none;
}

.pfeilfeld__schritt {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
}

/* Ziffernblock am Zahlenfeld (nur nach einem Tipp mit dem Finger). */
.ziffernblock {
  position: fixed;
  z-index: 1500;
  width: 240px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.ziffernblock__anzeige {
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ziffernblock__tasten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.ziffernblock__taste {
  min-height: 50px;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.ziffernblock__taste:active {
  transform: none;
}

.ziffernblock__taste--fertig {
  grid-column: span 2;
  font-size: 1rem;
}

/* Die Kopfleiste bleibt einzeilig - auch hochkant. Wird es eng, weichen die
   Beschriftungen ihren Symbolen; der Name steht dann im title und aria-label.
   Seltenes (Probedruck, Zuruecksetzen, Tastenkuerzel) liegt im Menue "Mehr",
   das Einfuegen in der Leiste links an der Flaeche. */
.kopfleiste {
  flex-wrap: nowrap;
}

.kopfleiste__gruppe {
  flex-wrap: nowrap;
}

.kopfleiste__gruppe:first-child {
  min-width: 0;
  flex: 0 1 auto;
}

.kopfleiste__gruppe:first-child .kopf-menue {
  min-width: 0;
}

.kopf-menue__knopf--layout {
  min-width: 0;
}

@media (max-width: 1720px) {
  .kopfleiste .back-button__label {
    display: none;
  }

  .kopfleiste .back-button__icon {
    display: inline;
  }
}

@media (max-width: 1500px) {
  .kopfleiste .kopf-kurz,
  .kopfleiste .kopf-umschalter__text {
    display: none;
  }

  .kopfleiste .kopf-umschalter,
  .kopfleiste .kopf-mit-symbol {
    min-width: 44px;
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .kopfleiste .kopf-menue__titel {
    max-width: 11rem;
  }
}

@media (max-width: 1000px) {
  .kopfleiste {
    gap: 0.4rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .kopfleiste__gruppe {
    gap: 0.35rem;
  }

  .kopfleiste .kopf-menue__zusatz,
  .kopfleiste .kopf-menue__pfeil {
    display: none;
  }

  .kopfleiste .kopf-menue__titel {
    max-width: 7rem;
  }

  .kopfleiste button {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
}

/* ---------------------------------------------------------------------------
   Lineale und Hilfslinien. Die Lineale liegen neben der Arbeitsflaeche in deren
   oberem und linkem Rand; die Leinwand rueckt dafuer um ihre Breite ein. Die
   Teilstriche zeichnet ein Verlauf, nur die beschrifteten Striche sind Knoten.
   --------------------------------------------------------------------------- */
.lineal,
.lineal-ecke {
  position: absolute;
  /* Ueber der Flaeche, unter Zoom-Leiste (20) und Papierkorb (25). */
  z-index: 12;
  background-color: rgba(15, 16, 24, 0.94);
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.lineal-ecke {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  pointer-events: none;
}

.lineal--oben {
  height: 22px;
  border-bottom: 1px solid var(--border);
  cursor: row-resize;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: var(--lineal-teil, 10px) 5px;
  background-position: var(--lineal-anfang, 0) 100%;
  background-repeat: repeat-x;
}

.lineal--links {
  width: 22px;
  border-right: 1px solid var(--border);
  cursor: col-resize;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 5px var(--lineal-teil, 10px);
  background-position: 100% var(--lineal-anfang, 0);
  background-repeat: repeat-y;
}

.lineal__strich {
  position: absolute;
  white-space: nowrap;
  pointer-events: none;
}

.lineal--oben .lineal__strich {
  top: 0;
  height: 100%;
  padding: 3px 0 0 3px;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.lineal--links .lineal__strich {
  left: 0;
  width: 100%;
  padding: 2px 0 0 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  letter-spacing: -0.3px;
}

/* Marke einer Hilfslinie: Daran wird sie verschoben. */
.lineal__marke {
  position: absolute;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  touch-action: none;
}

.lineal__marke::before {
  content: "";
  position: absolute;
  background: var(--accent);
}

.lineal--oben .lineal__marke {
  top: 0;
  width: 15px;
  height: 100%;
  margin-left: -7px;
  cursor: col-resize;
}

.lineal--oben .lineal__marke::before {
  left: 3px;
  bottom: 0;
  width: 9px;
  height: 9px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.lineal--links .lineal__marke {
  left: 0;
  width: 100%;
  height: 15px;
  margin-top: -7px;
  cursor: row-resize;
}

.lineal--links .lineal__marke::before {
  right: 0;
  top: 3px;
  width: 9px;
  height: 9px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.lineal__marke:hover::before,
.lineal__marke:focus-visible::before {
  background: #ffffff;
}

.lineal__marke:active {
  transform: none;
}

body.fingerbedienung .lineal--oben .lineal__marke {
  width: 31px;
  margin-left: -15px;
}

body.fingerbedienung .lineal--oben .lineal__marke::before {
  left: 11px;
}

body.fingerbedienung .lineal--links .lineal__marke {
  height: 31px;
  margin-top: -15px;
}

body.fingerbedienung .lineal--links .lineal__marke::before {
  top: 11px;
}

/* Die Linie selbst nimmt keine Zeiger an: Sie laege sonst ueber den Griffen
   eines Elements, dessen Kante an ihr eingerastet ist. */
.hilfslinie {
  position: absolute;
  /* Ueber Elementen und Druckrand (2), unter den Fanglinien (40). */
  z-index: 3;
  pointer-events: none;
  background: rgba(216, 153, 4, 0.9);
}

.hilfslinie--senkrecht {
  top: 0;
  bottom: 0;
  width: 1px;
}

.hilfslinie--waagerecht {
  left: 0;
  right: 0;
  height: 1px;
}

.hilfslinie.is-am-ziehen {
  z-index: 41;
  background: #ffffff;
}

.hilfslinie__wert {
  position: absolute;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent);
  color: #111111;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hilfslinie--senkrecht .hilfslinie__wert {
  left: 6px;
}

.hilfslinie--waagerecht .hilfslinie__wert {
  top: 6px;
}

/* Aufreihen mit festem Abstand: Zahl und zwei Buttons in einer Zeile. */
.abstand-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px 46px;
  gap: 0.4rem;
  align-items: end;
  margin-top: 0.4rem;
}

.abstand-zeile label {
  grid-column: 1 / -1;
}

.abstand-zeile .fester-abstand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0;
}

.abstand-zeile .fester-abstand-button:disabled {
  opacity: 0.35;
  cursor: default;
}

#hilfslinien-loeschen:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------------------------------------------------------------------------
   Gruppen. Ist eine Gruppe als Ganzes gewaehlt, traegt ein Rahmen um alle
   Mitglieder die Griffe; die Mitglieder selbst zeigen dann keine. Der Rahmen
   nimmt keine Zeiger an - nur seine Griffe -, damit ein Doppelklick weiter das
   einzelne Element trifft.
   --------------------------------------------------------------------------- */
.canvas-area.gruppe-gewaehlt .placeholder.selected > .resize-handle,
.canvas-area.gruppe-gewaehlt .placeholder.selected > .rotate-handle {
  display: none;
}

.gruppenrahmen {
  position: absolute;
  /* Ueber Elementen, Druckrand (2) und Hilfslinien (3), unter den Fanglinien (40). */
  z-index: 4;
  border: 1px dashed var(--accent);
  pointer-events: none;
}

.gruppenrahmen.is-gesperrt {
  border-color: var(--muted);
}

.gruppenrahmen__griff,
.gruppenrahmen__drehen {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #0f1018;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.gruppenrahmen__griff--tl { top: -8px; left: -8px; cursor: nwse-resize; }
.gruppenrahmen__griff--tr { top: -8px; right: -8px; cursor: nesw-resize; }
.gruppenrahmen__griff--bl { bottom: -8px; left: -8px; cursor: nesw-resize; }
.gruppenrahmen__griff--br { bottom: -8px; right: -8px; cursor: nwse-resize; }

.gruppenrahmen__drehen {
  top: -33px;
  left: 50%;
  transform: translateX(-50%);
  cursor: grab;
}

.gruppenrahmen--dreh-unten .gruppenrahmen__drehen {
  top: auto;
  bottom: -33px;
}

body.fingerbedienung .gruppenrahmen__griff::before,
body.fingerbedienung .gruppenrahmen__drehen::before {
  content: "";
  position: absolute;
  inset: -15px;
  border-radius: 14px;
}

body.fingerbedienung .gruppenrahmen__drehen {
  top: -67px;
}

body.fingerbedienung .gruppenrahmen--dreh-unten .gruppenrahmen__drehen {
  top: auto;
  bottom: -67px;
}

/* Ebenen-Liste: Kopfzeile einer Gruppe, darunter eingerueckt ihre Mitglieder. */
.layer-gruppe {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.2rem;
}

.layer-gruppe.selected {
  border-color: var(--accent);
  background: rgba(216, 153, 4, 0.16);
}

.layer-gruppe button {
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 0.35rem 0.3rem;
  font-size: 0.95rem;
  font-weight: 600;
  min-height: 40px;
}

.layer-gruppe button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

.layer-gruppe button:disabled {
  opacity: 0.3;
  cursor: default;
}

.layer-gruppe button.layer-item__griff {
  min-width: 28px;
  padding: 0.35rem 0.2rem;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  font-size: 1.05rem;
  letter-spacing: -1px;
}

.layer-gruppe__klappe {
  flex: 0 0 auto;
  min-width: 32px;
}

.layer-gruppe__main {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.layer-gruppe__loesen {
  flex: 0 0 auto;
  color: var(--muted);
}

.layer-item--mitglied {
  margin-left: 0.7rem;
  border-left: 3px solid rgba(216, 153, 4, 0.55);
}

/* Text-Vorlagen: Karten mit der Vorlage in Schrift und Farbe des Layouts. */
.text-vorlagen__dialog {
  width: min(92vw, 880px);
}

.text-vorlagen__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.75rem;
}

.text-vorlage {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  text-align: left;
}

.text-vorlage:hover,
.text-vorlage:focus-visible {
  border-color: var(--accent);
  background: rgba(216, 153, 4, 0.1);
}

.text-vorlage:active {
  transform: none;
}

.text-vorlage__bild {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 130px;
  border-radius: 8px;
  overflow: hidden;
  line-height: 1.15;
}

.text-vorlage__zeile {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

.text-vorlage__linie {
  display: block;
  flex: 0 0 auto;
}

.text-vorlage__name {
  font-size: 0.9rem;
  font-weight: 600;
}

/* "Aa" ist breiter als die anderen Sinnbilder der Einfuegen-Leiste. */
#add-text-template .einfuege-knopf__symbol {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* Palette neben jedem Farbfeld - wie die Pipette. */
.color-field__palette {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

.color-field__palette:hover {
  background: rgba(255, 255, 255, 0.14);
}

.color-field__palette svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.color-field:has(> input[type="color"]:disabled) > .color-field__palette {
  opacity: 0.45;
  pointer-events: none;
}

/* Kleines Fenster mit den Farben des Layouts und seiner Bilder. Es liegt ueber
   Dialogen (die Farbfelder darin haben es auch). */
.farbpalette {
  position: fixed;
  z-index: 2100;
  width: min(272px, calc(100vw - 16px));
  padding: 8px 10px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.farbpalette__titel {
  margin: 4px 0 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.farbpalette__reihe {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}

.farbpalette__farbe {
  aspect-ratio: 1;
  min-height: 0;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 7px;
}

.farbpalette__farbe:hover,
.farbpalette__farbe:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.farbpalette__farbe:active {
  transform: none;
}

.farbpalette__farbe.is-aktuell {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

.farbpalette__leer {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.82rem;
}

.farbpalette__weitere {
  width: 100%;
  margin-top: 10px;
}

body.fingerbedienung .farbpalette__reihe {
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}

/* Farbthema: Karten mit Hintergrund, Titel- und Textfarbe des Themas. */
.farbthema__themen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 0.5rem;
}

.farbthema__thema {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  text-align: left;
}

.farbthema__thema:active {
  transform: none;
}

.farbthema__thema[aria-pressed="true"] {
  border-color: var(--accent);
  background: rgba(216, 153, 4, 0.14);
}

.farbthema__probe {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  height: 52px;
  padding-top: 6px;
  border-radius: 7px;
  overflow: hidden;
}

.farbthema__probe-titel {
  font-size: 1.6rem;
  line-height: 1.2;
}

.farbthema__probe-text {
  font-size: 0.95rem;
}

.farbthema__probe-linie {
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: 8px;
  height: 2px;
}

.farbthema__name {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}

.farbthema__farben {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.farbthema__farbe {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.farbthema__anzahl {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

/* Bildplatz mit eigener Form, Zoom oder Filter: Das Foto liegt in einer eigenen,
   maskierten Ebene unter Nummer und Griffen. Die Huelle traegt den Schatten - auf
   der maskierten Ebene selbst schnitte die Maske ihn wieder weg. */
.placeholder__huelle {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.placeholder__form,
.placeholder__rand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Der Kasten zeigt bei eigener Form nur noch, wenn er gewaehlt ist, sein Rechteck. */
.placeholder.placeholder--umriss:not(.selected):not(.is-anchor) {
  border-color: transparent !important;
}

.bildplatz-form-block h4 {
  margin: 0.4rem 0 0.2rem;
}

.bildplatz-form-block output {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-left: 0.4rem;
}

/* Ausschnitt waehlen: das ganze Beispielfoto, darauf der sichtbare Teil als Rahmen. */
.fokusfeld {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.06);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: crosshair;
  touch-action: none;
}

.fokusfeld__rahmen {
  position: absolute;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.fokus-regler {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 0.6rem;
  align-items: center;
}

/* Web-Modus: Impressum und Datenschutz, immer sichtbar, unten links klein -
   dort endet die Werkzeugleiste, rechts laege die Leiste ueber Eingabefeldern. */
.web-rechtliches {
  position: fixed;
  left: 8px;
  bottom: 6px;
  /* ueber Leinwand und Lineal, unter Menues (70) und Dialogen */
  z-index: 60;
  display: flex;
  gap: 12px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.72);
  font-size: 12px;
  line-height: 1.6;
}

.web-rechtliches a {
  color: #e2e8f0;
  text-decoration: none;
}

.web-rechtliches a:hover,
.web-rechtliches a:focus-visible {
  text-decoration: underline;
}