/* =========================================================================
   KRONENWERK — the interface
   =========================================================================

   A dark, layered surface system with one restrained warm gold accent and two
   semantic colours. It replaces a light red-heavy palette that made a full
   accounting and banking platform read as a small invoicing utility.

   THE FOUR-WAY COLOUR RULE, because it is the thing that must not drift:

     gold     brand and interaction — active navigation, primary action,
              selected filter, focused control, the emphasised line on a chart.
              Never status.
     green    positive: money in, paid, settled, delivered, validated.
     red      negative: overdue, failed, bounced, refused, money that is a problem.
     grey     everything neutral: draft, pending, needs review, not started.

   Gold is deliberately absent from status. On a screen whose job is to say
   whether an invoice passed validation, a brand colour that also carries meaning
   is a brand colour nobody can read.

   COLOUR IS NEVER THE ONLY SIGNAL. Every status carries a word. Every amount
   carries a sign. A person who cannot distinguish red from green loses nothing.

   ========================================================================= */

/* ------------------------------------------------------------------ tokens */

/* THE GROUND IS WHITE.

   It was near-black, and the light theme below it was an opt-in that nothing
   ever opted into: no template, controller or script has ever set data-theme,
   so those values had been written, validated for contrast and colour blindness,
   and then never rendered. ty asked for white, so the two blocks swapped places.
   Light is now what :root says and therefore what everybody sees; the dark
   palette is kept intact under data-theme="dark", every value unchanged, so the
   identity it was built for is one attribute away rather than gone.

   Both palettes were validated separately and neither is an inversion of the
   other. The semantic pair especially: a naive inversion of the dark green and
   red collapses to 3.9 ΔE under deuteranopia, which is why the light steps are
   their own colours.

   Documents remain the exception and are handled separately: .doc-frame renders
   on white in either theme, because an invoice preview that inverts is a preview
   that lies about what will print. */
:root {
  color-scheme: light;
  --grund:        #ECE8DF;
  --flaeche:      #F9F7F2;
  --flaeche-hoch: #EEEAE1;
  --flaeche-tief: #F3F0EA;
  --linie:        #E3DED3;
  --linie-stark:  #CFC7B8;
  /* The one dark surface by day: the card that carries the headline figure. */
  --tintenkarte:       #1B1915;
  --tintenkarte-hoch:  #2A2721;
  --tintenkarte-linie: #3A362E;
  --auf-tintenkarte:   #F6F2E9;
  --auf-tintenkarte-2: #BDB6A8;
  --auf-tintenkarte-3: #8E887B;
  --tinte:        #17150F;
  --tinte-2:      #4E4A42;
  /* Gehoben von #838B98 auf #616977.
     #838B98 ergab auf dem hellen Grund 3.15:1 und auf der eingesunkenen Fläche
     2.96:1 -- unter den 4.5:1, die Fliesstext braucht. Getragen hat diese Farbe
     unter anderem die Passwortregel, den Hinweis "Später nicht mehr änderbar"
     und jeden Feldhinweis im Registrierformular: also genau die Sätze, die
     jemand liest, WEIL er unsicher ist. #616977 kommt auf 5.07:1 und 4.76:1 und
     bleibt dabei eindeutig die leisere von drei Tintenstufen. */
  --tinte-3:      #6F6A5F;
  --tinte-4:      #9C968A;
  --gold:         #A88A4E;
  --gold-hell:    #C4A96E;
  --gold-dunkel:  #8A6E36;
  /* Die Schrift auf goldenem Grund.
     Sie stand als #17130A fest verdrahtet in .btn-primary und ergab im hellen
     Modus 3.66:1 -- auf dem Knopf, der "Anmelden", "Konto anlegen" und
     "Passwort setzen" trägt. Im dunklen Modus ist dieselbe dunkle Tinte
     richtig, weil das Gold dort hell ist. Also ein Merkmal statt einer Zahl:
     hell auf dunklem Gold, dunkel auf hellem Gold. */
  --gold-tinte:   #FAF6EC;
  --gold-tief:    #F3ECDC;
  --gold-linie:   #E2D5B3;
  --positiv:      #1E7A4C;
  --positiv-tief: #EAF5EF;
  --positiv-linie:#BCDCC9;
  --negativ:      #A8443A;
  --negativ-tief: #FBEDEB;
  --negativ-linie:#E6C2BC;
  /* The light-mode pair is separately validated: the dark steps are far too light
     on white, and a naive inversion collapses to 3.9 ΔE under deuteranopia. */
  --reihe-ein:      #3D9B72;
  --reihe-aus:      #9E3D33;
  --reihe-netto:    #A88A4E;
  --reihe-ein-text: #1E7A4C;
  --reihe-aus-text: #A8443A;
  --schatten: 0 1px 2px rgba(23,21,15,.04), 0 14px 32px -18px rgba(23,21,15,.16);
  --schatten-hoch: 0 2px 6px rgba(23,21,15,.06), 0 24px 48px -20px rgba(23,21,15,.22);

  /* THE TYPEFACES AND THE CORNERS ARE NOT A THEME.

     They were defined only inside the dark block below, and nothing in this
     product has ever set data-theme. So --sans, --mono and every --radius have
     been undefined on every page anybody has ever loaded: an undefined custom
     property is not an error, the declaration is simply dropped, and the whole
     interface has been rendering in the browser's default serif with square
     corners since the day the two palettes swapped places.

     It is invisible in review because the dark block defines them correctly and
     reads as the place they live. It is invisible to the structural test too,
     which asks whether a property is defined ANYWHERE in the file and not
     whether it is defined in the block that is actually in force. Found on the
     one page in the product a stranger reads — a merchant's own customer,
     holding their invoice — where a serif fallback does not read as a styling
     slip but as a page that is not really theirs.

     They are the same in both palettes because a typeface is not a colour. */
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* Die Werte, die ein GEZEICHNETER BELEG liest -- die Vorschau im Belegbild und
     das Blatt, das der Kunde eines Haendlers aufmacht. Sie werden pro Beleg
     ueberschrieben (am Element, mit dem Wert dieses Ausstellers); hier stehen sie,
     damit ein Beleg ohne gewaehlte Gestaltung nicht auf den Standard des Browsers
     faellt und niemandem auffaellt, dass er falsch aussieht. */
  --bb-akzent:  #A88A4E;
  --bb-schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bb-zeile:   1.55;
  --marke-akzent:  #8A6A15;
  --marke-schrift: inherit;

  --radius:     10px;
  --radius-sm:  6px;
  --radius-lg:  18px;
}

/* The original dark identity, unchanged. Set data-theme="dark" on <html>. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces, layered rather than flat. A single black plane makes every card
     float in nothing; four steps give the interface a floor, a table and a
     sheet of paper on it. */
  --grund:        #0B0D10;   /* the page itself */
  --flaeche:      #12151A;   /* a card */
  --flaeche-hoch: #191D24;   /* raised: hover, popover, selected row */
  --flaeche-tief: #07080A;   /* sunken: inputs, wells, code */
  --linie:        #232830;   /* ordinary divider */
  --linie-stark:  #333A45;   /* a border that has to be seen */
  --tintenkarte:       #191D24;
  --tintenkarte-hoch:  #232830;
  --tintenkarte-linie: #4A3D1C;
  --auf-tintenkarte:   #F1EFE9;
  --auf-tintenkarte-2: #A6ADB8;
  --auf-tintenkarte-3: #7B828D;

  /* Type. Warm off-white rather than pure white — pure white on near-black
     vibrates, and the warmth agrees with the gold. */
  --tinte:    #F1EFE9;
  --tinte-2:  #A6ADB8;
  --tinte-3:  #6E7784;
  --tinte-4:  #4A515C;

  /* Gold. Warm and slightly desaturated: a brighter, yellower gold reads as
     novelty rather than as an institution. */
  --gold:       #D4A94A;
  --gold-hell:  #E8C77C;
  --gold-dunkel:#A8842F;
  --gold-tinte: #17130A;
  --gold-tief:  #221B0D;   /* tinted ground for a selected or focused state */
  --gold-linie: #4A3C1B;

  /* Semantic.

     Two jobs, two steps. A status word is text and needs to be readable; a chart
     bar is a filled area and needs to be distinguishable from its neighbour under
     colour blindness. The same hex cannot be best at both, so each has its own.

     The chart pair was checked rather than chosen: the previous green and red
     were 5.4 ΔE apart under deuteranopia — a reader with the commonest form of
     colour blindness could not tell income from expenses. The pair below is 12.6
     apart under the same simulation and still reads as a deep financial green
     against a muted brick red rather than as traffic lights. */
  --positiv:      #55B489;   /* status text: money in, paid, settled, validated */
  --positiv-tief: #0E2119;
  --positiv-linie:#1E4634;
  --negativ:      #DD6A5E;   /* status text: overdue, failed, refused */
  --negativ-tief: #26100D;
  --negativ-linie:#5A2822;

  /* Chart series. Fills, not text. */
  --reihe-ein:      #4CA97F;
  --reihe-aus:      #AE4A41;
  /* Champagne rather than the interface gold. #D4A94A is right on a button, where it
     has to carry a click; drawn as a 2px line across a chart of muted bars the same
     hex reads as orange and pulls the eye off the data. */
  --reihe-netto:    #C6A868;
  --reihe-ein-text: #55B489;
  --reihe-aus-text: #DD6A5E;

  /* Die Werte, die ein GEZEICHNETER BELEG liest -- die Vorschau im Belegbild und
     das Blatt, das der Kunde eines Haendlers aufmacht. Sie werden pro Beleg
     ueberschrieben (am Element, mit dem Wert dieses Ausstellers); hier stehen sie,
     damit ein Beleg ohne gewaehlte Gestaltung nicht auf den Standard des Browsers
     faellt und niemandem auffaellt, dass er falsch aussieht. */
  --bb-akzent:  #8A6A15;
  --bb-schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bb-zeile:   1.55;
  --marke-akzent:  #8A6A15;
  --marke-schrift: inherit;

  --radius:     10px;
  --radius-sm:  6px;
  --radius-lg:  18px;

  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --schatten: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --schatten-hoch: 0 2px 6px rgba(0,0,0,.5), 0 20px 48px -16px rgba(0,0,0,.8);
}


/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1;
}

h1 { font-size: 26px; font-weight: 600; letter-spacing: -.018em; margin: 0 0 4px; line-height: 1.18; }
h2 { font-size: 15px; font-weight: 600; letter-spacing: -.006em; margin: 0; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }

a { color: var(--tinte); text-decoration-color: var(--tinte-4); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--gold); }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

/* Every figure in a financial interface lines up. Columns of proportional
   digits do not, and a total that does not align with the number above it is
   harder to check than it needs to be. */
.num, .mono, table td.num, table th.num, input.num, .amount, .saldo, .total,
.grand, .line-total, .stat .value, .abgleich-differenz {
  font-variant-numeric: tabular-nums;
}
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.num { text-align: right; }

.muted { color: var(--tinte-3); }
.small { font-size: 12.5px; }
.right { text-align: right; }
.mb { margin-bottom: 16px; }
.mt { margin-top: 16px; }
.grow { flex: 1; }
.spacer { flex: 1; }

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

/* A table must be wrapped rather than given the class directly. On a table, `height`
   is a minimum rather than a maximum — the declared 1px does not bind, and the chart's
   screen-reader table stretched the document to eight thousand pixels while remaining
   invisible. Wrapped in an ordinary block, the clip binds; fixed layout stops the same
   table pushing the page sideways on a phone. */
.sr-only table { table-layout: fixed; width: 100%; }

/* Focus is gold and always visible. A focus ring that only appears for keyboard
   users is right; one that never appears is a keyboard user locked out. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------------ shell */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px;
  flex: 0 0 232px;
  background: var(--flaeche-tief);
  border-right: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  padding: 18px 0 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 20px;
  margin-bottom: 6px;
}
.brand .mark { width: 30px; height: auto; color: var(--gold); flex: none; }
.brand span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .19em;
  color: var(--tinte);
}

.nav { display: flex; flex-direction: column; padding: 0 10px; gap: 1px; }

.nav-group {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinte-4);
  padding: 16px 8px 5px;
}
.nav-group:first-child { padding-top: 2px; }

.nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--tinte-2);
  text-decoration: none;
  font-size: 13.5px;
  position: relative;
}
.nav a:hover { background: var(--flaeche); color: var(--tinte); }
.nav a.active {
  background: var(--gold-tief);
  color: var(--gold-hell);
  font-weight: 500;
}
/* A gold rail on the active item, so the active state is not colour alone. */
.nav a.active::before {
  content: "";
  position: absolute;
  left: -10px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
}

.sidebar-foot {
  margin-top: auto;
  padding: 14px 18px 0;
  border-top: 1px solid var(--linie);
  font-size: 12.5px;
  color: var(--tinte-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sidebar-foot form { margin: 0; }
.sidebar-foot button {
  background: none; border: none; color: var(--tinte-3);
  font: inherit; cursor: pointer; padding: 2px 0;
}
.sidebar-foot button:hover { color: var(--tinte); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { padding: 26px 32px 72px; max-width: 1440px; width: 100%; }

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex: none; height: auto; position: static; border-right: none;
             border-bottom: 1px solid var(--linie); }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav-group { display: none; }
  .content { padding: 20px 18px 60px; }
}

/* ------------------------------------------------------------------ topbar */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 32px;
  border-bottom: 1px solid var(--linie);
  background: color-mix(in srgb, var(--grund) 86%, transparent);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.card + .card { margin-top: 16px; }

.card-head {
  padding: 13px 18px;
  border-bottom: 1px solid var(--linie);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-body { padding: 18px; }
.card-body.tight { padding: 12px 18px; }
.card-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--linie);
  background: var(--flaeche-tief);
}
.card-link { display: block; text-decoration: none; color: inherit; }
.card-link:hover .card { border-color: var(--linie-stark); }

.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.two-col { display: grid; gap: 20px; grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } }

.split { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; align-items: center; }
.pad { padding: 18px; }
.inner { padding: 14px; }

/* ------------------------------------------------------------------ stats */

.stat {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 15px 16px;
}
.stat .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-4);
  display: block;
  margin-bottom: 7px;
}
.stat .value {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.024em;
  display: block;
  line-height: 1.1;
}
.stat .sub { font-size: 12px; color: var(--tinte-3); display: block; margin-top: 5px; }
.stat.gut .value { color: var(--positiv); }
.stat.schlecht .value { color: var(--negativ); }

.saldo { font-family: var(--mono); font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.saldo-minus { color: var(--negativ); }

/* Money in and money out differ by more than a hyphen. A column whose only
   distinction is a minus sign is a column people misread. */
.betrag-ein  { color: var(--positiv); }
.betrag-aus  { color: var(--tinte); }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--linie-stark);
  background: var(--flaeche-hoch);
  color: var(--tinte);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--linie); border-color: var(--tinte-4); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gold-tinte);
  font-weight: 600;
}
.btn-primary:hover { background: var(--gold-hell); border-color: var(--gold-hell); }

.btn-quiet { background: transparent; border-color: var(--linie); color: var(--tinte-2); }
.btn-quiet:hover { background: var(--flaeche-hoch); color: var(--tinte); }

.btn-ink { background: var(--tinte); border-color: var(--tinte); color: var(--grund); }

.btn-sm { padding: 5px 10px; font-size: 12.5px; }

.btn.bad, .btn-bad { color: var(--negativ); border-color: var(--negativ-linie); }
.btn.bad:hover { background: var(--negativ-tief); }

/* ------------------------------------------------------------------ pills */

.pill, .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .05em;
  padding: 2.5px 7px;
  border-radius: 3px;
  border: 1px solid var(--linie-stark);
  background: var(--flaeche-hoch);
  color: var(--tinte-2);
  white-space: nowrap;
}
.badge-lg { font-size: 12px; padding: 4px 9px; }

/* A leading glyph so status survives greyscale and colour blindness. */
.pill::before, .badge::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .85; flex: none;
}
.pill.ohne-punkt::before, .nav .pill::before { display: none; }

.pill-paid, .pill-matched, .badge-ok, .verdict-valid {
  color: var(--positiv); border-color: var(--positiv-linie); background: var(--positiv-tief);
}
.pill-overdue, .badge-bad, .verdict-invalid {
  color: var(--negativ); border-color: var(--negativ-linie); background: var(--negativ-tief);
}
/* Neutral is neutral. Overdue is red; not-yet-started is simply not started. */
.pill-open, .pill-draft, .pill-review, .pill-categorised, .pill-excluded,
.pill-warn, .badge-warn {
  color: var(--tinte-2); border-color: var(--linie-stark); background: var(--flaeche-hoch);
}
.pill-issued, .pill-legal { color: var(--gold-hell); border-color: var(--gold-linie); background: var(--gold-tief); }
.pill-transfer { color: var(--tinte-2); border-color: var(--linie-stark); background: var(--flaeche-hoch); }
/* Pending is hatched, so "the bank has not decided" is visible without colour. */
.pill-pending {
  color: var(--tinte-3); border-color: var(--linie-stark);
  background-image: repeating-linear-gradient(135deg,
    transparent, transparent 3px, var(--flaeche-hoch) 3px, var(--flaeche-hoch) 6px);
}
.pill-pending::before { border-radius: 0; transform: rotate(45deg); }

/* ------------------------------------------------------------------ tables */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.card .table-wrap { border: none; border-radius: 0; }

table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
caption { text-align: left; padding: 12px 16px; color: var(--tinte-3); font-size: 12px; }

thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-4);
  padding: 9px 16px;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche-tief);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
tbody td { padding: 10px 16px; border-bottom: 1px solid var(--linie); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--flaeche-hoch); }
.row-overdue td { background: color-mix(in srgb, var(--negativ-tief) 60%, transparent); }

/* ------------------------------------------------------------------ forms */

label, .label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--tinte-2);
  margin-bottom: 5px;
}
.label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--tinte-4);
}

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="date"], input[type="number"], input[type="tel"], input[type="url"],
select, textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--tinte);
  background: var(--flaeche-tief);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  transition: border-color .12s ease, background .12s ease;
}
input::placeholder, textarea::placeholder { color: var(--tinte-4); }
input:hover, select:hover, textarea:hover { border-color: var(--tinte-4); }
/* Der Tastaturring bleibt.
   Hier stand outline:none fuer ALLE Fokuszustaende, und weil input:focus
   spezifischer ist als das globale :focus-visible, war der zwei Pixel breite
   Ring auf jedem Formularfeld dieser Anwendung weg. Was blieb, war der
   Farbwechsel des Rahmens -- der reicht gerade eben, aber er ist die einzige
   Anzeige, und er verschwindet mit der naechsten Aenderung an der Rahmenfarbe,
   ohne dass jemand merkt, dass er dabei die Tastaturbedienung mitgenommen hat.
   Weggenommen wird der Ring jetzt nur noch dort, wo er auch gemeint war: beim
   Klick mit der Maus. */
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  background: var(--flaeche);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent);
}

input:focus:not(:focus-visible), select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinte-3) 50%),
                    linear-gradient(135deg, var(--tinte-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
textarea { min-height: 84px; resize: vertical; }

.input-sm { padding: 5px 8px; font-size: 13px; }
.num-input { text-align: right; font-variant-numeric: tabular-nums; }

.fields { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.field { min-width: 0; }
.field-wide { grid-column: 1 / -1; min-width: 0; }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.form-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

.hint { font-size: 12px; color: var(--tinte-3); margin-top: 5px; }

.checkbox { display: flex; align-items: flex-start; gap: 8px; }
.checkbox input { width: auto; margin-top: 3px; }
.checkbox label { margin: 0; font-size: 13.5px; color: var(--tinte); }

/* ------------------------------------------------------------------ notices */

.notice {
  border: 1px solid var(--linie-stark);
  border-left-width: 2px;
  background: var(--flaeche-hoch);
  color: var(--tinte-2);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 14px;
}
.notice-ok    { color: var(--positiv); border-color: var(--positiv-linie); border-left-color: var(--positiv); background: var(--positiv-tief); }
.notice-error { color: var(--negativ); border-color: var(--negativ-linie); border-left-color: var(--negativ); background: var(--negativ-tief); }
.notice-brass, .notice-warn { color: var(--gold-hell); border-color: var(--gold-linie); border-left-color: var(--gold); background: var(--gold-tief); }
.notice-info, .notice-quiet { color: var(--tinte-2); border-left-color: var(--linie-stark); }

/* ------------------------------------------------------------------ empty */

.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--tinte-3);
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.empty h3 { color: var(--tinte); font-size: 15px; margin-bottom: 6px; }
.empty p { max-width: 44ch; margin-left: auto; margin-right: auto; font-size: 13.5px; }

/* ------------------------------------------------------------------ misc */

.kv { display: grid; gap: 8px; }
.kv > div { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.kv .label { margin: 0; }

.facts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.facts > div { display: flex; flex-direction: column; gap: 3px; }

.plain, .tight-list, .checklist { list-style: none; padding: 0; margin: 0; }
.plain li, .tight-list li { padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: 13.5px; }
.plain li:last-child, .tight-list li:last-child { border-bottom: none; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 18px; }
.tabs a {
  padding: 8px 12px; font-size: 13.5px; color: var(--tinte-3);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--tinte); }
.tabs a.active { color: var(--gold-hell); border-bottom-color: var(--gold); font-weight: 500; }

.pager { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: 13px; color: var(--tinte-3); }

.details, details { border: 1px solid var(--linie); border-radius: var(--radius-sm); background: var(--flaeche-tief); }
details > summary {
  padding: 9px 13px; cursor: pointer; font-size: 13px; color: var(--tinte-2);
  list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸ "; color: var(--tinte-4); }
details[open] > summary::before { content: "▾ "; }
details > summary:hover { color: var(--tinte); }
.details-body, details > *:not(summary) { padding: 0 13px 13px; font-size: 13px; }

.meter { height: 5px; background: var(--flaeche-tief); border-radius: 3px; overflow: hidden; }
.meter-fill { height: 100%; background: var(--gold); }

.rule { height: 1px; background: var(--linie); border: none; margin: 18px 0; }

.mark { color: var(--gold); }
.siegel { width: 54px; height: 54px; color: var(--positiv); }

.gruende { font-size: 11.5px; color: var(--tinte-3); line-height: 1.5; }

.abgleich-differenz { font-family: var(--mono); font-size: 19px; }
.abgleich-stimmt { color: var(--positiv); }
.abgleich-offen  { color: var(--negativ); }

/* Documents render on paper, always, whichever theme the app is in. An invoice
   preview that inverts is an invoice preview that lies about what will print. */
.doc-frame, .doc-preview {
  background: #FFFFFF;
  color: #14161A;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.paperclip { color: var(--tinte-3); }

/* ------------------------------------------------------------------ error page */

.fehlerseite {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 22px;
  background:
    radial-gradient(90% 60% at 50% 0%,
      color-mix(in srgb, var(--gold) 7%, transparent) 0%, transparent 60%),
    var(--grund);
}
.fehlerseite-inhalt { max-width: 44ch; text-align: center; }
.fehlerseite-inhalt .mark { width: 44px; height: auto; color: var(--gold); margin-bottom: 26px; }
.fehlercode {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--tinte-4);
  margin: 0 0 10px;
}
.fehlerseite h1 { font-size: 24px; margin-bottom: 10px; text-wrap: balance; }
.fehlertext { color: var(--tinte-2); font-size: 14.5px; margin-bottom: 24px; }
.fehlerseite details { text-align: left; margin-top: 22px; }

/* =========================================================================
   THE SHELL, SECOND PASS
   =========================================================================

   The rail, the bar and the page. What changed and why:

   A dashboard made of twelve identically sized cards tells the reader that
   twelve things matter equally, which is the same as telling them nothing
   matters. So the page below is built out of rhythm instead of rectangles —
   a band of figures on one rule, one large plane for the chart, then blocks
   separated by space and a hairline. Exactly one element on the overview has
   a border and a radius, and it is the chart, because a chart is a plane that
   data is drawn on.

   Monospace is for identifiers: account numbers, IBANs, invoice numbers,
   checksums. Not for headings, not for headline amounts, not for navigation.
   A financial interface set entirely in a typewriter face reads as a terminal
   emulator, and the amounts get harder to compare rather than easier —
   Archivo has tabular figures and does the alignment job without the costume.

   ========================================================================= */

/* ------------------------------------------------------------------ top bar */

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 32px;
  height: 58px;
  border-bottom: 1px solid var(--linie);
  background: color-mix(in srgb, var(--grund) 88%, var(--flaeche));
  position: sticky;
  top: 0;
  z-index: 40;
}

.suchfeld { flex: 1; max-width: 520px; margin: 0; }

.suchfeld input {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  background: var(--flaeche-tief);
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  color: var(--tinte);
  font-size: 13.5px;
}
.suchfeld input::placeholder { color: var(--tinte-4); }
.suchfeld input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-tief);
}

