/* Druckvorlagen (nummix-online#272): gemeinsame Gestaltung – eckig, Spielsteine, farbige Eck-Dreiecke wie auf nummix.de.
   Bildschirm: Blatt mit Hinweisleiste; Druck: genau eine A4-Seite. */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-next-latin.woff2") format("woff2"); font-weight: 200 800; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif; color: #1d1d1b; background: #f2f2f1; line-height: 1.4; }
.hinweis-druck { max-width: 190mm; margin: 6mm auto; font-size: 14px; color: #3c4043; background: #fff; border: 1px dashed #bbb; padding: 10px 14px; }
.hinweis-druck a { color: #196a97; font-weight: 700; }
.blatt { position: relative; width: 210mm; min-height: 297mm; margin: 0 auto 10mm; background: #fff; padding: 14mm; box-shadow: 0 4px 20px rgba(0, 0, 0, .12); overflow: hidden; }
.quer .blatt { width: 297mm; min-height: 210mm; }
.ecke { position: absolute; width: 14mm; height: 14mm; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.e1 { left: 3mm; top: 3mm; background: #36a9e1; --m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><polygon points='6,6 34,6 6,34' fill='%23000' stroke='%23000' stroke-width='8' stroke-linejoin='round'/></svg>"); }
.e2 { right: 3mm; top: 3mm; background: #e94e1b; --m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><polygon points='6,6 34,6 34,34' fill='%23000' stroke='%23000' stroke-width='8' stroke-linejoin='round'/></svg>"); }
.e3 { right: 3mm; bottom: 3mm; background: #f9b233; --m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><polygon points='34,6 34,34 6,34' fill='%23000' stroke='%23000' stroke-width='8' stroke-linejoin='round'/></svg>"); }
.e4 { left: 3mm; bottom: 3mm; background: #1d1d1b; --m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><polygon points='6,6 34,34 6,34' fill='%23000' stroke='%23000' stroke-width='8' stroke-linejoin='round'/></svg>"); }
.streifen { display: flex; height: 2mm; margin: 3mm 0 5mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.streifen span { flex: 1; } .streifen span:nth-child(1) { background: #36a9e1; } .streifen span:nth-child(2) { background: #e94e1b; } .streifen span:nth-child(3) { background: #f9b233; } .streifen span:nth-child(4) { background: #1d1d1b; }
.kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 6mm; }
.kopf img.logo { height: 10mm; }
h1 { font-size: 26px; margin: 0; line-height: 1.15; }
h2 { font-size: 16px; margin: 4mm 0 1.5mm; text-transform: uppercase; letter-spacing: .06em; }
p, li, td, th { font-size: 13px; }
.klein { font-size: 11px; color: #5f6368; }
.zeile { border-bottom: .3mm solid #1d1d1b; min-height: 8mm; }
.feld { display: flex; gap: 2mm; align-items: flex-end; font-size: 13px; } .feld span { flex: 1; border-bottom: .3mm solid #1d1d1b; min-height: 7mm; }
.felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm 6mm; margin: 2mm 0 4mm; }
/* Spielsteine */
.steine { display: inline-flex; gap: 1mm; vertical-align: middle; }
.st { display: inline-grid; place-items: center; width: 7.5mm; height: 7.5mm; border: .5mm solid #1d1d1b; border-radius: 1mm; background: #fff; font-weight: 800; font-size: 12px; line-height: 1; }
.st.b { color: #1c75a6; } .st.r { color: #c63f12; } .st.g { color: #b07800; } .st.s { color: #1d1d1b; }
.st.j { background: linear-gradient(135deg, #36a9e1 50%, #e94e1b 50%); border-color: #1d1d1b; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.st.leer { border-style: dashed; color: transparent; }
.qr { width: 30mm; height: 30mm; display: block; }
.qr-box { display: flex; gap: 3mm; align-items: center; } .qr-box p { margin: 0; }
table.raster { border-collapse: collapse; width: 100%; }
table.raster th, table.raster td { border: .3mm solid #1d1d1b; height: 10mm; padding: 1mm 2mm; text-align: center; }
table.raster th { background: #f2f2f1; font-size: 11px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
table.raster td.name { text-align: left; width: 55mm; }
@media print {
  body { background: #fff; }
  .hinweis-druck { display: none; }
  .blatt { margin: 0; box-shadow: none; width: auto; min-height: 0; height: 296mm; padding: 12mm; }
  .quer .blatt { width: auto; height: 209mm; }
}