/* Design der Weboberfläche. Farben, Abstände und Rundungen sind Variablen; Akzent und Rundung kommen aus dem Theme (/theme.css, Seite Design).
   Hell ist die Vorgabe, dunkel gilt mit data-theme="dark" (oder "auto" bei dunklem Gerät). */
:root {
  --bg: #f4f7f8; --panel: #ffffff; --text: #0f2328; --muted: #5a6e74; --line: #e2e9eb; --soft: #f5f9fa; --hover: #eef4f5;
  --side: #ffffff; --side-text: #33494f; --side-muted: #8a9ca1;
  --accent: #0e7c86; --accent-dark: #0a5960; --accent-text: #ffffff; --accent-soft: #e2f2f3;
  --ok: #13643a; --ok-bg: #e3f6ea; --ok-dot: #16a34a; --warn: #8f5500; --warn-bg: #fff4e0; --warn-dot: #f59e0b;
  --error: #b42318; --error-bg: #fdecec; --error-dot: #dc2626; --setup: #1d4ed8; --setup-bg: #e4ebff; --setup-dot: #2563eb; --idle: #5a6e74; --idle-bg: #eef2f3; --idle-dot: #9fb4b9;
  --info: #1d4ed8; --info-bg: #e8f0ff; --info-dot: #2563eb; --violet: #6d28d9; --violet-bg: #f1ebff;
  --radius: 12px; --radius-sm: 8px; --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(15, 35, 40, .05); --shadow-md: 0 6px 18px rgba(15, 35, 40, .08); --shadow-lg: 0 18px 48px rgba(15, 35, 40, .18);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0c181b; --panel: #132429; --text: #e6f0f1; --muted: #9db3b8; --line: #22373c; --soft: #172b30; --hover: #1b3237;
  --side: #10201f; --side-text: #cfe1e3; --side-muted: #7f979c;
  --ok: #6fd896; --ok-bg: #123a24; --warn: #f0b155; --warn-bg: #3a2c0e; --error: #ff8a80; --error-bg: #3d1a18; --setup: #9db4ff; --setup-bg: #1b2a5a; --setup-dot: #6d8cff;
  --idle: #9db3b8; --idle-bg: #1d3236; --info: #93b4ff; --info-bg: #14283f; --violet: #c4b5fd; --violet-bg: #2a2143;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 6px 18px rgba(0, 0, 0, .35); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #0c181b; --panel: #132429; --text: #e6f0f1; --muted: #9db3b8; --line: #22373c; --soft: #172b30; --hover: #1b3237;
    --side: #10201f; --side-text: #cfe1e3; --side-muted: #7f979c;
    --ok: #6fd896; --ok-bg: #123a24; --warn: #f0b155; --warn-bg: #3a2c0e; --error: #ff8a80; --error-bg: #3d1a18; --setup: #9db4ff; --setup-bg: #1b2a5a; --setup-dot: #6d8cff;
    --idle: #9db3b8; --idle-bg: #1d3236; --info: #93b4ff; --info-bg: #14283f; --violet: #c4b5fd; --violet-bg: #2a2143;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 6px 18px rgba(0, 0, 0, .35); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.55 Inter, "Segoe UI Variable", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-dark); }
:root[data-theme="dark"] a { color: var(--accent); }

/* Rahmen: Seitenleiste links, Inhalt rechts. Auf dem Handy oben eine Leiste mit Menüknopf, die Navigation schiebt sich herein. */
.shell { display: flex; min-height: 100vh; }
header#top { flex: 0 0 16rem; position: sticky; top: 0; align-self: flex-start; height: 100vh; display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem .8rem; background: var(--side); color: var(--side-text); border-right: 1px solid var(--line); overflow-y: auto; z-index: 20; }
.brand { display: flex; align-items: center; gap: .65rem; padding: .2rem .6rem 1rem; color: var(--text); text-decoration: none; font-size: 1.2rem; font-weight: 700; letter-spacing: -.2px; }
.brand img { border-radius: var(--radius-sm); }
.brand b { color: var(--accent); }
.mobile-bar { display: none; }
nav { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.nav-group { display: flex; flex-direction: column; gap: .15rem; }
.nav-group + .nav-group { margin-top: .9rem; }
.nav-links { display: flex; flex-direction: column; gap: .1rem; }
nav button.nav-group-title { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 0; padding: .3rem .7rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--side-muted); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; filter: none; box-shadow: none; }
nav button.nav-group-title:hover { color: var(--side-text); background: transparent; box-shadow: none; }
nav button.nav-group-title::after { content: ""; width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s var(--ease); }
nav button.nav-group-title[aria-expanded="false"]::after { transform: rotate(-45deg); }
nav a { position: relative; display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: var(--radius-sm); color: var(--side-text); text-decoration: none; font-weight: 500; transition: background .15s var(--ease), color .15s var(--ease); }
nav a .icon { margin: 0; width: 1.15rem; height: 1.15rem; color: var(--side-muted); transition: color .15s var(--ease), transform .15s var(--ease); }
nav a:hover { background: var(--hover); }
nav a:hover .icon { color: var(--accent); transform: scale(1.08); }
nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
:root[data-theme="dark"] nav a[aria-current="page"] { color: var(--accent); }
nav a[aria-current="page"] .icon { color: var(--accent); }
nav a[aria-current="page"]::before { content: ""; position: absolute; left: -.8rem; top: .45rem; bottom: .45rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
nav .count { margin-left: auto; background: var(--warn-dot); color: #2b1a00; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .05rem .45rem; }
.who { display: flex; flex-direction: column; gap: .55rem; padding: .75rem; border-radius: var(--radius); background: var(--soft); border: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.who-name { display: flex; align-items: center; gap: .55rem; color: var(--text); font-weight: 600; min-width: 0; }
.who-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-actions { display: flex; gap: .4rem; align-items: center; }
.who select { flex: 1; min-height: 2.1rem; padding: .15rem .5rem; font-size: .85rem; }
.nav-backdrop { display: none; }

main { flex: 1; min-width: 0; max-width: 84rem; padding: 2rem 2.5rem 4rem; }
main.enter { animation: fadein .25s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { main.enter { animation: none; } }
.shell:has(header#top[hidden]) main { margin: 0 auto; }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.4px; margin: 0 0 .2rem; }
h2 { font-size: 1.08rem; font-weight: 650; margin: 0 0 .8rem; }
h3 { font-size: .98rem; font-weight: 650; margin: 1rem 0 .5rem; }
.lead { margin: 0 0 1.4rem; color: var(--muted); max-width: 52rem; }
section, .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; margin-bottom: 1.2rem; box-shadow: var(--shadow); }

/* Seitenkopf: Symbol, Titel und Beschreibung links, Suche und Hauptaktion rechts. */
.page-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.page-head .page-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); }
.page-head .page-icon .icon { margin: 0; width: 1.5rem; height: 1.5rem; }
.page-head .page-title { flex: 1 1 18rem; min-width: 0; }
.page-head .page-title h1 { margin: 0; }
.page-head .page-title p { margin: .15rem 0 0; color: var(--muted); font-size: .92rem; }
.page-head .page-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.search { position: relative; display: flex; align-items: center; }
.search .icon { position: absolute; left: .65rem; color: var(--muted); margin: 0; pointer-events: none; }
.search input { padding-left: 2.1rem; min-width: 14rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.cards .card { margin: 0; display: flex; flex-direction: column; gap: .25rem; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.cards .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card .label { color: var(--muted); font-size: .88rem; font-weight: 500; }
.card .value { font-size: 2rem; font-weight: 700; letter-spacing: -.8px; line-height: 1.15; }
.card .note { color: var(--muted); font-size: .85rem; }
.stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); margin-bottom: .35rem; }
.stat-icon .icon { margin: 0; }
.stat-icon.ok { background: var(--ok-bg); color: var(--ok-dot); }
.stat-icon.warn { background: var(--warn-bg); color: var(--warn-dot); }
.stat-icon.error { background: var(--error-bg); color: var(--error-dot); }
.stat-icon.info { background: var(--info-bg); color: var(--info-dot); }
.stat-icon.violet { background: var(--violet-bg); color: var(--violet); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.2rem; align-items: start; }
.grid2 > section { margin: 0; }

/* Listen: Zeilen mit Symbol oder Avatar, Text, Zustand und Menü. */
.list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: visible; }
.list-row { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; padding: .8rem 1rem; border-top: 1px solid var(--line); transition: background .12s var(--ease); color: inherit; text-decoration: none; }
.list-row:first-child { border-top: 0; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.list-row:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.list-row:hover { background: var(--soft); }
.list-row.selected { background: var(--accent-soft); }
.list-row.event-task { background: var(--violet-bg); box-shadow: inset 4px 0 0 var(--violet); }
.list-row .grow { flex: 1 1 14rem; min-width: min(14rem, 100%); display: flex; flex-direction: column; gap: .1rem; }
.list-row .grow strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .sub { color: var(--muted); font-size: .85rem; }
.list-row .chips { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.item { display: flex; align-items: center; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.item:first-of-type { border-top: 0; }
.item .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
a.item, a.item:hover { text-decoration: none; color: inherit; }
.avatar { flex: 0 0 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
:root[data-theme="dark"] .avatar { color: var(--accent); }
.avatar.c1 { background: var(--info-bg); color: var(--info); }
.avatar.c2 { background: var(--violet-bg); color: var(--violet); }
.avatar.c3 { background: var(--warn-bg); color: var(--warn); }
.avatar.c4 { background: var(--ok-bg); color: var(--ok); }
progress { width: 100%; height: .5rem; appearance: none; border: 0; border-radius: 999px; background: var(--line); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--line); }
progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--accent); }
.alert { padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: .6rem; border-left: 4px solid var(--warn-dot); background: var(--warn-bg); }
.alert.Error { border-color: var(--error-dot); background: var(--error-bg); }
.alert.Info { border-color: var(--info-dot); background: var(--info-bg); }
.alert b { display: block; }

.status { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--idle-bg); color: var(--idle); white-space: nowrap; }
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--idle-dot); }
.status.ok { background: var(--ok-bg); color: var(--ok); }
.status.ok::before { background: var(--ok-dot); }
.status.warn { background: var(--warn-bg); color: var(--warn); }
.status.warn::before { background: var(--warn-dot); }
.status.error { background: var(--error-bg); color: var(--error); }
.status.error::before { background: var(--error-dot); }
.status.event { background: var(--violet-bg); color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); }
.status.event::before { background: var(--violet); }
.status.tolerated { background: var(--warn-bg); color: var(--warn); }
.status.tolerated::before { background: var(--warn-dot); }
.status.setup { background: var(--setup-bg); color: var(--setup); }
.status.setup::before { background: var(--setup-dot); }
.status.run { background: var(--accent-soft); color: var(--accent-dark); }
.status.run::before { background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .status.run::before { animation: none; } }
tbody tr.running { background: var(--accent-soft); }
tbody tr.running td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tbody tr.running:hover { background: var(--accent-soft); }
.progress-cell { display: flex; flex-direction: column; gap: .25rem; min-width: 7rem; }
code { font: .85em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: .05rem .35rem; }

