/* ===== Ratgeber-Artikel: Prosa-Layout =====
   Nur von den Ratgeber-Artikelseiten geladen. Nutzt die globalen Theme-Tokens
   (var(--white)/--green/--g300/--g400/--g600/--bernstein), damit Light-Mode mitläuft. */

/* Artikel-Hero ist ein <article>-Element und trifft den globalen
   section{padding:100px 24px}-Selektor nicht. Padding hier nachziehen,
   damit die H1 unter der fixierten Nav freisteht. */
article.section {
  padding: 100px 24px;
}
@media (max-width: 768px) {
  article.section {
    padding: 88px 20px 48px;
  }
}

/* Hero-Inhalt (.section-tag/.section-title/.section-lead) liegt in der globalen
   .section-inner (max-width 1100px). Der Fliesstext .ratgeber-article ist aber
   760px zentriert, dadurch fluchtet die linke Kante von Ueberschrift und Body
   nicht (170px Versatz). Inner auf dieselbe 760px-Spalte begrenzen, damit
   Hero und Body EINE durchgehende Fluchtlinie teilen.
   Zweiter Selektor: die FAQ-Sektion folgt direkt auf den Artikel und ist global
   1100px breit und wird ebenfalls auf 760px gezogen, damit "Haeufige Fragen" mit dem
   Artikel fluchtet. Per Sibling-Selektor nur auf Artikelseiten, NICHT auf der
   Foerderseite (deren FAQ folgt keinem <article class="section"> und bleibt breit). */
article.section > .section-inner,
article.section + section.faq .section-inner {
  max-width: 760px;
}

.ratgeber-article {
  max-width: 760px;
  margin: 0 auto;
  color: var(--g300);
  font-size: 17px;
  line-height: 1.75;
}

.ratgeber-article h2 {
  font-family: 'Barlow', sans-serif;
  color: var(--white);
  font-size: 26px;
  line-height: 1.25;
  margin: 44px 0 14px;
}

.ratgeber-article h3 {
  font-family: 'Barlow', sans-serif;
  color: var(--white);
  font-size: 20px;
  margin: 28px 0 10px;
}

.ratgeber-article p {
  margin: 0 0 18px;
}

.ratgeber-article ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.ratgeber-article li {
  margin: 0 0 9px;
}

.ratgeber-article strong {
  color: var(--white);
}

/* Nur echte Textlinks einfärben. btn-primary behält seine dunkle
   Schrift auf grünem Grund (sonst grün-auf-grün = unlesbar). */
.ratgeber-article a:not(.btn-primary) {
  color: var(--green);
  text-decoration: underline;
}

.ratgeber-article .table-scroll {
  margin: 8px 0 26px;
}

.ratgeber-article .table-scroll table {
  margin: 0;
}

.ratgeber-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 26px;
  font-size: 15px;
}

.ratgeber-article th,
.ratgeber-article td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--g600);
  vertical-align: top;
}

.ratgeber-article th {
  color: var(--white);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
}

.ratgeber-article blockquote {
  margin: 0 0 22px;
  padding: 16px 20px;
  background: rgba(183, 217, 0, 0.06);
  border-left: 3px solid var(--green);
  border-radius: 0 8px 8px 0;
}

.ratgeber-article blockquote p:last-child {
  margin-bottom: 0;
}

.ratgeber-article .ra-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 10px;
}

.ratgeber-article .ra-stand {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--g600);
  font-size: 13px;
  color: var(--g400);
  font-style: italic;
}

@media (max-width: 768px) {
  .ratgeber-article {
    font-size: 16px;
  }
  .ratgeber-article h2 {
    font-size: 22px;
  }
  /* Breite Tabellen (lange Komposita wie "Klimageschwindigkeitsbonus") wuerden
     auf dem Handy aus der Spalte brechen und horizontalen Seiten-Scroll
     ausloesen. Tabelle als eigenen horizontal scrollbaren Block kapseln,
     statt das ganze Layout zu sprengen. */
  .ratgeber-article .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Foerder-Rechner (nur auf foerderung.html, die ratgeber.css laedt): die 1fr-Grid-
   Spalte schrumpfte auf dem Handy nicht unter die Inhalts-Mindestbreite des
   breitesten Selects/Panels und sprengte die Seite (~20px Ueberlauf). min-width:0
   erlaubt Grid-Kindern und Formularfeldern, auf die Containerbreite zu schrumpfen. */
@media (max-width: 768px) {
  .foerder-grid > *,
  .foerder-inputs-grid > *,
  .fi-group select {
    min-width: 0;
  }
}