.kopf-aktionen { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.sprachkuerzel { font-size: 12px; letter-spacing: .06em; font-weight: 600; }

/* A CSS-only popover: a hidden checkbox and its label.

   This was a <details>/<summary> first, which is the better semantic answer — until
   Chromium 141 turned out to paint the disclosure triangle whatever the summary's display,
   list-style and ::marker say, and a "▸ + Create" button shipped. A checkbox has no UA
   ornament to fight, keeps working with JavaScript off, and stays keyboard-operable: the
   input is focusable and its focus ring is drawn on the label. */
.menue { position: relative; }
.menue-schalter {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.menue > label { cursor: pointer; }
.menue-schalter:focus-visible + label {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.menue-tafel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  padding: 5px;
  background: var(--flaeche-hoch);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
  z-index: 60;
  flex-direction: column;
}
.menue-schalter:checked ~ .menue-tafel { display: flex; }
/* Both menus sit at the right edge of the bar, so both panels hang from the right.
   Left-aligned, the create panel ran off the side of the window. */
.menue .menue-tafel { left: auto; right: 0; }
.menue-rechts .menue-tafel { min-width: 170px; }

.menue-tafel a {
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--tinte-2);
  text-decoration: none;
}
.menue-tafel a:hover { background: var(--flaeche); color: var(--tinte); }
.menue-tafel a.gewaehlt { color: var(--gold-hell); background: var(--gold-tief); }

/* ------------------------------------------------------------------ rail */

.brand { display: flex; align-items: center; justify-content: space-between; }
.brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-link span { color: var(--tinte); }

/* Die Firma, in der gerade gearbeitet wird. Sitzt unter der Marke und nicht in der
   Navigation, weil sie kein Ziel ist, sondern der Rahmen um alles darunter. */
.firmenwahl { width: 100%; }
.firmenwahl select {
  width: 100%;
  padding: 5px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--linie-stark);
  background: var(--flaeche-hoch);
  color: var(--tinte-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
.firmenwahl select:hover { color: var(--tinte); border-color: var(--tinte-4); }

.nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.nav-zahl {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--flaeche-hoch);
  border: 1px solid var(--linie-stark);
  color: var(--tinte-2);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav a.active .nav-zahl { background: var(--gold-tief); border-color: var(--gold-linie); color: var(--gold-hell); }

.sidebar-person {
  font-size: 12.5px;
  color: var(--tinte-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigation-schalter, .navigation-auf, .navigation-zu, .navigation-schleier { display: none; }

/* ------------------------------------------------------------------ page head */

/* A page title is a label, not a headline. 40px of display type at the top of an
   accounting screen reads as a marketing page; the figures underneath are the
   thing worth that much weight. */
.seitenkopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
}
.seitenkopf h1 { margin: 0; font-size: 21px; letter-spacing: -.015em; font-weight: 600; }
.seitenkopf .muted { font-size: 12.5px; }

/* ------------------------------------------------------------------ headline band

   Executive figures, not four widgets. The container chrome is a single rule
   above and below and a hairline between; the numbers carry the weight. They were
   31px in boxes with 18px of padding, which made four statistics look like four
   products. */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  margin: 0 0 26px;
}

.kennzahl {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 20px 13px 0;
  min-width: 0;
}
.kennzahl + .kennzahl { border-left: 1px solid var(--linie); padding-left: 20px; }

.kennzahl-name {
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--tinte-3);
  font-weight: 600;
}
.kennzahl-wert {
  font-size: clamp(19px, 1.55vw, 24px);
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kennzahl-fuss { font-size: 11.5px; color: var(--tinte-4); }

.ist-positiv { color: var(--positiv); }
.ist-negativ { color: var(--negativ); }

/* ------------------------------------------------------------------ the chart

   One figure, over time, and almost nothing else.

   What made the previous chart look like a framework demo was that it was
   trying to say three things at once: income bars, expense bars, a net line, a
   legend to name them, an axis to measure them and a grid to read them
   against. Six kinds of ink for a screen somebody opens to ask one question.

   This is a line. It carries no axis, no gridlines and no legend, because a
   single series needs none of them and the exact figure is written above it in
   type — which is easier to read than any axis. What is left is the shape, and
   the shape is what the chart is for. The line only becomes interactive
   furniture when a pointer is on it. */

.kurve {
  padding: 4px 0 6px;
  margin: 0 0 34px;
}

/* Which figure. Chips above the number, the way a person picks a holding before reading
   its value. */
.kurve-kennzahlen {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.kurve-kennzahlen a {
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--tinte-3);
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.kurve-kennzahlen a:hover { color: var(--tinte); background: var(--flaeche-tief); }
.kurve-kennzahlen a.gewaehlt { color: var(--tinte); background: var(--flaeche-tief); font-weight: 600; }
.kurve-kennzahlen a:focus-visible,
.kurve-spannen a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.kurve-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.kurve-wert { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* The one number on the screen that is allowed to be this size. */
.kurve-betrag {
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  line-height: 1;
}

.kurve-lauf {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tinte-2);
}
/* The change as a small tinted mark, the way a portfolio app writes a day's move. */
.kurve-lauf-marke {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--flaeche-tief);
  font-weight: 600;
  color: var(--tinte-2);
}
.kurve-lauf.ist-positiv .kurve-lauf-marke { color: var(--positiv); background: var(--positiv-tief); }
.kurve-lauf.ist-negativ .kurve-lauf-marke { color: var(--negativ); background: var(--negativ-tief); }
.kurve-pfeil { font-size: 9px; line-height: 1; }
.kurve-prozent { font-weight: 500; opacity: .85; }
.kurve-prozent::before { content: "·"; margin-right: 5px; opacity: .6; }
.kurve-lauf .kurve-datum { color: var(--tinte-4); }

.kurve-flaeche { margin: 18px 0 0; position: relative; }
.kurve-flaeche svg {
  display: block;
  width: 100%;
  height: 200px;
  overflow: visible;
  touch-action: pan-y;
  cursor: crosshair;
}

/* The wash under the line: strong at the line, gone by the bottom. On the dark
   identity it reads as light off the line; on the cream page it is kept quieter,
   because a tint with no luminance falloff to hide it reads as a filled shape. */
.verlauf-oben  { stop-color: var(--gold); stop-opacity: .16; }
.verlauf-mitte { stop-color: var(--gold); stop-opacity: .04; }
.verlauf-unten { stop-color: var(--gold); stop-opacity: 0; }
:root[data-theme="dark"] .verlauf-oben  { stop-opacity: .26; }
:root[data-theme="dark"] .verlauf-mitte { stop-opacity: .06; }

.kurve-fuellung { fill: url(#kurvenfarbe); stroke: none; }

.kurve-linie {
  stroke: var(--gold);
  stroke-width: 2.25;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* Without this the stroke is scaled by the non-uniform viewBox and comes out
     thicker at one window width than another. */
  vector-effect: non-scaling-stroke;
}
:root[data-theme="dark"] .kurve-linie {
  filter: drop-shadow(0 0 6px rgba(217, 172, 90, .38));
}

/* The end of the line: where the figure stands now. */
.kurve-halo { fill: var(--gold); opacity: .16; }
.kurve-endpunkt { fill: var(--gold); stroke: var(--grund); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .kurve-halo { animation: kurve-atmen 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes kurve-atmen {
    0%, 100% { transform: scale(.7); opacity: .22; }
    50%      { transform: scale(1.15); opacity: .06; }
  }
}
.kurve-flaeche.ist-aktiv .kurve-ende { visibility: hidden; }

/* The marker only exists while somebody is asking. `hidden` is not enough on an SVG
   group — the attribute is honoured for HTML elements and skipped here — so the state is
   a class, and the class is what the script toggles. */
.kurve-marke { visibility: hidden; }
.kurve-marke.ist-aktiv { visibility: visible; }

.kurve-fuehrung {
  stroke: var(--linie-stark);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}
.kurve-punkt {
  fill: var(--gold);
  stroke: var(--grund);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

/* 1W · 1M · 3M · 6M · YTD · 1Y · All. Small, centred, under the line. */
.kurve-spannen {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 14px;
}
.kurve-spannen a {
  min-width: 40px;
  padding: 6px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--tinte-3);
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.kurve-spannen a:hover { color: var(--tinte); }
.kurve-spannen a.gewaehlt { color: var(--gold); background: var(--gold-tief); }

.kurve-leer {
  margin: 26px 0 18px;
  font-size: 13.5px;
  color: var(--tinte-3);
}

@media (max-width: 720px) {
  .kurve-flaeche svg { height: 172px; }
  .kurve-betrag { font-size: 32px; }
  .kurve-spannen a { min-width: 0; padding: 6px 8px; }
}



/* ------------------------------------------------------------------ settings

   A fixed list of sections on the left, one section's content on the right.

   The previous surface was four cards of different heights in a grid, one of
   which was not a link. Cards are for things you choose between; settings are
   things you navigate, and the difference shows the moment there are more than
   four of them. Rows rather than boxes, one column of content, aligned labels
   and values, and a section list that does not reflow as the product grows. */

.einstellungen {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 38px;
  align-items: start;
}

.einstellungen-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: sticky;
  top: 22px;
}

.einstellungen-nav a {
  display: block;
  padding: 7px 11px;
  font-size: 13.5px;
  color: var(--tinte-2);
  text-decoration: none;
  border-radius: 5px;
  border-left: 2px solid transparent;
}
.einstellungen-nav a:hover { color: var(--tinte); background: var(--flaeche); }
.einstellungen-nav a.gewaehlt {
  color: var(--gold);
  background: var(--gold-tief);
  border-left-color: var(--gold);
  font-weight: 500;
}
.einstellungen-nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.einstellungen-gruppe {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-4);
  font-weight: 600;
  padding: 18px 11px 6px;
}

.einstellungen-inhalt { min-width: 0; max-width: 760px; }

/* One block of settings. A rule above the first row and below the last, and a
   hairline between rows — the same treatment the dashboard figures get, for the
   same reason: separation without a box around everything. */
.setzblock {
  border-top: 1px solid var(--linie);
  margin: 0 0 30px;
}
.setzblock-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 0 10px;
  border-bottom: 1px solid var(--linie);
}
.setzblock-kopf h2 {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-3);
  font-weight: 600;
  margin: 0;
}
.setzblock-kopf .setzblock-mehr { font-size: 12.5px; }

.setzeile {
  padding: 13px 0;
  border-bottom: 1px solid var(--linie);
}
.setzeile:last-child { border-bottom: none; }

.setzeile-kopf {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.setzeile-name { font-size: 14px; color: var(--tinte-2); flex: 0 0 auto; }
.setzeile-wert {
  margin-left: auto;
  font-size: 14px;
  color: var(--tinte);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow-wrap: anywhere;
}
.setzeile-pfeil {
  color: var(--tinte-3);
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  flex: none;
}
.setzeile-pfeil:hover { color: var(--gold); }
.setzeile-hinweis {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--tinte-4);
  max-width: 66ch;
  line-height: 1.55;
}

/* A whole row that is a link. Same geometry, so a navigable setting and a stated
   one sit on the same grid. */
a.setzeile { display: block; text-decoration: none; }
a.setzeile:hover .setzeile-name { color: var(--tinte); }
a.setzeile:hover .setzeile-pfeil { color: var(--gold); }

/* Status, as a word and a shape rather than a colour alone. */
.zustand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tinte-2);
  white-space: nowrap;
}
.zustand::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tinte-4);
  flex: none;
}
.zustand.ist-verbunden::before { background: var(--positiv); }
.zustand.ist-achtung::before   { background: var(--gold); }
.zustand.ist-fehler::before    { background: var(--negativ); }
.zustand.ist-aus::before       { background: var(--tinte-4); }

@media (max-width: 900px) {
  .einstellungen { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .einstellungen-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--linie);
  }
  .einstellungen-gruppe { display: none; }
  .einstellungen-nav a { border-left: none; }
}


/* A secret shown once. Deliberately loud: this is the only moment the value
   exists in readable form, and a person who scrolls past it has lost it. */
.geheimnis {
  border: 1px solid var(--gold-linie);
  background: var(--gold-tief);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 22px;
}
.geheimnis-kopf {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold);
}
.geheimnis-wert {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--tinte);
  background: var(--flaeche-tief);
  border-radius: 4px;
  padding: 9px 11px;
  overflow-wrap: anywhere;
  user-select: all;
}
.geheimnis .hint { margin-top: 8px; }

/* A list of checkboxes that stays a list rather than becoming a wall. */
.bereichsliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px 16px;
  max-height: 230px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche-tief);
}
.bereichsliste .checkbox { font-size: 12.5px; }

.knopf-klein { padding: 3px 9px; font-size: 12px; }

/* A value stated rather than edited. Same optical weight as an input's text, so a
   read-only fact and an editable one sit on the same line. */
.feld-wert {
  margin: 0;
  padding: 9px 0;
  font-size: 14px;
  color: var(--tinte);
}


/* ---------------------------------------------------- connecting a bank

   The screen this replaced was a country dropdown of ISO codes and a free-text
   box marked "Bank name (optional)". A customer was being asked to type "CA"
   and then type the name of their own bank. The institution list now comes
   from the provider, and where the provider runs its own picker — Plaid Link
   does — this screen hands over rather than imitating it. */

.banksuche {
  width: 100%;
  padding: 10px 13px;
  font-size: 14px;
  background: var(--flaeche-tief);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  color: var(--tinte);
  margin: 0 0 12px;
}
.banksuche:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.bankliste { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow-y: auto; }
.bankliste li + li { border-top: 1px solid var(--linie); }
.bankliste form { margin: 0; }

.bankzeile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 8px;
  background: none;
  border: 0;
  color: var(--tinte);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.bankzeile:hover { background: var(--flaeche); }
.bankzeile:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.banklogo { width: 26px; height: 26px; object-fit: contain; border-radius: 4px; flex: none; }
.banklogo-leer { background: var(--flaeche-hoch); }
.bankname { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bankmarke { font-size: 11px; color: var(--tinte-4); flex: none; }
.bankpfeil { color: var(--tinte-3); flex: none; }

/* Sandbox says so on the row, in the place a bank's name would be. */
.marke-sandbox {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold);
  background: var(--gold-tief);
  border: 1px solid var(--gold-linie);
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 7px;
  vertical-align: 1px;
}

.hinweis-sandbox {
  border-left: 2px solid var(--gold);
  background: var(--gold-tief);
  padding: 11px 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  color: var(--tinte-2);
  margin: 0 0 22px;
}
.hinweis-sandbox strong { color: var(--gold); letter-spacing: .08em; margin-right: 8px; }

.anderes-land { margin-top: 22px; font-size: 13px; }
.anderes-land summary { color: var(--tinte-3); cursor: pointer; }
.anderes-land summary:hover { color: var(--tinte-2); }
.landliste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ------------------------------------------------------------------ blocks */

.uebersicht-spalten {
  display: grid;
  gap: 26px 40px;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  align-items: start;
}
.spalte-breit, .spalte-schmal { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

/* A block is a heading, a rule and its content. No border, no radius, no shadow:
   the separation is done by the rule and the space, which is enough. */
.block > * { min-width: 0; }
.block-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--linie);
}
.block-kopf h2 { margin: 0; font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
                 color: var(--tinte-3); font-weight: 600; }
.block-mehr { font-size: 12px; color: var(--tinte-3); text-decoration: none; }
.block-mehr:hover { color: var(--gold-hell); }
.block-leer { font-size: 13.5px; color: var(--tinte-3); margin: 0; }
.block-leer a { color: var(--gold-hell); }

/* ------------------------------------------------------------------ the queue */

.aufgaben { list-style: none; margin: 0; padding: 0; }
.aufgaben li + li { border-top: 1px solid var(--linie); }
.aufgaben a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 4px 10px 0;
  text-decoration: none;
  color: var(--tinte);
  font-size: 13px;
}
.aufgaben a:hover { background: var(--flaeche); }
/* A 5px dot rather than a coloured rail. The rail read as a card edge; the dot
   reads as a severity marker, and the word beside it says the same thing. */
.aufgabe-punkt { width: 5px; height: 5px; border-radius: 50%; flex: none;
                 background: var(--linie-stark); }
.stufe-dringend .aufgabe-punkt { background: var(--negativ); }
.stufe-wichtig .aufgabe-punkt  { background: var(--gold); }
.aufgabe-text { flex: 1; min-width: 0; }
.aufgabe-pfeil { color: var(--tinte-4); font-size: 15px; line-height: 1; }
.aufgaben a:hover .aufgabe-pfeil { color: var(--gold-hell); }

/* ------------------------------------------------------------------ open items */

.posten { display: flex; flex-direction: column; gap: 7px; }
.posten { padding-top: 10px; }
.posten-haupt {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.posten-zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--tinte-3);
  font-variant-numeric: tabular-nums;
  padding: 2px 0;
}
.posten-zeile.ist-negativ, .posten-zeile.ist-negativ span { color: var(--negativ); }
.posten .block-mehr { margin-top: 6px; }

/* ------------------------------------------------------------------ accounts */

.kontoliste { list-style: none; margin: 0; padding: 0; }
.kontoliste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px 12px;
  padding: 9px 0;
  align-items: baseline;
}
.kontoliste li + li { border-top: 1px solid var(--linie); }
.konto-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.konto-name > span:first-child { font-size: 13px; overflow: hidden; text-overflow: ellipsis;
                                 white-space: nowrap; }
.konto-bank { font-size: 11px; color: var(--tinte-4); letter-spacing: .01em; }
.konto-saldo { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums;
               text-align: right; white-space: nowrap; }
.konto-warnung { grid-column: 1 / -1; font-size: 12px; color: var(--negativ); }

/* ------------------------------------------------------------------ plain list table */

table.liste { width: 100%; border-collapse: collapse; font-size: 13px; }
table.liste th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinte-4);
  font-weight: 600;
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--linie);
}
table.liste th.num, table.liste td.num { text-align: right; }
table.liste td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--linie); }
table.liste tr:last-child td { border-bottom: none; }
table.liste tbody tr:hover td { background: var(--flaeche); }
table.liste td.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ set-up state */

.einrichten {
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-lg);
  padding: 44px 32px;
  text-align: center;
  max-width: 68ch;
  margin: 8px auto;
}
.einrichten h2 { font-size: 17px; margin: 0 0 10px; text-wrap: balance; }
.einrichten p { color: var(--tinte-3); font-size: 13.5px; margin: 0 auto 20px; max-width: 58ch; }

/* ------------------------------------------------------------------ search page */

.trefferliste { list-style: none; margin: 0 0 26px; padding: 0; }
.trefferliste li + li { border-top: 1px solid var(--linie); }
.trefferliste a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 11px 12px 11px 0;
  text-decoration: none;
  color: var(--tinte);
}
.trefferliste a:hover { background: var(--flaeche); }
.treffer-zeile { grid-column: 1; font-size: 12.5px; color: var(--tinte-3); }
.treffer-titel { grid-column: 1; font-size: 14px; }
.treffer-betrag { grid-row: 1 / span 2; font-variant-numeric: tabular-nums; font-weight: 600; }
.treffer-datum { grid-row: 1 / span 2; font-size: 12.5px; color: var(--tinte-4);
                 font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ narrow */

@media (max-width: 1180px) {
  .uebersicht-spalten { grid-template-columns: minmax(0, 1fr); }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahl:nth-child(3) { border-left: none; padding-left: 0; }
  .kennzahl:nth-child(3), .kennzahl:nth-child(4) { border-top: 1px solid var(--linie); }
}

@media (max-width: 900px) {
  /* The rail becomes a drawer. A checkbox rather than a script, so it opens
     with the keyboard and works with JavaScript off. */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 80;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: var(--schatten-hoch);
  }
  .navigation-schalter:checked ~ .sidebar { transform: none; }
  .navigation-schalter:checked ~ .navigation-schleier {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(0, 0, 0, .55);
  }
  .navigation-auf {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    padding: 0 7px;
    border: 1px solid var(--linie);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex: none;
  }
  .navigation-auf span { display: block; height: 1.5px; background: var(--tinte-2); }
  .navigation-zu {
    display: block;
    font-size: 22px;
    line-height: 1;
    color: var(--tinte-3);
    cursor: pointer;
    padding: 0 4px;
  }
  .topbar { padding: 0 18px; }
  .content { padding: 20px 18px 64px; }
  .kurve-flaeche svg { height: 190px; }
}

@media (max-width: 620px) {
  .kennzahlen { grid-template-columns: minmax(0, 1fr); }
  .kennzahl + .kennzahl { border-left: none; padding-left: 0; border-top: 1px solid var(--linie); }
  .kennzahl { padding: 14px 0; }
  .kurve-flaeche svg { height: 160px; }
  .kurve-kopf { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* ------------------------------------------------------------------ corrections

   Monospace is for identifiers, not for words. A status pill reading "Overdue"
   in a typewriter face is a word wearing a costume; it slows reading and it makes
   the pill wider in every language that is not English. Identifiers — invoice
   numbers, account codes, IBANs, checksums — keep the mono face, because there
   the character-by-character comparison is the whole job. */
.pill, .badge { font-family: var(--sans); font-size: 11px; letter-spacing: .04em; }

/* Removing a <summary>'s disclosure triangle.
   The combination that actually works in current Chromium is display:list-item WITH
   list-style:none — changing the display box to inline-flex leaves the triangle painted,
   which is what shipped a "▸ + Create" button. The summary keeps the button's own layout
   through its inner spans instead. */


.treffer-titel  { grid-column: 1; grid-row: 1; }
.treffer-zeile  { grid-column: 1; grid-row: 2; }
.treffer-betrag { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.treffer-datum  { grid-column: 3; grid-row: 1 / span 2; align-self: center; }

@media (max-width: 620px) {
  .trefferliste a { grid-template-columns: minmax(0, 1fr) auto; }
  .treffer-datum { grid-column: 1; grid-row: 3; }
}

/* =========================================================================
   DATA TABLES
   =========================================================================

   A list screen is a working surface, not a gallery. Search, filter and sort
   live in one bar above the table; the selection and its bulk action live in
   the form around it, so both work with JavaScript switched off.

   The header cells are links. That is deliberate: a sort is an address, so it
   can be bookmarked, opened in a new tab, and shared with an accountant.
   ========================================================================= */

.werkzeugleiste {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 0 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--linie);
}

.werkzeug-suche { margin: 0; flex: 1 1 260px; max-width: 380px; }
.werkzeug-suche input {
  width: 100%;
  height: 32px;
  padding: 0 11px;
  background: var(--flaeche-tief);
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  color: var(--tinte);
  font-size: 13px;
}
.werkzeug-suche input:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-tief);
}

.werkzeug-filter { display: flex; gap: 2px; padding: 3px; background: var(--flaeche-tief);
                   border: 1px solid var(--linie); border-radius: var(--radius-sm); }
.werkzeug-filter a {
  padding: 4px 11px; border-radius: 3px; font-size: 12.5px;
  color: var(--tinte-3); text-decoration: none; white-space: nowrap;
}
.werkzeug-filter a:hover { color: var(--tinte); }
.werkzeug-filter a.gewaehlt { background: var(--gold-tief); color: var(--gold-hell); font-weight: 500; }

.werkzeug-zaehler { margin-left: auto; font-size: 12.5px; color: var(--tinte-3);
                    font-variant-numeric: tabular-nums; }

table.datentabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.datentabelle th {
  text-align: left;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--linie-stark);
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinte-4);
  font-weight: 600;
  white-space: nowrap;
}
table.datentabelle th a { color: inherit; text-decoration: none; display: inline-flex; gap: 5px; }
table.datentabelle th a:hover { color: var(--tinte-2); }
table.datentabelle th a.sortiert { color: var(--gold-hell); }
.sortpfeil { font-size: 10px; }
table.datentabelle th.num, table.datentabelle td.num { text-align: right; }
table.datentabelle td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--linie);
                        vertical-align: middle; }
table.datentabelle td.num { font-variant-numeric: tabular-nums; }
table.datentabelle tbody tr:hover td { background: var(--flaeche); }
table.datentabelle tbody tr:has(input:checked) td { background: var(--gold-tief); }

.spalte-wahl { width: 34px; padding-right: 0 !important; }
.spalte-wahl input { width: auto; margin: 0; accent-color: var(--gold); }

.massenaktion {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0 0;
  font-size: 13px;
  color: var(--tinte-3);
}
.massenaktion label { margin: 0; font-size: 12.5px; }
.massenaktion input[type="date"] { width: auto; }

.blaetterleiste { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.blaetterleiste span { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .werkzeug-zaehler { margin-left: 0; }
  .werkzeug-suche { max-width: none; }
}

/* The create button's plus sign sits against its label rather than a space away. */
.menue > label.btn { gap: 7px; }

/* ------------------------------------------------------------------ settings

   A settings page is read, not scanned: one column, generous measure, each
   setting with the sentence that says what it decides. The explanation is the
   feature — "Accounting currency" alone does not tell a business owner that it
   is what their balance sheet will be expressed in. */

.content.schmal { max-width: 860px; }

.einstellungsblock { margin: 0 0 34px; }
.einstellungsblock .block-kopf { margin-bottom: 16px; }

.feldreihe { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.feldreihe .feld { max-width: 520px; }
.feldreihe label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinte);
  margin-bottom: 6px;
}
.feldreihe select { width: 100%; }
.feldreihe .hint { max-width: 62ch; margin-top: 7px; line-height: 1.55; }
.hinweis-gesperrt { color: var(--tinte-2); border-left: 2px solid var(--gold);
                    padding-left: 11px; margin-top: 9px; }
.feld-knopf { margin-top: -6px; }


/* ==================================================== integrations directory

   Appended block. Nothing above this line is modified.

   The screen this dresses is the one where a business decides to route its
   financial data into somebody else's system, so the restraint is deliberate:
   monograms rather than a wall of other companies' logos, four states that read
   as words before they read as colour, and no gold anywhere in the status —
   gold is brand and interaction here, never meaning.

   A tile is a row that happens to sit in a grid. It keeps the same vertical
   rhythm as .setzeile so a directory and a settings list read as one product,
   and it degrades to a single column without changing anything but the count. */

/* The hairlines are drawn by the TILES, not by the grid's own background.

   The grid used to paint itself in the line colour and let a one-pixel gap show
   through. That works only while every row is full: a group with an odd number
   of tiles leaves the last cell empty, and an empty grid cell shows the
   container — so the directory ended with a large grey block beside the last
   entry of four of its groups, four times on one settings screen. Outlining
   each tile instead draws the same one-pixel line between neighbours and
   nothing at all where there is no tile. */
.verzeichnis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 1px;
  background: var(--grund);
}

/* Uniform padding on every tile rather than a special case for the first
   column: which tile starts a row depends on the viewport, so any rule that
   treats one differently is right at one width and wrong at every other. */
