/*
  workspace-bento.css — Bento-Ansicht des Workspace (workspace-bento.js).

  Kurzbeschreibung (für Laien): Ralph, 23.10.2026 — „mein Workspace komplett in Bento, so wie unser AIOS".
  Statt der Seitenleiste links gibt es oben eine Leiste mit Reitern (Home, Persönlich, Kunden, Arbeit, Wissen, Werkzeuge, eigene),
  jeder Bereich besteht aus Kacheln mit echten Zahlen, die man verschieben, an der Ecke rechts unten größer ziehen,
  einfärben und groß aufziehen kann; „Anordnen" lässt die Kacheln wackeln wie am Handy.
  Die Bereiche selbst laufen unverändert darunter, nur in ruhigem Grau mit großen Rundungen.
  Alles hier greift nur, wenn <html> die Klasse „ws-bento" trägt (Admins und Beta-Ring).
  Farben nur aus der Marke; Dunkelmodus über dieselben Marken-Werte (data-theme="dark").
*/

/* marke-ausnahme: Bento-Ansicht wie im AIOS (Ralph 23.10.2026) — große Rundungen und hellgrauer Grund sind dort festgelegt */
:root.ws-bento {
  --wb-grund: #eceef2; --wb-r: 22px; --wb-r-k: 14px;
  --wb-karte: var(--marke-flaeche); --wb-text: var(--marke-text); --wb-leise: var(--marke-text-2);
  --wb-linie: var(--marke-linie); --wb-weich: var(--marke-flaeche-2); --wb-akzent: var(--wb-akzent-eigen, var(--marke-nav-blau));
  --wb-akzent-zart: var(--marke-nav-kachel); --wb-dunkel: var(--marke-grafit); --wb-rot: var(--marke-gefahr); --wb-gruen: var(--marke-ok);
  --wb-auswahl: var(--marke-nav-blau);   /* „Ausgewählt“ (Reiter, offene Seite, Pillen, Umschalter): EINE Farbe, gleich in hell und dunkel (Ralph 26.10.2026, b2 – wie AIOS) */
  --wb-custom: var(--marke-customized); --wb-custom-zart: var(--marke-customized-kachel);
  --wb-schatten-hover: 0 10px 26px rgba(15, 23, 42, .10); --wb-schatten-zug: 0 24px 50px rgba(15, 23, 42, .25); --wb-rand: 0 0 0 0 transparent; /* nicht „none": steht auch in Schatten-Listen */
  --wb-verlauf-ziel: #fff; /* Kachel-Farben laufen immer ins Weiße aus (Ralph 24.10.2026, wie AIOS) */
  --wb-auf-farbe: #fff; --wb-auf-farbe-leise: rgba(255, 255, 255, .86); --wb-auf-farbe-linie: rgba(255, 255, 255, .2);   /* .86: gedämpfte Schrift ≥ 4,5:1 auf dunkler Kachel (26.10.2026) */
}
/* Dunkel: Grund und Karten aus der Marke, Schatten kräftiger und ein feiner Rand, „dunkle" Kachel heller als Blau */
:root.ws-bento[data-theme="dark"] {
  --wb-verlauf-ziel: var(--marke-flaeche-2);
  --wb-grund: var(--marke-grund); --wb-akzent-zart: var(--marke-flaeche-2); --wb-custom-zart: var(--marke-flaeche-2);
  --wb-dunkel: color-mix(in srgb, var(--marke-text) 16%, var(--marke-flaeche));
  --wb-schatten-hover: 0 12px 30px rgba(0, 0, 0, .55), 0 0 0 1px var(--marke-linie-stark); --wb-schatten-zug: 0 24px 50px rgba(0, 0, 0, .7);
  --wb-rand: 0 0 0 1px var(--marke-linie);
}

.wb-top, #wbStart, #wbPfad { display: none; }
:root.ws-bento body { background: var(--wb-grund); font-family: var(--marke-schrift); }

/* Alte Teile ausblenden — die Seitenleiste bleibt im Dokument (ihre Knöpfe öffnen weiter die Bereiche) */
:root.ws-bento .sidebar, :root.ws-bento .sidebar-toggle, :root.ws-bento .topbar, :root.ws-bento .mob-nav-backdrop { display: none !important; }

/* ── Leiste oben ── */
:root.ws-bento .wb-top { display: flex; align-items: center; gap: 6px; flex: none; height: 76px; padding: 16px 20px; box-sizing: border-box;
  background: var(--wb-grund); position: relative; z-index: 60; }
