:root {
  --bp-bg: #f6f8fb;
  --bp-surface: #ffffff;
  --bp-surface-muted: #f9fafc;
  --bp-border: #dfe5ee;
  --bp-border-strong: #c9d3e2;
  --bp-text: #172033;
  --bp-muted: #65748b;
  --bp-primary: #1769e0;
  --bp-primary-soft: #e9f2ff;
  --bp-green: #0f9f6e;
  --bp-green-soft: #e7f7f0;
  --bp-amber: #d88a1d;
  --bp-amber-soft: #fff3df;
  --bp-violet: #7662d9;
  --bp-violet-soft: #f0edff;
  --bp-danger: #cc3d3d;
  --bp-danger-soft: #fdecec;
  --bp-shadow: 0 8px 24px rgba(22, 34, 51, 0.08);
  --bp-radius: 8px;
  --bp-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* DIN A4 und Seitenraender nach DIN 5008 Form B. Bildschirmvorschau und Druck
     teilen sich diese Werte, damit die Vorschau 1:1 dem Ausdruck entspricht. */
  --page-width: 210mm;
  --page-height: 297mm;
  --page-margin-top: 16.9mm;
  --page-margin-right: 20mm;
  --page-margin-bottom: 16.9mm;
  --page-margin-left: 24.1mm;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bp-bg);
  color: var(--bp-text);
  font-family: var(--bp-font);
  font-size: 15px;
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--bp-bg);
  color: var(--bp-text);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

:focus-visible {
  outline: 3px solid rgba(23, 105, 224, 0.35);
  outline-offset: 2px;
}

.app-shell {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--bp-border);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
}

.global-bar {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(280px, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding: 10px 28px;
  border-bottom: 1px solid var(--bp-border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0;
}

.brand-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.brand-mark {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid #b7cdf0;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(233, 242, 255, 0.98)),
    var(--bp-primary-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

.brand-mark::before {
  content: "";
  position: absolute;
  left: 9px;
  bottom: 8px;
  width: 4px;
  height: 12px;
  border-radius: 2px 2px 0 0;
  background: var(--bp-primary);
  box-shadow:
    7px -5px 0 var(--bp-green),
    14px -10px 0 var(--bp-amber);
}

.brand-mark::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 7px;
  width: 16px;
  height: 7px;
  border-top: 3px solid var(--bp-primary);
  border-right: 3px solid var(--bp-primary);
  transform: rotate(-18deg) skewX(-14deg);
  transform-origin: center;
}

.brand-name {
  white-space: nowrap;
}

.global-search {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 10px;
  max-width: 740px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  box-shadow: 0 1px 2px rgba(22, 34, 51, 0.04);
}

.global-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--bp-text);
}

.bp-icon,
.kpi-icon,
.checkbox-placeholder {
  display: inline-block;
  flex: 0 0 auto;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.bp-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.global-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.new-menu,
.user-menu {
  position: relative;
}

.new-menu summary,
.user-menu summary,
.icon-button,
.help-link,
.secondary-button,
.select-button,
.search-page-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  color: var(--bp-text);
  cursor: pointer;
}

.new-menu summary {
  gap: 8px;
  min-width: 94px;
  padding: 0 14px;
  list-style: none;
}

.new-menu summary::-webkit-details-marker,
.user-menu summary::-webkit-details-marker {
  display: none;
}

.command-icon {
  width: 17px;
  height: 17px;
  color: var(--bp-primary);
}

.icon-button {
  position: relative;
  width: 42px;
  padding: 0;
}

.icon-button.subtle {
  border-color: transparent;
  background: transparent;
  color: var(--bp-muted);
}

.icon-button.subtle:hover {
  border-color: var(--bp-border);
  background: var(--bp-surface-muted);
  color: var(--bp-text);
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -4px;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid var(--bp-surface);
  border-radius: 999px;
  background: var(--bp-danger);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
}

.menu-icon {
  width: 18px;
  height: 18px;
}

.help-link {
  gap: 7px;
  padding: 0 12px;
  color: var(--bp-muted);
}

.user-menu summary {
  gap: 10px;
  min-width: 190px;
  padding: 4px 10px 4px 6px;
  border-color: transparent;
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d9edff, #e7f7f0);
  color: var(--bp-primary);
  font-size: 0.78rem;
  font-weight: 700;
}

.user-text {
  display: grid;
  line-height: 1.15;
  text-align: left;
}

.user-text strong {
  font-size: 0.86rem;
}

.user-text small {
  color: var(--bp-muted);
}

.menu-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: grid;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  box-shadow: var(--bp-shadow);
}

.menu-popover-right {
  right: 0;
  left: auto;
}

.menu-popover a,
.menu-disabled {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--bp-text);
}

.menu-popover a:hover {
  background: var(--bp-primary-soft);
}

/* Menü-Eintrag als Button (öffnet z. B. das Konto-Einstellungen-Popup). */
.menu-item-button {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--bp-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.menu-item-button:hover {
  background: var(--bp-primary-soft);
}

.menu-logout-form {
  margin: 0;
}

.menu-logout-form .menu-item-button {
  width: 100%;
}

/* Konto-Einstellungen: Popup aus dem Avatar-Menü. */
.account-settings-panel {
  width: min(680px, 100%);
  display: flex;
  flex-direction: column;
}

.account-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-bottom: 6px;
}

.account-settings-grid label {
  display: grid;
  gap: 4px;
  font-size: 0.86rem;
  color: var(--bp-muted);
}

.account-settings-grid input,
.account-settings-grid select {
  padding: 8px 10px;
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  background: var(--bp-surface);
  color: var(--bp-text);
  font: inherit;
}

@media screen and (max-width: 640px) {
  .account-settings-grid {
    grid-template-columns: 1fr;
  }
}

.menu-disabled {
  color: var(--bp-muted);
  cursor: not-allowed;
}

.module-tabs {
  display: flex;
  align-items: stretch;
  gap: 6px;
  overflow-x: auto;
  padding: 0 28px;
  border-bottom: 1px solid var(--bp-border);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.module-tabs::-webkit-scrollbar,
.ribbon::-webkit-scrollbar {
  display: none;
}

/* Die Modulleiste bekommt eine eigene Scrollbar (site.js), weil die native auf
   macOS als Overlay nur waehrend des Scrollens sichtbar ist. */
.module-tabs-shell {
  position: relative;
}

/* Weiche Kanten als Hinweis auf weitere Module – nur wenn wirklich scrollbar. */
.module-tabs-shell::before,
.module-tabs-shell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 1px;
  width: 52px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 1;
}

.module-tabs-shell::before {
  left: 0;
  background: linear-gradient(90deg, var(--bp-surface, #fff) 22%, rgba(255, 255, 255, 0));
}

.module-tabs-shell::after {
  right: 0;
  background: linear-gradient(270deg, var(--bp-surface, #fff) 22%, rgba(255, 255, 255, 0));
}

.module-tabs-shell.has-overflow-start::before,
.module-tabs-shell.has-overflow-end::after {
  opacity: 1;
}

/* Die Kantenverlaeufe enden ueber der Trennlinie, nicht ueber der Scrollbar-Spur. */
.module-tabs-shell.is-scrollable::before,
.module-tabs-shell.is-scrollable::after {
  bottom: 11px;
}

/* Eigene Spur unterhalb der Trennlinie, damit die Scrollbar nicht mit der
   Unterstreichung des aktiven Moduls kollidiert. */
.module-tabs-shell.is-scrollable {
  padding-bottom: 10px;
}

.module-scrollbar {
  position: absolute;
  right: 28px;
  bottom: 3px;
  left: 28px;
  height: 4px;
  border-radius: 999px;
  background: rgba(23, 105, 224, 0.09);
  opacity: 0;
  z-index: 2;
  transition:
    height 0.16s ease,
    opacity 0.18s ease,
    background-color 0.16s ease;
}

.module-tabs-shell.is-scrollable .module-scrollbar {
  opacity: 1;
}

.module-tabs-shell:hover .module-scrollbar,
.module-tabs-shell:focus-within .module-scrollbar,
.module-scrollbar.is-dragging {
  height: 6px;
  background: rgba(23, 105, 224, 0.13);
}

.module-scrollbar-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  min-width: 44px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6ba6ff, var(--bp-primary));
  box-shadow: 0 1px 3px rgba(23, 105, 224, 0.28);
  cursor: grab;
  transition: filter 0.16s ease;
}

.module-scrollbar-thumb:hover {
  filter: saturate(1.2) brightness(1.03);
}

.module-scrollbar.is-dragging .module-scrollbar-thumb {
  cursor: grabbing;
  filter: saturate(1.25) brightness(0.98);
}

.module-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 13px;
  color: #25324a;
  white-space: nowrap;
  font-size: 0.92rem;
}

.module-tab:hover {
  color: var(--bp-primary);
}

/* Das aktive Modul traegt keine Unterstreichung mehr, sondern wird groesser und
   faehrt beim Seitenwechsel mit einem kurzen Federn ein. */
.module-tab.active {
  color: var(--bp-primary);
  font-weight: 700;
  font-size: 1.06rem;
  padding: 0 17px;
  /* Eigener Stapelkontext, damit die Plakette (z-index -1) hinter dem Text,
     aber vor dem Hintergrund der Leiste liegt. */
  isolation: isolate;
  transform-origin: center;
  animation: module-tab-rise 0.44s cubic-bezier(0.34, 1.42, 0.5, 1) both;
}

.module-tab.active .module-icon {
  width: 21px;
  height: 21px;
}

/* Weiche Plakette hinter dem aktiven Modul. */
.module-tab.active::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 4px;
  bottom: 8px;
  left: 4px;
  z-index: -1;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(23, 105, 224, 0.12), rgba(23, 105, 224, 0.06));
  animation: module-tab-badge 0.44s cubic-bezier(0.34, 1.42, 0.5, 1) both;
}

