/* ==========================================================================
   SHK-Info.de – Wissensbereich: Übersicht, Kategorien, Artikel
   ========================================================================== */

/* --- Kopf des Bereichs ---------------------------------------------------- */
.bereichskopf {
  padding-block: var(--raum-12);
  background: var(--grau-50);
  border-bottom: 1px solid var(--farbe-linie);
}
.bereichskopf h1 { margin-bottom: var(--raum-4); }
.bereichskopf__text { color: var(--farbe-text-leise); font-size: var(--text-lg); max-width: 44rem; }

/* --- Brotkrumen ----------------------------------------------------------- */
.krumen { font-size: var(--text-sm); color: var(--farbe-text-leise); margin-bottom: var(--raum-4); }
.krumen ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.krumen li + li::before { content: "›"; margin-right: var(--raum-2); color: var(--grau-400); }
.krumen a { color: inherit; text-decoration: none; }
.krumen a:hover { color: var(--farbe-link); text-decoration: underline; }

/* --- Suchleiste ----------------------------------------------------------- */
.wissenssuche { display: flex; gap: var(--raum-2); max-width: 38rem; margin-top: var(--raum-8); }
.wissenssuche__feld {
  flex: 1 1 auto; min-width: 0;
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  background: #fff;
}

/* --- Zweispaltiges Layout: Filter links, Ergebnisse rechts ---------------- */
.wissen__layout { display: grid; gap: var(--raum-8); align-items: start; }
@media (min-width: 62rem) {
  .wissen__layout { grid-template-columns: 15rem 1fr; gap: var(--raum-12); }
}

.filter { position: sticky; top: 6rem; }
.filter h2 {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--farbe-text-leise);
  margin-bottom: var(--raum-4);
}
.filter__liste { list-style: none; padding: 0; display: grid; gap: var(--raum-1); }
.filter__knopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--raum-2);
  width: 100%; text-align: left;
  padding: var(--raum-2) var(--raum-3);
  border: 0; background: none; border-radius: var(--radius);
  color: var(--farbe-text); text-decoration: none;
  font-size: var(--text-sm); cursor: pointer;
}
.filter__knopf:hover { background: var(--grau-100); color: var(--farbe-text); }
.filter__knopf[aria-current="true"] {
  background: var(--blau-50); color: var(--blau-800); font-weight: 600;
}
.filter__zahl {
  font-size: var(--text-xs); color: var(--farbe-text-leise);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}

/* --- Trefferzeile --------------------------------------------------------- */
.trefferzeile {
  display: flex; flex-wrap: wrap; gap: var(--raum-4);
  align-items: baseline; justify-content: space-between;
  padding-bottom: var(--raum-4);
  margin-bottom: var(--raum-6);
  border-bottom: 1px solid var(--farbe-linie);
}
.trefferzeile__zahl { font-size: var(--text-sm); color: var(--farbe-text-leise); }
.trefferzeile__zahl strong { color: var(--farbe-text); }

/* --- Artikelliste --------------------------------------------------------- */
.artikelliste { list-style: none; padding: 0; display: grid; gap: var(--raum-4); }

