/* ==========================================================
   Print-Stylesheet – DIN A4
   - 5mm Rand rundum (oben, unten, links, rechts) für Text UND Bilder
   - Seitenzahl oben rechts
   - Hintergrund über das gesamte Blatt (auch im Randbereich)
   Hinweis: @top-right und ein Hintergrund auf @page (der wirklich
   das ganze physische Blatt inkl. Rand füllt) werden von Tools mit
   vollem CSS-Paged-Media-Support korrekt umgesetzt (z.B. WeasyPrint,
   Prince XML, PagedJS). Chrome „Drucken -> Als PDF speichern“
   ignoriert @top-right und @page-Hintergründe – dort müsste die
   Seitenzahl per JavaScript eingefügt werden.
   ========================================================== */

@page {
    size: A4;
    margin: 10mm;

    background-image: url("../../present/background.webp");
    background-repeat: repeat;
    background-size: auto;

    @top-right {
        content: counter(page);
        margin: 1mm 2mm -2mm 0mm;
        font-family: cursive;
        font-size: 12pt;
        color: black;
    }
}

@media print {

    .print-button {
        display: none;
    }

    /* Blendet alles mit dieser Klasse beim Drucken aus,
       z.B. den "Alle Details öffnen/schließen"-Button und
       das umgebende <details>-Element */
    .no-print {
        display: none !important;
    }

    /* --- Druck-Detailfenster ---
       .print-bild = Druckfenster mit den Bildern -> die BILDER sollen GEDRUCKT
       werden. Damit der Inhalt auch bei eingeklapptem <details> gedruckt wird,
       erzwingen wir aufgeklappt. Das <summary> (druck.svg-Symbol + der Text
       "Hier Öffnen um alle Bilder...") wird beim Drucken AUSGEBLENDET. */
    details.print-bild {
        display: block !important;
    }
    /* details in Firefox/Chrome beim Drucken zwingend als offen behandeln,
       damit der Inhalt (Bilder/URLs) auch bei zugeklapptem Fenster gedruckt wird. */
    details.print-bild[open],
    details.print-bild {
        display: block !important;
    }
    details.print-bild > summary,
    details.print-bild summary {
        display: none !important;  /* druck.svg-Symbol + "Hier Öffnen"-Text NICHT drucken */
    }
    /* Firefox rendert das summary teils trotzdem -> druck.svg-Icon und den
       "Hier Öffnen"-Hinweis (i.no-print im summary) zusätzlich hart ausblenden. */
    details.print-bild summary,
    details.print-bild summary img,
    img[src*="druck.svg"] {
        display: none !important;
    }
    details.print-bild > *:not(summary) {
        display: block !important;  /* Inhalt (Bild + URL) immer sichtbar, auch wenn zugeklappt */
    }
    /* <url> ist ein Nicht-Standard-Element; explizit als sichtbarer Block drucken */
    details.print-bild url {
        display: block !important;
        overflow-wrap: anywhere;
        word-break: break-all;
    }

}

    html, body {
        margin: 0;
        padding: 0;
        background: transparent;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    article, .page {
        margin: 0;
        padding: 0;
        background: transparent;
        box-sizing: border-box;
    }

    article > :first-child,
    .page > :first-child {
        margin-top: 0 !important;
    }

    article > :last-child,
    .page > :last-child {
        margin-bottom: 0 !important;
    }

    /* Bilder dürfen niemals über den Rand hinausragen.
       max-width:100% würde 100% der body-Breite (=210mm) ergeben und
       überliefe den Rand. Deshalb harte Grenze auf A4 minus 2x10mm. */
    img {
        max-width: 180mm;
        max-height: 250mm;   /* nie höher als eine Seite -> kein Abschneiden/Überlappen */
        width: auto;
        height: auto;
        page-break-inside: avoid;
    }

    /* Große Druckbilder in den Bild-Fenstern: auf die Seite passend,
       zentriert, ohne Verzerren. druck.svg ist ausgeschlossen.
       WICHTIG: feste mm-Höhe statt vh -- Firefox setzt vh beim Drucken
       NICHT zuverlässig auf die Druckseite um (Bilder wurden abgeschnitten).
       250mm = A4-Höhe (297mm) minus Ränder und etwas Reserve. */
    details.print-bild img:not([src*="druck.svg"]),
    .print-bild-ausgelagert img:not([src*="druck.svg"]) {
        display: block !important;
        margin: 0 auto !important;
        max-width: 180mm !important;   /* Breite begrenzen */
        max-height: 250mm !important;  /* Höhe begrenzen (mm) */
        width: auto !important;
        height: auto !important;
        /* Bild selbst NICHT umbrechen -- der Umbruch wandert weiter unten
           auf die zugehörige Bildunterschrift (.bild-caption). Sonst schiebt
           Chrome die per JS NACH dem Bild eingefügte Caption auf die
           Folgeseite und sie erscheint dort ÜBER dem nächsten Bild. */
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    /* Bild + direkt folgende Caption als EINE untrennbare Einheit halten.
       Der Seitenumbruch kommt NACH der Caption, nicht nach dem Bild. */
    details.print-bild img:not([src*="druck.svg"]) + .bild-caption,
    .print-bild-ausgelagert img:not([src*="druck.svg"]) + .bild-caption {
        page-break-before: avoid !important;
        break-before: avoid !important;
        page-break-after: always !important;
        break-after: page !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    /* Bilder OHNE Caption behalten selbst den Umbruch danach.
       (:not(:has(...)) trennt Bilder mit und ohne folgende Caption; wo :has
       nicht unterstützt wird, greift zusätzlich die JS-Auslagerung/der
       <br>-Abstand -- der Effekt bleibt: kein Überlappen.) */
    details.print-bild img:not([src*="druck.svg"]):not(:has(+ .bild-caption)),
    .print-bild-ausgelagert img:not([src*="druck.svg"]):not(:has(+ .bild-caption)) {
        page-break-after: always !important;
        break-after: page !important;
    }
    /* Das letzte Bild bzw. die letzte Caption im Fenster braucht keinen
       Umbruch danach (sonst leere Seite am Ende). */
    details.print-bild img:not([src*="druck.svg"]):last-child,
    .print-bild-ausgelagert img:not([src*="druck.svg"]):last-child,
    details.print-bild .bild-caption:last-child,
    .print-bild-ausgelagert .bild-caption:last-child {
        page-break-after: auto !important;
        break-after: auto !important;
    }
    /* Der ausgelagerte Druckinhalt (aus dem <details> herausgeloest fuer
       Firefox) soll normal als Block gedruckt werden. */
    .print-bild-ausgelagert {
        display: block !important;
    }
    .print-bild-ausgelagert url {
        display: block !important;
        overflow-wrap: anywhere;
        word-break: break-all;
    }
    /* Das gesamte Druck-Fenster nicht über einen Seitenumbruch reißen */
    details.print-bild {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    h1, h2, h3 {
        page-break-after: auto;
        break-after: auto;
        page-break-inside: avoid;
        margin: 0 0 6mm 0;
    }
    
    .sz-gallery {
    display: block;
  }

  .sz-gallery img {
    display: block;
    margin: 0 auto;
    max-width: 180mm;     /* Breite begrenzen */
    max-height: 250mm;    /* Höhe begrenzen (mm) -> passt auf 1 Seite, kein Überlappen */
    width: auto;
    height: auto;
    page-break-after: always;   /* WeasyPrint/Prince: break-after */
    break-after: page;          /* moderner Standard, gleiche Wirkung */
  }

  .sz-gallery img:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  /* ==========================================================
     GALERIE-SEITEN (baustellen, ornamente, ... )
     Ziel: Titel + Text + das EINE Teaser-Bild auf EINER Seite,
     ohne Menü-Navi-Button und ohne die versteckten Galeriebilder.
     ========================================================== */

  /* 1) Menü-/Navigations-Button + Panel (aus ideewirwa.js) ausblenden.
        Exakte Klassen aus dem slide-menu (menu-lite.js). Wrapper und Button
        haben zwar schon .no-print, hier zur Sicherheit explizit & vollständig. */
  .slide-menu-wrapper,
  .slide-menu-button,
  .slide-menu,
  .slide-menu-overlay,
  .slide-menu-panel,
  .slide-menu-items,
  .slide-menu-item,
  .slide-menu-item-link,
  .goog-te-banner-frame {
      display: none !important;
  }
  /* #google_translate_element (Übersetzer-Button) bleibt beim Drucken sichtbar
     -- als einziges Bedienelement soll er auf dem Ausdruck erscheinen. */

  /* 2) Die versteckte Galerie NICHT drucken (nur der Teaser bleibt) */
  .galerie-bilder-versteckt {
      display: none !important;
  }

  /* 3) Der Teaser (Titel + Text + 1 Bild) bleibt sichtbar.
        Button-Styling neutralisieren, damit es nicht wie ein Button aussieht. */
  .galerie-teaser .btn,
  .galerie-teaser .btn-primary {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      color: inherit !important;
      text-decoration: none !important;
      display: block !important;
  }

  /* 4) Auf den Galerie-Seiten KEIN erzwungener Seitenumbruch nach der
        Überschrift -> sonst landet der Teaser auf 2 Seiten. */
  .galerie-seite h1,
  .galerie-seite h2,
  .galerie-seite h3 {
      page-break-after: auto !important;
      break-after: auto !important;
  }

  /* 5) Das eine Teaser-Bild sauber auf die Seite begrenzen */
  .galerie-teaser img {
      display: block;
      margin: 0 auto;
      max-width: 180mm;
      max-height: 250mm;   /* Höhe begrenzen (mm) -> passt auf 1 Seite */
      width: auto;
      height: auto;
      page-break-inside: avoid;
  }

  /* 6) Ganze Galerie-Seite möglichst zusammenhalten */
  .galerie-seite,
  .galerie-teaser {
      page-break-inside: avoid;
      break-inside: avoid;
  }

  /* 7) Automatisch eingefügte Bildunterschriften (aus data-caption) */
  .bild-caption {
      margin: 2mm 0 6mm;
      font-size: 10pt;
      font-style: italic;
      text-align: center;
      /* Caption NIE vom darüberstehenden Bild abtrennen -> verhindert, dass
         sie allein auf die Folgeseite (und damit über das nächste Bild)
         rutscht (Chrome-Bug). */
      page-break-before: avoid;
      break-before: avoid;
      page-break-inside: avoid;
      break-inside: avoid;
  }
}

/* Bildunterschriften auch am Bildschirm dezent darstellen
   (stehen im standardmäßig geschlossenen Druck-<details>, daher
   normalerweise unsichtbar -- diese Regel greift nur, wenn geöffnet). */
.bild-caption {
    margin: 4px 0 14px;
    font-size: 0.9em;
    font-style: italic;
    text-align: center;
    opacity: 0.85;
}
 /* in der drucken.html Bilder kleiner drucken */
  .dru_kl {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    max-width: 35px !important;
    max-height: 35px !important;
    object-fit: contain !important;
  }