/* ==========================================================================
   Aufwärmen — clinical warmth
   Navy authority type · white cards on cool off-white · teal identity accent
   · orange action accent (clickable things only).
   ========================================================================== */

/* --- 1. Reset ------------------------------------------------------------ */

* { box-sizing: border-box; }

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd, fieldset {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* --- 2. Tokens ----------------------------------------------------------- */

:root {
  /* palette — from the brief */
  --ground:      #F2F4F3;
  --card:        #FFFFFF;
  --ink:         #16283D;
  --teal:        #1F7A72;
  --orange:      #E8672B;

  /* derived, contrast-checked */
  --ink-mid:     #52657C;   /* body on white  — 5.98:1 */
  --ink-soft:    #5F7086;   /* captions — 5.06:1 on white, 4.58:1 on --ground */
  --paper:       #FFFFFF;
  --paper-mid:   #C7D3DF;   /* body on navy — 9.8:1 */
  --teal-lift:   #5FCBBE;   /* teal for dark grounds — 7.7:1 on navy */
  --teal-tint:   rgba(31, 122, 114, 0.10);
  --teal-tint-2: rgba(31, 122, 114, 0.18);
  --orange-cta:  #C8501A;   /* CTA fill, white text — 4.55:1 */
  --orange-deep: #B0450F;   /* CTA hover */
  --line:        #E1E7EA;
  --line-soft:   #EDF1F2;
  --navy-line:   rgba(255, 255, 255, 0.14);

  /* functional support — data devices only */
  --amber:       #F5B301;   /* star ratings, progress strip */
  --green:       #2FA36B;   /* check discs */
  --green-ink:   #1E7A4C;   /* "verifiziert" text — 5.3:1 */

  /* type */
  --display: 'Cabinet Grotesk', system-ui, sans-serif;
  --body:    'General Sans', system-ui, sans-serif;

  /* spacing scale — nothing in this file sets a pad, gap or stack offset that
     isn't one of these or a sum of two of them. */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px; --s7: 48px;  --s8: 64px;  --s9: 96px;  --s10: 128px;

  /* rhythm — every band and gutter derives from the scale above */
  --gutter:          clamp(var(--s5), 4vw, var(--s7));                    /*  24 →  48 */
  --section-y:       clamp(var(--s8), 8vw, calc(var(--s9) + var(--s3)));  /*  64 → 108 */
  --section-y-tight: clamp(var(--s7), 6vw, calc(var(--s8) + var(--s3)));  /*  48 →  76 */
  --hero-y-top:      clamp(var(--s7), 7vw, calc(var(--s8) + var(--s5)));  /*  48 →  88 */
  --hero-y-bottom:   clamp(var(--s8), 8vw, calc(var(--s9) + var(--s2)));  /*  64 → 104 */
  --header-h:        calc(var(--s8) + var(--s1));                         /*  68 */

  /* radius — cards, controls, tracks. Three steps and a pill; no orphans.
     --radius-xs is the concentric inner for art framed in a --radius card. */
  --radius:      16px;
  --radius-sm:   10px;
  --radius-xs:   6px;
  --radius-pill: 999px;

  /* shadows — one family, y : blur held at 1 : 4 throughout */
  --shadow:        0 6px 24px  rgba(22, 40, 61, 0.07);
  --shadow-up:     0 12px 48px rgba(22, 40, 61, 0.12);
  --shadow-in:     0 2px 8px   rgba(22, 40, 61, 0.05);
  --shadow-float:  0 16px 64px rgba(9, 18, 30, 0.34);   /* card on navy — deep navy, never #000 */
  --shadow-cta:    0 4px 16px  rgba(200, 80, 26, 0.28);
  --shadow-cta-up: 0 8px 32px  rgba(200, 80, 26, 0.34);

  /* motion — one curve, one duration. --dur-lg is the single positional
     device move (the zone marker); --dur-track is the scroll readout, which
     tracks the wheel and would read as lag at anything slower. */
  --dur:       180ms;
  --dur-lg:    240ms;
  --dur-track: 120ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

::selection { background: var(--teal); color: #FFFFFF; }
/* On the navy grounds the identity teal is too close to the field to read as a
   selection; lift it and flip the ink. */
.hero ::selection, .statement ::selection, .result ::selection,
.page-head ::selection, .site-footer ::selection {
  background: var(--teal-lift); color: var(--ink);
}

/* --- 3. Base ------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets must clear the sticky header (68px) and its 3px strip. */
  scroll-padding-top: calc(var(--header-h) + var(--s5));
}

body {
  background: var(--ground);
  color: var(--ink-mid);
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Tracking ladder — negative and scaled by size, so the biggest type is the
   tightest: ≥3rem −0.035em · 2–3rem −0.025em · 1.1–2rem −0.015em · ≤1rem open.
   Line-heights hold one value per bucket: display 1.04, subhead 1.22. */
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 800;
}

h3, h4 {
  font-weight: 700; line-height: 1.22; letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Bold body-font labels — one leading for the whole bucket. */
.qa__q, .quote__name, .spoint__title, .field__legend,
.tier__name, .site-footer__h { line-height: 1.3; }

a {
  color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--ink); }
a:active { color: var(--teal); opacity: 0.75; }

strong, b { font-weight: 600; color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide { max-width: 1320px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.num { font-variant-numeric: tabular-nums lining-nums; }

/* Rag control. Display headings balance; running copy wraps "pretty" so no
   paragraph is left ending on a lone word. Headings carrying a hard <br> are
   broken by hand instead and are deliberately excluded. */
.hero__sub, .section__lead, .statement__sub, .page-head__sub, .stat__label,
.split__body > p, .band__card p, .qa__a, .quote__text, .result__line,
.spoint__text, .footnote, .prose p, .prose li, .site-footer__blurb,
.site-footer__compliance, .guarantee p, .dose__note, .inc span {
  text-wrap: pretty;
}

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--s5); border-radius: var(--radius-sm);
  font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: var(--s4); color: var(--paper); }
.skip-link:active { color: var(--paper); opacity: 1; background: var(--teal); }

/* --- 4. Brandmark -------------------------------------------------------- */

.brand {
  display: inline-flex; align-items: center; gap: var(--s2);
  text-decoration: none; color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__word {
  font-family: var(--display); font-weight: 700; font-size: 1.3rem;
  letter-spacing: -0.015em; line-height: 1;
}
.brand__dot { color: var(--orange); }
.brand:hover { color: var(--teal); }
.brand:active { color: var(--teal); opacity: 0.75; }
.brand:hover .brand__dot { color: var(--orange); }

.brand--light { color: var(--paper); }
.brand--light:hover, .brand--light:active { color: var(--teal-lift); }

/* --- 5. Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--body); font-weight: 600; font-size: 1.0625rem;
  padding: var(--s4) var(--s5); border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:active { opacity: 1; }

.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:active .btn__arrow { transform: translateX(2px); }

.btn--primary {
  background: var(--orange-cta); color: #FFFFFF;
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover {
  background: var(--orange-deep); color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-up);
}
/* Press returns the button to the page and takes the lift-shadow with it. */
.btn--primary:active {
  background: var(--orange-deep); color: #FFFFFF;
  transform: translateY(0); box-shadow: var(--shadow-cta);
}

.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); }
.btn--ghost:active {
  border-color: var(--teal); color: var(--teal);
  background: var(--teal-tint); transform: translateY(0);
}

.btn--ghost-light {
  background: transparent; color: var(--paper); border-color: var(--navy-line);
}
.btn--ghost-light:hover {
  color: var(--ink); background: var(--paper);
  border-color: var(--paper); transform: translateY(-2px);
}
.btn--ghost-light:active {
  color: var(--ink); background: var(--paper-mid);
  border-color: var(--paper-mid); transform: translateY(0);
}

.btn--block { width: 100%; }
.btn--sm { padding: var(--s3) var(--s5); font-size: 0.95rem; }

/* --- 6. Header ----------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__bar {
  display: flex; align-items: center; gap: var(--s5);
  min-height: var(--header-h);
}

.site-nav { margin-left: auto; }
.site-nav__list { display: flex; align-items: center; gap: var(--s5); }
.site-nav__link {
  color: var(--ink-mid); text-decoration: none; font-weight: 500;
  font-size: 1rem; padding: var(--s2) 0; position: relative;
  transition: color var(--dur) var(--ease);
}
.site-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--teal); transform: scaleX(0);
  transform-origin: left; transition: transform var(--dur) var(--ease);
}
.site-nav__link:hover { color: var(--ink); }
.site-nav__link:hover::after { transform: scaleX(1); }
.site-nav__link:active { color: var(--teal); opacity: 1; }
.site-nav__link:active::after { transform: scaleX(1); }

.header-trust {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 0.9rem; color: var(--ink-mid); font-weight: 500;
  background: var(--teal-tint); border-radius: var(--radius-pill);
  /* Left pad trimmed a step to optically centre the leading shield. */
  padding: var(--s2) var(--s3) var(--s2) var(--s2);
}
.header-trust svg { width: 15px; height: 15px; color: var(--teal); flex: none; }

