/* =========================================================================
   WISSENSWELT — Mega-Menü, Themenkacheln, Rechner, Vergleich
   Wird zusätzlich zu style.css und brand.css geladen.
   ========================================================================= */

/* ---------------------------------------------------------
   MEGA-MENÜ

   Strukturell neu aufgebaut. Vorher lagen acht Welten mit bis zu acht
   Einträgen in einem Fünf-Spalten-Raster. Die zweite Zeile lief in die
   erste hinein, weil Grid-Zeilen sich nach der höchsten Spalte richten
   und der Zeilenabstand zu klein war. Das ließ sich nicht mit
   Abständen reparieren.

   Jetzt ist jede Kategorie ein eigener Block mit eigenem Innenabstand
   und eigener Fläche. Damit können sich Texte nicht mehr überlagern,
   egal wie lang ein Titel ist.

     ab 1200 px   4 Spalten  → Zeile 1 vier, Zeile 2 drei Kategorien
     ab  980 px   3 Spalten
     darunter     das Menü klappt inline im mobilen Menü auf
   --------------------------------------------------------- */


/* Der Auslöser muss exakt aussehen wie ein normaler Navigationslink.
   Deshalb erbt er dieselben Werte und bekommt denselben Unterstrich.
   Der Pfeil steht absolut, damit er die Breite des Wortes nicht
   verändert und beim Öffnen nichts verspringt. */


/* Derselbe Unterstrich wie bei den übrigen Navigationslinks.
   Er endet vor dem Pfeil, damit er wie bei den anderen unter dem Wort
   sitzt und nicht unter dem Dreieck. */


/* Jede Kategorie ein eigener Bereich. Der Innenabstand ist der Grund,
   warum sich hier nichts mehr berühren kann. */


a.mega-head:hover { color: var(--orange-dark); }


/* Der Titel darf umbrechen, das Kennzeichen dahinter nicht. So bleibt
   die Zeile auch bei langen Titeln sauber. */


@media (max-width: 1000px) {
/* Im mobilen Menü klappt das Mega-Menü inline auf. */
}

/* ---------------------------------------------------------
   WISSENS-HUB
   --------------------------------------------------------- */

/* Suche + Filter */
.wissen-tools { margin: 40px 0 12px; }
.wissen-search { position: relative; max-width: 560px; }
.wissen-search input {
  width: 100%;
  font-family: var(--sans); font-size: 1rem;
  padding: 17px 48px 17px 22px;
  border: 1.5px solid rgba(90,60,35,0.16);
  border-radius: 100px;
  background: var(--white);
  color: var(--charcoal);
  transition: border-color 0.25s ease;
}
.wissen-search input:focus { outline: none; border-color: var(--orange); }
.wissen-search input::placeholder { color: #A99686; }
.wissen-search .ws-icon {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  color: var(--warm-grey); pointer-events: none; font-size: 1rem;
}

.search-results {
  margin-top: 14px;
  background: var(--white);
  border: 1px solid rgba(90,60,35,0.12);
  border-radius: var(--r-sm);
  overflow: hidden;
  max-width: 560px;
}
.search-results[hidden] { display: none; }
.sr-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 13px 20px;
  border-top: 1px solid rgba(90,60,35,0.08);
  font-family: var(--sans); font-size: 0.9rem;
  color: var(--charcoal); text-decoration: none;
  transition: background 0.2s ease;
}
.sr-item:first-child { border-top: none; }
.sr-item:hover { background: var(--cream); }
.sr-item .sr-kat { font-size: 0.7rem; color: var(--warm-grey); margin-left: auto; flex: none; }
.sr-item .sr-art {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--orange); flex: none;
}
.sr-empty { padding: 18px 20px; font-family: var(--sans); font-size: 0.88rem; color: var(--warm-grey); }

