/*
  marke-ui-workspace.css — Brücke: der heutige Workspace in der Stil-Basis.

  Kurzbeschreibung (für Laien): Der Workspace hat sein eigenes, großes
  Style-Sheet (workspace.css). Diese Datei legt darüber die Stil-Basis
  (marke-ui.css, Ralph 17.10.2026): weiße, ruhige Arbeitsfläche statt
  Farbschleier, Seitenleiste und Kopfzeile flach, KI-Antwort ohne Blase,
  eigene Nachricht als graue Blase rechts, Eingabefeld weiß mit Rand.

  Wirkt NUR mit <html class="marke-ui"> — die setzt workspace-haupt.js für
  Konten im Beta-Ring (zuerst nur Ralph). Mit ?stil=alt in der Adresse sieht
  man zum Vergleich den alten Stand. Muss NACH workspace.css stehen.

  Stufe 1: Rahmen + Chat. Stufe 2 (unten): alle Bereiche, die der Workspace
  selbst zeichnet (Outputs, Einstellungen, Werkzeug-Anfragen, Unterhaltungen,
  Menüs, Dialoge, Meldungen). Die Werkzeuge in den Fenstern (CRM, Notizen,
  Planer, Wissen …) sind eigene Seiten und folgen einzeln.
*/

/* ── Rahmen: Farbschleier weg, Fläche ruhig ─────────────────────────────── */
:root.marke-ui .bg-radial { display: none; }
:root.marke-ui body { background: var(--marke-grund); font-family: var(--marke-schrift); }

/* Kopfzeile: weiß, Trennlinie, kein Weichzeichner */
:root.marke-ui .topbar {
  background: var(--marke-flaeche);
  backdrop-filter: none;
  border-bottom: 1px solid var(--marke-linie);
  padding-top: 10px; padding-bottom: 10px;
}
/* Logo auf Hell: die dunkle Logo-Datei statt Umfärben per Filter (Regel 6) */
:root.marke-ui:not([data-theme="dark"]) .topbar-logo img {
  filter: none;
  content: url('/assets/logo/FullLogo_Dark.png');
  height: 30px;
}
:root.marke-ui[data-theme="dark"] .topbar-logo img { filter: none; height: 30px; }

/* Seitenleiste: Grundfläche, eine Linie, kein Verlauf */
:root.marke-ui .sidebar {
  background: var(--marke-grund);
  backdrop-filter: none;
  border-right: 1px solid var(--marke-linie);
}
/* Einklapp-Griffe links und rechts: GLEICHE Form (Ralph 17.10.2026) — halbe
   Lasche am Rand ihrer Spalte, weiß, dünner Rand, Pfeil grau */
:root.marke-ui .sidebar-toggle,
:root.marke-ui .conv-toggle {
  width: 18px; height: 36px; padding: 0;
  background: var(--marke-flaeche);
  border: 1px solid var(--marke-linie);
  box-shadow: var(--marke-schatten-leise);
  color: var(--marke-text-2);
  place-items: center; justify-content: center; align-items: center;
}
:root.marke-ui .sidebar-toggle { border-left: 0; border-radius: 0 var(--marke-r-m) var(--marke-r-m) 0; }
:root.marke-ui .conv-toggle { border-right: 0; border-radius: var(--marke-r-m) 0 0 var(--marke-r-m); }
:root.marke-ui .sidebar-toggle:hover,
:root.marke-ui .conv-toggle:hover { background: var(--marke-flaeche-2); color: var(--marke-text); border-color: var(--marke-linie-stark); }
:root.marke-ui .sidebar-toggle svg,
:root.marke-ui .conv-toggle svg { width: 12px; height: 12px; }

/* Linke Seitenleiste ohne sichtbaren Rollbalken (Ralph 17.10.2026) — sie rollt
   weiter mit Mausrad/Finger, nur der Balken ist weg */
:root.marke-ui .sidebar { scrollbar-width: none; }
:root.marke-ui .sidebar::-webkit-scrollbar { display: none; }

/* Einträge: Farbton je Sparte kommt weiter aus dem Workspace (--a4h-nav-ton:
   Blau = Plattform, Petrol = Customized) — die Stil-Basis gibt nur die Form. */
:root.marke-ui .sidebar .a4h-nav-item svg { background: var(--a4h-nav-kachel); color: var(--a4h-nav-ton); }
:root.marke-ui .sidebar .a4h-nav-item.active svg,
:root.marke-ui .sidebar .a4h-nav-item.is-active svg { background: var(--a4h-nav-ton); color: white; }
:root.marke-ui .sidebar .a4h-nav-item:hover { background: color-mix(in srgb, var(--a4h-nav-ton) 7%, transparent); }

/* Knöpfe der Kopfzeile mit Beschriftung (Tutorial) bleiben nebeneinander */
:root.marke-ui .topbar .a4h-icon-btn.menu-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 10px; font-size: 13px; font-weight: 600; }

/* Griff der Unterhaltungsspalte: nur im Chat sichtbar (.visible) — der
   Symbolknopf der Stil-Basis darf das Ausblenden nicht überstimmen */
:root.marke-ui .conv-toggle:not(.visible) { display: none; }

/* Arbeitsfläche: weiß */
:root.marke-ui .app-main { background: var(--marke-flaeche); }
:root.marke-ui .sidebar-secondary { background: var(--marke-flaeche) !important; backdrop-filter: none; border-right-color: var(--marke-linie) !important; }

/* ── Chat ───────────────────────────────────────────────────────────────── */
/* KI-Antwort: eigene Blase (Ralph 17.10.2026: „Im Chat fehlt Bubble") — weiß
   mit dünnem Rand, Ecke oben links am Logo; die eigene Nachricht bleibt grau rechts */
:root.marke-ui .msg.agent .a4h-blase,
:root.marke-ui .msg.from-operator .a4h-blase {
  background: var(--marke-flaeche);
  border: 1px solid var(--marke-linie);
  backdrop-filter: none;
  padding: 10px 14px;
  border-radius: 14px;
  border-top-left-radius: var(--marke-r-s);
  box-shadow: var(--marke-schatten-leise);
  font-size: 14px;
  line-height: 1.6;
  color: var(--marke-text);
}
:root.marke-ui .msg.agent .msg-bubble { max-width: min(760px, calc(100% - 44px)); }
:root.marke-ui .msg.agent .msg-avatar { filter: none; }

/* Eigene Nachricht: graue Blase rechts, keine abgeknickte Ecke */
:root.marke-ui .msg.user .a4h-blase {
  background: var(--marke-flaeche-2);
  color: var(--marke-text);
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
}

