{# Bildschirm- und Druck-CSS, das sich die drei Fluss-Dokumente teilen
   (Projektprotokoll, Container-Ausdruck, Anlagen-Strukturbericht).

   Frueher die Python-Konstante _PDF_SHARED_CSS, per
   .replace('__PDF_SHARED_CSS__', ...) in jede Vorlage gegossen. Jetzt ein
   include — derselbe Text an derselben Stelle, aber ohne den Umweg ueber ein
   Python-String-Literal.

   Das Formblatt bindet das hier bewusst NICHT ein: es ist A4 quer mit
   gemessenem Seitenumbruch und ein in sich geschlossenes Dokument
   (docs/formblatt_druck_plan.md §2a). #}
  /* ── Reset ── */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* Derselbe Grundton wie beim Formblatt (#eef1f5). Vorher war er hier eine
     Spur dunkler (#e8edf2) als die Leiste, die sich dadurch als hellere
     Bande abhob — dieselbe Leiste wirkte auf den beiden Seiten verschieden. */
  body { font-family: Arial, Helvetica, sans-serif; color: #1e293b; background: #eef1f5; }

  /* ── Screen: centered page wrapper ──
     Die Bildschirmleiste steht seit §2c in _leiste.css.html und ist `sticky`
     statt `fixed` — der Seitenhuelle fehlt deshalb der obere Abstand, der
     frueher unter der schwebenden Leiste liegen musste. */
  @media screen {
    /* Die Spaltenbreite fuer die Bildschirmleiste: Blatt + 2x20px Innenabstand
       (_leiste.css.html). Wer .page breiter macht, zieht sie hier mit. */
    :root { --leiste-breite: 860px; }
    .page {
      background: white; max-width: 820px; margin: 0 auto 3rem auto;
      /* Derselbe Schattenwurf wie beim Blatt des Formblatts. */
      padding: 2.5rem; box-shadow: 0 3px 14px rgba(15,23,42,.14);
    }
  }

  /* ── Print: colours, hide chrome, collapse page wrapper ── */
  @media print {
    body { background: white; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .page { margin: 0; padding: 0; box-shadow: none; max-width: none; }
  }
  /* ── Document header ── */
  .doc-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding-bottom: 1rem; border-bottom: 3px solid #1e3a5f; margin-bottom: 1.5rem;
  }
  .doc-title  { font-size: 20px; font-weight: 900; color: #1e3a5f; letter-spacing: 0.04em; }
  .doc-subtitle { font-size: 11px; color: #64748b; margin-top: 0.2rem; }
  .doc-meta   { text-align: right; }
  .meta-grid  { display: grid; grid-template-columns: auto auto; gap: 0.1rem 1rem; margin-top: 0.5rem; }
  .meta-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; text-align: right; }
  .meta-value { font-size: 10.5px; font-weight: 600; color: #1e293b; }

  /* ── Section divider ── */
  .section-title {
    font-size: 7.5pt; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin: 14px 0 5px; padding-bottom: 3px; border-bottom: 1px solid #e2e8f0;
  }

  /* ── Page footer ── */
  .doc-footer {
    margin-top: 2rem; padding-top: 0.75rem; border-top: 1px solid #e2e8f0;
    display: flex; justify-content: space-between; font-size: 9px; color: #94a3b8;
  }