/* ============================================================
   HAPOK — LOCAL FONTS (no external CDN)
   Lege die .woff2-Dateien in den Ordner /fonts/.
   Benötigte Dateien siehe fonts/README.txt
   ============================================================ */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/HankenGrotesk-Regular.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/HankenGrotesk-Medium.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/HankenGrotesk-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/HankenGrotesk-Bold.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/HankenGrotesk-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/HankenGrotesk-Italic.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/HankenGrotesk-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Newsreader-Regular.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Newsreader-Medium.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/Newsreader-Italic.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/Newsreader-MediumItalic.woff2") format("woff2"); }

/* ============================================================
   DESIGN TOKENS + BASE  (from colors_and_type.css)
   Alle Farben & Variablen als CSS Custom Properties im :root unten.
   ============================================================ */
/* ============================================================
   HAPOK Coaching — Color & Type Foundations
   ------------------------------------------------------------
   Single source of truth for brand color + typography tokens.
   Import this file first, then layer component styles on top.

   Fonts: Hanken Grotesk (sans — display/body/UI) + Newsreader
   (serif accent — emotional editorial pull-quotes / italics).
   Loaded from Google Fonts CDN. See README "Type" + the font
   substitution note: these are HAPOK's chosen brand faces, not
   a match to pre-existing files. Swap fonts/ in if licensed
   brand fonts arrive.
   ============================================================ */


:root {
  /* ---------- Brand palette (raw) ---------- */
  --coral:           #f0523d;   /* primary accent — CTAs, emphasis, brand mark */
  --coral-press:     #d8432f;   /* pressed / active coral */
  --coral-soft:      #fdeae6;   /* coral tint — soft fills, badges, hover wash */

  --ink:             #272727;   /* primary text / near-black */
  --ink-2:           #3e3e3e;   /* secondary text */
  --ink-3:           #6b6b6b;   /* tertiary / muted text */
  --ink-4:           #9a9a9a;   /* hints, placeholders, disabled */

  --paper:           #f6f6f6;   /* app / page background */
  --surface:         #ffffff;   /* cards, sheets, raised surfaces */
  --surface-2:       #fbfbfb;   /* subtly recessed surface */

  --mint:            #E8F8F5;   /* Fresh Mint — calm section background */
  --mint-deep:       #d3f0ea;   /* mint border / hover on mint surfaces */
  --turquoise:       #4ECDC4;   /* secondary accent — use sparingly */
  --turquoise-deep:  #2fb3aa;   /* turquoise text-on-light / pressed */
  --yellow:          #FFD93D;   /* highlight accent — use very sparingly */
  --yellow-soft:     #fff6cf;   /* yellow tint — highlight wash */

  /* ---------- Hairlines & borders ---------- */
  --line:            #e7e7e7;   /* default hairline / divider */
  --line-strong:     #d8d8d8;   /* stronger border (inputs, focus rings base) */

  /* ---------- Semantic colors ---------- */
  --bg:              var(--paper);
  --bg-calm:         var(--mint);
  --fg:              var(--ink);
  --fg-muted:        var(--ink-3);
  --accent:          var(--coral);
  --accent-contrast: #ffffff;
  --positive:        var(--turquoise-deep);
  --positive-soft:   var(--mint);
  --highlight:       var(--yellow);
  --focus-ring:      color-mix(in oklab, var(--coral) 55%, white);

  /* ---------- Type families ---------- */
  --font-sans:  "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* ---------- Type scale (fluid-ready, rem-based) ---------- */
  --text-xs:    0.75rem;   /* 12 — captions, legal */
  --text-sm:    0.875rem;  /* 14 — meta, labels */
  --text-base:  1rem;      /* 16 — body */
  --text-md:    1.125rem;  /* 18 — lead body */
  --text-lg:    1.375rem;  /* 22 — small headings */
  --text-xl:    1.75rem;   /* 28 — h3 */
  --text-2xl:   2.25rem;   /* 36 — h2 */
  --text-3xl:   3rem;      /* 48 — h1 */
  --text-4xl:   4rem;      /* 64 — display */
  --text-5xl:   5.25rem;   /* 84 — hero display */

  /* ---------- Weights ---------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   800;

  /* ---------- Line heights ---------- */
  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ---------- Letter spacing ---------- */
  --ls-tight:  -0.02em;   /* large display */
  --ls-snug:   -0.01em;   /* headings */
  --ls-normal: 0em;
  --ls-wide:   0.08em;    /* eyebrows / overline labels (uppercase) */

  /* ---------- Spacing scale (8px base) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- Radii (soft, friendly) ---------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ---------- Shadows (gentle, warm-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(39,39,39,0.05);
  --shadow-sm: 0 2px 6px rgba(39,39,39,0.06);
  --shadow-md: 0 10px 30px -12px rgba(39,39,39,0.14);
  --shadow-lg: 0 26px 60px -22px rgba(39,39,39,0.20);
  --shadow-coral: 0 12px 28px -10px rgba(240,82,61,0.42);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:  cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ---------- Layout ---------- */
  --container:  1180px;
  --container-narrow: 760px;
}

