/* Numeon — gemeinsames Stylesheet. Branding-Schicht über CSS-Variablen:
   diese Werte werden später pro Konto (White-Label) überschrieben. */
:root {
  --numeon-accent: #4f8cff;
  --bg: #14171c;
  --panel: #1c2128;
  --titlebar: #0f1216;
  --sidebar: #161a20;
  --text: #e6e8eb;
  --muted: #8b929c;
  --border: #2a2f38;
  --hover: var(--hover);
  --danger: #ff6b6b;
  --ok: #4fd18b;
}

/* Helles Design — die Vorgabe.

   Der Betrieb arbeitet seit jeher in Word und ist nichts anderes gewohnt;
   ein dunkles Fenster wirkt dort nicht modern, sondern falsch. Das dunkle
   Design bleibt vollstaendig erhalten und laesst sich in der Seitenleiste
   umschalten.

   Der Akzent ist hier dunkler als im dunklen Design: #4f8cff traegt auf
   Weiss keinen weissen Text mehr (rund 2,5:1). #2f6fe0 kommt auf etwa
   4,8:1 und bleibt damit auch fuer aeltere Augen lesbar. */
:root[data-theme="hell"] {
  --numeon-accent: #2f6fe0;
  --bg: #f4f6f9;
  --panel: #ffffff;
  --titlebar: #e9edf3;
  --sidebar: #eaeef4;
  --text: #1b1f26;
  --muted: #5c6570;
  --border: #d3dae3;
  --hover: #dde3ec;
  --danger: #c62828;
  --ok: #1b7a4b;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100vh; }
body {
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif; font-size: 14px;
  user-select: none;
}

/* --- Titelleiste (nur in der pywebview-Shell) ---
   Im Tablet-Browser bleibt sie ausgeblendet: dort gibt es kein rahmenloses
   Fenster, das eine eigene Leiste braeuchte. numeon.js blendet sie ein,
   wenn window.pywebview vorhanden ist. */
.titlebar {
  height: 38px; flex: 0 0 38px; display: flex; align-items: stretch;
  background: var(--titlebar); border-bottom: 1px solid var(--border);
}
.titlebar[hidden] { display: none; }
.tb-drag {
  flex: 1; display: flex; align-items: center; gap: 8px; padding-left: 12px;
}
.tb-dot { width: 14px; height: 14px; border-radius: 4px; background: var(--numeon-accent); }
.tb-title { font-size: 12px; font-weight: 600; letter-spacing: .3px; color: var(--muted); }
.tb-title b { color: var(--text); }
.tb-controls { display: flex; }
.tb-btn {
  width: 46px; border: 0; background: transparent; color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.tb-btn:hover { background: var(--hover); color: var(--text); }
.tb-btn.close:hover { background: #e81123; color: #fff; }
.tb-btn svg { width: 11px; height: 11px; }

/* --- Formularelemente --- */
label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 6px; }
input, select, textarea {
  width: 100%; padding: 9px 12px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
  font-family: inherit;
}
/* **Ankreuz- und Auswahlfelder sind keine Eingabefelder.** Die Regel darueber
   gab ihnen 100 % Breite und 9 px Polster; ein Haken wurde damit 300 px breit
   und schob seine Beschriftung an den rechten Rand — am Bildschirm sah es
   aus, als waere der Text zentriert.

   Das war schon zweimal einzeln repariert: `label.haken input[type=checkbox]`
   im Inline-Stil von `index.html` (mit fast demselben Kommentar) und
   `.bs-zeile input` weiter unten. Beim dritten Mal gehoert die Ausnahme an
   die Wurzel. Die beiden Einzelregeln bleiben stehen — sie setzen dasselbe
   und aendern dadurch nichts, und die eine davon steht in einer anderen
   Datei. */
input[type="checkbox"], input[type="radio"] {
  width: auto; flex: 0 0 auto; padding: 0; margin: 0;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--numeon-accent); }
textarea { resize: vertical; min-height: 64px; }

button.primary {
  padding: 10px 18px; border: 0; border-radius: 8px;
  background: var(--numeon-accent); color: #fff; font-size: 14px;
  font-weight: 600; cursor: pointer;
}
button.primary:disabled { opacity: .6; cursor: default; }
button.ghost {
  padding: 10px 16px; border: 1px solid var(--border); border-radius: 8px;
  background: transparent; color: var(--text); font-size: 14px; cursor: pointer;
}
button.ghost:hover { background: var(--hover); }
button.danger {
  padding: 10px 16px; border: 1px solid var(--danger); border-radius: 8px;
  background: transparent; color: var(--danger); font-size: 14px; cursor: pointer;
}

.msg { font-size: 13px; min-height: 18px; }
.msg.err { color: var(--danger); }
.msg.ok  { color: var(--ok); }

/* --- App-Layout (Seitenleiste + Inhalt) --- */
.shell { flex: 1; display: flex; overflow: hidden; }
.sidebar {
  /* 248 statt 228: "Holzverarbeitung GbR" und "Florian Hartschwager"
     sind die laengsten Angaben, die hier wirklich vorkommen. */
  width: 248px; flex: 0 0 248px; background: var(--sidebar);
  border-right: 1px solid var(--border); padding: 16px 10px; display: flex;
  flex-direction: column; gap: 4px;
}
.nav-item {
  padding: 10px 14px; border-radius: 8px; color: var(--muted);
  cursor: pointer; font-weight: 500;
}
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.active { background: var(--numeon-accent); color: #fff; }
.nav-spacer { flex: 1; }
.content { flex: 1; overflow: auto; padding: 28px 32px; }
.view { display: none; }
/* **Breite begrenzt, mittig im Inhaltsbereich.**
   Auf einem 3440er Bildschirm zog eine Tabelle sonst ueber 3200 px: der
   Kurzname ganz links, "Aendern" ganz rechts, und das Auge verliert die
   Zeile auf halbem Weg. Es ist kein Vorteil, wenn eine Tabelle so breit
   ist, dass man ihr nicht folgen kann.
   Bei 1920 px bleibt nach der Seitenleiste ohnehin weniger uebrig als
   diese Grenze — dort aendert sich also nichts. */
.view.active { display: block; max-width: 1500px; margin: 0 auto; }
h1 { font-size: 20px; font-weight: 600; margin: 0 0 20px; }
h2 { font-size: 15px; font-weight: 600; margin: 22px 0 4px; color: var(--muted); }

.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 24px;
}
/* Beide brechen um, statt ueberzulaufen.
   Ohne `flex-wrap` schiebt eine Reihe ihre Knoepfe bei einem schmalen
   Fenster einfach aus dem Bild — sie sind dann nicht weg, sondern rechts
   ausserhalb, und der waagerechte Rollbalken faellt kaum auf. Genau so
   sah es aus wie "Bedienelemente verschwinden".
   Die Basis von 200px sorgt dafuer, dass umgebrochen wird, bevor die
   Felder unlesbar schmal werden; `min-width: 0` erlaubt ihnen trotzdem,
   unter ihre Inhaltsbreite zu schrumpfen. */
.row { display: flex; gap: 16px; flex-wrap: wrap; row-gap: 12px; }
.row > * { flex: 1 1 200px; min-width: 0; }
.toolbar {
  display: flex; gap: 10px; align-items: center; margin-bottom: 18px;
  flex-wrap: wrap; row-gap: 10px;
}
.toolbar input { flex: 1 1 200px; min-width: 0; }

table { width: 100%; border-collapse: collapse; }
/* Mehrere Knoepfe in einer Zelle sollen umbrechen duerfen, statt die
   Tabelle nach rechts zu sprengen. **Kein `display: flex` auf der Zelle** —
   das nimmt sie aus dem Tabellenlayout heraus und die Spalten stehen nicht
   mehr untereinander. Ein Abstand genuegt; umbrechen koennen die Knoepfe
   von sich aus, sie sind inline-block. */
td > .linkbtn + .linkbtn { margin-left: 8px; }
/* Sechs Spalten passen unterhalb von etwa 700px nicht mehr nebeneinander.
   Dann soll **die Tabelle** schieben und nicht die ganze Seite — sonst
   wandert auch die Seitenleiste aus dem Bild. Gleiche Machart wie bei der
   Positionstabelle im Belegeditor. */
.tabelle-schiebt { overflow-x: auto; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-size: 12px; font-weight: 600; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--hover); }
.empty { color: var(--muted); padding: 28px 0; text-align: center; }