table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { text-align: left; padding: .7rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; background: var(--soft); }
th:first-child { border-top-left-radius: var(--radius-sm); }
th:last-child { border-top-right-radius: var(--radius-sm); }
tbody tr { transition: background .12s var(--ease); }
tbody tr:hover { background: var(--soft); }
tbody tr:last-child td { border-bottom: 0; }
td a { font-weight: 600; text-decoration: none; }
form { display: grid; gap: .9rem; max-width: 32rem; }
label { display: grid; gap: .3rem; font-size: .86rem; font-weight: 500; color: var(--muted); }
label.inline, label.check { display: flex; gap: .55rem; align-items: center; color: var(--text); font-weight: 500; }
input, select, textarea { font: inherit; padding: .45rem .75rem; min-height: 2.4rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel); color: var(--text); transition: border-color .12s var(--ease), box-shadow .12s var(--ease); }
input:hover, select:hover, textarea:hover { border-color: var(--idle-dot); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 1.1rem; height: 1.1rem; padding: 0; accent-color: var(--accent); box-shadow: none; }
input[type="color"] { padding: .2rem; width: 3.2rem; min-height: 2.4rem; cursor: pointer; }
input[type="range"] { padding: 0; accent-color: var(--accent); box-shadow: none; border: 0; }
button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.2; padding: .5rem 1rem; min-height: 2.4rem; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text); cursor: pointer; white-space: nowrap; transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease), box-shadow .15s var(--ease), filter .15s; box-shadow: 0 1px 2px rgba(15, 35, 40, .12); }
button .icon { margin: 0; width: 1.05rem; height: 1.05rem; }
button:hover { filter: brightness(1.06); box-shadow: 0 3px 10px rgba(15, 35, 40, .18); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; filter: none; box-shadow: none; }
button.secondary { background: var(--panel); color: var(--text); border-color: var(--line); box-shadow: var(--shadow); }
button.secondary:hover { background: var(--soft); border-color: var(--idle-dot); filter: none; box-shadow: var(--shadow); }
button.ghost { background: transparent; color: var(--muted); border-color: transparent; box-shadow: none; }
button.ghost:hover { background: var(--hover); color: var(--text); filter: none; box-shadow: none; }
button.icon-only { padding: .4rem; min-width: 2.4rem; }
.icon-only-spacer { display: inline-block; min-width: 2.4rem; } /* hält die Spalte frei, wo kein Symbol steht */
.task-state { min-width: 6.5rem; justify-content: center; } /* Zustand der Konto-Aufgabe: gleich breit, damit die Spalten untereinander stehen */
button.danger { background: var(--panel); color: var(--error); border-color: var(--error-bg); box-shadow: none; }
button.danger:hover { background: var(--error-bg); border-color: var(--error-dot); filter: none; box-shadow: none; }
button.danger.solid { background: var(--error-dot); color: #fff; border-color: var(--error-dot); }
td button, .item button, button.small { font-size: .82rem; padding: .3rem .7rem; min-height: 2rem; }
td input:not([type="checkbox"]), td select { min-height: 2rem; padding: .25rem .55rem; font-size: .88rem; }
td .row { flex-wrap: nowrap; gap: .4rem; }
td.actions { text-align: right; width: 1%; white-space: nowrap; }
td.actions .row { justify-content: flex-end; }
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; justify-content: space-between; margin-bottom: 1rem; }
.toolbar .grow { flex: 1 1 16rem; min-width: 12rem; }
.toolbar select { width: 100%; }
.person { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.person .avatar { flex: 0 0 2.2rem; height: 2.2rem; font-size: .8rem; }
.person strong { overflow-wrap: anywhere; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: .9rem 1rem; align-items: end; max-width: 48rem; }
.form-grid + .row { margin-top: .9rem; }
form.wide { max-width: none; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.message { padding: .65rem .95rem; border-radius: var(--radius); margin: .5rem 0; border: 1px solid var(--line); }
.message.ok, .message.success { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.message.error { color: var(--error); background: var(--error-bg); border-color: transparent; }
.message.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
/* Hinweis des letzten Laufs bei einer Aufgabe am Konto */
.task-note { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; margin-top: .2rem; padding: .15rem .55rem; border-radius: var(--radius-sm); font-size: .82rem; font-weight: 600; color: var(--warn); background: var(--warn-bg); }
.task-note.error { color: var(--error); background: var(--error-bg); }
.task-note.info { color: var(--muted); background: var(--soft); }
.task-note svg { width: 1em; height: 1em; flex: none; }
.badge { display: inline-flex; align-items: center; padding: .05rem .55rem; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font-size: .78rem; font-weight: 600; color: var(--muted); }
.badge.Warning { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.badge.Error { color: var(--error); background: var(--error-bg); border-color: transparent; }
.muted { color: var(--muted); }
.unread td:first-child { font-weight: 700; }
.thumb { max-width: 6rem; max-height: 4rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
details.tech summary { cursor: pointer; font-weight: 600; color: var(--muted); padding: .2rem 0; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: .8rem 0 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }

/* Leerer Zustand: Symbol, Überschrift, ein Satz und die passende Aktion. */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: 2.5rem 1rem; color: var(--muted); }
.empty-state .empty-icon { display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); margin-bottom: .3rem; }
.empty-state .empty-icon .icon { margin: 0; width: 1.7rem; height: 1.7rem; }
.empty-state strong { color: var(--text); font-size: 1.05rem; }

/* Seitenleiste zum Anlegen und Bearbeiten (rechts; auf dem Handy als Blatt von unten). Bestätigungsdialog in der Mitte. */
dialog { color: var(--text); }
dialog.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100vh; max-height: 100vh; width: min(30rem, 100vw); max-width: 100vw; padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow-lg); }
dialog.drawer[open] { display: flex; flex-direction: column; animation: slidein .25s var(--ease); }
dialog.drawer.wide { width: min(40rem, 100vw); }
dialog.drawer.huge { width: min(78rem, 100vw); }
/* Erkennung bearbeiten: links das Formular, rechts das Live-Bild; schmal untereinander */
.detector-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.4rem; align-items: start; margin-top: .9rem; }
.detector-form, .detector-fields { display: grid; gap: .9rem; align-content: start; }
.detector-live { position: sticky; top: 0; display: grid; gap: .6rem; }
.detector-live .canvas-frame { margin-top: 0; max-height: 62vh; }
.detector-live .canvas-frame .live-canvas { max-height: 60vh; }
.region-editor { display: grid; gap: .5rem; justify-items: start; }
.region-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; width: 100%; }
.point-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto minmax(0, 1fr) auto; gap: .5rem; align-items: end; margin-bottom: .4rem; }
.point-row input[type=color], .form-grid input[type=color] { width: 3rem; height: 2.3rem; padding: .15rem; }
.template-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; max-height: 16rem; overflow: auto; }
.template-option { display: grid; gap: .25rem; padding: .4rem; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; overflow-wrap: anywhere; }
.template-option:has(input:checked) { border-color: var(--accent); background: var(--soft); }
.template-thumb { display: grid; place-items: center; height: 4rem; background: var(--soft); border-radius: var(--radius-sm); overflow: hidden; }
.template-thumb img { max-width: 100%; max-height: 4rem; }
.slider-line { gap: .6rem; align-items: center; }
.slider-line input[type=range] { flex: 1; }
.mask-row { gap: .4rem; align-items: center; }
.trial-result { min-height: 1.6rem; }
.region-grid > *, .point-row > * { min-width: 0; }
.region-grid input[type=number], .point-row input[type=number] { width: 100%; min-width: 0; }
@media (max-width: 900px) { .detector-editor { grid-template-columns: 1fr; } .detector-live { position: static; } }
@media (max-width: 520px) { .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .point-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@keyframes slidein { from { transform: translateX(100%); } to { transform: none; } }
dialog.drawer .drawer-head { display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); }
dialog.drawer .drawer-head .page-icon { display: flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); }
dialog.drawer .drawer-head .page-icon .icon { margin: 0; }
dialog.drawer .drawer-head h2 { margin: 0; flex: 1; }
dialog.drawer .drawer-body { flex: 1; overflow-y: auto; padding: 1.2rem 1.3rem; }
dialog.drawer .drawer-body form, .wizard-step { max-width: none; grid-template-columns: minmax(0, 1fr); }
dialog.drawer .drawer-foot { display: flex; gap: .5rem; justify-content: flex-end; padding: .9rem 1.3rem; border-top: 1px solid var(--line); background: var(--soft); }
dialog::backdrop { background: rgba(9, 25, 29, .35); backdrop-filter: blur(2px); }
dialog.confirm { max-width: 26rem; width: calc(100vw - 2rem); padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-lg); }
dialog.confirm[open] { animation: popin .18s var(--ease); }
@keyframes popin { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
dialog.confirm .confirm-icon { display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--error-bg); color: var(--error-dot); margin-bottom: .8rem; }
dialog.confirm .confirm-icon .icon { margin: 0; }
dialog.confirm h2 { margin: 0; }
dialog.confirm p { margin: .3rem 0 1.2rem; color: var(--muted); }