/* ============================================================
   Base element semantics
   ============================================================ */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  font-weight: var(--w-regular);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display + headings — Hanken Grotesk, tight + confident */
.display,
h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-black);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-tight);
  color: var(--ink);
  text-wrap: balance;
}

.display {
  font-size: clamp(2.75rem, 6vw, var(--text-5xl));
  letter-spacing: var(--ls-tight);
}

h1 { font-size: clamp(2.25rem, 4.5vw, var(--text-3xl)); }
h2 { font-size: clamp(1.875rem, 3vw, var(--text-2xl)); line-height: var(--lh-snug); }
h3 { font-size: var(--text-xl); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }

h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--ink);
}

/* Lead paragraph */
.lead {
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}

p {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Editorial serif accent — emotional pull-quotes, the "es beginnt bei dir" moments */
.editorial {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-style: italic;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--ink);
}
.editorial-lg {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-regular);
  font-size: clamp(1.875rem, 3.5vw, var(--text-3xl));
  line-height: var(--lh-snug);
  color: var(--ink);
}

/* Eyebrow / overline label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--coral);
}

/* Meta / small label */
.meta {
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--ink-3);
  letter-spacing: var(--ls-normal);
}

.caption {
  font-size: var(--text-xs);
  color: var(--ink-4);
}

a { color: var(--coral); text-underline-offset: 3px; }

::selection { background: var(--coral-soft); color: var(--ink); }


/* ============================================================
   COMPONENTS + LAYOUT  (from site.css)
   ============================================================ */
/* HAPOK marketing website — UI kit styles. Builds on ../../colors_and_type.css */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
.hapok-site {
  height: 100vh;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  scroll-behavior: smooth;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container--narrow { max-width: var(--container-narrow); }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-pill); padding: 14px 26px; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base), box-shadow var(--dur-base);
  text-decoration: none; white-space: nowrap;
}
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--lg { padding: 17px 32px; font-size: 17px; }
.btn--block { width: 100%; justify-content: center; margin-top: 8px; }
.btn--primary { background: var(--coral); color: #fff; box-shadow: var(--shadow-coral); }
.btn--primary:hover { background: var(--coral-press); transform: translateY(-1px); }
.btn--primary:active { transform: scale(0.98); }
.btn--primary:disabled { background: var(--ink-4); box-shadow: none; cursor: not-allowed; transform: none; }
.btn--outline { background: #fff; color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn--outline:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn__arrow { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.btn__arrow::after { content: "→"; line-height: 1; display: block; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; transition: all var(--dur-base) var(--ease-out); }
.site-header__inner {
  max-width: var(--container); margin: 0 auto; padding: 18px 32px;
  display: flex; align-items: center; gap: 14px;
}
.site-header.is-scrolled { background: rgba(246,246,246,0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header.is-scrolled .site-header__inner { padding: 12px 32px; }
.wordmark {
  font-weight: 800; font-size: 24px; letter-spacing: -0.02em; color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: flex-end; gap: 5px; line-height: 1;
}
.wordmark__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); margin-bottom: 3px; }
.wordmark--lg { font-size: 30px; }
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.site-nav__link {
  font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  padding: 8px 11px; border-radius: var(--r-pill); transition: color var(--dur-fast), background var(--dur-fast);
}
.site-nav__link:hover { color: var(--coral); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.site-nav__link--quiet { color: var(--ink-3); }

/* ---------- Hero ---------- */
.hero { padding: 40px 0 72px; }
.hero__grid { max-width: var(--container); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero__title { font-size: clamp(2.4rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; margin: 18px 0 6px; }
.editorial-line { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--coral); margin: 0 0 22px; line-height: 1.1; }
.hero__lead { max-width: 460px; }
.hero__cta { display: flex; gap: 14px; margin: 30px 0 26px; flex-wrap: wrap; }
.hero__trust { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.trust-note { font-size: 12.5px; color: var(--ink-3); font-weight: 600; max-width: 320px; line-height: 1.4; }

.hero__media { position: relative; }
.img-ph {
  background: var(--mint); border: 1px solid var(--mint-deep); border-radius: var(--r-2xl);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--turquoise-deep); text-align: center; font-size: 13px; font-weight: 600; line-height: 1.5;
}
.img-ph i { width: 34px; height: 34px; opacity: 0.7; }
.img-ph--tall { aspect-ratio: 4/4.4; }
.card-float { position: absolute; }
.hero__chip {
  left: -22px; bottom: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; max-width: 280px;
}
.hero__chip-name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.hero__chip-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* avatars */
.av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; }
.av--mint { background: var(--mint); color: var(--turquoise-deep); }
.av--coral { background: var(--coral-soft); color: var(--coral); }

/* eyebrow + badges */
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral); }
.eyebrow--turq { color: var(--turquoise-deep); }
.eyebrow--on-dark { color: var(--yellow); }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 6px 13px; border-radius: var(--r-pill); }
.badge i { width: 15px; height: 15px; }
.badge--mint { background: var(--mint); color: var(--turquoise-deep); }

