/* =====================================================================
   PLANBAR Prüfbuch — Stylesheet (Epic PB-13)
   CI: Dark Cocoa / Blood Orange / Vanilla, Zalando Sans, keine runden
   Ecken, harte Offset-Schatten. Grundlage 1:1 aus dem Bewerberportal
   übernommen, damit alle Module gleich aussehen und sich gleich anfühlen.
   ===================================================================== */
@font-face {
  font-family: 'Zalando Sans';
  src: url('/assets/ZalandoSans-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --orange: #f3562e; --orange-hover: #d9431d; --rhubarb: #ffb09c;
  --pickle: #00363e; --seaweed: #565438; --matcha: #e0ebde; --cherry: #531f28; --almond: #bcad96;
  --paper: #fef7ec; --card: #FBFAF5; --ink: #171511; --ink-soft: #5d584f;
  --line: rgba(23,21,17,.16); --border: 1.5px solid var(--ink); --shadow: 4px 4px 0 rgba(23,21,17,.14);
  --nav-h: 62px;
  /* Trefferfläche. Bedient wird am Küchentablet mit nassen Händen, deshalb ist
     64 Pixel die Untergrenze für alles, was man antippen muss. Kein Wischen,
     kein Doppeltipp, kein langes Drücken, nichts nur beim Überfahren. */
  --tap: 64px;
}
* { box-sizing: border-box; border-radius: 0 !important; }
::selection { background: var(--rhubarb); }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Zalando Sans', system-ui, sans-serif;
  background: var(--paper); color: var(--ink);
  font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0 0 10px; }
h1 { font-size: 22px; letter-spacing: .14em; text-transform: uppercase; font-stretch: expanded; white-space: nowrap; }
h2 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
h3 { font-size: 14px; }
a { color: var(--orange); }
small, .soft { color: var(--ink-soft); }

