/* Standard-Styles aller Web-Apps (Vorbild: AI Suite). Unverändert übernehmen – die Datei bleibt im Projekt
   byte-gleich zum Skill. App-eigenes CSS nur in static/css/app.css (in @layer app und @scope, siehe
   references/design-system.md › „Modul-CSS“). Farben ausschließlich über die Theme-Variablen aus themes.css. */

/* Ebenen: „base“ = Grundstil reiner Elemente (a, h1–h4, p, Tabellenzellen, select/textarea …). Darüber liegt
   „app“ (app.css der App): eigene Inhalte dürfen diesen Grundstil anpassen. Alles andere in dieser Datei –
   Rahmen und jeder Baustein mit Klasse – steht außerhalb jeder Ebene und gewinnt deshalb immer gegen app.css,
   egal wie spezifisch die Regel dort ist. In „base“ nur Regeln ohne Klasse, Attribut oder Pseudoklasse
   (Ausnahmen: a:hover, Streifen und Hover der Tabellenzeilen), damit sie keinen Baustein überstimmen. */
@layer base, app;
@layer base {
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
h1 { font-size: 26px; margin: 0 0 16px; }
h2 { font-size: 19px; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 0 0 8px; }
h2 { margin-top: 0; }
* + h3 { margin-top: var(--space-block); }
label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--bg); color: var(--text); font: inherit;
}
textarea { min-height: 80px; resize: vertical; }
table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 8px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
th + th, td + td { border-left: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text) 6%, transparent); }
th { font-size: 14px; color: var(--text); font-weight: 600; }
thead th { background: var(--brand); color: var(--on-brand); border-bottom-color: var(--brand); font-size: 15px; padding-top: 12px; padding-bottom: 12px; }
thead th + th { border-left-color: color-mix(in srgb, var(--on-brand) 22%, transparent); }
h4 { font-size: 14px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
p { margin: 0 0 12px; }
blockquote { margin: 0 0 12px; padding: 8px 14px; border-left: 3px solid var(--brand); background: var(--bg-alt); color: var(--text); }
hr { border: 0; border-top: 1px solid var(--divider); margin: 20px 0; }
code { font-family: Consolas, monospace; font-size: .92em; padding: 1px 5px; border-radius: 4px; background: var(--bg-alt); border: 1px solid var(--border); }
kbd { font-family: Consolas, monospace; font-size: 12px; padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--bg-elev); }
figure { margin: 0 0 12px; text-align: center; }
figure img { max-width: 100%; border-radius: 6px; }
figcaption { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
tbody tr:hover td { background: var(--hover); -webkit-text-stroke: var(--hover-bold); }
a:hover { -webkit-text-stroke: var(--hover-bold); }
@media (max-width: 767px) {
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  input, select, textarea { font-size: 16px; }   /* iOS zoomt sonst beim Antippen */
}
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* Seite nutzt 95 % der Breite (je 2,5 % Rand, mindestens 12 px) und volle Höhen-Bereiche 95 % der Fensterhöhe */
:root {
  --page-gutter: max(2.5%, 12px);
  --page-fill-height: calc(95vh - 64px);
  --space-section: 32px;   /* zwischen Abschnitten (h2-Bereiche, Seitenteile) */
  --space-block: 20px;     /* zwischen Gruppen, Karten, Rastern, Tabellen */
  /* Trennlinien: Abstufung der Registerkarten-Farbe (--brand) – hell grau, HM dunkel grünlich, dunkel weißlich */
  --divider: color-mix(in srgb, var(--brand) 35%, transparent);
  --row-line: color-mix(in srgb, var(--brand) 18%, transparent);   /* zarte Trennlinie zwischen Zeilen */
}
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.55 "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
}
.hidden { display: none !important; }
.muted { color: var(--text-muted); }
.small { font-size: 13px; }
.inline { display: inline; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.mono { font-family: Consolas, monospace; }
td.mono, td .mono, td code { overflow-wrap: anywhere; }

/* --- Kopfzeile --- */
.site-header { background: var(--bg-elev); border-bottom: 1px solid var(--divider); position: sticky; top: 0; z-index: 30; }
.site-header-inner { max-width: none; margin: 0 auto; padding: 10px var(--page-gutter); display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
/* Logo-Link: beim Überfahren Markenfarbe wie jeder Link (a:hover liegt in @layer base, Klassen gewinnen sonst) */
.brand:hover, .side-brand:hover { color: var(--brand-hover); }
.brand-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; font-size: 16px; letter-spacing: -.02em; background: var(--brand); color: var(--on-brand); font-weight: 800; flex: none; }
.site-nav { display: flex; gap: 4px; flex: 1; }
/* Menüpunkte oben: nur die aktuelle Seite ist hervorgehoben (Aktiv-Zustand), die übrigen ohne Rahmen */
.site-nav a { padding: 6px 12px; border-radius: 6px; border: 1px solid transparent; color: var(--text); }
.site-nav a:hover { background: var(--hover); color: var(--text); -webkit-text-stroke: var(--hover-bold); }
.site-nav a.active { background: var(--active-bg); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
.site-nav .nav-ico { display: none; }
.menu-toggle { display: none; }
.site-tools { display: flex; gap: 10px; align-items: center; }
.lang-switch { display: inline-flex; flex-direction: row; border: 1px solid var(--btn-border); border-radius: 6px; overflow: hidden; }
.lang-switch a { padding: 4px 10px; color: var(--btn-fg); background: var(--btn-bg); font-size: 13px; font-weight: 600; line-height: 1.4; }
.lang-switch a + a { border-left: 1px solid var(--btn-border); }
.lang-switch a:hover { background: var(--hover); color: var(--brand); }
.lang-switch a.active { background: var(--active-bg); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
.theme-switch { display: inline-flex; flex-direction: row; align-items: center; }
/* Zoom je Bereich: Leiste über dem Bereich, Inhalt scrollt in beide Richtungen, wenn er größer wird */
.zoom-area { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-elev); }
.zoom-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--divider); }
.zoom-content-wrap { overflow: auto; max-height: var(--zoom-area-height, 60vh); }
.zoom-content { padding: 16px; transform-origin: 0 0; }
.zoom-switch { display: inline-flex; align-items: center; height: 30px; border: 1px solid var(--border-strong); border-radius: 15px; overflow: hidden; flex: none; }
.zoom-switch button { display: inline-grid; place-items: center; height: 100%; min-width: 30px; padding: 0 6px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; }
.zoom-switch button:hover:not(:disabled) { background: var(--hover); }
.zoom-switch button:disabled { opacity: .35; cursor: default; }
.zoom-switch .zoom-value {
  width: 62px; height: 100%; padding: 0 4px; border: 0; border-left: 1px solid var(--divider); border-right: 1px solid var(--divider);
  border-radius: 0; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; cursor: text;
}
.zoom-switch .zoom-value:hover { background: var(--hover); }
.zoom-switch .zoom-value:focus { outline: none; background: var(--bg); box-shadow: inset 0 0 0 2px var(--brand); }
.zoom-switch .icon { width: 15px; height: 15px; }
/* Rahmen bis zur Fußzeile (.zoom-fill) und auf (fast) die ganze Seite (.expanded, gesetzt vom Skript am Knopf
   data-zoom-expand, html.zoom-expanded solange offen): über Kopfzeile und Inhalt, unter den Seitenpanels (z-index 45) */
