/* ============================================================
 *  Garage-App – Blue UI
 * ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue: #1b5fb4;
  --blue-dark: #134a8e;
  --blue-light: #e8f0fb;
  --red: #e74c3c;
  --red-tint: #fdecea;
  --yellow: #f1c40f;
  --yellow-tint: #fef7d6;
  --green: #2ecc71;
  --green-tint: #e7f8ee;
  --gray: #6b7280;
  --border: #d8dee8;
  --bg: #f3f5f9;
}
html, body { height: 100%; }
body {
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg);
  color: #1f2937;
  font-size: 15px;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 15px; }

/* ---------- Login ---------- */
#login-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  padding: 16px;
}
.login-box {
  background: #fff; border-radius: 14px; padding: 32px 28px;
  width: 100%; max-width: 380px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.login-box h1 { font-size: 22px; color: var(--blue-dark); margin-bottom: 4px; }
.login-box p.sub { color: var(--gray); margin-bottom: 22px; font-size: 13px; }
.login-box label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.login-box input, .login-box select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px;
}
.login-box button {
  width: 100%; margin-top: 20px; padding: 12px;
  background: var(--blue); color: #fff; border: none; border-radius: 8px;
  font-size: 16px; font-weight: 600;
}
.login-box button:hover { background: var(--blue-dark); }
.login-fehler {
  margin-top: 12px; padding: 10px 12px; background: var(--red-tint);
  color: var(--red); border-radius: 8px; font-size: 13px;
}
.login-fehler.login-hinweis { background: var(--blue-light); color: var(--blue-dark); }
#login-pass-feld { margin-top: 0; }
.demo-hinweis {
  margin-top: 16px; padding: 10px; background: var(--yellow-tint);
  border-radius: 8px; font-size: 12.5px; color: #7a5d00;
}

