/*
marke-ui.css — Die Stil-Basis der Oberfläche: shadcn-Aufbau + Marke Agents4Hire.
Kurzbeschreibung (für Laien): Hier steht, wie jeder Baustein der Oberfläche
aussieht — Seitenleiste, Kopfzeile, Knöpfe, Felder, Karten, Tabellen, Chat mit
KI-Bausteinen, Meldungen, Dialog, Ladekreis, Aufnahme. Ruhiger, flacher Aufbau
wie bei shadcn/ui; Farben, Logo, Schrift und Maße kommen aus der Marke.
Festgelegt von Ralph am 17.10.2026 (marke/REGELN.md, Abschnitt „Stil-Basis").
Wirkt NUR, wenn die Seite sich anschließt: .
Ohne die Klasse ändert sich nichts — so lässt sich Werkzeug für Werkzeug
umstellen (zuerst nur für Ralph, dann Freigabe).
Einbinden (nach brand.css, das marke.css mitbringt):
Farben nur aus marke.css (--marke-…). Grau, Weiß, Schwarz sind frei.
Ansicht aller Bausteine: marke/ui-referenz.html
(Artefakt neu erzeugen: node tools/marke-ui-artefakt.js)
*/
/* ── Lokale Ableitungen (keine neuen Farben, nur Mischungen aus der Marke) ── */
:root.marke-ui {
--ui-nav-ton: var(--marke-nav-blau);
--ui-nav-kachel: var(--marke-nav-kachel);
--ui-cust-ton: var(--marke-customized);
--ui-cust-kachel: var(--marke-customized-kachel);
--ui-ok-zart: color-mix(in srgb, var(--marke-ok) 12%, transparent);
--ui-warn-zart: color-mix(in srgb, var(--marke-warn) 13%, transparent);
--ui-gefahr-zart: color-mix(in srgb, var(--marke-gefahr) 11%, transparent);
--ui-fokus: 0 0 0 3px var(--marke-akzent-zart);
--ui-hover: color-mix(in srgb, var(--marke-text) 5%, transparent);
}
:root.marke-ui[data-theme="dark"] {
--ui-nav-ton: color-mix(in srgb, var(--marke-nav-blau) 55%, white);
--ui-nav-kachel: color-mix(in srgb, var(--marke-nav-blau) 26%, transparent);
--ui-cust-ton: var(--marke-tuerkis);
--ui-cust-kachel: color-mix(in srgb, var(--marke-tuerkis) 16%, transparent);
}
/* ═══ Grundlage ══════════════════════════════════════════════════════════════ */
.marke-ui body {
margin: 0;
background: var(--marke-grund);
color: var(--marke-text);
font-family: var(--marke-schrift);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.marke-ui *, .marke-ui *::before, .marke-ui *::after { box-sizing: border-box; }
.marke-ui [hidden] { display: none !important; }
.marke-ui input[type=checkbox], .marke-ui input[type=radio], .marke-ui input[type=range] { accent-color: var(--marke-nav-blau); } /* Auswahl = Blau */ /* Bausteine mit eigenem display dürfen hidden nicht aushebeln */
.marke-ui ::selection { background: var(--marke-akzent-zart); }
.marke-ui :focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; }
/* Textfelder zeigen den Fokus über ihren Rahmen bzw. den Rahmen ihres Kastens
(Chat-Eingabe, Suchfeld) – kein zweiter Ring innen (Ralph 17.10.2026) */
.marke-ui input:focus-visible, .marke-ui textarea:focus-visible, .marke-ui [contenteditable]:focus-visible { outline: 0; }
.marke-ui * { scrollbar-width: thin; scrollbar-color: var(--marke-linie-stark) transparent; }
.marke-ui .a4h-svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Schrift-Leiter 11 / 12 / 13 / 14 / 15 / 20 */
.marke-ui .a4h-h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.marke-ui .a4h-h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.marke-ui .a4h-h3 { margin: 0; font-size: 14px; font-weight: 600; }
.marke-ui .a4h-sub { margin: 0; font-size: 13px; color: var(--marke-text-2); }
.marke-ui .a4h-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--marke-text-3); }
.marke-ui .a4h-kbd { font: 500 11px var(--marke-schrift-code); padding: 1px 5px; border: 1px solid var(--marke-linie); border-radius: 4px; background: var(--marke-flaeche-2); color: var(--marke-text-2); }
.marke-ui .a4h-zahl { font-variant-numeric: tabular-nums; }
/* ═══ Rahmen: Seitenleiste | Arbeitsfläche ══════════════════════════════════ */
.marke-ui .a4h-shell { display: grid; grid-template-columns: var(--marke-seitenleiste) minmax(0, 1fr); min-height: 100%; }
.marke-ui .a4h-side { display: flex; flex-direction: column; gap: var(--marke-sp-3); padding: var(--marke-sp-3) var(--marke-sp-2); background: var(--marke-grund); border-right: 1px solid var(--marke-linie); min-width: 0; }
.marke-ui .a4h-side-logo { padding: 6px 10px 2px; }
.marke-ui .a4h-side-logo img { display: block; height: 24px; width: auto; max-width: 100%; }
.marke-ui .a4h-side-fuss { margin-top: auto; }
.marke-ui .a4h-main { display: flex; flex-direction: column; min-width: 0; background: var(--marke-flaeche); }
/* Logo: auf Hell die dunkle Datei, auf Dunkel die weiße — nie umfärben */
.marke-ui img.logo-dunkel { display: none; }
.marke-ui[data-theme="dark"] img.logo-hell { display: none; }
.marke-ui[data-theme="dark"] img.logo-dunkel { display: block; }
/* ═══ Seitenleiste (Referenz, Ralph 09.10.2026) ═════════════════════════════
Symbol in eigener Kachel; aktiv: Kachel gefüllt, Symbol weiß, Eintrag weiß
mit dunklem Umriss. Blau = Plattform, Petrol = Customized. Kein Anheben. */
.marke-ui .a4h-nav { display: flex; flex-direction: column; gap: 2px; }
.marke-ui .a4h-nav-titel { padding: 10px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--marke-text-3); }
.marke-ui .a4h-nav-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 5px 8px 5px 5px; border: 2px solid transparent; border-radius: var(--marke-r-l);
background: transparent; color: var(--marke-text); font: 600 14px var(--marke-schrift);
text-align: left; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s;
}
.marke-ui .a4h-nav-item svg {
flex: none; box-sizing: border-box; width: 32px; height: 32px; padding: 7px; border-radius: 8px;
background: var(--ui-nav-kachel); color: var(--ui-nav-ton);
stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
transition: background .15s, color .15s;
}
.marke-ui .a4h-nav-item:hover { background: color-mix(in srgb, var(--ui-nav-ton) 7%, transparent); }
.marke-ui .a4h-nav-item.is-active, .marke-ui .a4h-nav-item.active { background: var(--marke-flaeche); border-color: var(--marke-text); }
.marke-ui .a4h-nav-item.is-active svg, .marke-ui .a4h-nav-item.active svg { background: var(--ui-nav-ton); color: white; }
.marke-ui .a4h-nav.is-customized .a4h-nav-item svg { background: var(--ui-cust-kachel); color: var(--ui-cust-ton); }
.marke-ui .a4h-nav.is-customized .a4h-nav-item:hover { background: color-mix(in srgb, var(--ui-cust-ton) 7%, transparent); }
.marke-ui .a4h-nav.is-customized .a4h-nav-item.is-active svg { background: var(--ui-cust-ton); color: white; }
.marke-ui .a4h-nav-count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--marke-text-3); font-variant-numeric: tabular-nums; }
.marke-ui .a4h-nav-item.is-add { margin-top: var(--marke-sp-2); border: 2px dashed color-mix(in srgb, var(--ui-nav-ton) 34%, transparent); color: var(--marke-text-2); }
.marke-ui .a4h-nav-item.is-add svg { background: transparent; }
/* Konto unten in der Leiste */
.marke-ui .a4h-konto { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--marke-r-m); }
.marke-ui .a4h-konto:hover { background: var(--ui-hover); }
.marke-ui .a4h-avatar { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; flex: none; background: var(--marke-akzent-zart); color: var(--marke-akzent); font-size: 12px; font-weight: 700; }
/* ═══ Kopfzeile eines Werkzeugs (Ralph 10.10.2026) ══════════════════════════
Eine Zeile, 46 px, Reiter links; rechts: Pillen → Suche → Symbole →
Nebenknopf → Hauptknopf. Kein Werkzeugname, kein farbiges Band. */
.marke-ui .a4h-topbar { display: flex; align-items: center; gap: var(--marke-sp-2); height: 46px; padding: 0 var(--marke-sp-4); border-bottom: 1px solid var(--marke-linie); background: var(--marke-flaeche); min-width: 0; }
.marke-ui .a4h-tabs-grow { flex: 1 1 auto; }
/* brand.css richtet die Kopfzeile auf die Unterkante der Reiter aus (8 px Abstand,
flex-end). In der Stil-Basis sitzt alles auf einer Mittellinie. */
.marke-ui .a4h-topbar > *:not(.a4h-tabs):not(.tabs):not(.a4h-tabs-grow) { margin-bottom: 0; }
.marke-ui .a4h-topbar > *:not(.a4h-tabs):not(.tabs) { align-items: center; }
/* Reiter = Segment-Knöpfe (umgesetzt 17.10.2026) */
.marke-ui .a4h-tabs { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.marke-ui .a4h-tabs::-webkit-scrollbar { display: none; }
/* Reiter UND Filter: EINE Form überall (Ralph 17.10.2026, Vorbild „Alle · Privat ·
Geteilt" im Wissen): Pille 28 px, dünner Rand, aktiv im Blau der Seitenleiste
(Ralph 17.10.2026: „alle Auswahl in diesem Blau“; Weiß darauf 6,6:1). Bewusst mit
!important – Seiten mit eigener Reiter-Optik (Unterstrich, Segment) dürfen die
eine Form nicht wieder aufweichen. */
.marke-ui .a4h-tab,
.marke-ui .a4h-chip {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 28px !important; min-height: 0 !important; padding: 0 12px !important; margin: 0 !important;
border: 1px solid var(--marke-linie-stark) !important; border-radius: var(--marke-r-pill) !important;
background: var(--marke-flaeche) !important; box-shadow: none !important;
color: var(--marke-text-2) !important; font: 600 12px/1 var(--marke-schrift) !important;
white-space: nowrap; cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.marke-ui .a4h-tab::after, .marke-ui .a4h-tab::before { display: none !important; }
.marke-ui .a4h-tab:hover, .marke-ui .a4h-chip:hover { color: var(--marke-text) !important; border-color: var(--marke-text-3) !important; }
.marke-ui .a4h-tab.is-active, .marke-ui .a4h-tab.is-on, .marke-ui .a4h-tab.active,
.marke-ui .a4h-chip.is-on, .marke-ui .a4h-chip.active {
background: var(--marke-nav-blau) !important; border-color: var(--marke-nav-blau) !important; color: white !important;
}
.marke-ui .a4h-tab.is-active .a4h-tab-count, .marke-ui .a4h-tab.active .a4h-tab-count { background: rgba(255, 255, 255, .22); color: white; }
.marke-ui .a4h-tab-count { font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 999px; background: var(--marke-flaeche-2); color: var(--marke-text-2); font-variant-numeric: tabular-nums; }
/* Suchfeld: schmal, Text „Suchen" (wie im CRM) */
.marke-ui .a4h-search { display: inline-flex; align-items: center; gap: 6px; height: 30px; max-width: 100%; padding: 0 10px; border: 1px solid var(--marke-linie); border-radius: var(--marke-r-m); background: var(--marke-feld); color: var(--marke-text-3); }
.marke-ui .a4h-search:focus-within { border-color: var(--marke-akzent); box-shadow: var(--ui-fokus); }
/* Lupe als Linien-Symbol statt 🔍 aus dem Kanon-Markup */
.marke-ui .a4h-search-icon { font-size: 0; width: 14px; height: 14px; opacity: 1; background-color: var(--marke-text-3);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.marke-ui .a4h-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--marke-text); font: 400 13px var(--marke-schrift); }
.marke-ui .a4h-search input::placeholder { color: var(--marke-text-3); }
/* ═══ Knöpfe (fünf Arten, Ralph 10.10.2026) ═════════════════════════════════ */
.marke-ui .a4h-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--marke-r-m);
font: 600 13px/1 var(--marke-schrift); white-space: nowrap; text-decoration: none; cursor: pointer;
transition: background .15s, border-color .15s, color .15s, filter .15s;
}
.marke-ui .a4h-btn:disabled, .marke-ui .a4h-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.marke-ui .a4h-btn--primary { background: var(--marke-akzent); color: var(--marke-auf-akzent); }
.marke-ui .a4h-btn--primary:hover { filter: brightness(1.08); }
.marke-ui .a4h-btn--sec { background: var(--marke-flaeche); color: var(--marke-text); border-color: var(--marke-linie-stark); }
.marke-ui .a4h-btn--sec:hover { background: var(--marke-flaeche-2); }
.marke-ui .a4h-btn--ghost { background: transparent; color: var(--marke-text-2); }
.marke-ui .a4h-btn--ghost:hover { color: var(--marke-text); background: var(--ui-hover); }
.marke-ui .a4h-btn--danger { background: var(--marke-gefahr); color: white; }
.marke-ui .a4h-btn--danger:hover { filter: brightness(1.08); }
.marke-ui .a4h-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.marke-ui .a4h-btn--lg { height: 44px; padding: 0 20px; font-size: 15px; } /* nur Website und Anmeldung */
.marke-ui .a4h-btnrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--marke-sp-2); }
/* Symbolknopf: 30 × 30, Linien-Symbol 16 px, grau; gefüllt nur als Hauptaktion */
.marke-ui .a4h-icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--marke-r-m); background: transparent; color: var(--marke-text-2); cursor: pointer; transition: background .15s, color .15s; }
.marke-ui .a4h-icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.marke-ui .a4h-icon-btn:hover { background: var(--ui-hover); color: var(--marke-text); }
.marke-ui .a4h-icon-btn.is-active { background: var(--ui-nav-kachel); color: var(--ui-nav-ton); }
.marke-ui .a4h-icon-btn.is-primary { background: var(--marke-akzent); color: var(--marke-auf-akzent); }
.marke-ui .a4h-icon-btn.is-danger:hover { background: var(--ui-gefahr-zart); color: var(--marke-gefahr); }
.marke-ui .a4h-iconbar { display: inline-flex; align-items: center; gap: 2px; padding: 0; background: transparent; border: 0; } /* ohne graue Gruppenfläche aus brand.css */
/* ═══ Felder ════════════════════════════════════════════════════════════════ */
.marke-ui .a4h-feldgruppe { display: grid; gap: 6px; }
.marke-ui .a4h-field-label { font-size: 13px; font-weight: 500; color: var(--marke-text); }
.marke-ui .a4h-field {
width: 100%; height: 34px; padding: 0 12px; border: 1px solid var(--marke-linie); border-radius: var(--marke-r-m);
background: var(--marke-feld); color: var(--marke-text); font: 400 14px var(--marke-schrift);
transition: border-color .15s, box-shadow .15s;
}
.marke-ui textarea.a4h-field { height: auto; min-height: 76px; padding: 8px 12px; resize: vertical; line-height: 1.5; }
.marke-ui .a4h-field::placeholder { color: var(--marke-text-3); }
.marke-ui .a4h-field:focus { outline: 0; border-color: var(--marke-akzent); box-shadow: var(--ui-fokus); }
.marke-ui .a4h-field.is-invalid { border-color: var(--marke-gefahr); }
.marke-ui .a4h-hint { font-size: 12px; color: var(--marke-text-3); }
.marke-ui .a4h-hint.is-danger { color: var(--marke-gefahr); }
.marke-ui .a4h-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.marke-ui .a4h-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--marke-nav-blau); }
.marke-ui .a4h-switch { position: relative; width: 36px; height: 20px; flex: none; padding: 0; border: 0; border-radius: 999px; background: var(--marke-linie-stark); cursor: pointer; transition: background .15s; }
.marke-ui .a4h-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: white; box-shadow: var(--marke-schatten-leise); transition: left .15s; }
.marke-ui .a4h-switch[aria-checked="true"] { background: var(--marke-nav-blau); }
.marke-ui .a4h-switch[aria-checked="true"]::after { left: 18px; }
/* ═══ Karten — flach (Ralph 17.10.2026) ═════════════════════════════════════
Weiße Fläche, dünner Rand, leiser Schatten. Kein Anheben, keine Farbkante.
Klickbar: Rand wird beim Überfahren kräftiger. */
.marke-ui .a4h-card { display: grid; gap: var(--marke-sp-3); align-content: start; padding: var(--marke-sp-4); background: var(--marke-flaeche); border: 1px solid var(--marke-linie); border-radius: var(--marke-r-l); box-shadow: var(--marke-schatten-leise); min-width: 0; }
.marke-ui .a4h-card.is-clickable { cursor: pointer; transition: border-color .15s; }
.marke-ui .a4h-card.is-clickable:hover { border-color: var(--marke-linie-stark); }
.marke-ui .a4h-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--marke-sp-2); }
.marke-ui .a4h-stat { display: grid; gap: 2px; }
.marke-ui .a4h-stat-wert { font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.marke-ui .a4h-stat-text { font-size: 12px; color: var(--marke-text-2); }
/* ═══ Pillen (Status) und Filter-Chips ═════════════════════════════════════ */
.marke-ui .a4h-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border: 1px solid var(--marke-linie); border-radius: var(--marke-r-pill); background: transparent; color: var(--marke-text-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.marke-ui .a4h-pill svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.marke-ui .a4h-pill.is-ok { border-color: transparent; background: var(--ui-ok-zart); color: var(--marke-ok); }
.marke-ui .a4h-pill.is-warn { border-color: transparent; background: var(--ui-warn-zart); color: var(--marke-warn); }
.marke-ui .a4h-pill.is-danger { border-color: transparent; background: var(--ui-gefahr-zart); color: var(--marke-gefahr); }
.marke-ui .a4h-pill.is-info { border-color: transparent; background: var(--ui-nav-kachel); color: var(--ui-nav-ton); } /* Lila sparsam: Info-Stand blau */
.marke-ui .a4h-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* ═══ Tabelle ═══════════════════════════════════════════════════════════════ */
.marke-ui .a4h-tabelle-box { border: 1px solid var(--marke-linie); border-radius: var(--marke-r-m); overflow-x: auto; background: var(--marke-flaeche); }
.marke-ui .a4h-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.marke-ui .a4h-table th { text-transform: none; letter-spacing: 0; padding: 8px 12px; text-align: left; font-size: 12px; font-weight: 500; color: var(--marke-text-2); border-bottom: 1px solid var(--marke-linie); background: var(--marke-flaeche-2); white-space: nowrap; }
.marke-ui .a4h-table td { padding: 9px 12px; border-bottom: 1px solid var(--marke-linie); }
.marke-ui .a4h-table tr:last-child td { border-bottom: 0; }
.marke-ui .a4h-table tbody tr:hover td { background: var(--ui-hover); }
.marke-ui .a4h-table .is-zahl { text-align: right; }
.marke-ui .a4h-table th.is-num, .marke-ui .a4h-table td.is-num { text-align: right; }
/* ═══ Chat mit KI-Bausteinen ════════════════════════════════════════════════
Eigene Nachricht als graue Blase rechts; Antwort ohne Blase, darüber die
Denkschritte (aufklappbar) und Werkzeug-Aufrufe, darunter Quellen,
Prüfsiegel und leise Aktionen. */
.marke-ui .a4h-verlauf { display: flex; flex-direction: column; gap: 20px; padding: var(--marke-sp-5) var(--marke-sp-4); overflow-y: auto; }
.marke-ui .a4h-blase { max-width: 80%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.marke-ui .a4h-blase.is-eigen { align-self: flex-end; background: var(--marke-flaeche-2); color: var(--marke-text); }
/* KI-Antwort in eigener Blase: weiß, dünner Rand, Ecke oben links (Ralph 17.10.2026) */
.marke-ui .a4h-blase.is-fremd,
.marke-ui .a4h-antwort { align-self: flex-start; max-width: 680px; padding: 12px 16px; border: 1px solid var(--marke-linie); border-radius: 14px; border-top-left-radius: var(--marke-r-s); background: var(--marke-flaeche); box-shadow: var(--marke-schatten-leise); }
.marke-ui .a4h-antwort { display: grid; gap: var(--marke-sp-3); min-width: 0; }
.marke-ui .a4h-ki-denken { border: 1px solid var(--marke-linie); border-radius: var(--marke-r-m); font-size: 13px; }
.marke-ui .a4h-ki-denken > summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--marke-text-2); list-style: none; cursor: pointer; }
.marke-ui .a4h-ki-denken > summary::-webkit-details-marker { display: none; }
.marke-ui .a4h-ki-denken > summary:hover { color: var(--marke-text); }
.marke-ui .a4h-ki-denken > div { padding: 10px 12px; border-top: 1px solid var(--marke-linie); color: var(--marke-text-2); }
.marke-ui .a4h-ki-werkzeug { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--marke-linie); border-radius: var(--marke-r-m); font: 400 13px var(--marke-schrift-code); color: var(--marke-text); min-width: 0; }
.marke-ui .a4h-ki-werkzeug .a4h-pill { margin-left: auto; font-family: var(--marke-schrift); }
.marke-ui .a4h-ki-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.marke-ui .a4h-quelle { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--marke-r-s); background: var(--marke-flaeche-2); color: var(--marke-text-2); font-size: 12px; text-decoration: none; }
.marke-ui .a4h-quelle b { color: var(--marke-akzent); font-weight: 700; }
.marke-ui a.a4h-quelle:hover { color: var(--marke-text); }
/* Eingabe unten im Chat */
.marke-ui .a4h-eingabe { display: grid; gap: var(--marke-sp-2); margin: 0 var(--marke-sp-4) var(--marke-sp-4); padding: 10px; border: 1px solid var(--marke-linie-stark); border-radius: var(--marke-r-l); background: var(--marke-flaeche); transition: border-color .15s, box-shadow .15s; }
.marke-ui .a4h-eingabe:focus-within { border-color: var(--marke-akzent); box-shadow: var(--ui-fokus); }
.marke-ui .a4h-eingabe textarea { min-height: 44px; border: 0; outline: 0; resize: none; background: transparent; color: var(--marke-text); font: 400 14px var(--marke-schrift); }
.marke-ui .a4h-eingabe textarea::placeholder { color: var(--marke-text-3); }
.marke-ui .a4h-eingabe-leiste { display: flex; align-items: center; justify-content: space-between; gap: var(--marke-sp-2); }
/* ═══ Rückmeldungen ═════════════════════════════════════════════════════════ */
.marke-ui .a4h-msg { padding: 10px 12px; border: 1px solid var(--marke-linie); border-radius: var(--marke-r-m); background: var(--marke-flaeche-2); color: var(--marke-text); font-size: 13px; line-height: 1.45; }
.marke-ui .a4h-msg.is-ok { border-color: color-mix(in srgb, var(--marke-ok) 40%, transparent); background: var(--ui-ok-zart); }
.marke-ui .a4h-msg.is-warn { border-color: color-mix(in srgb, var(--marke-warn) 42%, transparent); background: var(--ui-warn-zart); }
.marke-ui .a4h-msg.is-danger { border-color: color-mix(in srgb, var(--marke-gefahr) 40%, transparent); background: var(--ui-gefahr-zart); }
/* Kurze Meldung: hell, unten rechts, grüner Rand links, kein Emoji */
.marke-ui .a4h-toast { position: fixed; right: var(--marke-sp-4); bottom: var(--marke-sp-4); z-index: 110; max-width: 380px; padding: 12px 14px; border: 1px solid var(--marke-linie); border-left: 3px solid var(--marke-ok); border-radius: var(--marke-r-m); background: var(--marke-flaeche); box-shadow: var(--marke-schatten); font-size: 13px; }
/* Kein eigenes display: Seiten blenden ihre Meldung selbst ein und aus.
Das Symbol steht links daneben. */
.marke-ui .a4h-toast > svg { float: left; margin: 1px 10px 0 0; }
.marke-ui .a4h-toast.is-statisch { position: static; }
.marke-ui .a4h-toast.is-danger { border-left-color: var(--marke-gefahr); }
.marke-ui .a4h-toast.is-warn { border-left-color: var(--marke-warn); }
/* Meldung mit beiden Klassen (a4h-msg + a4h-toast): hell, nur der Rand links trägt die Farbe */
.marke-ui .a4h-toast.a4h-msg { background: var(--marke-flaeche); border-color: var(--marke-linie); border-left: 3px solid var(--marke-ok); }
.marke-ui .a4h-toast.a4h-msg.is-ok { border-left-color: var(--marke-ok); }
.marke-ui .a4h-toast.a4h-msg.is-warn { border-left-color: var(--marke-warn); }
.marke-ui .a4h-toast.a4h-msg.is-danger { border-left-color: var(--marke-gefahr); }
.marke-ui .a4h-toast b { display: block; font-weight: 600; }
.marke-ui .a4h-toast span { color: var(--marke-text-2); }
/* Der eine Ladekreis: lila Ring. Nur für Elemente ohne eigene Zeichnung —
ein