/* Feinsaldo · reference stylesheet (design system "Kontoblatt")
   A printed ledger page: one serif, paper and ink, ruled tables, the double closing rule.
   Desktop only for launch: the app is drafted at 1280 px and needs about 1180 px of width.
   The one optional block at the end lets the single-column pages (sign-in family, Startseite)
   collapse below 720 px. Class names are those of docs/design/tour-74/round-2/kontoblatt.
   Rules and usage: docs/design/design-system.md. Look: docs/design/system/bausteine.html. */

/* Source Serif 4 (SIL Open Font License). The app serves the two font files and the OFL text
   from apps/web/src/web/static/fonts/; the path below is relative to this stylesheet there.
   No font is loaded from another host. */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-var-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* colour: grounds */
  --paper: #f5f0e3; /* header strip, landing ground */
  --sheet: #fcfaf3; /* page ground of the app */
  --field: #fffefb; /* inputs, secondary buttons */
  --shade: #efe8d6; /* excluded rows, disabled controls */
  --edge: #cdc5b0; /* edge of a framed figure */
  /* colour: ink */
  --ink: #1d1b18; /* text, rules, primary button; 16.4:1 on sheet */
  --ink-2: #47423b; /* secondary text; 9.5:1 on sheet, 7.8:1 on shade */
  --ink-hover: #3b3630; /* primary button, hovered */
  --line: var(--ink); /* ledger devices: column rules, closing rule */
  /* colour: ruling */
  --rule: #b7c3ce; /* Lineatur: separators in the header, form rows */
  --rule-soft: #d5dbe1; /* row hairlines */
  --rule-five: #93a1ae; /* every fifth row */
  /* colour: states. Red means error and nothing else. */
  --red: #8c1c13; /* Fehler, blockiert; 8.8:1 on sheet */
  --red-tint: #f6e4df; /* ground of an error row or notice */
  --ochre: #5f4000; /* Hinweis, zu prüfen; 9.2:1 on sheet */
  --ochre-tint: #faefc8; /* ground of a Hinweis row (owner, 21 Oct 2026) */
  --green: #1f5a2e; /* bereit, Datei erstellt; 7.9:1 on sheet (owner, 21 Oct 2026) */
  /* colour: brand. Petrol is the bar of the logo and nothing else. */
  --brand: #0b4f56;
  --brand-light: #5fb3bc; /* the same bar on ink; 7.1:1 */

  /* type */
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --fs-tag: 12.5px; /* Fehler/Hinweis label inside a table row */
  --fs-xs: 13px; /* caps line, field labels, Fehler/Hinweis label */
  --fs-th: 13.5px; /* column heads, tab counters, small notes */
  --fs-s: 14px; /* notes, second lines */
  --fs-table: 14.5px;
  --fs-ui: 15px; /* meta line, lists, filter, toolbar text */
  --fs-m: 15.5px; /* body */
  --fs-control: 16px; /* buttons, text inputs, message list */
  --fs-figure: 16.5px; /* count line, figures of the example */
  --fs-l: 17px; /* lead, verdict help, tab labels */
  --fs-h3: 17px; /* role heading on Kontenzuordnung */
  --fs-lead: 18.5px; /* lead of the Startseite */
  --fs-h3-l: 19px; /* step headings */
  --fs-h2: 21px; /* section heading */
  --fs-h1-s: 22px; /* client name on Prüfung, title of the example */
  --fs-h1-m: 30px; /* heading of Anmelden, step numerals */
  --fs-numeral: 34px; /* step numerals of the Startseite */
  --fs-hero: 41px; /* h1 of the Startseite */
  --fs-display: 56px; /* h1 of feinsaldo.de, three short lines */
  --fs-title: 32px; /* page title */
  --fs-headline: 40px; /* headline of the Übersicht */
  --fs-verdict: 44px; /* verdict sentence on Prüfung: the largest text in the app */
  --w-regular: 400;
  --w-semi: 600;
  --w-bold: 650;

  /* spacing steps */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 72px;
  --gutter: max(32px, calc((100% - 1216px) / 2)); /* content up to 1216 px wide */

  /* rule weights */
  --r-hair: 1px;
  --r-rule: 2px; /* under a section head */
  --r-head: 3px; /* top of the page, current section */
  --r-double: 4px; /* closing rule, drawn double */
  --r-focus: 3px;

  /* controls and rows */
  --control: 46px; /* primary button, inputs */
  --control-2: 44px; /* secondary button, filter */
  --row: 36px; /* table row */
  --row-client: 40px;
  --radius: 2px;
}

/* ---------- base ---------- */
* {
  box-sizing: border-box;
}
html {
  background: var(--sheet);
}
body {
  margin: 0;
  background: var(--sheet);
  color: var(--ink);
  font: var(--w-regular) var(--fs-m) / 1.5 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover,
a.is-hover {
  text-decoration-thickness: 2px;
}
button {
  font: inherit;
  color: inherit;
}
/* Keyboard focus: a heavy ink ring with a gap, visible on paper and around ink buttons. */
:focus-visible,
.is-focus {
  outline: var(--r-focus) solid var(--ink);
  outline-offset: 2px;
  border-radius: 1px;
}
.on-ink :focus-visible,
.on-ink .is-focus {
  outline-color: var(--paper);
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.caps {
  font-size: var(--fs-xs);
  font-weight: var(--w-semi);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.quiet {
  color: var(--ink-2);
}
.num {
  text-align: right;
  white-space: nowrap;
}
.neg {
  /* negative amounts: ink, bold, with the minus, and in a thin ink frame.
     The frame is drawn outside the box, so the digits stay in their column. */
  padding: 0 3px;
  margin: 0 -3px;
  box-shadow: 0 0 0 1px var(--ink);
  font-weight: 700;
}
/* ---------- logo lockup, drawn on the pixel grid ----------
   The sign is built from boxes in whole pixels (three fine lines, three gaps, one bar);
   its height is the cap height of the wordmark and both stand on one baseline.
   --cap = 3 x --l + 3 x --g + --b. */
.logo {
  --cap: 21px;
  --l: 2px;
  --g: 3px;
  --b: 6px;
  --w1: 10px;
  --w2: 14px;
  --w3: 19px;
  --w4: 22px;
  --gap: 8px;
  display: inline-flex;
  align-items: flex-end;
  gap: var(--gap);
  padding: 2px 0 1px;
  vertical-align: top;
  color: var(--ink);
}
.logo-m {
  --cap: 25px;
  --g: 4px;
  --b: 7px;
  --w1: 11px;
  --w2: 17px;
  --w3: 22px;
  --w4: 26px;
  --gap: 10px;
}
/* also the logo in the header strip of the sign-in family */
.logo-l,
.login-head .logo {
  --cap: 30px;
  --g: 5px;
  --b: 9px;
  --w1: 14px;
  --w2: 21px;
  --w3: 27px;
  --w4: 32px;
  --gap: 12px;
  padding: 2px 0;
}
.logo-sign {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: var(--w4);
  height: var(--cap);
}
.logo-sign i {
  display: block;
  height: var(--l);
  margin-bottom: var(--g);
  background: currentColor;
}
.logo-sign i:nth-child(1) {
  width: var(--w1);
}
.logo-sign i:nth-child(2) {
  width: var(--w2);
}
.logo-sign i:nth-child(3) {
  width: var(--w3);
}
.logo-sign b {
  display: block;
  width: 100%;
  height: var(--b);
  background: var(--brand);
}
.logo-word {
  flex: none;
  display: block;
  width: auto;
  height: calc(var(--cap) * 1.16418); /* 780 / 670: ascender and overshoot included */
  margin: calc(var(--cap) * -0.1194) 0 calc(var(--cap) * -0.04478);
}
.on-ink {
  --brand: var(--brand-light);
  background: var(--ink);
  color: var(--paper);
}
.on-ink .logo {
  color: var(--paper);
}

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control);
  padding: 0 var(--s5);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--sheet);
  font-size: var(--fs-control);
  font-weight: var(--w-semi);
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover,
.btn.is-hover {
  background: var(--ink-hover);
}
.btn[disabled] {
  background: var(--shade);
  border: 1px dashed var(--ink-2);
  color: var(--ink-2);
  cursor: not-allowed;
}
.btn-2 {
  min-height: var(--control-2);
  padding: 0 18px;
  background: var(--field);
  color: var(--ink);
  font-size: var(--fs-m);
}
.btn-2:hover,
.btn-2.is-hover {
  background: var(--paper);
  box-shadow: inset 0 -2px 0 var(--ink);
}
.btn-quiet {
  display: inline-flex;
  align-items: center;
  min-height: var(--control);
  padding: 0 6px;
  border: 0;
  background: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-quiet:hover,
.btn-quiet.is-hover {
  text-decoration-thickness: 2px;
}
.btn-quiet[disabled] {
  color: var(--ink-2);
  text-decoration: none;
  cursor: not-allowed;
}
.linkbtn {
  border: 0;
  padding: 0;
  background: none;
  font-size: var(--fs-s);
  font-weight: var(--w-semi);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.linkbtn:hover {
  text-decoration-thickness: 2px;
}
.linkbtn[disabled] {
  color: var(--ink-2);
  text-decoration: none;
  cursor: not-allowed;
}

/* ---------- status marks and labels: shape plus word, never colour alone ---------- */
.st {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.st svg {
  flex: none;
  width: 12px;
  height: 12px;
}
.st-bereit {
  color: var(--green);
  font-weight: var(--w-semi);
}
.st-pruefen {
  color: var(--ochre);
  font-weight: var(--w-semi);
}
.st-blockiert {
  color: var(--red);
  font-weight: var(--w-bold);
}
/* A created file is done: the green of bereit, with its own sign. */
.st-exportiert,
.st-ok {
  color: var(--green);
}
.st-excluded {
  color: var(--ink-2);
}
.st-sm {
  font-size: var(--fs-s);
  font-weight: var(--w-regular);
  gap: 6px;
}
.lab {
  display: inline-block;
  min-width: 62px;
  padding: 1px 7px 2px;
  border: 1.5px solid;
  border-radius: 1px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 16px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.lab-fehler {
  background: var(--red);
  border-color: var(--red);
  color: var(--sheet);
}
.lab-hinweis {
  border-color: var(--ochre);
  color: var(--ochre);
}

/* ---------- notices: neutral note, Hinweis, Fehler ---------- */
.notice {
  padding: 2px 0 2px var(--s4);
  border-left: 3px solid var(--ink);
  max-width: 46em;
}
.notice strong {
  font-weight: var(--w-bold);
}
.notice-flag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s1) 14px;
  align-items: baseline;
  max-width: 46em;
  padding: 10px 14px 11px;
  border-left: 6px double var(--ochre);
}
.notice-flag .lab {
  align-self: start;
  margin-top: 2px;
}
.notice-flag small {
  display: block;
  font-size: var(--fs-s);
  font-weight: var(--w-regular);
}
.notice-fehler {
  border-left: 6px solid var(--red);
  background: var(--red-tint);
  font-weight: var(--w-semi);
}

/* ---------- forms ---------- */
/* `.field-label`: the label of a field that is not a single input (the file field) */
.field label,
.field .field-label,
.survey-roles .field-label {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fs-xs);
  font-weight: var(--w-semi);
}
.field label span {
  font-weight: var(--w-regular);
  color: var(--ink-2);
}
.input {
  display: block;
  width: 100%;
  height: var(--control);
  padding: 0 var(--s3);
  border: 1px solid var(--ink-2);
  border-bottom: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  font: 500 var(--fs-l) / 1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.02em;
}
.input-text {
  font-size: var(--fs-control);
  letter-spacing: 0;
}
/* A text box takes the rows it is given (and grows by hand), never the height of one line. */
textarea.input {
  height: auto;
  min-height: calc(3 * var(--control));
  padding: var(--s2) var(--s3);
  line-height: 1.5;
  resize: vertical;
}
.input[disabled],
.input[readonly] {
  border: 1px dashed var(--ink-2);
  background: var(--shade);
  color: var(--ink-2);
  cursor: not-allowed;
}
.input.is-error {
  border: 2px solid var(--red);
}
.field-error {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: 6px;
  font-size: var(--fs-s);
  font-weight: var(--w-semi);
  color: var(--red);
}
.field-error svg {
  flex: none;
  width: 12px;
  height: 12px;
}
.field-hint {
  margin-top: 6px;
  font-size: var(--fs-s);
  color: var(--ink-2);
}
/* file field: a zone to drop a file on; the real input covers it, so keyboard and screen
   reader use the input itself */
.field .dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s1);
  margin: 0;
  padding: var(--s6) var(--s4);
  border: 1px dashed var(--ink-2);
  border-bottom: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--field);
  font-size: var(--fs-control);
  font-weight: var(--w-regular);
  text-align: center;
  cursor: pointer;
}
.field .dropzone:hover,
.field .dropzone.is-active {
  border-style: solid;
  background: var(--paper);
}
.field .dropzone:focus-within {
  outline: var(--r-focus) solid var(--ink);
  outline-offset: 2px;
}
.field .dropzone.is-error {
  border: 2px solid var(--red);
}
.field .dropzone .dropzone-title {
  font-weight: var(--w-semi);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.field .dropzone .dropzone-hint {
  font-size: var(--fs-s);
}
.dropzone input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
/* the upload's files (TOUR-247): a zone drawn like the drop zone holds the button that opens
   the file field (its label) and takes dropped files (`is-active` while they are held over
   it); the chosen files are listed below */
.picker-zone {
  display: grid;
  justify-items: center;
  gap: var(--s2);
  padding: var(--s6) var(--s4);
  border: 1px dashed var(--ink-2);
  border-bottom: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--field);
  font-size: var(--fs-control);
  text-align: center;
}
.picker-zone.is-active {
  border-style: solid;
  background: var(--paper);
}
/* the file field itself is visually hidden by app.js: its focus shows on the zone */
.picker input.vh:focus-visible + .picker-zone {
  outline: var(--r-focus) solid var(--ink);
  outline-offset: 2px;
}
.picker-zone .picker-zone-title {
  font-weight: var(--w-semi);
}
.picker .picker-zone label.btn {
  display: inline-flex;
  margin-bottom: 0;
  font-size: var(--fs-control);
}
.picker [data-chosen] {
  margin-top: var(--s3);
}
/* a list that is opened on demand; its summary is drawn with `.more` of the sign-in pages */
.fold {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: var(--r-hair) solid var(--rule-soft);
}
.fold[open] summary {
  margin-bottom: var(--s2);
}
/* checkbox: an 18 px box; the label is the hit area */
.cb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 44px;
  min-height: var(--row);
  cursor: pointer;
}
.cb input {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: var(--field);
  cursor: pointer;
  display: grid;
  place-content: center;
}
.cb input:checked {
  background: var(--ink);
}
.cb input[disabled] {
  border: 1px dashed var(--ink-2);
  background: var(--shade);
  cursor: not-allowed;
}
/* The tick is drawn, not an image: nothing to load, and no embedded image under the
   app's content policy. */