/* Tabellen in Antworten: dünner Rahmen, Kopf grau hinterlegt */
:root.marke-ui .msg-bubble .md-table { border: 1px solid var(--marke-linie); border-radius: var(--marke-r-m); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 13px; }
:root.marke-ui .msg-bubble .md-table th { background: var(--marke-flaeche-2); color: var(--marke-text-2); font-weight: 500; font-size: 12px; border-bottom: 1px solid var(--marke-linie); }
:root.marke-ui .msg-bubble .md-table td { border-bottom: 1px solid var(--marke-linie); }
:root.marke-ui .msg-bubble .md-table tr:last-child td { border-bottom: 0; }

/* Eingabefeld: weiß, Rand, leiser Schatten, Fokus-Ring lila */
:root.marke-ui .composer-box {
  background: var(--marke-flaeche) !important;
  backdrop-filter: none;
  border: 1px solid var(--marke-linie-stark);
  border-radius: var(--marke-r-l);
  box-shadow: var(--marke-schatten-leise);
}
:root.marke-ui .composer-box:focus-within {
  border-color: var(--marke-akzent);
  box-shadow: 0 0 0 3px var(--marke-akzent-zart);
}
:root.marke-ui .composer-input::placeholder { color: var(--marke-text-3); }

/* Menüs der Kopfzeile (Tutorial, Konto) in der einen Menüform */
:root.marke-ui .tut-menu-dropdown,
:root.marke-ui .user-menu-dropdown {
  background: var(--marke-flaeche) !important;
  border: 1px solid var(--marke-linie) !important;
  border-radius: var(--marke-r-m) !important;
  box-shadow: var(--marke-schatten) !important;
  padding: 4px !important;
}
:root.marke-ui .tut-menu-item,
:root.marke-ui .user-menu-item { border-radius: var(--marke-r-s) !important; font-size: 13px !important; }
:root.marke-ui .tut-menu-item:hover,
:root.marke-ui .user-menu-item:hover { background: color-mix(in srgb, var(--marke-text) 5%, transparent) !important; }

/* ═══ Stufe 2: Bereiche im Workspace (17.10.2026) ═══════════════════════════
   Alles, was workspace.html selbst zeichnet: Outputs, Einstellungen-Rahmen,
   Werkzeug-Anfragen, Unterhaltungsspalte, Menüs, Dialoge, Meldungen.
   Die eingebetteten Werkzeuge (Wissen, CRM, Team-Seite …) sind eigene Seiten. */

/* ── Farb-Brücke: die alten Namen des Workspace lesen die Marke ────────── */
:root.marke-ui {
  --bg: var(--marke-grund);
  --bg2: var(--marke-flaeche-2);
  --surface: var(--marke-flaeche);
  --surface-solid: var(--marke-flaeche);
  --panel: var(--marke-flaeche);
  --border: var(--marke-linie);
  --border-strong: var(--marke-linie-stark);
  --accent: var(--marke-akzent);
  --accent2: var(--marke-zweit);
  --text: var(--marke-text);
  --text2: var(--marke-text-2);
  --text3: var(--marke-text-3);
  --a4h-overlay: var(--marke-abdunklung);   /* Dialog: Hintergrund bleibt sichtbar */
}

/* ── Fläche eines Bereichs (Sekundär-Seitenleiste) ─────────────────────── */
/* Die Pauschalregel „jede Karte/jeder Eintrag grau" der alten Hell-Fassung
   weicht der flachen weißen Karte mit dünnem Rand. Nur das Ganze, nicht
   seine Teile (…-card-name, …-item-head bleiben durchsichtig). */
:root.marke-ui .sidebar-secondary [class*="-item"]:not([class*="menu-item"]):not([class*="auto-item"]):not([class*="item-"]),
:root.marke-ui .sidebar-secondary [class*="-card"]:not([class*="card-"]) {
  background: var(--marke-flaeche) !important;
  border-color: var(--marke-linie) !important;
  color: var(--marke-text) !important;
}
:root.marke-ui .sidebar-secondary [class*="-item"]:not([class*="menu-item"]):not([class*="auto-item"]):not([class*="item-"]):hover {
  background: var(--marke-flaeche) !important;
  border-color: var(--marke-linie-stark) !important;
}
:root.marke-ui .sidebar-secondary-head { border-bottom-color: var(--marke-linie) !important; }
:root.marke-ui .sidebar-secondary-resizer:hover,
:root.marke-ui .sidebar-secondary.resizing .sidebar-secondary-resizer { background: var(--marke-akzent-zart); }

/* Gemeinsame Bausteine (Werte wie in marke-ui.css) */

