/* =====================================================================
   24h-Pflege Quizfunnel — app.css
   Single stylesheet for the redesign. Tokens (from tokens.json) live in
   :root as custom properties; --pc is the themeable primary color.
   Inlined into index.php via readfile() for zero render-blocking;
   linked directly on the legal / thank-you pages.
   ===================================================================== */

:root {
  /* --- primary (themeable) --- */
  --pc: #16161a;              /* default near-black; alt: #004b76 blue, #1a5c38 green */

  /* --- surfaces --- */
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-sunken: #f6f6f5;
  --surface-chip: #f0f0ee;
  --surface-chip-2: #f3f3f1;
  --surface-track: #ececea;

  /* --- text --- */
  --text-primary: #1b1b1a;
  --text-body: #333330;
  --text-body-2: #2b2b28;
  --text-body-3: #4a4a47;
  --text-secondary: #5b5b58;
  --text-tertiary: #6f6f6c;
  --text-muted: #8a8a86;
  --text-faint: #9a9a96;
  --text-faint-2: #a0a09c;
  --text-on-primary: #ffffff;

  /* --- borders --- */
  --border: #e2e2e0;
  --border-2: #e6e6e4;
  --border-section: #ededeb;
  --border-divider: #f0f0ee;
  --border-option: #dcdcda;
  --border-input: #d9d9d6;

  /* --- status --- */
  --error: #c0392b;
  --success-bg: #eef6f0;
  --success-fg: #1a7a3f;

  /* --- whatsapp --- */
  --whatsapp: #25D366;
  --whatsapp-fg-dark: #1b7a3f;
  --whatsapp-fg-subtle: #4f7d5f;
  --whatsapp-border: #cdefda;
  --whatsapp-bg: #f2fbf5;

  /* --- trust / stars --- */
  --trustpilot-green: #00B67A;
  --verified-green: #00874f;
  --star-empty: #d6d6de;

  /* --- flag --- */
  --flag-black: #000000;
  --flag-red: #DD0000;
  --flag-gold: #FFCE00;
  --highlight-underline: rgba(255,206,0,0.55);

  /* --- footer --- */
  --footer-bg: #1b1b1a;
  --footer-text: #b6b6b0;
  --footer-strong: #ffffff;
  --footer-muted: #8a8a84;
  --footer-link: #d8d8d2;

  /* --- images --- */
  --overlay-image-band: linear-gradient(90deg, rgba(15,15,15,0.74) 0%, rgba(15,15,15,0.44) 44%, rgba(15,15,15,0.06) 78%);
  --overlay-final-cta: linear-gradient(180deg, rgba(18,18,18,0.85), rgba(18,18,18,0.9));
  --img-dark: #141414;
  --img-dark-2: #1b1b1a;

  /* --- radii --- */
  --r-chip: 99px;
  --r-input: 13px;
  --r-option: 15px;
  --r-card: clamp(14px, 4.5vw, 20px);
  --r-card-static: 14px;
  --r-card-inner: 12px;
  --r-whatsapp: 11px;
  --r-cta-primary: 14px;
  --r-cta-quiz: 13px;
  --r-cta-final: 11px;
  --r-cta-secondary: 10px;
  --r-icon-tile: 10px;

  /* --- shadows --- */
  --sh-card: 0 18px 44px -24px rgba(0,0,0,0.4), 0 2px 8px -4px rgba(0,0,0,0.08);
  --sh-card-direct: 0 22px 50px -28px rgba(0,0,0,0.4);
  --sh-option: 0 1px 2px rgba(0,0,0,0.05);
  --sh-flag-inset: inset 0 0 0 1px rgba(0,0,0,0.1);
  --sh-flag-inset-light: inset 0 0 0 1px rgba(0,0,0,0.12);
  --sh-flag-inset-dark: inset 0 0 0 1px rgba(255,255,255,0.22);
  --sh-flag-ring: 0 0 0 1px rgba(255,255,255,0.25);
  --sh-txt-title: 0 2px 22px rgba(0,0,0,0.45);
  --sh-txt-body: 0 1px 14px rgba(0,0,0,0.45);

  /* --- layout --- */
  --maxw: 1180px;
  --section-x: clamp(16px, 4.5vw, 28px);
  --section-y: clamp(28px, 7vw, 44px);

  /* --- transitions --- */
  --t-progress: 0.35s cubic-bezier(0.4,0,0.2,1);
  --t-press: transform 0.1s, opacity 0.15s;
  --t-option: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
  --t-input: border-color 0.15s;
  --t-chevron: 0.2s;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Fira Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; border: 0; }