main:has(.zoom-fill) { display: flex; flex-direction: column; }
.zoom-area.zoom-fill { flex: 1 1 auto; min-height: 320px; display: flex; flex-direction: column; margin-bottom: 0; }
.zoom-area.expanded { position: fixed; inset: 8px; z-index: 40; margin: 0; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.zoom-area:is(.zoom-fill, .expanded) .zoom-content-wrap { flex: 1 1 auto; min-height: 0; max-height: none; }
html.zoom-expanded body { overflow: hidden; }
/* Zu sieht man nur das aktive Theme; beim Überfahren (Touch: Antippen) klappen die anderen auf.
   Sichtbarkeit hängt am data-theme des <html>, damit beim Laden nichts aufblitzt. */
.theme-switch button {
  display: grid; place-items: center; width: 0; height: 26px; margin: 0; padding: 0; overflow: hidden;
  border: 0 solid transparent; border-radius: 50%; background: none; cursor: pointer; opacity: 0; pointer-events: none;
  /* Zuklappen erst nach 1 s, damit die Auswahl beim kurzen Verlassen offen bleibt */
  transition: width .18s ease 1s, margin .18s ease 1s, border-width .18s ease 1s, opacity .15s ease 1s;
}
html[data-theme="hell"] .theme-switch [data-theme-value="hell"],
html[data-theme="dunkel"] .theme-switch [data-theme-value="dunkel"],
html[data-theme="hm"] .theme-switch [data-theme-value="hm"],
html[data-theme="hm-dunkel"] .theme-switch [data-theme-value="hm-dunkel"],
html[data-theme="neon"] .theme-switch [data-theme-value="neon"],
.theme-switch:has(:focus-visible) button, .theme-switch.open button {
  width: 26px; margin: 0 2px; border-width: 2px; opacity: 1; pointer-events: auto; transition-delay: 0s;
}
@media (hover: hover) {
  .theme-switch:hover button { width: 26px; margin: 0 2px; border-width: 2px; opacity: 1; pointer-events: auto; transition-delay: 0s; }
}
.theme-switch button.active { border-color: var(--brand); }
.theme-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-strong); }
.theme-dot-hell { background: #ffffff; }
.theme-dot-dunkel { background: #000000; }
.theme-dot-hm { background: #00a651; }
.theme-dot-hm-dunkel { background: linear-gradient(135deg, #1a1a1a 50%, #00a651 50%); }
.theme-dot-neon { background: linear-gradient(135deg, #b026ff, #00f0ff); }
.layout-toggle, .tool-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; background: none; border: 1px solid var(--btn-border); border-radius: 50%; color: var(--text); font-size: 14px; line-height: 1; cursor: pointer; flex: none; }
.layout-toggle.active { background: var(--active-bg); border-color: var(--active-border); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
.layout-toggle:hover, .menu-toggle:hover, .tool-btn:hover { background: var(--hover); }
.layout-toggle.active:hover { background: var(--brand-hover); }
.theme-switch button:hover { border-color: var(--border-strong); }
.theme-switch button.active:hover { border-color: var(--brand); }
.btn-link { background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 0; font: inherit; }
.btn-link:hover { color: var(--text); text-decoration: underline; }

/* --- Seitenleiste --- */
.side-nav { display: none; }
html[data-layout="side"] .site-header { display: none; }
html[data-layout="side"] .side-nav {
  display: flex; flex-direction: column; gap: 6px;
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: 52px; overflow: hidden;
  background: var(--bg-elev); border-right: 1px solid var(--divider); padding: 10px 0;
  transition: width .18s ease, box-shadow .18s ease;
}
html[data-layout="side"] .side-nav.open { width: 244px; box-shadow: var(--shadow-lg); }
.side-brand { padding-left: 8px; padding-right: 8px; }
@media (hover: hover) {
  html[data-layout="side"] .side-nav:hover { width: 244px; box-shadow: var(--shadow-lg); }
}
.side-brand, .side-links a { display: flex; align-items: center; gap: 14px; padding: 8px 12px; color: var(--text); white-space: nowrap; }
.side-links { display: flex; flex-direction: column; }
.side-links a:hover { background: var(--hover); -webkit-text-stroke: var(--hover-bold); }
.side-links a.active { color: var(--on-brand); background: var(--brand); }
.nav-ico { width: 28px; text-align: center; flex: none; font-size: 17px; }
.side-foot { margin-top: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; width: 244px; }
html[data-layout="side"] .side-nav .side-label,
html[data-layout="side"] .side-nav .side-foot { opacity: 0; pointer-events: none; transition: opacity .15s; }
html[data-layout="side"] .side-nav.open .side-label,
html[data-layout="side"] .side-nav.open .side-foot { opacity: 1; pointer-events: auto; }
@media (hover: hover) {
  html[data-layout="side"] .side-nav:hover .side-label,
  html[data-layout="side"] .side-nav:hover .side-foot { opacity: 1; pointer-events: auto; }
}
/* Offenes Menü in der Seitenleiste (Benachrichtigungen, Export …): Leiste bleibt aufgeklappt, das Menü
   öffnet als eigenes Fenster rechts daneben statt in der schmalen Leiste abgeschnitten zu werden */
html[data-layout="side"] .side-nav:has(details[open]) { width: 244px; box-shadow: var(--shadow-lg); }
html[data-layout="side"] .side-nav:has(details[open]) .side-label,
html[data-layout="side"] .side-nav:has(details[open]) .side-foot { opacity: 1; pointer-events: auto; }
html[data-layout="side"] .side-nav .dropdown-menu { position: fixed; left: 252px; right: auto; top: auto; bottom: 12px; max-height: calc(100vh - 24px); overflow-y: auto; z-index: 60; }
html[data-layout="side"] main, html[data-layout="side"] .site-footer { margin-left: 52px; width: calc(100% - 52px); }

/* --- Modul-Leiste rechts (modules_rail.js, templates/modules_rail.html): alle Module des Nutzers als
   Karten (Kürzel, Name, Status – nie die Adresse). Mitglied des Docks rechts (common.js, wie jedes
   rechte Seitenpanel): zu sieht man nur die Lasche „Module“, Überfahren öffnet, Klick hält offen,
   Klick daneben schließt; Touch: Antippen der Lasche. Handy: Knopf .rail-toggle in der Kopfzeile
   öffnet sie als Overlay. Oben bündig unter der Kopfzeile (--rail-top setzt modules_rail.js). --- */
.rail-toggle { display: none; }
.modules-rail {
  position: fixed; top: var(--rail-top, 0px); right: 0; bottom: 0; z-index: 46; width: min(320px, calc(100vw - 44px));
  display: flex; flex-direction: column; gap: 8px; padding: 10px 0;
  background: var(--bg-elev); border-left: 1px solid var(--border-strong);
  transform: translateX(100%); transition: transform .18s ease, box-shadow .18s ease;
}
.modules-rail.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
/* Lasche senkrecht mittig wie die des Admin-Untermenüs; Seitenpanels rechts bleiben bei 30 % */
.modules-rail .rail-tab { top: calc(50% - var(--rail-top, 0px) / 2); transform: translateY(-50%); }
.rail-head { display: flex; align-items: center; gap: 10px; padding: 4px 16px; color: var(--text); font-weight: 600; white-space: nowrap; }
.rail-body { flex: 1; min-height: 0; overflow: hidden; padding: 0 10px; }
/* Alle Module ohne Scrollen: modules_rail.js setzt erst .compact (ohne Statuszeile – der Status
   steht weiter am Punkt und im Hinweis), dann .tight (kleinere Karten), wenn die Liste sonst nicht in
   die Fensterhöhe passt */
.rail-list.compact .rail-status { display: none; }
.rail-list.compact { gap: 6px; }
.rail-list.tight { gap: 4px; }
.rail-list.tight .rail-card.card { padding: 4px 8px; align-items: center; }
.rail-list.tight .rail-mark { width: 26px; height: 26px; font-size: 11px; }
.rail-list.tight .rail-name .badge { display: none; }
.rail-list { display: flex; flex-direction: column; gap: 8px; }
/* Karten ändern beim Überfahren nie ihre Größe: die Maus landet von Karte 1 abwärts genau auf Karte 2 */
.rail-card.card { flex-direction: row; align-items: center; gap: 12px; margin: 0; padding: 8px 10px; color: var(--text); }
.rail-card:hover { background: var(--hover); color: var(--text); }
.rail-card.current { box-shadow: inset 0 0 0 1px var(--active-border); }
.rail-card.dragging { opacity: .5; }
.rail-mark {
  position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text);
  font-size: 12px; font-weight: 800; letter-spacing: -.02em;
}
.rail-card.current .rail-mark { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.rail-mark .status-dot { position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--bg-elev); }
.rail-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rail-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rail-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-name .badge { flex: none; }
.rail-status { line-height: 1.3; }
/* Beschreibung als schwebender Hinweis neben der Karte (modules_rail.js setzt left/top), nimmt
   keine Maus an und liegt über allem – die Liste darunter bleibt unverändert */
.rail-tip {
  position: fixed; z-index: 1000; width: max-content; max-width: min(300px, calc(100vw - 16px));
  display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; pointer-events: none;
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong); border-radius: 6px;
  box-shadow: var(--shadow-lg); font-size: 13px; line-height: 1.45;
}
.rail-tip[hidden] { display: none; }
.rail-tip-status { color: var(--text-muted); }
.rail-note { margin: 8px 0 0; padding: 0 2px; }
.modules-rail .spinner { margin-left: 6px; }
.modules-rail.saving .rail-list { opacity: .7; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .modules-rail { transition: none; } }
/* Lasche darf den Inhalt nie überdecken (wie beim Seitenpanel rechts) */
body:has(> .modules-rail) > main { padding-right: max(var(--page-gutter), 52px); }

:root { --main-pad-top: 28px; }
main { flex: 1; width: 100%; max-width: none; margin: 0 auto; padding: var(--main-pad-top) var(--page-gutter) 40px; box-sizing: border-box; }
/* Kopf- und Fußzeile sind immer zu sehen: body ist genau fensterhoch und scrollt nicht,
   der Inhalt (main) scrollt in seinem eigenen Bereich dazwischen */
body { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
body > main { min-height: 0; overflow-y: auto; }
.site-header { flex: none; }
/* Fußzeile mit Impressum: immer am unteren Fensterrand */
.site-footer { flex: none; margin-top: auto; text-align: center; padding: 14px 16px; color: var(--text-muted); font-size: 13px; border-top: 1px solid var(--divider); background: var(--bg-elev); }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
.site-footer .footer-left, .site-footer .footer-right { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
@media (max-width: 767px) { .site-footer { justify-content: center; text-align: center; } }
.site-footer a { color: var(--text); }
.site-footer a:hover { color: var(--brand-hover); text-decoration: underline; }

/* --- Abstände zwischen Bereichen --- */
main section + section, .section + .section { margin-top: var(--space-section); }
.card, fieldset.group, .group-grid, .box-grid, .grid, .tiles, .module-grid, .table-wrap, .alert,
details.accordion, .tabs, .page-head, .box-meta, .rows { margin-bottom: var(--space-block); }
.card > :last-child, fieldset.group > :last-child, .side-panel-body > :last-child, .modal-body > :last-child { margin-bottom: 0; }
.card > h3:first-child, fieldset.group > h3:first-child { margin-top: 0; }
.group-grid > fieldset.group, .group-grid > .card, .box-grid > .card, .grid > .card, .tiles > .card, .module-grid > .card { margin-bottom: 0; }

/* --- Bausteine --- */
.card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 20px; box-shadow: var(--shadow); margin-bottom: 20px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.stat { font-size: 26px; font-weight: 700; }
.btn, button.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px;
  border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); font: inherit;
  font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-border); color: var(--btn-fg); }
/* Ghost = Nebenknopf ohne Füllung, Rahmen wie jeder Knopf (es gibt nur einen Knopf-Rahmen) */
.btn.ghost { background: transparent; color: var(--brand); border-color: var(--btn-border); }
.btn.ghost:hover { background: var(--hover); color: var(--brand); }
.btn.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn.danger:hover { background: var(--bad); border-color: var(--bad); color: #ffffff; }
.btn.small { padding: 3px 10px; font-size: 13px; }
.btn:disabled, .btn:disabled:hover { opacity: .5; cursor: default; filter: none; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search],
input[type=url], input[type=tel], input[type=date], input[type=time], input[type=datetime-local] {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--bg); color: var(--text); font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
/* Felder nicht künstlich strecken: einzeln stehende Felder höchstens 560 px, kurze Werte schmaler.
   Lange Texte, Ablageflächen und Editoren mit .field.wide über die volle Breite. */
.field { margin-bottom: 12px; max-width: 560px; }
.field.wide, .form-grid > .field, fieldset.group .field, .box .field, .side-panel .field { max-width: none; }
.field.short { max-width: 220px; }
.form-narrow { max-width: 760px; }
.check { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 14px; }
.check input { width: auto; }
.alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; margin-bottom: 14px;
  border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: 6px;
  background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow);
}
.alert::before {
  content: "i"; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 700;
}
.alert > * { margin: 0; }
.alert.ok { border-left-color: var(--good); }
.alert.ok::before { content: "✓"; background: var(--good); color: #ffffff; }
.alert.warn { border-left-color: var(--warn); }
.alert.warn::before { content: "!"; background: var(--warn); color: #ffffff; }
.alert.error { border-left-color: var(--bad); }
.alert.error::before { content: "✕"; background: var(--bad); color: #ffffff; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; border: 1px solid var(--border-strong); color: var(--text-muted); }
.badge.ok { border-color: var(--good); color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); }
.badge.error { border-color: var(--bad); color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.badge.running, .badge.warn { border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.badge.critical { border-color: var(--bad); background: var(--bad); color: #ffffff; font-weight: 700; }

/* Runde Ecken wie Karten und Knöpfe: bei getrennten Rahmen müssen die Eckzellen mitrunden */
thead tr:first-child > :first-child, table > tbody:first-child tr:first-child > :first-child { border-top-left-radius: 7px; }
thead tr:first-child > :last-child, table > tbody:first-child tr:first-child > :last-child { border-top-right-radius: 7px; }
tbody tr:last-child > :first-child { border-bottom-left-radius: 7px; }
tbody tr:last-child > :last-child { border-bottom-right-radius: 7px; }
tbody tr:last-child > td, tbody tr:last-child > th { border-bottom: 0; }
/* Zwischenzeile in einer Tabelle (z. B. Weg zur Einstellung: Settings › Reiter › Gruppe) */
tr.group-row th { background: var(--hover); font-size: 13px; text-align: left; }
td.num, th.num { text-align: right; }
.table-wrap { overflow-x: auto; }
tr.done td { color: var(--text-muted); text-decoration: line-through; }
tbody tr.next td { background: var(--brand-soft); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--divider); margin-bottom: 18px; flex-wrap: wrap; }
.tabs a, .tabs button:not(.icon-btn) { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; color: var(--text); border: 0; background: none; font: inherit; cursor: pointer; border-radius: 6px 6px 0 0; }
.tabs a:hover, .tabs button:not(.icon-btn):hover { background: var(--hover); -webkit-text-stroke: var(--hover-bold); }
.tabs a.active, .tabs button.active:not(.icon-btn) { background: var(--active-bg); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
/* Zweite Stufe (Reiter unter einem Menüpunkt, data-section-sub) */
.tabs.sub { margin-top: -10px; font-size: 14px; }
.tabs.sub a { padding: 6px 12px; }

/* --- Admin mit Rail --- */
.admin-shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
.admin-rail { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; }
.admin-rail a { padding: 7px 12px; border-radius: 6px; color: var(--text); }
.admin-rail a:hover { background: var(--hover); color: var(--text); -webkit-text-stroke: var(--hover-bold); }
.admin-rail a.active { background: var(--active-bg); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
@media (max-width: 767px) { .admin-shell { grid-template-columns: minmax(0, 1fr); } .admin-rail { position: static; flex-direction: row; flex-wrap: wrap; } }
/* page-wide ist seit der 95-%-Regel der Normalfall; Klasse bleibt für alte Vorlagen wirkungslos erlaubt */
.fill-height { min-height: var(--page-fill-height); }

/* --- Chat ---
   Die Chat-Karte füllt den Rest von main, die Seite scrollt nicht – nur Verlauf und Gesprächsliste
   scrollen in sich. Kopf, Einleitung oder Kacheln darüber behalten ihre Höhe. */
body.page-chat main { display: flex; flex-direction: column; }
body.page-chat main > * { flex: none; }
body.page-chat main > .card:has(> .chat-shell) { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
.chat-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; flex: 1; min-height: 0; }
.chat-list { border-right: 1px solid var(--divider); padding-right: 12px; overflow-y: auto; }
.chat-list .conv { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
/* Gesprächsliste: jede zweite Zeile leicht abgesetzt wie Tabellenzeilen */
.chat-list .conv:where(:nth-child(even of .conv)) { background: color-mix(in srgb, var(--text) 6%, transparent); }
.chat-list .conv:hover { background: var(--hover); -webkit-text-stroke: var(--hover-bold); }
.chat-list .conv.active { background: var(--active-bg); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
.chat-list .conv .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-main { display: flex; flex-direction: column; min-height: 0; }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 16px; min-height: 0; }
.msg { max-width: 80%; padding: 10px 14px; border-radius: 10px; }
.msg-text { white-space: pre-wrap; }
/* Antwort als Markdown (static/js/markdown.js): Absätze, Listen, Tabellen, Aufklapper */
.msg-text .md { white-space: normal; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 8px; }
.md ul, .md ol { margin: 4px 0 8px; padding-left: 22px; }
.md li { margin: 2px 0; }
.md li > ul, .md li > ol { margin: 2px 0; }
.md .md-h { margin: 12px 0 6px; font-size: 15px; font-weight: 600; }
.md h3.md-h { font-size: 17px; }
.md blockquote { margin: 6px 0; padding: 4px 10px; border-left: 3px solid var(--brand); color: var(--text-muted); }
.md hr { border: 0; border-top: 1px solid var(--divider); margin: 10px 0; }
.md code { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; font-size: 13px; }
.md pre.md-code { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; overflow-x: auto; margin: 6px 0; }
.md pre.md-code code { border: 0; padding: 0; background: none; }
.md .md-table { overflow-x: auto; margin: 6px 0 10px; }
.md .md-table table { width: auto; min-width: 50%; font-size: 14px; }
.md .md-table th, .md .md-table td { padding: 5px 10px; }
.md .md-table thead th { font-size: 14px; padding-top: 7px; padding-bottom: 7px; }
.md details.md-details { margin: 6px 0; border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; background: var(--bg); }
.md details.md-details > summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
.md details.md-details[open] > summary { margin-bottom: 6px; }
/* Externer Link (anderer Host, markdown.js linkHtml): Icon „extern“, öffnet im neuen Tab */
.md-ext { display: inline-flex; margin-left: 2px; vertical-align: -1px; opacity: .7; }
.md-ext svg { width: 12px; height: 12px; }
.msg.user { align-self: flex-end; background: var(--brand-soft); }
.msg.assistant { align-self: flex-start; background: var(--bg-alt); border: 1px solid var(--border); }
.chat-input { display: flex; gap: 8px; align-items: stretch; border-top: 1px solid var(--divider); padding-top: 10px; margin-top: auto; }
.chat-input textarea { min-height: 84px; }
.chat-input.drag { outline: 2px dashed var(--brand); }
.attachments { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.attachments .att { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; font-size: 12px; }
.attachments img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; }
@media (max-width: 767px) {
  .chat-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .chat-list { border-right: 0; }
  /* Handy: Inhalt darüber (Kacheln) braucht Platz – main scrollt, der Chat ist so hoch wie der
     Inhaltsbereich zwischen Kopf- und Fußzeile */
  body.page-chat main > .card:has(> .chat-shell) { flex: none; height: calc(100dvh - 190px); }
}

.msg.voice { align-self: flex-start; background: var(--bg-elev); border: 1px dashed var(--border-strong); }
.msg.thinking { color: var(--text-muted); font-style: italic; }
.msg-author { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.msg-sources { margin-top: 8px; }
.msg-action { margin-top: 10px; }
.cite { border: 1px solid var(--brand); color: var(--brand); background: transparent; border-radius: 4px; font-size: 11px; padding: 0 4px; cursor: pointer; vertical-align: 1px; }
.trace { margin-top: 8px; }
.trace ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.trace li { margin-bottom: 4px; }
.trace-answer { margin: 4px 0 0; padding: 6px 8px; border-left: 2px solid var(--border-strong); color: var(--text-muted); white-space: pre-wrap; }
.source-pop { position: absolute; z-index: 60; max-width: 420px; max-height: 320px; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px; box-shadow: var(--shadow-lg); font-size: 13px; }
.source-pop .pop-text { white-space: pre-wrap; margin-top: 6px; }
.chat-head { border-bottom: 1px solid var(--divider); padding-bottom: 10px; margin-bottom: 10px; }
.new-chat { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--divider); }
.prompt-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.chip { border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); border-radius: 14px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.chip:hover { background: var(--hover); -webkit-text-stroke: var(--hover-bold); }
.chip.active { background: var(--active-bg); border-color: var(--active-border); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
.attach { cursor: pointer; }
.error-text { color: var(--bad); }

/* --- Login / Seiten ohne Menü (body.bare) --- */
body.bare main { display: flex; align-items: center; justify-content: center; max-width: none; }
.bare-tools { position: absolute; top: 16px; right: 20px; display: flex; gap: 10px; align-items: center; }
.auth-card { width: min(420px, 100%); padding: 32px; }
.org-name { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--border-strong); color: var(--text-muted); font-weight: 500; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 20px; }
.auth-foot { margin: 16px 0 0; }
.btn.wide { width: 100%; justify-content: center; }

/* --- Nutzer im Kopf, Seitenkopf, Brotkrumen --- */
.user-box { display: flex; align-items: center; gap: 10px; }
.user-box > a { display: flex; align-items: center; gap: 8px; color: var(--text); }
.site-tools .user-box .side-label, .side-foot .user-box .side-label { display: none; }
.user-box .icon-btn.small:hover { color: var(--text); }
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 700; letter-spacing: .02em; flex: none; }
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }
.avatar.xs { width: 24px; height: 24px; font-size: 11px; }
.nowrap { white-space: nowrap; }
.align-end { display: flex; align-items: flex-end; }
.page-head { margin-bottom: 12px; }
/* Verbindungsseite: Titelzeile und Knöpfe beginnen auf derselben Höhe, Beschreibung darunter */
.detail-head { align-items: flex-start; justify-content: space-between; }
.detail-title { flex: 1 1 320px; min-width: 0; }
.detail-title h1 { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 4px; }
.detail-title p { margin: 0; }
.detail-actions { min-height: 40px; justify-content: flex-end; }
.alert-action { margin-top: 8px; }
.detail-test-result { margin-top: 16px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 8px; color: var(--text-muted); }
.crumbs > *:not(:last-child)::after { content: "›"; margin: 0 8px; font-size: 1.5em; font-weight: 700; line-height: 1; color: var(--text); vertical-align: -1px; }
.crumbs > span:last-child { color: var(--text); font-weight: 600; }

/* --- Kachel-Karten, Status-Punkte, Schalter, Code-Blöcke --- */
.module-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.module-card { margin: 0; border-left: 4px solid var(--brand); display: flex; flex-direction: column; gap: 8px; }
.module-card h3 { margin: 0; }
.module-card p { margin: 0; }
.module-card.off { opacity: .6; border-left-color: var(--border-strong); }
.cap-list { display: flex; gap: 6px; flex-wrap: wrap; }
.chip.static { cursor: default; }
.chip.static:hover { background: var(--bg-elev); }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); flex: none; }
.status-dot.big { width: 14px; height: 14px; }
.status-dot.ok { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 20%, transparent); }
.status-dot.down { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 20%, transparent); }
.status-dot.unknown { background: var(--warn); }
.status-dot.off { background: transparent; border: 2px solid var(--border-strong); }
.status-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 20%, transparent); }
.status-dot.wait { background: var(--text-muted); }
.switch { position: relative; width: 40px; height: 22px; padding: 0; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--bg-alt); cursor: pointer; transition: background .15s; }
.switch span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: transform .15s, background .15s; }
.switch-line { display: flex; align-items: center; gap: 12px; }
.switch-line + .switch-line { margin-top: 10px; }
.switch-line > .switch { flex: none; }
.switch-line > span { flex: 1; min-width: 0; }
.switch.on { background: var(--brand); border-color: var(--brand); }
.switch:hover { border-color: var(--brand); }
.switch.on span { transform: translateX(18px); background: var(--bg); }
/* Schalter mit gemeldetem Zustand (z. B. Server an/aus): grün = an, rot = aus, grau = startet/unbekannt,
   Zustand als Text daneben – .power-switch[data-state="on|off|busy"] > .switch + .power-state */