.artikelzeile {
  display: block;
  padding: var(--raum-5) var(--raum-6);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-lg);
  background: #fff;
  text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.artikelzeile:hover {
  border-color: var(--blau-300); box-shadow: var(--schatten); color: inherit;
}
.artikelzeile__titel {
  font-size: var(--text-lg); font-weight: 700;
  line-height: var(--zeilenhoehe-eng); letter-spacing: -0.01em;
  margin-bottom: var(--raum-2);
}
.artikelzeile__text {
  color: var(--farbe-text-leise); font-size: var(--text-sm);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.artikelzeile__fuss {
  display: flex; flex-wrap: wrap; gap: var(--raum-3);
  align-items: center;
  margin-top: var(--raum-3);
  font-size: var(--text-xs); color: var(--farbe-text-leise);
}
.artikelzeile__kategorie { font-weight: 600; color: var(--blau-700); }

/* Suchtreffer im Text hervorheben */
.artikelzeile mark { font-weight: 600; }

/* --- Leerzustand ---------------------------------------------------------- */
.leer {
  padding: var(--raum-16) var(--raum-6);
  text-align: center;
  border: 1px dashed var(--grau-300);
  border-radius: var(--radius-lg);
  color: var(--farbe-text-leise);
}
.leer h2 { font-size: var(--text-lg); color: var(--farbe-text); margin-bottom: var(--raum-2); }

/* --- Mehr laden ----------------------------------------------------------- */
.mehr { margin-top: var(--raum-8); text-align: center; }

/* --- Artikelseite --------------------------------------------------------- */
.artikel { padding-block: var(--raum-12) var(--raum-16); }
.artikel__kopf { margin-bottom: var(--raum-8); padding-bottom: var(--raum-8); border-bottom: 1px solid var(--farbe-linie); }
.artikel__kopf h1 { margin-bottom: var(--raum-4); }
.artikel__unterzeile { font-size: var(--text-lg); color: var(--farbe-text-leise); }
.artikel__meta {
  display: flex; flex-wrap: wrap; gap: var(--raum-4);
  margin-top: var(--raum-6);
  font-size: var(--text-sm); color: var(--farbe-text-leise);
}

/* Fließtext aus der Konsole – bodyHtml wird hier typografisch gefasst */
.artikel__text { max-width: var(--breite-text); }
.artikel__text > * + * { margin-top: var(--raum-4); }
.artikel__text h2 { font-size: var(--text-xl); margin-top: var(--raum-12); }
.artikel__text h3 { font-size: var(--text-lg); margin-top: var(--raum-8); }
.artikel__text ul, .artikel__text ol { padding-left: var(--raum-6); }
.artikel__text li + li { margin-top: var(--raum-2); }
.artikel__text img {
  border-radius: var(--radius); border: 1px solid var(--farbe-linie);
  margin-block: var(--raum-6);
}
.artikel__text a { font-weight: 500; }
.artikel__text table {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm);
  margin-block: var(--raum-6);
}
.artikel__text th, .artikel__text td {
  padding: var(--raum-3); text-align: left;
  border-bottom: 1px solid var(--farbe-linie);
}
.artikel__text th { font-weight: 700; background: var(--grau-50); }
.artikel__text blockquote {
  padding-left: var(--raum-6);
  border-left: 3px solid var(--shk-gelb);
  color: var(--farbe-text-leise);
}
.artikel__text code {
  font-size: .9em; padding: .1em .35em;
  background: var(--grau-100); border-radius: var(--radius-sm);
}

/* Produkt-Hinweis im Artikel – als Werbung erkennbar, nicht getarnt */
.artikelwerbung {
  max-width: var(--breite-text);
  margin-top: var(--raum-12);
  padding: var(--raum-6);
  border: 1px solid var(--farbe-linie);
  border-left: 4px solid var(--shk-rot);
  border-radius: var(--radius);
  background: var(--grau-50);
}
.artikelwerbung__auge {
  display: block; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--farbe-text-leise); margin-bottom: var(--raum-2);
}
.artikelwerbung h2 { font-size: var(--text-lg); margin-bottom: var(--raum-2); }
.artikelwerbung p { font-size: var(--text-sm); color: var(--farbe-text-leise); margin-bottom: var(--raum-4); }

/* --- Ratgeber: lange Fachtexte -------------------------------------------- */
.ratgeber { padding-block: var(--raum-12) var(--raum-16); }
.ratgeber__gerüst { display: grid; gap: var(--raum-8); align-items: start; }
@media (min-width: 70rem) {
  .ratgeber__gerüst { grid-template-columns: 1fr 15rem; gap: var(--raum-16); }
}

.ratgeber__text { max-width: var(--breite-text); }
.ratgeber__text > * + * { margin-top: var(--raum-4); }
.ratgeber__text h2 {
  font-size: var(--text-xl);
  margin-top: var(--raum-12);
  scroll-margin-top: 6rem;
}
.ratgeber__text h3 { font-size: var(--text-lg); margin-top: var(--raum-8); }
.ratgeber__text ul, .ratgeber__text ol { padding-left: var(--raum-6); }
.ratgeber__text li + li { margin-top: var(--raum-2); }
.ratgeber__text table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-sm); margin-block: var(--raum-6);
}
.ratgeber__text th, .ratgeber__text td {
  padding: var(--raum-3); text-align: left;
  border-bottom: 1px solid var(--farbe-linie);
}
.ratgeber__text th { font-weight: 700; background: var(--grau-50); }
.ratgeber__text td:not(:first-child),
.ratgeber__text th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* Formel im Fließtext */
.formelzeile {
  display: block;
  margin-block: var(--raum-4);
  padding: var(--raum-4) var(--raum-5);
  background: var(--grau-50);
  border-left: 3px solid var(--shk-blau);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--text-sm);
}
.formelzeile strong { display: block; margin-bottom: var(--raum-1); }