@keyframes module-tab-rise {
  from {
    transform: scale(0.86) translateY(2px);
    opacity: 0.35;
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes module-tab-badge {
  from {
    opacity: 0;
    transform: scaleX(0.55);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

.module-tab.muted {
  color: #738197;
}

.module-icon {
  width: 18px;
  height: 18px;
}

.ribbon {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 14px 28px 10px;
  background: var(--bp-surface);
  scrollbar-width: none;
}

.ribbon-group {
  display: grid;
  grid-template-rows: 1fr auto;
  flex: 0 0 auto;
  min-width: max-content;
  padding: 0 18px;
  border-right: 1px solid var(--bp-border);
}

.ribbon-group:first-child {
  padding-left: 0;
}

.ribbon-group-items {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ribbon-action {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  /* min-content = Breite des laengsten Wortes: einzelne Woerter brechen nie,
     mehrwortige Beschriftungen umbrechen weiterhin am Leerzeichen. */
  width: min-content;
  min-width: 92px;
  max-width: 160px;
  min-height: 82px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--bp-radius);
  background: transparent;
  color: var(--bp-text);
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.2;
}

.ribbon-action span {
  max-width: 100%;
  /* Umbruch nur zwischen Woertern, nie innerhalb; auch keine Silbentrennung. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.ribbon-action:hover {
  border-color: var(--bp-border);
  background: var(--bp-surface-muted);
}

.ribbon-action.active {
  border-color: rgba(23, 105, 224, 0.45);
  background: var(--bp-primary-soft);
  color: var(--bp-primary);
  box-shadow: inset 0 0 0 1px rgba(23, 105, 224, 0.15);
}

.ribbon-action.active .ribbon-action-icon {
  color: var(--bp-primary);
}

.ribbon-action.disabled {
  color: #99a4b6;
  cursor: not-allowed;
}

.ribbon-action-icon {
  width: 26px;
  height: 26px;
  color: #273247;
}

.ribbon-group-label {
  padding-top: 5px;
  color: var(--bp-muted);
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
}

.page-frame {
  width: min(100%, 1760px);
  margin: 0 auto;
  padding: 18px 28px 32px;
}

.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.page-heading h1 {
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: 0;
}

.page-heading p {
  margin: 4px 0 0;
  color: var(--bp-muted);
}

.heading-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.secondary-button,
.select-button,
.search-page-form button {
  gap: 8px;
  padding: 0 14px;
  font-weight: 700;
}

.secondary-button {
  background: var(--bp-surface);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.kpi-card,
.work-panel,
.quick-actions a,
.module-placeholder,
.empty-state.spacious {
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  box-shadow: 0 1px 2px rgba(22, 34, 51, 0.04);
}

.kpi-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  min-height: 108px;
  padding: 18px;
}

.kpi-card p,
.kpi-card strong,
.kpi-card small {
  display: block;
}

.kpi-card p {
  margin: 0;
  color: var(--bp-muted);
  font-weight: 700;
}

.kpi-card strong {
  margin-top: 5px;
  font-size: 1.45rem;
}

.kpi-card small {
  margin-top: 3px;
  color: var(--bp-muted);
}

.kpi-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.kpi-icon .bp-icon {
  width: 24px;
  height: 24px;
}

.kpi-icon.blue { background: var(--bp-primary-soft); color: var(--bp-primary); }
.kpi-icon.green { background: var(--bp-green-soft); color: var(--bp-green); }
.kpi-icon.amber { background: var(--bp-amber-soft); color: var(--bp-amber); }
.kpi-icon.violet { background: var(--bp-violet-soft); color: var(--bp-violet); }
.kpi-icon.red { background: var(--bp-danger-soft); color: var(--bp-danger); }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.35fr 1.05fr;
  gap: 14px;
}

.work-panel {
  min-height: 174px;
  padding: 16px;
}

.wide-panel {
  grid-column: span 2;
}

.work-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.work-panel h2,
.module-placeholder h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
}

.panel-title-icon {
  width: 19px;
  height: 19px;
  color: var(--bp-primary);
}

.task-list,
.insight-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-list li {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  min-height: 34px;
  color: var(--bp-text);
}

.task-list strong {
  color: var(--bp-danger);
}

.checkbox-placeholder {
  width: 16px;
  height: 16px;
  border: 1px solid var(--bp-border-strong);
  border-radius: 4px;
}

.panel-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: var(--bp-primary);
  font-weight: 700;
}

.chart-skeleton {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 10px;
  height: 92px;
  padding: 10px 0 0;
}

.chart-skeleton span {
  display: block;
  min-height: 14px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #82b6ff, var(--bp-primary));
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--bp-primary-soft);
  color: var(--bp-primary);
  font-size: 0.78rem;
  font-weight: 700;
}

.muted-copy {
  color: var(--bp-muted);
  margin: 8px 0 0;
}

.status-stack {
  display: grid;
  gap: 12px;
}

.status-stack span {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot.blue { background: var(--bp-primary); }
.dot.green { background: var(--bp-green); }
.dot.amber { background: var(--bp-amber); }
.dot.violet { background: var(--bp-violet); }

.empty-state {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 104px;
  padding: 20px;
  color: var(--bp-muted);
  text-align: center;
}

.empty-state strong {
  color: var(--bp-text);
}

.empty-state .bp-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  color: var(--bp-primary);
}

.empty-state.spacious {
  margin-top: 14px;
  min-height: 180px;
}

.insight-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 3px 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--bp-border);
}

.insight-list li > .bp-icon {
  grid-row: span 2;
  color: var(--bp-primary);
}

.insight-list li > span {
  grid-column: 2 / -1;
}

.insight-list li:last-child {
  border-bottom: 0;
}

.insight-list span,
.activity-feed {
  color: var(--bp-muted);
}

.activity-feed {
  display: grid;
  gap: 10px;
}

.activity-feed span {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px;
  padding-left: 0;
  border-left: 0;
}

.activity-feed .bp-icon {
  width: 16px;
  height: 16px;
  color: var(--bp-primary);
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.quick-actions a {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 5px 12px;
  min-height: 78px;
  padding: 17px;
  font-weight: 800;
}

.quick-actions span {
  grid-column: 2;
  color: var(--bp-muted);
  font-weight: 500;
}

.quick-action-icon {
  grid-row: span 2;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--bp-primary-soft);
  color: var(--bp-primary);
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.stats-strip article {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  column-gap: 12px;
  min-height: 82px;
  padding: 15px 16px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
}

.stat-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bp-primary-soft);
  color: var(--bp-primary);
}

.stat-icon.amber {
  background: var(--bp-amber-soft);
  color: var(--bp-amber);
}

.stat-icon.green {
  background: var(--bp-green-soft);
  color: var(--bp-green);
}

.stat-icon.violet {
  background: var(--bp-violet-soft);
  color: var(--bp-violet);
}

/* Ueberschrittene Fristen und Forderungen: gleiches Rot wie die Danger-Pille. */
.stat-icon.red {
  background: var(--bp-danger-soft);
  color: var(--bp-danger);
}

.stats-strip span,
.upload-dropzone span,
.line-items-placeholder span {
  color: var(--bp-muted);
}

.stats-strip strong {
  display: block;
  margin-top: 4px;
  font-size: 1.5rem;
}

/* Zusatzzeile unter einer Kennzahl, z. B. "3 Rechnungen ueberfaellig". */
.stat-note {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
}

.table-panel {
  min-height: 320px;
}

.data-table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--bp-border);
  text-align: left;
}

.data-table th {
  color: var(--bp-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.upload-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(240px, 0.75fr);
  gap: 14px;
}

.upload-dropzone {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  min-height: 310px;
  padding: 24px;
  border: 1px dashed var(--bp-border-strong);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  text-align: center;
}

.upload-dropzone input {
  width: min(100%, 360px);
  color: var(--bp-muted);
}

.upload-icon {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 2px solid var(--bp-primary);
  border-radius: 14px;
  background: var(--bp-primary-soft);
  color: var(--bp-primary);
}

.upload-icon .bp-icon {
  width: 30px;
  height: 30px;
}

.format-list,
.step-list,
.review-list {
  display: grid;
  gap: 10px;
}

.format-list span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--bp-border);
  border-radius: 999px;
  background: var(--bp-surface-muted);
  color: var(--bp-text);
  font-weight: 700;
}

.step-list {
  margin: 0;
  padding-left: 20px;
}

.step-list li {
  padding: 4px 0;
}

.review-list article {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface-muted);
}

.review-list span,
.review-list small {
  color: var(--bp-muted);
}

.invoice-editor {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(260px, 360px);
  gap: 14px;
  align-items: start;
}

.invoice-form {
  min-height: 420px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}

.field-grid label {
  display: grid;
  gap: 6px;
  color: var(--bp-muted);
  font-weight: 700;
}

.field-grid input,
.field-grid select,
.upload-dropzone input {
  min-height: 42px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface-muted);
  color: var(--bp-text);
}

.upload-dropzone label {
  display: grid;
  gap: 6px;
  width: min(100%, 360px);
  color: var(--bp-muted);
  font-weight: 700;
  text-align: left;
}

.line-items-placeholder {
  display: grid;
  gap: 5px;
  min-height: 120px;
  margin: 16px 0;
  padding: 16px;
  border: 1px dashed var(--bp-border-strong);
  border-radius: var(--bp-radius);
  background: var(--bp-surface-muted);
}

.invoice-summary dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.invoice-summary dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bp-border);
}

.invoice-summary dl div:last-child {
  padding-top: 4px;
  border-bottom: 0;
  font-size: 1.2rem;
  font-weight: 800;
}

.invoice-summary dt {
  color: var(--bp-muted);
}

.invoice-summary dd {
  margin: 0;
  font-weight: 800;
}

.sales-editor {
  display: grid;
  gap: 14px;
}

.sales-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.sales-editor-toolbar h1 {
  margin: 0;
  font-size: 1.55rem;
}

.sales-editor-toolbar p {
  margin: 5px 0 0;
  color: var(--bp-muted);
}

.sales-toolbar-actions,
.currency-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.save-status {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--bp-border);
  border-radius: 999px;
  background: var(--bp-surface-muted);
  color: var(--bp-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.save-status[data-mode="success"] {
  border-color: #bfe7ce;
  background: #f1fbf5;
  color: #0f7a43;
}

.save-status[data-mode="error"] {
  border-color: #ffd1d1;
  background: #fff5f5;
  color: #b42318;
}

.currency-select {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--bp-radius);
  color: var(--bp-muted);
  font-weight: 700;
}

.currency-select select,
.note-template-select select {
  min-height: 34px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  color: var(--bp-text);
  font: inherit;
}

.sales-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.sales-editor-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.sales-info-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.3fr) minmax(300px, 1fr);
  gap: 14px;
}

.editor-panel,
.side-card {
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  box-shadow: 0 1px 2px rgba(22, 34, 51, 0.04);
}

.editor-panel {
  min-width: 0;
  padding: 16px;
}

.editor-panel header,
.side-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.editor-panel h2,
.side-card h2 {
  margin: 0;
  font-size: 1rem;
}

.editor-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.editor-field {
  display: grid;
  gap: 6px;
  color: var(--bp-muted);
  font-weight: 700;
}

.editor-field.full,
.field-with-action {
  grid-column: 1 / -1;
}

.editor-field input,
.editor-field select,
.editor-field textarea,
.sales-lines-table input,
.sales-lines-table select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  background: var(--bp-surface-muted);
  color: var(--bp-text);
  font: inherit;
}

.editor-field textarea {
  min-height: 110px;
  padding: 12px;
  resize: vertical;
  line-height: 1.45;
}

.editor-field small {
  justify-self: end;
  color: var(--bp-muted);
  font-weight: 600;
}

.field-with-action {
  position: relative;
}

.field-with-action input {
  padding-right: 42px;
}

.field-with-action button {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--bp-muted);
}

.info-callout {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #cfe1ff;
  border-radius: var(--bp-radius);
  background: #f5f9ff;
  color: var(--bp-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.info-callout .bp-icon {
  color: var(--bp-primary);
}

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 24px;
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch span {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--bp-border-strong);
  transition: background 0.15s ease;
}

.switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(22, 34, 51, 0.22);
  transition: transform 0.15s ease;
}

.switch input:checked + span {
  background: var(--bp-primary);
}

.switch input:checked + span::after {
  transform: translateX(18px);
}

.positions-panel {
  padding: 0;
  overflow: hidden;
}

.positions-panel header {
  padding: 16px 16px 0;
}

.sales-lines-wrap {
  overflow-x: auto;
}

.sales-lines-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
}

.sales-lines-table th,
.sales-lines-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--bp-border);
  text-align: left;
  vertical-align: middle;
}