.power-switch { display: flex; flex-basis: 100%; align-items: center; gap: 8px; }
.power-switch .switch:disabled { cursor: default; opacity: .6; }
.power-switch[data-state="on"] .switch { background: var(--good); border-color: var(--good); }
.power-switch[data-state="on"] .switch span { transform: translateX(18px); background: #ffffff; }
.power-switch[data-state="off"] .switch { background: color-mix(in srgb, var(--bad) 14%, transparent); border-color: var(--bad); }
.power-switch[data-state="off"] .switch span { background: var(--bad); }
.power-switch[data-state="busy"] .switch span { transform: translateX(9px); }
.power-state { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.power-switch[data-state="on"] .power-state { color: var(--good); }
.power-switch[data-state="off"] .power-state { color: var(--bad); }
.cap-row { padding: 12px 0; border-bottom: 1px solid var(--divider); display: flex; flex-direction: column; gap: 4px; }
.cap-row:last-child { border-bottom: 0; }
pre.code { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: 8px 0 0; }
.test-result { margin-top: 14px; }
.test-result.error pre.code { border-color: var(--bad); color: var(--bad); }
.test-result.ok pre.code { border-color: var(--good); }
.key-reveal { display: block; margin-top: 6px; padding: 8px; background: var(--bg); border: 1px dashed var(--border-strong); border-radius: 6px; word-break: break-all; user-select: all; }
.mock-box { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--divider); }
.danger-zone { border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }
.danger-zone .btn, .danger-zone .btn.small { padding: 9px 18px; font-size: 15px; }
.empty { text-align: center; padding: 40px 20px; }
/* Fehlerseiten: große blasse Fehlernummer im Hintergrund, Icon im farbigen Kreis, das leicht schwebt.
   Farbe je Art: 404 Marke, 403/503 Warnung, 500 Fehler. */
.error-page { --err: var(--brand); position: relative; overflow: hidden; max-width: 600px; margin: 6vh auto 0; padding: 56px 28px 32px; }
.error-page[data-code="403"], .error-page[data-code="503"] { --err: var(--warn); }
.error-page[data-code="500"] { --err: var(--bad); }
.error-page::before {
  content: attr(data-code); position: absolute; left: 0; right: 0; top: -18px; text-align: center;
  font-size: 190px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--err);
  opacity: .07; pointer-events: none;
}
.error-page > * { position: relative; }
.error-ico {
  display: inline-grid; place-items: center; width: 88px; height: 88px; margin-bottom: 6px;
  color: var(--err); animation: err-float 3.4s ease-in-out infinite;
}
.error-ico .icon { width: 56px; height: 56px; stroke-width: 1.6; }
.error-page h1 { margin: 6px 0 8px; }
.error-code { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--err); }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.error-id { margin-top: 18px; }
/* Kleine Fehlerkarten (Übersicht im Styleguide) */
.error-page.error-mini { margin: 0; max-width: none; padding: 40px 20px 24px; }
.error-page.error-mini::before { font-size: 120px; top: -8px; }
.error-page.error-mini .error-ico { width: 64px; height: 64px; }
.error-page.error-mini .error-ico .icon { width: 40px; height: 40px; }
@keyframes err-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .error-ico { animation: none; } }
tr.muted td { color: var(--text-muted); }
td input[type=text], td input[type=email], td select { min-width: 110px; }

/* Popover-Menü (Benutzer-Aktionen) */
.add-menu { position: relative; }
.add-menu > summary { list-style: none; }
.add-menu > summary::-webkit-details-marker { display: none; }
.add-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 260px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 14px; }
.add-pop.right { left: auto; right: 0; }
/* Popover-Knopf nur mit Icon so hoch wie Textknöpfe daneben (Leerzeichen ohne Breite = gleiche Zeilenhöhe) */
.add-menu > summary.btn:where(:has(> i[data-icon]:only-child)) { display: flex; }
.add-menu > summary.btn:where(:has(> i[data-icon]:only-child))::after { content: "\200b"; }
/* Eck-Plus (.add-menu.corner): runder Knopf außen an der oberen rechten Ecke des Elternelements (position: relative),
   verdeckt kein Kennzeichen; sichtbar beim Überfahren des Elternelements, per Tastatur und auf Touch.
   Auf dem Handy öffnet das Menü waagrecht in der Bildmitte, sonst ragt es aus dem Bild. */
.add-menu.corner { position: absolute; top: -13px; right: -13px; z-index: 2; opacity: 0; transition: opacity .12s; }
.add-menu.corner > summary.btn { width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%; justify-content: center; align-items: center; background: var(--bg-elev); box-shadow: var(--shadow); }
.add-menu.corner > summary.btn::after { content: none; }
:hover > .add-menu.corner, :focus-within > .add-menu.corner, .add-menu.corner[open] { opacity: 1; }
@media (hover: none) { .add-menu.corner { opacity: 1; } }
@media (max-width: 767px) {
  .add-menu.corner .add-pop { position: fixed; top: auto; left: 50%; right: auto; transform: translateX(-50%); width: min(260px, calc(100vw - 32px)); }
}
.stack { display: flex; flex-direction: column; gap: 6px; }
[data-show-for][hidden] { display: none; }
details.inline { display: inline-block; }

