/* ============================================================
   WESPA Schnittdatenrechner — Druckansicht
   Eigenes Blatt, an den Daten aufgehaengt, nicht am Bildschirm-Layout.
   Alles unter #printdoc gekapselt, damit die App-Styles nichts faerben
   und umgekehrt. Geometrie und Sprache aus dem Excel-Ausgabeblatt
   uebernommen (Blaubalken, rote Werkstoffnummer, Fussapparat).
   ============================================================ */

#printdoc{display:none}
#printdoc[data-preview="1"]{display:block;background:#8A9199;padding:18px 0 28px}

#printdoc{
  --p-navy:#00172D;
  --p-blue:#0069B3;
  --p-green:#95C13D;
  --p-red:#C1121C;
  --p-grey:#6C6C6C;
  --p-rule:#B9C0C6;
  --p-rule2:#DDE1E4;
  --p-tint:#EDF3F8;
  --p-mono:"IBM Plex Mono",ui-monospace,"Consolas","DejaVu Sans Mono",monospace;
  --p-sans:"IBM Plex Sans","Segoe UI",-apple-system,Arial,sans-serif;
}
#printdoc *{box-sizing:border-box;margin:0;padding:0}

/* ---------- Blatt ---------- */
#printdoc .sheet{
  width:210mm;min-height:297mm;
  margin:0 auto;padding:13mm 14mm 10mm;
  background:#fff;color:#111;position:relative;
  display:flex;flex-direction:column;
  font-family:var(--p-sans);font-size:8.6pt;line-height:1.34;
  text-align:left;letter-spacing:normal;
}
#printdoc[data-preview="1"] .sheet{box-shadow:0 2px 14px rgba(0,0,0,.28)}
#printdoc[data-preview="1"] .sheet + .sheet{margin-top:14px}

/* ---------- Kopf ---------- */
#printdoc .dochead{display:flex;align-items:flex-start;justify-content:space-between;gap:10mm}
#printdoc .dochead .wm,#printdoc .dochead .wt{font-size:12.5pt;font-weight:700;
  color:var(--p-blue);line-height:1.15;letter-spacing:-.005em}
#printdoc .dochead .sub{font-size:7pt;letter-spacing:.13em;text-transform:uppercase;
  color:var(--p-grey);font-weight:600;margin-top:1.4mm}
#printdoc .dochead .logo{height:9mm;width:auto;display:block;margin-top:.5mm}
/* Auslegung als eigener Badge: sitzt zwischen Titel und Logo und ist durch
   align-self:center hoehenneutral — der Kopf ist ohnehin hoeher als der Badge,
   Variante A bleibt damit eine Seite. */
#printdoc .dochead .auslegung{
  align-self:center;flex:0 0 auto;
  border:.9pt solid var(--p-blue);background:var(--p-tint);color:var(--p-navy);
  padding:1.2mm 3mm;font-size:8.4pt;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;
}

/* ---------- Blaubalken ---------- */
#printdoc .bar{
  margin-top:2.6mm;background:var(--p-blue);color:#fff;
  padding:1.5mm 3mm;display:flex;justify-content:space-between;
  align-items:baseline;gap:6mm;font-size:8.6pt;font-weight:600;letter-spacing:.02em;
}
#printdoc .bar .r{font-weight:600;font-family:var(--p-mono);font-size:8.6pt}
#printdoc .bar.sec{margin-top:4.4mm;font-size:7.6pt;letter-spacing:.13em;
  text-transform:uppercase;padding:1.3mm 3mm}
#printdoc .bar.sec .r{font-size:7.2pt;letter-spacing:.08em;font-family:var(--p-sans);
  text-transform:none;font-weight:500;opacity:.92}

/* ---------- Werkstoff-Rahmen ---------- */
#printdoc .matbox{border:.9pt solid var(--p-blue);border-top:0;display:flex;align-items:stretch}
#printdoc .matbox .nr{
  padding:1.8mm 3mm;font-size:14pt;font-weight:700;color:var(--p-red);
  font-family:var(--p-mono);letter-spacing:-.01em;white-space:nowrap;
  border-right:.6pt solid var(--p-rule);display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;
}
/* Zweitnorm unter der Werkstoffnummer — der Ausdruck wandert zum Kunden und
   muss beide Bezeichnungen tragen. */
#printdoc .matbox .nr .us{font-size:8pt;font-weight:600;color:var(--p-navy);
  font-family:var(--p-sans,inherit);letter-spacing:0;margin-top:.5mm;
  display:flex;align-items:baseline;gap:1.6mm}
#printdoc .matbox .nr .us i{font-style:normal;font-size:6.4pt;letter-spacing:.11em;
  text-transform:uppercase;color:var(--p-grey);font-weight:600}
#printdoc .matbox .rest{display:flex;flex:1;min-width:0}
#printdoc .matbox .rest > div{padding:1.5mm 3mm;flex:1;min-width:0;
  border-right:.5pt solid var(--p-rule2)}
