/* =============================================================================
   Vitafollow — Patienten-Website (www.vitafollow.de)

   FARBEN, SCHRIFT UND RADIEN STEHEN NICHT HIER. Sie werden aus
   `design/tokens/tokens.json` erzeugt und liegen als `./tokens.css` daneben
   (A-103, E-119). Kein Hex in dieser Datei (PROJEKTREGELN §5e Punkt 4).

   Gestaltung nach `design/DESIGN_GRUNDSAETZE.md` §4: eine Seite mit
   Ankernavigation, wechselnder Sektionsrhythmus, keine Schatten, keine Pillen,
   keine symmetrische Drei-Karten-Reihe.
   ============================================================================= */
@import "./tokens.css";

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-weight: var(--gewicht-fliesstext);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tanne); }

/* Der sichtbare Fokus ist Pflicht (WCAG 2.4.7), nicht Zierde. */
:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--radius-klein);
}

/* --- Kopfzeile: bleibt stehen ---------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 5;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}
.kopf .wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; padding-top: 26px; padding-bottom: 26px;
}
.wortmarke {
  font-size: 25px; font-weight: var(--gewicht-kernaussage);
  letter-spacing: -0.035em; color: var(--tinte); text-decoration: none;
}
.kopfnav { display: flex; flex-wrap: wrap; gap: 30px; font-size: 16px; font-weight: var(--gewicht-label); }
.kopfnav a { color: var(--gedaempft); text-decoration: none; }
.kopfnav a:hover { color: var(--tanne); }
.kopfnav a.stark { color: var(--tanne); font-weight: var(--gewicht-label-stark); }

/* --- Hero ------------------------------------------------------------------ */
.hero { padding: 96px 0 76px; }
.hero .inhalt { display: grid; gap: 30px; max-width: 980px; }
.hero h1 {
  margin: 0;
  font-size: clamp(44px, 8vw, 96px);
  line-height: 0.93;
  letter-spacing: -0.04em;
  font-weight: var(--gewicht-kernaussage);
  text-wrap: pretty;
}
/* Die Gewichtsspanne 200/800 ist das tragende Gestaltungsmittel (§1). */
.hero h1 .nachsatz { font-weight: var(--gewicht-nachsatz); color: var(--tanne); }
.hero .lede {
  margin: 0; font-size: clamp(18px, 2.4vw, 22px); line-height: 1.5;
  color: var(--tinte-weich); max-width: 46ch;
}
.knopfreihe { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.knopf {
  background: var(--tanne); color: var(--papier); text-decoration: none;
  font-size: 17px; font-weight: var(--gewicht-label-stark);
  padding: 16px 28px; border-radius: var(--radius-interaktiv);
  display: inline-block;
}
.knopf:hover { background: var(--hover); color: var(--papier); }
.nebenweg { font-size: 17px; font-weight: var(--gewicht-label); }

/* --- Zusagenzeile: eine laufende Reihe, keine Karten (§4) ------------------ */
.zusagen {
  display: flex; flex-wrap: wrap; gap: 0 34px;
  border-top: 1px solid var(--linie); padding: 22px 0;
  font-size: 15px; font-weight: var(--gewicht-label); color: var(--tinte-weich);
  list-style: none; margin: 0;
}
.zusagen li + li { border-left: 1px solid var(--linie); padding-left: 34px; }

/* --- App laden ------------------------------------------------------------- */
.laden { padding: 64px 0 72px; }
.laden .inhalt { display: grid; gap: 40px; max-width: 980px; }
h2 {
  margin: 0; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.05;
  letter-spacing: -0.03em; font-weight: var(--gewicht-titel); max-width: 26ch;
}
h2 .nachsatz { font-weight: var(--gewicht-nachsatz); }
.wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; }
.weg {
  display: grid; gap: 16px; align-content: start;
  border-top: 3px solid var(--tanne); padding-top: 20px;
}
.weg h3 { margin: 0; font-size: 20px; font-weight: var(--gewicht-titel); }
.weg p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--tinte-weich); }
.qr {
  width: 128px; height: 128px; border-radius: var(--radius-interaktiv);
  border: 1px solid var(--linie);
  background: repeating-linear-gradient(45deg,
    var(--platzhalter), var(--platzhalter) 6px,
    var(--papier) 6px, var(--papier) 12px);
  display: grid; place-items: center;
}
.qr span {
  font-family: var(--schrift-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--blass); text-align: center; text-transform: uppercase;
}
.adresse {
  font-family: var(--schrift-mono); font-size: 13px;
  color: var(--tanne); word-break: break-all;
}
.weg .gross { font-size: 21px; font-weight: var(--gewicht-titel); color: var(--tanne); }

