/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   DRUCK — das Blatt Papier. Gilt nur beim Drucken (Cmd+P, „Als PDF
   sichern") und macht aus einer Bildschirmseite einen sauberen Ausdruck:
   A4 hochkant mit 15 mm Rand, Inhalt auf 180 mm Breite, weißer Grund auch
   aus der dunklen Welt, Papier-Typografie, Umbruch-Schutz, Tabellenkopf auf
   jeder Seite. Navigation, Knöpfe, Schalter, Umschalter und Meldungen
   bleiben weg.

   Einbinden als LETZTES Stylesheet, nach dem eigenen CSS des Werkzeugs:
       <link rel="stylesheet" href="css/druck.css">
   Media-Queries erhöhen die Spezifität nicht: Bei Gleichstand gewinnt die
   später geladene Regel, und eine verlorene Druckregel fällt am Bildschirm
   nicht auf. Im Abo steht die Datei unter "bausteine", damit sie eine
   eigene Datei bleibt.

   Klassen für das Werkzeug:
       .nur-druck      erscheint nur auf Papier (Briefkopf, Fußzeile)
       .nur-schirm     erscheint nur am Bildschirm
       .druck-satz     ein Bereich in Blattbreite, wenn nicht body > main druckt
       .druck-block    bleibt auf einer Seite zusammen (Karte, Legende)
       .druck-teilbar  darf umbrechen, etwa eine Karte mit langer Tabelle
       .druck-fluss    Flex- oder Grid-Kasten, der auf Papier umbrechen darf
       .druck-kopf     Titel (.titel) und Unterzeile (.sub) eines Blatts
       .zahl           rechtsbündige Zahlenspalte
   Querformat setzt das Werkzeug selbst: @page { size: 297mm 210mm; }
   Was gedruckt wird und wie ein Bericht aufgebaut ist, entscheidet das
   Werkzeug; dieser Baustein liefert die Physik des Papiers. */

/* Am Bildschirm unsichtbar, was nur aufs Papier gehört. */
.nur-druck { display: none; }

@media print {

  /* Explizite Maße statt `A4`: das Signal, das WebKit versteht. */
  @page { size: 210mm 297mm; margin: 15mm; }

  /* Die feste Breite in Millimetern: Safari verkleinert zu breiten Inhalt
     nicht, es schneidet ihn ab. 180 mm = 210 mm Blatt minus zweimal Rand. */
  html, body { background: #fff !important; }
  body > main, .druck-satz {
    max-width: 180mm;
    margin: 0 auto;
  }

  /* Umbruch-Schutz nur, wo etwas wirklich zusammengehört: Eine lange
     Tabelle muss umbrechen dürfen, sonst wandert sie als Ganzes auf die
     nächste Seite und lässt eine halbe Seite weiß. WebKit hält den Schutz
     nur auf Block-Boxen ein, nicht auf Flex- oder Grid-Kindern. */
  .druck-block, figure, .karte, .kachel {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .druck-teilbar {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }
  tr { break-inside: avoid; page-break-inside: avoid; }

  /* WebKit paginiert nicht innerhalb von Flex und Grid; der Kasten wandert
     als Ganzes. Als Block darf er umbrechen, der Abstand ersetzt das gap. */
  .druck-fluss {
    display: block !important;
  }
  .druck-fluss > * + * {
    margin-top: var(--abstand-16, 16px);
  }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* Farben werden gedruckt: Statuspunkte und Diagramme lassen Browser sonst
     als Tintensparer weg. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Papier-Typografie: feste Grautöne statt Rollen, denn Papier ist immer
     hell. Grade in Pixeln, weil Browser beim Drucken mit 96 dpi rechnen. */
  html, body {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 10.5px;
    line-height: 1.45;
    color: #18181b;
  }
  h1 { font-size: 20px;   font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
  h2 { font-size: 12px;   font-weight: 600; margin: 12px 0 5px; }
  h3 { font-size: 10.5px; font-weight: 600; color: #52525b; margin: 12px 0 5px; }
  p  { margin: 0 0 7px; color: #3f3f46; }
  h1, h2, h3 { border-bottom: 0 !important; }

  /* Der Kopf eines Blatts. */
  .druck-kopf { margin-bottom: 12px; }
  .druck-kopf .titel { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
  .druck-kopf .sub   { font-size: 10px; color: #71717a; margin-top: 3px; }

  /* Tabellen: kompakt, Kopf in Versalien; table-header-group wiederholt den
     Kopf auf jeder Seite. */
  table { width: 100%; border-collapse: separate; border-spacing: 0; }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  th {
    text-align: left;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #71717a;
    padding: 4px 6px;
    border-bottom: 1px solid #e4e4e7;
  }
  td {
    padding: 4px 6px;
    border-bottom: 1px solid #f4f4f5;
    font-variant-numeric: tabular-nums;
  }
  tr:last-child td { border-bottom: 0; }
  .zahl, td.zahl { text-align: right; }

  /* Was nicht aufs Papier gehört: die Bedienung, auch Suche und Filter
     über einer Tabelle. */
  .nur-schirm,
  nav, button, .btn, .btn-primaer, .btn-leise, .btn-gefahr,
  .umschalter, .meldungen-oben, .meldungen-unten, .schalter,
  .tabellen-leiste, .suche-huelle { display: none !important; }
  .nur-druck { display: block !important; }
  /* Eine scrollende Tabellen-Hülle bricht nicht um — auf Papier scrollt nichts. */
  .tabelle-huelle { overflow: visible !important; background: none !important; }
  * { box-shadow: none !important; }
  a { text-decoration: none; color: inherit; }
}