/* ==========================================================================
   Drucken und "Als PDF sichern"

   Eigene Datei seit 27.09.2026, und zwar aus einem Grund, der nichts mit
   Ordnung zu tun hat: Eingebunden ist sie mit media="print", und solche
   Stylesheets halten das Zeichnen der Seite NICHT auf. In sections.css
   standen diese 5,8 KB im Weg, obwohl sie nur der Drucker je sieht -
   gemessen 44 ms frueher First Contentful Paint auf einem gedrosselten
   Handy, geschenkt.

   Das @media print unten drin bleibt trotzdem stehen. Doppelt gemoppelt,
   aber so wirkt die Datei auch dann richtig, wenn sie jemand spaeter ohne
   media-Angabe einbindet.
   ========================================================================== */

/* ==========================================================================
   Drucken und "Als PDF sichern"
   Angelegt 27.09.2026.

   Warum das noetig war: Ohne diese Regeln kam aus dem Drucker eine
   schwarze Seite mit weisser Schrift - eine halbe Patrone fuer eine
   Preistabelle. Schlimmer noch war ein zweiter Punkt, der erst beim
   Nachsehen auffiel: .js .reveal steht auf opacity 0, bis der Abschnitt
   einmal im Bild war. Wer die Seite oeffnet und sofort druckt, bekam
   deshalb LEERE Abschnitte. Beides ist hier behoben.

   Gedacht ist das vor allem fuer die Preistabelle: Die wird ausgedruckt,
   in die Werkstatt gelegt oder als PDF weitergeschickt.

   Die aufgeklappten FAQ-Antworten macht das CSS nicht auf - ein
   geschlossenes <details> blendet seinen Inhalt ueber den Browser selbst
   aus, da kommt eine Regel nicht zuverlaessig dran. Das erledigt
   site.js beim beforeprint-Ereignis.
   ========================================================================== */

@media print {

  /* ---- Farben umdrehen --------------------------------------------------
     Alles laeuft ueber die Tokens, deshalb genuegt es, sie hier neu zu
     setzen: der Rest der Seite zieht automatisch nach. */
  :root {
    /* Gegenstueck zu color-scheme: dark in tokens.css, sonst druckt der
       Browser Kaestchen und Felder dunkel. */
    color-scheme: light;

    --bg: #ffffff;
    --bg-deep: #ffffff;
    --surface: #ffffff;
    --surface-2: #ffffff;

    --text: #000000;
    --text-body: #1a1a1a;
    --text-muted: #444444;

    --line: #c4c4c4;
    --line-strong: #000000;
    --stripe: #000000;
    --overlay: transparent;

    --section: 1.5rem;
  }

  html,
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  /* ---- Alles ausblenden, was auf Papier keinen Sinn ergibt -------------- */
  .announce,
  .site-header,
  .drawer,
  .mobilebar,
  .sprung,
  .stripe,
  .banner,
  .hero-dust,
  .hero-beam,
  .hero-sheen,
  .hero-grain,
  .hero-film,
  .lightbox,
  .skip-link,
  .service-arrow,
  .footer-social,
  .footer-wordmark,
  .contact-actions,
  .vorlage,
  #cookie-banner,
  #consent-modal {
    display: none !important;
  }

  /* ---- Die leeren Abschnitte -------------------------------------------
     Die Reihenfolge ist hier nicht beliebig, und das kostete eine
     Viertelstunde Suche:

     Erst muessen die Uebergaenge weg, DANN wirkt die opacity. Ein
     laufender CSS-Uebergang steht in der Kaskade naemlich ueber allem,
     auch ueber !important. Beim Umschalten auf Druck startete .reveal
     deshalb brav einen 0,7-Sekunden-Uebergang von 0 nach 1 - und der
     Drucker nimmt sein Bild sofort auf, also beim Stand "fast noch 0".
     Ergebnis war eine blasse bis leere Seite, obwohl die Regel darunter
     goldrichtig war.

     Gemessen: ohne die erste Regel blieben 9 von 10 Abschnitten auf
     opacity 0, mit ihr sind es 0 von 10. */
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ---- Platz zurueckgeben ------------------------------------------------
     Die Seite haelt oben Platz fuer den mitlaufenden Header frei. Auf
     Papier gibt es den nicht. */
  body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  main {
    margin: 0 !important;
    padding: 0 !important;
  }

  .section {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }

  .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  /* ---- Schrift ----------------------------------------------------------
     Auf Papier liest sich eine Serifenlose in 11pt besser als der grosse
     Bildschirmsatz, und es passt deutlich mehr auf ein Blatt. */
  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 12pt; }

  h1, h2, h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }

  /* ---- Die Preistabelle, der eigentliche Grund fuer all das ------------- */
  .preis-wrap {
    overflow: visible !important;
    border: 0;
  }

  .preis-tabelle {
    border-collapse: collapse;
    width: 100%;
    font-size: 10pt;
  }

  .preis-tabelle th,
  .preis-tabelle td {
    border-bottom: 1px solid #999999;
    padding: 0.35rem 0.5rem;
  }

  .preis-tabelle thead th {
    border-bottom: 2px solid #000000;
  }

  /* Eine Zeile darf nicht ueber den Seitenwechsel zerrissen werden. */
  .preis-tabelle tr,
  .faq-item,
  .zz-item,
  figure {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Der Tabellenkopf wiederholt sich auf jeder Seite. */
  thead {
    display: table-header-group;
  }

  /* ---- Bilder ----------------------------------------------------------- */
  img {
    max-width: 100% !important;
    max-height: 9cm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ---- Links ------------------------------------------------------------
     Auf Papier ist ein Link ohne Adresse wertlos. Aber nur bei Links nach
     draussen und im Fliesstext - eine Adresse hinter jedem Menuepunkt waere
     nur Krimskrams. */
  .wissen a[href^="http"]::after,
  .wissen a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555555;
    word-break: break-all;
  }

  a {
    color: #000000 !important;
    text-decoration: underline;
  }

  /* ---- Wer hat das gedruckt? --------------------------------------------
     Steht einmal ganz oben auf dem Ausdruck. Ein Blatt mit Preisen, das
     drei Wochen spaeter in der Werkstatt liegt, soll noch verraten,
     von wem es ist. */
  main::before {
    content: "KNS Beschichtung · 04741 Roßwein, Sachsen · 0176 82211459 · www.kns-beschichtung.de";
    display: block;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #000000;
    font-size: 9pt;
    letter-spacing: 0.04em;
    color: #000000;
  }

  @page {
    margin: 1.6cm 1.4cm;
  }
}