:root {
  --bg: #0e0e12;
  --panel: #16161c;
  --panel-2: #1d1d25;
  --panel-3: #24242e;
  --line: #2a2a35;
  --text: #ececf1;
  --muted: #8d8d9c;
  --accent: #8b5cf6;
  --accent-2: #a78bfa;
  --ok: #34d399;
  --warn: #fbbf24;
  --error: #f87171;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 13px/1.45 Inter, 'Segoe UI', system-ui, sans-serif; overflow: hidden; }
button { font: inherit; color: inherit; }

/* Größen der Bereiche – per Ziehen an den Grenzen änderbar */
.editor {
  --left-w: 280px; --right-w: 330px; --timeline-h: 240px;
  display: grid; grid-template-rows: 52px minmax(0, 1fr) var(--timeline-h); height: 100vh; min-width: 1100px;
}

.splitter { position: absolute; z-index: 30; touch-action: none; }
.splitter::after { content: ''; position: absolute; background: var(--accent); opacity: 0; transition: opacity .12s; }
.splitter:hover::after, .splitter.active::after { opacity: 1; }
.splitter.col { top: 0; bottom: 0; width: 9px; cursor: col-resize; }
.splitter.col::after { top: 0; bottom: 0; left: 3px; width: 3px; }
.splitter.left { left: calc(var(--left-w) - 5px); }
.splitter.right { right: calc(var(--right-w) - 4px); }
.splitter.row { left: 0; right: 0; top: -5px; height: 9px; cursor: row-resize; }
.splitter.row::after { left: 0; right: 0; top: 3px; height: 3px; }
body.resizing-col, body.resizing-col * { cursor: col-resize !important; user-select: none; }
body.resizing-row, body.resizing-row * { cursor: row-resize !important; user-select: none; }

/* Kopfzeile */
.ed-top { display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.ed-brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none; }
.ed-brand img { width: 24px; height: 24px; }
.ed-crumb { color: var(--line); font-size: 18px; }
.ed-module { display: flex; align-items: center; gap: 8px; margin-right: 8px; font-weight: 600; }
.tile {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  background: var(--tile, var(--accent)); color: #111; font-size: 10px; font-weight: 800;
}
#designSelect { width: 200px; }
.ed-spacer { flex: 1; }
.ed-status { display: flex; align-items: center; gap: 7px; max-width: 280px; padding: 0 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--muted); }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(52, 211, 153, .15); }
.dot.warn { background: var(--warn); }
.dot.error { background: var(--error); }

/* Grundelemente */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2); color: var(--text); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--panel-3); border-color: #3a3a48; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); border-color: transparent; color: #fff; }
.btn.primary:hover { background: #7c4def; }
.btn.primary.dirty { box-shadow: 0 0 0 3px rgba(139, 92, 246, .35); }
.btn.small { height: 28px; padding: 0 10px; font-size: 12px; }
.btn.ghost { background: transparent; }
.btn .icon { width: 15px; height: 15px; }

.icon-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer;
}
.icon-btn:hover { background: var(--panel-3); color: var(--text); }
.icon-btn.disabled { opacity: .25; pointer-events: none; }
.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon.filled { fill: currentColor; stroke: none; }