.filter-label {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange-dark);
  margin: 34px 0 14px;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.filter-chip {
  font-family: var(--sans);
  font-size: 0.86rem; font-weight: 500;
  background: var(--white);
  border: 1.5px solid rgba(90,60,35,0.14);
  border-radius: 100px;
  padding: 10px 18px;
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.filter-chip:hover { border-color: var(--orange-light); }
.filter-chip[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--white); }

.filter-reset {
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 0.83rem;
  color: var(--warm-grey); text-decoration: underline;
  padding: 10px 4px;
}
.filter-reset:hover { color: var(--orange-dark); }

/* Themenkacheln */
.themen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 46px;
}
.thema-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  border: 1.5px solid rgba(90,60,35,0.10);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), box-shadow 0.35s ease,
              border-color 0.35s ease, opacity 0.3s ease;
}
.thema-card:hover { transform: translateY(-6px); border-color: var(--orange); box-shadow: var(--shadow-card); }
.thema-card.is-dimmed { opacity: 0.32; }
.thema-card.is-hidden { display: none; }

.tc-visual {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(150deg, var(--cream), var(--beige));
  display: flex; align-items: center; justify-content: center;
}
.tc-visual img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}
.thema-card:hover .tc-visual img { transform: scale(1.045); }
.tc-visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(74,58,46,0.30), rgba(74,58,46,0) 55%);
  opacity: 0; transition: opacity 0.4s ease;
}
.thema-card:hover .tc-visual::after { opacity: 1; }
.tc-kat {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(255,255,255,0.93);
  border-radius: 100px; padding: 7px 14px;
  font-family: var(--sans);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange-dark);
}
.tc-soon {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: rgba(74,58,46,0.78); color: var(--white);
  border-radius: 100px; padding: 7px 13px;
  font-family: var(--sans);
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.tc-slot { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(90,60,35,0.32); }

.tc-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.tc-headline {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.28; margin-bottom: 12px;
}
.tc-teaser { font-family: var(--sans); font-size: 0.9rem; color: #6B5B4F; line-height: 1.62; margin-bottom: 18px; flex: 1; }
.tc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.tc-tag {
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 600;
  background: var(--cream); border-radius: 100px;
  padding: 5px 12px; color: #7B6857;
}
.tc-cta {
  font-family: var(--sans);
  font-size: 0.88rem; font-weight: 600;
  color: var(--orange-dark);
  display: inline-flex; align-items: center; gap: 7px;
}
.tc-cta .tcc-arrow { transition: transform 0.3s ease; display: inline-block; }
.thema-card:hover .tcc-arrow { transform: translateX(4px); }
.tc-hover {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  color: var(--orange);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.35s ease;
}
.thema-card:hover .tc-hover { max-height: 30px; opacity: 1; margin-top: 9px; }

.filter-empty {
  font-family: var(--sans); font-size: 0.95rem;
  color: var(--warm-grey); padding: 30px 0;
}
.filter-empty[hidden] { display: none; }

@media (max-width: 980px) {
.themen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.themen-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   STICKY INHALTSNAVIGATION
   --------------------------------------------------------- */

.topic-nav {
  position: sticky; top: 64px; z-index: 90;
  background: rgba(253, 238, 225, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(90,60,35,0.10);
}
.topic-nav .tn-inner {
  display: flex; gap: 4px;
  overflow-x: auto;
  /* Fängt die Wischbewegung am Ende ab. Ohne das zieht ein
     Wisch, der am Rand ankommt, die ganze Seite mit — auf iOS bis
     hin zur Zurück-Geste des Browsers. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 12px 0;
  /* Kacheln zum Wischen: proximity statt mandatory. Mandatory würde
     auch dann einrasten, wenn jemand nur ein Stück schieben will.
  */
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--rand, 20px);
}
.topic-nav .tn-inner::-webkit-scrollbar { display: none; }
.topic-nav .tn-inner > a { scroll-snap-align: start; flex: none; }
.topic-nav a {
  font-family: var(--sans);
  font-size: 0.84rem; font-weight: 600;
  color: #6B5B4F; text-decoration: none;
  padding: 9px 16px; border-radius: 100px;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}
.topic-nav a:hover { background: var(--peach); color: var(--orange-dark); }
.topic-nav a.is-current { background: var(--orange); color: var(--white); }

/* ---------------------------------------------------------
   INHALTSMODULE (Rechne selbst, Nicolas Tipp, …)
   --------------------------------------------------------- */

.modul {
  border-radius: var(--r-sm);
  padding: clamp(22px, 2.6vw, 30px);
  margin: 32px 0;
}
.modul .m-label {
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 14px;
}
.modul p:last-child { margin-bottom: 0; }
.modul p { font-family: var(--sans); font-size: 0.95rem; line-height: 1.7; color: #5F4E42; }

.modul.m-tipp   { background: var(--peach); }
.modul.m-tipp .m-label { color: var(--orange-dark); }
.modul.m-schnell { background: var(--cream); border-left: 3px solid var(--orange); }
.modul.m-schnell .m-label { color: var(--orange-dark); }
.modul.m-verwechselt { background: rgba(90,60,35,0.055); }
.modul.m-verwechselt .m-label { color: var(--warm-grey); }
.modul.m-beispiel { background: var(--white); border: 1.5px solid rgba(90,60,35,0.13); }
.modul.m-beispiel .m-label { color: var(--orange-dark); }

.modul.m-schnell ul { list-style: none; margin: 0; padding: 0; }
.modul.m-schnell ul li {
  font-family: var(--sans); font-size: 0.94rem; color: #5F4E42;
  line-height: 1.55; padding: 8px 0 8px 26px; position: relative;
}
.modul.m-schnell ul li::before {
  content: "→"; position: absolute; left: 0; color: var(--orange); font-weight: 700;
}

/* ---------------------------------------------------------
   RECHNER
   --------------------------------------------------------- */

.rechner {
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin: 34px 0;
}
.rechner-head {
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 38px) 0;
}
.rechner-head h3 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.25; margin-bottom: 10px;
}
.rechner-head p { font-family: var(--sans); font-size: 0.93rem; color: #6B5B4F; line-height: 1.65; }

.rechner-body { padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 38px); }

.feld-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 18px 22px;
}
.feld { display: flex; flex-direction: column; }
.feld label {
  font-family: var(--sans);
  font-size: 0.8rem; font-weight: 600;
  color: var(--charcoal); margin-bottom: 7px;
  display: flex; align-items: center; gap: 6px;
}
.feld .f-hint { font-family: var(--sans); font-size: 0.75rem; color: var(--warm-grey); margin-top: 6px; line-height: 1.45; }
.feld-input { position: relative; display: flex; align-items: center; }
.feld input[type="number"] {
  width: 100%;
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  color: var(--charcoal);
  padding: 13px 44px 13px 15px;
  border: 1.5px solid rgba(90,60,35,0.16);
  border-radius: var(--r-sm);
  background: var(--offwhite);
  transition: border-color 0.22s ease, background 0.22s ease;
  -moz-appearance: textfield;
}
.feld input[type="number"]::-webkit-outer-spin-button,
.feld input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.feld input:focus { outline: none; border-color: var(--orange); background: var(--white); }
.feld .f-unit {
  position: absolute; right: 15px;
  font-family: var(--sans); font-size: 0.88rem; font-weight: 600;
  color: var(--warm-grey); pointer-events: none;
}
.feld.is-optional label::after {
  content: "optional";
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--warm-grey);
}