.sales-lines-table th {
  background: var(--bp-surface-muted);
  color: var(--bp-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.sales-lines-table th:nth-child(1),
.sales-lines-table td:nth-child(1),
.sales-lines-table th:nth-child(2),
.sales-lines-table td:nth-child(2),
.sales-lines-table th:nth-child(9),
.sales-lines-table td:nth-child(9) {
  width: 44px;
  text-align: center;
}

.sales-lines-table th:nth-child(4),
.sales-lines-table td:nth-child(4),
.sales-lines-table th:nth-child(6),
.sales-lines-table td:nth-child(6),
.sales-lines-table th:nth-child(7),
.sales-lines-table td:nth-child(7),
.sales-lines-table th:nth-child(8),
.sales-lines-table td:nth-child(8) {
  width: 128px;
}

.drag-handle {
  color: var(--bp-muted);
  letter-spacing: -2px;
}

.money-cell {
  font-weight: 800;
  white-space: nowrap;
}

.add-line-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin: 12px 16px 16px;
  padding: 0 13px;
  border: 1px solid var(--bp-primary);
  border-radius: var(--bp-radius);
  background: #ffffff;
  color: var(--bp-primary);
  font-weight: 800;
  cursor: pointer;
}

.notes-panel textarea {
  width: 100%;
}

.sales-editor-sidebar {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 188px;
}

.primary-save-button,
.side-action-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  color: var(--bp-text);
  font-weight: 800;
  cursor: pointer;
}

.primary-save-button {
  justify-content: center;
  border-color: var(--bp-primary);
  background: var(--bp-primary);
  color: #ffffff;
}

.primary-save-button.compact {
  width: auto;
  min-height: 40px;
  gap: 8px;
  padding: 0 14px;
  font-weight: 700;
}

.primary-save-button.compact .bp-icon {
  width: 18px;
  height: 18px;
}

.side-action-button {
  justify-content: flex-start;
}

.side-action-button .bp-icon,
.primary-save-button .bp-icon {
  width: 20px;
  height: 20px;
}

.side-card {
  display: grid;
  gap: 13px;
  padding: 16px;
}

.totals-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.totals-card dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.totals-card dt {
  color: var(--bp-muted);
}

.totals-card dd {
  margin: 0;
  font-weight: 800;
}

.totals-card .total-row {
  padding-top: 10px;
  border-top: 1px solid var(--bp-border);
  color: var(--bp-primary);
}

.payment-card {
  gap: 14px;
}

.sales-preview[hidden] {
  display: none;
}

.sales-editor.previewing .sales-editor-toolbar,
.sales-editor.previewing [data-editor-grid] {
  display: none;
}

.sales-preview {
  display: grid;
  gap: 14px;
}

.sales-preview-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bp-muted);
  font-weight: 700;
  cursor: pointer;
}

.sales-preview-back .bp-icon,
.preview-action-row .bp-icon:first-child,
.preview-action-panel header .bp-icon:first-child {
  width: 16px;
  height: 16px;
}

.sales-preview-back .bp-icon,
.preview-action-row .bp-icon:first-child {
  transform: rotate(180deg);
}

.sales-preview h1 {
  margin: 0;
  font-size: 1.35rem;
}

.sales-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 26px;
  align-items: start;
}

/* Hinterlegtes Briefpapier: liegt formatfuellend hinter dem Beleg. */
.doc-page.has-stationery {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Eine echte A4-Seite - identische Geometrie fuer Vorschau und Ausdruck. */
.doc-page {
  position: relative;
  width: var(--page-width);
  min-height: var(--page-height);
  padding: var(--page-margin-top) var(--page-margin-right) var(--page-margin-bottom) var(--page-margin-left);
  background: #ffffff;
  color: #101828;
}

/* Die Seite wird per zoom (site.js) eingepasst; zoom wirkt - anders als transform -
   auf den Layoutfluss, sodass darunter keine Leerflaeche stehen bleibt. */
.doc-page-frame {
  min-width: 0;
  overflow: auto;
}

/* margin:auto statt justify-content:center - beim Hineinzoomen wuerde ein
   zentrierter Flex-Inhalt links aus dem Scrollbereich geschnitten. */
.doc-page-frame > .doc-page {
  margin: 0 auto;
}

.doc-page-stage {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.doc-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.doc-page-zoom-label {
  min-width: 52px;
  color: var(--bp-muted);
  text-align: center;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

/* Rand als Schatten-Ring statt border: eine Rahmenbreite wuerde die absolut
   positionierten Falzmarken um 1 px nach innen schieben. */
.sales-preview-document {
  box-shadow:
    0 0 0 1px var(--bp-border),
    0 10px 26px rgba(22, 34, 51, 0.08);
}

.preview-brand-row,
.preview-address-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 34px;
  align-items: start;
}

.preview-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bp-primary);
  font-size: 1.55rem;
  font-weight: 900;
}

.preview-brand .bp-icon {
  width: 32px;
  height: 32px;
}

.preview-meta {
  text-align: right;
}

.preview-meta h2 {
  margin: 0 0 12px;
  font-size: 1.45rem;
}

.preview-meta dl,
.preview-total-list {
  display: grid;
  gap: 4px;
  margin: 0;
}

.preview-meta dl div,
.preview-total-list div {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto;
  gap: 12px;
}

.preview-meta dt,
.preview-total-list dt {
  color: var(--bp-muted);
}

.preview-meta dd,
.preview-total-list dd {
  margin: 0;
  font-weight: 800;
}

.preview-address-line {
  display: inline-block;
  margin-top: 38px;
  padding-bottom: 2px;
  border-bottom: 1px solid #101828;
  font-size: 0.76rem;
}

.preview-address-grid {
  margin-top: 20px;
  margin-bottom: 58px;
}

.preview-address-grid address {
  display: grid;
  gap: 4px;
  margin: 0;
  font-style: normal;
  line-height: 1.42;
}

.preview-address-grid address:last-child {
  text-align: right;
}

.preview-intro {
  margin: 0 0 22px;
}

.preview-lines {
  width: 100%;
  border-collapse: collapse;
}

.preview-lines th,
.preview-lines td {
  padding: 11px 8px;
  border-bottom: 1px solid #98a2b3;
  text-align: left;
  vertical-align: top;
}

.preview-lines th {
  color: #101828;
  font-weight: 900;
}

.preview-lines th:first-child,
.preview-lines td:first-child {
  width: 52px;
  text-align: center;
}

.preview-lines th:nth-child(3),
.preview-lines td:nth-child(3),
.preview-lines th:nth-child(4),
.preview-lines td:nth-child(4),
.preview-lines th:nth-child(5),
.preview-lines td:nth-child(5) {
  text-align: right;
  white-space: nowrap;
}

.preview-lines td strong,
.preview-lines td span {
  display: block;
}

.preview-lines td span {
  margin-top: 3px;
  color: var(--bp-muted);
  font-size: 0.84rem;
}

.preview-total-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}

.preview-total-list {
  width: min(360px, 100%);
}

.preview-total-final {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 2px solid #101828;
  font-size: 1.08rem;
}

.preview-notes {
  display: grid;
  gap: 6px;
  margin-top: 58px;
  line-height: 1.45;
}

.preview-notes p {
  margin: 0;
}

.sales-preview-sidebar {
  display: grid;
  gap: 16px;
}

.preview-action-row,
.preview-action-panel,
.layout-tip-card {
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  box-shadow: 0 2px 8px rgba(22, 34, 51, 0.05);
}

.preview-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 18px;
  color: var(--bp-text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.preview-action-row span,
.preview-action-panel header span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.preview-action-row .muted,
.preview-action-panel .muted {
  color: var(--bp-muted);
}

.preview-action-panel {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.preview-action-panel header,
.layout-tip-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-weight: 800;
}

.preview-action-buttons {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 10px;
}

.secondary-button.compact,
.success-button.compact,
.text-button {
  min-height: 42px;
  padding: 0 14px;
  border-radius: var(--bp-radius);
  font-weight: 800;
  text-decoration: none;
}

.success-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #11a36a;
  background: #12b76a;
  color: #ffffff;
  cursor: pointer;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--bp-muted);
  cursor: pointer;
}

/* Ablehnen-Aktion; Gegenstueck zu .success-button in Entscheidungsdialogen. */
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--bp-danger);
  border-radius: var(--bp-radius);
  background: #fdecec;
  color: var(--bp-danger);
  font-weight: 700;
  cursor: pointer;
}

.danger-button:hover {
  background: #fbdcdc;
}

.layout-tip-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.layout-tip-card h2 {
  margin: 0;
  font-size: 1rem;
}

.layout-tip-body {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 16px;
  align-items: center;
}

.layout-tip-body p {
  margin: 0;
  color: var(--bp-muted);
  line-height: 1.45;
}

.layout-tip-illustration {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 70px;
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  background: var(--bp-surface-muted);
  color: var(--bp-muted);
}

.layout-tip-illustration .bp-icon {
  width: 34px;
  height: 34px;
}

.layout-tip-illustration span {
  position: absolute;
  right: -6px;
  bottom: 8px;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #f6c77b;
  border-radius: 50%;
  background: #fff8ec;
  color: #b54708;
  font-weight: 900;
}

.layout-tip-card footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.definition-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.definition-list div {
  display: grid;
  grid-template-columns: minmax(110px, 0.42fr) 1fr;
  gap: 10px;
  align-items: start;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--bp-border);
}

.definition-list dt {
  color: var(--bp-muted);
  font-weight: 700;
}

.definition-list dd {
  min-width: 0;
  margin: 0;
}

.hash-value {
  overflow-wrap: anywhere;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.82rem;
}

/* ------------------------------------------------------------------ */
/* Kippschalter (E-Mail-Eingang aktiv/inaktiv)                         */
/* ------------------------------------------------------------------ */

.channel-toggle-form {
  display: flex;
}

.channel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bp-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
}

.channel-toggle-track {
  position: relative;
  display: block;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #cbd5e5;
  box-shadow: inset 0 1px 3px rgba(22, 34, 51, 0.18);
  transition:
    background-color 0.28s cubic-bezier(0.34, 1.32, 0.5, 1),
    box-shadow 0.28s ease;
}

.channel-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(22, 34, 51, 0.32);
  transition:
    transform 0.28s cubic-bezier(0.34, 1.42, 0.5, 1),
    width 0.18s ease;
}

/* Beim Drücken zieht sich der Knopf kurz in die Länge - fühlt sich an wie ein
   echter Schalter statt wie ein springendes Kästchen. */
.channel-toggle:active .channel-toggle-thumb {
  width: 26px;
}

.channel-toggle.is-on .channel-toggle-track {
  background: var(--bp-green);
  box-shadow: inset 0 1px 3px rgba(15, 159, 110, 0.4);
}

.channel-toggle.is-on .channel-toggle-thumb {
  transform: translateX(20px);
}

.channel-toggle.is-on:active .channel-toggle-thumb {
  transform: translateX(14px);
}

.channel-toggle.is-on .channel-toggle-label {
  color: var(--bp-green);
}

.channel-toggle:focus-visible .channel-toggle-track {
  outline: 2px solid var(--bp-primary);
  outline-offset: 2px;
}

