*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  /* Die Designsprache des Backoffice. Warmes Papier statt Schiefer, IBM Plex
     für Text und — wichtig — für alle Zahlen: Kennzahlen stehen im Monospace,
     damit Beträge untereinander vergleichbar bleiben.

     Alles Sichtbare hängt an diesen Tokens, damit eine neue Seite den Stil
     erbt, statt ihn nachzubauen. */
  :root {
    --bg: #f1eee8;          /* Seite */
    --panel: #ffffff;       /* Karten */

    /* Die Hausfarben: Sekundär trägt die dunklen Flächen und die Schrift,
       Primär ist der Akzent. Grün und Rot bleiben, wo sie etwas bedeuten —
       Zugang und Verlust sind keine Markenaussage. */
    --ink: #354549;         /* sekundär */
    --accent: #5e7480;      /* primär */
    --accent-dark: #46565c;
    --accent-mid: #8fa3ac;
    --accent-pale: #cfd7da;

    --muted: #5d6c72;       /* zweite Ebene */
    --soft: #7e8f98;        /* Beschriftungen, Achsen */
    --line: #e2e0da;
    --line-soft: #f1eee8;
    --field: #fbfaf8;
    --positive: #17795e;    /* Zugänge, positive Veränderung */
    --positive-soft: #6ee7b7; /* auf dunklem Grund */
    --danger: #b4402f;
    --danger-bg: #fbf3f1;
    --danger-line: #ecd6d1;
    --warn: #b8752a;
    --warn-bg: #fdf8f0;
    --warn-line: #ebd9b8;

    --radius: 14px;         /* Karten */
    --radius-s: 8px;        /* Felder, Knöpfe */
    --pad: 24px;

    --sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  body {
    background: var(--bg); min-height: 100vh; padding: 32px 24px 64px;
    font: 15px/1.55 var(--sans); color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }
  /* Zweispaltig: die Navigation steht dauerhaft links, der Inhalt rechts. */
  .shell { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 208px 1fr; gap: 26px; align-items: start; }
  .content { min-width: 0; }

  .side { position: sticky; top: 32px; padding: 4px 0; }
  .brand {
    display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--soft); padding: 0 12px 18px;
  }
  .brand b { color: var(--ink); font-weight: 600; }
  /* Eine Adresse ist ein einziges langes Wort; sie abzuschneiden liest sich
     besser als sie mitten im Namen umzubrechen. Der volle Wert steht im title. */
  .side .who {
    display: block; color: var(--soft); font-family: var(--mono); font-size: 11px;
    padding: 0 12px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .linkbtn { background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; padding: 4px 12px; }
  .linkbtn:hover { color: var(--ink); background: none; }
  .side-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }

  .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); margin-bottom: 18px; }
  .card h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
  .card .hint { color: var(--muted); font-size: 13.5px; margin-bottom: 22px; }

  .head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
  .head h2 { margin: 0; }
  .head .spacer { flex: 1; }

  button, .btn {
    padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff;
    font: inherit; font-size: 14px; line-height: 1.2; color: var(--ink); cursor: pointer;
    /* Ein umbrechendes Label zieht die ganze Tabellenzeile in die Höhe. */
    white-space: nowrap;
  }
  button:hover:not(:disabled) { background: var(--line-soft); }
  button:disabled { opacity: .5; cursor: default; }
  button.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
  button.primary:hover:not(:disabled) { background: var(--accent-dark); }
  button.danger { color: var(--danger); border-color: var(--danger-line); }
  button.danger:hover:not(:disabled) { background: var(--danger-bg); }
  button.tiny { padding: 7px 11px; font-size: 13px; }

  .tablewrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; }
  th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
  th {
    font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .1em; color: var(--soft); font-weight: 500;
  }
  tbody tr:hover { background: var(--field); }
  td.name { font-weight: 500; }
  td .sub { display: block; color: var(--soft); font-size: 12.5px; }
  td a { color: var(--accent); }
  .search {
    width: 220px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-s);
    background: var(--field); font: inherit; font-size: 14px; color: var(--ink);
  }
  .search:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: #fff; }
  .pill {
    display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--line-soft);
    color: var(--muted); font-family: var(--mono); font-size: 11px; white-space: nowrap;
  }
  td.nowrap { white-space: nowrap; }
  .none { color: var(--soft); }
  td.none { white-space: nowrap; }
  /* Eine Aktion im Fließtext einer Zelle: sieht aus wie ein Link, ist aber ein
     Button, weil sie einen Dialog öffnet statt zu navigieren. */
  button.inline {
    background: none; border: 0; padding: 0; font: inherit; font-size: inherit;
    color: var(--accent); cursor: pointer; border-radius: 3px;
  }
  button.inline:hover:not(:disabled) { background: none; text-decoration: underline; }
  button.inline:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* Domains sind lang und ohne Leerzeichen: gekürzt statt umbrochen, damit die
     Zeile ruhig bleibt und die Tabelle nicht über den Kartenrand schiebt. */
  td.page { max-width: 240px; }
  td.page a.url { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  td.page .sub { white-space: nowrap; }
  /* Letzte Absicherung: wird es doch zu eng, scrollt die Tabelle in der Karte,
     statt über ihren Rand zu laufen. */
  #tableHost { overflow-x: auto; }
  .empty { padding: 40px 0; text-align: center; color: var(--soft); }
  /* Aktionsspalte bleibt eine Tabellenzelle — display:flex auf einer <td> nimmt
     ihr die Zellendarstellung und damit die Rahmenlinie der Zeile. */
  td.actions { text-align: right; white-space: nowrap; }
  td.actions > * + * { margin-left: 8px; }
  /* Die Vendor-Liste trägt drei Aktionen: die Spalte nur so breit wie nötig, damit
     die Buttons sich nicht über Sprache und Angelegt legen. */
  td.rowactions { width: 1%; white-space: nowrap; text-align: right; }
  td.rowactions > * + * { margin-left: 6px; }
  /* Beträge lesen sich rechtsbündig und in gleicher Ziffernbreite besser. */
  td.money, th.money { text-align: right; font-variant-numeric: tabular-nums; }

  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .grid .full { grid-column: 1 / -1; }
  fieldset { border: 0; margin-bottom: 26px; }
  legend {
    font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .1em; color: var(--soft); font-weight: 500; margin-bottom: 14px;
  }
  label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
  label .req { color: var(--danger); }
  label code { font-weight: 400; color: var(--soft); font-size: 12px; font-family: var(--mono); }
  input[type=text], input[type=email], input[type=number], input[type=date], input[type=month], select, textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s);
    background: var(--field); font: inherit; color: var(--ink);
  }
  input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: #fff; }
  .note { font-size: 12.5px; color: var(--soft); margin-top: 5px; }
  .check { display: flex; align-items: flex-start; gap: 10px; }
  .check input { margin-top: 3px; width: 16px; height: 16px; flex: none; }
  .check label { margin: 0; }

  a.btn { display: inline-block; text-decoration: none; }
  a.btn:hover { background: var(--line-soft); }

  /* Schadensskizzen: Upload-Fläche und die vier Ansichten. Das Karomuster macht
     sichtbar, wo die Skizze transparent ist — genau dort darf nichts stehen. */
  .dropzone {
    display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 18px;
    border: 1.5px dashed var(--accent-pale); border-radius: var(--radius-s); background: var(--field);
    color: var(--muted); font-weight: 400; cursor: pointer; text-align: center;
  }
  .dropzone:hover, .dropzone.over { border-color: var(--accent); background: #fff; color: var(--ink); }
  .dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  .sketchviews { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
  .sketchviews figure {
    border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px;
    background: repeating-conic-gradient(var(--line-soft) 0 25%, #fff 0 50%) 0 0 / 16px 16px;
  }
  .sketchviews img { display: block; width: 100%; height: 150px; object-fit: contain; }
  .sketchviews figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
  .sketchviews figcaption code { font-family: var(--mono); font-size: 11.5px; color: var(--soft); }
  #sketchForm > button { margin-top: 4px; }
  #sketchTarget { margin-top: 8px; }

  .msg { display: none; padding: 11px 14px; border-radius: var(--radius-s); font-size: 13.5px; margin-bottom: 18px; }
  .msg.show { display: block; }
  .msg.err { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger); }
  .msg.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); }
  .msg ul { margin: 6px 0 0 18px; }

  .kv { display: grid; grid-template-columns: 190px 1fr; gap: 10px 18px; margin-bottom: 22px; }
  .kv dt { color: var(--muted); font-size: 13.5px; }
  .kv dd { font-size: 14px; word-break: break-word; }
  .mono { font-family: var(--mono); font-size: 13px; }
  .copyrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  pre.mail {
    background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 16px;
    font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
    white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow: auto;
  }
  dialog {
    border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; max-width: 460px; width: calc(100% - 32px);
    color: var(--ink); font: inherit;
    /* The universal reset above zeroes the browser's own `margin: auto`, which is what
       centres a modal dialog — restore it explicitly. */
    margin: auto;
    box-shadow: 0 18px 48px rgba(53, 69, 73, .24);
  }
  dialog::backdrop { background: rgba(53, 69, 73, .45); }

  /* Toasts sit above the modal layer so a confirmation stays visible while a dialog
     is still closing. */
  .toasts {
    position: fixed; inset: auto 20px 20px auto; z-index: 100;
    display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
    pointer-events: none;
  }
  .toast {
    display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 40px));
    padding: 12px 16px; border-radius: 8px; background: #fff; color: var(--ink);
    font-size: 14px; box-shadow: 0 10px 30px rgba(53, 69, 73, .26);
    border-left: 3px solid var(--accent);
    animation: toast-in .18s ease-out;
  }
  .toast.out { animation: toast-out .2s ease-in forwards; }
  .toast.ok { border-left-color: var(--positive); }
  .toast.err { border-left-color: var(--danger); color: var(--danger); }
  .toast .mark { font-weight: 700; flex: none; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
  @media (prefers-reduced-motion: reduce) {
    .toast, .toast.out { animation: none; }
  }
  dialog h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
  dialog p { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
  dialog .confirm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
  [hidden] { display: none !important; }

  .nav { display: flex; flex-direction: column; gap: 2px; }
  .nav button {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: 0; padding: 9px 12px; border-radius: var(--radius-s);
    color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer;
  }
  .nav button::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%; background: transparent; flex: none;
  }
  .nav button:hover { background: rgba(26, 25, 22, .05); color: var(--ink); }
  .nav button[aria-current="page"] { background: var(--ink); color: #fff; font-weight: 600; }
  .nav button[aria-current="page"]::before { background: var(--positive-soft); }

  /* Segmentierte Auswahl (Belegart, Tarif, Filter) */
  .seg { display: flex; flex-wrap: wrap; gap: 8px; }
  .seg button {
    flex: 1 1 0; min-width: 96px; padding: 9px 12px; border: 1px solid var(--line);
    border-radius: 6px; background: #fff; font-size: 13.5px;
  }
  .seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .filters { display: flex; gap: 8px; }
  .filters button { padding: 6px 12px; font-size: 13px; border-radius: 20px; }
  .filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

  .panel {
    border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; margin-bottom: 20px;
    background: var(--field);
  }
  .panel h3 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
  .panel .sub { color: var(--muted); font-size: 13px; }
  .amount { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 600; }
  .tag {
    display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px;
    background: var(--line-soft); color: var(--muted); white-space: nowrap;
  }
  .tag.paid { background: rgba(23, 121, 94, .1); color: var(--positive); }
  .tag.open { background: var(--warn-bg); color: var(--warn); }
  .tag.late { background: var(--danger-bg); color: var(--danger); }
  .tag.void { background: var(--line-soft); color: var(--soft); }
  .tag.upcoming { background: var(--accent-pale); color: var(--accent-dark); }
  tr.voided td { opacity: .6; }
  dialog.wide { max-width: 580px; }
  .lines { display: grid; gap: 12px; margin-bottom: 12px; }
  .lines:empty { display: none; }
  .line { display: grid; grid-template-columns: 1fr 64px 84px 96px auto; gap: 8px; align-items: end; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .line .full { grid-column: 1 / -1; }
  .line label { font-size: 12px; }
  dialog.help { max-width: 620px; }

  /* Abo-Zeilen: eine Karte je Vertrag statt Tabelle, weil je Zeile mehrere
     ungleich lange Angaben stehen. */
  .aborow {
    display: flex; align-items: center; gap: 18px; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px;
  }
  .aborow .grow { flex: 1; min-width: 0; }
  .aborow .who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink); font-size: 14.5px; font-weight: 600; }
  .aborow .meta { color: var(--muted); font-size: 13px; margin-top: 3px; }
  .aborow a { color: var(--accent); }
  .aborow .who a { overflow-wrap: anywhere; }
  .aborow .note { color: var(--soft); font-size: 12.5px; margin-top: 5px; font-style: italic; }
  .aborow .right { text-align: right; flex: none; }
  .aborow .right .when { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
  .aborow .right .price { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--muted); }
  .aborow.ended { opacity: .55; }
  .aborow .note.err { color: var(--danger); font-style: normal; }
  .aborow .meta.warn { color: var(--danger); }
  table.compact th, table.compact td { white-space: nowrap; padding: 8px 8px; }
  /* Status je Kunde: letzte Rechnung, Mailversand, nächste Rechnung */
  .abostatus { display: grid; grid-template-columns: repeat(3, 128px); gap: 18px; flex: none; }
  .abostatus .k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--soft); }
  .abostatus .v { font-size: 13.5px; font-weight: 600; white-space: nowrap; margin-top: 2px; }
  .abostatus .v.warn { color: var(--danger); }
  .abostatus .s { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  @media (max-width: 900px) {
    .aborow { flex-wrap: wrap; }
    .abostatus { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; order: 3; }
  }
  /* Monatsköpfe, wenn nach nächster Rechnung sortiert ist */
  .abomonth {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    margin: 26px 2px 10px; font-family: var(--mono); font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .08em; color: var(--soft);
  }
  .abomonth:first-child { margin-top: 0; }
  .abomonth span:first-child { color: var(--ink); font-weight: 600; }
  .abomonth.warn span:first-child { color: var(--danger); }
  .aborow.click { cursor: pointer; }
  .aborow.click:hover { background: var(--field); }
  /* Verlauf eines Kunden: frühere Zeiträume, eingerückt unter dem aktuellen */
  .abohistory { margin: -4px 0 10px 22px; padding-left: 12px; border-left: 2px solid var(--line); }
  .aborow.past { padding: 10px 14px; margin-bottom: 6px; }
  /* Geplante Folgezeiträume: wie der Verlauf eingerückt, aber immer sichtbar */
  .abonext { margin: -4px 0 10px 22px; padding-left: 12px; border-left: 2px solid var(--accent-pale); }
  .abonext .aborow { padding: 10px 14px; margin-bottom: 6px; }
  .aborow.past .who { font-size: 13.5px; }
  .histtoggle {
    margin-top: 6px; padding: 2px 0; border: 0; background: none; font: inherit;
    font-size: 12.5px; color: var(--accent); cursor: pointer;
  }
  .histtoggle:hover { text-decoration: underline; }

  /* Zeilenmenü: ein Auslöser statt vier Buttons */
  .menu { position: relative; display: inline-block; flex: none; vertical-align: middle; }
  .menu > button {
    width: 30px; height: 30px; padding: 0; line-height: 1;
    font-size: 17px; color: var(--muted); border-color: transparent; background: none;
  }
  .menu > button:hover { background: var(--line-soft); border-color: var(--line); }
  .menu .items {
    position: absolute; right: 0; top: 34px; z-index: 30; min-width: 208px;
    background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px;
    box-shadow: 0 12px 32px rgba(53, 69, 73, .18);
  }
  .menu .items button {
    display: block; width: 100%; text-align: left; border: 0; border-radius: 5px;
    padding: 8px 10px; font-size: 13.5px; background: none;
  }
  .menu .items button:hover { background: var(--line-soft); }
  .menu .items button.danger:hover { background: var(--danger-bg); }
  .menu .items hr { border: 0; border-top: 1px solid var(--line-soft); margin: 5px 0; }

  /* Detailansicht */
  .props { display: grid; grid-template-columns: 168px 1fr; gap: 7px 16px; font-size: 13.5px; }
  .props dt { color: var(--muted); }
  .props dd { word-break: break-word; }
  .props dd.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
  .props + h4 { margin-top: 20px; }
  dialog.wide h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--soft); font-weight: 600; margin: 0 0 10px; }
  dialog.wide h4:not(:first-of-type) { margin-top: 20px; }

  /* Radio-Reihe mit Feld dahinter (Preis, Abrechnung) */
  .pick { display: flex; align-items: center; gap: 10px; padding: 9px 0; flex-wrap: wrap; }
  .pick input[type=radio] { width: 16px; height: 16px; flex: none; margin: 0; }
  .pick > span { font-size: 13.5px; }
  .pick .label { font-weight: 600; white-space: nowrap; min-width: 118px; }
  .pick input[type=text], .pick input[type=number], .pick input[type=date], .pick input[type=month] {
    width: auto; flex: 0 1 165px; padding: 7px 10px;
  }
  .pick .calc { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
  .breakdown { color: var(--soft); font-size: 12px; margin: 2px 0 0 26px; }
  .outcome {
    display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 11px 14px;
    background: var(--field); border: 1px solid var(--line); border-radius: 6px;
    font-size: 13px; font-weight: 600; line-height: 1.5;
  }
  .outcome .arrow { color: var(--soft); font-weight: 400; }

  /* Spinner im Button: der Button behält seine Breite, damit das Layout beim
     Umschalten nicht springt. */
  .spin {
    display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: spin .6s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } }
  button.busy { position: relative; color: var(--muted); }
  button.primary.busy { color: var(--soft); }

  /* Ladezustand einer Liste */
  .loading { display: flex; align-items: center; gap: 10px; padding: 34px 0; justify-content: center; color: var(--soft); font-size: 13.5px; }

  /* Durchsuchbare Kundenauswahl. Bei über fünfzig Kunden ist eine Liste zum
     Scrollen unbrauchbar, also wird getippt und gefiltert. */
  .picker { position: relative; }
  .picker input[type=search] { width: 100%; }
  .picker .options {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
    max-height: 244px; overflow: auto; background: #fff;
    border: 1px solid var(--line); border-radius: 8px; padding: 5px;
    box-shadow: 0 12px 32px rgba(53, 69, 73, .18);
  }
  .picker .options button {
    display: block; width: 100%; text-align: left; border: 0; border-radius: 5px;
    padding: 7px 10px; background: none; font-size: 13.5px; line-height: 1.35;
  }
  .picker .options button:hover, .picker .options button.active { background: var(--line-soft); }
  .picker .options button .sub { display: block; color: var(--soft); font-size: 12px; }
  .picker .options .empty { padding: 14px 10px; font-size: 13px; }
  .picker .options .more { padding: 7px 10px; color: var(--soft); font-size: 12px; }

  .helpbtn {
    border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px;
    text-decoration: underline; cursor: pointer; padding: 4px 2px;
  }
  .helpbtn:hover { color: var(--ink); background: none; }
  dialog.help h4 { font-size: 13.5px; font-weight: 600; margin: 18px 0 5px; }
  dialog.help h4:first-of-type { margin-top: 0; }
  dialog.help p { font-size: 13.5px; color: var(--ink); margin-bottom: 0; line-height: 1.6; }
  dialog.help p + p { margin-top: 6px; }
  dialog.help .quiet { color: var(--muted); }
  dialog.help ul { margin: 6px 0 0 18px; font-size: 13.5px; line-height: 1.7; }
  .banner {
    display: flex; align-items: center; gap: 12px; padding: 12px 15px; margin-bottom: 18px;
    background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius-s); font-size: 13.5px; color: var(--warn);
  }
  .banner .spacer { flex: 1; }
  dialog fieldset { margin-bottom: 18px; }

  @media (max-width: 860px) {
    /* Schmal legt sich die Navigation waagerecht über den Inhalt. */
    .shell { grid-template-columns: 1fr; gap: 14px; }
    .side { position: static; }
    .brand { padding-bottom: 12px; }
    .nav { flex-direction: row; flex-wrap: wrap; }
    .nav button { width: auto; }
    .side-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; }
    .side .who { padding: 0; max-width: 240px; }
  }

  @media (max-width: 720px) {
    .grid, .kv, .sketchviews { grid-template-columns: 1fr; }
    .line { grid-template-columns: 1fr 1fr; }
    .line .name { grid-column: 1 / -1; }
    .card { padding: 20px 16px; }
    th.hide-s, td.hide-s { display: none; }
    /* Eine Adresse ist ein einziges Wort und hält die Spalte sonst künstlich breit. */
    td.mail { overflow-wrap: anywhere; }
    /* Drei Buttons nebeneinander passen neben Firma und Login auf kein Telefon.
       Untereinander bleibt jede Aktion mit dem Daumen erreichbar. */
    td.rowactions > * { display: block; width: 100%; text-align: center; }
    td.rowactions > * + * { margin: 6px 0 0; }
    .tablewrap { margin: 0 -16px; padding: 0 16px; }
    .head .search { width: 100%; }
  }

