/* ==========================================================================
   Home-Shell – baustellentauglich, Kacheln als Buttons, hoher Kontrast
   Hellgrauer Seitengrund: dunkle Schrift, keine gelbe Schrift auf Weiß.
   ========================================================================== */

.bc-shell {
  color: #0f172a !important;
  font-family: var(--bb-font, system-ui, sans-serif);
  position: relative;
  z-index: 20;
  pointer-events: auto !important;
  isolation: isolate;
}

.bc-shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 4px;
}

.bc-shell-brand {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0f172a !important;
}

.bc-shell-sub {
  font-size: 0.9rem;
  color: #1e293b !important;
  margin-top: 2px;
  font-weight: 800;
}

/* Abschnittstitel: SCHWARZ auf GELB (nie Gelb auf Weiß) */
.bc-shell-section {
  display: inline-block;
  margin: 14px 12px 8px;
  padding: 6px 12px;
  font-size: 0.88rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0f172a !important;
  background: #facc15 !important;
  border: 2px solid #0f172a !important;
  border-radius: 8px;
  box-shadow: 0 2px 0 #0f172a;
}

.bc-shell-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 6px 12px 10px;
  pointer-events: auto !important;
}

/* Im Drawer: max. 2 Spalten – Kacheln bleiben breit (auch auf großen Monitoren) */
.bc-nav-drawer .bc-shell-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px;
  padding: 8px 14px 12px;
}

/* Kacheln = button oder a */
a.bc-shell-tile,
button.bc-shell-tile {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #0f172a;
  background: #0f766e;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 12px;
  height: auto;
  min-height: 76px;
  max-height: none;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 0 #042f2e;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.15);
  user-select: none;
  pointer-events: auto !important;
  touch-action: manipulation;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.bc-nav-drawer a.bc-shell-tile,
.bc-nav-drawer button.bc-shell-tile {
  min-height: 88px;
  padding: 14px 16px;
}

.bc-nav-drawer .bc-shell-tile-label {
  font-size: 1.05rem;
}

a.bc-shell-tile:hover,
a.bc-shell-tile:focus,
button.bc-shell-tile:hover,
button.bc-shell-tile:focus {
  filter: brightness(1.08);
  color: #ffffff !important;
  text-decoration: none !important;
  outline: 3px solid #0369a1;
  outline-offset: 2px;
}

a.bc-shell-tile:active,
button.bc-shell-tile:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #042f2e;
}

.bc-shell-tile-icon {
  font-size: 1.25rem;
  line-height: 1;
  pointer-events: none;
}

.bc-shell-tile-label {
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.1;
  color: #ffffff !important;
  pointer-events: none;
}

.bc-shell-tile-hint {
  font-size: 0.72rem;
  color: #ecfdf5 !important;
  font-weight: 700;
  pointer-events: none;
}

a.bc-shell-tile.is-primary,
button.bc-shell-tile.is-primary {
  background: #0369a1;
  box-shadow: 0 3px 0 #0c4a6e;
}

a.bc-shell-tile.is-warn,
button.bc-shell-tile.is-warn {
  background: #c2410c;
  box-shadow: 0 3px 0 #7c2d12;
}

.bc-shell-tile .bc-shell-badge {
  margin-left: auto;
  background: #dc2626;
  color: #fff !important;
  font-size: 0.72rem;
  font-weight: 900;
  min-width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #fff;
  pointer-events: none;
}

.bc-shell-tile-top {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.bc-shell-tile-compact {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  padding: 6px 12px !important;
}

.bc-home-termine {
  margin: 10px 10px 32px;
  border-radius: 14px;
  overflow: visible;
  border: 3px solid #0f172a;
  background: #ffffff;
  padding: 8px 6px 14px;
  position: relative;
  z-index: 20;
  pointer-events: auto !important;
  color: #0f172a !important;
}

/*
  ── Top-Leiste: Chat / Menü / Home ─────────────────────────────────────────
  Gemeinsam für BBasicApp + BBBlazor (über _content/BBasic.BBRazor/app-shell.css).
  Alle .bc-top-icon haben feste Höhe (--bc-top-icon-h), damit <a>/<button>/Badge
  optisch und klickbar gleich groß sind.
*/
.bc-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
}