.integ-kachel {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 14px;
  background: var(--grund);
  min-width: 0;
  /* Outline rather than border: it is drawn outside the box, so two neighbours
     share the one-pixel gap between them and the tile's own width is untouched.
     A border would have to be halved and would still double up on every seam. */
  outline: 1px solid var(--linie);
}

/* The monogram. Two letters, because KRONENWERK ships no third-party marks: a
   directory papered with other companies' logos implies a relationship in both
   directions, and for most of this list neither direction is true. */
.integ-mal {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--flaeche-tief);
  border: 1px solid var(--linie);
  color: var(--tinte-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}

.integ-koerper { min-width: 0; flex: 1 1 auto; }
.integ-name { margin: 0; font-size: 14px; color: var(--tinte-2); line-height: 1.35; }
.integ-sprung { color: inherit; text-decoration: none; }
.integ-sprung::after {
  /* The whole tile is the target, not the four characters of the name. */
  content: "";
  position: absolute;
  inset: 0;
}
.integ-kachel { position: relative; }
.integ-kachel:has(.integ-sprung:hover) { background: var(--flaeche); }
.integ-kachel:has(.integ-sprung:hover) .integ-name { color: var(--tinte); }
.integ-kachel:has(.integ-sprung:hover) .integ-mal {
  border-color: var(--gold-linie);
  color: var(--gold);
}

.integ-satz {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--tinte-4);
  line-height: 1.5;
}
.integ-fussnote {
  margin: 6px 0 0;
  padding-left: 9px;
  border-left: 1px solid var(--linie-stark);
  font-size: 12px;
  color: var(--tinte-4);
  line-height: 1.5;
}

/* A live connection carries a hairline on its left edge. The one place a tile
   is allowed to look different from its neighbours, because it is the one
   difference a person came to the screen to see. */
.integ-kachel.ist-lebendig { box-shadow: inset 2px 0 0 var(--positiv-linie); }
.integ-kachel.ist-lebendig .integ-mal { color: var(--tinte-2); }
.integ-kachel.ist-ruhend .integ-mal { color: var(--tinte-4); opacity: .7; }
.integ-kachel.ist-ruhend .integ-name { color: var(--tinte-3); }

.integ-kachel > .zustand { flex: none; margin-top: 9px; }

/* Two more status shapes, so the four states are told apart without colour.
   Available is an open ring — present, not yet running. Custom API is a square:
   a different kind of answer rather than a lesser one. */
.zustand.ist-bereit::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--tinte-2);
}
.zustand.ist-api::before {
  border-radius: 1px;
  background: var(--tinte-3);
}

/* ------------------------------------------------ connection and provider detail */

.setzeile-hinweis.stark { color: var(--tinte-2); font-size: 13px; }
.setzeile-hinweis.fehlertext { color: var(--negativ); }

details.technisch { margin-top: 10px; max-width: 66ch; }

/* The column contract, as a contract: the name as it must be typed, then what
   it means, then whether a row without it is refused. */
.spaltenliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 7px 20px;
  margin-top: 9px;
}
.spalte { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.spalte-text { font-size: 12px; color: var(--tinte-4); }
.spalte-marke {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-3);
  border: 1px solid var(--linie-stark);
  border-radius: 3px;
  padding: 1px 5px;
}

/* ------------------------------------------------------- permissions, readable

   The screen that used to print VIEW_CUSTOMERS at a business owner. Grouped by
   subject, each permission with the sentence that says what it lets somebody do,
   because "Rechnungen stornieren" and "Rechnungen ansehen" differ by one word
   and by everything else. */

.rechtegitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px 26px;
  margin-top: 10px;
  padding: 15px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche-tief);
  max-height: 460px;
  overflow-y: auto;
}
.rechtegruppe { border: none; margin: 0; padding: 0; min-width: 0; }
.rechtegruppe legend {
  padding: 0;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-3);
  font-weight: 600;
}
.rechtegruppe-satz {
  margin: 5px 0 10px;
  font-size: 12px;
  color: var(--tinte-4);
  line-height: 1.5;
}
.checkbox.recht { align-items: flex-start; margin-bottom: 9px; }
.recht-koerper { display: block; min-width: 0; }
.recht-name { display: block; font-size: 13px; color: var(--tinte); line-height: 1.35; }
.recht-satz {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--tinte-4);
  line-height: 1.45;
}

.ereignisgitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px 24px;
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche-tief);
}

/* What an existing key already carries, as words rather than identifiers. */
.rechtemarken { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.rechtemarke {
  font-size: 11px;
  color: var(--tinte-3);
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 2px 7px;
  background: var(--flaeche-tief);
}

.feld-breit { max-width: none !important; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 9px; }
form.beiseite { display: inline-block; }
.bruch { overflow-wrap: anywhere; }

/* ------------------------------------------------------------ delivery history

   One line per delivery, the state first. Somebody reading this is answering
   one question — did it arrive — and every other column is context for the
   lines where the answer is no. */
.zustellzeile {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 13px;
  flex-wrap: wrap;
}
.zustellzeile:last-child { border-bottom: none; }
.zustellzeile .zustand { flex: none; min-width: 108px; }
.zustell-ereignis { color: var(--tinte-2); min-width: 0; overflow-wrap: anywhere; }
.zustell-zeit { margin-left: auto; color: var(--tinte-4); font-variant-numeric: tabular-nums; }
.zustell-status { color: var(--tinte-4); font-variant-numeric: tabular-nums; }

/* The copy button for a secret shown once. Both words are in the markup, from
   the catalogue; this only decides which of the two is visible, so the state
   after a click is as translated as the state before it. */
.geheimnis-kopieren { margin-top: 11px; }
.geheimnis-kopieren .wort-nachher { display: none; }
.geheimnis-kopieren.ist-kopiert .wort-vorher { display: none; }
.geheimnis-kopieren.ist-kopiert .wort-nachher { display: inline; }
.geheimnis-kopieren.ist-kopiert { color: var(--positiv); border-color: var(--positiv-linie); }


/* ==================================================================
   SETTINGS: one rhythm, and a searchable picker
   ==================================================================

   Appended block. Nothing above this line is altered.

   Two jobs.

   The first is that every settings section shares one geometry. The
   sections were drifting: one page used a narrow content column and its
   own block class, the others used the section frame; one put its save
   button under each field, another at the foot; hints were sized
   differently on each. A person cannot tell whether a change has saved
   if the confirmation moves, so the heading, the field, the hint and the
   save row are each defined once here and used by every section.

   The second is the currency picker. It is a listbox drawn over a
   <select> that already works — see waehlbar.js — so everything here is
   for the enhanced state only; the plain select keeps the app's existing
   control styling untouched. */

/* -------------------------------------------------- section heading */

.setzkopf { margin: 0 0 4px; }
.setzkopf h1 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -.015em;
  font-weight: 600;
}
/* The one line under a section name. 66 characters is where a line stops
   being read and starts being skimmed, and this sentence is the one that
   tells somebody what the section decides. */
.setzkopf-text {
  margin: 7px 0 0;
  max-width: 66ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tinte-3);
}

/* --------------------------------------------- a field inside a block */

/* Same geometry as .setzeile, so an editable setting and a stated one sit
   on one grid rather than looking like two different products. */
.setzfeld {
  padding: 15px 0;
  border-bottom: 1px solid var(--linie);
}
.setzfeld:last-child { border-bottom: none; }
.setzfeld > label {
  display: block;
  margin: 0 0 8px;
  font-size: 13.5px;
  color: var(--tinte-2);
}
.setzfeld > input,
.setzfeld > select,
.setzfeld .waehlbar-feld {
  width: 100%;
  max-width: 420px;
}
.setzfeld .hint {
  max-width: 66ch;
  margin-top: 7px;
  line-height: 1.55;
}
/* A locked setting explains itself in the same place its other hints
   live, one step louder, because it is the answer to a question the
   person is actively asking. */
.setzfeld .hinweis-gesperrt { color: var(--tinte-2); }

.setzspeichern { padding: 18px 0 4px; }

/* The country module's closing note, at the foot of the overview. Not a
   section, so it carries no rule above it. */
.setzschluss {
  margin: 26px 0 0;
  max-width: 66ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tinte-4);
}

/* ------------------------------------------- the settings section list */

/* Air between groups of sections, without a heading over each. The
   groups are obvious from the names; a label over every three entries
   was vocabulary the reader had to learn before using the list. */
.einstellungen-teiler {
  display: block;
  height: 1px;
  margin: 11px 11px;
  background: var(--linie);
}
@media (max-width: 900px) {
  .einstellungen-teiler { display: none; }
}

/* ------------------------------------------------ searchable picker */

.waehlbar-feld { position: relative; display: block; }

/* The select stays in the DOM and stays the value the form submits. It is
   taken out of the layout rather than removed, so nothing about
   submission, validation or autofill changes. */
select.waehlbar-verborgen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sized and coloured as the app's own inputs, because it is one. */
.waehlbar-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--tinte);
  background: var(--flaeche-tief);
  border: 1px solid var(--linie-stark);
  border-radius: 5px;
  cursor: pointer;
}
.waehlbar-knopf::after {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--tinte-3);
  border-bottom: 1.5px solid var(--tinte-3);
  transform: translateY(-2px) rotate(45deg);
}
.waehlbar-knopf:hover { border-color: var(--tinte-4); }
.waehlbar-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.waehlbar-blatt {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  min-width: 260px;
  padding: 7px;
  background: var(--flaeche-hoch);
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}

.waehlbar-suche {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--tinte);
  background: var(--flaeche-tief);
  border: 1px solid var(--linie);
  border-radius: 4px;
}
.waehlbar-suche:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.waehlbar-liste {
  max-height: 280px;
  overflow-y: auto;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
}

.waehlbar-eintrag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  font-size: 14px;
  color: var(--tinte-2);
  border-radius: 4px;
  cursor: pointer;
}
/* Keyboard and pointer land on the SAME highlight. Two different
   affordances for "this is the one you are about to choose" is how a
   person using arrow keys ends up selecting the row under the mouse. */
.waehlbar-eintrag.ist-aktiv {
  color: var(--tinte);
  background: var(--flaeche);
}
/* Chosen is a mark and a colour, never colour alone. */
.waehlbar-eintrag[aria-selected="true"] { color: var(--gold); }
.waehlbar-eintrag[aria-selected="true"]::before {
  content: "\2713";
  flex: none;
  font-size: 12px;
  line-height: 1;
}
.waehlbar-eintrag[aria-selected="false"]::before {
  content: "";
  flex: none;
  width: 8px;
}

.waehlbar-leer {
  margin: 9px;
  font-size: 12.5px;
  color: var(--tinte-3);
}

/* =========================================================================
   AKTIVITÄT — the event timeline
   =========================================================================

   Appended block. Nothing above this line is touched.

   A timeline, not a grid of cards. Forty events in forty identical bordered
   boxes is a list somebody has made harder to scan in order to make it look
   designed: every box draws its own outline, so the outlines become the
   pattern and the sentences stop being it.

   So the structure is carried by type and by one hairline rule:

     the day      a small caps heading, letter-spaced, with a rule under it
     the hour     a fixed monospace column, muted — a ruler, not content
     the act      the only thing at full ink weight
     the rest     one muted line, separated by middots

   Colour follows the four-way rule at the top of this file. Gold is nowhere
   near a row: nothing on this page is brand or interaction. Green and red
   appear only on the marker and only where the event carries real financial
   or status meaning — money arrived, something was undone or refused — which
   on an ordinary page is two rows out of thirty. Every one of them also says
   so in words, so nothing depends on seeing the colour.
   ========================================================================= */

.zeitstrahl {
  margin-top: 4px;
}

.zeitstrahl-tag + .zeitstrahl-tag {
  margin-top: 26px;
}

/* The day. Deliberately quiet: it orients, it is not the content. */
.zeitstrahl-datum {
  margin: 0 0 10px;
  padding-bottom: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinte-3);
  border-bottom: 1px solid var(--linie);
}

.zeitstrahl-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The rule the whole timeline hangs from. One line for the column, drawn on
   the row rather than the list, so a day heading interrupts it — which is
   what a day break should look like. */
.zeitstrahl-zeile {
  position: relative;
  display: grid;
  grid-template-columns: 58px 15px minmax(0, 1fr);
  align-items: baseline;
  padding: 9px 0;
}

.zeitstrahl-zeile + .zeitstrahl-zeile {
  border-top: 1px solid color-mix(in srgb, var(--linie) 55%, transparent);
}

.zeitstrahl-uhr {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--tinte-3);
  white-space: nowrap;
}

/* The connecting rule, drawn on the ROW rather than on the marker.

   On the marker it would have to guess the row's height, and a row whose
   sentence wraps to two lines would leave a gap in the middle of the
   timeline. On the row it is simply top-to-bottom, and the first and last
   rows of a day stop it at their own marker so the line never dangles past
   the end of a day. */
.zeitstrahl-zeile::before {
  content: "";
  position: absolute;
  left: 65px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--linie);
}

.zeitstrahl-zeile:first-child::before { top: 50%; }
.zeitstrahl-zeile:last-child::before { bottom: 50%; }
.zeitstrahl-zeile:only-child::before { display: none; }

/* The marker. 6px, filled, sitting on the rule. Neutral is a line colour
   rather than a status colour, which is what keeps the two coloured ones
   legible. The ring is the page's own ground, so the rule passes behind the
   dot rather than through it. */
.zeitstrahl-punkt {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--linie-stark);
  box-shadow: 0 0 0 3px var(--grund);
}

.zeitstrahl-zeile.ist-gut .zeitstrahl-punkt { background: var(--positiv); }
.zeitstrahl-zeile.ist-schlecht .zeitstrahl-punkt { background: var(--negativ); }

.zeitstrahl-inhalt {
  min-width: 0;
}

/* The sentence. The one thing on the row at full weight. */
.zeitstrahl-tat {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinte);
}

.zeitstrahl-tat a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--linie-stark);
}

.zeitstrahl-tat a:hover {
  border-bottom-color: var(--tinte-2);
}

.zeitstrahl-zeile.ist-gut .zeitstrahl-tat { color: var(--positiv); }
.zeitstrahl-zeile.ist-schlecht .zeitstrahl-tat { color: var(--negativ); }

/* Who, through what, about whom. Middots between the parts, generated rather
   than typed, so a missing part never leaves a stranded separator. */
.zeitstrahl-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 7px;
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--tinte-3);
}

.zeitstrahl-fuss > span + span::before {
  content: "\00B7";
  margin-right: 7px;
  color: var(--tinte-4);
}

/* The recorded change, folded away. Almost nobody opens it, and the ones who
   do are the reason the columns were stored. */
.zeitstrahl-aenderung {
  margin-top: 6px;
}

.zeitstrahl-aenderung > summary {
  font-size: 12px;
  color: var(--tinte-3);
  cursor: pointer;
}

.zeitstrahl-aenderung > summary:hover { color: var(--tinte-2); }

.zeitstrahl-aenderung .kv {
  margin-top: 7px;
  padding: 9px 11px;
  background: var(--flaeche-tief);
  border-radius: var(--radius-sm);
}

/* The value that was replaced, struck through and dimmed. Not red: being
   replaced is not a failure, and spending the negative colour on it would
   leave nothing to say with when something actually went wrong. */
.zeitstrahl-vorher {
  margin-right: 7px;
  color: var(--tinte-4);
  text-decoration: line-through;
}

/* The same timeline inside a document's own panel: one line per event, date
   instead of hour, no day headings. Narrower because it sits in a card. */
.zeitstrahl-knapp .zeitstrahl-zeile {
  grid-template-columns: 92px 15px minmax(0, 1fr);
  padding: 7px 0;
}

/* Inside a card the ground behind the dot is the card, not the page. */
.zeitstrahl-knapp .zeitstrahl-zeile::before { left: 99px; }
.zeitstrahl-knapp .zeitstrahl-punkt { box-shadow: 0 0 0 3px var(--flaeche); }

.zeitstrahl-knapp .zeitstrahl-tat { font-size: 13.5px; }

/* The "you are looking at one record" line above a filtered feed. */
.ereignis-eingrenzung {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--tinte-2);
}

@media (max-width: 640px) {
  /* The hour moves above the sentence rather than shrinking to nothing. A
     58px column on a phone is a column of ellipses. */
  .zeitstrahl-zeile,
  .zeitstrahl-knapp .zeitstrahl-zeile {
    grid-template-columns: 15px minmax(0, 1fr);
  }
  .zeitstrahl-zeile::before,
  .zeitstrahl-knapp .zeitstrahl-zeile::before { left: 7px; }
  .zeitstrahl-uhr {
    grid-column: 2;
    display: block;
    margin-bottom: 2px;
  }
  .zeitstrahl-punkt {
    grid-row: 1;
    grid-column: 1;
    align-self: start;
    margin-top: 5px;
  }
  .zeitstrahl-inhalt {
    grid-column: 2;
  }
}

/* =========================================================================
   BANKING — accounts, cards, the review queue, connection health
   =========================================================================

   Appended as one block. Nothing above this line is changed.

   The rules here exist for four things the banking screens needed and the
   shared vocabulary did not have:

     1. A credit card has to be visibly a different kind of thing from a bank
        account, not the same row with a pill on it. The difference is which
        side of the balance sheet the money is on, and a distinction that
        small is one the reader has to remember rather than one the screen
        makes.
     2. An amount owed is not a negative balance in red. Red is reserved for
        something that is a problem; a card balance is ordinary. So a card's
        figure is warm-neutral and carries the word "offen" beside it.
     3. The review queue needed real tabs, because "to review" only means
        something if the other views are somewhere else.
     4. A button that has been pressed has to look pressed.

   Colour rule, unchanged from the top of this file: gold is brand and
   interaction, green and red carry financial meaning only, grey is neutral.
   Nothing below spends green or red on a state that is merely different.
   ========================================================================= */

/* ---------------------------------------------------------------- totals */

/* Two figures side by side, never summed. A business with a euro account and
   a dollar account has two cash positions, and adding them at today's rate
   invents a number that is right for about an hour. */
.bank-summen {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-end;
  padding: 18px 20px;
  margin: 0 0 22px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.bank-summe { display: flex; flex-direction: column; gap: 3px; }
.bank-summe .label {
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinte-3);
}

/* Money owed. Deliberately not --negativ: a card balance is an ordinary fact
   about an ordinary business, and spending the alarm colour on it leaves
   nothing to say with when a payment actually fails. */
.bank-summe-schuld .saldo { color: var(--tinte); }
/* "As at" and its moment: one phrase on one line, at the far edge of the bar. It is not
   a heading over a figure — it is a sentence about when the figures were fetched — so it
   does not take the label-over-value shape of the totals beside it. */
.bank-summe-stand { margin-left: auto; text-align: right; align-self: flex-end; }

/* A cash position below zero, said in words as well as by a minus sign and a colour.
   Colour is never the only signal, and a bare minus leaves a reader wondering whether the
   product has the sign the wrong way round. */
.bank-summe-erklaerung {
  font-size: 11.5px;
  line-height: 1.35;
  max-width: 34ch;
  color: var(--negativ);
}

/* --------------------------------------------------------------- groups */

.bank-gruppe {
  margin: 28px 0 10px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-3);
}

.bank-gruppe-erklaerung { margin: -6px 0 12px; max-width: 58ch; }

/* A card is drawn as a card: the left edge carries the distinction so it
   survives a screenshot, a printout and a monochrome display. */
.bank-karte { border-left: 3px solid var(--gold-linie); }

.saldo-schuld { color: var(--tinte); }
.bank-karte .card-head .label {
  display: block;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinte-3);
}

/* The word on a row that came from a card. Small, quiet, and always present —
   on a card, money out grew a debt rather than reducing a balance, and a
   reader who cannot see which account a line belongs to cannot tell those
   apart. */
.marke-karte {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinte-3);
  border: 1px solid var(--linie-stark);
  border-radius: 3px;
}

/* ----------------------------------------------------------- the queue */

.bank-sichten {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--linie);
}

.bank-sichten a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--tinte-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.bank-sichten a:hover { color: var(--tinte); }

/* Gold, because this is navigation and not status. */
.bank-sichten a.ist-aktiv {
  color: var(--tinte);
  border-bottom-color: var(--gold);
}

.bank-sichten-zahl {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--tinte-3);
}

.bank-sichten a.ist-aktiv .bank-sichten-zahl { color: var(--gold-hell); }

/* LINKED: the accounting was already there and nothing new was posted.
   Neutral like the other non-financial states — it is a fact about where the
   entry came from, not about whether money was good or bad news. The dotted
   underline is what distinguishes it at a glance from "gebucht", which claims
   KRONENWERK created an entry. */
.pill-linked {
  color: var(--tinte-2);
  border-color: var(--linie-stark);
  background: var(--flaeche-hoch);
  border-bottom-style: dotted;
}

/* ------------------------------------------------- reconciliation verdict */

/* The answer before the arithmetic. This screen used to open with three
   numbers and the word "Differenz", which is an accountant's summary rather
   than an answer to the question a business owner is asking. */
.abgleich-urteil {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.5;
}

.abgleich-urteil.abgleich-stimmt { color: var(--positiv); }
.abgleich-urteil.abgleich-offen { color: var(--tinte); }

/* --------------------------------------------------- honest empty state */

/* No provider here. A finished screen rather than an apology, and never a
   sentence about which aggregator has not been configured — that is a fact
   about our deployment and none of the customer's business. */
.bank-unverfuegbar {
  padding: 34px 30px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-lg);
  max-width: 62ch;
}

.bank-unverfuegbar h2 { margin: 0 0 10px; font-size: 19px; }
.bank-unverfuegbar p { margin: 0 0 12px; color: var(--tinte-2); }
.bank-unverfuegbar .bar { margin-top: 20px; }

/* ------------------------------------------------------ work in progress */

/* A button that has been pressed looks pressed. The server already makes
   double submission harmless — every resolution is keyed on the transaction's
   own id and the poll budget is counted in the database — so this exists to
   stop a person having to guess whether their click landed, not to make
   anything safe. */
button.ist-laufend {
  opacity: .72;
  cursor: progress;
  position: relative;
}

button.ist-laufend::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 8px;
  vertical-align: -1px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: bank-dreht .7s linear infinite;
}

@keyframes bank-dreht { to { transform: rotate(360deg); } }

/* Motion is decoration here: the label already says "läuft…". */
@media (prefers-reduced-motion: reduce) {
  button.ist-laufend::after { animation: none; opacity: .5; }
}

/* ------------------------------------------------------ connection health */

.bank-zustand { display: inline-flex; gap: 4px; align-items: center; }

@media (max-width: 640px) {
  .bank-summen { gap: 18px; }
  .bank-summe-stand { margin-left: 0; text-align: left; }
  .bank-sichten { overflow-x: auto; }
}


/* =========================================================================
   THE LAYOUT PRIMITIVES
   =========================================================================

   Appended as one block. Nothing above this line is deleted; what this block
   changes, it changes deliberately and says why.

   THE DIAGNOSIS

   Almost every screen in the authenticated product put its content inside a
   bordered rounded rectangle, and most of them put a second one inside the
   first. A table sat in a card; the card added a border, a radius and a
   background and said nothing the table had not already said. Once every piece
   of information is in an identical box, the boxes are the pattern and the
   information is not — and a product where the loudest visual element is the
   container reads as an admin template, whatever is written inside it.

   The answer is not a better card. It is fewer of them.

   THE ELEVEN PRIMITIVES, and nothing else

     .seitenkopf      the page header — name, one line of context, page actions
     .abschnitt       a section — small-caps heading, one hairline, content
     .unterabschnitt  a subsection — a label and space, no rule
     table.datentabelle  the data table — the one table in the product
     .merkmale        a definition list — the facts about one object
     .kennzahlen      the key-figure band — figures on one rule, never in boxes
     .formsatz        a form — a column of .formzeile
     .inline-aktion   an action inside prose or a row, not a button
     .leerzustand     an empty state — a sentence and one way forward
     .werkzeugleiste  a toolbar — search, filter, count, above a table
     .card            a discrete object: an account, a connection, a document

   A CARD IS NOW A CLAIM

   The last one is the rule that matters. A card says "this is one object you
   could pick up and carry away" — a bank account, an OAuth connection, a
   rendered document, a payment method. It does not mean "some content". A
   section of a form is not an object. A table of invoices is not an object.
   A heading over three figures is not an object.

   CONSISTENCY BEFORE FLOURISH

   One control height, one type scale, one measure, one set of spacing steps.
   A screen where the save button sits 4px higher than on the screen before it
   is a screen a person does not trust with their tax.
   ========================================================================= */

:root {
  /* The vertical rhythm, as four steps. Every margin in this block is one of
     them, so spacing is a decision made once rather than per screen. */
  --raum-1: 8px;    /* inside a row */
  --raum-2: 16px;   /* between rows */
  --raum-3: 28px;   /* between sections */
  --raum-4: 40px;   /* between one part of a page and the next */

  /* One control height across buttons, inputs, selects and the search field.
     Mixed heights in a toolbar is the single most legible sign of an interface
     assembled rather than designed. */
  --steuerhoehe: 34px;
  /* The measure. Prose beyond this stops being read and starts being skimmed. */
  --masz: 66ch;
}

/* ------------------------------------------------------------- 1. page head */

/* Title, one sentence, and the actions for the page — never repeated inside the
   page. A screen with a "New invoice" button at the top and another at the
   bottom of the first section has two primary actions, which is none. */
.seitenkopf {
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 0 var(--raum-3);
}
.seitenkopf > div:first-child { min-width: 0; }
.seitenkopf-satz {
  margin: 5px 0 0;
  max-width: var(--masz);
  font-size: 13px;
  line-height: 1.55;
  color: var(--tinte-3);
}
.seitenkopf-aktionen {
  display: flex;
  align-items: center;
  gap: var(--raum-1);
  flex-wrap: wrap;
  flex: 0 0 auto;
}
/* The line above a detail page's title that says where it came from. A path,
   not a heading: it is read once on arrival and never again. */
