/* ==========================================================================
   Herz & Darm — Blog

   Warum eine eigene Datei und nicht wie sonst ein <style>-Block im Kopf der
   Seite: Blogseiten entstehen automatisch und werden viele. Derselbe
   Style-Block in hundert Artikeln wäre hundertmal derselbe Ballast; als eigene
   Datei lädt der Browser ihn einmal und hat ihn danach im Zwischenspeicher.

   Alle Werte kommen aus den Variablen in stil.css. Hier steht kein einziger
   Farbwert im Klartext — eine Änderung der CI erreicht den Blog dadurch von
   selbst, sobald die Seiten neu erzeugt werden.
   ========================================================================== */

/* --------------------------------------------------------------- Grundlage */

.blogseite {
  --lesebreite: 760px;      /* ca. 65 Zeichen je Zeile bei 18px Fließtext */

  /* Obergrenze für die Höhe jedes Artikelbildes.
     Ohne sie bestimmt allein die Bilddatei, wie hoch ein Bild wird: Ein Foto
     aus der Kamera (3:2) füllte randlos auf einem 2000px breiten Bildschirm
     1335px Höhe — mehr als der ganze sichtbare Bereich, der Text darunter war
     weg. Ein Hochformat in Lesebreite kam auf 1140px. Der zweite Wert deckelt
     grosse Bildschirme, `vh` sorgt dafür, dass auf jedem Gerät noch Text neben
     dem Bild zu sehen ist. */
  --bild-hoehe: min(70vh, 620px);
  --bild-hoehe-buehne: min(58vh, 480px);  /* Titelbild und randloses Bild */
}

/* Das hidden-Attribut muss stärker sein als jede Klasse.
   Der Browser bringt zwar [hidden] { display: none } mit, aber diese Regel ist
   schwächer als ein Klassenselektor: `.kachel { display: flex }` hat sie
   ausgehebelt, und die Suche im Archiv blendete dann nichts aus, obwohl sie
   das Attribut korrekt gesetzt hatte. */
[hidden] { display: none !important; }

.nur-fuer-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------- Brotkrumen

   .brotkrumen gibt es in stil.css schon - dort als kleine helle Zeile im
   dunklen Seitenkopf. Die Blogfassung ist eine eigene, waagerechte Leiste und
   wird deshalb auf Blogseiten begrenzt. Ohne diese Eingrenzung wuerde jede
   Seite, die blog.css laedt (die Startseite wegen des Kachelmoduls), ihre
   Brotkrumen mit umgestellt bekommen.
   -------------------------------------------------------------------------- */

/* Der Abstand nach oben ist kein Geschmack, sondern Notwendigkeit: Das
   Pillen-Menü liegt fest über der Seite (position:fixed, top:18px). Ohne
   diesen Platz stünde die Brotkrume darunter. */
.blogseite .brotkrumen {
  max-width: var(--bahn-breit);
  margin: 0 auto;
  padding: clamp(86px, 9vw, 104px) var(--rand) 0;
}
.blogseite .brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--text-leise);
}
.blogseite .brotkrumen li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--linie);
}
.blogseite .brotkrumen a { color: var(--text-leise); text-decoration: none; }
.blogseite .brotkrumen a:hover { color: var(--gold); text-decoration: underline; }
.blogseite .brotkrumen [aria-current="page"] { color: var(--blau); font-weight: 600; }

/* ==========================================================================
   Archiv
   ========================================================================== */

.archiv-kopf {
  background: linear-gradient(160deg, var(--blau), var(--blau-licht));
  color: var(--weiss);
  position: relative;
  overflow: hidden;
}
.archiv-kopf::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 80% at 80% 20%, rgba(200, 155, 120, .18), transparent 70%);
}
.archiv-kopf > * { position: relative; z-index: 1; }
.archiv-kopf h1 { color: var(--weiss); margin-bottom: 14px; }

/* Platz für das feste Pillen-Menü, so viel wie bei .seitenkopf in stil.css —
   der Blogkopf soll sich wie jede andere Unterseite anfühlen. */
