/* Bereich Betrieb: Partner- und Betreiberbereich (Agent D).
   Stil wie Runde 10–12: Listen aus „Kunden und Artikel“, Rahmen und Unternavigation aus „Einstellungen“. */

.bt-seite { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bt-stapel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Reiter unter der Kopfzeile (wie die Detailansicht im Design) */
.bt-reiter { flex: none; background: var(--flaeche); border-bottom: 1px solid var(--rand); padding: 0 20px; display: flex; gap: 22px; overflow-x: auto; }
.bt-reiter a { height: 40px; display: flex; align-items: center; gap: 6px; color: var(--text-3); font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.bt-reiter a:hover { color: var(--text); }
.bt-reiter a.aktiv { color: var(--primaer); font-weight: 600; border-bottom-color: var(--primaer); }
.bt-zahl { font-size: 12px; color: var(--text-5); font-weight: 500; }
.unternav-punkt .bt-zahl { margin-left: auto; }
.unternav-punkt .bt-zahl.fehler { color: var(--fehler); font-weight: 600; }
.unternav-punkt .bt-zahl.warn { color: var(--warn); font-weight: 600; }

/* Karten und Listen */
.bt-karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; display: flex; flex-direction: column; min-width: 0; }
.bt-karte-kopf { padding: 12px 16px 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bt-karte-titel { font-weight: 600; font-size: 14px; }
.bt-karte-sub { color: var(--text-4); }
.bt-karte-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bt-karte-rumpf { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 10px; }

.bt-werkzeuge { display: flex; align-items: center; gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
.bt-suche { position: relative; width: 300px; max-width: 100%; }
.bt-suche .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-5); pointer-events: none; width: 14px; height: 14px; }
.bt-suche .eingabe { padding-left: 32px; }
.bt-filter { width: auto; min-width: 140px; }

.bt-kopf { margin: 0 10px; display: grid; gap: 12px; padding: 0 12px; height: 30px; align-items: center; border-radius: 7px; background: var(--feld-grau); font-size: 12px; font-weight: 600; color: var(--text-3); }
.bt-zeilen { padding: 2px 10px 8px; display: flex; flex-direction: column; }
.bt-zeile { display: grid; gap: 12px; padding: 0 12px; min-height: 52px; align-items: center; border-bottom: 1px solid var(--rand-fein); border-radius: 7px; color: var(--text); text-decoration: none; }
.bt-zeile:last-child { border-bottom: 0; }
.bt-zeile.klein { min-height: 42px; }
.bt-zeile.klickbar { cursor: pointer; }
.bt-zeile.klickbar:hover, a.bt-zeile:hover { background: #F8F9FA; color: var(--text); }
.bt-zeile.gewaehlt { background: var(--primaer-hell); }
.bt-zeile.inaktiv .bt-name > :first-child { color: var(--text-4); }
.bt-zeile > * { min-width: 0; }
.bt-zeile .icon.weiter { color: var(--platzhalter); }
.bt-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bt-name > :first-child { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-sub { font-size: 12px; color: var(--text-4); }
.bt-text-2 { color: var(--text-2); }
.bt-rechts { text-align: right; }
.bt-null { color: var(--platzhalter); }
.bt-leer { padding: 24px; text-align: center; color: var(--text-4); }
.bt-aktionen { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.bt-summe { font-weight: 700; }
.bt-trenner { margin: 6px 10px 0; padding: 8px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-5); }

/* Spalten der Listen */
.bt-sp-kunden { grid-template-columns: minmax(0, 2fr) 150px 70px 80px 80px 100px 20px; }
.bt-sp-bkunden { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 150px 70px 70px minmax(190px, auto); }
.bt-sp-org { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 140px 70px 70px 20px; }
.bt-sp-benutzer { grid-template-columns: minmax(0, 2fr) 120px minmax(0, 1.2fr) 100px minmax(110px, auto); }
.bt-sp-abr { grid-template-columns: minmax(0, 2fr) 90px 90px 90px; }
.bt-sp-ohne { grid-template-columns: 130px minmax(0, 1.4fr) minmax(0, 1.4fr) 130px 110px; }
.bt-sp-ablauf { grid-template-columns: minmax(0, 2.4fr) 100px 110px 130px minmax(110px, auto); }
.bt-sp-prot { grid-template-columns: 130px minmax(0, 1fr) 160px 110px minmax(0, 2fr); }
.bt-sp-offen { grid-template-columns: minmax(0, 1.6fr) 120px 130px minmax(0, 1.4fr); }

/* Marken (Badges wie im Design) */
.bt-marke { font-size: 11.5px; font-weight: 600; padding: 0 8px; line-height: 20px; border-radius: 5px; width: max-content; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--primaer-hell); color: var(--primaer); display: inline-block; }
.bt-marke.ok { background: var(--ok-bg); color: var(--ok); }
.bt-marke.warn { background: var(--warn-bg); color: var(--warn); }
.bt-marke.fehler { background: var(--fehler-bg); color: var(--fehler); }
.bt-marke.grau { background: var(--rand-fein); color: var(--text-2); }
.bt-marke.lila { background: #F3EFF8; color: #5B3E8A; }
.bt-marken { display: flex; gap: 4px; flex-wrap: wrap; }

/* Onboarding: drei Schritte */
.bt-schritte { display: flex; gap: 4px; align-items: center; }
.bt-schritt { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--rand-fein); color: var(--text-5); }
.bt-schritt .icon { width: 13px; height: 13px; }
.bt-schritt.erledigt { background: var(--ok-bg); color: var(--ok); }
.bt-schritte .bt-sub { margin-left: 4px; }

/* Kennzahlen */
.bt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bt-kpi { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--text); text-decoration: none; }
a.bt-kpi:hover { border-color: #D9DEE6; color: var(--text); }
.bt-kpi-text { color: var(--text-3); }
.bt-kpi-wert { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.bt-kpi-wert.fehler { color: var(--fehler); }
.bt-kpi-wert.warn { color: var(--warn); }
.bt-kpi-wert.ok { color: var(--ok); }
.bt-kpi-sub { font-size: 12px; color: var(--text-4); }

/* Monatsverlauf als Balken */
.bt-balken { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 4px 16px 14px; }
.bt-balken-spalte { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bt-balken-paar { display: flex; gap: 3px; align-items: flex-end; height: 72px; }
.bt-balken-aus, .bt-balken-ein { width: 14px; border-radius: 3px 3px 0 0; min-height: 2px; }
.bt-balken-aus { background: var(--primaer); }
.bt-balken-ein { background: #9FB3D1; }
.bt-balken-zahl { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.bt-balken-monat { font-size: 11.5px; color: var(--text-4); }
.bt-legende { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--text-4); }
.bt-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

.bt-monat { display: flex; align-items: center; gap: 2px; }
.bt-monat > span { min-width: 112px; text-align: center; font-weight: 600; }
.bt-monat .knopf-x { width: 28px; height: 28px; }

/* Betriebslage */
.bt-alarme { display: flex; flex-direction: column; padding: 0 6px 6px; }
.bt-alarm { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-bottom: 1px solid var(--rand-fein); color: var(--text); text-decoration: none; border-radius: 7px; }
.bt-alarm:last-child { border-bottom: 0; }
a.bt-alarm:hover { background: #F8F9FA; color: var(--text); }
.bt-alarm .icon { margin-top: 1px; }
.bt-alarm.fehler > .icon { color: var(--fehler); }
.bt-alarm.warnung > .icon { color: #D9A23A; }
.bt-alarm-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.bt-alles-gut { display: flex; align-items: center; gap: 8px; padding: 4px 16px 16px; color: var(--ok); font-weight: 500; }
.bt-alles-gut .icon { color: var(--ok-icon); }

.bt-knoten { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.bt-dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; padding: 0 16px 14px; margin: 0; }
.bt-dl dt { color: var(--text-4); }
.bt-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.bt-punkt { width: 8px; height: 8px; border-radius: 4px; background: var(--ok-icon); flex: none; display: inline-block; }
.bt-punkt.fehler { background: var(--fehler); }
.bt-punkt.warn { background: #D9A23A; }
.bt-punkt.aus { background: #C3C8D0; }
.bt-live { display: flex; align-items: center; gap: 6px; color: var(--text-4); font-size: 12px; }

/* Dialog */
.bt-schleier { position: fixed; inset: 0; background: rgba(16, 24, 40, .28); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 72px 16px; overflow: auto; }
.bt-dialog { width: 100%; max-width: 560px; background: var(--flaeche); border-radius: 12px; box-shadow: 0 20px 50px rgba(16, 24, 40, .2); display: flex; flex-direction: column; }
.bt-dialog.breit { max-width: 760px; }
.bt-dialog-kopf { padding: 16px 20px 6px; display: flex; align-items: center; gap: 8px; }
.bt-dialog-titel { font-size: 15px; font-weight: 600; flex: 1; }
.bt-dialog-rumpf { padding: 8px 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.bt-dialog-fuss { padding: 12px 20px; border-top: 1px solid var(--rand-fein); display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.bt-dialog-fuss .bt-links { margin-right: auto; }
.bt-fehler { color: var(--fehler); background: var(--fehler-bg); padding: 8px 10px; border-radius: 8px; line-height: 1.4; }
.bt-ok { color: var(--ok); background: var(--ok-bg); padding: 8px 10px; border-radius: 8px; line-height: 1.4; overflow-wrap: anywhere; }

.bt-auswahl-liste { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; border: 1px solid var(--eingabe-rand); border-radius: 8px; padding: 6px; }
.bt-auswahl-liste label { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.bt-auswahl-liste label:hover { background: var(--bg); }

/* Protokoll */
.bt-code { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-code.offen { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Branding-Vorschau */
.bt-vorschau { border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; max-width: 420px; }
.bt-vorschau-kopf { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; color: #fff; font-weight: 700; }
.bt-vorschau-kopf img { max-height: 30px; max-width: 120px; background: #fff; border-radius: 4px; padding: 2px; }
.bt-vorschau-rumpf { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; color: var(--text-3); font-size: 12px; }
.bt-farbe { display: flex; gap: 8px; align-items: center; }
.bt-farbe input[type=color] { width: 36px; height: 30px; padding: 2px; border: 1px solid var(--eingabe-rand); border-radius: 7px; background: #fff; cursor: pointer; flex: none; }

@media (max-width: 1180px) {
    .bt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .bt-kopf { display: none; }
    .bt-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; padding: 8px 12px; row-gap: 6px; }
    .bt-reiter { padding: 0 12px; }
    .bt-dl { grid-template-columns: minmax(0, 1fr); }
    .bt-seite { padding: 10px; }
}