.cb input:checked::before {
  content: "";
  width: 5px;
  height: 10px;
  border: solid var(--sheet);
  border-width: 0 2.4px 2.4px 0;
  transform: translateY(-1px) rotate(45deg);
}
/* radio: the same box, round, with a dot */
.cb input[type="radio"] {
  border-radius: 50%;
}
.cb input[type="radio"]:checked {
  background: var(--field);
}
.cb input[type="radio"]:checked::before {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  transform: none;
}
.cb-text {
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--s3);
  min-height: var(--control-2);
  padding: 11px 0;
}
.cb-text input {
  margin-top: 2px;
}
.hit {
  display: inline-block;
  width: 44px;
  outline: 1px dotted var(--ink);
}
.cb-text b {
  font-weight: var(--w-semi);
}

/* ---------- app shell: a full-width head strip, then the page ---------- */
.head {
  position: relative;
  padding: var(--s4) var(--gutter) 0;
  border-top: var(--r-head) solid var(--ink);
  border-bottom: var(--r-hair) solid var(--ink);
  background: var(--paper);
}
.head-top {
  display: flex;
  align-items: baseline;
  gap: 22px;
}
.brand {
  align-self: center;
  text-decoration: none;
}
.head-kanzlei {
  padding-left: 22px;
  border-left: 1px solid var(--rule);
  font-style: italic;
  font-size: var(--fs-control);
}
.head-user {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: var(--fs-s);
}
.head-user .trial {
  padding-left: 18px;
  border-left: 1px solid var(--rule);
  color: var(--ink-2);
}
.nav {
  display: flex;
  gap: 30px;
  margin-top: var(--s3);
}
.nav a {
  display: block;
  padding: 9px 0;
  margin-bottom: -1px;
  border-bottom: var(--r-head) solid transparent;
  text-decoration: none;
}
.nav a:hover {
  border-bottom-color: var(--rule);
}
.nav a[aria-current] {
  border-bottom-color: var(--ink);
  font-weight: var(--w-bold);
}
.body {
  min-height: 80vh;
  padding: 28px var(--gutter) 88px;
}
.pagehead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s5);
  min-height: var(--control);
  margin-bottom: 26px;
}
.crumbs a {
  text-decoration: none;
}
.crumbs a:hover {
  text-decoration: underline;
}
.crumbs .sep {
  margin: 0 7px;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin-top: var(--s1);
  font-size: var(--fs-ui);
  color: var(--ink-2);
}
.meta span + span::before {
  content: "·";
  margin: 0 9px;
}
.meta b {
  font-weight: var(--w-semi);
  color: var(--ink);
}
h2.sect {
  font-size: var(--fs-h2);
  font-weight: var(--w-bold);
  line-height: 1.25;
}
.secthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding-bottom: 6px;
  border-bottom: var(--r-rule) solid var(--ink);
}
.secthead .quiet {
  font-size: var(--fs-table);
}

/* The account's Guthaben at the top right of a page (TOUR-357): the line never wraps or
   shrinks, so a large number takes room from what stands beside it and moves nothing else. On
   a narrow screen it stands below that at every number. */
.headrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s1) var(--s5);
}
@media (max-width: 52em) {
  .headrow,
  .ov-pagehead,
  .ov-pagehead .ov-cta {
    flex-wrap: wrap;
  }
}
.credit-line {
  flex: none;
  font-size: var(--fs-l);
  font-weight: var(--w-semi);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.credit-line:hover {
  text-decoration: underline;
}

/* ---------- ledger tables ---------- */
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-table);
}
.ledger th {
  height: var(--row);
  padding: 0 10px;
  border-bottom: var(--r-hair) solid var(--ink);
  font-size: var(--fs-th);
  font-weight: var(--w-bold);
  text-align: left;
  white-space: nowrap;
}
.ledger th.num {
  text-align: right;
}
.ledger td {
  height: var(--row);
  padding: 0 10px;
  border-bottom: var(--r-hair) solid var(--rule-soft);
  vertical-align: middle;
}
/* the header cell of a body row reads like the cells beside it */
.ledger tbody th {
  border-bottom-color: var(--rule-soft);
  font-size: inherit;
  font-weight: var(--w-regular);
  white-space: normal;
}
/* a cell that holds a short list keeps its lines off the rules */
.ledger tbody ul {
  padding: var(--s2) 0;
}
.ledger tbody tr:hover > *,
.ledger tbody tr.is-hover > * {
  background: var(--paper);
}
.ledger.plain tbody tr:hover > *,
.ledger tbody tr.pad:hover > * {
  background: none;
}
/* column rules: the amount block is bracketed by a double ink rule */
.ledger .cr {
  border-left: var(--r-hair) solid var(--rule-soft);
}
.ledger .cr-first {
  border-left: 3px double var(--line);
}
.ledger .cr-end {
  border-right: 3px double var(--line);
}
.ledger tfoot td,
.ledger tbody.sums td {
  height: 44px;
  border-top: var(--r-hair) solid var(--ink);
  border-bottom: 0;
  font-weight: var(--w-bold);
}
/* Abschlussstrich: the double closing rule under every final sum */
.ledger tfoot td.num,
.ledger tbody.sums td.num,
.closing {
  border-bottom: var(--r-double) double var(--line);
}
.ledger tfoot td.num,
.ledger tbody.sums td.num {
  font-size: var(--fs-ui);
}
.ledger tr.five > * {
  border-bottom-color: var(--rule-five);
}
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s2);
  font-size: var(--fs-table);
}
.pager nav {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.empty {
  padding: var(--s6) var(--s4);
  border-bottom: var(--r-hair) solid var(--rule-soft);
  text-align: center;
}
.empty strong {
  display: block;
  font-size: var(--fs-l);
  font-weight: var(--w-bold);
}
.empty p {
  margin-top: var(--s1);
  color: var(--ink-2);
}

/* ---------- Übersicht ---------- */
/* Neuigkeiten beside the user in the header: a bell, the word and how many are new. */
.head-news {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--control-2);
  color: var(--ink);
  text-decoration: none;
}
.head-news svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.head-news:hover,
.head-news[aria-current] {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.head-badge {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--sheet);
  font-size: var(--fs-s);
  font-weight: var(--w-semi);
  line-height: 20px;
  text-align: center;
}
.ov-cta {
  display: flex;
  align-items: center;
  gap: var(--s4);
  font-size: var(--fs-table);
  color: var(--ink-2);
}
.ov-top {
  margin-bottom: 56px;
}
.ov-headline {
  font-size: var(--fs-headline);
  font-weight: var(--w-semi);
  line-height: 1.16;
  letter-spacing: -0.012em;
}
/* The month in figures (TOUR-245, owner's review of 25 Oct 2026): what is missing, to clear
   up, open and in files, each split by platform, and the Vorgänge without a date; a tile filters
   the table. Facts only: no tile says a month is done (D-079). */
.ov-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s3);
  max-width: 72rem;
  margin-top: 24px;
}
.fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s3) var(--s3) 10px;
  border: 1px solid var(--rule-soft);
  border-top: 3px solid currentColor;
  border-radius: 4px;
  background: var(--field);
  color: var(--ink-2);
  text-decoration: none;
}
.fact b {
  color: var(--ink);
  font-size: 30px;
  font-weight: var(--w-semi);
  line-height: 1.1;
}
.fact span {
  font-size: var(--fs-s);
  font-weight: var(--w-semi);
}
.fact em {
  font-size: var(--fs-xs);
  font-style: normal;
  color: var(--ink-2);
}
.fact-kein-bericht {
  border-top-style: dashed;
}
.fact-zu-klaeren {
  color: var(--red);
}
.fact-offen {
  color: var(--brand);
}
.fact-in-dateien {
  color: var(--green);
}
.fact-ohne-datum {
  color: var(--ochre);
}
/* One background for every tile, whatever its count (owner's review of 26 Oct 2026). */
.fact.is-none b {
  color: var(--ink-2);
  font-weight: var(--w-regular);
}
a.fact:hover,
a.fact.is-chosen {
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}
/* What the figures are: what was uploaded, never whether a month is complete. */
.ov-known {
  margin-top: var(--s3);
  padding: 10px 14px;
  border-left: 3px solid var(--ink);
  background: var(--paper);
  font-size: var(--fs-ui);
}
.ov-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: var(--s3);
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.ov-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ov-legend .sw {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
}
.sw.is-filed {
  background: var(--green);
}
.sw.is-open {
  background: var(--brand);
}
.sw.is-unclear {
  background: var(--red);
}
.ov-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 16em)) auto;
  gap: var(--s2) var(--s4);
  align-items: end;
  margin: var(--s4) 0 var(--s3);
}
@media (max-width: 52em) {
  .ov-filter {
    grid-template-columns: 1fr;
  }
}
.ov-filter .cb small {
  margin-left: auto;
  padding-left: var(--s3);
  color: var(--ink-2);
}
.ov-filter-act {
  padding-bottom: 2px;
}
/* The operator's funnel (TOUR-309, a dashboard like HubSpot's): five choices in one line,
   the funnel and the channels side by side, then two heatmaps. Drawn in SVG by the server;
   the five shades of the brand colour stand for the stages, darkest first. */
.funnel-filter {
  grid-template-columns: repeat(5, minmax(0, 12em)) auto;
}
.funnel-dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s4);
  margin: var(--s4) 0;
}
@media (max-width: 52em) {
  .funnel-filter,
  .funnel-dash {
    grid-template-columns: 1fr;
  }
}
.funnel-panel {
  border: 1px solid var(--edge);
  background: var(--field);
  padding: var(--s3) var(--s4);
}
.funnel-panel-title {
  margin: 0 0 var(--s3);
  font-size: var(--fs-h3);
}
.funnel-shape {
  display: block;
  width: 100%;
  max-width: 34em;
  height: auto;
}
.fs1 {
  fill: #0b4f56;
  background: #0b4f56;
}
.fs2 {
  fill: #2f7a82;
  background: #2f7a82;
}
.fs3 {
  fill: #5fb3bc;
  background: #5fb3bc;
}
.fs4 {
  fill: #9fd0d5;
  background: #9fd0d5;
}
.fs5 {
  fill: #cfe7e9;
  background: #cfe7e9;
}
.funnel-label {
  fill: var(--ink-2);
  font: var(--w-regular) 13px var(--serif);
}
.funnel-figure {
  fill: var(--ink);
  font: var(--w-semi) 15px var(--serif);
}
.funnel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin: 0 0 var(--s3);
  padding: 0;
  list-style: none;
  font-size: var(--fs-th);
  color: var(--ink-2);
}
.swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 1px solid var(--edge);
}
.channel-bars {
  margin: 0;
  padding: 0;
  list-style: none;
}
.channel-bars li {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr) 3em;
  gap: var(--s2);
  align-items: center;
  min-height: 30px;
  font-size: var(--fs-table);
}
.channel-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-bar {
  display: block;
  width: 100%;
  height: 14px;
}
.heat-table td,
.heat-table th {
  white-space: nowrap;
}
/* A heatmap cell: ink on every shade (the darkest, #5fb3bc, is 7.1:1 against ink). */
.heat-0 {
  color: var(--ink-2);
}
.heat-1 {
  background: #edf6f7;
}
.heat-2 {
  background: #d7ecee;
}
.heat-3 {
  background: #b9dde0;
}
.heat-4 {
  background: #8fc8ce;
}
.heat-5 {
  background: #5fb3bc;
}
/* Wide tables do not fit a phone: they scroll sideways within themselves. */
.funnel-wrap {
  overflow-x: auto;
  overflow-y: hidden;
}
/* One narrow line per client; a client of several platforms opens to one line each. */
.ov-table td {
  height: 34px;
  white-space: nowrap;
}
.ov-table td.nr {
  color: var(--ink-2);
}
.ov-table td.name {
  font-weight: var(--w-semi);
}
.ov-table td.pf {
  font-size: var(--fs-s);
  color: var(--ink-2);
  white-space: normal;
}
.ov-table th.mo,
.ov-table td.mo {
  width: 128px;
  padding: 3px 4px;
  border-left: var(--r-hair) solid var(--rule-soft);
  text-align: center;
}
.ov-table td.tw {
  width: 28px;
  padding: 0 0 0 8px;
}
/* The client's next VAT return (TOUR-259, D-085): the due date leads to the file of its
   period; below it the period and its Vorgänge, and the holidays not counted. */