.rendite-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rendite-btn {
  font-family: var(--sans); font-size: 0.88rem; font-weight: 700;
  background: var(--offwhite);
  border: 1.5px solid rgba(90,60,35,0.16);
  border-radius: 100px; padding: 9px 20px;
  color: var(--charcoal); cursor: pointer;
  transition: all 0.22s ease;
}
.rendite-btn:hover { border-color: var(--orange-light); }
.rendite-btn[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--white); }

/* Ergebniskette */
.ergebnis { background: var(--cream); padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 38px); }
.ergebnis[hidden] { display: none; }
.erg-label {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--orange-dark); margin-bottom: 20px;
}
.kette { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.kette-item {
  background: var(--white);
  border-radius: var(--r-sm);
  padding: 20px 24px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.kette-item.is-result { background: var(--orange); }
.kette-item .ki-label {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--warm-grey);
}
.kette-item.is-result .ki-label { color: rgba(255,255,255,0.85); }
.kette-item .ki-value {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem);
  font-weight: 700; color: var(--charcoal); line-height: 1;
  letter-spacing: -0.02em;
}
.kette-item.is-result .ki-value { color: var(--white); }
.kette-item .ki-note { font-family: var(--sans); font-size: 0.78rem; color: var(--warm-grey); width: 100%; margin-top: 4px; }
.kette-item.is-result .ki-note { color: rgba(255,255,255,0.85); }
.kette-arrow { text-align: center; color: var(--orange); font-size: 1.2rem; padding: 8px 0; }