h1,h2,h3,h4 { margin: 0; color: var(--text-primary); font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--pc); outline-offset: 2px; }

.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--section-x); padding-right: var(--section-x); }

/* offset in-page anchor jumps so targets clear the sticky header */
#funnel, #direkt { scroll-margin-top: 74px; }

/* ------------------------------------------------------------ flag motif */
.flag  { background: linear-gradient(90deg, var(--flag-black) 0 33.34%, var(--flag-red) 33.34% 66.67%, var(--flag-gold) 66.67% 100%); }
.flag--v { background: linear-gradient(180deg, var(--flag-black) 0 33.34%, var(--flag-red) 33.34% 66.67%, var(--flag-gold) 66.67% 100%); }
.flagbar { height: 3px; width: 100%; }
.flag-accent { width: 46px; height: 3px; border-radius: 2px; margin: 10px 0 24px; }

/* ----------------------------------------------------------- check badge */
.check-badge {
  display: grid; place-items: center; flex-shrink: 0;
  border-radius: 50%; background: var(--pc); color: var(--text-on-primary);
  width: 21px; height: 21px;
}
.check-badge svg { width: 12px; height: 12px; }
.check-badge--22 { width: 22px; height: 22px; }

/* =================================================================
   HEADER (01)
   ================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 10px; padding-bottom: 10px;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand__flag { width: 7px; height: 38px; border-radius: 1.5px; overflow: hidden; box-shadow: var(--sh-flag-inset); flex-shrink: 0; }
.brand__title { font-size: 16px; font-weight: 700; line-height: 1.06; letter-spacing: -0.01em; color: var(--text-primary); }
.brand__sub { font-size: 10px; font-weight: 500; line-height: 1.06; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-tertiary); }
.phone-btn {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; white-space: nowrap;
  padding: 8px 15px 8px 12px; background: var(--pc); color: var(--text-on-primary);
  border-radius: var(--r-chip); font-size: 14px; font-weight: 700; transition: opacity 0.15s;
}
.phone-btn:hover { opacity: 0.9; }
.phone-btn svg { width: 16px; height: 16px; }

/* =================================================================
   HERO (02)
   ================================================================= */