/* --- Typografie-Ergänzungen --- */
ul.list, ol.list { margin: 0 0 12px; padding-left: 20px; }
ul.list li, ol.list li { margin-bottom: 4px; }
pre.code code { padding: 0; border: 0; background: none; }
/* Markierung kräftig in Markenfarbe, damit sie auch auf grauem Hover/Hintergrund sichtbar ist */
::selection { background: var(--brand); color: var(--on-brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 0; }
input[type=checkbox], input[type=radio], input[type=range], progress { accent-color: var(--brand); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; margin: 0; flex: none; vertical-align: -3px; cursor: pointer; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* --- Formular-Ergänzungen --- */
input:disabled, select:disabled, textarea:disabled { background: var(--bg-alt); color: var(--text-muted); cursor: not-allowed; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--bad); }
.field-error { color: var(--bad); font-size: 12px; margin-top: 4px; }
input[type=range] { width: 100%; }
.radio-group { display: flex; gap: 16px; flex-wrap: wrap; }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; border: 2px dashed var(--border-strong); border-radius: 8px; color: var(--text-muted); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.drag { border-color: var(--brand); background: var(--hover); color: var(--text); }
.dropzone input[type=file] { display: none; }

/* --- Dropdown-Menü (details) und Segment-Umschalter --- */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-menu { position: absolute; z-index: 25; top: calc(100% + 4px); left: 0; min-width: 200px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 2px; }
.dropdown-menu.right { left: auto; right: 0; }
/* Frei platziertes Menü (Skript setzt left/top, z. B. am angeklickten Eintrag) – über Zoom-Rahmen und Seitenpanels */
.dropdown-menu.floating { position: fixed; z-index: 60; }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 8px; height: 30px; white-space: nowrap; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--hover); color: var(--text); -webkit-text-stroke: var(--hover-bold); }
.dropdown-menu a.active { background: var(--active-bg); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
.dropdown-menu .danger { color: var(--bad); }
.dropdown-label { padding: 4px 8px 2px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.dropdown-menu .danger:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.dropdown-menu hr { margin: 4px 0; }
.segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--btn-border); border-radius: 6px; overflow: hidden; max-width: 100%; }
.segmented button { padding: 8px 16px; border: 0; background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-weight: 600; cursor: pointer; }
.segmented button + button { border-left: 1px solid var(--brand); }
.segmented button:hover { background: var(--hover); }
.segmented button.active { background: var(--active-bg); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
.segmented.small button { padding: 3px 10px; font-size: 13px; }
/* Segment-Umschalter aus Links (Bereiche/Seiten statt Ansichten): gleiche Optik wie die Knöpfe */
.segmented a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; text-decoration: none; }
.segmented a + a { border-left: 1px solid var(--brand); }
.segmented a:hover { background: var(--hover); -webkit-text-stroke: var(--hover-bold); text-decoration: none; }
.segmented a.active { background: var(--active-bg); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
.segmented.small a { padding: 3px 10px; font-size: 13px; gap: 4px; }
.segmented.small a .icon { width: 13px; height: 13px; }

/* --- Navigation-Ergänzungen --- */
.pager { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pager a, .pager span { min-width: 32px; padding: 4px 10px; border: 1px solid var(--btn-border); border-radius: 6px; text-align: center; color: var(--btn-fg); background: var(--btn-bg); }
.pager a:hover { background: var(--hover); -webkit-text-stroke: var(--hover-bold); }
.pager .active { background: var(--active-bg); border-color: var(--active-border); color: var(--active-fg); font-weight: 600; box-shadow: inset 0 0 0 1px var(--active-border); }
.pager .gap { border: 0; color: var(--text-muted); }
.pager-jump { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.pager-jump input[type=number] { width: 70px; padding: 4px 8px; text-align: center; }
.pager-jump .btn { padding: 4px 10px; }
details.accordion { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; background: var(--bg-elev); }
details.accordion > summary { margin: 4px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--hover) 50%, transparent); }
details.accordion > summary::-webkit-details-marker { display: none; }
details.accordion > summary::before { content: "›"; display: inline-block; width: 12px; transition: transform .15s; color: var(--text-muted); }
details.accordion[open] > summary::before { transform: rotate(90deg); }
details.accordion > summary:hover { background: var(--hover); }
details.accordion > .accordion-body { padding: 4px 14px 12px 34px; }

/* --- Feedback: Toast, Fortschritt, Lade-Kreisel, Tooltip, Dialog --- */
.toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { display: flex; gap: 10px; align-items: center; padding: 10px 8px 10px 14px; border-radius: 8px; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong); border-left: 4px solid var(--brand); box-shadow: var(--shadow-lg); animation: toast-in .2s ease-out; }
.toast-ico { display: inline-flex; flex: none; color: var(--brand); }
.toast-ico .icon { width: 20px; height: 20px; }
.toast-text { flex: 1; min-width: 0; }
.toast-act { flex: none; background: none; border: 0; padding: 4px 6px; border-radius: 6px; color: var(--brand); font: inherit; font-weight: 700; cursor: pointer; }
.toast-act:hover { background: var(--hover); }
.toast-close { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; background: none; border: 0; border-radius: 6px; color: var(--text-muted); cursor: pointer; }
.toast-close:hover { background: var(--hover); color: var(--text); }
.toast-close .icon { width: 14px; height: 14px; }
.toast.ok { border-left-color: var(--good); }
.toast.ok .toast-ico { color: var(--good); }
.toast.warn { border-left-color: var(--warn); }
.toast.warn .toast-ico { color: var(--warn); }
.toast.error { border-left-color: var(--bad); }
.toast.error .toast-ico { color: var(--bad); }
@media (max-width: 767px) { .toast-stack { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.progress { height: 8px; border-radius: 4px; background: var(--bg-alt); border: 1px solid var(--border); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--brand); transition: width .3s ease; }
.progress.indeterminate > span { width: 35%; animation: progress-slide 1.2s ease-in-out infinite; }
.progress.over > span { background: var(--bad); }   /* Grenze überschritten (z. B. Budget) */
@keyframes progress-slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border-strong); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -3px; }
.spinner.big { width: 28px; height: 28px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
[data-tip] { position: relative; }
/* Info-Symbol neben einem Label: Erklärung erst beim Überfahren (statt Text unter dem Feld) */
.info-tip { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--text-muted); cursor: help; }
.info-tip .icon { width: 14px; height: 14px; }
.info-tip[data-tip]:hover::after, .info-tip[data-tip]:focus-visible::after { white-space: normal; width: max-content; max-width: 280px; text-align: left; }
/* In Tabellen (overflow) und Dialogen geht der Hinweis nach unten auf, sonst wird er oben abgeschnitten */
:is(.table-wrap thead, .table-wrap tbody tr:first-child, dialog) .info-tip[data-tip]:is(:hover, :focus-visible)::after { bottom: auto; top: calc(100% + 6px); }
/* Mit JS (common.js) schwebt der Hinweis als .tip-float über allem und bleibt im Bild */
html.js-tips .info-tip[data-tip]:is(:hover, :focus-visible)::after { content: none; }
.tip-float { position: fixed; z-index: 1000; max-width: min(280px, calc(100vw - 16px)); padding: 6px 9px; border-radius: 4px;
  background: var(--text); color: var(--bg); -webkit-text-fill-color: var(--bg); font-size: 12px; font-weight: 400; line-height: 1.4;
  text-align: left; white-space: normal; overflow-wrap: anywhere; pointer-events: none; box-shadow: var(--shadow); }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; z-index: 70; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  padding: 4px 8px; border-radius: 4px; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 400; white-space: nowrap; pointer-events: none;
}
dialog.modal { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-lg); }
dialog.modal::backdrop { background: rgba(0,0,0,.45); }
dialog.modal[open] { animation: toast-in .15s ease-out; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--divider); }
.modal-head h2 { margin: 0; }
.modal-body { padding: 18px 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--divider); }
.modal-close { margin-left: auto; background: none; border: 0; color: var(--text-muted); font-size: 20px; cursor: pointer; line-height: 1; }
.modal-close:hover { color: var(--text); }

/* --- Fett beim Überfahren: überall, wo Hover etwas hervorhebt --- */
:root { --hover-bold: .25px currentColor; }
.btn:hover, .btn-link:hover, .chip:hover, .lang-switch a:hover, .segmented button:hover,
.icon-btn:hover, .th-btn:hover, .combo-button:hover, .dropzone:hover, .layout-toggle:hover, .menu-toggle:hover,
details.accordion > summary:hover, .theme-switch button:hover, .cite:hover { -webkit-text-stroke: var(--hover-bold); }
.btn:disabled:hover { -webkit-text-stroke: 0; }

/* --- Negative Zahlen rot (Klasse setzt common.js automatisch, Server darf sie auch direkt setzen) --- */
.neg { color: var(--bad) !important; }

/* --- Bilder und Medien --- */
.card-img { display: block; width: calc(100% + 40px); max-width: none; margin: -20px -20px 16px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px 8px 0 0; }
.media { display: flex; gap: 16px; align-items: flex-start; }
.media.right { flex-direction: row-reverse; }
.media img { width: 160px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; flex: none; }
.thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; }

/* --- Hover für Tabellenzeilen und klickbare Karten --- */
/* Klickbare Zeilen: ganze Zeile öffnet den Eintrag, kein Bearbeiten-Knopf */
tr[data-href], .rows > [data-href] { cursor: pointer; }
.rows > [data-href]:hover { background: var(--hover); -webkit-text-stroke: var(--hover-bold); }
tr[data-href]:focus-visible td, .rows > [data-href]:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.rows > [data-href] { border-radius: 4px; padding-left: 6px; padding-right: 6px; }
tbody tr:hover td :is(.btn, .badge, .chip, .cite, .switch) { -webkit-text-stroke: 0; }
tbody tr.next:hover td { background: var(--brand-soft); }
.card.clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.card.clickable:hover { border-color: var(--brand); box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* --- Durchsuchbares Dropdown, einfach und mehrfach (combo.js, Vorbild Document Manager) --- */
.combo { position: relative; display: inline-flex; width: 100%; min-width: 0; }
.combo-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none; }
.combo-button {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.combo-button:hover { background: var(--hover); }
.combo-button.open, .combo-button:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 0; border-color: var(--brand); }
.combo-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-label.combo-placeholder { color: var(--text-muted); }
.combo-caret { flex: none; display: inline-flex; color: var(--text-muted); transition: transform .15s; }
.combo-button.open .combo-caret { transform: rotate(180deg); }
.combo-panel {
  position: fixed; z-index: 1200; display: flex; flex-direction: column; gap: 8px; padding: 10px;
  max-height: calc(100vh - 48px); background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: var(--shadow-lg);
}
.combo-search { flex: none; width: 100%; }
.combo-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; column-gap: 16px; align-content: start; }
.combo-group { break-inside: avoid; margin-bottom: 6px; }
/* Buchstaben-Zeile als abgesetztes Band, damit sie sich klar von den Einträgen unterscheidet */
.combo-letter {
  height: 28px; display: flex; align-items: center; margin: 4px 0 2px; padding: 0 8px;
  font-size: 19px; font-weight: 700; line-height: 1; color: var(--text);
  background: color-mix(in srgb, var(--brand) 28%, var(--bg-elev)); border-left: 4px solid var(--brand); border-radius: 0 4px 4px 0;
}
.combo-group:first-child .combo-letter { margin-top: 0; }
.combo-letter ~ .combo-item { margin-left: 16px; }
.combo-item {
  height: 28px; display: flex; align-items: center; padding: 0 8px; border-radius: 6px; font-size: 14px;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combo-item:hover, .combo-item.active { background: var(--hover); -webkit-text-stroke: var(--hover-bold); }
.combo-item.selected, .combo-item.selected:hover { background: var(--active-bg); color: var(--active-fg); -webkit-text-stroke: 0; box-shadow: inset 0 0 0 1px var(--active-border); }
.combo-item.selected::after { content: "✓"; margin-left: auto; padding-left: 8px; }
.combo-item.combo-check { gap: 9px; }
.combo-check > input { flex: none; width: 16px; height: 16px; margin: 0; cursor: pointer; }
.combo-check .combo-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-check .combo-zusatz { flex: none; padding-left: 8px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.combo-check.checked { font-weight: 600; }
.combo-empty { padding: 8px; font-size: 13px; color: var(--text-muted); }
.combo-button:disabled { background: var(--bg-alt); cursor: not-allowed; }
/* Nur schmaler – Optik exakt wie jedes andere Dropdown, keine Variante */
.combo.compact { width: auto; flex: none; min-width: 130px; }
.input-addon { display: flex; gap: 6px; align-items: stretch; }
.input-addon > input { flex: 1; min-width: 0; }
.combo-button:disabled:hover { -webkit-text-stroke: 0; }
.cron-row .combo { width: auto; min-width: 180px; }
.combo-foot { display: flex; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--divider); }

/* --- Datentabelle: Sortieren und Filtern im Spaltenkopf (table.js) --- */
.th-inner { display: flex; align-items: center; gap: 4px; }
.th-inner .th-label { flex: 1; }
th.num .th-inner { flex-direction: row-reverse; }
th.num .th-inner .th-label { text-align: right; }
.th-btn {
  display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; flex: none;
  border: 1px solid transparent; border-radius: 4px; background: none; color: inherit; opacity: .75;
  font-size: 11px; line-height: 1; cursor: pointer;
}
.th-btn:hover { background: color-mix(in srgb, var(--on-brand) 20%, transparent); opacity: 1; }
.th-btn.active { background: var(--on-brand); border-color: var(--on-brand); color: var(--brand); opacity: 1; }
.th-btn svg { width: 12px; height: 12px; }
.th-sort { display: inline-flex; flex-direction: column; gap: 0; width: 18px; }
.th-sort .th-btn { width: 18px; height: 11px; font-size: 8px; border-radius: 3px; }
.table-pop {
  position: fixed; z-index: 1100; min-width: 240px; display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-lg);
}
.table-empty td { text-align: center; color: var(--text-muted); padding: 18px; }