/* ---------- Statistiken ---------- */

/* Der Bereich trennt zwei Arten von Geld, die leicht verwechselt werden: was
   Vendors uns zahlen, und das Buchungsvolumen, das nur durch die Plattform
   läuft. Deshalb zwei Blöcke mit eigener Überschrift statt einer Kachelwand. */
.statblock { margin-bottom: 30px; }
/* Der Blockkopf trägt eine kräftige Linie — er trennt zwei Aussagen, nicht nur
   zwei Abschnitte. */
.statblock > .blockhead {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 2px solid var(--ink); margin-bottom: 20px;
}
.statblock > .blockhead .spacer { flex: 1; }
/* Die Zeitraumauswahl sitzt im Kopf des Blocks, für den sie gilt. */
.statblock > .blockhead .rangepick { align-self: center; }
.statblock > .blockhead h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.statblock > .blockhead p { font-size: 13px; color: var(--muted); margin: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 16px; }
.statcard {
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad);
  display: flex; flex-direction: column; gap: 12px; min-height: 150px; background: var(--panel);
}
/* Die erste Kennzahl eines Blocks ist die Hauptaussage und bekommt Gewicht. */
.statcard.lead { background: var(--ink); border-color: var(--ink); }
.statcard .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.statcard .label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--soft); font-weight: 500;
}
.statcard.lead .label { color: var(--accent-mid); }
.statcard .value {
  font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums; margin: 0;
}
.statcard.lead .value { color: #fff; }
.statcard .spark { width: 100%; height: 40px; display: block; margin-top: auto; }
.statcard .notes { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.statcard .note { font-size: 12.5px; color: var(--muted); margin: 0; }
.statcard.lead .note { color: var(--accent-mid); }
.statcard .delta {
  font-family: var(--mono); font-size: 11px; border-radius: 5px; padding: 3px 7px; flex: none;
}
.statcard .delta.up { color: var(--positive); background: rgba(23, 121, 94, .1); }
.statcard .delta.down { color: var(--danger); background: var(--danger-bg); }
.statcard.lead .delta.up { color: var(--positive-soft); background: rgba(110, 231, 183, .12); }
.statcard.lead .delta.down { color: #e79a8d; background: rgba(231, 154, 141, .14); }

.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 22px; margin-top: 14px; }
.strip div { font-size: 13px; }
.strip .label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.strip .value { font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 3px; }
.strip .note { color: var(--muted); font-size: 12px; }

.chart { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); background: var(--panel); }
.chart .head { margin-bottom: 14px; }
.chart h4 { font-size: 13.5px; font-weight: 600; margin: 0; }
.chart .sub { font-size: 12.5px; color: var(--muted); }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 150px; }
.bars .bar { flex: 1; min-width: 3px; border-radius: 2px 2px 0 0; background: var(--accent-mid); position: relative; }
.bars .bar.empty { background: var(--line-soft); }
.bars .bar.peak { background: var(--accent); }
.bars .bar.loss { background: var(--danger); }
/* Zu- und Abgänge gehören in entgegengesetzte Richtungen: ein Monat mit drei
   neuen und einer Kündigung ist etwas anderes als einer mit vier neuen, und in
   einem summierten Balken sähen beide gleich aus.

   Die Nulllinie liegt dort, wo die Daten sie brauchen — ohne Kündigungen also
   unten, und das Diagramm ist dann ein gewöhnliches Balkendiagramm. Die Höhen
   der beiden Hälften kommen als Inline-Anteil aus dem JS.

   align-items: stretch, weil die Spalten sonst durch das align-items der
   Basisklasse auf ihren Inhalt schrumpfen — und der ist leer. */
