/* ============================================================
   Blog-Artikel
   Eigene Datei: nutzt die Variablen aus style.css. Aufbau nach
   Vorbild: Inhalt links, Inhaltsverzeichnis und Autor rechts.
   ============================================================ */

.artikel {
  padding-top: calc(var(--nav-height) + var(--space-32));
  padding-bottom: var(--section-y);
}

.artikel__zurueck {
  font-family: var(--font-body);
  font-size: var(--text-klein);
  font-weight: 600;
  color: var(--hell-1);
  transition: color 0.2s ease;
}

.artikel__zurueck:hover {
  color: var(--akzent);
}

/* Mobil eine Spalte in der Reihenfolge Kopf, Seitenleiste, Inhalt */
.artikel__raster {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  margin-top: var(--space-32);
}

.artikel__titel {
  margin-top: var(--space-16);
}

.artikel__einleitung {
  margin-top: var(--space-32);
}

.artikel__einleitung .paragraph {
  margin-top: var(--space-16);
  max-width: none;
}

.artikel__trenner {
  width: 100%;
  margin-top: var(--space-32);
  border: 0;
  border-top: 1px solid var(--hairline);
}

.artikel__autorzeile {
  margin-top: var(--space-16);
}

/* ---------- Seitenleiste ---------- */

/* Einspaltig löst sich die Seitenleiste auf (display:contents): das
   Inhaltsverzeichnis bleibt vor dem Artikel, die Autorenbox rückt über die
   order-Werte ans Ende des Beitrags */
.artikel__seite {
  display: contents;
}

.artikel__kopf {
  order: 1;
}

.artikel__verzeichnis {
  order: 2;
}

.artikel__inhalt {
  order: 3;
}

.artikel__autor {
  order: 4;
}

.seiten-box__titel {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
}

.artikel__verzeichnis {
  padding: var(--space-32);
  border-radius: var(--radius);
  background-color: rgba(41, 96, 86, 0.3);
  border: 1px solid var(--hairline);
}

.verzeichnis-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.verzeichnis-link {
  display: block;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--hell-1);
  transition: background-color 0.2s ease;
}

/* Beim Überfahren und für den gerade sichtbaren Abschnitt (Klasse setzt
   artikel.js) liegt die hellere Markenfarbe hinter dem Eintrag */
.verzeichnis-link:hover,
.verzeichnis-link.is-aktiv {
  background-color: var(--marke-hell);
}

.autor-zeile__text {
  margin-top: var(--space-16);
  max-width: none;
}

/* ---------- Inhalt ---------- */

.artikel__cover {
  display: block;
  width: 100%;
  /* height:auto, sonst erzwingt das height-Attribut des Bildes eine feste
     Pixelhöhe und das Banner wird verzerrt */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

/* Abstände laut Design-System: über H2 immer 48, H2 zu Body 16,
   Absätze untereinander 16 */
.artikel__inhalt .heading-2 {
  margin-top: var(--space-48);
  /* Anker aus dem Inhaltsverzeichnis nicht unter der fixen Navbar landen lassen */
  scroll-margin-top: calc(var(--nav-height) + var(--space-16));
}

.artikel__inhalt .heading-3 {
  margin-top: var(--space-32);
}

.artikel__inhalt .paragraph {
  margin-top: var(--space-16);
  max-width: none;
}

.artikel__liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-16);
  padding-left: var(--space-24);
  list-style: disc;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--text-gedaempft);
}

.artikel__aktion {
  margin-top: var(--space-48);
}

/* ---------- Ab mittleren Viewports: zwei Spalten ---------- */

@media (min-width: 64rem) {
  .artikel__raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: var(--space-64);
    row-gap: var(--space-48);
    align-items: start;
  }

  .artikel__kopf {
    grid-column: 1;
    grid-row: 1;
  }

  .artikel__inhalt {
    grid-column: 1;
    grid-row: 2;
  }

  /* Seitenleiste läuft über beide Zeilen und bleibt beim Scrollen stehen.
     Ab hier wieder als eigener Block, mobil ist sie per display:contents
     aufgelöst. */
  .artikel__seite {
    display: flex;
    flex-direction: column;
    gap: var(--space-48);
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(var(--nav-height) + var(--space-24));
  }
}