.hero { background: var(--surface); border-bottom: 1px solid var(--border-section); }
.hero .container {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: clamp(22px, 5vw, 48px);
  padding-top: clamp(22px, 6vw, 48px); padding-bottom: clamp(26px, 6vw, 54px);
}
.hero__msg { flex: 1 1 400px; min-width: 0; }
.hero__funnel { flex: 1 1 440px; min-width: 0; max-width: 480px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.hero__eyebrow { margin-bottom: clamp(9px, 2.8vw, 18px); }
.hero h1 {
  font-size: clamp(24px, 4.6vw, 44px); line-height: 1.1; letter-spacing: -0.024em;
  color: var(--text-primary); margin: 0 0 clamp(12px, 3.4vw, 22px);
}
.hl { box-shadow: inset 0 -0.26em 0 var(--highlight-underline); }
.hero__sub { font-size: clamp(15px, 2.1vw, 17.5px); line-height: 1.5; color: var(--text-body-3); margin: 0 0 clamp(14px, 2.6vw, 20px); max-width: 560px; }

/* word-flip (H1) — vertical roll cycling Mama/Papa/Oma/Opa/Tante/Onkel,
   fixed width (= widest word) so following text never shifts. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.wordflip { display: inline-block; overflow: hidden; height: 1.1em; line-height: 1.1; vertical-align: bottom; text-align: left; background: var(--highlight-underline); border-radius: 5px; padding: 0 0.14em; }
.wordflip__roll { display: block; animation: wordroll 15s cubic-bezier(.86,0,.07,1) infinite; }
.wordflip__roll i { display: block; height: 1.1em; font-style: normal; }
@keyframes wordroll {
  0%, 11.4%    { transform: translateY(0); }
  14.3%, 25.7% { transform: translateY(-1.1em); }
  28.6%, 40%   { transform: translateY(-2.2em); }
  42.9%, 54.3% { transform: translateY(-3.3em); }
  57.1%, 68.6% { transform: translateY(-4.4em); }
  71.4%, 82.9% { transform: translateY(-5.5em); }
  85.7%, 100%  { transform: translateY(-6.6em); }
}
@media (prefers-reduced-motion: reduce) { .wordflip__roll { animation: none; } }

/* legal-trust strip (below hero) */
.trustrow { border-bottom: 1px solid var(--border-section); background: var(--surface); }
.trustrow .container { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: center; padding-top: 14px; padding-bottom: 14px; }
.trustrow__item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.trustrow__item svg { width: 15px; height: 15px; color: var(--success-fg); flex-shrink: 0; }
.trustrow__item b { color: var(--text-primary); font-weight: 700; }

/* named advisor block */
.advisor { background: var(--surface-2); border-top: 1px solid var(--border-section); border-bottom: 1px solid var(--border-section); }
.advisor .container { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 4vw, 36px); padding-top: var(--section-y); padding-bottom: var(--section-y); }
.advisor__photo { flex: 0 0 auto; width: clamp(96px, 22vw, 132px); height: clamp(96px, 22vw, 132px); border-radius: 50%; object-fit: cover; background: var(--surface-chip); box-shadow: var(--sh-card); }
.advisor__body { flex: 1 1 320px; min-width: 0; }
.advisor__eyebrow { margin-bottom: 8px; }
.advisor__name { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; color: var(--text-primary); margin: 0 0 8px; letter-spacing: -0.015em; }
.advisor__text { font-size: 15.5px; line-height: 1.55; color: var(--text-body-3); margin: 0 0 16px; max-width: 620px; }
.advisor__text b { color: var(--text-primary); }
.advisor__cta { display: inline-flex; align-items: center; gap: 9px; background: var(--whatsapp); color: #fff; border-radius: var(--r-chip); padding: 12px 20px; font-size: 15px; font-weight: 700; }
.advisor__cta svg { width: 19px; height: 19px; }
.advisor__cta:hover { opacity: 0.92; }
.advisor__sign { margin: 0 0 16px; font-weight: 700; color: var(--text-primary); font-size: 15px; }
.advisor__sign span { display: block; font-weight: 400; font-size: 13px; color: var(--text-muted); }
.advisor__photo--placeholder { display: grid; place-items: center; color: var(--text-faint); }
.advisor__photo--placeholder svg { width: 46%; height: 46%; }
.hero__list { display: flex; flex-direction: column; gap: clamp(8px, 2.2vw, 13px); }
.hero__list li { display: flex; gap: 11px; align-items: flex-start; }
.hero__list .check-badge { margin-top: 2px; }
.hero__list span.t { font-size: clamp(14px, 3.6vw, 15.5px); line-height: 1.42; color: var(--text-body); }
.hero__list b { font-weight: 700; color: var(--text-body); }
.hero__why { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.hero__why b { color: var(--text-secondary); font-weight: 600; }

/* =================================================================
   FUNNEL CARD (03) + phases
   ================================================================= */
.card {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-card); box-shadow: var(--sh-card); overflow: hidden;
}
.card__body { padding: 20px 20px 22px; min-height: 414px; }

.q-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.q-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pc); }
.q-progress-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.track { height: 6px; border-radius: var(--r-chip); background: var(--surface-track); overflow: hidden; }
.track > i { display: block; height: 100%; border-radius: var(--r-chip); background: var(--pc); width: 0; transition: width var(--t-progress); }
.q-title { font-size: 20px; font-weight: 700; line-height: 1.28; letter-spacing: -0.01em; color: var(--text-primary); margin: 16px 0 15px; }

