/* ============================================================================
   WISSENSBEREICH (/wissen/)
   ============================================================================
   Nur ueber {% block extra_css %} in md_content/index.html und article.html
   geladen — wie startseite.css und reise.css. Vorher standen diese Regeln in
   cappuccino.css und luden auf jeder Seite mit, obwohl sie ausserhalb von
   md_content keinen Konsumenten haben.

   Der Kern dieser Datei ist eine eigene Typoskala. Der Artikel erbte bis
   August 2026 die Marketing-Skala der Landingpage: h1 3,5rem, h2 2,5rem,
   Flisstext 0,95rem — ein Verhaeltnis von 2,63:1, gebaut fuer
   Sektionsueberschriften einer Startseite und nicht fuer Lesetext. Daraus
   kamen "H2 zu gross", die vier verschiedenen Textgroessen (15,2 / 16 / 20 px)
   und die gedraengte Wirkung gleichzeitig. Die Skala hier steht auf 1,5:1.

   Alle Selektoren haengen an einer Huelle (.wissen-page, .article-content,
   .info-box …). Das genuegt gegen die Element-Selektoren aus cappuccino.css
   und kommt ohne !important aus.
   ============================================================================ */

/* ==================== SEITENGERUEST ==================== */

.wissen-page {
  max-width: 900px;
  margin: 0 auto;
}

/* Der Seitentitel folgt der Artikel-Skala: 3,5rem neben einem 2,25rem grossen
   Artikeltitel waere innerhalb eines Bereichs inkonsistent. */
.wissen-page > .wissen-head h1 {
  font-size: 2.25rem;
  line-height: 1.3;
}

.wissen-head {
  margin-bottom: 3rem;
}

/* Ohne diese Regel zieht die Liste die 8rem aus `section { padding: 8rem 0 }`
   (Marketing-Rhythmus) und stand damit 176px unter dem Vorspann. */
.wissen-list {
  padding: 0;
}

/* ==================== ARTIKEL-KARTEN (Uebersicht) ==================== */

.wissen-card {
  margin-bottom: 1.5rem;
}

/* `.card` traegt in diesem Projekt selbst 1.5rem (cappuccino.css). Ein
   zweiter Wert auf .card-body addiert sich darauf — die Karte stand unten
   25px weiter offen als gedacht. */
.wissen-card .card-body {
  padding: 0;
}

.wissen-card-title {
  font-size: 1.375rem;
  line-height: 1.35;
  margin-bottom: 0.75rem;
}

.wissen-card-title a {
  color: var(--espresso);
  text-decoration: none;
}

.wissen-card-title a:hover {
  color: var(--accent-dark);
}

