/* voiguad. Admin – baut auf ui.css auf (Schriften, Tokens, Buttons wie die Website) */
:root {
  --ground: var(--color-ground); --surface: var(--color-surface); --raised: #1a1a1a; --line: #2a2a2a;
  --ink: var(--color-ink); --ink-soft: var(--color-ink-soft); --ink-muted: var(--color-ink-muted);
  --accent: var(--color-start); --warn: var(--color-party); --ok: var(--color-start);
  --radius: 8px;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.5 "Lato", "Helvetica Neue", Arial, sans-serif; }
a { color: var(--accent); }
h1, h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 900; line-height: 1.15; }
h1 { font-size: 32px; }
h2 { font-size: 22px; }
h3 { font-size: 16px; }

/* Abstände – ein System für alle Seiten: Bausteine haben keinen Außenabstand, der Abstand entsteht zwischen
   Geschwistern in den Inhaltsbereichen. 16px zwischen Blöcken, 24px nach der Seitenüberschrift und vor h3, 48px vor h2.
   Versteckte Felder, leere Aktionsformulare (hidden) und Vorlagen zählen nicht mit. */
:where(.admin-main) :where(h1, h2, h3, p, ul, ol, dl, dd, pre, table, form, fieldset) { margin: 0; }
:where(.admin-main, .edit, .group, .item, .msg, .msg-quote, .disclose, .dash-box, .dash-cols > div, .todo, .help-part) > :where(:not([type=hidden], [hidden], template)) ~ * { margin-top: 16px; }
:where(.admin-main, .edit, .group, .item, .msg, .msg-quote, .disclose, .dash-box, .dash-cols > div, .todo, .help-part) > :where(:not([type=hidden], [hidden], template)) ~ h3 { margin-top: 24px; }
:where(.admin-main, .edit, .group, .item, .msg, .msg-quote, .disclose, .dash-box, .dash-cols > div, .todo, .help-part) > :where(:not([type=hidden], [hidden], template)) ~ :where(h2, section) { margin-top: 48px; }
.admin-main > h1 + * { margin-top: 24px; }