/* ---------- Sections ---------- */
.section { padding: 92px 0; }
.section--mint { background: var(--mint); }
.section--paper { background: var(--surface-2); }
.section--ink { background: var(--ink); }
.section__title { font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; margin: 14px 0 16px; }
.section__head { max-width: 640px; margin-bottom: 48px; }
.section__head-lead { margin-top: 4px; }

/* shift cards */
.shift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.shift-card { background: #fff; border: 1px solid var(--mint-deep); border-radius: var(--r-xl); padding: 26px; text-align: center; }
.shift-card__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--mint); color: var(--turquoise-deep); display: grid; place-items: center; margin: 0 auto 18px; }
.shift-card__icon i { width: 24px; height: 24px; }
.shift-card__from { color: var(--ink-4); font-size: 15px; font-weight: 600; }
.strike { text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.shift-card__arrow { color: var(--coral); margin: 10px 0; }
.shift-card__arrow i { width: 18px; height: 18px; }
.shift-card__to { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; }

/* method cards */
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.method-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 30px; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.method-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.method-card__icon { width: 56px; height: 56px; border-radius: var(--r-lg); background: var(--coral-soft); color: var(--coral); display: grid; place-items: center; margin-bottom: 18px; }
.method-card__icon i { width: 26px; height: 26px; }
.method-card__tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.method-card__title { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; margin: 6px 0 10px; }
.method-card__body { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 48px; }
.step { display: flex; gap: 20px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--line); }
.step__num { font-family: var(--font-serif); font-style: italic; font-size: 38px; font-weight: 500; color: var(--coral); line-height: 1; flex: none; width: 56px; }
.step__title { font-size: 18px; font-weight: 800; margin: 4px 0 6px; letter-spacing: -0.01em; }
.step__text { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* testimonial */
.big-quote { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.28; color: #fff; margin: 22px 0 30px; }
.big-quote__hl { color: var(--yellow); }
.quote-author { display: inline-flex; align-items: center; gap: 14px; }
.quote-author__name { font-weight: 800; color: #fff; font-size: 15px; }
.quote-author__meta { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 2px; }

/* cta band */
.cta-band { background: var(--coral); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.cta-band__title { color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.015em; margin: 0; }
.cta-band__sub { color: rgba(255,255,255,0.92); font-size: 20px; margin: 8px 0 0; }
.cta-band .btn--primary { background: #fff; color: var(--coral); box-shadow: 0 14px 30px -12px rgba(0,0,0,0.3); }
.cta-band .btn--primary:hover { background: #fff; }

/* footer */
.site-footer { background: var(--ink); color: #fff; padding: 64px 0 32px; }
.site-footer__inner { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.site-footer__brand .wordmark { color: #fff; }
.site-footer__tag { color: rgba(255,255,255,0.6); margin-top: 8px; font-size: 16px; }
.site-footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.site-footer__h { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 14px; }
.site-footer__link { display: block; color: rgba(255,255,255,0.82); text-decoration: none; font-size: 15px; padding: 5px 0; transition: color var(--dur-fast); }
.site-footer__link:hover { color: var(--yellow); }
.site-footer__base { display: flex; justify-content: space-between; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 13px; color: rgba(255,255,255,0.55); }
.site-footer__base .meta { color: rgba(255,255,255,0.55); }

/* ---------- Modal ---------- */
/* Fix: hidden-Attribut respektieren (Modal beim Laden geschlossen) */
.modal-scrim[hidden] { display: none !important; }
.modal-scrim { position: fixed; inset: 0; background: rgba(39,39,39,0.42); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 100; padding: 24px; animation: fade var(--dur-base) var(--ease-out); }
.modal { background: #fff; border-radius: var(--r-2xl); width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); position: relative; animation: rise var(--dur-slow) var(--ease-soft); }
.modal__close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--paper); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.modal__close i { width: 18px; height: 18px; }
.modal__body { padding: 34px; }
.modal__body--center { text-align: center; }
.modal--wide { max-width: 524px; max-height: 92vh; overflow-y: auto; }
.modal__cal { width: 100%; height: 640px; border-radius: var(--r-lg); overflow: hidden; }
.modal__cal-loading { display: grid; place-items: center; height: 640px; color: var(--ink-3); font-size: 14px; font-weight: 600; }
@media (max-width: 600px) { .modal__cal, .modal__cal-loading { height: 560px; } }
.modal__title { font-size: 24px; font-weight: 800; letter-spacing: -0.015em; margin: 10px 0 20px; line-height: 1.15; }
.field-label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin: 16px 0 8px; }
.input { width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--ink); background: var(--surface-2); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); padding: 13px 15px; outline: none; transition: border var(--dur-fast), box-shadow var(--dur-fast); }
.input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--focus-ring); background: #fff; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink-2); cursor: pointer; transition: all var(--dur-fast); }
.chip--on { background: var(--coral-soft); border-color: var(--coral); color: var(--coral); }
.slot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 6px 0 8px; }
.slot { padding: 14px; border-radius: var(--r-md); border: 1.5px solid var(--line-strong); background: #fff; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; transition: all var(--dur-fast); }
.slot--on { background: var(--coral); border-color: var(--coral); color: #fff; }
.fineprint { font-size: 12.5px; color: var(--ink-3); text-align: center; margin: 14px 0 0; }
.success-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--mint); color: var(--turquoise-deep); display: grid; place-items: center; margin: 0 auto 18px; }
.success-mark i { width: 30px; height: 30px; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   HAPOK website v7 — extended components (6-page site)
   ============================================================ */

/* ---------- Header: active link + secondary CTA ---------- */
.site-nav__link.is-active { color: var(--ink); background: var(--coral-soft); }
.site-nav__link.is-active:hover { color: var(--coral); }
.btn--ghost-coral { background: transparent; color: var(--coral); border: 1.5px solid var(--coral-soft); }
.btn--ghost-coral:hover { background: var(--coral-soft); transform: translateY(-1px); }
.menu-toggle { display: none; margin-left: auto; background: none; border: none; color: var(--ink); cursor: pointer; padding: 8px; }
.menu-toggle i { width: 26px; height: 26px; }
.mobile-nav { display: none; }

/* ---------- Hero variants ---------- */
.hero__sub-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sub-cta-line { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.sub-cta-line i { width: 15px; height: 15px; color: var(--turquoise-deep); flex: none; }
.hero__statement { font-weight: 800; color: var(--ink); font-size: 1.0625rem; line-height: 1.5; margin: 22px 0 0; max-width: 460px; }
.hero__statement em { font-style: normal; color: var(--coral); }

/* photo placeholder — round + sizes */
.img-ph--round { border-radius: 50%; aspect-ratio: 1; width: 100%; }
.img-ph--bust { aspect-ratio: 4/4.6; }
.img-ph--wide { aspect-ratio: 16/10; }
.img-ph--video { aspect-ratio: 16/9; background: var(--ink); border-color: var(--ink); color: rgba(255,255,255,0.85); cursor: pointer; position: relative; overflow: hidden; transition: transform var(--dur-base) var(--ease-out); }
.img-ph--video:hover { transform: translateY(-2px); }
.img-ph--video .play-btn { width: 76px; height: 76px; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-coral); transition: transform var(--dur-base) var(--ease-out); }
.img-ph--video:hover .play-btn { transform: scale(1.06); }
.img-ph--video .play-btn i { width: 30px; height: 30px; margin-left: 4px; }
.img-ph--video .video-cap { position: absolute; bottom: 18px; left: 20px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); }

/* ---------- Pain cards (Erkennst du das?) ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pain-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 30px; box-shadow: var(--shadow-sm); }
.pain-card__icon { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--coral-soft); color: var(--coral); display: grid; place-items: center; margin-bottom: 18px; }
.pain-card__icon i { width: 24px; height: 24px; }
.pain-card__label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral); margin-bottom: 10px; }
.pain-card__body { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* ---------- Reframe statement (full-bleed quiet moment) ---------- */
.reframe { padding: 120px 0; background: var(--mint); text-align: center; }
.reframe__text { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.18; color: var(--ink); max-width: 900px; margin: 0 auto; letter-spacing: -0.01em; }

/* ---------- Teufelskreis graphic (3×3 grid — overflow-safe) ---------- */
.lever-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lever-copy h2 { margin-top: 14px; }
.lever-copy__emph { font-weight: 800; color: var(--ink); font-size: 1.25rem; line-height: 1.4; margin: 24px 0; letter-spacing: -0.01em; }
.lever-copy__emph em { font-style: normal; color: var(--coral); }
.lever-copy__close { font-family: var(--font-serif); font-style: italic; font-size: 1.375rem; line-height: 1.4; color: var(--ink); margin: 24px 0 0; }
.cycle { display: grid; grid-template-columns: 1fr 1.15fr 1fr; grid-template-rows: auto auto auto; gap: 12px 8px; align-items: center; justify-items: center; max-width: 480px; margin: 0 auto; }
.cycle__node { width: 100%; max-width: 168px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 14px 14px; box-shadow: var(--shadow-md); text-align: center; }
.cycle__node-step { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--coral); margin-bottom: 4px; }
.cycle__node-text { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; }
.cycle__cell--top { grid-column: 2; grid-row: 1; }
.cycle__cell--left { grid-column: 1; grid-row: 2; }
.cycle__cell--center { grid-column: 2; grid-row: 2; }
.cycle__cell--right { grid-column: 3; grid-row: 2; }
.cycle__cell--bottom { grid-column: 2; grid-row: 3; }
.cycle__ring { position: relative; width: 132px; height: 132px; }
.cycle__ring svg { width: 100%; height: 100%; overflow: visible; }
.cycle__center { position: absolute; inset: 0; margin: auto; width: 92px; height: 92px; border-radius: 50%; background: var(--coral-soft); color: var(--coral); display: grid; place-items: center; text-align: center; }
.cycle__center span { font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.25; }
.cycle--lg { max-width: 540px; }
.cycle--lg .cycle__node { max-width: 190px; }
.cycle--lg .cycle__ring { width: 150px; height: 150px; }

/* ---------- Compact trust ---------- */
.trust-compact { display: grid; grid-template-columns: 0.55fr 1fr; gap: 56px; align-items: center; }
.trust-compact__media .img-ph { max-width: 320px; }
.trust-compact__name { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.015em; margin: 0; }
.trust-compact__role { font-size: 15px; font-weight: 600; color: var(--coral); margin: 6px 0 18px; }
.trust-compact__stats { font-family: var(--font-serif); font-style: italic; font-size: 1.0625rem; color: var(--ink-2); margin: 0 0 18px; }
.trust-compact__line { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 520px; margin: 0 0 22px; }
.link-arrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--coral); text-decoration: none; font-size: 16px; }
.link-arrow i { width: 17px; height: 17px; transition: transform var(--dur-fast); }
.link-arrow:hover i { transform: translateX(3px); }

/* ---------- Testimonial carousel ---------- */
.tcar { max-width: 820px; margin: 0 auto; }
.tcar__track { position: relative; }
.tcar__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl); box-shadow: var(--shadow-md); padding: 44px 48px; }
.tcar__quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 2.1vw, 1.5rem); line-height: 1.5; color: var(--ink); margin: 0 0 26px; }
.tcar__author { display: flex; align-items: center; gap: 14px; }
.tcar__name { font-weight: 800; color: var(--ink); font-size: 15px; }
.tcar__meta { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.tcar__nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; }
.tcar__dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--line-strong); cursor: pointer; padding: 0; transition: all var(--dur-base); }
.tcar__dot.is-on { background: var(--coral); width: 26px; border-radius: var(--r-pill); }
.tcar__arrow { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: all var(--dur-fast); }
.tcar__arrow:hover { border-color: var(--ink); transform: translateY(-1px); }
.tcar__arrow i { width: 18px; height: 18px; }

