/*
  bento-kopfmenue.css — Aussehen der Kopfleisten-Kapseln und der fünf Menükarten (Verhalten/Klassen-Zuordnung: bento-kopfmenue.js).

  Kurzbeschreibung (für Laien): Ralph, 08.11.2026 — die Kopfleiste (Umschalter, Benachrichtigungen, Shortcuts, Suche) und die fünf Karten
  des Menüs gehören zum Design-Layout und sehen auf jedem Server gleich aus: gleiche Formen, Abstände, Rundungen, „+“-Knöpfe und
  Lauflicht. Hier steht bewusst nur die Form; Farben kommen als Variablen vom Anschluss der Seite. Wo die Kapseln und Karten
  stehen (Lage, Breite, Reihenfolge) und welcher Teil des Umschalters gewählt ist, entscheidet die Seite selbst. Inhalte und Rechte
  der Karten sind nicht Teil dieses Bausteins.
  Variablen (Anschluss): --bt-km-akzent (Farbe der „+“-Zeichen), --bt-km-kapsel (Kapsel-Füllung), --bt-km-an-bg / --bt-km-an-fg (gewählter Umschalter-Teil),
  --bt-km-f (Farbe des Kartenkopfs), --bt-km-verlauf-ziel (Ziel des Farbverlaufs, meist Weiß bzw. Kartenfarbe), --bt-km-rand (Rand/Schatten der Karte),
  --bt-km-licht (Lauflicht); dazu aus bento-kopf.css: --bt-karte, --bt-weich, --bt-text, --bt-leise, --bt-linie-stark, --bt-schrift. Rundungen: --bt-r-s (6 px), --bt-r-m (9 px), --bt-r-l (12 px).
  marke-ausnahme: Bento-Kopfzeile und Menükarten (Ralph 07./08.11.2026) – 38-px-Kapseln, Pillen-Umschalter und Plus-Quadrate sind dort festgelegt
*/
:root { --bt-r-s: 6px; --bt-r-m: 9px; --bt-r-l: 12px; }

/* ── Kapseln der Kopfleiste ── */
.bt-km-umschalter, .bt-km-glocke, .bt-km-kurz, .bt-km-suche { box-sizing: border-box; height: 38px; border-radius: 999px; background: var(--bt-km-kapsel, rgba(255, 255, 255, .55)); }

