/* =========================================================================
   THEMENWELTEN — das gemeinsame Gerüst
   -------------------------------------------------------------------------
   Vier Seiten teilen sich diese Datei: Investieren & ETFs, Absicherung,
   Krankenversicherung, Familie & Finanzen. Altersvorsorge und Immobilien
   haben aus historischen Gründen noch eigene Stylesheets.

   WARUM EINE DATEI UND NICHT VIER

   Jede Themenwelt folgt derselben Dramaturgie: Was ist das, warum ist es
   wichtig, für wen, wie starte ich, was ist zu beachten, Beispiel,
   Vertiefung, Rechner, Gespräch. Wenn jede Seite ihre eigenen Klassen
   mitbrächte, würden die neun Abschnitte auf vier Seiten neunmal
   unterschiedlich aussehen — und beim fünften Thema fängt man wieder von
   vorn an.

   Die Bausteine hier sind deshalb nach ihrer FUNKTION benannt und nicht
   nach dem Thema: .toepfe ist die Grafik mit drei Geldtöpfen, egal ob es
   um Rücklagen oder um Kindergeld geht.

   RHYTHMUS

   Nach 150 bis 250 Wörtern soll ein visueller Wechsel kommen. Dafür gibt
   es hier genug verschiedene Bausteine, dass keine Seite aus lauter
   Textblöcken besteht: Karten, Skalen, Zeitachsen, Töpfe, Tabellen,
   Schrittfolgen, Statements.
   ========================================================================= */

/* =========================================================================
   1 · KOPF DER SEITE
   -------------------------------------------------------------------------
   Links Text, rechts optional ein Bild oder eine Grafik. Ohne .tw-medium
   fällt der Kopf auf eine Spalte zurück und der Text bekommt eine
   Lesebreite — ein Bild nur deshalb einzusetzen, damit rechts etwas
   steht, ist ausdrücklich nicht die Idee.
   ========================================================================= */

.welt-hero {
  background: var(--cream);
  padding: clamp(120px, 11vw, 170px) 0 clamp(48px, 5vw, 80px);
}
.welt-hero .container { max-width: 1280px; }

.wh-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  min-height: clamp(240px, 26vw, 380px);
}
.wh-raster.ist-einspaltig { grid-template-columns: minmax(0, 1fr); }
.wh-raster.ist-einspaltig .wh-text { max-width: 780px; }

.wh-text h1 {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  line-height: 1.14; margin-bottom: 14px;
}
.wh-subline {
  font-family: var(--serif-lesbar); font-style: italic;
  font-size: clamp(1.05rem, 0.98rem + 0.6vw, 1.35rem);
  color: var(--orange-dark); line-height: 1.4;
  margin: 0 0 18px; max-width: 30ch;
}
/* Höchstens drei bis vier Zeilen. 54 Zeichen mal drei ergibt rund 160
   Zeichen — passt zu dem, was hier stehen soll. */
.wh-text .lede { max-width: 54ch; }
.wh-text .lede + .lede { margin-top: 12px; }
.wh-aktionen { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px; align-items: center; }

/* Das Bild. aspect-ratio auf der Hülle plus object-fit: cover im Bild —
   damit kann hier strukturell nichts verzerren, egal welche Datei
   eingesetzt wird. object-position setzt die Seite selbst, damit ein
   Gesicht nicht angeschnitten wird. */
.wh-bild {
  width: 100%; aspect-ratio: var(--hero-ratio, 1.1);
  overflow: hidden; border-radius: var(--r, 18px);
}
.wh-bild picture, .wh-bild img { display: block; width: 100%; height: 100%; }
.wh-bild img { object-fit: cover; object-position: var(--hero-fokus, 50% 35%); }

@media (max-width: 900px) {
  .wh-raster { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .wh-bild { max-width: 420px; }
}

/* =========================================================================
   2 · ABSCHNITTE
   ========================================================================= */

.welt-abschnitt { padding: clamp(52px, 6vw, 92px) 0; background: var(--offwhite); }
.welt-abschnitt.ist-creme { background: var(--cream); }
.welt-abschnitt.ist-weiss { background: var(--white); }
.welt-abschnitt .container { max-width: 1280px; }

.welt-kopf { max-width: 640px; margin-bottom: clamp(26px, 3vw, 44px); }
.welt-kopf h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.3vw, 2.2rem);
  line-height: 1.2; margin-bottom: 12px;
}
.welt-kopf p {
  font-family: var(--sans); font-size: 1rem; color: #5F4E42;
  line-height: 1.7; margin: 0; max-width: 58ch;
}