/* Kurze Einblendungen unten rechts (auf dem Handy unten über die ganze Breite). */
.toasts { position: fixed; right: 1.2rem; bottom: 1.2rem; display: flex; flex-direction: column; gap: .5rem; z-index: 100; pointer-events: none; }
.toast { display: flex; align-items: center; gap: .6rem; min-width: 16rem; max-width: 26rem; padding: .75rem 1rem; border-radius: var(--radius); background: var(--text); color: var(--panel); box-shadow: var(--shadow-lg); font-weight: 500; pointer-events: auto; animation: toastin .25s var(--ease); }
.toast .icon { margin: 0; color: var(--ok-dot); flex: none; }
.toast.error .icon { color: #ff8a80; }
.toast.leaving { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
@keyframes toastin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Menü "..." je Zeile */
.menu { position: relative; display: inline-block; }
.menu-list { position: absolute; right: 0; top: calc(100% + .3rem); min-width: 12rem; padding: .35rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-md); z-index: 30; display: flex; flex-direction: column; animation: popin .12s var(--ease); }
.menu-list button { justify-content: flex-start; width: 100%; background: transparent; color: var(--text); border: 0; box-shadow: none; font-weight: 500; }
.menu-list button:hover { background: var(--hover); filter: none; box-shadow: none; }
.menu-list button.danger-item { color: var(--error); }
.menu-list button:disabled { color: var(--muted); opacity: .55; cursor: not-allowed; background: transparent; }
.live-view .test-image { display: block; max-width: 100%; max-height: 75vh; margin-top: .5rem; }
.menu-list button.danger-item:hover { background: var(--error-bg); }

/* Reiter innerhalb einer Seite (zum Beispiel Kundendetail) */
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: 1.1rem; overflow-x: auto; scrollbar-width: none; }
.tabs button { background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; padding: .55rem .85rem; }
.tabs button:hover { color: var(--text); filter: none; box-shadow: none; }
.tabs button[aria-selected="true"] { color: var(--accent-dark); border-bottom-color: var(--accent); }

/* Design-Seite: Vorschau */
.theme-preview { display: grid; gap: .8rem; padding: 1.2rem; border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--bg); }
.swatches { display: flex; gap: .5rem; flex-wrap: wrap; }
.swatches button { width: 2.2rem; min-width: 0; min-height: 2.2rem; padding: 0; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); }
.logo-preview { width: 3rem; height: 3rem; border-radius: var(--radius-sm); border: 1px solid var(--line); object-fit: contain; background: var(--panel); }

/* Tabellen scrollen auf schmalen Bildschirmen im Rahmen statt zusammengedrückt zu werden. */
section { overflow-x: auto; }
table { min-width: 38rem; }
input, select, textarea { max-width: 100%; }
.row > input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), .row > select { flex: 1 1 10rem; min-width: 0; }
img, progress { max-width: 100%; }
h1, h2 { overflow-wrap: anywhere; }
th { white-space: nowrap; }