.seitenkopf-herkunft {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--tinte-3);
  text-decoration: none;
}
.seitenkopf-herkunft:hover { color: var(--gold-hell); }

/* --------------------------------------------------------------- 2. section */

/* A heading, a hairline, and the content. No border, no radius, no shadow, no
   background. `.block` was already this shape on two screens; `.abschnitt` is
   the same thing named for what it is, and both resolve to one set of rules so
   the two spellings cannot drift apart. */
.abschnitt { margin: 0 0 var(--raum-3); min-width: 0; }
.abschnitt:last-child { margin-bottom: 0; }

.abschnitt-kopf,
.block-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
  margin-bottom: var(--raum-1);
  border-bottom: 1px solid var(--linie);
}
.abschnitt-kopf h2,
.abschnitt-kopf h3,
.block-kopf h2 {
  margin: 0;
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--tinte-3);
  font-weight: 600;
}
.abschnitt-kopf-links { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.abschnitt-aktionen { display: flex; align-items: center; gap: var(--raum-1); flex: none; }
.abschnitt-satz {
  margin: 0 0 var(--raum-2);
  max-width: var(--masz);
  font-size: 13px;
  line-height: 1.55;
  color: var(--tinte-3);
}
/* The quiet link at the right of a section heading. */
.abschnitt-mehr, .block-mehr {
  font-size: 12px;
  color: var(--tinte-3);
  text-decoration: none;
  flex: none;
}
.abschnitt-mehr:hover, .block-mehr:hover { color: var(--gold-hell); }

/* ------------------------------------------------------------ 3. subsection */

/* Inside a section: a label and air. No rule — a second hairline inside a
   ruled section is how a page starts looking like a spreadsheet of itself. */
.unterabschnitt { margin: var(--raum-3) 0 0; min-width: 0; }
.unterabschnitt > h3, .unterabschnitt-name {
  display: block;
  margin: 0 0 var(--raum-1);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinte-2);
  letter-spacing: 0;
  text-transform: none;
}

/* ------------------------------------------------------------ 4. data table */

/* One table. Every table in the authenticated product now reads the same:
   hairline rules, no fill, no outer border, uppercase column labels, figures
   right and tabular, the first column flush with the page.

   `.table-wrap` used to draw a border, a radius and a background — a card by
   another name, wrapped around every list in the product. It is now only what
   its name says: the thing that lets a wide table scroll without pushing the
   page sideways. */
.table-wrap {
  overflow-x: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  /* Positioned so that it is the containing block for what it holds.

     `overflow-x: auto` clips a descendant only when this element is in that
     descendant's containing-block chain. An absolutely positioned one — and
     every `.sr-only` caption and label inside a table is absolutely positioned
     — otherwise resolves against the page and is not clipped at all. Its static
     position sits at the far edge of the scrolled table, so on a phone the
     payments screen was 448 CSS pixels wide inside a 390 pixel viewport: the
     whole page scrolled sideways because of a label nobody can see. */
  position: relative;
}

table { border-collapse: collapse; width: 100%; font-size: 13.5px; }

thead th {
  text-align: left;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-4);
  padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--linie-stark);
  background: transparent;
  white-space: nowrap;
  /* Not sticky. A sticky header inside a scrolling page fights the page's own
     scroll on every screen narrower than the table, and it was drawn over the
     toolbar above it. */
  position: static;
}
tbody td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}
thead th:last-child, tbody td:last-child { padding-right: 0; }
tbody tr:last-child td { border-bottom: 1px solid var(--linie); }
tbody tr:hover td { background: var(--flaeche); }
tbody td.num, thead th.num { text-align: right; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: 0 0 8px; color: var(--tinte-3); font-size: 12px; }

/* Inside a genuine card the table keeps the card's own inset. */
.card table { font-size: 13px; }
.card thead th { padding-left: 18px; }
.card tbody td:first-child, .card thead th:first-child { padding-left: 18px; }
.card tbody td:last-child, .card thead th:last-child { padding-right: 18px; }
.card tbody tr:last-child td { border-bottom: none; }

/* The row that is a whole link. A table of documents is navigated, not read. */
tbody tr.zeile-ziel { cursor: pointer; }

/* ---------------------------------------------------------- 5. the facts list */

/* What is true about one object: a customer's address, an invoice's dates, a
   connection's scopes. A two-column definition list, not a grid of small cards
   and not a table — there is one row per fact and no column of its own to
   align to.

   The label is the quiet half. Somebody reading this already knows they are
   looking at a customer; what they came for is the value. */
.merkmale {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  gap: 0;
  margin: 0;
}
.merkmale > dt {
  grid-column: 1;
  padding: 8px 20px 8px 0;
  font-size: 12.5px;
  color: var(--tinte-3);
  border-bottom: 1px solid var(--linie);
  min-width: 0;
}
.merkmale > dd {
  grid-column: 2;
  margin: 0;
  padding: 8px 0;
  font-size: 13.5px;
  color: var(--tinte);
  border-bottom: 1px solid var(--linie);
  min-width: 0;
  overflow-wrap: anywhere;
}
.merkmale > dt:last-of-type, .merkmale > dd:last-of-type { border-bottom: none; }
.merkmale dd .mono { font-size: 12.5px; }

/* Facts side by side rather than stacked, where there are few of them and each
   is short. Same type, same colours, no boxes — the old `.facts` grid drew each
   one in its own bordered cell. */
.merkmale-reihe, .facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--raum-2) var(--raum-3);
  margin: 0;
}
.merkmale-reihe > div, .facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.merkmale-reihe dt, .facts .label {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-4);
  font-weight: 600;
}
.merkmale-reihe dd { margin: 0; font-size: 13.5px; }

/* The old inline key/value pair, kept because a dozen screens use it, restyled
   so it agrees with .merkmale rather than being a third way of saying the same
   thing. */
.kv { display: grid; gap: 0; }
.kv > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--linie);
}
.kv > div:last-child { border-bottom: none; }
.kv .label { margin: 0; align-self: center; }

/* ------------------------------------------------------------- 6. key figures */

/* Already defined above; what is added here is the ability to run a band of two
   or three rather than always four, and the footnote that says where a figure
   came from. */
.kennzahlen-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kennzahlen-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .kennzahlen-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .kennzahlen-2, .kennzahlen-3 { grid-template-columns: minmax(0, 1fr); }
}

/* One figure standing alone, at the head of a screen. Bigger than a .kennzahl
   because it is the answer the screen exists to give. */
.leitzahl { margin: 0 0 var(--raum-3); }
.leitzahl-name {
  display: block;
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--tinte-3);
  font-weight: 600;
}
.leitzahl-wert {
  display: block;
  margin-top: 3px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.leitzahl-fuss {
  display: block;
  margin-top: 5px;
  max-width: 52ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tinte-4);
}

/* -------------------------------------------------------------- 7. form rows */

/* A form is a column of rows, each one label, control, and the sentence that
   says what the field decides. One measure for every control, so a form does
   not look like a ransom note of differently sized inputs. */
.formsatz { display: flex; flex-direction: column; gap: 0; margin: 0; }

.formzeile {
  padding: 15px 0;
  border-bottom: 1px solid var(--linie);
  min-width: 0;
}
.formzeile:last-child { border-bottom: none; }
.formzeile > label, .formzeile > .label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinte-2);
}
.formzeile > input, .formzeile > select, .formzeile > textarea {
  width: 100%;
  max-width: 420px;
}
.formzeile-breit > input, .formzeile-breit > select, .formzeile-breit > textarea {
  max-width: none;
}
.formzeile .hint { max-width: var(--masz); margin-top: 6px; line-height: 1.55; }

/* Fields that belong on one line — a postcode and a town, a date and a term. */
.formgruppe {
  display: grid;
  gap: var(--raum-2);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
}
.formgruppe > .feld { min-width: 0; }

/* The save row: one place, one word, at the foot of the thing it saves. */
.formschluss {
  display: flex;
  gap: var(--raum-1);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--raum-2) 0 0;
}
.formschluss .rechts { margin-left: auto; }

/* One control height everywhere. An input, a select, a button and a search
   field in the same toolbar were 38, 38, 33 and 32 pixels tall. */
.btn { min-height: var(--steuerhoehe); }
.btn-sm { min-height: 28px; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="date"], input[type="number"], input[type="tel"], input[type="url"], select {
  min-height: var(--steuerhoehe);
  padding-top: 6px;
  padding-bottom: 6px;
}
.input-sm { min-height: 28px; padding-top: 4px; padding-bottom: 4px; }

/* --------------------------------------------------------- 8. inline actions */

/* An action that belongs to a row or a sentence rather than to the page. A
   button here would claim the same weight as "Issue invoice", so it is a link
   with a gold underline on hover and the same 13px as the text around it. */
.inline-aktion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--tinte-2);
  text-decoration: none;
  border-bottom: 1px solid var(--linie-stark);
  cursor: pointer;
}
.inline-aktion:hover { color: var(--tinte); border-bottom-color: var(--gold); }
.inline-aktion.ist-schlecht { color: var(--negativ); border-bottom-color: var(--negativ-linie); }

/* A row of them, separated by middots rather than by borders. */
.aktionsreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.aktionsreihe > * + *::before {
  content: "\00B7";
  margin-right: 14px;
  color: var(--tinte-4);
  border: none;
}

/* --------------------------------------------------------- 9. the empty state */

/* A dashed box in the middle of the page, 48px of padding, text centred. It
   made "you have not done this yet" the most decorated element on the screen.

   An empty state is a sentence and one way forward, set where the content would
   have been, at the size the content would have been. */
.leerzustand, .empty {
  text-align: left;
  padding: 22px 0 26px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--tinte-3);
  max-width: var(--masz);
}
.leerzustand h3, .empty h3 {
  color: var(--tinte);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
}
.leerzustand p, .empty p {
  max-width: var(--masz);
  margin: 0 0 var(--raum-2);
  margin-left: 0;
  margin-right: 0;
  font-size: 13.5px;
  line-height: 1.55;
}
.leerzustand p:last-child, .empty p:last-child { margin-bottom: 0; }
.leerzustand .btn, .empty .btn { margin-top: 2px; }

/* The same thing one line high, where a section has nothing in it yet and the
   page has other sections that do. */
.block-leer, .abschnitt-leer {
  margin: 0;
  padding: 12px 0;
  font-size: 13.5px;
  color: var(--tinte-3);
}
.block-leer a, .abschnitt-leer a { color: var(--gold-hell); }

/* The set-up state — genuinely nothing works yet — keeps a frame, because it is
   the one case where the screen has no content at all to be flush with. It
   loses the dashes and the centring. */
.einrichten {
  border: 1px solid var(--linie);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 24px 26px;
  text-align: left;
  max-width: var(--masz);
  margin: 0 0 var(--raum-3);
  background: var(--flaeche);
}
.einrichten h2 { font-size: 16px; margin: 0 0 8px; }
.einrichten p { color: var(--tinte-3); font-size: 13.5px; margin: 0 0 var(--raum-2); max-width: none; }

/* ---------------------------------------------------------- 10. the toolbar */

/* Defined above for the archive; every list screen uses it now, so the height
   is pinned to the shared control height and the whole bar sits on one
   baseline. */
.werkzeugleiste { gap: var(--raum-1) 12px; }
.werkzeug-suche input { height: var(--steuerhoehe); min-height: var(--steuerhoehe); }
.werkzeug-filter { align-self: center; }
.werkzeugleiste .btn { flex: none; }

/* ------------------------------------------------------ 11. contextual tabs */

/* Two views of one thing — drafts and issued, bills and receipts — are tabs on
   one screen, not two entries in the rail. The rail says what the product
   does; tabs say which state of it you are looking at. */
.sichten {
  display: flex;
  gap: 2px;
  margin: 0 0 var(--raum-3);
  border-bottom: 1px solid var(--linie);
  overflow-x: auto;
}
.sichten a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 13px;
  font-size: 13.5px;
  color: var(--tinte-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.sichten a:hover { color: var(--tinte); }
.sichten a.gewaehlt {
  color: var(--tinte);
  border-bottom-color: var(--gold);
  font-weight: 500;
}
.sichten-zahl { font-size: 11.5px; color: var(--tinte-4); font-variant-numeric: tabular-nums; }
.sichten a.gewaehlt .sichten-zahl { color: var(--gold-hell); }

/* ------------------------------------------------------- what a card is for */

/* Kept, and narrowed. A card is a discrete object. It gets a little more air
   than it had and it no longer swallows tables. */
.card { border-radius: var(--radius-sm); }
.card-head { padding: 12px 18px; }
.card-body { padding: 16px 18px; }
.card-body.tight { padding: 12px 18px; }
.card + .card { margin-top: 12px; }

/* A grid of objects. Objects, not sections. */
.objektgitter {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* --------------------------------------------------------------- the page */

/* One measure for a page of prose or a page of settings, one for a page of
   data. A form stretched to 1440px is a form nobody can follow across. */
.content { padding: 26px 32px 80px; max-width: 1400px; }
.content.schmal { max-width: 860px; }
.content.mittel { max-width: 1100px; }

/* Two columns where one of them is subordinate — a detail and its side facts. */
.zweispalt {
  display: grid;
  gap: var(--raum-4);
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  align-items: start;
}
.zweispalt > * { min-width: 0; }
@media (max-width: 1080px) {
  .zweispalt { grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
}

/* The old .two-col, folded into the same proportions so a page does not change
   shape depending on which of the two class names it happened to use. */
.two-col { gap: var(--raum-4); grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
@media (max-width: 1080px) { .two-col { grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); } }

/* ------------------------------------------------------------------ narrow */

/* A table is not made narrow by shrinking it. Below the width where the columns
   stop fitting, the wrapper scrolls — and the page does not. Anything that must
   be readable on a phone is a definition list, not a table. */
@media (max-width: 760px) {
  .seitenkopf { gap: 12px; }
  .seitenkopf-aktionen { width: 100%; }
  .merkmale { grid-template-columns: minmax(0, 1fr); }
  .merkmale > dt {
    padding: 10px 0 0;
    border-bottom: none;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinte-4);
  }
  .merkmale > dd { padding: 2px 0 10px; }
  .formzeile > input, .formzeile > select, .formzeile > textarea { max-width: none; }
}

@media (max-width: 620px) {
  .content { padding: 18px 16px 64px; }
  .werkzeugleiste { align-items: stretch; }
  .werkzeug-filter { overflow-x: auto; }
}

/* Nothing on any authenticated screen may push the page sideways.

   Deliberately NOT `body { overflow-x: hidden }`. That hides the symptom, and it
   makes the body a scroll container — which silently kills `position: sticky` on
   the review screen's document panel. Wide content scrolls inside its own
   container instead, and the two things that actually cause sideways scroll —
   a flex or grid child that refuses to shrink, and an unbreakable token — are
   fixed where they happen. */
.main, .content { min-width: 0; max-width: 100%; }
.shell > * { min-width: 0; }
/* An IBAN, a SHA-256, a filename somebody else chose. None of them may set the
   width of the page. */
.mono, .bruch, td, dd, .filelist-main a, .geheimnis-wert { overflow-wrap: anywhere; }
/* …except in a table of figures, where a broken number is worse than a scrollbar. */
td.num, th.num, .kennzahl-wert, .leitzahl-wert, .amount, .saldo { overflow-wrap: normal; }

/* ------------------------------------------------------------ accessibility */

/* Status is a word first. Any element that carries meaning by colour also
   carries it in text — this only guarantees the shape survives a forced-colours
   display, where our backgrounds and borders are replaced wholesale. */
@media (forced-colors: active) {
  .pill, .badge, .btn, .card, .abschnitt-kopf, .werkzeugleiste { forced-color-adjust: none; }
  .pill, .badge { border: 1px solid CanvasText; }
  .sichten a.gewaehlt, .nav a.active { border-bottom: 2px solid Highlight; }
}

/* ------------------------------------------------------------------ the rail */

/* The group label is set in the interface face rather than the monospace one.
   A typewriter face on a navigation heading reads as a code listing, and it is
   the first thing a person sees on every screen in the product. */
.nav-group {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  padding: 20px 10px 6px;
}
.nav-group:first-child { padding-top: 4px; }

/* The count sits at the far edge of its row, where a number belongs. */
.nav-zahl { margin-left: auto; }

/* The foot carries three things now, so it is a column rather than a row: the
   door to settings, who is signed in, and the way out. */
.sidebar-foot {
  display: block;
  padding: 12px 10px 14px;
}
.sidebar-einstellungen {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--tinte-2);
  text-decoration: none;
  font-size: 13.5px;
}
.sidebar-einstellungen:hover { background: var(--flaeche); color: var(--tinte); }
.sidebar-einstellungen.active { background: var(--gold-tief); color: var(--gold-hell); font-weight: 500; }
.sidebar-person {
  padding: 10px 10px 0;
  margin-top: 6px;
  border-top: 1px solid var(--linie);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-foot form { padding: 0 10px; }


/* =========================================================================
   WHAT WAS NEVER PORTED
   =========================================================================

   Appended block. Nothing above this line is altered.

   When the interface moved from greif.css to this file, forty class names went
   with the markup and their rules did not. The stylesheet is not linked by any
   authenticated page, so every one of those classes has been resolving to
   nothing ever since:

     the invoice editor's line table      .lines, .col-*
     the totals block under it            .totals, .row.grand, .row.due
     the validation verdict and checklist .verdict, .tick, .ck-label, .problem
     every attachment list in the product .filelist, .dropzone
     the headline amount on four details  .amount-block, .amount
     the settings save button             .knopf
     every row of page actions            .actions

   That is why the product read as unfinished: not because the design was wrong
   but because a third of it was not being drawn at all. A save button rendered
   as the browser's own grey chrome sits under twelve settings sections.

   These are re-expressed in the current language rather than copied back. The
   old rules referenced a light palette that no longer exists.
   ========================================================================= */

/* ------------------------------------------------------------- page actions */

.actions { display: flex; gap: var(--raum-1); align-items: center; flex-wrap: wrap; }
.actions.end { justify-content: flex-end; }

/* ---------------------------------------------------------- headline amount */

/* The one figure a detail page exists to state, at the top right of its header.
   Right-aligned so it sits against the page edge, where the eye goes for a
   total. */
.amount-block { text-align: right; flex: none; }
.amount {
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 600;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}
.amount-block .muted { font-size: 12px; }

/* A key figure that is a problem, and one that is settled. Both also say so in
   words on the screens that use them. */
.stat.is-overdue .value { color: var(--negativ); }
.stat.is-paid .value { color: var(--positiv); }

/* The old `.stat` drew a bordered, filled box per figure — four of them in a
   row was four cards. It is a key figure now: a label, a number, a footnote,
   and the space around them. */
.stat {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-width: 0;
}
.stat .label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-4);
  display: block;
  margin-bottom: 5px;
}
.stat .value {
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 600;
  letter-spacing: -.022em;
  font-variant-numeric: tabular-nums;
  display: block;
  line-height: 1.15;
}
.stat .sub { font-size: 12px; color: var(--tinte-3); display: block; margin-top: 4px; }

/* A row of them shares the key-figure band's rules rather than the card grid's
   gaps, so two figures and four figures look like the same product. */
.grid.grid-2:has(> .stat), .grid.grid-4:has(> .stat) {
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  gap: 0;
  margin-bottom: var(--raum-3);
}
.grid:has(> .stat) > .stat { padding: 13px 20px 13px 0; }
.grid:has(> .stat) > .stat + .stat { border-left: 1px solid var(--linie); padding-left: 20px; }
@media (max-width: 620px) {
  .grid:has(> .stat) > .stat + .stat {
    border-left: none; padding-left: 0; border-top: 1px solid var(--linie);
  }
}

/* ------------------------------------------------------- the invoice editor */

/* The line table. Fixed column widths, because a column that resizes as a
   description is typed makes every figure to its right move while somebody is
   reading it. */
.lines { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lines th {
  text-align: left;
  padding: 0 8px 8px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-4);
  border-bottom: 1px solid var(--linie-stark);
  white-space: nowrap;
}
.lines td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.lines td:last-child, .lines th:last-child { padding-right: 0; }
.lines td input, .lines td select, .lines td textarea {
  padding: 6px 9px;
  font-size: 13.5px;
  min-height: 30px;
}
.lines .col-pos {
  width: 32px;
  color: var(--tinte-4);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  padding-top: 13px;
}
.lines .col-qty   { width: 86px; }
.lines .col-unit  { width: 110px; }
.lines .col-price { width: 118px; }
.lines .col-vat   { width: 150px; }
.lines .col-rate  { width: 72px; }
.lines .col-total { width: 116px; text-align: right; font-variant-numeric: tabular-nums; }
.lines .col-del   { width: 32px; text-align: right; }
/* The second tax of a line (Canadian sellers): the name above, the rate below, so the
   column stays as narrow as the rate column beside it. */
.lines .col-tax2  { width: 108px; }
.lines .col-tax2 select { width: 100%; margin-bottom: 4px; }
.lines .col-tax2 input  { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
/* With a second-tax column the row has nine cells, and at a laptop width the
   description -- the one cell that is read -- was squeezed to a few letters. The
   fixed columns give up what they can spare so the description keeps the remainder. */
.lines.mit-zweiter-steuer .col-qty   { width: 70px; }
.lines.mit-zweiter-steuer .col-unit  { width: 92px; }
.lines.mit-zweiter-steuer .col-price { width: 104px; }
.lines.mit-zweiter-steuer .col-vat   { width: 122px; }
.lines.mit-zweiter-steuer .col-rate  { width: 62px; }
.lines.mit-zweiter-steuer .col-tax2  { width: 92px; }
.lines.mit-zweiter-steuer .col-total { width: 100px; }
.lines.mit-zweiter-steuer td { padding-right: 6px; }
.lines th.col-total, .lines th.col-rate, .lines th.col-qty, .lines th.col-price { text-align: right; }
.lines .col-qty input, .lines .col-price input, .lines .col-rate input {
  text-align: right; font-variant-numeric: tabular-nums;
}
/* Removing a line is destructive and rare: it is not a button competing with
   "Issue invoice", it is a quiet cross at the end of the row. */
.lines button, .removeLine, .removeAc {
  background: none;
  border: none;
  color: var(--tinte-4);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.lines button:hover, .removeLine:hover, .removeAc:hover {
  color: var(--negativ); background: var(--negativ-tief);
}

/* ------------------------------------------------------------- the totals */

/* Right-aligned under the lines, in the place every invoice in Europe puts it.
   The grand total is separated by a rule rather than by a filled panel. */
.totals { margin-left: auto; width: 100%; max-width: 360px; }
.totals .row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 5px 0;
  font-size: 13.5px;
  align-items: baseline;
}
.totals .row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.totals .row.muted { color: var(--tinte-3); font-size: 12.5px; }
.totals .row.grand {
  margin-top: 7px;
  padding-top: 9px;
  border-top: 1px solid var(--linie-stark);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.totals .row.due { font-weight: 600; font-size: 14px; color: var(--tinte); }

/* ----------------------------------------------------------- the verdict */

/* Did this document pass. One answer, said in words, with the colour second.
   The old rule drew a 30px centred panel; a verdict does not need a stage. */
.verdict {
  padding: 0 0 var(--raum-2) 0;
  border: none;
  border-left: 2px solid var(--linie-stark);
  padding-left: 16px;
  text-align: left;
  margin: 0 0 var(--raum-3);
  border-radius: 0;
}
.verdict h1 { font-size: 19px; margin: 0 0 5px; letter-spacing: -.015em; }
.verdict p { margin: 0; color: var(--tinte-3); font-size: 13.5px; max-width: var(--masz); }
.verdict-valid   { border-left-color: var(--positiv); background: transparent; }
.verdict-valid h1 { color: var(--positiv); }
.verdict-invalid { border-left-color: var(--negativ); background: transparent; }
.verdict-invalid h1 { color: var(--negativ); }
.verdict .format-line {
  display: block;
  margin-top: 9px;
  font-size: 12px;
  color: var(--tinte-4);
  font-variant-numeric: tabular-nums;
}

/* The checklist under it. One line per rule, the mark first. */
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linie);
}
.checklist li:last-child { border-bottom: none; }
.checklist .tick { flex: 0 0 15px; margin-top: 1px; font-size: 13px; line-height: 1.4; }
.checklist .passed  .tick { color: var(--positiv); }
.checklist .failed  .tick { color: var(--negativ); }
.checklist .unknown .tick { color: var(--tinte-4); }
.checklist .ck-label { font-size: 13.5px; }
.checklist .ck-detail { display: block; font-size: 12px; color: var(--tinte-3); margin-top: 2px; }
.checklist .passed  .ck-label { color: var(--tinte-2); }
.checklist .failed  .ck-label { color: var(--negativ); font-weight: 500; }
.checklist .unknown .ck-label { color: var(--tinte-3); }

/* One finding: what is wrong in words, the rule it comes from, and — folded
   away — the identifier an integrator would quote. */
.problem {
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
}
.problem:last-child { border-bottom: none; }
.problem .german { display: block; font-size: 14px; color: var(--tinte); line-height: 1.5; }
.problem .rule {
  display: block;
  height: auto;
  background: none;
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--tinte-3);
}
.problem .technical, .technical-details {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--tinte-4);
  overflow-wrap: anywhere;
}
.technical-details { border: none; background: none; padding: 0; }
.technical-details > summary { padding: 0; font-size: 12px; }
.technical-details > *:not(summary) { padding: 6px 0 0; }

/* Where a figure came from: the document, the entry, the rule. */
.provenance {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--tinte-3);
  padding: 9px 0;
  border-top: 1px solid var(--linie);
}
.evidence-ref { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.pairs { display: grid; gap: 0; }

/* ------------------------------------------------------- attachments */

/* Every attachment list in the product used this and none of it existed. */
.filelist { list-style: none; margin: 0; padding: 0; }
.filelist li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
  align-items: baseline;
}
.filelist li:last-child { border-bottom: none; }
.filelist-main { grid-column: 1; min-width: 0; font-size: 13.5px; }
.filelist-main a { overflow-wrap: anywhere; }
.filelist-meta { grid-column: 1; font-size: 12px; color: var(--tinte-4); font-variant-numeric: tabular-nums; }
.filelist-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  gap: var(--raum-1);
  align-items: center;
  flex: none;
}

