/* DEUTSCHES WOCHENBLATT — Artikel-Kontinuität (Blättern), Prototyp R12
   Additiv, lädt NACH zeitung.css. Gleiche Grammatik wie das Blatt:
   Hierarchie über Typo/Linien/Weißraum — keine Karten, Schatten,
   Radien oder Gradients. Ressortfarbe nur als Navigationscode. */

.blaettern {
  border-top: 1px solid var(--dw-rule); /* Hairline: die Blätter-Navigation bleibt bewusst ruhig */
  margin-top: 30px;
  padding: 18px 0 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dw-gap);
}
.blaettern > * { min-width: 0; }

.blaettern .blatt {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.blaettern .nach {
  text-align: right;
  align-items: flex-end;
  border-left: 1px solid var(--dw-rule);
  padding-left: var(--dw-gap);
}

/* Richtungszeile (Sans, Ressortcode) */
.blaettern .richtung {
  font-family: var(--dw-sans);
  font-size: var(--dw-fs-kicker);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dw-ressort, var(--dw-accent));
}
.blaettern .richtung .pfeil { color: var(--dw-ressort, var(--dw-accent)); }
.blaettern .vor .pfeil { margin-right: 9px; }
.blaettern .nach .pfeil { margin-left: 9px; }

/* Kleine Vorzeile (Ressort · Format · Lesezeit) */
.blaettern .vorzeile {
  font-family: var(--dw-sans);
  font-size: var(--dw-fs-meta);
  color: var(--dw-meta);
}

/* Titelzeile (Serif) */
.blaettern .titel {
  font-family: var(--dw-serif);
  font-size: var(--dw-fs-list);
  font-weight: 600;
  line-height: 1.22;
  color: var(--dw-ink);
}
.blaettern .blatt:hover .titel,
.blaettern .blatt:focus-visible .titel {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--dw-ressort, var(--dw-accent));
}

/* Mobil: untereinander, beide linksbündig, Hairline dazwischen */
@media (max-width: 720px) {
  .blaettern {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .blaettern .nach {
    text-align: left;
    align-items: flex-start;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--dw-rule);
    margin-top: 18px;
    padding-top: 18px;
  }
  .blaettern .nach .pfeil { margin-left: 9px; }
}

/* Blätter-Navigation ist ein Web-Signal, im Druck raus */
@media print {
  .blaettern { display: none; }
}

/* ── R12: Pfeiltasten-Hinweis unter der Blätter-Navigation ── */
.blaettern .blatt-hinweis {
  grid-column: 1 / -1;
  font-family: var(--dw-sans);
  font-size: 0.75rem;
  color: var(--dw-meta);
  text-align: center;
  margin-top: 6px;
}
.blaettern .blatt-hinweis kbd {
  font-family: var(--dw-sans);
  font-size: 0.6875rem;
  border: 1px solid var(--dw-rule);
  padding: 0 5px;
}
@media (max-width: 720px) {
  .blaettern .blatt-hinweis { display: none; } /* Touch hat keine Pfeiltasten */
}

/* ── R12: Kernpunkte am Artikelkopf (WSJ-Muster, redaktionell) ── */
.kernpunkte {
  list-style: none;
  border-top: 2px solid var(--dw-ink);
  border-bottom: 1px solid var(--dw-rule);
  margin: 18px 0 22px;
  padding: 12px 0 14px;
}
.kernpunkte li {
  font-family: var(--dw-sans);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--dw-ink-soft);
  padding-left: 18px;
  position: relative;
}
.kernpunkte li + li { margin-top: 7px; }
.kernpunkte li::before {
  content: '';
  position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 2px;
  background: var(--dw-ressort, var(--dw-accent));
}

/* ── R12: "Weitere Beiträge"-Leiste ohne Inline-Styles (Grid-Fix iPad) ──
   Spans nur oberhalb der Stapel-Breakpoints setzen, damit die
   Mobil-Stapelung aus zeitung.css (lädt früher) nicht überschrieben wird. */
.ausgabe-leiste-artikel .al-grid { padding-top: 16px; }
.ausgabe-leiste-artikel .al-spalte:first-child { border-left: 0; padding-left: 0; }
@media (min-width: 1024px) {
  .ausgabe-leiste-artikel .al-spalte { grid-column: span 4; }
}
@media (max-width: 1023px) and (min-width: 621px) {
  .ausgabe-leiste-artikel .al-spalte { grid-column: span 2; } /* 6-Spalten-Grid: 3 nebeneinander */
}
@media (max-width: 620px) {
  .ausgabe-leiste-artikel .al-spalte { border-left: 0; padding-left: 0; }
}

/* ── R45: GOOD-NEWS-Kolumne (good-news.html) — Erklärband am Artikelkopf
   und gepunktete Trennlinie zwischen übernommenem Beitrag und Kommentar ── */
.gn-band {
  display: flex; align-items: center; gap: 16px;
  border-top: 2px solid var(--dw-goodnews, var(--dw-accent));
  border-bottom: 1px solid var(--dw-rule);
  max-width: 860px; /* bündig zur Artikelkopf-Spalte */
  margin: 18px auto 22px;
  padding: 12px 0 14px;
}
.gn-band .gn-portraet { /* R49 (Papa): Porträt statt Blase — persönlicher Absender */
  flex: 0 0 auto;
  width: 60px; height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
.gn-band p {
  font-family: var(--dw-sans);
  font-size: 0.98rem; line-height: 1.5;
  color: var(--dw-ink-soft);
}
.gn-trenn {
  border: 0; border-top: 2px dotted var(--dw-rule);
  margin: 26px 0;
}