/* --- Eigener Bestätigungsdialog --- */
.modal-ov {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center; z-index: 10000;
}
.modal-ov.show { display: flex; }
.modal {
  width: 390px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 24px;
}
.modal h3 { margin: 0 0 10px; font-size: 16px; }
.modal p { color: var(--muted); margin: 0 0 22px; line-height: 1.55; font-size: 13px; }
.modal .m-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* --- Betriebswechsler ---
   Vorgabe aus dem Auftrag: der Nutzer muss JEDERZEIT erkennen, in welchem
   Betrieb er arbeitet. Deshalb steht der Betrieb ganz oben in der
   Seitenleiste, in Akzentfarbe abgesetzt — und zusätzlich in der
   Titelleiste. Ein Auswahlfeld irgendwo in den Einstellungen wäre zu leise
   für etwas, das über die Zuordnung einer Rechnung entscheidet. */
.betrieb {
  padding: 0 4px 14px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.betrieb-label {
  font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.betrieb select {
  border-color: var(--numeon-accent); font-weight: 600; padding: 8px 8px;
  width: 100%; max-width: 100%;
}
.betrieb select:disabled { opacity: 1; color: var(--text); }

.konto {
  border-top: 1px solid var(--border); margin-top: 10px; padding: 12px 6px 0;
  font-size: 12px; color: var(--muted);
}
.konto b { display: block; color: var(--text); font-size: 13px; margin-bottom: 2px; }
.linkbtn {
  background: none; border: 0; padding: 0; margin-top: 8px;
  color: var(--numeon-accent); font-size: 12px; font-family: inherit;
  cursor: pointer;
}
.linkbtn:hover { text-decoration: underline; }

/* --- PDF-Betrachter ---
   Bewusst im Fenster statt per window.open: in der Shell gäbe das ein
   zweites, fremd aussehendes Fenster, und im Tablet-Browser wäre es ein
   Popup. So sieht es an beiden Orten gleich aus. */
.pdf-ov {
  position: fixed; inset: 0; z-index: 10001; background: rgba(0,0,0,.75);
  display: none; flex-direction: column;
}
.pdf-ov.show { display: flex; }
.pdf-bar {
  display: flex; gap: 10px; align-items: center; padding: 10px 14px;
  background: var(--titlebar); border-bottom: 1px solid var(--border);
}
.pdf-bar .t { flex: 1; font-weight: 600; font-size: 13px; }
.pdf-ov iframe { flex: 1; border: 0; background: #525659; }
.pdf-warn { color: var(--danger); font-size: 12px; }

/* --- Warnung zur Datensicherung ---
   Steht oben im Inhalt, nicht in den Einstellungen: auf dem Hartix-VPS ist
   eine Sicherung acht Nächte in Folge gescheitert, weil niemand die
   Protokolldatei geöffnet hat. Eine Meldung wirkt nur da, wo täglich
   jemand hinsieht. */
.sicherung-warnung {
  display: none; align-items: flex-start; gap: 10px;
  margin-bottom: 20px; padding: 12px 16px;
  border: 1px solid var(--danger); border-radius: 10px;
  background: rgba(255, 107, 107, .08); line-height: 1.5;
}
.sicherung-warnung.show { display: flex; }
.sicherung-warnung .zeichen { color: var(--danger); font-weight: 700; }
.sicherung-warnung .text { flex: 1; }
.sicherung-warnung b { color: var(--danger); }

/* Derselbe Balken traegt auch Wartungshinweise. Rot ist dafuer falsch:
   eine Ankuendigung ist kein Schaden, und wer jede Woche einen roten
   Kasten sieht, sieht ihn irgendwann nicht mehr. */
.sicherung-warnung.info {
  border-color: var(--numeon-accent);
  background: rgba(79, 140, 255, .08);
}
.sicherung-warnung.info .zeichen,
.sicherung-warnung.info b { color: var(--numeon-accent); }

/* --- Statuszeichen in Listen --- */
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 600; border: 1px solid var(--border);
  color: var(--muted);
}
.tag.fest { color: var(--ok); border-color: var(--ok); }
.tag.storno { color: var(--danger); border-color: var(--danger); }

/* --- Eigene Größe-Ziehränder (rahmenloses Fenster) --- */
.rz { position: fixed; z-index: 9999; }
.rz-r  { top: 38px; right: 0; width: 5px; height: calc(100% - 38px); cursor: ew-resize; }
.rz-b  { left: 0; bottom: 0; height: 5px; width: 100%; cursor: ns-resize; }
.rz-br { right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; }


/* --- Themenumschalter ---
   Bewusst in der Seitenleiste und nicht in den Einstellungen: wer das
   Fenster zu dunkel findet, sucht nicht erst in einem Untermenue danach. */
.themenwahl {
  display: flex; gap: 6px; padding: 10px 6px 0; margin-top: 10px;
  border-top: 1px solid var(--border);
}
.themenwahl button {
  flex: 1; padding: 7px 6px; font-size: 12px; font-weight: 500;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.themenwahl button:hover { background: var(--hover); color: var(--text); }
.themenwahl button.aktiv {
  background: var(--numeon-accent); color: #fff; border-color: var(--numeon-accent);
}


/* --- Enge Fenster -----------------------------------------------------------
   Die Shell laesst sich frei ziehen (`min_size` in numeon-desktop/main.py).
   Was hier passiert, ist bewusst schlicht: Raender und Polster schrumpfen,
   die Seitenleiste wird schmaler — die Anordnung bleibt dieselbe. Ein
   Layout, das unterwegs die Anordnung wechselt, verwirrt bei einem
   Werkzeug, das den ganzen Tag offen steht, mehr als es hilft. */

@media (max-width: 1100px) {
  .sidebar { width: 208px; flex: 0 0 208px; }
  .content { padding: 20px 18px; }
  .card { padding: 18px; }
  th, td { padding: 9px 9px; }
}

@media (max-width: 900px) {
  .sidebar { width: 178px; flex: 0 0 178px; padding: 14px 8px; }
  .nav-item { padding: 8px 10px; }
  .content { padding: 16px 12px; }
  .card { padding: 14px; }
  th, td { padding: 8px 7px; }
  h1 { font-size: 18px; margin-bottom: 14px; }
  /* Die Fusszeile der Seitenleiste traegt Name und Betrieb — beides kann
     laenger sein als die verbliebene Breite. */
  .konto { font-size: 11px; }
  .konto b { font-size: 12px; }
}

/* --- Logo in den Betriebseinstellungen --- */
.logozeile {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 44px;
}
.logozeile img {
  max-height: 44px; max-width: 150px;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px; background: #fff;   /* helle Flaeche, sonst verschwindet
                                       ein dunkles Logo im dunklen Feld */
}
.logozeile .leer { color: var(--muted); font-size: 13px; }

/* --- Vorschau der Belegvorlage --- */
/* --- Editor und Vorschau nebeneinander ---
   Ausgelegt auf **1920x1080**, weil dort gearbeitet wird. Nach
   Seitenleiste und Polstern bleiben 1608 px: rund 600 fuer die Vorschau,
   der Rest fuer den Editor. */
.vorlage-arbeit {
  display: flex; gap: 16px; align-items: flex-start;
  flex-wrap: wrap; margin-top: 16px;
}
.vorlage-links  { flex: 1 1 620px; min-width: 0; }

/* **Die Breite der Vorschau folgt ihrer Hoehe.** Ohne feste Breite nimmt
   die Karte die natuerliche Breite des Bildes als Wunsch (1241 px bei
   150 dpi) und wird dadurch fast doppelt so breit wie das Blatt darin —
   das Blatt sass dann zentriert in einer halbleeren Karte. Also rechnen:
   Blatthoehe mal dem Seitenverhaeltnis von A4, plus Polster und Rahmen. */
.vorlage-arbeit {
  --blatt-hoehe: max(420px, min(calc(100vh - 405px), 880px));
  --karten-luft: 50px;      /* 2x24 Polster + 2x1 Rahmen */
}
.vorlage-rechts {
  flex: 0 0 calc(var(--blatt-hoehe) * 0.7071 + var(--karten-luft));
}

/* `.blatt .card + .card { margin-top: 16px }` hat dieselbe Spezifitaet
   (0,3,0) wie `.blatt .vorlage-arbeit > .card` und steht spaeter im
   Dokument — der Gleichstand ging an die andere Regel, und die rechte
   Karte hing 16 px tiefer als die linke. Mit vier Klassen ist es
   entschieden. */
.blatt .vorlage-arbeit > .card + .card { margin-top: 0; }
.blatt .vorlage-arbeit > .card { margin-bottom: 0; }

/* **Die Hoehe fuehrt, nicht die Breite.** Der Engpass ist der Bildschirm:
   eine A4-Seite in voller Breite waere hoeher als 1080 px. Also so hoch
   wie hineinpasst, und die Breite folgt — beim Bild ganz von selbst, weil
   es die Proportionen des Blattes schon mitbringt.

   405 px sind gemessen, nicht geschaetzt: Titelleiste, Reiter, der
   Kartenkopf der Vorschau und die Polster darunter. */
.vorschau-blatt { display: flex; justify-content: center; }
.vorschau-blatt img,
.vorschau-rahmen {
  height: var(--blatt-hoehe);
  width: auto;
  max-width: 100%;
  /* **Lieber Luft als ein verzerrtes Blatt.** `height` und `max-width`
     zusammen quetschen das Bild, wenn die berechnete Kartenbreite auch
     nur ein paar Pixel danebenliegt — genau das passierte, als das
     Kartenpolster mit 18 statt 24 px gerechnet war: 0,689 statt 0,707,
     und eine Vorschau, die schmaler tut als der Druck. `contain` macht
     daraus schlimmstenfalls einen Rand. */
  object-fit: contain;
  display: block;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff;   /* nicht durchsichtig: ein Blatt auf dunklem Grund
                         sieht nach Fehler aus, bevor es geladen ist */
}
/* Nur der Rueckfall braucht das Verhaeltnis von Hand — das Bild hat es. */
.vorschau-rahmen { aspect-ratio: 210 / 297; }

/* **`display: block` sticht `hidden` aus.** Der Rueckfall-Rahmen stand
   deshalb neben dem Bild, obwohl er ausgeblendet sein sollte, und schob
   die Karte 121 px ueber den rechten Rand — die Seite bekam einen
   waagerechten Rollbalken. Wer `display` setzt, muss `[hidden]` wieder
   herstellen. */
.vorschau-blatt img[hidden],
.vorschau-rahmen[hidden] { display: none; }

/* Auf kurzen Schirmen wird die Luft knapp, nicht der Platz. Ein Laptop
   mit 768 px oder ein 1080er auf 125 % Windows-Skalierung landet bei
   rund 860 px Hoehe — dort kostet der Editor 37 px zu viel und die Seite
   faengt an zu ruckeln. Weniger Polster, kein weggelassener Inhalt: die
   Hinweise bleiben stehen, sie ruecken nur naeher zusammen. */
@media (max-height: 900px) {
  .vorlage-arbeit { gap: 12px; margin-top: 12px; }
  .vorlage-links, .vorlage-rechts { padding: 14px; }
  .vorlage-arbeit { --karten-luft: 30px; }   /* 2x14 Polster + 2x1 Rahmen */
  .vorlage-links .wahlzeile { margin-bottom: 8px; }
  .vorlage-links .actions { margin-top: 10px; }
  .editor { gap: 12px; }
}

/* Untereinander, sobald es nebeneinander eng wird. */
@media (max-width: 1250px) {
  .vorlage-rechts { flex: 1 1 100%; }
  .vorlage-arbeit { --blatt-hoehe: 700px; }
  .vorschau-rahmen { aspect-ratio: auto; width: 100%; }
}

/* Der Betriebsreiter darf breiter sein als der Rest: hier stehen zwei
   Dinge nebeneinander, keine breitgezogene Tabelle. */
#view-betrieb.active { max-width: 1800px; }

/* --- Layouteditor --- */
.editor { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }

/* Das Raster ist ein A4-Kopf im Massstab. Seitenverhaeltnis ueber
   aspect-ratio, damit es bei jeder Breite masshaltig bleibt — ein Raster,
   das anders proportioniert ist als das Blatt, waere eine Luege. */
.raster {
  position: relative; flex: 1 1 420px; min-width: 320px;
  /* **Gedeckelt, sonst waechst der Editor aus dem Bild.** Das Raster ist
     ein Massstabsbild des Briefkopfs; sein Seitenverhaeltnis liegt fest,
     also macht jede zusaetzliche Breite es auch hoeher. Auf einem breiten
     Schirm wurde die Editorkarte dadurch hoeher als die Vorschau daneben
     und die Seite fing an zu rollen. 720 px sind 3,4 Bildpunkte je
     Millimeter — mehr braucht niemand, um einen Baustein zu greifen. */
  max-width: 720px;
  /* Vorgabe; JS setzt sie passend zur Kopfzone, damit beide nicht
     auseinanderlaufen. */
  aspect-ratio: 210 / 100;
  background:
    repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px calc(100% / 12)),
    var(--panel);
  border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; user-select: none; touch-action: none;
}
.raster-marke, .raster-grenze {
  position: absolute; left: 0; right: 0;
  font-size: 10px; color: var(--muted); pointer-events: none;
  padding-left: 4px;
}
.raster-marke { background: rgba(120,130,145,.10); border-block: 1px dashed var(--border); }
.raster-grenze { border-top: 2px solid var(--numeon-accent); opacity: .55; }

.kasten {
  position: absolute; box-sizing: border-box;
  border: 1.5px solid var(--numeon-accent);
  background: rgba(79,140,255,.10);
  border-radius: 5px; cursor: grab;
  font-size: 10.5px; line-height: 1.25; padding: 3px 5px;
  overflow: hidden;
}
.kasten.wahl { cursor: grabbing; }
.kasten.wahlbar { outline: 2px solid var(--numeon-accent); outline-offset: 1px; }
.kasten.frei { border-style: dashed; }
.kasten.fest { cursor: not-allowed; background: rgba(120,130,145,.14);
               border-color: var(--muted); }
.kasten.streit { border-color: var(--danger); background: rgba(220,60,60,.14); }

.bausteinliste { flex: 0 0 250px; }
.bausteinliste h3 { font-size: 13px; margin: 0 0 8px; }
.bs-zeile {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.bs-zeile input { width: auto; flex: 0 0 auto; margin: 0; }
.bs-zeile .name { flex: 1; }
.bs-zeile .muss { color: var(--muted); font-size: 11px; }
.bs-zeile.gesperrt { opacity: .6; }

.fest-hinweis { background: rgba(120,130,145,.18); padding: 0 4px; border-radius: 3px; }

.meldung-konflikt {
  margin-top: 12px; padding: 10px 13px; border-radius: 8px;
  border: 1px solid var(--danger); color: var(--danger);
  background: rgba(220,60,60,.08); font-size: 13px;
}

@media (max-width: 900px) { .bausteinliste { flex: 1 1 100%; } }

/* Auswahl und Beschreibung in einer Zeile — jede Karte weniger ueber dem
   Editor sind rund 260 px, die auf einem 1080er Bildschirm fehlen. */
.wahlzeile {
  display: flex; gap: 14px; align-items: flex-end;
  margin-bottom: 12px; flex-wrap: wrap;
}
.wahlzeile > div { flex: 0 0 190px; }
.wahlzeile .wahltext {
  flex: 1 1 220px; color: var(--muted); font-size: 12px; line-height: 1.45;
  padding-bottom: 2px;
}
.wahlzeile .wahltext span { display: block; }

/* --- Hinweis auf den Testdruck ---
   Erscheint nach dem Speichern der Belegvorlage. Bewusst kein Sperrbalken:
   erzwingen wollte der Betrieb es nicht, und eine Sperre haette ohnehin nur
   bewiesen, dass jemand auf einen Knopf drueckt — nicht, dass ein Blatt im
   Drucker lag. Auffaellig genug, dass man ihn nicht wegliest, mit dem Knopf
   direkt daneben. */
.testdruck {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--numeon-accent); border-radius: 8px;
  background: color-mix(in srgb, var(--numeon-accent) 8%, transparent);
  font-size: 13px; line-height: 1.5;
}
.testdruck > div { flex: 1 1 320px; min-width: 0; }
.testdruck button { flex: 0 0 auto; }

/* --- Formular-Dialog (uiForm) ---
   Breiter als der Bestaetigungsdialog: dort steht ein Satz, hier stehen
   Felder. Die Hoehe ist gedeckelt, damit eine lange Betriebsliste den
   Dialog nicht aus dem Fenster schiebt. */
.modal.modal-form {
  width: 460px; max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px); overflow-y: auto;
}
.modal-form .mf-feld { margin-bottom: 14px; }
.modal-form .mf-feld > label {
  display: block; margin-bottom: 5px; font-size: 13px; color: var(--muted);
}
.modal-form .mf-feld > input { width: 100%; box-sizing: border-box; }
.modal-form .mf-feld .hint { margin-top: 5px; }
.modal-form .mf-auswahl {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
}
.modal-form .mf-auswahl label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.modal-form .mf-auswahl input { margin: 0; }
.modal-form .msg { margin: 0 0 14px; }
.modal-form .m-actions { margin-top: 4px; }

/* --- Tabellen in Karten ---
   Vorher standen die Tabellen rahmenlos in der Ansicht, waehrend die
   Formulare darueber in Karten sassen. Jede Seite hatte dadurch zwei
   Kanten: die Karte hoerte bei 760 px auf, die Tabelle lief bis 1500, und
   dazwischen lag ein toter Streifen. Jetzt haben beide dieselbe Kante.

   Kein Polster: die Zellen bringen ihres schon mit, und ein zusaetzlicher
   Rand liesse die Kopfzeile in der Luft haengen. `overflow: hidden` rundet
   die Ecken der ersten und letzten Zeile mit — eine Tabelle nimmt einen
   `border-radius` sonst nicht an. */
.kartentabelle { padding: 0; overflow: hidden; }
.kartentabelle + .kartentabelle,
.card + .kartentabelle,
h2 + .kartentabelle { margin-top: 12px; }
/* Die letzte Zeile braucht keinen Trennstrich mehr — darunter kommt der
   Kartenrand. */
.kartentabelle tbody tr:last-child td { border-bottom: 0; }
.kartentabelle .empty { padding: 28px 16px; }
/* Der Schiebe-Rahmen sitzt jetzt in der Karte und darf ihre Ecken nicht
   ueberlappen. */
.kartentabelle > .tabelle-schiebt { border-radius: 12px; }

/* --- Eine Spalte aus Ankreuzfeldern ---
   `.row > * { flex: 1 1 200px }` meint die **Hauptrichtung**. Bei
   `flex-direction: column` sind das 200 px *Hoehe* je Eintrag — vier Haken
   standen dadurch fingerbreit auseinander, mit Leerraum dazwischen, in dem
   nichts stand. Hier zaehlt nur der Inhalt. */
.hakenliste {
  flex-direction: column; align-items: flex-start; gap: 8px;
  /* Den Abstand zu den Erklaerungen darueber und darunter brachten vorher
     die Label-Abstaende mit — die sind jetzt weg, also gehoert er hierher. */
  margin: 14px 0;
}
/* `label { margin: 12px 0 6px }` gilt fuer Feldbeschriftungen ueber einem
   Eingabefeld. Hier ist das Label die Zeile selbst — die 18 px kaemen zum
   `gap` noch dazu. */
.hakenliste > * { flex: 0 0 auto; margin: 0; }

/* --- Befreiungsgrund unter der Position ---
   Eigene Zeile statt eigener Spalte: der Grund ist ein Satz, und eine Spalte
   dafuer waere entweder zu schmal zum Lesen oder zu breit fuer den Rest der
   Tabelle. Sie erscheint nur, wenn die Position wirklich auf 0 % steht. */
tr.freizeile td { background: var(--hover); padding-top: 8px; }
tr.freizeile label { color: var(--muted); font-size: 12px; }
tr.freizeile input { max-width: 620px; }

/* --- Mahntexte je Stufe ---
   Die drei Stufen sichtbar getrennt, damit beim Lesen klar bleibt, welcher
   Text zu welcher Mahnung gehoert. */
.mahnstufe {
  border-left: 3px solid var(--border); padding-left: 14px;
  margin: 16px 0 20px; max-width: 760px;
}
.mahnstufe:first-child { margin-top: 8px; }
.mahnstufe textarea { min-height: 76px; }

/* --- Notizen zum Vorgang --- */
.notiz {
  border-left: 3px solid var(--numeon-accent); padding: 8px 0 8px 12px;
  margin-top: 12px; max-width: 900px;
}
.notiz .kopf {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 13px;
}
.notiz .kopf .leer { color: var(--muted); flex: 1; }
.notiz .text { margin-top: 4px; line-height: 1.5; white-space: pre-wrap; }

/* --- Platzhalterliste in der Mailvorlage --- */
.platzhalter {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  margin-top: 8px; max-width: 620px;
}
.platzhalter > div { display: contents; }
.platzhalter code {
  font-family: Consolas, monospace; color: var(--numeon-accent);
  white-space: nowrap;
}

/* --- Was vom Hof kam ---
   Unterschrift und Fotos eines Lieferscheins, der auf dem Tablet entstanden
   ist. Bis hierher lagen beide nur im PDF und in der Datenbank; im Buero war
   nicht zu sehen, was der Fahrer fotografiert hat, ohne das PDF zu oeffnen.

   Die Bilder kommen ueber `api.blob()` und nicht als `<img src="/api/...">`:
   der Zugang haengt an einem Token im Kopf der Anfrage, und ein `img`-Element
   schickt keinen Kopf mit. */
.hof-zeile {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 14px;
  font-size: 13px; color: var(--muted);
}
.hof-zeile b { color: var(--text); font-weight: 600; }

.hof-sig {
  display: inline-block; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg);
}
.hof-sig img {
  display: block; max-width: 320px; max-height: 110px;
  /* Ein Fingerzug ist dunkle Tinte auf durchsichtigem Grund. Auf einer
     dunklen Oberflaeche waere er unsichtbar — deshalb steht er auf Weiss,
     so wie er auch auf dem Papier steht. */
  background: #fff; border-radius: 6px; padding: 4px;
}
.hof-sig .wer { margin-top: 8px; font-size: 13px; }
.hof-sig .wann { color: var(--muted); font-size: 12px; }