.in {
  width: 100%; height: 30px; min-width: 0; padding: 0 9px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; color: var(--text); font: inherit;
}
textarea.in { height: auto; padding: 7px 9px; resize: vertical; font-family: Consolas, monospace; font-size: 12.5px; }
.in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, .2); }
.in.color { width: 44px; padding: 2px; cursor: pointer; }
.in.mono { font-family: Consolas, monospace; font-size: 12px; }
select.in { padding: 0 2px 0 7px; }
.grid2 select.in { font-size: 12px; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.hint { margin: 6px 0; color: var(--muted); font-size: 12px; }
.hint.pad { padding: 0 14px; }
.empty { margin: 8px 0; padding: 14px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 12px; text-align: center; }
.chip { padding: 0 6px; border-radius: 99px; background: rgba(139, 92, 246, .16); color: var(--accent-2); font-size: 10.5px; font-weight: 600; }

.seg { display: inline-flex; padding: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; }
.seg button { padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.seg button[aria-pressed=true] { background: var(--panel-3); color: var(--text); }

.toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12.5px; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .switch { position: relative; width: 32px; height: 18px; border-radius: 9px; background: var(--line); transition: background .15s; }
.toggle .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle input:checked + .switch { background: var(--accent); }
.toggle input:checked + .switch::after { transform: translateX(14px); }
.toggle input:focus-visible + .switch { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Hauptbereich */
.ed-main { position: relative; display: grid; grid-template-columns: var(--left-w) minmax(0, 1fr) var(--right-w); min-height: 0; }
.ed-left, .ed-right { min-height: 0; overflow-x: hidden; overflow-y: auto; background: var(--panel); }
.ed-left { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.ed-right { border-left: 1px solid var(--line); }

.ed-tabs { display: flex; gap: 0; padding: 8px 8px 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.ed-tabs button { flex: 1 1 auto; min-width: 0; padding: 8px 2px 9px; font-size: 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ed-tabs .tab-dot { display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--dot); vertical-align: 2px; }
.ed-tabs button[aria-selected=true] { color: var(--text); border-bottom-color: var(--accent); }
.ed-panel { padding: 10px; }
.ed-panel.settings-panel { padding: 0; }
.ed-panel h4 { margin: 12px 2px 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.add-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(120px, calc((100% - 18px) / 4)), 1fr)); gap: 6px; margin-bottom: 10px; } /* 2 bis höchstens 4 pro Reihe */
.btn.add { justify-content: flex-start; }
.layer-list { display: grid; gap: 2px; user-select: none; -webkit-user-select: none; }
/* Ebenen ziehen (Liste und Timeline-Namen): Linie zeigt, wo die Ebene landet */
.layer-item.dragging, .tl-label.dragging { opacity: .45; }
.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
body.dragging-layer, body.dragging-layer * { cursor: grabbing !important; user-select: none; }
.layer-item { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 8px; border-radius: 7px; cursor: pointer; }
.layer-item:hover { background: var(--panel-2); }
.layer-item.selected { background: rgba(139, 92, 246, .16); }
.layer-item.off .layer-name { color: var(--muted); text-decoration: line-through; }
.layer-icon { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 6px; background: var(--panel-3); color: var(--accent-2); }
.layer-icon .icon { width: 14px; height: 14px; }
.layer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-actions { display: flex; opacity: 0; }
.layer-item:hover .layer-actions, .layer-item.selected .layer-actions { opacity: 1; }
.layer-actions .icon-btn { width: 24px; height: 24px; }
.layer-actions .icon { width: 14px; height: 14px; }

#varSearch { margin-bottom: 4px; }
.var-search { display: flex; gap: 6px; }
.var-search #varSearch { flex: 1; min-width: 0; }
.var-code-toggle { flex: none; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--muted); font: 600 12px ui-monospace, Consolas, monospace; cursor: pointer; }
.var-code-toggle:hover { color: var(--text); }
.var-code-toggle[aria-pressed="true"] { border-color: var(--accent); background: rgba(139, 92, 246, .2); color: var(--text); }
.var-group h4 { margin-top: 14px; }
.var-item {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px;
  width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; text-align: left; cursor: pointer;
}
.var-item:hover { background: var(--panel-2); }
.var-item code { grid-row: 1; color: var(--accent-2); font: 12px Consolas, monospace; }
.var-label { grid-row: 1; color: var(--muted); font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.var-value { grid-column: 1 / -1; color: var(--text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.var-value.example { color: var(--muted); font-style: italic; }
.swatch { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }

.media-head { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.media-head h4 { margin: 0 2px; }
.media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.media-item {
  position: relative; aspect-ratio: 1; padding: 6px; border: 1px solid var(--line); border-radius: 8px; cursor: grab;
  background: repeating-conic-gradient(#20202a 0% 25%, #191920 0% 50%) 50% / 14px 14px;
}
.media-item:hover { border-color: var(--accent); }
.media-item img, .media-item video { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.media-badge { position: absolute; left: 4px; bottom: 4px; padding: 0 5px; border-radius: 4px; background: rgba(0, 0, 0, .7); font-size: 10px; }
.media-del { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; background: rgba(0, 0, 0, .6); opacity: 0; }
.media-item:hover .media-del { opacity: 1; }
.media-current { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.media-current img, .media-current video { width: 64px; height: 64px; object-fit: contain; border-radius: 6px; background: var(--panel-2); }

/* Leinwand */
.ed-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ed-canvasbar { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--line); background: var(--panel); }
.ed-canvasbar > * { flex-shrink: 0; }
.ed-canvasbar .ed-spacer, .ed-canvasbar .ed-banner { flex-shrink: 1; min-width: 0; }
.ed-banner { max-width: 60%; padding: 3px 10px; border-radius: 99px; background: rgba(251, 191, 36, .12); color: var(--warn); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#zoomLabel { min-width: 58px; }
.ed-viewport {
  position: relative; flex: 1; display: grid; place-items: center; overflow: auto;
  background: repeating-conic-gradient(#17171d 0% 25%, #121217 0% 50%) 50% / 20px 20px;
}
.ed-viewport.drop { outline: 2px dashed var(--accent); outline-offset: -8px; }
.ed-frame { position: relative; box-shadow: 0 0 0 1px rgba(139, 92, 246, .55), 0 10px 40px rgba(0, 0, 0, .4); }
#stage { transform-origin: 0 0; }
#stage .sh-layer { cursor: move; }
.ed-selection { position: absolute; border: 1.5px solid var(--accent); pointer-events: none; transform-origin: center; }
.handle { position: absolute; width: 10px; height: 10px; margin: -5px; border: 1.5px solid var(--accent); border-radius: 2px; background: #fff; pointer-events: auto; }
.handle.nw { left: 0; top: 0; cursor: nwse-resize; }
.handle.n { left: 50%; top: 0; cursor: ns-resize; }
.handle.ne { left: 100%; top: 0; cursor: nesw-resize; }
.handle.e { left: 100%; top: 50%; cursor: ew-resize; }
.handle.se { left: 100%; top: 100%; cursor: nwse-resize; }
.handle.s { left: 50%; top: 100%; cursor: ns-resize; }
.handle.sw { left: 0; top: 100%; cursor: nesw-resize; }
.handle.w { left: 0; top: 50%; cursor: ew-resize; }
.crop-edge { position: absolute; background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, .7); pointer-events: none; }
.crop-edge.l { left: -2.5px; top: 0; bottom: 0; width: 4px; }
.crop-edge.r { right: -2.5px; top: 0; bottom: 0; width: 4px; }
.crop-edge.t { top: -2.5px; left: 0; right: 0; height: 4px; }
.crop-edge.b { bottom: -2.5px; left: 0; right: 0; height: 4px; }
.cut-l .handle.w, .cut-r .handle.e, .cut-t .handle.n, .cut-b .handle.s { border-color: #ef4444; background: #fecaca; }
.handle.rot { left: 50%; top: -28px; width: 14px; height: 14px; margin: -7px; border-radius: 50%; cursor: grab; }
.handle.rot:active { cursor: grabbing; }
.ed-selection::before {
  content: ''; position: absolute; left: 50%; top: -28px; width: 1.5px; height: 28px;
  background: var(--accent); transform: translateX(-50%);
}
.guide { position: absolute; pointer-events: none; background: #f472b6; }
.grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(167, 139, 250, .22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(167, 139, 250, .22) 1px, transparent 1px);
}
.grid-tools { display: flex; align-items: center; gap: 6px; margin-left: 14px; }
.grid-tools .in.small { width: 58px; height: 28px; }
.grid-tools .seg button { padding: 3px 8px; }
#gridBtn[aria-pressed=true] { background: rgba(139, 92, 246, .25); border-color: var(--accent); color: var(--text); }
.guide.gx { top: 0; bottom: 0; width: 1px; }
.guide.gy { left: 0; right: 0; height: 1px; }

/* Eigenschaften */
.props-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.props-head h3 { margin: 0; font-size: 14px; }
.props-head .in.name { font-weight: 600; }
.prop-section { padding: 10px 14px 14px; border-bottom: 1px solid var(--line); }
.prop-section h4 { margin: 2px 0 10px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.prop-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 7px; }
.prop-row label { color: var(--muted); font-size: 12px; }
.prop-controls { display: flex; align-items: center; gap: 6px; min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
.grid2 .prop-row { grid-template-columns: 58px minmax(0, 1fr); }
.toggles { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0 10px; }
.trim { position: relative; height: 34px; margin: 6px 7px 10px; border-radius: 6px; background: repeating-linear-gradient(90deg, #262633 0 6px, #20202b 6px 12px); }
.trim-range { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: rgba(139, 92, 246, .45); border: 2px solid var(--accent); }
.trim-handle {
  position: absolute; top: -4px; bottom: -4px; width: 12px; margin-left: -6px; border-radius: 4px;
  background: #fff; box-shadow: 0 0 0 2px var(--accent); cursor: ew-resize; touch-action: none;
}
.trim-handle::after { content: ''; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; background: var(--accent); }
.trim-actions { display: flex; gap: 6px; margin-top: 10px; }
.sources { display: grid; gap: 6px; margin: 8px 0 10px; }
.source { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 8px; background: var(--panel-2); }
.source-title { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.source-name { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-title small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source .tile, .source .dot { flex: none; }
.source .icon-btn { width: 24px; height: 24px; }
/* Datenquelle: was die Vorlage daraus nutzt */
.source-count { flex: none; height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: 11px; background: transparent; color: var(--text); font: inherit; font-size: 11px; cursor: pointer; }
.source-count:hover, .source-count[aria-expanded="true"] { border-color: var(--accent); }
.source-count.none { color: var(--muted); }
.source-usage { display: grid; gap: 4px; margin: 4px 0 2px 30px; }
.source-use { display: grid; gap: 2px; padding: 6px 8px; border: 0; border-radius: 6px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 12px; text-align: left; }
.source-use span { color: var(--muted); overflow-wrap: anywhere; }
.source-use.jump { cursor: pointer; }
.source-use.jump:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.tile.small { width: 22px; height: 22px; border-radius: 6px; font-size: 8.5px; }
.tile.has-icon { overflow: hidden; padding: 0; background: none; box-shadow: none; }
.tile.has-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cond { display: grid; gap: 6px; margin-bottom: 8px; padding: 8px; border-radius: 8px; background: var(--panel-2); }
.cond-line { display: grid; grid-template-columns: 110px minmax(0, 1fr) 30px; gap: 6px; }
/* Bedingung: aktueller Wert der Variable als Format-Beispiel – Klick übernimmt ihn */
.cond-now { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cond-now-value { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 8px; border: 1px dashed var(--line); border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer; }
.cond-now-value:hover { border-color: var(--accent); color: var(--text); }
.cond-now-value code { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Timeline */
.ed-timeline { position: relative; display: grid; grid-template-rows: 40px minmax(0, 1fr); background: var(--panel); border-top: 1px solid var(--line); min-height: 0; }
.tl-toolbar { display: flex; align-items: center; gap: 12px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.tl-toolbar .icon-btn { color: var(--text); background: var(--panel-2); }
.tl-time { min-width: 110px; font: 12.5px Consolas, monospace; }
.tl-loop { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.tl-loop .in { width: 70px; }
.tl-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 0; overflow-x: hidden; overflow-y: auto; user-select: none; -webkit-user-select: none; }
.tl-labels { border-right: 1px solid var(--line); }
.tl-ruler-spacer, .tl-ruler { height: 24px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.tl-label { display: flex; align-items: center; gap: 8px; height: var(--tl-row, 38px); padding: 0 10px 0 2px; color: var(--muted); cursor: pointer; white-space: nowrap; overflow: hidden; }
.tl-label span { overflow: hidden; text-overflow: ellipsis; }
.tl-label .icon { width: 13px; height: 13px; flex: none; }
.tl-label.selected { color: var(--text); background: rgba(139, 92, 246, .12); }
.tl-right { position: relative; padding-right: 12px; }
.tl-ruler { cursor: ew-resize; }
.tick { position: absolute; top: 0; height: 100%; padding: 4px 0 0 4px; border-left: 1px solid var(--line); color: var(--muted); font-size: 10.5px; }
.tl-lane { position: relative; height: var(--tl-row, 38px); border-bottom: 1px solid rgba(42, 42, 53, .5); }
.tl-lane.selected { background: rgba(139, 92, 246, .08); }
.tl-bar {
  position: absolute; top: calc(var(--tl-row, 38px) * .16); height: calc(var(--tl-row, 38px) * .68); overflow: hidden; display: flex; align-items: center; justify-content: center;
  border-radius: 5px; background: rgba(139, 92, 246, .55); border: 1px solid var(--accent); color: #fff; font-size: 11px; cursor: grab; user-select: none;
}
.tl-lane.selected .tl-bar { background: rgba(139, 92, 246, .8); }
.tl-bar.always { left: 0; right: 0; background: repeating-linear-gradient(135deg, rgba(139, 92, 246, .16) 0 8px, rgba(139, 92, 246, .08) 8px 16px); border-color: rgba(139, 92, 246, .35); color: var(--muted); cursor: default; }
/* Töne (Audio-Ebenen) blau */
.tl-bar.audio { background: rgba(59, 130, 246, .55); border-color: #3b82f6; }
.tl-lane.selected .tl-bar.audio { background: rgba(59, 130, 246, .8); }
.tl-bar.audio.always { background: repeating-linear-gradient(135deg, rgba(59, 130, 246, .16) 0 8px, rgba(59, 130, 246, .08) 8px 16px); border-color: rgba(59, 130, 246, .35); }
.bar-label { position: relative; white-space: nowrap; pointer-events: none; }
.fade { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.fade.in { left: 0; background: linear-gradient(90deg, rgba(14, 14, 18, .7), transparent); }
.fade.out { right: 0; background: linear-gradient(270deg, rgba(14, 14, 18, .7), transparent); }
.edge { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.edge.l { left: 0; }
.edge.r { right: 0; }
.edge:hover { background: rgba(255, 255, 255, .3); }
.tl-playhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #f472b6; pointer-events: none; z-index: 3; }
.tl-playhead::before { content: ''; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top-color: #f472b6; }

/* Dialoge & Meldungen */
.ed-dialog { width: min(720px, calc(100vw - 32px)); padding: 0 20px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); }
.ed-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.dialog-head h3 { margin: 0; font-size: 16px; }
.templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tpl { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); text-align: left; cursor: pointer; }
.tpl:hover { border-color: var(--accent); }
.tpl-frame { display: grid; place-items: center; height: 120px; margin-bottom: 6px; overflow: hidden; border-radius: 7px; background: repeating-conic-gradient(#20202a 0% 25%, #191920 0% 50%) 50% / 14px 14px; font-size: 28px; }
.tpl-preview { position: relative; overflow: hidden; }
.link-row { display: flex; gap: 8px; }
.steps { margin: 16px 0 8px; padding-left: 20px; color: var(--muted); }
.steps li + li { margin-top: 4px; }
.steps strong { color: var(--text); }

.toast {
  position: fixed; left: 50%; bottom: 256px; z-index: 50; max-width: 520px; padding: 9px 16px; transform: translateX(-50%);
  border: 1px solid var(--line); border-radius: 10px; background: #23232d; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.toast.error { border-color: rgba(248, 113, 113, .45); background: #2a1a1d; color: #fecaca; }
.test-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.module-settings .field { display: grid; gap: 6px; margin-bottom: 12px; }
.module-settings .field > label:not(.toggle) { color: var(--muted); font-size: 12px; font-weight: 600; }
.module-settings textarea { width: 100%; box-sizing: border-box; font-family: Consolas, monospace; font-size: 12.5px; resize: vertical; }
.module-settings .field .hint { margin: 0; }
.field-actions { display: flex; align-items: center; gap: 10px; }
.trigger-card { display: grid; gap: 2px; margin-bottom: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.trigger-card.active { border-color: var(--accent); }
.trigger-head { display: flex; gap: 6px; margin-bottom: 6px; }
.trigger-head .in.name { flex: 1; font-weight: 700; }
.trigger-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.chip.trigger { background: rgba(250, 204, 21, .14); color: #fde047; }
.trigger-card .grid2 { grid-template-columns: 1fr; }
.trigger-card .prop-row, .trigger-card .grid2 .prop-row { grid-template-columns: 74px minmax(0, 1fr); }
.media-audio { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; width: 100%; height: 100%; padding: 8px; box-sizing: border-box; }
.media-audio audio { display: none; }

/* Mehrfachauswahl und Auswahlrahmen */
.ed-multi { position: absolute; border: 1px dashed var(--accent); pointer-events: none; transform-origin: center; }
.ed-selection.group .handle { display: none; }
.ed-marquee { position: absolute; border: 1px solid var(--accent); background: rgba(139, 92, 246, .12); pointer-events: none; z-index: 5; }
.align-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.btn.small.danger { color: #fca5a5; }
.auto-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }

/* Timeline: Zoom und Keyframe-Spuren */
.tl-zoom { display: flex; align-items: center; gap: 2px; }
.tl-right { overflow: hidden; }
.tl-caret { width: 16px; flex: none; padding: 0; border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
.tl-caret.has { color: var(--accent-2); }
.tl-count { margin-left: auto; color: var(--accent-2); font-size: 10.5px; }
.tl-autolabel { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 8px 4px 22px; border-bottom: 1px solid rgba(42, 42, 53, .5); background: rgba(139, 92, 246, .04); font-size: 11.5px; box-sizing: border-box; }
.tl-autolabel.add { height: 28px; }
.tl-autohead { display: flex; align-items: center; gap: 4px; }
.tl-autohead b { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-mini { width: 20px; height: 18px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: none; color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer; }
.tl-mini:hover { color: var(--text); border-color: var(--accent); }
.in.tiny { height: 20px; padding: 0 4px; font-size: 11px; }
.tl-autopoint { display: flex; align-items: center; gap: 3px; }
.tl-autopoint .in.tiny { width: 52px; }
.tl-autopoint small { color: var(--muted); }
.tl-autolane { position: relative; border-bottom: 1px solid rgba(42, 42, 53, .5); background: rgba(139, 92, 246, .04); box-sizing: border-box; }
.tl-autolane.add { height: 28px; }
.tl-autosvg { position: absolute; left: 0; top: 0; overflow: visible; cursor: crosshair; }
.tl-autosvg .clip { fill: rgba(139, 92, 246, .07); }
.tl-autosvg .area { fill: rgba(139, 92, 246, .14); pointer-events: none; }
.tl-autosvg .curve { fill: none; stroke: var(--accent-2, #a78bfa); stroke-width: 2; pointer-events: none; }
.tl-autosvg .pt { fill: #fff; stroke: var(--accent); stroke-width: 2; cursor: grab; }
.tl-autosvg .pt.sel { fill: #f472b6; stroke: #fff; }
.tl-autosvg .mid { fill: #fff; opacity: 0; stroke: var(--accent); stroke-width: 1; cursor: ns-resize; transition: opacity .12s; }
.tl-autolane:hover .mid { opacity: .45; }
.tl-autosvg .mid:hover { opacity: .9; }
.tl-autosvg .dial-label { fill: var(--muted); font-size: 10px; }
/* Abschnitte einer Automation: Leiste oben wie der Balken einer Ebene, rechter Rand zum Kürzen/Verlängern */
.tl-autosvg .clip-bar { fill: var(--track, #facc15); fill-opacity: .55; cursor: grab; }
.tl-autosvg .clip-bar.full { fill-opacity: .18; cursor: default; }
.tl-autosvg .clip-bar:hover { fill-opacity: .8; }
.tl-autosvg .clip-bar.full:hover { fill-opacity: .3; }
.tl-autosvg .clip-edge { fill: transparent; cursor: ew-resize; }
.tl-autosvg .clip-edge:hover { fill: var(--track, #facc15); fill-opacity: .3; }
.tl-autosvg .pt.copy { fill-opacity: .55; }
.tl-dupno { color: var(--muted); font-weight: 600; }
/* Punkt-Menü (Rechtsklick auf einen Keyframe) und Auswahl der Verbindungsart daneben */
.pt-menu-wrap { position: fixed; z-index: 1100; }
.pt-menu, .pt-submenu { display: grid; min-width: 190px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 12px 34px rgba(0, 0, 0, .55); }
.pt-menu-head { padding: 4px 8px 6px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.pt-menu-value { display: flex; align-items: center; gap: 8px; padding: 2px 8px 6px; font-size: 12.5px; }
.pt-menu-value span { flex: 1; }
.pt-menu-value .in.tiny { width: 76px; }
.pt-menu-value small { color: var(--muted); font-size: 11px; }
.pt-menu hr { width: 100%; height: 1px; margin: 4px 0; border: 0; background: var(--line); }
.pt-menu-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.pt-menu-item > span { flex: 1; }
.pt-menu-item small { color: var(--muted); font-size: 11px; }
.pt-menu-item:hover:not([disabled]), .pt-menu-item.open { background: rgba(139, 92, 246, .16); }
.pt-menu-item[disabled] { color: var(--muted); cursor: default; }
.pt-menu-item.danger { color: #fca5a5; }
.pt-menu-item.danger:hover { background: rgba(239, 68, 68, .16); }
.pt-submenu { position: absolute; left: calc(100% + 6px); top: 0; min-width: 170px; }
.pt-submenu.left { left: auto; right: calc(100% + 6px); }
.pt-menu-item.mode.on { background: rgba(139, 92, 246, .26); }
.curve-icon { width: 40px; height: 20px; flex: none; padding: 2px; border-radius: 4px; background: var(--panel-2); }
.curve-icon path { fill: none; stroke: var(--accent-2, #a78bfa); stroke-width: 1.6; stroke-linejoin: round; }
.tl-autosvg .dial-now { stroke: #22c55e; stroke-dasharray: 3 3; }
/* Aufklapp-Pfeil: große Klickfläche über die ganze Zeilenhöhe */
.tl-caret { width: 28px; height: calc(var(--tl-row, 38px) * .85); flex: none; border-radius: 6px; font-size: 14px; }
.tl-caret:hover { background: rgba(139, 92, 246, .18); color: var(--text); }
.tl-label .icon { width: 15px; height: 15px; }
.tl-label span { font-size: 13px; }
.tl-autolabel { padding-left: 32px; }

/* Keyframe-Spuren: eigene Farbe (Standard gelb) und anwählbar */
.tl-autolabel { cursor: pointer; border-left: 3px solid var(--track, #facc15); }
.tl-autolabel.sel, .tl-autolane.sel { background: color-mix(in srgb, var(--track, #facc15) 14%, transparent); }
.tl-autolabel.sel { box-shadow: inset 0 0 0 1px var(--track, #facc15); }
.tl-autolane.sel { box-shadow: inset 0 1px 0 var(--track, #facc15), inset 0 -1px 0 var(--track, #facc15); }
.tl-color { width: 18px; height: 18px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; cursor: pointer; flex: none; }
.tl-color::-webkit-color-swatch-wrapper { padding: 0; }
.tl-color::-webkit-color-swatch { border: 0; border-radius: 3px; }
.tl-autosvg .area { fill: var(--track, #facc15); fill-opacity: .16; }
.tl-autosvg .curve { stroke: var(--track, #facc15); }
.tl-autosvg .pt { stroke: var(--track, #facc15); }
.tl-autosvg .mid { stroke: var(--track, #facc15); }
.tl-autosvg .pt.sel { fill: var(--track, #facc15); stroke: #fff; }

/* Linien im Lineal greifen: Zeit einfügen; gestreckte Töne rot */
.tick-grip { position: absolute; left: -5px; top: 0; bottom: 0; width: 9px; z-index: 1; pointer-events: none; }
/* Nur solange Alt gedrückt ist, lassen sich die Linien greifen */
body.alt-held .tick-grip { pointer-events: auto; cursor: ew-resize; }
body.alt-held .tick-grip:hover { background: linear-gradient(90deg, transparent 3px, #facc15 3px, #facc15 6px, transparent 6px); }
.tl-stretch { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #facc15; pointer-events: none; z-index: 4; }
.tl-stretch::after { content: attr(data-label); position: absolute; top: 2px; left: 6px; padding: 1px 5px; border-radius: 4px; background: #facc15; color: #111; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.tl-bar.stretched, .tl-lane.selected .tl-bar.stretched { background: rgba(239, 68, 68, .6); border-color: #ef4444; }
.tl-reset { margin-left: auto; width: 24px; height: 22px; padding: 0; border: 1px solid #ef4444; border-radius: 6px; background: rgba(239, 68, 68, .15); color: #fca5a5; font-size: 13px; cursor: pointer; flex: none; }
.tl-reset:hover { background: rgba(239, 68, 68, .35); color: #fff; }

/* Alt gedrückt: roter Zeiger nur über dem Lineal mit den Sekunden – dort fügt Ziehen jetzt Zeit ein */
body.alt-held .tl-ruler, body.alt-held .tl-ruler * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%202l14%209-6%201.5L9%2019z%22%20fill%3D%22%23ef4444%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 4 2, default; }
body.alt-held .tick-grip { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2228%22%20height%3D%2224%22%20viewBox%3D%220%200%2028%2024%22%3E%3Cpath%20d%3D%22M2%2012l6-6v4h12V6l6%206-6%206v-4H8v4z%22%20fill%3D%22%23ef4444%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 14 12, ew-resize; }

/* Auswahlrahmen in der Timeline (Alt + ziehen) */
.tl-marquee { position: absolute; border: 1px solid var(--accent); background: rgba(139, 92, 246, .14); pointer-events: none; z-index: 5; }
.tl-lane.marked { background: rgba(139, 92, 246, .14); }
.tl-lane.marked .tl-bar { box-shadow: 0 0 0 2px #fff; }
/* Gruppen in der Timeline: eigene Zeile mit Balken über die Zeit ihrer Ebenen, Ebenen darunter eingerückt */
.tl-label.tl-group { color: var(--text); font-weight: 600; background: rgba(255, 255, 255, .08); }
.tl-label.tl-group.selected { background: rgba(139, 92, 246, .16); }
.tl-group-toggle { display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 1px solid transparent; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; }
.tl-group-toggle:hover { border-color: var(--line); color: var(--text); }
.tl-group-toggle.on { color: var(--accent-2, #a78bfa); background: rgba(139, 92, 246, .16); }
.tl-label.in-group { padding-left: 26px; box-shadow: inset 20px 0 0 -18px rgba(139, 92, 246, .55); }
.tl-group-lane { background: rgba(255, 255, 255, .03); cursor: pointer; }
.tl-group-lane.selected { background: rgba(139, 92, 246, .1); }
/* Gruppen-Balken: wie die anderen, nur etwas heller/grauer */
.tl-bar.group { background: repeating-linear-gradient(135deg, rgba(200, 195, 220, .26) 0 8px, rgba(200, 195, 220, .14) 8px 16px); border-color: rgba(200, 195, 220, .4); color: var(--muted); cursor: pointer; }
.tl-bar.group.always { background: repeating-linear-gradient(135deg, rgba(200, 195, 220, .14) 0 8px, rgba(200, 195, 220, .07) 8px 16px); border-color: rgba(200, 195, 220, .3); }
.tl-group-lane.selected .tl-bar.group { background: repeating-linear-gradient(135deg, rgba(200, 195, 220, .38) 0 8px, rgba(200, 195, 220, .22) 8px 16px); color: var(--text); }
.tl-group-lane.selected .tl-bar.group.always { background: repeating-linear-gradient(135deg, rgba(200, 195, 220, .24) 0 8px, rgba(200, 195, 220, .12) 8px 16px); }
/* Spurbereich reicht bis ganz nach unten – dort beginnt auch der Alt-Rahmen */
.tl-body { align-content: stretch; }
.tl-right { min-height: 100%; }

/* Zufallsgeneratoren im Einstellungs-Tab */
.rnd-list { display: grid; gap: 8px; }
.rnd { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rnd-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255, 255, 255, .03); cursor: pointer; }
.rnd-head small { flex: 1; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rnd-body { display: grid; gap: 6px; padding: 8px; }
.rnd-entries { display: grid; gap: 4px; max-height: 300px; overflow-y: auto; }
.rnd-entry { display: grid; grid-template-columns: minmax(0, 1fr) 96px 44px 22px; gap: 4px; align-items: center; }
.rnd-share { color: var(--muted); font-size: 10.5px; text-align: right; }
.rnd-actions { display: flex; flex-wrap: wrap; gap: 4px; }
/* Die Editor-Seite selbst scrollt nie: sonst schiebt der Browser beim Anklicken von Feldern (z. B. „Immer
   sichtbar“) die ganze Seite nach oben und nur noch die Timeline ist zu sehen. Gescrollt wird nur in den Bereichen. */
html, body { overflow: clip; }

/* Tab „Ventoview“: Bot-Elemente */
/* .bot-add: wie die Ebenen-Knöpfe 2 bis 4 pro Reihe */
.bot-icon { display: inline-grid; place-items: center; width: 18px; font-size: 14px; }
.bot-icon.big { width: 26px; font-size: 20px; }
.bot-title { flex: 1; font-size: 15px; }
.bot-item .layer-name { font-weight: 600; }
.bot-multi { flex-wrap: wrap; }
.bot-status { margin-top: 10px; }

/* Zufallsgeneratoren als Kinder eines Befehls */
.hint.warn-hint { color: #fbbf24; }

/* Generatoren in der Liste: eingerückt unter ihrem Element, ziehbar */
.bot-item.gen-item.child { margin-left: 22px; border-left: 2px solid #f59e0b; }
.bot-item.gen-item { cursor: grab; }
.bot-item.drop-target { outline: 2px dashed #f59e0b; outline-offset: -2px; }
.gen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gen-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border: 1px solid var(--line); border-radius: 99px; }
.gen-chip .link { padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.gen-chip .icon-btn { width: 20px; height: 20px; }
.gen-name { display: flex; gap: 6px; }
.gen-name .in { flex: 1; }
.gen-owners { display: grid; gap: 4px; }
.gen-owners .check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.gen-owners .check small { margin-left: auto; }
/* Einträge: nie seitlich scrollen – schmalere Spalten */
.rnd-entries { overflow-x: hidden; }
.rnd-entry { grid-template-columns: minmax(0, 1fr) 82px 38px 20px; gap: 4px; }
.rnd-entry > * { min-width: 0; }
.rnd-entry .icon-btn { width: 20px; height: 24px; }
/* Fenster „Mehrere Einträge einfügen“ */
.many-body { display: grid; gap: 10px; padding: 4px 18px 18px; min-width: min(520px, 80vw); }
.many-entries { width: 100%; resize: vertical; font: inherit; }
.many-actions { display: flex; align-items: center; gap: 8px; }
.bot-warn { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #3a2a0f; color: #fde68a; font-size: 12px; line-height: 1.45; }
.chip.live-chip { background: rgba(239, 68, 68, .16); color: #fca5a5; }

/* Tab „Tastenkürzel“: Auslöser mit ihren Ebenen */
.key-item .key-kbd { padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font: 600 10.5px Inter, sans-serif; color: var(--text); white-space: nowrap; }
.key-child { margin-left: 22px; border-left: 2px solid #22c55e; }
.chip.warn { background: rgba(251, 191, 36, .16); color: #fbbf24; }
.key-free { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); }
.key-free-item { cursor: grab; opacity: .85; }
.key-item.drop-target { outline: 2px dashed #22c55e; outline-offset: -2px; }

/* Reiter links: jeder Tab als eigener Kasten; der offene geht nahtlos ins Menü darunter über */
.ed-tabs { flex-wrap: wrap; gap: 3px; padding: 8px 8px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.ed-tabs button {
  flex: 0 1 auto; padding: 6px 10px 7px; margin-bottom: -1px;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0;
  background: var(--panel-2, #1b1b23); color: var(--muted); font-size: 12px;
  box-shadow: inset 0 2px 0 transparent; overflow: visible;
}
.ed-tabs button:hover { color: var(--text); background: #23232d; }
.ed-tabs button[aria-selected=true] {
  position: relative; z-index: 1; background: var(--panel); color: var(--text);
  border-color: var(--line); border-bottom: 1px solid var(--panel); box-shadow: inset 0 2px 0 var(--accent);
}
.ed-tabs button[hidden] { display: none; }
/* Der offene Reiter wandert in die unterste Zeile – so hängt er immer direkt am Menü */
.ed-tabs button[aria-selected=true] { order: 99; }
.ed-tabs button:focus { outline: none; }
.ed-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Offener Reiter immer unten links: Zeilen von unten nach oben füllen, der offene zuerst */
.ed-tabs { flex-wrap: wrap-reverse; }
.ed-tabs button[aria-selected=true] { order: -1; }
.ed-tabs button:focus, .ed-tabs button:focus-visible { outline: none; }
/* Reiter-Zeilen: normale Reihenfolge – das Skript setzt die Zeile mit dem offenen Reiter nach unten */
.ed-tabs { flex-wrap: wrap; }
.ed-tabs button[aria-selected=true] { order: 0; }
.ed-tabs .tab-break { flex-basis: 100%; height: 0; }
/* Zweite Reiter-Zeile (hinzugefügte Datenquellen) etwas abgesetzt */
.ed-tabs .tab-break + button, .ed-tabs .tab-break ~ button { margin-top: 3px; }
/* Reiter-Zeilen: je Gruppe eine Zeile ohne Umbruch, Reiter teilen sich die Breite */
.ed-tabs { flex-direction: column; flex-wrap: nowrap; gap: 3px; }
.ed-tabs .tab-row { display: flex; gap: 3px; min-width: 0; }
.ed-tabs .tab-row button { flex: 1 1 auto; min-width: 0; padding: 6px 7px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Reiter v3: Hauptreiter als Karteikarten, Modul-Reiter als Unterleiste im Menü */
.ed-tabs { display: block; padding: 0; background: var(--panel); border-bottom: 0; }
.ed-tabs .tab-row { display: flex; gap: 3px; padding: 8px 8px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.ed-tabs .tab-row button {
  flex: 0 1 auto; min-width: 0; overflow: visible; text-overflow: clip; padding: 6px 9px 7px;
  margin: 0 0 -1px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0;
}
.ed-tabs .tab-row button[aria-selected=true] { border-bottom: 1px solid var(--panel); box-shadow: inset 0 2px 0 var(--accent); }
/* Ist ein Modul-Reiter offen, hat oben keiner die Karteikarten-Form „offen“ */

/* Reiter v4: Karteikarten in zwei Lagen – vorne (unten) die Zeile mit dem offenen Reiter, dahinter die andere */
.ed-tabs { display: flex; flex-direction: column; gap: 0; padding: 8px 8px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.ed-tabs .tab-row { display: flex; gap: 3px; padding: 0; background: none; border: 0; flex-wrap: nowrap; }
.ed-tabs .tab-row button {
  flex: 0 1 auto; min-width: 0; overflow: visible; text-overflow: clip; white-space: nowrap;
  padding: 6px 10px 7px; margin: 0; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0;
  background: var(--panel-2); color: var(--muted); box-shadow: none; font-size: 12px;
}
/* Hintere Lage: etwas eingerückt, dunkler, schaut hinter der vorderen hervor */
/* Vordere Lage liegt auf der hinteren */
.ed-tabs .tab-row.front { position: relative; z-index: 1; }
.ed-tabs .tab-row.front button { margin-bottom: -1px; }
.ed-tabs .tab-row.front button[aria-selected=true] { background: var(--panel); color: var(--text); border-bottom: 1px solid var(--panel); box-shadow: inset 0 2px 0 var(--accent); }
.ed-tabs .tab-row button:hover { color: var(--text); }

/* Hintere Lage wie die vordere – mit eigener Seitenkante, die unter der vorderen Lage hervorschaut */
.ed-tabs .tab-row.front { margin-top: -1px; }

/* Reiter v5: Die hintere Seite liegt als Fläche hinter der vorderen Lage (statt schwarzem Hintergrund daneben) */
.ed-tabs { background: #101015; }
/* Vordere Lage steht auf der hinteren Seite */
/* Hintere Seite mit gerader Oberkante – die Reiter münden gerade hinein, wie vorne ins Menü */
/* Hintere Reiter exakt wie die vorderen: nur oben rund, unten offen in ihre Seite (alte Regel für „nicht letzte Zeile“ aufheben) */
/* Auch bei nur einer Zeile: Reiter stehen auf der Seite – gleiches Bild in allen Modulen */
.ed-tabs .tab-row.front:only-child {
  margin: 0 -8px; padding: 5px 8px 0; background: #1a1a21; border-top: 1px solid var(--line);
}
.ed-tabs .tab-row.front:only-child button:not([aria-selected=true]) { background: #23232c; }
.ed-tabs:has(.tab-row.front:only-child) { padding-top: 6px; }

/* Raster „Teilen“: kräftigere Linien, auch am rechten/unteren Rand */
.grid-tools .grid-tools { margin-left: 0; gap: 4px; }
.grid-tools .grid-tools[hidden] { display: none; }
.grid-overlay.split {
  background-image:
    linear-gradient(to right, rgba(167, 139, 250, .45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(167, 139, 250, .45) 1px, transparent 1px);
  box-shadow: inset -1px -1px 0 rgba(167, 139, 250, .45);
}
.grid-tools .in.small#gridCols, .grid-tools .in.small#gridRows { width: 46px; }

/* Keyframes: Kopieren/Einfügen – schmal, mit Abstand zur Auswahl */
.auto-actions { display: flex; gap: 6px; margin-top: 8px; }
.auto-actions .btn { flex: 0 0 auto; width: auto; }

/* Farbfelder: überall gleich groß und gleich gestaltet */
input[type=color].in, .in.color {
  flex: 0 0 44px; width: 44px; min-width: 44px; max-width: 44px; height: 30px;
  padding: 3px; box-sizing: border-box; align-self: center; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px;
}
input[type=color].in::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color].in::-webkit-color-swatch { border: 0; border-radius: 4px; }
input[type=color].in::-moz-color-swatch { border: 0; border-radius: 4px; }

/* Gruppen in der Ebenen-Liste */
.layer-item.group-head { padding-left: 2px; }
.layer-item.group-head .layer-name { font-weight: 700; }
.tl-caret.group-caret { height: 28px; margin-right: -4px; }   /* wie der Pfeil in der Timeline */
.layer-item.nested { margin-left: 14px; box-shadow: inset 2px 0 0 rgba(139, 92, 246, .35); }

/* Knopf-Raster (z. B. Auswahl, Gruppe): gleiche Abstände wie beim Ausrichten */
.grid2:has(> .btn) { gap: 6px; margin-bottom: 8px; }

/* Reiter mit Symbol; wird es eng, nur noch Symbole (Name als Tooltip) statt abgeschnittener Namen */
.ed-tabs .tab-row button { display: inline-flex; align-items: center; gap: 6px; }
.ed-tabs .tab-row button .icon { width: 14px; height: 14px; flex: none; }

.tab-tip {
  position: fixed; z-index: 1000; max-width: 240px; padding: 6px 9px; border-radius: 7px; pointer-events: none;
  background: #26262f; border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0, 0, 0, .45); color: var(--text); font-size: 12px;
}
.tab-tip b { display: block; font-weight: 700; }
.tab-tip span { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.tab-tip::before {
  content: ''; position: absolute; top: -5px; left: calc(var(--arrow, 50%) - 5px); width: 8px; height: 8px;
  background: #26262f; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg);
}
.tab-tip[hidden] { display: none; }

/* Kompakte Reiter etwas größer: breitere Fläche, größeres Symbol */

/* Bedingung „ist eines von“: Werte zum Anklicken */
.cond-many { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.chip-toggle { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.chip-toggle:hover { color: var(--text); }
.chip-toggle.on { background: rgba(139, 92, 246, .22); border-color: var(--accent); color: var(--text); }

/* Bedingungen als Blöcke (wie Klammern im Code) */
.cond-summary { display: block; margin: 0 0 8px; padding: 6px 8px; border-radius: 7px; background: #101015; color: var(--accent-2); font-size: 11.5px; line-height: 1.45; white-space: normal; word-break: break-word; }
.cond-body { display: grid; gap: 0; }
.cond-body > .cond { margin-bottom: 0; }
.cond-line.wide { grid-template-columns: minmax(0, 1fr) 30px; }
.cond-join {
  justify-self: center; margin: 4px 0; padding: 2px 10px; border: 1px solid rgba(139, 92, 246, .45); border-radius: 999px;
  background: rgba(139, 92, 246, .12); color: var(--accent-2); font: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; cursor: pointer;
}
.cond-join.any { border-color: rgba(34, 211, 238, .5); background: rgba(34, 211, 238, .1); color: #67e8f9; }
.cond-join:hover { filter: brightness(1.25); }
.cond-block { padding: 6px 6px 6px 10px; border-radius: 9px; border: 1px solid var(--line); border-left: 3px solid rgba(139, 92, 246, .6); background: rgba(255, 255, 255, .02); }
.cond-block.depth1 { border-left-color: rgba(34, 211, 238, .55); }
.cond-block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cond-paren { font-family: Consolas, monospace; font-weight: 700; color: var(--accent-2); }
.cond-block .cond { background: var(--panel-3, #23232c); }
.cond-add { display: flex; gap: 6px; margin-top: 8px; }

/* Vorschlag: gleiche Bedingungen als Gruppe */
.group-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 7px 8px 7px 10px; border: 1px solid rgba(139, 92, 246, .4); border-radius: 8px; background: rgba(139, 92, 246, .1); font-size: 12px; }
.group-hint span { flex: 1; min-width: 0; }
.group-hint .btn { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.group-hint .btn .icon { width: 13px; height: 13px; }

/* Mini-Leiste über der Ebenen-Liste */

.group-hint .group-hint-x { flex: none; margin-left: -2px; }

/* Sehr eng: schmalere Reiter, damit der offene seinen Namen behalten kann */

/* Ganz eng: die Reihe bricht um, statt den Namen des offenen Reiters zu verstecken */

/* Reiter v6: oben Symbol-Kästchen, unten allein der offene Reiter */
.ed-tabs { padding: 8px 8px 0; }
.ed-tabs .tab-icons { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 8px; }
.ed-tabs .tab-icons button {
  position: relative; display: grid; place-items: center; width: 34px; height: 30px; padding: 0; margin: 0;
  border: 1px solid var(--line); border-radius: 7px; background: #1a1a21; color: var(--muted); box-shadow: none; cursor: pointer;
}
.ed-tabs .tab-icons button:hover { background: #23232c; color: var(--text); border-color: rgba(139, 92, 246, .5); }
.ed-tabs .tab-icons button[hidden] { display: none; }
.ed-tabs .tab-icons button .icon { width: 16px; height: 16px; }
.ed-tabs .tab-icons .tab-label { display: none; }
.ed-tabs .tab-icons .tab-dot { position: absolute; top: 4px; right: 4px; margin: 0; }
.ed-tabs .tab-row.solo { margin: 0 -8px; padding: 5px 8px 0; background: #1a1a21; border-top: 1px solid var(--line); }
.ed-tabs .tab-row.solo button { flex: 0 1 auto; max-width: 100%; }
.ed-tabs .tab-row.solo .tab-label { overflow: hidden; text-overflow: ellipsis; }

/* Werkzeuge rechts neben dem offenen Reiter */
.ed-tabs .tab-row.solo { align-items: flex-end; }
.ed-tabs .tab-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; padding: 0 0 5px 8px; min-width: 0; }
.ed-tabs .tab-row .tab-tools button.tool { flex: none; margin: 0; padding: 4px 7px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer; white-space: nowrap; box-shadow: none; }
.ed-tabs .tab-row .tab-tools button.tool:hover:not(:disabled) { background: rgba(139, 92, 246, .16); color: var(--text); }
.ed-tabs .tab-tools .tool:disabled { opacity: .4; cursor: default; }


/* Rechts ohne Auswahl: Seiten „Design“ und „Testen“ */
.props-head.page-tabs { gap: 4px; padding: 8px 10px; }
.page-tab { padding: 6px 12px; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.page-tab:hover { color: var(--text); background: var(--panel-2); }
.page-tab[aria-pressed=true] { color: var(--text); background: rgba(139, 92, 246, .18); border-color: rgba(139, 92, 246, .5); }
.hint.warn { color: #fbbf24; }
.test-values { display: grid; gap: 4px; margin: 4px 0 6px; }
.test-value { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 8px; border-radius: 7px; background: var(--panel-2); font-size: 12px; }
.test-value code { color: var(--accent-2); }
.test-value span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ton-Kacheln: Wellenform, runder Play-Knopf, Name unten */
.media-audio { position: relative; display: grid; place-items: center; grid-template-columns: none; padding: 0; }
.media-wave { position: absolute; inset: 18% 10% 30%; display: flex; align-items: center; gap: 2px; }
.media-wave i { flex: 1; height: var(--h); border-radius: 2px; background: rgba(167, 139, 250, .28); transition: background .2s; }
.media-audio.playing .media-wave i { background: rgba(167, 139, 250, .6); animation: wave-pulse .9s ease-in-out infinite alternate; }
.media-audio.playing .media-wave i:nth-child(3n) { animation-delay: -.3s; }
.media-audio.playing .media-wave i:nth-child(3n + 1) { animation-delay: -.6s; }
@keyframes wave-pulse { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
.media-play {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; margin-top: -10px; padding: 0;
  border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer;
  box-shadow: 0 4px 14px rgba(139, 92, 246, .45); transition: transform .15s, filter .15s;
}
.media-play:hover { transform: scale(1.08); filter: brightness(1.1); }
.media-play .icon { width: 15px; height: 15px; }
.media-play .icon.filled path { fill: currentColor; stroke: none; }
.media-badge.media-name { right: 4px; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 6px; font-size: 10.5px; }

/* Unschärfen-Stapel bei Bild/Video */
.blur-stack { display: grid; gap: 6px; margin: 4px 0 8px; }
.blur-title { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }
.blur-card { display: grid; gap: 6px; padding: 8px; border-radius: 8px; background: var(--panel-2); border-left: 3px solid rgba(139, 92, 246, .55); }
.blur-card.off { opacity: .55; }
.blur-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px; }
.blur-card .grid2 { row-gap: 6px; }

/* Effekte: Knopf, Fenster rechts, Zeilen unter der Ebene, Karten in den Eigenschaften */
.ed-tabs .tab-row .tab-tools button.tool.fx-tool { margin-left: 6px; color: var(--accent-2); border: 1px solid rgba(139, 92, 246, .45); }
.ed-tabs .tab-row .tab-tools button.tool.fx-tool.on { background: rgba(139, 92, 246, .22); color: var(--text); }
.fx-drawer {
  position: relative; min-height: 0; overflow-y: auto; box-sizing: border-box;
  padding: 12px; background: var(--panel); border-right: 1px solid var(--line);
}
.fx-drawer[hidden] { display: none; }
.fx-drawer-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 14px; }
.fx-groups { display: flex; width: 100%; margin-bottom: 8px; }
.fx-groups button { flex: 1; }
.fx-lib { display: grid; gap: 6px; }
.fx-lib-card { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); cursor: grab; }
.fx-lib-card:hover { border-color: rgba(139, 92, 246, .6); }
.fx-lib-card.dim { opacity: .45; }
.fx-lib-name { flex: 1; min-width: 0; display: grid; font-weight: 700; font-size: 13px; }
.fx-lib-name small { font-weight: 400; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-icon { flex: none; width: 22px; text-align: center; }
.fx-row { display: flex; align-items: center; gap: 8px; height: 28px; margin-left: 22px; padding: 0 4px 0 8px; border-radius: 7px; font-size: 12px; color: var(--muted); cursor: pointer; box-shadow: inset 2px 0 0 rgba(236, 72, 153, .45); }
.fx-row.nested { margin-left: 36px; }
.fx-row:hover { background: var(--panel-2); color: var(--text); }
.fx-row.selected { background: rgba(139, 92, 246, .12); color: var(--text); }
.fx-row.off .layer-name { text-decoration: line-through; }
.fx-row .layer-actions { opacity: 0; }
.fx-row:hover .layer-actions { opacity: 1; }
.layer-item.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; }
.fx-card { display: grid; gap: 6px; margin-bottom: 8px; padding: 8px; border-radius: 8px; background: var(--panel-2); border-left: 3px solid rgba(236, 72, 153, .55); }
.fx-card.off { opacity: .55; }
.fx-card.focus { box-shadow: 0 0 0 1px rgba(139, 92, 246, .6); }
.fx-head { display: flex; align-items: center; gap: 2px; font-size: 12.5px; }
.fx-key { flex: none; width: 24px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--muted); font-size: 10px; cursor: pointer; }
.fx-key:hover { color: var(--text); border-color: var(--accent); }
.fx-key.on { color: #facc15; border-color: rgba(250, 204, 21, .6); }

/* Effekte offen: zusätzliche Spalte neben den Ebenen */
.ed-main.fx-open { grid-template-columns: var(--left-w) 300px minmax(0, 1fr) var(--right-w); }

/* Keyframe-Spuren: Beschriftung links aufgeräumt, kompakt bei kleiner Zeile */
.tl-autolabel { overflow: hidden; }
.tl-autoline { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tl-autoline .tl-src { flex: 1 1 auto; min-width: 0; }
.tl-autopoint { flex: none; display: flex; align-items: center; gap: 2px; }
.tl-autopoint .in.tiny { width: 46px; padding: 0 4px; }
.tl-autopoint small { margin-right: 3px; font-size: 10px; color: var(--muted); }
.tl-autolabel.compact { flex-direction: row; align-items: center; padding-top: 0; padding-bottom: 0; }
.tl-autolabel.compact .tl-autohead { flex: 1; min-width: 0; }
.tl-autolabel.compact .tl-src { width: 82px; flex: none; padding: 0 2px; }
/* „Auf Wert reagieren“: Einstellungen statt Linie, bleiben beim seitlichen Scrollen sichtbar */
.tl-autolane.react { display: flex; align-items: center; cursor: default; }
.rx-panel { position: sticky; left: 0; display: flex; align-items: center; gap: 6px; padding: 0 8px; max-width: 100%; overflow-x: auto; white-space: nowrap; font-size: 11px; scrollbar-width: thin; }
.rx-panel .in.tiny { height: 24px; }
.rx-key { width: 170px; flex: none; }
.rx-field { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); }
.rx-field .in.tiny { width: 52px; }
.rx-sep { margin-left: 6px; color: var(--track, #facc15); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.rx-flag { height: 24px; min-width: 26px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; }
.rx-flag.on { border-color: var(--track, #facc15); color: var(--text); background: color-mix(in srgb, var(--track, #facc15) 20%, transparent); }
.rx-curve { width: 90px; accent-color: var(--track, #facc15); }
.rx-graph { flex: none; width: 64px; height: 28px; border-radius: 5px; background: rgba(0, 0, 0, .25); }
.rx-meter { position: relative; flex: none; width: 70px; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.rx-meter i { position: absolute; left: 0; width: 0; border-radius: 5px; transition: width .1s linear; }
.rx-meter .in { top: 0; height: 3px; background: rgba(255, 255, 255, .5); }
.rx-meter .out { bottom: 0; height: 6px; background: var(--track, #facc15); }
.rx-raw { flex: none; min-width: 30px; color: var(--text); font-variant-numeric: tabular-nums; }

/* Effekt-Bibliothek: Suche, Reiter (Favoriten + Rubriken), Stern */
.fx-search { margin-bottom: 8px; }
.fx-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.fx-tab { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.fx-tab:hover { color: var(--text); }
.fx-tab[aria-pressed=true] { color: var(--text); background: rgba(139, 92, 246, .2); border-color: rgba(139, 92, 246, .6); }
.fx-tab.fav[aria-pressed=true] { background: rgba(250, 204, 21, .14); border-color: rgba(250, 204, 21, .55); }
.fx-fav { flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 15px; cursor: pointer; }
.fx-fav:hover, .fx-fav.on { color: #facc15; }

.fx-main-tabs { display: flex; gap: 3px; margin: 0 -12px 10px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.fx-main-tabs button {
  margin-bottom: -1px; padding: 6px 14px 7px; border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0;
  background: #101015; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.fx-main-tabs button:hover { color: var(--text); }
.fx-main-tabs button[aria-pressed=true] { background: var(--panel); color: var(--text); border-bottom-color: var(--panel); box-shadow: inset 0 2px 0 var(--accent); }
.fx-tabs .fx-tab { padding: 3px 9px; font-size: 11.5px; }

.fx-main-tabs button { flex: 1 1 0; } /* 50/50 */

/* Offener Reiter wirklich bündig: keine Linie unten, deckt die Trennlinie ab */
.fx-main-tabs { position: relative; }
.fx-main-tabs button[aria-pressed=true] { position: relative; z-index: 1; border-bottom: 0; padding-bottom: 8px; background: var(--panel); }

/* Keine durchgehende Trennlinie mehr: nur der hintere Reiter hat unten eine Kante */
.fx-main-tabs { border-bottom: 0; }
.fx-main-tabs button { margin-bottom: 0; }
.fx-main-tabs button:not([aria-pressed=true]) { border-bottom: 1px solid var(--line); }
.fx-main-tabs button[aria-pressed=true] { border-bottom: 0; padding-bottom: 8px; box-shadow: inset 0 2px 0 var(--accent); }

/* Stern: größer, quadratische Klickfläche */
.fx-lib-card { padding-left: 4px; gap: 8px; }
.fx-fav { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 7px; font-size: 20px; line-height: 1; }
.fx-fav:hover { background: rgba(250, 204, 21, .12); }

/* Vorlagen-Fenster: Entfernen-Knopf, „Mehr im Hub“ */
.tpl-wrap { position: relative; display: grid; }
.tpl-wrap .tpl { width: 100%; }
.tpl-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: rgba(10, 10, 14, .8); color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
.tpl-wrap:hover .tpl-remove { opacity: 1; }
.tpl-remove:hover { color: #fca5a5; border-color: #ef4444; }
a.tpl.blank { text-decoration: none; color: inherit; }
.fx-drawer-head .fx-hub { margin-left: 8px; text-decoration: none; }
.fx-lib-card.preset { border-style: dashed; }

.fx-lib-card .fx-remove { opacity: 0; transition: opacity .15s; }
.fx-lib-card:hover .fx-remove { opacity: 1; }

/* Leinwand ohne Bildlaufleisten – lila Rand zeigt, wo es weitergeht */
.ed-viewport { scrollbar-width: none; }
.ed-viewport::-webkit-scrollbar { display: none; }
.ed-viewport.panning { cursor: grabbing; }
.ed-center { position: relative; }
.view-edge { position: absolute; pointer-events: none; z-index: 4; }
.view-edge { transition: box-shadow .25s; }
.view-edge.on { box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .35), inset 0 0 18px rgba(139, 92, 246, .12); }

/* Werkzeuge im ⋯-Menü, wenn die Spalte schmal ist */
.ed-tabs .tab-tools { flex: 0 1 auto; }
.tab-more { position: relative; }
.tab-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; display: grid; min-width: 150px; padding: 4px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.tab-menu[hidden] { display: none; }
.ed-tabs .tab-row .tab-tools .tab-menu button.tool { width: 100%; text-align: left; padding: 7px 10px; }
.ed-tabs .tab-row .tab-tools .tab-menu button.tool:disabled { opacity: .4; }

/* Schmal: Werkzeuge rücken zusammen, bevor sie ins ⋯-Menü wandern */
.ed-tabs .tab-tools.squash { gap: 0; padding-left: 4px; }
.ed-tabs .tab-row .tab-tools.squash button.tool { padding: 4px 4px; font-size: 11px; }
.ed-tabs .tab-row .tab-tools.squash button.tool.fx-tool { margin-left: 3px; padding: 4px 6px; }

/* Dünne, dezente Bildlaufleisten überall (ohne Pfeile) */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
*:hover { scrollbar-color: rgba(255, 255, 255, .28) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .3); }
::-webkit-scrollbar-button { display: none; }

/* Lautstärke im Editor (rechts über der Timeline) */
.tl-volume { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); font-size: 13px; }
.tl-volume input { width: 110px; accent-color: var(--accent); }
/* Medien-Bereiche zuklappbar */
.media-fold { display: flex; flex: 1; align-items: center; gap: 4px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.media-fold h4 { margin: 0; }
.media-fold .tl-caret { width: 22px; height: 22px; font-size: 12px; }

/* Keyframe-Punkte in der Farbe der Spur (gewählter Punkt: weiß mit Spur-Rand) */
.tl-autosvg .pt { fill: var(--track, #facc15); stroke: rgba(0, 0, 0, .55); stroke-width: 1.5; }
.tl-autosvg .pt.sel { fill: #fff; stroke: var(--track, #facc15); stroke-width: 1.5; }
.tl-autosvg .mid { fill: var(--track, #facc15); stroke: rgba(0, 0, 0, .55); }

/* Loop-Bereich in der Timeline (hellblau) */
.tl-loopzone { position: absolute; top: 0; bottom: 0; z-index: 3; background: rgba(56, 189, 248, .32); border-left: 2px solid #38bdf8; border-right: 2px solid #38bdf8; box-sizing: border-box; cursor: grab; }
.tl-loopzone:active { cursor: grabbing; }
.tl-loopzone .lz-grip { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; }
.tl-loopzone .lz-grip[data-side=a] { left: -6px; }
.tl-loopzone .lz-grip[data-side=b] { right: -6px; }
.tl-loopband { position: absolute; top: 24px; bottom: 0; z-index: 1; background: rgba(56, 189, 248, .08); border-left: 1px solid rgba(56, 189, 248, .45); border-right: 1px solid rgba(56, 189, 248, .45); pointer-events: none; }

/* ◆ in der Farbe der zugehörigen Spur */
.fx-key.on { color: var(--track, #facc15); border-color: var(--track, #facc15); background: color-mix(in srgb, var(--track, #facc15) 14%, transparent); }
.chip.fx-tracked { color: var(--track, #facc15); background: color-mix(in srgb, var(--track, #facc15) 16%, transparent); }

/* Auswahl mit Suche */
.search-select { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; cursor: pointer; }
.search-select span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-select b { flex: none; font-size: 10px; color: var(--muted); }
.search-pop { position: fixed; z-index: 1000; display: grid; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 12px 34px rgba(0, 0, 0, .5); }
.search-list { display: grid; max-height: 520px; overflow-y: auto; }
.search-item { padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.search-item:hover { background: rgba(139, 92, 246, .16); }
.search-item.on { background: rgba(139, 92, 246, .26); }
.search-item[disabled] { color: var(--muted); cursor: default; background: none; }
.search-group { margin: 6px 8px 2px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* Durchsuchbare Auswahl: die echte Liste bleibt unsichtbar im Formular */
select.vv-searchable { display: none !important; }
.search-pop input { width: 100%; box-sizing: border-box; }
/* Auswahl-Knopf: kein Fokus-Rahmen beim Anklicken oder danach (nur bei Tastatur-Bedienung) */
.in.search-select:focus { border-color: var(--line); box-shadow: none; outline: none; }
.in.search-select:focus-visible { border-color: var(--accent); }
/* Aufgeklappt: hervorgehoben wie eine fokussierte Eingabe (normale Listen über .in:focus) */
.search-select.open, .in.search-select.open:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, .2); }
select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, .2); }

/* Blase „Farbe übernehmen“ nach dem Einfügen einer Spur */
.color-offer { position: fixed; z-index: 1000; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 8px;
  border: 1px solid var(--offer); border-radius: 999px; background: #17171f; color: var(--text); font: inherit; font-size: 12px; font-weight: 600;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5); cursor: pointer; animation: offer-in .18s ease-out; }
.color-offer i { width: 12px; height: 12px; border-radius: 50%; background: var(--offer); }
.color-offer:hover { background: color-mix(in srgb, var(--offer) 18%, #17171f); }
@keyframes offer-in { from { opacity: 0; transform: translateY(4px); } }
.color-offer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Abschnitts-Namen der reagierenden Spur immer lesbar, auch bei dunkler Spur-Farbe */
.rx-sep { color: color-mix(in srgb, var(--track, #facc15) 45%, #ffffff); }

/* Loop-Bereich: lässt Klicks durch (Abspielkopf), nur Ränder und Griffleiste oben sind greifbar */
.tl-loopzone { pointer-events: none; cursor: default; }
.tl-loopzone .lz-grip, .tl-loopzone .lz-move { pointer-events: auto; }
.tl-loopzone .lz-move { position: absolute; left: 6px; right: 6px; top: 0; height: 6px; background: #38bdf8; border-radius: 0 0 4px 4px; opacity: .75; cursor: grab; }
.tl-loopzone .lz-move:hover { opacity: 1; height: 8px; }
.layer-item:not(.group-head) .fx-caret { margin-left: -4px; }

/* Ebenen-Zeile mit Effekt-Pfeil: nichts läuft über – der Name wird gekürzt, Knöpfe rechts bleiben sichtbar */
.layer-item { gap: 6px; min-width: 0; overflow: hidden; }
.layer-item .layer-name { flex: 1 1 0; min-width: 24px; }
.layer-item .chip { flex: none; padding-left: 6px; padding-right: 6px; }
.layer-item .layer-actions { flex: none; }
.layer-item .tl-caret.fx-caret { width: 20px; height: 24px; margin: 0 -4px 0 -4px; }
/* Zugeklappte Effekte: schlichter Hinweis im Stil der Symbole rechts (wie das Auge) */
.layer-item .fx-count { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 24px; color: var(--muted); font-size: 12px; font-weight: 600; }

/* Kurz aufleuchten, wenn man per Doppelklick auf eine Spur zum Feld springt */
.flash { animation: field-flash 1.2s ease-out; border-radius: 8px; }
@keyframes field-flash { 0%, 30% { box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(139, 92, 246, .55); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Zeitleiste bleibt beim Hoch-/Runterscrollen oben stehen (overflow: clip statt hidden – sonst greift „sticky“ nicht) und ist etwas schmaler */
.tl-right { overflow: clip; }
.tl-ruler-spacer, .tl-ruler { height: 20px; }
/* Raster-Leiste über den Namen: schlicht im Platz, ohne eigene Rahmen – nur Text, der beim Drüberfahren hell wird */
.tl-gridbar { display: flex; align-items: center; gap: 2px; padding: 0 6px 0 4px; overflow: hidden; }
.tl-gridbar .in.tiny, .tl-gridbar .in.tiny:focus { height: 18px; padding: 0 3px; border: 0; border-radius: 3px; background: transparent; box-shadow: none; color: var(--muted); font-size: 11px; }
.tl-gridbar .in.tiny:hover, .tl-gridbar .in.tiny:focus { color: var(--text); background: rgba(255, 255, 255, .05); }
.tl-gridbar select.in.tiny { width: auto; cursor: pointer; }
/* Aufgeklappte Liste wie die anderen Auswahllisten (nicht durchsichtig/grau vom schlichten Feld) */
.tl-gridbar select.in.tiny option { background: var(--panel-2); color: var(--text); font-size: 12.5px; }
.tl-gridbar input.in.tiny { width: 54px; text-align: right; -moz-appearance: textfield; appearance: textfield; }
/* Ohne Pfeile – die verdecken bei der schmalen Zahl den Wert (Mausrad und Tippen gehen weiter) */
.tl-gridbar input.in.tiny::-webkit-inner-spin-button, .tl-gridbar input.in.tiny::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tl-gridbar small { color: var(--muted); font-size: 10.5px; }
.tl-grid-toggle { flex: none; height: 18px; padding: 0 5px; border: 0; border-radius: 3px; background: none; color: var(--muted); font: inherit; font-size: 11px; line-height: 1; cursor: pointer; }
.tl-grid-toggle:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.tl-grid-toggle.on { color: var(--accent-2, #a78bfa); font-weight: 600; }
.tl-loopband { top: 20px; }

/* Zeitleiste bis an den rechten Rand (über den Innenabstand) – sonst scheint dort beim Scrollen der Inhalt durch */
.tl-ruler { margin-right: -12px; padding-right: 12px; }

/* Skalierung: Schieberegler neben der Zahl */
.scale-slider { flex: 1 1 auto; min-width: 60px; accent-color: var(--accent); }
.prop-controls:has(.scale-slider) .in.num { flex: 0 0 64px; width: 64px; }
/* Feld wird gerade von einer Keyframe-Spur gesteuert: zeigt deren Wert live */
#props input.auto-live { color: #facc15; }
/* Immer etwas freier Platz unter der letzten Zeile – zum Scrollen und zum Abwählen per Klick */
#tlLabels, #tlLanes { padding-bottom: 112px; }
/* Zahlenfelder: statt der eingebauten Pfeile (die über der Zahl lagen) eigene kleine ▲▼, immer sichtbar im
   freigehaltenen Rand rechts – die Zahl läuft nie darunter. Klicken: editor.js (watchNumberSteppers). */
input[type=number] {
  -moz-appearance: textfield; appearance: textfield; padding-right: 15px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M4 1 7.5 5.5h-7zM4 13 .5 8.5h7z' fill='%238d8d9c'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important;
  background-position: right 4px center !important; background-size: 7px 12px !important;
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Testfenster (rechts „Testen“): das echte Overlay im Rahmen – Werkzeuge, Raster und Auswahl ausgeblendet */
.test-view { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.test-frame { position: absolute; left: 0; top: 0; border: 0; background: transparent; transform-origin: 0 0; }
.test-badge { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(11, 11, 15, .8); color: #c4b5fd; font-size: 11.5px; font-weight: 600; }
.editor.testing #gridOverlay, .editor.testing #multiBoxes, .editor.testing #selection,
.editor.testing #marquee, .editor.testing .guide, .editor.testing .ed-canvasbar .grid-tools { visibility: hidden; }
.editor.testing #frame { pointer-events: none; }
/* Ebenen setzen ihre Sichtbarkeit selbst (visibility: visible) – deshalb die Bearbeiten-Ansicht über die Deckkraft ausblenden */
.editor.testing #stage { opacity: 0 !important; }
.test-pick { display: flex; gap: 6px; align-items: center; }
.test-pick select { flex: 1; min-width: 0; }
/* Export-Dialog (Videoschnitt) */
.export-body { display: grid; gap: 14px; width: min(520px, calc(100vw - 80px)); }
.export-field { display: grid; gap: 6px; }
.export-field > span { color: var(--muted); font-size: 12px; font-weight: 600; }
.export-field .seg { display: flex; flex-wrap: wrap; }
.export-dir { display: flex; align-items: center; gap: 8px; min-width: 0; }
.export-dir code { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; direction: rtl; text-align: left; }
.export-actions { display: flex; justify-content: flex-end; gap: 8px; }
.export-title { margin: 0; font-weight: 700; }
.export-bar { height: 10px; border-radius: 5px; background: var(--panel-2); overflow: hidden; }
.export-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #f43f5e, var(--accent)); transition: width .3s; }
/* Dateien vom PC über dem Reiter „Medien“ */
#panel-media.drop { outline: 2px dashed var(--accent); outline-offset: -6px; background: rgba(139, 92, 246, .08); }
/* Bilder pro Sekunde: alle Kästchen gleich breit */
.export-field .seg.export-fps { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.export-fps button { min-width: 0; padding: 0 4px; text-align: center; font-variant-numeric: tabular-nums; }
/* Medien: oben der Name (eine Zeile, sonst …), unten links der Dateityp */
.media-title { position: absolute; left: 4px; right: 4px; top: 4px; z-index: 1; padding: 1px 6px; border-radius: 5px; background: rgba(11, 11, 15, .78); color: var(--text); font-size: 10.5px; font-weight: 600; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.media-item:hover .media-title.has-del { right: 30px; } /* Platz fürs × nur, wenn es zu sehen ist */
/* Datenquelle ohne Freischaltung (z. B. von einer Vorlage gebraucht): rot */
.source.locked { background: rgba(239, 68, 68, .12); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .55); }
.source.locked .source-name { color: #fca5a5; }
.source.locked .dot { background: #ef4444; }
/* Rahmen: Effekt- und Deko-Karten, Farbliste, Bildauswahl */
.fx-card.border-fx { border-left-color: rgba(251, 146, 60, .65); }
.fx-card.border-deco { border-left-color: rgba(34, 211, 238, .6); }
.fx-fold { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.fx-fold b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deco-thumb { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; background: #191920; }
.sub-head { margin: 6px 0 0; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.palette { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.palette-item { position: relative; display: inline-flex; }
.palette-item .in.color { width: 34px; padding: 2px; }
.palette-x { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: #3f3f4a; color: #fff; font-size: 11px; line-height: 16px; cursor: pointer; opacity: 0; }
.palette-item:hover .palette-x { opacity: 1; }
.pick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.pick-head { margin: 14px 0 6px; font-size: 12px; color: var(--muted); }
.pick-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-width: 720px; }
button.media-item.pick { cursor: pointer; color: var(--text); font: inherit; }
button.media-item.pick .media-title { position: absolute; left: 4px; right: 4px; top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; text-align: left; }
/* Aufklapp-Pfeile: Grafik, mittig in der Klickfläche, gut sichtbar */
.tl-caret { display: inline-grid; place-items: center; }
.caret-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.caret-icon.open { transform: rotate(90deg); }
.fx-fold .tl-caret, .media-fold .tl-caret { width: 24px; height: 24px; border-radius: 6px; }
.fx-fold:hover .tl-caret { background: rgba(139, 92, 246, .18); color: var(--text); }
/* Reiter oben links bleiben beim Scrollen über dem Inhalt (Medien-Namen haben selbst z-index 1) */
.ed-left > .ed-tabs { z-index: 5; background: var(--bg); }
/* Zwei Felder nebeneinander: Name über dem Feld – so bleibt genug Platz für Zahl, Pfeile und ◆ */
.grid2 .prop-row { grid-template-columns: minmax(0, 1fr); gap: 3px; margin-bottom: 8px; }
.grid2 .prop-row > label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trigger-card .grid2 .prop-row { grid-template-columns: minmax(0, 1fr); }
/* „Nahtlos“-Schalter links neben der Lautstärke */
.tl-smooth { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.tl-smooth .icon { width: 14px; height: 14px; }
.tl-smooth.on { border-color: rgba(139, 92, 246, .7); background: rgba(139, 92, 246, .2); color: var(--text); }
.tl-smooth + .tl-volume { margin-left: 10px; }
.tl-volume .icon { width: 16px; height: 16px; }
/* Tests zurücksetzen: runder Knopf neben „Testen“ */
.page-tabs .test-reset { width: 30px; height: 30px; margin-left: 2px; border-radius: 50%; }
.page-tabs .test-reset:hover { color: var(--text); background: rgba(139, 92, 246, .18); }
.page-tabs .test-reset .icon { width: 15px; height: 15px; }
.page-tabs .test-reset { border: 1px solid transparent; }
.page-tabs .test-reset.active { color: var(--text); background: rgba(139, 92, 246, .18); border-color: rgba(139, 92, 246, .5); }
/* Testfenster ohne gespeicherten Stand: eigener Renderer statt Rahmen */
.test-view .test-stage { position: absolute; left: 0; top: 0; overflow: hidden; }

/* Alle Auswahllisten mit dunkler, lesbarer Liste (wie die Sprachauswahl) */
select { color-scheme: dark; }
select option { background: #17171f; color: #f2f2f5; }
/* Regler-Spur: Name, Variable und Live-Werte statt Linie */
.dial-panel .dial-name { flex: none; color: var(--text); }
.dial-panel .dial-var { flex: none; font-size: 10.5px; opacity: .7; }
.dial-panel select.in.tiny { width: auto; max-width: none; min-width: max-content; flex: none; }
/* Live-Werte mit fester Breite – sonst rutscht alles rechts davon bei 100 → 100,1 hin und her */
.dial-panel .dial-pos { min-width: 5ch; text-align: right; }
.dial-panel .dial-now { min-width: 7ch; text-align: right; }

/* Live-Audio: Quelle wählen */
.live-pick { display: flex; gap: 6px; align-items: center; min-width: 0; }
.live-pick .live-src { flex: 1; min-width: 0; }

/* Testfenster: Live-Audio anhören (oben rechts, klickbar trotz pointer-events: none der Ansicht) */
.test-view .test-actions { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; pointer-events: auto; }
/* Gehaltener Test: unsichtbar (aber weiter gezeichnet, damit Ton und Timeline laufen), nur der Hinweis zum Beenden */
.test-view .test-held { display: none; position: absolute; left: 8px; top: 8px; pointer-events: auto; }
.test-view.held .test-held { display: inline-flex; }
.test-view.held .test-frame, .test-view.held .test-badge, .test-view.held .test-actions { opacity: 0; pointer-events: none; }

/* Test-Bereich: Anhören / Test halten mit Abstand, bei wenig Platz untereinander */
.test-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

/* Diagnose der Live-Wiedergabe im Test-Bereich */
.live-diag { display: grid; gap: 2px; margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: rgba(255, 255, 255, .04); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted); }
.live-diag b { color: var(--text); font-weight: 600; }
/* Effekte umsortieren: Linie zeigt, wohin er kommt */
.fx-row.drop-above { box-shadow: inset 2px 0 0 rgba(236, 72, 153, .45), inset 0 2px 0 var(--accent, #8b5cf6); }
.fx-row.drop-below { box-shadow: inset 2px 0 0 rgba(236, 72, 153, .45), inset 0 -2px 0 var(--accent, #8b5cf6); }

/* Ausgelöste Animationen */
.anim-card { display: grid; gap: 4px; margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); border-left: 3px solid rgba(245, 158, 11, .7); }
.anim-card.active { box-shadow: 0 0 0 1px rgba(245, 158, 11, .7); }
.anim-head { display: flex; align-items: center; gap: 6px; }
.anim-head .icon { width: 14px; height: 14px; flex: none; color: #f59e0b; }
.anim-head .in.name { flex: 1; min-width: 0; font-weight: 700; }
.anim-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.anim-cond { display: grid; gap: 6px; }
.anim-notice { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 10px; border: 1px solid rgba(245, 158, 11, .45); border-radius: 8px; background: rgba(245, 158, 11, .12); font-size: 12.5px; }
.anim-notice .icon { width: 16px; height: 16px; flex: none; color: #f59e0b; }
.anim-notice span { flex: 1; }
/* Timeline einer ausgelösten Animation: Leiste in der Toolbar, Rand oben in Bernstein */
.tl-animbar { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 6px 3px 10px; border: 1px solid rgba(245, 158, 11, .5); border-radius: 8px; background: rgba(245, 158, 11, .14); }
.tl-animbar[hidden] { display: none; }
.tl-animbar .icon { width: 15px; height: 15px; flex: none; color: #f59e0b; }
.tl-animbar b { white-space: nowrap; }
.tl-animbar .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-timeline.anim-mode { box-shadow: inset 0 2px 0 #f59e0b; }
.ed-timeline.anim-mode .tl-split, .ed-timeline.anim-mode .tl-smooth { display: none; }
.tl-bar.anim { background: rgba(245, 158, 11, .55); border-color: #f59e0b; color: #fff; }
.tl-bar[data-anim] { cursor: default; }
.tl-bar.always.anim { background: repeating-linear-gradient(135deg, rgba(245, 158, 11, .16) 0 8px, rgba(245, 158, 11, .08) 8px 16px); border-color: rgba(245, 158, 11, .4); color: var(--muted); }
.tl-anim { display: inline-flex; flex: none; align-items: center; gap: 2px; height: 22px; margin-left: auto; padding: 0 4px; border: 1px solid transparent; border-radius: 5px; background: none; color: var(--muted); opacity: .35; cursor: pointer; }
.tl-count ~ .tl-anim, .tl-reset ~ .tl-anim { margin-left: 2px; }
.tl-label:hover .tl-anim, .tl-anim.has { opacity: 1; }
.tl-anim.has { color: #f59e0b; }
.tl-anim:hover { border-color: var(--line); color: var(--text); }
.tl-anim .icon { width: 13px; height: 13px; }
.tl-anim small { font-size: 10px; }
/* Effekte: tauschen, Bereich entsperren */
.fx-head .fx-type { flex: 1; min-width: 0; margin-right: 4px; padding: 3px 6px; font-weight: 700; }
.fx-head .icon-btn.on { color: #f59e0b; }
.fx-region-box { display: grid; gap: 6px; padding: 6px 8px; border: 1px dashed rgba(245, 158, 11, .5); border-radius: 6px; background: rgba(245, 158, 11, .07); }
.fx-region-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fx-region-line .prop-row { flex: 1; min-width: 150px; }
.fx-regions { position: absolute; inset: -1.5px; pointer-events: none; }
.ed-selection.group .fx-regions { display: none; }
.fx-region { position: absolute; border: 1.5px dashed #f59e0b; pointer-events: none; }
.fx-region.focus { border-style: solid; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.fx-region-grip { position: absolute; left: -1.5px; top: -20px; max-width: 170px; padding: 0 6px; overflow: hidden; border-radius: 4px 4px 0 0; background: #f59e0b; color: #1a1205; font-size: 11px; font-weight: 700; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; cursor: move; pointer-events: auto; }
.fx-region-size { position: absolute; right: -6px; bottom: -6px; width: 11px; height: 11px; border: 1.5px solid #f59e0b; border-radius: 2px; background: #fff; cursor: nwse-resize; pointer-events: auto; }

/* Gesperrt: ein Modul des Designs ist gerade „in Arbeit“ – ansehen ja, bearbeiten nein */
body.ed-locked .ed-left, body.ed-locked .ed-right, body.ed-locked .ed-timeline, body.ed-locked #stage { pointer-events: none; user-select: none; }
body.ed-locked .ed-left, body.ed-locked .ed-right, body.ed-locked .ed-timeline { opacity: .45; filter: grayscale(.6); }
.lock-banner { margin: 8px 12px 0; padding: 9px 14px; border: 1px solid rgba(245, 158, 11, .45); border-radius: 10px; background: rgba(245, 158, 11, .12); color: #fde68a; font-size: 13px; line-height: 1.45; }

/* Hinweis beim Drüberfahren (nach kurzer Pause) */
.hover-tip { position: fixed; z-index: 1000; max-width: 280px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-3); color: var(--text); font-size: 12px; line-height: 1.35; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); pointer-events: none; animation: hover-tip-in .12s ease-out; }
@keyframes hover-tip-in { from { opacity: 0; transform: translateY(-2px); } }

/* Animationen: Knopf bei den Ebenen, Spalte, Fenster zum Einsetzen/Speichern */
.ed-tabs .tab-row .tab-tools button.tool.anim-tool { display: inline-flex; align-items: center; gap: 4px; color: #f59e0b; border-color: rgba(245, 158, 11, .5); }
.ed-tabs .tab-row .tab-tools button.tool.anim-tool .icon { width: 13px; height: 13px; }
.ed-tabs .tab-row .tab-tools button.tool.anim-tool.on { background: rgba(245, 158, 11, .2); color: var(--text); }
.anim-drawer .fx-drawer-head .icon { width: 16px; height: 16px; color: #f59e0b; }
.anim-lib-card.own { border-style: dashed; }
.anim-use { flex: none; padding: 1px 7px; border-radius: 999px; background: rgba(245, 158, 11, .18); color: #f59e0b; font-size: 10.5px; font-weight: 700; }
.anim-dialog { display: grid; gap: 12px; }
.anim-dialog > p { margin: 0; }
.anim-info { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 10px; }
.anim-info > b { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.anim-list { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
.anim-list.bad li { color: #fca5a5; }
.hint.warn { color: #fbbf24; }