.archiv-kopf .bahn--flach { padding-top: clamp(120px, 14vw, 168px); }
.archiv-kopf .brotkrumen { padding: 0 0 0; margin-bottom: 18px; }
.archiv-kopf .brotkrumen ol { color: var(--auf-dunkel-leise); }
.archiv-kopf .brotkrumen a { color: var(--auf-dunkel); }
.archiv-kopf .brotkrumen [aria-current="page"] { color: var(--weiss); }

.archiv-einleitung {
  max-width: var(--mass-schmal);
  font-size: 17px;
  line-height: 1.7;
  color: var(--auf-dunkel);
  margin: 0;
}

/* Filterleiste — bleibt beim Scrollen oben stehen, wie die Sprungleiste
   auf den Landingpages. */
.archiv-filter {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linie);
}
.archiv-filter .bahn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.archiv-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.archiv-chips a {
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-pille);
  padding: 9px 18px;
  font-family: var(--kopf);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--blau);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}
.archiv-chips a:hover { border-color: var(--gold); color: var(--gold); }
.archiv-chips a.an {
  background: var(--blau);
  border-color: var(--blau);
  color: var(--weiss);
}

.archiv-suche input {
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-pille);
  padding: 10px 18px;
  font-family: var(--lauf);
  font-size: 15px;
  color: var(--blau);
  min-width: 240px;
  background: var(--weiss);
}
.archiv-suche input:focus { outline: 3px solid var(--gold); outline-offset: 2px; }

.archiv-leer {
  padding: 60px 0;
  text-align: center;
  color: var(--text-leise);
  font-size: 16px;
}

/* ------------------------------------------------------- Hervorgehoben */

.featured {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--weiss);
  box-shadow: var(--schatten);
  margin-bottom: 34px;
}
.featured-bild img { width: 100%; height: 100%; object-fit: cover; }
.featured-text { padding: clamp(24px, 3vw, 40px); align-self: center; }
.featured-text h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 10px 0 12px; }
.featured-text h2 a { color: var(--blau); text-decoration: none; }
.featured-text h2 a:hover { color: var(--gold); }
.featured-text p { color: var(--text-leise); font-size: 16px; }
.featured-text .knopf { margin-top: 18px; }

/* ------------------------------------------------------------- Kacheln */

.kachelraster {
  display: grid;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, 1fr);
}

.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.kachel:hover,
.kachel:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--schatten-hoch);
  border-color: var(--gold);
}

.kachel-bild { aspect-ratio: 16 / 9; overflow: hidden; background: var(--flaeche-2); }
.kachel-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.kachel:hover .kachel-bild img { transform: scale(1.04); }

.kachel-text { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }

.kachel-kategorie {
  align-self: flex-start;
  font-family: var(--kopf);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.kachel-titel { font-size: 18.5px; line-height: 1.35; margin: 0 0 10px; }
.kachel-titel a { color: var(--blau); text-decoration: none; }
.kachel:hover .kachel-titel a { color: var(--gold); }

/* Die ganze Kachel ist klickbar, das Link-Element bleibt aber der Titel.
   Ein Link um den gesamten Inhalt würde einem Screenreader Bild, Anriss und
   Datum als Linktext vorlesen. */
.kachel-titel a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.kachel-anriss {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-leise);
  margin: 0 0 16px;
  flex: 1;
}