/* Merkmalsliste mit Haken statt Aufzaehlungspunkten. */
.check-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 24px;
  color: var(--bp-text);
  font-size: 0.9rem;
  line-height: 1.45;
}

.check-list li::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: 4px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--bp-green);
  border-bottom: 2px solid var(--bp-green);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------------ */
/* Ausgaben-Auswertung (Lieferanten)                                   */
/* ------------------------------------------------------------------ */

.spend-range {
  align-items: end;
  gap: 12px;
}

.spend-total-card {
  display: grid;
  gap: 2px;
  margin-bottom: 14px;
  padding: 16px 20px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  box-shadow: var(--bp-shadow);
}

.spend-total-card span {
  color: var(--bp-muted);
  font-size: 0.86rem;
}

.spend-total-card strong {
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
}

.spend-total-card small {
  color: var(--bp-muted);
}

.spend-grid {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.spend-chart-wrap {
  display: flex;
  justify-content: center;
  padding: 6px 0 14px;
}

.spend-chart {
  width: min(280px, 100%);
  height: auto;
}

.spend-chart-hole {
  fill: none;
  stroke: var(--bp-surface-muted);
  stroke-width: 6;
}

/* Ein Segment = ein Kreis mit passendem Strichmuster; Umfang ist 100. */
.spend-slice {
  fill: none;
  stroke-width: 6;
  cursor: pointer;
  transition:
    stroke-width 0.18s ease,
    opacity 0.18s ease;
}

.spend-slice:hover,
.spend-slice:focus-visible,
.spend-slice.is-active {
  stroke-width: 8.4;
  outline: none;
}

.spend-chart-center {
  fill: var(--bp-text);
  font-size: 4.4px;
  font-weight: 700;
}

.spend-chart-center-label {
  fill: var(--bp-muted);
  font-size: 2.4px;
}

.spend-legend {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spend-legend-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: var(--bp-radius);
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 0.9rem;
}

.spend-legend-item:hover,
.spend-legend-item.is-active {
  border-color: var(--bp-border);
  background: var(--bp-surface-muted);
}

.spend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.spend-legend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spend-legend-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.spend-legend-share {
  min-width: 48px;
  color: var(--bp-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.payee-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.payee-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bp-primary-soft);
  color: var(--bp-primary);
  font-size: 0.76rem;
  font-weight: 700;
}

.spend-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.spend-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
}

.spend-detail-title {
  display: grid;
  gap: 1px;
  margin-right: auto;
}

.spend-detail-title small {
  color: var(--bp-muted);
}

@media screen and (max-width: 1100px) {
  .spend-grid {
    grid-template-columns: 1fr;
  }
}

/* Buchungen deaktivierter Konten: sichtbar, aber erkennbar ausser Betrieb. */
.is-inactive-account {
  color: var(--bp-muted);
  background: var(--bp-surface-muted);
}

/* ------------------------------------------------------------------ */
/* Belegauswahl im Zahlungsformular                                    */
/* ------------------------------------------------------------------ */

.reference-picker {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface-muted);
}

.reference-options {
  display: grid;
  gap: 6px;
  max-height: 260px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.reference-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease;
}

.reference-option:hover {
  border-color: var(--bp-primary);
  background: var(--bp-primary-soft);
}

.reference-option.is-selected {
  border-color: var(--bp-primary);
  box-shadow: inset 0 0 0 1px var(--bp-primary);
}

.reference-option-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reference-option-main small {
  color: var(--bp-muted);
}

.reference-option-amount {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.reference-option.is-paid .reference-option-main strong {
  color: var(--bp-muted);
  text-decoration: line-through;
}

.reference-warning {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(204, 61, 61, 0.35);
  border-radius: var(--bp-radius);
  background: rgba(204, 61, 61, 0.08);
  color: #8f2626;
  font-size: 0.88rem;
  font-weight: 600;
}

/* Hinweis unter den gesperrten Belegaktionen. */
.side-action-note {
  margin: -2px 0 0;
  color: var(--bp-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.side-action-button[disabled],
.einvoice-popover button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Kompakte Werteliste: enger gesetzt als die Standard-Definitionsliste. */
.definition-list.compact-definitions {
  gap: 4px;
}

.definition-list.compact-definitions div {
  padding-bottom: 4px;
}

/* KI-Felder mehrspaltig statt als lange Kette voller Boxen. */
.ai-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.ai-field {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface-muted);
  min-width: 0;
}

.ai-field-label {
  color: var(--bp-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.ai-field-value {
  overflow-wrap: anywhere;
  font-size: 0.92rem;
}

/* Das Freigabe-Panel soll nicht auf die Hoehe des Analyse-Panels wachsen. */
.dashboard-grid > .approval-panel {
  align-self: start;
}

.table-link {
  color: var(--bp-primary);
  font-weight: 700;
}

.panel-link.inline {
  margin-top: 0;
}

.settings-list.vertical {
  display: grid;
}

.review-list form {
  margin-top: 8px;
}

.configuration-stack {
  display: grid;
  gap: 12px;
}

.config-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface-muted);
}

.config-form.muted-form {
  border-style: dashed;
}

.compact-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
}

.compact-field-grid label,
.config-form.inline-form label,
.checkbox-line {
  display: grid;
  gap: 5px;
  color: var(--bp-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.compact-field-grid input,
.compact-field-grid select,
.config-form.inline-form input {
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  background: var(--bp-surface);
  color: var(--bp-text);
}

.config-form.inline-form {
  grid-template-columns: minmax(110px, 1fr) auto;
  align-items: end;
}

.checkbox-line {
  grid-template-columns: 18px 1fr;
  align-items: center;
  color: var(--bp-text);
}

.checkbox-line input {
  width: 16px;
  height: 16px;
}

.module-placeholder {
  padding: 22px;
}

.module-placeholder p {
  max-width: 780px;
  color: var(--bp-muted);
}

.module-meta,
.settings-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.module-meta span,
.settings-list span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--bp-border);
  border-radius: 999px;
  background: var(--bp-surface-muted);
  color: var(--bp-muted);
}

.search-page-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  max-width: 760px;
}

.search-page-form input {
  min-height: 44px;
  min-width: 0;
  padding: 0 14px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
}

.search-page-form button {
  background: var(--bp-primary);
  color: #ffffff;
}

@media screen and (max-width: 1180px) {
  .global-bar {
    grid-template-columns: 210px 1fr;
  }

  .global-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .kpi-grid,
  .quick-actions,
  .stats-strip {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .dashboard-grid,
  .upload-grid,
  .invoice-editor,
  .sales-editor-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sales-info-grid {
    grid-template-columns: 1fr;
  }

  .sales-editor-sidebar {
    position: static;
  }

  .sales-preview-grid {
    grid-template-columns: 1fr;
  }

  .sales-preview-sidebar {
    position: static;
  }
}

@media screen and (max-width: 760px) {
  .global-bar,
  .page-frame,
  .module-tabs,
  .ribbon {
    padding-left: 16px;
    padding-right: 16px;
  }

  .module-scrollbar {
    left: 16px;
    right: 16px;
  }

  .global-bar {
    grid-template-columns: 1fr;
  }

  .global-search {
    max-width: none;
    min-width: 0;
  }

  .global-actions,
  .page-heading,
  .heading-actions {
    justify-content: stretch;
  }

  .page-heading,
  .global-actions {
    flex-direction: column;
  }

  .new-menu summary,
  .user-menu summary,
  .help-link,
  .secondary-button,
  .select-button {
    width: 100%;
  }

  .kpi-grid,
  .dashboard-grid,
  .quick-actions,
  .search-page-form,
    .stats-strip,
    .upload-grid,
    .invoice-editor,
    .sales-editor-grid,
    .sales-preview-grid,
    .sales-info-grid,
    .field-grid,
    .editor-field-grid,
    .compact-field-grid,
    .config-form.inline-form {
    grid-template-columns: 1fr;
  }

  .sales-editor-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .sales-toolbar-actions {
    justify-content: space-between;
  }

  .wide-panel {
    grid-column: auto;
  }

  .ribbon-group {
    min-width: 176px;
    padding: 0 12px;
  }

  .sales-preview-document {
    min-height: 0;
    padding: 28px 20px;
  }

  .preview-brand-row,
  .preview-address-grid,
  .preview-action-buttons,
  .layout-tip-body {
    grid-template-columns: 1fr;
  }

  .preview-meta,
  .preview-address-grid address:last-child {
    text-align: left;
  }
}

@media print {
  body.sales-printing .global-bar,
  body.sales-printing .module-tabs,
  body.sales-printing .module-tabs-shell,
  body.sales-printing .ribbon,
  body.sales-printing .sales-preview-back,
  body.sales-printing .sales-preview > h1,
  body.sales-printing .sales-preview-sidebar {
    display: none !important;
  }

  body.sales-printing {
    background: #ffffff;
  }

  body.sales-printing .page-frame {
    max-width: none;
    padding: 0;
  }

  body.sales-printing .sales-preview {
    display: block;
  }

  body.sales-printing .sales-preview-grid {
    display: block;
  }

  body.sales-printing .sales-preview-document {
    box-shadow: none;
  }
}

/* ------------------------------------------------------------------ */
/* Druck: echte A4-Seite                                               */
/* ------------------------------------------------------------------ */

@media print {
  /* margin: 0 ist hier Absicht und nicht verhandelbar:
     1. Sobald @page einen Rand hat, druckt der Browser Datum, Titel, URL und
        Seitenzahl hinein - genau die unerwuenschte Kopf-/Fusszeile.
     2. Alles, was in den @page-Rand faellt, wird abgeschnitten; die Falzmarken
        sitzen 5 mm vom Blattrand und waeren damit weg.
     Die Seitenraender bringt deshalb das Seitenelement selbst mit (.doc-page),
     exakt wie in der Bildschirmvorschau. */
  @page {
    size: A4;
    margin: 0;
  }

  body.sales-printing .doc-page,
  body.layout-printing .doc-page {
    width: var(--page-width);
    min-height: var(--page-height);
    margin: 0;
    zoom: 1 !important;
    border-radius: 0;
    box-shadow: none;
  }

  /* Flex-Container aufloesen und nichts abschneiden - sonst fehlen die Falzmarken
     am linken Blattrand. */
  .doc-page-frame,
  body.layout-printing .layout-preview-scroll {
    display: block;
    overflow: visible;
  }

  .doc-page-toolbar {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Layout Designer                                                     */
/* ------------------------------------------------------------------ */

.layout-designer-grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 350px;
  gap: 16px;
  align-items: start;
}

.layout-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  box-shadow: var(--bp-shadow);
}

.layout-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--bp-text);
  text-align: left;
  cursor: pointer;
}

.layout-nav-link .bp-icon {
  width: 18px;
  height: 18px;
}

.layout-nav-link:hover {
  background: var(--bp-surface-muted);
}

.layout-nav-link.active {
  background: var(--bp-primary-soft);
  color: var(--bp-primary);
  font-weight: 700;
}

.layout-preview-stage {
  padding: 16px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  box-shadow: var(--bp-shadow);
}

.layout-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.layout-preview-toolbar h2 {
  margin: 0;
  font-size: 1.15rem;
}

.layout-zoom-controls {
  display: flex;
  gap: 6px;
}