/* --- Fragen: abgesetzte Fläche, asymmetrischer Zweispalter (§4) ------------ */
.fragen { padding: 72px 0 80px; background: var(--papier-tief); }
.fragen .inhalt { display: grid; gap: 34px; max-width: 980px; }
.fragen h2 { font-weight: var(--gewicht-nachsatz); font-size: clamp(28px, 4vw, 40px); }
.fragen h2 .kern { font-weight: var(--gewicht-titel); }
.frage {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px;
  border-top: 1px solid var(--linie-tief); padding: 24px 0;
}
.frage:last-child { border-bottom: 1px solid var(--linie-tief); }
.frage h3 { margin: 0; font-size: 23px; font-weight: var(--gewicht-titel); letter-spacing: -0.02em; }
.frage p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--tinte-weich); }
@media (max-width: 720px) { .frage { grid-template-columns: 1fr; gap: 12px; } }

/* --- Datenschutz: dunkle Fläche -------------------------------------------- */
.datenschutz { padding: 88px 0 80px; background: var(--tanne); color: var(--dunkel-text); }
.datenschutz .inhalt { display: grid; gap: 26px; max-width: 860px; }
.datenschutz h2 { font-weight: var(--gewicht-nachsatz); font-size: clamp(28px, 4.2vw, 44px); }
.datenschutz h2 .kern { font-weight: var(--gewicht-titel); }
.datenschutz p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--dunkel-text-weich); max-width: 56ch; }
.datenschutz a { color: var(--sonne); font-size: 18px; font-weight: var(--gewicht-label-stark); width: fit-content; }
.datenschutz a:hover { color: var(--sonne); }

/* --- Fußzeile -------------------------------------------------------------- */
.fuss { background: var(--tanne); border-top: 1px solid var(--dunkel-linie); color: var(--dunkel-blass); }
.fuss .wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; padding-top: 28px; padding-bottom: 28px;
  font-size: 14px;
}
.fuss .wortmarke { font-size: 17px; color: var(--dunkel-text); font-weight: var(--gewicht-titel); }
.fuss nav { display: flex; gap: 26px; flex-wrap: wrap; }
.fuss a { color: var(--dunkel-blass); }
.fuss a:hover { color: var(--dunkel-text); }

/* --- Unterseiten (Privatsphäre, Impressum) --------------------------------- */
.seitenkopf { padding: 72px 0 40px; }
.seitenkopf h1 {
  margin: 0 0 18px; font-size: clamp(34px, 5.5vw, 56px); line-height: 1.02;
  letter-spacing: -0.035em; font-weight: var(--gewicht-kernaussage);
}
.seitenkopf .lede { margin: 0; font-size: 20px; line-height: 1.55; color: var(--tinte-weich); max-width: 60ch; }

.abschnitt { padding: 0 0 56px; }
.abschnitt h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 16px; }
.abschnitt h3 { margin: 0 0 12px; font-size: 21px; font-weight: var(--gewicht-titel); }
.abschnitt p { max-width: 68ch; }

.karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius-interaktiv); padding: 24px; margin-bottom: 20px;
}
.liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.liste li { border-top: 1px solid var(--linie); padding: 14px 0; max-width: 68ch; }
.liste li:last-child { border-bottom: 1px solid var(--linie); }

.hinweis {
  background: var(--sonne-weich); color: var(--sonne-tinte);
  border-radius: var(--radius-interaktiv); padding: 16px 18px;
  font-size: 16px; max-width: 68ch;
}

dl.impressum { display: grid; gap: 0; margin: 0; max-width: 68ch; }
dl.impressum dt {
  font-family: var(--schrift-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gedaempft);
  border-top: 1px solid var(--linie); padding-top: 14px;
}
dl.impressum dd { margin: 4px 0 14px; font-size: 17px; }