.kachel-meta {
  font-size: 13px;
  color: var(--text-leise);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.kachel-meta .punkt,
.artikel-meta .punkt { color: var(--linie); }

.kachel-weiter {
  margin-top: 14px;
  font-family: var(--kopf);
  font-weight: 700;
  font-size: 14px;
  color: var(--gold);
}
.kachel-weiter::after { content: " →"; }

/* -------- Layout-Varianten (Konzept 7.3) — gleiches Markup, anderes CSS ---- */

.kachelraster--magazin > .kachel:first-child { grid-column: span 2; }
.kachelraster--magazin > .kachel:first-child .kachel-titel { font-size: 24px; }

.kachelraster--liste { grid-template-columns: 1fr; }
.kachelraster--liste .kachel { flex-direction: row; }
.kachelraster--liste .kachel-bild { flex: 0 0 320px; aspect-ratio: 4 / 3; }

.kachelraster--masonry { display: block; column-count: 3; column-gap: 26px; }
.kachelraster--masonry .kachel { break-inside: avoid; margin-bottom: 26px; }

.kachelraster--minimal .kachel-bild { display: none; }

/* -------------------------------------------------------- Seitennavigation */

.seitennav { margin-top: 42px; }
.seitennav ul {
  display: flex;
  gap: 8px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.seitennav a,
.seitennav span {
  display: block;
  min-width: 42px;
  padding: 10px 14px;
  text-align: center;
  border: 1.5px solid var(--linie);
  border-radius: var(--radius);
  font-family: var(--kopf);
  font-weight: 600;
  font-size: 15px;
  color: var(--blau);
  text-decoration: none;
}
.seitennav a:hover { border-color: var(--gold); color: var(--gold); }
.seitennav [aria-current="page"] {
  background: var(--blau);
  border-color: var(--blau);
  color: var(--weiss);
}

/* ==========================================================================
   Artikelseite
   ========================================================================== */

/* `overflow-x: clip` fängt den Ausbruch des randlosen Bildes ab.
   Es rechnet mit `100vw`, und `vw` misst einschliesslich der Scrollleiste —
   die Seite liess sich dadurch um deren Breite (gemessen: 8px) seitlich
   schieben. `clip` statt `hidden`, weil `hidden` einen Scrollbereich eröffnet
   und die mitlaufende Seitenleiste (`.artikel-leiste`, position: sticky) an
   dessen Rand binden würde. */
.artikelseite {
  padding-bottom: clamp(40px, 6vw, 80px);
  overflow-x: clip;
}

.artikel {
  max-width: var(--bahn-breit);
  margin: 0 auto;
  padding: 0 var(--rand);
}

/* Mit Seitenleiste: Lesespalte links, mitlaufende Leiste rechts. */
.artikelseite--leiste .artikel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
}
.artikelseite--leiste .artikel-kopf,
.artikelseite--leiste .artikel-titelbild { grid-column: 1 / -1; }

.artikel-kopf {
  max-width: var(--lesebreite);
  margin: 0 auto;
  padding: 30px 0 26px;
}
.artikelseite--leiste .artikel-kopf { margin: 0; }

.artikel-kategorie {
  display: inline-block;
  font-family: var(--kopf);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  margin-bottom: 14px;
}
.artikel-kategorie:hover { color: var(--gold-dunkel); text-decoration: underline; }

.artikel-kopf h1 { margin-bottom: 16px; }

.artikel-anriss {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--text-leise);
  margin: 0 0 20px;
}

.artikel-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-leise);
  margin: 0;
}
.artikel-autor { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--blau); }
.artikel-autor img { border-radius: 50%; width: 32px; height: 32px; object-fit: cover; }
.artikel-stand { color: var(--gold); font-weight: 600; }

.artikel-titelbild {
  max-width: 1040px;
  margin: 0 auto 36px;
}
/* Das Titelbild ist eine Bühne über dem Text, kein Poster: Höhe gedeckelt,
   der Überschuss wird beschnitten statt gestaucht (`cover` statt `fill` — ein
   verzerrtes Gesicht fiele sofort auf). Beschnitten wird zur Mitte hin. */
.artikel-titelbild img {
  width: 100%;
  max-height: var(--bild-hoehe-buehne);
  object-fit: cover;
  border-radius: var(--radius);
}
.artikel-titelbild figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-leise);
  text-align: center;
}

/* ------------------------------------------------------------- Lesespalte */

.artikel-koerper {
  max-width: var(--lesebreite);
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
}
.artikelseite--leiste .artikel-koerper { margin: 0; }

