/* =========================================================
   kunden-admin-buero.css (18.10.2026) — nur für /kunden/admin/buero/ (Büro mit Abteilungen und Fachkräften).
   Rahmen, Kennzahlen, Toast: konto-app.css (Präfix ld-). Hier nur das Büro selbst (Präfix bu-).
   Farben je Stand wie im ganzen Admin: Blau neu, Gelb wartet, Violett arbeitet, Orange zu erledigen, Grün erledigt,
   Rot Problem, Grau ruht oder nicht angeschlossen. Abteilungsfarben: --ton am Element.
   ========================================================= */

.bu-kopf{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px }
.bu-kopf .ld-kopf{ flex: 1 1 420px; min-width: 0 }
.bu-kopf .ld-kopf p{ max-width: 70ch }
.bu-kopf-rechts{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.bu-knopf-klein{ display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--ld-rand-stark); background: var(--ld-flaeche); color: var(--ld-text-2); font: inherit; font-size: 13.5px; font-weight: 600 }
.bu-knopf-klein:hover{ color: var(--ld-text); border-color: var(--ld-text-3) }
.bu-knopf-klein[disabled]{ opacity: .6; cursor: progress }
.bu-umschalter{ display: inline-flex; padding: 3px; border-radius: 10px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }
.bu-umschalter button{ border: 0; background: none; min-height: 30px; padding: 0 14px; border-radius: 7px; cursor: pointer; color: var(--ld-text-2); font: inherit; font-size: 14px; font-weight: 600 }
.bu-umschalter button[aria-pressed="true"]{ background: var(--ld-flaeche-3); color: var(--ld-text) }

.bu-arbeit{ display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 16px; align-items: start }
.bu-links{ min-width: 0 }

/* ---------- Bühne (3D) ---------- */
.bu-buehne{ position: relative; height: min(70vh, 660px); min-height: 420px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--ld-rand); background: radial-gradient(120% 90% at 50% 40%, var(--ld-seite) 0%, var(--ld-grund) 70%) }
.bu-buehne canvas{ display: block; width: 100%; height: 100%; cursor: grab; touch-action: none }
.bu-buehne canvas:active{ cursor: grabbing }
.bu-schilder{ position: absolute; inset: 0; pointer-events: none; overflow: hidden }
.bu-schild{ position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 6px 10px 7px; border-radius: 10px; border: 1px solid var(--ld-rand-stark); background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(11, 13, 22, .12); backdrop-filter: blur(6px);
  color: var(--ld-text); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; transition: border-color .15s }