#printdoc .matbox .rest > div:last-child{border-right:0}
/* Die Werkstoffzeile traegt Nummer + Norm (+ alte Norm) und bekommt deshalb
   doppelte Spaltenbreite — sonst schneidet das text-overflow sie ab. */
#printdoc .matbox .rest > div.w2{flex:2}
#printdoc .matbox .k{font-size:6.4pt;letter-spacing:.11em;text-transform:uppercase;
  color:var(--p-grey);font-weight:600}
#printdoc .matbox .v{font-size:9pt;font-weight:600;color:var(--p-navy);margin-top:.3mm;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Label/Wert-Listen ---------- */
#printdoc .cols{display:grid;grid-template-columns:1fr 1fr;gap:0 8mm;margin-top:1mm}
#printdoc .cols.c3{grid-template-columns:1fr 1fr 1fr}
#printdoc .grp{margin-top:2.6mm}
#printdoc .grp.tight{margin-top:1.4mm}
#printdoc .grp > h3{
  margin:0 0 .8mm;font-size:6.8pt;letter-spacing:.14em;text-transform:uppercase;
  color:var(--p-navy);font-weight:700;border-bottom:.6pt solid var(--p-rule);
  padding-bottom:.7mm;
}
#printdoc .lv{display:flex;justify-content:space-between;align-items:baseline;gap:3mm;
  padding:1.25mm 0;border-bottom:.5pt dotted var(--p-rule2)}
#printdoc .lv .k{font-size:8pt;color:var(--p-blue);white-space:nowrap}
#printdoc .lv .v{font-size:8.8pt;font-weight:600;color:var(--p-navy);text-align:right}
#printdoc .lv .v .u{font-size:7pt;font-weight:400;color:var(--p-grey);margin-left:.7mm}
#printdoc .lv .v.mn{font-family:var(--p-mono);font-variant-numeric:tabular-nums}
#printdoc .lv .v.na{font-weight:400;color:var(--p-grey)}

/* offene Punkte: im Druck neutral, in der Vorschau markiert */
#printdoc .open{font-weight:400;color:var(--p-grey)}
#printdoc[data-marks="1"] .open{color:#8A6D1F;background:#FFF8E6;
  border-bottom:.5pt dotted #C9A227;padding:0 1mm}

/* ---------- Parametermatrix ---------- */
#printdoc table.t{width:100%;border-collapse:collapse;font-size:8.4pt}
#printdoc table.t th,#printdoc table.t td{padding:1.5mm 2.6mm;
  border-bottom:.5pt solid var(--p-rule2);text-align:right;
  font-variant-numeric:tabular-nums}
#printdoc table.t thead th{
  border-bottom:.9pt solid var(--p-navy);background:var(--p-tint);
  font-size:7pt;letter-spacing:.05em;color:var(--p-navy);font-weight:700;
  line-height:1.25;vertical-align:bottom;
}
#printdoc table.t th.k1,#printdoc table.t td.k1{text-align:left;white-space:nowrap}
#printdoc table.t td.k1{color:var(--p-blue);font-weight:400;font-family:var(--p-sans)}
#printdoc table.t td.k1 .u{color:var(--p-grey);font-size:7pt;margin-left:.8mm}
#printdoc table.t td{font-family:var(--p-mono);font-weight:600;color:var(--p-navy)}
#printdoc table.t tbody tr.big td{font-size:11pt;padding:1.9mm 2.6mm}
#printdoc table.t tbody tr:last-child td{border-bottom:.9pt solid var(--p-navy)}
#printdoc table.t td.txt{font-family:var(--p-sans);font-weight:600}
#printdoc table.t td.dash{font-family:var(--p-sans);font-weight:400;color:var(--p-grey)}
#printdoc table.t .rec{background:var(--p-tint);
  box-shadow:inset 2pt 0 0 var(--p-green),inset -2pt 0 0 var(--p-green)}
#printdoc table.t thead th.rec{box-shadow:inset 2pt 0 0 var(--p-green),
  inset -2pt 0 0 var(--p-green)}
#printdoc .recflag{display:block;font-size:5.9pt;letter-spacing:.1em;color:#4C6B10;
  font-weight:700;margin-top:.4mm}
#printdoc .coat{height:7.5pt;width:auto;vertical-align:-.8pt;margin-left:.8mm}
#printdoc .sub2{display:block;font-size:6.4pt;font-weight:400;color:var(--p-grey);
  font-family:var(--p-sans);margin-top:.3mm}

/* ---------- Bestellblock ---------- */
#printdoc .order{display:grid;grid-template-columns:1.4fr 1fr 1fr;
  border:.9pt solid var(--p-navy);margin-top:1.4mm}
#printdoc .order.o2{grid-template-columns:1fr 1.6fr}
#printdoc .vfnote{font-size:7.4pt;line-height:1.4;margin-top:1.6mm;color:#9a5b00}
#printdoc .order > div{padding:2.2mm 3mm;border-right:.5pt solid var(--p-rule)}
#printdoc .order > div:last-child{border-right:0}
#printdoc .order .k{font-size:6.4pt;letter-spacing:.11em;text-transform:uppercase;
  color:var(--p-grey);font-weight:600}