.artikel-koerper > h2 {
  margin: 44px 0 16px;
  font-size: clamp(23px, 2.2vw, 28px);
  scroll-margin-top: 24px;
}
.artikel-koerper > h3 {
  margin: 34px 0 12px;
  font-size: 20px;
  scroll-margin-top: 24px;
}
.artikel-koerper > h4 {
  margin: 26px 0 10px;
  font-size: 18px;
  font-weight: 700;
  scroll-margin-top: 24px;
}
.artikel-koerper > p { margin: 0 0 1.15em; }
/* Fließtextlinks — ausdrücklich ohne Schaltflächen.
   `.artikel-koerper a` ist mit zwei Bestandteilen stärker als die einzelne
   Klasse `.knopf--gold` und hat deren weiße Schrift überschrieben: Der
   Abschluss-CTA steht im Artikelkörper, sein Knopf trug damit goldene Schrift
   auf goldenem Grund und war leer. Das `:not()` sagt, was gemeint ist —
   Fließtext, nicht jede Verknüpfung im Körper. */
.artikel-koerper a:not(.knopf) { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.artikel-koerper a:not(.knopf):hover { color: var(--gold-dunkel); }

.artikel-liste { margin: 0 0 1.2em; padding-left: 1.3em; }
.artikel-liste li { margin-bottom: .5em; }
.artikel-liste li::marker { color: var(--gold); }

.artikel-bild { margin: 34px 0; }
.artikel-bild img {
  border-radius: var(--radius);
  width: 100%;
  max-height: var(--bild-hoehe);
  object-fit: cover;
}
.artikel-bild figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--text-leise);
}
.artikel-bild--breit { margin-left: -60px; margin-right: -60px; }
.artikel-bild--voll {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}
/* Randlos ist schon durch die Breite dominant — deshalb die niedrigere
   Bühnenhöhe, sonst schiebt ein einziges Bild den ganzen Text aus dem Bild. */
.artikel-bild--voll img {
  border-radius: 0;
  max-height: var(--bild-hoehe-buehne);
}

.artikel-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 30px 0;
  padding: 0;
}
.artikel-galerie img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.artikel-zitat {
  margin: 34px 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--gold);
}
.artikel-zitat blockquote { margin: 0; }
.artikel-zitat p {
  font-family: var(--kopf);
  font-size: 21px;
  line-height: 1.5;
  color: var(--blau);
  margin: 0;
}
.artikel-zitat figcaption { margin-top: 10px; font-size: 14px; color: var(--text-leise); }

.artikel-trenner {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: 44px auto;
  width: 120px;
}

/* --------------------------------------------------------- Hinweisboxen

   Auch hier eine Eingrenzung auf Blogseiten: index.html benutzt .hinweisbox
   bereits fuer die kleinen Hinweise im Rezeptformular. Ohne .blogseite davor
   bekaemen die einen goldenen Balken und 30 Pixel Abstand dazu.
   -------------------------------------------------------------------------- */

.blogseite .hinweisbox {
  display: flex;
  gap: 16px;
  margin: 30px 0;
  padding: 20px 24px;
  border-radius: var(--radius);
  border-left: 4px solid var(--gold);
  background: var(--flaeche);
  font-size: 16.5px;
  line-height: 1.65;
}
.blogseite .hinweisbox p { margin: 0; }
.blogseite .hinweisbox b { display: block; font-family: var(--kopf); color: var(--blau); margin-bottom: 5px; }
.blogseite .hinweisbox-symbol { flex: none; width: 24px; height: 24px; color: var(--gold); }
.blogseite .hinweisbox-symbol svg { width: 24px; height: 24px; }