/* ---------- Bausteine ---------- */
.card { background: var(--card); border: var(--border); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; }
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--card); color: var(--ink);
  border: var(--border); box-shadow: var(--shadow);
  padding: 9px 14px; display: inline-block;
  transition: transform .06s ease, box-shadow .06s ease;
  text-decoration: none;
}
@media (hover:hover) {
  .btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 rgba(23,21,17,.18); }
}
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(23,21,17,.2); }
.btn.primary { background: var(--orange); color: #fff; }
@media (hover:hover) { .btn.primary:hover { background: var(--orange-hover); } }
.btn.dark { background: var(--ink); color: var(--paper); }
.btn.ghost { box-shadow: none; border-color: var(--line); font-weight: 500; }
.btn.klein { padding: 4px 9px; font-size: 13px; }
.btn.gross { padding: 16px 22px; font-size: 18px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.block { display: block; width: 100%; text-align: center; }

input, select, textarea {
  font: inherit; color: var(--ink);
  background: #fff; border: var(--border);
  padding: 8px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); outline-offset: 0; }
input[type=checkbox] { width: auto; }
label { display: block; font-size: 12.5px; font-weight: 600; margin: 10px 0 4px; letter-spacing: .03em; }
.formzeile { display: flex; gap: 10px; flex-wrap: wrap; }
.formzeile > div { flex: 1 1 140px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
tr.klick { cursor: pointer; }
@media (hover:hover) { tr.klick:hover td { background: var(--matcha); } }

.chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border: 1.5px solid var(--ink); letter-spacing: .04em; white-space: nowrap; }
.chip.gruen { background: var(--matcha); }
.chip.orange { background: var(--orange); color: #fff; border-color: var(--orange); }
.chip.rot { background: var(--cherry); color: #fff; border-color: var(--cherry); }
.chip.grau { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.chip.gelb { background: var(--rhubarb); }
.chip.dunkel { background: var(--pickle); color: #fff; border-color: var(--pickle); }

.warn { background: var(--rhubarb); border: 1.5px solid var(--ink); padding: 8px 12px; margin: 8px 0; font-size: 13.5px; }
.hinweis { background: var(--matcha); border: 1.5px solid var(--ink); padding: 8px 12px; margin: 8px 0; font-size: 13.5px; }

/* ---------- Topbar + Navigation ---------- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  background: var(--ink); color: var(--paper);
  padding: 10px 18px; position: sticky; top: 0; z-index: 40;
}
.topbar img { height: 30px; }
.topbar .titel { font-size: 15px; letter-spacing: .16em; text-transform: uppercase; font-stretch: expanded; white-space: nowrap; }
.topbar .rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.topbar .rechts .wer { color: var(--almond); }
.topbar button { background: transparent; color: var(--paper); border: 1px solid var(--almond); padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }

.nav { display: flex; gap: 0; background: var(--card); border-bottom: var(--border); position: sticky; top: 50px; z-index: 39; overflow-x: auto; }
.nav button {
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  background: transparent; border: none; border-right: 1px solid var(--line);
  padding: 12px 16px; cursor: pointer; color: var(--ink-soft); white-space: nowrap;
}
.nav button.aktiv { color: var(--ink); box-shadow: inset 0 -3px 0 var(--orange); }
.nav .zaehler { display: inline-block; min-width: 18px; text-align: center; background: var(--orange); color: #fff; font-size: 11px; padding: 0 4px; margin-left: 6px; }

.inhalt { padding: 18px; max-width: 1500px; margin: 0 auto; }
/* Am Handy bricht die Kopfzeile um, statt die ganze Seite nach rechts zu ziehen. */
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; }
  .topbar .rechts { margin-left: 0; width: 100%; }
  .inhalt { padding: 12px; }
}

/* ---------- KPI-Kacheln ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--card); border: var(--border); box-shadow: var(--shadow); padding: 10px 12px; }
.kpi .wert { font-size: 26px; font-weight: 800; }
.kpi .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }

/* ---------- Modal + Toast ---------- */
#modal-layer { position: fixed; inset: 0; z-index: 90; display: none; }
#modal-layer.offen { display: flex; align-items: flex-start; justify-content: center; background: rgba(23,21,17,.55); overflow-y: auto; padding: 40px 14px; }
.modal { background: var(--paper); border: var(--border); box-shadow: 8px 8px 0 rgba(23,21,17,.28); width: 100%; max-width: 640px; padding: 18px 20px; }
.modal.breit { max-width: 900px; }
.modal .fuss { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
#toast-layer { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--ink); color: var(--paper); padding: 10px 16px; border: 1.5px solid var(--paper); box-shadow: var(--shadow); font-size: 14px; }
.toast.fehler { background: var(--cherry); }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-box { width: 100%; max-width: 400px; }
/* Die Kachelwand braucht Platz für zwei Spalten auf dem Küchentablet. */
.login-box.breit { max-width: 620px; }
.login-box .logo { text-align: center; margin-bottom: 18px; }
.login-box .logo img { height: 54px; }
/* Eine Person je Zeile bleibt auch am schmalen Tablet lesbar. */
.login-box .kacheln { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ---------- PIN am Küchenterminal ----------
   Derselbe Handgriff wie beim Stempeln: vier Ziffern auf großen Tasten. Kein
   Systemtastenfeld, weil die Bildschirmtastatur am Tablet sonst über den
   Zahlenblock springt, und keine Taste unter --tap, weil mit nassen Händen
   niemand eine kleine trifft. */
.pinfeld { display: flex; gap: 14px; justify-content: center; margin: 14px 0 18px; }
.pinpunkt { width: 18px; height: 18px; border: 2px solid var(--ink); background: transparent; }
.pinpunkt.voll { background: var(--orange); border-color: var(--orange); }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pinpad .pintaste {
  min-height: var(--tap); font-size: 22px; font-weight: 800; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Leerer Rahmen (Gerüst) ---------- */
.leer { text-align: center; padding: 40px 18px; color: var(--ink-soft); }
.leer .gross { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Einrichtungsassistent ----------
   Ein Schritt je Bildschirm, große Flächen, große Schrift. Das Ding wird am
   Küchentablet mit nassen Fingern bedient, nicht am Schreibtisch. */
.aufruf { border-left: 6px solid var(--orange); }
.aufruf h2 { font-size: 17px; }

.assi { max-width: 1100px; margin: 0 auto; }
.assi-schritte { display: flex; gap: 0; overflow-x: auto; margin-bottom: 14px; border: var(--border); box-shadow: var(--shadow); background: var(--card); }
.schritt-chip {
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: transparent; border: none; border-right: 1px solid var(--line);
  padding: 10px 12px; cursor: pointer; color: var(--ink-soft); white-space: nowrap;
  display: flex; align-items: center; gap: 8px; flex: 1 1 auto; justify-content: center;
}
.schritt-chip .nr { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; text-align: center; border: 1.5px solid var(--line); font-size: 11px; }
.schritt-chip.fertig { color: var(--ink); }
.schritt-chip.fertig .nr { background: var(--matcha); border-color: var(--ink); }
.schritt-chip.aktiv { color: var(--ink); background: var(--paper); box-shadow: inset 0 -3px 0 var(--orange); }
.schritt-chip.aktiv .nr { background: var(--orange); color: #fff; border-color: var(--orange); }

.assi-kopf { margin-bottom: 12px; }
.assi-kopf h1 { font-size: 13px; letter-spacing: .18em; color: var(--ink-soft); }
.assi-frage { font-size: 26px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-stretch: expanded; line-height: 1.15; }
.assi-fuss { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: var(--border); }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.kachel {
  font: inherit; text-align: left; cursor: pointer; position: relative;
  background: var(--card); border: var(--border); box-shadow: var(--shadow);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-height: 78px;
  transition: transform .06s ease, box-shadow .06s ease;
}
.kachel b { font-size: 15.5px; }
.kachel .soft { font-size: 12.5px; }
.kachel .chip { align-self: flex-start; margin-top: 2px; }
@media (hover:hover) { .kachel:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 rgba(23,21,17,.18); background: var(--matcha); } }
.kachel:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(23,21,17,.2); }
.kachel.klein { min-height: 58px; }
.kachel.fest { cursor: default; background: var(--paper); }
@media (hover:hover) { .kachel.fest:hover { transform: none; box-shadow: var(--shadow); background: var(--paper); } }
.kachel .zahl { position: absolute; top: 8px; right: 10px; background: var(--orange); color: #fff; font-weight: 800; font-size: 13px; padding: 0 7px; }

.grenzen { margin-top: 10px; }
.grenzzeile { border-left: 4px solid var(--line); padding: 6px 0 6px 10px; margin-bottom: 8px; font-size: 13.5px; }
.grenzzeile .mono { font-size: 13px; }

.fragen { display: flex; flex-direction: column; gap: 4px; }
.frage-block { border-top: 1px solid var(--line); padding: 14px 0; }
.frage-block:first-child { border-top: none; }
.frage-text { font-size: 18px; font-weight: 700; }

.gross-satz .satz { font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: .01em; }
details.punkte { border: 1.5px solid var(--line); margin-bottom: 8px; }
details.punkte > summary { cursor: pointer; padding: 9px 12px; font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .05em; background: var(--paper); }
details.punkte[open] > summary { border-bottom: 1.5px solid var(--line); }
details.punkte table { font-size: 13px; }
details.punkte th, details.punkte td { padding: 6px 10px; }

/* Das kleine antippbare Zeichen an jedem Grenzwert: woher kommt das?
   Es klappt an Ort und Stelle auf und nicht als Fenster darüber, damit es
   mitten in einem halb ausgefüllten Formular nichts wegräumt. */
.belegd { display: inline-block; vertical-align: middle; }
.belegd > summary { list-style: none; }
.belegd > summary::-webkit-details-marker { display: none; }
summary.beleg {
  font-size: 11px; font-weight: 800; font-style: italic; line-height: 18px;
  width: 20px; height: 20px; padding: 0; cursor: pointer; text-align: center;
  display: inline-block; text-transform: none; letter-spacing: 0;
  background: var(--pickle); color: #fff; border: 1.5px solid var(--pickle);
}
@media (hover:hover) { summary.beleg:hover { background: var(--orange); border-color: var(--orange); } }
.belegbox {
  margin: 6px 0; padding: 9px 11px; min-width: 240px; max-width: 460px;
  background: var(--paper); border: 1.5px solid var(--ink); box-shadow: var(--shadow);
  font-size: 12.5px; font-weight: 400; font-style: normal; text-transform: none; letter-spacing: 0; line-height: 1.4;
}
.belegbox .abstand { margin-top: 7px; }
.belegsatz { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); font-weight: 700; }

ul.liste { margin: 6px 0 0; padding-left: 20px; font-size: 13.5px; }
ul.liste li { margin-bottom: 4px; }

/* Breite Tabellen bekommen ihren eigenen Schieber, statt die Seite nach rechts
   zu ziehen. Am Küchentablet quer ist das der Unterschied zwischen lesbar und
   unbrauchbar. */
.tabellenrahmen { overflow-x: auto; }

/* =====================================================================
   DIE ROTEN BALKEN UND DIE ERFASSUNG
   ---------------------------------------------------------------------
   Alles ab hier gehört zu den Ansichten, die im Dienst benutzt werden:
   Heute, Erfassen, Lücken. Jede Trefferfläche misst mindestens --tap.
   ===================================================================== */

/* Der rote Balken auf "Heute". Er hat KEINEN Schließknopf, weder hier noch
   in app.js. Er verschwindet nur, wenn die fehlende Messung mit Grund
   nachgetragen wird. Ein wegklickbarer Mangel ist bei einer Kontrolle
   schlimmer als gar keiner. */
.balken {
  background: var(--cherry); color: #fff;
  border: 1.5px solid var(--ink); box-shadow: var(--shadow);
  padding: 14px 16px; margin-bottom: 14px;
}
.balken .satz { font-size: 21px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-stretch: expanded; line-height: 1.2; }
.balken .dazu { font-size: 13.5px; margin-top: 6px; color: #ffd8cd; }
.balken .posten {
  display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap;
  min-height: var(--tap); margin-top: 10px; padding: 8px 12px;
  background: rgba(254,247,236,.10); border: 1px solid rgba(254,247,236,.45);
}
.balken .posten .wo { flex: 1 1 220px; }
.balken .posten b { font-size: 15.5px; }
.balken .posten .soft { color: #ffd8cd; }
.balken .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Jetzt fällig: eine Kachel je offenem Slot, sortiert danach, wessen Fenster
   zuerst zugeht. Die ganze Kachel ist der Knopf. */
.faellig { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.faellig-kachel {
  font: inherit; text-align: left; cursor: pointer;
  background: var(--card); border: var(--border); box-shadow: var(--shadow);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 5px;
  min-height: 156px; color: var(--ink);
  transition: transform .06s ease, box-shadow .06s ease;
}
.faellig-kachel .was { font-size: 19px; font-weight: 800; line-height: 1.15; }
.faellig-kachel .wo { font-size: 13.5px; color: var(--ink-soft); }
.faellig-kachel .soll { font-size: 15.5px; font-weight: 700; }
.faellig-kachel .rest { margin-top: auto; padding-top: 8px; font-size: 15px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.faellig-kachel.knapp { border-left: 8px solid var(--orange); }
.faellig-kachel.knapp .rest { color: var(--orange); }
@media (hover:hover) { .faellig-kachel:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 rgba(23,21,17,.18); background: var(--matcha); } }
.faellig-kachel:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(23,21,17,.2); }

/* Was heute schon erledigt ist: klein, mit Haken und Uhrzeit. */
.erledigt { display: flex; flex-direction: column; }
.erledigt .z { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.erledigt .z:last-child { border-bottom: none; }
.erledigt .haken { font-weight: 800; font-size: 16px; }
.erledigt .uhr { font-variant-numeric: tabular-nums; color: var(--ink-soft); min-width: 44px; }
.erledigt .z.mangel .haken { color: var(--cherry); }

/* WEITERE AUFZEICHNUNGEN AN EINEM PRÜFZEITPUNKT.
   Eingerückt und mit hartem Balken links, aber ohne Ein- und Ausklapper: was
   zum Prüfzeitpunkt gehört, steht da. Keine runden Ecken (CI). */
.weitere { margin: 6px 0 6px 18px; padding: 6px 0 6px 12px; border-left: 4px solid var(--line); }
.weitere .z { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.weitere .z:last-child { border-bottom: none; }
.weitere .uhr { font-variant-numeric: tabular-nums; color: var(--ink-soft); min-width: 44px; }
.weitere .hinweis { margin: 4px 0 8px; }
tr.weiterzeile > td { border-top: none; padding-top: 0; }

/* Der Zahlenblock. Tastatur brauchen nasse Hände nicht. */
.erfzeile { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.zahlfeld {
  flex: 1 1 220px; background: #fff; border: var(--border);
  padding: 8px 16px; font-size: 46px; font-weight: 800; text-align: right;
  font-variant-numeric: tabular-nums; line-height: 1.25; min-height: 78px;
}
.zahlfeld .einheit { font-size: 22px; font-weight: 600; color: var(--ink-soft); margin-left: 8px; }
.zahlfeld.leer { color: var(--ink-soft); }
.sollbox { flex: 1 1 220px; background: var(--paper); border: var(--border); padding: 8px 14px; }
.sollbox .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.sollbox .wert { font-size: 22px; font-weight: 800; }
.zahlblock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.zahlblock button {
  font: inherit; font-size: 26px; font-weight: 800; cursor: pointer;
  min-height: var(--tap); background: var(--card); color: var(--ink);
  border: var(--border); box-shadow: var(--shadow);
}
.zahlblock button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(23,21,17,.2); }
.zahlblock button.weit { grid-column: span 3; font-size: 16px; letter-spacing: .08em; }
.zahlblock button.dunkel { background: var(--ink); color: var(--paper); }

/* Rückmeldung VOR dem Speichern, grün oder rot. */
.rueck { margin-top: 10px; padding: 12px 14px; border: 1.5px solid var(--ink); font-size: 16.5px; font-weight: 700; }
.rueck.gut { background: var(--matcha); }
.rueck.schlecht { background: var(--cherry); color: #fff; }
.rueck.offen { background: var(--paper); color: var(--ink-soft); font-weight: 500; }

/* Maßnahmen als große Knöpfe. Ohne Maßnahme kein Abschluss. */
.massnahmen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.massnahmen button {
  font: inherit; font-size: 16px; font-weight: 700; text-align: left; cursor: pointer;
  min-height: var(--tap); padding: 12px 14px;
  background: var(--card); color: var(--ink); border: var(--border); box-shadow: var(--shadow);
}
.massnahmen button.gewaehlt { background: var(--orange); color: #fff; border-color: var(--orange); }
.massnahmen button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(23,21,17,.2); }
.grossfrage { font-size: 23px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-stretch: expanded; line-height: 1.15; margin: 4px 0 12px; }

/* Alles, was im Dienst angetippt wird, ist mindestens --tap hoch. */
.btn.tap { min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; padding-left: 20px; padding-right: 20px; }
.tapfeld { min-height: var(--tap); font-size: 17px; }
.belegd.gross > summary.beleg,
.sollbox summary.beleg {
  width: var(--tap); height: var(--tap); line-height: calc(var(--tap) - 3px);
  font-size: 24px;
}

/* Eintragsbuch. Eine Korrektur zeigt das Original durchgestrichen und den
   Ersatz darunter. Ausblenden lässt sich das nirgends. */
.buch { display: flex; flex-direction: column; }
.vorgang { border-bottom: 1.5px solid var(--line); padding: 12px 0; }
.vorgang:last-child { border-bottom: none; }
.vorgang .kopf { display: flex; gap: 8px 12px; align-items: baseline; flex-wrap: wrap; }
.vorgang .nr { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 12.5px; }
.vorgang .was { font-size: 15.5px; font-weight: 700; }
.vorgang .zeile { font-size: 13.5px; margin-top: 4px; }
.durchgestrichen { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-soft); }
.ersatz { border-left: 5px solid var(--orange); padding: 6px 0 6px 12px; margin: 8px 0 0 6px; }
.ersatz.storno { border-left-color: var(--ink-soft); }
.ersatz .marke { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }

/* ---------- Kleinkram ---------- */
.reihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }
.mono { font-variant-numeric: tabular-nums; }
.abstand { margin-top: 14px; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .zweispaltig { grid-template-columns: 1fr; } }
.feldliste { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; font-size: 13.5px; }
.feldliste dt { color: var(--ink-soft); }
.feldliste dd { margin: 0; }
@media print {
  .topbar, .nav, .btn, #toast-layer { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; }
}