/* ============================================================================
   Layout — Raster/Zeile/Stapel/Split. Bausteine: Core\Design::grid/row/stack/split.
   Anordnung geteilter Muster kommt HIER her, damit Karten-Raster & Split-Ansichten
   überall gleich aussehen und gleich umbrechen. Abstände aus den Gap-Tokens.
   ============================================================================ */

/* Karten-Raster — Standard: auto-fit ab 220px. Feste Spalten via cc-grid-2/3/4. */
.cc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap-md); }
.cc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cc-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width:720px) { .cc-grid-2, .cc-grid-3, .cc-grid-4 { grid-template-columns: 1fr; } }
.cc-cell { min-width: 0; }

/* Zeile — Flex mit Gap. */
.cc-row { display: flex; align-items: center; gap: var(--gap-sm); }
/* BLOCK-ABSTAND (Kern-Regel): eine Zeile/Chip-Reihe/Kennzahlen-Reihe/Liste und der nächste Block
   (Datentabelle, Formular, Raster, nächste Zeile) haben IMMER Luft. Niedrige Spezifität (:where) —
   ein Modul mit engem Stapel (gap-gesteuert) oder ein Kern-Stapel überschreibt das schmerzfrei. */
:where(.cc-row, .cc-chips, .cc-grid, .cc-dl, .cc-kv, .cc-segmented, .cc-searchbar, .cs-intro, .cc-infobox, .cc-empty)
  + :where(.dataTables_wrapper, .mage-table, .cc-row, .cc-grid, .mage-field, .cc-dl, .cc-kv, .cc-chips, .cc-infobox, .cc-codewrap, .cc-empty) { margin-top: var(--sp-5); }
:where(.cc-stack) > * + * { margin-top: 0; }
.cc-row-between { justify-content: space-between; }
.cc-row-end { justify-content: flex-end; }
.cc-row-center { justify-content: center; }
.cc-align-start { align-items: flex-start; }
.cc-align-center { align-items: center; }
.cc-wrap { flex-wrap: wrap; }

/* Stapel — senkrecht mit gleichmäßigem Abstand. */
.cc-stack { display: flex; flex-direction: column; gap: var(--gap-md); }
.cc-stack-xs { gap: var(--gap-xs); }
.cc-stack-sm { gap: var(--gap-sm); }
.cc-stack-md { gap: var(--gap-md); }
.cc-stack-lg { gap: var(--gap-lg); }

/* Split — geteilte Flächen nebeneinander (Grid-Template kommt vom Baustein). Mobil 1-spaltig. */
.cc-split { display: grid; gap: var(--gap-md); align-items: start; }
.cc-split-pane { min-width: 0; }
@media (max-width:720px) { .cc-split { grid-template-columns: 1fr !important; } }

/* Entitäts-Zelle (Design::entityCell): Avatar/Icon links, Titel + Metazeile rechts.
   DIE Standard-Rolle für „Wer/Was"-Spalten in Listen (Kontakte, User, Tickets …). */
.cc-ent { display: flex; align-items: center; gap: var(--sp-5); min-height: var(--sz-40); min-width: var(--sz-280); }
.cc-ent-info { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.cc-ent-title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-ent-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cc-ent-meta-text { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.cc-ent-tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.cc-ent-sep { color: var(--grey-300); font-size: var(--fs-2xs); }
.cc-ent-actions { display: flex; gap: var(--sp-2); }

/* Stat-/KPI-Kachel (Design::stat): grosse Zahl + Beschriftung — EINE Kachel fürs ganze System. */
.cc-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); }
.cc-stat-num { font-size: var(--fs-xl); font-weight: var(--fw-heavy); color: var(--ink); line-height: 1.2; }
.cc-stat-brand { color: var(--o); }
.cc-stat-label { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-1); }

/* Listenzeile (Design::listRow): Inhalt links, Aktionen IMMER rechtsbündig — EIN Muster für
   jede Aufzählung in Sidebars/Panels. Der Inhalt kürzt sich, die Knöpfe wandern nie. */