.blogseite .hinweisbox--tipp    { border-left-color: var(--gold-hell); }
.blogseite .hinweisbox--wichtig { border-left-color: var(--blau); background: var(--flaeche-2); }
.blogseite .hinweisbox--wichtig .hinweisbox-symbol { color: var(--blau); }
.blogseite .hinweisbox--warnung { border-left-color: #B4472F; background: #FDF5F3; }
.blogseite .hinweisbox--warnung .hinweisbox-symbol { color: #B4472F; }

/* ------------------------------------------------------- Kernaussagen */

.kernaussagen {
  margin: 0 0 36px;
  padding: 26px 30px;
  background: linear-gradient(150deg, var(--blau), var(--blau-licht));
  border-radius: var(--radius);
  color: var(--auf-dunkel);
}
.kernaussagen h2 {
  color: var(--weiss);
  font-size: 17px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.kernaussagen ul { margin: 0; padding-left: 1.2em; }
.kernaussagen li { margin-bottom: .6em; font-size: 16.5px; line-height: 1.6; }
.kernaussagen li::marker { color: var(--gold-hell); }

/* -------------------------------------------------- Inhaltsverzeichnis */

.artikel-toc {
  margin: 0 0 36px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.artikel-toc summary {
  padding: 16px 22px;
  cursor: pointer;
  font-family: var(--kopf);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--blau);
  list-style: none;
}
.artikel-toc summary::-webkit-details-marker { display: none; }
.artikel-toc summary::after { content: " ▾"; color: var(--gold); }
.artikel-toc details[open] summary::after { content: " ▴"; }
.artikel-toc ol { margin: 0; padding: 0 22px 18px 40px; }
.artikel-toc li { margin-bottom: .45em; font-size: 15.5px; }
.artikel-toc li.stufe-3 { margin-left: 18px; font-size: 14.5px; }
.artikel-toc a { color: var(--text); text-decoration: none; }
.artikel-toc a:hover { color: var(--gold); text-decoration: underline; }
.artikel-toc a.aktiv { color: var(--gold); font-weight: 600; }

/* --------------------------------------------------------------- Tabelle */

.tabellenrolle { overflow-x: auto; margin: 30px 0; }
.artikel-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  min-width: 520px;
}
.artikel-tabelle th,
.artikel-tabelle td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.artikel-tabelle thead th {
  font-family: var(--kopf);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--blau);
  background: var(--flaeche-2);
}
.artikel-tabelle tbody tr:nth-child(even) { background: var(--flaeche); }

/* ------------------------------------------------------- Fragen (FAQ) */

.artikel-fragen { margin: 34px 0; }
.artikel-fragen details { border-bottom: 1px solid var(--linie); }
.artikel-fragen summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}
.artikel-fragen summary::-webkit-details-marker { display: none; }
.artikel-fragen summary span:first-child {
  font-family: var(--kopf);
  font-weight: 600;
  font-size: 17px;
  color: var(--blau);
  line-height: 1.4;
}
.artikel-fragen .plus { flex: none; color: var(--gold); font-size: 24px; line-height: 1; transition: transform .25s; }
.artikel-fragen details[open] .plus { transform: rotate(45deg); }
.artikel-fragen details p { margin: 0; padding: 0 34px 18px 0; font-size: 16.5px; color: var(--text-leise); }

/* ------------------------------------------------------------- Schritte */

.artikel-schritte { list-style: none; margin: 34px 0; padding: 0; counter-reset: schritt; }
.artikel-schritte li { display: flex; gap: 18px; padding-bottom: 24px; }
.schritt-nummer {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--weiss);
  font-family: var(--kopf);
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.artikel-schritte b { display: block; font-family: var(--kopf); color: var(--blau); font-size: 17px; margin-bottom: 5px; }
.artikel-schritte p { margin: 0; font-size: 16.5px; color: var(--text-leise); }

/* --------------------------------------------------- Abstände (Editor) */

/* Vier Stufen je Richtung aus dem Element-Panel. !important, weil die
   Elementregeln oben (h2, figure, Spalten) eigene Ränder mit höherer
   Spezifität setzen — und eine ausdrückliche Wahl im Editor gewinnen soll. */
.artikel-koerper .abstand-oben-keiner  { margin-top: 0 !important; }
.artikel-koerper .abstand-oben-klein   { margin-top: .5em !important; }
.artikel-koerper .abstand-oben-gross   { margin-top: 3em !important; }
.artikel-koerper .abstand-unten-keiner { margin-bottom: 0 !important; }
.artikel-koerper .abstand-unten-klein  { margin-bottom: .5em !important; }
.artikel-koerper .abstand-unten-gross  { margin-bottom: 3em !important; }

/* ------------------------------------------------------------- Spalten */