/* The drop target. A dashed outline is right here and nowhere else: this is the
   one element on the page whose whole meaning is "the edge of an area you can
   drop a file into". */
.dropzone {
  display: block;
  padding: 20px 18px;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-sm);
  background: var(--flaeche-tief);
  text-align: center;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.dropzone:hover { border-color: var(--tinte-4); }
.dropzone.is-over { border-color: var(--gold); background: var(--gold-tief); }
.dropzone input[type="file"] { margin: 0 auto; width: auto; max-width: 100%; }
.dropzone-label { display: block; margin-bottom: 8px; font-size: 13.5px; color: var(--tinte-2); }
.dropzone-hint { display: block; font-size: 12px; color: var(--tinte-4); margin-top: 7px; }
.dropzone-note { display: block; font-size: 12px; color: var(--tinte-4); margin-top: 9px; max-width: var(--masz); }
/* Der Stand einer laufenden Übertragung und ihr Ergebnis (hochladen.js). */
.hochladen-stand { color: var(--tinte-4); margin-top: 7px; }
.hochladen-stand:empty { display: none; }
.hochladen-ergebnis { margin-bottom: 12px; }

/* ------------------------------------------------------ the review screen */

/* A received document beside the form that records it: the page's whole job is
   to let a person read one and type the other without losing their place. */
.review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--raum-4);
  align-items: start;
}
.review-doc { min-width: 0; position: sticky; top: 18px; }
.review-form { min-width: 0; }
@media (max-width: 1080px) {
  .review { grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
  .review-doc { position: static; }
}

/* ----------------------------------------------------------- the buttons */

/* `.knopf` is the settings surface's own name for a button and it resolved to
   nothing: the save control under twelve settings sections was the browser's
   default grey chrome. It is the primary button, because saving is what the
   page is for. */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--steuerhoehe);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #17130A;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.knopf:hover { background: var(--gold-hell); border-color: var(--gold-hell); }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
/* A button that sits beside a value rather than under a form. Secondary, so it
   does not read as the page's main action. */
.knopf-neben {
  background: transparent;
  border-color: var(--linie-stark);
  color: var(--tinte-2);
  font-weight: 500;
}
.knopf-neben:hover { background: var(--flaeche-hoch); border-color: var(--tinte-4); color: var(--tinte); }

/* The one button that ends something for good. Outlined in the failure red, filled only
   on hover, so it is unmistakable and still not the loudest thing on the page. */
.knopf-gefahr {
  background: transparent;
  border-color: var(--negativ);
  color: var(--negativ);
  font-weight: 600;
}
.knopf-gefahr:hover { background: var(--negativ); border-color: var(--negativ); color: var(--grund); }

/* --------------------------------------------------------------- oddments */

/* Named states on the review queue's counts, and the two remaining one-offs. */
.offen { color: var(--tinte); }
.erledigt { color: var(--positiv); }
.vorgemerkt { color: var(--gold-hell); }
.bank-stand { font-size: 12px; color: var(--tinte-4); font-variant-numeric: tabular-nums; }
.feld-name { display: block; font-size: 12.5px; font-weight: 600; color: var(--tinte-2); margin-bottom: 6px; }
.eingabe { width: 100%; max-width: 420px; }

/* A row whose first cell carries a red edge. Kept, restated against the dark
   palette, and never the only signal — the state is a word in the row too. */
.row-overdue td { background: color-mix(in srgb, var(--negativ-tief) 55%, transparent); }
.row-overdue td:first-child { box-shadow: inset 2px 0 0 var(--negativ); }

/* One table, spelled two ways. `.datentabelle` came in with the archive and the
   rest of the product uses a bare <table>; they were within two pixels of each
   other on every measurement, which is the worst possible distance. Pinned
   together here so a list screen looks identical whichever name it used. */
table.datentabelle { font-size: 13.5px; }
table.datentabelle th {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .08em;
  padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--linie-stark);
}
table.datentabelle td { padding: 10px 14px 10px 0; }
table.datentabelle th:last-child, table.datentabelle td:last-child { padding-right: 0; }
.spalte-wahl { width: 30px; padding-right: 0 !important; }

/* `.bar mb` was the product's fourth way of saying "a row of controls". Where it
   survives it now carries the shared gap and the shared control height. */
.bar { gap: var(--raum-1); }
.bar.mb { margin-bottom: var(--raum-2); }

/* ------------------------------------------------------ spacing utilities

   A hundred and ten inline `style="margin:3px 0 0"` attributes were doing the
   work of about six classes. Inline spacing is how a product ends up with four
   different gaps under four headings that are meant to look the same; it is
   also invisible to every media query. These are the six. */
.m0 { margin: 0 !important; }
.mt-1 { margin-top: var(--raum-1); }
.mt-2 { margin-top: var(--raum-2); }
.mt-3 { margin-top: var(--raum-3); }
.mb-2 { margin-bottom: var(--raum-2); }
.mb-3 { margin-bottom: var(--raum-3); }
.selbst { flex: 0 0 auto; }
.schlecht { color: var(--negativ); }
.gut { color: var(--positiv); }
.block-anzeige { display: block; }

/* The validation seal beside its verdict. */
.pruefsiegel { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.pruefsiegel > div { min-width: 0; }

/* A finding's severity as a class rather than as two inline colours pointing at
   variables that no longer exist. An error is red on its edge; a warning is
   neutral — and both print the severity as a word. */
.problem.ist-fehler { border-left: 2px solid var(--negativ); padding-left: 12px; }
.problem.ist-hinweis { border-left: 2px solid var(--linie-stark); padding-left: 12px; }
.problem.ist-fehler .rule { color: var(--negativ); }

/* A second line inside one table cell — a description under a name. */
.zusatzzeile { margin-top: 5px; font-size: 13px; }
/* Server text that already contains its own line breaks. */
.vorformatiert { white-space: pre-wrap; }

/* `.label` was set in the monospace face at 10px in small caps. On a chart axis that
   is right; on the label of every form field in the product it makes a business
   application look like a terminal. The interface face, same size, same spacing. */
.label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--tinte-4);
}

/* ------------------------------------------------------------- forms, applied

   Six screens build their forms out of `.split` rows of `.field` boxes with an
   inline flex-basis on the narrow ones. Rather than rewrite six files into new
   class names — and risk changing which control a label points at — the two
   existing names are given the form-row geometry. One vertical rhythm, one
   label style, one measure, on every form in the product.

   `.split` becomes a grid where it holds fields, which also fixes the narrow
   case: a flexbox row of a 150px field and a fluid one does not wrap usefully
   below about 420px, and this does. */
.field {
  min-width: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--linie);
}
.field:last-child { border-bottom: none; }
.field > label, .field > .label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinte-2);
}
.field > input, .field > select, .field > textarea { width: 100%; max-width: 440px; }
.field .hint { max-width: var(--masz); margin-top: 6px; line-height: 1.55; }

.split:has(> .field) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 var(--raum-3);
  align-items: start;
  border-bottom: 1px solid var(--linie);
}
.split:has(> .field) > .field { border-bottom: none; flex: none !important; }
.split:has(> .field):last-child { border-bottom: none; }

/* A grid of fields, same idea. */
.fields, .form-grid { gap: 0 var(--raum-3); }
.fields > .field, .form-grid > .field { border-bottom: 1px solid var(--linie); }

/* The action row under a form. Same place, same order, same weight on every screen. */
.actions.mt, .form-actions { padding-top: var(--raum-2); margin-top: 0; }

/* A single short form on an otherwise empty page. */
.schmalspalte { max-width: 560px; }

/* A key figure that is a problem. Never colour alone: every screen that uses this
   also prints the word ("overdue", "rule violation") in the footnote beside it. */
.kennzahl.ist-schlecht .kennzahl-wert, .kennzahl.ist-schlecht .value { color: var(--negativ); }

/* ------------------------------------------------ the last of the inline styles

   Six templates carried their own layout in style attributes: a 120px field, a
   two-to-one split, a bulleted list's indent. Each is a decision that belongs in
   one place, and each was invisible to every media query — which is most of why
   the narrow layouts were wrong. */

.feld-schmal { max-width: 180px; }
.feld-schmal > input, .feld-schmal > select { max-width: none; }

.rechtsbuendig { justify-content: flex-end; }
.mittig { align-items: center; }

/* A document beside the form that records it. Grid rather than two flex bases, so
   it collapses to one column at a width a person actually uses. */
.spalte-haupt { flex: 2 1 480px; min-width: 0; }
.spalte-neben { flex: 1 1 280px; min-width: 0; }

/* A real bulleted list, indented once here rather than per screen. */
.aufzaehlung { margin: 0; padding-left: 18px; }
.aufzaehlung.mt-1 { margin-top: var(--raum-1); }

/* The scrub figure inside the chart's change line. It never had a rule of its own;
   it takes the tabular figures its neighbours have so a scrub does not make the
   line jitter as digits change width. */
.kurve-lauf-wert { font-variant-numeric: tabular-nums; }

/* The sign-in screens have their own stylesheet and their own composition, and they
   load this one first. `.field` is a form row in the product and a plain stack of
   two elements there; without this the login form grows hairlines it never asked
   for. Scoped rather than renamed, because the markup is another surface's. */
.auth-form .field { padding: 0; border-bottom: none; }
.auth-form .field > label { font-size: 13px; color: var(--tinte-2); }
.auth-form .field > input { max-width: none; }

/* ===================================================================== paywall

   The plan picker, and the page somebody lands on after paying.

   Deliberately outside the application shell. A sidebar full of things a person
   cannot open is a tease, and it invites the reasonable question of why the
   product is visible if it is closed. Until a plan is paid for, this IS the
   product, so it is laid out as a page rather than as a screen inside one. */

.planwahl-seite {
  min-height: 100vh;
  background: var(--grund);
  padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px) 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-3);
}

.planwahl-kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 62ch;
}
.planwahl-kopf .mark { height: 26px; width: auto; margin-bottom: 8px; }
.planwahl-kopf h1 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; }
.planwahl-text { color: var(--tinte-2); margin: 0; max-width: 58ch; }

/* Said before the prices, not after. */
.planwahl-hinweis {
  color: var(--tinte-2);
  background: var(--gold-tief);
  border: 1px solid var(--gold-linie);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13.5px;
  margin: 0;
  max-width: 66ch;
  text-align: center;
}

.planwahl-schalter, .planwahl-waehrung {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.planwahl-waehrung label { color: var(--tinte-3); font-size: 13px; }
/* Both selectors stack rather than overflow once the row no longer fits. */
.planwahl-schalter, .planwahl-waehrung { flex-wrap: wrap; justify-content: center; }
.planwahl-waehrung { max-width: 60ch; }
.planwahl-waehrung-hinweis {
  flex-basis: 100%;
  margin: 0;
  color: var(--tinte-3);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

/* Monthly or yearly. A segmented control, because it is one choice with two
   answers and a pair of buttons would read as two separate actions. */
.taktwahl {
  display: inline-flex;
  background: var(--flaeche-tief);
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
}
.taktwahl button {
  border: 0;
  background: transparent;
  color: var(--tinte-2);
  font: inherit;
  font-size: 13.5px;
  padding: 7px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.taktwahl button:hover { color: var(--tinte); }
.taktwahl button.gewaehlt {
  background: var(--flaeche);
  color: var(--tinte);
  box-shadow: var(--schatten);
}

/* THE LADDER, LAID OUT BY WIDTH RATHER THAN BY BREAKPOINT.

   It used to be four fixed columns down to 1000px and two below that. Between
   1001 and 1100 that produced four cards about 200px wide: prices on two lines,
   the "Recommended" mark clipped, and every long word broken letter by letter.
   The fix is not a smaller font -- a card has a width below which it stops being
   readable no matter what size the type is, and that width is what belongs in
   the CSS. So: as many columns as fit at >= 264px each, never more than four,
   and the browser decides where the steps fall. A card is therefore never
   narrower than 264px on any screen, at any zoom, in any language. */
.planwahl-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(264px, 100%), 1fr));
  gap: var(--raum-2);
  width: 100%;
  /* Four columns of 264 + three gaps is the widest this may become: a fifth
     column cannot appear, and four cards cannot stretch into billboards. */
  max-width: 1180px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Below the narrowest card the grid can build, one column -- not a 264px card
   overflowing a 320px screen with 16px of page padding on each side. */
@media (max-width: 340px) {
  .planwahl-liste { grid-template-columns: minmax(0, 1fr); }
}

/* Four discrete objects a person is choosing between: a card is right here, and
   it is one of the few places in the product where it is. */
.planwahl-plan {
  display: flex;
  flex-direction: column;
  /* A grid item's default min-width is its content, which is how a long German
     capability line used to push a card wider than its column and take the row
     with it. */
  min-width: 0;
  gap: 10px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-3) var(--raum-2) var(--raum-2);
}
.planwahl-empfohlen {
  border-color: var(--gold-linie);
  box-shadow: inset 0 2px 0 var(--gold), var(--schatten);
}

.planwahl-marke {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  min-height: 1.6em;
}
.planwahl-plan h2 { font-size: 18px; margin: 0; overflow-wrap: break-word; }
/* Amounts wrap as a unit or not at all: "CA$" on one line and "29,00" on the
   next is not a price. */
.planwahl-preis > * { overflow-wrap: normal; }
.planwahl-fuer {
  color: var(--tinte-2);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  /* Platz fuer die laengste der vier Fassungen, damit die vier Preise auf einer Linie
     stehen. Vier Zeilen sind das Maximum in allen fuenf Sprachen; darunter driftet der
     Preis der einen Karte gegenueber den anderen nach unten, und ein Preisvergleich, bei
     dem die Preise nicht auf einer Hoehe stehen, ist keiner. */
  min-height: 6em;
}
/* Der Betrag steht links wie alles andere in der Karte.
 *
 * .num richtet rechtsbuendig aus, weil Betraege in einer TABELLE untereinander stehen und
 * dort ihre Stellen ausrichten muessen. In einer Karte steht kein zweiter Betrag darunter:
 * dort erzeugt dieselbe Regel nur einen Preis, der von der Ueberschrift ueber ihm wegdriftet.
 * Die Ziffernbreite (tabular-nums) bleibt, die Ausrichtung nicht. */
.planwahl-preis { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.planwahl-preis .num, .planwahl-preis { text-align: left; }
.planwahl-betrag { font-size: 26px; letter-spacing: -.02em; }
.planwahl-takt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--tinte-3);
}
.planwahl-benutzer {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--tinte-2);
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linie);
}
.planwahl-merkmale {
  display: flex;
  flex-direction: column;
  gap: 7px;
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
}
.planwahl-merkmale li {
  position: relative;
  padding-left: 14px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tinte-2);
}
.planwahl-merkmale li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 1px;
  background: var(--gold);
}
.planwahl-plan form { margin-top: var(--raum-2); }
.planwahl-plan form .btn { width: 100%; justify-content: center; }

.planwahl-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  color: var(--tinte-3);
  font-size: 13px;
  margin-top: var(--raum-2);
}
.planwahl-fuss p { margin: 0; }

/* THE FUNNEL STRIP. Shared by the registration form and the paywall, so the two
   screens read as one act. Numbers rather than ticks: a tick claims a step went
   well, and step 1 may have gone badly and be about to be repeated. */
.trichter { width: 100%; max-width: 1180px; }
.trichter-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trichter-schritt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--tinte-4);
}
.trichter-zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10.5px;
  line-height: 1;
}
.trichter-hinter { color: var(--tinte-3); }
.trichter-hier { color: var(--tinte); }
.trichter-hier .trichter-zahl {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--grund, #fff);
}
.trichter-hier .trichter-name { font-weight: 500; }
/* Under about 420px the three names no longer fit on one line; only the step
   being taken keeps its name, and the other two stay as numbers rather than
   wrapping into a three-line block above the form. */
@media (max-width: 420px) {
  .trichter-vor .trichter-name, .trichter-hinter .trichter-name { display: none; }
}
/* Und bei 200% Zoom auf einem Telefon bleiben nur noch die Ziffern. */
@media (max-width: 300px) {
  .trichter-liste { gap: 4px 10px; }
  .trichter-name { display: none; }
}

/* WHAT THIS COUNTRY GETS -- the same two lists the public pricing page draws.
   Above the cards, because it is true of every plan and belongs to none. */
.planwahl-land {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 1180px;
  background: var(--flaeche-tief);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-2);
}
.planwahl-land-titel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin: 0;
}
.planwahl-land-zweit { margin-top: 10px; }
.planwahl-land-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 6px var(--raum-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.planwahl-land-liste li {
  position: relative;
  min-width: 0;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinte-2);
  overflow-wrap: break-word;
}
.planwahl-land-liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 6px; height: 1px;
  background: var(--gold);
}
.planwahl-land-fuss {
  margin: 4px 0 0;
  color: var(--tinte-3);
  font-size: 12px;
  line-height: 1.5;
}

/* The practice product: a different buyer, so a different block -- not a fifth
   rung on a ladder a company owner is climbing. */
.planwahl-kanzlei {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  max-width: 1180px;
  border-top: 1px solid var(--linie);
  padding-top: var(--raum-2);
  color: var(--tinte-2);
  font-size: 13px;
  line-height: 1.55;
}
.planwahl-kanzlei-titel {
  margin: 0;
  color: var(--tinte);
  font-size: 15px;
}

/* A button that reads as a link: leaving is available, and not encouraged. */
.btn-link {
  border: 0;
  background: transparent;
  color: var(--tinte-3);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: var(--tinte-4);
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0;
}
.btn-link:hover { color: var(--tinte); }

.planwahl-warten {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-2);
  max-width: 56ch;
  text-align: center;
}

/* The reserved line for the "who it is for" sentence exists to keep four cards'
   prices on one baseline. Below four columns there is no baseline to keep, and
   the reserved space is then just a hole. */
@media (max-width: 1120px) {
  .planwahl-fuer { min-height: 0; }
}

/* ---------------------------------------------------------------- subscription

   Settings › Subscription & billing. Everything here sits inside the ordinary
   settings frame — setzblock, setzeile and the rest — so this file adds only the
   four things that screen has and no other settings section does: a statement of
   which world the billing is in, a state that has to read differently when it is
   not access, a row of actions rather than one save button, and a plan list that
   is a choice rather than a summary.
*/

/* Which world this is. Deliberately conspicuous and deliberately not an error
   colour: a test installation is not broken, it is a fact somebody has to see
   before they read a price and believe they are paying it. */
.abo-umgebung {
  margin: 0 0 var(--raum-2);
  padding: 10px 14px;
  border: 1px solid var(--gold-linie);
  border-radius: var(--radius-sm);
  background: var(--gold-tief);
  color: var(--tinte-2);
  font-size: 13.5px;
  max-width: 72ch;
}

/* The state. It carries no colour while the subscription is open, because
   "everything is fine" does not need decoration, and takes a warning colour the
   moment the state is one that does not grant access — which is the one thing
   about this page a person must not be able to skim past. */
.abo-stand { font-variant-numeric: normal; }
.abo-stand-zu { color: var(--negativ); }

/* One reason, above the controls it explains. */
.abo-grund { margin: 0 0 var(--raum-2); max-width: 72ch; }

/* Actions sit in a row and wrap. A disabled button stays in place rather than
   disappearing, so that the page does not reflow between two visits and leave
   somebody sure that a control they remember has been taken away. */
.abo-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: var(--raum-2) 0 0;
}
.abo-aktionen form { margin: 0; }
.abo-aktionen .btn[disabled] { opacity: .55; cursor: not-allowed; }

.abo-wechsel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.abo-wechsel-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--linie);
}
.abo-wechsel-zeile .setzeile-hinweis { margin: 0; }
.abo-wechsel-zeile form { margin: 0; }

/* The plan they are already on says so, in the place the button would be, so the
   row is not a control that does nothing. */
.abo-wechsel-jetzt {
  color: var(--tinte-3);
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .abo-wechsel-zeile { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------------------------------------------------------------------------
   Einstellungen › Online bezahlen.

   The settings frame supplies the block, the row and the rhythm. What is added
   here is what this screen has and the others do not: a statement of which world
   the credential belongs to, a state that must read differently the moment the
   merchant cannot actually take money, a row of actions rather than one save
   button, and a list of currencies that is a fact rather than a choice.
*/

/* Which world this is. Conspicuous and deliberately not an error colour: a test
   installation is not broken. It is a fact somebody has to see before they put a
   pay link on an invoice and wait for money that cannot arrive. */
.zlg-umgebung {
  margin: 0 0 var(--raum-2);
  padding: 10px 14px;
  border: 1px solid var(--gold-linie);
  border-radius: var(--radius-sm);
  background: var(--gold-tief);
  color: var(--tinte-2);
  font-size: 13.5px;
  max-width: 72ch;
}

/* The state, and the two lines under it that say what it means in practice.

   No colour while the merchant can collect, because "you can be paid" needs no
   decoration; the warning colour the instant they cannot. That is the one thing
   on this page nobody may skim past — a business that reads a neutral line and
   assumes it is set up will send invoices its customers cannot settle. */
.zlg-stand { font-variant-numeric: normal; }
.zlg-stand-zu { color: var(--negativ); }

/* The date something gets withdrawn.

   Tabular figures so that a date sits under the other values rather than beside
   them, and no colour at all. It is deliberately not red: the line appears while
   everything is still working, which is the only moment at which reading it does
   any good, and painting it as a fault would tell a business its payments have
   already stopped when they have not. */
.zlg-frist { font-variant-numeric: tabular-nums; }

/* One reason, under the controls it explains. */
.zlg-grund { margin: var(--raum-2) 0 0; max-width: 72ch; }

/* Actions sit in a row and wrap. A refused control keeps its place rather than
   disappearing, so the page does not reflow between two visits and leave somebody
   certain that a control they remember has been taken away. */
.zlg-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: var(--raum-2) 0 0;
}
.zlg-aktionen form { margin: 0; }
.zlg-aktionen .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* The currencies the provider says this merchant can be charged payers in. A
   wrapping list of codes rather than a table: it is often long, it is read by
   scanning for one code, and it carries no second column. */
.zlg-waehrungen {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 72ch;
}
.zlg-waehrungen li {
  padding: 2px 8px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tinte-2);
}

/* ============================================================ the payer's page

   The one screen in the product written for somebody who does not use the
   product: a business's own customer, holding an invoice, following a link out
   of an email.

   Laid out as a page rather than as a screen inside the application shell,
   for the same reason the plan picker is: there is no navigation to draw
   because there is nothing here for the reader to open, and a sidebar full of
   a stranger's software beside their supplier's bill is an advertisement, not
   an interface. Four facts, one sentence and at most one button. */

.zahlseite {
  min-height: 100vh;
  background: var(--grund);
  padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px) 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-3);
}

.zahlseite-kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.zahlseite-kopf .mark { height: 22px; width: auto; }
.zahlseite-kopf h1 { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.02em; }

.zahlseite-block {
  width: 100%;
  max-width: 44ch;
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  padding: clamp(18px, 3vw, 28px);
}

/* The figure the reader is being asked for. The one number on the page that has
   to be readable across a room, because it is the one they check against the
   paper in their hand. */
.zahlseite-betrag {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.zahlseite-satz {
  margin: 0;
  color: var(--tinte-2);
}

.zahlseite-hinweis {
  margin: 0;
  font-size: 13px;
  color: var(--tinte-3);
}

.zahlseite-aktion { margin: 0; }
.zahlseite-aktion .btn { width: 100%; justify-content: center; }

.zahlseite-fuss {
  color: var(--tinte-3);
  font-size: 13px;
  text-align: center;
  max-width: 52ch;
}
.zahlseite-fuss p { margin: 0; }

/* The address the merchant copies out of the archive and sends to their
   customer. Allowed to wrap: it is long, and a link that is cut off at the
   edge of a column is a link somebody copies half of. */
.zahlungslink-adresse {
  margin: 4px 0 0;
  font-size: 13px;
  overflow-wrap: anywhere;
  color: var(--tinte-2);
}

/* ====================================================== the invoice on that page

   The sheet a merchant's customer opens out of an email. It is their supplier's
   document, not our screen, so it is laid out as a document: one white surface
   with generous margins, a letterhead at the top left, the document's identity
   at the top right, the lines in a table, the totals under it, and the money
   figure the reader is being asked for sitting where their eye lands last.

   The restraint is the design. There is one accent (the payable total), one
   weight change (the letterhead and the totals), and no colour used decoratively
   anywhere — the only coloured thing on a settled invoice is the word that says
   so. A payment page that looks like a marketing page reads as a phishing page,
   and this one is opened by people who were not expecting it. */

/* Die Farbe und die Schrift des Ausstellers.

   Als Variablen mit Rueckfall, damit dieselbe Regel fuer einen Betrieb gilt, der
   nie etwas gewaehlt hat: --marke-akzent faellt auf das Gold zurueck, das jeder
   Beleg vorher hatte. Gesetzt werden sie am Blatt selbst (siehe Vorlage), was
   bedeutet, dass zwei offene Blaetter zweier Firmen nebeneinander richtig
   aussehen -- es gibt keinen gemeinsamen Zustand, ueber den sie sich streiten. */
.zahlbeleg {
  --marke-akzent: var(--gold);
  --marke-schrift: inherit;
  width: 100%;
  max-width: 780px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  box-shadow: var(--schatten);
  padding: clamp(20px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
}

/* ------------------------------------------------------------ the letterhead */

/* Nothing to show is its own width. A sentence saying an address belongs to no
   invoice, set across 780px of empty sheet, reads as a page that failed to
   load; set across a short measure it reads as an answer. */
.zahlbeleg-knapp { max-width: 46ch; }

.zahlbeleg-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--raum-2) var(--raum-3);
  padding-bottom: var(--raum-2);
  border-bottom: 2px solid var(--marke-akzent);
}