.wissen-card-teaser {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.wissen-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* .feature-link bringt aus den Marketing-Karten `margin-top: auto` und einen
   Vorlauf mit, damit es dort am Kartenboden klebt. In dieser Zeile sitzt es
   neben den Schlagworten — sonst steht die Karte unten 25px weiter offen als
   oben. */
.wissen-card-foot .feature-link {
  margin-top: 0;
  padding-top: 0;
}

/* ==================== SCHLAGWORTE ==================== */

/* Eine Art fuer Kategorie und Tags. Kein gruenes Vollton-Badge und kein
   Bootstrap-Grau (#f8f9fa auf #212529): kalte Toene in einer warmen Palette. Geometrie
   nach dem App-Idiom .type-chip, damit beide Flaechen dieselbe Form haben. */
.wissen-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wissen-tag {
  display: inline-flex;
  align-items: center;
  background: var(--stone-100);
  color: var(--espresso-light);
  font-size: var(--fs-12);
  font-weight: 600;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ==================== ARTIKEL-KOPF ==================== */

.article-head {
  margin-bottom: 1.5rem;
}

/* Auf schmalen Schirmen bleibt nur der Rücksprung stehen. Ein 60 Zeichen
   langer Artikeltitel füllt dort drei Zeilen Krümelpfad — und steht zwei
   Zeilen weiter ohnehin als Überschrift. */
@media (max-width: 575.98px) {
  .article-head .crumb-sep,
  .article-head .crumb-current {
    display: none;
  }
}

/* ==================== ARTIKELINHALT ==================== */

/* Der Innenabstand gehoert an die Karte, nicht zusaetzlich an den Rumpf:
   `.card` bringt schon 1.5rem mit (cappuccino.css). Doppelt gesetzt blieben
   auf einem 375px-Schirm nur 253px Textbreite uebrig. */
.article-content.card {
  padding: 2.5rem;
}

.article-content .card-body {
  padding: 0;
}

.article-content h1,
.article-content h2,
.article-content h3,
.wissen-card-title {
  hyphens: auto;
}

/* Der h1 kommt aus dem Markdown und ist seit August 2026 der einzige der
   Seite (vorher stand er zusaetzlich im Template — auf allen 62 Artikeln
   doppelt). */
.article-content h1 {
  font-size: 2.25rem;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.article-content h2 {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hairline);
}

.article-content h3 {
  font-size: 1.1875rem;
  line-height: 1.45;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}

/* Steht bewusst NACH den Grundstufen: Ein Media-Query hebt die Spezifitaet
   nicht an, bei Gleichstand gewinnt die spaetere Regel. Weiter oben notiert
   blieb die mobile Stufe wirkungslos. */
@media (max-width: 767.98px) {
  .article-content.card {
    padding: 1.5rem;
  }

  /* "Arbeitgeberzuschuss" braucht bei 36px mehr Platz, als ein 375px-Schirm
     hergibt. Ohne kleinere Stufe und Silbentrennung bricht das Projekt-CSS
     (overflow-wrap: break-word) mitten im Wort um: "Arbeitgeberz uschuss". */
  .article-content h1 {
    font-size: 1.75rem;
  }

  .article-content h2 {
    font-size: 1.375rem;
  }
}

/* Eine Groesse fuer alles, was Flisstext ist — auch in den Kaesten und in
   Tabellen. Vorher: 15,2px im Absatz, 20px im Kasten, 16px in Liste und
   Tabelle, 14px in den Quellen. */
.article-content p,
.article-content li,
.article-content th,
.article-content td,
.summary-box li,
.info-box p,
.checklist-box li,
.sources-list li {
  font-size: 1rem;
  line-height: 1.75;
}

.article-content p {
  margin-bottom: 1.4rem;
  color: var(--stone-600);
}

.article-content ul,
.article-content ol {
  margin-bottom: 1.4rem;
  padding-left: 1.5rem;
  color: var(--stone-600);
}

.article-content li {
  margin-bottom: 0.65rem;
}

.article-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--stone-500);
}

/* Breite Tabellen rollen fuer sich, statt die Seite mitzunehmen (der Renderer
   huellt jede Tabelle in diesen Bereich). */
.table-scroll {
  overflow-x: auto;
  margin-bottom: 2rem;
}

.article-content table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
}

.article-content th,
.article-content td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--hairline);
  text-align: left;
}

.article-content th {
  background-color: var(--tint-warm);
  color: var(--espresso);
  font-weight: 600;
}

.article-content pre {
  background-color: var(--tint-warm);
  padding: 1rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: 2rem;
}

.article-content pre code {
  background: none;
  padding: 0;
}

/* ==================== LINKS IM ARTIKEL ==================== */

/* Vorher liefen drei Linkarten nebeneinander: interne Flisstext-Links
   akzentfarben, externe farblos (.external-link { color: inherit }) und die
   Quellen grau. Ein Link sieht jetzt ueberall gleich aus. */
.article-content a,
.sources-list a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.article-content a:hover,
.sources-list a:hover {
  color: var(--accent-dark);
}

/* ==================== KAESTEN IM ARTIKEL ==================== */

.summary-box,
.info-box {
  border-left: 4px solid;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.5rem;
  margin-bottom: 2rem;
  color: var(--espresso-light);
}