.nav-toggle {
  display: none; margin-left: auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--s2) var(--s3); cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.nav-toggle:hover { border-color: var(--teal); }
.nav-toggle:active { border-color: var(--teal); background: var(--teal-tint); }
.nav-toggle svg { width: 20px; height: 20px; color: var(--ink); }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* scroll progress strip — real data: how far down the page you are */
.scroll-strip { height: 3px; background: var(--line-soft); }
.scroll-strip__fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--amber), var(--orange));
  transition: width var(--dur-track) linear;
}

/* --- 7. Hero — navy claim band ------------------------------------------- */

.hero {
  background: var(--ink);
  color: var(--paper-mid);
  padding-block: var(--hero-y-top) var(--hero-y-bottom);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: auto auto -40% -10%;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 122, 114, 0.22), transparent 68%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid; gap: clamp(var(--s6), 5vw, var(--s8));
  align-items: center;
}

.hero__title {
  color: var(--paper);
  /* 5.6vw keeps "Wieder in Schwung." on one line down to the 900px breakpoint;
     at 6.2vw the second line orphaned "Schwung." between ~1100 and 1300px.
     The break is set by hand in the markup, so no text-wrap: balance here —
     the two would fight over the same line boxes. Neither hand-set line ends
     on a function word. */
  font-size: clamp(2.45rem, 5.6vw, 4.4rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.02;
}
.hero__title .brand__dot { color: var(--orange); }

.hero__sub {
  margin-top: var(--s5);
  font-size: clamp(1.075rem, 1.7vw, 1.25rem);
  line-height: 1.55; max-width: 62ch; color: var(--paper-mid);
}

.hero__actions {
  margin-top: var(--s6);
  display: flex; flex-wrap: wrap; gap: var(--s3);
}

.hero__merch {
  margin-top: var(--s5); font-size: 0.95rem; color: var(--paper-mid);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center;
}
.hero__merch span { display: inline-flex; align-items: center; gap: var(--s2); }
.hero__merch svg { width: 15px; height: 15px; color: var(--teal-lift); flex: none; }

/* inset product card — the art's radius is the concentric inner for a
   --radius frame at --s3 padding, not a second card radius. */
.hero__card {
  background: var(--card); border-radius: var(--radius);
  padding: var(--s3); box-shadow: var(--shadow-float);
}
.hero__card .ph { border-radius: var(--radius-xs); }
.hero__spec {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
  padding: var(--s3) var(--s1) var(--s1); font-size: 0.9rem; color: var(--ink-mid);
  letter-spacing: 0.01em;
}
.hero__spec b { color: var(--ink); font-weight: 600; }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; }
}