.zahlbeleg-firma { font-family: var(--marke-schrift); }
.zahlbeleg .zahlbeleg-titel,
.zahlbeleg h1 { color: var(--marke-akzent); }

.zahlbeleg-marke { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }

/* Das Logo des Ausstellers, wo es eines gibt. Hoehe begrenzt und nicht Breite:
   ein Wortmarken-Logo ist breit und ein Signet quadratisch, und beide sollen
   dieselbe Zeile hoch sein wie die Initialen, die sie ersetzen. */
.zahlbeleg-logo {
  flex: none;
  max-height: 48px;
  max-width: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Initials, where the business has uploaded no mark. An empty picture frame
   would be worse than a name set properly. */
.zahlbeleg-monogramm {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--flaeche-tief);
  border: 1px solid var(--linie);
  color: var(--tinte-2);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.zahlbeleg-absender { min-width: 0; }
.zahlbeleg-firma {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tinte);
}
.zahlbeleg-anschrift { margin: 3px 0 0; font-size: 13px; color: var(--tinte-2); }
.zahlbeleg-anschrift span { display: block; }

.zahlbeleg-kennungen {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--tinte-3);
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 1px 8px;
}
.zahlbeleg-kennungen dt { margin: 0; }
.zahlbeleg-kennungen dd { margin: 0; color: var(--tinte-2); }

/* The document's own identity, opposite the letterhead. Right-aligned on a wide
   screen and left-aligned once the two blocks stack, because a lone right-aligned
   column on a telephone reads as a mistake. */
.zahlbeleg-titel { text-align: right; min-width: 0; }
.zahlbeleg-art {
  margin: 0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-3);
}
/* The number, in the monospaced face and at the weight that face actually has.

   IBM Plex Mono ships here in 400 and 500 only, so a 600 was being synthesised
   by the browser — which on a monospaced face at 19px smears the digits into
   each other, on the one string a reader compares character by character
   against the paper in their hand. */
.zahlbeleg-nummer {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tinte);
}
.zahlbeleg-daten {
  margin: 10px 0 0;
  font-size: 13px;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: end;
  gap: 2px 12px;
}
.zahlbeleg-daten dt { margin: 0; color: var(--tinte-3); }
.zahlbeleg-daten dd { margin: 0; color: var(--tinte); font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .zahlbeleg-titel { text-align: left; }
  .zahlbeleg-daten { justify-content: start; }
}

/* ------------------------------------------------------------- who it is for */

.zahlbeleg-empfaenger { margin: 0; }
.zahlbeleg-marker {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-3);
}
.zahlbeleg-kunde { margin: 3px 0 0; font-size: 15px; color: var(--tinte); }

/* ------------------------------------------------------------------ the lines */

/* The table scrolls inside its own box. The page never scrolls sideways: a
   document the reader has to pan around on a telephone is a document they close. */
.zahlbeleg-tabelle { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

table.zahlbeleg-zeilen {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.zahlbeleg-zeilen th {
  text-align: left;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-3);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--linie-stark);
  white-space: nowrap;
}
table.zahlbeleg-zeilen th.num, table.zahlbeleg-zeilen td.num { text-align: right; }
table.zahlbeleg-zeilen td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
  color: var(--tinte);
}
table.zahlbeleg-zeilen td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.zahlbeleg-zeilen th:last-child, table.zahlbeleg-zeilen td:last-child { padding-right: 0; }
table.zahlbeleg-zeilen tr:last-child td { border-bottom: none; }

/* The description column breaks at word boundaries, and hyphenates where the
   language allows it.

   The shared rule sets overflow-wrap:anywhere on every td, which is right for an
   IBAN and wrong for a sentence: on a telephone it split "Wartungspauschale"
   after "Wartungspausch", which reads as a rendering fault on somebody's
   invoice. Hyphenation is the browser's, in the document's own language, which
   the page states on <html>. */
table.zahlbeleg-zeilen td:first-child {
  overflow-wrap: break-word;
  hyphens: auto;
}
table.zahlbeleg-zeilen th:first-child { width: 38%; }

.zahlbeleg-leistung { display: block; }
.zahlbeleg-beschreibung {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--tinte-2);
}
.zahlbeleg-einheit { color: var(--tinte-3); margin-left: 4px; }

/* The currency, once per money column, in the heading. A column head that names
   the currency is the one shape in which a bare figure underneath is honest. */
.zahlbeleg-waehrung { text-transform: none; letter-spacing: 0; color: var(--tinte-4); }

.zahlbeleg-leer { margin: 0; color: var(--tinte-2); font-size: 13.5px; }

/* On a telephone the table stops being wide and starts being narrow.

   The sideways scroll is the fallback, not the plan: at 390px the amount column
   sat off the right edge, which is the one figure the reader opened the link to
   see. So below the breakpoint the minimum width is dropped, the columns
   compress, and the rate column is removed — its information is not lost,
   because the tax summary underneath names every rate with its base and its
   amount, which is where somebody checking the tax looks anyway. */
@media (max-width: 620px) {
  table.zahlbeleg-zeilen { min-width: 0; font-size: 12px; }
  table.zahlbeleg-zeilen th, table.zahlbeleg-zeilen td { padding-right: 6px; }
  /* And the description column gives way first.
     Measured on a 390px telephone with a two-line item: the four remaining
     columns wanted 333px of a 324px box, so the amount -- the one figure the
     reader opened the link to see -- sat nine pixels past the edge, inside a
     scroller nobody scrolls. The description is the column that can lose nine
     pixels and still be read, because it wraps and hyphenates; a money column
     cannot, because it does neither. */
  table.zahlbeleg-zeilen th:first-child { width: 30%; }
  table.zahlbeleg-zeilen th:nth-child(4),
  table.zahlbeleg-zeilen td:nth-child(4) { display: none; }
  table.zahlbeleg-zeilen th { white-space: normal; }
  table.zahlbeleg-zeilen td.num { white-space: normal; }
  .zahlbeleg-einheit { display: block; margin-left: 0; }
  .zahlbeleg-summen { max-width: none; }
}

/* ----------------------------------------------------------------- the totals */

.zahlbeleg-summen {
  margin-left: auto;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zahlbeleg-summenliste {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  font-size: 13.5px;
}
.zahlbeleg-summenliste dt { margin: 0; color: var(--tinte-2); }
.zahlbeleg-summenliste dd {
  margin: 0;
  text-align: right;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
}

/* The taxable base beside the rate. Small, because it answers "of what" and is
   not the figure anybody is checking. */
.zahlbeleg-grundlage { color: var(--tinte-4); font-size: 12px; margin-left: 6px; }

.zahlbeleg-befreiung {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--tinte-2);
}

.zahlbeleg-gesamt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--linie);
  font-size: 14px;
  color: var(--tinte-2);
}
.zahlbeleg-gesamtwert {
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  font-weight: 600;
}

/* The one figure that has to be readable across a room, because it is the one
   the reader checks against the paper in their hand before they pay it. */
.zahlbeleg-offen { border-top-color: var(--linie-stark); }
.zahlbeleg-offen .zahlbeleg-gesamtwert { font-size: 24px; letter-spacing: -.02em; }

/* ------------------------------------------------------------- paying, or not */

.zahlbeleg-zahlen {
  padding: var(--raum-2);
  background: var(--flaeche-hoch);
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zahlbeleg-aufforderung {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.zahlbeleg-satz { margin: 0; color: var(--tinte-2); font-size: 13.5px; }
.zahlbeleg-aktion { margin: 0; }
.zahlbeleg-aktion .btn { width: 100%; justify-content: center; }
.zahlbeleg-knopfbetrag { font-variant-numeric: tabular-nums; opacity: .85; }
.zahlbeleg-hinweis { margin: 0; font-size: 12.5px; color: var(--tinte-3); }

/* The one sentence on this page that has to interrupt the reader: the quote changed
   while their tab was open, so the button they just pressed recorded nothing. Set off
   with a rule rather than a colour, because this page is a merchant's document and a
   red box on it belongs to nobody. */
.zahlbeleg-satz.ist-ueberholt {
  border-left: 2px solid var(--linie-stark);
  padding-left: 12px;
  color: var(--tinte);
}

/* A bigger target than the rest of the product uses, once, on the control that
   moves money. It is pressed on a telephone by somebody who does not use this
   software and will not press it twice. */
.btn-gross {
  padding: 13px 20px;
  font-size: 15px;
  gap: 10px;
}
.btn-klein { padding: 6px 12px; font-size: 13px; }

/* --------------------------------------------------------- keeping a copy, foot */

.zahlbeleg-werkzeuge { display: flex; flex-wrap: wrap; gap: var(--raum-1); }

.zahlbeleg-fuss {
  border-top: 1px solid var(--linie);
  padding-top: var(--raum-2);
  color: var(--tinte-3);
  font-size: 12.5px;
}
.zahlbeleg-fuss p { margin: 0; }
.zahlbeleg-plattform {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px !important;
  color: var(--tinte-4);
}
.zahlbeleg-plattform .mark { height: 13px; width: auto; opacity: .55; }

/* ---------------------------------------------------------------------- print

   A customer will want this on paper or as a PDF, and the browser's own print is
   the shortest route to both. What comes out is the document and nothing else:
   the controls are removed rather than greyed, because a printed page with a
   dead "Pay now" button on it is a page that confuses whoever files it. */
@media print {
  .zahlseite { background: #FFFFFF; padding: 0; display: block; min-height: 0; }
  .zahlbeleg {
    max-width: none;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: 20px;
  }
  .zahlbeleg-werkzeuge,
  .zahlbeleg-aktion,
  .zahlbeleg-aufforderung { display: none; }
  .zahlbeleg-zahlen { background: transparent; border: none; padding: 0; }
  .zahlbeleg-tabelle { overflow-x: visible; }
  table.zahlbeleg-zeilen { min-width: 0; }
  table.zahlbeleg-zeilen tr { break-inside: avoid; }
  .zahlbeleg-summen { break-inside: avoid; }
}

/* ----------------------------------------------------------------- Widersprüche

   A dispute is not a status on a row; it is a thing a business has to answer,
   somewhere else, by a date somebody else set. So it is drawn as a block with a
   left edge in the negative colour rather than as a table row: a table says
   "one of many like it", and the whole point is that this one is not.

   No card. It is a section's content and the structural test is right to say so
   — the object here is the invoice, and the invoice already has a page. */
.widersprueche { display: flex; flex-direction: column; gap: 12px; }

.widerspruch {
  border-left: 3px solid var(--negativ);
  background: var(--negativ-tief);
  padding: 12px 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.widerspruch-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.widerspruch-betrag { font-size: 1.05rem; }

.widerspruch-grund { margin: 8px 0 0; color: var(--tinte-2); font-size: .9rem; }

/* The provider's own word, kept beside its translation rather than replaced by
   it. A merchant arguing with a bank quotes the bank's word back, and a screen
   that had silently turned "product_not_received" into a German sentence would
   have taken that away from them. */
.widerspruch-wort { color: var(--tinte-3); font-size: .8rem; }

.widerspruch-daten {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 10px 0 0;
}
.widerspruch-daten dt {
  color: var(--tinte-3);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.widerspruch-daten dd { margin: 2px 0 0; font-family: var(--mono); font-size: .85rem; }

.widerspruch-warnung { margin: 10px 0 0; }

/* Where the answer is given. Quiet, because it is a standing fact rather than a
   change — but present on every open dispute, because the alternative is a
   merchant looking for a button in KRONENWERK that will never exist. */
.widerspruch-wo { margin: 10px 0 0; }

/* ------------------------------------------------------ 25. Angebotsbildner */

/* Zwei Spalten, aber nicht die des Rechnungsbildners.
 *
 * .zweispalt teilt 1,9 zu 1, und das ist richtig, wo rechts ein Kasten mit
 * Summen steht: der braucht wenig Platz und das Formular viel. Rechts steht
 * hier aber ein BELEG mit fünf Spalten -- Bezeichnung, Menge, Einzelpreis,
 * Satz, Betrag --, und in 380 Pixeln ist der Betrag abgeschnitten. Eine
 * Vorschau, die den Betrag nicht zeigt, ist keine Vorschau.
 *
 * Also fast gleich breit, mit einem leichten Übergewicht links, weil dort
 * getippt wird. Unterhalb von 1180 Pixeln untereinander: nebeneinander wären
 * dann beide zu schmal, und der Beleg gehört unter das Formular und nicht
 * daneben.
 */
.angebotsbildner {
  display: grid;
  gap: var(--raum-4);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
.angebotsbildner > * { min-width: 0; }

/* Die Vorschau bleibt stehen, während links gescrollt wird. Ein Beleg, den man
 * nur sieht, wenn man zufällig oben ist, beantwortet die Frage nicht, für die
 * er da ist -- »was bekommt der Kunde«, gestellt beim Tippen der achten Zeile. */
.angebotsvorschau { position: sticky; top: var(--raum-3); }

/* Der Beleg in der Vorschau ist derselbe wie der, den der Kunde abruft, nur
 * enger gesetzt: er steht neben einem Formular und nicht allein auf einer
 * Seite. Nur Abstände, keine Schriftgrössen -- ein verkleinerter Beleg wäre
 * eine Vorschau, die anders aussieht als das, was ankommt. */
.angebotsvorschau .zahlbeleg { padding: 22px 20px; }

/*
 * Untereinander, sobald es für beides nicht reicht.
 *
 * Die Grenze liegt hoch, und das ist der Punkt. Links stehen neun Spalten --
 * Position, Bezeichnung, Menge, Einheit, Einzelpreis, Nachlass, Kategorie,
 * Satz, Löschen --, rechts ein Beleg mit fünf. Auf einem gewöhnlichen
 * Notebook nebeneinander heisst: in beiden Tabellen ist die letzte Spalte
 * abgeschnitten, und die letzte Spalte des Belegs ist der Betrag. Eine
 * Vorschau ohne Betrag ist keine Vorschau, und ein Eingabefeld, in dem drei
 * Zeichen stehen, ist kein Eingabefeld.
 *
 * Untereinander ist beides vollständig lesbar und die Vorschau einen
 * Bildlauf entfernt. Das ist die schlechtere Anordnung und die bessere
 * Antwort.
 */
@media (max-width: 1560px) {
  .angebotsbildner { grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
  .angebotsvorschau { position: static; }
  .angebotsvorschau .zahlbeleg { padding: 28px 26px; }
}

.angebotsaktion + .angebotsaktion {
  margin-top: var(--raum-3);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--linie);
}

/*
 * Spalten, die ein Telefon nicht trägt.
 *
 * Eine Tabelle mit sechs Spalten quetscht sich auf 390 Pixeln nicht, sie
 * zerbricht: der Kundenname bricht mit einem Buchstaben je Zeile um und die
 * letzte Spalte -- der Zustand -- steht ausserhalb des Bildschirms. Ein
 * seitlicher Bildlauf wäre die andere Möglichkeit und die schlechtere: was
 * rechts liegt, sieht dann niemand, der nicht danach sucht.
 *
 * Also werden die beiden Datumsspalten auf schmalen Geräten ausgeblendet und
 * unter der Nummer noch einmal ausgegeben, wo Platz ist. Nichts verschwindet;
 * es steht woanders.
 */
.tabelle-schmal { display: none; }

@media (max-width: 760px) {
  .tabelle-breit { display: none; }
  .tabelle-schmal { display: block; }
}

/* ================================================ the estimate somebody answers

   The same sheet as the invoice a customer pays, and then one more block: the
   two answers. It sits under the document rather than inside it, because the
   document is what the customer is deciding about and the decision is not part
   of it — and because a printed estimate with a dead "Accept" button on it is a
   page that confuses whoever files it.

   There is no third colour and no illustration. This page is opened by somebody
   who was not expecting it, out of an email, and a sales page that looks
   designed to persuade reads as a page designed to trick. */

.zahlbeleg-antwort { gap: var(--raum-2); }

/* Accept first, decline beside it and quieter — not hidden. A refusal that is
   hard to find is a customer who closes the tab, and a closed tab is the one
   answer a business cannot act on. */
.zahlbeleg-antwortknoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
}
.zahlbeleg-antwortknoepfe .btn { flex: 1 1 200px; justify-content: center; }
.zahlbeleg-antwortknoepfe .btn-klein { flex: 0 0 auto; }

/* What is being agreed to, restated immediately above the button that agrees. */
.zahlbeleg-pruefung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--raum-2);
  margin: 0;
  padding: var(--raum-2);
  background: var(--flaeche-hoch);
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.zahlbeleg-pruefung dt { margin: 0; color: var(--tinte-3); }
.zahlbeleg-pruefung dd { margin: 0; color: var(--tinte); }

.zahlbeleg-bedingungen { margin: 0; }

.zahlbeleg-formular {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
}
.zahlbeleg-formular .feld { margin: 0; }

@media print {
  .zahlbeleg-antwort, .zahlbeleg-antwortknoepfe { display: none; }
}

/* The four estimate questions on the overview. Four short lists, one heading
   each, no tile and no figure standing alone — every line is a document with a
   name on it and leads to that document. */
.angebotslage { margin: 0 0 var(--raum-2); }
.angebotslage:last-child { margin-bottom: 0; }
.angebotslage-kopf {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-3);
}

/* ---------------------------------------------------------------- tax and plans

   Three small things the plan cards gained when the pricing had to start telling
   the truth about tax and about what a plan actually delivers.

   The tax line is deliberately quiet and deliberately adjacent: it belongs to the
   number above it, and a reader who takes in the price takes it in too. Making it
   loud would be its own kind of dishonesty — the price is still the price. */

.planwahl-steuer {
  font-size: 12px;
  color: var(--tinte-3);
}

/* "Everything in Starter, plus:" — the line that stops four cards repeating each
   other. Quiet, because it introduces the list rather than competing with it. */
.planwahl-baut-auf {
  margin: 0;
  font-size: 12.5px;
  color: var(--tinte-2);
}

/* A plan that is shown and not sold. It sits where the button would be, so the
   card keeps its shape and the reason lands where the reader looks for the price
   to be justified. */
.planwahl-nochnicht,
.plan-nochnicht {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tinte-2);
  background: var(--flaeche-tief);
}

.plan-steuer {
  margin: 0;
  font-size: 12.5px;
  color: var(--tinte-3);
}

/* On a phone the four cards are one column, so the price and its tax line must
   read as one block rather than two stacked sentences. */
@media (max-width: 560px) {
  .planwahl-preis { align-items: flex-start; }
  .planwahl-steuer { margin-top: 2px; }
}

/* Was ein Land kann, ueber den Plaenen. Es haengt am Land und nicht am Preis, also
   steht es einmal oben und nicht viermal in den Karten. */
.planwahl-land {
  max-width: 560px;
  margin: 0 auto var(--raum-3);
  padding: 14px 18px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.planwahl-land-titel {
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 14px;
}
.planwahl-land-liste {
  margin: 0;
  padding-left: 18px;
  color: var(--tinte-3);
  font-size: 14px;
  line-height: 1.55;
}

/* Land getrennt von Waehrung: zwei Schalter, weil es zwei Fragen sind. */
.waehlerzeile-land { margin-top: 18px; }
.waehlerzeile-land .waehrungszeichen { font-variant: normal; }
.landesliste {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--tinte-3);
  font-size: 14.5px;
  line-height: 1.6;
}
.landessperre {
  margin-top: 14px;
  padding: 12px 16px;
  border-left: 3px solid var(--gold);
  background: var(--flaeche);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14.5px;
}

/* ==========================================================================
   BELEGBILD

   Steuerung links, Beleg rechts, und der Beleg ist echt: der eigene Name, die
   eigene Anschrift, die eigene Farbe. Eine Vorschau mit "Ihr Firmenname hier"
   beantwortet eine andere Frage als die, die jemand hier hat -- naemlich: was
   sieht mein Kunde.

   Die Vorschau klebt, damit sie beim Scrollen durch die Steuerung stehen
   bleibt. Das ist der ganze Zweck: man aendert etwas und sieht es, ohne den
   Blick zu verlieren.
   ========================================================================== */

.belegbild { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.belegbild-steuerung { min-width: 0; }
.belegbild-vorschau { min-width: 0; position: sticky; top: 20px; align-self: start; }
.belegbild-speichern { margin-top: 18px; }

.farbfeld { display: inline-flex; align-items: center; gap: 8px; }
.farbfeld input[type="color"] {
  width: 40px; height: 26px; padding: 0;
  border: 1px solid var(--linie-stark); border-radius: var(--radius);
  background: none; cursor: pointer;
}
.farbfeld output { font-size: 12px; color: var(--tinte-3); font-variant-numeric: tabular-nums; }

/* Der Musterbeleg. Ein Blatt, kein Kasten: Schatten und Weiss, damit klar ist,
   dass hier ein Dokument gezeigt wird und keine Einstellung. */
.musterbeleg {
  --bb-akzent: var(--gold);
  --bb-schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bb-zeile: 1.55;
  background: #FFFFFF;
  color: #15171B;
  font-family: var(--bb-schrift);
  font-size: 12px;
  line-height: var(--bb-zeile);
  padding: 26px 26px 20px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  aspect-ratio: 210 / 297;
  overflow: hidden;
}
/* Die Markenzeile: Logo oder Wortmarke, links im Briefkopf. Eigene Regel, damit
   ein Logo und ein gesetzter Name dieselbe Grundlinie und dieselbe Breite haben --
   sonst springt der Kopf, sobald jemand ein Logo hochlaedt. */
.musterbeleg-marke {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 58%;
}

.musterbeleg-kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--bb-akzent);
}
.musterbeleg-logo { max-height: 46px; max-width: 190px; object-fit: contain; }
.musterbeleg-wortmarke {
  font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--bb-akzent);
}
.musterbeleg-absender { text-align: right; font-size: 10px; line-height: 1.5; color: #4A505A; }
.musterbeleg-absender strong { display: block; color: #15171B; font-size: 11px; }
.musterbeleg-absender span { display: block; }

.musterbeleg-titel {
  margin: 20px 0 4px; font-size: 16px; font-weight: 700; color: var(--bb-akzent);
}
.musterbeleg-empfaenger { margin-bottom: 18px; font-size: 11px; color: #4A505A; }

.musterbeleg-tafel { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.musterbeleg-tafel th {
  text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--bb-akzent);
  font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: #4A505A;
}
.musterbeleg-tafel td { padding: 6px 4px; border-bottom: 1px solid #E6E2DA; }
.musterbeleg-tafel .rechts { text-align: right; font-variant-numeric: tabular-nums; }

.musterbeleg-summe {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; padding-top: 10px; border-top: 2px solid var(--bb-akzent);
  font-size: 13px;
}
.musterbeleg-summe strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.musterbeleg-fuss {
  margin-top: 22px; padding-top: 8px; border-top: 1px solid #E6E2DA;
  font-size: 8.5px; color: #6B7280;
}
.musterbeleg-fuss span { display: block; }

/* Die Spalten, die abgewaehlt werden koennen. */
.musterbeleg.ohne-einheit .sp-einheit,
.musterbeleg.ohne-satz .sp-satz { display: none; }

/* Die vier Vorlagen unterscheiden sich in der Vorschau so, wie sie sich im PDF
   unterscheiden: Linien oder keine, Band oder Luft, wie schwer die Summe wiegt. */
.musterbeleg.vorlage-MODERN .musterbeleg-kopf {
  background: var(--bb-akzent); color: #FFFFFF;
  margin: -26px -26px 0; padding: 20px 26px; border-bottom: 0;
}
.musterbeleg.vorlage-MODERN .musterbeleg-absender,
.musterbeleg.vorlage-MODERN .musterbeleg-absender strong { color: #FFFFFF; }
.musterbeleg.vorlage-MODERN .musterbeleg-wortmarke { color: #FFFFFF; }
.musterbeleg.vorlage-MINIMAL .musterbeleg-kopf { border-bottom: 1px solid #E6E2DA; }
.musterbeleg.vorlage-MINIMAL .musterbeleg-tafel th,
.musterbeleg.vorlage-MINIMAL .musterbeleg-summe { border-color: #E6E2DA; }
.musterbeleg.vorlage-MINIMAL .musterbeleg-titel { color: #15171B; }
.musterbeleg.vorlage-BRIEFBOGEN { padding-top: 46px; }
.musterbeleg.vorlage-BRIEFBOGEN .musterbeleg-kopf { border-bottom-width: 1px; }

.musterbeleg.dichte-COMPACT { --bb-zeile: 1.32; }
.musterbeleg.dichte-COMPACT .musterbeleg-tafel td { padding: 3px 4px; }

@media (max-width: 900px) {
  .belegbild { grid-template-columns: minmax(0, 1fr); }
  .belegbild-vorschau { position: static; }
}

/* Die Sprachwahl im Kopf der Anwendung.
   Ein Globus und der Sprachname statt eines zweibuchstabigen Kuerzels: der Knopf war
   vorhanden und wurde nicht gefunden. Auf schmalen Schirmen bleibt nur der Globus --
   dort zaehlt jeder Millimeter, und das Symbol allein ist immer noch ein Symbol. */
.sprachknopf { display: inline-flex; align-items: center; gap: .4rem; }
.sprachknopf .sprachname { font-size: .82rem; letter-spacing: .01em; }
@media (max-width: 640px) { .sprachknopf .sprachname { display: none; } }

/* ------------------------------------------------------------- the house band

   Der Betreiber in der eigenen Firma. Golden statt rot: es ist kein Fehler und
   keine Warnung, sondern eine Ortsangabe -- und ein roter Balken, der bei etwas
   Normalem erscheint, ist ein roter Balken, den man nach einer Woche nicht mehr
   sieht. Klebrig oben, weil die Frage "in welcher Firma bin ich gerade" nicht
   nur beim Seitenanfang gilt. */
.hausband {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 9px var(--raum-3);
  background: var(--gold-tief);
  border-bottom: 1px solid var(--gold-linie);
  color: var(--tinte-2);
  font-size: 13px;
  line-height: 1.5;
}
.hausband-marke {
  flex: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-linie);
  border-radius: 3px;
  padding: 2px 7px;
}
.hausband-text { min-width: 0; flex: 1 1 24ch; }
.hausband form { margin: 0; flex: none; }
.hausband-aus {
  border: 1px solid var(--gold-linie);
  background: transparent;
  color: var(--tinte);
  font: inherit;
  font-size: 12.5px;
  border-radius: 3px;
  padding: 5px 11px;
  cursor: pointer;
}
.hausband-aus:hover { background: var(--gold); color: var(--gold-tinte, #17130A); }

/* Der Satz neben einem zustimmenden Knopf: leise, aber mit lesbaren Links. Er
   ist die Erklaerung der Handlung und kein Kleingedrucktes -- deshalb keine
   9-Pixel-Schrift. */
.rechtshinweis { margin: 12px 0 10px; line-height: 1.55; }
.rechtshinweis a { text-decoration: underline; text-underline-offset: 2px; }

/* ==================================================================================
   THE LIGHT FACE — the design pass of 5 September

   Ivory ground, white paper, near-black ink, champagne gold, and a serif for everything
   that is a heading or a headline figure. Cards are sheets of paper: generously rounded,
   a hairline, a breath of shadow. The dark theme keeps the same rules on near-black.
   ================================================================================== */

h1, .seitenkopf h1, .kurve-betrag, .kennkarte-wert, .posten-haupt, .leitzahl-wert,
.abschnitt-kopf h2, .setzblock-kopf h2, .einrichten h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.012em;
}
.seitenkopf-gross { align-items: flex-start; margin-bottom: 22px; }
.seitenkopf-gross h1 { font-size: 34px; line-height: 1.1; }
.gruss { margin: 4px 0 0; font-size: 14px; color: var(--tinte-3); }

/* The chart is a sheet of paper. */
.kurve {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten);
  padding: 20px 22px 18px;
  margin: 0 0 20px;
}
.kurve-kennzahlen a.gewaehlt { background: var(--gold-tief); color: var(--gold-dunkel); }
.kurve-betrag { font-size: clamp(34px, 3.2vw, 44px); letter-spacing: -.02em; }
.kurve-spannen a.gewaehlt { background: var(--flaeche-hoch); color: var(--tinte); }

/* Income and expenses — two cards with a disc and a figure in the serif. */
.kennkarten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 16px;
}
.kennkarten a.kennkarte { color: inherit; text-decoration: none; }
.kennkarten a.kennkarte:hover { border-color: var(--linie-stark); }
.kennkarten a.kennkarte:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kennkarte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  min-width: 0;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten);
}
.kennkarte-kopf { display: flex; align-items: center; gap: 10px; }
.kennkarte-disc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--flaeche-hoch); color: var(--tinte-2);
  font-size: 14px; font-weight: 600; flex: none;
}
.kennkarte-disc.ist-gold { background: var(--gold-tief); color: var(--gold-dunkel); }
.kennkarte-disc.ist-rot { background: var(--negativ-tief); color: var(--negativ); }
.kennkarte-name { font-size: 13px; color: var(--tinte-3); }
.kennkarte-wert {
  font-size: clamp(22px, 1.7vw, 28px);
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kennkarte-wert.ist-positiv { color: var(--positiv); }
.kennkarte-wert.ist-negativ { color: var(--negativ); }
.kennkarte-fuss { font-size: 12px; color: var(--tinte-4); }
.kennkarte-disc.ist-gruen { background: var(--positiv-tief); color: var(--positiv); }
.kennkarte-delta { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; }
.kennkarte-delta-wert { font-weight: 600; font-variant-numeric: tabular-nums; }
.kennkarte-delta.ist-gut .kennkarte-delta-wert { color: var(--positiv); }
.kennkarte-delta.ist-schlecht .kennkarte-delta-wert { color: var(--negativ); }
.kennkarte-delta-vs { color: var(--tinte-4); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px)  { .kennkarte { padding: 12px 14px; } .kennkarte-wert { font-size: 20px; } }

/* The position: result and recorded cash, one quiet line under the two cards. */
.lage {
  display: flex; flex-wrap: wrap; gap: 8px 32px;
  margin: 0 4px 24px;
}
.lage-posten { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13px; }
.lage-name { color: var(--tinte-3); }
.lage-wert { font-family: var(--serif); font-size: 17px; color: var(--tinte); font-variant-numeric: tabular-nums; }
.lage-wert.ist-positiv { color: var(--positiv); }
.lage-wert.ist-negativ { color: var(--negativ); }
.lage-fuss { color: var(--tinte-4); font-size: 12px; }
.lage-wert-leise { font-size: 15px; color: var(--tinte-2); }

/* The chart's own furniture: the window as one pill, an axis in a gutter, round rules,
   a dark tag at the end of the line, four dates underneath. */
.kurve-kennzahlen { align-items: center; }
.kurve-spannenwahl { margin-left: auto; }
.kurve-spannenwahl-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--tinte-2);
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--linie-stark); background: var(--flaeche);
}
.kurve-spannenwahl-knopf:hover { border-color: var(--tinte-4); color: var(--tinte); }
.kurve-spannenwahl-pfeil { font-size: 11px; line-height: 1; transform: translateY(-2px); }
.kurve-spannenwahl .menue-tafel { display: none; min-width: 170px; flex-direction: column; gap: 2px; margin: 0; }
.kurve-spannenwahl .menue-schalter:checked ~ .menue-tafel { display: flex; }
.kurve-spannenwahl .menue-schalter:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }
.kurve-spannenwahl .kurve-spannen a { text-align: left; min-width: 0; padding: 7px 10px; border-radius: 6px; }
.kurve-spannenwahl .kurve-spannen a.gewaehlt { background: var(--gold-tief); color: var(--gold-dunkel); font-weight: 600; }
.kurve-lauf-marke .kurve-pfeil { font-size: 12px; font-weight: 700; }
.kurve-flaeche { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; }
.kurve-flaeche svg { grid-column: 2; grid-row: 1; }
.kurve-achse {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  padding: 5.7% 0; /* OBEN and UNTEN of the picture, as a share of its height */
  font-size: 11px; color: var(--tinte-4); font-variant-numeric: tabular-nums; line-height: 1;
}
.kurve-achse span { transform: translateY(50%); }
.kurve-achse span:first-child { transform: translateY(-40%); }
.kurve-achse span:last-child { transform: translateY(40%); }
.kurve-regel { stroke: var(--linie); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.kurve-tage {
  grid-column: 2; grid-row: 2;
  display: flex; justify-content: space-between;
  margin-top: 8px; font-size: 11px; color: var(--tinte-4);
}
.kurve-schlusstag {
  position: absolute; z-index: 3; pointer-events: none;
  visibility: hidden;
  transform: translate(-100%, -160%);
  padding: 4px 8px; border-radius: 6px;
  background: var(--tinte); color: var(--flaeche);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kurve-schlusstag.ist-gesetzt { visibility: visible; }
.kurve-flaeche.ist-aktiv .kurve-schlusstag { visibility: hidden; }

/* Every section under the chart is a card too. */
.uebersicht-spalten .abschnitt {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten);
  padding: 18px 20px;
}
.uebersicht-spalten .abschnitt-kopf h2 { font-size: 20px; text-transform: none; letter-spacing: -.012em; color: var(--tinte); }
.uebersicht-spalten .abschnitt-kopf { border-bottom: 0; padding-bottom: 0; }
.uebersicht-spalten .liste th { font-size: 11px; letter-spacing: .08em; color: var(--tinte-4); }
.uebersicht-spalten .pill { border-radius: 999px; }
.posten-haupt, .leitzahl-wert { font-size: 28px; }

/* Appearance switch on the settings page: three pills, one checked. */
.erscheinung-wahl { display: inline-flex; gap: 6px; }
.erscheinung-knopf {
  font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--tinte-2);
}
.erscheinung-knopf[aria-checked="true"] { background: var(--gold-tief); border-color: var(--gold-linie); color: var(--gold-dunkel); font-weight: 600; }
.erscheinung-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Recent invoices as rows, the way the design draws them: a disc with a document, the
   customer, "INV-1008 · 28 Mar 2024" underneath, the amount and the state on the right. */