/* ---------- Inline email capture ---------- */
.ecap { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; }
.ecap .input { flex: 1; min-width: 220px; margin: 0; }
.ecap .btn { flex: none; }
.ecap__note { font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin: 12px 0 0; }
.ecap--on-coral .input { background: rgba(255,255,255,0.96); border-color: transparent; }
.ecap--on-coral .btn--primary { background: var(--ink); color: #fff; box-shadow: none; }
.ecap--on-coral .btn--primary:hover { background: #000; }
.ecap__success { display: flex; align-items: center; gap: 14px; background: var(--mint); border: 1px solid var(--mint-deep); border-radius: var(--r-lg); padding: 18px 20px; max-width: 520px; }
.ecap__success-mark { width: 40px; height: 40px; border-radius: 50%; background: var(--turquoise); color: #fff; display: grid; place-items: center; flex: none; }
.ecap__success-mark i { width: 22px; height: 22px; }
.ecap__success-text { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.ecap__success-text strong { font-weight: 800; }

/* ---------- Dual-CTA paths ---------- */
.paths { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; align-items: stretch; }
.path-card { border-radius: var(--r-2xl); padding: 38px; display: flex; flex-direction: column; }
.path-card--primary { background: #fff; border: 2px solid var(--coral); box-shadow: var(--shadow-md); }
.path-card--secondary { background: var(--surface-2); border: 1px solid var(--line); }
.path-card__num { font-family: var(--font-serif); font-style: italic; font-size: 15px; font-weight: 500; color: var(--coral); letter-spacing: 0.04em; text-transform: uppercase; }
.path-card__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.015em; margin: 6px 0 8px; }
.path-card__body { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 22px; flex: 1; }
.path-card__badge { align-self: flex-start; margin-bottom: 18px; }

/* ---------- Accordion (Einwände + FAQ) ---------- */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-q { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; text-align: left; font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.4; }
.acc-q:hover { color: var(--coral); }
.acc-q__icon { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--coral-soft); color: var(--coral); display: grid; place-items: center; transition: transform var(--dur-base) var(--ease-out); }
.acc-q__icon i { width: 17px; height: 17px; }
.acc-item.is-open .acc-q__icon { transform: rotate(45deg); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-soft); }
.acc-a__inner { padding: 0 50px 26px 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.acc-a__inner strong { color: var(--ink); }
.acc-a em { font-style: italic; }

/* ---------- Big stat numbers ---------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat { text-align: left; padding: 28px 0; border-top: 2px solid var(--ink); }
.stat__num { font-size: clamp(2.4rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.stat__num em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--coral); }
.stat__label { font-size: 14.5px; font-weight: 600; color: var(--ink-3); margin-top: 12px; line-height: 1.4; }

/* ---------- Scene / dialog text ---------- */
.scene { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.55; color: var(--ink-2); }
.scene--boxed { background: var(--surface-2); border-left: 3px solid var(--coral); border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: 26px 30px; }
.pull-quote { border-left: 3px solid var(--coral); padding-left: 28px; margin: 0; }
.pull-quote__main { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; margin: 0; }
.pull-quote__sub { font-size: 16px; color: var(--ink-3); margin: 14px 0 0; font-weight: 600; }

/* prose block for long-form */
.prose { max-width: var(--container-narrow); }
.prose p { font-size: 1.0625rem; line-height: 1.75; color: var(--ink-2); margin: 0 0 20px; }
.prose p strong { color: var(--ink); font-weight: 800; }
.prose .scene { margin: 0 0 24px; }

/* ---------- Vertical timeline (SCU) ---------- */
.vtimeline { display: flex; flex-direction: column; gap: 0; }
.vstep { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding-bottom: 40px; position: relative; }
.vstep:not(:last-child)::before { content: ""; position: absolute; left: 31px; top: 56px; bottom: 0; width: 2px; background: var(--line); }
.vstep__num { width: 56px; height: 56px; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 800; flex: none; z-index: 1; box-shadow: var(--shadow-coral); }
.vstep__title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; margin: 8px 0 6px; }
.vstep__text { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 14px; }
.vstep__scene { font-family: var(--font-serif); font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--ink-3); background: var(--surface-2); border-radius: var(--r-md); padding: 14px 18px; margin: 0; }

/* ---------- Condition box ---------- */
.cond-box { background: var(--ink); color: #fff; border-radius: var(--r-2xl); padding: 48px; max-width: 860px; }
.cond-box .eyebrow { color: var(--yellow); }
.cond-box__title { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; margin: 12px 0 16px; }
.cond-box__body { color: rgba(255,255,255,0.82); font-size: 1.0625rem; line-height: 1.65; margin: 0; }

/* ---------- Price card ---------- */
.price-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.price-anchor { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.price-anchor strong { color: var(--ink); font-weight: 800; }
.price-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); padding: 38px; }
.price-card__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 24px; }
.price-card__amount { font-size: 3.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.price-card__once { font-size: 15px; font-weight: 700; color: var(--ink-3); }
.price-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 14px; }
.price-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.price-list i { width: 20px; height: 20px; color: var(--turquoise-deep); flex: none; margin-top: 2px; }
.price-bonus { background: var(--yellow-soft); border: 1px solid var(--yellow); border-radius: var(--r-md); padding: 16px 18px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.price-bonus strong { font-weight: 800; }

/* ---------- Mini steps inline (SCU booking) ---------- */
.mini-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; }
.mini-step { display: flex; gap: 14px; align-items: flex-start; }
.mini-step__n { width: 34px; height: 34px; border-radius: 50%; background: var(--coral-soft); color: var(--coral); display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; }
.mini-step__t { font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ---------- Ratgeber / blog ---------- */
.article-list { display: flex; flex-direction: column; gap: 0; }
.article-row { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 30px 0; border-top: 1px solid var(--line); text-decoration: none; transition: background var(--dur-fast); }
.article-row:last-child { border-bottom: 1px solid var(--line); }
.article-row__kw { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral); margin-bottom: 8px; }
.article-row__title { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); line-height: 1.25; margin: 0; }
.article-row:hover .article-row__title { color: var(--coral); }
.article-row__meta { font-size: 14px; color: var(--ink-3); margin-top: 8px; }
.article-row__cta { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--coral-soft); color: var(--coral); flex: none; transition: transform var(--dur-fast); }
.article-row:hover .article-row__cta { transform: translateX(4px); }
.article-row__cta i { width: 20px; height: 20px; }
.article-row--soon { opacity: 0.55; pointer-events: none; }
.article-row__badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 10px; margin-left: 10px; vertical-align: middle; }