/* options */
.options { display: grid; gap: 10px; }
.options.cols-2 { grid-template-columns: 1fr 1fr; }
.option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 62px; padding: 16px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border-option); border-radius: var(--r-option);
  box-shadow: var(--sh-option); transition: var(--t-option); color: var(--text-primary);
}
.option:hover { border-color: var(--pc); background: #fafafa; }
.option:active { transform: scale(0.975); background: var(--surface-chip); }
.option__lead { flex: 1; display: flex; align-items: center; gap: 12px; }
.option__ico { width: 22px; height: 22px; color: var(--text-faint); flex-shrink: 0; transition: color 0.15s; }
.option__label { font-size: 15px; font-weight: 600; }
.option__aff { flex-shrink: 0; display: grid; place-items: center; }
.option__aff .chev { width: 18px; height: 18px; color: #c4c4c0; }
.option__aff .sel { display: none; width: 22px; height: 22px; border-radius: 50%; background: var(--pc); color: #fff; place-items: center; }
.option__aff .sel svg { width: 13px; height: 13px; }
.option.is-selected { background: var(--surface-sunken); border: 2px solid var(--pc); box-shadow: none; padding: 15.5px; }
.option.is-selected .option__ico { color: var(--pc); }
.option.is-selected .option__aff .chev { display: none; }
.option.is-selected .option__aff .sel { display: grid; }
.options.cols-2 .option { justify-content: center; text-align: center; }
.options.cols-2 .option__lead { flex: initial; justify-content: center; }

/* PLZ + inputs */
.field { display: block; width: 100%; }
.input {
  width: 100%; padding: 14px 15px; font-size: 16px; color: var(--text-primary);
  background: var(--surface); border: 1.5px solid var(--border-input); border-radius: var(--r-input);
  transition: var(--t-input); font-family: inherit;
}
.input::placeholder { color: var(--text-faint); }
.input:focus { outline: none; border-color: var(--pc); }
.input.is-error { border-color: var(--error); }
.input--plz { text-align: center; font-size: 22px; font-weight: 700; letter-spacing: 0.14em; }
.helper { font-size: 12.5px; line-height: 1.45; color: var(--text-tertiary); margin-top: 9px; }
.err { font-size: 12px; color: var(--error); margin-top: 6px; }
.err--center { text-align: center; }

/* nav row + trust + direct link */
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; min-height: 20px; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.back-btn:hover { color: var(--text-primary); }
.back-btn svg { width: 16px; height: 16px; }
.trust { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-divider); display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-faint); }
.trust svg { width: 14px; height: 14px; flex-shrink: 0; }
.trust--center { justify-content: center; margin-top: 14px; border-top: 0; padding-top: 0; text-align: center; }
.direct-link { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--text-tertiary); }
.direct-link a { color: var(--pc); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* CTA buttons */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px 22px; border: 0; cursor: pointer;
  background: var(--pc); color: var(--text-on-primary); font-size: 16px; font-weight: 600;
  border-radius: var(--r-cta-primary); transition: var(--t-press);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cta:hover { opacity: 0.92; }
.cta:active { transform: scale(0.98); }
.cta svg { width: 18px; height: 18px; }
.cta--quiz { width: auto; padding: 12px 20px; border-radius: var(--r-cta-quiz); }
.cta--quiz:hover { opacity: 0.9; }
.cta--quiz:active { transform: scale(0.96); }
.cta--quiz svg { width: 16px; height: 16px; }
.cta--final { border-radius: var(--r-cta-final); }

/* phases visibility */
.phase { animation: fadeUp 0.35s ease; }
[hidden] { display: none !important; }

/* loading */
.loading { padding: 26px 6px 22px; text-align: center; }
.spinner { width: 52px; height: 52px; margin: 0 auto 20px; border-radius: 50%; border: 4px solid var(--surface-track); border-top-color: var(--pc); animation: spinPc 0.9s linear infinite; }
.loading h2 { font-size: 19px; margin: 0 0 8px; }
.loading p { font-size: 14px; color: var(--text-tertiary); margin: 0 0 20px; }
.bar { height: 6px; border-radius: var(--r-chip); background: var(--surface-track); overflow: hidden; position: relative; }
.bar > i { position: absolute; top: 0; left: 0; height: 100%; width: 35%; background: var(--pc); border-radius: var(--r-chip); animation: barMove 1.4s ease-in-out infinite; }

/* result + done shared */
.success { display: grid; place-items: center; border-radius: 50%; background: var(--success-bg); color: var(--success-fg); animation: popIn 0.4s ease; }
.success--52 { width: 52px; height: 52px; margin: 0 auto 11px; }
.success--52 svg { width: 28px; height: 28px; }
.success--60 { width: 60px; height: 60px; margin: 0 auto 14px; }
.success--64 { width: 64px; height: 64px; margin: 0 auto 16px; }
.success--60 svg,.success--64 svg { width: 30px; height: 30px; }
.result-title { font-size: 21px; text-align: center; margin: 0 0 4px; }
.result-form { animation: fadeUp 0.3s ease; margin-top: 8px; }

/* whatsapp block */
.wa {
  background: var(--whatsapp-bg); border: 1.5px solid var(--whatsapp-border);
  border-radius: var(--r-whatsapp); padding: 16px; margin: 0 0 12px;
}
.wa__head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; }
.wa__badge { width: 34px; height: 34px; border-radius: 50%; background: var(--whatsapp); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.wa__badge svg { width: 20px; height: 20px; }
.wa__title { font-size: clamp(13px,3.7vw,14.5px); font-weight: 700; line-height: 1.25; color: var(--text-primary); }
.wa__sub { font-size: clamp(11px,3.1vw,12px); line-height: 1.4; color: var(--whatsapp-fg-subtle); }
.wa .input:focus { border-color: var(--whatsapp); }
.wa--sm { padding: 14px; border-radius: var(--r-whatsapp); }
.wa--sm .wa__badge { width: 32px; height: 32px; }
.wa--sm .wa__badge svg { width: 19px; height: 19px; }

/* checkboxes */
.chk { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.chk input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--whatsapp); cursor: pointer; }
.chk--consent input { width: 19px; height: 19px; accent-color: var(--pc); }
.chk__t { font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
.chk--consent .chk__t { font-size: 12.5px; line-height: 1.5; }
.chk__t a { color: var(--pc); font-weight: 600; text-decoration: underline; }
.wa .chk__t { color: var(--whatsapp-fg-subtle); }
.wa .chk__t b { color: var(--whatsapp-fg-dark); font-weight: 700; }
.optin-wrap { margin-top: 4px; }
.consent-wrap { margin: 0 0 16px; }

/* name grid */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.mb10 { margin-bottom: 10px; }

/* done */
.done { padding: 26px 8px 22px; text-align: center; }
.done h2 { font-size: 22px; margin: 0 0 10px; }
.done p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 18px; }
.done p b { color: var(--text-primary); }
.done p b.wa-word { color: var(--whatsapp-fg-dark); }
.done__pill { display: inline-flex; align-items: center; gap: 8px; background: var(--whatsapp-bg); border: 1px solid var(--whatsapp-border); color: var(--whatsapp-fg-dark); border-radius: var(--r-chip); padding: 8px 15px; font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.done__pill svg { width: 16px; height: 16px; }
.done__phone { display: inline-flex; align-items: center; gap: 9px; background: var(--surface-chip-2); color: var(--text-primary); border-radius: var(--r-cta-secondary); padding: 13px 20px; font-size: 15px; font-weight: 700; }
.done__phone svg { width: 18px; height: 18px; }

/* =================================================================
   IMAGE BAND (04) + FINAL CTA (10)
   ================================================================= */
.imgband { position: relative; width: 100%; height: clamp(250px, 34vw, 440px); background: var(--img-dark-2) url('hero.jpg') center 28% / cover no-repeat; }
.imgband__ov { position: absolute; inset: 0; background: var(--overlay-image-band); }
.imgband .container { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 36px; }
.imgband__chip { width: 26px; height: 17px; border-radius: 2px; overflow: hidden; box-shadow: var(--sh-flag-ring); margin-bottom: 16px; }
.imgband h2 { max-width: 640px; color: #fff; font-size: clamp(22px, 3.4vw, 36px); line-height: 1.18; letter-spacing: -0.02em; text-shadow: var(--sh-txt-title); }
.imgband p { max-width: 560px; margin-top: 12px; color: rgba(255,255,255,0.92); font-size: clamp(14px, 1.6vw, 17px); line-height: 1.5; text-shadow: var(--sh-txt-body); }

.finalcta { position: relative; width: 100%; background: var(--img-dark) url('hero.jpg') center 30% / cover no-repeat; }
.finalcta__ov { position: absolute; inset: 0; background: var(--overlay-final-cta); }
.finalcta .container { position: relative; text-align: center; padding-top: clamp(34px,8vw,56px); padding-bottom: clamp(38px,8vw,60px); }
.finalcta h2 { color: #fff; font-size: clamp(22px,2.6vw,30px); line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 12px; }
.finalcta p { color: rgba(255,255,255,0.85); font-size: 15.5px; line-height: 1.55; margin: 0 0 24px; }
.finalcta__btn { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--img-dark); border: 0; cursor: pointer; padding: 16px 30px; font-size: 16px; font-weight: 700; border-radius: var(--r-cta-final); transition: opacity 0.15s; }
.finalcta__btn:hover { opacity: 0.92; }
.finalcta__btn svg { width: 18px; height: 18px; }
.finalcta__assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 22px; margin: 18px 0 0; }
.finalcta__assure span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.92); white-space: nowrap; }
.finalcta__assure svg { width: 15px; height: 15px; color: #fff; flex-shrink: 0; }
.finalcta__foot { margin-top: 22px; font-size: 13.5px; color: rgba(255,255,255,0.8); }
.finalcta__foot a { color: #fff; font-weight: 700; }

/* =================================================================
   DIRECT FORM (05)
   ================================================================= */
.direct { background: var(--surface); border-top: 1px solid var(--border-section); }
.direct .container { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(22px,5vw,44px); padding-top: clamp(26px,6vw,48px); padding-bottom: clamp(26px,6vw,48px); }
.direct__left { flex: 1 1 340px; min-width: 0; }
.direct__right { flex: 1 1 400px; min-width: 0; max-width: 460px; }
.direct__eyebrow { margin-bottom: 16px; }
.direct__eyebrow .chip { width: 7px; height: 15px; border-radius: 1.5px; overflow: hidden; box-shadow: var(--sh-flag-inset-light); }
.direct h2 { font-size: clamp(22px,2.8vw,30px); line-height: 1.22; letter-spacing: -0.018em; margin: 0 0 14px; }
.direct__lead { font-size: 15.5px; line-height: 1.55; color: var(--text-body-3); margin: 0 0 22px; }
.direct__lead b { color: var(--text-primary); font-weight: 700; }
.direct__benefits { display: flex; flex-direction: column; gap: 12px; }
.direct__benefits li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text-body); }
.direct-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card-static); box-shadow: var(--sh-card-direct); overflow: hidden; }
.direct-card__body { padding: 22px 20px; }
.direct-card h3 { font-size: 17px; font-weight: 700; margin: 0 0 3px; }
.direct-card__sub { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; }