.belegzeilen { list-style: none; margin: 4px 0 0; padding: 0; }
.belegzeilen li + li { border-top: 1px solid var(--linie); }
.belegzeilen a {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 2px; color: inherit; text-decoration: none;
}
.belegzeilen a:hover .belegzeile-titel { color: var(--gold-dunkel); }
.belegzeilen a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.belegzeile-disc {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--flaeche-hoch); color: var(--tinte-2);
}
.belegzeile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.belegzeile-titel { font-size: 14.5px; font-weight: 500; color: var(--tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.belegzeile-unter { font-size: 12px; color: var(--tinte-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.belegzeile-ende { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.belegzeile-betrag { font-size: 14.5px; font-weight: 500; color: var(--tinte); font-variant-numeric: tabular-nums; }
.belegzeilen .pill { display: inline-flex; align-items: center; gap: 4px; }
.pill-zeichen { font-size: 10px; font-weight: 700; line-height: 1; }
@media (max-width: 480px) {
  .belegzeile-ende { align-items: flex-end; }
  .belegzeile-disc { width: 32px; height: 32px; }
}

/* ---------------------------------------------------------------------------------
   The invoice editor, to the design: a serif title with its line underneath, the check
   button as a gold pill, every section a sheet of paper, "+ Add item" in gold, quiet
   inputs, a serif total, the save as one gold button.
   --------------------------------------------------------------------------------- */
.rechnung-editor .seitenkopf-gross h1 .mono { font-family: var(--serif); font-size: inherit; }
.rechnung-editor .seitenkopf-aktionen .btn-primary { border-radius: 999px; padding: 9px 18px; }
.rechnung-editor .seitenkopf-aktionen .btn:not(.btn-primary) { border-radius: 999px; }
.rechnung-editor .abschnitt {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten);
  padding: 18px 20px 20px;
  margin-bottom: 16px;
}
.rechnung-editor .abschnitt-kopf { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; align-items: center; }
.rechnung-editor .abschnitt-kopf h2 {
  font-family: var(--serif); font-size: 20px; font-weight: 400;
  text-transform: none; letter-spacing: -.012em; color: var(--tinte); padding: 0;
}
.rechnung-editor .abschnitt-kopf .label { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--tinte-4); }
.rechnung-editor .btn.hinzufuegen {
  background: transparent; border-color: transparent; color: var(--gold-dunkel);
  font-weight: 600; padding: 4px 6px; box-shadow: none;
}
.rechnung-editor .btn.hinzufuegen:hover { background: var(--gold-tief); }
.rechnung-editor .fields .field input,
.rechnung-editor .fields .field select,
.rechnung-editor .fields .field textarea,
.rechnung-editor .lines td input,
.rechnung-editor .lines td select,
.rechnung-editor textarea, .rechnung-editor input[type="text"] {
  background: var(--flaeche-hoch, var(--grund));
  border-color: var(--linie);
  border-radius: 8px;
}
.rechnung-editor .fields .field .label,
.rechnung-editor .field .label { color: var(--tinte-3); font-weight: 500; font-size: 12.5px; }
.rechnung-editor .lines th { font-size: 11px; color: var(--tinte-4); letter-spacing: .06em; border-bottom: 1px solid var(--linie); }
.rechnung-editor .lines td { padding-top: 10px; padding-bottom: 10px; }
.rechnung-editor .totals .row { padding: 7px 0; color: var(--tinte-3); }
.rechnung-editor .totals .row span:last-child { color: var(--tinte); font-variant-numeric: tabular-nums; }
.rechnung-editor .totals .row.grand { border-top: 1px solid var(--linie); margin-top: 6px; padding-top: 12px; color: var(--tinte); }
.rechnung-editor .totals .row.grand span:last-child { font-family: var(--serif); font-size: 24px; }
.rechnung-editor .totals .row.due span:last-child { font-family: var(--serif); font-size: 20px; }
.rechnung-editor .formschluss { display: flex; flex-direction: column; align-items: stretch; gap: 10px; max-width: 420px; }
.rechnung-editor .formschluss .btn { width: 100%; justify-content: center; }
.rechnung-editor .formschluss .btn-primary { border-radius: 999px; padding: 13px 20px; font-size: 15px; text-align: center; }
.rechnung-editor .formschluss .btn:not(.btn-primary) { border-radius: 999px; text-align: center; }

/* ---------------------------------------------------------------------------------
   Cash flow on the web: the two money cards, the month as four gold bars, and the
   activity as rows with a disc — the phone's cash-flow screen, drawn from the same curves.
   --------------------------------------------------------------------------------- */
.geldkarten { margin-bottom: 16px; }
.wochenbalken {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 6px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-lg);
  box-shadow: var(--schatten); padding: 18px 20px 14px; margin: 0 0 20px;
}
.wochenbalken-titel { grid-column: 1 / -1; grid-row: 1; margin: 0 0 10px; font-size: 12.5px; color: var(--tinte-3); }
.wochenbalken-bild { grid-column: 2; grid-row: 2; width: 100%; height: 190px; display: block; }
.wochenbalken-achse {
  grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  padding: 4% 0 6%; font-size: 11px; color: var(--tinte-4); font-variant-numeric: tabular-nums; line-height: 1;
}
.wochenbalken-regel { stroke: var(--linie); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.wochenbalken-balken { fill: url(#balkenfarbe); }
.balken-oben { stop-color: var(--gold); stop-opacity: 1; }
.balken-unten { stop-color: var(--gold); stop-opacity: .55; }
.wochenbalken-namen { grid-column: 2; grid-row: 3; display: flex; justify-content: space-around; margin-top: 6px; font-size: 11px; color: var(--tinte-4); }
.bewegungen .belegzeile-a { display: flex; align-items: center; gap: 14px; padding: 12px 2px; }
.belegzeile-disc.ist-gruen { background: var(--positiv-tief); color: var(--positiv); }
.belegzeile-betrag.ist-plus { color: var(--positiv); }
.belegzeile-betrag.ist-minus { color: var(--tinte); }
.belegzeile-datum { font-size: 12px; color: var(--tinte-4); }
.geldfluss-seite > .abschnitt {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-lg);
  box-shadow: var(--schatten); padding: 18px 20px; min-width: 0;
}
.geldfluss-seite > .abschnitt .table-wrap { overflow-x: auto; }
.geldfluss-seite > .abschnitt .abschnitt-kopf { border-bottom: 0; padding-bottom: 0; }
.geldfluss-seite > .abschnitt .abschnitt-kopf h2 {
  font-family: var(--serif); font-size: 20px; font-weight: 400; text-transform: none;
  letter-spacing: -.012em; color: var(--tinte); padding: 0;
}

/* ==================================================================================
   THE SHELL — redesigned 5 September

   A navigation rail, not a list of links. Company first, then five groups with icons,
   one door to administration at the foot. Collapses to icons (kept in this browser),
   becomes a drawer on a phone. Brass is the accent for the active entry only; the rail
   must hold in grayscale.
   ================================================================================== */
.rail {
  width: 248px;
  flex: 0 0 248px;
  padding: 12px 0 10px;
  gap: 0;
  background: var(--flaeche-tief);
  border-right: 1px solid var(--linie);
  transition: width .18s ease, flex-basis .18s ease;
}
.rail-kopf { display: flex; align-items: center; gap: 6px; padding: 0 10px 10px; }
.rail-kopf .firmenwahl { flex: 1; min-width: 0; width: auto; }

/* The company switcher: mark, name, "Canada · CAD", chevron. */
.firmenknopf {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; color: var(--tinte);
}
.firmenknopf:hover { background: var(--flaeche); border-color: var(--linie); }
.menue-schalter:focus-visible + .firmenknopf { outline: 2px solid var(--gold); outline-offset: 2px; }
.firmenmarke {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tinte); color: var(--grund);
  font-family: var(--serif); font-size: 13.5px; letter-spacing: .02em; font-weight: 500;
}
.firmentext { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.firmenname { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.firmenzeile { font-size: 11.5px; color: var(--tinte-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.firmenpfeil { width: 14px; height: 14px; margin-left: auto; color: var(--tinte-4); flex: none; }
.firmenwahl .menue-tafel { left: 0; right: auto; min-width: 260px; top: calc(100% + 4px); }
.menue-titel { display: block; padding: 6px 11px 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-4); }
.firmenzeile-form { margin: 0; }
.firmen-eintrag {
  display: grid; grid-template-columns: 1fr auto; column-gap: 8px; width: 100%; text-align: left;
  padding: 7px 11px; border-radius: 6px; border: 0; background: transparent; color: var(--tinte-2);
  font: inherit; cursor: pointer;
}
.firmen-eintrag:hover { background: var(--flaeche-tief); color: var(--tinte); }
.firmen-eintrag.ist-aktiv { color: var(--tinte); cursor: default; }
.firmen-eintrag-name { font-size: 13.5px; font-weight: 500; grid-column: 1; }
.firmen-eintrag-zeile { font-size: 11.5px; color: var(--tinte-4); grid-column: 1; }
.firmen-haken { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 16px; height: 16px; color: var(--gold-dunkel); }
.firmen-link, .konto-tafel a, .abmelden-form button {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 6px;
  color: var(--tinte-2); text-decoration: none; font-size: 13.5px;
}
.firmen-link svg, .konto-tafel a svg, .abmelden-form button svg { width: 16px; height: 16px; flex: none; color: var(--tinte-3); }
.firmen-link:hover, .konto-tafel a:hover, .abmelden-form button:hover { background: var(--flaeche-tief); color: var(--tinte); }
.firmen-tafel .firmen-link:first-of-type { margin-top: 4px; border-top: 1px solid var(--linie); border-radius: 0 0 6px 6px; padding-top: 10px; }

/* Entries: icon, word, count. */
.rail-nav { padding: 0 10px; gap: 2px; }
.rail-eintrag {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px; position: relative;
  color: var(--tinte-2); text-decoration: none; font-size: 13.5px; line-height: 1.2;
}
.rail-eintrag:hover { background: var(--flaeche); color: var(--tinte); }
.rail-eintrag:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.rail-eintrag.active { background: var(--flaeche); color: var(--tinte); font-weight: 600; box-shadow: inset 0 0 0 1px var(--linie); }
.rail-eintrag.active::before {
  content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px;
  background: var(--gold); border-radius: 0 3px 3px 0;
}
.rail-eintrag.active .rail-symbol { color: var(--gold-dunkel); }
.rail-symbol { width: 18px; height: 18px; flex: none; color: var(--tinte-3); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rail-eintrag:hover .rail-symbol { color: var(--tinte-2); }
.rail-wort { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-eintrag .nav-zahl { margin-left: auto; }
.rail svg use { pointer-events: none; }
.firmenpfeil, .rail-gruppe-kopf svg, .firmen-link svg, .konto-tafel svg, .abmelden-form svg, .erstellen-knopf svg, .befehl-symbol, .rail-klappen svg, .firmen-haken {
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* Groups fold (a button, not <details>: Chromium paints the disclosure triangle on a
   summary whatever the stylesheet says). Without the script they stay open. */
.symbole { display: none; }
.rail-gruppe { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.rail-gruppe-kopf {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer; width: 100%;
  padding: 6px 10px 4px; font: inherit; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinte-4); font-weight: 600; border-radius: 6px; user-select: none; border: 0; background: transparent; text-align: left;
}
.rail-gruppe-kopf svg { width: 12px; height: 12px; transition: transform .15s ease; opacity: 0; }
.rail-gruppe-kopf:hover { color: var(--tinte-3); }
.rail-gruppe-kopf:hover svg, .rail-gruppe-kopf:focus-visible svg { opacity: 1; }
.rail-gruppe.ist-zu .rail-gruppe-kopf svg { transform: rotate(-90deg); opacity: 1; }
.rail-gruppe.ist-zu > .rail-eintrag { display: none; }
.rail-gruppe-kopf:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.rail-nav a.rail-eintrag { justify-content: flex-start; padding: 7px 10px; font-size: 13.5px; gap: 10px; }
.rail-nav a.rail-eintrag.active { background: var(--flaeche); color: var(--tinte); }

/* The foot. */
.rail-fuss { margin-top: auto; padding: 10px 10px 0; border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: 2px; }
.rail-klappen {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-end;
  width: 30px; height: 30px; margin-top: 4px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--tinte-4); cursor: pointer;
}
.rail-klappen svg { width: 16px; height: 16px; }
.rail-klappen:hover { background: var(--flaeche); color: var(--tinte-2); border-color: var(--linie); }
.rail-klappen:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Collapsed: icons only, a tooltip on hover/focus. */
.shell.rail-eng .rail { width: 68px; flex-basis: 68px; }
.shell.rail-eng .rail-wort, .shell.rail-eng .firmentext, .shell.rail-eng .firmenpfeil,
.shell.rail-eng .rail-gruppe-kopf span, .shell.rail-eng .rail-eintrag .nav-zahl { display: none; }
.shell.rail-eng .rail-kopf { padding: 0 14px 10px; }
.shell.rail-eng .firmenknopf { padding: 4px; justify-content: center; }
.shell.rail-eng .rail-nav a.rail-eintrag, .shell.rail-eng .rail-fuss .rail-eintrag { justify-content: center; padding: 9px 0; }
.shell.rail-eng .rail-eintrag.active::before { left: -10px; }
.shell.rail-eng .rail-gruppe-kopf { justify-content: center; padding: 4px 0; }
.shell.rail-eng .rail-gruppe-kopf svg { display: none; }
.shell.rail-eng .rail-gruppe-kopf::after { content: ""; display: block; width: 20px; height: 1px; background: var(--linie); }
.shell.rail-eng .rail-klappen { align-self: center; }
.shell.rail-eng .rail-eintrag::after {
  content: attr(data-wort); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--tinte); color: var(--grund); font-size: 12px; font-weight: 500; white-space: nowrap;
  padding: 5px 9px; border-radius: 6px; box-shadow: var(--schatten); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .1s ease; z-index: 90;
}
.shell.rail-eng .rail-eintrag:hover::after, .shell.rail-eng .rail-eintrag:focus-visible::after { opacity: 1; visibility: visible; }
.shell.rail-eng .rail { overflow: visible; }
.shell.rail-eng .firmenwahl .menue-tafel { left: 0; }

/* The bar. */
.befehl { position: relative; display: flex; align-items: center; }
.befehl-symbol { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--tinte-4); pointer-events: none; }
.befehl input { padding-left: 34px; padding-right: 46px; border-radius: 9px; background: var(--flaeche); }
.befehl-taste {
  position: absolute; right: 9px; font: 500 10.5px/1 var(--mono, ui-monospace, monospace); color: var(--tinte-4);
  border: 1px solid var(--linie); border-radius: 5px; padding: 4px 6px; background: var(--flaeche-tief); pointer-events: none;
}
.befehl-liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; margin: 0; padding: 6px; list-style: none;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; box-shadow: var(--schatten-hoch);
  max-height: min(60vh, 420px); overflow-y: auto;
}
.befehl-liste li[role="presentation"] { padding: 8px 10px 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-4); }
.befehl-liste li[role="option"] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 13.5px; color: var(--tinte-2); cursor: pointer; }
.befehl-liste li[role="option"] svg { width: 16px; height: 16px; color: var(--tinte-3); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.befehl-liste li[role="option"][aria-selected="true"], .befehl-liste li[role="option"]:hover { background: var(--flaeche-tief); color: var(--tinte); }
.befehl-liste .befehl-gruppe { margin-left: auto; font-size: 11px; color: var(--tinte-4); }
.erstellen-knopf { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 14px 8px 12px; }
.erstellen-knopf svg { width: 14px; height: 14px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tinte); color: var(--grund); font-size: 12px; font-weight: 600; letter-spacing: .04em; cursor: pointer;
  border: 2px solid transparent;
}
.avatar:hover { border-color: var(--gold-linie); }
.menue-schalter:focus-visible + .avatar { outline: 2px solid var(--gold); outline-offset: 2px; }
.kontomenue { display: inline-flex; }
.konto-tafel { min-width: 240px; }
.konto-kopf { display: flex; flex-direction: column; padding: 8px 11px 10px; border-bottom: 1px solid var(--linie); margin-bottom: 4px; }
.konto-name { font-size: 13.5px; font-weight: 600; color: var(--tinte); }
.konto-firma { font-size: 12px; color: var(--tinte-4); }
.konto-tafel .sprach-eintrag .firmen-haken { margin-left: auto; }
.konto-tafel .sprach-eintrag.gewaehlt { color: var(--tinte); }
.abmelden-form { margin: 4px 0 0; border-top: 1px solid var(--linie); padding-top: 4px; }
.abmelden-form button { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: left; }

/* Breakpoints: a narrow desktop collapses the rail on its own; a phone gets a drawer. */
@media (max-width: 1180px) and (min-width: 901px) {
  .shell:not(.rail-weit) .rail { width: 68px; flex-basis: 68px; }
  .shell:not(.rail-weit) .rail-wort, .shell:not(.rail-weit) .firmentext, .shell:not(.rail-weit) .firmenpfeil,
  .shell:not(.rail-weit) .rail-gruppe-kopf span, .shell:not(.rail-weit) .rail-eintrag .nav-zahl { display: none; }
  .shell:not(.rail-weit) .rail-kopf { padding: 0 14px 10px; }
  .shell:not(.rail-weit) .firmenknopf { padding: 4px; justify-content: center; }
  .shell:not(.rail-weit) .rail-nav a.rail-eintrag, .shell:not(.rail-weit) .rail-fuss .rail-eintrag { justify-content: center; padding: 9px 0; }
  .shell:not(.rail-weit) .rail-gruppe-kopf { justify-content: center; padding: 4px 0; }
  .shell:not(.rail-weit) .rail-gruppe-kopf svg { display: none; }
  .shell:not(.rail-weit) .rail-gruppe-kopf::after { content: ""; display: block; width: 20px; height: 1px; background: var(--linie); }
  .shell:not(.rail-weit) .rail-klappen { align-self: center; }
  .shell:not(.rail-weit) .rail { overflow: visible; }
  .shell:not(.rail-weit) .rail-eintrag::after {
    content: attr(data-wort); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: var(--tinte); color: var(--grund); font-size: 12px; font-weight: 500; white-space: nowrap;
    padding: 5px 9px; border-radius: 6px; box-shadow: var(--schatten); pointer-events: none;
    opacity: 0; visibility: hidden; z-index: 90;
  }
  .shell:not(.rail-weit) .rail-eintrag:hover::after, .shell:not(.rail-weit) .rail-eintrag:focus-visible::after { opacity: 1; visibility: visible; }
  .content { padding: 24px 24px 64px; }
  .topbar { padding: 0 24px; }
}
@media (max-width: 900px) {
  .shell, .shell.rail-eng { flex-direction: row; }
  .rail, .shell.rail-eng .rail { width: min(300px, 86vw); flex-basis: auto; height: 100vh; overflow-y: auto; }
  .shell.rail-eng .rail-wort, .shell.rail-eng .firmentext, .shell.rail-eng .firmenpfeil, .shell.rail-eng .rail-gruppe-kopf span, .shell.rail-eng .rail-eintrag .nav-zahl { display: initial; }
  .shell.rail-eng .rail-nav a.rail-eintrag, .shell.rail-eng .rail-fuss .rail-eintrag { justify-content: flex-start; padding: 9px 10px; }
  .shell.rail-eng .rail-eintrag::after { display: none; }
  .shell.rail-eng .rail-gruppe-kopf { justify-content: space-between; padding: 6px 10px 4px; }
  .shell.rail-eng .rail-gruppe-kopf::after { display: none; }
  .shell.rail-eng .rail-kopf { padding: 0 10px 10px; }
  .shell.rail-eng .firmenknopf { padding: 8px 10px; justify-content: flex-start; }
  .rail-nav { flex-direction: column; }
  .rail-klappen { display: none; }
  .befehl-taste { display: none; }
  .erstellen-knopf span { display: none; }
  .erstellen-knopf { padding: 8px 10px; }
  .rail-eintrag, .firmen-eintrag, .firmen-link { padding-top: 10px; padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .rail, .rail-gruppe-kopf svg { transition: none; } }
@media (forced-colors: active) { .rail-eintrag.active { outline: 2px solid CanvasText; } }


/* ---------------------------------------------------------------------------------
   The integrations marketplace: connected with health, available with Connect, more
   coming folded. Cards are paper; the state is a pill and a button, never a wall of grey.
   --------------------------------------------------------------------------------- */
.markt-abschnitt { margin-bottom: 26px; }
.markt-regal { margin: 14px 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-4); font-weight: 600; }
.markt { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.markt-karte {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 14px;
  padding: 16px 18px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius-lg); box-shadow: var(--schatten); min-width: 0;
}
.markt-karte .integ-mal { grid-row: 1 / span 2; align-self: start; }
.markt-koerper { min-width: 0; }
.markt-koerper .integ-name { margin: 0; font-size: 15px; font-weight: 600; color: var(--tinte); }
.markt-konto { margin: 2px 0 0; font-size: 13px; color: var(--tinte-2); }
.markt-gesund { margin: 2px 0 0; font-size: 12.5px; color: var(--tinte-3); }
.markt-karte.braucht-aufmerksamkeit .markt-gesund { color: var(--negativ); }
.markt-karte .integ-satz { margin: 2px 0 0; font-size: 13px; color: var(--tinte-3); line-height: 1.45; }
.markt-karte .integ-fussnote { margin: 4px 0 0; font-size: 12px; color: var(--tinte-4); }
.markt-ende { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.markt-knopf { border-radius: 999px; }
.markt-start { display: inline; margin: 0; }
.markt-leer, .markt-satz { margin: 0 0 8px; color: var(--tinte-3); }
.markt-import { margin: -6px 0 22px; display: flex; flex-wrap: wrap; gap: 6px; }
.markt-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.markt-liste li { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linie); min-width: 0; }
.markt-liste .integ-mal.klein { grid-row: 1 / span 2; width: 28px; height: 28px; font-size: 11px; }
.markt-liste-name { font-size: 13.5px; font-weight: 500; color: var(--tinte); }
.markt-liste-satz { font-size: 12px; color: var(--tinte-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.markt-spaeter { margin-top: 10px; border-top: 1px solid var(--linie); padding-top: 8px; }
.markt-spaeter summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 8px 0; }
.markt-spaeter-titel { font-family: var(--serif); font-size: 17px; color: var(--tinte-2); }
.markt-spaeter[open] summary { margin-bottom: 6px; }

.entwickler-bereich { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -6px 0 18px; }

/* ---- OAuth consent (Connect Zapier / Claude / …) ---------------------------------- */
.oauth-app { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--tinte-2); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.oauth-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; background: var(--flaeche-tief); }
.oauth-bereiche { list-style: none; margin: 18px 0; padding: 0; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); }
.oauth-bereiche li { display: grid; grid-template-columns: 11rem 1fr; gap: 4px 14px; padding: 12px 14px; border-top: 1px solid var(--linie); align-items: baseline; }
.oauth-bereiche li:first-child { border-top: none; }
.oauth-bereiche li.ist-gedeckelt { color: var(--tinte-3); }
.oauth-bereich-hinweis { grid-column: 2; font-size: 12px; color: var(--gold-tinte); }
.oauth-entscheidung { display: flex; gap: 10px; margin-top: 18px; }
.oauth-entscheidung .btn { flex: 1; }
@media (max-width: 480px) { .oauth-bereiche li { grid-template-columns: 1fr; } .oauth-bereich-hinweis { grid-column: 1; } }

/* ---- Connect screen for automation platforms and AI assistants ---------------------- */
.verbinden-schritte { margin: 0 0 22px; padding-left: 1.4em; max-width: 62ch; }
.verbinden-schritte li { padding: 6px 0; border-bottom: 1px solid var(--linie); }
.verbinden-schritte li:last-child { border-bottom: none; }
.verbinden-adressen { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.verbinden-adressen dt { color: var(--tinte-3); font-size: 13px; }
.verbinden-adressen dd { margin: 0; overflow-wrap: anywhere; }
.verbinden-adressen code { background: var(--flaeche-tief); padding: 2px 6px; border-radius: 6px; }
@media (max-width: 600px) { .verbinden-adressen { grid-template-columns: 1fr; } }
.verbinden-n8n { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 10px; }
.verbinden-n8n label { display: block; font-size: 13px; color: var(--tinte-2); }
.verbinden-n8n input { min-width: 22rem; }
.oauth-zustimmung h1 { text-wrap: balance; }
.oauth-app-name { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--tinte); }
.oauth-bereich-name { color: var(--tinte-2); }
.oauth-bereich-text { color: var(--tinte); }

/* ---- AI autonomy level (Settings → AI assistants) ---------------------------------- */
.mcp-freigabe { display: grid; gap: 10px; }
.mcp-stufe { display: grid; grid-template-columns: 22px 1fr; gap: 2px 12px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); cursor: pointer; }
.mcp-stufe.ist-gewaehlt { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.mcp-stufe input[type=radio] { margin-top: 3px; }
.mcp-stufe-name { font-weight: 600; grid-column: 2; }
.mcp-stufe-text { grid-column: 2; font-size: 13px; color: var(--tinte-2); }
.mcp-grenze { grid-column: 2; display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--tinte-2); }
.mcp-grenze input { width: 9rem; }
.mcp-freigabe-fuss { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* =============================================================== first-run walk

   /einrichtung — the four steps after sign-up. Its own shell (no rail), the mark, a trail
   of steps, one quiet way out, and one column of paper on the ivory ground. Everything
   is built from the tokens above; the only new idea is the trail. */
.einrichtung-seite {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--sans);
}
.einrichtung-kopf {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--raum-2);
  padding: 18px 28px;
}
.einrichtung-marke {
  display: inline-flex;
  width: 44px;
  height: 25px;
  color: var(--gold);
}
.einrichtung-marke .mark { width: 100%; height: 100%; }
.einrichtung-spaeter { justify-self: end; }