/* Fließtext innerhalb einer Themenwelt. Bewusst schmal: Eine Zeile mit
   110 Zeichen liest niemand zweimal. */
.welt-text {
  font-family: var(--sans); font-size: 1rem; color: #5F4E42;
  line-height: 1.75; max-width: 62ch; margin: 0 0 18px;
}
.welt-text:last-child { margin-bottom: 0; }
.welt-text strong { color: var(--charcoal); }

.welt-klein {
  font-family: var(--sans); font-size: 0.8rem; color: var(--warm-grey);
  line-height: 1.6; max-width: 70ch; margin: 14px 0 0;
}

/* =========================================================================
   3 · ZWEI KARTEN NEBENEINANDER
   Sparen gegen Investieren, GKV gegen PKV, BU gegen Erwerbsminderung.
   Immer gleich groß — sonst liest man eine Wertung hinein, die keine ist.
   ========================================================================= */

.zwei-karten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}
.zk-karte {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1.5px solid rgba(90, 60, 35, 0.1);
  border-radius: var(--r, 18px);
  padding: clamp(24px, 2.6vw, 34px);
}
.welt-abschnitt.ist-weiss .zk-karte { background: var(--offwhite); }
.zk-karte.ist-betont { border-color: var(--orange); }

.zk-kopf { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.zk-emoji { font-size: 1.5rem; line-height: 1; flex: none; }
.zk-karte h3 {
  font-family: var(--serif); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 700; color: var(--charcoal); line-height: 1.25; margin: 0;
}
.zk-unter {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--warm-grey); margin: 0 0 12px;
}
.zk-karte p {
  font-family: var(--sans); font-size: 0.92rem; color: #5F4E42;
  line-height: 1.7; margin: 0 0 16px;
}
.zk-liste { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.zk-liste li {
  font-family: var(--sans); font-size: 0.9rem; color: #5F4E42;
  line-height: 1.55; padding-left: 22px; position: relative;
}
.zk-liste li::before {
  content: "·"; position: absolute; left: 6px; top: -0.1em;
  color: var(--orange); font-weight: 700; font-size: 1.3em;
}

/* Chips innerhalb einer Karte: Beispiele, keine Links. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.chips span {
  font-family: var(--sans); font-size: 0.76rem; color: #6B5B4F;
  background: var(--cream); border-radius: 100px; padding: 6px 13px;
  line-height: 1.35;
}
.welt-abschnitt.ist-creme .chips span { background: var(--offwhite); }

@media (max-width: 760px) {
  .zwei-karten { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   4 · ZEITACHSE
   Desktop waagerecht, Handy senkrecht. Kein Wischbereich: Eine Zeitachse,
   von der man immer nur ein Drittel sieht, ist keine Zeitachse.
   ========================================================================= */

.zeitachse { display: grid; gap: clamp(14px, 1.6vw, 22px); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.za-punkt { position: relative; padding-top: 30px; }

/* Die Linie und der Punkt darauf. Die Linie liegt hinter allen Punkten
   und wird am ersten und letzten halbiert, damit sie nicht ins Leere
   läuft. */
.za-punkt::before {
  content: ""; position: absolute; top: 9px; left: 0; right: 0;
  height: 2px; background: var(--beige);
}
.za-punkt:first-child::before { left: 50%; }
.za-punkt:last-child::before  { right: 50%; }
.za-punkt::after {
  content: ""; position: absolute; top: 4px; left: calc(50% - 6px);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--orange);
}
.za-titel {
  display: block; text-align: center;
  font-family: var(--sans); font-size: 0.88rem; font-weight: 700;
  color: var(--charcoal); line-height: 1.35; margin-bottom: 8px;
}
.za-liste { list-style: none; margin: 0; padding: 0; text-align: center; }
.za-liste li {
  font-family: var(--sans); font-size: 0.78rem; color: var(--warm-grey);
  line-height: 1.5;
}

@media (max-width: 860px) {
  .zeitachse { grid-auto-flow: row; gap: 0; }
  .za-punkt { padding: 0 0 24px 32px; }
  .za-punkt::before { top: 0; bottom: 0; left: 5px; right: auto; width: 2px; height: auto; }
  .za-punkt:first-child::before { top: 8px; left: 5px; }
  .za-punkt:last-child::before  { bottom: auto; height: 8px; right: auto; }
  .za-punkt::after { top: 3px; left: 0; }
  .za-titel, .za-liste { text-align: left; }
}

/* =========================================================================
   5 · DREI TÖPFE
   Dieselbe Bildsprache wie auf der Beratungsseite, damit man es
   wiedererkennt.
   ========================================================================= */

.toepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.topf {
  background: var(--white); border-radius: var(--r, 18px);
  padding: clamp(20px, 2.4vw, 30px);
  border-top: 4px solid var(--beige);
}
.welt-abschnitt.ist-weiss .topf { background: var(--offwhite); }
.topf.ist-kurz   { border-top-color: var(--sage); }
.topf.ist-mittel { border-top-color: var(--orange-light); }
.topf.ist-lang   { border-top-color: var(--orange); }
.topf-emoji { font-size: 1.5rem; line-height: 1; display: block; margin-bottom: 10px; }
.topf h3 {
  font-family: var(--serif); font-size: 1.08rem; font-weight: 700;
  color: var(--charcoal); margin: 0 0 6px; line-height: 1.3;
}
.topf-dauer {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--warm-grey); display: block; margin-bottom: 10px;
}
.topf p { font-family: var(--sans); font-size: 0.88rem; color: #5F4E42; line-height: 1.65; margin: 0; }

@media (max-width: 760px) { .toepfe { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   6 · SKALEN
   Waagerecht für Rendite und Risiko, senkrecht für Schadenshöhen.
   ========================================================================= */

.skala { margin: 0; }
.skala-achse {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  color: var(--warm-grey); margin-bottom: 10px;
}
.skala-balken {
  height: 8px; border-radius: 100px; margin-bottom: 18px;
  background: linear-gradient(90deg, var(--sage) 0%, var(--orange-light) 55%, var(--orange) 100%);
}
.skala-stufen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.skala-stufe {
  background: var(--white); border-radius: var(--r-sm, 12px);
  padding: 16px 18px;
}
.welt-abschnitt.ist-weiss .skala-stufe { background: var(--offwhite); }
.skala-stufe strong {
  display: block; font-family: var(--sans); font-size: 0.88rem;
  color: var(--charcoal); margin-bottom: 5px; line-height: 1.35;
}
.skala-stufe span { font-family: var(--sans); font-size: 0.78rem; color: var(--warm-grey); line-height: 1.5; }

@media (max-width: 860px) { .skala-stufen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .skala-stufen { grid-template-columns: minmax(0, 1fr); } }

/* Senkrechte Variante: kleiner Schaden oben, existenzbedrohend unten. */
.stufen-senkrecht { display: flex; flex-direction: column; gap: 12px; max-width: 780px; }
.stufe-zeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 16px;
  background: var(--white); border-radius: var(--r-sm, 12px);
  padding: 16px 20px;
  border-left: 4px solid var(--sage);
}
.welt-abschnitt.ist-weiss .stufe-zeile { background: var(--offwhite); }
.stufe-zeile.ist-mittel { border-left-color: var(--orange-light); }
.stufe-zeile.ist-gross  { border-left-color: var(--orange); }
.stufe-emoji { font-size: 1.3rem; line-height: 1; }
.stufe-text { font-family: var(--sans); font-size: 0.92rem; color: var(--charcoal); line-height: 1.45; }
.stufe-text span { display: block; font-size: 0.8rem; color: var(--warm-grey); margin-top: 3px; }
.stufe-urteil {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  color: var(--orange-dark); text-align: right; flex: none; max-width: 15ch;
  line-height: 1.35;
}
@media (max-width: 620px) {
  .stufe-zeile { grid-template-columns: auto minmax(0, 1fr); }
  .stufe-urteil { grid-column: 2; text-align: left; max-width: none; }
}

/* =========================================================================
   7 · SCHRITTE
   Nummerierte Reihenfolge, wenn die Reihenfolge der Punkt ist.
   ========================================================================= */

.schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 780px; }
.schritte li {
  counter-increment: schritt; position: relative;
  background: var(--white); border-radius: var(--r-sm, 12px);
  padding: 18px 22px 18px 66px;
  font-family: var(--sans); font-size: 0.95rem; color: var(--charcoal);
  line-height: 1.5;
}
.welt-abschnitt.ist-weiss .schritte li { background: var(--offwhite); }
.schritte li::before {
  content: counter(schritt);
  position: absolute; left: 22px; top: 16px;
  font-family: var(--serif); font-size: 1.35rem; font-weight: 700;
  color: var(--orange); line-height: 1.2;
}
.schritte li span {
  display: block; font-size: 0.85rem; color: var(--warm-grey);
  margin-top: 5px; line-height: 1.6;
}

/* Ablauf mit Pfeilen dazwischen, wenn es ein Prozess ist und keine
   Prüfliste. */
.ablauf { display: flex; flex-direction: column; gap: 0; max-width: 640px; }
.ablauf-schritt {
  background: var(--white); border-radius: var(--r-sm, 12px);
  padding: 16px 20px;
  font-family: var(--sans); font-size: 0.93rem; color: var(--charcoal);
  line-height: 1.5;
}
.welt-abschnitt.ist-weiss .ablauf-schritt { background: var(--offwhite); }
.ablauf-pfeil { text-align: center; color: var(--orange); font-size: 1.1rem; padding: 7px 0; }

/* =========================================================================
   8 · STATEMENT
   Ein Satz, der hängen bleiben soll. Höchstens einer pro Abschnitt.
   ========================================================================= */

.statement {
  background: var(--orange); color: var(--white);
  border-radius: var(--r, 18px);
  padding: clamp(24px, 3vw, 40px);
  margin: clamp(26px, 3vw, 40px) 0 0;
  max-width: 780px;
}
.statement p {
  font-family: var(--serif); font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem);
  font-weight: 700; line-height: 1.32; margin: 0; color: var(--white);
}
.statement p + p {
  font-family: var(--sans); font-size: 0.92rem; font-weight: 400;
  line-height: 1.7; margin-top: 12px; color: rgba(255, 255, 255, 0.92);
}