.erg-satz {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  color: var(--charcoal); line-height: 1.55;
  margin-top: 22px; padding-left: 18px;
  border-left: 2px solid var(--orange);
}
.erg-fussnote {
  font-family: var(--sans); font-size: 0.78rem;
  color: #7B6857; line-height: 1.6; margin-top: 20px;
}
.erg-annahmen {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(90,60,35,0.13);
}
.erg-annahmen summary {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  color: var(--orange-dark); cursor: pointer; list-style: none;
}
.erg-annahmen summary::-webkit-details-marker { display: none; }
.erg-annahmen summary::before { content: "▸ "; transition: transform 0.2s; display: inline-block; }
.erg-annahmen[open] summary::before { content: "▾ "; }
.erg-annahmen ul { list-style: none; margin: 14px 0 0; padding: 0; }
.erg-annahmen li {
  font-family: var(--sans); font-size: 0.82rem; color: #6B5B4F;
  line-height: 1.6; padding: 5px 0 5px 18px; position: relative;
}
.erg-annahmen li::before { content: "·"; position: absolute; left: 4px; color: var(--orange); font-weight: 700; }

.rechner-fehler {
  font-family: var(--sans); font-size: 0.87rem;
  color: #B8452A; background: rgba(184,69,42,0.07);
  border-radius: var(--r-sm); padding: 14px 18px; margin-top: 18px;
}
.rechner-fehler[hidden] { display: none; }