.summary-box {
  background: var(--accent-muted);
  border-left-color: var(--accent);
}

.summary-box-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 1rem;
}

.summary-box ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.summary-box li {
  margin-bottom: 0.65rem;
  padding-left: 1.1rem;
  position: relative;
}

.summary-box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--accent);
}

.summary-box li:last-child {
  margin-bottom: 0;
}

/* Der neutrale Hinweis traegt bewusst KEINEN Statuston: --status-pending-bg
   ist ein kaltes Cyan (#CFF4FC) und faellt in der warmen Palette auf. Warnung
   (gelb) und Wichtig (rot) behalten ihre Statusfarben, weil sie dort etwas
   bedeuten. */
.info-box--info {
  background: var(--tasse-muted);
  border-left-color: var(--crema);
}

.info-box--tip {
  background: var(--status-success-bg);
  border-left-color: var(--status-success-fg);
}

.info-box--warning {
  background: var(--warning-muted);
  border-left-color: var(--warning);
}

.info-box--danger {
  background: var(--danger-muted);
  border-left-color: var(--danger);
}

.info-box-title {
  display: block;
  font-weight: 700;
  color: var(--espresso);
  margin-bottom: 0.5rem;
}

.info-box p {
  margin-bottom: 0;
  color: var(--espresso-light);
}

.checklist-box {
  background: var(--tint-warm);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.checklist-box ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.checklist-box li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
  color: var(--espresso-light);
}

.checklist-box li:last-child {
  margin-bottom: 0;
}

.checklist-box li svg {
  flex: none;
  margin-top: 0.3em;
}

.checklist-box .is-done svg {
  color: var(--success);
}

.checklist-box .is-open {
  color: var(--stone-500);
}

.checklist-box .is-open svg {
  color: var(--stone-300);
}

/* ==================== INHALTSVERZEICHNIS ==================== */

/* Dasselbe Idiom wie die Inhaltskarte daneben: weisse Flaeche, Haarlinie.
   Vorher Bootstrap `bg-light` (#f8f9fa) — die einzige kalte Flaeche der
   Seite. */
.toc-box {
  background: var(--milk-pure);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.toc-title {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--stone-500);
  margin-bottom: 1rem;
}

/* Zugeklappt trägt die Zeile keinen Abstand nach unten — sonst steht der
   Kasten leer offen. */
.toc-mobile:not([open]) .toc-title {
  margin-bottom: 0;
}

summary.toc-title {
  cursor: pointer;
  list-style-position: inside;
}

/* Audit B4GL/UX6-12: Abstand ab Unterkante der haftenden Kopfleiste — stand
   als Inline-Stil auf top: 2rem und lag damit hinter dem 91px hohen Kopf. */
.toc-sidebar {
  top: calc(var(--landing-nav-height) + 2rem);
}

.toc-container .toc {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.toc-container .toc ul {
  list-style: none;
  padding-left: 1rem;
  margin-top: 0.5rem;
}

.toc-container .toc li {
  margin-bottom: 0.65rem;
}

.toc-container .toc li:last-child {
  margin-bottom: 0;
}

.toc-container .toc a {
  font-size: 0.9375rem;
  line-height: 1.5;
  text-decoration: none;
  color: var(--stone-600);
  transition: color var(--dur-fast) var(--ease-out);
}

.toc-container .toc a:hover {
  text-decoration: underline;
  color: var(--accent);
}

/* ==================== QUELLEN ==================== */

.sources-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}

.sources-title {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.sources-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.sources-list li {
  padding-left: 1.1rem;
  margin-bottom: 0.75rem;
  position: relative;
  color: var(--stone-600);
}

.sources-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--stone-300);
}

.sources-list li:last-child {
  margin-bottom: 0;
}

.sources-date {
  color: var(--stone-500);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* ==================== ARTIKEL-FUSS ==================== */

.article-foot {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}