:root.marke-ui .outputs-search-wrap::before {
  content: ''; width: 14px; height: 14px; opacity: 1; font-size: 0;
  background: 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='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%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='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Outputs ───────────────────────────────────────────────────────────── */
:root.marke-ui .outputs-head { background: var(--marke-flaeche); border-bottom-color: var(--marke-linie); }
/* Filter-Chips: Form und dunkle Füllung kommen aus der Stil-Basis (.a4h-chip) */
:root.marke-ui .outputs-filter-btn.is-empty { opacity: .4; }
/* Suchfeld schmal, 30 px, zarter Feldgrund, Lupe als Linien-Symbol */
:root.marke-ui .outputs-search {
  height: 30px; padding: 0 28px 0 30px;
  background: var(--marke-feld); border: 1px solid var(--marke-linie); border-radius: var(--marke-r-m);
  color: var(--marke-text); font: 400 13px var(--marke-schrift);
  transition: border-color .15s, box-shadow .15s;
}
:root.marke-ui .outputs-search:focus { border-color: var(--marke-akzent); box-shadow: 0 0 0 3px var(--marke-akzent-zart); }
:root.marke-ui .outputs-search-wrap::before { left: 10px; }
/* Sammel-Leiste: ruhige Meldungszeile statt Lila-Schleier */
:root.marke-ui .outputs-bulkbar {
  border: 1px solid var(--marke-linie); background: var(--marke-flaeche-2);
  border-radius: var(--marke-r-m); color: var(--marke-text-2); font-size: 13px;
}
:root.marke-ui .outputs-bulkbar button {
  height: 28px; padding: 0 10px; border-radius: var(--marke-r-m);
  border: 1px solid transparent; background: var(--marke-gefahr); color: white;
  font: 600 12px var(--marke-schrift);
}
:root.marke-ui .outputs-bulkbar button:hover { background: var(--marke-gefahr); filter: brightness(1.08); }
:root.marke-ui .outputs-bulkbar button.of-ghost { background: transparent; border-color: transparent; color: var(--marke-text-2); }
:root.marke-ui .outputs-bulkbar button.of-ghost:hover { background: var(--ui-hover); color: var(--marke-text); filter: none; }
/* Abschnittskopf als Etikett */
:root.marke-ui .outputs-group-head {
  background: var(--marke-flaeche); border-bottom-color: var(--marke-linie);
  font-size: 11px; letter-spacing: .1em; color: var(--marke-text-3);
}
:root.marke-ui .outputs-group-head::before { background: var(--marke-flaeche); }
/* Karte flach: keine Farbkante, kein Anheben; klickbar = Rand kräftiger */
:root.marke-ui .output-card {
  background: var(--marke-flaeche) !important;
  border: 1px solid var(--marke-linie) !important;
  border-radius: var(--marke-r-l);
  box-shadow: var(--marke-schatten-leise);
  transition: border-color .15s;
}
:root.marke-ui .output-card::before { display: none; }
:root.marke-ui .output-card:hover,
:root.marke-ui .output-card:focus-within { transform: none; box-shadow: var(--marke-schatten-leise); border-color: var(--marke-linie-stark) !important; }
:root.marke-ui .output-card.is-selected { border-color: var(--ui-nav-ton) !important; box-shadow: 0 0 0 3px var(--ui-nav-kachel); }
:root.marke-ui .ov-thumb { background: var(--marke-flaeche-2); border-color: var(--marke-linie); }
:root.marke-ui .output-card-kind { font-size: 11px; letter-spacing: .1em; color: var(--marke-text-3) !important; }
:root.marke-ui .output-card-name { color: var(--marke-text); }
:root.marke-ui .output-card-sub { color: var(--marke-text-2) !important; }
:root.marke-ui .output-card-meta { color: var(--marke-text-3) !important; }
:root.marke-ui .output-card .output-card-badge { background: var(--marke-akzent-zart) !important; color: var(--marke-akzent) !important; }
:root.marke-ui .output-card-check { accent-color: var(--marke-nav-blau); }
/* Knöpfe auf der Karte: Symbolknöpfe, grau; Löschen wird erst beim Zeigen rot */
:root.marke-ui .output-card-actions a,
:root.marke-ui .output-card-actions button {
  background: var(--marke-flaeche); border: 1px solid var(--marke-linie); color: var(--marke-text-2);
  backdrop-filter: none; border-radius: var(--marke-r-s);
}
:root.marke-ui .output-card-actions a:hover { background: var(--marke-flaeche-2); color: var(--marke-text); border-color: var(--marke-linie-stark); }
:root.marke-ui .output-card-actions button:hover { background: var(--ui-gefahr-zart); color: var(--marke-gefahr); border-color: transparent; }
/* Leerzustand */
:root.marke-ui .outputs-empty {
  margin-top: var(--marke-sp-4); padding: var(--marke-sp-5) var(--marke-sp-4);
  border: 1px dashed var(--marke-linie-stark); border-radius: var(--marke-r-l);
  color: var(--marke-text-2); font-size: 13px;
}
:root.marke-ui .outputs-empty button {
  height: 28px; padding: 0 10px; border-radius: var(--marke-r-m);
  background: var(--marke-flaeche); border: 1px solid var(--marke-linie-stark); color: var(--marke-text);
  font: 600 12px var(--marke-schrift);
}
:root.marke-ui .outputs-empty button:hover { background: var(--marke-flaeche-2); }
:root.marke-ui .outputs-score { color: var(--marke-text-3); }

/* ── Einstellungen (Rahmen um die eingebetteten Seiten) ────────────────── */
:root.marke-ui .aef-group label { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--marke-text); }
:root.marke-ui .aef-group input,
:root.marke-ui .aef-group textarea {
  background: var(--marke-feld) !important; border: 1px solid var(--marke-linie);
  border-radius: var(--marke-r-m); font: 400 14px var(--marke-schrift); color: var(--marke-text);
  transition: border-color .15s, box-shadow .15s;
}
:root.marke-ui .aef-group input { height: 34px; padding: 0 12px; }
:root.marke-ui .aef-group input:focus,
:root.marke-ui .aef-group textarea:focus { border-color: var(--marke-akzent); box-shadow: 0 0 0 3px var(--marke-akzent-zart); background: var(--marke-feld) !important; }
:root.marke-ui .aef-info { border-color: var(--marke-linie-stark); border-style: solid; }
:root.marke-ui .aef-info:hover { color: var(--marke-akzent); border-color: var(--marke-akzent); background: transparent; }
:root.marke-ui .aef-actions .btn-primary { height: 34px; padding: 0 14px; border-radius: var(--marke-r-m); font: 600 13px var(--marke-schrift); background: var(--marke-akzent); }
:root.marke-ui .aef-actions .btn-primary:hover { background: var(--marke-akzent); filter: brightness(1.08); }
:root.marke-ui .aef-status.ok { color: var(--marke-ok); }
:root.marke-ui .aef-status.err { color: var(--marke-gefahr); }