/* Conversion-Abschluss im Rechner */
.rechner-cta {
  background: var(--peach);
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 38px);
}
.rechner-cta h4 {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.3; margin-bottom: 12px;
}
.rechner-cta p { font-family: var(--sans); font-size: 0.93rem; color: #5F4E42; line-height: 1.65; margin-bottom: 20px; }
.rechner-cta .rc-note { font-family: var(--sans); font-size: 0.8rem; color: var(--warm-grey); margin: 12px 0 0; }

/* ---------------------------------------------------------
   VORSORGEARTEN-VERGLEICH
   --------------------------------------------------------- */

.vergleich { display: flex; flex-direction: column; gap: 12px; margin-top: 34px; }
.varte {
  background: var(--white);
  border: 1.5px solid rgba(90,60,35,0.12);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.varte.is-open { border-color: var(--orange); }
.varte-btn {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  padding: 22px 26px; text-align: left;
  font: inherit;
}
.varte-btn .vb-emoji { font-size: 1.5rem; flex: none; }
.varte-btn .vb-name {
  font-family: var(--serif);
  font-size: 1.15rem; font-weight: 700;
  color: var(--charcoal); line-height: 1.3;
}
.varte-btn .vb-kurz { font-family: var(--sans); font-size: 0.85rem; color: var(--warm-grey); line-height: 1.45; margin-top: 3px; }
.varte-btn .vb-plus {
  margin-left: auto; flex: none;
  font-size: 1.3rem; color: var(--orange);
  transition: transform 0.3s ease;
}
.varte.is-open .vb-plus { transform: rotate(45deg); }

.varte-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(.4,0,.2,1);
}
.varte.is-open .varte-body { max-height: 1400px; }
.varte-inner { padding: 0 26px 26px; }
.varte-inner .vi-row {
  display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 14px 22px;
  padding: 13px 0;
  border-top: 1px solid rgba(90,60,35,0.10);
}
.varte-inner .vi-row:first-child { border-top: none; }
.vi-row dt {
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--orange-dark);
}
.vi-row dd { font-family: var(--sans); font-size: 0.91rem; color: #5F4E42; line-height: 1.65; margin: 0; }
.vi-row dd ul { list-style: none; margin: 0; padding: 0; }
.vi-row dd li { padding: 4px 0 4px 20px; position: relative; }
.vi-row dd li.pro::before  { content: "+"; position: absolute; left: 2px; color: var(--sage-deep); font-weight: 700; }
.vi-row dd li.con::before  { content: "−"; position: absolute; left: 2px; color: var(--warm-grey); font-weight: 700; }

.vergleich-hinweis {
  font-family: var(--sans); font-size: 0.87rem;
  color: #6B5B4F; line-height: 1.7;
  background: var(--cream); border-radius: var(--r-sm);
  padding: 20px 24px; margin-top: 20px;
}

@media (max-width: 640px) {
.varte-inner .vi-row { grid-template-columns: 1fr; gap: 6px; }
  .varte-btn { padding: 18px 20px; gap: 12px; }
  .varte-inner { padding: 0 20px 22px; }
}

/* ---------------------------------------------------------
   ARTIKEL-TYPOGRAFIE
   --------------------------------------------------------- */

.artikel { max-width: 760px; }
.artikel h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.25; margin: 52px 0 18px;
  letter-spacing: -0.01em;
}
.artikel h2:first-child { margin-top: 0; }
.artikel h3 {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.45rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.3; margin: 34px 0 14px;
}
.artikel p { font-family: var(--sans); font-size: 1rem; color: #5F4E42; line-height: 1.75; margin-bottom: 17px; }
.artikel p strong { color: var(--charcoal); }
.artikel ul, .artikel ol { margin: 0 0 20px; padding-left: 0; list-style: none; }
.artikel ul li, .artikel ol li {
  font-family: var(--sans); font-size: 1rem; color: #5F4E42;
  line-height: 1.7; padding: 6px 0 6px 26px; position: relative;
}
.artikel ul li::before { content: "→"; position: absolute; left: 0; color: var(--orange); font-weight: 700; }
.artikel ol { counter-reset: li; }
.artikel ol li { counter-increment: li; }
.artikel ol li::before {
  content: counter(li); position: absolute; left: 0;
  font-family: var(--serif); font-weight: 700; color: var(--orange);
}
.artikel a:not(.btn) { color: var(--orange-dark); text-decoration: underline; text-underline-offset: 3px; }

/* Zahlen aus der Datendatei */
.zahl-inline { font-family: var(--serif); font-weight: 700; color: var(--orange-dark); }
.zahl-stand {
  font-family: var(--sans); font-size: 0.72rem;
  color: var(--warm-grey); font-weight: 500;
}

/* Faktentabelle */
.fakten { width: 100%; border-collapse: collapse; margin: 26px 0; }
.fakten th, .fakten td {
  font-family: var(--sans); font-size: 0.91rem;
  text-align: left; padding: 14px 16px;
  border-bottom: 1px solid rgba(90,60,35,0.12);
  vertical-align: top;
}
.fakten th {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--orange-dark);
  border-bottom-color: rgba(90,60,35,0.2);
}
.fakten td:first-child { color: var(--charcoal); font-weight: 600; }
.fakten td { color: #5F4E42; line-height: 1.6; }
.fakten tr:last-child td { border-bottom: none; }
/* Hülle um eine breite Faktenzeile. Bewusst OHNE scroll-snap: Hier
   liegen keine Karten, zwischen denen man wählt, sondern eine
   zusammenhängende Zeile. Einrasten würde sie in Stücke schneiden.
   Die Bildlaufleiste bleibt sichtbar — sie ist hier der einzige
   Hinweis, dass rechts noch etwas steht. */
.fakten-wrap {
  overflow-x: auto;
  /* Fängt die Wischbewegung am Ende ab. Ohne das zieht ein Wisch, der am
     Rand ankommt, die ganze Seite mit — auf iOS bis hin zur
     Zurück-Geste des Browsers. */
  overscroll-behavior-x: contain;
}

/* Statusleiste (Gesetzgebungsstand) */
.status-leiste {
  display: flex; flex-direction: column; gap: 2px;
  margin: 28px 0;
}
.sl-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
  background: var(--white);
  padding: 16px 22px;
  font-family: var(--sans);
}
.sl-item:first-child { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.sl-item:last-child  { border-radius: 0 0 var(--r-sm) var(--r-sm); }
.sl-item .sl-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--sage-deep); flex: none;
}
.sl-item.is-pending .sl-dot { background: var(--peach); border: 2px solid var(--orange-light); }
.sl-item .sl-was { font-size: 0.92rem; color: var(--charcoal); font-weight: 600; }
.sl-item .sl-wann { font-size: 0.84rem; color: var(--warm-grey); white-space: nowrap; }
.sl-item.is-pending .sl-was { color: #7B6857; font-weight: 500; }

/* Quellenbereich */
.quellen {
  margin-top: 56px; padding-top: 26px;
  border-top: 1px solid rgba(90,60,35,0.14);
}
.quellen h4 {
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warm-grey); margin-bottom: 14px;
}
.quellen ul { list-style: none; margin: 0; padding: 0; }
.quellen li {
  font-family: var(--sans); font-size: 0.83rem;
  color: #7B6857; line-height: 1.65; padding: 5px 0;
}
.quellen li a { color: var(--orange-dark); text-decoration: underline; text-underline-offset: 2px; }
.quellen .q-stand { color: var(--warm-grey); }

