/* Belegvorlage (Angebot, Lieferschein, Rechnung ...)
   Masse in Millimetern, orientiert an DIN 5008. Wird auf dem Bildschirm
   als Vorschau und beim Drucken 1:1 identisch verwendet. */

.sheet{
  position:relative;
  width:210mm;
  min-height:297mm;
  background:#fff;
  color:#111827;
  font-family:"Segoe UI", Arial, Helvetica, sans-serif;
  font-size:10.5pt;
  line-height:1.45;
  box-sizing:border-box;
  padding:0 20mm 0 25mm;
  /* Spaltenfluss, damit die Fusszeile immer unten sitzt und nie in den
     Text hineinlaeuft – auch dann nicht, wenn die Positionen lang werden. */
  display:flex;
  flex-direction:column;
}
.sheet > *{flex:0 0 auto}

/* Bildschirm-Vorschau */
.preview-shell{background:#5b6472;padding:22px;overflow:auto;display:flex;justify-content:center}
.preview-shell .sheet{box-shadow:0 8px 34px rgba(0,0,0,.35)}

/* Briefkopf als Hintergrundbild */
.sheet .letterhead{
  position:absolute;left:0;top:0;width:210mm;height:297mm;
  z-index:0;pointer-events:none;
}
.sheet .letterhead img{width:210mm;height:297mm;object-fit:cover;display:block}
.sheet .letterhead.repeat{position:fixed}
.sheet > *:not(.letterhead){position:relative;z-index:1}

/* Falz- und Lochmarken */
.marks span{position:absolute;left:5mm;width:6mm;border-top:.3mm solid #9aa3b0;z-index:2}
.marks .fold1{top:105mm}
.marks .fold2{top:210mm}
.marks .punch{top:148.5mm;width:9mm;border-top-color:#8b95a3}

/* Kopfbereich: Logo, Anschrift, Infoblock */
.doc-top{display:flex;gap:10mm;align-items:flex-start}
.addr-col{width:85mm;flex:0 0 85mm}
.return-line{
  font-size:7pt;color:#4b5563;border-bottom:.2mm solid #9aa3b0;
  padding-bottom:.8mm;margin-bottom:3mm;letter-spacing:.02em;
}
.address{min-height:27mm;white-space:pre-line;font-size:11pt;line-height:1.4}
.info-col{margin-left:auto;width:60mm;flex:0 0 60mm;font-size:9.5pt}
.info-col .logo{max-width:60mm;max-height:24mm;margin-bottom:4mm;display:block;margin-left:auto}
.info-col table{width:100%;border-collapse:collapse}
.info-col td{padding:.5mm 0;vertical-align:top}
.info-col td:first-child{color:#4b5563;padding-right:3mm;white-space:nowrap}
.info-col td:last-child{text-align:right;font-weight:600}

.doc-title{font-size:16pt;font-weight:700;margin:10mm 0 1mm;letter-spacing:-.01em}
.doc-subline{color:#4b5563;font-size:9.5pt;margin-bottom:6mm}
.doc-text{margin:0 0 4mm;white-space:pre-line}

/* Positionstabelle */
table.pos{width:100%;border-collapse:collapse;margin:6mm 0 4mm;font-size:10pt}
table.pos th{
  text-align:left;border-bottom:.4mm solid #111827;padding:1.6mm 1.5mm;
  font-size:8.5pt;text-transform:uppercase;letter-spacing:.04em;font-weight:700;
}
table.pos td{padding:2mm 1.5mm;border-bottom:.2mm solid #dfe3e9;vertical-align:top}
table.pos tr{break-inside:avoid;page-break-inside:avoid}
table.pos .r{text-align:right;white-space:nowrap}
table.pos .c{text-align:center;white-space:nowrap}
table.pos .pos-nr{width:8mm;color:#6b7280}
table.pos .pos-name{font-weight:600}
table.pos .pos-desc{font-size:8.5pt;color:#4b5563;white-space:pre-line;margin-top:.6mm}

/* Artikelbild neben der Position. Feste Hoehe, damit die Zeilen gleich hoch
   bleiben und der Beleg nicht auseinanderlaeuft. */
table.pos .pos-bild{width:16mm;padding-right:2mm}
table.pos .pos-bild img{
  display:block;width:14mm;height:14mm;object-fit:contain;
  border:.2mm solid #e2e6ec;border-radius:1mm;background:#fff;
}

/* Summenblock */
.sums{margin-left:auto;width:80mm;break-inside:avoid;page-break-inside:avoid}
.sums .line{display:flex;justify-content:space-between;padding:1.1mm 0;font-size:10pt}
.sums .line span:last-child{white-space:nowrap}
.sums .rule{border-top:.2mm solid #c9cfd8;margin:1mm 0}
.sums .grand{
  border-top:.5mm solid #111827;border-bottom:.5mm solid #111827;
  margin-top:1.5mm;padding:2mm 0;font-weight:700;font-size:12pt;
}

.note{margin:6mm 0 0;font-size:9.5pt;white-space:pre-line}
.sums + .note,.sums + .delivery-hint{margin-top:10mm}
.pay-box{margin-top:6mm;padding:3mm 4mm;background:#f3f5f8;border-radius:1.5mm;font-size:9.5pt;break-inside:avoid}
.pay-box b{font-weight:650}
.sign{margin-top:10mm;font-size:10pt}

/* Fusszeile – wird ans Blattende geschoben, ohne den Text zu ueberdecken.
   Beim Druck wird daraus eine feste Position, damit sie sich auf jeder
   Seite wiederholt (siehe print.css). */
.doc-footer{
  margin-top:auto;padding-top:2mm;margin-bottom:6mm;
  border-top:.2mm solid #c9cfd8;
  font-size:7.5pt;color:#4b5563;line-height:1.4;
  display:flex;gap:6mm;
}
.doc-footer > div{flex:1}
/* Die Bankspalte braucht mehr Platz, damit die IBAN nicht umbricht. */
.doc-footer > div:last-child{flex:1.45}
.doc-footer b{font-weight:650;color:#374151}

.delivery-hint{font-size:9.5pt;color:#4b5563;margin-top:6mm}
table.pos td.leer{padding:4mm 0;color:#6b7280}

/* =======================================================================
   Vorlage „modern" – Logo oben links, Artikelnummern-Spalte,
   abwechselnd hinterlegte Zeilen, Summenblock rechts unter der Tabelle.
   ======================================================================= */

/* Die Masse sind eng gesetzt, damit eine Rechnung mit mehreren mehrzeiligen
   Positionen noch auf eine Seite passt. */
.sheet.modern{padding:26mm 20mm 5mm 25mm;font-size:9.5pt}

.sheet.modern .logo-row{margin-bottom:8mm}
.sheet.modern .logo-row img{max-height:15mm;max-width:80mm;display:block}

.sheet.modern .doc-top{display:flex;gap:8mm;align-items:flex-start}
.sheet.modern .addr-col{width:95mm;flex:0 0 95mm}
/* Der Strich unter der Absenderzeile endet mit dem Text – nicht am Spaltenrand.
   Dafür muss das Element mitwachsen statt die volle Breite zu belegen. */
.sheet.modern .return-line{
  display:inline-block;
  font-size:7.5pt;color:#374151;border-bottom:.2mm solid #6b7280;
  padding-bottom:1mm;margin-bottom:5mm;
}
.sheet.modern .address{min-height:24mm;white-space:pre-line;font-size:10.5pt;line-height:1.5}

.sheet.modern .info-col{margin-left:auto;width:62mm;flex:0 0 62mm;font-size:9.5pt;line-height:1.5}
.sheet.modern .info-col .firm{margin-bottom:4mm}
.sheet.modern .info-col .contact{margin-bottom:4mm}
.sheet.modern .info-col b{font-weight:700}

.sheet.modern .doc-title{font-size:13.5pt;font-weight:700;margin:7mm 0 4mm}
.sheet.modern .doc-subline{color:#4b5563;font-size:9pt;margin:-2mm 0 4mm}
.sheet.modern .doc-text{margin:0 0 4mm;font-size:9.5pt}

.sheet.modern table.pos{margin:0;font-size:8.5pt}
.sheet.modern table.pos th{
  background:#e9ebef;border:none;padding:1.6mm 2mm;font-size:8pt;font-weight:700;
  text-transform:none;letter-spacing:0;color:#111827;
}
.sheet.modern table.pos td{
  border:none;border-bottom:.2mm solid #d8dce3;
  padding:1.3mm 2mm;vertical-align:top;line-height:1.3;
}
.sheet.modern table.pos tbody tr:last-child td{border-bottom:.35mm solid #9aa2ae}
.sheet.modern table.pos tbody tr:nth-child(even){background:#f4f5f7}
.sheet.modern table.pos .pos-bild{width:14mm;padding-right:1.5mm}
.sheet.modern table.pos .pos-bild img{width:12mm;height:12mm}
.sheet.modern table.pos .pos-nr{width:9mm;color:#111827;font-weight:700}
.sheet.modern table.pos th.pos-nr{font-weight:700}
.sheet.modern table.pos .art{width:19mm}
.sheet.modern table.pos .pos-name{font-weight:700;font-size:8.8pt}
.sheet.modern table.pos .pos-desc{font-size:7.5pt;color:#374151;margin-top:.4mm;line-height:1.22}

.sheet.modern .sums-table{
  width:47%;margin-left:auto;border-collapse:collapse;margin-top:2mm;
  break-inside:avoid;page-break-inside:avoid;font-size:8.5pt;
}
.sheet.modern .sums-table td{padding:1.5mm 2mm;vertical-align:top}
.sheet.modern .sums-table td.r{text-align:right;white-space:nowrap}
.sheet.modern .sums-table tr.total{background:#e9ebef;font-weight:700}
.sheet.modern .sums-table tr.total td{font-size:9.5pt}

.sheet.modern .note{margin:2.8mm 0 0;font-size:8.5pt;color:#111827}
/* Der erste Absatz unter dem Summenblock braucht deutlich mehr Luft –
   sonst klebt der Eigentumsvorbehalt am Gesamtbetrag. */
.sheet.modern .sums-table + .note,
.sheet.modern .sums-table + .delivery-hint{margin-top:9mm}
.sheet.modern .doc-footer{
  border-top:.25mm solid #9aa3b0;padding-top:2.5mm;
  font-size:7.5pt;gap:5mm;margin-top:auto;
}
/* Der letzte Hinweis braucht Abstand zur Fusszeile. */
.sheet.modern .note:last-of-type{margin-bottom:5mm}
.sheet.modern .address{min-height:20mm}