.feature-article { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--mint); border-radius: var(--r-2xl); padding: 14px; margin-bottom: 56px; }
.feature-article__media { border-radius: var(--r-xl); overflow: hidden; }
.feature-article__body { padding: 28px 36px 28px 16px; }
.feature-article__title { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 12px 0 14px; }

/* ---------- Section helpers ---------- */
.section--tight { padding: 64px 0; }
.section__lead-narrow { max-width: 560px; }
.divider-soft { border: none; border-top: 1px solid var(--line); margin: 0; }
.bullet-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 14px; }
.bullet-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.bullet-list i { width: 21px; height: 21px; color: var(--coral); flex: none; margin-top: 3px; }

/* ---------- Real photos (fill placeholders) ---------- */
.photo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r-2xl); border: 1px solid var(--line); }
.photo--bust { aspect-ratio: 4/4.6; }
.photo--round { aspect-ratio: 1; border-radius: 50%; }
.photo--wide { aspect-ratio: 16/10; border-radius: var(--r-xl); }

/* ---------- Snapshot (authentic candid, polaroid-ish) ---------- */
.snapshot { margin: 40px auto; max-width: 340px; transform: rotate(-1.8deg); }
.snapshot__frame { background: #fff; padding: 12px 12px 0; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-md); }
.snapshot__img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; border-radius: 2px; }
.snapshot__cap { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--ink-3); line-height: 1.45; text-align: center; padding: 14px 8px 18px; }