/* =================================================================
   SO FUNKTIONIERT'S — 3 steps (NEW)
   ================================================================= */
.steps { background: var(--surface); border-top: 1px solid var(--border-section); }
.steps .container { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.steps h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -0.015em; }
.steps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; margin: 6px 0 0; list-style: none; padding: 0; }
.step { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-card-inner); padding: 22px; }
.step__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pc); color: var(--text-on-primary); font-weight: 700; font-size: 16px; margin-bottom: 12px; }
.step h3 { font-size: 16px; margin: 0 0 6px; }
.step p { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.steps__cta { margin-top: 22px; text-align: center; }
.steps__cta .cta, .recta .cta { width: auto; }

/* =================================================================
   RE-CTA (mid-page)
   ================================================================= */
.recta { background: var(--surface-2); border-top: 1px solid var(--border-section); border-bottom: 1px solid var(--border-section); text-align: center; }
.recta .container { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.recta h2 { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 8px; }
.recta p { font-size: 15.5px; line-height: 1.5; color: var(--text-body-3); margin: 0 0 18px; }

/* =================================================================
   BENEFITS BAR (06)
   ================================================================= */
.benefits { background: var(--surface-2); border-top: 1px solid var(--border-section); }
.benefits .container { padding-top: clamp(22px,6vw,32px); padding-bottom: clamp(24px,6vw,36px); }
.benefits__intro { text-align: center; font-size: 15px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 22px; }
.benefits__intro b { color: var(--text-primary); }
.benefits__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 16px; }
.benefits__grid li { display: flex; align-items: center; gap: 9px; }
.benefits__grid .check-badge { width: 22px; height: 22px; }
.benefits__grid li > span:last-child { font-size: 14px; font-weight: 500; color: var(--text-primary); }

/* =================================================================
   TESTIMONIALS (07)
   ================================================================= */
.tst { border-top: 1px solid var(--border-section); background: var(--surface); }
.tst .container { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.tst h2 { font-size: clamp(20px,2.4vw,26px); line-height: 1.3; letter-spacing: -0.015em; }
.tst__summary { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.tst__word { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.stars { display: inline-flex; gap: 3px; }
.star-sq { border-radius: 4px; background: var(--trustpilot-green); display: grid; place-items: center; color: #fff; }
.star-sq.hl-partial { background: linear-gradient(90deg, var(--trustpilot-green) 0 62%, var(--star-empty) 62% 100%); }
.stars--head .star-sq { width: 30px; height: 30px; }
.stars--head .star-sq svg { width: 18px; height: 18px; }
.stars--card { margin-bottom: 13px; }
.stars--card .star-sq { width: 22px; height: 22px; }
.stars--card .star-sq svg { width: 13px; height: 13px; }
.tst__meta { font-size: 13.5px; color: var(--text-secondary); }
.tst__meta b { color: var(--text-primary); }
.tst__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,270px),1fr)); gap: 16px; }
.review { border: 1px solid var(--border-2); border-radius: var(--r-card-inner); padding: 20px; background: var(--surface); }
.review__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.review__verified { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--verified-green); }
.review__verified svg { width: 14px; height: 14px; }
.review__date { font-size: 12px; color: var(--text-faint-2); }
.review__quote { font-size: 15px; line-height: 1.55; color: var(--text-body-2); margin: 0 0 16px; }
.review__author { display: flex; align-items: center; gap: 11px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-chip); display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; }
.review__name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.review__ctx { font-size: 12px; color: var(--text-muted); line-height: 1.25; }

