/* ==========================================================================
   Gesundheits-Cluster (Bluthochdruck, Diabetes Typ 2, …)
   Nutzt ausschliesslich Tokens aus style.css (:root). Keine neuen Hex-Werte.
   Dunkles Website-System — siehe Skill vesta-design, Entscheidungsregel
   "Marketing-/Erzaehlflaeche => dunkel".
   ========================================================================== */

.gh-page main {
  padding-top: 0;
}

/* ---------- Hero ---------- */
.gh-hero {
  position: relative;
  padding: clamp(120px, 16vh, 190px) 0 clamp(48px, 7vh, 80px);
  overflow: hidden;
}
.gh-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(46, 125, 50, 0.22) 0%, transparent 62%);
  pointer-events: none;
}
.gh-wrap {
  position: relative;
  z-index: 1;
  max-width: var(--container, 1120px);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}
.gh-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-300, #7BC47F);
  margin-bottom: 18px;
}
.gh-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 17ch;
}
.gh-hero__title em {
  font-style: italic;
  color: var(--green-400, #4CAF50);
}
.gh-hero__sub {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 58ch;
  margin: 0 0 32px;
}

/* ---------- Sektionen ---------- */
.gh-section {
  padding: clamp(52px, 8vh, 96px) 0;
}
.gh-section--tint {
  background: rgba(255, 255, 255, 0.022);
  border-block: 1px solid var(--border);
}
.gh-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  max-width: 22ch;
}
.gh-lead {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0 0 36px;
}

/* ---------- Vorher / Nachher ---------- */
.gh-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: stretch;
}
@media (max-width: 780px) {
  .gh-ba { grid-template-columns: minmax(0, 1fr); }
}
.gh-ba__col {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(20px, 2.6vw, 30px);
  background: rgba(255, 255, 255, 0.024);
}
.gh-ba__col--after {
  border-color: rgba(76, 175, 80, 0.38);
  background:
    linear-gradient(180deg, rgba(46, 125, 50, 0.12) 0%, rgba(46, 125, 50, 0.03) 100%);
}
.gh-ba__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  color: var(--text-tertiary);
}
.gh-ba__col--after .gh-ba__tag {
  color: var(--green-300, #7BC47F);
  border-color: rgba(76, 175, 80, 0.42);
}
.gh-ba__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gh-ba__list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  font-size: 15px;
  line-height: 1.58;
  color: var(--text-secondary);
}
.gh-ba__col--after .gh-ba__list li { color: var(--text); }
.gh-ba__ico {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
}

/* ---------- Urteils-Chips ---------- */
.gh-verdicts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .gh-verdicts { grid-template-columns: minmax(0, 1fr); }
}
.gh-verdict {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.024);
}
.gh-verdict__name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  font-size: 15px;
  margin-bottom: 8px;
}
.gh-verdict__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.gh-verdict--ok    .gh-verdict__dot { background: var(--green-400, #4CAF50); }
.gh-verdict--care  .gh-verdict__dot { background: var(--gold, #F9A825); }
.gh-verdict--crit  .gh-verdict__dot { background: var(--orange, #E65100); }
.gh-verdict p {
  margin: 0;
  font-size: 14px;
  line-height: 1.56;
  color: var(--text-secondary);
}

/* ---------- Schwellen-Tabelle ---------- */
.gh-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.gh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 460px;
}
.gh-table th,
.gh-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.gh-table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
}
.gh-table tbody tr:last-child th,
.gh-table tbody tr:last-child td { border-bottom: 0; }
.gh-table tbody th {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.gh-table td { color: var(--text-secondary); }

/* ---------- Schritte ---------- */
.gh-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  counter-reset: ghstep;
}
@media (max-width: 780px) {
  .gh-steps { grid-template-columns: minmax(0, 1fr); }
}
.gh-step {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.024);
}
.gh-step__n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--green-300, #7BC47F);
  margin-bottom: 12px;
}
.gh-step h3 {
  font-size: 17px;
  font-weight: 650;
  margin: 0 0 8px;
}
.gh-step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--text-secondary);
}

/* ---------- FAQ ---------- */
.gh-faq { display: flex; flex-direction: column; gap: 12px; }
.gh-faq__item {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.024);
  padding: 22px clamp(18px, 2.4vw, 28px);
}
.gh-faq__item h3 {
  font-size: clamp(16px, 1.5vw, 18.5px);
  font-weight: 650;
  line-height: 1.35;
  margin: 0 0 10px;
}
.gh-faq__item p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.gh-faq__item p:last-child { margin-bottom: 0; }

