/* Landingpage.
   Eigenständiges Artefakt, nicht generiert. Nimmt die Farbtokens aus styles.css und
   übersetzt die Arcade-Optik des Covers in eine Seite, die etwas erklärt statt etwas
   zu bedienen. Courier trägt Überschriften, Kennzahlen und Labels; der Fließtext läuft
   in einer Proportionalschrift, weil Courier über mehrere Absätze nicht lesbar ist. */

.lp {
  --read: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --chrome: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  --edge: 4px solid var(--line);
  --drop: 8px 8px 0 rgba(0, 9, 70, 0.9);
  --drop-sm: 5px 5px 0 rgba(0, 9, 70, 0.85);
}

.lp * { box-sizing: border-box; }

/* ------------------------------------------------------------------ Kopf */

.lp-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 12px clamp(16px, 4vw, 40px);
  background: #06145f;
  border-bottom: 4px solid #00093d;
  box-shadow: 0 4px 0 var(--line);
  font-family: var(--chrome);
}

.lp-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 15px;
}

.lp-mark img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border: 2px solid var(--line);
  /* Kein image-rendering: pixelated. Das Cover ist Pixel-Art, wird hier aber von
     500px auf 34px verkleinert, und dabei erzeugt pixelated Treppen statt Schaerfe. */
}

.lp-top nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.lp-top nav a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.lp-top nav a:hover,
.lp-top nav a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

.lp-top .lp-cta {
  color: var(--accent-ink);
  background: var(--accent);
  border: 3px solid var(--accent-ink);
  padding: 7px 14px;
  box-shadow: var(--drop-sm);
  font-weight: 800;
}

/* ------------------------------------------------------------------ Raster */

.lp section { padding: clamp(48px, 8vw, 88px) clamp(16px, 4vw, 40px); }
.lp .inner { max-width: 1100px; margin: 0 auto; }
.lp .prose { max-width: 62ch; }

.lp h1, .lp h2, .lp h3 {
  font-family: var(--chrome);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
  margin: 0;
  text-wrap: balance;
}

.lp p { margin: 0; font-family: var(--read); line-height: 1.65; }

.lp .eyebrow {
  font-family: var(--chrome);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--line);
  margin: 0 0 14px;
}

/* ------------------------------------------------------------------ Hero */

.lp-hero {
  border-bottom: var(--edge);
  background:
    radial-gradient(1000px 460px at 78% 12%, rgba(255, 122, 26, 0.22), transparent 62%),
    radial-gradient(760px 420px at 12% 82%, rgba(52, 212, 255, 0.18), transparent 66%);
}

.lp-hero .inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.lp-hero h1 {
  font-size: clamp(2.3rem, 6.4vw, 4.3rem);
  line-height: 1.02;
  color: var(--accent);
  text-shadow: 5px 5px 0 var(--accent-ink);
}

.lp-hero .sub {
  margin-top: 22px;
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  color: var(--ink);
  max-width: 46ch;
}

.lp-hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.lp-btn {
  display: inline-block;
  font-family: var(--chrome);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 13px 22px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 3px solid var(--accent-ink);
  box-shadow: var(--drop-sm);
}

.lp-btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.lp-btn:hover,
.lp-btn:focus-visible { transform: translate(2px, 2px); box-shadow: 3px 3px 0 rgba(0, 9, 70, 0.85); }

.lp-cover {
  width: 100%;
  /* height: auto ist hier Pflicht: Ohne das bleibt die im HTML gesetzte Hoehe
     von 500px stehen, waehrend die Breite skaliert, und das quadratische Cover
     wird laenglich gezogen. aspect-ratio haelt es zusaetzlich quadratisch,
     auch wenn das Bild mal nicht 1:1 geliefert wird. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: var(--edge);
  box-shadow: var(--drop);
  display: block;
}

/* ------------------------------------------------------------------ Kennzahlen */

.lp-score {
  background: #06145f;
  border-bottom: var(--edge);
  padding-block: clamp(26px, 4vw, 40px);
}

.lp-score ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 22px;
  text-align: center;
}

.lp-score b {
  display: block;
  font-family: var(--chrome);
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 3px 3px 0 var(--accent-ink);
}

.lp-score span {
  display: block;
  margin-top: 9px;
  font-family: var(--chrome);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
}

/* ------------------------------------------------------------------ Bausteine */

.lp-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 34px;
}

