:root {
  color-scheme: light dark;
  --text: #1d1d1f;
  --leise: #6e6e73;
  --linie: #d2d2d7;
  --trenner: #e8e8ed;
  --grund: #ffffff;
  --leiste: #f5f5f7;
  --menue: rgb(246 246 246 / 0.86);
  --dr-grau-hell: #f2f2f2;
  --akzent: #007aff;
  --verweis: #0066cc;
  --fokus: rgb(0 122 255 / 0.4);
  --knopf: #ffffff;
  --knopf-gedrueckt: #f0f0f2;
  --knopf-rand: rgb(0 0 0 / 0.16);
  --knopf-schatten: 0 0.5px 1.5px rgb(0 0 0 / 0.12);
  --segment: rgb(118 118 128 / 0.12);
  --segment-auswahl: #ffffff;
  --schweben: rgb(118 118 128 / 0.08);
  --fehler: #d70015;
  --positiv: #248a3d;
  --aktiva: #007aff;
  --passiva: #af52de;
  --reihe-1: #2a78d6;
  --reihe-2: #eb6834;
  --reihe-3: #1baf7a;
  --reihe-4: #eda100;
  --reihe-5: #e87ba4;
  --reihe-6: #008300;
  --reihe-7: #4a3aa7;
  --reihe-8: #e34948;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #f5f5f7;
    --leise: #a1a1a6;
    --linie: #3a3a3c;
    --trenner: #2c2c2e;
    --grund: #1c1c1e;
    --leiste: #2c2c2e;
    --menue: rgb(44 44 46 / 0.86);
    --dr-grau-hell: #2c2c2e;
    --akzent: #0a84ff;
    --verweis: #2997ff;
    --fokus: rgb(10 132 255 / 0.5);
    --knopf: #3a3a3c;
    --knopf-gedrueckt: #48484a;
    --knopf-rand: rgb(255 255 255 / 0.08);
    --knopf-schatten: 0 0.5px 1px rgb(0 0 0 / 0.4);
    --segment: rgb(118 118 128 / 0.24);
    --segment-auswahl: #636366;
    --schweben: rgb(118 118 128 / 0.16);
    --fehler: #ff6961;
    --positiv: #30d158;
    --aktiva: #0a84ff;
    --passiva: #bf5af2;
    --reihe-1: #3987e5;
    --reihe-2: #d95926;
    --reihe-3: #199e70;
    --reihe-4: #c98500;
    --reihe-5: #d55181;
    --reihe-6: #008300;
    --reihe-7: #9085e9;
    --reihe-8: #e66767;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  background: var(--grund);
}

h2 { font-size: 1rem; font-weight: 600; margin: 2rem 0 0.5rem; }