/* ---------- Autor / E-E-A-T ---------- */
.gh-author {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(22px, 2.8vw, 32px);
  background: rgba(255, 255, 255, 0.024);
  max-width: 74ch;
}
.gh-author h2 {
  font-size: 19px;
  font-weight: 650;
  margin: 0 0 12px;
}
.gh-author p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-secondary);
}
.gh-author p:last-child { margin-bottom: 0; }
.gh-author a { color: var(--green-300, #7BC47F); }

/* ---------- Medizinischer Hinweis ---------- */
.gh-disclaimer {
  border: 1px solid rgba(230, 81, 0, 0.34);
  border-left-width: 3px;
  border-radius: 14px;
  padding: 20px 24px;
  background: rgba(230, 81, 0, 0.055);
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 74ch;
}
.gh-disclaimer strong { color: var(--text); }

/* ---------- CTA ---------- */
.gh-cta {
  text-align: center;
  padding: clamp(56px, 9vh, 104px) 0;
}
.gh-cta .gh-h2 { margin-inline: auto; }
.gh-cta__row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.gh-cta__note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ---------- Querverweise ---------- */
.gh-related {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.gh-related a {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.gh-related a:hover,
.gh-related a:focus-visible {
  border-color: rgba(76, 175, 80, 0.5);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .gh-related a { transition: none; }
}

/* ==========================================================================
   Partner-/Coach-Seite — Provisionsstufen als Treppe
   Gleiche Metapher wie das Coach-Onboarding in der App (25 -> 40 %).
   ========================================================================== */

.gh-ladder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .gh-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gh-rung {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 20px;
  background: rgba(255, 255, 255, 0.024);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Aufsteigende Hoehe = die Treppe. Auf Mobile flach, sonst kippt das Raster. */
.gh-rung--1 { min-height: 150px; }
.gh-rung--2 { min-height: 176px; border-color: rgba(76, 175, 80, 0.20); }
.gh-rung--3 { min-height: 202px; border-color: rgba(76, 175, 80, 0.32); }
.gh-rung--4 {
  min-height: 228px;
  border-color: rgba(249, 168, 37, 0.45);
  background: linear-gradient(180deg, rgba(249, 168, 37, 0.10) 0%, rgba(249, 168, 37, 0.02) 100%);
}
@media (max-width: 720px) {
  .gh-rung { min-height: 0 !important; }
}
.gh-rung__pct {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: auto;
}
.gh-rung--4 .gh-rung__pct { color: var(--gold); }
.gh-rung__name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.gh-rung--4 .gh-rung__name { color: var(--gold); }
.gh-rung__req {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Beispielrechnung */
.gh-calc {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(22px, 2.8vw, 32px);
  background: rgba(255, 255, 255, 0.024);
  max-width: 62ch;
}
.gh-calc__row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  color: var(--text-secondary);
}
.gh-calc__row:last-of-type { border-bottom: 0; }
.gh-calc__row--total {
  border-top: 1px solid var(--border-strong);
  border-bottom: 0;
  margin-top: 6px;
  padding-top: 16px;
  color: var(--text);
  font-weight: 650;
  font-size: 16.5px;
}
.gh-calc__row--total span:last-child { color: var(--green-300); }
.gh-calc__note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-tertiary);
}

/* Zielgruppen-Chips */
.gh-who {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.gh-who span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* ==========================================================================
   App-Beweis: echte Screenshots aus dem Simulator
   Kein Mockup, keine Illustration — der Screenshot IST das Argument.
   Nur Tokens aus style.css; ein einziger weicher Schatten, damit das
   Geraet schwebt, ohne dass die Seite in Schatten ertrinkt.
   ========================================================================== */

/* ---------- Hero zweispaltig (Text + Geraet) ---------- */
.gh-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 330px);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  .gh-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  /* Auf schmalen Schirmen zuerst die Aussage, dann der Beleg. */
  .gh-hero__shot { order: 2; justify-self: center; max-width: 300px; }
}
.gh-hero__grid .gh-hero__title { max-width: 15ch; }
.gh-hero__grid .gh-hero__sub { max-width: 46ch; }

/* ---------- Geraet ---------- */
.gh-shot {
  margin: 0;
  min-width: 0;
}
.gh-shot__device {
  border-radius: 28px;
  border: 1px solid var(--border-strong);
  background: #000;
  padding: 5px;
  overflow: hidden;
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.9);
}
.gh-shot__device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}
.gh-shot figcaption {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-tertiary);
}
.gh-shot figcaption strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-300);
  font-weight: 500;
  margin-bottom: 5px;
}

/* ---------- Beweis-Sektion ---------- */
.gh-proof__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 250px)) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 44px);
  align-items: start;
}
@media (max-width: 980px) {
  .gh-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-proof__gains { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .gh-proof__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Vorteile neben den Screenshots */
.gh-proof__gains {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.gh-proof__gains li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  font-size: 15px;
  line-height: 1.58;
  color: var(--text-secondary);
}
.gh-proof__gains strong { color: var(--text); font-weight: 650; }
.gh-proof__gains svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  color: var(--green-300);
}

/* Zahl aus dem echten Scan — der Beleg in einer Zeile */
.gh-readout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-500);
  border-radius: 14px;
  padding: 18px 22px;
  background: rgba(76, 175, 80, 0.06);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0 0 34px;
}
.gh-readout b { color: var(--text); }