.bars.diverging { align-items: stretch; gap: 3px; position: relative; }
.bars.diverging .col { flex: 1; min-width: 3px; display: flex; flex-direction: column; }
.bars.diverging .up { display: flex; align-items: flex-end; }
.bars.diverging .down { display: flex; align-items: flex-start; }
.bars.diverging i { display: block; width: 100%; }
.bars.diverging .up i { background: var(--positive); border-radius: 2px 2px 0 0; }
.bars.diverging .down i { background: var(--danger); border-radius: 0 0 2px 2px; }
.bars.diverging .zeroline {
  position: absolute; left: 0; right: 0; height: 1px; background: var(--line); pointer-events: none;
}

.axis { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--soft); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.legend span::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 5px; vertical-align: 0;
}
.legend .new::before { background: var(--positive); }
.legend .lost::before { background: var(--danger); }

/* Anteile am Buchungsumsatz. Ein Ring statt einer Torte, weil die Mitte die
   Summe tragen kann und die Segmente am Rand besser vergleichbar sind. */
.donutrow { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.donut { flex: none; position: relative; width: 168px; height: 168px; }
.donut svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.donut circle { fill: none; stroke-width: 18; cursor: default; }
.donut .center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  /* Die Beschriftung liegt über dem ganzen Ring — ohne das fängt sie jeden
     Hover ab, und kein Segment ließe sich mehr befragen. */
  pointer-events: none;
}
.donut .center .amount { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.donut .center .caption { font-size: 11.5px; color: var(--soft); }
.donutrow table { flex: 1; min-width: 300px; }
.swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 8px; vertical-align: 0;
}

