/* ============================================================
   pdf-mobil.css — Denty Tool · PDFs auf kleinen Bildschirmen
   ============================================================
   Gegenstück zu pdf-mobil.js. Wird als LETZTE Stilquelle nach
   responsive.css geladen.

   ⚠ GRUNDREGEL WIE IN responsive.css: Jede Regel steht in einer
   @media-Abfrage mit max-width. Auf dem Rechner matcht keine davon;
   dort kann sich per Konstruktion nichts ändern. Die einzige Ausnahme
   ist der Druck-Abschnitt ganz unten — der greift nur, wenn ein
   #pm-druckblatt im Dokument liegt, und das legt ausschliesslich
   pmSeitenDrucken() an, das seinerseits hinter pmSchmal() steht. */

@media screen and (max-width: 767px), screen and (pointer: coarse) {

  /* Der Ersatz für das <iframe>. Er trägt dessen Klasse weiter, hat
     also schon Grösse und Platz — hier kommt nur dazu, was er als
     scrollender Seitenstapel braucht. */
  .pm-seiten {
    overflow-y:      auto;
    overflow-x:      hidden;
    -webkit-overflow-scrolling: touch;
    background:      #3a3a38;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             8px;
    padding:         8px;
    box-sizing:      border-box;
  }

  /* ⚠ DIE GRÖSSE. Nachgemessen am 20.08.2026: Der Ersatz stand mit
     30 px Breite da, und die Seite wurde folgerichtig auf 14x19 px
     gerechnet. Grund: Die neun Rahmen bekommen ihre Grösse auf zwei
     verschiedene Arten.
     (a) Über eine eigene Klasse — .dt-pdf-frame, .lg-pdf-frame,
         .bm-kosten-pdf-frame. Die wandert mit dem Ersatz mit, bringt
         aber ein aspect-ratio 210/297 mit: für EINE Seite richtig, für
         einen Stapel falsch. Hier auf volle Höhe gestellt, gescrollt
         wird im Kasten.
     (b) Über eine Regel am Elternteil — ".dt-pdfwin-body iframe" in
         index.html, Zeile 1635. Die greift für ein <div> nicht, es
         nahm deshalb nur seine Inhaltsbreite. Dafür die zweite Regel. */
  .pm-seiten.dt-pdf-frame,
  .pm-seiten.lg-pdf-frame,
  .pm-seiten.bm-kosten-pdf-frame {
    width:        100%;
    height:       calc(100vh - 80px);
    max-height:   calc(100vh - 80px);
    aspect-ratio: auto;
    border-radius: 6px;
  }
  .dt-pdfwin-body > .pm-seiten {
    flex:       1 1 auto;
    width:      100%;
    height:     100%;
    min-width:  0;
    min-height: 0;
  }

  /* Eine gerechnete Seite. Weisser Grund, damit ein PDF mit
     durchsichtigem Hintergrund nicht auf dem dunklen Stapel steht. */
  .pm-seite {
    display:     block;
    background:  #fff;
    max-width:   100%;
    flex:        0 0 auto;
  }

  .pm-hinweis {
    color:       #e6e6e2;
    font-size:   13px;
    text-align:  center;
    padding:     28px 16px;
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         12px;
    line-height: 1.5;
  }

  .pm-laden-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    height:        36px;
    padding:       0 14px;
    border:        0.5px solid rgba(255, 255, 255, .45);
    border-radius: 8px;
    background:    transparent;
    color:         #fff;
    font-size:     13px;
    cursor:        pointer;
  }
}

/* ============================================================
   DRUCKEN — nur die gerechneten Seiten aufs Papier
   ============================================================
   ⚠ Diese Regeln greifen ausschliesslich, solange ein #pm-druckblatt
   im Dokument liegt. pmSeitenDrucken() legt es unmittelbar vor
   window.print() an und räumt es danach wieder weg; angelegt wird es
   nur auf schmalen Schirmen. Ohne das Blatt ist der Abschnitt wirkungs-
   los, der gewohnte Ausdruck am Rechner bleibt also unberührt. */
#pm-druckblatt { display: none; }

@media print {
  /* ⚠ Klasse statt :has() — :has() gibt es erst ab Chrome 105, und ein
     nicht verstandener Selektor wuerde die GANZE Regel verwerfen. Die
     Klasse setzt pmSeitenDrucken() zusammen mit dem Blatt. */
  body.pm-druckt > *:not(#pm-druckblatt) { display: none !important; }

  #pm-druckblatt {
    display:  block;
    position: static;
    margin:   0;
    padding:  0;
  }
  #pm-druckblatt img {
    display:     block;
    width:       100%;
    page-break-after: always;
    break-after: page;
  }
  #pm-druckblatt img:last-child {
    page-break-after: auto;
    break-after:      auto;
  }
}