/* --- 8. Figures / placeholders ------------------------------------------- */

.ph {
  position: relative; overflow: hidden;
  background: var(--ink); border-radius: var(--radius);
}
.ph img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* --- 9. Sections & headings ---------------------------------------------- */

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }

/* The measure belongs on the children, not the wrapper: `ch` here resolves
   against the wrapper's inherited 17px body size, so a cap on .section__head
   clamped both the 45px display title AND the lead to ~310px.
   The gap under a section head is one value site-wide and lives here, not in
   per-section inline styles. */
.section__head { max-width: none; margin-bottom: var(--s7); }
.section__title {
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  max-width: 20ch;          /* ~490px at the 2.85rem cap — display measure */
  text-wrap: balance;
}
.section__lead {
  margin-top: var(--s4); font-size: 1.09rem; color: var(--ink-mid);
  max-width: 58ch; line-height: 1.6;
}

.footnote {
  font-size: 0.875rem; color: var(--ink-soft); line-height: 1.55;
  max-width: 70ch; letter-spacing: 0.01em;
}
/* Footnotes sit one step off whatever block they annotate. */
.stats + .footnote, .dose + .footnote, .guarantee + .footnote {
  margin-top: var(--s5);
}

/* --- 10. Stat tiles ------------------------------------------------------ */

.stats { display: grid; gap: var(--s4); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(3, 1fr); } }

.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(var(--s5), 3vw, var(--s6));
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }

.stat__value {
  font-family: var(--display); font-weight: 800; color: var(--ink);
  font-size: clamp(2.9rem, 5vw, 3.9rem); line-height: 1;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums;
  display: flex; align-items: baseline; gap: var(--s1);
}
.stat__unit { font-size: 0.55em; color: var(--teal); letter-spacing: -0.015em; }
.stat__label {
  margin-top: var(--s3); font-size: 1rem; color: var(--ink-mid); line-height: 1.5;
}
.stat__label b { color: var(--ink); font-weight: 600; }

.stats-row { margin-top: var(--s5); display: grid; gap: var(--s3); }
@media (min-width: 640px) { .stats-row { grid-template-columns: repeat(3, 1fr); } }
.stat--mini { padding: var(--s5); }
.stat--mini .stat__value {
  font-size: clamp(1.7rem, 3vw, 2.1rem); letter-spacing: -0.025em;
}
.stat--mini .stat__label { font-size: 0.925rem; margin-top: var(--s2); }

/* --- 11. Wide lifestyle band --------------------------------------------- */