.lp-card {
  background: var(--panel);
  border: var(--edge);
  box-shadow: var(--drop-sm);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-card h3 { font-size: 1rem; color: var(--accent); letter-spacing: 2px; }
.lp-card p { font-size: 0.97rem; color: var(--ink); }

/* ------------------------------------------------------------------ Zitate

   Drei gleich große gelbe Blöcke untereinander waren wieder dasselbe Problem wie
   bei den Karten. Jetzt drei Karten nebeneinander, jede mit eigener Akzentfarbe,
   einem großen Anführungszeichen und einem Sprecher mit Monogramm. Das Monogramm
   ist dasselbe Element wie bei den Gästen, damit die Seite eine Formensprache hat
   und nicht für jeden Abschnitt eine neue erfindet. */

.lp-quotes {
  border-block: var(--edge);
  background:
    radial-gradient(720px 300px at 50% 0%, rgba(52, 212, 255, 0.1), transparent 70%),
    #03105c;
}

.lp-quotes .inner > .eyebrow { margin-bottom: 4px; }

.lp-quotegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.lp-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 22px 24px 20px;
  background: var(--panel);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, transparent), transparent 52%), var(--panel);
  border: 3px solid rgba(52, 212, 255, 0.24);
  border-top: 6px solid var(--c);
  box-shadow: var(--drop-sm);
}

.lp-quote-mark {
  font-family: var(--chrome);
  font-size: 3.4rem;
  line-height: 0.6;
  color: var(--c);
  opacity: 0.55;
  height: 1.4rem;
}

.lp-quote blockquote {
  margin: 0;
  flex: 1;
  font-family: var(--chrome);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.42;
  font-weight: 700;
  color: var(--c);
  text-shadow: 2px 2px 0 var(--accent-ink);
}

.lp-quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 2px solid rgba(52, 212, 255, 0.2);
}

.lp-quote-who { display: flex; align-items: center; gap: 12px; min-width: 0; }

.lp-quote-who .gu-m { background: var(--c); }

.lp-quote-who > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.lp-quote-who strong { font-family: var(--read); font-size: 0.97rem; font-weight: 650; }

.lp-quote-who em {
  font-family: var(--chrome);
  font-style: normal;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.lp-quote-ep {
  align-self: flex-start;
  font-family: var(--chrome);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 11px;
  border: 2px solid rgba(52, 212, 255, 0.4);
}

.lp-quote-ep:hover, .lp-quote-ep:focus-visible { border-color: var(--c); color: var(--c); }

/* ------------------------------------------------------------------ Folgen

   52 gleich aussehende Kacheln kann niemand überfliegen. Deshalb sind die Folgen
   eine dichte Liste mit drei Ankern fürs Auge: dem Cover, das bei jeder Folge
   anders ist, der Podigee-Nummer in Monospace und der Jahresmarke als Zäsur. */

.lp-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 26px 0 22px;
  font-family: var(--chrome);
}

.lp-search input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 13px 15px;
  background: #04156a;
  border: 3px solid var(--line);
  color: var(--ink);
  font-family: var(--chrome);
  font-size: 15px;
}

.lp-search input::placeholder { color: var(--muted); }
.lp-search output { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; }

.lp-eps { list-style: none; margin: 0; padding: 0; }

.lp-eps .ep-jahr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 34px 0 12px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--line);
  font-family: var(--chrome);
  text-transform: uppercase;
  letter-spacing: 3px;
}

.lp-eps .ep-jahr span:first-child { font-size: 1.35rem; font-weight: 800; color: var(--accent); }
.lp-eps .ep-jahr span:last-child { font-size: 11px; color: var(--muted); }
.lp-eps .ep-jahr:first-child { margin-top: 6px; }

.lp-eps .ep {
  display: flex;
  align-items: stretch;
  gap: 8px;
  border-bottom: 1px solid rgba(52, 212, 255, 0.16);
}

.lp-eps .ep-main {
  display: grid;
  grid-template-columns: 72px 3.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 18px;
  flex: 1;
  min-width: 0;
  padding: 10px 12px 10px 0;
  text-decoration: none;
  color: var(--ink);
  border-left: 4px solid transparent;
}

.ep-cover {
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(52, 212, 255, 0.45);
  background: var(--panel);
}

.ep-no {
  font-family: var(--chrome);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--line);
  font-variant-numeric: tabular-nums;
  text-align: right;
  letter-spacing: -1px;
}

.ep-t {
  font-family: var(--read);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.3;
  min-width: 0;
}