@media (max-width: 64rem) {
  main { padding: 1.5rem 1.4rem 3rem; }
  header#top { flex-basis: 14rem; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}

/* Handy und schmale Fenster: oben eine Leiste mit Menüknopf; die Navigation kommt als Schublade von links. */
@media (max-width: 52rem) {
  .shell { flex-direction: column; }
  .mobile-bar { display: flex; position: sticky; top: 0; z-index: 25; align-items: center; gap: .6rem; padding: .55rem .8rem; background: var(--side); border-bottom: 1px solid var(--line); }
  .mobile-bar .brand { padding: 0; font-size: 1.05rem; flex: 1; }
  header#top { position: fixed; inset: 0 auto 0 0; width: min(18rem, 85vw); height: 100vh; transform: translateX(-105%); transition: transform .25s var(--ease); box-shadow: var(--shadow-lg); z-index: 40; }
  header#top > .brand { display: none; }
  .shell.nav-open header#top { transform: none; }
  .shell.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(9, 25, 29, .35); z-index: 35; }
  main { padding: 1rem .9rem 5rem; }
  h1 { font-size: 1.35rem; }
  .page-head { gap: .7rem; }
  .page-head .page-icon { width: 2.4rem; height: 2.4rem; }
  .page-head .page-actions { width: 100%; }
  .page-head .page-actions > * { flex: 1 1 auto; }
  .search input { min-width: 0; width: 100%; }
  section, .card { padding: 1rem; border-radius: var(--radius); }
  .grid2 { grid-template-columns: 1fr; }
  form { max-width: none; }
  .form-grid { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; }
  .toolbar .row { justify-content: space-between; }
  td .row { flex-wrap: wrap; }
  td.actions { white-space: normal; width: auto; }
  td.actions .row { justify-content: flex-start; }
  table { min-width: 36rem; }
  dialog.drawer { inset: auto 0 0 0; width: 100vw; height: auto; max-height: 92vh; border-left: 0; border-top: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  dialog.drawer[open] { animation: sheetin .25s var(--ease); }
  .toasts { left: .8rem; right: .8rem; bottom: .8rem; }
  .toast { max-width: none; min-width: 0; }
  .list-row { padding: .75rem .8rem; flex-wrap: wrap; }
  .list-row .chips { justify-content: flex-start; }
}
@keyframes sheetin { from { transform: translateY(100%); } to { transform: none; } }

@media (max-width: 30rem) {
  main { padding: .8rem .65rem 5rem; }
  .cards { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .card .value { font-size: 1.6rem; }
  .row { gap: .4rem; }
  .item { flex-wrap: wrap; }
}

/* Auf Touch-Geräten sind Knöpfe und Felder mindestens 44 px hoch. */
@media (pointer: coarse) {
  button, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select { min-height: 2.75rem; }
  td button, button.small { min-height: 2.4rem; }
  nav a { padding: .65rem .75rem; }
}

/* Hilfsklassen statt Inline-Stilen (die Content-Security-Policy erlaubt keine). */
.narrow { width: 6rem; }
textarea.mono, .mono { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.live-canvas { width: 100%; max-width: 60rem; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: crosshair; touch-action: none; }
td textarea { width: 100%; min-width: 12rem; min-height: 2.2rem; resize: vertical; font-size: .88rem; }

/* Schritte einer Einrichtung (Einrichtungs-Slot) */
.stepper { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .5rem 0 1rem; padding: 0; counter-reset: step; }
.stepper .step { counter-increment: step; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem .35rem .4rem; border-radius: 999px; background: var(--idle-bg); color: var(--idle); font-weight: 600; }
.stepper .step::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--idle-dot); color: #fff; font-size: .8rem; }
.stepper .step.done { background: var(--ok-bg); color: var(--ok); }
.stepper .step.done::before { content: "\2713"; background: var(--ok-dot); }
.stepper .step.current { background: var(--accent-soft); color: var(--accent-dark); }
.stepper .step.current::before { background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }

/* Symbole (SVG-Sprite /icons.svg) */
.icon { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; margin-right: .35rem; }
.icon.big { width: 1.9rem; height: 1.9rem; margin-right: 0; }
.icon.huge { width: 2.6rem; height: 2.6rem; margin-right: 0; color: var(--accent); }
h3 .icon { color: var(--accent); }
.status.big { font-size: .95rem; padding: .25rem .85rem; margin-left: .4rem; }

/* Clients und Slots */
.client-card { padding: 1.4rem 1.6rem; border-left: 6px solid var(--idle-dot); }
.client-card.online { border-left-color: var(--ok-dot); }
.client-card.offline { border-left-color: var(--error-dot); }
.client-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.client-head h2 { margin: 0; font-size: 1.4rem; }
.client-head p { margin: .15rem 0 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .8rem; margin: .5rem 0 1rem; }
.kpi { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.kpi .label { display: block; color: var(--muted); font-size: .82rem; font-weight: 500; }
.kpi .value { display: block; font-size: 1.7rem; line-height: 1.15; letter-spacing: -.5px; }
.kpi .note { display: block; color: var(--muted); font-size: .8rem; }
.kpi.accent { background: var(--accent-soft); color: var(--accent-dark); }
.kpi.ok { background: var(--ok-bg); color: var(--ok); }
.kpi.error { background: var(--error-bg); color: var(--error); }
.kpi.accent .label, .kpi.ok .label, .kpi.error .label, .kpi.accent .note, .kpi.ok .note, .kpi.error .note { color: inherit; opacity: .85; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .9rem; margin: .5rem 0 1rem; }
.special-grid { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.slot-card { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); border-top: 5px solid var(--idle-dot); }
.slot-card.running { background: var(--accent-soft); border-top-color: var(--accent); }
.slot-card.special.waiting { border-top-color: var(--line); }
.slot-card p { margin: .4rem 0 0; }
.slot-head { display: flex; align-items: center; gap: .7rem; }
.slot-head > div { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.slot-head .status.big { margin-left: 0; }
.slot-card.running .slot-head > .icon { color: var(--accent); }
.slot-account { font-size: 1.05rem; font-weight: 600; }
.phase-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.phase-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); }
.empty { display: flex; flex-direction: column; align-items: center; padding: 2rem 0; }

/* Diagramm: Jobs je Zeitraum */
.chart-box { margin: .5rem 0; }
.chart { width: 100%; height: auto; max-height: 14rem; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-axis { fill: var(--muted); font-size: 11px; }
.chart-ok { fill: var(--ok-dot); background: var(--ok-dot); }
.chart-fail { fill: var(--error-dot); background: var(--error-dot); }
.chart-cancel { fill: var(--idle-dot); background: var(--idle-dot); }
.chart-hit { fill: transparent; }
.chart g:hover .chart-hit { fill: var(--accent-soft); opacity: .6; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; color: var(--muted); font-size: .85rem; margin-bottom: .6rem; }
.swatch { display: inline-block; width: .85rem; height: .85rem; border-radius: 3px; }
td.nowrap { white-space: nowrap; }

/* Jobliste als Kacheln: je Datum eine Gruppe, je Job ein Rechteck mit Uhrzeit, Farbe und Zeichen nach Stand */
.tile-groups { display: grid; gap: 1.1rem; }
.tile-group h3 { margin: 0 0 .45rem; font-size: .95rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .35rem; }
.tile { display: flex; align-items: center; justify-content: space-between; gap: .3rem; padding: .3rem .5rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--idle-bg); color: var(--idle); font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; }
.tile:hover { filter: brightness(.96); }
.tile-mark { font-size: .8rem; }
.tile.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-dot); }
/* Einrichtung einer neuen Instanz: blau, das Zeichen behält die Farbe des Ausgangs */
.tile.setup { background: var(--setup-bg); color: var(--setup); border-color: var(--setup-dot); }
.tile.setup.ok .tile-mark { color: var(--ok-dot); }
.tile.setup.error .tile-mark, .tile.setup.critical .tile-mark { color: var(--error-dot); }
.tile.setup.warn .tile-mark { color: var(--warn-dot); }
.tile.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-dot); }
.tile.error { background: var(--error-bg); color: var(--error); border-color: var(--error-dot); }
.tile.critical { background: var(--error-dot); color: #fff; border-color: var(--error-dot); }
.tile.run { background: var(--panel); color: var(--accent-dark); border-color: var(--accent); border-width: 2px; padding: calc(.3rem - 1px) calc(.5rem - 1px); animation: tilepulse 1.8s ease-in-out infinite; }
/* Laufend: statt des Zeichens nur der pulsierende Punkt, damit die Kachel einzeilig und so hoch wie die anderen bleibt */
.tile.run .tile-mark { font-size: 0; line-height: 0; }
.tile.run .tile-mark::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.tile, .tile-time { white-space: nowrap; }
/* Kleine Kacheln: die letzten Jobs eines Kontos in der Kontenliste */
.recent-jobs { display: inline-flex; gap: .25rem; align-items: center; }
.tile.small { width: 3.7rem; padding: .1rem .35rem; font-size: .75rem; gap: .2rem; }
.tile-text { display: grid; line-height: 1.15; }
.tile-dur { font-size: .68rem; font-weight: 500; opacity: .85; }
.tile-dur.long { opacity: 1; font-weight: 700; color: var(--warn); background: var(--warn-bg); border-radius: 3px; padding: 0 .15rem; margin-left: -.15rem; justify-self: start; }
.tile.small.empty { visibility: hidden; }
.recent-col { flex: none; display: inline-flex; }
.status.instance-state { min-width: 5.6rem; justify-content: center; } /* gleich breit, damit „Job läuft“ und „gestoppt“ untereinander stehen */
/* Nächster Login: eigene Zeile mit Uhr, fällig in der Warnfarbe */
.next-login { display: inline-flex; align-items: center; gap: .3rem; margin-top: .2rem; padding: .05rem .5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; width: fit-content; }
.next-login .icon { width: .85rem; height: .85rem; }
.next-login.due { background: var(--warn-bg); color: var(--warn); }
.tile.small.run { padding: calc(.1rem - 1px) calc(.35rem - 1px); }
.avg-duration { font-variant-numeric: tabular-nums; }
/* „Job läuft“: kräftig gefüllt mit Live-Punkt, damit es sich von „gestoppt“ abhebt */
.status.live { background: var(--accent); color: var(--accent-text); }
.status.live::before { background: var(--accent-text); }
@keyframes tilepulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) { .tile.run, .tile.run .tile-mark::before { animation: none; } }
.row.spread { justify-content: space-between; margin-bottom: .8rem; }
button.chip { min-height: 0; padding: .15rem .7rem; border-radius: 999px; font-size: .85rem; background: var(--panel); color: var(--muted); border-color: var(--line); opacity: .6; }
button.chip.on { opacity: 1; color: var(--text); }
button.chip.tile-ok.on { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-dot); }
button.chip.tile-warn.on { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-dot); }
button.chip.tile-error.on { background: var(--error-bg); color: var(--error); border-color: var(--error-dot); }
button.chip.tile-critical.on { background: var(--error-dot); color: #fff; border-color: var(--error-dot); }
/* „Aktiv“ wie die laufende Kachel: weiß mit Petrol-Rand und Live-Punkt */
button.chip.tile-run.on { background: var(--panel); color: var(--accent-dark); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
button.chip.tile-run::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem; border-radius: 50%; background: var(--accent); vertical-align: middle; animation: pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { button.chip.tile-run::before { animation: none; } }

/* Clients: eine große Kachel je Client, darunter getrennte Bereiche für Informationen, Slots und Jobs */
.client-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
button.client-tile { display: block; width: 100%; text-align: left; white-space: normal; font-weight: 400; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--panel); color: var(--text); border: 1px solid var(--line); border-left: 6px solid var(--idle-dot); cursor: pointer; }
button.client-tile.online { border-left-color: var(--ok-dot); }
button.client-tile.offline { border-left-color: var(--error-dot); }
button.client-tile:hover { background: var(--soft); border-color: var(--accent); filter: none; }
button.client-tile.selected { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.client-tile-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.client-tile-head strong { font-size: 1.1rem; flex: 1 1 auto; }
.tile-facts { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: .15rem .8rem; margin: 0; font-size: .9rem; }
.tile-facts dt { color: var(--muted); overflow-wrap: anywhere; }
.tile-facts dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.client-card h2 { display: flex; align-items: center; gap: .5rem; margin-top: 0; font-size: 1.15rem; }

/* Login-Sperren: Karten je Gruppe, farbig nach Zustand */
.block-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.block-card { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1.2rem; background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--idle-dot); border-radius: var(--radius); box-shadow: var(--shadow); }
.block-card.now { border-left-color: var(--error-dot); background: var(--error-bg); }
.block-card.planned { border-left-color: var(--warn-dot); }
.block-card.series { border-left-color: var(--accent); }
.block-card.ended { opacity: .75; }
.block-head { display: flex; align-items: center; gap: .75rem; }
.block-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.block-head .icon { flex: 0 0 auto; color: var(--accent-dark); }
.block-card.now .block-head .icon { color: var(--error); }
.block-meta { display: flex; flex-direction: column; gap: .35rem; font-size: .92rem; }
.block-meta .icon { width: 1rem; height: 1rem; margin-right: .45rem; vertical-align: -.15em; color: var(--muted); }
.block-meta .windows { list-style: none; margin: .2rem 0 0; padding: 0 0 0 1.45rem; color: var(--muted); font-size: .88rem; }
.block-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }

/* Anmeldung: Karte in der Mitte */
.login-wrap { min-height: calc(100vh - 6rem); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { width: min(24rem, 100%); padding: 2rem 1.8rem 1.4rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.login-card h1 { font-size: 1.25rem; margin: 1.1rem 0 1rem; }
.login-card form { max-width: none; }
.login-card button[type="submit"] { width: 100%; margin-top: .3rem; }
.login-brand { display: flex; align-items: center; gap: .7rem; font-size: 1.3rem; }
.login-brand img { border-radius: var(--radius); }
.login-foot { display: flex; align-items: center; gap: .5rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); }
.login-foot .icon { margin: 0; }
.login-foot select { flex: 1; }

/* Schnellsuche (Strg+K) */
dialog.palette { width: min(36rem, calc(100vw - 1.5rem)); max-height: 70vh; margin: 12vh auto auto; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-lg); overflow: hidden; }
dialog.palette[open] { display: flex; flex-direction: column; animation: popin .15s var(--ease); }
.palette-input { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.palette-input .icon { margin: 0; color: var(--muted); }
.palette-input input { flex: 1; border: 0; box-shadow: none; font-size: 1.02rem; padding: .3rem 0; background: transparent; }
.palette-input input:focus { box-shadow: none; }
kbd { font: .72rem ui-monospace, Consolas, monospace; padding: .1rem .4rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; color: var(--muted); background: var(--soft); }
.palette-list { overflow-y: auto; padding: .4rem; display: flex; flex-direction: column; gap: .1rem; }
.palette-item { justify-content: flex-start; gap: .7rem; width: 100%; background: transparent; color: var(--text); border: 0; box-shadow: none; text-align: left; font-weight: 500; padding: .55rem .7rem; }
.palette-item:hover { filter: none; box-shadow: none; }
.palette-item.active { background: var(--accent-soft); }
.palette-item .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.palette-item .grow strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.palette-item .grow .muted { font-size: .8rem; font-weight: 400; }
.palette-icon { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: var(--soft); color: var(--accent); flex: none; }
.palette-icon .icon { margin: 0; }
.palette-kind { color: var(--muted); font-size: .75rem; font-weight: 500; }
.palette-empty { padding: 1rem; margin: 0; text-align: center; }
.search-launch { display: flex; align-items: center; gap: .55rem; width: 100%; justify-content: flex-start; margin-bottom: .6rem; background: var(--soft); color: var(--muted); border: 1px solid var(--line); box-shadow: none; font-weight: 500; }
.search-launch:hover { background: var(--hover); filter: none; box-shadow: none; }
.search-launch kbd { margin-left: auto; }
@media (max-width: 52rem) { .search-launch kbd { display: none; } }

/* Kundenseite und Buchungen */
.back-link { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .8rem; color: var(--muted); font-weight: 500; text-decoration: none; font-size: .9rem; }
.back-link:hover { color: var(--accent-dark); }
.back-link .icon { margin: 0; width: 1rem; height: 1rem; }
.page-head > .avatar { flex: 0 0 3rem; height: 3rem; font-size: 1rem; }
.tabs button .icon { width: 1rem; height: 1rem; }
.row.spread { justify-content: space-between; margin-bottom: .8rem; }
.row.spread h2 { margin: 0; }
.list-row > .icon { margin: 0; color: var(--muted); }
.list-row .stat-icon { margin: 0; flex: none; }
.check-list { display: flex; flex-direction: column; gap: .45rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft); max-height: 16rem; overflow-y: auto; margin-top: .3rem; }
.field-label { font-size: .86rem; font-weight: 500; color: var(--muted); }
.booking-list { display: flex; flex-direction: column; gap: .7rem; }
.booking-card { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--idle-dot); border-radius: var(--radius); box-shadow: var(--shadow); transition: box-shadow .15s var(--ease); }
.booking-card:hover { box-shadow: var(--shadow-md); }
.booking-card.ok { border-left-color: var(--ok-dot); }
.booking-card.run { border-left-color: var(--accent); }
.booking-card.error { border-left-color: var(--error-dot); }
.booking-head { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; flex-wrap: wrap; }
.booking-head .grow { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; }
.booking-head .sub { color: var(--muted); font-size: .85rem; }
.booking-head .chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.booking-details { padding: .2rem 1.1rem 1.1rem; border-top: 1px solid var(--line); }
.chip-list { display: flex; gap: .4rem; flex-wrap: wrap; }
/* Listen: zugeklappte Karten, aufgeklappt eine Tabelle mit Schlüssel, Deutsch, Englisch und Reihenfolge */
.list-cards { display: grid; gap: .7rem; }
.select-line { padding: .3rem .9rem; min-height: 2.2rem; }
.template-pick { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.template-pick label { flex: 1 1 16rem; max-width: 24rem; }
.list-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.list-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: .4rem .8rem; padding: .65rem 1rem; cursor: pointer; }
.list-card-head:hover { background: var(--hover); }
.list-card-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.list-card-head .rot-270 { transform: rotate(-90deg); }
.list-card.open .list-card-head { background: var(--soft); border-bottom: 1px solid var(--line); }
.list-card-title { display: grid; gap: .1rem; min-width: 0; }
.list-card-title .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-card-body { display: grid; gap: .8rem; padding: 1rem; }
.list-card-name { max-width: 24rem; }
.table-wrap { overflow-x: auto; }
table.list-items { width: 100%; }
table.list-items th:first-child, table.list-items td:first-child { width: 2rem; }
table.list-items input { width: 100%; min-width: 8rem; box-sizing: border-box; }
table.list-items td { vertical-align: middle; }
table.list-items select { min-width: 9rem; }
.list-item-image { width: 2rem; height: 2rem; object-fit: contain; flex: none; }
.list-search { max-width: 30rem; }
.list-search input { width: 100%; box-sizing: border-box; }
input.invalid { border-color: var(--error); }
.field-warn { display: block; margin-top: .2rem; font-size: .78rem; color: var(--warn); }
.badge.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
@media (max-width: 720px) { .list-card-head { grid-template-columns: auto minmax(0, 1fr) auto; } .list-card-head > .badge { display: none; } }
.badge.off { opacity: .55; text-decoration: line-through; }
ul.timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: .45rem; }
ul.timeline li { position: relative; font-size: .9rem; }
ul.timeline li::before { content: ""; position: absolute; left: -1.33rem; top: .45rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--panel); }
.selection-bar { position: sticky; bottom: 1rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; padding: .7rem 1rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--accent); box-shadow: var(--shadow-lg); animation: toastin .2s var(--ease); }
.selection-bar strong { margin-right: auto; }
/* Spielauswahl im Seitenkopf, Schalter an/aus, Einträge als Chips mit Entfernen */
.search.picker select { padding-left: 2.1rem; min-width: 12rem; }
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track { width: 2.4rem; height: 1.35rem; border-radius: 999px; background: var(--line); transition: background .2s var(--ease); position: relative; }
.switch-track::after { content: ""; position: absolute; top: .175rem; left: .175rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: var(--shadow-md); transition: transform .2s var(--ease); }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(1.05rem); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip-item { display: inline-flex; align-items: center; gap: .15rem; padding: .1rem .2rem .1rem .7rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: .88rem; font-weight: 500; }
.chip-item button.icon-only.small { min-width: 0; min-height: 0; padding: .15rem; color: inherit; box-shadow: none; }
.chip-item button.icon-only.small .icon { width: .9rem; height: .9rem; margin: 0; }
.add-row { margin-top: .9rem; flex-wrap: nowrap; }
.add-row input { flex: 1; min-width: 0; }
.grid2 > section h2 { display: flex; align-items: center; gap: .5rem; margin: 0; }
/* Hinweisbox, Spielkarten, auf dem Handy ausgeblendete Nebenangaben */
.message.info { color: var(--accent-dark); background: var(--accent-soft); border-color: transparent; }
p.small, .small { font-size: .82rem; }
.game-card { display: flex; flex-direction: column; gap: .4rem; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.game-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.game-card.inactive { opacity: .7; }
.game-card-head { display: flex; align-items: center; gap: .8rem; }
.game-card-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.game-card-head h2 { margin: 0; font-size: 1.05rem; }
.game-card-head .sub { color: var(--muted); font-size: .82rem; font-family: ui-monospace, monospace; }
.game-card dl.facts { margin: .3rem 0; }
.chip-item.plain { padding: .1rem .7rem; background: var(--soft); color: var(--text); }
@media (max-width: 52rem) { .hide-mobile { display: none; } }
/* Paketkarten und Aufgabenreihenfolge im Paket */
.price-line { font-size: 1.15rem; }
.price-line strong { color: var(--accent-dark); }
.chip-item.off { opacity: .55; text-decoration: line-through; }
.task-rows { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .6rem; counter-reset: task; }
.task-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft); counter-increment: task; animation: toastin .2s var(--ease); }
.task-row select { flex: 1 1 12rem; min-width: 0; }
.task-number::before { content: counter(task); display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: .78rem; font-weight: 700; }
button.flip .icon { transform: rotate(180deg); }
/* Konten: Filterfeld, Zähler am Filterknopf, Zeilen mit Kennzeichen und Auswahl */
.filter-panel { padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-md); animation: toastin .2s var(--ease); }
.filter-panel .row.spread { margin: .6rem 0 0; }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: .75rem; font-weight: 700; }
.row-badges { display: inline-flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.row-badges .status .icon { width: .85rem; height: .85rem; margin: 0; }
.list-row a.row-title { font-weight: 650; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row a.row-title:hover { color: var(--accent-dark); }
.list-row > a.icon-only { display: inline-flex; padding: .4rem; color: var(--muted); border-radius: var(--radius-sm); }
.list-row > input[type="checkbox"] { width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--accent); }
.list-row.selected { background: var(--accent-soft); }
.list-row.running .stat-icon { animation: pulse 1.6s ease-in-out infinite; }
.stat-icon.off { background: var(--idle-bg); color: var(--idle); }
section.updates { margin-top: 1.5rem; }
section.updates h2 { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 52rem) {
  .list-row { flex-wrap: wrap; }
  .list-row .row-badges { order: 5; width: 100%; justify-content: flex-start; padding-left: 3rem; }
  .list-row .recent-col { order: 4; width: 100%; padding-left: 3rem; }
}
.list-row .stat-icon { margin: 0; flex: none; }
.wizard-step { display: grid; gap: .9rem; }
/* Übersicht: Kacheln als Links, Füllbalken, Live-Punkt, Hinweise mit Symbol, Zustand des Servers */
a.card.kpi { color: inherit; text-decoration: none; }
a.card.kpi .stat-icon { margin-bottom: .5rem; }
.card .value.warn { color: var(--warn); }
.list.flat { border: 0; background: transparent; }
.list.flat .list-row { padding-left: 0; padding-right: 0; }
.list.flat .list-row:first-child { border-top: 0; }
.list-row .grow progress { margin: .2rem 0; }
.live-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ok-dot); box-shadow: 0 0 0 4px var(--ok-bg); animation: pulse 1.6s ease-in-out infinite; flex: none; }
.meter { display: block; height: .45rem; border-radius: 999px; background: var(--line); overflow: hidden; margin: .3rem 0; }
.meter-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .6s var(--ease); }
.meter-fill.ok { background: var(--ok-dot); }
.meter-fill.warn { background: var(--warn-dot); }
.warn-text { color: var(--warn); }
.disk-row .meter { max-width: 16rem; }
.alert { display: flex; gap: .7rem; align-items: flex-start; }
.alert > .icon { flex: none; margin-top: .1rem; color: var(--warn-dot); }
.alert.Error > .icon { color: var(--error-dot); }
.alert.Info > .icon { color: var(--info-dot); }
section.health { display: flex; gap: 1rem; align-items: flex-start; border-left: 4px solid var(--ok-dot); }
section.health.error { border-left-color: var(--error-dot); }
section.health h2 { margin: 0 0 .3rem; }
section.health p { margin: .2rem 0; }
.empty-state.small { padding: 1.2rem .5rem; }
.empty-state .empty-icon.ok { background: var(--ok-bg); color: var(--ok-dot); }
section > h2 > .icon, section .row.spread > h2 > .icon { color: var(--accent); }
section .row.spread > h2 { display: flex; align-items: center; gap: .5rem; margin: 0; }
section > h2 { display: flex; align-items: center; gap: .5rem; }
/* Meldungen: ungelesene hervorgehoben, Text unter dem Titel */
.list-row.unread { background: var(--accent-soft); }
.list-row.unread strong::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.list-row .note-text { font-size: .9rem; }
.chip-item .icon { width: .9rem; height: .9rem; margin: 0 .3rem 0 0; }
.game-card .row.spread { margin: 0; }
.game-card .row.spread .icon { margin-right: .35rem; color: var(--muted); }
/* Texte: Karte je Schlüssel, geänderte Karte markiert */
.text-list { display: flex; flex-direction: column; gap: .8rem; }
.text-card { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.text-card.dirty { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.text-card .row.spread { margin-bottom: .6rem; }
.text-card code { font-weight: 600; color: var(--accent-dark); overflow-wrap: anywhere; }
.text-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: .8rem; }
.text-actions { justify-content: flex-end; margin-top: .6rem; }
/* Einstellungen: Zeile mit Beschriftung links und Eingabe rechts */
.settings { display: flex; flex-direction: column; }
.setting-row { display: flex; align-items: center; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.setting-row:first-child { border-top: 0; }
.setting-row .grow { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.setting-row .sub { color: var(--muted); font-size: .84rem; }
.setting-control { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.setting-control input[type="text"] { min-width: 14rem; }
.setting-default { flex: none; }
button.ghost.small { min-height: 0; padding: .25rem .6rem; font-size: .82rem; }
section.health.warn { border-left-color: var(--warn-dot); }
section.health > .switch { align-self: center; }
.grid2.tight { gap: .8rem; }
.grid2.tight > label { margin: 0; }
.switch-line { display: flex; align-items: center; gap: .6rem; color: var(--text); font-weight: 600; }
.deletion-result code { font-size: .8rem; }
/* Vorschaubilder als Karten (Referenzbilder, Vorschläge) */
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }
.thumb-card { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: visible; transition: box-shadow .15s var(--ease), transform .15s var(--ease); }
.thumb-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.thumb-frame { display: flex; align-items: center; justify-content: center; height: 8rem; background: var(--soft); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.thumb-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.thumb-card figcaption { display: flex; flex-direction: column; gap: .3rem; padding: .6rem .8rem; }
.thumb-card figcaption .row.spread { margin: 0; }
.count-badge.soft { background: var(--soft); color: var(--muted); }
.tabs .count-badge { margin-left: .3rem; }
/* Werkbank: Bild links, Werkzeuge rechts */
.workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 1.2rem; align-items: start; }
.workbench-image .live-canvas { max-width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); touch-action: none; cursor: crosshair; }
.workbench-side { display: flex; flex-direction: column; gap: 1rem; }
.workbench-side > section { margin: 0; }
.tool-card { display: flex; flex-direction: column; gap: .5rem; }
.tool-card h3 { margin: 0; display: flex; align-items: center; gap: .45rem; }
@media (max-width: 64rem) { .workbench { grid-template-columns: 1fr; } }
/* Aufgaben-Editor, Jobs, Job-Protokoll */
.task-editor { border-left: 4px solid var(--accent); animation: toastin .2s var(--ease); }
.editor-actions { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.segmented { display: inline-flex; gap: 0; }
.segmented button { border-radius: 0; }
.segmented button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.segmented button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.segmented-count { margin-left: .4rem; padding: 0 .4rem; border-radius: 999px; font-size: .75rem; background: color-mix(in srgb, currentColor 15%, transparent); }
.pager { display: flex; justify-content: center; margin-top: 1rem; }
.card .value.small-value { font-size: 1.2rem; overflow-wrap: anywhere; }
ul.task-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
ul.task-timeline > li { padding: .9rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--idle-dot); border-radius: var(--radius-sm); background: var(--panel); }
ul.task-timeline > li.ok { border-left-color: var(--ok-dot); }
ul.task-timeline > li.error { border-left-color: var(--error-dot); }
ul.task-timeline .game-card-head { margin-bottom: .3rem; }
.row-badges.start { justify-content: flex-start; margin: .2rem 0 0; }
/* Elemente-Editor: Abschnitte, Dann/Sonst nebeneinander, volle Breite für Listen */
.element-form .editor-section { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft); box-shadow: none; }
.element-form .editor-section h3 { margin: 0 0 .7rem; display: flex; align-items: center; gap: .45rem; }
.element-form .span-all { grid-column: 1 / -1; }
.branch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: .8rem; }
.branch-card { display: flex; flex-direction: column; gap: .6rem; padding: .8rem; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--ok-dot); }
.branch-card.else { border-top-color: var(--warn-dot); }
.branch-card h4 { margin: 0; display: flex; align-items: center; gap: .4rem; }
.field-label { display: block; font-size: .86rem; font-weight: 500; color: var(--muted); margin-bottom: .3rem; }
.toolbar-line { flex-wrap: wrap; gap: .6rem; }
.toolbar-line .search input { min-width: 10rem; }
.step-image img { max-width: 100%; max-height: 14rem; border-radius: var(--radius-sm); border: 1px solid var(--line); margin-top: .5rem; }
/* Werkbank */
.canvas-frame { margin-top: .8rem; border-radius: var(--radius-sm); background: var(--soft); overflow: auto; max-height: 75vh; }
.canvas-frame { text-align: center; }
.canvas-frame .live-canvas { display: inline-block; width: auto; height: auto; max-width: 100%; max-height: 72vh; border: 0; vertical-align: top; }
.canvas-frame .live-canvas.actual { max-width: none; max-height: none; }
.canvas-frame .live-canvas:focus-visible { outline: 2px solid var(--accent); }
.image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 18rem; color: var(--muted); }
.image-placeholder .icon { width: 2.4rem; height: 2.4rem; color: var(--accent); }
.need-selection { color: var(--warn); }
.tool-card h4 { margin: .6rem 0 .3rem; font-size: .9rem; }
.list-row.hit { cursor: pointer; }
.image-bar { display: flex; align-items: center; gap: .6rem; height: 2.4rem; flex-wrap: nowrap; }
.image-bar > .muted { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-bar .status { flex: none; }
.invisible { visibility: hidden; }
@media (max-width: 52rem) { .image-bar { flex-wrap: wrap; height: auto; } .image-bar > .muted { flex-basis: 100%; order: 3; height: 1.3rem; line-height: 1.3rem; } }
/* Konto-Aufgaben, Schritte im Job-Protokoll */
.list-row.muted-row { opacity: .6; }
.interval-edit { flex-wrap: nowrap; gap: .3rem; }
.interval-edit input { flex: 0 0 5.5rem; width: 5.5rem; min-width: 0; }
.step-list { display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem; }
.step-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: .7rem; padding: .35rem .6rem; border-radius: var(--radius-sm); background: var(--soft); border-left: 3px solid var(--idle-dot); }
.step-row.ok { border-left-color: var(--ok-dot); }
.step-row.error { border-left-color: var(--error-dot); }
.step-row.tolerated { border-left-color: var(--warn-dot); }
.step-row.inside { border-left-color: var(--line); color: var(--muted); }
.step-row code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-row .thumb { max-height: 2.4rem; }
.step-checks { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .2rem; }
.check-chip { display: inline-flex; align-items: center; gap: .2rem; font-size: .78rem; padding: .05rem .4rem; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); }
.check-chip.ok { border-color: var(--ok-dot); }
.check-chip.miss { border-color: var(--error-dot); }
.check-chip svg { width: .8rem; height: .8rem; }
.score-hist { display: flex; align-items: flex-end; gap: 1px; height: 4rem; padding: .3rem 0; border-bottom: 1px solid var(--line); position: relative; }
.score-hist .bar { flex: 1; background: var(--muted); min-height: 1px; border-radius: 2px 2px 0 0; }
.score-hist .bar.above { background: var(--ok-dot); }
.score-hist .bar.near { background: var(--warn-dot, orange); }
.score-hist .mark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--error-dot); }
.score-scale { display: flex; justify-content: space-between; font-size: .72rem; }
.step-name { display: flex; align-items: baseline; gap: .5rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-name .step-id { font-size: .75rem; color: var(--muted); }
.step-rounds > summary { cursor: pointer; list-style: none; }
.step-rounds > summary::-webkit-details-marker { display: none; }
.step-rounds[open] > .step-list { margin: .3rem 0 .4rem 1.2rem; }
.step-now { display: flex; flex-wrap: wrap; gap: .3rem; align-items: baseline; }
@media (max-width: 52rem) { .step-row { grid-template-columns: minmax(0, 1fr) auto; } .interval-edit { order: 5; } }
/* Aufgaben-Editor: Versionen als Chips */
.version-chips { margin: .3rem 0 1rem; }
button.version-chip { opacity: 1; }
button.version-chip.on { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); }
button.version-chip.ok::before, button.version-chip.run::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .4rem; border-radius: 50%; background: var(--ok-dot); vertical-align: middle; }
button.version-chip.run::before { background: var(--accent); }
.task-editor .editor-section { margin: 0 0 .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft); box-shadow: none; }
.task-editor .editor-section h3 { margin: 0 0 .5rem; display: flex; align-items: center; gap: .45rem; }
.param-row input:not([type]), .param-row input[type="text"] { flex: 1 1 8rem; min-width: 0; }
.param-row select { flex: 0 1 10rem; }
/* Suchfeld mit Vorschlägen (Konten, Kunden) statt langer Auswahllisten */
.search-picker { position: relative; }
.search-picker input { width: 100%; }
.picker-list { position: absolute; top: calc(100% + .25rem); left: 0; right: 0; min-width: 16rem; z-index: 30; max-height: 18rem; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: .25rem; }
.picker-option { display: grid; gap: .1rem; padding: .45rem .6rem; border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.picker-option .sub { color: var(--muted); font-size: .85em; }
.picker-option:hover, .picker-option.active { background: var(--hover); }
.picker-option.recent strong::after { content: ' ★'; color: var(--muted); font-weight: 400; }
.picker-empty { padding: .45rem .6rem; }
/* Bildquelle der Werkbank: Galerie der Job-Bilder, Hochladen, Live-Bild */
.image-source { display: grid; gap: .6rem; margin-bottom: .8rem; }
.image-source .tabs { margin-bottom: 0; }
.image-source-body { display: grid; gap: .6rem; }
.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); grid-auto-rows: max-content; gap: .6rem; max-height: 22rem; overflow-y: auto; }
.shot-card { display: grid; align-content: start; justify-content: stretch; gap: .3rem; padding: .4rem; min-height: 0; white-space: normal; text-align: left; box-shadow: none; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 400; }
.shot-card:hover { border-color: var(--accent); background: var(--hover); }
.shot-card.off-size { opacity: .7; }
.shot-thumb { display: grid; place-items: center; height: 7rem; background: var(--soft); border-radius: var(--radius-sm); overflow: hidden; }
.shot-thumb img { max-width: 100%; max-height: 7rem; }
.shot-card > span { min-width: 0; overflow-wrap: anywhere; }
details.image-pick > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .4rem; padding: .2rem 0; }
details.image-pick[open] > summary { margin-bottom: .6rem; }
/* Konten einer Buchung ankreuzen: Suche, Zähler, aktuelle Buchung je Konto */
.account-tools { gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }
.account-tools .search input { min-width: 0; width: 14rem; max-width: 100%; }
.account-checks { max-height: 20rem; }
.account-check { display: flex; align-items: center; gap: .5rem; }
.account-check .grow { flex: 1; min-width: 0; }
.account-check .chip-item { white-space: nowrap; }
.drawer-body select { max-width: 100%; min-width: 0; width: 100%; } /* lange Paketnamen laufen sonst über den Rand */
.error-text { color: var(--error, #c62828); font-weight: 600; }
.stack { display: grid; gap: .8rem; } /* untereinander mit Abstand (Import, Export) */
/* Kontoseite: Einrichtung als Hinweis, Testmodus, Befehle zum Kopieren */
section.callout.warn { border-left: 4px solid var(--warn); }
a.button { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; min-height: 2.4rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; text-decoration: none; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text); }
a.button.secondary { background: var(--panel); color: var(--text); border-color: var(--line); }
a.button.secondary:hover { background: var(--soft); }
.command-list { display: grid; gap: .5rem; }
.command-line { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.command-line code { overflow-wrap: anywhere; background: var(--soft); padding: .35rem .5rem; border-radius: var(--radius-sm); }
.test-shot { margin-top: .8rem; }
.test-image { max-width: 100%; max-height: 60vh; border: 1px solid var(--line); border-radius: var(--radius-sm); }
@media (max-width: 640px) { .command-line { grid-template-columns: minmax(0, 1fr) auto; } .command-line > span { grid-column: 1 / -1; } }
/* Job-Slot: kompakt, mit Namen der laufenden Aufgabe */
.slot-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.slot-number { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.slot-card.running .slot-number .icon { color: var(--accent); }
.slot-card .slot-account { margin-top: .6rem; }
.slot-task { display: grid; gap: .3rem; margin-top: .4rem; }
.slot-task-line { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.slot-task-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.slot-task progress { width: 100%; }
.slot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.slot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .7rem; }
button.danger-text { color: var(--error); }
/* Aufgaben: Reihenfolge in der Liste, Haupt-Routen mit Suche, Info und Bearbeiten */
.task-position { min-width: 1.6rem; text-align: center; font-weight: 700; color: var(--muted); }
.row.nowrap { flex-wrap: nowrap; }
.task-route { display: grid; gap: .3rem; }
.task-row .search-picker { flex: 1 1 14rem; min-width: 0; }
.task-row .search-picker input { min-width: 0; }
.route-info-box { margin: 0 0 .3rem 2.2rem; padding: .5rem .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.route-info-box .facts { margin: 0; }
a.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: var(--radius-sm); color: var(--muted); }
a.icon-link:hover { background: var(--hover); color: var(--text); }
a.icon-link[hidden] { display: none; }
/* Eine Karte mit Suchfeld darf die Vorschlagsliste über ihren Rand zeigen (sonst schneidet der Bildlauf der Karte sie ab) */
section:has(.search-picker), .tool-card:has(.search-picker) { overflow: visible; }
.testbench .search-picker { flex: 1 1 22rem; min-width: 0; }
.testbench .tool-card .row { flex-wrap: wrap; }
/* Galerie: Löschen-Knopf oben rechts auf dem Bild (nur der Admin) */
.shot-wrap { position: relative; display: grid; }
.shot-delete { position: absolute; top: .3rem; right: .3rem; z-index: 2; background: var(--panel); color: var(--error); box-shadow: var(--shadow); }
.shot-delete:hover { background: var(--error-bg); }
/* Galerie im Auswahlmodus: markierte Bilder mit Rahmen und Haken */
.shot-grid.selecting .shot-delete { display: none; }
.shot-wrap.marked .shot-card { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--accent-soft); }
.shot-wrap.marked::after { content: '✓'; position: absolute; top: .3rem; left: .4rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; font-weight: 700; }
.shot-select { gap: .4rem; }
/* Schritte einer Aufgabe: Karten untereinander, oben Nummer und Text, darunter Baustein und Angaben */
.steps-editor { display: grid; gap: .8rem; }
.step-start { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.step-start .search-picker { flex: 1 1 16rem; min-width: 0; }
.step-list { display: grid; gap: .6rem; }
.step-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft); padding: .6rem .7rem; display: grid; gap: .5rem; }
.step-head { display: flex; align-items: center; gap: .5rem; }
.step-number { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 700; font-size: .85rem; }
.step-label { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.step-body { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; padding-left: 2.2rem; }
.step-body .search-picker { flex: 1 1 14rem; min-width: 0; }
.step-body .row { flex-wrap: wrap; gap: .4rem; }
.step-target input[type=number] { width: 5.5rem; }
.pick-canvas { cursor: crosshair; }
.step-card:has(.search-picker), .steps-editor { overflow: visible; }
@media (max-width: 640px) { .step-body { padding-left: 0; } }
/* Sicherungen als Formular */
.protect-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft); padding: .7rem .9rem; margin-bottom: .8rem; display: grid; gap: .5rem; }
.protect-card h3 { margin: 0; }
.protect-list { display: grid; gap: .4rem; }