/* --- Kartentabelle (Alternative zu .data-table): echte Tabelle mit table.js (Sortieren, Filtern),
   jede Zeile eine Karte, Details in der folgenden <tr class="ct-detail">. Zeilen als Raster über
   --ct-cols, damit Karten Abstand und runde Ecken haben können. --- */
table.card-table { --ct-cols: 40px minmax(0, 2fr) repeat(4, minmax(0, 1fr)); display: block; border: 0; border-radius: 0; margin-bottom: var(--space-block); }
table.card-table > thead, table.card-table > tbody { display: block; }
table.card-table tr { display: grid; grid-template-columns: var(--ct-cols); align-items: center; }
table.card-table > * > tr > :is(th, td) { display: block; min-width: 0; padding: 10px; border: 0; border-radius: 0; background: none; overflow-wrap: anywhere; }
table.card-table > thead > tr { align-items: stretch; background: var(--brand); color: var(--on-brand); border-radius: 8px; }
table.card-table > thead > tr > th { display: flex; align-items: center; padding-top: 14px; padding-bottom: 14px; }
table.card-table > thead > tr > th.num { justify-content: flex-end; }
table.card-table > thead > tr > th + th { border-left: 1px solid color-mix(in srgb, var(--on-brand) 22%, transparent); }
table.card-table .th-inner { flex: 1; }
table.card-table td.num { text-align: right; }
table.card-table > tbody > tr.ct-row { margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); box-shadow: var(--shadow); cursor: pointer; }
table.card-table > tbody > tr.ct-row:hover { background: var(--hover); }
table.card-table > tbody > tr.ct-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
table.card-table > tbody > tr.ct-row.open { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); border-bottom-color: var(--row-line); border-radius: 8px 8px 0 0; }
table.card-table > tbody > tr.ct-row.open:hover { background: color-mix(in srgb, var(--hover) 55%, var(--brand-soft)); }
table.card-table > tbody > tr.ct-detail { display: none; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); border-top: 0; border-radius: 0 0 8px 8px; box-shadow: var(--shadow); }
table.card-table > tbody > tr.ct-row.open + tr.ct-detail { display: grid; }
table.card-table > tbody > tr.ct-detail.ct-always { display: grid; border-top: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); }
table.card-table > tbody > tr.ct-detail > td { grid-column: 1 / -1; padding: 14px 0 18px; -webkit-text-stroke: 0; }
table.card-table > tbody > tr.table-empty { margin-top: 8px; border: 1px dashed var(--border-strong); border-radius: 8px; }
table.card-table > tbody > tr.table-empty > td { grid-column: 1 / -1; }
.ct-toggle { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); cursor: pointer; transition: transform .15s; }
tr.ct-row.open .ct-toggle { transform: rotate(90deg); }
.ct-title { font-weight: 600; }
.ct-sub { font-size: 13px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.ct-sub .badge { font-size: 11px; background: var(--bg-alt); border-color: transparent; }
/* Kopf des aufgeklappten Bereichs: dasselbe Raster wie die Zeile, Angaben stehen unter ihrer Spalte */
.card-row-grid { display: grid; grid-template-columns: var(--ct-cols); align-items: start; margin-bottom: 16px; }
.card-row-grid > * { min-width: 0; padding: 0 10px; }
.card-row-grid > .ct-span-2 { grid-column: span 2; }
/* Quelle im Spaltenkopf: umrandete Pille, .ok/.warn/.error für weitere Quellen */
.source-tag { display: inline-block; padding: 2px 10px; border-radius: 14px; border: 1.5px solid var(--brand); color: var(--brand); background: var(--bg-elev); font-size: 12px; font-weight: 600; }
.source-tag.ok { border-color: var(--good); color: var(--good); }
.source-tag.warn { border-color: var(--warn); color: var(--warn); }
.source-tag.error { border-color: var(--bad); color: var(--bad); }
thead .source-tag { font-size: 14px; padding: 3px 12px; white-space: nowrap; }
table.card-table > thead > tr > th { overflow-wrap: normal; }
/* Status je Quelle: gefüllte Pille, optional mit Icon; .missing gestrichelt, .off nur blass */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 14px; font-size: 13px; background: var(--bg-alt); color: var(--text); white-space: nowrap; }
.pill > i[data-icon] { width: 16px; height: 16px; }
.pill.ok { background: color-mix(in srgb, var(--good) 14%, transparent); }
.pill.ok > i[data-icon] { color: var(--good); }
.pill.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.pill.warn > i[data-icon] { color: var(--warn); }
.pill.error { background: color-mix(in srgb, var(--bad) 12%, transparent); }
.pill.error > i[data-icon] { color: var(--bad); }
.pill.missing { background: transparent; border: 1px dashed var(--border-strong); }
.pill.missing > i[data-icon], .pill.off > i[data-icon] { color: var(--text-muted); opacity: .8; }
.pill.off { color: color-mix(in srgb, var(--text) 50%, transparent); }
.match { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.match .status-dot { width: 9px; height: 9px; box-shadow: none; }
.match .badge { margin-left: 6px; }
.badge > i[data-icon] .icon { width: 12px; height: 12px; vertical-align: -0.15em; }
/* Feldliste im aufgeklappten Bereich: Icon · Bezeichnung · Wert (nur lesen) */
.field-list { display: grid; grid-template-columns: 28px minmax(120px, 200px) minmax(0, 1fr); gap: 8px 12px; align-items: center; margin: 0 10px; }
.field-list > dt { display: contents; }
.field-list .fl-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.field-list .fl-icon > i[data-icon] { width: 15px; height: 15px; }
.field-list .fl-label { font-weight: 600; }
.field-list > dd { margin: 0; padding: 6px 10px; min-height: 34px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-elev); overflow-wrap: anywhere; }

/* Vergleich je Quelle im aufgeklappten Bereich: Tabelle im Raster der Kartentabelle (--ct-cols), die
   Werte stehen unter den Spalten; Zebra, Spaltenlinien und Hover wie bei jeder Datentabelle. Die
   Zeile .ct-detail ist immer gerade und beim Überfahren aktiv, darum setzt der Baustein beides neu. */
table.ct-compare { display: block; width: auto; margin: 0; border: 0; border-top: 1px solid var(--divider); border-radius: 0; background: var(--bg-elev); }
table.ct-compare > tbody { display: block; }
table.card-table .ct-compare tr { align-items: stretch; }
table.card-table .ct-compare tr > * { min-width: 0; padding-top: 3px; padding-bottom: 3px; background: none; border-radius: 0; border-bottom: 1px solid var(--divider); overflow-wrap: anywhere; -webkit-text-stroke: 0; }
table.card-table .ct-compare tr > * + * { border-left: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
table.card-table .ct-compare tr:nth-child(even) > * { background: color-mix(in srgb, var(--text) 6%, transparent); }
table.card-table .ct-compare tr:hover > * { background: var(--hover); -webkit-text-stroke: var(--hover-bold); }
table.card-table .ct-compare tr.differs > * { background: var(--warn-soft); }
.ct-compare .ct-span-3 { grid-column: span 3; }
table.card-table .ct-compare tr.ct-compare-group > th { grid-column: 1 / -1; padding-top: 5px; padding-bottom: 5px; border-radius: 0; text-align: left; background: var(--brand); color: var(--on-brand); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; -webkit-text-stroke: 0; }
/* Spalten, die durch Kopf, Zeile und Vergleich laufen: .ct-col-line an jeder Zelle der Spalte. Gruppenzeile mit denselben Spalten: tr.ct-compare-group-cols. Ohne Abstand über dem Vergleich, damit die Linie nicht abreißt. */
table.card-table > thead > tr > th.ct-col-line { border-left: 2px solid color-mix(in srgb, var(--on-brand) 70%, transparent); }
table.card-table > tbody > tr > td.ct-col-line, table.card-table .ct-compare tr > .ct-col-line { border-left: 2px solid color-mix(in srgb, var(--text) 32%, transparent); }
table.card-table > tbody > tr.ct-row > td.ct-col-line { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
table.card-table .ct-compare tr.ct-compare-group-cols > * { padding-top: 5px; padding-bottom: 5px; text-align: left; background: var(--brand); color: var(--on-brand); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; -webkit-text-stroke: 0; }
table.card-table .ct-compare tr.ct-compare-group-cols > .ct-col-line { border-left-color: color-mix(in srgb, var(--on-brand) 70%, transparent); }
table.card-table > tbody > tr.ct-detail > td:has(.ct-compare):not(:has(.hidden > .ct-compare)) { padding: 0; }
@media (max-width: 767px) {
  /* Kopf bricht um und behält Sortieren und Filtern; Zellen stehen mit Bezeichnung untereinander */
  table.card-table > thead > tr { display: flex; flex-wrap: wrap; }
  table.card-table > thead > tr > th:empty { display: none; }
  table.card-table > thead > tr > th + th { border-left: 0; }
  table.card-table tr, .card-row-grid { grid-template-columns: 40px minmax(0, 1fr); }
  table.card-table > tbody > tr.ct-row > td:nth-child(n+3) { grid-column: 2; padding-top: 2px; padding-bottom: 2px; text-align: left; }
  table.card-table > tbody > tr.ct-row > td:last-child { padding-bottom: 10px; }
  table.card-table > tbody > tr.ct-row > td[data-label]::before { content: attr(data-label) " · "; color: var(--text-muted); font-size: 12px; }
  .card-row-grid > * { grid-column: 1 / -1; margin-bottom: 8px; }
  .card-row-grid > :empty { display: none; }
  .field-list { grid-template-columns: 28px minmax(0, 1fr); }
  .field-list > dd { grid-column: 1 / -1; }
  table.card-table .ct-compare tr { grid-template-columns: minmax(0, 1fr); }
  table.card-table .ct-compare tr > td:empty { display: none; }
  table.card-table .ct-compare tr > * + * { border-left: 0; }
  table.card-table > * > tr > .ct-col-line, table.card-table .ct-compare tr > .ct-col-line { border-left: 0; }
  table.card-table > tbody > tr.ct-row > td.ct-col-line { display: block; }
  table.card-table .ct-compare tr.ct-compare-group-cols > :empty { display: none; }
  .ct-compare .ct-span-3, table.card-table .ct-compare tr.ct-compare-group > th { grid-column: auto; }
  .ct-compare td[data-label]::before { content: attr(data-label) " · "; color: var(--text-muted); font-size: 12px; }
}

/* Ziehen mit der Maus (common.js pointerDrag): Abbild am Zeiger, keine Textauswahl */
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 2000; margin: 0; opacity: .85; pointer-events: none; box-shadow: var(--shadow); }
html.drag-active, html.drag-active * { cursor: grabbing; user-select: none; }

/* --- Chat: Löschen, Diktat, Sprachgespräch --- */
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; flex: none;
  border: 1px solid var(--btn-border); border-radius: 6px; background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
}
.icon-btn:hover { background: var(--btn-hover); }
.icon-btn.active { background: var(--active-bg); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.small { width: 26px; height: 26px; border-color: transparent; background: none; color: var(--text-muted); }
.icon-btn.small svg { width: 14px; height: 14px; }
.icon-btn.small:hover { background: var(--hover); color: var(--bad); }
.icon-btn.recording { background: var(--bad); border-color: var(--bad); color: #ffffff; animation: rec-pulse 1.4s ease-in-out infinite; }

/* --- Icons (icons.js): Linien-Icons in Textfarbe, Größe folgt der Schrift --- */
i[data-icon] { display: inline-flex; vertical-align: -0.18em; font-style: normal; flex: none; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.icon.lg, [data-icon].lg .icon { width: 24px; height: 24px; }
.icon.xl, [data-icon].xl .icon { width: 40px; height: 40px; stroke-width: 1.6; }
.icon-tile { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--brand); color: var(--on-brand); flex: none; }
.icon-tile .icon { width: 20px; height: 20px; }
.nav-ico .icon { width: 18px; height: 18px; vertical-align: -0.2em; }
.dropdown-menu .icon { color: var(--text-muted); }
.dropdown-menu .danger .icon { color: inherit; }
.empty .icon.xl { color: var(--text-muted); opacity: .55; margin-bottom: 8px; }
.input-icon { position: relative; display: flex; }
.input-icon > i[data-icon] { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: .7; }
.input-icon > input { padding-left: 34px; }
.input-icon > .icon-btn.small { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
.input-icon > .icon-btn.small:hover { color: var(--text); }
.input-icon > .icon-btn.small ~ input, .input-icon > input:has(+ .icon-btn.small) { padding-right: 36px; }

/* --- Werkzeug-Knöpfe in Kopfzeile/Seitenleiste: Benachrichtigungen, Versionshinweise --- */
.tool-btn { position: relative; }
.tool-btn .icon { width: 16px; height: 16px; }
.tool-btn .count { position: absolute; top: -6px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #ffffff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
.tool-btn .dot { position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); border: 2px solid var(--bg-elev); }
.side-foot .dropdown-menu { top: auto; bottom: calc(100% + 4px); }
.side-foot .dropdown-menu.right { left: 0; right: auto; }
.tool-group { display: flex; align-items: center; gap: 10px; }
.dropdown-menu.notif-menu { width: 360px; max-width: calc(100vw - 24px); padding: 0; gap: 0; }
.notif-head, .notif-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.notif-head { border-bottom: 1px solid var(--divider); }
.notif-foot { border-top: 1px solid var(--border); justify-content: space-between; }
.notif-list { max-height: 380px; overflow-y: auto; }
.dropdown-menu .notif-item, .notif-item { white-space: normal; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 10px; height: auto; padding: 10px 14px; border-radius: 0; border-bottom: 1px solid var(--divider); align-items: start; color: var(--text); }
.notif-item:last-child { border-bottom: 0; }
.notif-item .icon { width: 18px; height: 18px; margin-top: 1px; }
.notif-item.lvl-ok .icon { color: var(--good); }
.notif-item.lvl-warn .icon { color: var(--warn); }
.notif-item.lvl-error .icon { color: var(--bad); }
.notif-item.lvl-info .icon { color: var(--brand); }
.notif-title { font-size: 14px; }
.notif-item.unread .notif-title { font-weight: 700; }
.notif-item.unread .notif-title::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--brand); vertical-align: 1px; }
.notif-text, .notif-time { grid-column: 2; font-size: 13px; }
.notif-time { font-size: 12px; opacity: .8; }
.notif-empty { padding: 24px 14px; text-align: center; font-size: 13px; }

/* --- Seitenpanel rechts: Überfahren öffnet, Klick hält offen (common.js) --- */
.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(400px, calc(100vw - 44px));
  display: flex; flex-direction: column; background: var(--bg-elev); border-left: 1px solid var(--border-strong);
  transform: translateX(100%); transition: transform .18s ease, box-shadow .18s;
}
.side-panel.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
.side-panel-tab {
  position: absolute; left: -38px; top: var(--tab-top, 30%); width: 38px; padding: 12px 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  /* Die Lasche ist ein Button: Button-Farben des Layouts, auch wenn das Panel festgepinnt ist */
  background: linear-gradient(var(--btn-bg), var(--btn-bg)), var(--bg); color: var(--btn-fg); border: 1px solid var(--btn-border); border-right: 0;
  border-radius: 8px 0 0 8px; box-shadow: var(--shadow); font: inherit; cursor: pointer;
}
.side-panel-tab:hover { background: linear-gradient(var(--btn-hover), var(--btn-hover)), var(--bg); }
.side-panel-tab span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; font-weight: 600; }