/* Herkunfts-Hinweis unter den Screenshots — Ehrlichkeit ist Teil des Arguments */
.gh-shot__source {
  margin: 26px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-tertiary);
  max-width: 74ch;
}

/* ==========================================================================
   Abschnitt mit Hintergrundbild
   Für Stellen, an denen das Bild ein ARGUMENT trägt — nicht als Deko.
   Auf der Diabetes-Seite: eine Küchenwaage hinter „Wofür Vesta ausdrücklich
   nicht gedacht ist". Der Text sagt „geschätzt, nicht gewogen"; das Bild
   zeigt genau das Gerät, das Vesta NICHT ersetzt.
   Das Bild ist vorab abgedunkelt UND liegt unter einem Verlauf — der Text
   darf nie gegen ein Foto ankämpfen müssen.
   ========================================================================== */
.gh-section--photo {
  position: relative;
  isolation: isolate;
  border-block: 1px solid var(--border);
  overflow: hidden;
}
.gh-section--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  /* ⚠️ Der Pfad in --gh-photo MUSS absolut sein (/assets/…). Ein relativer
     wird beim Einsetzen gegen DIESE Datei aufgelöst, also gegen /css/ —
     das Bild landete dann still auf /css/assets/… und fehlte (404), ohne
     dass die Seite kaputt aussieht. Genau die Art Fehler, die niemandem
     auffällt, bis die Fläche leer ist. */
  background-image: var(--gh-photo);
  background-size: cover;
  background-position: center right;
}
.gh-section--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Links dicht (dort steht der Text), rechts offener (dort steht die Waage) */
  background:
    linear-gradient(100deg, var(--bg) 0%, rgba(5, 8, 7, 0.92) 42%, rgba(5, 8, 7, 0.72) 100%);
}
@media (max-width: 780px) {
  /* Schmal steht der Text über dem Motiv — dann muss der Verlauf voll decken. */
  .gh-section--photo::after {
    background: linear-gradient(180deg, rgba(5, 8, 7, 0.93) 0%, rgba(5, 8, 7, 0.88) 100%);
  }
  .gh-section--photo::before { background-position: center; }
}

/* ==========================================================================
   Wissenschaftliche Grundlagen
   Dieselben Quellen, die die App selbst anzeigt
   (lib/core/constants/nutrition_sources.dart) — eine Website, die andere
   Belege nennt als das Produkt, wäre schlechter als gar keine.
   ========================================================================== */
.gh-sources {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}
.gh-source {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.024);
}
.gh-source__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.gh-source__label {
  font-weight: 650;
  font-size: 15px;
  color: var(--text);
}
.gh-source__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-300);
  border: 1px solid rgba(76, 175, 80, 0.35);
  border-radius: 999px;
  padding: 3px 9px;
}
.gh-source p {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.gh-source a {
  font-size: 13.5px;
  color: var(--green-300);
  overflow-wrap: anywhere;
}

/* Was NICHT aus einer Leitlinie stammt — bewusst abgesetzt statt versteckt.
   Genau diese Trennung ist der Vertrauensgewinn. */
.gh-ownwork {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--gold);
  border-radius: 14px;
  padding: 18px 22px;
  margin-top: 18px;
  background: rgba(249, 168, 37, 0.05);
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 74ch;
}
.gh-ownwork strong { color: var(--text); }

/* ---------- Schwellen-Tabelle auf schmalen Schirmen (Fund 09.09.2026) ----------
   `.gh-table` hatte `min-width: 460px` im `overflow-x`-Kasten. Auf einem
   iPhone (393 pt) lag damit die rechte Spalte AUSSERHALB des Bildes, ohne
   jeden Hinweis darauf — im Simulator gesehen: von der Tabelle „Die vier
   Zahlen, die hängen bleiben" war auf dem Handy keine einzige Zahl zu sehen.
   Unter 640 px wird jede Zeile deshalb zu einem Block gestapelt. Der
   Spaltenname kommt aus `data-label`, das `js/nav.js` aus dem `<thead>`
   überträgt — bleibt das JS aus, ist der Inhalt trotzdem vollständig da.
   Das Markup bleibt eine echte `<table>`: KI-Crawler lesen den Quelltext,
   nicht das CSS. */
@media (max-width: 640px) {
  .gh-tablewrap { overflow-x: visible; }
  .gh-table { min-width: 0; display: block; }
  .gh-table thead { display: none; }
  .gh-table tbody,
  .gh-table tr,
  .gh-table th,
  .gh-table td { display: block; width: auto; }
  .gh-table tbody tr {
    border-bottom: 1px solid var(--border);
    padding: 14px 0 16px;
  }
  .gh-table tbody tr:last-child { border-bottom: 0; }
  .gh-table tbody th,
  .gh-table tbody td {
    border-bottom: 0;
    padding: 2px 18px;
    white-space: normal;
  }
  .gh-table tbody th { font-size: 16px; padding-top: 0; }
  .gh-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 9px 0 1px;
  }
}