.ov-table th.vat,
.ov-table td.vat {
  width: 168px;
  padding: 3px 8px;
  border-left: var(--r-hair) solid var(--rule-soft);
}
.ov-table td.vat small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.fact-ustva {
  color: var(--ink);
}
.ov-client.is-toggle .ov-main {
  cursor: pointer;
}
.ov-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--ink);
}
.ov-toggle svg {
  width: 12px;
  height: 12px;
}
.ov-client.is-open .ov-toggle svg {
  transform: rotate(90deg);
}
.ov-client.is-open td {
  background: var(--paper);
}
.ov-client.is-open .ov-main td {
  border-bottom-color: transparent;
}
.ov-platform td {
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
  vertical-align: top;
}
.ov-platform.is-last td {
  border-bottom: var(--r-rule) solid var(--ink);
}
.ov-platform td.pl {
  white-space: normal;
}
.ov-platform td.pl small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
/* Under a platform: its Vorgänge without the date it is booked by (a Hinweis). */
.pf-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--ochre);
  white-space: normal;
}
.pf-hint b {
  font-weight: var(--w-semi);
}
.pf-hint a {
  color: var(--ochre);
  font-weight: var(--w-semi);
}
.pf-hint svg,
.pf-mark svg {
  width: 11px;
  height: 11px;
  flex: none;
}
.pf-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--s2);
  padding: 0 6px;
  border: 1px solid var(--ochre);
  border-radius: 3px;
  background: var(--ochre-tint);
  color: var(--ochre);
  font-size: var(--fs-xs);
  font-weight: var(--w-semi);
}
/* A month: a bar with its numbers inside, each part as wide as its share. */
.mbar {
  display: flex;
  height: 22px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--shade);
  font-size: var(--fs-tag);
  font-weight: var(--w-semi);
  line-height: 22px;
}
.mbar-part {
  display: block;
  min-width: 22px;
  padding: 0 3px;
  color: var(--sheet);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
a.mbar-part:hover,
a.mbar-part:focus-visible {
  filter: brightness(0.82);
}
.mbar-part.is-filed {
  background: var(--green);
}
.mbar-part.is-open {
  background: var(--brand);
}
.mbar-part.is-unclear {
  background: var(--red);
}
.mbar-part.is-excluded {
  background: var(--edge);
  color: var(--ink);
}
.mbar-part.g1 {
  flex-grow: 1;
}
.mbar-part.g2 {
  flex-grow: 2;
}
.mbar-part.g3 {
  flex-grow: 3;
}
.mbar-part.g4 {
  flex-grow: 4;
}
.mbar-part.g5 {
  flex-grow: 5;
}
.mbar-part.g6 {
  flex-grow: 6;
}
.mbar-part.g7 {
  flex-grow: 7;
}
.mbar-part.g8 {
  flex-grow: 8;
}
.mbar-part.g9 {
  flex-grow: 9;
}
.mbar-part.g10 {
  flex-grow: 10;
}
.mbar-part.g11 {
  flex-grow: 11;
}
.mbar-part.g12 {
  flex-grow: 12;
}
.mbar-part.g13 {
  flex-grow: 13;
}
.mbar-part.g14 {
  flex-grow: 14;
}
.mbar-part.g15 {
  flex-grow: 15;
}
.mbar-part.g16 {
  flex-grow: 16;
}
.mbar-part.g17 {
  flex-grow: 17;
}
.mbar-part.g18 {
  flex-grow: 18;
}
.mbar-part.g19 {
  flex-grow: 19;
}
.mbar-part.g20 {
  flex-grow: 20;
}
.mbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  background: var(--field);
  color: var(--ink-2);
  font-size: var(--fs-tag);
  font-weight: var(--w-semi);
}
.mbox.is-missing {
  border: 2px dashed var(--ink-2);
  background: var(--shade);
}
.mbox.is-noted {
  background: var(--sheet);
}
.mdash {
  color: var(--rule);
}
/* "fehlt" and "keine" of one platform: a small menu with what can be done there. */
.mmenu {
  position: relative;
}
.mmenu summary {
  list-style: none;
  cursor: pointer;
}
.mmenu summary::-webkit-details-marker {
  display: none;
}
.mmenu summary::after {
  content: "▾";
  font-size: 10px;
}
.mmenu-list {
  position: absolute;
  z-index: 4;
  top: 28px;
  right: 0;
  min-width: 250px;
  padding: 6px 0;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: var(--field);
  box-shadow: 0 4px 14px rgb(0 0 0 / 12%);
  text-align: left;
  white-space: normal;
}
.mmenu-list small {
  display: block;
  padding: 4px 14px 6px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.mmenu-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-s);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mmenu-item:hover {
  background: var(--paper);
}
.mmenu-item.is-off,
.mmenu-item:disabled {
  color: var(--ink-2);
  cursor: not-allowed;
}
.ov-table tr.pad td {
  height: 34px;
  border-bottom-color: transparent;
}
.ov-lead {
  margin-top: var(--s3);
  font-size: var(--fs-l);
}
/* The Neuigkeiten below the table, the page's whole width. */
.ov-news {
  margin-top: var(--s9);
}
.ov-news .secthead {
  padding-bottom: var(--s2);
}
/* What came since the member last opened the Übersicht: a dot before the date. */
.news-new {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--ink);
  vertical-align: 1px;
}
.entries .is-new strong {
  font-weight: var(--w-bold);
}
.entries .lab {
  min-width: 0;
  margin-left: 6px;
  vertical-align: 1px;
}
/* Konto, Benachrichtigungen: a row per kind, a radio button per way. */
.choices-wrap {
  margin-top: var(--s5);
  overflow-x: auto;
  overflow-y: hidden;
}
.choices td {
  text-align: center;
}
/* Benachrichtigungen: one column wide enough that a name stays on its line; groups of
   rows under a small heading, what a row covers in small type below its name. */
.notify {
  max-width: 60rem;
}
/* what holds for every row, above the table: short lines in a frame */
.notify-facts {
  max-width: 46rem;
  margin: var(--s4) 0 0;
  padding: var(--s3) var(--s4) var(--s3) var(--s6);
  border: var(--r-hair) solid var(--rule);
  border-left: 3px solid var(--ink);
  background: var(--sheet);
  list-style: disc;
  font-size: var(--fs-s);
}
/* feedback (TOUR-311), the operator's page: the text as written, the screenshots in a column */
.feedback-text {
  max-width: 46rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.feedback-images {
  display: grid;
  gap: var(--s4);
  max-width: 60rem;
  list-style: none;
  padding: 0;
}
.feedback-images img {
  max-width: 100%;
  height: auto;
  border: var(--r-hair) solid var(--rule);
}
/* feedback rounds (TOUR-312): the card on the Übersicht, the questions, the operator's lists */
.survey-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-block: var(--s4);
  padding: var(--s3) var(--s4);
  border: var(--r-hair) solid var(--rule);
}
.survey-card p {
  margin: 0;
}
.survey-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
.survey-line {
  margin-block: var(--s2);
}
.survey-progress {
  margin-block: var(--s3);
}
.survey-bar {
  display: block;
  width: 100%;
  margin-top: var(--s1);
}
.survey-intro {
  white-space: pre-wrap;
}
.survey-question {
  margin-block: var(--s4);
}
.survey-scale {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.survey-scale .cb {
  flex-direction: column;
  gap: var(--s1);
  width: auto;
}
.survey-roles {
  margin-top: var(--s3);
}
.survey-role-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s5);
}
.survey-link,
.survey-context {
  margin: 0 0 var(--s2);
}
.survey-result {
  max-width: 36rem;
}
.survey-items {
  margin: 0 0 var(--s3);
  padding-left: var(--s4);
}
.survey-items li {
  padding-block: var(--s2);
  border-bottom: var(--r-hair) solid var(--rule);
}
.survey-items li > span:first-of-type {
  display: inline-block;
  max-width: 60%;
  overflow-wrap: anywhere;
}
.survey-item-actions {
  float: right;
  display: inline-flex;
  gap: var(--s2);
}
.survey-result-head {
  margin-top: var(--s4);
}
.survey-answer {
  margin-block: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: var(--r-hair) solid var(--rule);
}
.survey-filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s3);
  align-items: end;
}
.notify-facts li + li {
  margin-top: var(--s1);
}
.notify-table tbody th {
  font-weight: var(--w-semi);
}
.notify-table tbody th small {
  display: block;
  color: var(--ink-2);
  font-size: var(--fs-s);
  font-weight: var(--w-regular);
}
.notify-table tr.notify-group th {
  padding-top: var(--s5);
  border-bottom: var(--r-hair) solid var(--ink);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: var(--w-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.notify-table tr.is-off th,
.notify-table tr.is-off td {
  color: var(--ink-2);
}
.choices input {
  width: 22px;
  height: 22px;
  margin: 11px;
  accent-color: var(--ink);
}
.entries li {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto; /* date and time of the item */
  gap: var(--s1) 14px;
  align-items: start;
  padding: var(--s3) 0 13px;
  border-bottom: var(--r-hair) solid var(--rule-soft);
  font-size: var(--fs-ui);
  line-height: 1.4;
}
.entries .date {
  color: var(--ink-2);
}
.entries li.pad {
  min-height: 66px;
  border-bottom-color: transparent;
}
/* The filter bar of the news: kinds and clients to tick, a range of days, one button. */
.news-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
}
.date-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-table);
}
/* Framed like a chip beside it (owner's review of 22 Oct 2026); a chosen day like a chosen
   chip. The calendar the browser opens takes the ink as its accent where it can. */
.date-filter input {
  min-height: var(--control-2);
  padding: 2px var(--s3);
  border: var(--r-hair) solid var(--rule);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  accent-color: var(--ink);
}
.date-filter input.is-set {
  border-color: var(--ink);
  font-weight: var(--w-semi);
}
.entries strong {
  font-weight: var(--w-semi);
}
.entries .sub {
  display: block;
  font-size: var(--fs-table);
  color: var(--ink-2);
}
.entries a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-2);
  margin: -11px 0;
}
.firstrun {
  max-width: 760px;
  margin-top: var(--s6);
  border-top: var(--r-rule) solid var(--ink);
  counter-reset: step;
}
.firstrun li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  padding: 14px 0 var(--s4);
  border-bottom: var(--r-hair) solid var(--rule-soft);
}
.firstrun li::before {
  counter-increment: step;
  content: counter(step);
  font-size: var(--fs-h1-m);
  font-weight: 300;
  line-height: 1;
}
.firstrun h3 {
  font-size: var(--fs-h3-l);
  font-weight: var(--w-bold);
  line-height: 1.25;
}
.firstrun p {
  margin-top: 2px;
  color: var(--ink-2);
}
.firstrun-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) 20px;
  margin-top: var(--s5);
}
.firstrun-act small {
  font-size: var(--fs-s);
  color: var(--ink-2);
}
/* In the Prüfung of an example run: what the example is there to show, in order. */
.example-tasks ol {
  margin-top: var(--s2);
  padding-left: var(--s5);
  list-style: decimal outside;
}
.example-tasks li + li {
  margin-top: var(--s1);
}

/* ---------- Prüfung ---------- */
/* The Prüfung: what the page does, small; the client as the title (owner's review of
   21 Oct 2026). */
.rv-kicker {
  margin-top: var(--s3);
}
.rv-title {
  margin-top: var(--s1);
  font-size: var(--fs-title);
  font-weight: var(--w-bold);
  line-height: 1.15;
}
/* Creating the file closes the page, after everything it is made of. */
.verdict-end {
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: var(--r-rule) solid var(--ink);
}
.verdict-end form,
.verdict-end > .verdict-act {
  margin-top: var(--s4);
}
.verdict {
  margin: 28px 0 var(--s8);
}
.verdict-kind {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--fs-l);
  font-weight: var(--w-bold);
}
.verdict-kind.is-fehler {
  color: var(--red);
}
.verdict-kind .lab {
  padding: 3px 10px var(--s1);
}
.verdict-kind .st {
  font-weight: var(--w-bold);
}
.verdict-kind .st svg {
  width: 14px;
  height: 14px;
}
.verdict-line {
  margin-top: var(--s3);
  max-width: 28em;
  font-size: var(--fs-verdict);
  font-weight: var(--w-semi);
  line-height: 1.1;
  letter-spacing: -0.018em;
}
.verdict-help {
  margin-top: var(--s4);
  max-width: 40em;
  font-size: var(--fs-l);
}
.verdict-confirm {
  max-width: 44em;
  margin-top: var(--s4);
  padding-top: var(--s2);
  border-top: var(--r-hair) solid var(--rule);
}
.verdict-confirm .field-hint {
  margin: -6px 0 0 30px;
}
.verdict-act {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: var(--s5);
}
.verdict-act .why {
  font-size: var(--fs-ui);
  line-height: 1.4;
}
.verdict-act .why b {
  font-weight: var(--w-bold);
}
.flags {
  margin-bottom: var(--s8);
}
.flags li {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 52px;
  padding: var(--s1) 0;
  border-bottom: var(--r-hair) solid var(--rule-soft);
  font-size: var(--fs-control);
  line-height: 1.35;
}
.flags li.is-fehler .text {
  font-weight: var(--w-semi);
}
.flags .acts {
  display: flex;
  align-items: center;
  gap: var(--s4);
  font-size: var(--fs-table);
}
.flags .acts a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-2);
  white-space: nowrap;
}

/* ---------- Prüfung: the upload in figures, its Hinweise, and "Zu klären" ---------- */
.totals {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: var(--s5);
  border-top: var(--r-rule) solid var(--ink);
  border-bottom: var(--r-hair) solid var(--ink);
}
.totals > div {
  padding: var(--s3) var(--s4) var(--s3) 0;
}
.totals > div + div {
  padding-left: var(--s4);
  border-left: var(--r-hair) solid var(--rule);
}
.totals dt {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.totals dd {
  margin: var(--s1) 0 0;
  font-size: var(--fs-title);
  font-weight: var(--w-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.totals dd small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-table);
  font-weight: var(--w-regular);
  color: var(--ink-2);
}
.totals .st {
  margin-right: 6px;
  vertical-align: 3px;
}
.totals .is-bereit dd {
  color: var(--green);
}
.totals .is-blockiert dd {
  color: var(--red);
}
.totals .is-pruefen dd {
  color: var(--ochre);
}
/* the Abstimmung while bookings with a Fehler are left out of it */
/* The file page as a receipt: what the file holds, one fact per row. */
.receipt {
  max-width: 48rem;
}
.receipt th,
.receipt td {
  vertical-align: top;
  padding-block: var(--s2);
}
.receipt th {
  width: 32%;
  text-align: left;
  font-weight: var(--w-regular);
}
.receipt td small,
.receipt-part {
  display: block;
}
.receipt td small {
  color: var(--ink-2);
}
.provisional {
  margin: var(--s2) 0 var(--s3);
  font-size: var(--fs-table);
  color: var(--ink-2);
}
.provisional b {
  color: var(--red);
  font-weight: var(--w-semi);
}
.hint-line {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--s4);
  margin-top: var(--s3);
  font-size: var(--fs-table);
  color: var(--ink-2);
}
.hint-line b {
  color: var(--ochre);
  font-weight: var(--w-semi);
}
/* Prüfung, bookings tab: what to show (chips, any number of Befunde at once), the Befunde of a
   row as tags, a file row that could not be read, and empty rows that keep the table's height
   (owner's review of 21 Oct 2026) */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin: var(--s3) 0;
  font-size: var(--fs-table);
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-2);
  padding: 2px var(--s3);
  border: var(--r-hair) solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  text-decoration: none;
}
.chip[aria-current] {
  border-color: var(--ink);
  font-weight: var(--w-semi);
}
.tag {
  display: inline-block;
  margin: 2px var(--s1) 2px 0;
  padding: 0 7px;
  border: var(--r-hair) solid var(--red);
  border-radius: 1px;
  color: var(--red);
  font-size: var(--fs-table);
  text-decoration: none;
  white-space: nowrap;
}
.tag:hover {
  text-decoration: underline;
}
.tag.tag-hinweis {
  border-color: var(--ochre);
  color: var(--ochre);
}
/* a finding about the client: one line above the tabs, as wide and as high as a row */
.client-lines {
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}
.client-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) 14px;
  margin-bottom: 2px;
  padding: 6px 10px;
  background: var(--ochre-tint);
  font-size: var(--fs-table);
}
.client-line.is-fehler {
  background: var(--red-tint);
}
.client-line .what {
  flex: 1 1 auto;
}
.client-line strong {
  font-weight: var(--w-semi);
}
/* the way to fix a finding of the client, in its line above the tabs: never broken in two */
.row-way {
  white-space: nowrap;
}
.tags .more {
  font-size: var(--fs-table);
  color: var(--ink-2);
  white-space: nowrap;
}
/* a file row that could not be read: red like a row with a Fehler, its gap in italics */
.bookings tr.r-unread th {
  font-weight: var(--w-regular);
}
.bookings td.unread {
  color: var(--red);
  font-style: italic;
}
.bookings tr.pad td,
.bookings tbody.pads td {
  height: 46px;
  border-bottom-color: transparent;
}
/* a value a row not read lacks; its tag says what it is */
.bookings .gap,
.kb-strip .gap {
  color: var(--red);
  font-weight: var(--w-semi);
}
.help-tag {
  margin-bottom: var(--s1);
}
.help-msgs li:target {
  outline: var(--r-rule) solid var(--ink);
  outline-offset: 6px;
}
.bookings tr.empty-row td {
  height: 46px;
  color: var(--ink-2);
}
/* "Zu klären": a chip that opens its Befunde to tick, floating over what follows, so opening
   it moves nothing */