/* ---------- Platzhalter-Testimonial (gelb markiert, noch zu ersetzen) ---------- */
.fake-flag__badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
  color: #6b4e00; background: var(--yellow);
  padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 16px;
  border: 1px solid #e3c200;
}
.fake-flag__badge i { width: 14px; height: 14px; }
.fake-flag .pull-quote__main,
.fake-flag .tcar__quote,
.fake-flag .case-card__title {
  background: linear-gradient(transparent 10%, rgba(255,217,61,0.6) 10% 90%, transparent 90%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- Fallbeispiel (anonymisiert) ---------- */
.case-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: 28px 30px; box-shadow: var(--shadow-md); }
.case-card--plain { box-shadow: none; background: var(--paper); }
.case-card__label { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral); margin: 0 0 14px; }
.case-card__title { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.3; color: var(--ink); margin: 0 0 14px; }
.case-card__body { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); margin: 0; }

/* ---------- Evidenz / Forschung ---------- */
.evidence { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: 30px 32px; box-shadow: var(--shadow-md); }
.evidence__label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--turquoise-deep); margin: 0 0 14px; }
.evidence__label i { width: 16px; height: 16px; }
.evidence__head { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px; line-height: 1.16; }
.evidence__body { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); margin: 0 0 16px; }
.evidence__list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 13px; }
.evidence__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.evidence__list li i { width: 20px; height: 20px; color: var(--turquoise-deep); flex-shrink: 0; margin-top: 2px; }
.evidence__cite { font-size: 13px; color: var(--ink-3); font-weight: 600; line-height: 1.5; }