/* Kontoeinstellungen: Gruppen mit Zeilen (am Konto) und zugeklappte Zeilen (Editor) */
.setting-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin-bottom: 1rem; overflow: hidden; }
.setting-group > h3 { margin: 0; padding: .65rem 1rem; background: var(--soft); border-bottom: 1px solid var(--line); font-size: .95rem; }
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem); gap: 1.2rem; align-items: start; padding: .9rem 1rem; border-top: 1px solid var(--line); }
.setting-group > h3 + .setting-row { border-top: 0; }
.setting-row.setting-locked .setting-control { opacity: .45; }
.setting-text p { margin: .3rem 0 0; font-weight: 400; line-height: 1.45; }
.setting-control { display: grid; gap: .45rem; }
.setting-control select, .setting-control input[type=number] { width: 100%; }
.check-inline { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
/* Mehrfachauswahl als Schalter, gewählte Einträge leicht hervorgehoben */
/* (Reihe, die umbricht: ein langer Name macht sein Feld breiter, statt mitten im Wort umzubrechen) */
.switch-options { display: flex; flex-wrap: wrap; gap: .45rem; }
.switch-option { flex: 1 1 9.5rem; display: flex; align-items: center; gap: .6rem; padding: .45rem .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s; }
.switch-option:hover { border-color: var(--accent); }
.switch-option.on { background: var(--accent-soft); border-color: transparent; }
.switch-option-name { line-height: 1.25; }
.choice-tile { justify-content: flex-start; text-align: left; font: inherit; }
.choice-tile-image { width: 2.25rem; height: 2.25rem; object-fit: contain; flex: none; }
.setting-line { border-top: 1px solid var(--line); }
.setting-group > h3 + .setting-line { border-top: 0; }
/* Kopfzeile: Pfeil | Name | Art, Schlüssel, Kunde | Sortierpfeile; schmal rutscht nur die Mitte in eine zweite Zeile */
.setting-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "chev title meta arrows"; align-items: center; gap: .4rem .8rem; padding: .6rem 1rem; cursor: pointer; }
.setting-chevron { grid-area: chev; display: flex; }
.setting-title { grid-area: title; min-width: 0; overflow-wrap: anywhere; }
.setting-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; }
.setting-arrows { grid-area: arrows; display: flex; gap: .1rem; }
.setting-head:hover { background: var(--hover); }
.setting-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.setting-head .rot-270 { transform: rotate(-90deg); }
.setting-line.open .setting-head { background: var(--soft); }
.setting-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem 1rem 1rem 2.6rem; border-top: 1px dashed var(--line); }
.setting-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem; align-items: start; max-width: 52rem; }
.setting-fields > * { min-width: 0; }
.setting-fields .span-all { grid-column: 1 / -1; }
.setting-fields input, .setting-fields select, .setting-fields textarea { width: 100%; box-sizing: border-box; }
.setting-translations { max-width: 52rem; margin: .9rem 0; }
.setting-translations > summary { cursor: pointer; color: var(--muted); }
.setting-translations > .setting-fields { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.setting-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; max-width: 52rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.badge.accent { color: var(--accent-dark); background: var(--accent-soft); border-color: transparent; }
@media (max-width: 720px) {
  .setting-row { grid-template-columns: 1fr; gap: .6rem; }
  .setting-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "chev title arrows" ". meta meta"; }
  .setting-meta { justify-content: flex-start; }
  .setting-form { padding-left: 1rem; }
  .setting-fields { grid-template-columns: minmax(0, 1fr); }
}
.protect-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.protect-row .search-picker { flex: 1 1 14rem; min-width: 0; }
.protect-row input[type=number] { width: 6rem; }
.protect-radius { gap: .5rem; align-items: center; }
section:has(.protect-card) { overflow: visible; }
/* Elemente: Gruppen aus dem Namen (aufklappbar) */
.group-tools { justify-content: flex-end; margin-bottom: .4rem; }
.element-group { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); margin-bottom: .6rem; overflow: hidden; }
.element-group > summary { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; cursor: pointer; list-style: none; background: var(--soft); }
.element-group > summary::-webkit-details-marker { display: none; }
.element-group > summary .group-space { flex: 1; }
.element-group > summary .group-rename { padding: .15rem .4rem; }
/* Pfeil zum Auf- und Zuklappen rechts */
.element-group > summary .group-chevron { display: inline-flex; color: var(--muted); transition: transform .15s; transform: rotate(-90deg); }
.element-group[open] > summary .group-chevron { transform: none; }
.element-group > .list { border: 0; border-radius: 0; }
.shot-total { gap: .6rem; align-items: center; margin: .3rem 0; }
.shot-check { display: block; }