/* Feste Höhe/Breite – <a>, <button>, Badge ändern nichts an der Größe */
a.bc-top-icon,
button.bc-top-icon,
label.bc-top-icon {
  --bc-top-icon-h: 40px;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: var(--bc-top-icon-h) !important;
  min-height: var(--bc-top-icon-h) !important;
  max-height: var(--bc-top-icon-h) !important;
  min-width: var(--bc-top-icon-h);
  width: auto;
  padding: 0 10px;
  /*
    Schlichte Symbole statt Knöpfe: Die Leiste ist dunkel, weiße Symbole
    darauf sind deutlich genug. Rahmen, Farbfläche und Schlagschatten haben
    drei Kästchen ergeben, die neben der Leiste standen statt in ihr zu
    liegen. Die Klickfläche bleibt unverändert groß (--bc-top-icon-h).
  */
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #ffffff !important;
  font-weight: 900;
  font-size: 0.8rem;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s ease;
  touch-action: manipulation;
  pointer-events: auto !important;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
  margin: 0;
  overflow: visible; /* Badge darf rausragen, Höhe bleibt */
  flex: 0 0 auto;
  vertical-align: middle;
}

/* Zeigen, dass es klickbar ist – ohne den Symbolen einen Kasten zu geben */
a.bc-top-icon:hover,
button.bc-top-icon:hover,
label.bc-top-icon:hover {
  background: rgba(248, 250, 252, 0.14);
  color: #ffffff !important;
  text-decoration: none !important;
}

/*
  Der gelbe Ring bleibt – aber nur für die Tastatur. Bei :focus lag er auch
  nach jedem Mausklick noch da, und genau das sah nach „Knopf hängt".
*/
a.bc-top-icon:focus-visible,
button.bc-top-icon:focus-visible,
label.bc-top-icon:focus-visible {
  outline: 3px solid #facc15;
  outline-offset: 2px;
}

a.bc-top-icon:active,
button.bc-top-icon:active,
label.bc-top-icon:active {
  background: rgba(248, 250, 252, 0.24);
}

.bc-top-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bc-top-icon .bc-top-icon-label {
  color: #ffffff !important;
  font-weight: 900;
  font-size: 0.75rem;
  line-height: 1;
}

@media (max-width: 420px) {
  .bc-top-icon .bc-top-icon-label { display: none; }
  a.bc-top-icon,
  button.bc-top-icon,
  label.bc-top-icon {
    --bc-top-icon-h: 42px;
    min-width: var(--bc-top-icon-h);
    width: var(--bc-top-icon-h);
    padding: 0;
  }
}

/* Menü-Hit: gleiche Höhe wie Chat/Home, nur z-index für Klicks */
label.bc-menu-hit,
button.bc-menu-hit {
  min-width: var(--bc-top-icon-h, 40px) !important;
  min-height: var(--bc-top-icon-h, 40px) !important;
  height: var(--bc-top-icon-h, 40px) !important;
  max-height: var(--bc-top-icon-h, 40px) !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 110;
}

/* ── CSS-only Drawer (Checkbox) – kein Blazor-@onclick nötig ─────────────── */
/* Checkbox optisch versteckt, aber weiterhin per Label umschaltbar */
.bc-nav-toggle {
  position: fixed;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  margin: 0;
  opacity: 0.01;
  z-index: 0;
  pointer-events: none;
}

.bc-top-row {
  background: #0f172a;
  border-bottom: 2px solid #facc15;
  z-index: 40;
  pointer-events: auto !important;
  position: sticky;
  top: 0;
}

.bc-main-content {
  position: relative;
  z-index: 1;
  pointer-events: auto !important;
  isolation: isolate;
}

/* Label als Top-Icon (Menü) */
label.bc-top-icon {
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
}

/*
  Backdrop NUR rechts neben dem Drawer – nie über dem Menü!
  (Sonst fängt das Label alle Touches ab und Kacheln sind „tot“.)
*/
.bc-nav-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: min(440px, 94vw); /* beginnt erst NACH dem Drawer */
  z-index: 80;
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(2px);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: none;
  pointer-events: auto;
}