#printdoc .order .v{font-family:var(--p-mono);font-weight:700;margin-top:.9mm;
  color:var(--p-navy);font-size:12.5pt;letter-spacing:.02em;
  word-break:break-all;line-height:1.15}
#printdoc .order .v.sm{font-size:9pt;font-weight:600;letter-spacing:0;word-break:normal}
#printdoc .order .v.na{font-family:var(--p-sans);font-size:9pt;font-weight:400;
  color:var(--p-grey)}

/* ---------- Hinweise ---------- */
#printdoc ul.notes{margin:1.4mm 0 0;padding:0;list-style:none}
#printdoc ul.notes li{position:relative;padding:1.2mm 0 1.2mm 5mm;font-size:7.8pt;
  border-bottom:.5pt dotted var(--p-rule2)}
#printdoc ul.notes li::before{content:"";position:absolute;left:1.4mm;top:2.5mm;
  width:1.6mm;height:1.6mm;background:var(--p-blue)}
#printdoc ul.notes li.w::before{background:var(--p-red)}

/* ---------- Ausfuellfelder ---------- */
#printdoc .fillin{display:inline-block;min-width:26mm;
  border-bottom:.6pt solid var(--p-rule);height:3.2mm}
#printdoc .notepad{border:.6pt solid var(--p-rule);padding:2mm 3mm 1mm;margin-top:1.6mm}
#printdoc .notepad .cap{font-size:6.4pt;letter-spacing:.11em;text-transform:uppercase;
  color:var(--p-grey);font-weight:600}
#printdoc .notepad .lines{margin-top:.8mm}
#printdoc .notepad .lines i{display:block;border-bottom:.5pt solid var(--p-rule2);height:6mm}

/* ---------- Fussapparat ---------- */
#printdoc .docfoot{margin-top:auto;padding-top:2.4mm;border-top:1.1pt solid var(--p-navy)}
#printdoc .docfoot.slim{border-top:.6pt solid var(--p-rule);padding-top:2mm}
#printdoc .footline{display:flex;align-items:center;gap:2.5mm;margin-bottom:1.4mm}
#printdoc .footline .c{font-size:8pt;font-weight:700;color:var(--p-navy)}
#printdoc .footline img{height:4.4mm;width:auto}
/* Piktogramm-Spalte traegt seit 14.09. VIER Zeichen (M004/M009/M003/M014):
   4 x 15mm + 3 x 2,5mm Luecke = 67,5mm. Bei den alten 36mm liefen die
   Flex-Kinder nach links aus der Spalte in den Fliesstext. */
#printdoc .footgrid{display:grid;grid-template-columns:1fr 68mm;gap:6mm;align-items:end}
#printdoc .footgrid .txt{font-size:6.5pt;color:var(--p-grey);line-height:1.42}
#printdoc .footgrid .txt .lead{color:#111;font-size:7pt;margin-bottom:1.2mm}
#printdoc .footgrid .txt h4{margin:0 0 .6mm;font-size:6.8pt;color:var(--p-navy);
  letter-spacing:.1em;text-transform:uppercase}
#printdoc .footgrid .txt .addr{margin-top:1.4mm;font-family:var(--p-mono);
  font-size:6.4pt;color:#111}
#printdoc .picto{display:flex;gap:2.5mm;justify-content:flex-end;align-items:flex-end}
#printdoc .picto figure{margin:0;text-align:center;width:15mm}
#printdoc .picto svg{width:12.5mm;height:12.5mm;display:block;margin:0 auto}
#printdoc .picto figcaption{font-size:5.6pt;letter-spacing:.06em;color:var(--p-grey);
  margin-top:.8mm;text-transform:uppercase;font-weight:600}
#printdoc .pgnum{margin-top:1.6mm;font-family:var(--p-mono);font-size:6.4pt;
  color:var(--p-grey);text-align:right}

/* ============================================================
   DRUCK — nur das Blatt, nichts von der App
   ============================================================ */
@page{size:A4 portrait;margin:0}
@media print{
  html,body{background:#fff!important}
  body > *{display:none!important}
  /* [data-preview] mitselektieren — sonst gewinnt die spezifischere
     Vorschau-Regel und druckt grauen Hintergrund + Padding mit
     (kippte die Fusszeile auf eine zweite Seite) */
  body > #printdoc,#printdoc[data-preview="1"]{
    display:block!important;background:none!important;padding:0!important}
  #printdoc .sheet,#printdoc[data-preview="1"] .sheet{
    margin:0;width:210mm;height:297mm;min-height:297mm;
    box-shadow:none;break-after:page;page-break-after:always}
  #printdoc .sheet:last-of-type,
  #printdoc[data-preview="1"] .sheet + .sheet{margin-top:0}
  #printdoc .sheet:last-of-type{break-after:auto;page-break-after:auto}
  #printdoc .bar,#printdoc table.t thead th,#printdoc table.t .rec,
  #printdoc .matbox,#printdoc .picto svg{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  #printdoc .grp,#printdoc .order,#printdoc table.t,#printdoc .notepad{break-inside:avoid}
}