.bu-schild:hover, .bu-schild[aria-current="true"]{ border-color: var(--ton) }
.bu-schild--unten{ transform: translate(-50%, 8px) }
.bu-schild strong{ display: flex; align-items: center; gap: 7px; font-size: 13px }
.bu-schild small{ font-size: 11.5px; color: var(--ld-text-2) }
.bu-schild--aus{ opacity: .72 }
.bu-punkt{ flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ton) }
.bu-zaehler{ position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center;
  background: #d4a106; color: #1a1405; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums }
.bu-zaehler--rot{ background: #dc2626; color: #fff }
.bu-hinweis, .bu-legende{ position: absolute; bottom: 12px; margin: 0; font-size: 12px; color: var(--ld-text-3); pointer-events: none }
.bu-hinweis{ left: 14px }
.bu-legende{ right: 14px; display: flex; gap: 12px; color: var(--ld-text-2) }
.bu-legende span{ display: inline-flex; align-items: center; gap: 6px }
.bu-fig{ display: inline-block; flex: none; width: 9px; height: 13px; border-radius: 5px }
.bu-fig--mensch{ background: #e6e8f2 }
.bu-fig--ki{ background: var(--ton, #7c3aed); box-shadow: 0 0 8px var(--ton, #7c3aed) }
.bu-fig--aus{ background: transparent; border: 1px dashed #8a91a3; box-shadow: none }
/* Monitorfarbe = für wen die Fachkraft arbeitet (02.11.2026): schwarz Kunden, weiß Agentur, gold beides */
.bu-mon{ display: inline-block; flex: none; width: 14px; height: 9px; border-radius: 2px; border: 1px solid rgba(17, 24, 39, .35) }
.bu-mon--kunde{ background: #15171f }
.bu-mon--agentur{ background: #eef0f5 }
.bu-mon--beide{ background: linear-gradient(135deg, #f3dfbd, #c9a46e) }
.bu-legende-trenn{ margin-left: 4px; color: var(--ld-text-3) }
/* Legende und Bedienhinweis teilen sich die untere Kante: Legende rechts umbrechen, Hinweis links begrenzen (sonst überdecken sie sich) */
.bu-buehne .bu-legende{ flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; max-width: 48% }   /* .bu-buehne davor: .mk p (masterclass.css) setzt max-width: none */
.bu-buehne .bu-hinweis{ max-width: 48% }
.bu-buehne--nacht .bu-legende{ color: var(--ld-text-2) }
@media (max-width: 759px){ .bu-legende-trenn, .bu-legende .bu-mon, .bu-legende-trenn ~ span{ display: none } }
.bu-fuer{ display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 12px; color: var(--ld-text-2) }
.bu-fuer i{ display: inline-block; width: 14px; height: 9px; border-radius: 2px; border: 1px solid rgba(17, 24, 39, .35); background: #15171f }
.bu-fuer--agentur i{ background: #eef0f5 }
.bu-fuer--beide i{ background: linear-gradient(135deg, #f3dfbd, #c9a46e) }

/* ---------- Pausen-Blasen über Fachkräften, die gerade unterwegs sind (buero-pausen.js) ---------- */
.bu-pausen{ position: absolute; inset: 0; pointer-events: none; overflow: hidden }
.bu-blase{ position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); padding: 4px 9px 5px; border-radius: 9px; white-space: nowrap;
  background: rgba(255, 255, 255, .96); box-shadow: 0 2px 10px rgba(11, 13, 22, .12); border: 1px solid var(--ld-rand-stark); color: var(--ld-text-2); font-size: 11.5px; line-height: 1.35 }
.bu-blase b{ color: var(--ld-text); font-weight: 600 }
.bu-blase span{ color: #146c35; font-size: 10.5px }

/* ---------- Vollbild: Büro und Leiste zusammen (Fullscreen-API, sonst feste Ebene über der Seite) ---------- */
.bu-voll{ position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px;
  border-radius: 9px; border: 1px solid var(--ld-rand-stark); background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(11, 13, 22, .12); backdrop-filter: blur(6px); color: var(--ld-text);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer }
.bu-voll:hover{ border-color: var(--ld-text-3) }
.bu-voll svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.bu-voll .bu-voll-aus, .bu-voll[aria-pressed="true"] .bu-voll-an{ display: none }
.bu-voll[aria-pressed="true"] .bu-voll-aus{ display: block }
.bu-arbeit:fullscreen, .bu-arbeit.bu-arbeit--voll{ box-sizing: border-box; width: 100%; height: 100%; padding: 16px; background: var(--ld-grund, var(--ld-grund));
  grid-template-columns: minmax(0, 1fr) 390px; align-items: stretch; overflow: auto }
.bu-arbeit.bu-arbeit--voll{ position: fixed; inset: 0; z-index: 60; padding-top: calc(16px + env(safe-area-inset-top, 0px)) }
.bu-arbeit:fullscreen .bu-buehne, .bu-arbeit--voll .bu-buehne{ height: 100%; min-height: 0 }
.bu-arbeit:fullscreen .bu-links, .bu-arbeit--voll .bu-links{ height: 100%; min-height: 0 }
.bu-arbeit:fullscreen .bu-leiste, .bu-arbeit--voll .bu-leiste{ max-height: 100%; overflow-y: auto }
@media (max-width: 1240px){
  .bu-arbeit:fullscreen, .bu-arbeit.bu-arbeit--voll{ grid-template-columns: minmax(0, 1fr); grid-template-rows: 70% auto }
}
html.bu-voll-offen{ overflow: hidden }

/* ---------- Liste ---------- */
.bu-liste{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-content: start }
.bu-karte{ position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--ld-flaeche); border: 1px solid var(--ld-rand); color: var(--ld-text); font: inherit }
.bu-karte:hover, .bu-karte[aria-current="true"]{ border-color: var(--ton) }
.bu-karte strong{ display: flex; align-items: center; gap: 8px; font-size: 16px }
.bu-karte p{ margin: 0; font-size: 13.5px; color: var(--ld-text-2) }
.bu-karte .bu-zaehler{ top: 12px; right: 12px }

/* ---------- Rechte Leiste ---------- */
.bu-leiste{ display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 18px; border-radius: 16px;
  background: var(--ld-flaeche); border: 1px solid var(--ld-rand); max-height: min(70vh, 660px); overflow-y: auto; overscroll-behavior: contain }
.bu-leiste h2{ margin: 0; display: flex; align-items: center; gap: 9px; font-family: inherit; font-size: 19px; font-weight: 700; letter-spacing: -.005em; text-transform: none; color: var(--ld-text) }
.bu-leiste h2 .bu-punkt{ width: 11px; height: 11px }
.bu-leiste h3{ margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ld-text-3) }
.bu-leiste h3 button{ border: 0; background: none; padding: 0; cursor: pointer; color: var(--ld-link); font: inherit; font-size: 12px; letter-spacing: 0; text-transform: none }
.bu-abschnitt{ display: flex; flex-direction: column; gap: 10px }
.bu-unter{ margin: -10px 0 0; color: var(--ld-text-2); font-size: 14px }
.bu-zurueck{ align-self: flex-start; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ld-link); font: inherit; font-size: 13px; font-weight: 600 }

.bu-bericht{ display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-bericht p{ margin: 0; color: var(--ld-text-2); font-size: 14px }
.bu-bericht b{ color: var(--ld-text); font-weight: 600 }
/* KI-Morgenbericht des Bürochefs */
.bu-bericht--ki{ border-color: rgba(124,58,237,.45); background: linear-gradient(180deg, rgba(124,58,237,.08), transparent 70%), var(--ld-flaeche-2) }
/* Werbe-KI (02.11.2026): aufgeklappter Bericht von Max, Ella, Gustav, Merle und Britta (HTML aus functions/werbung-ki.js, Stile dort für die Mail) */
.bu-bericht--werbung{ gap: 4px; font-size: 13.5px; line-height: 1.55; color: var(--ld-text-2) }
.bu-bericht--werbung h3{ color: var(--ld-text) }
.bu-bericht--werbung h3:first-child{ margin-top: 0 !important }
.bu-bericht--werbung ul, .bu-bericht--werbung ol{ margin: 0; padding-left: 18px }
.bu-bericht--werbung li{ margin: 0 0 4px; font-size: 13.5px; color: var(--ld-text-2) }
.bu-bericht--werbung span[style]{ color: var(--ld-text-3) !important }
.bu-zuerst-titel{ margin: 2px 0 -2px !important; font-size: 12px !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ld-text-3) !important }
.bu-zuerst{ margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 8px; color: var(--ld-text-3); font-size: 13px }
.bu-zuerst li{ padding-left: 2px }
.bu-zuerst a{ display: block; color: var(--ld-text); text-decoration: none }
.bu-zuerst a:hover strong{ text-decoration: underline; text-underline-offset: 3px }
.bu-zuerst strong{ font-size: 14px; font-weight: 600 }
.bu-zuerst span{ display: block; color: var(--ld-text-2) }
.bu-hinweise{ margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ld-text-2) }
.bu-neu-schreiben{ margin-left: auto; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ld-link); font: inherit; font-size: 12px; font-weight: 600 }
.bu-neu-schreiben[disabled]{ color: var(--ld-text-3); cursor: progress }
.bu-von{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--ld-text-3) }
.bu-von b{ color: var(--ld-text-2); font-weight: 600 }

.bu-eintrag{ --s: #3b82f6; display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; border-radius: 10px;
  background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand); border-left: 3px solid var(--s) }
.bu-eintrag strong{ font-size: 14px; line-height: 1.35 }
.bu-eintrag p{ margin: 0; font-size: 13px; color: var(--ld-text-2); overflow-wrap: anywhere }
.bu-eintrag--rot{ --s: #dc2626 } .bu-eintrag--orange{ --s: #ea6c10 } .bu-eintrag--gelb{ --s: #d4a106 }
.bu-eintrag--blau{ --s: #3b82f6 } .bu-eintrag--gruen{ --s: #16a34a } .bu-eintrag--violett{ --s: #7c3aed } .bu-eintrag--grau{ --s: #8a91a3 }
.bu-knoepfe{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px }
.bu-k{ display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--ld-rand-stark); background: var(--ld-flaeche-3); color: var(--ld-text); font: inherit; font-size: 13px; font-weight: 600 }
.bu-k:hover{ border-color: var(--ld-text-3) }
.bu-k--auf{ border-color: rgba(59,130,246,.6); background: rgba(59,130,246,.14) }
.bu-leer{ margin: 0; padding: 12px; border-radius: 10px; font-size: 13.5px; color: var(--ld-text-3); background: var(--ld-flaeche-2); border: 1px dashed var(--ld-rand-stark) }
.bu-mehr{ align-self: flex-start; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ld-link); font: inherit; font-size: 13px; font-weight: 600 }

.bu-fk{ display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-fk-kopf{ display: flex; align-items: center; justify-content: space-between; gap: 8px }
.bu-fk-kopf strong{ display: flex; align-items: center; gap: 8px; font-size: 14.5px }
.bu-fk p{ margin: 0; font-size: 13px; color: var(--ld-text-2) }
.bu-stand{ --m: #8a91a3; flex: none; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: var(--m); border: 1px solid color-mix(in srgb, var(--m) 55%, transparent); background: color-mix(in srgb, var(--m) 12%, transparent) }
.bu-stand--violett{ --m: #7c3aed } .bu-stand--gelb{ --m: #d4a106 } .bu-stand--grau{ --m: #8a91a3 } .bu-stand--rot{ --m: #dc2626 } .bu-stand--blau{ --m: #3b82f6 }
.bu-stand--gruen{ --m: #95bf47 }   /* Monitoring gebucht / eigener Shop (19.10.2026) */
.bu-stufen{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 3px; border-radius: 9px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }
.bu-stufen span{ padding: 5px 2px; border-radius: 6px; text-align: center; font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--ld-text-3) }
.bu-stufen span.bu-an{ background: var(--ld-flaeche-3); color: var(--ld-text); box-shadow: inset 0 -2px 0 var(--ton) }
.bu-klein{ font-size: 12px; color: var(--ld-text-3) }
.bu-quelle{ padding: 10px 12px; border-radius: 10px; font-size: 13px; color: var(--ld-text-2); background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-quelle b{ color: var(--ld-text) }
.bu-quelle a{ color: var(--ld-link) }

/* ---------- Fachkräfte: Team-Liste, Tooltip, Slide-in (18.10.2026) ---------- */
.bu-team{ display: flex; flex-direction: column; gap: 8px }
.bu-mensch{ display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; border-radius: 10px; cursor: pointer;
  background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand); color: var(--ld-text); font: inherit }
.bu-mensch:hover{ border-color: var(--ton) }
.bu-mensch span{ display: flex; flex-direction: column; min-width: 0; flex: 1 }
.bu-mensch b{ font-size: 14px }
.bu-mensch small{ font-size: 12px; color: var(--ld-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bu-mensch .bu-stand{ font-style: normal }
.bu-wer{ border: 0; background: none; padding: 0; cursor: pointer; color: var(--ld-link); font: inherit; font-size: 12px; font-weight: 600 }
.bu-wer:hover{ text-decoration: underline; text-underline-offset: 2px }
.bu-tip{ position: absolute; left: 0; top: 0; transform: translate(-50%, -135%); pointer-events: none; padding: 4px 9px; border-radius: 8px; white-space: nowrap;
  background: var(--ld-flaeche-3); border: 1px solid var(--ld-rand-stark); color: var(--ld-text); font-size: 12px; font-weight: 600 }

.bu-decke{ position: fixed; inset: 0; z-index: 70; background: rgba(5, 6, 14, .55); opacity: 0; pointer-events: none; transition: opacity .2s }
.bu-decke--an{ opacity: 1; pointer-events: auto }
.bu-lade{ position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(480px, 100%); display: flex; flex-direction: column; box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px); background: var(--ld-seite, var(--ld-seite)); border-left: 1px solid var(--ld-rand-stark); color: var(--ld-text);
  transform: translateX(102%); transition: transform .28s cubic-bezier(.2, .8, .2, 1) }
.bu-lade--an{ transform: none }
.bu-lade-kopf{ display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 12px; border-bottom: 1px solid var(--ld-rand) }
.bu-lade-zeile{ display: flex; align-items: center; justify-content: space-between; gap: 10px }
.bu-lade-zu{ width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--ld-rand-stark); background: var(--ld-flaeche); color: var(--ld-text); font-size: 18px; line-height: 1; cursor: pointer }
.bu-person{ display: flex; align-items: center; gap: 12px }
.bu-avatar{ flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 18px; font-weight: 700; color: #0b0d18;
  background: var(--ton); box-shadow: 0 0 18px color-mix(in srgb, var(--ton) 55%, transparent) }
.bu-avatar--mensch{ background: #e6e8f2; box-shadow: none }
.bu-avatar--aus{ background: transparent; color: var(--ld-text-3); border: 1px dashed var(--ld-rand-stark); box-shadow: none }
.bu-person h2{ margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: inherit; font-size: 20px; font-weight: 700; text-transform: none; color: var(--ld-text) }
.bu-person p{ margin: 2px 0 0; font-size: 13px; color: var(--ld-text-2) }
.bu-ki{ padding: 1px 7px; border-radius: 99px; border: 1px solid var(--ld-rand-stark); color: var(--ld-text-2); font-size: 10.5px; font-weight: 700; letter-spacing: .06em }
.bu-reiter{ display: flex; gap: 4px }
.bu-reiter button{ border: 0; background: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; color: var(--ld-text-3); font: inherit; font-size: 13.5px; font-weight: 600 }
.bu-reiter button[aria-selected="true"]{ background: var(--ld-flaeche-3); color: var(--ld-text) }
.bu-lade-inhalt{ flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 16px; padding: 16px 20px 28px }
.bu-lade-inhalt h3{ margin: 0; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ld-text-3) }
.bu-jetzt{ display: flex; flex-direction: column; gap: 6px }
.bu-jetzt .bu-stand{ align-self: flex-start }
.bu-jetzt strong{ font-size: 15px }
.bu-balken{ height: 6px; border-radius: 9px; overflow: hidden; background: var(--ld-flaeche-3) }
.bu-balken i{ display: block; height: 100%; border-radius: 9px; background: var(--ton) }
/* René im Panel (02.11.2026): sein Tag — Termine, zuerst dran, heute neu, Entscheidungen, Briefkasten je Abteilung */
.bu-lade-inhalt .bu-abschnitt{ display: flex; flex-direction: column; gap: 6px }
.bu-heute-kopf strong{ font-size: 17px; color: var(--ld-text) }
.bu-heute-kopf p{ margin: 4px 0 0; font-size: 14px; color: var(--ld-text-2) }
.bu-heute-termin{ display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand); font-size: 13.5px; line-height: 1.4 }
.bu-heute-termin > b{ color: var(--ld-text); font-variant-numeric: tabular-nums }
.bu-heute-termin span{ min-width: 0; overflow-wrap: anywhere; color: var(--ld-text) }
.bu-heute-termin small{ display: block; color: var(--ld-text-3); font-size: 12px; margin-top: 2px }
.bu-heute-termin em{ font-style: normal; color: #b45309; font-weight: 600 }
.bu-heute-zeile{ display: block; padding: 8px 10px 8px 12px; border-radius: 9px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand); border-left: 3px solid var(--ton); color: var(--ld-text); text-decoration: none; font-size: 13.5px; line-height: 1.4 }
.bu-heute-zeile:hover{ background: var(--ld-flaeche-3) }
.bu-heute-zeile--rot{ border-left-color: #dc2626 }
.bu-heute-zeile b{ display: block; font-weight: 600; overflow-wrap: anywhere }
.bu-heute-zeile small{ display: block; color: var(--ld-text-3); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere }
.bu-heute-abt{ display: flex; flex-wrap: wrap; gap: 6px }
.bu-heute-abt button{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--ld-rand); background: var(--ld-flaeche-2); color: var(--ld-text); font: inherit; font-size: 13px; cursor: pointer }
.bu-heute-abt button:hover{ background: var(--ld-flaeche-3) }
.bu-heute-abt .bu-punkt{ background: var(--ton) }
.bu-heute-abt b{ min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--ld-flaeche-3); text-align: center; font-size: 12px }
.bu-heute-abt b.bu-heute-rot{ background: #dc2626; color: #fff }

.bu-schirm-wrap{ display: flex; flex-direction: column }
.bu-schirm{ padding: 10px; border-radius: 12px; border: 1px solid var(--ld-rand-stark); background: #05060d; box-shadow: 0 0 0 4px var(--ld-seite), 0 14px 40px rgba(11,13,22,0.144) }
/* 01.11.2026 (René: „schwarze flächen in den bubbles“): Der Bildschirm bleibt dunkel wie ein Monitor, bekommt aber eigene helle Schrift —
   die Zweiklang-Farben (--ld-text …) sind für helle Flächen gemacht und waren auf Schwarz kaum lesbar. */
.bu-schirm{ --ld-text: #f1f3f9; --ld-text-2: #c9cfdd; --ld-text-3: #8f97ab; --ld-rand: #23283a; color: var(--ld-text-2) }
.bu-schirm .bu-konsole .bu-warn{ color: #f5c451 } .bu-schirm .bu-konsole .bu-fehl{ color: #ff8a8a }
.bu-schirm .bu-post div{ background: #12162a }
.bu-schirm-fuss{ width: 90px; height: 8px; margin: 0 auto; border-radius: 0 0 8px 8px; background: var(--ld-flaeche-2) }
.bu-konsole{ min-height: 150px; padding: 4px 6px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.6; color: #c8f7c5 }
.bu-konsole div{ white-space: pre-wrap; word-break: break-word }
.bu-konsole .bu-warn{ color: #7a5300 } .bu-konsole .bu-fehl{ color: #a51c1c } .bu-konsole .bu-grau{ color: #7c8199 }
.bu-konsole--aus{ display: grid; place-items: center; color: #4b5068 }
.bu-cursor{ display: inline-block; width: 7px; height: 13px; vertical-align: -2px; background: #c8f7c5; animation: bu-blink 1s steps(1) infinite }
@keyframes bu-blink{ 50%{ opacity: 0 } }
/* Bildschirm der Shop-Wächterin: echtes Handy-Foto des letzten Laufs neben dem Protokoll */
.bu-handy-rahmen{ display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; align-items: start }
.bu-handy{ border-radius: 14px; overflow: hidden; border: 3px solid #2b2f3d; background: #fff; aspect-ratio: 9 / 19; max-height: 280px }
.bu-handy img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: top }
.bu-handy--leer{ display: grid; place-items: center; padding: 8px; background: var(--ld-flaeche-2); color: var(--ld-text-3); font-size: 11px; text-align: center }
.bu-konsole--neben{ min-height: 0; max-height: 280px; overflow: hidden; font-size: 11px }
.bu-jetzt-pruefen{ align-self: flex-start }
.bu-jetzt-pruefen[disabled]{ opacity: .6; cursor: progress }
.bu-tab-rahmen{ overflow-x: auto }
.bu-tab{ width: 100%; border-collapse: collapse; font-size: 11.5px; color: var(--ld-text-2) }
.bu-tab th{ padding: 4px 6px; text-align: left; font-weight: 600; color: var(--ld-text-3); border-bottom: 1px solid var(--ld-rand) }
.bu-tab td{ padding: 5px 6px; border-bottom: 1px solid var(--ld-rand); font-variant-numeric: tabular-nums }
.bu-tab-mark td{ background: rgba(212,161,6,.1); color: var(--ld-text) }
.bu-post{ display: flex; flex-direction: column; gap: 4px; font-size: 11.5px }
.bu-post div{ display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px; padding: 6px 8px; border-radius: 6px; background: #0f1224; color: var(--ld-text-2) }
.bu-post span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.bu-post b{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ld-text) }
.bu-post .bu-post-mark{ outline: 1px solid rgba(212,161,6,.6) }
.bu-post em{ font-style: normal; font-size: 10.5px; padding: 0 6px; border-radius: 99px; border: 1px solid var(--ld-rand-stark); color: var(--ld-text-3) }

.bu-zeitleiste{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.bu-zeitleiste li{ display: grid; grid-template-columns: 82px 14px minmax(0, 1fr); gap: 8px; font-size: 13.5px; color: var(--ld-text-2) }
.bu-zeitleiste time{ padding-top: 1px; font-size: 12.5px; color: var(--ld-text-3); font-variant-numeric: tabular-nums }
.bu-zeitleiste span{ padding-bottom: 12px; overflow-wrap: anywhere }
.bu-zp{ position: relative }
.bu-zp::before{ content: ""; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--p, #8a91a3) }
.bu-zp::after{ content: ""; position: absolute; left: 7.5px; top: 16px; bottom: -6px; width: 1px; background: var(--ld-rand) }
.bu-zeitleiste li:last-child .bu-zp::after{ display: none }
.bu-zp--gruen{ --p: #16a34a } .bu-zp--gelb{ --p: #d4a106 } .bu-zp--violett{ --p: #7c3aed }
.bu-lv{ display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13.5px }
.bu-lv dt{ color: var(--ld-text-3) }
.bu-lv dd{ margin: 0; color: var(--ld-text-2) }
.bu-lv ul{ margin: 0; padding-left: 16px }

/* ---------- Knopf „+ Kunde ins Monitoring“ (öffnet Mila). Der Entwurf-Assistent buero-onboarding.js ist seit 22.10.2026 Leos Ansicht
   (Plan autonomes KI-Büro, P4); seine Stile .bu-ob-* sind entfernt. ---------- */
.bu-knopf-neu{ border-color: rgba(149, 191, 71, .6); color: var(--ld-text) }
.bu-knopf-neu i{ font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #95bf47 }

@media (max-width: 1240px){
  .bu-arbeit{ grid-template-columns: minmax(0, 1fr) }
  .bu-leiste{ max-height: none; overflow: visible }
}
@media (max-width: 720px){
  .bu-buehne{ height: 60vh; min-height: 340px }
  .bu-hinweis{ display: none }
  .bu-schild{ padding: 4px 8px 5px }
  .bu-schild small{ display: none }
  .bu-schild strong{ font-size: 12px }
}
@media (prefers-reduced-motion: reduce){ .bu-schild, .bu-lade, .bu-decke{ transition: none } .bu-cursor{ animation: none } }

/* Sophie (Kundenservice): Entwurf zum Bearbeiten und Senden, Arbeitsweise umschalten (18.10.2026) */
.bu-entwurf{ display: flex; flex-direction: column; gap: 8px; margin-top: 2px; padding: 10px; border-radius: 9px;
  background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }
.bu-entwurf textarea{ width: 100%; box-sizing: border-box; min-height: 110px; resize: vertical; padding: 9px 10px; border-radius: 8px;
  border: 1px solid var(--ld-rand-stark); background: var(--ld-flaeche-3); color: var(--ld-text); font: inherit; font-size: 13.5px; line-height: 1.45 }
.bu-entwurf textarea:focus-visible{ outline: 2px solid #c026d3; outline-offset: 1px }
.bu-eintrag .bu-entwurf-warum{ font-size: 12.5px; color: var(--ld-text-3) }
.bu-entwurf-warum b{ color: #c026d3; font-weight: 600 }
.bu-haken{ display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ld-text-2); cursor: pointer }
.bu-haken input{ margin-top: 2px; accent-color: #c026d3 }
.bu-modus{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: 10px;
  background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }
.bu-modus button{ display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 7px 9px; border: 0; border-radius: 8px;
  background: none; color: var(--ld-text-2); font: inherit; text-align: left; cursor: pointer }
.bu-modus button b{ font-size: 13px; font-weight: 600 }
.bu-modus button small{ font-size: 11.5px; color: var(--ld-text-3) }
.bu-modus button[aria-pressed="true"]{ background: var(--ld-flaeche-3); color: var(--ld-text); box-shadow: inset 0 0 0 1px rgba(192,38,211,.5) }
.bu-modus button[disabled]{ opacity: .6; cursor: progress }
.bu-k--gefahr{ border-color: rgba(220,38,38,.65); background: rgba(220,38,38,.14) }
.bu-beenden h3{ color: var(--ld-text-3) }

/* Zugänge für die Cloud-Werkstatt (Theo) */
.bu-zugang{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 9px;
  background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-zugang > div{ display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.bu-zugang small, .bu-zugang-neu small{ font-size: 12px; color: var(--ld-text-3); overflow-wrap: anywhere }
.bu-zugang-neu{ padding: 9px 10px; border-radius: 9px; background: var(--ld-flaeche-2); border: 1px dashed var(--ld-rand-stark) }
.bu-zugang-neu summary{ cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline }
.bu-zugang-neu[open]{ display: flex; flex-direction: column; gap: 8px }
.bu-anleitung ol{ margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--ld-text-2) }
.bu-anleitung ol a, .bu-anleitung p a{ color: inherit; text-decoration: underline }
.bu-anleitung code{ font-size: 12px; padding: 1px 4px; border-radius: 4px; background: var(--ld-flaeche-3, rgba(11,13,22,0.06)) }
.bu-feld{ display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ld-text-2) }
.bu-feld input{ box-sizing: border-box; width: 100%; min-height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--ld-rand-stark);
  background: var(--ld-flaeche-3); color: var(--ld-text); font: inherit; font-size: 13.5px }
.bu-feld input:focus-visible{ outline: 2px solid #0891b2; outline-offset: 1px }
.bu-feld select, .bu-feld textarea{ box-sizing: border-box; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ld-rand-stark);
  background: var(--ld-flaeche-3); color: var(--ld-text); font: inherit; font-size: 13.5px }
.bu-feld textarea{ resize: vertical; line-height: 1.45 }

/* Zentrieren (rechts oben in der Bühne, neben dem Vollbild-Knopf links) */
.bu-mitte{ left: auto; right: 12px }
.bu-mitte svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round }

/* Party, wenn Vanessa G. im Container landet (buero-putzfrau.js) */
.bu-party{ position: absolute; inset: 0; z-index: 4; pointer-events: none; display: grid; place-items: center; background: rgba(10, 12, 28, .25);
  animation: bu-party-ein .25s ease-out; transition: opacity .4s }
.bu-party canvas{ position: absolute; inset: 0; width: 100%; height: 100% }
.bu-party-mitte{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center }
.bu-party-smiley{ font-size: clamp(72px, 14vw, 140px); line-height: 1; animation: bu-party-lachen .5s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 24px rgba(11,13,22,0.144)) }
.bu-party-mitte strong{ padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .96); border: 1px solid var(--ld-rand-stark);
  color: var(--ld-text); font-size: 15px }
.bu-party--weg{ opacity: 0 }
@keyframes bu-party-ein{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes bu-party-lachen{ from{ transform: rotate(-10deg) scale(1) } to{ transform: rotate(10deg) scale(1.12) } }
.bu-modus--zwei{ grid-template-columns: repeat(2, minmax(0, 1fr)) }

/* Postfächer (Jonas, Tilda, 19.10.2026) */
.bu-mail{ display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand); font-size: 13px; line-height: 1.45; cursor: default }
.bu-mail + .bu-mail{ margin-top: 6px }
.bu-mail-tun{ margin: 4px 0 8px 10px }          /* Knöpfe je Mail im Fenster (07.11.2026) */
.bu-mail-tun + .bu-mail{ margin-top: 6px }
/* Hinweis → Angebot an Milas Meldung (19.10.2026) */
.bu-hang{ display: grid; gap: 6px; margin-top: 8px; padding: 8px 10px; border-left: 2px solid #95bf47; background: var(--ld-flaeche-2); border-radius: 0 8px 8px 0 }
.bu-hang .bu-klein{ margin: 0 }
.bu-mail input{ margin-top: 3px; flex: 0 0 auto }
.bu-mail span{ min-width: 0; overflow-wrap: anywhere }
.bu-mail small{ display: block; color: var(--ld-text-3); font-size: 12px; margin-top: 2px }
/* Felix, KI-Außendienst über WhatsApp (20.10.2026) */
.bu-felix-form{ display: grid; gap: 8px; margin-top: 6px }
.bu-felix-form label{ display: grid; gap: 4px; font-size: 12.5px; color: var(--ld-text-2) }
.bu-felix-form input, .bu-felix-form select, .bu-felix-form textarea{ width: 100%; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ld-rand); background: var(--ld-flaeche-2); color: var(--ld-text); font: inherit; font-size: 13.5px }
.bu-felix-form .bu-k{ justify-self: start }
.bu-felix-verlauf{ display: grid; gap: 6px; margin-top: 8px; max-height: 360px; overflow-y: auto; padding-right: 2px }
.bu-felix-n{ margin: 0; padding: 7px 10px; border-radius: 10px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 88% }
.bu-felix-n small{ display: block; font-size: 11px; color: var(--ld-text-3); margin-bottom: 2px }
.bu-felix-n--ein{ justify-self: start; background: var(--ld-flaeche-3) }
.bu-felix-n--aus{ justify-self: end; background: rgba(37, 211, 102, .14); border: 1px solid rgba(37, 211, 102, .3) }
.bu-felix-n--rene{ justify-self: end; background: rgba(124,58,237,.16); border: 1px solid rgba(124,58,237,.35) }
.bu-abschnitt code{ font-size: 12px; overflow-wrap: anywhere }

/* ---------- Betriebsleiste: Kosten, „Alle anhalten“, Not-Aus (22.10.2026, Plan autonomes KI-Büro, P1) ----------
   Über den Zahlen (kunden-admin-buero.js, zeichneBetrieb). Normal ruhig; Warnung ab 80 % der Monatsgrenze orange,
   Monatsgrenze erreicht und Not-Aus rot. Der Not-Aus-Knopf ist sichtbar, löst aber erst nach der Rückfrage aus. */
.bu-betrieb{ --b: #7c3aed; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--ld-flaeche); border: 1px solid var(--ld-rand); border-left: 3px solid var(--b) }
.bu-betrieb[hidden]{ display: none }
.bu-betrieb--warnung{ --b: #ea6c10 }
.bu-betrieb--halt{ --b: #dc2626; background: color-mix(in srgb, #dc2626 7%, var(--ld-flaeche)) }
.bu-betrieb--notaus{ --b: #dc2626; background: color-mix(in srgb, #dc2626 12%, var(--ld-flaeche)); border-color: rgba(220,38,38,.55) }
.bu-betrieb-zeile{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px }
.bu-betrieb-status{ display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-size: 14px }
.bu-betrieb-punkt{ flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--b); box-shadow: 0 0 10px var(--b) }
.bu-betrieb-kosten{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--ld-text-2) }
.bu-betrieb-kosten b{ color: var(--ld-text); font-variant-numeric: tabular-nums }
.bu-betrieb-balken{ display: inline-block; width: 120px; height: 6px; border-radius: 9px; overflow: hidden; background: var(--ld-flaeche-3) }
.bu-betrieb-balken i{ display: block; height: 100%; border-radius: 9px; background: var(--b) }
.bu-betrieb-knoepfe{ display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto }
.bu-betrieb-stopp{ min-height: 38px; gap: 8px }
.bu-betrieb-stopp i{ width: 10px; height: 10px; border-radius: 2px; background: #dc2626 }
.bu-betrieb-text{ margin: 0; font-size: 13px; color: var(--ld-text-2); overflow-wrap: anywhere }
.bu-betrieb .bu-klein{ margin: 0 }
.bu-betrieb-frage{ display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand-stark) }
.bu-betrieb-frage p{ margin: 0; font-size: 13.5px; color: var(--ld-text-2) }
.bu-betrieb-frage p b{ color: var(--ld-text) }
.bu-betrieb-frage ul{ margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; line-height: 1.45; color: var(--ld-text-2) }
.bu-betrieb-frage .bu-feld{ max-width: 560px }
.bu-betrieb-fehler{ display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(220,38,38,.55); background: rgba(220,38,38,.08) }
.bu-betrieb-fehler p{ margin: 0; font-size: 13px; color: var(--ld-text-2); overflow-wrap: anywhere }
.bu-betrieb-kostenliste{ display: flex; flex-direction: column; gap: 8px }
.bu-kosten-tab{ font-size: 13px }
.bu-kosten-tab td:nth-child(2), .bu-kosten-tab td:nth-child(3){ white-space: nowrap }
.bu-kosten-summe td{ font-weight: 700; color: var(--ld-text); border-top: 1px solid var(--ld-rand-stark) }
.bu-achtung{ color: #a8430a }
@media (max-width: 720px){
  .bu-betrieb-knoepfe{ margin-left: 0; width: 100% }
  .bu-betrieb-stopp{ flex: 1 1 auto; justify-content: center }
  .bu-betrieb-balken{ width: 90px }
  /* Handybreite: Tabelle umbrechen statt seitlich scrollen */
  .bu-kosten-tab{ font-size: 12px }
  .bu-kosten-tab th, .bu-kosten-tab td{ padding: 5px 4px }
  .bu-kosten-tab td:nth-child(2), .bu-kosten-tab td:nth-child(3){ white-space: normal }
  .bu-kosten-tab .bu-stand{ white-space: normal; display: inline-block; padding: 1px 6px; font-size: 11px; line-height: 1.3 }
}

/* Bruno: Schalter, wie er dich erreicht (22.10.2026, P1) */
.bu-schalter-liste{ display: flex; flex-direction: column; gap: 6px }
.bu-schalter{ display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 9px; cursor: pointer;
  text-align: left; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand); color: var(--ld-text); font: inherit }
.bu-schalter:hover{ border-color: var(--ld-text-3) }
.bu-schalter[disabled]{ opacity: .6; cursor: progress }
.bu-schalter span{ display: flex; flex-direction: column; min-width: 0 }
.bu-schalter b{ font-size: 13.5px; font-weight: 600 }
.bu-schalter small{ font-size: 12px; color: var(--ld-text-3) }
.bu-schalter em{ flex: none; min-width: 38px; padding: 2px 8px; border-radius: 99px; text-align: center; font-style: normal; font-size: 12px; font-weight: 700;
  color: var(--ld-text-3); border: 1px solid var(--ld-rand-stark) }
.bu-schalter[aria-pressed="true"] em{ color: #16a34a; border-color: rgba(22,163,74,.55); background: rgba(22,163,74,.12) }

/* ---------- Fragen an dich, Freigabemappe, Freigabe-Matrix, Qualität (22.10.2026, Plan autonomes KI-Büro, P2) ----------
   Unter der Betriebsleiste, über den Zahlen (kunden-admin-buero.js, zeichneFragen). Ruhig, solange nichts offen ist; gelb mit
   offenen Fragen, rot bei Dringendem oder einer nicht ausgeführten Antwort. Reiter statt neuer Seiten, damit René nichts sucht. */
.bu-fragen{ --f: #8a91a3; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--ld-flaeche); border: 1px solid var(--ld-rand); border-left: 3px solid var(--f); scroll-margin-top: 16px }
.bu-fragen[hidden]{ display: none }
.bu-fragen--offen{ --f: #d4a106 }
.bu-fragen--dringend{ --f: #ea6c10 }
.bu-fragen-kopf{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px }
.bu-fragen-kopf h2{ display: flex; align-items: center; gap: 9px; margin: 0; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.3;
  letter-spacing: 0; text-transform: none; color: var(--ld-text) }
.bu-fragen-punkt{ flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--f); box-shadow: 0 0 10px var(--f) }
.bu-reiter{ display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 10px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-reiter button{ display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border: 0; border-radius: 7px; cursor: pointer;
  background: none; color: var(--ld-text-2); font: inherit; font-size: 13px; font-weight: 600 }
.bu-reiter button[aria-selected="true"]{ background: var(--ld-flaeche-3); color: var(--ld-text) }
.bu-reiter-zahl{ min-width: 18px; padding: 0 6px; border-radius: 99px; background: #d4a106; color: #1a1405; font-size: 11.5px; font-weight: 700; text-align: center }
.bu-fragen-inhalt{ display: flex; flex-direction: column; gap: 10px }
.bu-fragen-text{ margin: 0; max-width: 90ch; font-size: 13px; line-height: 1.5; color: var(--ld-text-2) }
.bu-fragen-text b{ color: var(--ld-text) }
.bu-fragen h3{ margin: 4px 0 0; display: flex; align-items: center; gap: 8px; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ld-text-3) }
.bu-fragen h3 > span{ display: inline-flex; align-items: center; gap: 7px }
.bu-frage strong{ font-size: 14.5px }
.bu-frage-kopf{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--ld-text-2) }
.bu-frage-kopf b{ color: var(--ld-text) }
.bu-frage-kopf .bu-stand{ margin-left: auto }
.bu-frage-mehr summary{ cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ld-link) }
.bu-frage-mehr[open] summary{ margin-bottom: 6px }
.bu-frage-details{ white-space: pre-wrap; padding: 8px 10px; border-radius: 8px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand); font-size: 12.5px !important;
  line-height: 1.5; max-height: 260px; overflow-y: auto }
.bu-frage-verlauf{ margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 12.5px; color: var(--ld-text-2) }
.bu-frage-neben{ align-items: center }
.bu-frage .bu-feld textarea{ min-height: 56px }
.bu-fragen-wege{ padding: 8px 10px; border-radius: 10px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-fragen-wege .bu-schalter-liste{ margin: 4px 0 8px }
.bu-fragen-wege .bu-klein{ margin: 0 }
.bu-mappe-alle{ font-weight: 600; color: var(--ld-text) }
.bu-mappe-punkt{ padding: 8px 10px; border-radius: 9px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-mappe-punkt span{ min-width: 0; overflow-wrap: anywhere }
.bu-mappe-punkt small{ display: block; margin-top: 2px; font-size: 12px; color: var(--ld-text-3) }
.bu-mappe-punkt small a{ color: var(--ld-link) }
.bu-matrix-fk{ gap: 6px }
.bu-matrix-zeile{ display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px solid var(--ld-rand) }
.bu-matrix-zeile:first-of-type{ border-top: 0 }
.bu-matrix-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: var(--ld-text) }
.bu-matrix-text small{ font-size: 12px; color: var(--ld-text-3); overflow-wrap: anywhere }
.bu-matrix-form{ grid-column: 1 / -1 }
.bu-matrix-form .bu-modus{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) }
.bu-probe{ margin: 0; padding: 0; list-style: none; display: grid; gap: 6px }
.bu-probe li{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 7px 10px; border-radius: 9px;
  background: var(--ld-flaeche); border: 1px solid var(--ld-rand); font-size: 13px; color: var(--ld-text-2) }
.bu-probe li a{ color: var(--ld-link) }
.bu-probe .bu-knoepfe{ margin: 0 }
@media (max-width: 720px){
  .bu-fragen{ padding: 10px 12px }
  .bu-reiter{ width: 100% }
  .bu-reiter button{ flex: 1 1 auto; justify-content: center; padding: 0 8px; font-size: 12.5px }
  .bu-frage-kopf .bu-stand{ margin-left: 0 }
  .bu-matrix-zeile{ grid-template-columns: minmax(0, 1fr) auto }
  .bu-matrix-zeile .bu-mehr{ grid-column: 1 / -1; justify-self: start }
}

/* ---------- Deine Assistentin bei Jule (22.10.2026, Plan autonomes KI-Büro, P3) ----------
   kunden-admin-buero.js, assistHtml: PIN, Morgen-Briefing, „Bitte nicht stören“, Abwesenheit, Minuten, Gespräche mit der Assistentin.
   Ruhig wie die übrigen Abschnitte; jeder Teil als Kasten mit kleiner Überschrift, damit René die Schritte findet. */
.bu-assist{ scroll-margin-top: 12px }
.bu-assist h4{ margin: 0; font-family: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ld-text) }
.bu-assist .bu-klein{ margin: 0; line-height: 1.5 }
.bu-assist-teil{ display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-assist-teil .bu-mail{ background: var(--ld-flaeche) }
.bu-assist-weg{ display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(192,38,211,.4);
  background: color-mix(in srgb, #c026d3 7%, var(--ld-flaeche-2)); font-size: 13px; color: var(--ld-text-2) }
.bu-assist-weg b{ color: var(--ld-text) }
.bu-assist-weg ol{ margin: 0; padding-left: 20px; display: grid; gap: 4px; line-height: 1.5 }
.bu-assist-weg a{ color: var(--ld-link) }
.bu-assist-weg small{ font-size: 12px; color: var(--ld-text-3) }
.bu-assist-form{ display: flex; flex-direction: column; gap: 8px }
.bu-assist-form .bu-k{ align-self: flex-start }
.bu-assist-zwei{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.bu-assist-reihe{ flex-direction: row; flex-wrap: wrap; align-items: flex-end }
.bu-assist-reihe .bu-feld{ flex: 1 1 180px; min-width: 0 }
.bu-assist-reihe .bu-k{ align-self: flex-end; min-height: 36px }
.bu-assist-zeile{ flex-direction: row; align-items: center; justify-content: space-between; gap: 10px }
.bu-assist-zeile select{ width: auto; min-width: 140px }
.bu-assist input[type="password"]{ letter-spacing: .3em; font-variant-numeric: tabular-nums }
.bu-assist-liste{ margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12.5px; color: var(--ld-text-2) }
.bu-assist-liste li{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px }
.bu-assist-liste small{ flex-basis: 100%; font-size: 12px; color: var(--ld-text-3) }
.bu-assist .bu-mail .bu-knoepfe{ margin-top: 6px }
.bu-assist-teil > .bu-k{ align-self: flex-start }
.bu-assist .bu-entwurf-warum{ margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ld-text-2) }
@media (max-width: 720px){
  .bu-assist-zwei{ grid-template-columns: minmax(0, 1fr) }
  .bu-assist-zeile{ flex-direction: column; align-items: stretch }
  .bu-assist-zeile select{ width: 100% }
}

/* ---------- Portal-Kette, Kundenwissen, Leo, Greta (22.10.2026, Plan autonomes KI-Büro, P4) ----------
   kunden-admin-buero.js: Reiter „Portal-Kette“ (ketteHtml), Kundenwissen je Kunde (kundenwissenHtml), Greta „Direkt- und Vorlagen-
   Projekte“ (gretaProjekteHtml); buero-onboarding.js: Leos Ansicht. Ruhig wie die übrigen Abschnitte: je Schalter eine Zeile mit Satz
   links und Wahl rechts; was beim Kunden wirkt und an ist, bekommt einen violetten Rand. Am Handy steht die Wahl unter dem Text. */
.bu-unsichtbar{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.bu-stand--orange{ --m: #ea6c10 }
.bu-kette-recht{ padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(234,108,16,.45); background: color-mix(in srgb, #ea6c10 8%, var(--ld-flaeche-2));
  font-size: 13px; line-height: 1.5; color: var(--ld-text-2); max-width: 90ch }
.bu-kette-recht b{ color: var(--ld-text) }
.bu-kette-zeile{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 10px 12px; border-radius: 10px;
  background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-kette-zeile--an{ border-color: rgba(124,58,237,.55); box-shadow: inset 3px 0 0 #7c3aed }
.bu-kette-text{ display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.bu-kette-text b{ font-size: 14px; font-weight: 600; color: var(--ld-text) }
.bu-kette-text small{ font-size: 12.5px; line-height: 1.45; color: var(--ld-text-2) }
.bu-kette-text .bu-kette-hinweis{ color: #a8430a }
.bu-kette-text .bu-wer{ align-self: flex-start }
.bu-kette-wahl{ display: inline-flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }
.bu-kette-wahl button{ min-height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: none; cursor: pointer; color: var(--ld-text-2); font: inherit; font-size: 13px; font-weight: 600 }
.bu-kette-wahl button[aria-pressed="true"]{ background: var(--ld-flaeche-3); color: var(--ld-text); box-shadow: inset 0 0 0 1px rgba(192,38,211,.5) }
.bu-kette-wahl button[disabled]{ opacity: .6; cursor: progress }
.bu-kette-pause select{ min-width: 130px }
.bu-kette-frage{ grid-column: 1 / -1 }
.bu-kette-stunden{ max-width: 260px }
.bu-kette-kacheln{ display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px }
.bu-kette-kachel{ display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-kette-kachel b{ font-size: 18px; font-weight: 700; color: var(--ld-text); font-variant-numeric: tabular-nums }
.bu-kette-kachel small{ font-size: 12px; color: var(--ld-text-3) }
.bu-kette-kachel--rot{ border-color: rgba(220,38,38,.6) }
.bu-kette-kachel--rot b{ color: #a51c1c }
.bu-kette-kunde{ display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-kette-kunde-kopf{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--ld-text) }
.bu-kette-kunde-zeile{ display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--ld-text-2) }
.bu-kette-kunde-zeile > span:first-child{ color: var(--ld-text-3); font-size: 12px }
.bu-kette-tage{ display: inline-flex; align-items: center; gap: 4px }
.bu-kette-tage i{ width: 10px; height: 10px; border-radius: 3px; background: var(--ld-flaeche-3); border: 1px solid var(--ld-rand-stark) }
.bu-kette-tage i.bu-an{ background: #7c3aed; border-color: #7c3aed }
.bu-kette-tage b{ margin-left: 6px; font-weight: 600; color: var(--ld-text-2); font-variant-numeric: tabular-nums }
.bu-kw{ display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }
.bu-kw h4{ margin: 4px 0 0; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ld-text) }
.bu-kw .bu-klein{ margin: 0; line-height: 1.5 }
.bu-kw-liste{ margin: 0; padding: 0; list-style: none; display: grid; gap: 6px }
.bu-kw-fakt{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 6px 10px; padding: 8px 0; border-top: 1px solid var(--ld-rand);
  font-size: 13px; color: var(--ld-text-2) }
.bu-kw-fakt:first-child{ border-top: 0 }
.bu-kw-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere }
.bu-kw-text small{ font-size: 11.5px; color: var(--ld-text-3) }
.bu-kw-fakt--aendern{ grid-template-columns: minmax(0, 1fr) }
.bu-kw-neu{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px }
.bu-kw-neu .bu-feld{ flex: 1 1 260px; min-width: 0 }
.bu-kw-neu .bu-k{ min-height: 36px }
.bu-leo-modus{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-leo-modus p{ margin: 0; font-size: 13px; line-height: 1.45; color: var(--ld-text-2) }
.bu-leo-modus b{ color: var(--ld-text) }
.bu-leo-start .bu-betrieb-frage ul{ margin: 0 }
.bu-leo-schritte{ margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; line-height: 1.45; color: var(--ld-text-2) }
.bu-leo-schritte li.bu-an{ color: var(--ld-text-3) }
.bu-leo-schritte em{ font-style: normal; font-weight: 600; color: #a8430a }
.bu-leo-schritte small{ font-size: 11.5px; color: var(--ld-text-3) }
.bu-leo-liste{ margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--ld-text-2) }
.bu-leo-liste li{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px }
.bu-leo-liste li > span:last-child{ display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.bu-leo-liste small{ font-size: 11.5px; color: var(--ld-text-3) }
@media (max-width: 720px){
  .bu-kette-zeile{ grid-template-columns: minmax(0, 1fr) }
  .bu-kette-wahl{ justify-self: start; flex-wrap: wrap }
  .bu-kette-kunde-zeile{ grid-template-columns: minmax(0, 1fr) }
  .bu-kette-kunde-zeile .bu-k{ justify-self: start }
  .bu-kw-fakt{ grid-template-columns: minmax(0, 1fr) }
  .bu-leo-modus{ grid-template-columns: minmax(0, 1fr) }
  .bu-leo-modus .bu-k{ justify-self: start }
}

/* =========================================================
   P9 (25.10.2026, Plan autonomes KI-Büro, Baustein b „Büro-Oberflächen“) — Stile für die bisher ungestylten Klassen und die neuen Elemente
   der Reiter „Jule“ (buero-jule.js) und „Buchhaltung“ (buero-mahnlauf-clara.js) sowie für die Monitoring-Kette bei Mila
   (buero-monitoring.js, Klassen bu-mk-*, P6). Gleiche Sprache wie bu-kette-* und bu-kw: ruhige Flächen, ein Rand in der Farbe des Stands,
   Knöpfe wie bu-k. Handybreite (konto-app.css, Regeln gegen zu breite Seiten): alles darf schrumpfen (min-width: 0), lange Wörter brechen
   um, Knöpfe mit längerem Text brechen die Zeile um, statt die Seite zu verbreitern; ab 720 px stehen Spalten untereinander.
   ========================================================= */

/* Links in Hinweisen (Jule: „dorthin“, Apple-Konto) in der Linkfarbe des Büros */
.bu-kette-recht a, .bu-fragen-text a{ color: var(--ld-link) }

/* Hinweise in Orange (Vertrieb, Jule, Buchhaltung): Schrift wie die übrigen Hinweise, ohne Außenabstand */
.bu-fragen-inhalt .bu-achtung{ margin: 0; font-size: 13px; line-height: 1.5 }

/* Karte für einen Eintrag (Entwurf, Mahnung, Abschluss-Liste, Kalenderverbindung) */
.bu-box{ display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-box--an{ border-color: rgba(212,161,6,.5); box-shadow: inset 3px 0 0 #d4a106 }
.bu-box--warn{ border-color: rgba(220,38,38,.55); box-shadow: inset 3px 0 0 #dc2626 }
.bu-box p{ margin: 0; font-size: 13px; line-height: 1.5; color: var(--ld-text-2) }
.bu-box p b{ color: var(--ld-text) }
.bu-box-kopf{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 14px; color: var(--ld-text) }
.bu-box-kopf small{ font-size: 12px; color: var(--ld-text-3) }
.bu-box .bu-k{ height: auto; min-height: 32px; padding-top: 5px; padding-bottom: 5px; text-align: left; white-space: normal }
.bu-box .bu-assist-liste{ margin: 0 }
.bu-box .bu-feld textarea{ min-height: 96px }
.bu-box .bu-feld textarea[readonly]{ color: var(--ld-text-2); background: var(--ld-flaeche) }

/* Formulare (Jule-Kalender verbinden, Sperrliste, Zahlung angekündigt, Abschluss-Liste anlegen) */
.bu-form{ display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 560px; padding: 10px 12px; border-radius: 10px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-form h4{ margin: 0; font-family: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ld-text) }
.bu-form p{ margin: 0; line-height: 1.5 }
.bu-form .bu-k{ align-self: flex-start }
.bu-form .bu-feld input[type="password"]{ letter-spacing: .12em; font-variant-numeric: tabular-nums }
.bu-form .bu-feld input[type="date"]{ max-width: 220px }
.bu-form--zeile{ flex-direction: row; flex-wrap: wrap; align-items: flex-end; max-width: none }
.bu-form--zeile .bu-feld{ flex: 1 1 220px; min-width: 0 }
.bu-form--zeile .bu-k{ align-self: flex-end; min-height: 36px }
.bu-jule-schritte{ margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.5; color: var(--ld-text-2) }
.bu-jule-schritte a{ color: var(--ld-link) }
.bu-adresse{ display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.bu-adresse input{ min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; text-overflow: ellipsis }

/* Sperrliste für Anrufe bei anderen */
.bu-sperre-spalten{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start }
.bu-sperre-spalten h4{ margin: 0 0 6px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ld-text) }
.bu-sperre-spalten > div{ display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.bu-sperre-liste{ margin: 0; padding: 0; list-style: none; display: grid; gap: 4px }
.bu-sperre-eintrag{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 6px 10px; border-radius: 8px;
  background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ld-text) }
.bu-sperre-eintrag > span:first-child{ min-width: 0 }
.bu-sperre-frage{ flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; color: var(--ld-text-2) }

/* Abschluss-Liste der Clara (fünf Punkte je Kunde) */
.bu-pkte{ margin: 0; padding: 0; list-style: none; display: grid; gap: 0 }
.bu-pkt{ display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 9px 0; border-top: 1px solid var(--ld-rand) }
.bu-pkt:first-child{ border-top: 0; padding-top: 2px }
.bu-pkt-kopf{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--ld-text) }
.bu-pkt small{ font-size: 12px; line-height: 1.45; color: var(--ld-text-3) }
.bu-pkt .bu-betrieb-frage{ margin-top: 2px }

/* Monitoring-Kette bei Mila (P6): Schalter, Vorschau-Zeilen, Textbausteine */
.bu-mk-schalter, .bu-mk-zeile, .bu-mk-baustein{ display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 10px;
  background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-mk-schalter p, .bu-mk-zeile p, .bu-mk-baustein p{ margin: 0; font-size: 13px; line-height: 1.5; color: var(--ld-text-2) }
.bu-mk-schalter p b, .bu-mk-zeile p b, .bu-mk-baustein summary b{ color: var(--ld-text); font-weight: 600 }
.bu-mk-schalter > div{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px }
.bu-mk-zeile > p:first-child{ line-height: 1.8; color: var(--ld-text) }   /* Marke, Titel und Rest laufen als Text weiter, ohne eine Zeile mit „·“ zu beginnen */
.bu-mk-zeile .bu-klein{ font-size: 12px; color: var(--ld-text-3) }
.bu-mk-zeile .bu-k, .bu-mk-schalter .bu-k, .bu-mk-baustein .bu-k{ align-self: flex-start; height: auto; min-height: 32px; padding-top: 5px; padding-bottom: 5px; text-align: left; white-space: normal }
.bu-mk-baustein summary{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; cursor: pointer; font-size: 13.5px; color: var(--ld-text) }
.bu-mk-baustein[open] summary{ margin-bottom: 6px }
.bu-mk-baustein summary:focus-visible{ outline: 2px solid #0891b2; outline-offset: 2px; border-radius: 6px }
.bu-mk-baustein > p:not(.bu-klein){ white-space: pre-wrap; padding: 8px 10px; border-radius: 8px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }

/* Befund- und E5-Karten im Vertrieb (P5): wie ein Entwurf, mit farbigem Rand */
.bu-entwurf.bu-befund{ border-left: 3px solid #3b82f6 }
.bu-entwurf.bu-e5{ border-left: 3px solid #c026d3 }

/* Bank (Kurt): Anmeldung bei Lexware, Umsatzliste, Pakete (25.10.2026, Plan autonomes KI-Büro, P10) */
.bu-kurt-karte{ display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.bu-kurt-karte p{ margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ld-text-2) }
.bu-kurt-karte .bu-klein{ font-size: 12px; color: var(--ld-text-3) }
.bu-kurt-chip{ display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--c, var(--ld-rand-stark));
  background: color-mix(in srgb, var(--c, #8a91a3) 14%, transparent); color: var(--c, var(--ld-text-2)); font-size: 12px; font-weight: 700; white-space: nowrap }
.bu-kurt-chip--gruen{ --c: #16a34a } .bu-kurt-chip--gelb{ --c: #d4a106 } .bu-kurt-chip--rot{ --c: #dc2626 }
.bu-kurt-chip--blau{ --c: #3b82f6 } .bu-kurt-chip--grau{ --c: #8a91a3 }
.bu-kurt-filter{ display: inline-flex; flex-wrap: wrap; gap: 3px; align-self: flex-start; padding: 3px; border-radius: 9px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }
.bu-kurt-filter button{ min-height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: none; cursor: pointer; color: var(--ld-text-2); font: inherit; font-size: 13px; font-weight: 600 }
.bu-kurt-filter button[aria-pressed="true"]{ background: var(--ld-flaeche-3); color: var(--ld-text); box-shadow: inset 0 0 0 1px rgba(192,38,211,.5) }
.bu-kurt-filter button:focus-visible, .bu-kette-wahl button:focus-visible{ outline: 2px solid #0891b2; outline-offset: 1px }
.bu-kurt-liste{ margin: 0; padding: 0; list-style: none; display: grid; gap: 8px }
.bu-kurt-umsatz{ display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand);
  border-left: 3px solid var(--ld-rand-stark) }
.bu-kurt-umsatz--sicher{ border-left-color: #16a34a } .bu-kurt-umsatz--unsicher{ border-left-color: #d4a106 } .bu-kurt-umsatz--fehlt{ border-left-color: #dc2626 }
.bu-kurt-umsatz p{ margin: 0 }
.bu-kurt-kopf{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; color: var(--ld-text) }
.bu-kurt-datum{ font-size: 12.5px; color: var(--ld-text-3); font-variant-numeric: tabular-nums }
.bu-kurt-betrag{ font-variant-numeric: tabular-nums; white-space: nowrap }
.bu-kurt-betrag--ein{ color: #146c35 }
.bu-kurt-gegen{ min-width: 0; overflow-wrap: anywhere; color: var(--ld-text-2) }
.bu-kurt-ergebnis{ font-size: 13.5px; font-weight: 600; color: var(--ld-text) }
.bu-kurt-zweck{ overflow-wrap: anywhere }

@media (max-width: 720px){
  .bu-sperre-spalten{ grid-template-columns: minmax(0, 1fr) }
  .bu-form{ max-width: none }
  .bu-form--zeile{ flex-direction: column; align-items: stretch }
  .bu-form--zeile .bu-k{ align-self: flex-start }
  .bu-box-kopf, .bu-pkt-kopf{ gap: 4px 6px }
}

/* Reiter „Stichprobe“ (26.10.2026, buero-stichprobe.js): der gekürzte Auszug der KI-Arbeit, zum Gegenlesen */
.bu-sp-auszug{ margin: 0; padding: 8px 10px; border-left: 3px solid var(--ld-rand); border-radius: 6px; background: var(--ld-flaeche); font-size: 13px;
  line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere }

/* ---------- Zweiklang (30.10.2026): vier Seiten — nur zeigen, was auf die gewählte Seite gehört ----------
   René: „man wird von informationen regelrecht erschlagen“. Heute = Betrieb + Morgenbericht + Briefkasten (volle Breite),
   Fragen & Freigaben = das Fragen-Panel mit seinen Entscheidungs-Reitern, Team = Abteilungen (3D oder Liste),
   Einstellungen = Betrieb mit Kosten und die Schalter-Reiter. */
.bu-seiten{ margin: 2px 0 4px }
.ld-haupt:not([data-buseite="team"]) .bu-nur-team{ display: none }
.ld-haupt[data-buseite="heute"] #fragen,
.ld-haupt[data-buseite="heute"] #buZahlen,
.ld-haupt[data-buseite="heute"] .bu-links{ display: none }
.ld-haupt[data-buseite="heute"] .bu-arbeit{ grid-template-columns: minmax(0, 1fr) }
/* 01.11.2026 (René: „wenn ich auf der seite in der mitte scrollen möchte geht das nicht“): Auf „Heute“ ist die Leiste die ganze Mitte, ohne
   Höhengrenze — dann auch kein eigener Scrollbereich. overflow-y: auto mit overscroll-behavior: contain schluckte sonst das Mausrad. */
.ld-haupt[data-buseite="heute"] .bu-leiste{ position: static; max-height: none; overflow: visible; overscroll-behavior: auto; border-radius: 18px }
.ld-haupt[data-buseite="fragen"] #buBetrieb,
.ld-haupt[data-buseite="fragen"] #buZahlen,
.ld-haupt[data-buseite="fragen"] .bu-arbeit{ display: none }
.ld-haupt[data-buseite="team"] #buBetrieb,
.ld-haupt[data-buseite="team"] #fragen{ display: none }
.ld-haupt[data-buseite="team"] .bu-leiste:not(.bu-leiste--abteilung){ display: none }
.ld-haupt[data-buseite="team"] .bu-arbeit:not(:has(.bu-leiste--abteilung)){ grid-template-columns: minmax(0, 1fr) }
.ld-haupt[data-buseite="einstellungen"] #buZahlen,
.ld-haupt[data-buseite="einstellungen"] .bu-arbeit{ display: none }
/* Die Reiter der Einstellungen untereinander als ruhige Liste lesen sich besser als eine Zeile mit sieben Knöpfen */
.ld-haupt[data-buseite="einstellungen"] #fragen .bu-reiter{ flex-wrap: wrap }
/* Zweiklang: Abschnittstitel normal geschrieben wie überall (statt kleiner Versalien) */
.bu-leiste h3, .bu-lade-inhalt h3, .bu-zuerst-titel{ font-family: var(--zk-schrift) !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ld-text-2) !important }
.bu-betrieb{ border-left-width: 1px !important }

/* ---------- „Raum betreten“ und Ich-Perspektive (buero-szene.js, buero-ego.js, 01.11.2026) ---------- */
.bu-eingaenge{ position: absolute; inset: 0; pointer-events: none; overflow: hidden }
.bu-eingang{ position: absolute; left: 0; top: 0; transform: translate(-50%, 6px); pointer-events: auto; display: inline-flex; align-items: center; gap: 5px;
  min-height: 30px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--ld-rand-stark); background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 10px rgba(11, 13, 22, .14); color: var(--ld-text); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer }
.bu-eingang--mitte{ transform: translate(-50%, 60px) }
.bu-eingang:hover{ border-color: var(--ld-text-3) }
.bu-eingang:focus-visible{ outline: 2px solid #6a2cd8; outline-offset: 2px }
.bu-eingang span[aria-hidden]{ font-size: 13px; line-height: 1 }
.bu-ego{ position: absolute; inset: 0; pointer-events: none; z-index: 3 }
.bu-ego-kopf{ position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; pointer-events: auto;
  padding: 4px 12px 4px 4px; border-radius: 99px; background: rgba(255, 255, 255, .95); border: 1px solid var(--ld-rand-stark); box-shadow: 0 2px 12px rgba(11, 13, 22, .16) }
.bu-ego-raus{ display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 99px; background: #111827; color: #fff;
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer }
.bu-ego-raus:focus-visible{ outline: 2px solid #6a2cd8; outline-offset: 2px }
.bu-ego-titel{ font-size: 13.5px; color: var(--ld-text); white-space: nowrap }
.bu-ego-hilfe{ position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; padding: 5px 12px; border-radius: 99px; max-width: calc(100% - 32px);
  background: rgba(17, 24, 39, .72); color: #fff; font-size: 12px; text-align: center; pointer-events: none }
.bu-ego-namen{ position: absolute; inset: 0; overflow: hidden; pointer-events: none }
.bu-ego-kreuz{ position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; display: none; pointer-events: none }
.bu-ego-kreuz::before, .bu-ego-kreuz::after{ content: ""; position: absolute; background: rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(17, 24, 39, .55) }
.bu-ego-kreuz::before{ left: 10px; top: 2px; width: 2px; height: 18px }
.bu-ego-kreuz::after{ top: 10px; left: 2px; height: 2px; width: 18px }
.bu-ego--gefangen .bu-ego-kreuz{ display: block }
.bu-ego-kreuz--person::before, .bu-ego-kreuz--person::after{ background: #25d366 }
.bu-ego-name{ position: absolute; left: 0; top: 0; padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, .94); color: #111827; font-size: 12px; font-weight: 600;
  box-shadow: 0 1px 6px rgba(11, 13, 22, .18); white-space: nowrap; transform-origin: 50% 100% }
.bu-ego-name--aus{ opacity: .6 }
.bu-ego-stick{ position: absolute; left: 22px; bottom: 54px; width: 116px; height: 116px; border-radius: 50%; pointer-events: auto; touch-action: none; display: none;
  background: rgba(17, 24, 39, .22); border: 2px solid rgba(255, 255, 255, .7); backdrop-filter: blur(4px) }
.bu-ego-stick span{ position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25) }
@media (pointer: coarse){ .bu-ego-stick{ display: block } }
.bu-buehne--ego .bu-pausen, .bu-buehne--ego .bu-tip, .bu-buehne--ego .bu-legende, .bu-buehne--ego .bu-hinweis, .bu-buehne--ego .kt-hinweis{ display: none }
@media (max-width: 720px){
  .bu-eingang{ min-height: 28px; padding: 0 9px; font-size: 11.5px }
  .bu-eingang-text{ font-size: 0 }
  .bu-eingang-text::after{ content: "Betreten"; font-size: 11.5px }
  .bu-ego-hilfe{ display: none }
}

/* Handy: im Raum über den ganzen Bildschirm */
@media (max-width: 720px){
  .bu-buehne.bu-buehne--ego{ position: fixed; inset: 0; z-index: 65; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0 }
  .bu-buehne--ego .bu-voll{ display: none }
  .bu-ego-kopf{ top: calc(10px + env(safe-area-inset-top, 0px)) }
  .bu-ego-stick{ bottom: calc(40px + env(safe-area-inset-bottom, 0px)) }
}

/* ---------- Chat mit einer Fachkraft im Look von WhatsApp (buero-chat.js, 01.11.2026) ---------- */
.wa{ position: fixed; top: 0; right: 0; bottom: 0; z-index: 75; width: min(420px, 100%); display: flex; flex-direction: column; box-sizing: border-box;
  background: #efeae2; color: #111b21; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14.5px;
  box-shadow: -8px 0 32px rgba(11, 13, 22, .22); transform: translateX(104%); transition: transform .22s cubic-bezier(.2, .8, .2, 1) }
.wa--an{ transform: none }
.wa[hidden]{ display: none }
.wa-kopf{ flex: none; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px 6px;
  background: #f0f2f5; border-bottom: 1px solid #d1d7db }
.wa-zu, .wa-details{ display: inline-grid; place-items: center; border: 0; background: transparent; color: #54656f; font: inherit; cursor: pointer }
.wa-zu{ width: 40px; height: 40px; border-radius: 50% }
.wa-zu svg{ width: 22px; height: 22px; fill: currentColor }
.wa-zu:hover, .wa-details:hover{ background: rgba(11, 20, 26, .06) }
.wa-bild{ flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--wa-ton, #6a2cd8); color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .25) }
.wa-wer{ min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25 }
.wa-name{ font-size: 16px; font-weight: 500; color: #111b21; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wa-stand{ font-size: 13px; color: #667781 }
.wa-stand--schreibt{ color: #008069 }
.wa-details{ padding: 7px 12px; border-radius: 99px; border: 1px solid #d1d7db; background: #fff; color: #111b21; font-size: 13px; font-weight: 500 }
.wa-verlauf{ flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px 8px; display: flex; flex-direction: column; gap: 2px;
  background-color: #efeae2;
  background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1.4px), radial-gradient(rgba(0, 0, 0, .025) 1px, transparent 1.4px);
  background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px }
.wa-chip{ align-self: center; margin: 8px 0 6px; padding: 5px 12px; border-radius: 8px; background: #fff; color: #54656f; font-size: 12.5px;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13); text-align: center; max-width: 88% }
.wa-chip--hinweis{ background: #ffeecd; color: #54656f; font-size: 12px; line-height: 1.4 }
.wa-zeile{ display: flex; flex-direction: column; margin-top: 8px }
.wa-zeile--folgt{ margin-top: 2px }
.wa-zeile--ich{ align-items: flex-end }
.wa-zeile--sie{ align-items: flex-start }
.wa-blase{ position: relative; max-width: min(82%, 520px); padding: 6px 8px 8px 9px; border-radius: 8px; background: #fff; box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
  line-height: 1.4; overflow-wrap: anywhere; white-space: normal }
.wa-zeile--ich .wa-blase{ background: #d9fdd3 }
.wa-zeile--ich:not(.wa-zeile--folgt) .wa-blase{ border-top-right-radius: 0 }
.wa-zeile--sie:not(.wa-zeile--folgt) .wa-blase{ border-top-left-radius: 0 }
.wa-zeile--ich:not(.wa-zeile--folgt) .wa-blase::before, .wa-zeile--sie:not(.wa-zeile--folgt) .wa-blase::before{ content: ""; position: absolute; top: 0; width: 8px; height: 13px }
.wa-zeile--ich:not(.wa-zeile--folgt) .wa-blase::before{ right: -8px; background: #d9fdd3; clip-path: polygon(0 0, 100% 0, 0 100%) }
.wa-zeile--sie:not(.wa-zeile--folgt) .wa-blase::before{ left: -8px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%) }
.wa-text a{ color: #027eb5 }
.wa-zeit{ float: right; display: inline-flex; align-items: center; gap: 3px; margin: 8px 0 -4px 10px; font-size: 11px; color: #667781; line-height: 1; white-space: nowrap }
.wa-haken{ display: inline-flex }
.wa-haken svg{ width: 16px; height: 11px; fill: #8696a0 }
.wa-haken--gelesen svg{ fill: #53bdeb }
.wa-blase--fehler{ opacity: .7 }
.wa-nochmal{ margin-top: 3px; border: 0; background: transparent; color: #c0392b; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline }
.wa-tippt{ display: inline-flex; gap: 4px; padding: 12px 14px }
.wa-tippt i{ width: 7px; height: 7px; border-radius: 50%; background: #8696a0; animation: wa-punkt 1.2s infinite ease-in-out }
.wa-tippt i:nth-child(2){ animation-delay: .15s }
.wa-tippt i:nth-child(3){ animation-delay: .3s }
@keyframes wa-punkt{ 0%, 60%, 100%{ transform: translateY(0); opacity: .5 } 30%{ transform: translateY(-4px); opacity: 1 } }
.wa-eingabe{ flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: #f0f2f5 }
.wa-feld{ flex: 1; min-width: 0; display: flex; padding: 9px 14px; border-radius: 22px; background: #fff }
.wa-feld textarea{ flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; color: #111b21; font: inherit; font-size: 16px; line-height: 1.35; max-height: 120px }   /* 16 px: darunter zoomt iOS beim Antippen hinein (René 01.11.2026) */
.wa-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.wa-senden{ flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: #00a884; color: #fff; cursor: pointer }
.wa-senden svg{ width: 22px; height: 22px; fill: currentColor; margin-left: 2px }
.wa-senden:hover{ background: #008f72 }
.wa-zu:focus-visible, .wa-details:focus-visible, .wa-senden:focus-visible{ outline: 2px solid #008069; outline-offset: 2px }
.wa-feld:focus-within{ box-shadow: 0 0 0 2px rgba(0, 168, 132, .35) }
@media (max-width: 640px){
  .wa{ width: 100%; box-shadow: none }
  html.wa-offen{ overflow: hidden }
}
@media (prefers-reduced-motion: reduce){ .wa{ transition: none } .wa-tippt i{ animation: none; opacity: .8 } }

/* Auswahl beim Anklicken einer Person: Details oder Chat (buero-chat.js personMenue, 01.11.2026) */
.wa-menue{ position: fixed; z-index: 76; min-width: 210px; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--ld-rand-stark, #d1d5db);
  box-shadow: 0 12px 32px rgba(11, 13, 22, .22); display: grid; gap: 4px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif }
.wa-menue-kopf{ display: flex; align-items: center; gap: 9px; margin: 2px 4px 6px; color: #111827; line-height: 1.25 }
.wa-menue-kopf strong{ display: block; font-size: 14px }
.wa-menue-kopf small{ display: block; font-size: 12px; color: #6b7280 }
.wa-menue-bild{ flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--wa-ton, #6a2cd8); color: #fff; font-size: 12.5px; font-weight: 600 }
.wa-menue button{ min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: #f3f4f6; color: #111827; font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer }
.wa-menue button:hover, .wa-menue button:focus-visible{ background: #e5e7eb; outline: none }
.wa-menue button[data-menue="chat"]{ background: #d9fdd3 }
.wa-menue button[data-menue="chat"]:hover, .wa-menue button[data-menue="chat"]:focus-visible{ background: #c3f5ba }

/* Spielautomaten (buero-spiele.js, 01.11.2026): Ebene über dem ganzen Bildschirm */
.bs{ position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: #05040c; color: #f8fafc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) }
/* Kopfzeile schwebt über dem Spielbild; Punkte und Leben zeichnet das Spiel selbst, .bs-stand ist nur für Bildschirmleser */
.bs-kopf{ position: absolute; z-index: 1; top: env(safe-area-inset-top, 0px); left: 0; right: 0; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; pointer-events: none }
.bs-kopf strong{ padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #f8fafc; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.bs-kopf strong::before{ content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px;
  background: var(--bs-ton, #a78bfa); box-shadow: 0 0 10px var(--bs-ton, #a78bfa) }
.bs-stand{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.bs-tipp{ margin-left: auto; font-size: 12px; color: rgba(255, 255, 255, .45) }
.bs-zu{ flex: none; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer; pointer-events: auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.bs-zu:hover, .bs-zu:focus-visible{ background: rgba(255, 255, 255, .2); outline: none }
.bs-ton{ flex: none; min-height: 34px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .75);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; pointer-events: auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.bs-ton[aria-pressed="true"]{ color: #fff; border-color: var(--bs-ton, #a78bfa); box-shadow: 0 0 12px color-mix(in srgb, var(--bs-ton, #a78bfa) 45%, transparent) }
.bs-buehne{ position: relative; flex: 1; min-height: 0 }
.bs-buehne canvas{ display: block; touch-action: none; cursor: pointer }
.bs-knoepfe{ flex: none; display: none; gap: 10px; justify-content: center; padding: 10px 12px 14px; background: #05040c }
.bs-knoepfe button{ min-width: 64px; min-height: 56px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px;
  background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); color: #fff;
  font: inherit; font-size: 20px; font-weight: 700; touch-action: none; user-select: none; -webkit-user-select: none }
.bs-knoepfe button:active{ background: var(--bs-ton, #a78bfa); color: #07080f }
@media (pointer: coarse){ .bs-knoepfe{ display: flex } .bs-tipp{ display: none } }

/* ---------- Tag und Nacht, Ton, Arbeit sichtbar (02.11.2026: buero-tageszeit.js, buero-ton.js, buero-arbeit.js) ---------- */
.bu-tagleiste{ position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2; width: max-content; display: flex; align-items: center; gap: 6px; pointer-events: none }
.bu-zeit, .bu-ton{ display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--ld-rand-stark);
  background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(11, 13, 22, .12); backdrop-filter: blur(6px); color: var(--ld-text-2); font: inherit; font-size: 12.5px; white-space: nowrap }
.bu-zeit:empty{ display: none }
.bu-zeit b{ color: var(--ld-text); font-weight: 700; font-variant-numeric: tabular-nums }
.bu-ton{ pointer-events: auto; cursor: pointer; font-weight: 600; color: var(--ld-text) }
.bu-ton:hover{ border-color: var(--ld-text-3) }
.bu-ton[aria-pressed="true"]{ background: #ecfdf3; border-color: #86efac; color: #146c35 }
.bu-zeit svg, .bu-ton svg{ flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.bu-buehne--ego .bu-zeit{ display: none }
.bu-buehne--ego .bu-tagleiste{ top: auto; bottom: 14px; left: auto; right: 14px; transform: none; z-index: 3 }
@media (max-width: 759px){ .bu-tagleiste{ top: 54px } .bu-ton span{ display: none } .bu-ton{ padding: 0 9px } .bu-zeit{ font-size: 11.5px } }
.bu-blase--arbeit i, .bu-blase--akte i{ display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; vertical-align: 1px }
.bu-blase--arbeit span{ color: var(--ld-text-2) }
.bu-blase--akte{ border-color: #c4b5fd; background: #f5f3ff }
.bu-ego-name small{ display: block; margin-top: 1px; font-size: 10.5px; font-weight: 500; color: #4b5563; text-align: center }
.bu-ego-name small[hidden]{ display: none }
.bu-ego-name:has(small:not([hidden])){ border-radius: 10px }
/* Ich-Perspektive auf dem iPhone (02.11.2026): kein Kontextmenü und keine Lupe bei langem Drücken, kein Doppeltipp-Zoom auf Knöpfen,
   die Seite dahinter scrollt nicht mit, Abstand zu Notch und Home-Leiste (env() ist 0, wo es keine gibt) */
.bu-buehne--ego, .bu-buehne--ego canvas{ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent }
.bu-buehne--ego button{ touch-action: manipulation }
@media (pointer: coarse){
  body:has(.bu-buehne--ego){ overflow: hidden; overscroll-behavior: none }
  .bu-buehne--ego .bu-ego-kopf{ top: calc(12px + env(safe-area-inset-top, 0px)) }
  .bu-buehne--ego .bu-ego-stick{ bottom: calc(54px + env(safe-area-inset-bottom, 0px)); left: calc(22px + env(safe-area-inset-left, 0px)) }
  .bu-buehne--ego .bu-ego-hilfe{ bottom: calc(12px + env(safe-area-inset-bottom, 0px)) }
  .bu-buehne--ego .bu-tagleiste{ bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)) }
}

/* Lenas Anrufliste (Neuordnung 02.11.2026) */
.bu-anrufliste{ margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: anruf }
.bu-anrufliste > li{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--ld-rand); border-radius: 10px; background: var(--ld-flaeche, #fff); counter-increment: anruf }
.bu-anrufliste > li::before{ content: counter(anruf); flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #dbeafe; color: #1e3a8a; font-size: 12px; font-weight: 700 }
.bu-anrufliste > li > span{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px }
.bu-anrufliste > li > span > b{ font-size: 13.5px; color: var(--ld-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.bu-anrufliste > li > span > small{ font-size: 12px; color: var(--ld-text-2) }
.bu-anrufliste > li > .bu-k{ flex: none }   /* 13.11.2026: nur die Zeilen selbst (> li), nicht die Listen im Spickzettel */

/* Schritt 4 „Kundenbeiträge“ (12.11.2026, buero-kundenbeitraege.js): Art der Arbeit, Nachträge mit „Umhängen“, Erledigt melden, Tagesliste */
.kb-art{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ld-text-2); margin: 6px 0 }
.kb-art select{ min-height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--ld-rand-stark); background: var(--ld-flaeche, #fff); color: inherit; max-width: 100% }
.kb-nachtraege{ display: grid; gap: 6px; margin: 6px 0 }
.kb-nachtrag{ border-left: 3px solid #c026d3; padding: 4px 0 4px 10px; font-size: 13px; overflow-wrap: anywhere }
.kb-nachtrag p{ margin: 0 0 4px }
.kb-nachtrag small{ color: var(--ld-text-2) }
.bu-k.kb-klein{ min-height: 30px; padding: 0 10px; font-size: 12.5px }
.kb-umhaengen{ display: grid; gap: 6px; margin: 6px 0 }
.kb-hinweis{ color: #b45309 }
.kb-erledigt{ margin: 8px 0; font-size: 13px }
.kb-erledigt summary{ cursor: pointer; color: var(--ld-text-2) }
.kb-erledigt[open]{ display: grid; gap: 6px }
.kb-tl{ margin: 4px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px }
.kb-tl small{ display: block; color: var(--ld-text-2) }
.kb-tl-schalter{ margin: 8px 0 }

/* Wünsche (René 12.11.2026, Schritt 5): Wunsch-Akte je Kunde, Prüfung „schon im Projekt?“, Knöpfe für René (buero-wuensche.js) */
.wu-akte{ display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand);
  overflow-wrap: anywhere }
.wu-akte--fertig{ opacity: .8 }
.wu-kopf{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--ld-text-2) }
.wu-titel{ margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ld-text) }
.wu-text{ font-size: 13px; color: var(--ld-text-2) }
.wu-text summary{ cursor: pointer; line-height: 1.45 }
.wu-text p{ margin: 6px 0 0; white-space: pre-line }
.wu-pruefung{ padding: 8px 10px; border-radius: 8px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand); font-size: 13px }
.wu-pruefung p{ margin: 0 0 4px }
.wu-pruefung ul{ margin: 2px 0 4px; padding-left: 18px; display: grid; gap: 2px }
.wu-pruefung small{ color: var(--ld-text-3) }
.wu-schritt{ margin: 0; font-size: 13px }
.wu-schritt b{ color: #c026d3; font-weight: 600 }
.wu-hinweis{ padding: 8px 10px; border-radius: 8px; border: 1px dashed var(--ld-rand-stark) }
.wu-form{ display: grid; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand); font-size: 13px }
.wu-form summary{ cursor: pointer; font-weight: 600; color: var(--ld-text-2) }
.wu-form[open]{ padding-bottom: 10px }

/* Lena als Vertriebsbegleiterin (13.11.2026, Schritt 6, kunden-admin-buero.js): Klasse am Titel, Spickzettel zum Aufklappen, Ergebnis-Knöpfe,
   Rückruf mit Tag und Uhrzeit, Mail-Entwurf mit Empfänger. Auf dem Telefon brechen Knöpfe und Felder um, nichts läuft seitlich heraus. */
.bu-klasse{ display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-right: 6px; border-radius: 6px; font-size: 12px; font-weight: 800;
  vertical-align: 1px; background: #e5e7eb; color: #374151 }
.bu-klasse--a{ background: #dcfce7; color: #166534 }
.bu-klasse--b{ background: #fef3c7; color: #92400e }
.bu-klasse--c{ background: #f3f4f6; color: #6b7280 }
.bu-spick{ margin-top: 6px; border: 1px dashed var(--ld-rand-stark); border-radius: 10px; padding: 6px 10px; background: var(--ld-flaeche, #fff); overflow-wrap: anywhere }
.bu-spick summary{ cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ld-text) }
.bu-spick[open] summary{ margin-bottom: 6px }
.bu-spick-fakten{ margin: 0 0 6px; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 13px; color: var(--ld-text) }
.bu-spick-fakten b{ color: var(--ld-text-2); font-weight: 600; margin-right: 4px }
.bu-spick-liste{ margin: 2px 0 6px; padding-left: 1.2em; display: grid; gap: 3px; font-size: 13px }
.bu-anrufliste .bu-spick{ white-space: normal; margin-top: 4px }
/* Auf dem Telefon lief die Zeile mit langem Namen seitlich heraus (Titel ohne Umbruch bestimmte die Spaltenbreite, schon vor diesem Schritt): Spalte und Zeile
   dürfen schmaler werden als der Titel, er endet dann mit „…“ */
.bu-anrufliste{ grid-template-columns: minmax(0, 1fr) }
.bu-anrufliste > li{ min-width: 0 }
@media (max-width: 480px){ .bu-anrufliste > li{ flex-wrap: wrap } .bu-anrufliste > li > span{ flex-basis: calc(100% - 32px) } .bu-anrufliste > li > .bu-k{ margin-left: 32px } }
.bu-ergebnis{ border-top: 1px solid var(--ld-rand); padding-top: 8px; margin-top: 6px }
.bu-rr, .bu-mailbox{ display: grid; gap: 8px; margin-top: 6px }
.bu-rr .bu-feld, .bu-mailbox .bu-feld{ display: grid; gap: 4px; font-size: 12.5px; color: var(--ld-text-2) }
.bu-rr input, .bu-mailbox input, .bu-mailbox textarea{ width: 100%; max-width: 100%; box-sizing: border-box; min-height: 36px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--ld-rand-stark); background: var(--ld-flaeche, #fff); color: var(--ld-text); font: inherit; font-size: 14px }
.bu-mailbox textarea{ min-height: 160px; resize: vertical; line-height: 1.45 }
@media (min-width: 640px){ .bu-rr{ grid-template-columns: minmax(0, 220px) minmax(0, 160px) 1fr; align-items: end } .bu-rr .bu-knoepfe{ margin: 0 } }
@media (max-width: 480px){ .bu-ergebnis .bu-k{ flex: 1 1 calc(50% - 8px); justify-content: center; text-align: center } }
.bu-spick .bu-link{ border: 0; background: none; padding: 0; font: inherit; color: #0e7490; text-decoration: underline; cursor: pointer }
.bu-lena-satz{ margin: 6px 0 0; color: var(--ld-text) }
.bu-rueck .bu-link, .bu-eintrag .bu-link{ border: 0; background: none; padding: 0; font: inherit; color: #0e7490; text-decoration: underline; cursor: pointer }