/* Merksatz */
.merksatz {
  margin-block: var(--raum-6);
  padding: var(--raum-5) var(--raum-6);
  background: var(--gelb-100);
  border-left: 3px solid var(--shk-gelb);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.merksatz strong { display: block; margin-bottom: var(--raum-2); }

/* Typische Fehler */
.fehlerliste { list-style: none; padding: 0; }
.fehlerliste li {
  padding-left: var(--raum-8); position: relative;
  margin-top: var(--raum-4);
}
.fehlerliste li::before {
  content: "✗"; position: absolute; left: 0; top: 0;
  width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--rot-50); color: var(--shk-rot);
  font-size: var(--text-xs); font-weight: 700;
}

/* Inhaltsverzeichnis */
.inhaltsliste { position: sticky; top: 6rem; }
.inhaltsliste h2 {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--farbe-text-leise); margin-bottom: var(--raum-4);
}
.inhaltsliste ol { list-style: none; padding: 0; counter-reset: punkt; }
.inhaltsliste li { counter-increment: punkt; }
.inhaltsliste a {
  display: block; padding: var(--raum-2) 0;
  font-size: var(--text-sm); color: var(--farbe-text-leise);
  text-decoration: none; border-bottom: 1px solid var(--farbe-linie);
}
.inhaltsliste a::before { content: counter(punkt) ". "; color: var(--grau-400); }
.inhaltsliste a:hover { color: var(--farbe-link); }

/* Verweis auf einen Rechner oder eine Videoreihe */
.verweis {
  display: flex; flex-wrap: wrap; gap: var(--raum-4);
  align-items: center; justify-content: space-between;
  margin-block: var(--raum-8);
  padding: var(--raum-5) var(--raum-6);
  border: 1px solid var(--blau-200);
  background: var(--blau-50);
  border-radius: var(--radius);
}
.verweis p { margin: 0; font-size: var(--text-sm); }
.verweis strong { display: block; }

.ratgeber__fuss {
  max-width: var(--breite-text);
  margin-top: var(--raum-12); padding-top: var(--raum-6);
  border-top: 1px solid var(--farbe-linie);
  font-size: var(--text-sm); color: var(--farbe-text-leise);
}

/* --- Rechtstexte (AGB, Datenschutz) --------------------------------------- */
.rechtstext { font-size: var(--text-sm); }
.rechtsabschnitt + .rechtsabschnitt { margin-top: var(--raum-8); }
.rechtsabschnitt h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--raum-3);
  scroll-margin-top: 6rem;
}
.rechtsabschnitt h3 { font-size: var(--text-base); margin-top: var(--raum-5); margin-bottom: var(--raum-2); }
.rechtsabschnitt p + p { margin-top: var(--raum-3); }
.rechtsabschnitt ul { margin-top: var(--raum-3); padding-left: var(--raum-6); }
.rechtsabschnitt li + li { margin-top: var(--raum-1); }
.rechtsabschnitt address { font-style: normal; margin-block: var(--raum-3); }

/* --- Bilder im Ratgeber ----------------------------------------------------- */
.ratgeber__text figure { margin: var(--raum-6) 0; }
.ratgeber__text figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); border: 1px solid var(--farbe-linie);
}
.ratgeber__text figcaption {
  margin-top: var(--raum-2);
  font-size: var(--text-sm); color: var(--farbe-text-leise);
}
/* Mehrere Bilder nebeneinander – auf dem Handy untereinander */
.bildreihe {
  display: grid; gap: var(--raum-3);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-block: var(--raum-6);
}
.bildreihe figure { margin: 0; }
.bildreihe { align-items: start; }
.ratgeber__text sub { font-size: .75em; vertical-align: sub; }
.ratgeber__quelle { font-size: var(--text-xs); color: var(--farbe-text-leise); margin-top: var(--raum-2) !important; }
.bildreihe > figure:only-child { max-width: 30rem; }