@charset "utf-8";

/* ==========================================================================
   Lidstein Ratgeber — Artikel als warmes Papierblatt auf dunkler Bühne.

   Setzt base.css voraus: Schriften, Tokens, Leiste, Fußzeile und Knöpfe
   stehen dort. Hier nur, was Artikel und Übersicht allein brauchen.
   ========================================================================== */

/* --- Artikelkopf auf Nachtgrund ----------------------------------------- */

.kopf {
  padding: clamp(46px, 8vw, 92px) 20px clamp(38px, 6vw, 66px);
  color: var(--pergament);
  text-align: center;
}

.kopf-inner {
  max-width: 840px;
  margin-inline: auto;
}

.kopf h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-3xl);
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
}

.kopf-sub {
  max-width: 640px;
  margin: 20px auto 0;
  color: rgba(247, 243, 234, 0.82);
  font-size: var(--t-md);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: rgba(247, 243, 234, 0.62);
}

/* --- Papierblatt --------------------------------------------------------- */

/* Regel für dieses Stylesheet: Wer einen Hintergrund setzt, setzt auch seine
   Textfarbe. Vorher hing das Papierblatt an einer `body`-Regel, die dunkle
   Schrift auf dunklem Grund erklärte — sie stimmte nur, weil jede dunkle Zone
   sie einzeln wieder überschrieb. */
.blatt {
  color: var(--tinte);
  background: var(--pergament);
  border-top: 3px solid var(--gold);
  font-size: var(--t-md);
}

.blatt-inner {
  max-width: var(--mass);
  margin-inline: auto;
  padding: clamp(38px, 6vw, 70px) 20px clamp(56px, 8vw, 92px);
}

.blatt h2 {
  margin: 2.4em 0 0.55em;
  font-family: var(--serif);
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.18;
  text-wrap: balance;
}

.blatt h2:first-child {
  margin-top: 0;
}

.blatt h3 {
  margin: 1.9em 0 0.4em;
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.blatt p {
  margin: 0 0 1.1em;
}

.blatt ul,
.blatt ol {
  margin: 0 0 1.2em;
  padding-left: 1.3em;
}

.blatt li {
  margin-bottom: 0.45em;
}

/* `:not(.knopf)` ist hier keine Kosmetik: ohne diesen Ausschluss gewinnt die
   Nachfahren-Regel (0-2-0) gegen die Knopfklasse (0-1-0) und färbt den grünen
   WhatsApp-Knopf dunkelgold — gemessene 1,3:1, praktisch unlesbar. */
.blatt a:not(.knopf) {
  color: var(--gold-tief);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.blatt a:not(.knopf):hover {
  color: var(--tinte);
}

.vorweg {
  padding: 18px 22px;
  margin: 0 0 2em;
  font-size: var(--t-md);
  background: var(--pergament-tief);
  border-left: 3px solid var(--gold);
}

.vorweg p:last-child {
  margin-bottom: 0;
}

blockquote {
  margin: 1.8em 0;
  padding: 0 0 0 22px;
  border-left: 3px solid var(--smaragd);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--tinte);
}

blockquote footer {
  margin-top: 8px;
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--t-sm);
  color: var(--tinte-2);
}

/* --- Tabellen (Richtwerte) ----------------------------------------------- */

.tabelle {
  margin: 1.6em 0 0.5em;
  overflow-x: auto;
}

.tabelle table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.tabelle caption {
  padding-bottom: 10px;
  text-align: left;
  font-weight: 700;
}

.tabelle th,
.tabelle td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linie-hell);
}

.tabelle thead th {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinte-2);
  border-bottom: 2px solid var(--tinte);
}

.tabelle td:last-child {
  font-family: var(--mono);
  font-size: var(--t-sm);
  white-space: nowrap;
}

.quelle {
  margin: 0.4em 0 2em;
  font-size: var(--t-sm);
  color: var(--tinte-2);
}

/* --- FAQ ------------------------------------------------------------------ */

.faq {
  margin-top: 1em;
  border-top: 1px solid var(--linie-hell);
}

.faq details {
  border-bottom: 1px solid var(--linie-hell);
}

.faq summary {
  cursor: pointer;
  padding: 16px 4px;
  font-weight: 700;
  list-style-position: outside;
}

.faq details p {
  padding: 0 4px 18px;
  margin: 0;
}

/* --- CTA ------------------------------------------------------------------ */

.cta {
  margin: 2.6em 0 0;
  padding: 26px;
  color: var(--pergament);
  background: var(--nacht-hoch);
  border-radius: var(--r-gross);
  text-align: center;
}

.cta h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: 700;
}

.cta p {
  margin: 0 auto 18px;
  max-width: 46ch;
  color: rgba(247, 243, 234, 0.8);
}

.cta-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* --- Artikel-Fußzeile / NAP ---------------------------------------------- */

.artikel-fuss {
  margin-top: 2.4em;
  padding-top: 1.6em;
  border-top: 1px solid var(--linie-hell);
  font-size: var(--t-sm);
  color: var(--tinte-2);
}

.weiterlesen {
  margin-top: 2.4em;
}

.weiterlesen h2 {
  font-size: var(--t-lg);
}

.weiterlesen ul {
  padding-left: 1.1em;
}

/* --- Übersichtsseite ------------------------------------------------------ */

.uebersicht {
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(38px, 6vw, 64px) 20px clamp(60px, 9vw, 100px);
  display: grid;
  gap: 16px;
}

.karte {
  display: block;
  padding: 26px 26px 22px;
  background: var(--pergament);
  border-radius: var(--r-gross);
  border-top: 3px solid var(--gold);
  text-decoration: none;
  color: var(--tinte);
  transition: transform 160ms ease;
}

.karte:hover {
  transform: translateY(-3px);
}

.karte .kicker {
  margin-bottom: 10px;
  color: var(--gold-tief);
}

.karte h2 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.16;
}

.karte p {
  margin: 0;
  color: var(--tinte-2);
}

.karte .frage {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--smaragd);
}