.artikel-spalten { display: grid; gap: 26px; margin: 30px 0; align-items: start; }
.artikel-spalten--2,
.artikel-spalten--1-1 { grid-template-columns: 1fr 1fr; }
.artikel-spalten--1-2 { grid-template-columns: 1fr 2fr; }
.artikel-spalten--2-1 { grid-template-columns: 2fr 1fr; }
.artikel-spalten--3,
.artikel-spalten--1-1-1 { grid-template-columns: repeat(3, 1fr); }
.artikel-spalte { min-width: 0; }
.artikel-spalte > :first-child { margin-top: 0; }
.artikel-spalte > :last-child { margin-bottom: 0; }

/* ------------------------------------------------- Zwei-Klick-Lösung */

.zweiklick {
  position: relative;
  margin: 34px 0;
  padding: 30px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche-2);
  text-align: center;
  overflow: hidden;
}
.zweiklick img { width: 100%; object-fit: cover; opacity: .35; position: absolute; inset: 0; height: 100%; }
.zweiklick-innen { position: relative; z-index: 1; }
.zweiklick-text { font-size: 15px; color: var(--text-leise); margin: 0 0 16px; }
.zweiklick-text b { color: var(--blau); font-family: var(--kopf); font-size: 17px; }
.zweiklick-quelle { font-size: 12.5px; color: var(--text-leise); margin: 12px 0 0; }
.zweiklick iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; }

/* ------------------------------------------------------------- Download */

.artikel-download {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 30px 0;
  padding: 18px 22px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  text-decoration: none;
  box-shadow: var(--schatten);
  transition: border-color .25s, box-shadow .25s;
}
.artikel-download:hover { border-color: var(--gold); box-shadow: var(--schatten-hoch); }
.artikel-download-symbol { flex: none; color: var(--gold); }
.artikel-download-symbol svg { width: 26px; height: 26px; }
.artikel-download b { display: block; font-family: var(--kopf); color: var(--blau); font-size: 16px; }
.artikel-download small { color: var(--text-leise); font-size: 13px; }

/* -------------------------------------------------- Handlungsaufforderung */

.artikel-cta {
  margin: 44px 0;
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--blau), var(--blau-licht));
  color: var(--auf-dunkel);
  position: relative;
  overflow: hidden;
}
.artikel-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 70% at 82% 25%, rgba(200, 155, 120, .18), transparent 70%);
}
.artikel-cta > * { position: relative; z-index: 1; }
.artikel-cta h2 { color: var(--weiss); font-size: 23px; margin-bottom: 10px; }
.artikel-cta p { font-size: 16.5px; margin-bottom: 20px; }

/* --------------------------------------------------------- Formular */

.artikel-formular {
  margin: 40px 0;
  padding: 30px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.artikel-formular h2 { font-size: 21px; margin-bottom: 8px; }
.artikel-formular > p { color: var(--text-leise); font-size: 15px; margin-bottom: 20px; }
.artikel-formular label {
  display: block;
  font-family: var(--kopf);
  font-weight: 600;
  font-size: 14px;
  color: var(--blau);
  margin-bottom: 14px;
}
.artikel-formular input,
.artikel-formular textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1.5px solid var(--linie);
  border-radius: var(--radius);
  font-family: var(--lauf);
  font-size: 15.5px;
  color: var(--blau);
  background: var(--weiss);
}

/* ------------------------------------------------------------ Verweis */

.artikel-verweis {
  display: block;
  margin: 30px 0;
  padding: 20px 24px;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: var(--flaeche);
  text-decoration: none;
}
.artikel-verweis:hover { background: var(--flaeche-2); }
.artikel-verweis-marke {
  display: block;
  font-family: var(--kopf);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}
.artikel-verweis-titel { font-family: var(--kopf); font-weight: 700; font-size: 17px; color: var(--blau); }

/* -------------------------------------------------------- Schlagwörter */

.artikel-schlagwoerter {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  list-style: none;
  margin: 30px 0;
  padding: 0;
}
.artikel-schlagwoerter li {
  background: var(--flaeche-2);
  border-radius: var(--radius-pille);
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-leise);
}

