/* Newsletter „Mehr als Geld": die Übersicht (newsletter.php) und die
   einzelne Ausgabe (newsletter-ausgabe.php).
   Eigene Datei wie recht.css — beide Seiten haben ein Layout, das sonst
   nirgends vorkommt: eine Liste zum Reinlesen und ein Brief ohne alles. */

/* ---------- Übersicht: die Ausgaben ----------
   Karten statt Aufzählung: jede Zeile ist ein Weg in eine Ausgabe. Nummer
   links, Titel und Vorschauzeile in der Mitte, Lesedauer rechts. */
.erbe .nl-liste {
  list-style: none;
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
  margin-top: var(--raum-m);
  max-width: 920px;
}
.erbe .nl-liste a {
  display: grid;
  grid-template-columns: 4.2em 1fr auto;
  column-gap: clamp(14px, 2.2vw, 30px);
  row-gap: 6px;
  align-items: baseline;
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.8vw, 36px);
  background-color: var(--white);
  border-radius: var(--radius-panel);
  color: var(--black);
  text-decoration: none;
  transition: box-shadow var(--transition-base, .25s ease), transform var(--transition-base, .25s ease);
}
.erbe .nl-liste a:hover,
.erbe .nl-liste a:focus-visible {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
/* Die Karte ist selbst die Geste; der Pfeil der Textlinks waere doppelt. */
.erbe .nl-liste a::before,
.erbe .nl-liste a::after,
.erbe .nl-zurueck::before,
.erbe .nl-zurueck::after { content: none; }

.erbe .nl-nr {
  font-size: var(--fs-klein);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold-dark);
  white-space: nowrap;
}
.erbe .nl-titel {
  font-size: var(--fs-gross);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}
.erbe .nl-vorschau {
  grid-column: 2;
  font-size: var(--fs-text);
  line-height: 1.5;
  color: var(--gray-dark);
}
.erbe .nl-dauer {
  grid-column: 3;
  grid-row: 1;
  font-size: var(--fs-klein);
  color: var(--gray-mid);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .erbe .nl-liste a { grid-template-columns: 1fr auto; border-radius: 15px; }
  .erbe .nl-nr { grid-column: 1; grid-row: 1; }
  .erbe .nl-dauer { grid-column: 2; grid-row: 1; }
  .erbe .nl-titel,
  .erbe .nl-vorschau { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .erbe .nl-liste a { transition: none; }
  .erbe .nl-liste a:hover { transform: none; }
}

/* ---------- Die einzelne Ausgabe ----------
   Oben ein Knopf zurück, darunter der Brief. Kein Menü, kein Fuß: Wer hier
   liest, soll lesen. */
.erbe .nl-leiste {
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: var(--cream);
  border-bottom: 1px solid rgba(43, 43, 43, .1);
  padding: 12px 0;
}
.erbe .nl-leiste .wrap,
.erbe .nl-brief .wrap { max-width: 720px; }

.erbe .nl-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 1px solid var(--beige-dark);
  border-radius: 999px;
  background-color: var(--white);
  color: var(--black);
  font-size: var(--fs-klein);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease;
}
.erbe .nl-zurueck:hover,
.erbe .nl-zurueck:focus-visible { background-color: var(--beige-light); }
.erbe .nl-zurueck svg { width: 16px; height: 16px; flex: none; }

.erbe .nl-brief {
  padding: clamp(40px, 6vw, 84px) 0 clamp(72px, 9vw, 128px);
}
.erbe .nl-brief .nl-nr { display: block; margin-bottom: 10px; }
.erbe .nl-brief h1 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.12;
  color: var(--black);
  margin-bottom: clamp(28px, 3.6vw, 46px);
  text-wrap: balance;
}
.erbe .nl-text p {
  font-size: var(--fs-text);
  line-height: 1.7;
  color: var(--black);
  max-width: none;
  margin-bottom: 1.05em;
}
.erbe .nl-text p:last-child { margin-bottom: 0; }
.erbe .nl-text img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 8px 0;
}
.erbe .nl-text a { text-decoration: underline; text-underline-offset: 3px; }