.schwelle {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.schluessel {
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.schluessel svg {
  width: 2.25rem;
  height: 2.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.schwelle__stand { min-height: 1.4em; color: var(--leise); }
.schwelle__stand[data-stand="laeuft"]::after { content: "…"; }
.schwelle__stand[data-stand="fehler"]::after { content: "✕"; color: var(--fehler); }

.kopf, .unterwege { background: var(--leiste); }
.kopf {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--linie);
}
.kopf:has(+ .unterwege) { border-bottom-color: var(--trenner); }

.wege > a:not(.symbol) + .symbol { margin-left: auto; }

.wege, .unterwege { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 2px; }
.wege a, .unterwege a, .unterwege [aria-disabled="true"], .gruppe > summary { padding: 0.2rem 0.6rem; border-radius: 6px; color: var(--text); text-decoration: none; }
.wege a:hover, .unterwege a:hover, .gruppe > summary:hover { background: var(--schweben); }
.wege a[aria-current], .unterwege a[aria-current], .gruppe > summary[aria-current], .gruppe[open] > summary { background: var(--segment); }
.wege [aria-disabled="true"], .unterwege [aria-disabled="true"] { color: var(--leise); opacity: 0.6; cursor: default; }
.unterwege { padding: 0.4rem 0.9rem; border-bottom: 1px solid var(--linie); }
.gruppe { position: relative; }
.gruppe > summary { list-style: none; cursor: pointer; }
.gruppe > summary::-webkit-details-marker { display: none; }
.gruppe > summary::after { content: ""; display: inline-block; width: 0.35em; height: 0.35em; margin: 0 0 0.2em 0.45em; border: solid currentColor; border-width: 0 1px 1px 0; transform: rotate(45deg); }
.gruppe[open] > summary::after { margin-bottom: -0.05em; transform: rotate(-135deg); }
.gruppe__liste { position: absolute; z-index: 1; top: calc(100% + 0.35rem); left: 0; display: flex; flex-direction: column; width: max-content; max-width: 28rem; padding: 0.3rem; background: var(--menue); border: 0.5px solid var(--knopf-rand); border-radius: 8px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.18); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); }
.gruppe__liste :is(a, [aria-disabled="true"]) { border-radius: 5px; }
.gruppe__liste a[aria-current] { font-weight: 600; background: none; }
.gruppe__liste a:hover { color: #ffffff; background: var(--akzent); }
.gruppe__liste hr { align-self: stretch; margin: 0.25rem 0.6rem; border: 0; border-top: 1px solid var(--linie); }
@media (max-width: 40rem) {
  .gruppe[open] { flex-basis: 100%; }
  .gruppe__liste { position: static; margin-top: 0.25rem; max-width: none; padding-inline: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.leise {
  border: none;
  background: none;
  color: var(--leise);
  font: inherit;
  cursor: pointer;
}

.blatt { padding: 0 1.5rem 2rem; overflow-x: auto; }
.betrieb a { color: var(--text); text-decoration: underline; }
.unterlagen { max-width: 75ch; padding-left: 1.5rem; }
.unterlagen li + li { margin-top: 0.75rem; }
.bereiche { display: flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; margin: 0 0 1rem; padding: 2px; border-radius: 7px; background: var(--segment); }
.bereiche a { padding: 0.1rem 0.75rem; border-radius: 5px; color: var(--text); text-decoration: none; }
.bereiche a[aria-current] { font-weight: 600; background: var(--segment-auswahl); box-shadow: 0 0.5px 1.5px rgb(0 0 0 / 0.2); }
.schuldverhaeltnisse .filter { align-items: end; }
.schuldverhaeltnisse .filter label { flex-direction: column; align-items: start; min-width: 0; max-width: 100%; }
.schuldverhaeltnisse .filter select { width: 100%; color: var(--text); background: var(--grund); }
.po th { color: var(--text); }
.po__formular { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; margin: 1rem 0; }
.po__formular label { display: flex; flex-direction: column; gap: 0.25rem; max-width: 100%; }
.po__formular input { max-width: 100%; }
.po__formular input[name="nummer"] { width: 35ch; }
.po__formular input[name="aussteller"] { width: 25ch; }
.po__formular input[name="waehrung"] { width: 6ch; }
.po__stand { border-radius: 5px; padding: 0.1rem 0.4rem; color: var(--text); background: var(--segment); }
.po__stand--pruefen, .po__stand--ueberschritten { background: rgb(255 204 0 / 0.3); }
.po__stand--freigegeben { background: rgb(52 199 89 / 0.25); }

a { color: var(--verweis); text-decoration: none; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; border-radius: 4px; }

button:not(.leise, .schluessel), a.knopf, input[type="file"]::file-selector-button {
  border: 0.5px solid var(--knopf-rand);
  border-radius: 5px;
  background: var(--knopf);
  box-shadow: var(--knopf-schatten);
  color: var(--text);
  font: inherit;
  font-size: 0.9em;
  padding: 0.05rem 0.6rem;
  text-decoration: none;
  cursor: pointer;
}
button:not(.leise, .schluessel):active, a.knopf:active { background: var(--knopf-gedrueckt); }
button:disabled { opacity: 0.5; cursor: default; }
input[type="file"]::file-selector-button { font-size: 1em; margin-inline-end: 0.5rem; }
input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), textarea, select {
  border: 1px solid var(--linie);
  border-radius: 5px;
  background: var(--grund);
  color: var(--text);
  font: inherit;
  padding: 0.1rem 0.4rem;
}
:is(input, textarea, select):focus { outline: 3px solid var(--fokus); outline-offset: 0; }
:is(input:not([type="checkbox"], [type="radio"], [type="file"]), textarea, select):focus { border-color: var(--akzent); }

table { border-collapse: collapse; width: 100%; font-size: 8pt; line-height: 14px; }
table :is([class], button, input, select, textarea) { font-size: inherit; }
table :is(button, a.knopf, select, input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"])) {
  box-sizing: border-box;
  height: 20px;
  margin-block: -3px;
  padding-block: 0;
  line-height: 14px;
  vertical-align: top;
}
table a.knopf { display: inline-flex; align-items: center; }
table :is([type="checkbox"], [type="radio"]) { margin-block: 0; vertical-align: top; }
@media (pointer: coarse) {
  table :is(button, a.knopf, select, input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"])) { height: 44px; min-width: 44px; }
}
th, td { text-align: left; padding: 0.3rem 0.75rem 0.3rem 0; vertical-align: top; }
th { font-weight: 500; color: var(--text); border-bottom: 1px solid var(--linie); }
tbody tr + tr { border-top: 1px solid var(--trenner); }
.lauf td { border-top: 1px solid var(--linie); }
.befund { border-top: 0; }
.befund td { color: var(--leise); padding-top: 0; }
.lauf--fehler td, .befund--fehler td, .befund--mangel td, .vorsteuer--mangel,
.vorsteuer--kein_abzug, .vorsteuer--nicht_berichtigt { color: var(--fehler); }
.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.wert { color: var(--text); white-space: nowrap; }
td.zahl:has(> .wert:only-child) { width: 1%; }
td.zahl > .wert:only-child {
  display: grid;
  grid-template-columns: 1ch minmax(max-content, 1fr);
  column-gap: 0.25em;
  text-align: right;
}
td.zahl > .wert:only-child > .wert__vorzeichen { text-align: left; }
.trenner, .einheit .abstand { display: inline-block; }
.trenner { width: 0.2em; }
.einheit .abstand { width: calc(7em / 30); }
.wert--negativ { color: var(--fehler); }
.vorzeichen .wert--positiv { color: var(--positiv); }
.leer { color: var(--leise); }
.vorbei td { color: var(--leise); }
.beste { margin: 0; }
.liquiditaet { max-width: 74rem; }
.liquiditaet th { color: var(--text); }
.liquiditaet details { margin-top: 0.25rem; }
.liquiditaet summary { cursor: pointer; }
.liquiditaet details p { margin: 0.5rem 0; }
.liquiditaet dl { margin: 0.5rem 0; }
.liquiditaet dd { margin: 0 0 0.5rem; }
.liquiditaet .abrechnungen td:last-child { max-width: 22rem; }
.zeitraum { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 1rem 0 0.5rem; }
.zeitraum a[aria-current] { color: var(--text); font-weight: 600; text-decoration: none; }
.legende { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0.5rem 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.legende li { display: flex; align-items: baseline; gap: 0.4rem; }
.legende .farbe { align-self: center; width: 0.75rem; height: 0.75rem; border-radius: 2px; background: var(--farbe); }
.legende__summe { font-weight: 600; }
.farbe--1 { --farbe: var(--reihe-1); }
.farbe--2 { --farbe: var(--reihe-2); }
.farbe--3 { --farbe: var(--reihe-3); }
.farbe--4 { --farbe: var(--reihe-4); }
.farbe--5 { --farbe: var(--reihe-5); }
.farbe--6 { --farbe: var(--reihe-6); }
.farbe--7 { --farbe: var(--reihe-7); }
.farbe--8 { --farbe: var(--reihe-8); }
.verlauf { position: relative; max-width: 74rem; margin: 0.5rem 0 1.5rem; outline-offset: 4px; touch-action: pan-y; }
.verlauf__bild { display: block; overflow: visible; font-size: 12px; font-variant-numeric: tabular-nums; }
.verlauf__flaeche { overflow: visible; }
.verlauf .gitter { fill: none; stroke: var(--linie); stroke-width: 1; vector-effect: non-scaling-stroke; }
.verlauf .gitter--null { stroke: var(--leise); }
.verlauf .band { fill: var(--farbe); fill-opacity: 0.45; stroke: var(--grund); stroke-width: 1; vector-effect: non-scaling-stroke; }
.verlauf .band--vorschau { fill-opacity: 0.18; }
.verlauf .summe { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.verlauf .summe--vorschau { stroke-dasharray: 5 4; }
.verlauf path.jetzt { stroke: var(--text); stroke-width: 1; vector-effect: non-scaling-stroke; }
.verlauf text { fill: var(--leise); }
.verlauf text.jetzt, .verlauf text.offen { fill: var(--text); }
.verlauf text.jetzt { font-weight: 600; }
.verlauf .skala, .verlauf text.offen { paint-order: stroke; stroke: var(--grund); stroke-width: 3px; stroke-linejoin: round; }
.verlauf--dicht .monat--neben { display: none; }
.verlauf .strich { stroke: var(--leise); }
.verlauf line.zahlung { stroke: var(--text); stroke-width: 1.5; }
.verlauf circle.zahlung { fill: var(--grund); stroke: var(--text); stroke-width: 1.5; }
.verlauf circle.offen { fill: var(--grund); stroke: var(--text); stroke-width: 2; }
.verlauf line.tief { stroke: var(--text); stroke-width: 1; }
.verlauf circle.tief { fill: var(--text); stroke: var(--grund); stroke-width: 2; }
.verlauf text.tief { fill: var(--text); paint-order: stroke; stroke: var(--grund); stroke-width: 3px; stroke-linejoin: round; }
.tiefpunkt { margin: 0 0 0.5rem; font-variant-numeric: tabular-nums; }
.verlauf .fadenkreuz { visibility: hidden; stroke: var(--text); stroke-width: 1; pointer-events: none; }
.verlauf .fadenpunkt { visibility: hidden; fill: var(--text); stroke: var(--grund); stroke-width: 2; pointer-events: none; }
.verlauf--aktiv .fadenkreuz, .verlauf--aktiv .fadenpunkt:not(.leer) { visibility: visible; }
.verlauf__tipp { position: absolute; top: 0; left: 0; display: none; min-width: 12rem; max-width: 22rem; padding: 0.5rem 0.75rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--grund); box-shadow: 0 2px 8px rgb(0 0 0 / 0.12); font-size: 0.875rem; font-variant-numeric: tabular-nums; pointer-events: none; }
.verlauf--aktiv .verlauf__tipp { display: block; }
.verlauf__tipp p { margin: 0 0 0.25rem; font-weight: 600; }
.verlauf__tipp table { width: 100%; border-collapse: collapse; }
.verlauf__tipp td { padding: 0.1rem 0; vertical-align: baseline; }
.verlauf__tipp td + td { padding-left: 1rem; text-align: right; white-space: nowrap; font-weight: 600; }
.verlauf__tipp .kennstrich { display: inline-block; width: 0.75rem; height: 2px; margin-right: 0.4rem; vertical-align: middle; background: var(--farbe); }
.verlauf__tipp .zahlungen td { padding-top: 0.25rem; }
@media (max-width: 40rem) {
  .liquiditaet .daten, .liquiditaet .daten tbody { display: block; }
  .liquiditaet .daten thead { display: none; }
  .liquiditaet .daten tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem 1rem; padding: 0.75rem 0; border-top: 1px solid var(--linie); }
  .liquiditaet .daten td { display: block; padding: 0; overflow-wrap: anywhere; text-align: left; }
  .liquiditaet .daten td.zahl { width: auto; }
  .liquiditaet .daten td::before { content: attr(data-feld); display: block; font-weight: 500; margin-bottom: 0.25rem; }
  .liquiditaet .daten td:last-child { max-width: none; }
  .verlauf .monat--neben { display: none; }
}

form.knopf { display: inline; margin: 0; }
table.eng th, table.eng td { white-space: nowrap; }
table.eng td.frei { white-space: normal; min-width: 16rem; }
table.ausgelesen td.frei { min-width: 10rem; }

h2 a.knopf { font-weight: 400; margin-inline-start: 0.5rem; }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.75rem 0 0; }
.aktionen input { font: inherit; font-size: 0.9em; }

.zuordnung th { color: var(--text); }
.zuordnung td input { width: 6rem; font: inherit; }
.zuordnung pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.zuordnung .erfassung { padding-inline: 0; }
.bilanzseite { display: inline-flex; align-items: center; gap: 0.35em; margin-inline: 0.25em; }
.bilanzseite select { font: inherit; color: var(--text); background: var(--grund); }
.bilanzseite--aktiva::before, .bilanzseite--passiva::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; }
.bilanzseite--aktiva::before { background: var(--aktiva); }
.bilanzseite--passiva::before { background: var(--passiva); }
.vorfall__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; margin: 0.5rem 0 0; }
.buchungssatz { display: grid; grid-template-columns: max-content minmax(6rem, 10rem) max-content; width: max-content; max-width: 100%; overflow-x: auto; margin: 1.25rem 0 0.5rem; padding: 0.25rem 0; }
.buchungssatz__kopf { grid-row: 1; padding: 0 1.1rem 0.5rem; font-weight: 500; }
.buchungssatz__kopf--soll { grid-column: 1; text-align: right; }
.buchungssatz__kopf--haben { grid-column: 3; }
.buchungssatz__seite { grid-row: 2; align-self: center; display: grid; grid-template-columns: repeat(4, max-content); grid-auto-rows: 2.25rem; grid-auto-flow: dense; row-gap: 0.75rem; align-items: center; margin: 0; padding: 0; list-style: none; }
.buchungssatz__seite--soll { grid-column: 1; }
.buchungssatz__seite--haben { grid-column: 3; }
.halbsatz { display: contents; }
.halbsatz__verweis { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.buchungssatz__seite--soll .halbsatz__verweis { grid-column: 1; justify-content: end; padding-inline-end: 0.75rem; }
.buchungssatz__seite--haben .halbsatz__verweis { grid-column: 4; padding-inline-start: 0.75rem; }
.halbsatz__verweis button { padding: 0 0.3rem; font-size: 1.1em; line-height: 1; }
.pille { display: grid; grid-template-columns: subgrid; align-items: center; column-gap: 0.5rem; height: 100%; padding: 0 1.1rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--grund); white-space: nowrap; transition: opacity 0.15s; }
.buchungssatz__seite--soll .pille { grid-column: 2 / 5; }
.buchungssatz__seite--haben .pille { grid-column: 1 / 4; }
.pille > * { grid-row: 1; }
.pille > .pille__name { grid-column: 1; }
.pille > .bilanzseite { grid-column: 2; margin: 0; }
.pille > .pille__betrag { grid-column: 3; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; padding-inline-start: 1rem; }
.buchungssatz__seite--haben .pille > .pille__name { grid-column: 2; }
.buchungssatz__seite--haben .pille > .bilanzseite { grid-column: 3; }
.buchungssatz__seite--haben .pille > .pille__betrag { grid-column: 1; padding-inline: 0 1rem; }
.halbsatz--offen .pille { border-style: dashed; border-color: var(--leise); background: none; }
.halbsatz--offen .pille__name { color: var(--leise); }
.buchungssatz__seite--soll .halbsatz--offen .pille__name { grid-column: 1 / 3; }
.buchungssatz__seite--haben .halbsatz--offen .pille__name { grid-column: 2 / 4; }
.pille select { field-sizing: content; padding-block: 0; }
.pille .bilanzseite select { font-size: 0.9em; }
.buchungssatz__mitte { grid-column: 2; grid-row: 2; position: relative; }
.buchungssatz__mitte svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.buchungssatz__mitte path { fill: none; stroke: var(--leise); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity 0.15s, stroke 0.15s; }
.buchungssatz__mitte path.offen { stroke-dasharray: 4 4; }
.buchungssatz__mitte path.hervor { stroke: var(--text); stroke-width: 2; }
.buchungssatz--hervor .halbsatz.matt > *, .buchungssatz__mitte path.matt { opacity: 0.3; }
.halbsatz.hervor .pille { border-color: var(--text); }
.buchungssatz + .aktionen { margin-top: 1.25rem; }
.teilbuchungen { width: auto; }
table.teilbuchungen td.zahl:has(> .wert) { width: auto; }
.teilbuchungen tr { transition: background 0.15s; }
.teilbuchungen tr.hervor { background: var(--schweben); }
.bilanzbetrag { width: 1%; }
.bilanzwert { position: relative; }
.bilanzwert__zahl { display: grid; grid-template-columns: 1.2em minmax(max-content, 1fr); align-items: center; gap: 0.3em; }
summary.bilanzwert__zahl { cursor: pointer; list-style: none; }
summary.bilanzwert__zahl::-webkit-details-marker { display: none; }
.bilanzwert__zahl > .wert { display: grid; grid-template-columns: 1ch minmax(max-content, 1fr); gap: 0.25em; }
.bilanzwert__zahl .wert__vorzeichen { text-align: left; }
.bilanzwert__zeichen { display: flex; align-items: center; }
.tausch { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tausch--aktivtausch { color: var(--aktiva); }
.tausch--passivtausch { color: var(--passiva); }
.bilanzwert__text { display: block; color: var(--text); padding-top: 0.2em; white-space: nowrap; }
.visuell-verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.anzahl { font-variant-numeric: tabular-nums; }
:is(.wege, .unterwege) .anzahl { display: inline-block; min-width: 1.6em; padding: 0 0.35em; border-radius: 0.8em; background: var(--segment); font-size: 0.85em; text-align: center; }

.herkunft {
  display: inline-block;
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 0 0.4rem;
  color: var(--leise);
  font-size: 0.85em;
  font-weight: 400;
  white-space: nowrap;
}
.herkunft--automatisch { border-style: dashed; }
.herkunft--hand { border-color: transparent; padding-inline: 0; }

.formular {
  display: grid;
  grid-template-columns: max-content minmax(0, 28rem);
  gap: 0.5rem 1rem;
  align-items: baseline;
  margin-top: 1.5rem;
}
.formular label { color: var(--leise); }
.formular input, .formular select, .formular textarea { font: inherit; width: 100%; }
.formular input[type="number"] { width: 6rem; }
.mandate .formular { margin-bottom: 1.5rem; }
.mandate .formular label, .mandate th, .lastschriften th, .betrieb .formular label, .betrieb th { color: var(--text); }
@media (max-width: 40rem) {
  .mandate .formular, .betrieb .formular { grid-template-columns: minmax(0, 1fr); }
  .mandate .formular > div:empty, .betrieb .formular > div:empty { display: none; }
}
.wegweiser { color: var(--leise); font-size: 0.9em; }
.hinweise { margin: 0 0 0.75rem; padding-inline-start: 1.1rem; color: var(--leise); font-size: 0.9em; }
details summary { cursor: pointer; color: var(--leise); }
.abgeloest { color: var(--leise); }
.erechnung--ungueltig { color: var(--fehler); }

.erfassung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 36rem);
  gap: 0 1.5rem;
  padding: 0 1.5rem 2rem;
}
.erfassung__dokument :is(iframe, object) {
  position: sticky;
  top: 1rem;
  width: 100%;
  height: calc(100vh - 2rem);
  margin-top: 1rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: #ffffff;
}
.erfassung__angaben { overflow-x: auto; padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--trenner); }
.erfassen td:nth-child(2) { width: 100%; }
.erfassen input, .erfassen select { font: inherit; width: 100%; min-width: 8rem; }
.erfassen .paar { display: flex; gap: 0.5rem; }
.erfassen .paar input { min-width: 0; }
.journal td:first-child { white-space: normal; hyphens: auto; overflow-wrap: anywhere; }
.journal td:nth-child(2) { width: auto; }
@media (max-width: 64rem) {
  .erfassung { grid-template-columns: minmax(0, 1fr); }
  .erfassung__dokument :is(iframe, object) { position: static; height: 70vh; }
  .erfassung__angaben { padding-inline-start: 0; border-inline-start: 0; }
}

