/* B1 office banner: "Am Tresen-Tablet: X möchte zahlen". A dark navy band reads the same in light and dark office themes. */
.cr-host { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: grid; gap: 10px; width: min(560px, calc(100vw - 32px)); }
.cr-host:empty { display: none; }
.cr-banner { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 14px 16px; border-left: 8px solid #c8102e;
  border-radius: 14px; background: #0b1d36; color: #fff; box-shadow: 0 16px 40px rgb(11 29 54 / 35%); font: 16px/1.35 system-ui, sans-serif; }
.cr-text { display: grid; gap: 2px; min-width: 0; }
.cr-text strong { font-size: 1.05rem; }
.cr-text span { color: #c9d6e6; font-size: .85rem; }
.cr-host .cr-banner button { min-height: 48px; padding: 0 16px; border: 0; border-radius: 10px; font: inherit; font-weight: 800; cursor: pointer; }
.cr-host .cr-banner .cr-open { border: 0; background: #196743; color: #fff; }
.cr-host .cr-banner .cr-dismiss { border: 0; background: #e7ebf1; color: #0b1d36; }
.cr-host .cr-banner button:focus-visible { outline: 4px solid #8fb8ff; outline-offset: 3px; }
.cr-saturated { margin: 0; padding: 12px 16px; border-left: 8px solid #b45309; border-radius: 14px; background: #0b1d36; color: #fff;
  box-shadow: 0 16px 40px rgb(11 29 54 / 35%); font: 600 15px/1.35 system-ui, sans-serif; }
.cr-error { margin: 0; padding: 8px 12px; border-radius: 10px; background: #fff1f2; color: #8a1020; }
@media (max-width: 640px) { .cr-host { right: 16px; bottom: 16px; } .cr-banner { grid-template-columns: 1fr 1fr; } .cr-text { grid-column: 1 / -1; } }