/* ── Werkzeug-Anfragen (Fragebogen) ────────────────────────────────────── */
:root.marke-ui .tr-card {
  background: var(--marke-flaeche) !important; border: 1px solid var(--marke-linie) !important;
  border-radius: var(--marke-r-l); padding: var(--marke-sp-5);
  box-shadow: var(--marke-schatten-leise);
}
:root.marke-ui .tr-card::before { display: none; }
/* Symbol-Kacheln grau statt Lila-Türkis-Verlauf mit Leuchten */
:root.marke-ui .tr-hero-icon,
:root.marke-ui .tr-agent-av,
:root.marke-ui .tr-think-av {
  background: var(--marke-flaeche-2); border: 1px solid var(--marke-linie); box-shadow: none;
  border-radius: var(--marke-r-l);
}
:root.marke-ui .tr-hero-icon, :root.marke-ui .tr-think-av { width: 48px; height: 48px; font-size: 22px; }
:root.marke-ui .tr-think-av { animation: none; }
:root.marke-ui .tr-hero h2, :root.marke-ui .tr-q { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
:root.marke-ui .tr-hero p, :root.marke-ui .tr-qhelp { color: var(--marke-text-2); font-size: 14px; }
:root.marke-ui .tr-label { font-size: 11px; letter-spacing: .1em; color: var(--marke-text-3); }
:root.marke-ui .tr-dot.done { background: var(--marke-nav-blau); opacity: .45; }
:root.marke-ui .tr-dot.active { background: var(--marke-nav-blau); }
/* Eingabefeld: zarter Feldgrund, dünner Rand, lila Fokus-Ring */
:root.marke-ui .tr-input {
  background: var(--marke-feld) !important; border: 1px solid var(--marke-linie);
  border-radius: var(--marke-r-m); padding: 10px 12px; font: 400 14px/1.55 var(--marke-schrift);
}
:root.marke-ui .tr-field-mic .tr-input { padding-bottom: 52px; }
:root.marke-ui .tr-input:focus { border-color: var(--marke-akzent); box-shadow: 0 0 0 3px var(--marke-akzent-zart); }
:root.marke-ui .tr-count { color: var(--marke-text-3); }
/* Diktieren = Nebenknopf (weiß, Rand), aufnehmend = rot */
:root.marke-ui .tr-mic {
  height: 28px; padding: 0 10px; border-radius: var(--marke-r-m);
  background: var(--marke-flaeche); border: 1px solid var(--marke-linie-stark); color: var(--marke-text);
  font: 600 12px var(--marke-schrift);
}
:root.marke-ui .tr-mic svg { width: 14px; height: 14px; color: var(--marke-text-2); }
:root.marke-ui .tr-mic:hover { background: var(--marke-flaeche-2); color: var(--marke-text); border-color: var(--marke-linie-stark); }
:root.marke-ui .tr-mic.recording { background: var(--marke-aufnahme); border-color: var(--marke-aufnahme); color: white; }
:root.marke-ui .tr-mic.recording svg { color: white; }
/* Weiter / Freigeben = der eine Hauptknopf: 34 px, Ecken 9, ohne Leuchten */
:root.marke-ui .tr-submit,
:root.marke-ui .tr-approve {
  height: 34px; padding: 0 14px; border: 0; border-radius: var(--marke-r-m);
  background: var(--marke-akzent); color: var(--marke-auf-akzent);
  font: 600 13px var(--marke-schrift); box-shadow: none;
}
:root.marke-ui .tr-submit:hover, :root.marke-ui .tr-approve:hover { opacity: 1; box-shadow: none; filter: brightness(1.08); }
:root.marke-ui .tr-submit:active { transform: none; }
:root.marke-ui .tr-reject {
  height: 34px; padding: 0 14px; border-radius: var(--marke-r-m);
  background: var(--marke-flaeche); border: 1px solid var(--marke-linie-stark); color: var(--marke-text);
  font: 600 13px var(--marke-schrift);
}
:root.marke-ui .tr-reject:hover { background: var(--marke-flaeche-2); }
/* Leise Knöpfe (Überspringen, Speichern, Verwerfen) */
:root.marke-ui .tr-ghost {
  height: 34px; padding: 0 14px; border-radius: var(--marke-r-m);
  border: 1px solid transparent; background: transparent; color: var(--marke-text-2);
  font: 600 13px var(--marke-schrift);
}
:root.marke-ui .tr-ghost:hover { background: var(--ui-hover); color: var(--marke-text); border-color: transparent; }
:root.marke-ui .tr-ghost.tr-mini { height: auto; padding: 2px 10px; border: 1px solid var(--marke-linie); border-radius: var(--marke-r-pill); font-size: 12px; font-weight: 500; }
:root.marke-ui .tr-ghost.tr-weg:hover { color: var(--marke-gefahr); background: var(--ui-gefahr-zart); }
:root.marke-ui .tr-err { color: var(--marke-gefahr); }
/* Antwort-Karten: flach, Rand kräftiger beim Zeigen, gewählt = Lila-Rand */
:root.marke-ui .tr-opt {
  background: var(--marke-flaeche) !important; border: 1px solid var(--marke-linie-stark);
  border-radius: var(--marke-r-m); padding: 10px 12px; transition: border-color .15s, background .15s;
}
:root.marke-ui .tr-opt:hover { border-color: var(--marke-text-3); transform: none; }
:root.marke-ui .tr-opt[aria-checked="true"] { border-color: var(--ui-nav-ton); background: var(--ui-nav-kachel) !important; box-shadow: none; }
:root.marke-ui .tr-opt .tr-mark { width: 16px; height: 16px; border-width: 1.5px; }
:root.marke-ui .tr-opt[aria-checked="true"] .tr-mark { border-color: var(--ui-nav-ton); background: var(--marke-nav-blau); }
:root.marke-ui .tr-opt[aria-checked="true"] .tr-mark::after { width: 6px; height: 6px; background: var(--marke-auf-akzent); }
/* Hinweis-Kästen: ruhige Meldung statt Lila-Schleier */
:root.marke-ui .tr-erklaer,
:root.marke-ui .tr-sec-hero {
  background: var(--marke-flaeche-2); border: 1px solid var(--marke-linie); border-radius: var(--marke-r-m);
}
:root.marke-ui .tr-sec-h, :root.marke-ui .tr-sec-hero .tr-sec-h { font-size: 11px; letter-spacing: .1em; color: var(--marke-text-3); }
:root.marke-ui .tr-sec li::before { color: var(--marke-text-3); }
:root.marke-ui .tr-attach, :root.marke-ui .tr-recap { border-top-color: var(--marke-linie); }
:root.marke-ui .tr-attach-btn {
  height: 28px; padding: 0 10px; border-radius: var(--marke-r-m);
  border: 1px solid var(--marke-linie-stark); background: var(--marke-flaeche); color: var(--marke-text);
  font: 600 12px var(--marke-schrift);
}
:root.marke-ui .tr-attach-btn:hover { border-color: var(--marke-linie-stark); background: var(--marke-flaeche-2); color: var(--marke-text); }
:root.marke-ui .tr-attach-item { background: var(--marke-flaeche-2) !important; border: 1px solid var(--marke-linie); border-radius: var(--marke-r-m); }
:root.marke-ui .tr-attach-del:hover { color: var(--marke-gefahr); }
/* Anfragen-Liste: flache Karten */
:root.marke-ui .tr-req { background: var(--marke-flaeche) !important; border: 1px solid var(--marke-linie); border-radius: var(--marke-r-l); }
:root.marke-ui .tr-req.clickable:hover { border-color: var(--marke-linie-stark); background: var(--marke-flaeche) !important; }

/* ── Unterhaltungsspalte rechts ────────────────────────────────────────── */
:root.marke-ui .conv-sidebar { background: var(--marke-grund); border-left: 1px solid var(--marke-linie); }
:root.marke-ui .conv-title { font-size: 11px; letter-spacing: .1em; color: var(--marke-text-3); }
:root.marke-ui .conv-new { background: var(--marke-flaeche); border-color: var(--marke-linie-stark); border-radius: var(--marke-r-m); color: var(--marke-text); }
:root.marke-ui .conv-new:hover { background: var(--marke-flaeche-2); border-color: var(--marke-linie-stark); }
:root.marke-ui .conv-item { color: var(--marke-text-2); font-size: 13px; font-weight: 500; border-radius: var(--marke-r-m); }
:root.marke-ui .conv-item:hover { background: var(--ui-hover); color: var(--marke-text); }
:root.marke-ui .conv-item.active { background: var(--ui-nav-kachel); border-color: transparent; color: var(--ui-nav-ton); font-weight: 600; } /* Auswahl = Blau */
:root.marke-ui .conv-item-edit { background: var(--marke-flaeche); border-color: var(--marke-akzent); box-shadow: 0 0 0 3px var(--marke-akzent-zart); border-radius: var(--marke-r-s); }
:root.marke-ui .conv-empty { color: var(--marke-text-3); }
/* ⋯-Menü eines Eintrags: die eine Menüform */
:root.marke-ui .conv-menu {
  background: var(--marke-flaeche); border: 1px solid var(--marke-linie);
  border-radius: var(--marke-r-m); padding: 4px; box-shadow: var(--marke-schatten);
}
:root.marke-ui .conv-menu-item {
  border-radius: var(--marke-r-s); font: 400 13px var(--marke-schrift); color: var(--marke-text);
}
:root.marke-ui .conv-menu-item:hover { background: var(--ui-hover); }
:root.marke-ui .conv-menu-item.danger { color: var(--marke-gefahr); }
:root.marke-ui .conv-menu-item.danger:hover { background: var(--ui-gefahr-zart); }

/* ── Konto-, Tutorial- und Mehr-Menü ───────────────────────────────────── */
:root.marke-ui .user-menu-btn { height: 34px; border-radius: var(--marke-r-m); background: var(--marke-flaeche); border-color: var(--marke-linie); } /* Pille nur für Reiter/Filter/Status */
:root.marke-ui .user-menu-btn:hover { background: var(--marke-flaeche); border-color: var(--marke-linie-stark); }
:root.marke-ui .user-menu-avatar { background: var(--marke-akzent-zart); color: var(--marke-akzent); }
:root.marke-ui .user-menu-header { padding: 6px 8px 8px; border-bottom: 1px solid var(--marke-linie); margin-bottom: 4px; }
:root.marke-ui .user-menu-header .um-name { font-size: 13px; font-weight: 600; }
:root.marke-ui .user-menu-item,
:root.marke-ui .mob-more-item {
  gap: 8px; padding: 6px 8px; color: var(--marke-text) !important;
  font: 400 13px var(--marke-schrift); border-radius: var(--marke-r-s);
}
:root.marke-ui .user-menu-item svg, :root.marke-ui .mob-more-item svg { width: 16px; height: 16px; color: var(--marke-text-2); }
:root.marke-ui .mob-more-item:hover { background: var(--ui-hover); }
:root.marke-ui .user-menu-item.danger, :root.marke-ui .user-menu-item.danger svg { color: var(--marke-gefahr) !important; }
:root.marke-ui .user-menu-sep { height: 1px; margin: 4px -4px; background: var(--marke-linie) !important; }
:root.marke-ui .mob-more-dropdown {
  background: var(--marke-flaeche); border: 1px solid var(--marke-linie);
  border-radius: var(--marke-r-m); padding: 4px; box-shadow: var(--marke-schatten);
}
/* Tutorial-Menü trägt seine Form im style-Attribut — darum hier mit !important */
:root.marke-ui #tutMenuDropdown .tut-menu-item {
  display: flex !important; align-items: center; gap: 8px;
  padding: 6px 8px !important; color: var(--marke-text) !important;
  font: 400 13px var(--marke-schrift) !important;
}
:root.marke-ui #tutMenuDropdown > div[style*="height:1px"] { margin: 4px -4px !important; background: var(--marke-linie) !important; }
:root.marke-ui #tutMenuDropdown > div[style*="uppercase"] {
  padding: 6px 8px 4px !important; font-size: 11px !important; font-weight: 700;
  letter-spacing: .1em !important; color: var(--marke-text-3) !important;
}

