/* florianmuff.tech: Vorlagen (Checklisten, Notfallpläne)
 * Ergänzt site.css. Bildschirm: weisses Blatt (.page.paper) auf hellem Grund.
 * Druck: A4, schwarz-weiss tauglich, ohne Header/Footer/Druckknopf.
 * Nur Variablen aus site.css verwenden.
 */

/* ── Bildschirm: Rahmen um das Blatt ───────────────── */
.vorlage-bar {
  max-width: 210mm; margin: 0 auto; padding: 24px 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
}
.vorlage-hint {
  max-width: 210mm; margin: 0 auto; padding: 28px 0 8px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px;
  font-size: 17px; color: var(--ink-2);
}
.vorlage-hint p { margin: 0; }

/* ── Das Blatt ─────────────────────────────────────── */
.page {
  max-width: 210mm; margin: 0 auto; padding: 14mm 16mm 12mm;
  color: var(--ink); font-size: 16px; line-height: 1.5;
}
.page .header {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px;
  border-bottom: 3px solid var(--ink); padding-bottom: 16px; margin-bottom: 28px;
}
.page .header-left { flex: 1 1 340px; min-width: 0; }
.page .header-right { flex: 0 0 auto; }
.page .tag { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 4px; }
.page .title { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 4vw, 38px); line-height: 1.12; letter-spacing: -0.01em; }
.page .subtitle { margin-top: 6px; font-size: 17px; color: var(--ink-2); }
.page .header-right { text-align: right; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.page .header-right strong { color: var(--ink); font-size: 15px; }

.page .section { padding: 0; margin-bottom: 32px; }
.page .section-title {
  font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.25;
  border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin: 0 0 16px;
}

/* Felder und Schreiblinien */
.page .field-row { margin-bottom: 18px; }
.page .field-label { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
.page .field-line { border-bottom: 1.5px solid var(--ink-3); height: 36px; width: 100%; }
.page .field-box { border: 1.5px solid var(--ink-3); border-radius: 2px; min-height: 72px; width: 100%; }
.page .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.page .three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 20px; }

/* Checkboxen */
.page .check-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; font-size: 16px; line-height: 1.45; }
.page .box {
  display: inline-block; width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
  border: 2px solid var(--ink); border-radius: 2px; background: var(--white);
}

/* Hinweise: ganze Umrandung, kein Farbbalken */
.page .info, .page .warn, .page .danger {
  padding: 12px 16px; margin-bottom: 16px; font-size: 15px; line-height: 1.5; border-radius: 4px;
}
.page .info { background: var(--paper); border: 1px solid var(--line-strong); color: var(--ink-2); }
.page .warn { background: var(--white); border: 2px solid var(--ink-3); }
.page .danger { background: var(--white); border: 2px solid var(--red-ink); }
.page .info strong, .page .warn strong { color: var(--ink); }
.page .danger strong { color: var(--red-ink); }

/* Fliesstext-Block und Muster (Mail-Beispiele) */
.page .text-block { font-size: 16px; line-height: 1.6; margin-bottom: 16px; }
.page .sample { border: 1.5px solid var(--line-strong); background: var(--paper); padding: 14px 18px; font-size: 15px; line-height: 1.7; border-radius: 4px; }
.page .sample--alert { border-color: var(--red-ink); background: var(--white); }
.page .sample-rule { border: 0; border-top: 1px solid var(--line-strong); margin: 12px 0; }
.page .sample-meta { color: var(--ink-3); font-size: 13px; }
.page .alert-ink { color: var(--red-ink); }

/* Tabellen */
.page table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 15px; }
.page th {
  background: var(--paper); color: var(--ink); text-align: left; font-weight: 700; font-size: 14px;
  padding: 8px 10px; border: 1px solid var(--line-strong); border-bottom: 2px solid var(--ink);
}
.page td { border: 1px solid var(--line-strong); padding: 8px 10px; vertical-align: top; }
.page td.write { height: 40px; }
.page .muted-cell { color: var(--ink-3); }
.page .verdict { font-weight: 700; white-space: nowrap; }
.page .verdict--ja::before { content: "\2713\00a0"; }
.page .verdict--nein { color: var(--red-ink); }
.page .verdict--nein::before { content: "\2717\00a0"; }
.page .verdict--pruefen::before { content: "!\00a0"; }