.ep-meta {
  display: flex;
  gap: 16px;
  font-family: var(--chrome);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ep-alt {
  align-self: center;
  flex: none;
  font-family: var(--chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--muted);
  border: 1px solid rgba(131, 223, 244, 0.5);
  padding: 3px 6px;
  text-decoration: none;
}

.lp-eps .ep-main:hover,
.lp-eps .ep-main:focus-visible {
  background: rgba(52, 212, 255, 0.09);
  border-left-color: var(--accent);
}

.lp-eps .ep-main:hover .ep-t,
.lp-eps .ep-main:focus-visible .ep-t { color: var(--accent); }
.lp-eps .ep-main:hover .ep-cover { border-color: var(--accent); }
.ep-alt:hover, .ep-alt:focus-visible { color: var(--accent); border-color: var(--accent); }

.lp-eps .ep[hidden] { display: none; }

/* ------------------------------------------------------------------ Themen

   Jedes Thema bekommt eine eigene Akzentfarbe aus der Markenwelt. Die Anzahl steht
   groß daneben, damit man auf einen Blick sieht, wo der Schwerpunkt liegt. */

.lp-topics {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.lp-topics .tp a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 16px;
  height: 100%;
  padding: 18px 20px;
  background: var(--panel);
  border: 3px solid rgba(52, 212, 255, 0.3);
  border-left: 8px solid var(--tp);
  text-decoration: none;
  color: var(--ink);
}

.tp-n {
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--chrome);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--tp);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: center;
}

.lp-topics .tp strong {
  font-family: var(--chrome);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.9rem;
  color: var(--ink);
}

.tp-i {
  font-family: var(--read);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lp-topics .tp a:hover,
.lp-topics .tp a:focus-visible { border-color: var(--tp); background: var(--panel-strong); }
.lp-topics .tp a:hover strong { color: var(--tp); }

/* ------------------------------------------------------------------ Gäste

   Kompakte Zeilen mit Monogramm statt weiterer großer Kacheln: Es sind Personen,
   keine Themen, und sie sollen sich vom Rest der Seite unterscheiden. */

.lp-guests {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.lp-guests .gu a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  background: rgba(9, 39, 186, 0.5);
  border: 2px solid rgba(52, 212, 255, 0.28);
  text-decoration: none;
  color: var(--ink);
}

.gu-m {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--chrome);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.gu-b { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gu-b strong { font-family: var(--read); font-size: 0.98rem; font-weight: 600; }
.gu-b span {
  font-family: var(--chrome);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gu-n {
  margin-left: auto;
  font-family: var(--chrome);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--line);
  font-variant-numeric: tabular-nums;
}

.lp-guests .gu a:hover,
.lp-guests .gu a:focus-visible { border-color: var(--accent); background: var(--panel-strong); }

@media (max-width: 640px) {
  .lp-eps .ep-main { grid-template-columns: 56px minmax(0, 1fr); gap: 2px 14px; padding-right: 6px; }
  .ep-cover { width: 56px; height: 56px; grid-row: 1 / 3; }
  .ep-no { display: none; }
  .ep-meta { grid-column: 2; }
}

/* ------------------------------------------------------------------ Hosts */

.lp-hosts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 30px; }

.lp-host {
  background: var(--panel);
  border: var(--edge);
  box-shadow: var(--drop-sm);
  padding: 24px 22px;
}

.lp-host h3 { font-size: 1rem; color: var(--accent); letter-spacing: 2px; }
.lp-host p { margin-top: 10px; font-size: 0.97rem; }
.lp-host a { color: var(--line); font-family: var(--chrome); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; }

/* ------------------------------------------------------------------ Hören */

.lp-listen { border-top: var(--edge); background: #06145f; }

.lp-listen .row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

/* ------------------------------------------------------------------ Fuß */

.lp-foot {
  padding: 34px clamp(16px, 4vw, 40px) 56px;
  border-top: 4px solid #00093d;
  background: #041052;
  font-family: var(--chrome);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
}

.lp-foot .inner { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between; }
.lp-foot a { color: var(--muted); text-decoration: none; border-bottom: 1px solid rgba(131, 223, 244, 0.4); }
.lp-foot a:hover, .lp-foot a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------ Zugänglichkeit */

.lp a:focus-visible, .lp input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.lp-skip {
  position: absolute;
  left: -9999px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  font-family: var(--chrome);
  z-index: 30;
}
.lp-skip:focus { left: 12px; top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .lp-btn:hover, .lp-btn:focus-visible { transform: none; }
}

@media (max-width: 860px) {
  .lp-hero .inner { grid-template-columns: 1fr; }
  .lp-hero .cover-wrap { order: -1; max-width: 300px; }
}

/* Nur für Screenreader */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lp-guests a { gap: 6px; }
.lp-guests .meta,
.lp-topics .meta {
  font-family: var(--chrome);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
}

/* ------------------------------------------------------------------ Belegkarten

   Der Abschnitt "Vorgerechnet statt referiert" bestand aus vier gleichen blauen
   Kästen. Jetzt trägt jede Karte eine eigene Akzentfarbe, ein Piktogramm und einen
   herausgestellten Beleg, damit man die vier Aussagen überfliegen kann statt vier
   Textblöcke lesen zu müssen. Der Beleg ist immer der konkreteste Satz der Karte. */

.lp-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.lp-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 26px 28px;
  /* Erst der einfache Hintergrund als Rueckfall: Kennt ein Browser color-mix nicht,
     faellt sonst die ganze Deklaration weg und die Karte haette gar keinen Grund. */
  background: var(--panel);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, transparent) 0%, transparent 46%),
    var(--panel);
  border: 3px solid rgba(52, 212, 255, 0.26);
  border-top: 6px solid var(--c);
  box-shadow: var(--drop-sm);
}