.side-panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--divider); }
.side-panel-head h2 { margin: 0; font-size: 17px; }
.side-panel-head .pin-hint { font-size: 12px; }
.side-panel:not(.pinned) .pin-hint::before { content: attr(data-hover-text); }
.side-panel.pinned .pin-hint::before { content: attr(data-pinned-text); }
.side-panel-body { flex: 1; overflow-y: auto; padding: 16px; }
/* Unter der letzten Reiterzeile ein kräftiger Strich in Markenfarbe (wie unter Box-Köpfen) */
.side-panel-top { display: flex; align-items: flex-start; gap: 4px; padding: 10px 8px 0 10px; border-bottom: 2px solid var(--brand); }
.side-panel-top > [data-side-panel-close] { margin: 4px 0 0 auto; flex: none; }
/* Reiter scrollen nie seitlich: passen sie nicht, brechen sie in eine zweite Zeile um */
.side-panel-tabs { flex: 1; min-width: 0; margin: 0; padding: 0; border-bottom: 0; flex-wrap: wrap; row-gap: 0; overflow: hidden; }
/* Zarte Linie zwischen umgebrochenen Reiterzeilen; die Zeilen liegen ohne Abstand direkt an der
   Linie an (oben und unten). Jeder Reiter zieht die Linie 1 px über sich; bei der ersten Zeile liegt
   sie außerhalb und wird abgeschnitten */
.side-panel-tabs button { position: relative; }
.side-panel-tabs button::before { content: ""; position: absolute; left: -100vw; right: -100vw; top: -1px; height: 1px; background: var(--row-line); pointer-events: none; }
.side-panel-tabs button { padding: 7px 10px; gap: 5px; white-space: nowrap; border-radius: 6px 6px 0 0; }
.side-panel-tabs .icon { width: 15px; height: 15px; }
.side-panel-foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) { .side-panel, .side-panel-tab { transition: none; } }
/* Beim Wiederherstellen des Festpinnens nichts animieren (common.js restoreDocked) */
html.no-anim .side-panel, html.no-anim main, html.no-anim .site-footer, html.no-anim .site-header-inner { transition: none !important; }

/* --- Untermenü links: Seitenpanel neben dem Hauptmenü (gleiches Verhalten wie rechts) ---
   Steht das Hauptmenü links, liegt das Untermenü direkt daneben, nicht am Rand. Es liegt unter der
   aufklappenden Hauptleiste, damit diese beim Überfahren darüber aufgeht. */
.side-panel.left { right: auto; left: 0; z-index: 35; width: min(var(--sub-nav-w, 280px), calc(100vw - 44px)); border-left: 0; border-right: 1px solid var(--border-strong); transform: translateX(-100%); }
.side-panel.left.open { transform: translateX(0); }
html[data-layout="side"] .side-panel.left { left: 52px; }
.side-panel.left .side-panel-tab { left: auto; right: -38px; top: 50%; transform: translateY(-50%); border: 1px solid var(--btn-border); border-left: 0; border-radius: 0 8px 8px 0; }
.side-panel.left .side-panel-body { padding: 12px 10px; }
/* Lasche des Untermenüs darf den Inhalt nie überdecken (auch nicht bei Zoom) */
body:has(.side-panel.left:not(.docked)) main { padding-left: max(var(--page-gutter), 52px); }
body:has(.side-panel:not(.left)) main { padding-right: max(var(--page-gutter), 52px); }
.sub-nav { display: flex; flex-direction: column; gap: 2px; }
.sub-nav a { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 6px; color: var(--text); }
.sub-nav a:hover { background: var(--hover); color: var(--text); -webkit-text-stroke: var(--hover-bold); }
.sub-nav a.active { background: var(--active-bg); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
.sub-nav .icon { width: 16px; height: 16px; }
.sub-nav-title { padding: 4px 12px 8px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.sub-nav-head { display: flex; align-items: center; gap: 6px; padding: 0 0 6px; }
.sub-nav-head .sub-nav-title { flex: 1; padding-bottom: 0; }
[data-side-panel-pin].active { background: var(--active-bg); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
/* Angepinnt: Untermenü bleibt offen, Seite rückt daneben, nichts liegt darunter */
:root { --sub-nav-w: 280px; }
body.dock-left main, body.dock-left .site-footer, body.dock-left .site-header-inner { margin-left: var(--sub-nav-w); }
html[data-layout="side"] body.dock-left main, html[data-layout="side"] body.dock-left .site-footer { margin-left: calc(52px + var(--sub-nav-w)); width: calc(100% - 52px - var(--sub-nav-w)); }
body.dock-left main, body.dock-left .site-footer { width: calc(100% - var(--sub-nav-w)); }
.side-panel.left.docked { box-shadow: none; }
.side-panel.left.docked .side-panel-tab { display: none; }
/* Handy: Laschen nur als kleines Icon unten am Rand. Der Inhalt hält auf BEIDEN Seiten denselben
   Abstand (Lasche + 4px), damit nichts überdeckt wird und der Rand gleichmäßig bleibt. */
@media (max-width: 767px) {
  .side-panel-tab, .side-panel.left .side-panel-tab { top: auto; bottom: 88px; transform: none; width: 30px; padding: 8px 0; }
  .side-panel.left .side-panel-tab { right: -30px; }
  .side-panel:not(.left) .side-panel-tab { left: -30px; }
  .side-panel-tab span { display: none; }
  /* gleich spezifisch wie die Desktop-Regel der linken Lasche, sonst gewinnt deren 52px */
  body:has(.side-panel) main, body:has(.side-panel.left:not(.docked)) main { padding-left: max(var(--page-gutter), 34px); padding-right: max(var(--page-gutter), 34px); }
}
@media (max-width: 767px) {
  html[data-layout="side"] .side-panel.left { left: 0; }
  [data-side-panel-pin] { display: none; }
  body.dock-left main, body.dock-left .site-footer, body.dock-left .site-header-inner { margin-left: 0; width: 100%; }
}

/* --- Dock rechts (common.js, Timo 2026-11-02): 2+ rechte Panels (z. B. „Verwalten“ + Modul-Leiste)
   teilen sich EINEN Container. Er fährt von rechts herein; die Laschen stehen untereinander an seiner
   linken Kante und fahren mit. Überfahren einer anderen Lasche wechselt nur den Inhalt (kein zweites
   Panel, kein Sprung). Die Panels liegen darin ohne eigene Position, nur das gezeigte ist sichtbar. --- */
.side-dock {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 46; width: min(400px, calc(100vw - 44px));
  display: flex; background: var(--bg-elev); border-left: 1px solid var(--border-strong);
  transform: translateX(100%); transition: transform .2s ease, box-shadow .2s ease;
}
.side-dock.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
.side-dock > [data-side-panel] {
  position: static; inset: auto; transform: none; transition: none; flex: 1 1 auto; width: auto; min-width: 0;
  height: 100%; border: 0; box-shadow: none; background: transparent; display: none;
}
.side-dock > [data-side-panel].open { display: flex; animation: side-dock-in .16s ease; }
@keyframes side-dock-in { from { opacity: 0; } to { opacity: 1; } }
.side-dock-tabs {
  position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.side-dock-tabs .side-panel-tab { position: relative; left: auto; top: auto; transform: none; margin: 0; }
/* Gezeigtes Panel: Lasche geht in den Container über (gleiche Fläche, Markierung links) */
.side-dock.open .side-dock-tab.active {
  background: var(--bg-elev); color: var(--text); border-color: var(--border-strong);
  box-shadow: inset 3px 0 0 var(--brand), -4px 4px 12px rgba(0, 0, 0, .08); margin-right: -1px; width: 39px;
}
.side-dock.open .side-dock-tab:not(.active) { opacity: .92; }
html.no-anim .side-dock { transition: none !important; }
html.no-anim .side-dock > [data-side-panel].open { animation: none; }
@media (prefers-reduced-motion: reduce) { .side-dock { transition: none; } .side-dock > [data-side-panel].open { animation: none; } }
/* Laschen dürfen den Inhalt nie überdecken */
body:has(> .side-dock) > main { padding-right: max(var(--page-gutter), 52px); }
@media (max-width: 767px) {
  .side-dock { width: min(400px, calc(100vw - 34px)); }
  .side-dock-tabs { top: auto; bottom: 88px; transform: none; }
  .side-dock.open .side-dock-tab.active { width: 31px; }
  body:has(> .side-dock) > main { padding-left: max(var(--page-gutter), 34px); padding-right: max(var(--page-gutter), 34px); }
}

/* --- Rechte-Katalog (Admin › Roles; Vertrag Abschnitt 10 „Darstellung des Katalogs“ und „Gruppen von
   Rechten“, Makros catalog_tree/catalog_object in admin/_catalog.html (Skill vibe-app), Verhalten
   catalog_tree.js): nie die technische Kennung. Pfad mit „›“ – Trenner fett und etwas größer, letzter
   Teil hervorgehoben; Symbol je Art (kind), Einrückung je Ebene (level) mit feinen Linien; Spalten je
   Gruppe mit Haupt- und Unterhaken; Kopfzeile bleibt beim Scrollen stehen --- */
.cat-object { display: inline-flex; align-items: center; gap: 8px; padding-left: calc(var(--cat-level, 0) * 22px); }
.cat-kind { display: inline-flex; flex: none; color: var(--text-muted); }
.cat-kind .icon { width: 16px; height: 16px; }
.cat-name { min-width: 0; overflow-wrap: anywhere; }
.cat-sep { margin: 0 .35em; font-weight: 800; font-size: 1.2em; line-height: 1; color: var(--text-muted); }
.cat-part { color: var(--text-muted); }
.cat-last { font-weight: 700; color: var(--text); }

.cat-tree { --cat-indent: 24px; --cat-guide-x: 11px; --cat-mid: 19px; --cat-col-w: 212px; --cat-line: var(--border-strong); margin-bottom: 16px; }
.cat-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.cat-tools-gap { flex: 1; }
.cat-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 360px; margin: 0; }
.cat-search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; }
.cat-search input { width: 100%; padding-left: 32px; }
.cat-grid { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); }
.cat-head, .cat-row { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(var(--cat-cols, 1), var(--cat-col-w)); align-items: stretch; }
/* Kopfzeile bleibt beim Scrollen oben in main stehen (main scrollt, die Kopfzeile der Seite liegt
   außerhalb; sticky misst ab dem Inhalt von main, daher minus dessen Abstand oben) */
.cat-head {
  position: sticky; top: calc(-1 * var(--main-pad-top, 0px)); z-index: 3; border-bottom: 2px solid var(--brand);
  background: var(--bg-elev); border-radius: 8px 8px 0 0;
}
.cat-h { padding: 10px 14px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--text); }
.cat-h-group { border-left: 1px solid var(--row-line); }
.cat-row { position: relative; border-top: 1px solid var(--row-line); }
.cat-head + .cat-row { border-top: 0; }
.cat-row[hidden] { display: none; }
.cat-row:hover { background: var(--hover); }
.cat-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; min-width: 0; padding: 8px 14px; }
.cat-cell-name { gap: 8px; flex-wrap: nowrap; padding-left: calc(10px + var(--cat-level, 0) * var(--cat-indent)); min-height: 38px; }
.cat-cell-group { border-left: 1px solid var(--row-line); }
.cat-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-width: 0; }
/* Kräftiger: Module, Teams, Einheiten, Sammlungen; leichter: Agenten, Nutzer, Dokumente … */
.cat-row.kind-module .cat-last, .cat-row.kind-app .cat-last { font-weight: 800; }
.cat-row.kind-team .cat-last, .cat-row.kind-unit .cat-last, .cat-row.kind-source .cat-last, .cat-row.kind-collection .cat-last { font-weight: 700; }
.cat-row.kind-agent .cat-last, .cat-row.kind-user .cat-last, .cat-row.kind-document .cat-last,
.cat-row.kind-tool .cat-last, .cat-row.kind-prompt .cat-last, .cat-row.kind-setting .cat-last { font-weight: 500; color: color-mix(in srgb, var(--text) 82%, var(--bg-elev)); }
.cat-row.kind-agent .cat-kind, .cat-row.kind-user .cat-kind, .cat-row.kind-document .cat-kind { color: color-mix(in srgb, var(--text) 65%, var(--bg-elev)); }
.cat-row.kind-team, .cat-row.kind-unit { background: color-mix(in srgb, var(--brand) 3%, transparent); }
.cat-row.kind-team:hover, .cat-row.kind-unit:hover { background: var(--hover); }
/* Auf-/Zuklappen: Pfeil, gedreht wenn offen; Blätter halten den Platz frei, damit alles fluchtet */
.cat-toggle {
  display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; margin: 0;
  border: 0; border-radius: 4px; background: none; color: var(--text); cursor: pointer; position: relative; z-index: 1;
}
.cat-toggle:hover { background: var(--hover); }
.cat-toggle .icon { width: 15px; height: 15px; transition: transform .15s ease; }
.cat-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }
.cat-tree.ready .cat-toggle[hidden] { display: inline-grid; visibility: hidden; }
.cat-count { flex: none; font-size: 12px; color: var(--text-muted); opacity: .8; white-space: nowrap; }
.cat-count:empty { display: none; }
/* Feine Verbindungslinien wie im Explorer (catalog_tree.js setzt je Ebene einen Abschnitt) */
.cat-guides { position: absolute; inset: 0 auto 0 10px; width: 0; pointer-events: none; }
.cat-guide { position: absolute; top: -1px; bottom: 0; width: var(--cat-indent); }
.cat-guide.line::before, .cat-guide.elbow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--cat-line); }
.cat-guide.elbow.last::before { bottom: auto; height: calc(var(--cat-mid) + 1px); }
.cat-guide.elbow::after { content: ""; position: absolute; left: 0; top: calc(var(--cat-mid) + 1px); width: calc(var(--cat-indent) - var(--cat-guide-x) + 2px); border-top: 1px solid var(--cat-line); }
.cat-row:not(.has-children) .cat-guide.elbow::after { width: calc(var(--cat-indent) - var(--cat-guide-x) + 12px); }
/* Im Baum steht nur der Teil unter dem Eltern-Eintrag; Suchtreffer zeigen den ganzen Pfad */
.cat-tree.ready:not(.searching) .cat-pre { display: none; }
.cat-tree.searching .cat-guides, .cat-tree.searching .cat-toggle, .cat-tree.ready.searching .cat-toggle[hidden], .cat-tree.searching .cat-count { display: none; }
.cat-tree.searching .cat-cell-name { padding-left: 14px; }
/* Haken: Haupthaken + Unterhaken („inkl. darunter“) */
.cat-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--text); cursor: pointer; white-space: nowrap; }
.cat-check.sub { font-size: 13px; color: color-mix(in srgb, var(--text) 85%, var(--bg-elev)); }
.cat-check.off { opacity: .45; cursor: default; }
.cat-check input:disabled { cursor: default; }
/* Abgedeckt durch einen gesetzten Unterhaken weiter oben (gleiche Gruppe) */
.cat-cell-group.covered { background: color-mix(in srgb, var(--brand) 7%, transparent); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--brand) 40%, transparent); }
.cat-empty { margin: 0; padding: 14px; }
/* Handy: Gruppen unter dem Namen – links der Gruppenname, rechts die Haken (brechen bei Bedarf um) */
@media (max-width: 767px) {
  .cat-tree { --cat-indent: 18px; }
  .cat-head { display: none; }
  .cat-head + .cat-row { border-top: 0; }
  .cat-row { grid-template-columns: minmax(0, 1fr); }
  .cat-cell-name { padding-right: 10px; }
  .cat-cell-group {
    display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px;
    border-left: 0; padding: 0 10px 8px calc(42px + var(--cat-level, 0) * var(--cat-indent));
  }
  .cat-cell-group:not(:has(input)) { display: none; }
  .cat-cell-group::before { content: attr(data-group-name); font-size: 12px; font-weight: 700; color: var(--text-muted); }
  .cat-cell-group.covered { box-shadow: none; }
  .cat-checks { gap: 2px 12px; }
  .cat-tree.searching .cat-cell-group { padding-left: 14px; }
  .cat-search { max-width: none; }
}