.hof-fotos {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px;
}
.hof-foto {
  width: 150px; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--bg);
  cursor: zoom-in; padding: 0;
}
.hof-foto img {
  display: block; width: 100%; height: 110px; object-fit: cover;
  background: var(--border);
}
.hof-foto .bu {
  padding: 6px 8px; font-size: 12px; color: var(--muted);
  text-align: left; line-height: 1.35;
}

/* Grossansicht — derselbe Aufbau wie die PDF-Ansicht, damit Escape,
   Titelzeile und Schliessen sich gleich anfuehlen. */
.bild-ov {
  position: fixed; inset: 0; z-index: 10002; background: rgba(0,0,0,.85);
  display: none; flex-direction: column;
}
.bild-ov.show { display: flex; }
.bild-ov .buehne {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 16px; min-height: 0;
}
.bild-ov .buehne img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* --- Maße L×B×H in der Positionszeile (Schemaschritt 23) ---
   Drei Zahlen und eine Einheit müssen in eine Tabellenzelle, ohne dass die
   Zeile umbricht. Vorher stand hier ein einzelnes Feld mit dem Platzhalter
   „Maß" auf 62 px — der Text war abgeschnitten, was am 07.09. auffiel. */
.masszelle { white-space: nowrap; }
.masszelle input[type="number"] {
  width: 56px; text-align: right; padding-left: 4px; padding-right: 4px;
}
.masszelle .malzeichen {
  color: var(--muted); padding: 0 2px; font-size: 12px;
}
.masszelle select {
  width: 54px; margin-left: 4px; padding: 6px 4px;
}
/* Das alte Einzelmaß eines Altbelegs — nur zur Ansicht, klein und grau.
   Es wird nicht mehr eingegeben, soll aber sichtbar bleiben, damit ein
   Beleg von früher nicht plötzlich weniger Angaben zeigt als damals. */
.masszelle .altmass {
  margin-left: 6px; color: var(--muted); font-size: 12px;
}