.chip-menu {
  position: relative;
}
.chip-menu > summary {
  cursor: pointer;
  list-style: none;
}
.chip-menu > summary::-webkit-details-marker {
  display: none;
}
.chip-menu > summary::after {
  content: "▾";
  margin-left: var(--s2);
}
.chip-panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  min-width: 300px;
  padding: var(--s3) var(--s4);
  border: var(--r-hair) solid var(--ink);
  background: var(--sheet);
  box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
}
.chip-panel .cb {
  display: flex;
  min-height: var(--control-2);
}
.chip-panel-act {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s3);
}
/* below a table: its pages and how many rows a page has */
.table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}
.table-foot .pager {
  flex: 1;
}
.per-page {
  margin-top: var(--s2);
  font-size: var(--fs-table);
  color: var(--ink-2);
  white-space: nowrap;
}
.per-page a {
  display: inline-flex;
  align-items: center;
  min-width: 28px;
  min-height: var(--control-2);
  justify-content: center;
}
.per-page a[aria-current] {
  font-weight: var(--w-semi);
  color: var(--ink);
  text-decoration: none;
}
/* the tabs are a section of their own: a rule below them, before the Abstimmung */
.views {
  margin-bottom: var(--s8);
  padding-bottom: var(--s6);
  border-bottom: var(--r-rule) solid var(--ink);
}
.file-lines {
  margin: var(--s2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-table);
}
.file-lines li + li {
  margin-top: var(--s1);
}
.rv-mid {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
  gap: var(--s8);
  align-items: start;
  margin-bottom: var(--s9);
}
.recon {
  font-size: var(--fs-m);
  table-layout: fixed;
}
.recon td {
  height: 38px;
}
.recon tbody tr:first-child td {
  padding-top: 6px;
  padding-bottom: 7px;
  line-height: 1.3;
}
/* the columns of the calculation: sign, item, Vorspalte, Betrag */
.recon th.op {
  width: 34px;
}
.recon th.cr-first {
  width: 112px;
}
.recon th.cr-end {
  width: 132px;
}
.recon td.op {
  padding-right: 0;
  text-align: center;
  font-size: var(--fs-l);
  font-weight: var(--w-bold);
}
.recon td.num {
  font-size: var(--fs-control);
}
.recon .opf {
  float: left;
  font-size: var(--fs-l);
  font-weight: var(--w-bold);
  line-height: 1.2;
}
.recon .expl {
  display: block;
  font-size: var(--fs-s);
  line-height: 1.25;
  color: var(--ink-2);
}
.recon tr.sub td {
  height: var(--s6);
  font-size: var(--fs-table);
  color: var(--ink-2);
}
.recon tr.sub td.num {
  font-size: var(--fs-table);
}
.recon tr.sum td {
  border-top: var(--r-hair) solid var(--ink);
  border-bottom: var(--r-hair) solid var(--ink);
  font-weight: var(--w-bold);
}
.recon tfoot td.num {
  font-size: var(--fs-l);
}
.recon tfoot td.nofoot {
  border-bottom: 0;
}
.terms {
  padding-top: 46px;
}
.terms h3 {
  font-size: var(--fs-table);
  font-weight: var(--w-bold);
}
.terms dl {
  margin-top: 6px;
}
.terms dl div {
  padding-bottom: 9px;
  font-size: var(--fs-table);
  line-height: 1.45;
}
.terms dt {
  display: inline;
  font-weight: var(--w-bold);
}
.terms dt::after {
  content: ": ";
}
.terms dd {
  display: inline;
  color: var(--ink-2);
}
.tabs {
  display: flex;
  align-items: flex-end;
  gap: 34px;
  /* Sideways only, for a narrow window. Without the second line the row may scroll up and
     down too, and the browser draws a scroll bar for the one pixel the tabs stand over
     the rule below them. */
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: var(--r-hair) solid var(--ink);
}
.tabs a {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  min-height: var(--control-2);
  padding: 10px 0 var(--s2);
  margin-bottom: -1px;
  border-bottom: var(--r-head) solid transparent;
  font-size: var(--fs-l);
  text-decoration: none;
  white-space: nowrap;
}
/* A tab the role may not open: in its place, greyed. */
.tabs .is-off {
  display: flex;
  align-items: baseline;
  min-height: var(--control-2);
  padding: 10px 0 var(--s2);
  font-size: var(--fs-l);
  white-space: nowrap;
}
.tabs a:focus-visible {
  /* The row clips what stands outside it: draw the focus ring inside the link. */
  outline-offset: calc(-1 * var(--r-focus));
}
.tabs a:hover {
  border-bottom-color: var(--rule);
}
.tabs a[aria-current] {
  border-bottom-color: var(--ink);
  font-weight: var(--w-bold);
}
.tabs .cnt {
  color: var(--ink-2);
  font-weight: var(--w-regular);
}
.tabs .tflag {
  font-size: var(--fs-th);
  font-weight: var(--w-semi);
}
.tabs .tflag.f {
  color: var(--red);
}
.tabs .tflag.h {
  color: var(--ochre);
}
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) 0;
}
.toolbar .sel {
  margin-left: auto;
  font-size: var(--fs-ui);
}
/* Prüfung: the actions for the ticked rows on one line at one height (TOUR-346) */
.toolbar form {
  display: flex;
  margin: 0;
}
.toolbar .btn {
  height: var(--control);
}
/* the row's page: the walk's pager right below the buttons, ‹ and › move without saving
   (owner's review of 3 Nov 2026) */
.walk-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s4);
  margin: var(--s5) 0 0;
}
.walk-pager .btn {
  min-width: var(--control);
  padding: 0;
  font-size: 1.4em;
}
.walk-count {
  font-size: 1.25em;
  font-weight: var(--w-semi);
}
/* Leaving rows out, a reason each (TOUR-346): choice and own words side by side, at the top
   beside its button and at every row */
.leave-all [data-reason],
.leave-reason [data-reason] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s3);
}
.leave-all .field,
.leave-reason .field {
  margin: 0;
  min-width: 14rem;
}
.leave-all > .btn {
  margin-top: var(--s3);
}
.leave-out {
  margin: var(--s5) 0;
}
.leave-out td,
.leave-out th {
  vertical-align: top;
}
.excl-reason {
  color: var(--ink-2);
  font-size: var(--fs-s);
  margin-right: var(--s2);
}
/* „Zu klären“: „Endgültig ausschließen“ opens its form in its line (TOUR-257, sketch A1) */
.open-list tr.is-open > * {
  border-bottom: 0;
}
.open-form > td {
  background: var(--shade);
  padding-block: var(--s3);
}
.exclude-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s4);
}
.exclude-form [data-reason] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s4);
}
.exclude-form .field {
  margin: 0;
  min-width: 14rem;
}
.exclude-act {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--control);
}
.open-left-head {
  margin-top: var(--s7);
}
/* filter: one segmented control */
.seg {
  display: flex;
}
.seg a,
.seg button {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  min-height: var(--control-2);
  padding: 0 var(--s4);
  border: 1px solid var(--ink-2);
  border-radius: 0;
  background: transparent;
  font-size: var(--fs-ui);
  cursor: pointer;
  white-space: nowrap;
}
.seg a + a,
.seg button + button {
  margin-left: -1px;
}
.seg a:hover,
.seg button:hover {
  background: var(--paper);
}
.seg a[aria-current="true"],
.seg button[aria-pressed="true"] {
  position: relative;
  border-color: var(--ink);
  background: var(--field);
  box-shadow: inset 0 -3px 0 var(--ink);
  font-weight: var(--w-bold);
}
.bookings th,
.bookings td {
  padding: 0 6px;
}
.bookings .amt {
  padding: 0 var(--s2);
}
.bookings th.sel,
.bookings td.sel {
  width: 44px; /* the whole cell is the label: 44 x 36 px */
  padding: 0;
}
.bookings td.pos {
  width: 34px;
  padding-left: 2px;
  color: var(--ink-2);
  text-align: right;
}
.bookings td.chk {
  padding-right: 0;
  line-height: 1.25;
}
.bookings td.chk .st {
  align-items: flex-start;
  white-space: normal;
}
.bookings td.chk .st svg {
  margin-top: 3px;
}
.bookings td.chk .why-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-s);
}
.bookings td.chk .lab {
  flex: none;
  min-width: 0;
  font-size: var(--fs-tag);
}
.bookings td.chk .linkbtn {
  min-height: var(--row);
  margin-left: 10px;
  padding: 0 6px;
}
.bookings .bad {
  display: inline-block;
  margin: 0 -5px;
  padding: 0 3px;
  border: 2px solid var(--red);
  color: var(--red);
  font-weight: var(--w-bold);
  line-height: 1.3;
}
.bookings tr.r-error > *,
.bookings tr.r-error:hover > *,
.kb-strip tr.r-error > * {
  background: var(--red-tint);
}
.bookings tr.r-error > :first-child,
.kb-strip tr.r-error > :first-child {
  box-shadow: -5px 0 0 var(--red);
}
.bookings tr.r-error td.chk {
  font-weight: var(--w-semi);
}
.bookings tr.r-warning > *,
.bookings tr.r-warning:hover > *,
.kb-strip tr.r-warning > * {
  background: var(--ochre-tint);
}
.ledger tr.r-warning > :first-child {
  box-shadow: -2px 0 0 var(--sheet), -3px 0 0 var(--ochre), -4px 0 0 var(--sheet), -5px 0 0 var(--ochre);
}
.bookings tr.r-excluded > *,
.bookings tr.r-excluded:hover > * {
  background: var(--shade);
  color: var(--ink-2);
}
.bookings tr.r-excluded .strike {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.bookings tr.r-excluded .neg {
  box-shadow: none;
  font-weight: var(--w-regular);
}
.bookings tr.is-selected > * {
  background: var(--paper);
}
.bookings tr:target > * {
  box-shadow: inset 0 2px 0 var(--ink), inset 0 -2px 0 var(--ink);
}
.bookings tfoot td.lbl,
.bookings tbody.sums td.lbl {
  white-space: nowrap;
}
.bookings tfoot .lbl small,
.bookings tbody.sums .lbl small {
  margin-left: var(--s2);
  font-size: var(--fs-th);
  font-weight: var(--w-regular);
  color: var(--ink-2);
}
.tablefoot {
  margin-top: var(--s4);
  font-size: var(--fs-s);
  color: var(--ink-2);
}

/* ---------- Kontenzuordnung ---------- */
.mp-title {
  font-size: var(--fs-title);
  font-weight: var(--w-semi);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.mp-grid {
  display: grid;
  grid-template-columns: minmax(0, 800px) minmax(0, 340px);
  justify-content: space-between;
  gap: 56px;
  align-items: start;
  margin-top: 30px;
}
.roles {
  margin-top: var(--s5);
  border-top: var(--r-rule) solid var(--ink);
}
.roles-head,
.role {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 150px 170px;
  column-gap: 20px;
}
.roles-head {
  align-items: center;
  height: 30px;
  border-bottom: var(--r-hair) solid var(--ink);
  font-size: var(--fs-th);
  font-weight: var(--w-bold);
}
.roles-head .no {
  text-align: right;
}
.roles-head .wide {
  grid-column: 3 / 5;
}
.role {
  align-items: start;
  padding: 14px 0 var(--s4);
  border-bottom: var(--r-hair) solid var(--rule-soft);
}
.role .no {
  padding-top: 1px;
  color: var(--ink-2);
  text-align: right;
}
.role h3 {
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
  line-height: 1.3;
}
.role .hint {
  margin-top: 2px;
  max-width: 34em;
  font-size: var(--fs-table);
  color: var(--ink-2);
  line-height: 1.4;
}
.role .empty-note {
  margin-top: 5px;
  font-size: var(--fs-th);
}
.role .input-bu {
  width: 96px; /* a BU-Schlüssel is short: the field is narrower than the Konto */
}
.role .field.none {
  padding-top: var(--s6);
  font-size: var(--fs-th);
  color: var(--ink-2);
}
.role.kost {
  border-bottom-color: var(--ink);
}
.role.kost .field {
  grid-column: 3 / 5;
}
.role.kost-head .what {
  grid-column: 2 / 5; /* no field beside it */
}
.mp-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}
.mp-actions .after {
  margin-left: auto;
  font-size: var(--fs-th);
  color: var(--ink-2);
}
.aside h2 {
  padding-bottom: 6px;
  border-bottom: var(--r-rule) solid var(--ink);
  font-size: var(--fs-control);
  font-weight: var(--w-bold);
}
.aside section + section {
  margin-top: 28px;
}
.aside p {
  margin-top: 9px;
  font-size: var(--fs-table);
  line-height: 1.45;
}
.aside dl {
  font-size: var(--fs-table);
}
.aside dl div {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: 6px 0;
  border-bottom: var(--r-hair) solid var(--rule);
}
.aside dt {
  color: var(--ink-2);
}
.aside dd {
  text-align: right;
}

/* ---------- Mandanten: list, form, delete ---------- */
.titlebar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s5);
}
.mp-gap {
  margin: var(--s4) 0 var(--s5);
}
.mp-grid form > .notice-flag {
  margin-bottom: var(--s5);
}
.client-table {
  margin-top: var(--s6);
}
.client-table td {
  height: var(--row-client);
}
.client-table .note {
  margin-left: var(--s3);
  font-size: var(--fs-th);
}
.client-name {
  font-weight: var(--w-bold);
}
.client-platforms,
.client-code {
  display: block;
  font-size: var(--fs-th);
  color: var(--ink-2);
}
.client-table .note .lab {
  margin-right: var(--s1);
}
.client-table td.act {
  text-align: right;
  white-space: nowrap;
}
.client-table td.act a,
.client-table td.act .is-off {
  display: inline-flex;
  align-items: center;
  min-height: var(--row-client);
  margin-left: var(--s4);
}
.client-empty {
  margin-top: var(--s6);
  border-top: var(--r-rule) solid var(--ink);
}
.client-empty .btn {
  margin-top: var(--s3);
}
.formpage {
  max-width: 46em;
}
.formpage .lead {
  margin-top: var(--s4);
  font-size: var(--fs-l);
}
.formpage form > .notice-flag,
.formpage > .notice {
  margin-top: var(--s5);
}
.formpage .field,
.formpage .check {
  margin-top: var(--s5);
}
.formpage .pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--s5);
}
.formpage .secthead {
  margin-top: var(--s7);
}
.formpage .sectnote {
  margin-top: var(--s2);
  font-size: var(--fs-table);
  color: var(--ink-2);
}
.formpage .mp-actions {
  margin-top: var(--s6);
}
/* the row's page: „Verwerfen“ and „Abbrechen“ are quiet links after the button */
.walk-actions .walk-cancel {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-2);
}
/* A whole file row as a form (Zeile ergänzen): its cells in two columns, the ones to type
   in their place among the locked ones. */