.cc-lrow { display: flex; align-items: center; gap: var(--gap-sm); padding: var(--sp-2) 0; min-width: 0; }
.cc-lrow + .cc-lrow { border-top: 1px solid var(--border); }
.cc-lrow-main { display: flex; align-items: center; gap: var(--gap-xs); flex: 1 1 auto; min-width: 0; overflow: hidden; }
.cc-lrow-main > * { min-width: 0; }
.cc-lrow-act { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }

/* Auswahl-Sperre während eines Zieh-Vorgangs (Trenner, Fenster) — als Klasse, nicht per JS-Stil. */
.cc-noselect, .cc-noselect * { user-select: none !important; }

/* Datenblatt (Design::sheetHead / Design::sheet) — EIN Kopf + EIN Akkordeon für Modul-Info,
   Systemansichten und Datensatz-Details in der Sidebar. Kein Modul baut seinen Kopf selbst. */
.cc-sheet { min-width: 0; }
.cc-sheet-head { display: flex; align-items: flex-start; gap: var(--sp-6); margin-bottom: var(--sp-6); }
.cc-sheet-ico { flex: 0 0 var(--sz-48); width: var(--sz-48); height: var(--sz-48); border-radius: var(--radius);
                background: var(--grey-100); color: var(--o); font-size: var(--fs-xl);
                display: inline-flex; align-items: center; justify-content: center; }
/* Bild-Kachel im Kopf (Design::sheetHead 'media'): Avatar/Bild füllt die Kachel randlos aus. */
.cc-sheet-ico-media { background: transparent; overflow: hidden; padding: 0; }
.cc-sheet-ico-media > * { width: 100%; height: 100%; font-size: inherit; }
.cc-sheet-main { flex: 1 1 auto; min-width: 0; }
.cc-sheet-title { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; min-height: var(--sz-48); }
.cc-sheet-title h2 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-heavy); color: var(--ink); line-height: 1.2; }
.cc-sheet-badges { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cc-sheet-badges .badge-status { white-space: nowrap; }   /* im Kopf bricht eine Plakette nie um (in engen Tabellenzellen darf sie) */
.cc-sheet-intro { margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--fs-md); line-height: 1.5; }
/* Aktionsleiste: Knöpfe UND Schalter auf einer Mittellinie, umbrechend, mit Trennlinie zum Kopf. */
.cc-sheet-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
                    padding: var(--sp-5) 0; border-top: 1px solid var(--grey-100); margin-bottom: var(--sp-6); }
.accordion-body .cc-sheet-actions { border-top: 0; padding: 0; margin: 0; }
.accordion-body > .cs-intro + .cc-sheet-actions { margin-top: var(--sp-5); }
.cc-sheet-actions .cc-check { display: inline-flex; align-items: center; gap: var(--sp-3); margin: 0; cursor: pointer; }
.cc-sheet-spacer { flex: 1 1 auto; }
/* Im Sektionskörper: der letzte Block/die letzte Liste ohne Nachlauf — nichts klebt, nichts hängt über. */
.cc-sheet-body .accordion-body > .cs-sec:last-child { margin-bottom: 0; }
.cc-sheet-body .accordion-body > .cc-dl:last-child { margin-bottom: 0; }

/* Kachel (Design::tile / Design::tileGrid) — EINE klickbare Karte für Hubs und Raster
   (System, Programme, Flaggen). Rahmen, Hover, Schatten, Icon-Farbe NUR hier. */
.cc-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--sz-260), 1fr)); gap: var(--sp-4); }
.cc-tile-grid-sm { grid-template-columns: repeat(auto-fill, minmax(var(--sz-120), 1fr)); gap: var(--sp-3); }
.cc-tile { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); min-width: 0;
           border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer;
           transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.cc-tile:hover { border-color: var(--o); box-shadow: var(--shadow-sm); }