/* Ein Tooltip für alle Diagramme. Der native title-Tooltip kommt zu spät und
   kann nur eine Zeile — hier stehen mehrere Zahlen nebeneinander. */
.charttip {
  position: fixed; z-index: 200; pointer-events: none; opacity: 0;
  transition: opacity .1s ease-out;
  background: var(--ink); color: #fff; border-radius: 7px; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.5; box-shadow: 0 10px 28px rgba(53, 69, 73, .3);
  max-width: 260px;
}
.charttip.show { opacity: 1; }
.charttip .tiptitle { font-weight: 600; margin-bottom: 4px; }
.charttip dl { display: grid; grid-template-columns: auto auto; gap: 1px 14px; }
.charttip dt { color: var(--soft); }
.charttip dd { text-align: right; font-variant-numeric: tabular-nums; }
.bars .bar, .bars.diverging .col { cursor: default; }

/* ---------- Zeitraumauswahl ---------- */

/* Ein Auslöser statt mehrerer Felder: der gewählte Zeitraum steht drin, das
   Panel bietet die üblichen Spannen und einen Kalender für alles andere. */
.rangepick { position: relative; }
.rangepick > button { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.rangepick .caret { color: var(--soft); }
.rangepanel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; display: flex;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(53, 69, 73, .2); overflow: hidden;
}
.rangepanel .presets { display: flex; flex-direction: column; padding: 8px; border-right: 1px solid var(--line); min-width: 168px; }
.rangepanel .presets button {
  border: 0; background: none; text-align: left; padding: 8px 12px;
  border-radius: var(--radius-s); font-size: 13.5px; white-space: nowrap;
}
.rangepanel .presets button:hover { background: var(--line-soft); }
.rangepanel .presets button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.calendar { padding: 14px 16px; }
.calhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.calhead span { font-weight: 600; font-size: 13.5px; }
.calhead button { padding: 2px 9px; line-height: 1.2; }
.calmonths { display: flex; gap: 22px; }
.calmonth { width: 224px; }
.calmonth .name { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-bottom: 8px; text-align: center; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.calgrid .dow { font-family: var(--mono); font-size: 10px; color: var(--soft); text-align: center; padding-bottom: 4px; }
.calgrid button {
  border: 0; background: none; padding: 6px 0; font-size: 12.5px; border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.calgrid button:disabled { color: var(--soft); opacity: .45; }
.calgrid button:hover:not(:disabled) { background: var(--line-soft); }
/* Der gewählte Bereich wird als durchgehendes Band gezeigt, die Enden gerundet. */
.calgrid button.inrange { background: var(--line-soft); }
.calgrid button.edge { background: var(--ink); color: #fff; }
.calgrid button.edge.start { border-radius: var(--radius-s) 0 0 var(--radius-s); }
.calgrid button.edge.end { border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.calgrid button.edge.start.end { border-radius: var(--radius-s); }
.calfoot { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.calfoot .spacer { flex: 1; }

@media (max-width: 860px) {
  .rangepanel { flex-direction: column; right: auto; left: 0; }
  .rangepanel .presets { border-right: 0; border-bottom: 1px solid var(--line); }
  .calmonths { flex-direction: column; gap: 14px; }
  .calmonth { width: auto; }
}

/* Vermieter benachrichtigen: drei Seiten hinter einem Umschalter. Auf
   "Senden" führen vier nummerierte Schritte links zum Versand, rechts steht,
   wie es beim Vermieter ankommt. */
textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: #fff; }
.bc-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.bc-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--line-soft); }
.bc-tabs button { border: 0; background: transparent; color: var(--muted); font-weight: 500; padding: 8px 16px; border-radius: 7px; }
.bc-tabs button:hover:not(:disabled) { background: rgba(255, 255, 255, .6); }
.bc-tabs button[aria-current="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(53, 69, 73, .12); }

.bc-send { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; padding-top: 8px; }
.bc-steps { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.bc-block { display: flex; flex-direction: column; gap: 14px; }
.bc-block-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bc-block-head { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; }
.bc-step {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 500;
}

.bc-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.bc-types button {
  display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 16px 18px;
  border: 1.5px solid var(--line); border-radius: 12px; white-space: normal;
}
.bc-types button b { font-size: 16px; font-weight: 600; }
.bc-types button span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.bc-types button.on { border-color: var(--ink); background: var(--field); }

/* Auswahllisten: eine Zeile je Vorlage bzw. Gruppe, die Markierung links. */
.bc-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bc-row {
  display: flex; align-items: center; gap: 14px; text-align: left; padding: 13px 16px;
  border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: #fff; white-space: normal;
}
.bc-row:last-child { border-bottom: 0; }
.bc-row.on { background: var(--field); }
.bc-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bc-row-name { font-size: 15px; font-weight: 500; }
.bc-row-sub { font-size: 13.5px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-row-note { font-size: 12.5px; color: var(--soft); }
.bc-row-count { font-family: var(--mono); font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.bc-radio, .bc-check {
  flex: none; width: 18px; height: 18px; border: 1.5px solid var(--accent-mid);
  display: inline-flex; align-items: center; justify-content: center;
}
.bc-radio { border-radius: 50%; }
.bc-row.on .bc-radio { border-color: var(--ink); }
.bc-row.on .bc-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.bc-check { width: 20px; height: 20px; border-radius: 5px; color: #fff; font-size: 12px; }
.bc-row.on .bc-check { background: var(--ink); border-color: var(--ink); }
.bc-list-empty { padding: 14px 16px; font-size: 14px; color: var(--muted); }

.bc-attach { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.bc-attach .bc-files { margin-bottom: 0; }
/* Optional — der Bereich soll den Schritt nicht dominieren. */
.bc-attach .dropzone { min-height: 0; padding: 12px; font-size: 13.5px; }
.bc-mail-files { font-size: 12.5px; color: var(--muted); }
.bc-mail-files:empty { display: none; }
.bc-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.bc-pick-head { font-size: 14px; font-weight: 500; }
.bc-pick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bc-pick-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--field); font-size: 13.5px;
}
.bc-pick-chip.muted { color: var(--soft); background: #fff; }
.bc-pick-remove {
  border: 0; background: none; padding: 0 6px; font-size: 16px; line-height: 1; color: var(--muted); cursor: pointer;
}
.bc-pick-remove:hover { color: var(--ink); }
.bc-pick-search { position: relative; }
.bc-pick-search input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--field); font: inherit; color: var(--ink);
}
.bc-pick-results {
  position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); background: #fff;
}
.bc-pick-results .bc-row { padding: 10px 14px; }
.bc-pick-results .bc-row:hover:not(:disabled) { background: var(--field); }
.bc-pick-results .bc-row:disabled { opacity: .5; cursor: default; }
.bc-list-empty .linkbtn { padding: 0; font-size: 14px; }

.bc-testbox {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 12px; font-size: 14.5px;
}
.bc-testbox.open { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); }
.bc-testbox.ok { background: rgba(23, 121, 94, .06); border: 1px solid rgba(23, 121, 94, .2); color: var(--positive); }
.bc-testbox.ok .linkbtn { color: var(--positive); padding: 0; font-size: 13.5px; }
.bc-testbox button:not(.linkbtn) { border-color: var(--ink); white-space: nowrap; }
.bc-test-send { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.bc-test-to { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--soft); }
.bc-test-to input { width: 260px; max-width: 100%; color: var(--ink); }
.bc-sendbar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: 12px; background: var(--field);
}
.bc-sendbar-text { display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.bc-sendbar-text b { font-weight: 600; }
.bc-sub { font-size: 13px; color: var(--soft); }
button.bc-big { padding: 12px 26px; font-size: 15px; }
#bcSendNote:empty { display: none; }

/* Vorschau: die Mail im Postfach bzw. die Mitteilung auf dem Sperrbildschirm. */
.bc-preview { flex: 1 1 300px; max-width: 400px; min-width: 280px; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 10px; }
.bc-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.bc-mail { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(53, 69, 73, .04), 0 8px 24px rgba(53, 69, 73, .06); }
.bc-mail-head { display: flex; flex-direction: column; gap: 3px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); background: var(--field); font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.bc-mail-head b { margin-top: 6px; font-size: 14.5px; color: var(--ink); font-weight: 600; }
#bcPreviewFrame { display: block; width: 100%; height: 420px; border: 0; background: #fff; }
.bc-phone { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 32px 14px 110px; border-radius: 28px; background: #2b3437; }
.bc-phone-clock { display: flex; flex-direction: column; align-items: center; color: #eef1f1; }
.bc-phone-clock span { font-size: 13px; opacity: .8; }
.bc-phone-clock b { font-size: 52px; font-weight: 500; line-height: 1.1; }
.bc-notif { align-self: stretch; display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(245, 246, 245, .92); }
.bc-notif-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 600; }
.bc-notif-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-size: 13.5px; line-height: 1.4; color: #1f2a2d; overflow-wrap: anywhere; }
.bc-notif-app { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }

/* Verlauf: eine Zeile je Versand; ein Klick zeigt, wer was bekommen hat. */
.bc-history { overflow-x: auto; }
.bc-hrow {
  display: grid; grid-template-columns: 130px minmax(0, 2fr) minmax(0, 2fr) 90px 150px; gap: 16px; align-items: center;
  min-width: 760px; padding: 14px 12px; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.bc-hrow:not(.bc-hhead) { cursor: pointer; }
.bc-hrow:not(.bc-hhead):hover { background: var(--field); }
.bc-hhead { padding-top: 4px; padding-bottom: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.bc-stack { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; min-width: 0; }
.bc-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.bc-pill { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; }
.bc-chip { padding: 2px 9px; border-radius: 999px; font-size: 12px; }
.bc-chip.email { background: var(--line-soft); color: var(--muted); }
.bc-chip.push { background: var(--accent-pale); color: var(--accent-dark); }
.bc-mono { font-family: var(--mono); font-size: 13.5px; }
.bc-bar { align-self: stretch; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.bc-bar span { display: block; height: 100%; background: var(--positive); }
.bc-warn { color: var(--danger); }
.bc-error { color: var(--danger); }

/* Vorlagen: Liste links, Bearbeiten rechts. */
.bc-tpl-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 4px 0 18px; }
.bc-tpl-layout { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 32px; align-items: start; }
.bc-tpl-list { display: flex; flex-direction: column; gap: 8px; }
.bc-tpl {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-align: left;
  padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 12px; white-space: normal;
}
.bc-tpl.on { border-color: var(--ink); background: var(--field); }
.bc-editor { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.bc-editor label, .bc-editor .label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.bc-editor input[type=text], .bc-editor textarea { font-size: 15px; padding: 11px 14px; }
.bc-editor textarea { resize: vertical; line-height: 1.6; }
.bc-editor textarea.bc-pushtext { resize: none; }
.bc-editor .note { font-size: 13px; line-height: 1.6; }
.bc-count { float: right; font-weight: 400; color: var(--soft); font-family: var(--mono); font-size: 12px; }
.bc-count.full { color: var(--danger); }
.bc-files { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.bc-files:empty { display: none; }
.bc-file { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.bc-file .bc-remove { color: var(--soft); font-size: 13px; }
.bc-file .bc-remove:hover { color: var(--danger); }
.bc-editor-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.bc-editor-actions .spacer { flex: 1; }
button.bc-outline { border-color: var(--ink); }
.bc-dirty { font-size: 13px; color: var(--warn); }

/* Toasts können eine Aktion tragen, etwa „Im Verlauf ansehen“. */
.toast.has-action { pointer-events: auto; }
.toast .toast-action { padding: 0; border: 0; background: none; color: var(--accent-dark); font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .bc-tpl-layout { grid-template-columns: 1fr; }
  .bc-preview { max-width: none; position: static; }
}