:root {
    --bg: #0a0b0f; --side: #0f1015; --panel: #14161d; --panel2: #1b1e28; --line: #252938;
    --text: #e8eaf2; --muted: #8b90a5; --accent: #7c5cff; --accent2: #9b82ff; --danger: #ff5c7a; --ok: #3ddc97;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
  button, input, select { font: inherit; color: inherit; }
  button { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
  button:hover { border-color: var(--accent); }
  button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  button.primary:hover { background: var(--accent2); }
  button.danger:hover { border-color: var(--danger); color: var(--danger); }
  input, select { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; width: 100%; }
  input:focus, select:focus { outline: none; border-color: var(--accent); }
  input[type=color] { padding: 2px; height: 34px; }
  label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }
  h1, h2, h3 { margin: 0; }
  .hidden { display: none !important; }


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

  .head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .head h2 { font-size: 22px; }
  .urlbox { display: flex; gap: 8px; margin-bottom: 20px; }
  .urlbox input { font-family: ui-monospace, monospace; font-size: 12px; }
  .cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }

  .preview { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
  @media (min-width: 1101px) { .preview { position: sticky; top: 12px; z-index: 3; } }
  .preview-wrap { position: relative; width: 100%; overflow: hidden; border-radius: 8px;
    background: repeating-conic-gradient(#20232f 0% 25%, #191b25 0% 50%) 50% / 24px 24px; }
  .preview-wrap iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }

  #handles { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
  .drag-handle { position: absolute; border: 1px dashed rgba(180,160,255,.55); cursor: move; pointer-events: auto; touch-action: none; outline: none; box-sizing: border-box; }
  .drag-handle.ro { cursor: default; }
  .drag-handle:hover, .drag-handle:focus, .drag-handle.sel { border-color: var(--accent2); background: rgba(124,92,255,.14); }
  .drag-handle .tag { position: absolute; top: 0; left: 0; font-size: 10px; line-height: 14px; background: var(--accent); color: #fff; padding: 0 5px; border-radius: 0 0 4px 0; display: none; white-space: nowrap; }
  .drag-handle:hover .tag, .drag-handle:focus .tag, .drag-handle.sel .tag { display: block; }
  .drag-handle.dragging { cursor: grabbing; }
  .drag-handle.hl { border-color: #fff; border-style: solid; background: rgba(124,92,255,.22); }
  .drag-handle.pulse { animation: rlpulse .8s ease-out 2; }
  @keyframes rlpulse { 0% { box-shadow: 0 0 0 0 rgba(155,130,255,.9); } 100% { box-shadow: 0 0 0 18px rgba(155,130,255,0); } }
  .drag-handle .ghost { position: absolute; left: 0; top: 0; right: 0; box-sizing: border-box; padding: .5em .8em; border-radius: .35em; font: 700 1em sans-serif; opacity: .9; pointer-events: none; overflow: hidden; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
  .drag-handle .tag { left: 14px; }
  .drag-handle .corner { position: absolute; width: 11px; height: 11px; background: #fff; border: 2px solid var(--accent); border-radius: 2px; box-sizing: border-box; display: none; }
  .drag-handle:hover .corner, .drag-handle:focus .corner, .drag-handle.sel .corner { display: block; }
  .corner.tl { top: 0; left: 0; cursor: nwse-resize; } .corner.br { bottom: 0; right: 0; cursor: nwse-resize; }
  .corner.tr { top: 0; right: 0; cursor: nesw-resize; } .corner.bl { bottom: 0; left: 0; cursor: nesw-resize; }
  .el.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  #toast { position: fixed; bottom: 20px; right: 20px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; opacity: 0; transition: opacity .2s; pointer-events: none; }
  #toast.show { opacity: 1; }
  #toast.err { border-color: var(--danger); }

/* ===== Layout ===== */
.row { display: flex; gap: 8px; align-items: center; }
.empty { display: grid; place-items: center; color: var(--muted); text-align: center; padding: 40px 0; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .cols { grid-template-columns: 1fr; } #app { grid-template-columns: 210px minmax(0, 1fr); } }
a { color: inherit; text-decoration: none; }
.section-head a.muted:hover, .crumb:hover { color: var(--text); }
.danger-zone button.danger { border-color: #6d2a39; color: var(--danger); }
.danger-zone button.danger:hover { background: #2a1219; }

#login { height: 100%; display: grid; place-items: center; text-align: center; }
#login .card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 40px 48px; max-width: 420px; }
#login h1 { font-size: 34px; letter-spacing: -.5px; }
#login h1 span, .logo span { color: var(--accent2); }
#login p { color: var(--muted); margin: 10px 0 24px; }

#app { display: grid; grid-template-columns: 252px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; }
#nav { min-height: 0; height: 100%; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 10px; gap: 4px; overflow-y: auto; }
.avatar { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #c44dff); display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.round { border-radius: 50%; }
.ws-switch { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: transparent; border: 1px solid transparent; width: 100%; text-align: left; font-weight: 600; }
.ws-switch:hover { background: var(--panel2); border-color: transparent; }
.ws-switch .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { position: absolute; z-index: 60; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 6px; min-width: 220px; box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.menu button { display: flex; width: 100%; align-items: center; gap: 8px; text-align: left; background: transparent; border-color: transparent; }
.menu button:hover { background: var(--panel); border-color: transparent; }
.menu .sep { height: 1px; background: var(--line); margin: 6px 0; }
.nav-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--bg); width: 100%; margin: 4px 0 8px; text-align: left; }
.kbd { margin-left: auto; font-size: 10px; border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--muted); }
.nav-group { margin-top: 14px; font-size: 11px; color: var(--muted); padding: 0 10px 4px; letter-spacing: .04em; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: #c9cde0; text-decoration: none; }
.nav-item:hover { background: var(--panel2); }
.nav-item.active { background: var(--panel2); color: #fff; font-weight: 600; }
.nav-item.small { font-size: 13px; padding: 6px 10px; color: #aeb3c8; }
.nav-spacer { flex: 1; min-height: 12px; }
.nav-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--line); margin-top: 8px; font-weight: 600; }
.nav-user .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { padding: 5px; border-radius: 8px; background: transparent; border-color: transparent; color: var(--muted); display: inline-grid; place-items: center; }
.icon-btn:hover { color: var(--text); background: var(--panel2); border-color: transparent; }
.icon { display: inline-flex; width: 16px; height: 16px; flex: none; }
.icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#content { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
#topbar { display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--line); height: 49px; flex: none; }
#topbar .title { font-weight: 600; }
#topbar .grow { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.pill.ok { color: var(--ok); } .pill.warn { color: #ffb454; border-color: #5a4524; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#main { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 32px 48px; }
.page { max-width: 1120px; margin: 0 auto; }
.page.wide { max-width: none; }
.banner { background: #22192e; border: 1px solid var(--accent); border-radius: 12px; padding: 12px 16px; display: flex; gap: 14px; align-items: center; margin-bottom: 20px; font-size: 13px; }
.banner .grow { flex: 1; }

/* ===== Seiten ===== */
.hero { text-align: center; padding: 14px 0 10px; }
.hero h1 { font-size: 34px; letter-spacing: -.5px; }
.hero p { color: var(--muted); margin: 8px auto 20px; max-width: 520px; }
.btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-row.left { justify-content: flex-start; }
button.pillbtn { border-radius: 999px; padding: 8px 16px; display: inline-flex; align-items: center; gap: 8px; }
.steps { display: flex; gap: 22px; justify-content: center; margin: 22px 0 36px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.step { display: inline-flex; align-items: center; gap: 8px; }
.step .tick { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 10px; color: transparent; }
.step.done { color: var(--text); } .step.done .tick { background: var(--accent); border-color: var(--accent); color: #fff; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 12px; }
.section-head h2 { font-size: 18px; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.page-head .grow { flex: 1; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.grid.big { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-decoration: none; display: block; }
a.card:hover, .card.click:hover { border-color: var(--accent); }
.card.dashed { border-style: dashed; background: transparent; display: grid; place-items: center; min-height: 120px; color: var(--muted); cursor: pointer; }
.card.dashed:hover { color: var(--text); }
.card h3 { font-size: 15px; margin: 10px 0 4px; }
.card p { margin: 0; color: var(--muted); font-size: 13px; }
.card .meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
.thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; margin-bottom: 12px;
  background: repeating-conic-gradient(#20232f 0% 25%, #191b25 0% 50%) 50% / 20px 20px; }
.thumb iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); }
.badge.owner { color: #ffd479; } .badge.ok { color: var(--ok); } .badge.bad { color: var(--danger); }
.tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs button { background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 12px; color: var(--muted); }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
table.list { width: 100%; border-collapse: collapse; }
table.list th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .05em; }
table.list td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list tr:last-child td { border-bottom: none; }
.who { display: flex; align-items: center; gap: 10px; }
.form-grid { display: grid; gap: 12px; max-width: 560px; }
.form-grid .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; font: inherit; color: inherit; resize: vertical; min-height: 80px; }
textarea:focus { outline: none; border-color: var(--accent); }
.suggest { position: relative; }
.suggest .menu { left: 0; right: 0; top: 100%; margin-top: 4px; min-width: 0; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.scope-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; font-size: 13px; font-family: ui-monospace, monospace; }
.scope-list .ok { color: var(--ok); } .scope-list .bad { color: var(--danger); }
.danger-zone { border-color: #4a2330; }
.stack { display: grid; gap: 16px; }
.opt { display: grid; gap: 4px; }
.bar { height: 8px; border-radius: 99px; background: var(--panel2); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--accent); }
.crumb { color: var(--muted); text-decoration: none; } .crumb:hover { color: var(--text); }

/* Dialog + Befehlspalette */
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: start center; padding-top: 14vh; z-index: 80; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px; width: min(460px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal h3 { font-size: 17px; margin-bottom: 14px; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.palette { width: min(560px, 92vw); padding: 10px; }
.palette input { border: none; background: transparent; font-size: 15px; padding: 10px; }
.palette .results { max-height: 340px; overflow-y: auto; margin-top: 4px; border-top: 1px solid var(--line); padding-top: 6px; }
.palette .res { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.palette .res.sel, .palette .res:hover { background: var(--panel2); }
.palette .res .muted { margin-left: auto; font-size: 12px; }
.spin { color: var(--muted); padding: 30px 0; text-align: center; }

#banner .banner { margin: 16px 32px 0; }
#banner:empty { display: none; }

/* ===== Element-Panel (kompakt) ===== */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.panel.elements { display: flex; flex-direction: column; padding: 0; max-height: calc(100vh - 150px); } /* wird vom Editor passend zur sichtbaren Höhe überschrieben */
@media (min-width: 1101px) { .panel.elements { position: sticky; top: 12px; z-index: 3; } }
@media (max-width: 1100px) { .panel.elements { max-height: none; } }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex: none; }
.panel-head h3 { margin: 0; flex: 1; font-size: 14px; }
.add-btns { display: flex; gap: 6px; }
.add-btns button { padding: 4px 10px; font-size: 12px; border-radius: 999px; }
#els { overflow-y: auto; padding: 10px; position: relative; flex: 1; min-height: 0; }
.el { border: 1px solid var(--line); background: var(--panel2); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.el-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; cursor: pointer; }
.el-head:hover { background: rgba(255,255,255,.04); }
.el-ico { color: var(--accent2); display: inline-flex; }
.el-type { font-weight: 600; font-size: 13px; }
.el-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.chev { display: inline-flex; color: var(--muted); transition: transform .15s; }
.el.open .chev { transform: rotate(180deg); }
.el-head .icon-btn { padding: 4px; }
.saved { color: var(--ok); font-size: 12px; opacity: 0; transition: opacity .2s; }
.saved.show { opacity: 1; }
.el-body { display: none; padding: 4px 10px 10px; border-top: 1px solid var(--line); }
.el.open .el-body { display: block; }
.frow { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.fld label { font-size: 11px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fld input { padding: 5px 7px; font-size: 13px; }
.fld input[type=color] { padding: 2px; height: 30px; }
.events { margin-top: 10px; }
.events > label { font-size: 11px; }
.erow { display: grid; grid-template-columns: auto 74px minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-top: 6px; }
.erow input[type=checkbox] { width: auto; }
.erow input[type=text] { padding: 4px 7px; font-size: 12px; }
.erow button { padding: 3px 8px; font-size: 12px; }
.elabel { font-size: 12px; color: var(--muted); }

/* Niedrige Fenster: Navigation rückt zusammen, damit möglichst nichts gescrollt werden muss */
@media (max-height: 760px) {
  .nav-item { padding-top: 6px; padding-bottom: 6px; }
  .nav-group { margin-top: 9px; }
  .nav-search { margin: 2px 0 4px; padding: 6px 12px; }
  .ws-switch { padding-top: 6px; padding-bottom: 6px; }
}
@media (max-height: 650px) {
  .nav-recent { display: none; }
  .nav-item { padding-top: 5px; padding-bottom: 5px; }
  .nav-user { margin-top: 2px; padding-top: 6px; padding-bottom: 6px; }
}

/* ===== Editor-Seite: alles in einem Fenster, nur die Elementliste scrollt ===== */
#main.editor-page { display: flex; flex-direction: column; padding: 14px 24px 16px; }
.editor-page .head { flex: none; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.editor-page .head h2 { font-size: 20px; }
.editor-page .urlbox { flex: 1; min-width: 260px; max-width: 640px; margin: 0 0 0 auto; }
.editor-page .cols { flex: 1; min-height: 380px; align-items: stretch; }
.editor-page .preview { position: static; display: flex; flex-direction: column; min-height: 0; z-index: auto; }
.preview-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; flex: none; }
.preview-top label { margin: 0; }
.preview-stage { flex: 1; min-height: 0; display: grid; place-items: start center; overflow: hidden; }
.editor-page .preview-wrap { width: auto; flex: none; }
.preview .hint { font-size: 12px; margin-top: 8px; flex: none; }
.editor-page .panel.elements { position: static; max-height: none; min-height: 0; }
@media (max-width: 1100px) {
  .editor-page .cols { display: block; min-height: 0; }
  .preview-stage { display: block; }
  .editor-page .panel.elements { margin-top: 16px; }
}

.editor-page .head button { white-space: nowrap; }

/* Protokoll */
.log-changes { font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-word; }
.log-changes s { opacity: .7; }
table.list td .who .avatar { width: 22px; height: 22px; font-size: 11px; }
table.list.log td:nth-child(1) { width: 150px; } table.list.log td:nth-child(2) { width: 190px; }

/* Aktivität / Verlauf */
.activity.plain { padding: 0; }
.log-item { padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.log-item:last-child { border-bottom: none; }
.log-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 2px; }
.log-meta .avatar { width: 20px; height: 20px; font-size: 10px; }
.ptabs { display: flex; gap: 2px; flex: 1; }
.ptabs button { background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 4px 10px; font-weight: 600; color: var(--muted); }
.ptabs button.active { color: var(--text); border-bottom-color: var(--accent); }
#ov-log { overflow-y: auto; padding: 10px 12px; flex: 1; min-height: 0; }

/* Rollen & Rechte */
.modal.wide { width: min(680px, 94vw); max-height: 82vh; display: flex; flex-direction: column; }
.modal.wide .perm-scroll { overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.backdrop:has(.modal.wide) { padding-top: 7vh; }
.perm-group { margin-top: 14px; }
.perm-group h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.perm-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--text); font-size: 13px; margin: 0; }
.perm-row:hover { background: var(--panel2); }
.perm-row input[type=checkbox] { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.perm-row.locked { opacity: .45; cursor: not-allowed; }
.perm-row.locked:hover { background: transparent; }
.perm-tools { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 12px; }
.perm-tools button { padding: 3px 10px; font-size: 12px; }
.form-err { color: var(--danger); font-size: 12px; min-height: 16px; margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
button:disabled { opacity: .4; cursor: not-allowed; }
button:disabled:hover { border-color: var(--line); color: inherit; }
select:disabled, input:disabled { opacity: .6; }

/* ===== Farben pro Funktion (--tone = RGB-Tripel, von der Navigation/Seite gesetzt) ===== */
#main { --tone: 139,108,255; }
#nav { background: linear-gradient(180deg, #13121d 0%, var(--side) 220px); }
.nav-item { position: relative; transition: background .12s; }
.nav-item .icon { color: rgb(var(--tone)); }
.nav-item:hover { background: rgba(var(--tone), .10); }
.nav-item.active { background: rgba(var(--tone), .16); color: #fff; }
.nav-item.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: rgb(var(--tone)); box-shadow: 0 0 12px rgba(var(--tone), .7); }
.nav-item.small .icon { opacity: .75; }
.nav-group { color: #7a7f99; text-transform: uppercase; font-size: 10px; letter-spacing: .1em; }
.nav-search:hover { border-color: rgba(139,108,255,.5); }

/* Seitenkopf mit farbigem Symbol */
.page-head .pico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: linear-gradient(145deg, rgba(var(--tone), .30), rgba(var(--tone), .10)); color: rgb(var(--tone)); border: 1px solid rgba(var(--tone), .35); box-shadow: 0 6px 20px rgba(var(--tone), .18); }
.page-head .pico .icon { width: 21px; height: 21px; }
.tabs button.active { border-bottom-color: rgb(var(--tone)); }
.tabs button:hover { color: var(--text); border-color: transparent; border-bottom-color: rgba(var(--tone), .5); }
a.card:hover, .card.click:hover { border-color: rgba(var(--tone), .65); box-shadow: 0 8px 24px rgba(var(--tone), .12); }
.bar > i { background: linear-gradient(90deg, rgb(var(--tone)), rgba(var(--tone), .6)); }
.section-head h2 { display: flex; align-items: center; gap: 10px; }
.section-head h2::before { content: ""; width: 4px; height: 18px; border-radius: 3px; background: rgb(var(--tone)); }
.step.done .tick { background: rgb(var(--tone)); border-color: rgb(var(--tone)); }

/* Home */
.hero { position: relative; isolation: isolate; padding: 30px 0 14px; }
.hero::before { content: ""; position: absolute; inset: -28px -40px 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 210px at 22% 0%, rgba(139,108,255,.26), transparent 70%),
              radial-gradient(460px 190px at 78% 8%, rgba(255,92,138,.18), transparent 70%),
              radial-gradient(420px 170px at 52% 100%, rgba(56,200,232,.13), transparent 70%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, #000 60%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, #000 60%, transparent); mask-composite: intersect; }
.hero h1 { font-size: 40px; letter-spacing: -.8px; }
.hero h1 .grad { background: linear-gradient(90deg, #b9a4ff, #ff8fb4 60%, #ffc27a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-search { display: flex; align-items: center; gap: 10px; width: min(560px, 100%); margin: 0 auto 18px; padding: 12px 16px; border-radius: 999px; text-align: left;
  background: rgba(20,22,29,.85); border: 1px solid #2f3450; color: var(--muted); backdrop-filter: blur(6px); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.hero-search:hover { border-color: #8b6cff; color: var(--text); }
.hero-search .icon { width: 17px; height: 17px; }
.qa { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; color: var(--text);
  background: rgba(var(--tone), .12); border: 1px solid rgba(var(--tone), .35); transition: transform .12s, background .12s, box-shadow .12s; }
.qa .icon { color: rgb(var(--tone)); }
.qa:hover { background: rgba(var(--tone), .22); border-color: rgba(var(--tone), .7); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--tone), .2); }
.card.dashed:hover { border-color: rgba(var(--tone), .6); }

/* Funktionskarten im Karussell */
.carousel { position: relative; }
.track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 10px; }
.track::-webkit-scrollbar { display: none; }
.fcard { flex: 0 0 258px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 18px; min-height: 200px; border-radius: 18px; text-decoration: none; color: inherit;
  background: linear-gradient(160deg, rgba(var(--tone), .26), rgba(var(--tone), .07) 58%, var(--panel));
  border: 1px solid rgba(var(--tone), .30); transition: transform .15s, border-color .15s, box-shadow .15s; }
.fcard:hover { transform: translateY(-3px); border-color: rgba(var(--tone), .65); box-shadow: 0 14px 34px rgba(var(--tone), .18); }
.fcard .frow { display: flex; align-items: center; justify-content: space-between; }
.fcard .ibox { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--tone), .24); color: rgb(var(--tone)); }
.fcard .ibox .icon { width: 19px; height: 19px; }
.fcard .ftag { font-size: 10px; font-weight: 600; letter-spacing: .04em; padding: 2px 9px; border-radius: 999px; background: rgba(var(--tone), .18); color: rgb(var(--tone)); }
.fcard h3 { font-size: 16px; margin: 8px 0 0; }
.fcard p { margin: 0; color: #aab0c8; font-size: 13px; }
.fcard .cta { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: rgb(var(--tone)); }
.fcard .cta .icon { width: 14px; height: 14px; transition: transform .15s; }
.fcard:hover .cta .icon { transform: translateX(3px); }
.car-btn { position: absolute; top: 50%; transform: translateY(-60%); width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  background: rgba(15,16,21,.92); border: 1px solid #343a55; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.car-btn.prev { left: -12px; } .car-btn.next { right: -12px; }
.car-btn:hover { border-color: var(--accent2); }

/* Anmeldeseite */
#login { background: radial-gradient(600px 300px at 30% 20%, rgba(139,108,255,.22), transparent 70%), radial-gradient(500px 260px at 75% 75%, rgba(255,92,138,.16), transparent 70%), var(--bg); }
.car-btn[hidden] { display: none; }

/* ===== Logo-Rotationen ===== */
.rot-thumb { container-type: size; aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: 10px; margin-bottom: 12px; overflow: hidden;
  background: repeating-conic-gradient(#20232f 0% 25%, #191b25 0% 50%) 50% / 20px 20px; }
.rot-thumb-box { width: min(100cqw, 100cqh * var(--ar, 1.78)); aspect-ratio: var(--ar, 1.78); }
.rot-page { max-width: none; }
.rot-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.rot-bar .grow { flex: 1; }
.rot-name { width: min(340px, 100%); font-size: 20px; font-weight: 700; background: transparent; border-color: transparent; padding: 6px 10px; }
.rot-name:hover:not(:disabled) { border-color: var(--line); }
.rot-name:focus { background: var(--bg); }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 12px; color: var(--muted); margin: 0; }
.chip b { color: var(--text); font-weight: 600; }
.chip input[type=range] { width: 90px; padding: 0; accent-color: rgb(var(--tone)); border: none; background: transparent; }
.chip .icon-btn { padding: 3px; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch .knob { position: absolute; inset: 0; border-radius: 999px; background: #2a2e3f; transition: background .15s; }
.switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + .knob { background: rgb(var(--tone)); }
.switch input:checked + .knob::after { transform: translateX(16px); }
.switch input:focus-visible + .knob { outline: 2px solid #fff; outline-offset: 2px; }
.rot-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
.rot-main { display: grid; gap: 10px; min-width: 0; }
.rot-canvas { position: relative; display: grid; place-items: center; height: clamp(300px, 52vh, 600px); border-radius: 14px; border: 1px solid var(--line); overflow: hidden;
  background: repeating-conic-gradient(#1c1f2a 0% 25%, #151821 0% 50%) 50% / 22px 22px; }
.rot-box { outline: 1px dashed rgba(var(--tone), .7); outline-offset: 0; background: rgba(255,255,255,.02); }
.rot-empty { position: absolute; inset: auto 0 14px; text-align: center; color: var(--muted); font-size: 12px; pointer-events: none; }
.rot-empty[hidden], .rot-timeline[hidden] { display: none; }
.rot-timeline { position: relative; display: flex; gap: 2px; height: 34px; border-radius: 9px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); padding: 3px; }
.rot-timeline .seg { min-width: 4px; border-radius: 6px; background: rgba(var(--tone), .35); display: flex; align-items: center; padding: 0 8px; overflow: hidden; cursor: pointer; font-size: 11px; color: #fff; white-space: nowrap; }
.rot-timeline .seg span { overflow: hidden; text-overflow: ellipsis; }
.rot-timeline .seg.pause { background: repeating-linear-gradient(135deg, #2a2e3f 0 6px, #232636 6px 12px); color: var(--muted); }
.rot-timeline .seg:hover { filter: brightness(1.25); }
.rot-timeline .seg.sel { outline: 2px solid #fff; outline-offset: -2px; }
.playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 8px #fff; pointer-events: none; }
.rot-time { font-size: 12px; font-variant-numeric: tabular-nums; min-height: 18px; }
.rot-side { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.rot-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rot-side-head button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; }
.rot-list { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 330px); min-height: 220px; overflow-y: auto; padding: 2px; }
.rot-item { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 4px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); cursor: pointer; outline: none; }
.rot-item:hover { border-color: rgba(var(--tone), .5); }
.rot-item:focus-visible { border-color: #fff; }
.rot-item.sel { border-color: rgb(var(--tone)); box-shadow: 0 0 0 1px rgb(var(--tone)); }
.rot-item.live::after { content: ""; position: absolute; right: 8px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.rot-item.off { opacity: .55; }
.rot-item.dragging { opacity: .35; }
.rot-item.drop-before::before, .rot-item.drop-after::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px; background: rgb(var(--tone)); }
.rot-item.drop-before::before { top: -6px; } .rot-item.drop-after::after { bottom: -6px; right: 0; top: auto; left: 0; width: auto; box-shadow: none; }
.rot-item .grip { display: grid; place-items: center; color: var(--muted); cursor: grab; width: 16px; flex: none; }
.rot-item .rt { width: 52px; height: 36px; border-radius: 7px; object-fit: contain; flex: none;
  background: repeating-conic-gradient(#20232f 0% 25%, #191b25 0% 50%) 50% / 10px 10px; }
.rot-item .rt.pause { display: grid; place-items: center; color: var(--muted); background: #20232f; }
.rot-item .rbody { flex: 1; min-width: 0; }
.rot-item .rname { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-item .rsub { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.rot-item .dur { width: 58px; padding: 1px 4px; font-size: 11px; border-radius: 6px; }
.rot-item .ractions { display: flex; flex: none; }
.rot-item .ractions .icon-btn { padding: 4px; }
.rot-item .ractions .icon { width: 15px; height: 15px; }
.rot-dock { position: sticky; bottom: -32px; z-index: 5; display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px; border-radius: 14px;
  background: rgba(20,22,29,.94); backdrop-filter: blur(8px); border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0,0,0,.45); flex-wrap: wrap; }
.rot-dock .grow { flex: 1; }
.rot-dock button { display: inline-flex; align-items: center; gap: 8px; }
.dirty-note { font-size: 12px; color: var(--muted); }
.dirty-note.on { color: #ffb454; }
.dropzone { display: grid; justify-items: center; gap: 4px; padding: 26px 16px; border: 2px dashed #343a55; border-radius: 14px; text-align: center; cursor: pointer; color: var(--text); }
.dropzone:hover, .dropzone.over, .dropzone:focus-visible { border-color: rgb(var(--tone)); background: rgba(var(--tone), .08); outline: none; }
.dropzone .icon { width: 26px; height: 26px; color: rgb(var(--tone)); }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.asset-pick { padding: 0; height: 66px; border-radius: 10px; overflow: hidden; position: relative; background: repeating-conic-gradient(#20232f 0% 25%, #191b25 0% 50%) 50% / 12px 12px; }
.asset-pick img { width: 100%; height: 100%; object-fit: contain; display: block; }
.asset-pick.on { border-color: rgb(var(--tone)); box-shadow: 0 0 0 2px rgb(var(--tone)); }
.rot-link { display: grid; gap: 4px; margin-top: 8px; font-size: 12px; }
.rot-link a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent2); text-decoration: none; font-weight: 600; }
@media (max-width: 1050px) { .rot-grid { grid-template-columns: 1fr; } .rot-list { max-height: 420px; } }
.panel-head { flex-wrap: wrap; }
.add-btns { flex-wrap: wrap; }
.rot-grid { grid-template-columns: minmax(0, 1fr) 440px; }
.rot-item .rsub { flex-wrap: nowrap; white-space: nowrap; }
.rot-item .dur { width: 50px; }

/* ===== Overlay-Editor: Werkzeugleiste, Anfasser, Textbearbeitung ===== */
.preview-stage { position: relative; }
.etb { position: absolute; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; width: max-content; max-width: calc(100% - 8px); padding: 5px 7px;
  background: rgba(17,18,24,.97); border: 1px solid #2c3046; border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,.6); backdrop-filter: blur(8px); }
.etb[hidden] { display: none; }
.tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  color: #d4d8ec; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; position: relative; }
.tb-btn:hover { background: #262a3b; border-color: transparent; color: #fff; }
.tb-btn.on { background: #313653; color: #fff; }
.tb-btn.danger { color: #ff6b86; } .tb-btn.danger:hover { background: rgba(255,92,122,.16); border-color: transparent; color: #ff6b86; }
.tb-btn .icon { width: 16px; height: 16px; }
.tb-btn .glyph { font-size: 14px; line-height: 1; font-family: Georgia, serif; }
.tb-btn.tb-text { padding: 0 9px; }
.tb-sep { width: 1px; height: 18px; background: #2c3046; margin: 0 4px; flex: none; }
.tb-font { padding: 0 8px; } .tb-font .fname { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-font .icon:last-child { width: 12px; height: 12px; opacity: .7; }
.tb-color { overflow: hidden; }
.tb-color .swatch { position: absolute; left: 7px; right: 7px; bottom: 3px; height: 3px; border-radius: 2px; }
.tb-color input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: none; }
.tb-size { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0 4px; color: #a4a9c4; font-size: 11px; font-weight: 700; }
.tb-size input { width: 46px; height: 26px; padding: 0 4px; font-size: 13px; text-align: center; border-radius: 7px; background: #0f1016; }
.etb-pop { position: absolute; z-index: 7; background: rgba(17,18,24,.98); border: 1px solid #2c3046; border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.65); padding: 6px; }
.pop-list { display: flex; flex-direction: column; gap: 1px; min-width: 200px; max-height: 280px; overflow-y: auto; }
.pop-list.narrow { min-width: 210px; }
.pop-item { text-align: left; background: transparent; border: none; border-radius: 7px; padding: 7px 10px; font-size: 14px; color: #e3e6f6; cursor: pointer; }
.pop-item:hover { background: #262a3b; } .pop-item.on { background: #313653; }
.pop-item.danger { color: #ff6b86; }
.pop-sep { height: 1px; background: #2c3046; margin: 4px 2px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: 296px; max-height: 240px; overflow-y: auto; }
.emoji { background: transparent; border: none; font-size: 20px; padding: 4px 0; border-radius: 7px; cursor: pointer; line-height: 1.2; }
.emoji:hover { background: #262a3b; }
.pop-form { display: grid; gap: 10px; width: 270px; padding: 6px; }
.pop-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pop-form button.primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* Anfasser: alle acht + Größenanzeige */
.corner.t, .corner.b { left: 50%; margin-left: -5.5px; cursor: ns-resize; } .corner.t { top: 0; } .corner.b { bottom: 0; }
.corner.l, .corner.r { top: 50%; margin-top: -5.5px; cursor: ew-resize; } .corner.l { left: 0; } .corner.r { right: 0; }
.drag-handle .corner { transform: translate(var(--tx, 0), var(--ty, 0)); }
.corner.tl { --tx: -50%; --ty: -50%; } .corner.tr { --tx: 50%; --ty: -50%; } .corner.bl { --tx: -50%; --ty: 50%; } .corner.br { --tx: 50%; --ty: 50%; }
.corner.t { --ty: -50%; } .corner.b { --ty: 50%; } .corner.l { --tx: -50%; } .corner.r { --tx: 50%; }
.drag-handle.sel { border: 1.5px solid #4a9dff; background: rgba(74,157,255,.08); }
.drag-handle.sel .corner { border-color: #4a9dff; }
.drag-handle .size-tag { display: none; position: absolute; left: 50%; top: 100%; margin-top: 10px; transform: translateX(-50%); padding: 1px 8px; border-radius: 5px; background: #3b82f6; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.drag-handle.sel .size-tag { display: block; }
.drag-handle.locked { cursor: not-allowed; border-style: solid; }
.drag-handle.locked .corner { display: none !important; }
.drag-handle.ghost-el { border-color: rgba(255,255,255,.25); }
.inline-edit { position: absolute; z-index: 4; pointer-events: auto; margin: 0; padding: 0; min-height: 0; resize: none; overflow: hidden; border: none; outline: 1px solid #4a9dff; background: rgba(0,0,0,.25); border-radius: 0;
  white-space: pre-wrap; box-sizing: border-box; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.inline-edit:focus { border: none; }
.rot-link { display: grid; gap: 4px; }
.etb { gap: 1px; padding: 4px 6px; }
.tb-btn { min-width: 28px; padding: 0 4px; }
.tb-btn.tb-text { padding: 0 7px; }
.tb-sep { margin: 0 3px; }
.tb-font { padding: 0 6px; } .tb-font .fname { max-width: 78px; }
.tb-size { padding: 0 2px; } .tb-size input { width: 42px; }
.drag-handle.sel .tag { display: none; }
.drag-handle.ghost-el { border-style: dashed; border-color: rgba(255,255,255,.35); background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px); }
.drag-handle.ghost-el .tag { display: block !important; background: #555b73; }
.drag-handle.sel.ghost-el .tag { display: block !important; }

/* ===== Kontextmenü (Rechtsklick im Overlay-Editor) ===== */
.ctx-menu { position: fixed; z-index: 120; min-width: 230px; padding: 6px; background: rgba(17,18,24,.98); border: 1px solid #2c3046; border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.7); backdrop-filter: blur(8px); }
.ctx-menu.sub { display: none; position: absolute; left: 100%; top: -7px; margin-left: 4px; z-index: 121; }
.ctx-menu.sub.flip { left: auto; right: 100%; margin-left: 0; margin-right: 4px; }
.ctx-wrap { position: relative; }
.ctx-wrap:hover > .ctx-menu.sub, .ctx-wrap.open > .ctx-menu.sub { display: block; }
.ctx-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 7px; padding: 7px 10px; font-size: 13px; color: #e3e6f6; cursor: pointer; }
.ctx-item:hover:not(:disabled), .ctx-item:focus-visible { background: #2a2f45; outline: none; border: none; }
.ctx-item:disabled { opacity: .38; cursor: default; }
.ctx-item.danger { color: #ff6b86; } .ctx-item.danger:hover:not(:disabled) { background: rgba(255,92,122,.16); }
.ctx-item .lbl { flex: 1; white-space: nowrap; }
.ctx-item .hint { color: #7d829c; font-size: 11px; margin-left: 18px; }
.ctx-item .chk { width: 14px; color: #8bd0ff; font-weight: 700; }
.ctx-item .arrow { display: inline-flex; opacity: .7; } .ctx-item .arrow .icon { width: 13px; height: 13px; }
.ctx-sep { height: 1px; background: #2c3046; margin: 5px 4px; }

/* ===== Dialog „Element hinzufügen“ ===== */
.modal.addel { width: min(480px, 94vw); padding: 20px 20px 16px; }
.add-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.add-head h3 { margin: 0; font-size: 18px; }
.add-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); margin-bottom: 12px; color: var(--muted); }
.add-search input { border: none; background: transparent; padding: 10px 0; }
.add-list { max-height: 46vh; overflow-y: auto; display: grid; gap: 10px; }
.add-group { font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 2px 6px; }
.add-rows { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.add-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 14px; background: transparent; border: none; border-bottom: 1px solid var(--line); border-radius: 0; cursor: pointer; }
.add-row:last-child { border-bottom: none; }
.add-row:hover { background: var(--panel2); }
.add-row.sel { background: rgba(124,92,255,.16); }
.add-row .ai { color: var(--muted); display: inline-flex; } .add-row.sel .ai { color: var(--accent2); }
.add-row .at { flex: 1; display: grid; gap: 1px; } .add-row .at b { font-size: 14px; } .add-row .at small { color: var(--muted); font-size: 12px; }
.add-row > .icon:last-child { color: var(--accent2); }
.add-foot { display: flex; gap: 10px; margin-top: 14px; }
.add-foot button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.add-dialog > .opt { margin-top: 12px; }

/* ===== Zähler & Timer ===== */
.tb-stepper { display: inline-flex; align-items: center; gap: 1px; }
.tb-stepper input { width: 54px; height: 26px; padding: 0 4px; text-align: center; font-size: 13px; font-weight: 700; border-radius: 7px; background: #0f1016; }
.clrwrap { display: flex; gap: 4px; } .clrwrap input { flex: 1; min-width: 0; }
.clrwrap .clr { padding: 0 8px; line-height: 1; }
input.unset[type=color] { opacity: .45; }
.timer-ctl { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.timer-ctl button { display: inline-flex; align-items: center; gap: 6px; }
.entries { display: grid; gap: 6px; }
.entry { display: flex; align-items: center; gap: 4px; }
.entry .en { flex: 1; min-width: 0; }
.entry .ev { width: 64px; text-align: center; font-weight: 700; }
.entry .tb-btn { color: #d4d8ec; flex: none; }
.entry-add { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 10px; font-size: 12px; }
.entries-pop { width: 330px; max-height: 320px; overflow-y: auto; }
.clrwrap input { width: auto !important; flex: 1 1 0; min-width: 0; }
.clrwrap .clr { flex: none; width: 26px; padding: 0; }

/* Rückfrage in der Seite */
.modal.confirm { width: min(440px, 92vw); }
/* Auslöser-Fenster: breiter, scrollt in der Mitte, Knöpfe bleiben unten sichtbar */
.modal.tr-modal { width: min(680px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.modal.tr-modal .tr-editor { overflow-y: auto; min-width: 0 !important; padding-right: 6px; margin-right: -6px; }
.modal.tr-modal .form-grid { max-width: none; }
.backdrop:has(.modal.tr-modal) { padding-top: 5vh; }
.confirm-text p { margin: 0 0 10px; color: #c9cde0; line-height: 1.5; }
.confirm-text p:last-child { margin-bottom: 0; }
button.primary.danger-fill { background: var(--danger); border-color: var(--danger); color: #fff; }
button.primary.danger-fill:hover { background: #ff7a93; border-color: #ff7a93; }

/* ===== Steuerung ===== */
.ctl-page .page-head button { display: inline-flex; align-items: center; gap: 8px; }
.kb-toggle.on { background: rgba(var(--tone), .2); border-color: rgb(var(--tone)); color: #fff; }
.ctl-keyhint { position: sticky; top: -20px; z-index: 5; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: #2a2412; border: 1px solid rgba(250,204,21,.5); color: #ffe9a0; font-size: 13px; }
.ctl-keyhint[hidden] { display: none; }
.ctl-section { margin-bottom: 8px; }
.ctl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ctl-tile { background: linear-gradient(165deg, rgba(var(--tone), .10), var(--panel) 45%); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ctl-head { display: flex; align-items: center; gap: 12px; }
.ctl-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--tone), .22); color: rgb(var(--tone)); flex: none; }
.ctl-ico .icon { width: 19px; height: 19px; }
.ctl-name { font-weight: 700; font-size: 15px; } .ctl-sub { font-size: 11px; color: var(--muted); }
.ctl-body { display: grid; gap: 10px; }
.ctl-label { color: var(--muted); font-size: 13px; } .ctl-label[hidden] { display: none; }
.ctl-val { font-size: 64px; font-weight: 800; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -1px; padding: 6px 0; }
.ctl-val.sm { font-size: 32px; } .ctl-val.time { font-size: 60px; }
.ctl-val.time.running { color: var(--ok); } .ctl-val.time.done { color: var(--danger); animation: ctlblink 1s ease-in-out infinite; }
@keyframes ctlblink { 50% { opacity: .35; } }
.ctl-btns { display: flex; gap: 10px; }
.ctl-btn { position: relative; flex: 1; min-height: 68px; padding: 8px 10px; border-radius: 16px; font-size: 26px; font-weight: 800; line-height: 1; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; touch-action: manipulation; user-select: none; }
.ctl-btn.plus { background: rgba(61,220,151,.16); border-color: rgba(61,220,151,.5); color: #7ff0bd; }
.ctl-btn.minus { background: rgba(255,92,122,.14); border-color: rgba(255,92,122,.45); color: #ff8aa0; }
.ctl-btn.ghost { background: var(--panel2); border-color: var(--line); color: var(--text); font-size: 15px; font-weight: 600; }
.ctl-btn.wide { flex: 2; }
.ctl-btn.sm { min-height: 48px; min-width: 56px; flex: none; font-size: 22px; border-radius: 12px; }
.ctl-btn:active, .ctl-btn.fired { transform: scale(.96); filter: brightness(1.35); }
.ctl-btn .keybadge { display: none; font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; }
.ctl-btn .keybadge.set { display: inline-block; }
.editing-keys .ctl-btn .keybadge { display: inline-block; background: rgba(250,204,21,.18); color: #ffe27a; }
.editing-keys .ctl-btn .keybadge.set { background: rgba(250,204,21,.32); }
.ctl-btn.sm .keybadge { position: absolute; bottom: 2px; font-size: 9px; padding: 0 5px; }
.ctl-set { display: flex; gap: 8px; }
.ctl-set input { flex: 1; min-width: 0; }
.ctl-set button { white-space: nowrap; } .ctl-set .ghost { background: transparent; }
.ctl-bar { height: 12px; border-radius: 999px; background: var(--panel2); overflow: hidden; } .ctl-bar > i { display: block; height: 100%; background: linear-gradient(90deg, rgb(var(--tone)), rgba(var(--tone), .6)); transition: width .4s; }
.ctl-hearts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 34px; }
.ctl-hearts .heart { color: #3a3f55; } .ctl-hearts .heart.on { color: #ff4d6d; } .ctl-hearts .icon { width: 30px; height: 30px; } .ctl-hearts .heart svg { fill: currentColor; }
.ctl-entries { display: grid; gap: 8px; }
.ctl-entry { display: flex; align-items: center; gap: 8px; }
.ctl-entry .en { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctl-entry .ev { min-width: 54px; text-align: right; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Stream-Deck-Dialog */
.sd-tokens { display: grid; gap: 8px; margin-bottom: 10px; }
.sd-token { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; margin: 0; color: var(--text); cursor: pointer; }
.sd-token.sel { border-color: rgb(var(--tone)); background: rgba(var(--tone), .08); }
.sd-token input { width: auto; } .sd-token small { display: block; color: var(--muted); font-size: 11px; }
.sd-new { display: flex; gap: 8px; margin-bottom: 14px; } .sd-new button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sd-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.sd-scroll { max-height: 40vh; display: grid; gap: 12px; }
.sd-gname { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; } .sd-gname .icon { color: rgb(var(--tone)); }
.sd-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 5px; }
.sd-row .sl { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-row input { font-family: ui-monospace, monospace; font-size: 11px; padding: 5px 8px; }
.sd-row button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 12px; }
@media (max-width: 700px) { .ctl-grid { grid-template-columns: 1fr; } .ctl-val { font-size: 56px; } .sd-row { grid-template-columns: 1fr auto; } .sd-row .sl { grid-column: 1 / -1; } }
.sd-howto { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); font-size: 12px; display: grid; gap: 6px; }
.sd-howto ol { margin: 0; padding-left: 18px; display: grid; gap: 2px; color: #c9cde0; }
.fld input[type=checkbox] { width: 18px; height: 18px; margin: 4px 0; accent-color: var(--accent); }
.fld input[type=checkbox] { width: 18px; height: 18px; margin: 4px 0; accent-color: var(--accent); }
.ctl-val.sm.running { color: var(--ok); }

/* Das hidden-Attribut gilt überall – auch bei Elementen, die per CSS ein eigenes display haben (z. B. .opt, .ctl-label). */
[hidden] { display: none !important; }
.tb-volume { display: inline-flex; align-items: center; gap: 2px; color: #a4a9c4; }
.tb-volume > .icon { width: 16px; height: 16px; margin-right: 2px; }
.ctl-vol { display: grid; gap: 6px; padding-top: 4px; border-top: 1px solid var(--line); }
.ctl-vol-head { display: flex; justify-content: space-between; align-items: baseline; }
.ctl-vol-val { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ctl-vol-row { display: flex; align-items: center; gap: 8px; }
.ctl-vol-row input[type=range] { flex: 1; padding: 0; accent-color: rgb(var(--tone)); border: none; background: transparent; height: 32px; }

/* ---- Kanal-Freigabe ---- */
.ws-switch .ws-lock, .menu .ws-lock { display: inline-flex; color: #ffb454; }
.ws-switch .ws-lock .icon svg, .menu .ws-lock .icon svg { width: 14px; height: 14px; }
.nav-badge { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: #ffb454; color: #1b1308; font-size: 11px; font-weight: 700; text-align: center; }
.badge.warn { color: #ffb454; border-color: #5a4524; }
.locked-card { max-width: 640px; margin: 7vh auto 0; text-align: center; background: linear-gradient(180deg, var(--panel), var(--panel2)); border: 1px solid var(--line); border-radius: 18px; padding: 34px 30px 28px; }
.locked-ico { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 20px; display: grid; place-items: center; color: #ffb454; background: rgba(255,180,84,.12); border: 1px solid #5a4524; }
.locked-ico .icon svg { width: 30px; height: 30px; }
.locked-card h1 { font-size: 24px; margin: 0 0 10px; }
.locked-card p { color: var(--muted); line-height: 1.55; margin: 0 0 10px; }
.locked-card .locked-hint { font-size: 13px; margin-top: 14px; }
.locked-more { margin-top: 18px; text-align: left; }
.locked-more p { color: var(--text); margin-bottom: 10px; }
.locked-list { display: grid; gap: 8px; }
.locked-ws { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-align: left; }
.locked-ws .grow { font-weight: 600; }
tr.pending td { background: rgba(255,180,84,.05); }
.who { font-weight: 600; }
.muted.small { font-size: 12px; }
.locked-card .btn-row button { display: inline-flex; align-items: center; gap: 8px; }
.badge.req { color: #a99bff; border-color: #4a3f8f; background: rgba(124,92,255,.14); }
tr.request td { background: rgba(124,92,255,.08); }
.locked-status { display: flex; align-items: flex-start; gap: 10px; text-align: left; margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; background: rgba(61,220,151,.08); border: 1px solid rgba(61,220,151,.3); color: var(--text); line-height: 1.5; }
.locked-status .icon { color: var(--ok); flex: none; margin-top: 2px; }
.locked-status.warn { background: rgba(255,92,122,.08); border-color: rgba(255,92,122,.35); }
.locked-status.warn .icon { color: var(--danger); }
.locked-status span:not(.icon) { color: var(--muted); }
.locked-card .btn-row button { display: inline-flex; align-items: center; gap: 8px; }
#admin-add { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Herzen: Optik-Schalter in der Werkzeugleiste ---- */
.tb-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgba(255,255,255,.05); }
.tb-seg .tb-btn { height: 28px; }

/* ---- Suche in Freigaben und Admins ---- */
.search-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.search-field { position: relative; display: flex; align-items: center; flex: 1; max-width: 420px; color: var(--muted); }
.search-field > .icon { position: absolute; left: 12px; pointer-events: none; }
.search-field .icon svg { width: 16px; height: 16px; }
.search-input { width: 100%; padding-left: 36px; padding-right: 34px; }
.search-clear { position: absolute; right: 6px; width: 24px; height: 24px; font-size: 16px; line-height: 1; }

/* ---- Alerts: Übersicht und Editor ---- */
.al-card { padding: .5em .8em; border-radius: .35em; font: 700 1em sans-serif; text-shadow: 0 2px 6px rgba(0,0,0,.6); box-sizing: border-box; transition: opacity .45s, transform .45s; }
.al-card.pre { opacity: 0; transform: translateY(-20px); }
.al-card .al-sub { font-weight: 400; font-size: .7em; margin-top: .25em; opacity: .9; word-break: break-word; }
.al-stage { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); padding: 18px; background: repeating-conic-gradient(rgba(255,255,255,.04) 0 25%, transparent 0 50%) 0 0 / 22px 22px, #0b0d14; }
.al-stage.small { padding: 0; border-radius: 10px; }
.al-inner { position: absolute; left: 18px; top: 18px; transform-origin: top left; }
.al-stage.small .al-inner { left: 0; top: 0; }
.al-card-item .al-stage { pointer-events: none; }
.al-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .al-grid { grid-template-columns: 1fr; } }
.al-rows { display: grid; gap: 6px; }
.al-row { display: grid; grid-template-columns: 22px 92px minmax(0, 1fr) 30px 30px auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
.al-row:hover { background: var(--panel2); }
.al-row.sel { border-color: rgba(255,92,138,.5); background: rgba(255,92,138,.07); }
.al-row.off .elabel, .al-row.off input[type=text] { opacity: .45; }
.al-row .elabel { font-weight: 600; }
.al-row button { display: inline-flex; align-items: center; gap: 6px; }
.al-item { display: grid; gap: 6px; }
.al-detail { display: grid; gap: 12px; margin: 0 0 6px 30px; padding: 12px 14px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); }
.al-detail[hidden] { display: none; }
.al-detail .fld > label { font-size: 12px; color: var(--muted); }
.al-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.al-media { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.al-media button { display: inline-flex; align-items: center; gap: 6px; }
.al-thumb { height: 40px; max-width: 120px; object-fit: contain; border-radius: 6px; background: rgba(0,0,0,.35); }
.al-vol { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.al-vol input[type=range] { flex: 1; padding: 0; accent-color: rgb(var(--tone)); border: none; background: transparent; }
.al-row .icon-btn.on { color: rgb(var(--tone)); }
.al-img { display: block; margin: 0 auto .4em; max-width: 100%; object-fit: contain; }
.al-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; font-size: 12px; }
.al-chip { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-family: ui-monospace, monospace; }
.rot-bar .muted.on { color: #ffb454; }

/* ---- Magnet: Hilfslinien beim Verschieben und Skalieren (wie in OBS) ---- */
.snap-guide { position: absolute; background: #ff3b5c; pointer-events: none; z-index: 5; box-shadow: 0 0 0 1px rgba(255,59,92,.25); }
.snap-guide.x { top: 0; bottom: 0; width: 1px; margin-left: -.5px; }
.snap-guide.y { left: 0; right: 0; height: 1px; margin-top: -.5px; }

/* ---- Logo ---- */
.login-logo { display: block; margin: 0 auto 14px; filter: drop-shadow(0 8px 24px rgba(139,108,255,.35)); }
.brand { display: flex; align-items: center; gap: 9px; padding: 4px 10px 8px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 17px; letter-spacing: -.3px; }
.brand span span { color: var(--accent2); }
.brand img { display: block; flex: none; }
@media (max-height: 760px) { .brand { padding: 2px 10px 4px; font-size: 15px; } .brand img { width: 22px; height: 22px; } }

/* ---- Editor: Verlauf, Versionen, Verbindungs-Punkt ---- */
.hist-btns { display: inline-flex; gap: 4px; align-items: center; }
.hist-btns .icon-btn:disabled { opacity: .35; cursor: default; }
.ov-dot { width: 10px; height: 10px; border-radius: 50%; background: #5a6078; display: inline-block; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.06); }
.ov-dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(61,220,151,.22); }
.ver-dialog { min-width: min(560px, 80vw); }
.ver-list { display: grid; gap: 6px; max-height: 52vh; overflow: auto; }
.ver-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.ver-row .grow { flex: 1; min-width: 0; }

/* ---- Mehrfachauswahl, Abstandsanzeige, Ebenen sortieren ---- */
.drag-handle.msel { border-color: var(--accent2); background: rgba(124,92,255,.14); }
.drag-handle.msel .corner { display: none !important; }
.marquee { position: absolute; border: 1px solid var(--accent2); background: rgba(124,92,255,.14); pointer-events: none; z-index: 6; }
.tb-count { font-size: 12px; font-weight: 700; padding: 0 8px; color: var(--text); white-space: nowrap; }
.snap-dist.line { position: absolute; background: #ffb454; pointer-events: none; z-index: 5; }
.snap-dist.line.x { height: 1px; margin-top: -.5px; }
.snap-dist.line.y { width: 1px; margin-left: -.5px; }
.snap-dist.label { position: absolute; transform: translate(-50%, -50%); background: #ffb454; color: #1b1308; font: 700 10px/1 system-ui; padding: 2px 5px; border-radius: 999px; pointer-events: none; z-index: 6; }
.el-grip { display: inline-flex; align-items: center; color: var(--muted); cursor: grab; padding: 2px 0; margin-right: -2px; }
.el-grip:active { cursor: grabbing; }
.el.dragging-layer { opacity: .45; }
.el.drop-before { box-shadow: 0 -3px 0 0 var(--accent2); }
.el.drop-after { box-shadow: 0 3px 0 0 var(--accent2); }

.text-vars { margin-top: 8px; }
.text-vars summary { cursor: pointer; color: var(--accent2); font-size: 12px; }

/* Kanal: Vorlagen */
.preset-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); }

/* Steuerung: OBS */
.obs-scenes, .obs-audio { display: flex; flex-wrap: wrap; gap: 8px; }
.obs-scenes .ctl-btn, .obs-audio .ctl-btn { flex: 0 1 auto; min-height: 48px; font-size: 15px; font-weight: 600; padding: 8px 14px; }
.obs-scenes .ctl-btn.on { background: rgba(var(--tone), .22); border-color: rgb(var(--tone)); color: #fff; }
.obs-audio .ctl-btn.muted { background: rgba(255,92,122,.14); border-color: rgba(255,92,122,.45); color: #ff8aa0; }
.ctl-tile.t-obs { grid-column: 1 / -1; }

/* ===== Handy: Seitenleiste als ausklappbare Leiste, kompaktere Kopfzeile ===== */
.nav-toggle { display: none; }
#nav-backdrop { display: none; }
@media (max-width: 760px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  #nav { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 70; transform: translateX(-102%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.6); padding-top: calc(10px + env(safe-area-inset-top)); }
  body.nav-open #nav { transform: none; }
  body.nav-open #nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 65; }
  .nav-toggle { display: inline-flex; flex: none; }
  #topbar { padding: 0 12px; padding-top: env(safe-area-inset-top); height: calc(49px + env(safe-area-inset-top)); gap: 8px; }
  #topbar .pill { font-size: 0; gap: 0; padding: 8px; }
  #topbar .pill .dot { margin: 0; }
  #main { padding-left: 14px; padding-right: 14px; }
  .page-head { flex-wrap: wrap; row-gap: 10px; }
  .page-head .grow { flex: 1 1 calc(100% - 64px); min-width: 0; }   /* Knöpfe rutschen in eine eigene Zeile */
  .page-head > button, .page-head > a { flex: none; }
  .modal { max-height: 88vh; overflow-y: auto; }
  .backdrop { padding-top: 6vh; }
  .ctl-grid { grid-template-columns: 1fr; }
  .ctl-tile.t-obs { grid-column: auto; }
  .ctl-btn { min-height: 76px; }
  .toast, #toast { max-width: 92vw; }
}

/* Statistik */
.st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.st-tile { padding: 14px 16px; }
.st-fig-v { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.st-fig-l { color: var(--muted); font-size: 12px; }
.st-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.st-fig { padding: 10px 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); }
.st-chart { width: 100%; height: auto; color: var(--text); display: block; }
.st-table td, .st-table th { white-space: nowrap; } .st-table td.st-title { white-space: normal; color: var(--muted); }
table.list tr.click { cursor: pointer; } table.list tr.click:hover td { background: var(--panel2); }
.table-wrap { overflow-x: auto; }

/* Steuerung: Alert-Warteschlange */
.ctl-queue { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.ctl-queue-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ctl-queue-head { font-weight: 700; margin-top: 4px; }
.ctl-queue-now, .ctl-queue-item { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); word-break: break-word; }
.ctl-queue-now { border-color: rgba(var(--tone), .6); background: rgba(var(--tone), .12); }
.ctl-queue-tag { flex: none; min-width: 2.2em; text-align: center; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.10); color: var(--muted); }
.ctl-queue-now .ctl-queue-tag { background: rgb(var(--tone)); color: #1a1500; }
.ctl-queue-more, .ctl-queue-empty { color: var(--muted); font-size: 13px; }

/* OBS-Brücke */
.obs-bridge { border-top: 1px solid var(--line); padding-top: 10px; }
.obs-bridge summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.dot-state { width: 10px; height: 10px; border-radius: 50%; background: #5b5f78; flex: none; }
.dot-state.ok { background: var(--ok, #3ddc97); } .dot-state.bad { background: var(--danger, #ff5c7a); }

/* „Als App installieren“: Anleitung, wenn der Browser die Installation nicht selbst anbietet */
.install-steps ol { margin: 0 0 12px; padding-left: 20px; color: #c9cde0; line-height: 1.55; }
.install-steps li { margin-bottom: 6px; }