.cc-tile-top { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.cc-tile-top > .txt-strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tile-ico { font-size: var(--fs-lg); color: var(--o); flex: 0 0 auto; }
.cc-tile > .txt-muted { font-size: var(--fs-sm); line-height: 1.45; }
.cc-tile-off .cc-tile-ico { color: var(--muted); }
.cc-tile-disabled { cursor: default; opacity: var(--op-dim); }
.cc-tile-disabled:hover { border-color: var(--border); box-shadow: none; }
/* Bild-Kachel: kompakt, Bild oben, Text zentriert und einzeilig. */
.cc-tile-media { gap: var(--sp-1); padding: var(--sp-2); text-align: center; }
.cc-tile-media .cc-tile-top { justify-content: center; }
.cc-tile-media .cc-tile-top > .txt-strong { flex: 0 1 auto; }
.cc-tile-media > .txt-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tile-img { display: flex; align-items: center; justify-content: center; height: var(--sz-64); }
.cc-tile-img > img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Listenzeilen-Varianten (Design::listRow): compact = eng, ohne Trennlinie (Seitenspalten); reveal = Aktionen
   erst beim Zeigen; clickable = ganze Zeile klickbar (Zeiger + Hover-Fläche). */
.cc-lrow-compact { padding: var(--sp-1) 0; }
.cc-lrow-compact + .cc-lrow-compact { border-top: 0; }
.cc-lrow-reveal .cc-lrow-act { opacity: 0; transition: opacity var(--dur-fast); }
.cc-lrow-reveal:hover .cc-lrow-act, .cc-lrow-reveal:focus-within .cc-lrow-act { opacity: 1; }
.cc-lrow-click { cursor: pointer; border-radius: var(--radius); padding-left: var(--sp-2); padding-right: var(--sp-2); }
.cc-lrow-click:hover { background: var(--grey-100); }
.cc-lrow-wrap > .cc-lrow-main { flex-wrap: wrap; }

/* Auswahl-Zeile (Design::pickRow) — EINE gilt: Farbpunkt + Name, Zeigen grau, gewählt grün mit Häkchen. */
.cc-pick { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); margin: 0 calc(-1 * var(--sp-2));
           border-radius: var(--radius); cursor: pointer; color: var(--grey-700); font-size: var(--fs-base); }
.cc-pick:hover { background: var(--grey-100); color: var(--ink); }
.cc-pick .cc-swatch { width: var(--sz-12); height: var(--sz-12); border-radius: 50%; flex: none; }
.cc-pick-label { flex: 1 1 auto; }
.cc-pick-on, .cc-pick-on:hover { background: var(--ok-bg); color: var(--ink); font-weight: var(--fw-bold); }
.cc-pick-check { color: var(--ok); }

/* Beitrag (Design::comment) — Avatar links, Kopfzeile (Name · Zeit · #Nr · Plaketten · Aktionen beim Zeigen), Inhalt. */
.cc-cmt { display: flex; gap: var(--sp-4); padding: var(--sp-5) 0; border-bottom: 1px solid var(--grey-100); }
.cc-cmt-lead { flex: 0 0 auto; }
.cc-cmt-main { flex: 1 1 auto; min-width: 0; }
.cc-cmt-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.cc-cmt-author { font-weight: var(--fw-bold); color: var(--ink); }
.cc-cmt-date, .cc-cmt-num { color: var(--muted); font-size: var(--fs-sm); }
.cc-cmt-acts { display: inline-flex; align-items: center; gap: var(--sp-1); opacity: 0; transition: opacity var(--dur-fast); }
.cc-cmt:hover .cc-cmt-acts, .cc-cmt:focus-within .cc-cmt-acts { opacity: 1; }
/* Antwort: eingerückt unter ihrem Beitrag, hellere Trennlinie. Systemeintrag: kompakt, Inhalt kursiv + grau. */
.cc-cmt-reply { margin-left: var(--sz-52); border-bottom-color: var(--grey-50); }
.cc-cmt-sys { padding: var(--sp-3) 0; }
.cc-cmt-sys .cc-rich { font-style: italic; color: var(--muted); }

/* Ereignis-Zeile (Design::feedItem) — Uhrzeit · Avatar · Satz (+ Auszug) · rechts der Ort. */
.cc-feed { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--grey-100); }
.cc-feed-time { flex: 0 0 var(--sz-44); color: var(--muted); font-size: var(--fs-sm); padding-top: var(--sp-1); }
.cc-feed-main { flex: 1 1 auto; min-width: 0; }
.cc-feed-line { color: var(--ink); }
.cc-feed-excerpt { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-1); }
.cc-feed-aside { flex: 0 0 auto; max-width: var(--sz-240); text-align: right; color: var(--muted); font-size: var(--fs-2xs);
                 text-transform: uppercase; letter-spacing: var(--tracking); padding-top: var(--sp-1); }