.band { position: relative; }
/* The declared ratio would render ~960px tall at desktop and a 260px strip at
   390px. Constrain the box; object-fit: cover keeps the subject framed. */
.band__figure { width: 100%; border-radius: 0; min-height: 420px; }
.band__figure img { object-position: 62% center; }

/* Gutter at every width — without this the card ran flush to both screen
   edges below 900px, where .band__inner picks up no padding. */
.band__inner { padding-inline: var(--gutter); }

.band__card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-up); padding: clamp(var(--s6), 4vw, var(--s7));
  max-width: 560px; margin-inline: auto;
  margin-top: calc(var(--s7) * -1); position: relative; z-index: 2;
}
.band__card p { margin-top: var(--s4); color: var(--ink-mid); }

@media (min-width: 900px) {
  .band { display: grid; }
  .band__figure { grid-area: 1 / 1; height: clamp(520px, 50vw, 700px); min-height: 0; }
  .band__figure img { object-position: 68% center; }
  .band__inner {
    grid-area: 1 / 1; align-self: center; position: relative; z-index: 2;
    width: 100%; max-width: 1320px; margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .band__card { margin: 0; max-width: 470px; }
}

/* --- 12. Spec ledger ----------------------------------------------------- */

.ledger { display: grid; gap: clamp(var(--s6), 4vw, var(--s7)); align-items: start; }
@media (min-width: 900px) { .ledger { grid-template-columns: 0.85fr 1.15fr; } }

.ledger__card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(var(--s5), 3vw, var(--s6));
}

.ledger-table caption {
  text-align: left; font-size: 0.9rem; color: var(--ink-soft);
  padding-bottom: var(--s3); letter-spacing: 0.01em;
}
.ledger-table th {
  text-align: left; font-weight: 600; font-size: 0.875rem;
  color: var(--ink-soft); padding: 0 var(--s3) var(--s3) 0;
  border-bottom: 1px solid var(--line); letter-spacing: 0.01em;
}
.ledger-table th:last-child, .ledger-table td:last-child { padding-right: 0; }
.ledger-table td {
  padding: var(--s4) var(--s3) var(--s4) 0; border-bottom: 1px solid var(--line-soft);
  vertical-align: top; font-size: 0.975rem;
}
.ledger-table tr:last-child td { border-bottom: 0; }
.ledger-table .ing { color: var(--ink); font-weight: 600; white-space: nowrap; }
.ledger-table .amt {
  color: var(--ink); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.ledger-table .fn { color: var(--ink-mid); font-size: 0.94rem; line-height: 1.5; }

.nrv { margin-top: var(--s2); }
.nrv__bar {
  height: 5px; border-radius: var(--radius-pill); background: var(--teal-tint);
  overflow: hidden; width: 72px;
}
.nrv__fill { height: 100%; background: var(--teal); border-radius: var(--radius-pill); }
.nrv__text {
  display: block; margin-top: var(--s1); font-size: 0.8rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums lining-nums; font-weight: 500;
  letter-spacing: 0.01em;
}

/* dosage zone bar */
.dose { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.dose__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s4); flex-wrap: wrap;
}
.dose__title { font-size: 1rem; color: var(--ink); font-weight: 600; }
.dose__meta {
  font-size: 0.9rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.01em;
}
.dose__track {
  margin-top: var(--s3); display: flex; gap: var(--s1);
}
.dose__seg {
  height: 10px; flex: 1; border-radius: var(--radius-pill); background: var(--teal-tint);
}
.dose__seg--on { background: var(--teal); }
.dose__note { margin-top: var(--s2); font-size: 0.9rem; color: var(--ink-mid); }

/* --- 13. Stoffwechsel-Check (signature interactive) ---------------------- */

.check { background: var(--card); }
.check__grid { display: grid; gap: clamp(var(--s5), 3.5vw, var(--s7)); align-items: start; }
@media (min-width: 940px) { .check__grid { grid-template-columns: 1.05fr 0.95fr; } }

.check__panel {
  background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(var(--s5), 3vw, var(--s6));
}

.field { margin-bottom: var(--s6); }
.field:last-of-type { margin-bottom: var(--s5); }
.field__legend {
  font-family: var(--body); font-weight: 600; font-size: 1.02rem;
  color: var(--ink); margin-bottom: var(--s3); padding: 0;
  display: flex; align-items: baseline; gap: var(--s2);
}
.field__hint {
  font-weight: 400; font-size: 0.875rem; color: var(--ink-soft);
  letter-spacing: 0.01em;
}