/* ── Dialoge: weiß, Radius 12, ohne Rand, Schatten, Hintergrund sichtbar ── */
:root.marke-ui .modal-card,
:root.marke-ui #modalCard,
:root.marke-ui .usage-card,
:root.marke-ui .docviewer,
:root.marke-ui .drawer,
:root.marke-ui .ask-pw-card,
:root.marke-ui #account-settings-modal > div {
  background: var(--marke-flaeche) !important;
  border: 0 !important;
  border-radius: var(--marke-r-l) !important;
  box-shadow: var(--marke-schatten) !important;
  color: var(--marke-text);
}
:root.marke-ui .modal-card { padding: var(--marke-sp-5); }
:root.marke-ui .modal-card h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
:root.marke-ui .modal-card .modal-sub { color: var(--marke-text-2); font-size: 13px; }
:root.marke-ui .modal-overlay-v2,
:root.marke-ui .usage-overlay,
:root.marke-ui .drawer-overlay,
:root.marke-ui .docviewer-overlay,
:root.marke-ui #account-settings-modal { background: var(--marke-abdunklung) !important; backdrop-filter: none; }
/* Kopf/Fuß der Dialoge: keine Trennbänder, Schließen als Symbolknopf */
:root.marke-ui .drawer-close,
:root.marke-ui .usage-head .u-close,
:root.marke-ui .sidebar-secondary-close {
  width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center;
  border: 0; border-radius: var(--marke-r-m); background: transparent; color: var(--marke-text-2);
}
:root.marke-ui .drawer-close:hover,
:root.marke-ui .usage-head .u-close:hover,
:root.marke-ui .sidebar-secondary-close:hover { background: var(--ui-hover); color: var(--marke-text); }
:root.marke-ui .drawer-title { font-size: 15px; font-weight: 600; }
/* Plan & Nutzung */
:root.marke-ui .usage-head-info .u-title { color: var(--marke-text); font-size: 20px; }
:root.marke-ui .usage-head-info .u-plan { font-size: 11px; letter-spacing: .1em; color: var(--marke-text-3); }
:root.marke-ui .u-meter-bar,
:root.marke-ui .storage-meter-bar { background: var(--marke-flaeche-2); }
:root.marke-ui .u-meter-fill,
:root.marke-ui .storage-meter-fill { background: var(--marke-akzent); }
:root.marke-ui .u-meter-fill.warn, :root.marke-ui .storage-meter-fill.warn { background: var(--marke-warn); }
:root.marke-ui .u-meter-fill.crit, :root.marke-ui .storage-meter-fill.full { background: var(--marke-gefahr); }
:root.marke-ui .u-meter-fill.unlim { background: var(--marke-akzent-zart); }
:root.marke-ui .u-upgrade {
  height: 34px; padding: 0 14px; border-radius: var(--marke-r-m);
  background: var(--marke-akzent); color: var(--marke-auf-akzent); font: 600 13px var(--marke-schrift);
}
/* Dokument-Ansicht */
:root.marke-ui .docviewer-head { border-bottom-color: var(--marke-linie); }
:root.marke-ui .docviewer-action {
  height: 28px; padding: 0 10px; border-radius: var(--marke-r-m);
  background: var(--marke-flaeche); border: 1px solid var(--marke-linie-stark); color: var(--marke-text);
  font: 600 12px var(--marke-schrift);
}
:root.marke-ui .docviewer-action:hover { background: var(--marke-flaeche-2); border-color: var(--marke-linie-stark); }
:root.marke-ui .docviewer-body { background: var(--marke-flaeche-2); }
:root.marke-ui .docviewer-eml-headers { background: var(--marke-flaeche-2); border-bottom-color: var(--marke-linie); }
/* Kontoeinstellungen: Felder und Knöpfe stehen im style-Attribut */
:root.marke-ui #account-settings-modal input {
  height: 34px; padding: 0 12px !important;
  background: var(--marke-feld) !important; border: 1px solid var(--marke-linie) !important;
  border-radius: var(--marke-r-m) !important; font: 400 14px var(--marke-schrift) !important; color: var(--marke-text) !important;
}
:root.marke-ui #account-settings-modal input:focus { border-color: var(--marke-akzent) !important; box-shadow: 0 0 0 3px var(--marke-akzent-zart); }
:root.marke-ui #account-settings-modal button[style*="var(--accent)"],
:root.marke-ui #account-settings-modal button[style*="transparent"],
:root.marke-ui #account-settings-modal a[style*="inline-flex"] {
  height: 34px; padding: 0 14px !important; border-radius: var(--marke-r-m) !important;
  font: 600 13px var(--marke-schrift) !important; display: inline-flex; align-items: center;
}
:root.marke-ui #account-settings-modal button[style*="transparent"]:not([style*="239,68,68"]),
:root.marke-ui #account-settings-modal a[style*="inline-flex"] {
  border-color: var(--marke-linie-stark) !important; color: var(--marke-text) !important;
}
:root.marke-ui #account-settings-modal button[style*="239,68,68"] { color: var(--marke-gefahr) !important; border-color: var(--marke-gefahr) !important; }
:root.marke-ui #account-settings-modal label { font-size: 13px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--marke-text) !important; }
:root.marke-ui #account-settings-modal > div > div:last-child > div:last-child > label { color: var(--marke-gefahr) !important; }
:root.marke-ui #account-settings-modal div[style*="border-top:1px solid rgba(239"] { border-top-color: var(--marke-linie) !important; }
/* Passwort-Rückfrage */
:root.marke-ui .ask-pw-title { color: var(--marke-text); }
:root.marke-ui .ask-pw-desc { color: var(--marke-text-2); }
:root.marke-ui .ask-pw-input { background: var(--marke-feld); border: 1px solid var(--marke-linie); color: var(--marke-text); border-radius: var(--marke-r-m); }
:root.marke-ui .ask-pw-input:focus { outline: 0; border-color: var(--marke-akzent); box-shadow: 0 0 0 3px var(--marke-akzent-zart); }
:root.marke-ui .ask-pw-cancel { background: var(--marke-flaeche); border: 1px solid var(--marke-linie-stark); color: var(--marke-text); border-radius: var(--marke-r-m); }
/* Agent-Assistent im Dialog: flache Wahlkarten */
:root.marke-ui .wiz-progress-step { background: var(--marke-flaeche-2); }
:root.marke-ui .wiz-progress-step.done { background: var(--marke-nav-blau); }
:root.marke-ui .wiz-progress-step.active { background: var(--marke-nav-blau); opacity: .5; }
:root.marke-ui .wiz-step-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--marke-text-3); }
:root.marke-ui .wiz input[type=text],
:root.marke-ui .wiz textarea { background: var(--marke-feld) !important; border: 1px solid var(--marke-linie) !important; border-radius: var(--marke-r-m); color: var(--marke-text) !important; }
:root.marke-ui .wiz input[type=text]:focus,
:root.marke-ui .wiz textarea:focus { border-color: var(--marke-akzent) !important; box-shadow: 0 0 0 3px var(--marke-akzent-zart); background: var(--marke-feld) !important; }
:root.marke-ui .wiz-card, :root.marke-ui .wiz-check, :root.marke-ui .wiz-avatar, :root.marke-ui .wiz-summary {
  background: var(--marke-flaeche); border: 1px solid var(--marke-linie-stark); border-radius: var(--marke-r-m); box-shadow: none;
}
:root.marke-ui .wiz-card:hover, :root.marke-ui .wiz-check:hover { background: var(--marke-flaeche); border-color: var(--marke-text-3); }
:root.marke-ui .wiz-card.selected, :root.marke-ui .wiz-check.checked, :root.marke-ui .wiz-avatar.selected {
  background: var(--ui-nav-kachel) !important; border-color: var(--ui-nav-ton) !important; color: var(--marke-text); box-shadow: none;
}
/* Reiter und Filter: EINE Form (Ralph 17.10.2026) – Umschalter im Assistenten
   (Sie/Du, Ton) und Format-Filter im Visualisieren wie .a4h-chip */
