/* ════════════════════════════════════════════════════════════════════
   VitaScreen — geteilte Shell-Styles für Unterseiten
   (Variablen, Typografie, Buttons, Header, Footer — 1:1 aus index.html)
   plus Legal-Doc- und Praxis-Login-Layout.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --blue:        #0075C9;
  --blue-dark:   #005FA6;
  --navy:        #033B64;
  --navy-deep:   #022846;
  --sky:         #A7CBE8;
  --sky-soft:    #D9E8F4;
  --red:         #AC2C23;
  --white:       #FFFFFF;
  --ink:         #1F2D3A;
  --body:        #46586A;
  --muted:       #8AA0B3;
  --hairline:    #E6EDF3;
  --paper:       #FAFBFC;

  --r-card: 16px;
  --r-btn:  10px;
  --r-pill: 999px;

  --shadow-blue: 0 4px 14px rgba(0,117,201,.28);
  --shadow-card: 0 1px 2px rgba(3,59,100,.06), 0 8px 24px rgba(3,59,100,.06);

  --font-display: "DM Sans", system-ui, sans-serif;
  --font-caps: "Glacial Indifference", "DM Sans", sans-serif;

  --max: 1200px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { overflow-x: clip; }   /* verhindert Seitwaerts-Scrollen auf allen Unterseiten */
body {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--body);
  background: var(--white);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Typografie ─── */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy); margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.h-display { font-weight: 700; font-size: clamp(40px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -0.018em; }
.h-section { font-weight: 700; font-size: clamp(28px, 3.3vw, 38px); line-height: 1.12; letter-spacing: -0.015em; }
.subhead { font-weight: 500; font-size: clamp(19px, 1.6vw, 22px); color: var(--blue); line-height: 1.4; }
.lede { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--body); max-width: 60ch; }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); background: var(--sky); padding: 7px 14px; border-radius: var(--r-pill); }
.caps-tag { font-family: var(--font-caps); font-weight: 700; font-size: clamp(13px, 1vw, 15px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); }

/* ─── Layout ─── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 14px 22px; border-radius: var(--r-btn); border: 1.5px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--blue); color: var(--white); box-shadow: var(--shadow-blue); }
.btn--primary:hover { background: var(--blue-dark); box-shadow: 0 6px 18px rgba(0,117,201,.36); }
.btn--secondary { background: var(--white); color: var(--navy); border-color: var(--navy); }
.btn--secondary:hover { background: var(--sky-soft); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ─── Header ─── */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--hairline); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.site-header .logo { display: block; flex: 0 0 auto; width: 280px; height: 56px; overflow: hidden; position: relative; }
.site-header .logo img { position: absolute; width: 317.5px; height: auto; left: -30.9px; top: -22px; max-width: none; }
.site-header nav { display: flex; align-items: center; gap: 28px; }
.site-header .navlinks { display: flex; gap: 28px; }
.site-header nav a { color: var(--navy); font-weight: 500; font-size: 15px; white-space: nowrap; }
.site-header nav a:hover { color: var(--blue); text-decoration: none; }
.site-header nav a.btn--primary, .site-header nav a.btn--primary:hover { color: var(--white); }
.site-header .ctaWrap { display: flex; align-items: center; gap: 10px; }
@media (max-width: 980px) { .site-header nav .navlinks { display: none; } }
/* Mobile: Header passt in die Breite (Logo kleiner, Mail-Icon aus, CTA kompakt) */
@media (max-width: 600px) {
  .site-header .logo { width: 150px; height: 30px; }
  .site-header .logo img { width: 170.1px; left: -16.6px; top: -11.8px; }
  .site-header .ctaWrap .hdr-mail { display: none; }
  .site-header .ctaWrap .btn--primary { padding: 10px 13px; font-size: 13px; }
}