/* anchor offset for sticky header */
:target { scroll-margin-top: 90px; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .lever-grid, .price-wrap, .feature-article { grid-template-columns: 1fr; gap: 40px; }
  .trust-compact { grid-template-columns: 1fr; gap: 32px; }
  .trust-compact__media .img-ph { max-width: 240px; }
}
@media (max-width: 880px) {
  .hero__grid, .shift-grid, .method-grid, .steps, .pain-grid, .paths, .stat-row, .mini-steps { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .stat-row { gap: 0; }
  .reframe { padding: 80px 0; }
  .section { padding: 64px 0; }
  .price-card__amount { font-size: 2.75rem; }
  .feature-article__body { padding: 8px 20px 24px; }
  .cond-box, .price-card { padding: 32px; }
}
@media (max-width: 1040px) {
  .site-nav, .site-header__actions .btn, .site-header__actions .site-nav__link { display: none; }
  .menu-toggle { display: inline-flex; }
  .mobile-nav.is-open { display: block; background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px 32px 20px; }
  .mobile-nav.is-open a { display: block; padding: 12px 0; font-size: 17px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .ecap { flex-direction: column; }
  .ecap .btn { width: 100%; justify-content: center; }
  .tcar__card { padding: 30px 26px; }
  .cycle__node { width: 130px; }
}


/* ============================================================
   LEGAL PAGES  (from legal.css)
   ============================================================ */
/* ---------- Legal / long-form pages (Impressum, Datenschutz) ---------- */

.legal-head { padding: 64px 0 24px; }
.legal-head .eyebrow { margin-bottom: 14px; display: block; }
.legal-head h1 { margin: 0 0 14px; max-width: 760px; }
.legal-updated {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 6px 14px; border-radius: var(--r-pill);
}
.legal-updated i { width: 15px; height: 15px; }

/* body wrapper */
.legal-body { padding: 8px 0 88px; }
.legal-doc { max-width: var(--container-narrow); }

/* intro callout — the friendly note */
.legal-intro {
  background: var(--mint); border: 1px solid var(--mint-deep);
  border-radius: var(--r-xl); padding: 28px 32px; margin: 0 0 40px;
}
.legal-intro p { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.legal-intro p + p { margin-top: 14px; }

/* headings within the doc */
.legal-doc h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 800;
  letter-spacing: -0.015em; line-height: 1.25; color: var(--ink);
  margin: 56px 0 18px; padding-top: 28px; border-top: 1px solid var(--line);
}
.legal-doc h2:first-of-type { border-top: none; padding-top: 0; margin-top: 8px; }
.legal-doc h3 {
  font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.01em;
  color: var(--ink); margin: 36px 0 12px;
}
.legal-doc h4 {
  font-size: 1.0625rem; font-weight: 700; color: var(--ink);
  margin: 26px 0 10px;
}

/* paragraphs + lists */
.legal-doc p { font-size: 1.0625rem; line-height: 1.75; color: var(--ink-2); margin: 0 0 18px; }
.legal-doc strong { color: var(--ink); font-weight: 700; }
.legal-doc a { color: var(--coral); text-decoration: none; word-break: break-word; }
.legal-doc a:hover { text-decoration: underline; }
.legal-doc ul { margin: 0 0 20px; padding: 0; list-style: none; }
.legal-doc ul li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2);
}
.legal-doc ul li::before {
  content: ""; position: absolute; left: 6px; top: 13px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--coral);
}

