:root {
  --page-border: #d8d8d3;
  --line-bar: #cfcfc9;
}

body {
  font-family: sans-serif;
  background: #f1efe8;
  margin: 0;
  padding: 2rem 0;
}
.pdf-export {
  padding: 0;
}

.issue-title {
  text-align: center;
  font-family: Georgia, serif;
  margin-bottom: 2rem;
}

.spread {
  display: flex;
  gap: 8mm;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8mm;
}

.a5-page {
  position: relative;
  width: 148mm;
  height: 210mm;
  background: #ffffff;
  border: 0.5px solid var(--page-border);
  padding: 8mm;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Bild-Lupe (siehe enableImageZoom() im Reader-Script): zoomt die ganze
   Seite an die angeklickte Stelle heran statt nur das Bild groß zu zeigen -
   soll sich wie "das Heft näher ans Auge halten" anfühlen, nicht wie ein
   Blog mit aufploppendem Einzelbild. */
.a5-page.zoomed {
  transform: scale(2.2);
  z-index: 30;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.spread.has-zoom .a5-page:not(.zoomed) {
  opacity: 0.2;
}

.a5-page.page-left .category-tab { left: -3mm; }
.a5-page.page-right .category-tab { right: -3mm; }

.category-tab {
  position: absolute;
  top: 16mm;
  width: 3mm;
  height: 20mm;
  background: var(--tab-color, #888);
}

.category-kicker {
  font-size: 3mm;
  letter-spacing: 0.5mm;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 0.5mm solid #888;
  padding-bottom: 1mm;
  margin-bottom: 3mm;
  flex-shrink: 0;
}

.page-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4mm;
}

.slot {
  border: 0;
  padding: 4mm;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.slot-full     { grid-column: 1 / 3; grid-row: 1 / 3; }
.slot-half-0   { grid-column: 1 / 3; grid-row: 1; }
.slot-half-2   { grid-column: 1 / 3; grid-row: 2; }
.slot-quarter-0 { grid-column: 1; grid-row: 1; }
.slot-quarter-1 { grid-column: 2; grid-row: 1; }
.slot-quarter-2 { grid-column: 1; grid-row: 2; }
.slot-quarter-3 { grid-column: 2; grid-row: 2; }

.slot-filler {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-style: italic;
  text-align: center;
  font-size: 2.6mm;
}

/* Die Größen-Vorschau im Artikelformular nutzt ebenfalls .slot und braucht
   den Rahmen, damit man die Boxgrenze sieht - im Heft selbst gibt es keinen. */
.fit-preview-page {
  border: 0.5px solid var(--page-border);
}

.article-title {
  font-family: Georgia, serif;
  font-size: 4mm;
  margin: 0 0 2mm;
  flex-shrink: 0;
}

.article-subtitle {
  font-size: 2.8mm;
  color: #555;
  font-style: italic;
  margin: -1mm 0 2mm;
  flex-shrink: 0;
}

.article-body {
  flex: 1;
  min-height: 0;
  font-size: 2.6mm;
  line-height: 1.5;
  column-count: 2;
  column-gap: 4mm;
}

/* Für mehrseitige Artikel übernimmt unser eigener JS-Algorithmus die
   Spaltenaufteilung selbst, statt sie CSS zu überlassen (siehe Kommentar
   bei flowMultiPageArticles() in reader/issue.php) - dafür zwei echte,
   gleich hohe Boxen statt column-count. */
.article-body.flow-columns {
  display: flex;
  gap: 4mm;
  column-count: initial;
}
.flow-columns .flow-col {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Blocksatz im Heft (.a5-page) UND in der Größen-Vorschau im Artikelformular,
   damit beide gleich gesetzt werden. Bildunterschriften bleiben zentriert
   (eigene Regel unten). */
.a5-page .article-body,
.fit-preview-page .article-body { text-align: justify; }

.article-body p { margin: 0 0 2mm; }
/* Von Typography::html() gesetzt: Wörter wie NCC-1701 nicht am Bindestrich trennen */
.nb { white-space: nowrap; }
.article-body a { color: inherit; }
.article-body code {
  font-family: 'Courier New', monospace;
  background: #f0efe9;
  padding: 0.1em 0.3em;
  border-radius: 0.2em;
  font-size: 0.9em;
}
.article-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2mm 0;
}
.article-body figure {
  margin: 2mm 0;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.article-body figcaption { font-size: 2.2mm; color: #777; text-align: center; }

/* Automatisch erzeugtes Inhaltsverzeichnis auf der reservierten Seite 2 */
.toc-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.toc-title {
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 4mm;
  margin: 0 0 5mm;
  flex-shrink: 0;
}
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-columns {
  flex: 1;
  min-height: 0;
  column-count: 2;
  column-gap: 6mm;
}
.toc-group {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 2mm;
}
.toc-item {
  display: flex;
  align-items: baseline;
  margin-bottom: 1.5mm;
  font-size: 2.6mm;
  font-weight: bold;
}
.toc-sublist {
  margin: 0 0 2.5mm;
  padding: 0 0 0 4mm;
}
.toc-subitem {
  display: flex;
  align-items: baseline;
  margin-bottom: 1mm;
  font-size: 2.6mm;
  font-weight: normal;
  color: #555;
}
.toc-dots {
  flex: 1;
  border-bottom: 0.3mm dotted #999;
  margin: 0 2mm;
  transform: translateY(-1mm);
}
.toc-page-number {
  font-weight: bold;
}
.toc-subitem .toc-page-number {
  font-weight: normal;
}

/* Bildgrößen aus dem CKEditor-Werkzeugkasten (siehe article_form.php /
   editorial_form.php) - da der vorgefertigte CDN-Build keine Zieh-Griffe
   zum Verändern der Bildgröße mitbringt, gibt es stattdessen vier feste
   Größenstufen als Buttons im Bild-Werkzeugkasten. */
.image-style-25 { max-width: 25% !important; }
.image-style-50 { max-width: 50% !important; }
.image-style-75 { max-width: 75% !important; }
.image-style-100 { max-width: 100% !important; }

.article-byline {
  text-align: right;
  font-size: 2.2mm;
  font-style: italic;
  color: #777;
  margin: 1mm 0 0;
  flex-shrink: 0;
}

/* Wird gesetzt, wenn eine Viertelseite zu schmal fuer zwei Spalten ist -
   gilt sowohl im Reader als auch in der Groessen-Vorschau im Artikel-Formular. */
.single-column .article-body,
.single-column .article-title,
.single-column .article-subtitle {
  column-count: 1;
}

/* Impressum soll bewusst NICHT wie ein normaler Artikel wirken - in echten
   Magazinen läuft der Rechtstext fast immer deutlich kleiner, einspaltig
   und in gedämpftem Grau statt in der Artikel-Schriftgröße. Pflichttext,
   kein Lesetext. */
.impressum-block .article-title {
  font-family: sans-serif;
  font-size: 2.4mm;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.3mm;
  color: #777;
}
.impressum-block .article-body {
  column-count: 1 !important;
  font-size: 1.9mm;
  line-height: 1.5;
  color: #666;
}
.impressum-block .article-body p { margin: 0 0 1.5mm; }
.impressum-block .article-body a { color: #666; text-decoration: underline; }
.obfuscated-email { white-space: nowrap; }

/* Lupe: Klick auf ein Artikelbild vergrößert die ganze Seite (siehe JS im
   Reader-Template). transform-Skalierung statt Breiten-/Höhenänderung,
   damit das Layout der Seite selbst (Spalten, Bildpositionen usw.)
   unverändert bleibt - es wird wirklich nur "näher rangezoomt". */
.article-body img { cursor: zoom-in; }
#page-zoom-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.8);
  z-index: 1000;
  cursor: zoom-out;
}
#page-zoom-backdrop.active { display: block; }
.a5-page.page-zoomed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2.2);
  z-index: 1001;
  cursor: zoom-out;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.7);
}

.a5-page-cover { padding: 0; }
.a5-page-cover .page-number { display: none; }

/* PDF-Export-Modus (siehe IssueController::downloadPdf() / showReader()):
   wkhtmltopdf ruft dieselbe Seite mit ?print=1 auf. Statt der Ein-
   Doppelseite-Blätter-Ansicht (immer nur ein "Spread" sichtbar, Rest
   display:none) müssen für den Druck ALLE Seiten sichtbar sein, und jede
   einzelne .a5-page wird zu einer eigenen PDF-Seite (page-break-after) -
   zwei nebeneinander wie im Browser würden nicht auf eine A5-Seite passen. */
.pdf-export #spreads { visibility: visible !important; }
.pdf-export .spread {
  display: block !important;
  gap: 0;
  margin: 0;
}
.pdf-export .a5-page {
  margin: 0 auto;
  page-break-after: always;
  border: none;
}
.pdf-export .spread:last-child .a5-page:last-child {
  page-break-after: auto;
}
.pdf-export .pager-arrow { display: none; }

.subscribe-flash {
  background: #e8f5e9;
  color: #256029;
  border: 1px solid #a5d6a7;
  padding: 0.6rem 1rem;
  margin: 0.5rem auto;
  max-width: 500px;
  border-radius: 4px;
  text-align: center;
  font-size: 0.9rem;
}
.subscribe-flash-error {
  background: #fdecea;
  color: #8a1f11;
  border-color: #f5c6cb;
}
.subscribe-form {
  display: flex;
  gap: 1.5mm;
  margin: 2mm 0;
}
.subscribe-form input[type="email"] {
  flex: 1;
  min-width: 0;
  font-size: 2.4mm;
  padding: 1mm 1.5mm;
  border: 0.3mm solid #bbb;
}
.subscribe-form button {
  font-size: 2.4mm;
  padding: 1mm 2.5mm;
  border: none;
  background: var(--cover-accent, #96591D);
  color: #fff;
  cursor: pointer;
}
.subscribe-hint {
  font-size: 1.9mm;
  color: #888;
  margin: 1.5mm 0 0;
}

.page-number {
  position: absolute;
  bottom: 4mm;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 2.6mm;
  color: #999;
}

.slot-kind-werbung { background: #fff8e6; }
.slot-kind-information { background: #eaf3fb; }

.kind-badge {
  display: inline-block;
  font-size: 2mm;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.3mm;
  padding: 0.5mm 1.5mm;
  border-radius: 1mm;
  margin-bottom: 1mm;
  flex-shrink: 0;
  align-self: flex-start;
}
.kind-badge-werbung { background: #f2b705; color: #4a3800; }
.kind-badge-information { background: #3a7bd5; color: #fff; }

.pager-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  z-index: 15;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.pager-arrow-left { left: 1rem; }
.pager-arrow-right { right: 1rem; }
.pager-arrow:disabled {
  opacity: 0.3;
  cursor: default;
  box-shadow: none;
}

.pager-indicator {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #ccc;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  color: #555;
  z-index: 15;
}

/* Strukturiertere Dashboard-Darstellung: Rubriken als Karten mit echten
   Tabellen (feste Spaltenbreiten per colgroup), Pills statt Klammertexten,
   Icon-Buttons statt Textlinks fuer Bearbeiten/Loeschen. */
.category-section {
  background: #fafaf8;
  border: 1px solid #e8e6e0;
  border-radius: 6px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.2rem;
}
.category-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}
.category-section-header h2 {
  font-size: 1rem;
  margin: 0;
}
.category-count {
  font-size: 0.8rem;
  color: #999;
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.article-table th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #999;
  font-weight: normal;
  padding: 0 0.5rem 0.4rem;
  border-bottom: 1px solid #ddd;
}
.article-table td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid #ececec;
  vertical-align: middle;
}
.article-table tbody tr {
  cursor: grab;
}
.article-table tbody tr:active { cursor: grabbing; }
.article-table tbody tr:hover { background: #f4f2ec; }
.article-table tbody tr:last-child td { border-bottom: none; }

.drag-handle {
  color: #999;
  font-size: 1.1rem;
  line-height: 1;
  user-select: none;
}
.article-row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #eee;
  color: #555;
  white-space: nowrap;
}
.pill-werbung { background: #fdf1cf; color: #7a5c00; }
.pill-information { background: #dbeafd; color: #1b4e91; }

.article-row-actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: #555;
  cursor: pointer;
  text-decoration: none;
}
.icon-btn:hover { background: #f2f0ea; }
.icon-btn-danger:hover {
  background: #fdeceb;
  border-color: #e3b3ae;
  color: #b3261e;
}

/* Editorial-Seite - immer Seite 3, admin-exklusiv, angelehnt an klassische
   Zeitschriften-Editorials: grosse Ueberschrift, ein breiter Textblock statt
   Spalten, Absaetze mit Trennstrich links statt Einzug. */
.editorial-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.editorial-title {
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 7mm;
  margin: 0 0 4mm;
}
.editorial-body {
  font-size: 2.8mm;
  line-height: 1.6;
  column-count: 1;
  overflow: hidden;
}
.editorial-body p {
  margin: 0 0 3mm;
  padding-left: 3mm;
  border-left: 0.4mm solid #bbb;
}
.editorial-body img {
  max-width: 40%;
  float: right;
  margin: 0 0 2mm 3mm;
  border-left: none;
}

/* Titelseite (Seite 1) - festes, im Adminbereich gesetztes Titelbild oben
   (halbe Seitenhöhe, per background-size:cover zugeschnitten - Beschriftung/
   Logo kommt bewusst NICHT von hier, sondern ist Teil des hochgeladenen
   Bildes selbst). Darunter eine Hauptschlagzeile (erster ausgewählter
   Cover-Artikel), dann eine Liste weiterer ausgewählter Artikel, jeweils
   mit ihrem eigenen Bild sofern vorhanden.
   Bewusst NUR EINE feste Akzentfarbe fürs ganze Cover (--cover-accent,
   angelehnt an den Gold-/Bronze-Ton des Logos) statt der individuellen
   Rubrikfarben aus dem Heftinneren - mehrere unabhängige Rubrikfarben
   nebeneinander wirkten zusammenhanglos statt wie aus einem Guss. Die
   Hauptschlagzeile bekommt bewusst mehr Gewicht (größere Badge, größerer
   Bullet, dunklerer/fetterer Stichpunkt-Text) als die kleineren Teaser
   darunter - vorher sahen beide auf Augenhöhe fast gleich aus. */
.cover-page {
  --cover-accent: #96591D;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cover-image {
  height: 47.5mm;
  flex-shrink: 0;
  background: #e8e8e2 center/cover no-repeat;
  position: relative;
}
.cover-issue-strip {
  position: absolute;
  left: 8mm; /* bündig mit dem Seitenrand der Bilder darunter */
  bottom: 1.5mm;
  margin: 0;
  font-size: 3mm;
  font-weight: bold;
  letter-spacing: 0.4mm;
  text-transform: uppercase;
  color: var(--cover-accent);
}
.cover-note-list {
  list-style: none;
  margin: 1.5mm 0 0;
  padding: 0;
}
.cover-note-list-main {
  margin-top: 0.5mm;
}
.cover-note-list li {
  font-size: 2.6mm;
  line-height: 1.5;
  color: var(--cover-accent);
}
.cover-note-list li span { color: #555; }
.cover-note-list-main li {
  font-size: 2.7mm;
  font-weight: bold;
}
.cover-note-list-main li span { color: #333; font-weight: normal; }
.cover-headline-block {
  padding: 4mm 8mm 3mm;
  border-top: 1.4mm solid var(--cover-accent);
  flex-shrink: 0;
  display: flex;
  gap: 3mm;
  align-items: stretch;
}
/* Bild wird vollständig und im eigenen Seitenverhältnis gezeigt (kein
   Zuschnitt). Die Maximalgrößen verhindern, dass ein Hochkantbild die
   Titelseite sprengt. */
.cover-headline-image {
  display: block;
  align-self: flex-start;
  flex-shrink: 0;
  width: 40mm;
  height: auto;
  max-height: 40mm;
  object-fit: contain;
  object-position: left top;
}
.cover-headline-text {
  flex: 1;
  min-width: 0;
}
.cover-kicker {
  display: inline-block;
  background-color: var(--cover-accent);
  font-size: 2.8mm;
  font-weight: bold;
  letter-spacing: 0.4mm;
  text-transform: uppercase;
  color: #fff;
  padding: 0.8mm 2.6mm;
  margin: 0 0 1.5mm;
}
.cover-headline {
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 7mm;
  line-height: 1.12;
  margin: 0 0 1.5mm;
  color: #1a1a1a;
  /* Verteilt die Wörter gleichmäßig auf die Zeilen, damit keine einzelnen
     Wörter ("Pi") allein in der letzten Zeile hängen. Wirkt in Browser und
     im Chromium-PDF-Export gleichermaßen; ältere Engines ignorieren es. */
  text-wrap: balance;
}
.cover-subheadline {
  font-size: 2.8mm;
  color: #555;
  margin: 0;
}
.cover-teasers {
  list-style: none;
  margin: 0;
  padding: 0 8mm 6mm;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-top: 0.3mm solid var(--line-bar);
}
.cover-teasers > li {
  display: flex;
  gap: 3mm;
  align-items: stretch;
  padding: 2.2mm 0;
  border-bottom: 0.2mm solid #eae8e2;
}
.cover-teasers > li:first-child { padding-top: 2.5mm; }
/* Nach dem letzten Teaser steht nichts mehr - die Trennlinie würde im Leeren hängen. */
.cover-teasers > li:last-child { border-bottom: none; }
/* Einheitliche Querformat-Box (3:2) für alle Teaser-Bilder, damit die Zeilen
   ein ruhiges Raster ergeben. Zugeschnitten wird bewusst nur minimal, weil
   die meisten Bilder ohnehin nahe an 3:2 liegen. Feste Breite UND Höhe
   (statt aspect-ratio), damit auch ältere PDF-Engines das sauber rendern. */
.cover-teaser-image {
  display: block;
  align-self: flex-start;
  flex-shrink: 0;
  width: 40mm;
  height: 27mm;
  object-fit: cover;
  object-position: center;
}
.cover-teaser-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5mm;
  min-width: 0;
}
.cover-teaser-category {
  display: inline-block;
  align-self: flex-start;
  background-color: var(--cover-accent);
  font-size: 1.9mm;
  font-weight: bold;
  letter-spacing: 0.2mm;
  text-transform: uppercase;
  color: #fff;
  padding: 0.3mm 1.5mm;
  opacity: 0.85;
}
.cover-teaser-title {
  font-size: 3.1mm;
  font-weight: bold;
  color: #1a1a1a;
}