/* ─── Footer ─── */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.6); padding: 56px 0 32px; font-size: 14px; }
.site-footer .row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 820px) { .site-footer .row { grid-template-columns: 1fr 1fr; } }
.site-footer h4 { color: var(--white); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer a { color: rgba(255,255,255,0.65); display: block; padding: 4px 0; }
.site-footer a:hover { color: var(--white); text-decoration: none; }
.site-footer p { margin: 0; }
.site-footer .logo--footer { display: block; margin-bottom: 18px; }
.site-footer .logo--footer img { width: 196px; height: auto; display: block; }
.site-footer .legal { margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.10); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 12px; }
.site-footer .legal a { display: inline; margin-left: 16px; }
.site-footer .foot-sub { display: block; margin-top: 16px; margin-bottom: 3px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); font-weight: 600; }
.site-footer a.foot-call { display: flex; width: fit-content; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 16px; background: var(--blue); color: #fff; font-weight: 600; border-radius: var(--r-btn); }
.site-footer a.foot-call:hover { background: var(--blue-dark); color: #fff; text-decoration: none; }
.site-header .hdr-mail { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; color: var(--blue); border: 1.5px solid var(--hairline); flex: 0 0 auto; }
.site-header .hdr-mail:hover { background: var(--sky-soft); border-color: var(--sky); text-decoration: none; }

/* ─── Language Switcher (DE · EN) ─── */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); margin-right: 6px; }
.lang-switch a { color: var(--muted); padding: 4px 6px; border-radius: 4px; text-decoration: none; }
.lang-switch a:hover { color: var(--blue); background: var(--sky-soft); text-decoration: none; }
.lang-switch a.lang-active { color: var(--navy); cursor: default; }
.lang-switch a.lang-active:hover { background: transparent; color: var(--navy); }
.lang-switch span { color: var(--hairline); user-select: none; }
@media (max-width: 560px) { .lang-switch { font-size: 12px; margin-right: 2px; } .lang-switch a { padding: 3px 4px; } }
@media (max-width: 560px) { .site-footer .legal { flex-direction: column; } .site-footer .legal a { margin: 0 16px 0 0; } }

/* ─── Legal-/Info-Dokument ─── */
.doc-hero { background: var(--paper); border-bottom: 1px solid var(--hairline); }
.doc-hero .inner { max-width: 820px; margin: 0 auto; padding: clamp(48px,7vw,84px) var(--gutter) clamp(28px,4vw,40px); }
.doc-hero h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -0.018em; margin-top: 14px; }
.doc-hero .sub { color: var(--muted); font-size: 14px; margin-top: 12px; }
.doc { max-width: 820px; margin: 0 auto; padding: clamp(36px,5vw,60px) var(--gutter) clamp(64px,8vw,110px); }
.doc h2 { font-size: clamp(19px,2vw,24px); margin: 38px 0 12px; color: var(--navy); }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 16px; margin: 22px 0 6px; color: var(--navy); }
.doc p, .doc li { color: var(--body); font-size: 16px; line-height: 1.72; }
.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc strong { color: var(--navy); font-weight: 600; }
.doc .addr { line-height: 1.8; }
.doc-note { background: #FFF8E6; border: 1px solid #EFE0B0; border-radius: 12px; padding: 14px 18px; font-size: 13.5px; color: #7A5C12; margin: 0 0 30px; line-height: 1.6; }
.doc table { border-collapse: collapse; width: 100%; margin: 0 0 18px; }
.doc th, .doc td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hairline); font-size: 15px; vertical-align: top; }
.doc th { color: var(--navy); font-weight: 600; width: 38%; }

/* ─── Praxis-Login ─── */
.login-wrap { position: relative; isolation: isolate; overflow: hidden; min-height: 62vh; display: grid; place-items: center; padding: clamp(48px,7vw,96px) var(--gutter); background: var(--paper); }
.login-wrap > #blood-cells-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
.login-wrap::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(72% 62% at 50% 50%, rgba(250,251,252,.55), rgba(250,251,252,.08)); }
.login-card { position: relative; z-index: 2; width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--hairline); border-radius: 20px; box-shadow: var(--shadow-card); padding: 38px 34px; }
.login-card h1 { font-size: 25px; font-weight: 700; margin-bottom: 6px; }
.login-card .sub { color: var(--muted); font-size: 14px; margin-bottom: 26px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.field input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--hairline); border-radius: 10px; font: inherit; font-size: 15px; color: var(--ink); background: #fff; }
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,117,201,.12); }
.login-card .btn { width: 100%; justify-content: center; margin-top: 4px; }
.login-info { background: var(--sky-soft); border-radius: 12px; padding: 16px 18px; font-size: 13.5px; color: var(--navy); margin-top: 24px; line-height: 1.62; }
.login-meta { text-align: center; font-size: 13px; color: var(--muted); margin-top: 18px; }