.formpage.is-wide {
  max-width: 60em;
}
.row-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--s6);
  align-items: start;
}

/* The row page (TOUR-248): a value the file has, with „Korrigieren“ beside its label; an
   open cell in its one place of the grid, a correction's reason beside its value (owner's
   review of 3 Nov 2026). Nothing stands below a field, so every row keeps one height. */
.field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s2);
}
.field-head-note {
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.row-open {
  min-width: 0;
}
.row-open.is-correction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--s3);
  align-items: start;
}
/* a label stays on one line, so a long name (Servicegebühr für Zahlungen) adds no height */
.row-open .field > label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* A value to fix (owner's review of 3 Nov 2026): the field with, at its end, the word of
   where its value comes from and ▾ for the list Original · Passend · Manuelle Eingabe
   (`app.js`, `data-value-pick`). */
.value-pick {
  position: relative;
}
.value-pick.is-listed .input {
  padding-right: 7.5rem;
}
.value-source {
  position: absolute;
  top: 50%;
  right: calc(var(--control) + var(--s1));
  transform: translateY(-50%);
  font-size: var(--fs-s);
  color: var(--ink-2);
  pointer-events: none;
}
.value-open {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--control);
  border: 0;
  border-left: 1px solid var(--rule);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-s);
  cursor: pointer;
}
.value-open:focus-visible {
  outline: var(--r-focus) solid var(--ink);
  outline-offset: -4px;
}
fieldset:disabled .value-open {
  color: var(--ink-2);
  cursor: not-allowed;
}
.value-list {
  top: 100%;
  right: auto;
  width: max-content;
  min-width: 100%;
}
.value-list .pick-option {
  white-space: nowrap;
}
/* a long reason or value ends in „…“ while the field is not being typed in */
.value-pick .input {
  text-overflow: ellipsis;
}
/* a correction's Grund: a reason of the list stands in the field read-only, drawn like a
   field to choose in, not like a locked one; a click opens the list */
.value-pick.is-listed .input[readonly] {
  border: 1px solid var(--ink-2);
  border-bottom: 2px solid var(--ink);
  background: var(--field);
  color: var(--ink);
  cursor: pointer;
}
.value-pick.is-listed .input[readonly]:placeholder-shown {
  color: var(--ink-2);
}
.value-pick.is-listed .reason-choice + .input {
  padding-right: calc(var(--control) + var(--s2));
}
/* Rows of a framed section (TOUR-263): side by side down to a phone, where every row is one
   column. A kind of row only names its columns: the Anrede alone in a short field, a full
   name in three, the address with its house number, PLZ before Ort, the telephone's code
   before the number. */
.form-box .row-fields {
  grid-template-columns: var(--row-cols, minmax(0, 1fr) minmax(0, 1fr));
  gap: 0 var(--s4);
}
.row-fields.is-salutation {
  --row-cols: minmax(0, 12rem);
}
.row-fields.is-three {
  --row-cols: repeat(3, minmax(0, 1fr));
}
.row-fields.is-number {
  --row-cols: minmax(0, 1fr);
}
.row-fields.is-number.has-number {
  --row-cols: minmax(0, 1fr) minmax(0, 6rem);
}
.row-fields.is-plz {
  --row-cols: minmax(0, 8rem) minmax(0, 1fr);
}
.row-fields.is-phone {
  --row-cols: minmax(0, 7rem) minmax(0, 1fr);
}
@media (max-width: 40em) {
  .form-box .row-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* A framed section of a longer form ("Ihr Unternehmen", owner's review of 24 Oct 2026): its
   name in the frame's top line, an optional note, then its fields. */
fieldset.form-box {
  width: 100%;
  min-width: 0;
  margin: 0 0 var(--s4);
  padding: var(--s2) var(--s4) var(--s3);
  border: var(--r-hair) solid var(--rule);
  background: var(--sheet);
}
fieldset.form-box legend {
  padding: 0 var(--s2);
  margin-left: calc(-1 * var(--s2));
  font-size: var(--fs-table);
  font-weight: var(--w-semi);
}
.form-box-note {
  margin: 0 0 var(--s3);
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.form-box [data-address-search-block] {
  margin-bottom: var(--s4);
}
.form-box .row-fields + .row-fields,
.form-box .row-fields + .field,
.form-box .field + .row-fields {
  margin-top: var(--s3);
}
/* The sign-in family's form column for a form of several sections (the company step). */
.login-cols.is-wide {
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
}
.access-form.is-wide {
  max-width: 40rem;
}
.formpage-more {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: var(--r-hair) solid var(--rule);
  font-size: var(--fs-table);
}
/* text-sized actions are still a full target */
.formpage-more a,
.formpage-more .is-off {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-2);
}
/* What can't be undone stands apart and in red, never like a main action. */
.formpage-danger {
  margin-top: var(--s5);
  font-size: var(--fs-table);
}
.formpage-danger a,
.formpage-danger .is-off {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-2);
}
.delete-link {
  color: var(--red);
}
.btn-danger {
  border-color: var(--red);
  background: var(--sheet);
  color: var(--red);
}
.btn-danger:hover {
  background: var(--red-tint);
}
.delete-list {
  margin-top: var(--s4);
  padding-left: var(--s5);
  list-style: disc;
}
.delete-list li + li {
  margin-top: var(--s2);
}

/* ---------- Team ---------- */
.team-gap {
  margin-top: var(--s5);
}
.team-section {
  margin-top: var(--s8);
}
/* a page of members or invitations keeps its height: empty rows as high as a full one */
.team-table tr.pad td {
  height: 59px;
  border-bottom-color: transparent;
}
.team-invite {
  display: grid;
  gap: var(--s5);
  max-width: 34em;
  margin-top: var(--s5);
}

/* ---------- Hilfe: pages to read, one column at a reading width ---------- */
.help {
  max-width: 50em;
  font-size: var(--fs-m);
  line-height: 1.55;
}
.help > p,
.help > .notice {
  margin-top: var(--s4);
}
.help .secthead {
  margin-top: var(--s7);
}
/* A place a link of another page leads to: below the head, not under its edge. */
.help [id] {
  scroll-margin-top: var(--s5);
}
.help-decide {
  margin-top: var(--s6);
  padding: 2px 0 2px var(--s4);
  border-left: 3px solid var(--ink);
}
.help-decide p {
  margin-top: var(--s3);
}
.help-topics li,
.help-rows li,
.help-terms div,
.help-msgs li {
  padding: var(--s3) 0;
  border-bottom: var(--r-hair) solid var(--rule-soft);
}
.help-topics a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-2);
  font-size: var(--fs-control);
  font-weight: var(--w-semi);
}
.help-topics p,
.help-rows p,
.help-terms dd,
.help-msgs p {
  color: var(--ink-2);
}
.help-rows {
  margin-top: var(--s5);
  padding-left: var(--s5);
}
.help-rows h2 {
  font-size: var(--fs-h3);
  font-weight: var(--w-semi);
}
.help-rows .help-aside {
  margin-top: var(--s1);
  font-size: var(--fs-s);
}
.help-terms {
  margin-top: var(--s5);
}
.help-terms dt {
  font-weight: var(--w-bold);
}
.help-two {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
}
/* A Fehler or Hinweis label, then its words. */
.help-two p,
.help-msgs li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.help-msgs.help-status li {
  grid-template-columns: 150px minmax(0, 1fr);
}
.help-msgs h3 {
  font-size: var(--fs-control);
  font-weight: var(--w-semi);
}
.help-rights,
.help-periods,
.help-news {
  margin-top: var(--s5);
}
.help-news th small,
.help-news td small {
  display: block;
  color: var(--ink-2);
  font-size: var(--fs-s);
  font-weight: var(--w-regular);
}
.help-rights tbody th,
.help-periods tbody th {
  font-weight: var(--w-regular);
}
.help-rights td {
  text-align: center;
}
.help-periods td {
  white-space: nowrap;
}
.help-notes {
  margin-top: var(--s5);
  padding-left: var(--s5);
  list-style: disc;
  color: var(--ink-2);
}
.help-notes li + li {
  margin-top: var(--s2);
}
/* A list of notes inside a notice (the upload page's periods, TOUR-333). */
.notice > .help-notes {
  margin-top: 0;
}
/* Where to write when the help does not answer. */
.help-contact {
  margin-top: var(--s7);
}
/* "Mehr in der Hilfe" after an explanation on another page. */
.help-link {
  white-space: nowrap;
}
/* An export guide: numbered steps, each heading a thing to do. */
.help-steps {
  list-style: decimal outside;
  margin-top: var(--s6);
  padding-left: var(--s5);
}
.help-steps > li + li {
  margin-top: var(--s6);
}
.help-steps > li::marker,
.help-steps h2 {
  font-size: var(--fs-h3-l);
  font-weight: var(--w-semi);
}
.help-steps p {
  margin-top: var(--s2);
}
.help-columns ul {
  columns: 2;
  margin-top: var(--s2);
}
.help-columns p {
  margin-top: var(--s3);
  color: var(--ink-2);
}
.help-source {
  font-size: var(--fs-s);
  color: var(--ink-2);
}
/* A drawn sketch of a platform's screen, never a screenshot: ink on the field, what to click
   framed in a heavier ink rule. */
.sketch {
  margin-top: var(--s4);
  max-width: 34em;
}
.sketch-screen {
  padding: var(--s3) var(--s4);
  background: var(--field);
  border: var(--r-hair) solid var(--edge);
  border-radius: var(--radius);
  font-size: var(--fs-ui);
}
.sketch-bar,
.sketch-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}
.sketch-bar {
  padding-bottom: var(--s2);
  border-bottom: var(--r-hair) solid var(--rule-soft);
}
.sketch-menu {
  display: inline-block;
  margin: var(--s2) 0 0 var(--s6);
  padding: var(--s1) 0;
  border: var(--r-hair) solid var(--rule);
}
.sketch-menu li {
  padding: var(--s1) var(--s3);
}
.sketch-line + .sketch-line {
  margin-top: var(--s2);
}
.sketch-line > span:first-child {
  color: var(--ink-2);
}
.sketch-btn {
  padding: 2px var(--s3);
  border: var(--r-hair) solid var(--rule);
  border-radius: var(--radius);
}
.sketch .is-chosen {
  outline: var(--r-rule) solid var(--ink);
  font-weight: var(--w-semi);
}
.sketch figcaption {
  margin-top: var(--s1);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

/* ---------- Anmelden ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.login-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 22px var(--gutter) 20px;
  border-top: var(--r-head) solid var(--ink);
  border-bottom: var(--r-hair) solid var(--ink);
  background: var(--paper);
}
.login-cols {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  width: 100%;
  max-width: 1040px;
  margin: var(--s9) auto 0;
  padding: 0 var(--s5);
}
.login-form {
  padding: 30px 44px 40px 20px;
  border-right: 3px double var(--line);
}
.login-form h1 {
  margin-bottom: 18px;
  font-size: var(--fs-h1-m);
  font-weight: var(--w-semi);
  line-height: 1.2;
}
.login-form .notice-flag {
  margin-bottom: 18px;
}
.login-form .field {
  margin-bottom: var(--s4);
}
/* The forms on a page of their own (Feedback, Kontakt): air between the fields. */
.help form {
  margin-top: var(--s5);
}
.help form .field {
  margin-bottom: var(--s5);
}
.login-form .field label {
  font-size: var(--fs-table);
}
.login-form .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.login-form .row a {
  font-size: var(--fs-s);
}
.login-form .btn {
  margin-top: var(--s2);
  min-width: 170px;
}
.login-form .reg {
  margin-top: 22px;
  padding-top: 14px;
  border-top: var(--r-hair) solid var(--rule);
  font-size: var(--fs-table);
}
.login-side {
  padding: 30px 20px 40px 40px;
}
.login-side .what {
  max-width: 17em;
  margin-bottom: 26px;
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.3;
}
.assure {
  border-top: var(--r-rule) solid var(--ink);
}
.assure li {
  padding: 11px 0 var(--s3);
  border-bottom: var(--r-hair) solid var(--rule);
  font-size: var(--fs-control);
}
.login-wrap .site-footer {
  margin-top: auto;
}

/* The sign-in family beyond Anmelden: a lead under the heading, a row of actions, a part
   that opens on request, and the same two columns below the app's header (Konto). */
.login-form .lead {
  margin-bottom: 18px;
}
.login-form .acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin-top: var(--s2);
}
.login-form .acts .btn {
  margin-top: 0;
}
.login-form .check,
.login-form .notice {
  margin-bottom: 18px;
}
.login-form .more {
  margin-top: 22px;
  padding-top: var(--s2);
  border-top: var(--r-hair) solid var(--rule);
}
.fold summary,
.login-form .more summary {
  display: flex;
  align-items: center;
  min-height: var(--control-2);
  font-weight: var(--w-semi);
  text-decoration: underline;
  cursor: pointer;
}
.login-form .more + .reg {
  margin-top: var(--s2);
}
.login-side .side-act {
  margin-top: var(--s4);
  font-size: var(--fs-table);
}
/* A field whose label line ends in a link ("Passwort vergessen?"): the link follows the
   input in the page and is drawn beside the label. */