/* Umschalter (Dashboard | Menü): zwei Symbole in einer Kapsel */
.bt-km-umschalter { display: flex; align-items: center; gap: 2px; padding: 3px; margin: 0; flex: none; overflow: visible; }
.bt-km-umschalter > .bt-km-um { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 0; box-sizing: border-box; width: 40px; min-width: 40px; height: 32px; margin: 0; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--bt-leise); box-shadow: none; font-size: 0 !important; line-height: 0; cursor: pointer; }
.bt-km-umschalter > .bt-km-um:hover { color: var(--bt-text); background: transparent; }
.bt-km-umschalter > .bt-km-um > svg { display: block; flex: none; width: 18px; height: 18px; }
.bt-km-umschalter > .bt-km-um.bt-km-an, .bt-km-umschalter > .bt-km-um.bt-km-an:hover { background: var(--bt-km-an-bg, #14141d); color: var(--bt-km-an-fg, #fff); box-shadow: none; }

/* Benachrichtigungen: Glocke links, Wort rechtsbündig, Lauflicht bei neuen Meldungen */
.bt-km-glocke { position: relative; display: flex; align-items: center; justify-content: flex-end; flex: none; margin: 0; padding: 0 16px 0 40px; border: 0; isolation: isolate;
  color: var(--bt-leise); font: 500 14px var(--bt-schrift); cursor: pointer; }
.bt-km-glocke:hover, .bt-km-glocke[aria-expanded="true"] { background: var(--bt-karte); color: var(--bt-text); }
.bt-km-glocke > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
.bt-km-glocke-name { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-align: right; }
@property --bt-km-winkel { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.bt-km-glocke.bt-km-aktiv::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--bt-km-winkel), transparent 0 62%, color-mix(in srgb, var(--bt-km-licht, #f0a500) 35%, transparent) 78%, var(--bt-km-licht, #f0a500) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: bt-km-lauf 2.8s linear infinite; }
@keyframes bt-km-lauf { to { --bt-km-winkel: 360deg; } }
@media (prefers-reduced-motion: reduce) { .bt-km-glocke.bt-km-aktiv::before { animation: none; background: var(--bt-km-licht, #f0a500); } }

/* Shortcuts: Symbole wachsen von rechts nach links, das „+“ steht ganz rechts */
.bt-km-kurz { display: flex; align-items: center; justify-content: flex-end; flex: 0 1 auto; min-width: 0; gap: 6px; margin: 0; padding: 4px 16px 4px 10px; overflow: hidden; }
.bt-km-kurz:not(:has(.bt-km-kurz-sym:not(.bt-km-kurz-plus))) { padding: 4px 16px 4px 4px; }
.bt-km-kurz-sym { flex: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--bt-text); cursor: pointer; }
.bt-km-kurz-sym:hover { background: color-mix(in srgb, var(--bt-text) 7%, transparent); }
.bt-km-kurz-sym > svg { width: 18px; height: 18px; }
.bt-km-kurz-sym img { width: 20px; height: 20px; object-fit: contain; }
.bt-km-kurz-sym:focus-visible { outline: 2px solid var(--bt-km-akzent, #0f5bab); outline-offset: 1px; }
/* „+“: kleines abgerundetes Quadrat, 16 px vom rechten Kapselrand – dieselbe Form wie das „+“ im Kartenkopf */
.bt-km-kurz-sym.bt-km-kurz-plus { width: 28px; height: 28px; margin-left: 4px; border-radius: var(--bt-r-s); background: var(--bt-karte); color: var(--bt-km-akzent, #0f5bab); }
.bt-km-kurz-sym.bt-km-kurz-plus:hover { background: color-mix(in srgb, var(--bt-km-akzent, #0f5bab) 12%, var(--bt-karte)); }

/* Suche mit Mikrofon */
.bt-km-suche { box-shadow: none; }
.bt-km-suche:focus-within { background: var(--bt-karte); }
.bt-km-mikro:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; margin: 0 -8px 0 auto; padding: 0;
  border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--bt-leise); cursor: pointer; }
.bt-km-mikro:hover { background: color-mix(in srgb, var(--bt-text) 7%, transparent); color: var(--bt-text); }
.bt-km-mikro svg { width: 16px; height: 16px; }
.bt-km-mikro.recording, .bt-km-mikro.laeuft, .bt-km-mikro.trans { background: var(--bt-rot, #e5484d); color: #fff; }

/* ── Menükarten ── */
.bt-km-karte { display: flex; flex-direction: column; box-sizing: border-box; background: var(--bt-karte); color: var(--bt-text); border-radius: var(--bt-r-l); overflow: hidden;
  box-shadow: var(--bt-km-rand, 0 0 0 0 transparent, 0 1px 3px rgba(15, 23, 42, .08)); font-family: var(--bt-schrift); }
.bt-km-kopf { flex: none; display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 52px; margin: 0; padding: 12px 16px; border: 0; text-align: left;
  background: linear-gradient(135deg, var(--bt-km-f) 30%, color-mix(in srgb, var(--bt-km-f) 66%, var(--bt-km-verlauf-ziel, #fff))); color: #fff; font: 600 15px var(--bt-schrift); }
.bt-km-kopf > svg:first-child { box-sizing: content-box; padding: 0 4px; flex: none; }
.bt-km-kopf > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* „+“ und Zahnrad im Kartenkopf */
.bt-km-kopf-plus, .bt-km-kopf .bt-km-kopf-plus { flex: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 28px; height: 28px; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: var(--bt-r-s); background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; }
.bt-km-kopf-plus:hover, .bt-km-kopf .bt-km-kopf-plus:hover { background: rgba(255, 255, 255, .32); }
.bt-km-kopf-plus:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.bt-km-kopf-plus > svg { width: 18px; height: 18px; opacity: 1; }

.bt-km-liste { display: flex; flex-direction: column; gap: 2px; padding: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.bt-km-liste::-webkit-scrollbar { display: none; }
.bt-km-zeile { display: flex; align-items: center; border-radius: var(--bt-r-m); }
.bt-km-zeile:hover { background: var(--bt-weich); }
.bt-km-eintrag:not(.bt-km-kopf-plus) { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: transparent; cursor: pointer;
  padding: 6px 8px; text-align: left; font: 500 13px var(--bt-schrift); color: var(--bt-text); }
.bt-km-sym { flex: none; position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--bt-r-s);
  background: color-mix(in srgb, var(--bt-km-f) 12%, transparent); color: var(--bt-km-f); }
.bt-km-fuss { flex: none; display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding: 0 8px 8px; }
.bt-km-fuss:not(:has(> :not(hr))) { display: none; }
.bt-km-trenn { border: 0; border-top: 1px solid var(--bt-km-linie, rgba(15, 15, 30, .1)); margin: 0 8px 8px; }
.bt-km-plus { flex: none; width: 100%; border-radius: var(--bt-r-m); }
.bt-km-plus:hover { background: var(--bt-weich); }
/* Lange Listen laufen weich ins Weiße aus */
.bt-km-liste.bt-km-mehr-unten { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent); }
.bt-km-liste.bt-km-mehr-oben { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px); mask-image: linear-gradient(to bottom, transparent, #000 40px); }
.bt-km-liste.bt-km-mehr-oben.bt-km-mehr-unten { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 64px), transparent); }

/* ── Lage der Kapseln: rein per CSS aus demselben Raster wie die fünf Karten (kein Messen, kein Springen beim Laden) ──
   Ab 1100 px stehen die Kapseln über den Karten: Umschalter über Karte 1 (rechtsbündig), Benachrichtigungen über Karte 2, Shortcuts über Karte 3 + 4, Suche über Karte 5.
   Die Seite hängt „bt-km-raster“ an ihre Kopfleiste; Rand und Abstand der Karten kommen aus --bt-km-l / --bt-km-g (Standard 20 / 16 px). Die Kapseln dürfen auch in einer unsichtbaren Hülle (display: contents) stehen.
   Zeigt die Seite eine Menükarte links neben einer großen Karte, setzt sie --bt-km-glocke-links (linke Kante der großen Karte). */
.bt-km-glocke[hidden] { display: none; }
@media (min-width: 1100px) {
  .bt-km-raster { --bt-km-w: calc((100vw - 2 * var(--bt-km-l, 20px) - 4 * var(--bt-km-g, 16px)) / 5); position: relative; }
  .bt-km-raster .bt-km-umschalter, .bt-km-raster .bt-km-glocke, .bt-km-raster .bt-km-kurz, .bt-km-raster .bt-km-suche { position: absolute; top: 19px; margin: 0; }
  .bt-km-raster .bt-km-umschalter { right: calc(100% - var(--bt-km-l, 20px) - var(--bt-km-w)); }
  .bt-km-raster .bt-km-glocke { left: var(--bt-km-glocke-links, calc(var(--bt-km-l, 20px) + var(--bt-km-w) + var(--bt-km-g, 16px))); width: var(--bt-km-w); }
  .bt-km-raster .bt-km-kurz { left: calc(var(--bt-km-l, 20px) + 2 * (var(--bt-km-w) + var(--bt-km-g, 16px))); width: calc(2 * var(--bt-km-w) + var(--bt-km-g, 16px)); }
  .bt-km-raster .bt-km-suche { right: var(--bt-km-l, 20px); left: auto; width: var(--bt-km-w); min-width: 0; max-width: none; flex: none; }
}

/* ── Logo-Feld oben links: immer [Logo] [Trennstrich] [AIOS] (Ralph 08.11.2026) ──
   Das Logo schrumpft so weit wie nötig, „AIOS“ bleibt immer ganz sichtbar und bricht nie um. Pro Server ändert sich nur die Logo-Datei
   (Bild im Feld, Farbe des Namens über --bt-km-logo-farbe). Ab 1100 endet das Feld vor dem Umschalter (er darf es nicht verdrängen). */
.bt-km-logo { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; gap: 8px; margin: 0 14px 0 0; padding: 0; border: 0; background: none; border-radius: var(--bt-r-m); cursor: pointer; color: var(--bt-text); }
.bt-km-logo .bt-km-logo-bild { display: block; flex: 0 1 auto; min-width: 0; width: auto; max-width: 100%; height: 28px; object-fit: contain; object-position: left center; }
.bt-km-logo .bt-km-logo-name { display: block; flex: none; margin: 0; padding-left: 10px; border-left: 1.5px solid var(--bt-linie-stark); font: 700 17px/1.2 var(--bt-schrift); letter-spacing: .03em;
  color: var(--bt-km-logo-farbe, var(--bt-leise)); white-space: nowrap; }
.bt-km-logo:focus, .bt-km-logo:focus-visible { outline: none; box-shadow: none; }
@media (min-width: 1100px) {
  .bt-km-raster .bt-km-logo { flex: 0 1 auto; max-width: calc(var(--bt-km-w) - 88px - 12px); }
}