/* --- Vorschau des Browser-Tabs (Admin › Settings › General) --- */
.tab-preview { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; padding: 8px 12px; border: 1px solid var(--border-strong); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--bg); font-size: 13px; }
.tab-preview img { width: 16px; height: 16px; flex: none; border-radius: 3px; }
.tab-preview span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-preview .icon { width: 12px; height: 12px; opacity: .6; }

/* --- Kopfzeile: Trennstrich zwischen Marke und Menü, Profil-Menü, Reiter im Benachrichtigungs-Fenster --- */
.site-header-inner > .site-nav { border-left: 1px solid var(--border-strong); padding-left: 16px; margin-left: -8px; }
details.profile > summary { list-style: none; cursor: pointer; border-radius: 50%; display: inline-flex; }
details.profile > summary::-webkit-details-marker { display: none; }
details.profile > summary:hover .avatar, details.profile[open] > summary .avatar { box-shadow: 0 0 0 3px var(--hover); }
.dropdown-menu.profile-menu { min-width: 250px; }
.profile-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 8px; }
.profile-head strong { display: block; }
.dropdown-menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--border); }
.notif-tabs { margin: 0; border-bottom: 0; gap: 2px; }
.dropdown-menu .notif-tabs button { height: auto; padding: 5px 10px; font-size: 13px; }
.tab-dot { display: inline-block; width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: var(--bad); }
.notif-release { padding: 12px 14px; max-height: 380px; overflow-y: auto; }
.notif-release .release-group { grid-template-columns: 72px minmax(0, 1fr); font-size: 13px; }
@media (max-width: 767px) { .site-header-inner > .site-nav { border-left: 0; padding-left: 0; margin-left: 0; } }

/* --- Einstellungs-Ebenen (Modul / AI Suite): gültiger Wert hervorgehoben --- */
.layer-table td.in-use { background: var(--brand-soft); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }

/* --- Versionshinweise --- */
dialog.modal.wide { width: min(680px, calc(100vw - 32px)); }
.release { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--divider); }
.release:last-child { border-bottom: 0; margin-bottom: 0; }
.release-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.release-head h3 { margin: 0; }
.release-group { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 4px 12px; margin-top: 6px; }
.release-group > .badge { justify-self: start; align-self: start; margin-top: 2px; }
.release-group ul { margin: 0; padding-left: 18px; }
.app-version { font-size: 12px; }
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 45%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--bad) 0%, transparent); }
}
.chat-list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.chat-list-head strong { flex-basis: 100%; }
.chat-list .conv .conv-act { opacity: 0; }
.chat-list .conv:hover .conv-act, .chat-list .conv.active .conv-act { opacity: 1; }
.chat-list .conv.active .conv-act { color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
.chat-list .conv .conv-act.rename:hover { color: var(--brand); }
.chat-list .conv.active .conv-act:hover { background: color-mix(in srgb, var(--on-brand) 20%, transparent); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
@media (hover: none) { .chat-list .conv .conv-act { opacity: 1; } }
.chat-list .conv .title-input { flex: 1; min-width: 0; padding: 3px 6px; font-size: 14px; }
.chat-input .chat-actions { display: flex; gap: 6px; align-items: stretch; }
.chat-actions .icon-btn { height: auto; width: 44px; }
.chat-actions .icon-stack { display: flex; flex-direction: column; gap: 6px; }
.chat-actions .icon-stack .icon-btn { flex: 1; }
.chat-actions .btn { align-self: stretch; }
.rec-hint { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--bad); font-size: 13px; }
.rec-hint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); animation: rec-blink 1s step-end infinite; }
@keyframes rec-blink { 50% { opacity: 0; } }
.voice-call {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 32px 20px; margin-bottom: 10px; text-align: center;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev);
}
.voice-orb { width: 88px; height: 88px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; color: var(--on-brand); animation: orb-breathe 2.4s ease-in-out infinite; }
.voice-orb svg { width: 34px; height: 34px; }
.voice-call.speaking .voice-orb { animation-duration: .9s; }
@keyframes orb-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 35%, transparent); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 16px color-mix(in srgb, var(--brand) 0%, transparent); }
}
.voice-status { font-weight: 600; }
.voice-controls { display: flex; gap: 10px; }
@media (prefers-reduced-motion: reduce) {
  .voice-orb, .icon-btn.recording, .rec-hint::before { animation: none; }
}

/* --- Cron-Feld mit Assistent (cron.js) --- */
.cron-field { position: relative; display: flex; gap: 6px; align-items: stretch; }
.cron-field input { flex: 1; min-width: 0; }
.cron-field > .btn.active { background: var(--active-bg); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
.cron-text { margin-top: 4px; }
.field.invalid .cron-text { color: var(--bad); }
.cron-pop {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: min(440px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-lg);
}
.cron-pop.right { left: auto; right: 0; }
.cron-pop .segmented { align-self: flex-start; flex-wrap: wrap; }
.cron-body { display: flex; flex-direction: column; gap: 10px; }
.cron-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cron-row > span:first-child { min-width: 72px; font-weight: 600; font-size: 13px; }
.cron-row select { width: auto; min-width: 140px; }
.cron-row input[type=number] { width: 80px; }
.cron-days { display: flex; gap: 4px; flex-wrap: wrap; }
.cron-days .chip { min-width: 38px; padding: 4px 8px; font-size: 13px; }
.cron-preview { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 6px; background: var(--bg-alt); border: 1px solid var(--border); font-size: 13px; }
.cron-preview code { font-weight: 700; }
.cron-foot { display: flex; justify-content: flex-end; gap: 8px; }

/* --- Einstellungs-Box (z. B. KI-Verbindungen, Modelle): immer ein Viertel breit, gleiche Höhe,
   Reihenfolge per Ziehen ([data-sortable], common.js) --- */
/* höchstens 4 Spalten, jede mindestens 260px – schmaler Inhalt (festgepinnte Leiste) = weniger Spalten */
.box-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(260px, calc((100% - 48px) / 4))), 1fr)); align-items: stretch; margin-bottom: 20px; }
/* Ziehen: Karte zeigt beim Überfahren, dass sie greifbar ist; die gegriffene Karte hängt am Zeiger,
   an ihrer Stelle steht ein gestrichelter Platzhalter in Markenfarbe = Ziel beim Loslassen */
[data-sortable] > [data-sort-id], .box[draggable="true"] { cursor: grab; transition: box-shadow .15s ease, transform .15s ease; }
[data-sortable] > [data-sort-id]:hover, .box[draggable="true"]:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
[data-sortable] > [data-sort-id]:active, .box[draggable="true"]:active { cursor: grabbing; }
[data-sortable] > .dragging, .box.dragging { opacity: 1; transform: none; box-shadow: none;
  background: var(--brand-soft); border: 2px dashed var(--brand); }