/* Rubrik einer Seitenspalte (Design::rubric) — versale Beschriftung, Inhalt, Trennlinie. */
.cc-rubric { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border); min-width: 0; }
/* Seitenspalte (Design::aside) — grauer Grund, Trennlinie zur Hauptfläche; schmal oben statt links. */
.cc-aside { background: var(--grey-50); border-left: 1px solid var(--border); }
@media (max-width: 900px) { .cc-aside { border-left: 0; border-top: 1px solid var(--border); } }
/* Kopfband (Design::band) — leicht abgesetzte Fläche, grau → weiss. */
.cc-band { background: linear-gradient(to bottom, var(--grey-50) 0%, var(--surface) 100%); }
/* Modus-Balken (Design::modeBar) — senkrechte Farbleiste mit gedrehter, versaler Beschriftung. */
.cc-modebar { display: flex; align-items: center; justify-content: center; transition: background var(--dur); }
.cc-modebar-brand { background: var(--o); }
.cc-modebar-info { background: var(--info); }
.cc-modebar-text { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--fs-2xs); font-weight: var(--fw-bold);
                   text-transform: uppercase; letter-spacing: var(--tracking); color: var(--surface); white-space: nowrap; }
/* Senkrechter Trenner in Meta-Zeilen (Design::vsep). */
.cc-vsep { display: inline-block; width: 1px; height: var(--sz-14); background: var(--border); flex: none; }
/* Datei-Kachel (Design::fileTile) — Bildvorschau oder Symbol + Endung. */
.cc-ftile { width: var(--sz-100); height: var(--sz-72); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
            background: var(--surface); color: var(--muted); text-decoration: none; transition: box-shadow var(--dur-fast); }
.cc-ftile:hover { box-shadow: var(--shadow-sm); color: var(--ink); }
.cc-ftile img { width: 100%; height: 100%; object-fit: cover; }
.cc-ftile-ext { font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
/* Mulde — Zustandsklasse (z.B. ein Verfasser, der als Antwort unter einen Beitrag gewandert ist). */
.cc-well { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--grey-50); }

/* Nachrichtenzeile (Design::msgRow / msgGroup) — EINE Zeile für Nachrichtenlisten (E-Mail u. a.): Avatar links,
   Absender + Zeit, Betreff, Vorschau, Meta (Flags/Anhang). Ungelesen = fetter Betreff + Marken-Punkt, aktiv =
   hinterlegt mit Markenkante links (die Kante darf das Modul zur Laufzeit mit einer Datenfarbe füllen, z.B. Konto). */
.cc-mrow { position: relative; display: flex; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border);
          border-left: 3px solid transparent; cursor: pointer; background: var(--surface); }
.cc-mrow:hover { background: var(--surface-2); }
.cc-mrow.active { background: var(--surface-2); border-left-color: var(--o); }
.cc-mrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.cc-mrow-top { display: flex; align-items: baseline; gap: var(--sp-2); }
.cc-mrow-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.cc-mrow-aside { flex: 0 0 auto; color: var(--muted); }
.cc-mrow-subj, .cc-mrow-prev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-mrow-subj { color: var(--text); }
.cc-mrow.unread .cc-mrow-subj { font-weight: var(--fw-bold); }
.cc-mrow-prev { color: var(--muted); }
.cc-mrow-meta { display: flex; align-items: center; gap: var(--sp-2); min-height: calc(var(--lh) * 1em); color: var(--muted); }   /* eine Textzeile hoch, auch wenn nur Punkte/Icons drinstehen */
.cc-mrow > .cc-mrow-dot { flex: 0 0 auto; align-self: center; }
.cc-mrow-group { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4);
                background: var(--surface-2); color: var(--muted); position: sticky; top: 0; z-index: var(--z-raised); }