/* Rechtlicher Hinweis */
.rechtshinweis {
  font-family: var(--sans); font-size: 0.8rem;
  color: #7B6857; line-height: 1.65;
  background: rgba(90,60,35,0.05);
  border-radius: var(--r-sm);
  padding: 18px 22px; margin-top: 26px;
}

/* Zweispaltiges Artikellayout mit Randspalte */
.artikel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}
.artikel-rand { position: sticky; top: 130px; }
@media (max-width: 1000px) {
.artikel-layout { grid-template-columns: 1fr; }
  .artikel-rand { position: static; }
  .topic-nav { top: 60px; }
}

/* Nur für Screenreader */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Kachel „Aktuell & wichtig" — steht oben und trägt ein Abzeichen */
.thema-card.ist-aktuell { border-color: var(--orange); }
.tc-badge {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  background: var(--orange); color: var(--white);
  border-radius: 100px; padding: 6px 13px;
  font-family: var(--sans); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* =========================================================================
   WISSENSSEITE — Aktuell, beliebte und neueste Inhalte
   -------------------------------------------------------------------------
   Die Seite soll nicht wie ein Blog-Archiv wirken, sondern wie ein
   Einstieg. Deshalb: genau ein großer Schwerpunkt oben, danach Rechner
   und Themenwelten, und erst am Ende Listen.
   ========================================================================= */

.wissen-hero { padding-bottom: clamp(30px, 3vw, 46px); }

.wissen-aktuell {
  background: var(--cream);
  padding: clamp(30px, 3.4vw, 52px) 0;
}

.wa-kachel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  background: var(--white);
  border: 2px solid var(--orange);
  border-radius: var(--r);
  padding: clamp(24px, 3vw, 44px);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wa-kachel:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -28px rgba(90,60,35,0.4);
}

