/*
  workspace-bento-kopf-anschluss.css — schließt den Baustein „Kopfzeile“ (/assets/bento-kern/bento-kopf.css) an die AIOS-Marke an
  (Verhalten: workspace-bento-kopf-anschluss.js, Aufbau: workspace-bento.js).

  Kurzbeschreibung (für Laien): Ralph, 29.10.2026 — Kopfzeile oben rechts auf jedem Server gleich. Der Baustein bringt keine Farben mit; hier
  steht, welche Markenwerte er nimmt (Hell und Dunkel kommen über die --marke-Werte von selbst), dazu der Aufnahme-Zustand des Mikrofons
  und das Verstecken des schwebenden Fehler-Punkts (seine Funktion steckt jetzt im „?“-Menü).
*/
:root.ws-bento .wb-top {
  --bt-karte: var(--wb-karte); --bt-weich: var(--wb-weich); --bt-text: var(--wb-text); --bt-leise: var(--wb-leise);
  --bt-dunkel: var(--wb-dunkel); --bt-auf-dunkel: #fff; --bt-grund: var(--wb-grund); --bt-rot: var(--marke-gefahr);
  --bt-linie-stark: var(--marke-linie-stark); --bt-fokus-ring: var(--marke-akzent); --bt-schrift: var(--marke-schrift);
}
/* Mikrofon: Aufnahme läuft (attachDictation setzt .recording) → roter Knopf */
.bt-kopf-mikro.recording { background: var(--marke-gefahr); color: #fff; }
.bt-kopf-mikro.recording:hover { background: var(--marke-gefahr); }
/* Hilfe-Menü: Strich-Symbole vor den Zeilen */
.wb-kontext.wb-hilfe-menue button { display: flex; align-items: center; gap: 10px; }
.wb-kontext.wb-hilfe-menue .wb-hilfe-sym { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Der schwebende Fehler-Punkt (bug-button.js) entfällt in der Bento-Ansicht – „Fehler melden“ steht im „?“-Menü und löst ihn per Skript aus */
:root.ws-bento #a4h-bug-dot { display: none !important; }
/* Sehr schmale Handys: Logo ohne Namen, enger Abstand – sonst rutschen bei neun Knöpfen die letzten in eine zweite Zeile */
@media (max-width: 440px) {
  :root.ws-bento .wb-top { column-gap: 2px; }
  .wb-top .wb-logo-name { display: none; }
}

/* ── Kopfleisten-Kapseln und Menükarten: Anschluss an den Baukasten (/assets/bento-kern/bento-kopfmenue.css, Ralph 08.11.2026) ──
   Nur Variablen und die Frage „welcher Umschalter-Teil ist gewählt“; die Form steht im Baukasten. */
:root.ws-bento {
  --bt-karte: var(--wb-karte); --bt-weich: var(--wb-weich); --bt-text: var(--wb-text); --bt-leise: var(--wb-leise); --bt-rot: var(--marke-reiter-rot, #e5484d);
  --bt-schrift: var(--marke-schrift); --bt-r-s: var(--marke-r-s); --bt-r-m: var(--marke-r-m); --bt-r-l: var(--marke-r-l);
  --bt-km-akzent: var(--marke-nav-blau); --bt-km-kapsel: var(--wbm-kapsel, rgba(255, 255, 255, .55)); --bt-km-an-bg: var(--wb-dunkel, #14141d); --bt-km-an-fg: #fff;
  --bt-km-rand: var(--wb-rand), var(--marke-schatten-leise); --bt-km-verlauf-ziel: var(--wb-verlauf-ziel, #fff); --bt-km-licht: var(--marke-reiter-gelb, #f0a500); --bt-km-linie: var(--wb-linie);
}
:root[data-theme="dark"].ws-bento { --bt-km-an-bg: #fff; --bt-km-an-fg: #14141d; }
.wbm-karte, .wbm-rahmen, .wbm-geist, .wbm-wachs { --bt-km-f: var(--wbm-f); }
:root[data-theme="dark"] .bt-km-sym { background: color-mix(in srgb, var(--bt-km-f) 28%, transparent); color: var(--wb-text); }
/* Benachrichtigungs-Kapsel nur im Menü-Modus (workspace-bento-kopf-mitteilungen.js) */
:root:not(.wb-menue-modus) .wkm-kapsel { display: none; }
/* gewählter Teil des Umschalters: Dashboard (Menü zu) bzw. Menü bzw. offene Seite */
:root:root.wb-menue-modus:not(.wb-menue-offen):not(.wb-menue-bereich) .wb-top .wb-abschnitte > .wb-ab[data-abt="Home"].an,
:root:root.wb-menue-modus .wb-top .wb-abschnitte > .wb-ab.wbm-pille.an,
:root:root.wb-menue-modus .wb-top .wb-abschnitte > .wb-ab.wb-seite { background: var(--bt-km-an-bg); color: var(--bt-km-an-fg); box-shadow: none; }
/* Lage der Kapseln: Raster wie die Karten (Rand 20, Abstand 16 = .wbm-raster); Seiten-Ansicht: Benachrichtigungen über der linken Kante der großen Karte */
:root.ws-bento { --bt-km-l: 20px; --bt-km-g: var(--marke-sp-4, 16px); }
@media (min-width: 1100px) {
  :root.wb-menue-flaeche:not(.wb-menue-offen) { --bt-km-glocke-links: calc(var(--wbm-breite, calc((100vw - 104px) / 5)) + 36px); }
}

:root.ws-bento { --bt-km-logo-farbe: var(--marke-reiter-grau); }
:root[data-theme="dark"].ws-bento { --bt-km-logo-farbe: color-mix(in srgb, #fff 70%, var(--marke-reiter-grau)); }
/* Mikrofon in der Suchkapsel: sichtbar, sobald das Diktat verfügbar ist (gegen die Ausblendung der runden Kopfknöpfe im Menü-Modus) */
:root.wb-menue-modus .wb-top .bt-kopf-suche .bt-km-mikro:not([hidden]) { display: inline-flex; width: 30px; height: 30px; margin: 0 -8px 0 auto; background: transparent; box-shadow: none; color: var(--bt-leise); }
:root.wb-menue-modus .wb-top .bt-kopf-suche .bt-km-mikro:not([hidden]):hover { background: color-mix(in srgb, var(--bt-text) 7%, transparent); color: var(--bt-text); }
:root.wb-menue-modus .wb-top .bt-kopf-suche .bt-km-mikro.recording, :root.wb-menue-modus .wb-top .bt-kopf-suche .bt-km-mikro.recording:hover { background: var(--bt-rot); color: #fff; }