.wb-logo { display: flex; align-items: center; border: 0; background: none; padding: 0; margin-right: 14px; cursor: pointer; border-radius: var(--marke-r-m); }
.wb-logo img { height: 28px; width: auto; display: block; }
.wb-logo { gap: 8px; color: var(--marke-text); }
/* „Bento AIOS“ im Stil der Kunden-AIOS-Logos (Ralph 25.10.2026): feiner Trennstrich, grauer Ton, etwas kleiner */
/* Trennstrich: derselbe Strich wie zwischen Logo und Name, auch zwischen Kalender und Pinsel oben rechts (Ralph 26.10.2026, workspace-bento-kopfpillen.js) */
.wb-logo-name { border-left: 1.5px solid var(--marke-linie-stark); }
.wb-logo-name { padding-left: 10px; font: 700 17px/1.2 var(--marke-schrift); letter-spacing: .03em; color: var(--marke-reiter-grau); white-space: nowrap; }
:root[data-theme="dark"] .wb-logo-name { color: color-mix(in srgb, #fff 70%, var(--marke-reiter-grau)); }
:root[data-theme="dark"] .wb-logo .hell, :root:not([data-theme="dark"]) .wb-logo .dunkel { display: none; }
.wb-abschnitte { display: flex; gap: 2px; min-width: 0; overflow: hidden; align-items: center; padding: 3px; margin: -3px; }
.wb-ab { border: 0; background: transparent; border-radius: var(--marke-r-pill); padding: 9px 14px; font: 600 13px var(--marke-schrift);
  color: var(--wb-leise); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; touch-action: manipulation; }
.wb-ab:hover { background: var(--marke-feld); color: var(--wb-text); }
.wb-ab.an { background: var(--wb-dunkel); color: #fff; }   /* aktiver Reiter schwarz (Ralph 27.10.2026), wie AIOS */
.wb-ab.zieht { opacity: .6; }
/* Pille als Ablage beim Ziehen einer Kachel: leuchtet auf */
.wb-ab.ziel { background: var(--wb-dunkel); color: #fff; box-shadow: 0 0 0 4px var(--marke-feld), 0 0 0 2px var(--wb-dunkel); }
/* Geöffnete Seite als eigene Pille rechts neben den Bereichen (Ralph 24.10.2026) — mit × zum Schließen.
   Sie ist markiert (grafit gefüllt), solange sie da ist, ist kein Reiter markiert (Fotoprüfung 24.10.2026: nicht „Home" schwarz). */
.wb-ab.wb-seite { background: var(--wb-auswahl); color: #fff; cursor: default; display: inline-flex; align-items: center; gap: 6px; padding-right: 6px;
  animation: wbPop .32s cubic-bezier(.2, .8, .2, 1.2) both; }
.wb-ab.wb-seite:hover { background: var(--wb-auswahl); color: #fff; }
/* Kopf-Pillen (Postfach/Kalender/Kontakte, eigene Ablagen) ausgenommen: deren Seiten-Pille ist nur versteckt, bleibt aber im DOM (Ralph 25.10.2026: Pille blieb nicht schwarz) */
.wb-abschnitte:has(> .wb-seite) > .wb-ab.an:not(.wb-seite):not(:hover):not(.ziel):not(.wb-kopfpille) { background: transparent; color: var(--wb-leise); }
.wb-seite-zu { width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.wb-seite-zu:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.wb-seite-zu svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* Eigener Bereich: Name direkt in der Pille eingeben */
.wb-ab.eingabe { padding: 4px 6px; background: var(--wb-karte); }
.wb-ab-name { border: 0; outline: 0; background: none; font: 600 13px var(--marke-schrift); color: var(--wb-text); width: 130px; padding: 5px 8px; }
@keyframes wbPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
/* Reiter bei Platzmangel (Ralph 24.10.2026: alles sichtbar und bedienbar, kein Dropdown, kein seitliches Scrollen):
   zuerst wird das Suchfeld schmaler, dann zeigt workspace-bento-reiter.js eigene Bereiche als Kürzel (.wb-eng, voller Name
   im title), reicht das nicht, kommen die Reiter in eine eigene Zeile (.wb-umbruch). Schrumpfen (abgeschnitten) ist nur das Sicherheitsnetz, falls das Skript fehlt.
   Die Pille des offenen Bereichs und die Namenseingabe schrumpfen nie. */
.wb-abschnitte > .wb-ab { flex: 0 1 auto; min-width: 48px; overflow: hidden; }
.wb-abschnitte > .wb-ab.wb-seite, .wb-abschnitte > .wb-ab.eingabe { flex: none; min-width: 0; overflow: visible; }
.wb-top.wb-eng .wb-ab.eigen[data-kurz]:not(.eingabe) { flex: none; min-width: 0; font-size: 0; padding-left: 12px; padding-right: 12px; }
.wb-top.wb-eng .wb-ab.eigen[data-kurz]:not(.eingabe)::before { content: attr(data-kurz); font-size: 13px; }
/* Suche gibt zuerst Platz ab – bis auf die Lupe (Ralph 26.10.2026, b3: „Workspa…“, „Seite su“); ist sie zu schmal für Text, verschwindet der
   Platzhalter, beim Tippen bekommt sie wieder Platz. Erst danach greift workspace-bento-reiter.js (Kürzel, eigene Zeile) – Reiter werden nie gekürzt. */
@media (min-width: 901px) {
  .wb-top > .wb-abschnitte { flex-shrink: .001; }
}
:root.ws-bento .wb-top.wb-umbruch { flex-wrap: wrap; height: auto; row-gap: 8px; }
.wb-top.wb-umbruch .wb-abschnitte { order: 5; flex: 1 1 calc(100% - 50px); flex-wrap: wrap; }
.wb-top.wb-umbruch .wb-rund.wb-neu { order: 6; }
.wb-luecke { flex: 1; }
.wb-treffer { position: absolute; top: 52px; left: 0; right: 0; background: var(--wb-karte); border-radius: var(--wb-r-k); padding: 8px;
  box-shadow: var(--marke-schatten); display: flex; flex-direction: column; animation: wbRein .25s ease both; z-index: 80; }
.wb-treffer button { border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: var(--marke-r-l); cursor: pointer;
  display: flex; justify-content: space-between; gap: 10px; font: 500 13px var(--marke-schrift); color: var(--wb-text); }
.wb-treffer button:hover, .wb-treffer button.an { background: var(--wb-weich); }
.wb-treffer small { color: var(--wb-leise); font-size: 12px; }
.wb-rund { position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--wb-karte); color: var(--wb-text);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; flex: none; }
.wb-rund:hover { background: var(--wb-weich); }
.wb-rund svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wb-zaehler { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--marke-r-pill);
  background: var(--marke-gefahr); color: #fff; font: 700 11px/18px var(--marke-schrift); text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--wb-grund); }
.wb-zaehler[hidden] { display: none; }
/* „+" für eigene Bereiche, kleiner und leiser direkt hinter der letzten Pille */
.wb-rund.wb-neu { width: 34px; height: 34px; margin-left: 4px; background: transparent; color: var(--wb-leise); }
.wb-rund.wb-neu:hover { background: var(--wb-karte); color: var(--wb-text); }
.wb-rund.wb-neu svg { width: 16px; height: 16px; }
/* Kalender-Knopf nur, wenn das Konto den Kalender hat; Zahnrad (Einstellungen) ersetzt seit 24.10.2026 die Konto-Pille */
.wb-rund[hidden] { display: none; }
/* Zahnrad-Platz = Hell/Dunkel-Schalter (seit 24.10.2026): zeigt wie #themeToggleBtn den aktuellen Zustand — Mond im Dunkeln, Sonne im Hellen */

/* Pfad über einem geöffneten Bereich: seit 24.10.2026 durch die Seiten-Pille ersetzt */
:root.ws-bento #wbPfad { display: none !important; }

/* ── Bereiche darunter: eine große weiße Karte auf grauem Grund (Einschweben nur beim ersten Öffnen) ── */
:root.ws-bento .app-shell { margin: 0 20px 20px; border-radius: var(--wb-r); overflow: hidden; background: var(--wb-karte); box-shadow: var(--wb-rand); }
:root.ws-bento.wb-shell-rein .app-shell { animation: wbRein .4s cubic-bezier(.2, .8, .2, 1) both; }
:root.ws-bento-start .app-shell, :root.ws-bento-start #wbPfad { display: none !important; }

/* ── Startseite ── */
:root.ws-bento-start #wbStart { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; padding: 12px 20px 20px; margin-top: -12px; /* Platz für Hover-Hub + Schatten oben; Abstand zur Kopfzeile wie früher (Ralph 24.10.) */ box-sizing: border-box; overflow-y: auto; overflow-x: hidden; }
/* Kopfzeile liegt hinter dem Kachelbereich (Ralph 24.10.2026): Hover und gezogene Kacheln dürfen über sie hinaus.
   Der Bereich selbst lässt Klicks durch (Kopfzeile bleibt bedienbar), nur sein Inhalt nimmt sie an. Beim Ziehen reicht die
   Schnittkante bis ganz nach oben (margin und padding gleichen sich aus, Scroll-Stand bleibt). */
:root.ws-bento-start #wbStart { position: relative; z-index: 61; pointer-events: none; }
:root.ws-bento-start #wbStart > * { pointer-events: auto; }
:root.ws-bento-start.wb-zieht #wbStart { margin-top: -88px; padding-top: 88px; -webkit-mask-image: none; mask-image: none; }
/* Rand blendet erst beim Scrollen ein (scroll-gesteuert) — in Ruhe bleibt der Hover-Platz oben voll sichtbar */
@property --wb-rand-oben { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes wbRandOben { from { --wb-rand-oben: 0px; } to { --wb-rand-oben: 12px; } }
:root.ws-bento-start #wbStart { -webkit-mask-image: linear-gradient(to bottom, transparent var(--wb-rand-oben), #000 var(--wb-rand-oben)); mask-image: linear-gradient(to bottom, transparent var(--wb-rand-oben), #000 var(--wb-rand-oben));
  animation: wbRandOben linear both; animation-timeline: scroll(self); animation-range: 0 12px; }
/* Ralph 24.10.2026 („Verwaschung sieht billig aus"): statt weichem Ausblenden eine saubere Kante genau an der Kopfzeile,
   darunter eine feine Linie mit leichtem Schatten — erscheint erst beim Scrollen */
@keyframes wbKanteEin { from { opacity: 0; } to { opacity: 1; } }
:root.ws-bento-start #wbStart::before { content: ''; position: sticky; top: 0; z-index: 5; display: block; flex: none; height: 0; margin: 0 -20px;
  box-shadow: 0 0 0 .5px var(--wb-linie), 0 6px 16px rgba(15, 23, 42, .10); pointer-events: none; opacity: 0;
  animation: wbKanteEin linear both; animation-timeline: scroll(); animation-range: 0 12px; }
:root.ws-bento-start.wb-zieht #wbStart::before { display: none; }
.wb-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 168px; grid-auto-flow: dense; gap: 16px; }
/* Startseite in halben Feldern (workspace-bento-raster.js, Ralph 25.10.2026: ½ × ½-Bentos): 12 halbe Spalten, halbe Reihen.
   2 halbe Reihen + Abstand = 168 px — ein 1 × 1-Bento steht exakt wie vorher. (.wb-raster der Notizen-Seite bleibt ganz.) */
#wbRaster { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 76px; }
/* Mini-Bento (½ breit oder ½ hoch): nur Symbol und Name in einer Zeile; breit und flach → nebeneinander */
#wbRaster .wb-k.mini { padding: 6px 8px; border-radius: var(--wb-r-k); container-type: size; }
.wb-mini { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.wb-mini-sym { flex: none; display: inline-flex; }
:root .wb-k .wb-mini-sym > * { width: 28px; height: 28px; border-radius: var(--marke-r-s, 6px); }
:root .wb-k .wb-mini-sym img, :root .wb-k .wb-mini-sym svg { width: 18px; height: 18px; }
:root .wb-k .wb-mini-sym b { font-size: 13px; }
.wb-mini-name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 12px/16px var(--marke-schrift); color: var(--wb-text); }
@container (min-aspect-ratio: 2/1) { .wb-mini { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 0 4px; text-align: left; } }
#wbRaster .wb-k.mini.griff::after { right: 4px; bottom: 4px; width: 8px; height: 8px; }
#wbRaster .wb-k.mini.gehoben .wb-ecke { width: 24px; height: 24px; background-position: right 5px bottom 5px; background-size: 10px 10px; }
/* Ziehen (workspace-bento-zug.js, Ralph 25.10.2026): gestrichelter Zielplatz, markiertes Tausch-Ziel, Mülleimer unten links */
#wbRaster { position: relative; }   /* Zielplatz liegt absolut im Rasterfeld und verdrängt keine Bentos */
#wbRaster .wb-platz { position: absolute; inset: 0; border: 2px dashed color-mix(in srgb, var(--marke-akzent) 55%, transparent); border-radius: var(--wb-r); background: color-mix(in srgb, var(--marke-akzent) 6%, transparent);
  box-sizing: border-box; pointer-events: none; z-index: 0; }
#wbRaster .wb-k.wb-ziel:not(.ziehend) { box-shadow: 0 0 0 2px var(--marke-akzent), var(--wb-rand); }
.wb-muell { position: fixed; left: 24px; bottom: 24px; z-index: 1000; width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; pointer-events: none;
  background: var(--marke-flaeche); color: var(--marke-text-2); box-shadow: var(--marke-schatten); opacity: 0; transform: scale(.8); transition: opacity .18s, transform .18s, background .15s, color .15s; }
.wb-muell.da { opacity: 1; transform: scale(1); }
.wb-muell.ueber { background: var(--marke-gefahr); color: #fff; transform: scale(1.18); }
@media (prefers-reduced-motion: reduce) { .wb-muell { transition: none; } }
.wb-k { position: relative; background: var(--wb-karte); color: var(--wb-text); border-radius: var(--wb-r); padding: 20px 22px; box-sizing: border-box;
  display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; cursor: pointer; user-select: none; box-shadow: var(--wb-rand);
  transition: box-shadow .25s, transform .25s; touch-action: manipulation; font-family: var(--marke-schrift); container-type: inline-size; outline: none; }
.wb-k.rein { animation: wbRein .5s cubic-bezier(.2, .8, .2, 1) both; }
/* Anheben beim Überfahren — nicht bei Kacheln mit Eingabefeld (man tippt dort) und nicht beim Anordnen */
.wb-k:hover:not(.eingabe):not(:has(input, textarea)) { box-shadow: var(--wb-schatten-hover); transform: translateY(-3px); }
.wb-k.eingabe:hover, .wb-k:has(input, textarea):hover { box-shadow: var(--wb-schatten-hover); }
/* Sichtbarer Tastatur-Fokus in Markenfarbe */
.wb-k:focus-visible { box-shadow: 0 0 0 2px var(--wb-grund), 0 0 0 4px var(--marke-akzent); }
.wb-top button:focus-visible, .wb-kontext button:focus-visible, .wb-k button:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; }
/* Farbige Kacheln: alles darin richtet sich nach --wb-text/--wb-leise der Kachel */
.wb-k.blau { background: linear-gradient(135deg, var(--wb-blau-k, var(--wb-akzent)) 30%, color-mix(in srgb, var(--wb-blau-k, var(--wb-akzent)) 66%, var(--wb-verlauf-ziel))); --wb-text: var(--wb-auf-farbe); --wb-leise: var(--wb-auf-farbe-leise); --wb-linie: var(--wb-auf-farbe-linie); }
.wb-k.dunkel { background: linear-gradient(135deg, var(--wb-dunkel) 30%, color-mix(in srgb, var(--wb-dunkel) 74%, var(--wb-verlauf-ziel))); --wb-text: var(--wb-auf-farbe); --wb-leise: var(--wb-auf-farbe-leise); --wb-linie: var(--wb-auf-farbe-linie); }
.wb-k.kraeftig { background: linear-gradient(135deg, var(--kf) 30%, color-mix(in srgb, var(--kf) 66%, var(--wb-verlauf-ziel))); --wb-text: var(--wb-auf-farbe); --wb-leise: var(--wb-auf-farbe-leise); --wb-linie: var(--wb-auf-farbe-linie); --wb-weich: rgba(255, 255, 255, .14); }
.wb-k.zart { background: linear-gradient(135deg, var(--kf) 30%, color-mix(in srgb, var(--kf) 66%, var(--wb-verlauf-ziel))); --wb-text: var(--marke-grafit); --wb-leise: rgba(20, 20, 29, .66); --wb-linie: rgba(20, 20, 29, .10); --wb-weich: rgba(20, 20, 29, .06); }
.wb-k.blau, .wb-k.dunkel, .wb-k.kraeftig, .wb-k.zart { color: var(--wb-text); }
/* Farben für alle Kacheln aus dem Farb-Pinsel (frei gewählt); eine Kachel mit eigener Farbe setzt ihre Werte direkt an sich */
.wb-k:not(.blau):not(.dunkel):not(.kraeftig):not(.zart):not(.plus):not(.frei) { background: linear-gradient(135deg, var(--wb-g-flaeche, var(--wb-karte)) 30%, color-mix(in srgb, var(--wb-g-flaeche, var(--wb-karte)) 66%, var(--wb-verlauf-ziel)));
  --wb-text: var(--wb-g-text, var(--marke-text)); --wb-leise: color-mix(in srgb, var(--wb-g-text, var(--marke-text)) 68%, transparent); color: var(--wb-text); }
.wb-k.frei { color: var(--wb-text); }
/* Frei gefärbte Fläche (eigene Kachelfarbe oder Pinsel auf alle Kacheln): Blasen, Eingabe, Zeilen und Knöpfe leiten sich aus der Fläche ab,
   in Hell UND Dunkel (Ralph 24.10.2026: im Dunkelmodus waren Blasen/Eingabe auf hell gefärbten Kacheln unlesbar) */
:is(.wb-k[data-flaeche="hell"], .wb-k.zart, :root[data-g-flaeche="hell"] .wb-k:not(.blau, .dunkel, .kraeftig, .zart, .plus, .frei)) {
  --wb-weich: rgba(20, 20, 29, .06); --wb-linie: rgba(20, 20, 29, .10); --wb-feld: rgba(20, 20, 29, .06); --wb-blase-du: rgba(20, 20, 29, .10);
  --wb-verlauf-ziel: #fff; }   /* helle Fläche läuft auch im Dunkelmodus ins Weiße aus, nicht ins Dunkelgrau — sonst wird dunkle Schrift unten rechts unlesbar */
:is(.wb-k[data-flaeche="farbig"], .wb-k.kraeftig, .wb-k.blau, :root[data-g-flaeche="farbig"] .wb-k:not(.blau, .dunkel, .kraeftig, .zart, .plus, .frei)) {
  --wb-weich: rgba(255, 255, 255, .16); --wb-feld: rgba(20, 20, 29, .22); --wb-blase-du: rgba(255, 255, 255, .26); }   /* Eingabe dunkler getönt: liegt unten im hellen Verlaufsende */
:root[data-g-flaeche] .wb-k:not(.blau, .dunkel, .kraeftig, .zart, .plus, .frei) { --wb-leise: color-mix(in srgb, var(--wb-text) 82%, transparent); }
:root[data-g-flaeche] .wb-k:not(.blau, .dunkel, .kraeftig, .zart, .plus, .frei) :is(.wk-knopf, .wkc-gross, .zk-knopf:not(.haupt, .gefahr)) { background: #fff; color: var(--marke-grafit); }
.wk-inhalt { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wk-l { font-size: 12px; font-weight: 500; color: var(--wb-leise); display: flex; justify-content: space-between; gap: 8px; }
/* Zahlen passen sich der Kachelbreite an (Container-Einheit) — „1,2 Mio €" passt auch schmal */
.wk-z { font-size: clamp(20px, 15cqi, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-top: auto; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-z.gross { font-size: clamp(22px, 13cqi, 40px); }
.wk-z.wk-wort { font-size: clamp(16px, 11cqi, 22px); }
.wk-z.rot { color: var(--wb-rot); } .wk-z.gruen { color: var(--wb-gruen); }
.wb-k.kraeftig .wk-z.rot, .wb-k.blau .wk-z.rot, .wb-k.kraeftig .wk-z.gruen, .wb-k.blau .wk-z.gruen { color: var(--wb-text); }
.wk-s { font-size: 12px; color: var(--wb-leise); margin-top: 4px; }
.wk-start { display: inline-block; padding: 3px 10px; border-radius: var(--marke-r-pill); background: var(--wb-akzent); color: #fff; font-weight: 600; }
.wk-h { margin: 0 0 10px; font-size: 15px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wk-h small { font-size: 12px; font-weight: 500; color: var(--wb-leise); }
.wk-gruss { display: flex; flex-direction: column; height: 100%; }
.wk-gruss h2 { margin: auto 0 0; font-size: clamp(24px, 9cqi, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
.wk-gruss h2.wk-bereich-name { font-size: clamp(22px, 8cqi, 30px); }
.wk-gruss p { margin: 0; font-size: 14px; opacity: .9; }
.wk-gruss .wk-unten { margin-top: 16px; }
.wk-liste { display: flex; flex-direction: column; min-height: 0; overflow: hidden; margin: 0 -8px; }
.wk-zeile { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px; border: 0; border-top: 1px solid var(--wb-linie);
  background: none; text-align: left; font: 500 13px var(--marke-schrift); color: inherit; border-radius: var(--marke-r-m); cursor: pointer; transition: background .15s, padding .2s; }
.wk-zeile:hover { background: var(--wb-weich); padding-left: 12px; }
.wk-zeile span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-zeile small { color: var(--wb-leise); font-size: 12px; white-space: nowrap; }
.wk-zeile small.rot { color: var(--wb-rot); }
.wk-lade { flex: 1; display: flex; align-items: center; justify-content: center; }
.wk-lade .a4h-spin { width: 30px !important; height: 30px !important; color: var(--marke-ladekreis); }   /* !important: a4hSpinner setzt 14 px inline */
/* Ladekreis immer mittig (Ralph 24.10.2026): Lädt ein Kreis ALLEIN für eine Kachel oder Fläche, füllt seine Hülle die freie
   Fläche und der Kreis steht waagrecht und senkrecht in deren Mitte. Kleine Kreise in einer Textzeile („wird gespeichert …")
   bleiben in der Zeile – hier stehen nur Hüllen, die nie Text neben dem Kreis tragen. Der Rand rechts, den a4hSpinner() für
   Text mitbringt, fällt in diesen Hüllen weg (sonst sitzt der Kreis 3 px links der Mitte). */
:is(.bs-d-text, .bw-vorschau, .bw-datei, .bfo-vorlagen, .bfo-qr, .pf-laedt):has(> .bs-lade:only-child) { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 120px; }
:is(.bs-leer, .bs-d-text, .bw-vorschau, .bw-datei, .bfo-vorlagen, .bfo-qr, .pf-laedt) > .bs-lade:only-child { flex: 1 1 auto; justify-content: center; }
:is(.wk-lade, .bk-lade-kachel, .bc-d-lade, .wbk-lade, .kw-lade, .btr-n-lade, .bs-leer) > .a4h-spin,
:is(.bs-leer, .bs-d-text, .bw-vorschau, .bw-datei, .bfo-vorlagen, .bfo-qr, .pf-laedt) > .bs-lade:only-child > .a4h-spin { margin: 0 !important; }
/* Fehler (statt einer falschen 0) und leere Listen: Hinweis + Knopf */
.wk-fehler, .wk-leer { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; font-size: 13px; color: var(--wb-leise); min-height: 0; }
.wk-leer { justify-content: center; }
.wk-fehler span { color: var(--wb-text); font-weight: 600; }
.wk-knopf { height: 30px; padding: 0 12px; border: 0; border-radius: var(--marke-r-pill); background: var(--wb-weich); color: var(--wb-text);
  font: 600 12px var(--marke-schrift); cursor: pointer; transition: background .2s; }
.wk-knopf:hover { background: color-mix(in srgb, var(--wb-text) 10%, var(--wb-karte)); }
/* Knöpfe behalten ihre eigene Farbe, egal wie die Kachel gefärbt ist (Ralph 24.10.2026): Schrift richtet sich nach dem Knopf,
   nicht nach der Kachel. Auf farbigen Kacheln: weiße Pille mit dunkler Schrift. */
.wk-knopf { color: var(--marke-text); }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) :is(.wk-knopf, .wkc-gross) { background: #fff; color: var(--marke-grafit); }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .wk-knopf:hover { background: color-mix(in srgb, #fff 86%, var(--marke-grafit)); }
/* Feste letzte Kachel „+ Kachel hinzufügen" */
.wb-k.plus { background: transparent; border: 2px dashed var(--marke-linie-stark); box-shadow: none; }
.wb-k.plus:hover { background: var(--wb-karte); transform: none; box-shadow: none; }
.wk-plus { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--wb-leise); font-size: 13px; font-weight: 600; text-align: center; }
.wk-plus svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Frage-Kachel: direkt mit dem Agenten schreiben */
.wk-frage { display: flex; align-items: center; gap: 8px; margin-top: auto; background: var(--wb-weich); border-radius: var(--marke-r-pill); padding: 4px 4px 4px 16px; }
.wk-frage input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--wb-text); font: 400 14px var(--marke-schrift); }
.wk-frage input::placeholder { color: var(--wb-leise); }
.wk-frage button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--wb-dunkel); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.wk-frage svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Seiten-Kacheln (jeder Eintrag der alten Seitenleiste als eigene Kachel) — nur Titel, kein Symbol (Ralph 24.10.2026) */
.wk-kopf { display: flex; align-items: center; gap: 10px; }
.wk-titel { font: 700 14px var(--marke-schrift); color: var(--wb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-beschr { margin-top: auto; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Lebende Chat-Kachel (Ralph 24.10.2026): Verlauf der offenen Unterhaltung + Eingabe; Titel/Pfeil öffnet den großen Chat */
.wkc-kopf { display: flex; align-items: center; gap: 8px; margin: -4px 0 8px; flex: none; min-width: 0; }
.wkc-kopf small { font-size: 12px; color: var(--wb-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkc-titel { border: 0; background: none; padding: 0; font: 700 15px var(--marke-schrift); color: var(--wb-text); cursor: pointer; white-space: nowrap; }
.wkc-titel:hover { color: var(--wb-akzent); }
/* Kachel-Überschrift — EINE Regel für alle Kacheln (Ralph 24.10.2026: „mal fett, mal normal“): fett, 15 px, Schriftfarbe der
   Kachel (auf farbigen Kacheln folgt sie --wb-text). Kleine Zwischenzeilen in einer Kachel (.zk-unter, .zk-unterz) bleiben leise. */
.wk-inhalt > .wk-l:not(.zk-unterz), .wkk > .wk-l, .wkk-kopf > .wk-l, .wk-h, .wk-titel, .wkc-titel { font: 700 15px/1.3 var(--marke-schrift); color: var(--wb-text); letter-spacing: 0; }
.wkc-gross { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--wb-weich); color: var(--wb-text); flex: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; }
.wkc-gross:hover { background: var(--marke-feld); }
.wkc-gross svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Hinzufügen im Bento (Ralph 27./28.10.2026, wie AIOS .bk-kopfplus): dezentes rundes ＋ ganz rechts in der Kopfzeile statt
   „+ Neue …“-Pille im Inhalt – in allen Größen gleich (auch 1×1). 26 px, Strich 14 px; Linie und Fläche aus der leisen Schriftfarbe
   des Bentos, darum auf hellen, dunklen und eingefärbten Bentos (Pinsel, kräftig, blau, frei) gleich leise und lesbar. Tippfläche
   über ::after 36 px. Steht etwas Rechtes davor („3 ungelesen“), rückt es mit nach rechts; das ＋ bleibt immer zuletzt. */
.wb-kopfplus { position: relative; flex: none; align-self: center; width: 26px; height: 26px; margin: -5px 0 -5px auto; padding: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; font: inherit;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent); background: color-mix(in srgb, currentColor 6%, transparent);
  color: var(--wb-leise); transition: background .15s, border-color .15s, color .15s; }
.wb-kopfplus::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
.wb-kopfplus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.wb-kopfplus:hover:not(:disabled) { color: var(--wb-text); border-color: color-mix(in srgb, currentColor 45%, transparent); background: color-mix(in srgb, currentColor 14%, transparent); }
.wb-kopfplus:disabled { opacity: .5; cursor: default; }
.wb-kopfplus[hidden] { display: none; }
:is(.wk-h, .wk-l, .wk-kopf) > :is(small, .il-rechts):has(+ .wb-kopfplus) { margin-left: auto; }
:is(small, .il-rechts) + .wb-kopfplus { margin-left: 2px; }
:is(.wk-kopf, .wk-l, .wk-h):has(> .wb-kopfplus) { align-items: center; min-width: 0; }
:is(.wk-kopf, .wk-l, .wk-h):has(> .wb-kopfplus) > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root.bt-pinsel .wb-kopfplus { pointer-events: none; }
.wkc-verlauf { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 6px; margin: 0 -6px 10px; padding: 0 6px;
  user-select: text; cursor: auto; scrollbar-width: thin; }
.wkc-letzte { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 8px; }
.wkc-m { align-self: flex-start; max-width: 88%; background: var(--wb-weich); border-radius: var(--marke-r-l); padding: 8px 12px; font-size: 13px; line-height: 1.45;
  color: var(--wb-text); display: flex; gap: 8px; align-items: center; }
.wkc-m span { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.wkc-letzte .wkc-m span { -webkit-line-clamp: 3; }
.wkc-m.du { align-self: flex-end; background: var(--wb-blase-du, var(--wb-akzent-zart)); }
.wkc-m.tippt { color: var(--wb-leise); }
.wkc-m.fehler { color: var(--wb-rot); }
.wkc-m .a4h-spin { width: 14px; height: 14px; flex: none; color: var(--marke-ladekreis); }
.wk-frage.wkc-eingabe { margin-top: 0; flex: none; background: var(--wb-feld, var(--wb-grund)); }
/* Eigener (externer) KI-Agent in der Chat-Kachel: deutlich anders markiert (Türkis aus der Marke) */
.wb-k.extern { box-shadow: inset 0 0 0 2px var(--marke-tuerkis-tief), var(--wb-rand); }
.wkc-extern .wkc-titel { color: var(--marke-tuerkis-tief); }
.wkc-extern small { color: var(--marke-tuerkis-tief); font-weight: 600; }
.wkc-extern small { display: inline-flex; align-items: center; gap: 4px; }
.wkc-ea-app { margin-left: auto; margin-right: 6px; padding: 4px 12px; border-radius: var(--marke-r-pill, 999px); background: var(--marke-tuerkis-tief); color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: filter .15s; }
.wkc-ea-app:hover { filter: brightness(1.12); }
.wkc-ea-app[hidden] { display: none; }
.wkc-ea-sym svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.wb-k.extern .wkc-eingabe button { background: var(--marke-tuerkis-tief); }
.wb-k.extern .wkc-m.du { background: color-mix(in srgb, var(--marke-tuerkis-tief) 14%, transparent); }

/* Größe über die Ecke rechts unten (wie im AIOS, Ralph 24.10.2026): beim Überfahren erscheint ein dezentes
   Eck-Symbol (zwei Diagonalstriche in Schriftfarbe), der Größen-Zeiger nur im Eckbereich (22×22 px). */
.wb-k.griff::after { content: ''; position: absolute; right: 7px; bottom: 7px; width: 11px; height: 11px; pointer-events: none; opacity: .4;
  background: linear-gradient(135deg, transparent 0 46%, currentColor 46% 54%, transparent 54% 72%, currentColor 72% 80%, transparent 80%); transition: opacity .15s; }
.wb-k.plus.griff::after { display: none; }
.wb-k[data-kante="rechts-unten"] { cursor: nwse-resize; }
.wb-k[data-kante="rechts-unten"]::after { opacity: .9; }
.wb-k.ziehend::after { display: none; }
:root.wb-zieht, :root.wb-zieht * { user-select: none !important; }
:root.wb-zieht .wb-k:hover { transform: none; }
.wb-k.ziehend { z-index: 30; cursor: grabbing; animation: none !important; box-shadow: var(--wb-schatten-zug); pointer-events: none; transition: none; }

/* ── Größen-Ecke am Touch-Gerät (nach kurzem Halten) ── */
.wb-weg, .wb-ecke { display: none; }
.wb-weg svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* Touch: kurz gehalten = angehoben, mit Größen-Ecke */
.wb-k.gehoben:not(.ziehend) { transform: scale(1.03); box-shadow: var(--wb-schatten-zug); z-index: 5; }
.wb-k.gehoben:not([data-id="bereich"]):not(.plus) .wb-ecke { display: block; position: absolute; right: 0; bottom: 0; z-index: 3; width: 34px; height: 34px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 0 52%, currentColor 52% 57%, transparent 57% 68%, currentColor 68% 73%, transparent 73%) no-repeat right 9px bottom 9px / 14px 14px; opacity: .7; }

/* Fokus-Ansicht: Kachel groß vorn; Dringlichkeits-Puls */
.wb-k.fokus { box-shadow: 0 0 0 2px var(--wb-dunkel), var(--wb-rand); }
.wb-k.puls { animation: wbPuls 1.1s ease-out 2; }
@keyframes wbPuls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wb-rot) 55%, transparent); } 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--wb-rot) 0%, transparent); } }
/* Fixiert (Ralph 24.10.2026, workspace-bento-fixieren.js): nur während eine andere Kachel gezogen wird, tragen fixierte
   Kacheln und die Kopf-Kachel eine runde Plakette mit Pin-Nadel oben rechts und einen leicht gedämpften Rahmen. */
.wb-nadel { display: none; }
.wb-raster.wb-fix-zeigen .wb-k.fixiert:not(.ziehend) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--marke-text-2) 38%, transparent), var(--wb-rand); filter: saturate(.85); }
.wb-raster.wb-fix-zeigen .wb-k.fixiert:not(.ziehend) .wb-nadel { display: grid; place-items: center; position: absolute; top: 10px; right: 10px; z-index: 4; width: 26px; height: 26px;
  border-radius: 50%; background: var(--marke-flaeche); color: var(--marke-text); box-shadow: 0 0 0 1px var(--marke-linie), var(--wb-schatten-hover); pointer-events: none; animation: wbRein .18s ease both; }
