/* ============================================================
   Fuss eines Blogbeitrags — zurueck und blaettern
   ============================================================ */

.cd-beitragsnav {
  border-block-start: 1px solid var(--cd-linie-2);
  padding-block: var(--cd-a7);
}

.cd-beitragsnav__inhalt {
  display: grid;
  gap: var(--cd-a5);
}

/* --- Zurueck zur Uebersicht --- */
.cd-beitragsnav__zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-a2);
  justify-self: start;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-rot);
}

.cd-beitragsnav__stand {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .1em;
  color: var(--cd-text-schwach);
}

/* --- Blaettern --- */
/* Zwei gleich breite Felder. minmax(0, 1fr) statt 1fr, sonst
   sprengt ein langer Titel das Raster. */
.cd-beitragsnav__blaettern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1px;
  background: var(--cd-linie-2);
  border: 1px solid var(--cd-linie-2);
  border-radius: var(--cd-r-karte);
  overflow: hidden;
}

.cd-beitragsnav__nachbar {
  display: grid;
  gap: var(--cd-a2);
  padding: var(--cd-a5);
  background: var(--cd-weiss);
  color: var(--cd-dunkel);
  transition: background var(--cd-zeit) ease;
}
.cd-beitragsnav__nachbar:hover { background: var(--cd-flaeche-1); color: var(--cd-dunkel); }

/* Der naechste Beitrag richtet sich nach rechts aus — die
   Leserichtung des Blaetterns wird dadurch ohne Worte lesbar. */
.cd-beitragsnav__nachbar--nachher { text-align: end; }

.cd-beitragsnav__richtung {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-a2);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-text-schwach);
}
.cd-beitragsnav__nachbar--nachher .cd-beitragsnav__richtung { justify-content: flex-end; }

.cd-beitragsnav__titel {
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-h4);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

/* --- Pfeile ---
   Als Rahmen gezeichnet statt als Zeichen: Ein "←" im Linktext
   landet im zugaenglichen Namen und wird vorgelesen. */
.cd-beitragsnav__pfeil {
  flex: 0 0 auto;
  inline-size: 7px;
  block-size: 7px;
  border-block-start: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  transition: transform var(--cd-zeit) var(--cd-kurve);
}
.cd-beitragsnav__pfeil--zurueck { transform: rotate(-135deg); }
.cd-beitragsnav__pfeil--vor { transform: rotate(45deg); }

.cd-beitragsnav__zurueck:hover .cd-beitragsnav__pfeil--zurueck { transform: rotate(-135deg) translate(2px, -2px); }
.cd-beitragsnav__nachbar:hover .cd-beitragsnav__pfeil--vor { transform: rotate(45deg) translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .cd-beitragsnav__pfeil { transition: none; }
  .cd-beitragsnav__zurueck:hover .cd-beitragsnav__pfeil--zurueck { transform: rotate(-135deg); }
  .cd-beitragsnav__nachbar:hover .cd-beitragsnav__pfeil--vor { transform: rotate(45deg); }
}

/* Unter 600 px untereinander — nebeneinander bliebe je Feld kaum
   Platz fuer den Titel. */
@media (max-width: 600px) {
  .cd-beitragsnav__blaettern { grid-template-columns: minmax(0, 1fr); }
  .cd-beitragsnav__nachbar--nachher { text-align: start; }
  .cd-beitragsnav__nachbar--nachher .cd-beitragsnav__richtung { justify-content: flex-start; }
}