/* ── Viewer / Medien (Design::stack divided, pane, stage, metaLine, thumb, mediaCard, divider, floatbar) ── */
/* Stapel mit Trennlinien: Abschnitte ohne Abstand, feine Linie dazwischen (Innenabstände setzt das Modul). */
.cc-stack.cc-stack-divided { gap: 0; }
.cc-stack-divided > * + * { border-top: 1px solid var(--grey-100); }
/* Fläche einer Arbeitsansicht — weisser Grund + EINE Trennlinie zur Nachbarfläche. */
.cc-pane { background: var(--surface); }
.cc-pane-top { border-top: 1px solid var(--border); }
.cc-pane-bottom { border-bottom: 1px solid var(--border); }
.cc-pane-left { border-left: 1px solid var(--border); }
.cc-pane-right { border-right: 1px solid var(--border); }
/* Bühne eines Viewers — neutraler Grund unter Bild/PDF/Dokument. */
.cc-stage { background: var(--grey-200); }
/* Meta-Zeile: Symbol + Angabe; xs = kleine graue Zeile (Herkunft). */
.cc-metaline { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-base); color: var(--grey-700); }
.cc-metaline > .cc-ico { font-size: var(--fs-lg); color: var(--muted); }
.cc-metaline.cc-metaline-xs { align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.cc-metaline-xs > .cc-ico { font-size: inherit; }
.cc-metaline[hidden] { display: none; }
/* Vorschau-Kachel eines Filmstreifens: Rahmen = Zustand (aktiv Marke, geteilt grün). */
.cc-thumb { width: var(--sz-64); height: var(--sz-64); flex-shrink: 0; border: 2px solid transparent; border-radius: var(--radius); overflow: hidden;
            display: flex; align-items: center; justify-content: center; background: var(--grey-100); cursor: pointer;
            transition: all var(--dur); text-decoration: none; position: relative; }
.cc-thumb:hover { border-color: var(--grey-300); text-decoration: none; }
.cc-thumb.cc-thumb-active { border-color: var(--o); }
.cc-thumb.cc-thumb-ok { border-color: var(--ok); }
.cc-thumb.cc-thumb-ok:hover { border-color: var(--ok-h); }
.cc-thumb.cc-thumb-ok.cc-thumb-active { border-color: var(--ok); }
.cc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cc-thumb-ico { font-size: var(--fs-xl); opacity: var(--op-half); }
/* Ecken-Marke (Design::iconDot ['size'=>'sm']) auf Kachel und Karte. */
.cc-thumb > .cc-icon-dot, .cc-mcard-media > .cc-icon-dot { position: absolute; top: 3px; right: 3px; z-index: var(--z-base); opacity: var(--op-muted); pointer-events: none; }
.cc-thumb:hover > .cc-icon-dot { opacity: var(--op-strong); }
.cc-mcard-media > .cc-icon-dot { top: 5px; right: 5px; width: var(--sz-20); height: var(--sz-20); }
/* Medien-Karte einer Galerie. */
.cc-mcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
            cursor: pointer; transition: border-color var(--dur), box-shadow var(--dur); text-decoration: none; color: inherit; position: relative; }
