/* workspace-bento-kopf-laufzeile.css — rote Laufzeile „Neue Nachricht von …“ in der Kopfleiste (Beta-Ring).
   Kurzbeschreibung (für Laien): kleine rote Pille hinter „Home“/„Menü“; Farben nur aus marke.css (--marke-gefahr). */
.kl-pille { flex: 0 1 auto; min-width: 0; max-width: min(460px, 40vw); display: inline-flex; align-items: center; gap: 2px; height: 34px; margin: 0 8px; padding: 0 4px 0 12px;
  border-radius: 999px; background: color-mix(in srgb, var(--marke-gefahr) 10%, transparent); color: color-mix(in srgb, var(--marke-gefahr) 78%, #000);
  font: 600 13px var(--marke-schrift, Inter, system-ui, sans-serif); align-self: center; }
:root[data-theme="dark"] .kl-pille { color: color-mix(in srgb, var(--marke-gefahr) 40%, #fff); background: color-mix(in srgb, var(--marke-gefahr) 24%, transparent); }
.kl-pille[hidden] { display: none; }
.kl-text { min-width: 0; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; height: 100%; }
.kl-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-text svg, .kl-zu svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kl-text svg { width: 16px; height: 16px; }
.kl-zu svg { width: 12px; height: 12px; }
.kl-zu { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; padding: 0; }
.kl-zu:hover { background: color-mix(in srgb, var(--marke-gefahr) 14%, transparent); }
.kl-text:focus-visible, .kl-zu:focus-visible { outline: 2px solid var(--marke-gefahr); outline-offset: 2px; border-radius: 999px; }
.kl-n { flex: none; font-size: 11px; font-style: normal; margin-left: 4px; }
@media (max-width: 999px) { .kl-pille { max-width: calc(100vw - 32px); margin: 0; } }