.login-form .field-linked {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
}
.login-form .field-linked > * {
  grid-column: 1 / -1;
}
.login-form .field-linked > label {
  grid-area: 1 / 1;
}
.login-form .field-linked > a {
  grid-area: 1 / 2;
  font-size: var(--fs-s);
}
/* text-sized actions are still a full target */
.login-form .notice-flag .linkbtn,
.login-side .side-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-2);
}
/* greyed for a role that may not use it: still text, no slab behind it */
.login-side .side-link.is-off,
.formpage-more .is-off {
  border: 0;
  background: none;
  color: var(--ink-2);
}
.login-cols.in-app {
  margin-top: var(--s6);
}

/* ---------- Verträge: one column, the facts, the table, the member's own confirmation ---------- */
.contracts-form {
  max-width: 46rem;
}
.contracts-table {
  max-width: 62rem;
  margin-top: var(--s5);
}
.contracts-own {
  max-width: 46rem;
  margin-top: var(--s6);
}

/* ---------- Einstellungen: one column, the parts one after the other ---------- */
.access {
  max-width: 46rem;
}
.access-part {
  border-top: var(--r-rule) solid var(--ink);
  margin-top: var(--s6);
  padding-top: var(--s4);
}
.access-part.is-danger {
  border-top-color: var(--red);
}
.access-part.is-danger h2 {
  color: var(--red);
}
.access-facts th {
  width: 34%;
  vertical-align: top;
}
.access-facts td {
  vertical-align: top;
}
.access-facts small,
.access-note {
  display: block;
  margin-top: var(--s1);
  color: var(--ink-2);
  font-size: var(--fs-s);
}
.access-act {
  margin: var(--s2) 0 0;
}
/* The Zwei-Faktor-Anmeldung (TOUR-327): the QR code stays black on white in both themes,
   as a camera reads it; the key and the recovery codes in spaced figures. */
.setup-steps {
  display: grid;
  gap: var(--s4);
  padding-left: 1.25rem;
}
.qr-code {
  display: inline-block;
  margin-top: var(--s2);
  padding: var(--s2);
  background: #fff;
  border: 1px solid var(--edge);
}
.qr-code svg {
  display: block;
  width: 11rem;
  height: auto;
}
.factor-key,
.recovery-codes code {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--s1) var(--s5);
  margin: var(--s3) 0;
  padding-left: 1.5rem;
  font-size: var(--fs-l);
}
.access-form {
  display: grid;
  gap: var(--s4);
  max-width: 24rem;
  justify-items: start;
}
.access-form .field {
  width: 100%;
}
/* the Gefahrenbereich: one framed list, each row a title, a line and its button */
.danger-zone {
  border: var(--r-hair) solid var(--red);
  margin-top: var(--s3);
}
.danger-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s4);
}
.danger-row + .danger-row {
  border-top: var(--r-hair) solid var(--rule-soft);
}
.danger-row > div {
  flex: 1 1 22rem;
}
.danger-row h3 {
  margin: 0 0 var(--s1);
  font-size: var(--fs-l);
}
.danger-row p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-s);
}
.danger-row .btn {
  white-space: nowrap;
}

/* ---------- Startseite ---------- */
.p-landing,
.p-landing body {
  background: var(--paper);
}
body.p-landing {
  background: var(--paper);
}
.lp {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--s6);
}
.lp-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 18px 0 var(--s4);
  border-bottom: var(--r-hair) solid var(--ink);
}
.lp-nav .links {
  display: flex;
  gap: 28px;
  margin-left: 18px;
}
.lp-nav .links a,
.lp-nav .login {
  text-decoration: none;
}
.lp-nav .links a:hover,
.lp-nav .login:hover {
  text-decoration: underline;
}
.lp-nav .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s5);
}
.lp-nav .login {
  font-weight: var(--w-semi);
}
.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 44px;
  align-items: center;
  padding: 60px 0 var(--s8);
}
/* without the example beside it: the app's own start page */
.lp-hero.solo {
  grid-template-columns: minmax(0, 1fr);
}
.lp-hero h1 {
  margin-top: var(--s4);
  font-size: var(--fs-hero);
  font-weight: var(--w-semi);
  line-height: 1.12;
  letter-spacing: -0.016em;
}
.lp-hero .lead {
  margin-top: 22px;
  max-width: 31em;
  font-size: var(--fs-lead);
}
.lp-hero .more {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  font-size: var(--fs-l);
}
.lp-hero .more a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-2);
  font-weight: var(--w-semi);
}
.lp-hero .more svg {
  width: 14px;
  height: 14px;
}
/* the example: a small Kontoblatt extract, the one framed figure */
.kb {
  background: var(--sheet);
  border: 1px solid var(--edge);
  border-top: var(--r-head) solid var(--ink);
  padding: 20px 26px 22px;
}
.kb-title {
  margin-top: var(--s1);
  font-size: var(--fs-h1-s);
  font-weight: var(--w-bold);
  line-height: 1.2;
}
.kb-sub {
  margin-bottom: 14px;
  font-size: var(--fs-table);
  color: var(--ink-2);
}
.kb .ledger {
  font-size: var(--fs-control);
  table-layout: fixed;
}
.kb .ledger thead th {
  border-top: var(--r-head) solid var(--ink);
}
.kb .ledger th.num {
  text-align: center;
}
.kb .ledger th.no {
  padding-right: 0;
  text-align: right;
}
.kb .ledger td {
  height: 38px;
}
.kb .ledger td.num {
  font-size: var(--fs-figure);
}
.kb .ledger td.no {
  padding-right: 0;
  color: var(--ink-2);
  text-align: right;
}
.kb .ledger tr.payout td {
  font-weight: var(--w-bold);
}
.kb-check {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--r-hair) solid var(--rule);
  font-size: var(--fs-control);
}
.kb-check .st {
  font-weight: var(--w-bold);
}
.kb-check .st svg {
  width: 14px;
  height: 14px;
}
.kb-note {
  margin-top: 10px;
  font-size: var(--fs-s);
  line-height: 1.4;
  color: var(--ink-2);
}
.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: var(--r-rule) solid var(--ink);
  border-bottom: var(--r-hair) solid var(--ink);
}
.lp-steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  padding: 18px 26px 20px 0;
}
.lp-steps li + li {
  padding-left: 26px;
  border-left: var(--r-hair) solid var(--ink);
}
.lp-steps .n {
  font-size: var(--fs-numeral);
  font-weight: 300;
  line-height: 1;
}
.lp-steps h2 {
  font-size: var(--fs-h3-l);
  font-weight: var(--w-bold);
  line-height: 1.25;
}
.lp-steps p {
  margin-top: 3px;
  line-height: 1.4;
}
.lp-assure {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: var(--s4) 0 40px;
  font-size: var(--fs-table);
}
.lp-assure li {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding-right: 26px;
}
.lp-assure li + li {
  padding-left: 26px;
}
.lp-assure svg {
  flex: none;
  width: 10px;
  height: 10px;
}

/* ---------- public site (site/): the one-pager below its top, and the legal pages ----------
   The same devices as above: ink rules, caps labels, whitespace, the double closing rule. */
.lp-nav .links a,
.lp-nav .brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-2);
}
.lp-nav > .btn {
  margin-left: auto;
}
.lp-hero .notice {
  margin-top: var(--s5);
  font-size: var(--fs-ui);
}
/* the columns of the example: number, text, Soll, Haben */
.kb col.c-no {
  width: 38px;
}
.kb col.c-amt {
  width: 104px;
}
/* a section: its caps label and heading on the left, what it says on the right */
.lp-sect {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--s5) 44px;
  padding: var(--s5) 0 var(--s9);
  border-top: var(--r-hair) solid var(--ink);
}
.lp-sect h2,
.lp-end h2 {
  margin-top: var(--s2);
  font-size: var(--fs-h1-m);
  font-weight: var(--w-semi);
  line-height: 1.15;
  letter-spacing: -0.012em;
}
/* a part of a section that takes the whole width (the heading above the steps, the steps) */
.lp-wide {
  grid-column: 1 / -1;
}
.lp-text {
  max-width: 40em;
  font-size: var(--fs-l);
}
.lp-text p + p {
  margin-top: var(--s4);
}
/* the explainer film (the site's start page and the app's): the one dark block of the page.
   It plays on click and never by itself. */
.lp-film {
  max-width: 760px;
  margin-bottom: var(--s5);
}
.lp-film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: var(--r-hair) solid var(--ink);
}
.lp-film figcaption {
  margin-top: var(--s2);
  font-size: var(--fs-s);
  line-height: 1.4;
  color: var(--ink-2);
}
.lp-film figcaption a {
  font-weight: var(--w-semi);
  color: var(--ink);
}
.lp-steps h3,
.lp-cols h3,
.lp-items h3 {
  font-size: var(--fs-h3-l);
  font-weight: var(--w-bold);
  line-height: 1.25;
}
/* two columns side by side, parted by an ink rule like the steps */
.lp-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: var(--r-rule) solid var(--ink);
  border-bottom: var(--r-hair) solid var(--ink);
}
.lp-cols > * {
  padding: 18px 26px 22px 0;
}
.lp-cols > * + * {
  padding-left: 26px;
  border-left: var(--r-hair) solid var(--ink);
}
/* a short list, one ruled line per entry */
.lp-list {
  margin-top: var(--s3);
}
.lp-list li {
  padding: 9px 0 10px;
  border-top: var(--r-hair) solid var(--rule);
}
/* the way into the pilot programme: the link to the form, and below it what the form asks */
.lp-join {
  margin: var(--s5) 0 var(--s7);
}
.lp-join .btn,
.lp-acts .btn {
  min-height: 52px;
  font-size: var(--fs-l);
}
.lp-join .btn {
  min-width: 320px;
}
.lp-join p {
  max-width: 44em;
  margin-top: var(--s3);
  font-size: var(--fs-ui);
  color: var(--ink-2);
}
/* the site's hero (TOUR-356): the caps line across, the heading on the left level with the
   text on the right */
.lp-top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--s4) 48px;
  align-items: start;
  padding: var(--s7) 0 var(--s6);
}
.lp-top > .caps {
  grid-column: 1 / -1;
}
/* the way in under the heading, what it reads and the pilot under the text (owner's review
   of 5 Nov 2026): both columns end at about the same height */
.lp-top h1 + .lp-acts {
  margin-top: var(--s6);
}
/* the platforms read today, named in words: no platform's logo (trademark, 5 Nov 2026) */
.lp-platforms {
  margin-top: var(--s4);
  font-size: var(--fs-l);
}
.lp-platforms .caps {
  margin-right: var(--s2);
}
.lp-platforms strong {
  font-weight: var(--w-semi);
}
.lp-more-soon {
  white-space: nowrap;
}
/* three lines from 1000 px on: smaller with the window, never above its size */
.lp-top h1 {
  font-size: min(var(--fs-display), 4.6vw);
  font-weight: var(--w-semi);
  line-height: 1.04;
  letter-spacing: -0.022em;
}
.lp-top .lead {
  font-size: var(--fs-lead);
}
/* the way in and the link beside it; the line below it */
.lp-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s5);
  margin-top: var(--s5);
}
.lp-acts .btn {
  padding: 0 var(--s6);
}
.lp-acts a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-2);
}
.lp-micro {
  margin-top: var(--s3);
  font-size: var(--fs-ui);
  color: var(--ink-2);
}
/* the example across the page, as the Prüfung shows it: the bank's amount and the Differenz
   above, the Vorgänge of the payout below */
.kb.kb-strip {
  margin: 0;
}
.kb-head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: var(--r-hair) solid var(--edge);
}
.kb-big {
  margin-top: var(--s2);
  font-size: var(--fs-headline);
  font-weight: var(--w-semi);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
/* the table scrolls in its box when narrow; the box keeps room for the bar a Fehler or a
   Hinweis draws left of its row, and at its right for the half of a collapsed rule that
   lies outside the table, so a wide window shows no scrollbar */
.kb-scroll {
  margin-top: var(--s2);
  padding: 0 1px 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
}
/* fixed columns of the widths below, no head rule above a
   row's number, and its deductions with the minus but no frame: every amount of the two
   columns is one (owner, 4 Nov 2026) */
.kb-strip .ledger {
  min-width: 820px;
  table-layout: fixed;
}
/* both tables of the example take the same column widths, so the cleared row lines up */
.kb-strip .ledger col:nth-child(1) {
  width: 13%;
}
.kb-strip .ledger col:nth-child(2),
.kb-strip .ledger col:nth-child(3) {
  width: 11%;
}
.kb-strip .ledger col:nth-child(4),
.kb-strip .ledger col:nth-child(5) {
  width: 10%;
}
.kb-strip .ledger col:nth-child(6) {
  width: 14%;
}
.kb-strip .ledger col:nth-child(7) {
  width: 31%;
}
.kb-strip .ledger tbody th {
  font-weight: var(--w-semi);
}
/* the same Vorgang once cleared: its columns line up with the table above */
.kb-then {
  margin-top: var(--s5);
}
/* the file's state before and after clearing: the fact the example exists for, so as large
   as the bank's amount allows (design critic, 5 Nov 2026) */
.kb-states {
  margin-top: var(--s2);
}
.kb-states li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s3);
}
.kb-states li + li {
  margin-top: var(--s3);
}
.kb-states .st {
  font-size: var(--fs-h1-s);
}
.kb-states .st svg {
  width: 14px;
  height: 14px;
}
.kb-when {
  flex-basis: 100%;
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.kb-why {
  font-size: var(--fs-ui);
}
/* the Kurtaxe is part of Brutto, not a summand: lighter, right after it */
.kb-strip .ledger .part {
  color: var(--ink-2);
}
/* a finding's label says its kind in a word and a sign, not by colour alone */
.kb-strip .tag svg {
  width: 11px;
  height: 11px;
  margin-right: 5px;
  vertical-align: -1px;
}
/* where the window is narrow, a heading or a finding's label takes a second line rather than
   leaving its column */
.kb-strip .ledger th,
.kb-strip .tag {
  white-space: normal;
  hyphens: auto;
}
.kb-strip .ledger tbody th,
.kb-strip .ledger td.num {
  white-space: nowrap;
}
/* four facts under the example, parted like the steps */
.lp-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: var(--s6) 0 var(--s7);
}
.lp-facts li {
  padding-right: 26px;
}
.lp-facts li + li {
  padding-left: 26px;
  border-left: var(--r-hair) solid var(--ink);
}
.lp-facts h2 {
  font-size: var(--fs-h3-l);
  font-weight: var(--w-bold);
  line-height: 1.25;
}
.lp-facts p {
  margin-top: 6px;
  color: var(--ink-2);
}
/* the work per payout, without and with Feinsaldo: Feinsaldo's column behind a double rule */
.lp-cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-l);
}
.lp-cmp th,
.lp-cmp td {
  padding: var(--s3) var(--s3) var(--s3) 0;
  border-bottom: var(--r-hair) solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.lp-cmp thead th {
  border-top: var(--r-rule) solid var(--ink);
  border-bottom-color: var(--ink);
  font-size: var(--fs-ui);
}
.lp-cmp tbody th {
  width: 22%;
  font-weight: var(--w-bold);
}
.lp-cmp td:nth-child(2) {
  color: var(--ink-2);
}
.lp-cmp td:last-child,
.lp-cmp th:last-child {
  padding-left: var(--s4);
  border-left: 3px double var(--line);
}
/* the prices beside their explanation */
.lp-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) 44px;
  margin-bottom: var(--s5);
}
.lp-figures div {
  display: flex;
  flex-direction: column-reverse;
}
.lp-figures dd {
  font-size: var(--fs-h1-m);
  font-weight: var(--w-semi);
  line-height: 1.1;
}
.lp-figures dt {
  color: var(--ink-2);
}
/* what ends a section draws no closing line: the next section's rule closes it (owner's
   review of 5 Nov 2026) */
