/* Die Tageszeitung am Kiosk (web/js/zeitung.js, docs/ZEITUNG.md): Zeitungspapier im Fenster – Kopfzeile mit Nummer und Datum, die Seiten
   als Reiter, das Blatt mit Linien wie im Satz alter Zeitungen, Bilder der Zeitung (zeitung-bilder.js) ganzzahlig vergrößert. Im
   Breitformat zwei Seiten nebeneinander mit dem Falz dazwischen (STIL.md B1), im Hochformat eine. Eigene Datei (STIL.md E2a). */
.zeitung .zg-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a3) var(--a6); margin: 0 0 var(--a4);
  padding: 0 0 var(--a3); border-bottom: 4px double var(--ink); }
.zeitung .zg-archiv { width: auto; max-width: 100%; }
.zeitung .zg-reiter { justify-content: flex-start; gap: var(--a2); margin: 0 0 var(--a4); }
.zeitung .zg-reiter .btn[aria-selected="true"] { border-image-source: url("/img/ui/btn-butter-down.png"); padding-top: 4px; }   /* aufgeschlagen */
.zeitung .zg-blatt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--a12); padding: var(--a4); background: var(--paper);
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--schatten); }
.zeitung .zg-seite > * { margin: 0 0 var(--a5); }
.zeitung .zg-seite h3, .zeitung .zg-seite h4 { margin: 0 0 var(--a3); }
.zeitung .zg-titel { margin: 0 0 var(--a5); padding: 0 0 var(--a3); text-align: center; font-weight: 700; font-size: var(--schrift-gross); line-height: 40px;
  border-bottom: 2px solid var(--ink); overflow-wrap: anywhere; }
.zeitung .zg-schlagzeile { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--a6); align-items: center; padding: 0 0 var(--a5);
  border-bottom: 2px solid var(--ink); }
.zeitung .zg-schlagzeile h3 { font-size: var(--schrift-gross); line-height: 36px; margin: 0; overflow-wrap: anywhere; }
.zeitung .zg-kurz { display: grid; gap: var(--a2); }
.zeitung .zg-kurz li { display: flex; gap: var(--a3); align-items: center; }
.zeitung .zg-wetter { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--a4); padding: var(--a4) 0;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.zeitung .zg-wetter > .note { grid-column: 1 / -1; margin: 0; }
.zeitung .zg-tag { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 var(--a4); align-items: start; }
.zeitung .zg-tag strong { grid-column: 1 / -1; }
.zeitung .zg-tag .zg-bild { grid-row: span 2; }
.zeitung .zg-tag > span:first-of-type { font-weight: 700; }
.zeitung .zg-rubrik, .zeitung .zg-orakel { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--a5); align-items: start;
  padding: 0 0 var(--a4); border-bottom: 2px solid var(--schatten-leicht); }
.zeitung .zg-rubrik p, .zeitung .zg-orakel p { margin: 0 0 var(--a2); }
.zeitung .zg-anzeige { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 var(--a5); align-items: start;
  padding: var(--a5); border: 4px double var(--ink); background: var(--parch); }
.zeitung .zg-anzeige h4 { margin: 0; }
.zeitung .zg-anzeige p, .zeitung .zg-anzeige .badge { grid-column: 2; margin: 0; justify-self: start; }
.zeitung .zg-anzeige .zg-bild { grid-row: span 3; }
.zeitung .zg-marke { grid-column: 1 / -1; justify-self: end; color: var(--soft); }   /* „Anzeige“ über der Anzeige, wie im Satz alter Zeitungen */
.zeitung .zg-liste { display: grid; gap: var(--a2); padding-left: var(--a8); list-style: square; }
.zeitung .zg-fuer { padding: var(--a4); border: 2px solid var(--brass-d); background: var(--parch); }
.zeitung .zg-blaettern { justify-content: space-between; align-items: center; margin: var(--a4) 0 0; }
canvas.zg-bild { image-rendering: pixelated; image-rendering: crisp-edges; flex: none; }
canvas.zg-bild-24 { width: 24px; height: 24px; }
canvas.zg-bild-48 { width: 48px; height: 48px; }
canvas.zg-bild-72 { width: 72px; height: 72px; }
/* Handy (schmal, oder quer und niedrig): die Reiter rollen in einer Reihe (STIL.md B2 „am Handy rollt die Reihe“) – sonst wären es vier
   Zeilen über dem Blatt; zeitung.js rollt den aufgeschlagenen ins Bild */
@media (max-width: 540px), (max-height: 540px) {
  .zeitung .zg-reiter { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
  .zeitung .zg-reiter .btn { flex: none; }
}
@media (min-width: 1000px) and (min-aspect-ratio: 4/3) {
  .zeitung .zg-blatt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zeitung .zg-seite + .zg-seite { padding-left: var(--a12); border-left: 2px solid var(--ink); }   /* der Falz */
}