.layout-preview-scroll {
  display: flex;
  justify-content: center;
  max-height: 74vh;
  padding: 26px;
  overflow: auto;
  border-radius: 6px;
  background: #e7ebf2;
}

.layout-page {
  flex: 0 0 auto;
  box-shadow: 0 10px 26px rgba(22, 34, 51, 0.16);
}

/* Bewusst statisch positioniert: die Falzmarken sollen sich an der Blattkante
   (.doc-page) ausrichten, nicht am eingerueckten Inhaltsbereich. */
.layout-doc {
  position: static;
}

.layout-settings {
  display: grid;
  gap: 14px;
  align-content: start;
}

.layout-settings .editor-panel {
  display: grid;
  gap: 12px;
}

.layout-settings-section {
  display: grid;
  gap: 14px;
}

.layout-settings-section[hidden] {
  display: none;
}

.layout-name-field {
  padding: 12px 14px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  box-shadow: var(--bp-shadow);
}

.layout-save-button {
  position: sticky;
  bottom: 12px;
}

.variant-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  background: var(--bp-surface-muted);
  font-weight: 600;
}

.panel-hint {
  margin: 0;
  color: var(--bp-muted);
  font-size: 0.86rem;
}

.logo-preview-box,
.stationery-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 78px;
  padding: 10px;
  border: 1px dashed var(--bp-border-strong);
  border-radius: 6px;
  background: var(--bp-surface-muted);
  text-align: center;
}

.stationery-box img {
  max-width: 120px;
  max-height: 160px;
  border: 1px solid var(--bp-border);
  background: #ffffff;
  object-fit: contain;
}

.logo-preview-box img {
  max-width: 100%;
  max-height: 90px;
}

.logo-placeholder {
  color: var(--bp-muted);
  font-size: 0.86rem;
}

.upload-button {
  justify-content: center;
  cursor: pointer;
}

.code-toggle-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.column-list {
  display: grid;
  gap: 8px;
}

.column-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.layout-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  background: var(--bp-surface-muted);
}

.layout-list-info {
  display: grid;
}

.layout-list-info small {
  color: var(--bp-muted);
}

.layout-list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-pill.success {
  background: var(--bp-green-soft);
  color: var(--bp-green);
}

/* Vorschau-Bausteine im Layout-Dokument */

/* Logofenster: Breite/Hoehe kommen aus dem Layout (rechteckig oder quadratisch),
   das Bild passt sich proportional ein und wird unten links buendig gesetzt. */
.preview-brand-logo {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.preview-brand-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: left bottom;
}

.preview-line-code {
  display: block;
  margin-top: 3px;
  color: var(--bp-muted);
  font-size: 0.84em;
}

/* Falz- und Lochmarken nach DIN 5008: gemessen ab der oberen Blattkante,
   5 mm vom linken Rand. Beim Druck werden sie um die Seitenraender korrigiert
   (siehe @page-Block), damit sie exakt auf dem Papier liegen. */
.preview-fold-mark {
  position: absolute;
  left: var(--fold-mark-left, 5mm);
  width: 5mm;
  border-top: 0.2mm solid #98a2b3;
}

.fold-mark-1 {
  top: calc(105mm + var(--fold-mark-offset, 0mm));
}

.fold-mark-punch {
  top: calc(148.5mm + var(--fold-mark-offset, 0mm));
  width: 8mm;
}

.fold-mark-2 {
  top: calc(210mm + var(--fold-mark-offset, 0mm));
}

.layout-doc .preview-lines.dynamic-columns th:first-child,
.layout-doc .preview-lines.dynamic-columns td:first-child,
.preview-lines.dynamic-columns th:first-child,
.preview-lines.dynamic-columns td:first-child {
  width: auto;
}

.preview-lines.shaded-header th {
  background: #eef1f6;
}

.preview-lines.table-variant-2 td,
.preview-lines.table-variant-2 th {
  border: 1px solid #98a2b3;
}

.preview-lines.table-variant-3 tbody tr:nth-child(even) td {
  background: #f4f6fa;
}

.preview-lines.table-variant-4 td {
  border-bottom: 1px dashed #c3ccd9;
}

.preview-lines.table-variant-5 td {
  border-bottom: none;
}

.preview-lines.table-variant-6 thead tr {
  border-bottom: 3px solid #101828;
}

.preview-lines.table-variant-7 th,
.preview-lines.table-variant-7 td {
  padding: 6px 8px;
}

.preview-total-wrap.totals-align-left {
  justify-content: flex-start;
}

.preview-total-wrap.totals-align-right {
  justify-content: flex-end;
}

.preview-total-list.shaded-totals {
  padding: 10px 12px;
  border-radius: 6px;
  background: #eef1f6;
}

.preview-total-list.totals-variant-2 {
  padding: 12px 14px;
  border: 1px solid #98a2b3;
  border-radius: 6px;
}

.preview-total-list.totals-variant-3 div:not(.preview-total-final) {
  display: none;
}

.preview-total-list.totals-variant-4 {
  border-top: 1px solid #101828;
  padding-top: 10px;
}

.preview-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 64px;
  padding-top: 12px;
  border-top: 1px solid #98a2b3;
  font-size: 0.82em;
  color: #475467;
}

.preview-footer-block {
  display: grid;
  gap: 2px;
}

.preview-footer.footer-variant-2 {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
}

.preview-footer.footer-variant-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preview-footer.footer-variant-4 {
  border-top: 3px double #98a2b3;
}

.preview-footer.footer-variant-5 {
  border-top: none;
  background: #f4f6fa;
  padding: 12px;
  border-radius: 6px;
}

.preview-footer.footer-variant-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: center;
}

/* Kopfzeilen-Varianten */

.layout-doc.layout-variant-2 .preview-brand-row {
  direction: rtl;
}

.layout-doc.layout-variant-2 .preview-brand-row > * {
  direction: ltr;
}

.layout-doc.layout-variant-2 .preview-meta {
  text-align: left;
}

.layout-doc.layout-variant-3 .preview-brand-row {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.layout-doc.layout-variant-3 .preview-meta {
  text-align: center;
}

.layout-doc.layout-variant-4 .preview-brand-row {
  align-items: center;
}

.layout-doc.layout-variant-4 .preview-meta h2 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.layout-doc.layout-variant-5 .preview-brand-row {
  grid-template-columns: minmax(0, 1fr) 320px;
  border-bottom: 2px solid #101828;
  padding-bottom: 14px;
}

@media screen and (max-width: 1280px) {
  .layout-designer-grid {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .layout-settings {
    grid-column: 1 / -1;
  }
}

@media print {
  body.layout-printing .global-bar,
  body.layout-printing .module-tabs,
  body.layout-printing .module-tabs-shell,
  body.layout-printing .ribbon,
  body.layout-printing .page-heading,
  body.layout-printing .layout-nav,
  body.layout-printing .layout-preview-toolbar,
  body.layout-printing .layout-settings {
    display: none !important;
  }

  body.layout-printing {
    background: #ffffff;
  }

  body.layout-printing .page-frame {
    max-width: none;
    padding: 0;
  }

  body.layout-printing .layout-designer-grid {
    display: block;
  }

  body.layout-printing .layout-preview-stage {
    border: none;
    box-shadow: none;
    padding: 0;
  }

  body.layout-printing .layout-preview-scroll {
    max-height: none;
    padding: 0;
    overflow: visible;
    background: #ffffff;
  }

  body.layout-printing .layout-page {
    box-shadow: none;
  }
}


/* ------------------------------------------------------------------ */
/* Kunden-Combobox und Kunden-Sidebar                                  */
/* ------------------------------------------------------------------ */

.customer-search-field {
  position: relative;
}

.customer-suggest {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 40;
  display: grid;
  max-height: 260px;
  margin-top: 4px;
  overflow: auto;
  border: 1px solid var(--bp-border-strong);
  border-radius: 6px;
  background: var(--bp-surface);
  box-shadow: var(--bp-shadow);
}

.customer-suggest[hidden] {
  display: none;
}

.customer-suggest button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--bp-border);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.customer-suggest button:last-child {
  border-bottom: none;
}

.customer-suggest button:hover {
  background: var(--bp-primary-soft);
}

.customer-suggest button span {
  color: var(--bp-muted);
  font-size: 0.84rem;
}

.customer-create-button {
  justify-content: center;
}

.customer-create-button[hidden] {
  display: none;
}

.customer-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: min(420px, 92vw);
  border-left: 1px solid var(--bp-border);
  background: var(--bp-surface);
  box-shadow: -12px 0 32px rgba(22, 34, 51, 0.18);
}

.customer-sidebar[hidden] {
  display: none;
}

.customer-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bp-border);
}

.customer-sidebar-header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.customer-sidebar-body {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 20px;
  overflow: auto;
  flex: 1;
}

.customer-sidebar-body h3 {
  margin: 8px 0 0;
  font-size: 0.98rem;
}

.customer-kind-row {
  display: flex;
  gap: 18px;
}

.customer-kind-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.customer-sidebar-error {
  margin: 0;
  color: var(--bp-danger);
  font-size: 0.9rem;
}

.customer-sidebar-error[hidden] {
  display: none;
}

.customer-sidebar-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--bp-border);
}

/* ------------------------------------------------------------------ */
/* Start-Dialog: Daten uebernehmen oder neu erstellen                  */
/* ------------------------------------------------------------------ */

.source-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 24, 40, 0.45);
}

.source-dialog-backdrop[hidden] {
  display: none;
}

.source-dialog {
  width: min(640px, 100%);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--bp-surface);
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.3);
  overflow: hidden;
}

.source-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--bp-border);
}

.source-dialog-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.source-dialog-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 22px;
}

.source-dialog-options[hidden] {
  display: none;
}

.source-option {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 22px 18px;
  border: 1px solid var(--bp-border);
  border-radius: 10px;
  background: var(--bp-surface-muted);
  text-align: center;
  cursor: pointer;
}

.source-option:hover {
  border-color: var(--bp-primary);
  background: var(--bp-primary-soft);
}

.source-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bp-primary-soft);
  color: var(--bp-primary);
}

.source-option-icon .bp-icon {
  width: 26px;
  height: 26px;
}

.source-option strong {
  font-size: 1rem;
}

.source-option span:not(.source-option-icon) {
  color: var(--bp-muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.source-dialog-list {
  display: grid;
  gap: 12px;
  padding: 18px 22px 22px;
  overflow: auto;
}

.source-dialog-list[hidden] {
  display: none;
}

.source-list {
  display: grid;
  gap: 8px;
}

.source-list-row {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--bp-border);
  border-radius: 8px;
  background: var(--bp-surface-muted);
}

.source-list-row:hover {
  border-color: var(--bp-primary);
  background: var(--bp-primary-soft);
}

.source-list-number {
  font-weight: 700;
}

.source-list-customer {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-list-date {
  color: var(--bp-muted);
}

.source-list-amount {
  font-weight: 700;
  white-space: nowrap;
}

.source-list-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--bp-border-strong);
  border-radius: 8px;
  background: var(--bp-surface-muted);
  color: var(--bp-muted);
  text-align: center;
}

.einvoice-menu {
  position: relative;
}

.einvoice-menu summary {
  list-style: none;
  cursor: pointer;
  width: 100%;
}

.einvoice-menu summary::-webkit-details-marker {
  display: none;
}

.einvoice-caret {
  margin-left: auto;
}