[data-sortable] > .dragging > *, .box.dragging > * { visibility: hidden; }
.box { display: flex; flex-direction: column; gap: 12px; margin: 0; border-left: 4px solid var(--brand); }
.box-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--brand); }
.box-head.top { align-items: flex-start; }   /* mehrzeiliger Kopf (z. B. Avatar + Name und Position) */
/* Titel wird gekürzt, Badges nie: Umbruch rechnet mit 8ch Titel, danach wächst er bis zur vollen Länge,
   der Rest geht an margin-left:auto (Badges rechts). Passt ein zweites Badge nicht, bricht es um. */
.box-head h3 { flex: 1 1 8ch; min-width: 8ch; max-width: max-content; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⓘ direkt hinter dem Titel, alles danach rechtsbündig */
.box-head > h3 + :not(.info-tip), .box-head > h3 + .info-tip + * { margin-left: auto; }
.box-head > .badge { flex: none; white-space: nowrap; }
/* Erklärung immer drei Zeilen hoch, damit die Felder aller Boxen auf einer Linie liegen */
.box-hint {
  margin: 0; font-size: 13px; line-height: 1.45; min-height: calc(3 * 1.45em);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.box .field { margin: 0; }
.box-meta { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 0; margin-top: 0; font-size: 13px; }
.box-meta dt, .box-meta dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--row-line); }
.box-meta > :nth-last-child(-n+2) { border-bottom: 0; }
/* In Einstellungs-Boxen gehört der Budget-Balken direkt zur Kennzahl darüber */
.box .box-meta { margin-bottom: 6px; }
.box-meta dt { padding-right: 12px; }
.box-meta dd { min-width: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Beliebige Liste untereinander stehender Zeilen: <div class="rows"> … </div> */
.rows > * { padding: 8px 0; }
.rows > * + * { border-top: 1px solid var(--row-line); }
.box-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.box.add {
  align-items: center; justify-content: center; min-height: 220px; cursor: pointer; text-align: center;
  border: 2px dashed var(--btn-border); box-shadow: none; background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-weight: 600;
}
.box.add:hover { background: var(--btn-hover); border-color: var(--btn-border); -webkit-text-stroke: var(--hover-bold); }
.box.add .plus { font-size: 28px; line-height: 1; }
.input-unit { position: relative; display: flex; }
.input-unit input { padding-right: 36px; }
.input-unit > span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-weight: 600; pointer-events: none; }
/* Box mit breiten Feldern (z. B. Prompts mit langem Text): halbe Zeile breit, sonst wie .box-grid */
.box-grid.half { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(320px, calc((100% - 16px) / 2))), 1fr)); }
/* Untergruppe einer Box (z. B. SMTP / Microsoft Graph): zugeklappter Aufklapper, Felder untereinander */
.box details.accordion { margin: 0; }
.box details.accordion > .accordion-body { display: flex; flex-direction: column; gap: 12px; padding: 8px 10px 10px; }

/* --- Gruppen: zusammengehörige Felder immer in einem beschrifteten Rahmen --- */
.group-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; margin-bottom: 16px; }
/* Feste zwei Spalten – auch eine einzelne Karte nimmt nur die halbe Breite (Handy: ganze Breite) */
.group-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .group-grid.cols-2 { grid-template-columns: minmax(0, 1fr); } }
fieldset.group { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0 0 16px; padding: 12px 16px 16px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-elev); }
.group-grid > fieldset.group { margin: 0; height: 100%; }
fieldset.group > legend { padding: 0 6px; margin-left: -6px; font-size: 14px; font-weight: 700; }
fieldset.group > .group-hint { margin: 0; font-size: 13px; }
fieldset.group .field { margin: 0; }
/* Eintrag einer Liste in einer Gruppe (z. B. Provider eines Moduls): eigener Rahmen, Felder darunter */
fieldset.group .list-item { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; }
fieldset.group .form-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

/* --- Zeitwähler (timepicker.js): Stunde | Minute, darunter OK über beide Spalten --- */
.time-field { position: relative; display: inline-flex; width: 100%; max-width: 220px; }
.time-field input { flex: 1; min-width: 0; padding-right: 40px; font-variant-numeric: tabular-nums; }
.time-field.invalid input { border-color: var(--bad); }
.time-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer;
}
.time-btn:hover { background: var(--hover); }
.time-btn.active { background: var(--active-bg); color: var(--active-fg); box-shadow: inset 0 0 0 1px var(--active-border); }
.time-btn svg { width: 17px; height: 17px; }
.time-pop {
  position: absolute; z-index: 1300; top: calc(100% + 4px); left: 0; width: 200px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-lg);
}
.time-pop.up { top: auto; bottom: calc(100% + 4px); }
.time-pop.right { left: auto; right: 0; }
.time-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.time-col-head { font-size: 12px; font-weight: 700; text-align: center; padding-bottom: 4px; border-bottom: 1px solid var(--divider); }
.time-list { display: flex; flex-direction: column; gap: 2px; height: 200px; overflow-y: auto; }
.time-opt {
  flex: none; padding: 5px 0; border: 0; border-radius: 6px; background: none; color: var(--text);
  font: inherit; font-variant-numeric: tabular-nums; text-align: center; cursor: pointer;
}
.time-opt:hover { background: var(--hover); -webkit-text-stroke: var(--hover-bold); }
.time-opt.active { background: var(--active-bg); color: var(--active-fg); font-weight: 700; box-shadow: inset 0 0 0 1px var(--active-border); }
.time-ok { grid-column: 1 / -1; justify-content: center; }
.cron-row .time-field { width: 160px; }
/* --- Datumsfeld (datepicker.js): Anzeige ISO yyyy-MM-dd, Platzhalter yyyy-MM-dd bzw. jjjj-MM-tt --- */
.date-pop { width: 260px; display: block; }
.date-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.date-head .time-opt { width: 32px; }
.date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-grid .time-col-head { padding-bottom: 2px; }
.date-grid .time-opt.today:not(.active) { box-shadow: inset 0 0 0 1px var(--brand); }

/* ============================================================
   Responsive: Handy < 768 px · Tablet 768–1024 px · Desktop > 1024 px
   ============================================================ */

/* Tablet: Menü bleibt oben, darf seitlich scrollen statt umzubrechen */
@media (max-width: 1024px) {
  .site-header-inner { gap: 14px; padding: 10px 16px; }
  .site-nav { overflow-x: auto; scrollbar-width: none; }
  .site-nav a { white-space: nowrap; padding: 6px 10px; }
  .site-tools { gap: 8px; }
  .admin-shell { grid-template-columns: 170px minmax(0, 1fr); gap: 18px; }
  .chat-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .media img { width: 120px; }
}

/* Handy: Kopfzeile mit Menüknopf, Menü und Werkzeuge klappen darunter auf.
   Die Seitenleiste gibt es hier nicht – sie würde ein Siebtel des Bildschirms belegen. */
@media (max-width: 767px) {
  html[data-layout="side"] .side-nav { display: none; }
  .modules-rail { top: 0; width: min(340px, calc(100vw - 32px)); }
  .modules-rail .rail-tab { display: none; }
  body:has(> .modules-rail):not(:has(.side-panel:not(.left))) > main { padding-right: var(--page-gutter); }
  .rail-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: auto; padding: 0; background: none; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--text); cursor: pointer; }
  .rail-toggle:hover { background: var(--hover); }
  .rail-toggle + .menu-toggle { margin-left: 0; }
  html[data-layout="side"] .site-header { display: block; }
  html[data-layout="side"] main, html[data-layout="side"] .site-footer { margin-left: 0; width: 100%; }
  .site-header-inner { flex-wrap: wrap; gap: 10px; }
  .menu-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: auto; padding: 0; background: none; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--text); font-size: 16px; line-height: 1; cursor: pointer; }
  .site-nav, .site-tools { display: none; }
  .site-header.open .site-nav { display: flex; flex-direction: column; flex-basis: 100%; overflow: visible; }
  .site-header.open .site-nav a { padding: 10px 12px; }
  .site-header.open .site-nav .nav-ico { display: inline-block; width: 24px; }
  .site-header.open .site-tools { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: 12px; padding: 10px 0 4px; border-top: 1px solid var(--border); }
  .site-tools .user-box .side-label { display: inline; }
  .layout-toggle { display: none; }
  :root { --main-pad-top: 20px; }
  main { padding: var(--main-pad-top) var(--page-gutter) 32px; }
  .card { padding: 16px; }
  .card-img { width: calc(100% + 32px); margin: -16px -16px 14px; }
  .page-head { align-items: flex-start; }
  .page-head .spacer { display: none; }
  .btn { padding: 10px 16px; }
  .btn.small { padding: 5px 10px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { font-size: 21px; }
  .admin-shell, .chat-shell { grid-template-columns: minmax(0, 1fr); }
  .admin-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .admin-rail a { white-space: nowrap; }
  .chat-list { border-right: 0; border-bottom: 1px solid var(--divider); padding: 0 0 10px; max-height: 160px; }
  .msg { max-width: 92%; }
  .media, .media.right { flex-direction: column; }
  .media img { width: 100%; }
  .bare-tools { position: static; justify-content: flex-end; padding: 12px 16px 0; }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { justify-content: center; }
  .toast-stack { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .cron-pop, .cron-pop.right { left: 0; right: 0; width: auto; }
  .cron-pop .segmented { border: 0; gap: 4px; flex-wrap: wrap; overflow: visible; }
  .cron-pop .segmented button, .cron-pop .segmented button + button { border: 1px solid var(--brand); border-radius: 6px; }
  .cron-row > span:first-child { min-width: 0; }
}

/* Flow einer Anfrage (static/js/flow.js, Skill create-webpage, in jedem Chat mit Ablauf): Diagramm aus
   Kästen mit Pfeilen, Unterschritte eingerückt in einer Spur; Farbe je Art, rot bei Fehler */
.flow { margin-top: 8px; }
.flow > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.flow-bar { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.flow[data-view="chart"] .flow-list-wrap, .flow[data-view="list"] .flow-chart { display: none; }
.flow-chart { display: flex; flex-direction: column; align-items: stretch; }
.flow-item { display: flex; flex-direction: column; }
.flow-node { --flow-c: var(--brand); background: var(--bg-elev); border: 1px solid var(--border); border-left: 4px solid var(--flow-c); border-radius: 8px; box-shadow: var(--shadow); font-size: 13px; }
.flow-node > summary, .flow-node > .flow-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; padding: 8px 12px; list-style: none; }
.flow-node > summary { cursor: pointer; }
.flow-node > summary::-webkit-details-marker { display: none; }
.flow-node > summary:hover { background: var(--hover); }
.flow-node[open] > summary { border-bottom: 1px solid var(--border); }
.flow-node[data-kind="request"], .flow-node[data-kind="answer"] { --flow-c: var(--good); }
.flow-node[data-kind="route"] { --flow-c: var(--text-muted); }
.flow-node[data-kind="tool"], .flow-node[data-kind="module"] { --flow-c: var(--warn); }
.flow-node[data-kind="search"], .flow-node[data-kind="data"], .flow-node[data-kind="api"] { --flow-c: color-mix(in srgb, var(--brand) 55%, var(--text)); }
.flow-node[data-status="error"], .flow-node[data-status="cannot"], .flow-node[data-kind="error"], .flow-node[data-kind="limit"] { --flow-c: var(--bad); }
.flow-ico { color: var(--flow-c); align-self: center; display: inline-flex; }
.flow-kind { font-weight: 700; }
.flow-to { color: var(--text-muted); }
.flow-preview { flex-basis: 100%; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-arrow { position: relative; height: 18px; margin-left: 22px; border-left: 2px solid var(--border-strong); width: 0; }
.flow-arrow::after { content: ""; position: absolute; bottom: -1px; left: -6px; border: 5px solid transparent; border-top-color: var(--border-strong); border-bottom: 0; }
.flow-lane { margin: 6px 0 0 22px; padding: 8px 0 2px 14px; border-left: 2px dashed var(--border-strong); }
.flow-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; margin: 0; padding: 10px 12px; }
.flow-fields dt { color: var(--text-muted); font-weight: 600; }
.flow-fields dd { margin: 0; min-width: 0; }
.flow-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.flow-json { margin: 0; max-height: 260px; overflow: auto; font-size: 12px; background: var(--bg-alt); border-radius: 6px; padding: 6px 8px; }
.flow-list { margin: 0; padding-left: 20px; font-size: 13px; }
.flow-list li { margin: 4px 0; }
.flow-list li[data-status="error"] > *, .flow-list li[data-status="cannot"] > * { color: var(--bad); }
.flow-list .flow-preview { display: block; }