/* =================================================================
   BENEFIT CARDS (08)
   ================================================================= */
.cards { background: var(--surface-2); border-top: 1px solid var(--border-section); }
.cards .container { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.cards h2 { font-size: clamp(22px,2.6vw,30px); line-height: 1.25; letter-spacing: -0.015em; }
.cards .flag-accent { margin: 10px 0 26px; }
.cards__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,290px),1fr)); gap: 18px; }
.icard { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-card-inner); padding: 22px; }
.icard__tile { width: 42px; height: 42px; border-radius: var(--r-icon-tile); background: var(--surface-sunken); color: var(--pc); display: grid; place-items: center; margin-bottom: 14px; }
.icard__tile svg { width: 22px; height: 22px; }
.icard h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.icard p { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

/* =================================================================
   TIPS ACCORDION (09)
   ================================================================= */
.tips { border-top: 1px solid var(--border-section); background: var(--surface); }
.tips .container { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.tips h2 { font-size: clamp(22px,2.6vw,30px); line-height: 1.25; letter-spacing: -0.015em; }
.tips__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,420px),1fr)); gap: 14px; align-items: start; }
.tip { border: 1px solid var(--border-2); border-radius: var(--r-card-inner); overflow: hidden; }
.tip__btn { width: 100%; display: flex; align-items: center; gap: 13px; padding: 16px 18px; background: none; border: 0; cursor: pointer; text-align: left; list-style: none; }
.tip__btn::-webkit-details-marker { display: none; }
.tip__btn::marker { content: ""; }
.tip__num { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border-option); display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--pc); flex-shrink: 0; }
.tip__title { flex: 1; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--text-primary); }
.tip__chev { width: 19px; height: 19px; color: var(--text-faint-2); flex-shrink: 0; transition: transform var(--t-chevron); }
.tip[open] .tip__chev { transform: rotate(180deg); }
.tip__body { padding: 0 18px 18px 61px; }
.tip__body p { font-size: 13.5px; line-height: 1.62; color: var(--text-body-3); margin: 0 0 10px; }
.tip__body p:last-child { margin-bottom: 0; }