/* Unterschriften */
.page .two-sig { display: flex; flex-wrap: wrap; gap: 24px 64px; }
.page .sig-line { border-bottom: 1.5px solid var(--ink-3); margin-top: 48px; width: 260px; max-width: 100%; display: inline-block; }
.page .sig-label { font-size: 13px; color: var(--ink-3); margin-top: 4px; }

/* Fuss des Blatts */
.page .footer {
  margin-top: 32px; border-top: 1px solid var(--line); padding-top: 10px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px;
  font-size: 13px; color: var(--ink-3);
}

/* ── Handy ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .page { padding: 24px 18px; }
  .page .header-right { text-align: left; }
  .page .two-col, .page .three-col { grid-template-columns: 1fr; }
  .page .table-scroll table { min-width: 560px; }
}

/* ── Druck: A4 ─────────────────────────────────────── */
@media print {
  @page { size: A4; margin: 12mm 0 14mm; }
  .vorlage-bar, .vorlage-hint, .print-btn { display: none !important; }
  main { padding: 0; }
  main > .wrap { max-width: none; padding: 0; }
  .page {
    max-width: none; margin: 0; padding: 0 15mm; border: 0; border-radius: 0; box-shadow: none;
    background: #fff; font-size: 10.5px; line-height: 1.4;
  }
  .page .header { padding-bottom: 5mm; margin-bottom: 6mm; gap: 3mm 6mm; }
  .page .tag { font-size: 9px; margin-bottom: 1px; }
  .page .title { font-size: 21px; }
  .page .subtitle { font-size: 11px; margin-top: 2px; }
  .page .header-right { font-size: 9px; line-height: 1.6; }
  .page .header-right strong { font-size: 11px; }
  .page .section { margin-bottom: 6mm; }
  .page .section-title { font-size: 13px; padding-bottom: 1.5mm; margin-bottom: 3.5mm; break-after: avoid; page-break-after: avoid; }
  .page .field-row { margin-bottom: 4mm; }
  .page .field-label { font-size: 9px; margin-bottom: 1mm; }
  .page .field-line { height: 7mm; }
  .page .field-box { min-height: 14mm; }
  .page .two-col { gap: 0 5mm; }
  .page .three-col { gap: 0 4mm; }
  .page .check-item { gap: 3mm; margin-bottom: 2.5mm; font-size: 10.5px; line-height: 1.4; }
  .page .box { width: 4mm; height: 4mm; border-width: 1.5px; margin-top: 1px; }
  .page .info, .page .warn, .page .danger { padding: 3mm 4mm; margin-bottom: 4mm; font-size: 10px; }
  .page .text-block { font-size: 10.5px; margin-bottom: 4mm; }
  .page .sample { padding: 4mm 5mm; font-size: 10.5px; background: #fff; }
  .page .sample-rule { margin: 3mm 0; }
  .page .sample-meta { font-size: 9px; }
  .page table { font-size: 10px; margin-bottom: 4mm; }
  .page th { font-size: 9.5px; padding: 2mm 3mm; background: #fff; }
  .page td { padding: 2.5mm 3mm; }
  .page td.write { height: 8mm; }
  .page .table-scroll { overflow: visible; }
  .page .sig-line { margin-top: 10mm; width: 70mm; }
  .page .sig-label { font-size: 9px; margin-top: 1mm; }
  .page .two-sig { gap: 4mm 20mm; }
  .page .footer { margin-top: 6mm; padding-top: 2.5mm; font-size: 8.5px; }
  .page tr, .page .check-item, .page .field-row, .page .info, .page .warn, .page .danger,
  .page .sample, .page .two-sig, .page .header { break-inside: avoid; page-break-inside: avoid; }
}