.lp-sect > .lp-wide > .lp-steps:last-child {
  border-bottom: 0;
}
.lp-cmp tbody tr:last-child > *,
.lp-sect .lp-faq > li:last-child {
  border-bottom: 0;
}
/* the way in inside the pilot's first step */
.lp-steps .lp-step-join {
  margin-top: var(--s5);
}
/* the closing way in, above the footer's double rule */
.lp-end {
  padding: var(--s8) 0;
  border-top: var(--r-hair) solid var(--ink);
  text-align: center;
}
.lp-end .lp-acts {
  justify-content: center;
}
/* ruled entries of a heading and its text: the assurances (two columns) and the questions */
.lp-items.two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 44px;
}
.lp-items li {
  padding: 18px 0 22px;
  border-top: var(--r-hair) solid var(--rule);
}
.lp-items p {
  max-width: 44em;
  margin-top: 6px;
}
/* the questions of the start page: one ruled row each, a chevron that turns down when the
   answer is open below it */
.lp-faq > li {
  border-bottom: var(--r-hair) solid var(--rule);
}
.lp-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s5);
  min-height: var(--control-2);
  padding: var(--s4) var(--s1) var(--s4) 0;
  font-size: var(--fs-l);
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.lp-faq summary::-webkit-details-marker {
  display: none;
}
.lp-faq summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid var(--ink);
  border-right: 1.5px solid var(--ink);
  transform: rotate(45deg);
}
.lp-faq details[open] summary::after {
  transform: rotate(135deg);
}
.lp-faq p,
.lp-faq .lp-list {
  max-width: 44em;
  padding-bottom: var(--s4);
  color: var(--ink-2);
}
/* an answer that is a short list */
.lp-faq .lp-list {
  margin-top: 0;
}
/* the site's footer, like the app's: the claim, then the links; they wrap below when narrow */
.lp-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3) 44px;
  padding: var(--s5) 0 var(--s8);
  border-top: var(--r-double) double var(--line);
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.lp-foot p + p {
  margin-top: var(--s2);
}
.lp-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s5);
  align-items: flex-start;
}
.lp-foot nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-2);
  margin-top: -12px;
  color: var(--ink);
}
/* above every page of a build that must not be published: says so in words */
.lp-draft {
  padding: var(--s2) var(--s6);
  font-size: var(--fs-ui);
  text-align: center;
}
/* Impressum and Datenschutzerklärung: one column of text */
.lp-legal {
  max-width: 46em;
  padding: var(--s7) 0 var(--s9);
}
/* the app's page title size: the longest title, "Allgemeine Geschäftsbedingungen (AGB)",
   stays on one line of the text column */
.lp-legal h1 {
  font-size: var(--fs-title);
  font-weight: var(--w-semi);
  line-height: 1.12;
  letter-spacing: -0.016em;
}
.lp-legal h2 {
  margin-top: var(--s7);
  padding-top: var(--s3);
  border-top: var(--r-hair) solid var(--ink);
  font-size: var(--fs-h1-s);
  font-weight: var(--w-bold);
  line-height: 1.25;
}
.lp-legal h3 {
  margin-top: var(--s6);
  font-size: var(--fs-h3-l);
  font-weight: var(--w-bold);
  line-height: 1.25;
}
.lp-legal p,
.lp-legal ul,
.lp-legal table {
  margin-top: var(--s3);
}
.lp-legal ul {
  padding-left: 1.2em;
  list-style: square;
}
.lp-legal li + li {
  margin-top: 6px;
}
.lp-legal code {
  padding: 0 3px;
  border: var(--r-hair) solid var(--rule);
  font: inherit;
}
.lp-legal .ledger th {
  white-space: normal;
}
.lp-legal .ledger td {
  height: auto;
  padding: var(--s2) 10px;
  vertical-align: top;
}
/* the page "Preise" (site and app): wider than a legal text, so the three ways to pay stand
   side by side as columns parted by ink rules, like the steps of the start page */
.lp-legal.lp-prices {
  max-width: 64em;
}
/* every list of the page has a look of its own: none of the legal text's squares and gaps */
.lp-legal.lp-prices ul {
  padding: 0;
  list-style: none;
}
.lp-legal.lp-prices li {
  margin: 0;
}
.lp-prices .lead {
  margin-top: var(--s3);
  font-size: var(--fs-lead);
  color: var(--ink-2);
}
.lp-prices .price-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--s6);
  border-top: var(--r-rule) solid var(--ink);
  border-bottom: var(--r-hair) solid var(--ink);
}
.lp-prices .price-cards > li {
  padding: var(--s6) var(--s5) var(--s5) 0;
}
.lp-prices .price-cards > li + li {
  padding-left: var(--s5);
  border-left: var(--r-hair) solid var(--ink);
}
/* the cheapest way: the brand's bar on top and its caps label */
.lp-prices .price-cards > .best {
  position: relative;
  box-shadow: inset 0 var(--r-head) 0 var(--brand);
}
/* above the heading, out of the flow, so the three prices stand on one line */
.lp-prices .price-cards .caps {
  position: absolute;
  top: var(--s2);
  margin: 0;
  color: var(--brand);
}
.lp-prices .price-cards h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--fs-h3-l);
}
.lp-prices .price {
  margin-top: var(--s3);
  font-size: var(--fs-ui);
  color: var(--ink-2);
}
.lp-prices .price strong {
  display: block;
  font-size: var(--fs-headline);
  font-weight: var(--w-semi);
  line-height: 1.1;
  letter-spacing: -0.016em;
  color: var(--ink);
}
/* lists with a tick: what each way holds, and what is always included */
.lp-prices .ticks {
  margin-top: var(--s4);
}
.lp-prices .ticks li {
  position: relative;
  padding: 7px 0 7px 22px;
  border-top: var(--r-hair) solid var(--rule-soft);
}
.lp-prices .ticks li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.8em;
  width: 5px;
  height: 10px;
  border-right: 1.5px solid var(--brand);
  border-bottom: 1.5px solid var(--brand);
  transform: rotate(45deg);
}
.lp-prices .ticks.included {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 44px;
}
.lp-prices .price-fine {
  margin-top: var(--s3);
  font-size: var(--fs-s);
  color: var(--ink-2);
}
/* a link below a section's heading, and the link from a legal page to its PDF */
.lp-more {
  margin-top: var(--s4);
}
.lp-more,
.lp-pdf {
  font-size: var(--fs-s);
}
/* The public site between phone and desktop: one column, and the navigation is the logo and
   the one button. Its classes only; the app's screens stay as they are. */
@media (max-width: 1000px) {
  .lp-nav .links {
    display: none;
  }
  .row-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .totals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .totals > div:nth-child(4) {
    padding-left: 0;
    border-left: 0;
  }
  .p-landing .lp-hero,
  .lp-sect,
  .lp-foot {
    grid-template-columns: minmax(0, 1fr);
  }
  .p-landing .lp-hero .kb {
    max-width: 560px;
  }
  .lp-top,
  .lp-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-facts {
    gap: var(--s4);
  }
  .lp-facts li,
  .lp-facts li + li {
    padding: 0;
    border-left: 0;
  }
  .lp-facts li + li {
    padding-top: var(--s4);
    border-top: var(--r-hair) solid var(--rule);
  }
  .p-landing .lp-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .p-landing .lp-steps li,
  .p-landing .lp-steps li + li {
    padding: var(--s4) 0;
    border-left: 0;
  }
  .p-landing .lp-steps li + li {
    border-top: var(--r-hair) solid var(--rule);
  }
  .lp-sect {
    gap: var(--s4);
    padding-bottom: var(--s8);
  }
  .lp-foot nav a {
    margin-top: 0;
  }
}

/* ============================================================
   OPTIONAL: single-column pages below 720 px.
   Only the sign-in family (Anmelden and the pages reached from e-mail links: confirm
   address, reset password, accept invitation) and the Startseite collapse to one column.
   "Ideally usable on a phone, not a blocker." The app screens have no phone layout.
   ============================================================ */
@media (max-width: 720px) {
  :root {
    --gutter: var(--s4);
    --fs-m: 16px;
  }
  .btn {
    min-height: var(--s7);
  }
  .input {
    height: var(--s7);
  }

  /* sign-in family */
  .login-head {
    align-items: center;
    padding: var(--s3) var(--gutter);
  }
  /* The word beside the logo has no room here; the heading names the page. */
  .login-head .caps {
    display: none;
  }
  .login-cols,
  .login-cols.is-wide {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--s5);
    padding: 0 var(--gutter);
  }
  .login-form {
    padding: 0 0 var(--s6);
    border-right: 0;
    border-bottom: 3px double var(--line);
  }
  .login-form .btn {
    width: 100%;
  }
  .login-side {
    padding: var(--s5) 0 var(--s6);
  }
  /* Startseite */
  .lp {
    padding: 0 var(--gutter);
  }
  .lp-nav {
    flex-wrap: wrap;
    gap: var(--s3);
    padding: var(--s2) 0 0;
  }
  .lp-nav .login {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-2);
  }
  .lp-nav .btn {
    order: 4;
    width: 100%;
    margin-bottom: var(--s3);
  }
  .lp-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
    padding: var(--s6) 0 var(--s7);
  }
  .lp-hero h1 {
    font-size: var(--fs-title);
  }
  .kb {
    padding: var(--s4) var(--s3);
  }
  .kb .ledger th,
  .kb .ledger td {
    padding: 0 6px;
  }
  .kb .ledger {
    font-size: var(--fs-ui);
  }
  .kb .ledger td.num {
    font-size: var(--fs-ui);
  }
  .lp-hero .kb .ledger col:nth-child(1) {
    width: 26px !important;
  }
  .lp-hero .kb .ledger col:nth-child(3),
  .lp-hero .kb .ledger col:nth-child(4) {
    width: 80px !important;
  }
  .kb-check {
    flex-direction: column;
    gap: var(--s1);
  }
  .lp-steps,
  .lp-assure {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-steps li,
  .lp-steps li + li {
    padding: var(--s4) 0;
    border-left: 0;
  }
  .lp-steps li + li {
    border-top: var(--r-hair) solid var(--rule);
  }
  .lp-assure {
    gap: var(--s3);
  }
  .lp-assure li,
  .lp-assure li + li {
    padding: 0;
  }

  /* public site */
  .lp-nav > .btn {
    margin-left: 0;
  }
  .lp-top {
    padding: var(--s6) 0 var(--s5);
  }
  .lp-top h1 {
    font-size: var(--fs-title);
  }
  .lp-top .lead {
    font-size: var(--fs-l);
  }
  .lp-acts .btn {
    width: 100%;
  }
  .kb-big {
    font-size: var(--fs-h1-m);
  }
  /* the comparison: one block per step, each column under its own label */
  .lp-cmp thead {
    display: none;
  }
  .lp-cmp tr,
  .lp-cmp th,
  .lp-cmp td {
    display: block;
  }
  .lp-cmp tbody tr {
    padding: var(--s3) 0;
    border-top: var(--r-hair) solid var(--ink);
  }
  .lp-cmp tbody th {
    width: auto;
  }
  .lp-cmp th,
  .lp-cmp td,
  .lp-cmp td:last-child {
    padding: var(--s1) 0;
    border: 0;
  }
  .lp-cmp td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--w-semi);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  /* the example: one block per Vorgang, each amount under its own label */
  .kb-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .kb-strip .ledger {
    min-width: 0;
  }
  .kb-strip .ledger colgroup,
  .kb-strip .ledger thead {
    display: none;
  }
  .kb-strip .ledger,
  .kb-strip .ledger tbody,
  .kb-strip .ledger tfoot,
  .kb-strip .ledger tr {
    display: block;
  }
  .kb-strip .ledger tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s1) var(--s4);
    padding: var(--s3) var(--s2);
    border-top: var(--r-hair) solid var(--rule-soft);
  }
  .kb-strip .ledger th,
  .kb-strip .ledger td {
    height: auto;
    padding: 0;
    border: 0;
  }
  .kb-strip .ledger tr > :first-child,
  .kb-strip .ledger .chk {
    grid-column: 1 / -1;
  }
  .kb-strip .ledger td.num {
    display: flex;
    justify-content: space-between;
    gap: var(--s2);
  }
  .kb-strip .ledger td.num::before {
    content: attr(data-label);
    color: var(--ink-2);
    font-weight: var(--w-regular);
  }
  .kb-strip .ledger tfoot tr {
    border-top: var(--r-hair) solid var(--ink);
  }
  .kb-strip .ledger tfoot td.num {
    border-bottom: 0;
  }
  .kb-strip .ledger tfoot td:empty {
    display: none;
  }
  .kb-strip .ledger tr.r-error > :first-child,
  .kb-strip .ledger tr.r-warning > :first-child {
    box-shadow: none;
  }
  .kb-strip .ledger tr.r-error {
    background: var(--red-tint);
    box-shadow: inset 4px 0 0 var(--red);
  }
  .kb-strip .ledger tr.r-warning {
    background: var(--ochre-tint);
    box-shadow: inset 4px 0 0 var(--ochre);
  }
  .lp-end {
    padding: var(--s7) 0;
  }
  .lp-sect {
    gap: var(--s3);
    padding: var(--s4) 0 var(--s5);
  }
  .p-landing .lp-hero .lead {
    margin-top: var(--s4);
    font-size: var(--fs-l);
  }
  .p-landing .lp-hero .notice,
  .p-landing .lp-hero .more {
    margin-top: var(--s4);
  }
  .lp-sect h2,
  .lp-end h2 {
    font-size: var(--fs-h1-s);
  }
  .lp-cols,
  .lp-items.two {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-cols > *,
  .lp-cols > * + * {
    padding: var(--s4) 0;
    border-left: 0;
  }
  .lp-cols > * + * {
    border-top: var(--r-hair) solid var(--ink);
  }
  .lp-join {
    margin-bottom: var(--s6);
  }
  .lp-join .btn {
    width: 100%;
    min-width: 0;
  }
  .lp-items li {
    padding: 14px 0 var(--s4);
  }
  .lp-legal {
    padding: var(--s6) 0 var(--s7);
  }
  .lp-legal h1 {
    font-size: var(--fs-title);
  }
  .lp-prices .price-cards,
  .lp-prices .ticks.included {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-prices .price-cards > li,
  .lp-prices .price-cards > li + li {
    padding: var(--s4) 0;
    border-left: 0;
  }
  .lp-prices .price-cards > li + li {
    border-top: var(--r-hair) solid var(--ink);
  }
  .lp-prices .price-cards > .best {
    padding-top: var(--s6);
  }
}

/* ---------- the app: shell, shared form parts, states ---------- */
/* Components set `display`; `hidden` must still hide them. */
[hidden] {
  display: none !important;
}
.skip-link {
  position: absolute;
  z-index: 10; /* above the header strip */
  left: var(--s4);
  top: -100px;
  padding: var(--s2) var(--s4);
  background: var(--ink);
  color: var(--sheet);
}
.skip-link:focus {
  top: var(--s2);
}
/* Without sections (signed out, error pages) the strip still closes below the logo. */
.head-top:last-child {
  padding-bottom: var(--s4);
}
/* "Registrierung abbrechen" below the buttons of a step (D-096): a small line, apart from
   them. */
.step-cancel {
  margin-top: var(--s4);
  font-size: var(--fs-th);
  color: var(--ink-2);
}
/* Abmelden, the one link of a signed-out page and the cancel line's link: as tall as every
   other control. */
.head-user form {
  margin: 0;
}
.head-user .linkbtn,
.head-user a,
.step-cancel a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-2);
}
/* The footer of every page: the claim and the links in one row. */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3) var(--s6);
  padding: var(--s5) var(--gutter) var(--s6);
  border-top: var(--r-hair) solid var(--rule);
  color: var(--ink-2);
  font-size: var(--fs-s);
}
.foot-claim {
  font-size: var(--fs-l);
  font-style: italic;
  color: var(--ink);
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s5);
}
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-2);
  color: var(--ink);
}
/* A choice of the `select_field` macro is drawn like an input and keeps its arrow. */
select.input {
  appearance: auto;
}
/* A password field with its "Anzeigen" button inside. */
.field-control {
  position: relative;
}
.field-control.is-password input {
  padding-right: 6.5rem;
}
.field-toggle {
  position: absolute;
  top: 50%;
  right: var(--s2);
  transform: translateY(-50%);
  min-height: 36px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  font-size: var(--fs-s);
  font-weight: var(--w-semi);
  cursor: pointer;
}
.field-toggle:hover {
  background: var(--paper);
}
/* The yes/no setting of the `checkbox_field` macro: its hint lines up with the text. */
.check .field-hint,
.check .field-error {
  margin: 0 0 0 calc(20px + var(--s3));
}
/* Boxes under one question (a client's platforms): the question stands as a field's label,
   the boxes close below it. */