/* =========================================================================
   9 · WARNBOX
   Für Sätze, die eine verbreitete Annahme korrigieren.
   ========================================================================= */

.warnbox {
  background: var(--peach);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--r-sm, 12px) var(--r-sm, 12px) 0;
  padding: 20px 24px; margin: 24px 0 0; max-width: 780px;
}
.warnbox strong {
  display: block; font-family: var(--sans); font-size: 0.95rem;
  color: var(--charcoal); margin-bottom: 8px; line-height: 1.4;
}
.warnbox p {
  font-family: var(--sans); font-size: 0.9rem; color: #4A3A2E;
  line-height: 1.7; margin: 0;
}

/* =========================================================================
   10 · MERKKARTEN
   Sechs kleine Punkte, die man nebeneinander überblicken soll.
   ========================================================================= */

.merkkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.merkkarte {
  background: var(--white); border-radius: var(--r-sm, 12px);
  padding: clamp(18px, 2vw, 24px);
}
.welt-abschnitt.ist-weiss .merkkarte { background: var(--offwhite); }
.merkkarte strong {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 0.92rem; color: var(--charcoal);
  margin-bottom: 8px; line-height: 1.35;
}
.merkkarte p { font-family: var(--sans); font-size: 0.85rem; color: #5F4E42; line-height: 1.65; margin: 0; }

@media (max-width: 900px) { .merkkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .merkkarten { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   11 · FLUSSGRAFIK
   Ein Block oben, mehrere darunter. Für „Einkommen trägt Folgendes".
   ========================================================================= */

.fluss { max-width: 820px; }
.fluss-quelle {
  background: var(--orange); color: var(--white);
  border-radius: var(--r-sm, 12px); padding: 20px 24px; text-align: center;
  font-family: var(--serif); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 700; letter-spacing: 0.02em;
}
.fluss.ist-weg .fluss-quelle {
  background: rgba(90, 60, 35, 0.12); color: var(--warm-grey);
  text-decoration: line-through;
}
.fluss-pfeil { text-align: center; color: var(--orange); font-size: 1.2rem; padding: 10px 0; }
.fluss-ziele { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.fluss-ziel {
  background: var(--white); border-radius: var(--r-sm, 12px);
  padding: 16px 12px; text-align: center;
  font-family: var(--sans); font-size: 0.82rem; color: var(--charcoal);
  line-height: 1.4;
}
.welt-abschnitt.ist-weiss .fluss-ziel { background: var(--offwhite); }
.fluss-ziel span { display: block; font-size: 1.3rem; margin-bottom: 7px; line-height: 1; }
.fluss.ist-weg .fluss-ziel { opacity: 0.55; }

@media (max-width: 760px) { .fluss-ziele { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================================
   12 · VERGLEICHSTABELLE
   Ab 760 px eine echte Tabelle, darunter wird jede Zeile eine Karte. Jede
   Zelle trägt ihren Spaltennamen in data-spalte — ohne den Kopf darüber
   ist eine Zelle bedeutungslos.
   ========================================================================= */

.vgl-huelle { max-width: 900px; }
.vgl-tabelle {
  width: 100%; border-collapse: collapse; font-family: var(--sans);
  background: var(--white); border-radius: var(--r, 18px); overflow: hidden;
}
.welt-abschnitt.ist-weiss .vgl-tabelle { background: var(--offwhite); }
.vgl-tabelle th, .vgl-tabelle td {
  padding: 14px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(90, 60, 35, 0.1);
}
.vgl-tabelle tbody tr:last-child th,
.vgl-tabelle tbody tr:last-child td { border-bottom: none; }
.vgl-tabelle thead th {
  background: var(--cream); font-size: 0.8rem; font-weight: 700;
  color: var(--charcoal); line-height: 1.35;
}
.vgl-tabelle tbody th { font-size: 0.88rem; font-weight: 700; color: var(--charcoal); line-height: 1.4; }
.vgl-tabelle td { font-size: 0.86rem; color: #5F4E42; line-height: 1.6; }

@media (max-width: 760px) {
  .vgl-tabelle, .vgl-tabelle thead, .vgl-tabelle tbody,
  .vgl-tabelle tr, .vgl-tabelle th, .vgl-tabelle td { display: block; }
  .vgl-tabelle { background: transparent; border-radius: 0; overflow: visible; }
  .vgl-tabelle thead { display: none; }
  .vgl-tabelle tbody tr {
    background: var(--white); border-radius: var(--r-sm, 12px);
    padding: 16px 18px; margin-bottom: 12px;
  }
  .welt-abschnitt.ist-weiss .vgl-tabelle tbody tr { background: var(--offwhite); }
  .vgl-tabelle tbody th {
    border-bottom: 1px solid rgba(90, 60, 35, 0.12);
    padding: 0 0 10px; margin-bottom: 10px; font-size: 0.95rem;
  }
  .vgl-tabelle tbody td { border-bottom: none; padding: 7px 0; }
  .vgl-tabelle tbody td::before {
    content: attr(data-spalte);
    display: block; font-size: 0.74rem; font-weight: 700;
    color: var(--warm-grey); margin-bottom: 3px;
  }
}

/* =========================================================================
   13 · PERSONAS
   „Für wen ist es relevant" als vier Karten mit Fragen statt Antworten.
   Die Antwort hängt an der Person, die Fragen nicht.
   ========================================================================= */

.personas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.persona {
  background: var(--white); border-radius: var(--r, 18px);
  padding: clamp(22px, 2.4vw, 30px);
  border-left: 4px solid var(--orange-light);
}
.welt-abschnitt.ist-weiss .persona { background: var(--offwhite); }
.persona h3 {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 1.08rem; font-weight: 700;
  color: var(--charcoal); margin: 0 0 12px; line-height: 1.3;
}
.persona ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.persona li {
  font-family: var(--sans); font-size: 0.88rem; color: #5F4E42;
  line-height: 1.6; padding-left: 20px; position: relative;
}
.persona li::before { content: "?"; position: absolute; left: 2px; color: var(--orange); font-weight: 700; }

@media (max-width: 760px) { .personas { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   14 · VERTIEFUNG
   Die Unterthemen einer Welt. Was es noch nicht gibt, ist kein Link.
   ========================================================================= */

.vertiefung { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vt-punkt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--white); border: 1.5px solid rgba(90, 60, 35, 0.1);
  border-radius: var(--r-sm, 12px); padding: 15px 18px; min-height: 56px;
  font-family: var(--sans); font-size: 0.9rem; color: var(--charcoal);
  line-height: 1.4; text-decoration: none;
  transition: border-color 0.22s ease, color 0.22s ease;
}
.welt-abschnitt.ist-weiss .vt-punkt { background: var(--offwhite); }
a.vt-punkt:hover { border-color: var(--orange); color: var(--orange-dark); }
.vt-punkt .btn-arrow { color: var(--orange); flex: none; }
.vt-punkt.ist-geplant { opacity: 0.55; border-style: dashed; }
.vt-bald { font-size: 0.7rem; font-weight: 600; color: var(--warm-grey); flex: none; }

@media (max-width: 860px) { .vertiefung { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .vertiefung { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   15 · WERKZEUGKASTEN
   Der Rechner am Ende einer Welt.
   ========================================================================= */

.welt-werkzeug {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: clamp(20px, 3vw, 40px);
  background: var(--white); border: 2px solid var(--orange);
  border-radius: var(--r, 18px);
  padding: clamp(24px, 3vw, 40px); max-width: 900px;
}
.welt-abschnitt.ist-weiss .welt-werkzeug { background: var(--offwhite); }
.ww-text h3 {
  font-family: var(--serif); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 700; color: var(--charcoal); margin: 0 0 10px; line-height: 1.28;
}
.ww-text p { font-family: var(--sans); font-size: 0.92rem; color: #5F4E42; line-height: 1.7; margin: 0; max-width: 52ch; }
.ww-aktion { flex: none; }

@media (max-width: 720px) {
  .welt-werkzeug { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   16 · ABSCHLUSS
   ========================================================================= */

.welt-schluss { background: var(--beige); padding: clamp(52px, 6vw, 92px) 0; }
.ws-raster {
  display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
  max-width: 1000px; margin: 0 auto;
}
.ws-foto {
  width: min(100%, 320px); aspect-ratio: 0.8;
  overflow: hidden; border-radius: var(--r, 18px); justify-self: end;
}
.ws-foto picture, .ws-foto img { display: block; width: 100%; height: 100%; }
.ws-foto img { object-fit: cover; object-position: 50% 30%; }
.ws-inhalt h2 { font-size: clamp(1.4rem, 1.2rem + 1.1vw, 2rem); color: var(--charcoal); margin-bottom: 14px; max-width: 20ch; }
.ws-inhalt p { font-family: var(--sans); font-size: 0.98rem; color: #55483F; line-height: 1.72; margin: 0 0 16px; max-width: 48ch; }
.ws-note { font-family: var(--sans); font-size: 0.82rem; color: var(--warm-grey); margin: 14px 0 0 !important; }

@media (max-width: 820px) {
  .ws-raster { grid-template-columns: minmax(0, 1fr); }
  .ws-foto { justify-self: start; width: min(100%, 250px); }
}

/* =========================================================================
   17 · QUELLEN
   -------------------------------------------------------------------------
   Am Ende jeder Themenwelt. Nur die Quellen, die wirklich verwendet
   wurden — eine Liste mit zwanzig Behörden sieht gründlich aus und ist
   das Gegenteil davon.
   ========================================================================= */

.quellen {
  border-top: 1px solid rgba(90, 60, 35, 0.14);
  padding: clamp(26px, 3vw, 40px) 0;
  background: var(--offwhite);
}
.quellen .container { max-width: 900px; }
.q-stand {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--warm-grey); margin: 0 0 12px;
}
.q-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.q-liste li { font-family: var(--sans); font-size: 0.82rem; color: var(--warm-grey); line-height: 1.6; }
.q-liste a { color: var(--orange-dark); text-decoration: none; }
.q-liste a:hover { text-decoration: underline; }
.q-hinweis {
  font-family: var(--sans); font-size: 0.78rem; color: var(--warm-grey);
  line-height: 1.65; margin: 16px 0 0; max-width: 80ch;
}

@media (prefers-reduced-motion: reduce) {
  .vt-punkt { transition: none; }
}