.cc-mcard:hover { border-color: var(--grey-300); box-shadow: var(--shadow-sm); text-decoration: none; }
.cc-mcard.cc-mcard-active { border-color: var(--o); }
.cc-mcard.cc-mcard-ok { border-color: var(--ok); }
.cc-mcard.cc-mcard-ok:hover { border-color: var(--ok-h); }
.cc-mcard.cc-mcard-ok.cc-mcard-active { border-color: var(--ok); }
.cc-mcard-media { height: var(--sz-200); display: flex; align-items: center; justify-content: center; background: var(--grey-100); overflow: hidden; position: relative; }
.cc-mcard-media img { width: 100%; height: auto; object-fit: cover; object-position: top; min-height: 100%; }
.cc-mcard-ico { font-size: var(--fs-display); opacity: var(--op-dim); }
.cc-mcard-body { padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); min-height: 0; border-top: 1px solid var(--grey-100); }
.cc-mcard-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.cc-mcard-meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xs); color: var(--muted); line-height: 1.3; }
.cc-mcard-kind { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: var(--tracking); }
.cc-mcard-kind > .cc-ico { font-size: var(--fs-xs); }
.cc-mcard-foot { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-4) var(--sp-3); flex-wrap: wrap; min-height: 0; }
.cc-mcard-foot:empty { display: none; }
/* Zwischenüberschrift mit Linie (Zeitgruppen einer Galerie). */
.cc-divider { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-1) var(--sp-1) var(--sp-4); }
.cc-divider-label { font-size: var(--fs-xs); font-weight: var(--fw-heavy); color: var(--o); text-transform: uppercase; letter-spacing: var(--tracking); white-space: nowrap; }
.cc-divider-line { flex: 1; height: 1px; background: color-mix(in srgb, var(--o) 25%, transparent); }
/* Schwebende dunkle Werkzeugleiste (Zeichnen über einem Bild). Lage setzt das Modul. */
.cc-floatbar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); border-radius: var(--radius);
               background: color-mix(in srgb, var(--grey-900) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
               box-shadow: var(--shadow-lg); }
.cc-floatbar-group { display: flex; align-items: center; gap: var(--sp-1); }
.cc-floatbar-sep { width: 1px; height: var(--sz-24); background: color-mix(in srgb, var(--surface) 15%, transparent); margin: 0 var(--sp-1); flex: none; }

/* Trenngriff (Design::splitter) — ziehbare Linie zwischen zwei Spalten; beim Zeigen/Ziehen in Markenfarbe. */
.cc-splitter { flex: 0 0 var(--sz-6); cursor: col-resize; background: var(--border); opacity: var(--op-half); }
.cc-splitter:hover, .cc-splitter.cc-splitting { opacity: 1; background: var(--o); }
/* Fussleiste (Design::footBar) — Aktionen am unteren Rand eines Fensters/Formulars. */
.cc-footbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); background: var(--grey-50); }

/* Desktop-Kachel (Design::widget → cc-widget): Fläche, Radius, Schatten; Titelleiste und Körper der Standard-Kachel.
   Lage/Breite und Wackel-Modus bestimmt das Dashboard (dash-widget), reiche Kacheln bringen ihren Grund selbst mit. */
.cc-widget { background: var(--surface); border: 0; border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; }
.cc-widget-bar { background: var(--grey-50); border-bottom: 1px solid var(--grey-100); padding: var(--sp-3) var(--sp-5); font-size: var(--fs-xs);
                 text-transform: uppercase; letter-spacing: var(--tracking); color: var(--grey-500); font-weight: var(--fw-bold); cursor: move; user-select: none; }
.cc-widget-body { padding: var(--sp-6); }
/* Eingaben in Desktop-Kacheln ohne Fokus-Rahmen — die Kachel IST die Fläche, kein Formular. */
.cc-deskwidgets .cc-widget .form-control:focus, .cc-deskwidgets .cc-widget textarea:focus, .cc-deskwidgets .cc-widget input:focus {
    outline: none !important; box-shadow: none !important; border-color: transparent !important; }
/* Notizzettel (Design::widget ['variant'=>'note']): Zettelfarbe = Datenwert (--cc-note-bg, sonst warmes Gelb), die
   Griffleiste daraus abgedunkelt; das Textfeld füllt den Zettel randlos — kein Rahmen, keine eigene Fläche, kein Fokus-Ring. */
.cc-widget.cc-widget-note { --cc-note-edge: color-mix(in srgb, var(--cc-note-bg, var(--warn-bg)) 78%, var(--ink));
                            display: flex; flex-direction: column; background: var(--cc-note-bg, var(--warn-bg)); }
.cc-widget-notebar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
                     background: var(--cc-note-edge); cursor: move; user-select: none; flex: 0 0 auto; }
.cc-deskwidgets .cc-widget-note textarea.form-control, .cc-deskwidgets .cc-widget-note textarea.form-control:focus, .cc-deskwidgets .cc-widget-note textarea.form-control:hover {
    flex: 1 1 auto; min-height: 0; width: 100%; resize: none; border: 0 !important; border-radius: 0; box-shadow: none !important; outline: none !important;
    background: var(--cc-note-bg, var(--warn-bg)) !important; padding: var(--sp-4) var(--sp-5); font-family: inherit; font-size: var(--fs-md); line-height: 1.5; color: var(--ink); }