/* =================================================================
   LP UNIQUE CONTENT (keyword pages, restyled)
   ================================================================= */
.lp-content { background: var(--surface); border-top: 1px solid var(--border-section); }
.lp-content .container { padding-top: var(--section-y); padding-bottom: var(--section-y); max-width: 860px; }
.lp-content h2 { font-size: clamp(21px,2.4vw,27px); line-height: 1.25; margin: 0 0 16px; }
.lp-content h3 { font-size: 18px; margin: 26px 0 10px; }
.lp-content p { margin: 0 0 14px; color: var(--text-body); line-height: 1.65; }
.lp-content ul { padding-left: 22px; margin: 0 0 14px; list-style: disc; }
.lp-content li { margin: 0 0 6px; }
.lp-lead { font-size: 17px; color: var(--text-body-2); }
.lp-takeaways { background: var(--surface-sunken); border-left: 3px solid var(--pc); padding: 18px 20px; border-radius: 0 8px 8px 0; margin: 0 0 24px; }
.lp-takeaways h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin: 0 0 10px; }
.lp-takeaways ul { list-style: none; padding: 0; margin: 0; }
.lp-takeaways li { padding-left: 22px; position: relative; margin: 0 0 7px; font-size: 15px; }
.lp-takeaways li::before { content: "✓"; position: absolute; left: 0; color: var(--pc); font-weight: 700; }
.lp-definition { background: var(--surface-sunken); border-left: 3px solid var(--pc); padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 22px 0; }
.lp-definition h4 { font-size: 16px; margin: 0 0 8px; color: var(--text-primary); }
.lp-definition p { font-size: 14.5px; margin: 0; }
.lp-content .cost-comparison { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
.lp-content .cost-comparison th { background: var(--surface-sunken); padding: 10px 12px; text-align: left; border: 1px solid var(--border-2); font-weight: 600; }
.lp-content .cost-comparison td { padding: 10px 12px; border: 1px solid var(--border-2); }
.lp-data-block { overflow-x: auto; }
.lp-cta-back { background: var(--surface-sunken); border-left: 3px solid var(--pc); padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 20px 0 0; }
.lp-cta-back p { margin: 0 0 10px; }
.lp-cta-button { display: inline-block; background: var(--pc); color: #fff; padding: 11px 22px; border-radius: var(--r-cta-final); font-weight: 600; }
.lp-faqs { margin-top: 28px; }
.lp-faqs details { border: 1px solid var(--border-2); border-radius: var(--r-card-inner); padding: 14px 18px; margin-bottom: 10px; background: var(--surface); }
.lp-faqs summary { cursor: pointer; font-weight: 600; font-size: 15.5px; color: var(--text-primary); }
.lp-faqs p { margin: 10px 0 0; font-size: 14.5px; color: var(--text-body-3); }
.lp-sources { margin-top: 28px; padding: 16px 20px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-card-inner); }
.lp-sources h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin: 0 0 10px; }
.lp-sources ul { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.lp-sources li { margin: 0 0 5px; }
.lp-sources a { color: var(--text-secondary); text-decoration: underline; }

/* =================================================================
   FOOTER (11)
   ================================================================= */
.site-footer { background: var(--footer-bg); color: var(--footer-text); }
.site-footer .container { padding-top: clamp(24px,6vw,32px); padding-bottom: clamp(28px,6vw,38px); }
.site-footer__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.site-footer__flag { width: 6px; height: 34px; border-radius: 1.5px; overflow: hidden; box-shadow: var(--sh-flag-inset-dark); flex-shrink: 0; }
.site-footer__title { font-size: 14px; font-weight: 700; line-height: 1.06; color: var(--footer-strong); }
.site-footer__sub { font-size: 10px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1.06; color: var(--footer-muted); }
.site-footer__hotline { font-size: 13px; line-height: 1.5; margin: 0 0 14px; }
.site-footer__hotline a { color: var(--footer-strong); font-weight: 700; }
.site-footer__links { display: flex; gap: 18px; margin-bottom: 18px; }
.site-footer__links a { font-size: 13px; font-weight: 600; color: var(--footer-link); }
.site-footer__links a:hover { color: #fff; }
.site-footer__legal { font-size: 11px; line-height: 1.6; color: var(--footer-muted); margin: 0; max-width: 900px; }

/* legal / thank-you pages */
.legal { background: var(--surface); }
.legal .container { max-width: 820px; padding-top: 40px; padding-bottom: 60px; }
.legal h1 { font-size: 30px; margin: 0 0 24px; }
.legal h2 { font-size: 20px; margin: 26px 0 10px; }
.legal p, .legal li { color: var(--text-body); line-height: 1.65; }
.legal ul { padding-left: 22px; margin: 0 0 14px; list-style: disc; }
.legal a { color: var(--pc); text-decoration: underline; }
.legal .back { display: inline-block; margin: 0 0 18px; font-weight: 600; }
.ty { text-align: center; }
.ty .container { max-width: 640px; }
.ty h1 { margin-bottom: 14px; }

/* =================================================================
   ANIMATIONS
   ================================================================= */
@keyframes spinPc { to { transform: rotate(360deg); } }
@keyframes barMove { 0% { transform: translateX(-100%); } 100% { transform: translateX(280%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.8); } 60% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .spinner { animation: spinPc 0.9s linear infinite !important; }
  .bar > i { animation: barMove 1.4s ease-in-out infinite !important; }
}