.einvoice-popover {
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  min-width: 0;
}

.einvoice-popover button {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--bp-text);
  text-align: left;
  cursor: pointer;
}

.einvoice-popover button:hover {
  background: var(--bp-primary-soft);
}

/* ------------------------------------------------------------------ */
/* Freigaben & Workflows (Modul 2)                                     */
/* ------------------------------------------------------------------ */

.acting-user-form label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--bp-muted);
}

.acting-user-form select {
  padding: 8px 10px;
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  background: var(--bp-surface);
}

.approval-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.approval-filter-row .status-pill {
  cursor: pointer;
}

.status-pill.danger {
  background: var(--bp-danger-soft);
  color: var(--bp-danger);
}

.status-pill.amber {
  background: var(--bp-amber-soft);
  color: var(--bp-amber);
}

/* Fussnote direkt unter einer Pille, z. B. "faellig 04.08.2026". */
.due-note {
  display: block;
  margin-top: 3px;
  font-size: 0.75rem;
}

.approval-table-wrap {
  overflow-x: auto;
}

.approval-table {
  width: 100%;
  border-collapse: collapse;
}

/* Aktionszelle in Tabellen: mehrere Einzelformulare als saubere, linksbündige
   Spalte ohne unregelmäßige Umbrüche (z. B. Kontenübersicht in Modul 4). */
.table-action-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.table-action-stack .text-button {
  min-height: 30px;
  padding: 0 8px;
  margin-left: -8px;
  white-space: nowrap;
}

.approval-table th,
.approval-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--bp-border);
  text-align: left;
  vertical-align: top;
}

.approval-table th {
  color: var(--bp-muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.approval-link {
  color: var(--bp-primary);
  font-weight: 600;
}

.notification-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  background: var(--bp-surface-muted);
  font-size: 0.9rem;
}

.approval-success {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--bp-green);
  border-radius: 6px;
  background: var(--bp-green-soft);
  color: var(--bp-green);
  font-weight: 600;
}

.approval-error {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--bp-danger);
  border-radius: 6px;
  background: #fdecec;
  color: var(--bp-danger);
}

.policy-ok {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--bp-green);
  border-radius: 6px;
  background: var(--bp-green-soft);
  color: var(--bp-green);
}

.approval-steps {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.approval-step {
  padding: 12px 14px;
  border: 1px solid var(--bp-border);
  border-left: 4px solid var(--bp-border-strong);
  border-radius: 6px;
  background: var(--bp-surface-muted);
}

.approval-step.current {
  border-left-color: var(--bp-primary);
  background: var(--bp-primary-soft);
}

.approval-step.done {
  border-left-color: var(--bp-green);
}

.approval-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.approval-step-body {
  display: grid;
  gap: 4px;
  font-size: 0.9rem;
}

.approval-step-body small {
  color: var(--bp-muted);
}

.approval-decision-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--bp-border);
  border-radius: 8px;
  background: var(--bp-surface);
}

.approval-decision-form header h3,
.config-form header h3 {
  margin: 0;
  font-size: 1rem;
}

.stepup-line {
  padding: 10px 12px;
  border: 1px dashed var(--bp-amber);
  border-radius: 6px;
  background: var(--bp-amber-soft);
}

.approval-context {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
}

.approval-context div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
}

.approval-context dt {
  color: var(--bp-muted);
}

.approval-context dd {
  margin: 0;
  font-weight: 600;
}

.approval-comment {
  padding: 10px 12px;
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  background: var(--bp-surface-muted);
}

.approval-comment-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 0.86rem;
  color: var(--bp-muted);
}

.approval-comment p {
  margin: 0;
  white-space: pre-wrap;
}

.mobile-approval-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.mobile-approval-card {
  display: grid;
  gap: 12px;
}

.mobile-amount {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
}

.mobile-decision-form {
  display: grid;
  gap: 10px;
}

.mobile-decision-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mobile-decision-buttons button {
  justify-content: center;
  min-height: 46px;
}

.audit-hash {
  font-size: 0.78rem;
  color: var(--bp-muted);
}

.policy-actions {
  display: grid;
  gap: 6px;
}

.policy-actions form {
  margin: 0;
}

.policy-row {
  margin-bottom: 8px;
}

.policy-subhead {
  margin: 14px 0 8px;
  font-size: 0.95rem;
}

.policy-issues {
  margin-bottom: 14px;
}

.quick-approval-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}

/* Freigabe-Panel im Dokumentdetail: nur so hoch wie noetig, die Aktionen folgen
   direkt auf den Text statt am unteren Rand einer leeren Box zu kleben. */
.approval-panel {
  display: flex;
  flex-direction: column;
}

.approval-panel .quick-approval-actions {
  padding-top: 10px;
}

.approval-link-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.approval-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface-muted);
  color: var(--bp-text);
  text-decoration: none;
}

.approval-link:hover,
.approval-link:focus-visible {
  border-color: var(--bp-primary);
  background: var(--bp-primary-soft);
}

.approval-link > .bp-icon {
  color: var(--bp-primary);
}

.approval-link-text {
  display: grid;
  min-width: 0;
}

.approval-link-text strong {
  overflow: hidden;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-link-text small {
  color: var(--bp-muted);
}

.approval-link .status-pill {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Abgeschlossene Freigaben: eigener, einklappbarer Bereich. */
.approval-archive {
  margin-top: 12px;
}

.approval-archive > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--bp-muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.approval-archive > summary::-webkit-details-marker {
  display: none;
}

.approval-archive > summary::before {
  content: "\25B8";
  font-size: 0.8rem;
  transition: transform 0.15s ease;
}

.approval-archive[open] > summary::before {
  transform: rotate(90deg);
}

.approval-archive > .approval-link-list {
  margin-top: 8px;
}

/* Gesperrte Schnellaktionen, wenn bereits ein Freigabevorgang existiert. */
.primary-save-button:disabled,
.secondary-button:disabled {
  border-color: var(--bp-border);
  background: var(--bp-surface-muted);
  color: var(--bp-muted);
  box-shadow: none;
  cursor: not-allowed;
}

.quick-approval-actions .primary-save-button.compact,
.quick-approval-actions .secondary-button {
  padding: 0 18px;
}

.quick-approval-actions form {
  margin: 0;
}

.quick-approval-form {
  display: grid;
  gap: 12px;
  padding: 18px 22px 22px;
}

.quick-approval-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.invoice-picker-field {
  position: relative;
}

/* ------------------------------------------------------------------ */
/* E-Rechnungs-Editor (bearbeitbare, "richtige" Rechnung im Popup)     */
/* ------------------------------------------------------------------ */

.einvoice-panel-xl {
  width: min(1000px, 100%);
}

.ei-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ei-invoice {
  background: #fff;
  border: 1px solid var(--bp-border);
  border-radius: 10px;
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.ei-parties {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: start;
}

.ei-eyebrow {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bp-muted);
  margin-bottom: 4px;
}

.ei-seller,
.ei-recipient {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ei-recipient {
  padding-top: 4px;
}

.ei-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ei-meta-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.ei-meta-row > span {
  color: var(--bp-muted);
}

.ei-input,
.ei-textarea {
  font: inherit;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--bp-surface-muted);
  color: inherit;
}

.ei-textarea {
  resize: vertical;
}

.ei-input:hover,
.ei-textarea:hover {
  border-color: var(--bp-border);
}

.ei-input:focus,
.ei-textarea:focus {
  outline: none;
  border-color: var(--bp-primary);
  background: #fff;
}

.ei-strong {
  font-weight: 700;
  font-size: 1.02rem;
}

.ei-muted {
  color: var(--bp-muted);
  font-size: 0.85rem;
}

.ei-currency {
  text-transform: uppercase;
}

.ei-num {
  text-align: right;
}

.ei-unit {
  text-align: center;
}

.ei-title {
  margin: 4px 0 0;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}

.ei-table {
  width: 100%;
  border-collapse: collapse;
}

.ei-table thead th {
  text-align: left;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bp-muted);
  padding: 6px 8px;
  border-bottom: 2px solid var(--bp-border-strong, var(--bp-border));
}

.ei-table th.ei-col-num {
  text-align: right;
}

.ei-table td {
  padding: 3px 4px;
  border-bottom: 1px solid var(--bp-border);
  vertical-align: middle;
}

.ei-col-desc {
  width: 42%;
}

.ei-col-num {
  width: 12%;
}

.ei-col-unit {
  width: 10%;
}

.ei-col-act {
  width: 34px;
}

.ei-line-total {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-right: 8px;
}

.ei-icon-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--bp-muted);
  padding: 4px;
  border-radius: 6px;
}

.ei-icon-btn:hover {
  color: #b42318;
  background: var(--bp-surface-muted);
}

.ei-add {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px dashed var(--bp-border-strong, var(--bp-border));
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font: inherit;
  color: var(--bp-primary);
}

.ei-add:hover {
  background: var(--bp-primary-soft);
  border-color: var(--bp-primary);
}

.ei-bottom {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 4px;
}

.ei-pay {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ei-notes-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--bp-muted);
}

.ei-totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--bp-surface-muted);
  border-radius: 10px;
}

.ei-total-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-variant-numeric: tabular-nums;
}

.ei-total-row > span {
  color: var(--bp-muted);
}

.ei-total-gross {
  border-top: 1px solid var(--bp-border-strong, var(--bp-border));
  padding-top: 8px;
  margin-top: 2px;
  font-size: 1.1rem;
}

.ei-total-gross strong {
  color: var(--bp-primary);
}

.ei-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.ei-status {
  margin-right: auto;
  color: var(--bp-muted);
  font-size: 0.85rem;
}