fieldset.choices {
  min-width: 0;
  margin: var(--s5) 0 0;
  padding: 0;
  border: 0;
}
fieldset.choices legend {
  padding: 0;
  margin-bottom: 3px;
  font-size: var(--fs-xs);
  font-weight: var(--w-semi);
}
.formpage .choices .check {
  margin-top: var(--s2);
}
/* Two short answers side by side under their question (ja · nein, TOUR-259), the hint
   between the question and the answers. */
.choices-in-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s6);
}
.choices .choices-in-row .check {
  margin-top: var(--s1);
}
fieldset.choices > .field-hint {
  margin: 0 0 var(--s1);
}
/* Which clients a member sees: the radios, then the clients as a `.pick` with a search,
   greyed while every client is chosen (owner's review of 22 Oct 2026). */
.client-choice {
  max-width: 34em;
}
fieldset.pick-field {
  min-width: 0;
  margin: var(--s5) 0 0;
  padding: 0;
  border: 0;
}
fieldset.pick-field legend {
  padding: 0;
  margin-bottom: 3px;
  font-size: var(--fs-xs);
  font-weight: var(--w-semi);
}
/* A blocked member: the state and the way back, above the member's settings. */
.member-state {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s5);
  padding: var(--s3) var(--s4);
  border-left: 6px double var(--ochre);
  background: var(--ochre-tint);
}
.member-state p {
  flex: 1 1 22rem;
  margin: 0;
}
/* A client's platforms: one row each, the box and beside it the date its rows carry. */
.platform-head,
.platform-row {
  display: grid;
  grid-template-columns: minmax(10em, 1fr) minmax(0, 2fr);
  gap: var(--s2) var(--s5);
  align-items: start;
}
.platform-head {
  margin-top: var(--s2);
  padding-bottom: var(--s1);
  border-bottom: var(--r-hair) solid var(--rule-soft);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.platform-row {
  padding: var(--s3) 0;
  border-bottom: var(--r-hair) solid var(--rule-soft);
}
.platform-row .cb {
  min-height: var(--control);
}
.platform-rows > .field-hint,
.platform-rows > .field-error {
  margin-top: var(--s2);
}
@media (max-width: 34em) {
  .platform-head {
    display: none;
  }
  .platform-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Kontenzuordnung: whether payouts are booked is a row of its own, its list across both
   entry columns; the Bank row below it greyed while they are not (its fields read-only, so
   a stored value is kept). */
.role .field.wide {
  grid-column: 3 / 5;
}
.role.is-unused h3,
.role.is-unused .hint {
  color: var(--ink-2);
}
/* Kontenzuordnung per platform (TOUR-246, sketch D of 25 Oct 2026): under a row that may
   differ, "Für einzelne Plattformen abweichend" opens one line per platform; the payout
   choice has its lines always. A platform's empty field shows the client's value greyed. */
.role .apart,
.role .plat-lines {
  grid-column: 2 / 5;
}
.role .apart {
  margin-top: var(--s2);
}
.role .apart > summary {
  display: inline-block;
  min-height: 44px;
  padding-top: 10px;
  font-size: var(--fs-s);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}
.role .apart > summary::-webkit-details-marker {
  display: none;
}
.role .apart > summary::before {
  content: "\203A";
  display: inline-block;
  width: 1em;
  text-decoration: none;
}
.role .apart[open] > summary::before {
  transform: rotate(90deg);
}
.role .apart > summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.role .apart-note {
  margin-left: var(--s2);
  font-size: var(--fs-th);
  color: var(--ink-2);
}
.role .plat-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 170px;
  column-gap: 20px;
  align-items: start;
  padding-top: var(--s2);
}
.role .plat-line .pname {
  padding: 10px 0 0 14px;
  border-left: var(--r-rule) solid var(--rule);
  font-size: var(--fs-table);
  color: var(--ink-2);
}
.role .plat-line .field.wide {
  grid-column: 2 / 4;
}
/* A platform's Sachkonto is the narrow column: its error may use both entry columns. */
.role .plat-line .field-error {
  width: max-content;
  max-width: 340px;
}
.role .plat-line .input::placeholder {
  color: var(--ink-2);
  font-style: italic;
}
.role .none-tick {
  display: flex;
  gap: var(--s1);
  align-items: center;
  margin-top: var(--s1);
  font-size: var(--fs-th);
  color: var(--ink-2);
}
/* "Alle Berichte": the filter above the table, and the reason below a status. */
.history-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 18em)) auto;
  gap: var(--s2) var(--s5);
  align-items: end;
  margin-top: var(--s4);
}
@media (max-width: 40em) {
  .history-filter {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* The drop-down list of the app (owner's review of 22 Oct 2026): the field shows what is
   chosen and opens a list over the page below. Several choices have a box each (the
   clients of "Alle Berichte", a member's clients); one choice has none (`.pick-single`,
   which app.js builds from every <select>; the <select> stays in the form, hidden). */
.pick {
  position: relative;
}
.pick summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.pick summary::after {
  content: "▾";
  font-size: var(--fs-s);
}
fieldset:disabled .pick summary,
.pick.is-off summary {
  border: 1px dashed var(--ink-2);
  background: var(--shade);
  color: var(--ink-2);
  cursor: not-allowed;
}
.pick summary.is-placeholder {
  color: var(--ink-2);
}
/* the line between the groups of a long list (the currencies, TOUR-346) */
.pick-divider {
  margin: var(--s2) 0;
  border-top: 1px solid var(--rule);
}
.pick-divider[hidden] {
  display: none;
}
/* the row's page read by a Leser (TOUR-346): the fieldset only greys, it draws nothing */
.row-fields-set {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* the search of a long list stays on top while it scrolls */
.pick-search {
  position: sticky;
  top: calc(-1 * var(--s2));
  z-index: 1;
  height: var(--control-2);
  margin-bottom: var(--s2);
}
.pick-option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--control-2);
  padding: 0 var(--s2);
  border: 0;
  border-left: 3px solid transparent;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pick-option:hover,
.pick-option:focus-visible {
  background: var(--paper);
}
.pick-option[aria-selected="true"] {
  border-left-color: var(--ink);
  font-weight: var(--w-semi);
}
.pick-option:disabled {
  color: var(--ink-2);
  cursor: not-allowed;
}
/* An address of the search in "Ihr Unternehmen" (TOUR-263): the street on top, PLZ, Ort and
   Land below in the second line's size, room between the addresses. */
.pick-option.is-address {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--s1);
  padding-bottom: var(--s1);
}
.pick-option.is-address small {
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.pick summary::-webkit-details-marker {
  display: none;
}
.pick-list {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  max-height: 18em;
  overflow-y: auto;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--ink);
  background: var(--sheet);
}
.pick-list .cb {
  display: flex;
  min-height: var(--control-2);
}
.history-filter-act {
  padding-bottom: 2px;
}
.history-why {
  display: block;
  max-width: 22em;
  font-size: var(--fs-th);
  color: var(--ink-2);
}
/* A group of settings inside a section of a form. */
.form-subhead {
  margin-top: var(--s6);
  font-size: var(--fs-m);
  font-weight: var(--w-semi);
}
/* What the member's role does not allow: shown, greyed, not usable (5.6:1 on its ground).
   A greyed button keeps its slab; a greyed link in running text or in the sections stays text. */
.is-off,
.is-off:hover {
  color: var(--ink-2);
  cursor: not-allowed;
  text-decoration: none;
}
.btn.is-off,
.btn.is-off:hover {
  border-color: var(--rule-soft);
  background: var(--rule-soft);
  box-shadow: none;
}
.nav .is-off {
  display: block;
  padding: 9px 0;
}
/* Groups fields only to switch them off together; it has no look of its own. */
fieldset.bare {
  display: contents;
}
fieldset:disabled input,
fieldset:disabled select {
  background: var(--paper);
  color: var(--ink-2);
  cursor: not-allowed;
}
.notice[data-role-note],
.notice[data-preview-end] {
  margin-block: var(--s4);
}
/* A form that is being sent: its button waits. */
.btn[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}
/* While htmx loads the next view. */
.htmx-request {
  opacity: 0.6;
  transition: opacity 150ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* The public site on paper: the logo, the text and who offers it. The page for Kanzleien
   (.lp-sheet) is set to fit two sides of an A4 sheet, its PDF. Nothing here reaches a
   screen of the app. */
@page site {
  size: A4;
  margin: 12mm 16mm;
}
@media print {
  .p-landing {
    page: site;
  }
  .p-landing .lp {
    max-width: none;
    padding: 0;
  }
  .p-landing .skip-link,
  .lp-nav .links,
  .lp-nav > .btn,
  .lp-foot nav,
  .lp-pdf {
    display: none;
  }
  .lp-nav {
    padding: 0 0 6pt;
  }
  /* The paper colour of the screen is not printed; the sign of the logo is. */
  .p-landing .logo-sign * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .lp-legal {
    max-width: none;
  }
  .lp-legal h2 {
    break-after: avoid;
  }
  .lp-legal .ledger,
  .lp-legal li {
    break-inside: avoid;
  }
  .lp-legal a {
    text-decoration: none;
  }
  .lp-sheet {
    padding: 10pt 0 12pt;
    font-size: 8.5pt;
    line-height: 1.3;
  }
  .lp-sheet h1 {
    font-size: 17pt;
  }
  .lp-sheet h2 {
    margin-top: 8pt;
    padding-top: 4pt;
    font-size: 10pt;
  }
  .lp-sheet p,
  .lp-sheet ul,
  .lp-sheet table {
    margin-top: 4pt;
  }
  .lp-sheet li + li {
    margin-top: 2pt;
  }
  .lp-sheet .ledger {
    font-size: inherit;
  }
  .lp-sheet .ledger th,
  .lp-sheet .ledger td {
    padding: 2pt 5pt;
  }
  .lp-sheet + .lp-foot {
    padding: 6pt 0 0;
    font-size: 7.4pt;
  }
}

/* The tab „Datei erstellen“ (TOUR-256): Mandant, platforms, period and target in one row,
   the shortcuts below; what is already in a file is shaded like a row left out. */
.pool-filter {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) auto;
  gap: var(--s2) var(--s4);
  align-items: end;
  margin-top: var(--s4);
}
@media (max-width: 60em) {
  .pool-filter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.pool-filter-act {
  padding-bottom: 2px;
}
.pool-shortcuts {
  margin-top: var(--s2);
}
.pool-banner {
  margin-top: var(--s4);
}
.pool-create {
  margin-top: var(--s5);
}
.ledger tr.is-excluded > * {
  background: var(--shade);
  color: var(--ink-2);
}
/* Choosing the version of a Vorgang (TOUR-255): one column per report, what differs red. */
.versions {
  margin-top: var(--s4);
}
.versions td.differs {
  background: var(--red-tint);
  color: var(--red);
  font-weight: 600;
}
.version-who {
  display: block;
  color: var(--ink-2);
  font-size: var(--fs-s);
  font-weight: 400;
}