/* Kopf */
.admin-bar { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 2; }
.admin-logo { display: block; flex: none; margin: 0; line-height: 0; }
.admin-logo img { display: block; width: auto; height: 40px; }
.admin-logo-large { justify-self: center; }
.admin-logo-large img { height: 60px; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; flex: 1; }
.admin-nav a { color: var(--ink-soft); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.admin-nav a:hover, .admin-nav a[aria-current] { color: var(--ink); border-color: var(--accent); }
.admin-user { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13px; }
.admin-main { max-width: 1120px; margin: 0 auto; padding: 32px 24px 96px; }

/* Bausteine der Oberfläche */
.help { color: var(--ink-muted); font-size: 13px; }
.flash { padding: 12px 16px; border-left: 3px solid var(--ok); border-radius: var(--radius); background: var(--raised); }
.flash-error { border-color: var(--warn); }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.tag-new { background: var(--accent); color: var(--ground); }
.tag-warn { background: var(--warn); color: var(--ground); }
.plain { padding-left: 18px; }
.list-bare { padding: 0; list-style: none; }
.help-block { display: block; }
/* Aufklappen (z. B. Änderungen einer Version) */
.disclose > summary { color: var(--accent); cursor: pointer; }

/* Tabellen */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table th { color: var(--ink-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.table tr.off td { opacity: .5; }
.table-top td { vertical-align: top; }
.col-sort { width: 1%; white-space: nowrap; }
.move { display: inline-block; margin-right: 4px; vertical-align: middle; }

/* Formulare */
.group { padding: 8px 24px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.group > legend { padding: 0 8px; color: var(--ink-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.group-fields, .item-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px 24px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > .label { color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.field:has(textarea), .field-wide { grid-column: 1 / -1; }
.field-check { display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--ink-soft); }
/* Häkchen als eigenes Feld im Raster: auf Höhe der Eingabefelder daneben */
.field.field-check { align-self: end; min-height: 44px; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); color: var(--ink); font: inherit;
}
/* Eingabefelder und Auswahl einheitlich 44px hoch (wie die Icon-Buttons), Textfelder wachsen */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select { height: 44px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { resize: vertical; }
.hint { color: var(--ink-muted); font-size: 12px; font-family: ui-monospace, Consolas, monospace; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.checks-stack { flex-direction: column; }
.media-pick { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.media-pick .btn-group { grid-column: 1 / -1; }
.media-pick .btn-group > .btn { flex: 0 0 auto; }
.thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; background: var(--raised); flex: none; }
/* Funktionsleiste: Zurück | Ansehen, Aktionen | Löschen · Abbrechen · Speichern */
.form-bar { position: sticky; top: var(--head-h, 0); z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); background: var(--ground); }
.form-bar-bottom { position: static; border-top: 1px solid var(--line); border-bottom: 0; }
.form-bar-space { flex: 1; }
/* „Weitere“: alles, was nicht sichtbar in die Leiste passt; Löschen ganz unten */
.bar-more { position: relative; }
.bar-more > summary { list-style: none; }
.bar-more > summary::-webkit-details-marker { display: none; }
.bar-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 3; display: grid; min-width: 260px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.form-bar-bottom .bar-menu { top: auto; bottom: calc(100% + 8px); }
.bar-menu-item { display: flex; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.bar-menu-item:hover, .bar-menu-item:focus-visible { background: var(--surface); }
.bar-menu-item .icon { width: 18px; height: 18px; color: var(--ink-soft); }
.bar-menu-item.is-danger { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; color: var(--warn); }
.bar-menu-item.is-danger .icon { color: var(--warn); }
@media (max-width: 767px) {
  .btn-collapse { width: 44px; height: 44px; padding: 0; }
  .btn-collapse .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* Gesprächsverlauf einer Anfrage */
.thread { display: grid; gap: 16px; padding: 0; list-style: none; }
.msg { max-width: 760px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.msg-out { justify-self: end; border-color: rgba(46, 196, 182, .4); background: #0f1d1c; }
.msg-auto { opacity: .7; }
.msg-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.msg-body { overflow-wrap: anywhere; }
.msg-quote { color: var(--ink-muted); font-size: 13px; }
.msg-quote summary { cursor: pointer; }
.msg-quote div { padding-left: 12px; border-left: 2px solid var(--line); }
.status-line { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.form-note { color: var(--ink-muted); font-size: 13px; }

/* Pflichtfelder und Fehler */
.req { color: var(--warn); }
.field-error { color: var(--warn); font-size: 13px; font-weight: 700; }
.is-invalid input, .is-invalid select, .is-invalid textarea { border-color: var(--warn); }
.group.is-invalid { border-color: var(--warn); }
.inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.inline :is(input, select) { flex: 0 1 320px; width: auto; }

/* Wiederholbare Einträge */
.items { display: grid; gap: 16px; }
.item { padding: 12px 16px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
.is-deleted { opacity: .4; }
.item-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.item-title { font-weight: 700; }
.item-tools { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--ink-muted); }
.item-del { display: flex; gap: 4px; align-items: center; }

/* Übersicht, Medien, Anfragen */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; }
.card:hover { border-color: var(--accent); }
.card-warn { border-color: var(--warn); }
.card-value { display: block; font: 900 32px "Playfair Display", Georgia, serif; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.media-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--ink-muted); font-size: 12px; word-break: break-all; }
.media-tile > a { display: flex; flex-direction: column; gap: 6px; width: 100%; color: var(--ink-soft); text-decoration: none; }
.media-tile .thumb, .pick-tile .thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #2a2a2a; }
.media-tile > a:hover .thumb { border-color: var(--accent); }
.media-check { position: absolute; top: 6px; left: 6px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: rgba(0, 0, 0, .6); }
.media-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.icon-small { width: 14px; height: 14px; }
.thumb-file { display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.thumb-large { width: 100%; aspect-ratio: 4 / 3; font-size: 32px; }
.media-pick-thumb { line-height: 0; }
.media-pick-name { color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
.media-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.media-preview { display: grid; gap: 12px; align-content: start; }
.media-preview > img, .media-preview > video { width: 100%; border-radius: var(--radius); background: #2a2a2a; }
.media-preview > audio { width: 100%; }
/* Hochladen: Ablagefläche und Fortschritt je Datei */
.dropzone { display: grid; gap: 8px; justify-items: center; padding: 24px 16px; border: 2px dashed var(--line); border-radius: var(--radius); color: var(--ink-soft); text-align: center; cursor: pointer; }
.dropzone.is-over, .dropzone:focus-within { border-color: var(--accent); }
.dropzone input[type=file] { width: min(420px, 100%); height: auto; padding: 8px; }
.upload-list { display: grid; gap: 8px; }
.upload-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 200px) minmax(0, 1fr); gap: 12px; align-items: center; font-size: 13px; overflow-wrap: anywhere; }
.upload-list .is-error .help { color: var(--warn); font-weight: 700; }
.alt-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.alt-row:first-child { border-top: 0; }
.alt-row .thumb { width: 120px; height: 90px; }
/* Fokuspunkt: 5 × 5 Felder über dem Bild, Vorschau der Zuschnitte */
.focus-box { position: relative; justify-self: start; max-width: 100%; line-height: 0; }
.focus-box img { display: block; max-width: 100%; max-height: 70vh; border-radius: var(--radius); }
.focus-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); }
.focus-cell { display: grid; place-items: center; cursor: pointer; }
.focus-cell input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.focus-cell::after { content: ""; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 50%; background: rgba(0, 0, 0, .3); }
.focus-cell:hover::after { border-color: #fff; }
.focus-cell:has(input:checked)::after { width: 26px; height: 26px; border-color: #fff; background: var(--accent); box-shadow: 0 0 0 4px rgba(0, 0, 0, .5); }
.focus-cell:has(input:focus-visible)::after { outline: 2px solid var(--accent); outline-offset: 3px; }
.crops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.crop { display: grid; gap: 4px; margin: 0; color: var(--ink-muted); font-size: 12px; }
.crop img { width: 100%; object-fit: cover; object-position: center; border-radius: 4px; background: #2a2a2a; }
.crop-wide img { aspect-ratio: 16 / 9; }
.crop-landscape img { aspect-ratio: 4 / 3; }
.crop-square img { aspect-ratio: 1; }
.crop-portrait img { aspect-ratio: 3 / 4; }
/* Schlagworte: Vorschläge beim Tippen */
.tag-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-suggest button { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.tag-suggest button:hover, .tag-suggest button:focus-visible { border-color: var(--accent); }
/* Auswahldialog für Dateifelder */
.picker { width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.picker::backdrop { background: rgba(0, 0, 0, .7); }
.picker-head { position: sticky; top: 0; z-index: 1; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--surface); }
.picker-head h2 { margin: 0; }
.picker-body { display: grid; gap: 16px; padding: 16px 24px 24px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.pick-tile { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--raised); color: var(--ink-soft); font: inherit; font-size: 12px; text-align: left; word-break: break-all; cursor: pointer; }
.pick-tile:hover, .pick-tile:focus-visible, .pick-tile.is-selected { border-color: var(--accent); }
.pick-tile .media-name { display: flex; gap: 4px; align-items: center; }
/* Anhänge an Antworten */
.attach-list { display: grid; gap: 4px; max-height: 300px; overflow: auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); }
.attach-list > label { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 4px 0; }
.attach-list > label[hidden] { display: none; }
.files-sent { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 13px; }
.facts { display: grid; grid-template-columns: max-content 1fr; align-content: start; gap: 8px 24px; }
.facts dt { color: var(--ink-muted); }
.message { padding: 16px 20px; border-radius: var(--radius); background: var(--surface); white-space: normal; }

/* Anmeldung */
.admin-login { display: grid; min-height: 100vh; place-items: center; padding: 16px; }
.login-box { display: grid; gap: 16px; width: min(380px, 100%); padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.login-box form { display: grid; gap: 16px; }

@media (max-width: 767px) {
  .admin-bar { position: static; padding: 12px 16px; }
  .admin-nav { flex: 1 1 100%; order: 3; gap: 4px 16px; }
  .admin-main { padding: 24px 16px 96px; }
  .group-fields, .item-fields { grid-template-columns: 1fr; }
  .media-detail { grid-template-columns: 1fr; }
  .upload-list li { grid-template-columns: 1fr; gap: 4px; }
  .alt-row { grid-template-columns: 72px minmax(0, 1fr); }
  .alt-row .thumb { width: 72px; height: 54px; }
  .picker-head, .picker-body { padding-right: 16px; padding-left: 16px; }
  .table { display: block; overflow-x: auto; }
}
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

/* Menü-Gruppen (Dropdown per Klick) */
.nav-group { position: relative; }
.nav-group > summary { padding: 4px 0; border-bottom: 2px solid transparent; color: var(--ink-soft); cursor: pointer; list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: " ▾"; font-size: 11px; }
.nav-group > summary:hover, .nav-group[open] > summary, .nav-group > summary.is-active { color: var(--ink); border-color: var(--accent); }
.nav-menu { position: absolute; top: calc(100% + 8px); left: -12px; z-index: 3; display: grid; min-width: 200px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.nav-menu a { padding: 8px 12px; border: 0; border-radius: 6px; }
.nav-menu a:hover, .nav-menu a[aria-current] { background: var(--surface); color: var(--ink); }
/* Trennlinie zwischen Gruppen im Untermenü – eingerückt, nicht über die ganze Breite */
.nav-sep { width: 48px; margin: 6px 12px; border: 0; border-top: 1px solid var(--color-line-strong); }
.admin-nav .tag { margin-left: 4px; }

/* Übersicht */
.todo { padding: 20px 24px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.todo-list { display: grid; gap: 6px; padding: 0; list-style: none; }
.todo-list .is-error a { color: var(--warn); }
.dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dash-box { padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.dash-wide { grid-column: 1 / -1; }
.dash-box h2 a { color: var(--ink); text-decoration: none; }
.dash-box h2 a::after { content: " →"; color: var(--accent); font-size: 16px; }
.dash-box h3 { color: var(--ink-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.dash-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.stats-row dt { color: var(--ink-muted); font-size: 13px; }
.stats-row dd { font: 900 32px "Playfair Display", Georgia, serif; }
.stats-row dd.help { font: 13px "Lato", sans-serif; }
.stats-row .is-error dd { color: var(--warn); }
.table-small td { padding: 6px 8px; font-size: 14px; }

@media (max-width: 767px) {
  .nav-group { flex: 1 1 100%; }
  .nav-menu { position: static; margin-top: 4px; box-shadow: none; }
  .dash, .dash-cols { grid-template-columns: 1fr; }
}

/* Systemprüfung, Stammdaten, Hilfe */
.tag-hint { background: var(--raised); border: 1px solid var(--ink-muted); color: var(--ink-soft); }
code, .ph { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.ph { padding: 1px 6px; border-radius: 4px; background: var(--raised); color: var(--accent); font-weight: 400; }
.log { max-height: 360px; overflow: auto; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink-soft); font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.help-toc { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.help-part ol, .help-part ul { padding-left: 20px; }
.try { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.try-out { min-height: 140px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); }
.try-out em { color: var(--accent); }
@media (max-width: 767px) {
  .try { grid-template-columns: 1fr; }
}
.input-narrow { width: auto; max-width: 280px; }

/* Einträge in einer Zeile (z. B. Punkte einer Checklisten-Vorlage), Liste mit Trennlinien */
.rows { display: grid; }
.item-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 260px auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.rows > .item-row:first-child { border-top: 0; }
.item-head > .field { flex: 1; max-width: 480px; }

/* Checkliste eines Auftritts: Häkchen | (Uhrzeit) | Punkt | Anmerkung */
.progress { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
progress { width: min(320px, 100%); height: 8px; border: 0; border-radius: 999px; background: var(--line); overflow: hidden; appearance: none; }
progress::-webkit-progress-bar { background: var(--line); }
progress::-webkit-progress-value { background: var(--accent); }
progress::-moz-progress-bar { background: var(--accent); }
.check-list { display: grid; }
.check-list:empty { display: none; }
.check-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1.2fr) 48px; gap: 8px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.check-list:first-of-type > .check-row:first-child { border-top: 0; }
.check-row-time { grid-template-columns: 24px 120px minmax(0, 1fr) minmax(0, 1.2fr) 48px; }
.check-row > input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.check-row.is-done .check-label > span:first-child { color: var(--ink-muted); }
.check-label, .check-note { display: flex; flex-direction: column; gap: 4px; }
.check-del { display: flex; gap: 6px; align-items: center; justify-self: end; color: var(--ink-muted); cursor: pointer; }
.check-del .icon { width: 18px; height: 18px; }
.check-del:has(:checked) { color: var(--warn); }
@media (max-width: 767px) {
  .item-row { grid-template-columns: 1fr; }
  .check-row { grid-template-columns: 24px minmax(0, 1fr) 48px; }
  .check-row-time { grid-template-columns: 24px 120px minmax(0, 1fr) 48px; }
  .check-note { grid-column: 2 / -1; }
  .check-del { grid-row: 1; grid-column: -2; }
}

/* Fokuspunkt aus der Medienbibliothek (5 × 5): schlägt die Vorgabe des Bausteins.
   Ohne Punkt keine Klasse – dann gilt object-position des Bausteins. */
.focus-0-0 { object-position: 0% 0% !important; } .focus-0-1 { object-position: 0% 25% !important; } .focus-0-2 { object-position: 0% 50% !important; } .focus-0-3 { object-position: 0% 75% !important; } .focus-0-4 { object-position: 0% 100% !important; }
.focus-1-0 { object-position: 25% 0% !important; } .focus-1-1 { object-position: 25% 25% !important; } .focus-1-2 { object-position: 25% 50% !important; } .focus-1-3 { object-position: 25% 75% !important; } .focus-1-4 { object-position: 25% 100% !important; }
.focus-2-0 { object-position: 50% 0% !important; } .focus-2-1 { object-position: 50% 25% !important; } .focus-2-2 { object-position: 50% 50% !important; } .focus-2-3 { object-position: 50% 75% !important; } .focus-2-4 { object-position: 50% 100% !important; }
.focus-3-0 { object-position: 75% 0% !important; } .focus-3-1 { object-position: 75% 25% !important; } .focus-3-2 { object-position: 75% 50% !important; } .focus-3-3 { object-position: 75% 75% !important; } .focus-3-4 { object-position: 75% 100% !important; }
.focus-4-0 { object-position: 100% 0% !important; } .focus-4-1 { object-position: 100% 25% !important; } .focus-4-2 { object-position: 100% 50% !important; } .focus-4-3 { object-position: 100% 75% !important; } .focus-4-4 { object-position: 100% 100% !important; }