/* Abgeschottete HTML-Vorschau (Design::htmlFrame) — Mail-/Vorlagen-Rumpf im iframe, gerahmt auf weissem Grund. */
.cc-htmlframe { display: block; width: 100%; min-height: var(--sz-440); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }

/* Überblend-Feld (Design::overlay) — Scrim mit mittigem Inhalt über einer positionierten Fläche
   (Hinweis/Medium über einem Terminal). Öffnen/Schliessen (cc-hidden) und position:relative der
   Trägerfläche macht das nutzende Modul. */
.cc-ovl { position: absolute; inset: 0; z-index: var(--z-raised); display: flex; align-items: center; justify-content: center;
  background: var(--scrim); backdrop-filter: blur(2px); border-radius: inherit; }
.cc-ovl-inner { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-6); box-sizing: border-box;
  text-align: center; color: var(--grey-100); }
.cc-ovl-close { position: absolute; top: var(--sp-2); right: var(--sp-2); }
.cc-ovl-meta { position: absolute; top: var(--sp-2); left: var(--sp-3); font-size: var(--fs-xs); color: var(--grey-300); }
.cc-ovl-note { font-size: var(--fs-lg); font-weight: var(--fw-med); line-height: var(--lh); max-width: var(--sz-500); }
.cc-ovl-media { width: 100%; height: 100%; }
.cc-ovl-media iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); }

/* ── Chat (Terminals-App, Chat-Typ) — Kern-Aussehen; das Modul ordnet nur an. ── */
.cc-chat { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cc-chat-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cc-chat-head .cc-chat-title { font-weight: var(--fw-med); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.cc-chat-msg { display: flex; flex-direction: column; max-width: 82%; gap: var(--sp-1); }
.cc-chat-user { align-self: flex-end; align-items: flex-end; }
.cc-chat-assistant, .cc-chat-note { align-self: flex-start; align-items: flex-start; }
.cc-chat-note { max-width: 100%; }
.cc-chat-bubble { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); line-height: var(--lh); white-space: pre-wrap; word-break: break-word; font-size: var(--fs-md); }
.cc-chat-user .cc-chat-bubble { background: var(--o); color: var(--on-o); border-bottom-right-radius: var(--sp-1); }
.cc-chat-assistant .cc-chat-bubble { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-bottom-left-radius: var(--sp-1); }
.cc-chat-note .cc-chat-bubble { background: var(--warn-bg); color: var(--warn-fg); font-size: var(--fs-sm); }
.cc-chat-steps { display: flex; flex-direction: column; gap: 2px; margin: var(--sp-1) 0; }
.cc-chat-step { font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: var(--sp-2); }
.cc-chat-step::before { content: ""; width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--o); flex: none; opacity: var(--op-half); }
.cc-chat-files { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.cc-chat-files img { max-width: var(--sz-200); max-height: var(--sz-200); border-radius: var(--radius); border: 1px solid var(--border); cursor: pointer; }
.cc-chat-typing { display: inline-flex; gap: 3px; padding: var(--sp-2) var(--sp-3); }
.cc-chat-typing i { width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--muted); animation: cc-chat-blink var(--dur-slow) infinite both; }
.cc-chat-typing i:nth-child(2) { animation-delay: var(--dur); }
.cc-chat-typing i:nth-child(3) { animation-delay: var(--dur-slow); }
@keyframes cc-chat-blink { 0%, 80%, 100% { opacity: var(--op-faint); } 40% { opacity: 1; } }
.cc-chat-foot { border-top: 1px solid var(--border); padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); background: var(--surface); }
.cc-chat-inrow { display: flex; align-items: flex-end; gap: var(--sp-2); }
.cc-chat-inrow textarea { flex: 1; min-height: var(--sz-40); max-height: var(--sz-160); resize: none; }
.cc-chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); text-align: center; padding: var(--sp-6); }