:root.marke-ui .wiz-seg, :root.marke-ui .vw-filter-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; min-height: 0; padding: 0 12px; margin: 0;
  border: 1px solid var(--marke-linie-stark); border-radius: var(--marke-r-pill);
  background: var(--marke-flaeche); box-shadow: none;
  color: var(--marke-text-2); font: 600 12px/1 var(--marke-schrift); white-space: nowrap; cursor: pointer;
}
:root.marke-ui .wiz-seg:hover, :root.marke-ui .vw-filter-chip:hover { color: var(--marke-text); border-color: var(--marke-text-3); background: var(--marke-flaeche); }
:root.marke-ui .wiz-seg.selected, :root.marke-ui .vw-filter-chip.active {
  background: var(--marke-nav-blau) !important; border-color: var(--marke-nav-blau) !important; color: white !important;
}
:root.marke-ui .wiz-summary-row { border-bottom: 1px solid var(--marke-linie); }

/* ── Kurze Meldungen (Toasts): hell, Schatten, farbiger Rand links ─────── */
:root.marke-ui .toast,
:root.marke-ui .toast.success, :root.marke-ui .toast.error, :root.marke-ui .toast.info, :root.marke-ui .toast.warning {
  background: var(--marke-flaeche) !important; color: var(--marke-text) !important;
  border: 1px solid var(--marke-linie) !important; border-left: 3px solid var(--marke-ok) !important;
  border-radius: var(--marke-r-m); box-shadow: var(--marke-schatten); backdrop-filter: none;
  padding: 12px 14px; font-weight: 400;
}
:root.marke-ui .toast.error { border-left-color: var(--marke-gefahr) !important; }
:root.marke-ui .toast.info { border-left-color: var(--marke-akzent) !important; }
:root.marke-ui .toast.warning { border-left-color: var(--marke-warn) !important; }
:root.marke-ui .toast .content strong { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--marke-text) !important; }
:root.marke-ui .toast-close { color: var(--marke-text-3); }