/* segmented radio buttons */
.opts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.opt { position: relative; }
.opt input {
  position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.opt span {
  display: block; padding: var(--s3) var(--s5); border-radius: var(--radius-pill);
  background: var(--card); border: 1px solid var(--line);
  color: var(--ink-mid); font-weight: 500; font-size: 0.98rem;
  font-variant-numeric: tabular-nums lining-nums;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.opt input:hover + span { border-color: var(--teal); color: var(--ink); }
.opt input:checked + span {
  background: var(--teal); border-color: var(--teal); color: #FFFFFF;
}
/* Press state, after :checked so an unticked option still reads on pointer-down. */
.opt input:not(:checked):active + span {
  background: var(--teal-tint); border-color: var(--teal); color: var(--ink);
}
.opt input:checked:active + span { opacity: 0.88; }
.opt input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 3px; }
.opt input:disabled + span { opacity: 0.45; cursor: not-allowed; }
.opt input:disabled:hover + span { border-color: var(--line); color: var(--ink-mid); }

.opt--chip span { border-radius: var(--radius-sm); }

/* slider */
.slider-row { display: flex; align-items: center; gap: var(--s4); }
.slider-row input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 26px; background: transparent; cursor: pointer; margin: 0;
}
.slider-row input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--teal-tint-2), var(--teal));
}
.slider-row input[type="range"]::-moz-range-track {
  height: 8px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--teal-tint-2), var(--teal));
}
.slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  margin-top: -8px;   /* control geometry: centres the 24px thumb on the 8px track */
  background: var(--card); border: 3px solid var(--ink);
  box-shadow: var(--shadow-in);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.slider-row input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--card); border: 3px solid var(--ink);
  box-shadow: var(--shadow-in);
}
.slider-row input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.08); }
/* Grabbing the thumb pulls it in slightly — the press analogue of the lift. */
.slider-row input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(0.96); border-color: var(--teal);
}
.slider-row input[type="range"]:active::-moz-range-thumb { border-color: var(--teal); }
.slider-row input[type="range"]:focus-visible { outline: none; }
.slider-row input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 3px solid var(--teal); outline-offset: 3px;
}
.slider-row input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 3px solid var(--teal); outline-offset: 3px;
}
.slider-end { font-size: 0.9rem; color: var(--ink-soft); font-weight: 500; flex: none; }

.slider-value {
  margin-top: var(--s2); font-size: 0.925rem; color: var(--ink-mid);
}
.slider-value b { color: var(--ink); font-weight: 600; }

/* result card */
.result {
  background: var(--ink); color: var(--paper-mid);
  border-radius: var(--radius); padding: clamp(var(--s5), 3vw, var(--s6));
  box-shadow: var(--shadow-up); position: sticky;
  top: calc(var(--header-h) + var(--s5));
}
.result__kicker { font-size: 0.925rem; color: var(--paper-mid); }
.result__type {
  font-family: var(--display); font-weight: 800; color: var(--paper);
  font-size: clamp(2.4rem, 4.6vw, 3.2rem); line-height: 1.02;
  letter-spacing: -0.035em; margin-top: var(--s2);
}
.result__line { margin-top: var(--s4); color: var(--paper-mid); line-height: 1.55; }

/* zone bar device */
.zone { margin-top: var(--s6); }
.zone__track {
  height: 12px; border-radius: var(--radius-pill); position: relative;
  background: linear-gradient(90deg, var(--teal) 0%, var(--green) 46%, var(--amber) 100%);
}
.zone__marker {
  position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); border: 4px solid var(--ink);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%);
  left: 50%;
  transition: left var(--dur-lg) var(--ease);
}
.zone__labels {
  margin-top: var(--s2); display: flex; justify-content: space-between;
  font-size: 0.85rem; color: var(--paper-mid); letter-spacing: 0.01em;
}
.zone__labels span { flex: 1; }
.zone__labels span:nth-child(2) { text-align: center; }
.zone__labels span:last-child { text-align: right; }
.zone__labels .is-active { color: var(--paper); font-weight: 600; }

.result__rec {
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--navy-line);
}
.result__rec-label { font-size: 0.925rem; color: var(--paper-mid); }
.result__rec-tier {
  font-family: var(--display); font-weight: 700; color: var(--paper);
  font-size: 1.35rem; margin-top: var(--s1); letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums lining-nums;
}
.result__cta { margin-top: var(--s4); }
.result__disclaimer {
  margin-top: var(--s4); font-size: 0.82rem; color: var(--paper-mid);
  opacity: 0.85; line-height: 1.55; letter-spacing: 0.01em;
}

/* --- 14. Split (human-in-use) -------------------------------------------- */

.split { display: grid; gap: clamp(var(--s6), 4vw, var(--s8)); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
}
.split__media .ph { box-shadow: var(--shadow); }

/* Direct children only — the nested stat tiles keep their own type treatment. */
.split__body > p { margin-top: var(--s4); color: var(--ink-mid); max-width: 56ch; }
.split__body > .split__sign {
  margin-top: var(--s5); font-size: 0.95rem; color: var(--ink-soft);
  max-width: none; display: flex; align-items: center; gap: var(--s3);
}
.split__sign svg { width: 22px; height: 22px; flex: none; }