.einrichtung-spur {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.einrichtung-spur li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tinte-4);
  font-size: 12.5px;
  letter-spacing: .01em;
}
.einrichtung-spur li + li::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  margin: 0 12px;
  background: var(--linie-stark);
}
.einrichtung-spur li.ist-erledigt + li::before { background: var(--gold-linie); }
.einrichtung-spur-punkt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--linie-stark);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinte-3);
  background: var(--flaeche);
}
.einrichtung-spur-punkt svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.einrichtung-spur li.ist-aktuell { color: var(--tinte); font-weight: 600; }
.einrichtung-spur li.ist-aktuell .einrichtung-spur-punkt {
  border-color: var(--gold);
  color: var(--gold-dunkel);
  box-shadow: 0 0 0 3px var(--gold-tief);
}
.einrichtung-spur li.ist-erledigt { color: var(--tinte-2); }
.einrichtung-spur li.ist-erledigt .einrichtung-spur-punkt {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--gold-tinte);
}
.einrichtung-spur-wort { white-space: nowrap; }

.einrichtung-buehne {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 24px 56px;
}
.einrichtung-inhalt {
  animation: einrichtung-auftritt .45s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes einrichtung-auftritt {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .einrichtung-inhalt { animation: none; }
}

.einrichtung-titel { margin: 0 0 24px; }
.einrichtung-augenbraue {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dunkel);
}
.einrichtung-titel h1 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.einrichtung-satz {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinte-2);
}
.einrichtung-titel-fertig { text-align: center; }
.einrichtung-titel-fertig .einrichtung-satz { margin: 0 auto; }

.einrichtung-karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-lg);
  padding: 28px 32px 24px;
  box-shadow: var(--schatten);
}
.einrichtung-karte .field { padding: 12px 0; }
.einrichtung-karte .field > input, .einrichtung-karte .field > select { max-width: none; }
.einrichtung-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--raum-3);
  align-items: start;
}
.einrichtung-zeile .field:last-child { border-bottom: 1px solid var(--linie); }
.einrichtung-zeile:has(> .einrichtung-schmal) { grid-template-columns: 160px 1fr; }
.einrichtung-karte > .hint { margin: 8px 0 4px; }
.einrichtung-merke {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--gold);
  background: var(--gold-tinte);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinte-2);
}
.einrichtung-fuss {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--raum-2);
  margin-top: 22px;
}
.einrichtung-fuss .btn-primary { min-width: 180px; padding: 11px 20px; font-size: 14px; }
.einrichtung-fuss-mitte { justify-content: center; margin-top: 32px; }
.einrichtung-ueberspringen {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.einrichtung-ueberspringen .btn, .einrichtung-spaeter .btn {
  background: transparent;
  border-color: transparent;
  color: var(--tinte-3);
  text-decoration: underline;
  text-decoration-color: var(--linie-stark);
  text-underline-offset: 3px;
}
.einrichtung-ueberspringen .btn:hover, .einrichtung-spaeter .btn:hover {
  background: transparent;
  color: var(--tinte);
  text-decoration-color: var(--gold);
}
.einrichtung-punkte {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.einrichtung-punkte li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinte-2);
}
.einrichtung-punkte li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* the document head, drawn as it prints */
.einrichtung-belegkopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--raum-3);
  padding: 22px 24px;
  margin-bottom: 8px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  background: var(--flaeche-hoch);
}
.einrichtung-belegkopf-marke { min-height: 44px; display: flex; align-items: center; }
.einrichtung-belegkopf-marke img { max-height: 56px; max-width: 200px; display: block; }
.einrichtung-belegkopf-leer {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--tinte-4);
}
.einrichtung-belegkopf-absender {
  display: grid;
  gap: 2px;
  text-align: right;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tinte-2);
}
.einrichtung-belegkopf-absender strong { font-family: var(--serif); font-size: 15px; color: var(--tinte); }

/* the last screen */
.einrichtung-bilanz {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.einrichtung-bilanz li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--tinte-4);
}
.einrichtung-bilanz li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--linie-stark);
}
.einrichtung-bilanz li.ist-erledigt { color: var(--tinte-2); }
.einrichtung-bilanz li.ist-erledigt::before { background: var(--gold); border-color: var(--gold); }
.einrichtung-tueren {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--raum-2);
}
.einrichtung-tuer {
  display: grid;
  gap: 6px;
  padding: 18px 18px 20px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.einrichtung-tuer:hover { border-color: var(--gold-linie); box-shadow: var(--schatten); transform: translateY(-1px); }
.einrichtung-tuer:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.einrichtung-tuer strong { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--tinte); }
.einrichtung-tuer span { font-size: 12.5px; line-height: 1.45; color: var(--tinte-3); }

.einrichtung-boden {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 18px 24px 26px;
  font-size: 12px;
  color: var(--tinte-4);
}
.einrichtung-boden-trenner { color: var(--linie-stark); }

@media (max-width: 720px) {
  .einrichtung-kopf { grid-template-columns: auto 1fr; padding: 14px 16px; }
  .einrichtung-spur { grid-column: 1 / -1; order: 3; justify-content: center; }
  .einrichtung-spur li + li::before { width: 18px; margin: 0 8px; }
  .einrichtung-spur-wort { display: none; }
  .einrichtung-spur li.ist-aktuell .einrichtung-spur-wort { display: inline; }
  .einrichtung-buehne { padding: 24px 16px 40px; }
  .einrichtung-titel h1 { font-size: 28px; }
  .einrichtung-karte { padding: 20px 18px 18px; }
  .einrichtung-zeile, .einrichtung-zeile:has(> .einrichtung-schmal) { grid-template-columns: 1fr; }
  .einrichtung-zeile .field:last-child { border-bottom: 1px solid var(--linie); }
  .einrichtung-tueren { grid-template-columns: 1fr; }
  .einrichtung-belegkopf { flex-direction: column; }
  .einrichtung-belegkopf-absender { text-align: left; }
}
.einrichtung-belegkopf.ohne-logo .einrichtung-belegkopf-marke { opacity: .9; }
.einrichtung-karte input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-sm);
  background: var(--flaeche);
  color: var(--tinte-3);
  font-size: 13px;
}
.einrichtung-karte input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-sm);
  background: var(--flaeche-hoch);
  color: var(--tinte);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.einrichtung-karte input[type="file"]:hover { border-color: var(--gold-linie); }
.einrichtung-karte input[type="file"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }


/* ============================================================ create: the four things */
.erstellen-tafel { min-width: 320px; padding: 8px; gap: 2px; }
.erstellen-zeile {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px !important;
}
.erstellen-zeile svg {
  width: 18px; height: 18px; flex: none;
  padding: 10px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--gold-tief);
  color: var(--gold-dunkel);
}
.erstellen-zeile span { display: grid; gap: 2px; min-width: 0; }
.erstellen-zeile strong { font-size: 14px; font-weight: 600; color: var(--tinte); }
.erstellen-zeile small { font-size: 12px; color: var(--tinte-3); line-height: 1.35; }
.erstellen-mehr {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--linie);
}
.erstellen-mehr a { font-size: 12.5px; padding: 6px 9px; color: var(--tinte-3); }

/* ============================================================ overview: cash, today, debts */
.kasse {
  position: relative;
  display: block;
  padding: 28px 30px 30px;
  background: var(--tintenkarte);
  border: 1px solid var(--tintenkarte-linie);
  border-radius: 22px;
  text-decoration: none;
  color: var(--auf-tintenkarte);
  box-shadow: 0 1px 2px rgba(23,21,15,.10), 0 28px 56px -24px rgba(23,21,15,.45);
  margin-bottom: var(--raum-4);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.kasse::before {
  /* A breath of gold from the top corner: the metal of the mark on the ink of
     the card, and enough for the surface to read as something rather than a
     black rectangle. */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 0% 0%, rgba(168,138,78,.28), transparent 55%);
  pointer-events: none;
}
.kasse:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(23,21,15,.12), 0 34px 64px -24px rgba(23,21,15,.5); }
.kasse > * { position: relative; }
.kasse-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--raum-2); }
.kasse-name { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--auf-tintenkarte-2); }
.kasse-pille {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(196,169,110,.45);
  font-size: 12px;
  font-weight: 500;
  color: var(--gold-hell);
}
.kasse-betrag {
  display: block;
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: 54px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--auf-tintenkarte);
}
.kasse-fuss { display: block; margin: 6px 0 0; font-size: 12.5px; color: var(--auf-tintenkarte-3); }
.kasse-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-2); margin-top: 26px; }
.kasse-kachel {
  display: grid;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--tintenkarte-hoch);
}
.kasse-kachel > span { font-size: 12px; color: var(--auf-tintenkarte-3); }
.kasse-kachel strong {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--serif);
  font-size: 22px; font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--auf-tintenkarte);
}
.kasse-vorzeichen { width: 14px; height: 14px; flex: none; align-self: center; fill: none; stroke: var(--gold-hell); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.heute { margin-bottom: var(--raum-4); }
.heute h2, .uebersicht-abschnitt {
  margin: 0 0 10px 4px;
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinte-3);
}
.heute-liste {
  margin: 0; padding: 0; list-style: none;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.heute-liste li + li { border-top: 1px solid var(--linie); }
.heute-liste a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  color: var(--tinte);
  text-decoration: none;
}
.heute-liste a:hover { background: var(--flaeche-hoch); }
.heute-disc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: var(--gold-tief);
  border: 1px solid var(--gold-linie);
  color: var(--gold-dunkel);
}
.heute-disc svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.heute-liste .stufe-dringend .heute-disc { background: var(--negativ-tief); border-color: transparent; color: var(--negativ); }
.heute-liste .stufe-hinweis .heute-disc { background: var(--flaeche-hoch); border-color: var(--linie); color: var(--tinte-3); }
.heute-text { flex: 1; font-size: 15px; font-weight: 500; }
.heute-pfeil { color: var(--tinte-4); font-size: 20px; line-height: 1; }

.schulden { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-2); margin-bottom: var(--raum-4); }
.schuld {
  display: grid;
  gap: 8px;
  padding: 20px 22px 22px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.schuld:hover { transform: translateY(-1px); box-shadow: var(--schatten-hoch); border-color: var(--gold-linie); }
.schuld-name { font-size: 13.5px; color: var(--tinte-2); }
.schuld-betrag { font-family: var(--serif); font-size: 32px; font-weight: 400; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tinte); }
.schuld-fuss { font-size: 12.5px; color: var(--tinte-3); }
.schuld-fuss.ist-negativ { color: var(--negativ); }

@media (max-width: 720px) {
  .kasse { padding: 22px 22px 24px; }
  .kasse-betrag { font-size: 40px; }
  .kasse-kacheln, .schulden { grid-template-columns: 1fr; }
}

.seitenkopf-home h1 { font-family: var(--serif); font-size: 40px; font-weight: 400; letter-spacing: -.01em; margin-top: 2px; }
.seitenkopf-home .gruss { margin: 0; font-size: 14px; color: var(--tinte-3); }

/* =========================================================================
   THE JOB PAGE — one job, every document
   =========================================================================

   Appended as one block. Nothing above this line is changed.

   The page is built from the shared vocabulary — .seitenkopf, .abschnitt,
   .fields, .datentabelle, .filelist, .dropzone, .zeitstrahl-knapp — and the
   rules here are only the four things the vocabulary did not have: the
   stage and owner controls as two rows in the page head, the record picker
   as one row, the rename affordance folded behind a word, and a date column
   wide enough for a written-out date in five languages.
   ========================================================================= */

/* The line under the title: number, customer, stage, archived — separated
   by middots that are generated, so a missing customer leaves no stray dot. */
.vorgang-satz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
}
.vorgang-satz > * + *::before {
  content: "\00B7";
  margin: 0 8px;
  color: var(--tinte-4);
}
.vorgang-satz > .badge::before { content: ""; margin: 0; }
.vorgang-satz > .badge { margin-left: 8px; }

/* Stage and owner: word, select, button — one row each, right-aligned
   beside the title on a desk, full width on a phone. The word is the same
   small label the payment box on an invoice uses. */
/* The title yields before the controls do: a long job title wraps to a
   second line rather than pushing stage and owner under it. */
.vorgang-seite .seitenkopf > div:first-child { flex: 1 1 360px; }

/* One grid for both rows, so the two selects share a column whatever the
   length of the two words; each form contributes its three cells. */
.vorgang-steuerung {
  display: grid;
  grid-template-columns: max-content minmax(150px, 220px) max-content;
  align-items: center;
  gap: 6px 8px;
}
.vorgang-steuer { display: contents; }
.vorgang-steuer .label { text-align: right; }
.vorgang-steuer select { width: 100%; }

/* The overview form: the dates side by side, the long texts full width.
   .fields already does this; the hint under the dates is the one field
   without a control, so it sits on the hairline like the others. The title
   and the two texts get the measure of a paragraph rather than the 440px of
   an ordinary field — a job's title is a sentence, not a postcode. */
.vorgang-felder .field > .hint { margin: 0; }
.vorgang-felder .field-wide > input, .vorgang-felder .field-wide > textarea { max-width: 720px; }

/* The drop target without the browser's own "Choose files / No file chosen"
   chrome: the input stays in the form and keeps the keyboard, the sentence is
   the control, and the chosen names are written into the hint (vorgang.js).
   The zone shows the keyboard focus that the hidden input would have drawn. */
.vorgang-ablage input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.vorgang-ablage { position: relative; }
.vorgang-ablage:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }
.vorgang-ablage .dropzone-label { margin-bottom: 10px; cursor: pointer; }
.vorgang-ablage .dropzone-hint { margin-top: 0; font-size: 13.5px; color: var(--tinte-2); }
.vorgang-ablage .dropzone-gewaehlt { display: block; margin-top: 6px; font-size: 12.5px; color: var(--tinte-3); overflow-wrap: anywhere; }
.vorgang-ablage .dropzone-gewaehlt:empty { display: none; }

/* Linking a record: kind, record, button on one row; the sentence under it. */
.vorgang-verknuepfen {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(220px, 1fr) max-content;
  align-items: end;
  gap: 8px 10px;
}
.vorgang-verknuepfen > div { min-width: 0; }
.vorgang-verknuepfen .label { display: block; margin-bottom: 5px; }
.vorgang-verknuepfen select { width: 100%; }
.vorgang-verknuepfen-hinweis { grid-column: 1 / -1; }

/* The original filename beside the display name: small, monospace, quiet;
   on a phone under it, where a camera's name would otherwise wrap mid-word. */
.datei-original { margin-left: 8px; }
.vorgang-seite .datentabelle td.datum { white-space: nowrap; }

/* Rename, folded behind one word. The summary reads like an inline action;
   opened, the row lets the field take the full width beneath the name so a
   long display name has room. Browsers without :has() simply show the field
   in the right-hand column, which still works. */
/* Not the boxed <details> the settings pages draw: no border, no ground, no
   triangle. display:list-item with list-style:none is the combination that
   actually removes the marker in current Chromium (see .menue). */
.datei-umbenennen { border: 0; border-radius: 0; background: transparent; }
.datei-umbenennen > summary {
  display: list-item;
  list-style: none;
  padding: 0;
  font-size: 13px;
  color: var(--tinte-2);
  border-bottom: 1px solid var(--linie-stark);
  cursor: pointer;
  white-space: nowrap;
}
.datei-umbenennen > summary::-webkit-details-marker { display: none; }
.datei-umbenennen > summary::marker { content: ""; }
.datei-umbenennen > summary::before, .datei-umbenennen[open] > summary::before { content: none; }
.datei-umbenennen > *:not(summary) { padding: 0; font-size: inherit; }
.datei-umbenennen > summary:hover { color: var(--tinte); border-bottom-color: var(--gold); }
.datei-umbenennen[open] > summary { color: var(--tinte-3); border-bottom-color: transparent; }
.datei-umbenennen > form { margin-top: 6px; flex-wrap: nowrap; }
.datei-umbenennen > form input[type="text"] { min-width: 0; width: 100%; max-width: 420px; }
.filelist li:has(.datei-umbenennen[open]) .filelist-actions {
  grid-column: 1 / -1;
  grid-row: auto;
  justify-self: stretch;
  margin-top: 4px;
}
.filelist li:has(.datei-umbenennen[open]) .datei-umbenennen { width: 100%; }

/* The history: a date column wide enough for "15 sept. 2026", the sentence
   beside it, the detail under the sentence. The rule and the dot move with
   the column. */
.vorgang-verlauf .zeitstrahl-zeile { grid-template-columns: 104px 15px minmax(0, 1fr); }
.vorgang-verlauf .zeitstrahl-zeile::before { left: 111px; }
.vorgang-verlauf .zeitstrahl-uhr { font-family: var(--sans); color: var(--tinte-3); }
.vorgang-verlauf .zeitstrahl-fuss { margin-top: 3px; }
.vorgang-notiz input[type="text"] { flex: 1 1 260px; }

@media (max-width: 760px) {
  .vorgang-steuerung { width: 100%; grid-template-columns: max-content minmax(0, 1fr) max-content; }
  .vorgang-verknuepfen { grid-template-columns: minmax(0, 1fr); }
  .vorgang-verknuepfen .btn { justify-self: start; }
}
@media (max-width: 640px) {
  /* The date above the sentence, as the shared timeline does on a phone. */
  .vorgang-verlauf .zeitstrahl-zeile { grid-template-columns: 15px minmax(0, 1fr); }
  .vorgang-verlauf .zeitstrahl-zeile::before { left: 7px; }
  .datei-original { display: block; margin: 2px 0 0; }
}