/* ─── Anfrage-/Lead-Funnel (Studien- & Infomaterial) ─── */
.request-wrap { padding: clamp(40px,6vw,84px) 0 clamp(56px,8vw,104px); background: var(--paper); }
.request-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px,4vw,56px); align-items: start; }
@media (min-width: 900px) { .request-grid { grid-template-columns: 1fr 1.05fr; } }
.request-intro h1 { font-size: clamp(30px,4vw,46px); font-weight: 700; line-height: 1.08; letter-spacing: -0.018em; margin: 14px 0 0; }
.request-intro .lede { margin-top: 18px; }
.request-list { list-style: none; margin: 26px 0 0; padding: 0; }
.request-list li { position: relative; padding-left: 30px; margin-bottom: 14px; color: var(--body); font-size: 16px; line-height: 1.5; }
.request-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--sky-soft); }
.request-list li::after { content: ""; position: absolute; left: 7px; top: 6px; width: 6px; height: 10px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(40deg); }
.form-card { background: #fff; border: 1px solid var(--hairline); border-radius: 20px; box-shadow: var(--shadow-card); padding: clamp(26px,3vw,38px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } }
.field select, .field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--hairline); border-radius: 10px; font: inherit; font-size: 15px; color: var(--ink); background: #fff; }
.field textarea { resize: vertical; min-height: 96px; }
.field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,117,201,.12); }
.field .req { color: var(--red); }
.opt-angebot { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 18px; padding: 14px 16px; background: var(--sky-soft); border-radius: 12px; font-size: 14px; color: var(--navy); line-height: 1.5; cursor: pointer; }
.opt-angebot input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--blue); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; font-size: 13.5px; color: var(--body); line-height: 1.5; }
.consent input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--blue); }
.form-card .btn { width: 100%; justify-content: center; }
.form-msg { margin-top: 16px; font-size: 14px; color: var(--blue); text-align: center; }
.field .iti { width: 100%; }  /* intl-tel-input: Telefonfeld volle Breite */
.field .opt { color: var(--muted); font-weight: 500; font-size: 12px; }
.form-divide { margin: 24px 0 14px; padding-top: 18px; border-top: 1px solid var(--hairline); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ─── Messe-Funnel „Life Summit" ─── */
.messe-hero { background: var(--paper); border-bottom: 1px solid var(--hairline); padding: clamp(40px,6vw,80px) 0 clamp(32px,4vw,52px); }
.messe-hero h1 { font-size: clamp(30px,4.4vw,50px); font-weight: 700; line-height: 1.06; letter-spacing: -0.018em; margin: 18px 0 0; max-width: 18ch; }
.messe-hero .lede { margin-top: 18px; max-width: 64ch; }
.event-badge { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-caps); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); background: var(--sky); padding: 8px 16px; border-radius: var(--r-pill); }
.event-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(172,44,35,.16); animation: badge-pulse 2.4s ease-in-out infinite; }
@keyframes badge-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(172,44,35,.14); } 50% { box-shadow: 0 0 0 6px rgba(172,44,35,.05); } }
.ablauf { list-style: none; counter-reset: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 760px; }
@media (max-width: 640px) { .ablauf { grid-template-columns: 1fr; } }
.ablauf li { display: flex; align-items: flex-start; gap: 13px; }
.ablauf .ab-no { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: 15px; display: grid; place-items: center; box-shadow: var(--shadow-blue); }
.ablauf .ab-tx { font-size: 15px; line-height: 1.5; color: var(--body); }
.ablauf .ab-tx strong { color: var(--navy); }