/* -------------------------------------------------------------- Teilen */

.artikel-teilen {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 34px 0;
  padding: 20px 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.artikel-teilen > span {
  font-family: var(--kopf);
  font-weight: 700;
  font-size: 14px;
  color: var(--blau);
}
.artikel-teilen > div { display: flex; gap: 9px; flex-wrap: wrap; }
.artikel-teilen a,
.artikel-teilen button {
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-pille);
  background: var(--weiss);
  padding: 8px 16px;
  font-family: var(--kopf);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--blau);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.artikel-teilen a:hover,
.artikel-teilen button:hover { border-color: var(--gold); color: var(--gold); }

/* ----------------------------------------------------------- Autorenbox */

.artikel-autorbox {
  display: flex;
  gap: 20px;
  margin: 34px 0;
  padding: 26px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.artikel-autorbox img { border-radius: 50%; width: 72px; height: 72px; object-fit: cover; flex: none; }
.artikel-autorbox b { display: block; font-family: var(--kopf); font-size: 17px; color: var(--blau); }
.artikel-autorbox-rolle { display: block; font-size: 13.5px; color: var(--gold); margin-bottom: 8px; }
.artikel-autorbox p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-leise); }
.artikel-autorbox-links { margin-top: 10px !important; display: flex; gap: 14px; }

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

.artikel-leiste {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.artikel-leiste .artikel-toc { margin: 0; }
.artikel-leiste .artikel-cta { margin: 0; padding: 24px; }
.artikel-leiste .artikel-cta h2 { font-size: 19px; }
.artikel-leiste .artikel-cta p { font-size: 15px; }

/* ------------------------------------------------------ Verwandte unten */

.artikel-verwandte { padding-top: clamp(40px, 5vw, 64px); }
.artikel-verwandte h2 { margin-bottom: 26px; }

/* ==========================================================================
   Kleine Bildschirme
   ========================================================================== */

@media (max-width: 1080px) {
  .kachelraster { grid-template-columns: repeat(2, 1fr); }
  .kachelraster--masonry { column-count: 2; }
  .kachelraster--magazin > .kachel:first-child { grid-column: span 2; }

  .artikelseite--leiste .artikel { grid-template-columns: 1fr; gap: 0; }
  .artikel-leiste { position: static; margin-top: 40px; }
}

@media (max-width: 760px) {
  .kachelraster { grid-template-columns: 1fr; }
  .kachelraster--masonry { column-count: 1; }
  .kachelraster--magazin > .kachel:first-child { grid-column: auto; }

  .featured { grid-template-columns: 1fr; }
  .kachelraster--liste .kachel { flex-direction: column; }
  .kachelraster--liste .kachel-bild { flex: none; aspect-ratio: 16 / 9; }

  .artikel-koerper { font-size: 17px; }
  .artikel-bild--breit { margin-left: 0; margin-right: 0; }
  .artikel-spalten { grid-template-columns: 1fr; } /* jede Aufteilung: untereinander, links zuerst */

  .archiv-filter { position: static; }
  .archiv-suche input { min-width: 0; width: 100%; }
}

/* ==========================================================================
   Drucken — Navigation, Teilen und Handlungsaufforderung fliegen raus,
   externe Adressen werden ausgeschrieben (Konzept 8.3).
   ========================================================================== */

@media print {
  .pillen-menue,
  .pillen-aktionen,
  .fusszeile,
  .fab,
  .archiv-filter,
  .artikel-teilen,
  .artikel-cta,
  .artikel-verwandte,
  .zum-inhalt { display: none !important; }

  .artikel-koerper { max-width: none; font-size: 11pt; }
  .artikel-koerper a:not(.knopf)[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
  .artikel-fragen details { display: block; }
  .artikel-fragen details p { display: block !important; padding-bottom: 10pt; }
}

/* ==========================================================================
   Bewegung sparsam
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .kachel,
  .kachel-bild img,
  .artikel-fragen .plus { transition: none; }
  .kachel:hover { transform: none; }
  .kachel:hover .kachel-bild img { transform: none; }
}