/* icon circle */
.icirc {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--teal-tint);
  display: inline-flex; align-items: center; justify-content: center;
}
.icirc svg { width: 21px; height: 21px; color: var(--teal); }
.icirc--light { background: rgba(95, 203, 190, 0.16); }
.icirc--light svg { color: var(--teal-lift); }

/* --- 15. Testimonials ---------------------------------------------------- */

.quotes { display: grid; gap: var(--s4); }
@media (min-width: 860px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(var(--s5), 2.6vw, var(--s6));
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quote:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }

.quote__person { display: flex; align-items: center; gap: var(--s3); }
.quote__disc {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: var(--teal-tint); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.quote__name { color: var(--ink); font-weight: 600; font-size: 1.02rem; }
.quote__meta {
  font-size: 0.885rem; color: var(--ink-soft); margin-top: var(--s1);
  letter-spacing: 0.01em;
}

.stars { display: flex; gap: var(--s1); margin-top: var(--s4); }
.stars svg { width: 16px; height: 16px; color: var(--amber); }

.quote__text {
  margin-top: var(--s3); color: var(--ink-mid); line-height: 1.6;
  font-size: 1.0rem; flex: 1;
}
.quote__verified {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: var(--s2);
  font-size: 0.875rem; color: var(--green-ink); font-weight: 500;
  letter-spacing: 0.01em;
}
.quote__verified svg { width: 16px; height: 16px; flex: none; }

/* --- 16. Statement band -------------------------------------------------- */

.statement { background: var(--ink); color: var(--paper-mid); }
.statement__grid { display: grid; gap: clamp(var(--s6), 4vw, var(--s8)); align-items: center; }
@media (min-width: 900px) { .statement__grid { grid-template-columns: 1.15fr 0.85fr; } }

.statement__title {
  color: var(--paper);
  font-size: clamp(1.95rem, 4vw, 3.05rem);
  letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance;
}
.statement__sub { margin-top: var(--s5); color: var(--paper-mid); max-width: 55ch; }

.statement__points { display: grid; gap: var(--s4); }
.spoint { display: flex; gap: var(--s4); align-items: flex-start; }
.spoint__body { flex: 1; }
.spoint__title { color: var(--paper); font-weight: 600; font-size: 1.02rem; }
.spoint__text {
  margin-top: var(--s1); font-size: 0.95rem; color: var(--paper-mid); line-height: 1.55;
}

/* --- 17. FAQ ------------------------------------------------------------- */

.faq__grid { display: grid; gap: clamp(var(--s6), 3.5vw, var(--s7)); align-items: start; }
@media (min-width: 940px) { .faq__grid { grid-template-columns: 1.35fr 0.65fr; } }

.faq__list { display: grid; gap: var(--s3); }

.qa {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-in);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.qa:hover { border-color: var(--teal); }
.qa[open] { box-shadow: var(--shadow); }

.qa__q {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) clamp(var(--s4), 2.4vw, var(--s5));
  cursor: pointer; list-style: none;
  color: var(--ink); font-weight: 600; font-size: 1.06rem;
  font-family: var(--body);
  transition: color var(--dur) var(--ease);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:active { color: var(--teal); }
.qa__q:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; border-radius: var(--radius-sm); }
.qa__chev {
  margin-left: auto; flex: none; width: 20px; height: 20px; color: var(--teal);
  transition: transform var(--dur) var(--ease);
}
.qa[open] .qa__chev { transform: rotate(180deg); }
/* Question and answer share one horizontal inset so the copy lines up. */
.qa__a {
  padding: 0 clamp(var(--s4), 2.4vw, var(--s5)) var(--s5);
  color: var(--ink-mid); line-height: 1.6; max-width: 62ch;
}

.faq__aside {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(var(--s5), 3vw, var(--s6));
  box-shadow: var(--shadow);
}
.faq__aside h3 { font-size: 1.35rem; margin-top: var(--s4); letter-spacing: -0.015em; }
.faq__aside p { margin-top: var(--s3); color: var(--ink-mid); font-size: 0.98rem; }
.faq__aside a { font-weight: 600; }
.faq__contact { margin-top: var(--s4); display: grid; gap: var(--s2); font-size: 0.98rem; }

/* --- 18. Order / money block --------------------------------------------- */

.order { background: var(--ground); }

.order__card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-up);
  overflow: hidden;
}

/* honest shipping-cutoff strip — the one urgency device on the page */
.cutoff {
  background: linear-gradient(90deg, var(--amber), var(--orange));
  color: #2A1405;
  padding: var(--s3) clamp(var(--s5), 3vw, var(--s6));
  display: flex; align-items: center; justify-content: center;
  gap: var(--s3); flex-wrap: wrap;
  font-size: 0.95rem; font-weight: 600; text-align: center;
}
.cutoff svg { width: 17px; height: 17px; flex: none; }
.cutoff .num { font-variant-numeric: tabular-nums lining-nums; }

