/* ============================================================
   print.css – Druck-Layout für klapptisch.ch
   Mit JavaScript-basiertem Wrapper (print-repeat.js):
   <thead> Logo wiederholt sich auf jeder Seite,
   <tfoot> Adresszeile wiederholt sich unten.
   Briefbogen-Hintergrund (printvorlage.png) für Seite 1.
   ============================================================ */



@media print {
  *, *::before, *::after {
    background-color: transparent !important;
  }
  html, body {
    background: #fff !important;
    background-color: #fff !important;
  }
  /* ---- 0. Seiten-Setup ---- */
  @page {
    size: A4;
    margin: 0;
  }

  /* ---- 1. Schriftart UNIVERSELL erzwingen ---- */
  *,
  *::before,
  *::after,
  html, body,
  table, thead, tbody, tfoot, tr, td, th,
  p, div, span, a, li, ul, ol,
  h1, h2, h3, h4, h5, h6,
  input, button, textarea, select {
    font-family: Arial, Helvetica, sans-serif !important;
  }

  /* ---- 2. Briefbogen als Hintergrund auf Seite 1 ---- */
  html {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body {
    background-color: #fff !important;     /* NEU – überschreibt #dce0ec aus style.css */
    background-image: url("/templates/esz-klapptisch-template_v4/img/printvorlage.png") !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 210mm 297mm !important;
    background-attachment: fixed !important;

    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;

    margin: 0 !important;
    padding: 75mm 18mm 5mm 38mm !important;
    color: #000 !important;
    font-size: 10.5pt !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
  }

  /* ---- 3. Print-Wrapper-Tabelle (von JS erzeugt) ----
     Browser wiederholen <thead> oben und <tfoot> unten auf jeder Seite. */
  #print-repeat-wrapper {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
  }

  #print-repeat-wrapper > thead,
  #print-repeat-wrapper > tfoot {
    background: transparent !important;
  }

  /* Inhaltsbereich – mit Padding, damit nicht auf Bogen läuft */
  #print-repeat-content {
    padding: 75mm 18mm 5mm 38mm !important;
    vertical-align: top !important;
  }

  /* Auf Folgeseiten reicht weniger Top-Padding (kein Briefbogen mehr).
     Hier kommt der wiederkehrende thead-Header zum Einsatz. */
  #print-repeat-wrapper > thead > tr > td {
    padding: 0 !important;
  }

  /* ---- 4. Wiederkehrender Header (Logo) ---- */
  .print-repeat-header {
    height: 22mm !important;
    background-image: url("/templates/esz-klapptisch-template_v4/img/logo_print.png") !important;
    background-repeat: no-repeat !important;
    background-position: 18mm 6mm !important;   /* etwas Innenabstand */
    background-size: auto 18mm !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Auf SEITE 1 ist der Briefbogen sichtbar – Header dort ausblenden,
     damit das Logo nicht doppelt erscheint. */
  /* (kein CSS-Selektor für "erste Seite" verfügbar – siehe Hinweis unten) */

  /* ---- 5. Wiederkehrender Footer (Adresszeile) ---- */
  #print-repeat-wrapper > tfoot > tr > td {
    padding: 0 !important;
  }

  .print-repeat-footer {
    border-top: 1px solid #772b1b !important;
    padding: 3mm 18mm 5mm 38mm !important;
    font-size: 8pt !important;
    color: #772b1b !important;
    text-align: center !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Produktblöcke nicht mitten durchschneiden */
  #print-repeat-content > * {
    page-break-inside: avoid;
  }

  /* ---- 6. Bildschirm-Chrome ausblenden ---- */
  nav.navbar,
  #header,
  #header_menu,
  #logo_wrapper,
  #background,
  #shadow,
  #menu_left,
  #dropdown_left,
  #infobox,
  #myModal,
  .print-icon,
  .icons,
  .navbar,
  .navbar-toggle,
  a.product_details,
  .fa.fa-print,
  .glyphicon-th-list {
    display: none !important;
  }

  /* ---- 7. Layout-Container neutralisieren ---- */
  #content_container {
    position: static !important;
    visibility: visible !important;
    width: 100% !important;
    height: auto !important;
    bottom: auto !important;
    overflow: visible !important;
    background: transparent !important;
  }

  #wrapper, #radius, #cc, #content {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  /* ---- 8. Versteckte Produktdetails einblenden ---- */
  .toggle, .product_details, div.toggle {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* ---- 9. Generisches Row/Col Verhalten ---- */
  .row {
    display: block !important;
    overflow: visible !important;
    margin: 0 0 4mm 0 !important;
    padding: 0 !important;
    clear: both !important;
  }

  .row::after {
    content: "";
    display: block;
    clear: both;
  }

  /* ---- 10. STARTSEITE (#home.categories) ---- */
  #home .row { margin-bottom: 6mm !important; text-align: center !important; }
  #home .col-md-6 {
    float: left !important;
    width: 50% !important;
    padding: 0 4mm !important;
    box-sizing: border-box !important;
    text-align: center !important;
    margin-bottom: 4mm !important;
  }
  #home table { display: inline-table !important; width: auto !important; margin: 0 auto !important; background: transparent !important; }
  #home td { vertical-align: middle !important; text-align: left !important; background: transparent !important; border: none !important; }
  #home td:first-child img { width: 28mm !important; height: auto !important; max-height: 28mm !important; object-fit: contain !important; }
  #home td:last-child img  { width: 35mm !important; height: auto !important; max-height: 18mm !important; object-fit: contain !important; margin-left: 3mm !important; }
  #home h1 { text-align: center !important; margin: 4mm 0 !important; }

  hr { border: none !important; border-top: 1px solid #772b1b !important; margin: 4mm 0 !important; }

  /* ---- 11. PRODUKTSEITEN ---- */
  .col-sm-3 { float: left !important; width: 32% !important; padding-right: 4mm !important; box-sizing: border-box !important; overflow: visible !important; }
  .col-sm-9 { float: left !important; width: 68% !important; box-sizing: border-box !important; }
  .col-sm-12 { width: 100% !important; }

  .row:has(.product_table_1),
  .row:has(.product_table_2),
  .row:has(.product_table_3) {
    page-break-inside: avoid !important;
    margin-bottom: 8mm !important;
  }

  .popup_container { width: 100% !important; max-width: 50mm !important; height: auto !important; margin-bottom: 3mm !important; overflow: visible !important; }
  .popup_container img, .col-sm-3 img:first-child {
    width: 100% !important; max-width: 50mm !important;
    height: auto !important; max-height: 50mm !important;
    object-fit: contain !important; display: block !important;
    padding: 0 !important; margin: 0 !important;
  }
  .small_image { width: 16mm !important; max-width: 16mm !important; height: 13mm !important; margin: 0 1mm 1mm 0 !important; float: left !important; overflow: hidden !important; }
  .small_image img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; }

  /* ---- 12. Typografie ---- */
  h1, h2 { font-size: 14pt !important; color: #772b1b !important; margin: 0 0 3mm 0 !important; page-break-after: avoid; }
  h3 { font-size: 12pt !important; font-weight: bold !important; color: #772b1b !important; margin: 0 0 2mm 0 !important; page-break-after: avoid; }
  h4 { font-size: 10.5pt !important; margin-top: 3mm !important; page-break-after: avoid; }
  p  { font-size: 10pt !important; margin: 0 0 2mm 0 !important; orphans: 3; widows: 3; }
  a  { color: #000 !important; text-decoration: none !important; }
  a[href]::after { content: "" !important; }

  /* ---- 13. Tabellen ---- */
  table.product_table_1, table.product_table_2, table.product_table_3 {
    width: 100% !important;
    border-collapse: collapse !important;
    page-break-inside: avoid !important;
    margin-bottom: 3mm !important;
    background: transparent !important;
  }
  td, th { font-size: 9.5pt !important; padding: 1.5mm 2mm !important; text-align: left; vertical-align: top; border: none; }
  .product_table_1 { border-top: 1px solid #772b1b !important; }
  .product_table_1 tr:nth-child(odd),
  .product_table_2 tr:nth-child(even),
  .product_table_3 tr:nth-child(even) {
    background-color: rgba(240, 242, 247, 0.85) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .product_table_2 tr:first-child,
  .product_table_3 tr:first-child {
    border-bottom: 1px solid #772b1b !important;
    font-weight: bold;
  }
  .product_table_1 tr:not(:first-child) td,
  .product_table_2 tr:not(:first-child) td,
  .product_table_3 tr:not(:first-child) td { border-top: 1px solid #ccc !important; }
  table p  { margin: 0 !important; font-size: 9.5pt !important; }
  table ul { margin: 0 !important; padding-left: 4mm !important; }
  .addition { font-size: 9pt !important; font-style: italic; }

  /* ---- 14. Hilfsklassen ---- */
  .hidden-print { display: none !important; }
  .newpage      { page-break-before: always; }
  .no-break     { page-break-inside: avoid; }
  iframe        { display: none !important; }

  /* ---- 15. Kleines Logo unten rechts auf jeder Seite (position:fixed) ----
     Browser-Verhalten variiert: Chrome/Brave repeat per Seite,
     Safari/Firefox oft nur Seite 1. */
  body::after {
    content: "";
    position: fixed;
    bottom: 8mm;
    right: 18mm;
    width: 80mm;
    height: 22mm;
    background-image: url("/templates/esz-klapptisch-template_v4/img/logo_print.png") !important;
    background-size: auto 18mm !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    z-index: 100;
  }
}