@media screen and (max-width: 720px) {
  .ei-parties,
  .ei-bottom {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Startseite: Dashboard-Anpassung (Widgets anordnen/entfernen/hinzufuegen)
   ========================================================= */

.widget-hidden {
  display: none !important;
}

.dashboard-widget {
  position: relative;
}

.heading-actions .dashboard-status {
  align-self: center;
  color: var(--bp-muted);
  font-size: 0.85rem;
}

/* Morph-Gruppe: der Anpassen-Knopf teilt sich an Ort und Stelle in zwei
   Knoepfe, die zusammen exakt seine Breite behalten (kein Layout-Sprung). */
.dashboard-morph {
  position: relative;
  display: inline-flex;
}

.dashboard-morph .dashboard-morph-edit {
  transition:
    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.22s ease,
    visibility 0s linear 0s;
}

body.dashboard-editing .dashboard-morph .dashboard-morph-edit {
  transform: scale(0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.3s cubic-bezier(0.55, 0, 0.75, 0.2),
    opacity 0.2s ease,
    visibility 0s linear 0.3s;
}

.dashboard-morph-pair {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: scale(0.55);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.3s cubic-bezier(0.55, 0, 0.75, 0.2),
    opacity 0.2s ease,
    visibility 0s linear 0.3s;
}

body.dashboard-editing .dashboard-morph-pair {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.25s ease,
    visibility 0s linear 0s;
}

/* Die beiden Knoepfe "zerspringen" aus der Mitte nach aussen. */
.dashboard-morph-pair .dashboard-morph-add,
.dashboard-morph-pair .dashboard-morph-done {
  transition:
    transform 0.3s cubic-bezier(0.55, 0, 0.75, 0.2),
    opacity 0.18s ease;
}

.dashboard-morph-pair .dashboard-morph-add {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  padding: 0 8px;
  font-size: 0.85rem;
  white-space: nowrap;
  transform: translateX(14%) scaleX(0.6);
  transform-origin: right center;
  opacity: 0;
}

.dashboard-morph-pair .dashboard-morph-done {
  width: 42px;
  min-width: 42px;
  min-height: 0;
  height: 100%;
  padding: 0;
  justify-content: center;
  transform: translateX(-60%) scaleX(0.5);
  transform-origin: left center;
  opacity: 0;
}

body.dashboard-editing .dashboard-morph-pair .dashboard-morph-add {
  transform: translateX(0) scaleX(1);
  opacity: 1;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.22s ease;
}

body.dashboard-editing .dashboard-morph-pair .dashboard-morph-done {
  transform: translateX(0) scaleX(1);
  opacity: 1;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.07s,
    opacity 0.22s ease 0.07s;
}

.widget-remove-badge {
  position: absolute;
  top: -9px;
  left: -9px;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--bp-border-strong);
  background: var(--bp-surface);
  color: var(--bp-muted);
  cursor: pointer;
  box-shadow: var(--bp-shadow);
}

.widget-remove-badge .bp-icon {
  width: 12px;
  height: 12px;
}

.widget-remove-badge:hover {
  background: #fdecec;
  border-color: var(--bp-danger);
  color: var(--bp-danger);
}

body.dashboard-editing .widget-remove-badge {
  display: inline-flex;
}

body.dashboard-editing [data-widget-id] {
  cursor: grab;
  user-select: none;
}

body.dashboard-editing [data-widget-id]:active {
  cursor: grabbing;
}

@keyframes bp-jiggle-a {
  0% {
    transform: rotate(-0.5deg);
  }

  50% {
    transform: rotate(0.6deg);
  }

  100% {
    transform: rotate(-0.5deg);
  }
}

@keyframes bp-jiggle-b {
  0% {
    transform: rotate(0.55deg);
  }

  50% {
    transform: rotate(-0.5deg);
  }

  100% {
    transform: rotate(0.55deg);
  }
}

body.dashboard-editing [data-widget-id]:not(.widget-hidden) {
  animation: bp-jiggle-a 0.28s ease-in-out infinite;
}

body.dashboard-editing [data-widget-id]:nth-child(2n):not(.widget-hidden) {
  animation-name: bp-jiggle-b;
  animation-duration: 0.32s;
}

body.dashboard-editing [data-widget-id]:nth-child(3n):not(.widget-hidden) {
  animation-delay: 0.06s;
}

.widget-dragging {
  animation: none !important;
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  body.dashboard-editing [data-widget-id] {
    animation: none !important;
  }

  .dashboard-morph .dashboard-morph-edit,
  .dashboard-morph-pair,
  .dashboard-morph-pair .dashboard-morph-add,
  .dashboard-morph-pair .dashboard-morph-done {
    transition: none !important;
  }
}

/* Widget-Galerie (Dialog "Widget hinzufuegen") */
.widget-gallery-panel {
  width: min(720px, 100%);
}

.widget-gallery-body {
  padding: 16px 22px 22px;
  overflow: auto;
  max-height: min(72vh, 640px);
}

.widget-gallery-module {
  margin: 16px 0 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bp-muted);
}

.widget-gallery-module:first-child {
  margin-top: 0;
}

.widget-gallery-list {
  display: grid;
  gap: 8px;
}

.widget-gallery-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface-muted);
}

.widget-gallery-item.is-added {
  opacity: 0.55;
}

.widget-gallery-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--bp-primary-soft);
  color: var(--bp-primary);
  flex: none;
}

.widget-gallery-text {
  min-width: 0;
  display: grid;
}

.widget-gallery-text strong {
  font-size: 0.92rem;
}

.widget-gallery-text span {
  color: var(--bp-muted);
  font-size: 0.8rem;
}

.widget-gallery-item .secondary-button {
  margin-left: auto;
  flex: none;
}

/* =========================================================
   Ribbon: Schnellzugriff-Leiste konfigurieren (Zahnrad + Dialog)
   ========================================================= */

.app-shell {
  position: relative;
}

.ribbon-config-button {
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--bp-muted);
  cursor: pointer;
}

.ribbon-config-button:hover {
  background: var(--bp-primary-soft);
  border-color: var(--bp-border);
  color: var(--bp-primary);
}

.ribbon-config-button .bp-icon {
  width: 15px;
  height: 15px;
}

.app-shell:has(.ribbon-config-button) .ribbon {
  padding-right: 46px;
}

.ribbon-config-panel {
  width: min(760px, 100%);
  display: flex;
  flex-direction: column;
}

.ribbon-config-body {
  padding: 14px 22px;
  overflow: auto;
  max-height: min(66vh, 560px);
}

.ribbon-config-intro {
  margin: 0 0 12px;
  color: var(--bp-muted);
  font-size: 0.88rem;
}

.ribbon-config-module {
  padding: 10px 0;
  border-top: 1px solid var(--bp-border);
}

.ribbon-config-module:first-of-type {
  border-top: 0;
}

.ribbon-config-module h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  font-size: 0.95rem;
}

.ribbon-config-module h3 .bp-icon {
  width: 16px;
  height: 16px;
  color: var(--bp-primary);
}

.ribbon-config-group {
  margin: 0 0 10px;
}

.ribbon-config-group-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bp-muted);
}

.ribbon-config-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px 14px;
}

.ribbon-config-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.88rem;
}

.ribbon-config-action:hover {
  background: var(--bp-primary-soft);
}

.ribbon-config-action input {
  accent-color: var(--bp-primary);
}

.ribbon-config-action .bp-icon {
  width: 15px;
  height: 15px;
  color: var(--bp-muted);
  flex: none;
}

.ribbon-config-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 22px;
  border-top: 1px solid var(--bp-border);
}

.ribbon-config-status {
  margin-right: auto;
  color: var(--bp-muted);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------------ */
/* Benachrichtigungen: Glocken-Popover und Mia-Videobotschaft          */
/* ------------------------------------------------------------------ */

.notify-menu {
  position: relative;
}

.notify-menu summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  color: var(--bp-text);
  cursor: pointer;
  list-style: none;
}

.notify-menu summary::-webkit-details-marker {
  display: none;
}

.notify-popover {
  width: 330px;
  padding: 10px;
}

.notify-popover-title {
  padding: 4px 8px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bp-muted);
}

.notify-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--bp-text);
  text-align: left;
  cursor: pointer;
}

.notify-item:hover {
  background: var(--bp-primary-soft);
}

.notify-item-text {
  display: grid;
  line-height: 1.32;
}

.notify-item-text strong {
  font-size: 0.9rem;
}

.notify-item-text small {
  color: var(--bp-muted);
}

.mia-avatar {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5ea1f7, #1d4ed8);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.mia-avatar .bp-icon {
  width: 20px;
  height: 20px;
}

.mia-dialog {
  width: min(780px, 100%);
}

.mia-dialog .source-dialog-header h2 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.mia-dialog .source-dialog-header .mia-avatar {
  width: 34px;
  height: 34px;
}

.mia-dialog .source-dialog-header .mia-avatar .bp-icon {
  width: 17px;
  height: 17px;
}

.mia-dialog-body {
  display: grid;
  gap: 14px;
  padding: 18px 22px 22px;
}

.mia-dialog-body video {
  width: 100%;
  border-radius: 10px;
  background: #0b1220;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.25);
}

.mia-dialog-caption {
  margin: 0;
  color: var(--bp-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.notification-badge[hidden] {
  display: none;
}

/* =========================================================
   Micro-Interactions: dezente, einheitliche Animationsschicht
   Prinzip: kurze Dauern (150-280ms), nur transform/opacity/
   Farben - ruhig und clean, nicht verspielt.
   ========================================================= */

/* Seiteninhalt blendet beim Laden sanft ein.

   Zwei Fallstricke, die hier bewusst vermieden werden, weil sie jedes Overlay
   im Seiteninhalt unbrauchbar machen:
   1. Kein transform auf dem Seitenrahmen – eine (auch per fill-mode
      festgehaltene) Transformation macht das Element zum Containing Block,
      wodurch position:fixed relativ zur Seite statt zum Viewport wirkt.
   2. Kein fill-mode – eine dauerhaft angewandte Opacity-Animation erzeugt
      einen Stacking Context; Dialoge im Inhalt lagen dadurch trotz hohem
      z-index unter der Kopfzeile. Ohne fill-mode endet der Kontext mit der
      Animation. */
@keyframes bp-page-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Bewusst NICHT auf main.page-frame: sowohl transform als auch opacity machen
   den Seitenrahmen zum Containing Block bzw. Stacking Context. Dialoge im
   Seiteninhalt lagen dadurch hinter der Kopfzeile und wurden relativ zur Seite
   statt zum Viewport positioniert. Der Einblendeffekt liegt deshalb auf den
   Inhaltsbloecken, die keine Overlays enthalten. */
.page-heading,
.kpi-grid,
.dashboard-grid {
  animation: bp-page-in 0.28s ease-out;
}

/* Einheitliche Hover-/Fokus-Uebergaenge fuer alle interaktiven Elemente. */
.secondary-button,
.primary-save-button,
.side-action-button,
.text-button,
.icon-button,
.select-button,
.help-link,
.new-menu summary,
.user-menu summary,
.notify-menu summary,
.status-pill,
.module-tab,
.ribbon-action,
.approval-link,
.notify-item,
.menu-popover a,
.widget-remove-badge {
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

input,
select,
textarea {
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background-color 0.16s ease;
}

/* Leichtes Anheben bei Hover, spuerbares Einsinken beim Druecken. */
.secondary-button:hover,
.primary-save-button:hover,
.select-button:hover,
.ribbon-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(16, 24, 40, 0.08);
}

.secondary-button:active,
.primary-save-button:active,
.select-button:active,
.ribbon-action:active,
.icon-button:active,
.text-button:active,
.new-menu summary:active,
.user-menu summary:active,
.notify-menu summary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
  transition-duration: 0.08s;
}

/* Tabellenzeilen reagieren ruhig auf den Zeiger. */
.approval-table tbody tr {
  transition: background-color 0.15s ease;
}

.approval-table tbody tr:hover {
  background-color: var(--bp-primary-soft);
}

/* Popover-Menues (Neu, Benutzer, Glocke) klappen weich auf. */
@keyframes bp-popover-in {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

details[open] > .menu-popover {
  animation: bp-popover-in 0.16s ease-out;
  transform-origin: top center;
}

/* Dialoge: Hintergrund blendet ein, Panel skaliert ruhig auf. */
@keyframes bp-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes bp-dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.source-dialog-backdrop:not([hidden]) {
  animation: bp-backdrop-in 0.18s ease-out;
}

.source-dialog-backdrop:not([hidden]) .source-dialog {
  animation: bp-dialog-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Benachrichtigungs-Badge setzt beim Laden einen kleinen Akzent. */
@keyframes bp-badge-pop {
  0% {
    transform: scale(0);
  }

  70% {
    transform: scale(1.18);
  }

  100% {
    transform: scale(1);
  }
}

.notification-badge:not([hidden]) {
  animation: bp-badge-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s backwards;
}

/* Widget-Galerie: Karten heben sich beim Hover minimal. */
.widget-gallery-panel [data-widget-gallery-item] {
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.widget-gallery-panel [data-widget-gallery-item]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.1);
}

/* Statusmeldungen (Erfolg/Fehler-Pills) gleiten kurz ein. */
.approval-filter-row .status-pill.success,
.approval-filter-row .status-pill.danger {
  animation: bp-page-in 0.24s ease-out both;
}

/* Ruhe fuer alle, die reduzierte Bewegung bevorzugen - und fuer den Druck. */
@media (prefers-reduced-motion: reduce), print {
  main.page-frame,
  details[open] > .menu-popover,
  .source-dialog-backdrop:not([hidden]),
  .source-dialog-backdrop:not([hidden]) .source-dialog,
  .notification-badge:not([hidden]),
  .approval-filter-row .status-pill.success,
  .approval-filter-row .status-pill.danger,
  .module-tab.active,
  .module-tab.active::before {
    animation: none !important;
  }

  .secondary-button,
  .primary-save-button,
  .side-action-button,
  .text-button,
  .icon-button,
  .select-button,
  .help-link,
  .new-menu summary,
  .user-menu summary,
  .notify-menu summary,
  .status-pill,
  .module-tab,
  .ribbon-action,
  .approval-link,
  .notify-item,
  .menu-popover a,
  .widget-remove-badge,
  .widget-gallery-panel [data-widget-gallery-item] {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   Formularfelder: einheitlicher Look statt Browser-Standard
   (gilt fuer die Modul-Formulare in .configuration-stack und
   die Kopfzeilen-Formulare in .acting-user-form)
   ========================================================= */

.configuration-stack label {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--bp-muted);
}

.configuration-stack :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-radius);
  background-color: var(--bp-surface);
  color: var(--bp-text);
  font-weight: 500;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background-color 0.16s ease;
}

.configuration-stack textarea {
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}

/* Select mit eigenem Pfeil statt Browser-Optik. */
.configuration-stack select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2365748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
}