.order__body {
  display: grid; gap: clamp(var(--s6), 3.5vw, var(--s7));
  padding: clamp(var(--s5), 3.5vw, var(--s7));
  align-items: start;
}
/* The tier column carries three cards side by side and needs the room: at
   0.82/1.18 each tier resolved to ~186px, leaving ~138px of content for a
   32.8px tabular price like "149,00 €". */
@media (min-width: 960px) { .order__body { grid-template-columns: 0.72fr 1.28fr; } }

.order__media .ph { box-shadow: var(--shadow); }
.order__includes { margin-top: var(--s5); display: grid; gap: var(--s3); }
.inc { display: flex; align-items: flex-start; gap: var(--s3); font-size: 0.98rem; color: var(--ink-mid); }
.inc__disc {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  margin-top: 2px;   /* optical: drops the disc onto the first line's x-height */
  background: var(--green); display: flex; align-items: center; justify-content: center;
}
.inc__disc svg { width: 12px; height: 12px; color: #FFFFFF; }
.inc b { color: var(--ink); font-weight: 600; }

/* Stacked, the gap must clear the "Beliebteste Wahl" flag, which hangs ~14px
   above its card; at 12px it collided with the card above. */
.tiers { display: grid; gap: var(--s5); }
@media (min-width: 620px) {
  .tiers { grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
}

.tier {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--s5);
  display: flex; flex-direction: column; position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.tier:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--teal); }

.tier--best { border-color: var(--teal); border-width: 2px; padding: calc(var(--s5) - 1px); }

/* result-driven selection: identity accent, never the action accent */
.tier--rec {
  border-color: var(--teal); border-width: 2px; padding: calc(var(--s5) - 1px);
  background: rgba(31, 122, 114, 0.04);
  box-shadow: 0 0 0 4px var(--teal-tint);
}

/* Three-up the card resolves to ~200px, leaving ~155px of content for a
   tabular "149,00 €". Trim the gutters and the price so the price line and the
   fact rows stop crowding the card edge. Must sit AFTER .tier/.tier--best or
   the equal-specificity base padding wins on source order. */
@media (min-width: 620px) {
  .tier { padding: var(--s5) var(--s4); }
  .tier--best, .tier--rec { padding: calc(var(--s5) - 1px) calc(var(--s4) - 1px); }
  .tier__now { font-size: 1.85rem; }
}

.tier__flag {
  position: absolute; top: -1px; right: var(--s4); transform: translateY(-50%);
  background: var(--teal); color: #FFFFFF;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em;
  padding: var(--s1) var(--s3); border-radius: var(--radius-pill);
}

.tier__name {
  font-family: var(--display); font-weight: 700; font-size: 1.22rem;
  color: var(--ink); letter-spacing: -0.015em;
}
.tier__dur {
  font-size: 0.9rem; color: var(--ink-soft); margin-top: var(--s1);
  font-variant-numeric: tabular-nums lining-nums;
}

.tier__price {
  margin-top: var(--s4); display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
}
.tier__now {
  font-family: var(--display); font-weight: 800; font-size: 2.05rem;
  color: var(--ink); letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}
.tier__was {
  font-size: 0.95rem; color: var(--ink-soft); text-decoration: line-through;
  font-variant-numeric: tabular-nums lining-nums;
}
.tier__unit {
  margin-top: var(--s2); font-size: 0.9rem; color: var(--ink-mid);
  font-variant-numeric: tabular-nums lining-nums;
}
.tier__save {
  margin-top: var(--s2); font-size: 0.88rem; color: var(--green-ink); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.01em;
}
/* margin-top: auto, not flex: 1 — the Einzelpackung tier carries no "Sie
   sparen" line, so growing the facts box left its rule sitting a line higher
   than its neighbours'. Anchoring the block to the bottom of the card lines
   the three dividers and the three fact lists up across the row. The rule on
   whichever paragraph ends the price group keeps air above the divider on the
   tall cards, where the auto margin collapses to zero. */
.tier > p:has(+ .tier__facts) { margin-bottom: var(--s4); }
.tier__facts {
  margin-top: auto; padding-top: var(--s4);
  border-top: 1px solid var(--line-soft);
  display: grid; gap: var(--s2); font-size: 0.885rem; color: var(--ink-mid);
  letter-spacing: 0.01em;
}
.tier__facts span { display: flex; align-items: flex-start; gap: var(--s2); }
.tier__facts svg { width: 14px; height: 14px; color: var(--teal); flex: none; margin-top: var(--s1); }
.tier .btn { margin-top: var(--s4); }

