/* clairr · Module (nach der Begleitung) — seitenspezifische Ergänzungen.
   Basis-Vokabular kommt aus style.css + begleitung.css (hero--lite,
   station, h2, lead, card, chip--aube, cta). Hier nur, was neu ist.
   Kein WebGL, keine Blur-Flächen in Scroll-Nähe. */

/* ── S02 · Einordnung (schmaler Strip, kein Card-Raster) ── */
.einordnung { padding: clamp(40px, 7vh, 72px) 0; }
.einordnung__inner { max-width: 760px; display: grid; gap: 22px; justify-items: start; }
.einordnung__text { font-size: clamp(1.05rem, 1.9vw, 1.3rem); font-weight: 300; line-height: 1.5; color: var(--offwhite); max-width: 56ch; }
.einordnung__link {
  display: inline-block; color: var(--faint); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .3s, border-color .3s;
}
.einordnung__link:hover { color: var(--lumiere); border-color: var(--lumiere); }

/* ── S03 · Modul-Gruppen (Kern der Seite) ───────────────── */
.modgroup { margin-top: clamp(48px, 7vh, 80px); }
.modgroup:first-of-type { margin-top: 52px; }
.modgroup__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.modgroup__label { color: var(--aube); flex: none; }
.modgroup__title { font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.8rem); letter-spacing: -.015em; color: var(--offwhite); }
.modgroup__intro { color: var(--muted); font-size: 1rem; max-width: 60ch; margin-bottom: 26px; }

.modgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
@media (max-width: 900px) { .modgrid { grid-template-columns: 1fr; } }

/* Einzel-Card der Gruppe B: bewusst über zwei Spalten, damit sie gesetzt
   und nicht verloren wirkt — auf Mobil ohnehin volle Breite. */
.modgrid--single { grid-template-columns: repeat(3, 1fr); }
.modgrid--single .modcard { grid-column: span 2; }
@media (max-width: 900px) { .modgrid--single .modcard { grid-column: auto; } }

/* Modul-Card — baut auf .card (Rahmen, Radius, Padding, Hover) auf. */
.modcard { display: flex; flex-direction: column; }
.modcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.modcard__head h3 { margin-bottom: 0; }
.modcard__head .chip { flex: none; margin-top: 2px; }
.modcard p { color: var(--muted); font-size: .96rem; }
.modcard__format { margin-top: auto; padding-top: 18px; color: var(--faint); font-size: .66rem; line-height: 1.7; }

/* Modul-Cards beim Mouseover in Lumière einfärben — Tint + Rahmen + zarter
   Schatten für Tiefe. Beide Themes, je an den Grund angepasst. */
.modcard { transition: border-color .4s, transform .4s, background-color .4s, box-shadow .4s; }

/* Light Mode: heller Blau-Tint über dem Creme-Grund */
html[data-theme="light"] .modcard:hover {
  background: rgba(11, 110, 240, .10);
  border-color: rgba(11, 110, 240, .5);
  box-shadow: 0 18px 50px -26px rgba(11, 110, 240, .45);
}

/* Dark Mode: Lumière in den dunklen Card-Grund gemischt + blauer Glow */
html:not([data-theme="light"]) .modcard:hover {
  background: color-mix(in srgb, var(--void-2) 84%, var(--lumiere));
  border-color: rgba(11, 110, 240, .55);
  box-shadow: 0 20px 55px -24px rgba(11, 110, 240, .6);
}

/* ── S04 · Laufende Begleitung (ruhig, kein Card-Raster) ── */
.ongoing__inner { max-width: 760px; }
.ongoing__text { color: var(--muted); font-size: clamp(1.02rem, 1.8vw, 1.18rem); line-height: 1.6; max-width: 60ch; margin: 18px 0 26px; }
.ongoing__mono { color: var(--faint); }

/* ── S05 · Datenschutz-Strip (Definition-List) ──────────── */
.privacy__lead { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 2.8vw, 1.9rem); line-height: 1.35; color: var(--offwhite); max-width: 34ch; margin-bottom: 40px; }
.privacy__list { display: grid; gap: 0; max-width: 820px; border-top: 1px solid var(--line); }
.privacy__row { display: grid; grid-template-columns: minmax(180px, 1fr) 2.4fr; gap: 12px 40px; padding: 24px 4px; border-bottom: 1px solid var(--line); }
@media (max-width: 720px) { .privacy__row { grid-template-columns: 1fr; gap: 8px; } }
.privacy__term { font-weight: 500; color: var(--offwhite); font-size: 1.02rem; letter-spacing: -.01em; }
.privacy__def { color: var(--muted); font-size: .98rem; line-height: 1.6; }

/* ── S06 · Schluss-CTA — Fußnote (Dashboard-Ausblick) ───── */
.cta__outlook { color: var(--faint); font-size: .82rem; margin-top: 30px; max-width: 52ch; }
.cta__outlook a { color: var(--faint); text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: color .3s, border-color .3s; }
.cta__outlook a:hover { color: var(--lumiere); border-color: var(--lumiere); }

/* ── Reveal-Grundzustände für die leichte Hero-Intro ────── */
.js .hero--lite .hero__sub, .js .hero--lite .hero__cta,
.js .hero--lite .hero__trust, .js .hero--lite .eyebrow { opacity: 0; transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) {
  .js .hero--lite .hero__sub, .js .hero--lite .hero__cta,
  .js .hero--lite .hero__trust, .js .hero--lite .eyebrow { opacity: 1 !important; transform: none !important; }
}