/*
  workspace-bento-gruss.css — Gestaltung der Liste in der Begrüßungs-Kachel (Logik: workspace-bento-gruss.js).
  Kurzbeschreibung (für Laien): Unter „Guten Tag, …" steht eine schlichte Liste mit bis zu zehn Zeilen in der Schriftfarbe der
  Kachel (folgt dem Farb-Pinsel, hell wie dunkel lesbar), keine Aufklapp-Zeilen. Links vor jeder Zeile ein kleines Zeichen:
  ein Punkt für Gezähltes (Aufgaben, Mails, Nachfassen, Termin), ein Funkel-Stern für Vorschläge (workspace-bento-gruss-vorschlag.css).
  Beim Überfahren hinterlegt eine zarte Fläche in derselben Farbe die Zeile. Passt nicht alles hinein: „+ n weitere“.
  Nie seitlich scrollen: lange Zeilen enden mit „…“.
*/
.wbg { min-width: 0; }
.wbg .wbg-lage { flex: 0 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0; margin: 12px -8px 0; padding: 0; list-style: none; min-width: 0; }
.wbg .wbg-zeile { flex: none; display: flex; align-items: center; gap: 4px; min-width: 0; border-radius: var(--marke-r-m); }
.wbg .wbg-zeile[hidden] { display: none; }
.wbg .wbg-z { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; border: 0; border-radius: var(--marke-r-m);
  background: none; color: inherit; font: 500 13px/1.35 var(--marke-schrift); text-align: left; opacity: .92; }
.wbg button.wbg-z { cursor: pointer; transition: background .15s, opacity .15s; }
.wbg button.wbg-z:hover, .wbg button.wbg-z:focus-visible { background: color-mix(in srgb, currentColor 14%, transparent); opacity: 1; outline: 0; }
.wbg .wbg-dringend .wbg-z { font-weight: 700; opacity: 1; }
.wbg .wbg-leise { opacity: .75; }
.wbg .wbg-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Zeichen links: gleich breit für Punkt und Stern, damit die Texte bündig stehen */
.wbg .wbg-sym { flex: none; width: 14px; height: 14px; display: grid; place-items: center; }
.wbg .wbg-punkt { display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
.wbg .wbg-dringend .wbg-punkt { opacity: 1; }
.wbg .wbg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wbg .wbg-mehr { flex: none; padding: 2px 8px 0 30px; font: 600 12px/1.35 var(--marke-schrift); opacity: .75; white-space: nowrap; }
.wbg .wbg-mehr[hidden] { display: none; }
/* Aufbau wie im AIOS (Ralph 28.10.2026): Gruß oben, die Zeilen mittig im freien Raum, der Termin unten als Fußzeile */
.wbg h2 { margin-top: 4px; flex: none; }
.wbg .wbg-lage { flex: 1 1 auto; justify-content: safe center; }
.wbg .wbg-fuss { flex: none; display: flex; flex-direction: column; margin: 8px -8px 0; padding: 0; list-style: none; min-width: 0; }
.wbg > p { flex: none; }
.wbg.bt-kopf-k .wbg-lage { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .wbg button.wbg-z { transition: none; } }
/* Handy: die Kachel ist drei Minireihen (204 px) hoch, damit mindestens zwei Zeilen und „+ n weitere“ ganz sichtbar sind (Ralph 28.10.2026) */
@media (max-width: 699px) { .wb-raster > .wb-k:has(.wbg) { grid-row: span 3 !important; } }