.bc-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 200; /* klar über Backdrop und Top-Leiste */
  width: min(440px, 94vw);
  max-width: 100%;
  background: #f1f5f9;
  color: #0f172a;
  box-shadow: 8px 0 28px rgba(2, 6, 23, 0.35);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 24px;
  pointer-events: auto !important;
  display: none;
  transform: translateX(-105%);
  transition: transform 0.18s ease-out;
}

/* Offen: Checkbox checked ODER Blazor-Klasse (überlebt StateHasChanged) */
.bc-app-shell:has(.bc-nav-toggle:checked) .bc-nav-backdrop,
.bc-nav-toggle:checked ~ .bc-nav-backdrop,
.bc-nav-backdrop.bc-nav-open,
.bc-app-shell.bc-menu-is-open .bc-nav-backdrop {
  display: block !important;
}

.bc-app-shell:has(.bc-nav-toggle:checked) .bc-nav-drawer,
.bc-nav-toggle:checked ~ .bc-nav-drawer,
.bc-nav-drawer.bc-nav-open,
.bc-app-shell.bc-menu-is-open .bc-nav-drawer {
  display: block !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Im offenen Drawer: alles klickbar */
.bc-nav-drawer a,
.bc-nav-drawer button,
.bc-nav-drawer label,
.bc-nav-drawer .bc-shell,
.bc-nav-drawer .bc-shell-grid,
.bc-nav-drawer .bc-shell-tile {
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}

@media (min-width: 900px) {
  .bc-nav-drawer {
    width: min(560px, 42vw);
  }
  .bc-nav-backdrop {
    left: min(560px, 42vw);
  }
}

@media (min-width: 1400px) {
  .bc-nav-drawer {
    width: min(640px, 36vw);
  }
  .bc-nav-backdrop {
    left: min(640px, 36vw);
  }
}

.bc-nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: #0f172a;
  color: #f8fafc;
  border-bottom: 3px solid #facc15;
  position: sticky;
  top: 0;
  z-index: 2;
}

.bc-nav-drawer-title {
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: #f8fafc !important;
}

button.bc-nav-drawer-close,
label.bc-nav-drawer-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 2px solid #f8fafc;
  border-radius: 10px;
  background: #c2410c;
  color: #fff !important;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
  margin: 0;
  cursor: pointer;
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: 0 2px 0 #7c2d12;
  touch-action: manipulation;
}

button.bc-nav-drawer-close:hover {
  filter: brightness(1.08);
}

.bc-nav-drawer .bc-shell {
  padding-bottom: 16px;
}

/* Chat-Badge in Top-Leiste – Rahmen nicht dicker (sonst andere Button-Höhe) */
/*
  Ungelesene Nachrichten: Der rote Zähler daneben sagt es bereits deutlich –
  ein zusätzlicher roter Rahmen um das Symbol brauchte es nicht und passte
  nicht zu den schlichten Symbolen der Leiste.
*/
a.bc-top-icon.has-unread,
button.bc-top-icon.has-unread {
  position: relative;
  height: var(--bc-top-icon-h, 40px) !important;
  min-height: var(--bc-top-icon-h, 40px) !important;
  max-height: var(--bc-top-icon-h, 40px) !important;
}

.bc-top-unread-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff !important;
  font-size: 0.72rem;
  font-weight: 900;
  display: inline-grid;
  place-items: center;
  border: 2px solid #fff;
  line-height: 1;
  box-shadow: 0 2px 0 #7f1d1d;
  pointer-events: none;
}

/* ── Übergaben-Karten (ähnlich TermineListe) ─────────────────────────────── */
.bc-uebergabe {
  width: 100%;
  color: #0f172a;
  font-family: var(--bb-font, system-ui, sans-serif);
  padding: 4px 4px 24px;
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
  isolation: isolate;
}

.bc-uebergabe-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 10px;
}