/* Freiwillige Gesundheitsangaben */
.health-box { border: 1px solid var(--hairline); border-radius: 14px; padding: 18px 18px 6px; margin: 4px 0 18px; min-width: 0; }
.health-box legend { font-size: 13px; font-weight: 600; color: var(--navy); padding: 0 8px; }
.health-hint { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0 0 14px; }
.health-hint strong { color: var(--body); }
.consent--health { background: var(--sky-soft); border-radius: 12px; padding: 13px 15px; margin: 6px 0 4px; align-items: flex-start; color: var(--navy); }
.consent--health.is-required { box-shadow: inset 0 0 0 1.5px var(--blue); }
.consent--health input { accent-color: var(--blue); }

/* Bestätigung mit großer Testnummer */
.token-view { text-align: center; }
.token-lead { font-size: 16px; font-weight: 600; color: var(--navy); margin: 0 0 18px; }
.token-card { background: var(--navy); border-radius: var(--r-card); padding: 30px 24px; }
.token-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); }
.token-num { display: block; margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 9vw, 60px); letter-spacing: 0.06em; color: #fff; line-height: 1; }
.token-steps { font-size: 15px; line-height: 1.6; color: var(--body); margin: 20px auto 0; max-width: 42ch; }
.token-steps strong { color: var(--navy); }
.token-mail { font-size: 13.5px; color: var(--muted); margin: 12px auto 0; max-width: 42ch; line-height: 1.55; }

/* ─── Life-Summit Info-Sektionen (unter dem Formular) ─── */
.ls-sec { padding: clamp(48px,7vw,88px) 0; border-top: 1px solid var(--hairline); }
.ls-sec--paper { background: var(--paper); }
.ls-sec--navy { background: var(--navy); border-top: 0; }
.ls-h2 { font-size: clamp(26px,3.4vw,40px); font-weight: 700; color: var(--navy); line-height: 1.1; letter-spacing: -0.015em; margin: 14px 0 0; text-wrap: balance; }
.ls-lede { font-size: clamp(16px,1.5vw,19px); color: var(--body); line-height: 1.6; margin: 16px 0 0; max-width: 62ch; }
.ls-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 36px; }
@media (max-width: 760px) { .ls-cards { grid-template-columns: 1fr; } }
.ls-card { background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-card); }
.ls-card .ls-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; margin-bottom: 12px; box-shadow: var(--shadow-blue); }
.ls-card h3 { color: var(--navy); font-size: 17px; margin: 0 0 6px; }
.ls-card p { margin: 0; font-size: 15px; color: var(--body); line-height: 1.55; }

/* CMA-Skala */
.ls-scale { margin-top: 32px; max-width: 680px; }
.ls-scale-bar { height: 14px; border-radius: var(--r-pill); background: linear-gradient(90deg,#2DBA6E,#86C544 18%,#E8B53A 50%,#E07B2E 72%,#AC2C23); }
.ls-scale-ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.ls-scale-zones { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 20px; }
@media (max-width: 620px) { .ls-scale-zones { grid-template-columns: 1fr; } }
.lz { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--hairline); border-left: 4px solid var(--muted); }
.lz strong { display: block; color: var(--navy); font-size: 15px; }
.lz span { font-size: 13.5px; color: var(--body); line-height: 1.45; }
.lz--green { border-left-color: #2DBA6E; }
.lz--amber { border-left-color: #E0A12E; }
.lz--red { border-left-color: var(--red); }
.ls-disclaimer { margin-top: 22px; font-size: 13px; color: var(--muted); max-width: 72ch; line-height: 1.55; }

/* FAQ */
.ls-faq { margin-top: 28px; max-width: 760px; }
.ls-q { border-bottom: 1px solid var(--hairline); }
.ls-q summary { cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--navy); font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ls-q summary::-webkit-details-marker { display: none; }
.ls-q summary::after { content: "+"; color: var(--blue); font-weight: 700; font-size: 22px; line-height: 1; flex: 0 0 auto; }
.ls-q[open] summary::after { content: "–"; }
.ls-q p { margin: 0 0 18px; color: var(--body); font-size: 15px; line-height: 1.6; }

/* Mehr erfahren (navy) */
.ls-more { text-align: center; }
.ls-more .ls-lede { margin-left: auto; margin-right: auto; }
.ls-more-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--sky-soft); color: var(--navy); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn--ghost-light:hover { background: rgba(255,255,255,0.10); color: #fff; }