.wb-nadel svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Rechtsklick-Menü */
.wb-kontext { position: fixed; z-index: 95; min-width: 250px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; overflow-x: hidden;
  background: var(--wb-karte); border-radius: var(--wb-r-k); padding: 6px; box-shadow: var(--marke-schatten); animation: wbRein .18s ease both;
  display: flex; flex-direction: column; font-family: var(--marke-schrift); box-sizing: border-box; }
.wb-kontext button { border: 0; background: none; text-align: left; padding: 9px 12px; border-radius: var(--marke-r-m); cursor: pointer;
  font: 500 13px var(--marke-schrift); color: var(--wb-text); position: relative; }
.wb-kontext button small { color: var(--wb-leise); font-size: 12px; margin-left: 6px; }
.wb-kontext button:hover { background: var(--wb-weich); }
.wb-kontext .wb-info { padding: 6px 12px; font-size: 12px; color: var(--wb-leise); }
.wb-kontext .wb-kopfz { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; color: var(--wb-leise); text-transform: uppercase; letter-spacing: .04em; }
.wb-kontext hr { border: 0; border-top: 1px solid var(--wb-linie); margin: 4px 6px; }
.wb-kontext .wb-haken { padding-left: 34px; }
.wb-kontext .wb-haken::before { content: ''; position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 2px solid var(--marke-linie-stark); border-radius: 6px; box-sizing: border-box; background: var(--wb-karte); }
.wb-kontext .wb-haken.an::before { background: var(--wb-dunkel); border-color: var(--wb-dunkel); }
.wb-kontext .wb-haken.an::after { content: ''; position: absolute; left: 19px; top: 50%; width: 4px; height: 8px; margin-top: -6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Größenstufen S/M/L/XL und Farbfelder im Menü */
.wb-groessen { display: flex; gap: 2px; padding: 2px 8px 6px; }
/* S/M/L/XL als Pillen wie die Bereichs-Leiste: inaktiv nur Text, gewählt grafit */
.wb-kontext .wb-groessen button { flex: 1; text-align: center; height: 32px; padding: 0; border: 0; border-radius: var(--marke-r-pill); font-weight: 600; font-size: 12px; color: var(--wb-leise); }
.wb-kontext .wb-groessen button:hover { background: var(--marke-feld); color: var(--wb-text); }
.wb-kontext .wb-groessen button.an { background: var(--wb-dunkel); color: #fff; }
.wb-farbfelder { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 8px; max-width: 250px; }
.wb-kontext .wb-farbfeld { width: 22px; height: 22px; padding: 0; border-radius: 50%; background: var(--ff); border: 0; box-shadow: inset 0 0 0 1px var(--marke-linie-stark); }
.wb-kontext .wb-farbfeld:hover { background: var(--ff); transform: scale(1.12); }
.wb-kontext .wb-farbfeld.leer { background: linear-gradient(135deg, var(--wb-karte) 0 45%, var(--wb-rot) 45% 55%, var(--wb-karte) 55%); }
.wb-kontext .wb-farbfeld.an { box-shadow: 0 0 0 2px var(--wb-karte), 0 0 0 4px var(--wb-text); }
.wb-farben { width: 300px; }
.wb-farbzeile > span { display: block; padding: 6px 12px 0; font-size: 12px; font-weight: 600; color: var(--wb-text); }

/* Kurze Meldung unten rechts (Stil-Basis a4h-toast) mit „Rückgängig" */
/* Bento-Look (Ralph 24.10.2026): weiße Karte mit großer Rundung, grüner Punkt statt Randstreifen, „Rückgängig" als schwarze Pille */
:root.ws-bento .wb-meldung { position: fixed; right: 16px; bottom: 16px; z-index: 110; display: flex; align-items: center; gap: 12px; max-width: min(380px, calc(100vw - 32px));
  padding: 8px 8px 8px 16px; border: 0; border-radius: var(--wb-r-k); min-height: 48px;
  background: var(--wb-karte); color: var(--wb-text); box-shadow: var(--marke-schatten), var(--wb-rand); font: 500 13px var(--marke-schrift); animation: wbRein .25s ease both; box-sizing: border-box; }
:root.ws-bento .wb-meldung::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--wb-gruen); flex: none; }
:root.ws-bento .wb-meldung > span { flex: 1; min-width: 0; }
.wb-meldung-knopf { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: var(--marke-r-pill); background: var(--wb-dunkel); color: #fff; font: 600 12px var(--marke-schrift); cursor: pointer; white-space: nowrap; }
.wb-meldung-knopf:hover { background: color-mix(in srgb, var(--wb-dunkel) 84%, #fff); }

/* Übergang: Kachel wächst zum Bereich */
.wb-flug { position: fixed; z-index: 75; border-radius: var(--wb-r); background: var(--wb-karte); box-shadow: 0 20px 50px rgba(15, 23, 42, .18); pointer-events: none; }

@keyframes wbRein { from { opacity: 0; transform: translateY(18px) scale(.965); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .wb-ab.wb-seite, .wb-k.rein, .wb-k.puls, :root.ws-bento .app-shell { animation: none !important; }
  .wb-k:hover { transform: none !important; }
}

/* Tablet (700–1100 px): Leiste umbrechen; Spalten (3 bzw. 4) setzt workspace-bento.js */
@media (max-width: 1100px) {
}
@media (max-width: 900px) {
  :root.ws-bento .wb-top { flex-wrap: wrap; height: auto; padding: 12px; }
  .wb-abschnitte { order: 5; flex: 1 1 calc(100% - 50px); flex-wrap: wrap; }
  .wb-rund.wb-neu { order: 6; }
  :root.ws-bento .app-shell { margin: 0 12px 12px; }
  :root.ws-bento-start #wbStart { padding: 12px 12px 12px; }
  .wb-raster { gap: 12px; }
  #wbRaster { grid-auto-rows: 78px; }   /* (168 − 12) / 2 */
}
/* Desktop und Tablet (ab 700 px): feste Entwurfsmaße (Reihe 76 px, Abstand 16 px), das Raster wird als Ganzes skaliert
   (workspace-bento-raster.js einpassen) — Spalten, Abstand und Reihenhöhe ändern sich nie mit der Fenstergröße (Ralph 28.10.2026). */
@media (min-width: 700px) {
  html.wb-fest #wbRaster { }   /* (feste 4-Spalten-Anordnung zurückgenommen, Ralph 28.10.2026) */
}
/* Handy (< 700 px): eine Spalte in „Heute"-Reihenfolge, etwas flachere Reihen */
@media (max-width: 699px) {
  .wb-raster { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 132px; }
  #wbRaster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 60px; }   /* (132 − 12) / 2; zwei Minis nebeneinander */
  .wb-k { padding: 16px 18px; }
  /* Kopf: Logo + Hell/Dunkel + Einstellungen, darunter Bereiche, darunter Suche mit Kontakte, Kalender und Pinsel daneben
     (Fotoprüfung 24.10.2026: Nachrichten muss am Handy erreichbar sein — zweite Zeile statt Menü) */
  /* Reiter, offene Seite (z. B. Einstellungen) und „+“ fließen in einer Zeile – „+“ am Ende der Reiter, keine eigene Zeile für die
     Seiten-Pille (Ralph 26.10.2026, b5 – wie AIOS) */
  /* Kopf kompakt (Ralph 28.10.2026): Zeile 1 Logo · Hell/Dunkel · Einstellungen (feste Plätze), Zeile 2 alle Reiter in einer wischbaren Leiste,
     Zeile 3 „+“ · Suche · Knöpfe. Die Seite selbst scrollt nie seitlich — nur die Reiterleiste wischt. */
  :root.ws-bento .wb-top > .wb-abschnitte { display: flex; flex: 0 0 100%; order: 5; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overflow-y: hidden; max-width: 100%;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .wb-abschnitte::-webkit-scrollbar { display: none; }
  :root.ws-bento .wb-top > .wb-abschnitte > .wb-ab { flex: none; min-width: 0; overflow: visible; }
  :root.ws-bento .wb-top > .wb-logo, :root.ws-bento .wb-top > #wbLogo { flex: 1 1 auto; }
  .wb-abschnitte > * { order: 5; }
  .wb-abschnitte > .wb-ab.wb-seite { max-width: calc(100% - 50px); }
}


/* ── Baukasten für alle Bento-Fenster (Ralph 24.10.2026: „die Designsprache auf dieses Bento angepasst — alles, wie es im Bento aussieht") ──
   Abgeleitet aus Kopfzeile und Kacheln: Pillen wie die Bereichs-Leiste (inaktiv nur Text, aktiv grafit gefüllt), Hauptknopf schwarz und rund
   wie der Senden-Knopf, leiser Knopf grau gefüllt, Kreis-Knöpfe, Eingabe grau gefüllt und rund wie das Suchfeld, Fenster weiß mit großer Rundung.
   Benutzt von: Farbfenster/Pinsel, Rechtsklick-Menü, Meldung, Rückfrage, Befehlszeile/Fokus, Eigener Agent, KI-Kachel, Zusatz-Kacheln.
   marke-ausnahme: Bento-Look geht vor (Ralph 24.10.2026, ausdrücklich) — Knöpfe als Pillen statt Ecken 9 px, Hauptknopf und Auswahl grafit statt Lila/Blau */
.wb-fenster { background: var(--wb-karte, var(--marke-flaeche)); color: var(--wb-text, var(--marke-text)); border: 0; border-radius: var(--wb-r, 22px);
  box-shadow: var(--marke-schatten), var(--wb-rand, 0 0 0 0 transparent); font-family: var(--marke-schrift); box-sizing: border-box; }
.wb-fenster-titel { margin: 0; font: 700 15px var(--marke-schrift); color: var(--wb-text, var(--marke-text)); letter-spacing: 0; text-transform: none; }
.wb-pillen { display: flex; flex-wrap: wrap; gap: 2px; }
.wb-pille { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--marke-r-pill); background: transparent;
  color: var(--wb-leise, var(--marke-text-2)); font: 600 12px var(--marke-schrift); cursor: pointer; white-space: nowrap; box-sizing: border-box; transition: background .2s, color .2s; }
.wb-pille:hover { background: var(--marke-feld); color: var(--wb-text, var(--marke-text)); }
.wb-pille[aria-pressed="true"], .wb-pille[aria-selected="true"], .wb-pille[aria-checked="true"], .wb-pille.an, .wb-pille.is-on { background: var(--wb-auswahl, var(--marke-nav-blau)); color: #fff; }
.wb-knopf, .wb-knopf-leise, .wb-knopf-gefahr { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border: 0;
  border-radius: var(--marke-r-pill); font: 600 13px var(--marke-schrift); cursor: pointer; white-space: nowrap; box-sizing: border-box; text-decoration: none;
  transition: background .2s, color .2s, opacity .2s; }
.wb-knopf { background: var(--wb-dunkel, var(--marke-grafit)); color: #fff; }
.wb-knopf:hover:not(:disabled) { background: color-mix(in srgb, var(--wb-dunkel, var(--marke-grafit)) 84%, #fff); }
.wb-knopf-leise { background: var(--wb-weich, var(--marke-flaeche-2)); color: var(--wb-text, var(--marke-text)); }
.wb-knopf-leise:hover:not(:disabled) { background: color-mix(in srgb, var(--wb-text, var(--marke-text)) 10%, var(--wb-karte, var(--marke-flaeche))); }
.wb-knopf-gefahr { background: var(--wb-rot, var(--marke-gefahr)); color: #fff; }
.wb-knopf-gefahr:hover:not(:disabled) { background: color-mix(in srgb, var(--wb-rot, var(--marke-gefahr)) 86%, #000); }
.wb-knopf-klein { height: 30px; padding: 0 12px; font-size: 12px; }
.wb-knopf:disabled, .wb-knopf-leise:disabled, .wb-knopf-gefahr:disabled { opacity: .5; cursor: default; }
/* Kreis-Knopf im Fenster (Schließen, Vergrößern): klein, grau gefüllt wie der Vergrößern-Knopf der Chat-Kachel */
.wb-rund.wb-rund-klein { width: 32px; height: 32px; background: var(--wb-weich, var(--marke-flaeche-2)); color: var(--wb-text, var(--marke-text)); padding: 0; }
.wb-rund.wb-rund-klein:hover { background: color-mix(in srgb, var(--wb-text, var(--marke-text)) 10%, var(--wb-karte, var(--marke-flaeche))); }
.wb-rund.wb-rund-klein svg { width: 15px; height: 15px; }
.wb-feld { width: 100%; height: 40px; padding: 0 16px; border: 0; border-radius: var(--marke-r-pill); background: var(--wb-weich, var(--marke-flaeche-2));
  color: var(--wb-text, var(--marke-text)); font: 400 13px var(--marke-schrift); outline: 0; box-sizing: border-box; box-shadow: none; transition: box-shadow .15s; }
textarea.wb-feld { height: auto; min-height: 64px; padding: 10px 16px; border-radius: var(--wb-r-k, 14px); line-height: 1.45; }
.wb-feld::placeholder { color: var(--wb-leise, var(--marke-text-3)); }
.wb-feld:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--wb-text, var(--marke-text)) 30%, transparent); }
.wb-check { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: none; display: inline-grid; place-content: center; cursor: pointer;
  border: 2px solid var(--marke-linie-stark); border-radius: 6px; background: var(--wb-karte, var(--marke-flaeche)); box-sizing: border-box; transition: background .15s, border-color .15s; }
.wb-check:checked { background: var(--wb-dunkel, var(--marke-grafit)); border-color: var(--wb-dunkel, var(--marke-grafit)); }
.wb-check:checked::after { content: ''; width: 4px; height: 8px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wb-pille:focus-visible, .wb-knopf:focus-visible, .wb-knopf-leise:focus-visible, .wb-knopf-gefahr:focus-visible, .wb-rund:focus-visible, .wb-check:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--wb-text, var(--marke-text)) 35%, transparent); outline-offset: 2px; }

/* Rückfrage-Fenster (A4HDialog) über der Bento-Startseite im selben Look — die Seitenleisten-Ansicht und offene Bereiche bleiben beim Kanon-Dialog */
:root.ws-bento-start .a4h-dialog .a4h-modal { border-radius: var(--wb-r); padding: 22px; background: var(--wb-karte) !important; box-shadow: var(--marke-schatten), var(--wb-rand); }
:root.ws-bento-start .a4h-dialog .a4h-h2 { font: 700 15px var(--marke-schrift); }
:root.ws-bento-start .a4h-dialog .a4h-btn { height: 36px; padding: 0 16px; border: 0; border-radius: var(--marke-r-pill); font: 600 13px var(--marke-schrift); }
:root.ws-bento-start .a4h-dialog .a4h-btn--primary { background: var(--wb-dunkel); color: #fff; }
:root.ws-bento-start .a4h-dialog .a4h-btn--primary:hover { filter: none; background: color-mix(in srgb, var(--wb-dunkel) 84%, #fff); }
:root.ws-bento-start .a4h-dialog .a4h-btn--sec { background: var(--wb-weich); color: var(--wb-text); }
:root.ws-bento-start .a4h-dialog .a4h-btn--sec:hover { background: color-mix(in srgb, var(--wb-text) 10%, var(--wb-karte)); }
:root.ws-bento-start .a4h-dialog .a4h-btn--danger { background: var(--wb-rot); color: #fff; }
:root.ws-bento-start .a4h-dialog .a4h-field { height: 40px; border: 0; border-radius: var(--marke-r-pill); background: var(--wb-weich); padding: 0 16px; box-shadow: none; }
:root.ws-bento-start .a4h-dialog .a4h-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--wb-text) 35%, transparent); outline-offset: 2px; box-shadow: none; }
/* Home: Bildlaufleiste der Startfläche ausblenden (Ralph 07.11.2026: „Kacheln nicht bündig mit Top-Menü“) – sie nahm unter Windows
   rechts ein paar Pixel weg, die Kacheln endeten links vom Nachrichten-Knopf. Scrollen per Rad/Touch bleibt. */
:root.ws-bento-start #wbStart { scrollbar-width: none; }
:root.ws-bento-start #wbStart::-webkit-scrollbar { display: none; }