/* ============================================================
   Alterskompass CMS – Baustein-Styles (Stufe 2B)
   Generische Klassen für Bibliotheks-/KI-Blöcke. Nutzt die Variablen und
   Grundklassen aus main.css; ergänzt nur, was dort fehlt (Grid/Card).
   ============================================================ */

.cms-text {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-mid);
  max-width: none;   /* volle Container-Breite (wie die Säulen) */
  margin: 0 0 18px;
}

/* Inline-Links im Fließtext (auto-verlinkt oder [Text](Ziel)) */
.cms-text a, .section-lead a, .cms-card-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;   /* lange URLs/E-Mails brechen um statt zu überlaufen */
}
.cms-text a:hover, .section-lead a:hover, .cms-card-text a:hover { color: var(--accent-dark); }

/* Aufzählungen im Fließtext (Punkte/Zahlen, mit Unterebenen) */
.cms-list-block {
  margin: 0 0 18px;
  padding-left: 1.6em;
  max-width: none;
}
.cms-list-block li {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-mid);
  margin: 3px 0;
}
.cms-list-block .cms-list-block { margin: 4px 0 6px; }   /* verschachtelt: enger */
ul.cms-list-block { list-style: disc; }
ul.cms-list-block ul.cms-list-block { list-style: circle; }
ul.cms-list-block ul.cms-list-block ul.cms-list-block { list-style: square; }
ol.cms-list-block { list-style: decimal; }
ol.cms-list-block ol.cms-list-block { list-style: lower-alpha; }
ol.cms-list-block ol.cms-list-block ol.cms-list-block { list-style: lower-roman; }
.cms-list-block li::marker { color: var(--accent); }

.cms-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 0 0 22px;
}

/* Untertitel eines Abschnittslisten-Punkts (Knoten "textitem") */
.cms-subhead {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 48px 0 10px;
}
.cms-subhead em { font-style: italic; font-weight: 400; color: var(--gold-d); }
.cms-subhead:first-child { margin-top: 0; }

/* Abschnittsliste (variant "prose"): breite Textspalte (wie die Säulen) und
   engere Abstände zwischen Lead/Abschnitten. */
.cms-section--prose .section-lead,
.cms-section--prose .cms-text { max-width: none; }
.cms-section--prose .section-lead { margin-bottom: 16px; }
.cms-section--prose .cms-text { margin-bottom: 12px; }
.cms-section--prose .cms-subhead { margin-top: 34px; }

/* Mehr Abstand zwischen dem Lead und dem ERSTEN Kapitel-Titel – auch in
   KI-Blöcken (Titel = .section-h2) und in der Abschnittsliste (.cms-subhead).
   Auf der Startseite folgt nie ein Titel direkt auf einen Lead → unkritisch. */
.section-lead + .section-h2,
.cms-section--prose .section-lead + .cms-subhead { margin-top: 52px; }

/* Lead in CMS-/KI-Blöcken auf volle Breite (wie der Fließtext .cms-text).
   Greift nur, wenn der Lead DIREKTES Kind von .container.reveal einer .section
   ist – das trifft die CMS-/KI-Blöcke, nicht die Startseite: dort steckt der
   Lead in Unter-Wrappern (.sec-head …) bzw. die Section heisst .cta-section. */
.section > .container.reveal > .section-lead { max-width: none; }

/* Lesbare Zeilenlänge für Bibliotheks-/KI-Blöcke (v. a. die Rechtsseiten).
   Der Container der Startseite ist mit 1400px auf Bild- und Karten-Raster
   ausgelegt – für Fließtext wären das deutlich zu lange Zeilen. Derselbe
   Selektor wie oben trifft genau die CMS-Blöcke, nicht die Startseite. */
.section > .container.reveal { max-width: 1120px; }

/* Seitentitel der Abschnittsliste (variant "prose", v. a. Rechtsseiten) deutlich
   grösser als der normale .section-h2 (clamp(30px,3.6vw,50px)) und vor allem klar
   über der festen Grösse der Kapitelüberschriften (.cms-subhead, 28px) – auf JEDER
   Bildschirmbreite, auch am schmalen Smartphone-Ende des clamp(). Zweizeilig ist
   dabei ausdrücklich in Ordnung (siehe Titel-Feld im Admin, feste Umbruchstelle
   statt Browser-Umbruch); die 1120px-Spalte wird dafür nicht verbreitert.
   Mindestwert 31px (nicht mehr, siehe unten) – erst ab 704px Breite greift der
   vw-Anteil und der Titel wächst weiter Richtung 58px. */
.cms-section--prose .section-h2 { font-size: clamp(31px, 4.4vw, 58px); }
/* Der Mindestwert 31px ist keine runde Zahl, sondern per Headless-Chromium
   (Newsreader, echte Schriftdatei) bei den gängigen Smartphone-Breiten
   360/375/390/414/430px nachgemessen: Ab 32px bricht "Datenschutzerklärung der"
   bei 360–375px (z. B. iPhone SE) in eine DRITTE Zeile um ("der" allein) – die
   feste Umbruchstelle nach "der" (Titel-Feld) hilft dort dann nichts mehr, weil
   schon die erste Zeile selbst zu lang wird. 31px ist der grösstmögliche Wert,
   der auf allen fünf getesteten Breiten zweizeilig bleibt. */

/* Call-to-Action-Reihe */
.cms-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

/* Raster */
.cms-grid {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}
.cms-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cms-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cms-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Karte */
.cms-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: 0 1px 3px rgba(22, 41, 75, 0.04);
}
.cms-card-num {
  position: absolute;
  top: 16px;
  right: 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px;
  line-height: 1;
  color: var(--accent-bg);
  pointer-events: none;
}
.cms-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--accent-bg);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.cms-card-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 8px;
}
.cms-card-text {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-mid);
  margin: 0;
}
.cms-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.cms-list li {
  display: flex;
  gap: 9px;
  font-size: 15px;
  color: var(--text-mid);
  padding: 5px 0;
}
.cms-list .li-arrow { color: var(--gold-text); }

/* Dunkles Band (variant "band") */
.cms-section--band { background: var(--accent-dark); }
.cms-section--band .eyebrow { color: rgba(255, 255, 255, 0.55); }
.cms-section--band .section-h2 { color: #fff; }
.cms-section--band .section-h2 em { color: var(--gold); }
.cms-section--band .section-lead,
.cms-section--band .cms-text { color: rgba(255, 255, 255, 0.72); }
.cms-section--band .cms-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.cms-section--band .cms-card-title { color: #fff; }
.cms-section--band .cms-card-text,
.cms-section--band .cms-list li { color: rgba(255, 255, 255, 0.66); }
.cms-section--band .cms-card-icon { background: rgba(195, 154, 62, 0.18); }
.cms-section--band .cms-list .li-arrow { color: var(--gold); }
.cms-section--band .cms-card-num { color: rgba(255, 255, 255, 0.10); }

/* Abstand-Block (variant "bare"): reiner Leerraum, ohne Section-Padding */
.cms-section--bare { padding: 0; }
.cms-spacer { width: 100%; }
.cms-spacer--sm { height: 28px; }
.cms-spacer--md { height: 56px; }
.cms-spacer--lg { height: 104px; }

@media (max-width: 860px) {
  .cms-grid-3, .cms-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .cms-spacer--sm { height: 20px; }
  .cms-spacer--md { height: 40px; }
  .cms-spacer--lg { height: 72px; }
}
@media (max-width: 560px) {
  .cms-grid-2, .cms-grid-3, .cms-grid-4 { grid-template-columns: 1fr; }
}