/* responsible-party / contact card */
.legal-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 24px 28px; margin: 0 0 22px;
  box-shadow: var(--shadow-sm);
}
.legal-card p { margin: 0; line-height: 1.7; color: var(--ink-2); }
.legal-card strong { color: var(--ink); }

/* impressum definition rows */
.imp-list { display: grid; gap: 4px; max-width: 640px; }
.imp-row {
  display: grid; grid-template-columns: 240px 1fr; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.imp-row:last-child { border-bottom: none; }
.imp-row__label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 2px;
}
.imp-row__value { font-size: 1.0625rem; line-height: 1.65; color: var(--ink); }
.imp-row__value a { color: var(--coral); text-decoration: none; }
.imp-row__value a:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .imp-row { grid-template-columns: 1fr; gap: 4px; }
}

/* table of contents */
.legal-toc {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 26px 30px; margin: 0 0 44px;
}
.legal-toc__h {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px;
}
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal-toc ol li { counter-increment: toc; margin-bottom: 10px; padding-left: 34px; position: relative; }
.legal-toc ol li::before {
  content: counter(toc); position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--coral-soft); color: var(--coral);
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.legal-toc a { color: var(--ink); text-decoration: none; font-size: 1rem; line-height: 1.5; }
.legal-toc a:hover { color: var(--coral); }

.legal-end-note {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-3);
}


/* ============================================================
   ARTICLE — Ratgeber long-form (ratgeber-hausaufgaben.html)
   ============================================================ */
.article-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; font-size: 14px; color: var(--ink-3); font-weight: 600; }
.article-byline .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }
.article-byline strong { color: var(--ink); font-weight: 800; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; color: var(--ink); margin: 8px 0 18px; }
.article-statement { font-weight: 800; font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.4; letter-spacing: -0.015em; color: var(--ink); margin: 30px 0; max-width: 620px; }
.article-statement em { font-style: normal; color: var(--coral); }
.ask-swap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0; }
.ask-swap__cell { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px 26px; background: #fff; }
.ask-swap__cell--from { background: var(--surface-2); }
.ask-swap__label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; margin: 0 0 12px; }
.ask-swap__label i { width: 15px; height: 15px; }
.ask-swap__cell--from .ask-swap__label { color: var(--ink-4); }
.ask-swap__cell--to .ask-swap__label { color: var(--coral); }
.ask-swap__q { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; line-height: 1.35; color: var(--ink); margin: 0; }
.ask-swap__cell--from .ask-swap__q { color: var(--ink-3); }
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 40px 0 8px; }
.type-card__tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.type-card__name { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.015em; margin: 6px 0 12px; color: var(--ink); }
.type-card__body { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.type-card__body strong { color: var(--ink); font-weight: 800; }
.note-box { background: var(--surface-2); border-left: 3px solid var(--line-strong); border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: 22px 26px; margin: 24px 0 0; }
.note-box p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--ink-2); }
.read-next { display: flex; align-items: center; gap: 22px; background: var(--mint); border-radius: var(--r-2xl); padding: 28px 32px; text-decoration: none; transition: transform var(--dur-base) var(--ease-out); }
.read-next:hover { transform: translateY(-2px); }
.read-next__icon { width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--turquoise-deep); display: grid; place-items: center; flex: none; }
.read-next__icon i { width: 24px; height: 24px; }
.read-next__kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--turquoise-deep); margin: 0 0 4px; }
.read-next__title { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin: 0; line-height: 1.25; }
.read-next__arrow { margin-left: auto; color: var(--coral); flex: none; }
.read-next__arrow i { width: 22px; height: 22px; }
@media (max-width: 620px) {
  .ask-swap, .type-grid { grid-template-columns: 1fr; }
  .read-next { gap: 16px; padding: 22px 24px; }
}

/* ============================================================
   LANDING PAGE — Perspektivwechsel (perspektivwechsel.html)
   ============================================================ */
.lp-header { padding: 22px 0; }
.lp-header__inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; }
.lp-hero { padding: 24px 0 80px; }
.lp-hero__grid { max-width: var(--container); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.lp-hero__title { font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; margin: 14px 0 18px; }
.lp-hero__title em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--coral); }
.lp-form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); padding: 32px; }
.lp-form-card .ecap { max-width: 100%; flex-direction: column; }
.lp-form-card .ecap .input, .lp-form-card .ecap .btn { width: 100%; justify-content: center; }
.lp-day-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.lp-day { display: grid; grid-template-columns: 86px 1fr; gap: 20px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); }
.lp-day:last-child { border-bottom: 1px solid var(--line); }
.lp-day__tag { font-family: var(--font-serif); font-style: italic; font-size: 1.375rem; font-weight: 500; color: var(--coral); }
.lp-day__text { font-size: 1.125rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.35; }
@media (max-width: 880px) {
  .lp-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .lp-hero__media { order: -1; }
  .lp-day { grid-template-columns: 70px 1fr; gap: 14px; }
}