/* Datei-Feld: Auswahlknopf im Stil der Sekundaer-Knoepfe. */
.configuration-stack input[type="file"] {
  display: flex;
  align-items: center;
  padding: 5px;
  color: var(--bp-muted);
  cursor: pointer;
}

.configuration-stack input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  border: 1px solid var(--bp-border);
  border-radius: 8px;
  background: var(--bp-surface-muted);
  color: var(--bp-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

.configuration-stack input[type="file"]::file-selector-button:hover {
  background: var(--bp-primary-soft);
  border-color: var(--bp-primary);
}

/* Einheitlicher Fokus-Ring fuer alle Formularfelder. */
.configuration-stack :is(input, select, textarea):focus,
.acting-user-form :is(input, select):focus,
.config-form :is(input, select, textarea):focus,
.compact-field-grid :is(input, select):focus,
.search-page-form input:focus {
  outline: none;
  border-color: var(--bp-primary);
  box-shadow: 0 0 0 3px var(--bp-primary-soft);
}

/* Freitext-Felder in den Kopfzeilen-Formularen (z. B. Transaktionssuche). */
.acting-user-form input {
  min-height: 38px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  background: var(--bp-surface);
  color: var(--bp-text);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.acting-user-form select {
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

/* Haekchen und Radios in Markenfarbe. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--bp-primary);
}

/* Platzhaltertexte dezent. */
.configuration-stack ::placeholder,
.acting-user-form ::placeholder {
  color: var(--bp-muted);
  opacity: 0.7;
}

/* Tabellenzeilen-Links als Button (oeffnen den E-Rechnungs-Viewer). */
button.table-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* ==========================================================================
   Startseite: Kennzahl-Trends, Cashflow-Diagramm, Dokumenten-Donut
   ========================================================================== */

.kpi-body {
  min-width: 0;
}

.kpi-trend-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 6px;
  text-align: right;
}

.kpi-trend-col small {
  color: var(--bp-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 800;
  font-size: 0.85rem;
  white-space: nowrap;
}

.kpi-trend.is-up { color: var(--bp-amber); }
.kpi-trend.is-down { color: var(--bp-green); }

.kpi-card strong.is-unavailable {
  color: var(--bp-border-strong);
}

/* --- Cashflow ------------------------------------------------------------ */

.cashflow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.chart-legend {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  color: var(--bp-muted);
  font-size: 0.78rem;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

.legend-swatch.out { background: var(--bp-primary); }
.legend-swatch.in { background: var(--bp-green); }

.chart-frame {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
}

.chart-axis-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 108px;
  color: var(--bp-muted);
  font-size: 0.7rem;
  text-align: right;
}

.chart-plot {
  position: relative;
  height: 108px;
}

.chart-grid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chart-grid span {
  display: block;
  border-top: 1px dashed var(--bp-border);
}

.chart-bars {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: 10px;
  height: 100%;
}

.chart-column {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 100%;
}

.chart-bars .bar {
  display: block;
  width: 44%;
  min-height: 3px;
  height: var(--bar-height, 4%);
  border-radius: 3px 3px 0 0;
}

.chart-bars .bar.out { background: var(--bp-primary); }
.chart-bars .bar.in { background: var(--bp-green); }

.chart-axis-x {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  margin: 6px 0 0 42px;
  color: var(--bp-muted);
  font-size: 0.7rem;
  text-align: center;
}

.cashflow-payments h3 {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 800;
}

.payment-list {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.payment-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  font-size: 0.82rem;
}

.payment-date {
  color: var(--bp-muted);
  white-space: nowrap;
}

.payment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-amount {
  font-weight: 700;
  white-space: nowrap;
}

/* --- Dokumentenstatus-Donut ---------------------------------------------- */

.donut-layout {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.donut-wrap {
  position: relative;
  width: 132px;
  height: 132px;
}

.donut {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.donut circle {
  fill: none;
  stroke-width: 13;
  transform-origin: 50% 50%;
}

.donut-track { stroke: var(--bp-surface-muted); }
.donut-segment.blue { stroke: var(--bp-primary); }
.donut-segment.amber { stroke: var(--bp-amber); }
.donut-segment.green { stroke: var(--bp-green); }
.donut-segment.violet { stroke: var(--bp-violet); }

.donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.2;
}

.donut-center strong { font-size: 1.35rem; }

.donut-center span {
  color: var(--bp-muted);
  font-size: 0.72rem;
}

.status-stack span {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 8px;
  align-items: baseline;
}

.status-stack em {
  color: var(--bp-muted);
  font-style: normal;
  font-size: 0.76rem;
  min-width: 46px;
  text-align: right;
}

/* --- Ladeanimation: gestaffelt, rund 600 ms ------------------------------ */

@keyframes bp-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes bp-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes bp-draw {
  from { stroke-dashoffset: var(--dash-length, 0); }
  to { stroke-dashoffset: 0; }
}

.kpi-card,
.work-panel {
  animation: bp-rise 340ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.kpi-grid .kpi-card:nth-child(1) { animation-delay: 0ms; }
.kpi-grid .kpi-card:nth-child(2) { animation-delay: 45ms; }
.kpi-grid .kpi-card:nth-child(3) { animation-delay: 90ms; }
.kpi-grid .kpi-card:nth-child(4) { animation-delay: 135ms; }
.kpi-grid .kpi-card:nth-child(5) { animation-delay: 180ms; }
.kpi-grid .kpi-card:nth-child(n + 6) { animation-delay: 225ms; }

.dashboard-grid .work-panel:nth-child(1) { animation-delay: 180ms; }
.dashboard-grid .work-panel:nth-child(2) { animation-delay: 225ms; }
.dashboard-grid .work-panel:nth-child(3) { animation-delay: 270ms; }
.dashboard-grid .work-panel:nth-child(n + 4) { animation-delay: 315ms; }

.chart-bars .bar {
  transform-origin: bottom center;
  animation: bp-grow 420ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.chart-column:nth-child(1) .bar { animation-delay: 300ms; }
.chart-column:nth-child(2) .bar { animation-delay: 335ms; }
.chart-column:nth-child(3) .bar { animation-delay: 370ms; }
.chart-column:nth-child(4) .bar { animation-delay: 405ms; }
.chart-column:nth-child(5) .bar { animation-delay: 440ms; }
.chart-column:nth-child(6) .bar { animation-delay: 475ms; }
.chart-column:nth-child(n + 7) .bar { animation-delay: 510ms; }

.donut-segment {
  animation: bp-draw 560ms cubic-bezier(0.22, 0.8, 0.3, 1) 280ms both;
}

@media (prefers-reduced-motion: reduce) {
  .kpi-card,
  .work-panel,
  .chart-bars .bar,
  .donut-segment {
    animation: none;
  }
}

@media screen and (max-width: 1100px) {
  .cashflow-layout,
  .donut-layout {
    grid-template-columns: 1fr;
  }

  .donut-wrap {
    margin: 0 auto;
  }
}

/* Suche: Zusammenfassung und Bereichsgruppen */
.search-summary {
  margin: 14px 0 10px;
  color: var(--bp-muted);
  font-size: 0.85rem;
}

.search-summary strong {
  color: var(--bp-text);
}

.search-area + .search-area {
  margin-top: 14px;
}

.search-area header h2 {
  font-weight: 800;
}

/* --- Vertragsvorschlaege: Pruefdialog (Modul 6) --------------------------- */

.proposal-dialog-body {
  /* min-height: 0 ist noetig, damit der Bereich im Flex-Dialog unter seine
     Inhaltshoehe schrumpfen und scrollen darf; sonst waechst der Dialog ueber
     max-height hinaus und wird oben abgeschnitten. */
  flex: 1;
  min-height: 0;
  padding: 20px 22px;
  overflow-y: auto;
}

.proposal-dialog-headline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bp-border);
}

.proposal-dialog-headline strong {
  flex: 1;
  min-width: 0;
  font-size: 1.05rem;
}

.proposal-dialog-amount {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--bp-green);
  white-space: nowrap;
}

.proposal-dialog-rows {
  margin: 0;
  padding: 0;
}

.proposal-dialog-rows > div {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--bp-border);
}

.proposal-dialog-rows dt {
  margin: 0;
  color: var(--bp-muted);
}

.proposal-dialog-rows dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.proposal-dialog-rows dd input,
.proposal-dialog-rows dd select {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  color: var(--bp-text);
  text-align: right;
  font-weight: 600;
}

.proposal-dialog-evidence {
  margin-top: 16px;
}

.proposal-dialog-evidence > summary {
  padding: 10px 0;
  color: var(--bp-primary);
  font-weight: 700;
  cursor: pointer;
}

.proposal-dialog-evidence .approval-table-wrap {
  max-height: 240px;
  overflow-y: auto;
}

.proposal-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--bp-border);
  background: var(--bp-surface-muted);
}

.proposal-dialog-actions form {
  margin: 0;
}

.proposal-dialog-actions .success-button,
.proposal-dialog-actions .danger-button {
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--bp-radius);
  font-weight: 700;
}

@media screen and (max-width: 640px) {
  .proposal-dialog-rows > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .proposal-dialog-rows dd {
    text-align: left;
  }

  .proposal-dialog-rows dd input,
  .proposal-dialog-rows dd select {
    text-align: left;
  }
}