/* Kontowerte: kleiner Verlauf und Veränderung */
.sparkline { width: 220px; max-width: 100%; height: 44px; color: var(--accent, #2563eb); display: block; }
.values-table td { vertical-align: middle; }
.ok-text { color: var(--ok); font-weight: 600; }
.values-table tr.value-over td:first-child { border-left: 3px solid var(--error, #c62828); }

/* Kontowerte als Karten: Symbol, Zahl, Veränderung, Füllstand, Verlauf */
.value-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.value-card { border: 1px solid var(--line, #dde3ea); border-radius: 12px; padding: 12px; background: var(--card, #fff); display: flex; flex-direction: column; gap: 8px; }
.value-card.over { border-color: var(--error, #c62828); }
.value-head { all: unset; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.value-head:focus-visible { outline: 2px solid var(--accent, #0e7c86); outline-offset: 4px; border-radius: 8px; }
.value-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft, #e6f4f5); }
.value-icon .icon { width: 24px; height: 24px; }
.value-food { color: #b7791f; background: #fdf3dc; } .value-wood { color: #8a5a2b; background: #f6ece2; } .value-iron { color: #59636e; background: #eceff2; }
.value-quartz { color: #2b6cb0; background: #e3eefb; } .value-gold { color: #b8860b; background: #fdf5d6; } .value-gem { color: #2f855a; background: #e2f5ea; }
.value-name { font-weight: 600; } .value-number { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.value-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.value-fill { position: relative; height: 18px; border-radius: 9px; background: var(--line, #e5e9ee); overflow: hidden; }
.value-fill-bar { position: absolute; inset: 0 auto 0 0; background: var(--ok-dot, #16a34a); opacity: .55; }
.value-fill-bar.over { background: var(--error, #c62828); }
.value-fill span { position: relative; padding-left: 8px; line-height: 18px; }
.value-chart-box { position: relative; }
.value-chart { width: 100%; height: auto; display: block; color: var(--accent, #0e7c86); }
.value-chart .grid { stroke: var(--line, #e5e9ee); stroke-width: 1; }
.value-chart .axis { fill: var(--muted, #6b7280); font-size: 11px; }
.value-chart .line { fill: none; stroke: currentColor; stroke-width: 2.5; }
.value-chart .threshold { stroke: var(--error, #c62828); stroke-width: 1.5; stroke-dasharray: 6 4; }
.value-chart .dot { fill: currentColor; }
.chart-tip { position: absolute; top: 4px; right: 8px; font-size: .85rem; padding: 2px 8px; border-radius: 6px; background: var(--card, #fff); border: 1px solid var(--line, #dde3ea); }
@media (prefers-color-scheme: dark) { .value-icon { filter: saturate(.9); } }
/* Neue Version auf dem Server: Hinweis unten mit "Neu laden" */
.update-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px; background: var(--accent-soft, #e6f4f5); color: var(--accent-dark, #0e5f66); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); max-width: calc(100% - 32px); }

/* Einstellungs-Gruppen auf- und zuklappbar */
details.setting-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .65rem 1rem; background: var(--soft); font-weight: 600; font-size: .95rem; }
details.setting-group > summary::-webkit-details-marker { display: none; }
details.setting-group[open] > summary { border-bottom: 1px solid var(--line); }
details.setting-group > summary .setting-group-title { flex: 1; }
details.setting-group > summary .setting-group-chevron .icon { transition: transform .15s; transform: rotate(-90deg); }
details.setting-group[open] > summary .setting-group-chevron .icon { transform: none; }
details.setting-group > summary + .setting-row, details.setting-group > summary + .setting-line { border-top: 0; }

/* Kontowerte: ohne Werte kompakt, ruhiges Antippen (kein Kasten, kein Schatten) */
.value-card.empty { padding: 8px 12px; }
.value-card.empty .value-icon { width: 32px; height: 32px; }
.value-head, .value-head:hover, .value-head:active, .value-head:focus { background: none; box-shadow: none; -webkit-tap-highlight-color: transparent; }
.value-head.static { cursor: default; }
@media (max-width: 600px) { .value-cards { grid-template-columns: 1fr; gap: 8px; } .value-number { font-size: 1.3rem; } }

/* Fortschritt einer längeren Aktion (unten, wie die Meldungen) */
.toast.progress { min-width: 240px; }
.progress-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.progress-track { height: 6px; border-radius: 3px; background: var(--line, #e5e9ee); overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--accent, #0e7c86); transition: width .2s; }
.progress-bar.indeterminate { width: 40%; animation: progress-slide 1.1s infinite ease-in-out; }
@keyframes progress-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.icon.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .progress-bar.indeterminate, .icon.spin { animation: none; } }

/* Auswahlfelder überall gleich mit eigenem Pfeil (am iPhone sahen sie sonst wie Textfelder aus); Bild aus der eigenen Seite, die CSP erlaubt keine data:-Bilder */
select:not([multiple]):not([size]) { appearance: none; -webkit-appearance: none; background-image: url("/select-arrow.svg"); background-repeat: no-repeat; background-position: right .6rem center; background-size: 1rem; padding-right: 2rem; }
/* Touch-Geräte: Felder mit mindestens 16 px Schrift, sonst zoomt Safari beim Antippen hinein und bleibt gezoomt (Formular wirkt abgeschnitten, Seite breiter) */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea,
  td input:not([type="checkbox"]), td select, td textarea, .who select { font-size: 16px; }
}

/* Einstellungen: sofort speichern ohne Springen. Rückmeldung oben rechts über dem Inhalt; Hinweis mit festem Platz, „Vorgabe“ immer an derselben Stelle */
.setting-row { position: relative; }
.setting-status { position: absolute; top: .4rem; right: .6rem; padding: 0 .3rem; border-radius: var(--radius-sm); background: var(--panel); display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; color: var(--muted); pointer-events: none; }
.setting-status .icon { width: .9rem; height: .9rem; }
.setting-status.saved { color: var(--ok); } .setting-status.error { color: var(--error); }
.setting-foot-line { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; min-height: 2.6rem; }
.setting-foot-line .setting-note { flex: 1; min-width: 0; line-height: 1.3; }
.setting-foot-line > button { flex: none; }
.setting-control .switch-line > span:last-child { min-width: 3.5em; } /* An/Aus gleich breit */

/* Bild-Sicherungen (ZIP): Liste mit Name, Umfang und Knöpfen; lange Namen brechen um */
.backup-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.backup-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.backup-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 14rem; }
.backup-text strong { overflow-wrap: anywhere; font-weight: 600; font-size: .9rem; }
.toast .ghost.small { margin-left: .25rem; }

/* Job-Seite: Aufgaben auf- und zuklappbar, Dauer gut sichtbar; Schritte brechen um statt abgeschnitten zu werden, Ergebnis als kleines Zeichen */
.task-toggle { justify-content: flex-end; gap: .4rem; margin-bottom: .4rem; }
details.task-log > summary { display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none; flex-wrap: wrap; }
details.task-log > summary::-webkit-details-marker { display: none; }
.task-log-chevron { display: inline-flex; transition: transform .15s; transform: rotate(-90deg); color: var(--muted); }
details.task-log[open] .task-log-chevron { transform: none; }
.task-log-name { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.task-duration { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.task-duration .icon { width: .95rem; height: .95rem; }
details.task-log[open] > summary { margin-bottom: .4rem; }
.step-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.step-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.step-row .step-name { display: block; white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.35; }
.step-meta { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.step-mark { display: inline-flex; margin-top: .15rem; color: var(--idle-dot); }
.step-mark .icon { width: 1rem; height: 1rem; }
.step-mark.ok { color: var(--ok-dot); } .step-mark.error { color: var(--error-dot); } .step-mark.tolerated { color: var(--warn-dot); } .step-mark.inside { color: var(--muted); }
@media (max-width: 52rem) { .step-row { grid-template-columns: auto minmax(0, 1fr) auto; } }

/* Protokollzeilen (Log-Aktion, Abschnitt „Protokoll“): hervorgehoben, damit sie zwischen den technischen Schritten auffallen */
.step-row.log { background: var(--info-bg); border-left-color: var(--info-dot); }
.step-row.log.warn { background: var(--warn-bg); border-left-color: var(--warn-dot); }
.step-row.log.error { background: var(--error-bg); border-left-color: var(--error-dot); }
.step-row.log .step-name { font-weight: 600; }
.step-mark.log { color: var(--info); }