/* ---------- App-Rahmen ---------- */
#app { display: none; min-height: 100vh; flex-direction: column; }
header.topbar {
  background: var(--blue); color: #fff;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; position: sticky; top: 0; z-index: 50;
}
header.topbar .logo { font-weight: 700; font-size: 17px; white-space: nowrap; }
header.topbar .spacer { flex: 1; }
header.topbar .user { font-size: 13px; opacity: .9; white-space: nowrap; }
header.topbar button.logout {
  background: rgba(255,255,255,.15); color: #fff; border: none;
  padding: 6px 12px; border-radius: 6px; font-size: 13px;
}
nav.mainnav {
  background: #fff; border-bottom: 1px solid var(--border);
  display: flex; overflow-x: auto; position: sticky; top: 48px; z-index: 40;
}
nav.mainnav button {
  background: none; border: none; padding: 12px 18px;
  font-size: 14.5px; font-weight: 600; color: var(--gray);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
nav.mainnav button.active { color: var(--blue); border-bottom-color: var(--blue); }
main { flex: 1; padding: 16px; max-width: 1250px; width: 100%; margin: 0 auto; }
footer.credits {
  text-align: center; padding: 14px; color: var(--gray); font-size: 12px;
}

/* ---------- Werkzeugleiste ---------- */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 14px;
}
.toolbar input[type=text], .toolbar select {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff;
}
.toolbar input[type=text] { flex: 1; min-width: 160px; }
.btn {
  padding: 9px 16px; border: none; border-radius: 8px;
  background: var(--blue); color: #fff; font-weight: 600; font-size: 14px;
}
.btn:hover { background: var(--blue-dark); }
.btn.secondary { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
.btn.danger { background: var(--red); }
.btn.small { padding: 5px 10px; font-size: 12.5px; }

/* ---------- Tabelle (Desktop) ---------- */
.tablewrap { overflow-x: auto; background: #fff; border-radius: 12px; border: 1px solid var(--border); }
table.liste { width: 100%; border-collapse: collapse; min-width: 760px; }
table.liste th {
  text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px;
  color: var(--gray); padding: 10px 12px; border-bottom: 2px solid var(--border);
  cursor: pointer; user-select: none; white-space: nowrap; background: #fafbfd;
}
table.liste td { padding: 10px 12px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
table.liste tr:last-child td { border-bottom: none; }
table.liste tr.klickbar { cursor: pointer; }
table.liste tr.klickbar:hover td { filter: brightness(.97); }

/* Status-Pille */
.status-pill {
  display: inline-block; padding: 5px 12px; border-radius: 20px;
  font-size: 12.5px; font-weight: 700; border: 1px solid rgba(0,0,0,.12);
  white-space: nowrap; cursor: pointer;
}
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11.5px; font-weight: 700;
}
.badge.faellig { background: var(--red); color: #fff; }
.badge.grau { background: #e5e7eb; color: #374151; }

/* ---------- Karten (Handy) ---------- */
.cards { display: none; }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
}
.card .zeile1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card .titel { font-weight: 700; font-size: 15.5px; }
.card .details { margin-top: 6px; font-size: 13px; color: var(--gray); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.card .aktionen { margin-top: 10px; display: flex; gap: 8px; }

@media (max-width: 720px) {
  .tablewrap { display: none; }
  .cards { display: block; }
  main { padding: 10px; }
  nav.mainnav { top: 44px; }
}

/* ---------- Formular-Dialog ---------- */
.modal-hg {
  position: fixed; inset: 0; background: rgba(15,23,42,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px 10px; z-index: 100; overflow-y: auto;
}
.modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 860px;
  padding: 22px; margin-bottom: 40px;
}
.modal h2 { color: var(--blue-dark); font-size: 19px; margin-bottom: 14px; }
.modal h3 {
  font-size: 13.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--gray); margin: 18px 0 8px; border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
}

/* Abteilungen im Formular: abwechselnd weiss und grau */
.abteilung {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 4px 14px 14px; margin-bottom: 12px;
}
.abt-weiss { background: #ffffff; }
.abt-grau  { background: #f2f5fa; }
.abteilung h3 { margin-top: 12px; color: var(--blue-dark); }
.abteilung .formgrid input, .abteilung .formgrid select,
.abteilung textarea { background: #fff; }
.formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 14px; }
.formgrid label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 3px; color: #374151; }
.formgrid input, .formgrid select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px;
}
.formgrid input.fehler, .formgrid select.fehler { border-color: var(--red); background: var(--red-tint); }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.checkgrid label {
  display: flex; align-items: center; gap: 7px; font-size: 13.5px;
  background: var(--blue-light); padding: 8px 10px; border-radius: 7px; cursor: pointer;
}
.modal .aktionen { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }

/* Kosten-Liste im Formular */
table.kosten { width: 100%; border-collapse: collapse; }
table.kosten td { padding: 4px 6px 4px 0; }
table.kosten input { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; }
.kosten-total { text-align: right; font-weight: 700; margin-top: 6px; }

/* ---------- Dashboard ---------- */
.seitentitel { font-size: 20px; color: var(--blue-dark); margin-bottom: 14px; }
.abschnitt { font-size: 14px; text-transform: uppercase; letter-spacing: .4px; color: var(--gray); margin: 22px 0 10px; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.stat {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; text-align: center; cursor: pointer; transition: box-shadow .15s;
}
.stat:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.stat.warn { border-color: var(--red); background: var(--red-tint); }
.stat-icon { font-size: 22px; }
.stat-wert { font-size: 28px; font-weight: 800; color: var(--blue-dark); }
.stat-titel { font-size: 12.5px; color: var(--gray); }
.modulgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.modulkarte {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; display: flex; align-items: center; gap: 10px;
  font-weight: 600; cursor: pointer; transition: box-shadow .15s;
}
.modulkarte:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.mk-icon { font-size: 22px; }

/* ---------- Einstellungen: Untertabs ---------- */
.subtabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.subtab {
  background: #fff; border: 1px solid var(--border); border-radius: 20px;
  padding: 7px 16px; font-size: 13.5px; font-weight: 600; color: var(--gray);
}
.subtab.aktiv { background: var(--blue); border-color: var(--blue); color: #fff; }
.infobox {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px;
}
.infobox h3 { color: var(--blue-dark); margin-bottom: 10px; }
.infobox ol { margin: 10px 0 10px 20px; line-height: 1.7; }
.infobox code { background: var(--blue-light); padding: 1px 6px; border-radius: 5px; }

/* ---------- Kleinkram ---------- */
.muted { color: var(--gray); font-size: 12.5px; }
td.nr { color: var(--gray); font-size: 12.5px; white-space: nowrap; }
.gewinn-info { margin: 8px 0 0; font-size: 13.5px; color: var(--blue-dark); }
.topbar .firma {
  font-size: 12.5px; background: rgba(255,255,255,.15);
  padding: 4px 10px; border-radius: 12px; white-space: nowrap;
}

/* ---------- Fahrzeuge 1:1 (Checklist Cars V4.1) ---------- */
.filterbar {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 14px; margin-bottom: 14px; font-size: 13.5px;
}
.filterbar label { display: flex; align-items: center; gap: 7px; font-weight: 600; color: #374151; }
.filterbar select { padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: #fff; }
.filterbar .chk { font-weight: 600; cursor: pointer; }
.car-link { cursor: pointer; color: var(--blue-dark); text-decoration: none; }
.car-link:hover { text-decoration: underline; }
.cost-tag {
  display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 700;
  background: #fff7e0; border: 1px solid #f1c40f; border-radius: 10px; padding: 1px 8px;
}
.bearb-tag { display: block; font-size: 11.5px; color: var(--gray); margin-top: 2px; }
input.dd {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 13px; max-width: 140px; background: #fff;
}
input.dd.termin { font-weight: 700; }
.saved { box-shadow: 0 0 0 3px rgba(46, 204, 113, .55) !important; transition: box-shadow .2s; }
.aktion-zelle { white-space: nowrap; }
.aktion-zelle .btn { margin-right: 4px; }
.btn.cost { background: #f1c40f; color: #000; }
button.status-pill { border: 1px solid rgba(0,0,0,.15); }

/* Handy + iPad hochkant: Tabelle wird zu gestapelten Karten (wie Original mit data-lbl) */
@media (max-width: 840px) {
  .tablewrap.cc-mobil { display: block; overflow: visible; border: none; background: none; }
  .cc-mobil table.liste { min-width: 0; }
  .cc-mobil table.liste thead { display: none; }
  .cc-mobil table.liste tr {
    display: block; border: 1px solid var(--border); border-radius: 12px;
    margin-bottom: 10px; padding: 6px 4px;
  }
  .cc-mobil table.liste td {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border-bottom: none; padding: 6px 10px;
  }
  .cc-mobil table.liste td::before {
    content: attr(data-lbl); font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; color: var(--gray); min-width: 90px;
  }
  .aktion-zelle { flex-wrap: wrap; }
}

/* ---------- Druckansicht (nur beim Drucken sichtbar) ---------- */
#print-bereich { display: none; }
@media print {
  body > *:not(#print-bereich) { display: none !important; }
  #print-bereich { display: block; padding: 10mm; font-family: Arial, sans-serif; color: #000; }
  #print-bereich h1 { font-size: 22px; margin-bottom: 12px; }
  .pr-tbl { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
  .pr-tbl th, .pr-tbl td { border: 1px solid #999; padding: 6px 9px; font-size: 12.5px; text-align: left; }
  .pr-tbl th { background: #f0f0f0; width: 13%; }
  .pr-fuss { font-size: 10.5px; color: #555; margin-top: 16px; }
  .pr-ausweis-box { text-align: center; margin-bottom: 12px; }
  .pr-ausweis-box img { max-width: 100%; max-height: 95mm; object-fit: contain; }
  .pr-kein-ausweis { color: #777; margin-bottom: 10px; }
}

/* Fahrzeugausweis-Vorschau im Formular */
.ausweis-vorschau {
  background: #fafbfd; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px; text-align: center;
}
.ausweis-vorschau img { max-width: 100%; max-height: 300px; border-radius: 6px; }
.aw-knoepfe { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* Ausweis-Zuschneiden (Auto-Erkennung + Ecken ziehen) */
.aw-cropwrap {
  position: relative; margin: 12px auto 0; user-select: none;
  touch-action: none; border-radius: 8px; overflow: hidden;
}
.aw-cropwrap > img { width: 100%; height: 100%; display: block; pointer-events: none; }
.aw-rect {
  position: absolute; border: 2px dashed #00b3ff; cursor: move;
  background: rgba(0, 179, 255, .12); box-shadow: 0 0 0 9999px rgba(0,0,0,.35);
}
.aw-handle {
  position: absolute; width: 26px; height: 26px; background: #00b3ff;
  border: 2px solid #fff; border-radius: 50%; z-index: 2; touch-action: none;
}
.aw-handle-nw { left: -13px; top: -13px; cursor: nwse-resize; }
.aw-handle-ne { right: -13px; top: -13px; cursor: nesw-resize; }
.aw-handle-sw { left: -13px; bottom: -13px; cursor: nesw-resize; }
.aw-handle-se { right: -13px; bottom: -13px; cursor: nwse-resize; }
.aw-aktionen { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Tablet/iPad: keine Doppeltipp-Vergrösserung, grosse Tippflächen */
button, .status-pill, input.dd, .subtab, nav.mainnav button { touch-action: manipulation; }
@media (pointer: coarse) {
  .btn.small { padding: 8px 13px; font-size: 13.5px; }
  input.dd { padding: 9px 10px; font-size: 14px; }
  .status-pill { padding: 8px 14px; }
}

/* ---------- Checklisten ---------- */
.badge.gruen { background: var(--green); color: #fff; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cl-karte {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; cursor: pointer; transition: box-shadow .15s;
}
.cl-karte:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.cl-karte.fertig { opacity: .75; background: var(--green-tint); }
.cl-karte .zeile1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cl-karte .titel { font-weight: 700; }
.cl-karte .details { margin-top: 6px; font-size: 12.5px; color: var(--gray); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cl-balken { height: 6px; background: #eef1f6; border-radius: 4px; margin-top: 10px; overflow: hidden; }
.cl-balken-fuell { height: 100%; background: var(--blue); border-radius: 4px; transition: width .2s; }
.cl-punkte { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
.cl-punkt {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fafbfd; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px;
}
.cl-status {
  width: 38px; height: 38px; min-width: 38px; border-radius: 10px; border: 1px solid rgba(0,0,0,.1);
  font-size: 18px; font-weight: 800; line-height: 1;
}
.cl-punkt-text { flex: 1; font-size: 14.5px; padding-top: 8px; }
.cl-notiz {
  display: block; width: 100%; margin-top: 6px; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 7px; font-size: 13px;
}

/* ---------- Verträge ---------- */
.vt-zw { font-size: 13px; color: var(--blue-dark); margin: 12px 0 6px; }
#vt-kunde-suche {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
}
.vt-treffer {
  padding: 9px 12px; border: 1px solid var(--border); border-top: none;
  background: #fff; cursor: pointer;
}
.vt-treffer:hover { background: var(--blue-light); }
.vt-kunde-karte {
  background: var(--green-tint); border: 1px solid var(--green); border-radius: 8px;
  padding: 10px 12px; margin-top: 8px; font-size: 14px;
}
.schild-zeile { display: flex; gap: 6px; align-items: center; }
.schild-zeile select { flex: 1; min-width: 0; }
.kunde-suchzeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kunde-suchzeile input[type=text] {
  flex: 1; min-width: 200px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
}
.kunde-suchzeile #vt-kunde-suche, .kunde-suchzeile #pf-kunde-suche { flex: 1; min-width: 200px; }
.schnell-kunde {
  background: var(--blue-light); border: 1px solid var(--blue);
  border-radius: 10px; padding: 12px 14px; margin-top: 10px;
}
.schnell-kunde input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff;
}
.schnell-kunde label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }

/* Führerschein: zwei Seiten */
.fs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.fs-box { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: #fff; }
.fs-titel { font-size: 12.5px; font-weight: 700; color: var(--blue-dark); margin-bottom: 6px; }
.fs-box .ausweis-vorschau { min-height: 90px; display: flex; align-items: center; justify-content: center; }

.sig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.sig-label { font-size: 12.5px; font-weight: 700; color: #374151; display: block; margin-bottom: 4px; }
.sig-canvas {
  width: 100%; max-width: 500px; height: 160px; border: 1px dashed var(--blue);
  border-radius: 8px; background: #fff; touch-action: none; display: block; margin-bottom: 6px;
}
.sig-bild {
  max-width: 100%; max-height: 120px; border: 1px solid var(--border);
  border-radius: 8px; display: block; margin-bottom: 6px; background: #fff;
}

/* Vertrag-Druck (1:1 nach Original-Ausdruck) */
@media print {
  .vt-print { font-size: 11.5px; color: #000; }
  .vt-print p { font-size: 11.5px; margin: 2px 0; }
  .vt-kopf { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
  .vt-kopf-rechts { text-align: right; }
  .vt-kopf-rechts p { font-size: 12px; }
  .vt-kopf-logo img { height: 15mm; width: auto; max-width: 90mm; object-fit: contain; }
  .vt-logo-text { font-size: 20px; font-weight: 800; }
  .vt-print { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .vt-sek {
    font-size: 13px; font-weight: 800; color: #fff;
    padding: 5px 10px; margin: 24px 0 0; border-radius: 4px 4px 0 0;
  }
  .vt-tbl { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
  .vt-tbl td { border: 1px solid #ccc; padding: 4px 7px; font-size: 11px; }
  .vt-tbl .vt-lbl { font-weight: 700; white-space: nowrap; }

  /* Abteilungs-Farben: jede Sektion mit eigener Farbe */
  .sek-kunde { background: #1b5fb4; }
  .tbl-kunde { border-left: 3px solid #1b5fb4; }
  .tbl-kunde .vt-lbl { background: #e8f0fb; }

  .sek-fz { background: #0e7d63; }
  .tbl-fz { border-left: 3px solid #0e7d63; }
  .tbl-fz .vt-lbl { background: #e2f4ee; }

  .sek-garantie { background: #7d3c98; }
  .tbl-garantie { border-left: 3px solid #7d3c98; }
  .tbl-garantie .vt-lbl { background: #f1e6f7; }

  .sek-kauf { background: #b25f0a; }
  .tbl-kauf { border-left: 3px solid #b25f0a; }
  .tbl-kauf .vt-lbl { background: #fdf0dd; }
  .vt-total td { font-weight: 800; font-size: 12.5px; background: #fbe3bd; }
  .vt-zahl-uebersicht td { font-size: 12.5px; background: #fff8ee; padding: 7px 10px; }

  /* Vertragsstrafe: grösser, fett, mit viel Abstand nach oben (füllt die A4-Seite) */
  .vt-strafe {
    margin-top: 0; font-size: 14px; font-weight: 700; line-height: 1.6;
    border: 1.5px solid #b00; background: #fdecea; padding: 12px 14px; border-radius: 4px;
  }
  .vt-sig-zeile { display: flex; gap: 30px; margin-top: 34px; }
  .vt-sig-zeile > div { flex: 1; }
  .vt-sig-box { height: 120px; border-bottom: 1.5px solid #000; display: flex; align-items: flex-end; }
  .vt-sig-box img { max-height: 60px; max-width: 100%; }
  .vt-sig-name { font-size: 11px; margin-top: 4px; }
  .vt-fusszeile {
    display: flex; justify-content: space-between; gap: 16px;
    border-top: 1px solid #999; margin-top: 24px; padding-top: 8px;
    font-size: 10px; line-height: 1.5;
  }
  /* AGB-Seite: neue Seite, zusammen mit dem Seitenrand ca. 2 cm Abstand oben */
  .vt-agb { page-break-before: always; padding: 10mm 0 0; }
  .vt-agb-titel { font-size: 15px; font-weight: 800; margin-bottom: 12px; }
  .vt-agb h3 { font-size: 12px; margin: 10px 0 2px; }
  .vt-agb p { font-size: 11px; line-height: 1.55; }
  .vt-agb-schluss { margin-top: 14px; font-weight: 700; }

  /* Zahlteil mit QR-Code unter den AGB */
  .vt-qr { margin-top: 26px; }
  .vt-qr-inhalt {
    display: flex; gap: 24px; align-items: flex-start;
    border: 1px solid #b25f0a; border-top: none; padding: 14px;
  }
  .vt-qr-code { width: 46mm; height: 46mm; }
  .fs-druck { display: flex; gap: 14px; border: 1px solid #7d3c98; border-top: none; padding: 10px; }
  .fs-druck > div { flex: 1; text-align: center; }
  .fs-druck img { max-width: 100%; max-height: 45mm; border: 1px solid #ccc; }
  .fs-druck span { display: block; font-size: 10px; margin-top: 3px; }
  .vt-qr-text p { font-size: 11.5px; margin: 1px 0; }
  .vt-qr-titel { font-weight: 800; font-size: 10px !important; text-transform: uppercase; }
  .vt-qr-klein { font-size: 10px; font-weight: 400; }
  .vt-qr-stand {
    margin-top: 6px !important; background: #fff8ee; border: 1px solid #b25f0a;
    border-radius: 3px; padding: 6px 8px; line-height: 1.5;
  }
}

/* ---------- Buchhaltung als eigene Plattform ---------- */
body.bh-modus header.topbar { background: #0e7d63; }
body.bh-modus nav.mainnav { background: #f0faf6; border-bottom-color: #b9e0d2; }
body.bh-modus nav.mainnav button.active { color: #0e7d63; border-bottom-color: #0e7d63; }
body.bh-modus .seitentitel, body.bh-modus .stat-wert { color: #0b6650; }
body.bh-modus .btn { background: #0e7d63; }
body.bh-modus .btn:hover { background: #0b6650; }
body.bh-modus .btn.secondary { background: #fff; color: #0e7d63; border-color: #0e7d63; }
body.bh-modus .btn.danger { background: var(--red); color: #fff; }
nav.mainnav button.bh-zurueck {
  color: var(--blue); font-weight: 700; border-right: 1px solid var(--border);
}
.rechenbox {
  background: #f0faf6; border: 1px solid #b9e0d2; border-radius: 8px;
  padding: 10px 12px; margin-top: 8px; font-size: 13px; line-height: 1.6;
}

/* ---------- Lohnabrechnung: Eingabetabellen ---------- */
.lohn-tbl { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.lohn-tbl th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; color: var(--gray);
  padding: 4px 6px; border-bottom: 1px solid var(--border);
}
.lohn-tbl td { padding: 3px 6px 3px 0; }
.lohn-tbl input {
  width: 100%; padding: 7px 9px; border: 1px solid var(--border);
  border-radius: 7px; background: #fff; font-size: 13.5px;
}
.lohn-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }

/* Stundeneingabe */
.stunden-box {
  background: #fff7e0; border: 2px solid #f1c40f; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 12px;
}
.stunden-box > label { display: block; font-size: 14.5px; margin-bottom: 8px; }
.stunden-zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stunden-zeile input {
  width: 140px; padding: 10px 12px; font-size: 18px; font-weight: 700;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.std-rechnung { width: 100%; border-collapse: collapse; margin: 10px 0 8px; font-size: 13.5px; }
.std-rechnung td { padding: 4px 6px; border-bottom: 1px solid #f0e0b0; }
.std-rechnung td.r { text-align: right; }
.std-rechnung tr.std-total td { font-weight: 800; font-size: 15px; border-bottom: none; padding-top: 8px; }

/* ---------- Lohnabrechnung: A4-Druck (1:1 nach Vorlage) ---------- */
.lo-print { display: none; }
@media print {
  body > *:not(#print-bereich) { display: none !important; }
  .lo-print {
    display: block; padding: 4mm 0 0; font-family: Arial, Helvetica, sans-serif;
    color: #000; font-size: 9.5pt;
  }
  .lo-logo { text-align: right; margin-bottom: 16mm; }
  .lo-logo img { height: 15mm; width: auto; max-width: 90mm; object-fit: contain; }
  .lo-logo-text { font-size: 16pt; font-weight: 800; }
  .lo-adressen { display: flex; gap: 20mm; margin-bottom: 18mm; }
  .lo-adressen > div { flex: 1; line-height: 1.45; }
  .lo-personal { margin-top: 6mm; }
  .lo-titel { display: flex; justify-content: space-between; margin-bottom: 6mm; }
  .lo-tbl { width: 100%; border-collapse: collapse; }
  .lo-tbl th {
    text-align: left; font-weight: bold; padding: 2mm 1mm;
    border-bottom: 0.6pt solid #000; font-size: 9.5pt;
  }
  .lo-tbl th.r, .lo-tbl td.r { text-align: right; }
  .lo-tbl td { padding: 1.1mm 1mm; }
  .lo-tbl tr.lo-luft td { height: 4mm; padding: 0; }
  .lo-tbl tr.lo-summe-zeile td { font-weight: bold; padding-top: 3mm; padding-bottom: 3mm; }
  .lo-fuss {
    margin-top: 6mm; border-top: 0.6pt solid #000; padding-top: 3mm; line-height: 1.5;
  }
  .lo-fuss p { margin: 0 0 1mm; }
  .lo-mitteilung { margin-top: 4mm !important; }
  .lo-quittung { margin-top: 8mm; }
  .lo-quittung p { margin: 0 0 6mm; }
  .lo-sig-zeile { display: flex; gap: 20mm; }
  .lo-sig-zeile > div { flex: 1; }
  .lo-sig-linie { height: 12mm; border-bottom: 0.6pt solid #000; }
  .lo-sig-zeile span { font-size: 8pt; }
  .lo-hinweis {
    margin-top: 10mm; padding-top: 2.5mm; border-top: 0.4pt solid #999;
    font-size: 7.8pt; color: #333; line-height: 1.45;
  }
}

/* ---------- Firmen-Logo & Import-Sicherheit ---------- */
.logo-box { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.logo-vorschau {
  min-height: 80px; display: flex; align-items: center; justify-content: center;
  background: #fafbfd; border: 1px dashed var(--border); border-radius: 8px; padding: 10px;
}
.logo-vorschau img { max-width: 100%; }
.logo-blatt {
  background: #fff; border: 1px solid #cbd2dc; border-radius: 4px;
  padding: 8px 10px; position: relative; width: 100%; text-align: right;
}
.logo-blatt-hinweis {
  position: absolute; left: 8px; top: 6px; font-size: 10.5px; color: var(--gray);
}
.logo-groesse { margin-top: 12px; }
.logo-groesse label { display: block; font-size: 13px; margin-bottom: 6px; }
.logo-groesse input[type=range] { width: 100%; }
.logo-skala {
  display: flex; justify-content: space-between; font-size: 11px; color: var(--gray);
}
.firma-logo-mini { height: 22px; width: auto; vertical-align: middle; margin-right: 6px; }
.imp-ziel {
  background: var(--blue-light); border: 1px solid var(--blue); border-radius: 8px;
  padding: 10px 12px; margin-top: 10px; font-size: 14px;
}
.imp-firma-wahl {
  display: block; background: #fef7d6; border: 1px solid var(--yellow);
  border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 13.5px; cursor: pointer;
}

/* ---------- Arbeitsvertrag A4 ---------- */
.av-print { display: none; }
@media print {
  /* 1 cm Abstand oben auf JEDER Seite (auch Seite 2), schmale Seitenränder */
  @page { margin: 10mm 15mm; }
  .av-print {
    display: block; padding: 0; font-family: Arial, Helvetica, sans-serif;
    color: #000; font-size: 9.3pt; line-height: 1.45;
  }
  .av-kopf { text-align: right; margin-bottom: 6mm; }
  .av-logo img { height: 15mm; width: auto; max-width: 90mm; object-fit: contain; }
  .av-logo-text { font-size: 14pt; font-weight: 800; }
  .av-print h1 {
    font-size: 17pt; margin: 0 0 6mm; padding-bottom: 2mm;
    border-bottom: 1pt solid #000; letter-spacing: .5pt;
  }
  .av-parteien { width: 100%; border-collapse: collapse; margin-bottom: 5mm; }
  .av-parteien td {
    width: 50%; vertical-align: top; padding: 3mm 4mm 3mm 0; font-size: 9.3pt; line-height: 1.5;
  }
  .av-einleitung { margin: 0 0 4mm; }
  .av-abschnitt { margin-bottom: 3.4mm; page-break-inside: avoid; }
  .av-abschnitt h3 { font-size: 9.8pt; margin: 0 0 1mm; }
  .av-abschnitt p { margin: 0 0 1.2mm; text-align: justify; }
  .av-unterschriften { margin-top: 10mm; page-break-inside: avoid; }
  .av-ort { margin-bottom: 8mm; }
  .av-sig-zeile { display: flex; gap: 22mm; }
  .av-sig-zeile > div { flex: 1; }
  .av-sig-linie { height: 14mm; border-bottom: 0.6pt solid #000; }
  .av-sig-zeile span { font-size: 8pt; display: block; margin-top: 1.5mm; }
}

/* ---------- Fälle: Unterlagen-Fortschritt und Dokumentgruppen ---------- */
.fl-fortschritt { display: flex; gap: 3px; margin-bottom: 3px; }
.fl-punkt {
  width: 13px; height: 13px; border-radius: 3px;
  background: #e5e7eb; border: 1px solid #cbd2dc; display: inline-block;
}
.fl-punkt.ja { background: var(--green); border-color: #24a35c; }
.fl-punkt.hat-datei { box-shadow: inset 0 0 0 2px #fff; }
.fl-gruppe {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; background: #fff;
}
.fl-gruppe.erledigt { background: var(--green-tint); border-color: #9fe0bd; }
.fl-gruppe-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fl-ja { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 14px; }
.fl-dateien { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.fl-datei {
  font-size: 13px; background: #fafbfd; border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 8px; display: flex; align-items: center; gap: 8px;
}
.fl-datei a { color: var(--blue-dark); word-break: break-all; }

/* ---------- Leistungssuche und Live-Summe in der Werkstatt ---------- */
.leistung-suche { margin-bottom: 10px; }
.leistung-suche input {
  width: 100%; padding: 11px 13px; font-size: 14.5px;
  border: 2px solid var(--blue); border-radius: 9px; background: #fff;
}
.wa-summe-box { background: #fff7e0; border-color: #f1c40f; }
.wa-summe-zeile {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 3px 0; gap: 12px;
}
.wa-summe-zeile.rabatt { color: #b25f0a; }
.wa-summe-zeile.total {
  border-top: 1px solid #e0c88a; margin-top: 4px; padding-top: 7px; font-size: 17px;
}
.wa-summe-zeile.klein { font-size: 12px; color: var(--gray); }

/* ---------- Kalender ---------- */
.kal-box { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.kal-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.kal-titel { font-size: 15.5px; color: var(--blue-dark); }
.kal-schalter { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.kal-btn {
  background: #fff; border: none; padding: 7px 14px; font-size: 13.5px;
  font-weight: 600; color: var(--gray); cursor: pointer;
}
.kal-btn.aktiv { background: var(--blue); color: #fff; }
.kal-wochentage, .kal-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.kal-wochentage div {
  text-align: center; font-size: 11.5px; font-weight: 700; color: var(--gray);
  text-transform: uppercase; padding-bottom: 4px;
}
.kal-tag {
  min-height: 92px; border: 1px solid var(--border); border-radius: 7px;
  padding: 4px; background: #fff; cursor: pointer; overflow: hidden;
}
.kal-tag:hover { background: #f7f9fc; }
.kal-tag.fremd { background: #fafbfd; opacity: .5; }
.kal-tag.heute { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.kal-tag-nr { font-size: 12px; font-weight: 700; color: #374151; margin-bottom: 3px; }
.kal-eintrag {
  font-size: 11.5px; background: #f4f6fa; border-left: 3px solid var(--blue);
  border-radius: 4px; padding: 3px 5px; margin-bottom: 2px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kal-eintrag:hover { background: #e8eefb; }
.kal-eintrag.erledigt { opacity: .45; text-decoration: line-through; }
.kal-zeit { font-weight: 700; }
.kal-detail { display: block; color: var(--gray); font-size: 11px; white-space: normal; }
.kal-mehr { font-size: 11px; color: var(--blue); font-weight: 600; }
.kal-woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-wtag {
  border: 1px solid var(--border); border-radius: 8px; padding: 6px;
  min-height: 150px; cursor: pointer;
}
.kal-wtag.heute { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.kal-wtag-kopf {
  font-size: 12px; font-weight: 700; color: var(--blue-dark);
  border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 5px;
}
.kal-wtag .kal-eintrag { white-space: normal; }
.kal-leer { color: #c3cad6; font-size: 12px; text-align: center; padding: 8px 0; }
.kal-tagesliste .kal-eintrag { font-size: 14px; padding: 9px 11px; margin-bottom: 6px; white-space: normal; }
.kal-legende { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--gray); }
.kal-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }
.stat-zusatz { font-size: 11px; color: var(--gray); margin-top: 2px; }
.wa-zeilentotal { font-size: 13.5px; font-weight: 600; text-align: right; padding-right: 8px; }

@media (max-width: 720px) {
  .kal-woche { grid-template-columns: 1fr; }
  .kal-wtag { min-height: 0; }
  .kal-tag { min-height: 62px; }
  .kal-tag .kal-eintrag { font-size: 10px; padding: 2px 3px; }
}

/* Grosser roter Kopf auf dem Werkstattauftrag (wie im alten Druckbeleg) */
@media print {
  .wa-grosser-kopf {
    color: #c00; font-size: 20pt; font-weight: 800; line-height: 1.25;
    border: 2pt solid #c00; border-radius: 3mm; padding: 4mm 5mm; margin: 4mm 0 6mm;
    text-align: center;
  }
  .re-titel {
    font-size: 20pt; font-weight: 800; margin: 0 0 4mm;
    border-bottom: 1pt solid #000; padding-bottom: 2mm;
  }
  .re-zahlung {
    margin-top: 4mm; font-size: 11.5px; background: #f7f9fc;
    border: 1px solid #ccc; border-radius: 3px; padding: 3mm 4mm;
  }
}

/* ---------- Dokument-Vorschau (vor dem Drucken) ---------- */
.vorschau-hg {
  position: fixed; inset: 0; background: rgba(15,23,42,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 14px; z-index: 300;
}
.vorschau-box {
  background: #eef1f6; border-radius: 14px; width: 100%; max-width: 1000px;
  height: 94vh; display: flex; flex-direction: column; overflow: hidden;
}
.vorschau-kopf {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; background: #fff; border-bottom: 1px solid var(--border);
}
.vorschau-titel { font-weight: 700; color: var(--blue-dark); font-size: 15px; }
.vorschau-rahmen { flex: 1; width: 100%; border: none; background: #e9edf3; }
.vorschau-fuss {
  padding: 8px 14px; background: #fff; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--gray);
}
@media (max-width: 720px) {
  .vorschau-box { height: 96vh; }
  .vorschau-kopf .btn { flex: 1; }
  .vorschau-titel { width: 100%; }
}

/* ---------- Toast-Meldungen ---------- */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #1f2937; color: #fff; padding: 11px 20px; border-radius: 10px;
  font-size: 14px; opacity: 0; transition: all .25s; z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.toast.zeig { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-err { background: var(--red); }

/* Leer-Hinweis + Modul-Platzhalter */
.leer {
  text-align: center; color: var(--gray); padding: 50px 20px;
  background: #fff; border: 1px dashed var(--border); border-radius: 12px;
}
.platzhalter {
  text-align: center; padding: 70px 20px; color: var(--gray);
  background: #fff; border-radius: 12px; border: 1px solid var(--border);
}
.platzhalter .gross { font-size: 40px; margin-bottom: 10px; }