.wa-marke {
  display: inline-block;
  background: var(--orange); color: var(--white);
  border-radius: 100px; padding: 6px 14px;
  font-family: var(--sans); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 16px;
}
.wa-text h2 {
  font-size: clamp(1.4rem, 1.15rem + 1.4vw, 2.1rem);
  line-height: 1.22; color: var(--charcoal);
  margin: 0 0 14px; max-width: 24ch;
}
.wa-text p {
  font-family: var(--sans); font-size: 0.96rem; color: #5F4E42;
  line-height: 1.72; margin: 0 0 18px; max-width: 62ch;
}

.wa-punkte { display: flex; flex-direction: column; gap: 9px; margin: 0 0 20px; }
.wa-punkte li {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 500;
  color: var(--charcoal); line-height: 1.55;
}
.wa-punkte li span { flex: none; font-size: 1rem; line-height: 1.35; }

.wa-cta {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px;
  font-family: var(--sans); font-size: 0.94rem; font-weight: 700;
  color: var(--orange-dark);
}
.wa-cta .btn-arrow { transition: transform 0.25s ease; }
.wa-kachel:hover .wa-cta .btn-arrow { transform: translateX(4px); }

.wa-emoji {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1; opacity: 0.9;
}

.wa-neben {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  margin-top: clamp(12px, 1.6vw, 18px);
}
.wa-nebenlink {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid rgba(90,60,35,0.14);
  border-radius: var(--r-sm);
  padding: 16px 18px; min-height: 60px;
  text-decoration: none;
  transition: border-color 0.22s ease, background 0.22s ease;
}
.wa-nebenlink:hover { border-color: var(--orange); background: var(--peach); }
.wan-art {
  font-family: var(--sans); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange-dark); flex: none;
}
.wan-titel {
  font-family: var(--sans); font-size: 0.88rem; font-weight: 600;
  color: var(--charcoal); line-height: 1.4; min-width: 0;
}
.wa-nebenlink .btn-arrow { margin-left: auto; color: var(--orange); flex: none; }

/* ---------- Beliebt und zuletzt ergänzt ---------- */

.wissen-listen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.wl-titel {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 1.15rem; font-weight: 700;
  color: var(--charcoal); margin: 0 0 14px;
}
.wl-liste { display: flex; flex-direction: column; gap: 2px; }
.wl-liste li { border-bottom: 1px solid rgba(90,60,35,0.1); }
.wl-liste li:last-child { border-bottom: none; }
.wl-liste a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 14px 0; min-height: 56px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.wl-name {
  font-family: var(--sans); font-size: 0.94rem; font-weight: 600;
  color: var(--charcoal); line-height: 1.4; min-width: 0;
}
.wl-zeile {
  grid-column: 1; grid-row: 2;
  font-family: var(--sans); font-size: 0.82rem; color: var(--warm-grey);
  line-height: 1.5;
}
.wl-datum {
  grid-column: 1; grid-row: 2;
  font-family: var(--sans); font-size: 0.78rem; color: var(--warm-grey);
}
.wl-liste .btn-arrow {
  grid-column: 2; grid-row: 1 / span 2;
  color: var(--orange); transition: transform 0.22s ease;
}
.wl-liste a:hover .wl-name { color: var(--orange-dark); }
.wl-liste a:hover .btn-arrow { transform: translateX(4px); }

@media (max-width: 800px) {
.wa-kachel { grid-template-columns: 1fr; }
  .wa-emoji { display: none; }
}

@media (prefers-reduced-motion: reduce) {
.wa-kachel, .wa-cta .btn-arrow, .wl-liste .btn-arrow { transition: none; }
  .wa-kachel:hover { transform: none; }
}