.lp-card-mark {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  color: var(--c);
  opacity: 0.5;
  pointer-events: none;
}

.lp-card-mark svg { width: 100%; height: 100%; display: block; }

.lp-card h3 {
  font-size: 0.85rem;
  letter-spacing: 2.5px;
  color: var(--muted);
  padding-right: 56px;
}

.lp-card-lead {
  font-family: var(--read);
  font-size: 1.2rem;
  line-height: 1.35;
  font-weight: 650;
  color: var(--c);
  max-width: 26ch;
  padding-right: 24px;
}

.lp-card p:not(.lp-card-lead) {
  font-family: var(--read);
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--ink);
  opacity: 0.92;
}

@media (max-width: 560px) {
  .lp-card { padding: 22px 20px 24px; }
  .lp-card-mark { width: 34px; height: 34px; top: 14px; right: 14px; }
  .lp-card h3 { padding-right: 42px; }
  .lp-card-lead { font-size: 1.08rem; padding-right: 0; }
}

/* ----------------------------------------------------------- Fachartikel
   Die vierte Liste auf der Seite und damit die vierte Bauform: Folgen sind
   eine dichte Zeile, Themen sind Farbkacheln, Gaeste sind Monogramme. Artikel
   fuehren ueber das Titelbild, weil das der Unterschied zur Folgenliste ist. */

.lp-artikel { border-block: var(--edge); background: rgba(3, 16, 82, 0.4); }

.lp-sec-lead {
  max-width: 60ch;
  margin: 0 0 26px;
  font-family: var(--read);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--muted);
}

.lp-artikel-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
}

.ar { margin: 0; }

.ar-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  padding-bottom: 16px;
  background: var(--panel);
  border: 3px solid rgba(52, 212, 255, 0.26);
  text-decoration: none;
  box-shadow: var(--drop-sm);
}

.ar-link:hover, .ar-link:focus-visible {
  border-color: var(--accent);
  background: var(--panel-strong);
}

.ar-img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 3px solid rgba(0, 9, 70, 0.6);
}

.ar-kick {
  padding: 0 16px;
  font-family: var(--chrome);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--accent);
}

.ar-t {
  padding: 0 16px;
  font-family: var(--chrome);
  font-size: 1.02rem;
  line-height: 1.28;
  font-weight: 700;
  text-wrap: balance;
}

.lp-mehr {
  margin: 26px 0 0;
  font-family: var(--chrome);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

/* Der Feed-Knopf steht neben dem Link zur Uebersicht und muss sich davon
   unterscheiden, sonst liest man zwei gleich aussehende Links. Er braucht
   die hoehere Spezifitaet, sonst gewinnt der Unterstrich von `.lp-mehr a`. */
.lp-mehr a.lp-feed {
  border: 3px solid var(--accent);
  padding: 9px 15px;
}

.lp-mehr a.lp-feed:hover,
.lp-mehr a.lp-feed:focus-visible {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.lp-mehr a {
  color: var(--accent);
  border-bottom: 3px solid var(--accent);
  text-decoration: none;
  padding-bottom: 3px;
}

.lp-mehr a:hover, .lp-mehr a:focus-visible { color: #fff; border-color: #fff; }