/* ── Tutorial-Karte (Rundgang) ─────────────────────────────────────────── */
:root.marke-ui .tour-card {
  background: var(--marke-flaeche) !important; border: 0 !important;
  border-radius: var(--marke-r-l); box-shadow: var(--marke-schatten) !important;
  padding: var(--marke-sp-4); color: var(--marke-text) !important;
}
:root.marke-ui .tour-card .step { letter-spacing: .1em; font-weight: 700; }
:root.marke-ui .tour-card .tour-meta { background: var(--marke-flaeche-2); border: 1px solid var(--marke-linie); }

/* ── Kleinkram im Rahmen ───────────────────────────────────────────────── */
/* Datei ins Chatfenster ziehen: gestrichelter Rahmen, helle Karte, kein Schleier */
:root.marke-ui .chat-drop-overlay { background: transparent; border: 2px dashed var(--marke-akzent); backdrop-filter: none; }
:root.marke-ui .chat-drop-overlay-inner { background: var(--marke-flaeche); border: 0; border-radius: var(--marke-r-l); box-shadow: var(--marke-schatten); font-size: 14px; font-weight: 600; }
/* Fußleiste (Agent behalten) */
:root.marke-ui .footer-bar { background: transparent; }
:root.marke-ui .footer-btn { height: 34px; padding: 0 14px; border-radius: var(--marke-r-m); background: var(--marke-flaeche); border-color: var(--marke-linie-stark); color: var(--marke-text); }
:root.marke-ui .footer-btn:hover { background: var(--marke-flaeche-2); }
:root.marke-ui .footer-btn.keep { background: var(--marke-akzent); border-color: transparent; color: var(--marke-auf-akzent); }

/* ── Knöpfe der alten Dialoge/Formulare auf die fünf Arten ─────────────── */
:root.marke-ui .btn-primary,
:root.marke-ui .btn-secondary,
:root.marke-ui .auto-submit-row .btn-save,
:root.marke-ui .auto-submit-row .btn-cancel {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: var(--marke-r-m);
  font: 600 13px var(--marke-schrift); box-shadow: none;
}
:root.marke-ui .btn-primary,
:root.marke-ui .auto-submit-row .btn-save { background: var(--marke-akzent); border: 1px solid transparent; color: var(--marke-auf-akzent); }
:root.marke-ui .btn-primary:hover,
:root.marke-ui .auto-submit-row .btn-save:hover { background: var(--marke-akzent); border-color: transparent; filter: brightness(1.08); }
:root.marke-ui .btn-secondary,
:root.marke-ui .auto-submit-row .btn-cancel { background: var(--marke-flaeche); border: 1px solid var(--marke-linie-stark); color: var(--marke-text); }
:root.marke-ui .btn-secondary:hover,
:root.marke-ui .auto-submit-row .btn-cancel:hover { background: var(--marke-flaeche-2); }
:root.marke-ui .auto-submit-row { gap: var(--marke-sp-2); }
/* Formularfelder der alten Formulare */
:root.marke-ui .auto-form-field label { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--marke-text); }
:root.marke-ui .auto-form-field input,
:root.marke-ui .auto-form-field textarea {
  background: var(--marke-feld); border: 1px solid var(--marke-linie); border-radius: var(--marke-r-m);
  font: 400 14px var(--marke-schrift); color: var(--marke-text);
}
:root.marke-ui .auto-form-field input { height: 34px; padding: 0 12px; }
:root.marke-ui .auto-form-field input:focus,
:root.marke-ui .auto-form-field textarea:focus { border-color: var(--marke-akzent); box-shadow: 0 0 0 3px var(--marke-akzent-zart); background: var(--marke-feld); }
:root.marke-ui .auto-form-field input[type=time] { color-scheme: light; }
:root.marke-ui[data-theme="dark"] .auto-form-field input[type=time] { color-scheme: dark; }
:root.marke-ui .auto-form-field input[type=time]::-webkit-calendar-picker-indicator { filter: none; opacity: .6; }
/* Hinweis-Kästen in Dialogen (Lila- bzw. Gelb-Schleier im style-Attribut) */
:root.marke-ui #modalCard div[style*="108,99,255,0.07"],
:root.marke-ui #modalCard div[style*="255,180,80,0.08"] {
  background: var(--marke-flaeche-2) !important; border: 1px solid var(--marke-linie) !important;
  border-radius: var(--marke-r-m) !important;
}
:root.marke-ui #modalCard div[style*="255,180,80,0.08"] { border-left: 3px solid var(--marke-warn) !important; }
/* Gewählter Filter ohne Treffer bleibt als gewählt lesbar */
:root.marke-ui .outputs-filter-btn.is-on.is-empty { opacity: 1; }

/* ═══ Prüfrunde 17.10.2026 (Checkliste Stil-Basis) ══════════════════════════ */

/* Kopfzeile: DSGVO-Hinweis als Hover-Karte (a4h-tip), nicht als Pille */
:root.marke-ui .dsgvo-chip-tip {
  padding: 10px 12px; border-radius: var(--marke-r-m) !important;
  background: var(--marke-flaeche) !important; color: var(--marke-text) !important;
  border: 1px solid var(--marke-linie) !important; box-shadow: var(--marke-schatten) !important;
  font: 500 12px/1.45 var(--marke-schrift);
}
:root.marke-ui .plan-badge:hover { transform: none; }
/* Eingabe im Chat: Schrift 14 aus der Leiter */
:root.marke-ui .composer-input { font-size: 14px; }

/* Feedback-Punkt unten rechts: flach statt Verlauf mit Leuchten und Anheben
   (Form im style-Attribut aus bug-button.js — darum !important) */
:root.marke-ui #a4h-bug-dot {
  background: var(--marke-flaeche) !important; border: 1px solid var(--marke-linie-stark) !important;
  box-shadow: var(--marke-schatten-leise) !important; color: var(--marke-text-2) !important;
  transform: none !important; font-size: 14px !important;
}