.bc-uebergabe-title {
  font-weight: 900;
  font-size: 1.15rem;
  color: #0f172a !important;
  background: #facc15 !important;
  border: 2px solid #0f172a;
  padding: 4px 12px;
  border-radius: 8px;
}

.bc-uebergabe-stats {
  font-weight: 800;
  font-size: 0.9rem;
  color: #0f172a;
  padding: 0 4px 10px;
}

.bc-uebergabe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

a.bc-uebergabe-card,
button.bc-uebergabe-card {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  width: 100%;
  text-align: left;
  padding: 14px 14px;
  margin: 0 0 10px;
  background: #ffffff;
  color: #0f172a !important;
  text-decoration: none !important;
  border: 3px solid #0f172a;
  border-left: 10px solid #64748b;
  border-radius: 12px;
  cursor: pointer;
  min-height: 76px;
  box-shadow: 0 3px 0 #020617;
  touch-action: manipulation;
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
  font: inherit;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.12);
}

a.bc-uebergabe-card:hover,
a.bc-uebergabe-card:focus {
  color: #0f172a !important;
  text-decoration: none !important;
  filter: brightness(0.98);
}

a.bc-uebergabe-card:active,
button.bc-uebergabe-card:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #020617;
}

/* Karten-Rand: gleiche Farbfamilie wie Badge/Filter */
a.bc-uebergabe-card.is-status-bewohnt,
button.bc-uebergabe-card.is-status-bewohnt { border-left-color: #6d28d9; background: #f5f3ff; }
a.bc-uebergabe-card.is-status-auszug,
button.bc-uebergabe-card.is-status-auszug  { border-left-color: #fb7185; background: #fff1f2; }
a.bc-uebergabe-card.is-status-leer,
button.bc-uebergabe-card.is-status-leer    { border-left-color: #dc2626; background: #fef2f2; }
a.bc-uebergabe-card.is-status-renov,
button.bc-uebergabe-card.is-status-renov   { border-left-color: #eab308; background: #fefce8; }
a.bc-uebergabe-card.is-status-geputzt,
button.bc-uebergabe-card.is-status-geputzt { border-left-color: #4ade80; background: #f0fdf4; }
a.bc-uebergabe-card.is-status-einzug,
button.bc-uebergabe-card.is-status-einzug  { border-left-color: #7dd3fc; background: #f0f9ff; }
a.bc-uebergabe-card.is-status-grob,
button.bc-uebergabe-card.is-status-grob    { border-left-color: #f97316; background: #fff7ed; }

.bc-uebergabe-name {
  font-weight: 900;
  font-size: 1.08rem;
  color: #020617;
  line-height: 1.2;
}

.bc-uebergabe-meta {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
  margin-top: 3px;
}

/* Status-Badge rechts: stark farbig je Zustand */
.bc-uebergabe-badge {
  align-self: start;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 7px 10px;
  border-radius: 10px;
  border: 2px solid #0f172a;
  white-space: normal;
  max-width: 9.5rem;
  text-align: center;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 0 #0f172a;
}

/* Badge-Farben (Vorgabe) */
.bc-uebergabe-badge.is-status-bewohnt {
  background: #6d28d9; /* Lila etwas dunkler */
  color: #ffffff !important;
  border-color: #4c1d95;
}
.bc-uebergabe-badge.is-status-auszug {
  background: #fda4af; /* Hell Rosa / Lachs */
  color: #0f172a !important;
  border-color: #9f1239;
}
.bc-uebergabe-badge.is-status-leer {
  background: #dc2626; /* Rot */
  color: #ffffff !important;
  border-color: #7f1d1d;
}
.bc-uebergabe-badge.is-status-renov {
  background: #facc15; /* Gelb – Zum Putzen */
  color: #0f172a !important;
  border-color: #713f12;
}
.bc-uebergabe-badge.is-status-geputzt {
  background: #86efac; /* Hellgrün */
  color: #0f172a !important;
  border-color: #14532d;
}
.bc-uebergabe-badge.is-status-einzug {
  background: #bae6fd; /* Blauton hell */
  color: #0f172a !important;
  border-color: #0369a1;
}
.bc-uebergabe-badge.is-status-grob {
  background: #fb923c; /* Orange – Renovierung */
  color: #0f172a !important;
  border-color: #9a3412;
}

/* Filter-Chips oben */
.bc-uebergabe-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 2px 14px;
}

a.bc-uebergabe-chip,
button.bc-uebergabe-chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 12px;
  border: 2px solid #0f172a;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.8rem;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
  color: #0f172a !important;
  text-decoration: none !important;
  background: #e2e8f0;
  box-shadow: 0 2px 0 #0f172a;
  line-height: 1.15;
  box-sizing: border-box;
}

a.bc-uebergabe-chip .bc-chip-count,
button.bc-uebergabe-chip .bc-chip-count {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.9;
  font-weight: 800;
  pointer-events: none;
}

a.bc-uebergabe-chip.is-active,
button.bc-uebergabe-chip.is-active {
  outline: 3px solid #0f172a;
  outline-offset: 1px;
  transform: translateY(-1px);
}

/* Filter-Chips (Vorgabe) */
a.bc-uebergabe-chip.is-all,
button.bc-uebergabe-chip.is-all { background: #94a3b8; color: #0f172a !important; }
a.bc-uebergabe-chip.is-status-auszug,
button.bc-uebergabe-chip.is-status-auszug { background: #fda4af; color: #0f172a !important; }
a.bc-uebergabe-chip.is-status-leer,
button.bc-uebergabe-chip.is-status-leer { background: #ef4444; color: #fff !important; }
a.bc-uebergabe-chip.is-status-renov,
button.bc-uebergabe-chip.is-status-renov { background: #facc15; color: #0f172a !important; }
a.bc-uebergabe-chip.is-status-geputzt,
button.bc-uebergabe-chip.is-status-geputzt { background: #86efac; color: #0f172a !important; }
a.bc-uebergabe-chip.is-status-bewohnt,
button.bc-uebergabe-chip.is-status-bewohnt { background: #6d28d9; color: #fff !important; }
a.bc-uebergabe-chip.is-status-einzug,
button.bc-uebergabe-chip.is-status-einzug { background: #7dd3fc; color: #0f172a !important; }
a.bc-uebergabe-chip.is-status-grob,
button.bc-uebergabe-chip.is-status-grob { background: #fb923c; color: #0f172a !important; }

a.bc-uebergabe-chip:active,
button.bc-uebergabe-chip:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #0f172a;
}

.bc-uebergabe-detail {
  margin: 12px 0 16px;
  padding: 12px;
  border: 3px solid #0f172a;
  border-radius: 14px;
  background: #f8fafc;
}

.bc-uebergabe-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.bc-uebergabe-detail-title {
  font-weight: 900;
  font-size: 1.1rem;
  color: #0f172a;
}

.bc-uebergabe-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

@media (min-width: 720px) {
  .bc-uebergabe-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

a.bc-uebergabe-action,
button.bc-uebergabe-action {
  appearance: none;
  display: block;
  min-height: 64px;
  padding: 10px 12px;
  border: 2px solid #0f172a;
  border-radius: 12px;
  font-weight: 900;
  font-size: 0.92rem;
  cursor: pointer;
  text-align: left;
  text-decoration: none !important;
  box-shadow: 0 2px 0 #0f172a;
  touch-action: manipulation;
  pointer-events: auto !important;
  color: #0f172a !important;
  background: #e2e8f0;
  box-sizing: border-box;
}

a.bc-uebergabe-action.is-danger,
button.bc-uebergabe-action.is-danger { background: #fecaca; }
a.bc-uebergabe-action.is-warn,
button.bc-uebergabe-action.is-warn   { background: #fde047; }
a.bc-uebergabe-action.is-ok,
button.bc-uebergabe-action.is-ok     { background: #86efac; }
a.bc-uebergabe-action.is-info,
button.bc-uebergabe-action.is-info   { background: #7dd3fc; }
a.bc-uebergabe-action.is-muted,
button.bc-uebergabe-action.is-muted  { background: #e2e8f0; }

a.bc-uebergabe-action:active,
button.bc-uebergabe-action:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #0f172a;
}

a.bc-term-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  color: inherit;
}