.filter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin: 0 0 1rem; }
.filter label { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.filter select { font: inherit; font-size: 0.9em; max-width: 100%; }

.symbol { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; }
.symbol svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wege .symbol { padding: 0.25rem; }
.kopf .leise { min-width: 2rem; min-height: 2rem; border-radius: 6px; }
.kopf .leise:hover { background: var(--schweben); }
.stammdaten th, .log th, .anbindungen th { color: var(--text); }
.stammdaten h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.konten h2 { font-size: 1.2rem; }
.konten h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.kontenraster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.5rem; max-width: 55rem; }
.kontenraster h3 { grid-column: 1 / -1; }
.konten h4 { font-size: 1rem; font-weight: 400; margin: 0.5rem 0 0.25rem; }
.kontenliste { margin: 0 0 0.75rem; }
.kontenliste__grundlage { display: block; color: var(--leise); font-size: 0.85em; }
.kontenliste__grundlage span { white-space: nowrap; }
.tkonto { max-width: 55rem; table-layout: fixed; margin: 0 0 1rem; }
.tkonto th + th, .tkonto td:nth-child(3) { border-left: 1px solid var(--linie); padding-left: 0.75rem; }
.tkonto tfoot td { border-top: 1px solid var(--linie); }
.nebenbuecher { list-style: none; margin: 0; padding: 0; }
.nebenbuecher li { margin: 0 0 0.35rem; }
.stammdaten table { width: 100%; max-width: 125ch; table-layout: fixed; }
.stammdaten th { padding-right: 1.5rem; }
.stammdaten__angabe { width: 44%; }
.stammdaten__wert { width: 38%; }
.stammdaten th, .stammdaten td { overflow-wrap: anywhere; }
.stammdaten__synonym { display: inline-block; max-width: 100%; margin: 0.15rem 0.1rem 0.15rem 0; padding: 0.1rem 0.5rem; border-radius: 1rem; background: var(--dr-grau-hell); color: var(--leise); font-size: 0.85em; font-weight: normal; vertical-align: baseline; }
.stammdaten input, .stammdaten textarea, .stammdaten select { width: 100%; min-width: 0; font: inherit; color: var(--text); background: var(--grund); border: 1px solid var(--linie); border-radius: 3px; padding: 0.25rem 0.4rem; }
.stammdaten__hinweis { color: var(--leise); font-size: 0.85em; font-weight: normal; }
.stammdaten__pflicht:not([hidden]) { display: block; font-weight: normal; }
.stammdaten textarea { resize: vertical; }
.stammdaten__eintrag { margin: 0 0 0.75rem; padding: 0; border: 0; min-width: 0; }
.stammdaten__eintrag legend { padding: 0; }
.stammdaten__eintrag label { display: block; margin-top: 0.35rem; font-weight: 600; }
.stammdaten__eintrag button, .stammdaten [data-hinzufuegen] { min-width: 2rem; }
.stammdaten__fehler { color: var(--fehler); }
.stammdaten__verlauf td { white-space: pre-line; }
.stammdaten__verlauf ins { display: block; text-decoration: none; }
.stammdaten__verlauf tr + tr td { border-top: 1px solid var(--linie); }
@media (max-width: 40rem) {
  .stammdaten__felder, .stammdaten__felder tbody { display: block; }
  .stammdaten__felder thead, .stammdaten__felder colgroup { display: none; }
  .stammdaten__felder tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0.75rem 0; }
  .stammdaten__felder th { grid-column: 1 / -1; border: 0; padding: 0 0 0.25rem; }
  .stammdaten__felder td { grid-column: 1 / -1; padding: 0; }
  .stammdaten__felder .stammdaten__quelle { padding-top: 0.2rem; }
}
.log pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 90ch; }
.kennung, input:is([name="nummer"], [name="belegfeld1"], [name="glaeubiger"], [name="mandat"]) { font-feature-settings: "ss06"; }