/* Output-Karte: Download/Löschen als Symbolknöpfe mit Linien-Symbol statt
   der Zeichen ↓ und × (Zeichen bleibt für Screenreader im Markup) */
:root.marke-ui .output-card-actions { gap: 2px; right: 6px; bottom: 6px; }
:root.marke-ui .output-card-actions a,
:root.marke-ui .output-card-actions button {
  width: 30px; height: 30px; padding: 0; font-size: 0;
  background: var(--marke-flaeche); border: 0; border-radius: var(--marke-r-m); color: var(--marke-text-2);
}
:root.marke-ui .output-card-actions a::before,
:root.marke-ui .output-card-actions button::before {
  content: ''; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--ui-ws-symbol) center / contain no-repeat; mask: var(--ui-ws-symbol) center / contain no-repeat;
}
:root.marke-ui .output-card-actions a { --ui-ws-symbol: 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%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); }
:root.marke-ui .output-card-actions button { --ui-ws-symbol: 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%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }
:root.marke-ui .output-card-actions a:hover { background: var(--ui-hover); color: var(--marke-text); border-color: transparent; }

/* Dialog-Fuß: Knöpfe rechts, die Hauptsache ganz außen (auch wenn sie im
   Markup zuerst steht), nicht über die ganze Breite gezogen */
:root.marke-ui .auto-submit-row { justify-content: flex-end; flex-wrap: wrap; }
:root.marke-ui .auto-submit-row .btn-save { flex: 0 0 auto; order: 2; text-decoration: none; }
/* „Schließen" nach einer gesendeten Anfrage trug einen Lila-Verlauf im style-Attribut */
:root.marke-ui #modalCard .btn-save[style*="gradient"] {
  height: 34px; padding: 0 14px !important; border-radius: var(--marke-r-m) !important;
  background: var(--marke-akzent) !important; font: 600 13px var(--marke-schrift) !important;
}

/* Kontoeinstellungen: EIN Hauptknopf je Fläche (Regel) — „Speichern" (Name)
   bleibt lila, „Ändern", „Passwort ändern" und Push werden Nebenknöpfe;
   „Account löschen" ist der rote Gefahr-Knopf; Schließen als Symbolknopf */
:root.marke-ui #account-settings-modal button[onclick^="acctUpdateEmail"],
:root.marke-ui #account-settings-modal button[onclick^="acctUpdatePassword"],
:root.marke-ui #account-settings-modal #pushToggleBtn {
  background: var(--marke-flaeche) !important; border: 1px solid var(--marke-linie-stark) !important; color: var(--marke-text) !important;
}
:root.marke-ui #account-settings-modal button[onclick^="acctUpdateEmail"]:hover,
:root.marke-ui #account-settings-modal button[onclick^="acctUpdatePassword"]:hover,
:root.marke-ui #account-settings-modal #pushToggleBtn:hover,
:root.marke-ui #account-settings-modal #pushTestBtn:hover { background: var(--marke-flaeche-2) !important; }
:root.marke-ui #account-settings-modal button[onclick^="deleteAccount"] {
  background: var(--marke-gefahr) !important; border-color: transparent !important; color: white !important;
}
:root.marke-ui #account-settings-modal button[onclick^="deleteAccount"]:hover { filter: brightness(1.08); }
:root.marke-ui #account-settings-modal button[onclick^="closeAccountSettings"] {
  width: 30px; height: 30px; padding: 0 !important; display: inline-grid; place-items: center;
  border-radius: var(--marke-r-m); font-size: 16px !important; color: var(--marke-text-2) !important;
}
:root.marke-ui #account-settings-modal button[onclick^="closeAccountSettings"]:hover { background: var(--ui-hover) !important; color: var(--marke-text) !important; }

/* Assistent: Knöpfe auf Maß (34 px, 13/600), Zurück/Abbrechen leise,
   Felder 34 px mit Schrift 14, Häkchen im Blau */
:root.marke-ui .wiz-actions .btn-save,
:root.marke-ui .wiz-actions .btn-cancel,
:root.marke-ui .wiz-actions .wiz-skip {
  height: 34px; padding: 0 14px; border-radius: var(--marke-r-m);
  font: 600 13px var(--marke-schrift); box-shadow: none;
}
:root.marke-ui .wiz-actions .btn-save { background: var(--marke-akzent); border: 1px solid transparent; color: var(--marke-auf-akzent); }
:root.marke-ui .wiz-actions .btn-save:hover { filter: brightness(1.08); }
:root.marke-ui .wiz-actions .btn-cancel,
:root.marke-ui .wiz-actions .wiz-skip { background: transparent; border: 1px solid transparent; color: var(--marke-text-2); }
:root.marke-ui .wiz-actions .btn-cancel:hover,
:root.marke-ui .wiz-actions .wiz-skip:hover { background: var(--ui-hover); color: var(--marke-text); }
:root.marke-ui .wiz input[type=text] { height: 34px; padding: 0 12px; font: 400 14px var(--marke-schrift); }
:root.marke-ui .wiz textarea { font: 400 14px/1.5 var(--marke-schrift); }
:root.marke-ui .wiz-check input[type=checkbox] { accent-color: var(--marke-nav-blau); }

/* Kurze Meldungen: Linien-Symbol statt Zeichen/Emoji (✓ ⚠ ℹ 🧠) und
   Schließen als kleiner Symbolknopf statt × — Zeichen bleiben im Markup */
:root.marke-ui .toast .icon {
  width: 16px; height: 16px; margin-top: 1px; font-size: 0; color: var(--marke-ok); background: currentColor;
  --ui-ws-symbol: 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='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  -webkit-mask: var(--ui-ws-symbol) center / contain no-repeat; mask: var(--ui-ws-symbol) center / contain no-repeat;
}
:root.marke-ui .toast.error .icon,
:root.marke-ui .toast.warning .icon {
  --ui-ws-symbol: 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%3Cpath d='m21.7 18-8-14a2 2 0 0 0-3.5 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
:root.marke-ui .toast.error .icon { color: var(--marke-gefahr); }
:root.marke-ui .toast.warning .icon { color: var(--marke-warn); }
:root.marke-ui .toast.info .icon {
  color: var(--marke-akzent);
  --ui-ws-symbol: 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='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
:root.marke-ui .toast-close {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -4px -6px 0 auto; padding: 0;
  border-radius: var(--marke-r-s); font-size: 0; color: var(--marke-text-3);
}
:root.marke-ui .toast-close::before {
  content: ''; width: 14px; height: 14px; background: currentColor;
  -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%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%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%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root.marke-ui .toast-close:hover { background: var(--ui-hover); color: var(--marke-text); }