.tier__note {
  margin-top: var(--s2); font-size: 0.82rem; color: var(--teal); font-weight: 600;
  text-align: center; letter-spacing: 0.01em;
}

.guarantee {
  margin-top: var(--s5); display: flex; align-items: center; gap: var(--s4);
  background: var(--ground); border-radius: var(--radius-sm);
  padding: var(--s4) var(--s5);
}
.guarantee svg { width: 26px; height: 26px; color: var(--teal); flex: none; }
.guarantee p { font-size: 0.95rem; color: var(--ink-mid); }
.guarantee b { color: var(--ink); font-weight: 600; }

/* --- 19. Footer ---------------------------------------------------------- */

.site-footer {
  background: var(--ink); color: var(--paper-mid);
  padding-block: var(--s8) var(--s6);
}
.site-footer a { color: var(--paper-mid); text-decoration: none; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }
.site-footer a:active { color: var(--teal-lift); text-decoration: underline; opacity: 1; }

.site-footer__grid { display: grid; gap: var(--s6); }
@media (min-width: 800px) {
  .site-footer__grid { grid-template-columns: 1.3fr 0.9fr 0.9fr; }
}

.site-footer__blurb { margin-top: var(--s4); max-width: 34ch; font-size: 0.97rem; }
.site-footer__h {
  font-family: var(--body); font-weight: 600; color: var(--paper);
  font-size: 0.98rem; margin-bottom: var(--s3);
}
.site-footer__list { display: grid; gap: var(--s2); font-size: 0.97rem; }
.site-footer__addr { font-style: normal; font-size: 0.97rem; line-height: 1.6; }

.site-footer__legal {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--navy-line);
  display: grid; gap: var(--s4);
}
.site-footer__compliance {
  font-size: 0.86rem; line-height: 1.55; max-width: 72ch; letter-spacing: 0.01em;
}
.site-footer__meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  font-size: 0.875rem; align-items: center; letter-spacing: 0.01em;
}

/* --- 20. Legal / prose pages --------------------------------------------- */

.page-head {
  background: var(--ink); color: var(--paper-mid);
  padding-block: var(--section-y-tight);
}
.page-head__title {
  color: var(--paper); font-size: clamp(2rem, 4.4vw, 3rem);
  max-width: 20ch; text-wrap: balance;
}
.page-head__sub { margin-top: var(--s4); max-width: 56ch; color: var(--paper-mid); }

.prose { max-width: 68ch; padding-block: var(--section-y); }
.prose h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.65rem); margin-top: var(--s7);
  padding-top: var(--s5); border-top: 1px solid var(--line);
}
.prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.1rem; margin-top: var(--s5); }
.prose p { margin-top: var(--s4); color: var(--ink-mid); }
.prose ul { margin-top: var(--s4); display: grid; gap: var(--s3); }
.prose li { display: flex; gap: var(--s3); color: var(--ink-mid); }
.prose li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); flex: none;
  margin-top: 11px;   /* optical: centres the dot on the first line's x-height */
}
.prose address {
  font-style: normal; margin-top: var(--s4); color: var(--ink-mid); line-height: 1.6;
}
.prose__updated {
  margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line);
  font-size: 0.9rem; color: var(--ink-soft); letter-spacing: 0.01em;
}

/* --- 21. Responsive nav -------------------------------------------------- */

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .header-trust { display: none; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--card); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); display: none;
    padding: var(--s4) var(--gutter) var(--s5);
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item { border-bottom: 1px solid var(--line-soft); }
  .site-nav__item:last-child { border-bottom: 0; padding-top: var(--s4); }
  .site-nav__link { display: block; padding: var(--s3) 0; font-size: 1.05rem; }
  .site-nav__link::after { display: none; }
  .site-nav .btn { width: 100%; }
}

@media (max-width: 900px) {
  .result { position: static; }
}

/* ledger table → stacked rows on small screens */
@media (max-width: 700px) {
  .ledger-table thead { display: none; }
  .ledger-table tr { display: block; padding: var(--s4) 0; border-bottom: 1px solid var(--line-soft); }
  .ledger-table tr:last-child { border-bottom: 0; }
  .ledger-table td { display: block; padding: 0; border: 0; }
  .ledger-table .ing { font-size: 1.05rem; white-space: normal; }
  .ledger-table .amt { margin-top: var(--s1); color: var(--teal); }
  .ledger-table .fn { margin-top: var(--s1); }
}

@media (max-width: 460px) {
  .hero__actions .btn { width: 100%; }
  .btn { padding: var(--s3) var(--s5); }
}

/* --- 22. Motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* header logo image (replaces inline mark + wordmark in the top bar) */
.brand__img { height: 34px; width: auto; display: block; }
@media (max-width: 480px) { .brand__img { height: 28px; } }
.site-footer .brand__img--light { height: 30px; width: auto; }