/* ------------------------------------------------------------------
   Weiterempfehlungsbonus — Landingpage-Styles
   Fonts (Raleway + Nunito Sans) kommen global aus dem Divi-Child-Theme
   (custom.css + style.css → /fonts/*.woff2) und werden hier NICHT mehr
   dupliziert. Einzige Ausnahme: Nunito Sans 800 (rote Akzent-Bolds wie
   .reempf-strong-accent / .reempf-strong-white / .reempf-zahn-text) ist
   global nicht deklariert — daher hier einmal auf die bereits im Theme
   vorhandene Font-Datei verwiesen (keine neue Datei, kein Duplikat).
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Nunito Sans ExtraBold'), local('NunitoSans-ExtraBold'),
       url('/fonts/nunito-sans-v5-latin-800.woff2') format('woff2'),
       url('/fonts/nunito-sans-v5-latin-800.woff') format('woff');
}

:root {
  /* ============================================================
     COLOR — Primary (tomedo® logo / brand)
     ============================================================ */
  --color-red:            #db1f3e;  /* tomedo® Red — primary brand */
  --color-red-dark:       #ad153d;  /* tomedo® Dark Red */
  --color-green:          #38af4f;  /* tomedo® Green — accent in logo (leaves) */
  --color-black:          #383838;  /* tomedo® Black — body text, dark surfaces */

  /* ============================================================
     COLOR — Secondary (neutrals, used in print & digital)
     ============================================================ */
  --color-white:          #ffffff;
  --color-almost-white:   #f8f8f8;
  --color-lighter-grey:   #cfcfcf;
  --color-light-grey:     #999999;
  --color-mid-grey:       #787878;
  --color-dark-grey:      #525252;

  /* Reds expanded */
  --color-red-lighter:    #ff5967;
  --color-red-light:      #f24159;
  --color-red-darker:     #8a0029;

  /* ============================================================
     COLOR — Accents (for highlights, info, status)
     ============================================================ */
  --color-orange:         #fa8231;
  --color-yellow:         #fed330;
  --color-blue:           #2d98da;
  --color-purple:         #8854d0;

  /* ============================================================
     SEMANTIC TOKENS — light theme
     ============================================================ */
  --bg-canvas:            var(--color-almost-white);
  --bg-surface:           var(--color-white);
  --bg-surface-alt:       #f1f1f1;
  --bg-inverse:           var(--color-black);

  --fg-default:           var(--color-black);
  --fg-muted:             var(--color-dark-grey);
  --fg-subtle:            var(--color-mid-grey);
  --fg-disabled:          var(--color-light-grey);
  --fg-on-brand:          var(--color-white);
  --fg-on-inverse:        var(--color-white);

  --border-default:       var(--color-lighter-grey);
  --border-subtle:        #e6e6e6;
  --border-strong:        var(--color-light-grey);

  /* Brand accent */
  --accent:               var(--color-red);
  --accent-hover:         var(--color-red-dark);
  --accent-pressed:       var(--color-red-darker);
  --accent-soft:          #fde7eb;          /* derived tint of red */
  --accent-on:            var(--color-white);

  /* Status (mapped from accents) */
  --status-success:       var(--color-green);
  --status-success-soft:  #e3f4e7;
  --status-warning:       var(--color-orange);
  --status-warning-soft:  #ffeede;
  --status-info:          var(--color-blue);
  --status-info-soft:     #e0f0fb;
  --status-danger:        var(--color-red);
  --status-danger-soft:   #fde7eb;
  --status-pending:       var(--color-yellow);
  --status-pending-soft:  #fff8d9;

  /* ============================================================
     TYPOGRAPHY — families
     ============================================================ */
  --font-display:    "Raleway", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:       "Nunito Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:       ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Weights */
  --fw-display-light: 300;
  --fw-display-bold:  700;
  --fw-body:          400;
  --fw-body-bold:     700;
  --fw-body-black:    900;

  /* Type scale (modular ~1.25, body anchored at 16px) */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   40px;
  --fs-4xl:   56px;
  --fs-5xl:   72px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-base:   1.5;
  --lh-loose:  1.7;

  --tracking-tight: -0.01em;
  --tracking-none:  0;
  --tracking-wide:  0.04em;
  --tracking-cap:   0.08em;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ============================================================
     RADIUS / SHADOW / BORDER
     ============================================================ */
  --radius-xs:    3px;
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  999px;

  --shadow-1: 0 1px 2px rgba(56,56,56,.06), 0 1px 1px rgba(56,56,56,.04);
  --shadow-2: 0 2px 6px rgba(56,56,56,.08), 0 1px 2px rgba(56,56,56,.06);
  --shadow-3: 0 8px 24px rgba(56,56,56,.10), 0 2px 6px rgba(56,56,56,.06);
  --shadow-4: 0 24px 60px rgba(56,56,56,.16), 0 8px 24px rgba(56,56,56,.08);
  --shadow-focus: 0 0 0 3px rgba(219,31,62,.25);

  /* Motion */
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-in:       cubic-bezier(.4,.0,1,1);
  --ease-out:      cubic-bezier(.0,.0,.2,1);
  --dur-fast:      120ms;
  --dur-base:      180ms;
  --dur-slow:      280ms;
}

/* ------------------------------------------------------------------
   Base type styles (semantic, ready to use as classes or via tag)
   ------------------------------------------------------------------ */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-default);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-light);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-default);
  margin: 0;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-light);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0;
}
h5, .t-h5 {
  font-family: var(--font-body);
  font-weight: var(--fw-body-black);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0;
}

p, .t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-default);
  margin: 0;
}
.t-body-lg {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}
.t-small {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.t-caption {
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-cap);
  font-weight: var(--fw-body-bold);
}
.t-lead {
  font-family: var(--font-display);
  font-weight: var(--fw-display-light);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
}
.t-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-body-black);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-cap);
  color: var(--accent);
}
code, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-surface-alt);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
a:hover { border-bottom-color: var(--accent); color: var(--accent-hover); }


body { margin: 0; }


/* ==================================================================
   Divi-Overrides — neutralisiert Basis-Styles aus Divis
   style-static.min.css und der Theme-custom.css, die sonst die
   Abstände und Formularelemente der Landingpage verschieben.
   (Analog zu ki-sommerwochen.css; scoped auf .reempf-page, damit
   Divi-Header/-Footer unberührt bleiben.)
   ================================================================== */

/* Divi gibt jedem <p> padding-bottom:1em — bricht die Abstände in den
   Vorteils-Karten, im Kombi-Störer und im Vorteilsrechner. */
.reempf-page p { padding-bottom: 0; }

/* Divi gibt h1–h6 padding-bottom:10px, color:#333 und font-weight:500. */
.reempf-page h1,
.reempf-page h2,
.reempf-page h3,
.reempf-page h4,
.reempf-page h5,
.reempf-page h6 {
  padding: 0;
  color: inherit;
}

/* Divi setzt input { -webkit-appearance: none } — dadurch verschwindet
   die native Range-Bar des Vorteilsrechners. Native Darstellung
   (mit accent-color wie im Design) wiederherstellen. */
.reempf-page input[type=range] {
  -webkit-appearance: auto;
  appearance: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  height: auto;
}

/* Zahlenfelder des Rechners: custom.css erzwingt per !important
   Nunito Sans auf allen Inputs — die Rechner-Werte sind aber Raleway. */
.reempf-page input[type=number] {
  -webkit-appearance: auto;
  appearance: auto;
  font-family: Raleway, sans-serif !important;
  box-shadow: none;
}

/* Duplikat-Standard-Footer, den Divi unterhalb des Theme-Builder-Footers
   ausgibt, ausblenden (gleiches Verhalten wie bei den KI-Sommerwochen). */
.weiterempfehlungsbonus-page #main-footer { display: none !important; }


/* ==================================================================
   Weiterempfehlungsbonus — Landingpage-spezifische Regeln
   (aus dem Claude-Design abgeleitet: Hover/Focus-States, die im
   Design als style-hover/style-focus-Attribute vorlagen, plus
   FAQ-Akkordeon und Scroll-Offset für die Sprungmarken.)
   ================================================================== */

/* Sanftes Scrollen zu den Sprungzielen, Offset für den Divi-Header */
html { scroll-behavior: smooth; }
#formular, #vorteile { scroll-margin-top: 90px; }

/* Buttons (rot) — Hover dunkler */
.web-btn-primary:hover { background: #ad153d !important; color: #ffffff; }
/* Ghost-Button „Vorteile ansehen" — Hover volldeckend rot mit weißem Text */
.web-btn-ghost:hover   { color: #ffffff !important; background-color: #db1f3e !important; }

/* Vorteils-Karten — Hover Schatten + leichtes Anheben */
.web-card { transition: box-shadow 180ms cubic-bezier(.2,.6,.2,1), transform 180ms cubic-bezier(.2,.6,.2,1); }


/* FAQ */
.web-faq-item { background:#ffffff; border:1px solid #cfcfcf; border-radius:10px; overflow:hidden; }
.web-faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; cursor:pointer; padding:20px 24px; text-align:left;
  font-family:'Nunito Sans',sans-serif; font-size:17px; font-weight:700; color:#383838;
  transition: background 120ms cubic-bezier(.2,.6,.2,1);
}
.web-faq-icon { flex:none; font-family:Raleway,sans-serif; font-weight:300; font-size:26px; line-height:1; color:#db1f3e; }
/* Hohe Spezifität nötig: muss Divis `p:not(.has-background):last-of-type
   { padding-bottom:0 }` (0,2,1) und den Override `.reempf-page p` schlagen */
.reempf-page .web-faq-item .web-faq-a { margin:0; padding:0 24px 20px; font-size:16px; line-height:1.6; color:#525252; text-wrap:pretty; }
.web-faq-item[hidden] { display:block; }              /* Sicherheitsnetz */
.reempf-page .web-faq-item .web-faq-a[hidden] { display:none; }
.reempf-page .web-faq-item .web-faq-a a { color:#db1f3e; font-weight:700; }


/* ==================================================================
   Komponenten-Styles — zuvor inline im Template.
   Stammen aus dem Claude-Design (dort trägt jedes Element sein
   Styling inline). Hier ausgelagert und unter .reempf-page gescoped,
   damit sie Divis Tag-Level-Basis-Styles zuverlässig schlagen.
   Reihenfolge: Seite → Hero → Vorteile → Kombi-Störer → Rechner
   → Aktion/Formular → FAQ. (Hover-/Focus-States, FAQ-Akkordeon und
   Responsive-Regeln stehen weiterhin in den Blöcken oben/unten.)
   ================================================================== */

/* Seiten-Wrapper */
.reempf-page {
  min-height: 100vh;
  background: #f8f8f8;
  font-family: 'Nunito Sans', sans-serif;
  color: #383838;
}

/* Wiederverwendbare Text-Akzente */
.reempf-accent        { font-weight: 700; color: #db1f3e; }
.reempf-strong-accent { font-weight: 800; color: #db1f3e; }
.reempf-strong-white  { font-weight: 800; color: #ffffff; }
.reempf-strong-dark   { color: #525252; }
.reempf-page .reempf-sup { font-size: .6em; line-height: 0; }

/* Überschriften */
.reempf-page .reempf-h2 {
  font-family: Raleway, sans-serif;
  font-weight: 300;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 40px;
}
.reempf-page .reempf-h2--rechner { margin: 50px 0 12px; }
.reempf-page .reempf-h3 {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  margin: 0;
  color: #383838;
}

/* ---------- Hero ---------- */
.reempf-hero {
  position: relative;
  background: #f1d8c2;
  border-bottom: 1px solid #e6e6e6;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
}
.reempf-page .web-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  left: 50px;
}
.web-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.6) 28%, rgba(255,255,255,.28) 48%, rgba(255,255,255,0) 66%);
  pointer-events: none;
}
.web-hero-inner {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 96px 24px;
}
.reempf-page #hero-copy {
  max-width: 470px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-shadow: 0 1px 18px rgba(245,232,218,.9), 0 0 6px rgba(245,232,218,.75);
}
.reempf-eyebrow {
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #db1f3e;
}
.reempf-page .reempf-hero-title {
  font-family: Raleway, sans-serif;
  font-weight: 300;
  font-size: 64px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}
.reempf-page .reempf-hero-lead {
  font-family: Raleway, sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.35;
  color: #4a3524;
  margin: 0;
  max-width: 420px;
  text-wrap: pretty;
}
.reempf-hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
  text-shadow: none;
}
.web-btn-primary {
  background: #db1f3e;
  color: #ffffff;
  font-weight: 700;
  font-size: 18px;
  padding: 17px 34px;
  border-radius: 50px;
  border-bottom: none;
  transition: background 180ms cubic-bezier(.2,.6,.2,1);
}
.web-btn-ghost {
  color: #db1f3e;
  font-weight: 700;
  font-size: 18px;
  padding: 17px 30px;
  border-radius: 50px;
  border-bottom: none;
  background-color: #fbe0e5;
  transition: background 180ms cubic-bezier(.2,.6,.2,1), color 180ms cubic-bezier(.2,.6,.2,1);
}

/* ---------- Vorteile ---------- */
.reempf-vorteile {
  max-width: 1140px;
  margin: 0 auto;
  padding: 80px 24px 32px;
  position: relative;
}

/* Runder „Kopf frei"-Störer (oben rechts, überlappt die Hero-Kante) */
.reempf-page .reempf-stoerer {
  position: absolute;
  top: -66px;
  right: 100px;
  z-index: 20;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: #db1f3e;
  color: #ffffff;
  border-bottom: none;
  transform: rotate(5deg);
  box-shadow: 0 8px 22px rgba(56,56,56,.22);
  outline: 2px solid #ffffff;
  outline-offset: -5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 16px 16px 14px;
  transition: background 180ms cubic-bezier(.2,.6,.2,1), transform 180ms cubic-bezier(.2,.6,.2,1);
}
.reempf-page .reempf-stoerer:hover {
  background: #ad153d;
  color: #ffffff;
  transform: rotate(5deg) scale(1.04);
}
.reempf-stoerer-text {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  line-height: 1.2;
  text-wrap: balance;
}
.reempf-stoerer-l1 { display: block; font-size: 15px; }
.reempf-stoerer-l2 { display: block; font-size: 12px; font-weight: 700; margin: 2px 0; }
.reempf-stoerer-l3 { display: block; font-size: 14px; }
/* Pfeil-Icon etwas kompakter, damit mehr Platz für den Text bleibt */
.reempf-page .reempf-stoerer svg { width: 20px; height: 20px; }
.vorteil-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #ffffff;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(56,56,56,.06);
  overflow: hidden;
  margin-bottom: 24px;
}
.vorteil-col-1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(28px,4vw,44px);
  border-right: 1px solid #e6e6e6;
}
.vorteil-col-2 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(28px,4vw,44px);
}
.reempf-badge {
  align-self: flex-start;
  background: #fde7eb;
  color: #ad153d;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 999px;
}
.reempf-page .reempf-card-title {
  font-family: Raleway, sans-serif;
  font-weight: 300;
  font-size: clamp(30px,3.4vw,42px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #525252;
  margin: 0;
  text-wrap: balance;
}
.reempf-page .reempf-card-text {
  font-size: 17px;
  line-height: 1.6;
  color: #525252;
  margin: 0;
  text-wrap: pretty;
}
.reempf-page .reempf-card-note {
  font-size: 13px;
  line-height: 1.5;
  color: #8a8a8a;
  margin: 4px 0 0;
  text-wrap: pretty;
}

/* ---------- Kombi-Störer ---------- */
.reempf-kombi {
  display: flex;
  gap: 18px;
  align-items: center;
  border-radius: 10px;
  padding: 24px 28px;
  margin-bottom: 80px;
  background-color: #db1f3e;
}
.reempf-kombi-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF4B;
}
.reempf-kombi-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reempf-page .reempf-kombi-text {
  font-size: 17px;
  line-height: 1.6;
  color: #f8f8f8;
  margin: 0;
  text-wrap: pretty;
}
.reempf-page .reempf-kombi-note {
  font-size: 13px;
  line-height: 1.5;
  color: #ffffff;
  opacity: .8;
  margin: 0;
  text-wrap: pretty;
}
.reempf-page .reempf-kombi-link {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Vorteils-Rechner ---------- */
#vr-card {
  background: #ffffff;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  padding: clamp(28px,4vw,44px);
  box-shadow: 0 1px 2px rgba(56,56,56,.06);
  display: flex;
  flex-direction: column;
  gap: clamp(28px,4vw,40px);
}
.vr-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px,4vw,40px);
}
.vr-col {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reempf-page .vr-label {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #383838;
  line-height: 1.35;
}
.vr-valuerow {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.reempf-page .vr-num {
  width: 120px;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #383838;
  border: none;
  border-bottom: 2px solid #cfcfcf;
  background: transparent;
  padding: 4px 0;
  outline: none;
}
.reempf-page .vr-unit {
  font-family: Raleway, sans-serif;
  font-weight: 300;
  font-size: 24px;
  color: #525252;
}
.vr-range {
  width: 100%;
  accent-color: #db1f3e;
  cursor: pointer;
}
.reempf-page .vr-minmax {
  display: flex;
  justify-content: space-between;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  color: #999999;
}
.vr-divider {
  height: 1px;
  background: #e6e6e6;
  width: 100%;
}
.vr-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reempf-page .vr-result-label {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #525252;
}
.vr-pricerow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.reempf-page #vr-price {
  font-family: Raleway, sans-serif;
  font-weight: 300;
  font-size: clamp(48px,10vw,88px);
  line-height: 1;
  color: #db1f3e;
  letter-spacing: -0.02em;
}
.reempf-page .vr-price-unit {
  font-family: Raleway, sans-serif;
  font-weight: 300;
  font-size: clamp(20px,3vw,28px);
  color: #525252;
}
/* #vr-extra / #vr-spread: Standard versteckt; das JS blendet sie per
   inline style.display ein — Inline schlägt diese Regeln zuverlässig. */
.reempf-page #vr-extra {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 18px;
  color: #383838;
  margin: 0;
  display: none;
}
.reempf-page .vr-saving {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 18px;
  color: #383838;
  margin: 0;
}
.vr-note {
  display: flex;
  gap: 14px;
  align-items: center;
  border-radius: 10px;
  padding: 18px 20px;
}
.vr-note--info {
  display: none;
  background: #f8f8f8;
  border: 1px solid #e6e6e6;
}
.vr-note--pink {
  background: #fde7eb;
}
.vr-note-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vr-note--info .vr-note-icon {
  border: 1px solid #e6e6e6;
}
.reempf-page .vr-note-text {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #383838;
  margin: 0;
}
.reempf-page .reempf-legal {
  margin: 20px 4px 0;
  font-size: 13px;
  color: #787878;
  line-height: 1.6;
}
.reempf-page .reempf-legal--tight {
  margin: 8px 4px 0;
}

/* Wichtige Bedingungen — Infobox unter dem Rechner */
.reempf-bedingungen {
  margin: 24px 0 0;
  background: #f8f8f8;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 20px 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.reempf-bedingungen-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reempf-page .reempf-bedingungen-text {
  margin: 0;
  font-size: 15px;
  color: #383838;
  line-height: 1.6;
}

/* ---------- HS iFrame ---------- */
.hs-form-frame {
    margin: -70px -40px -40px -40px;
}

/* ---------- Aktion / So geht's / Formular ---------- */
.reempf-aktion {
  background: #ffffff;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}
#form-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(64px,8vw,96px) 24px;
}
.reempf-page .reempf-form-title {
  font-family: Raleway, sans-serif;
  font-weight: 300;
  font-size: clamp(40px,6vw,64px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(48px,6vw,72px);
  text-align: center;
  color: #383838;
}
.aktion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px,6vw,88px);
  align-items: start;
}
.aktion-col { min-width: 0; }
.reempf-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.reempf-steps-line {
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: #e6e6e6;
}
.reempf-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 22px;
  align-items: center;
  min-height: 64px;
}
.reempf-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #db1f3e;
  color: #fff;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.reempf-page .reempf-step-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #383838;
}
.reempf-form-head { margin-bottom: 32px; }

/* Hinweis-Banner: Aktion gilt auch für zahnmedizinische Kolleg:innen */
.reempf-zahn-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #db1f3e;
  border-radius: 10px;
  padding: 16px 26px;
  margin: 0 auto clamp(40px,5vw,56px);
  max-width: 720px;
}
.reempf-zahn-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFFFF4B;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reempf-page .reempf-zahn-text {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.4;
  color: #ffffff;
  text-wrap: pretty;
}

/* Hinweis-Box am Ende der „So geht's"-Spalte */
.reempf-hinweis {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e6e6e6;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.reempf-hinweis-icon {
  flex: none;
  margin-top: 2px;
}
.reempf-page .reempf-hinweis-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #787878;
}

/* ---------- FAQ ---------- */
.reempf-faq {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 24px 96px;
}
#faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* Vorteile-Karte (zweispaltig) + Aktions-Grid — einspaltig auf schmalen Viewports */
@media (max-width: 760px) {
  .vorteil-grid { grid-template-columns: 1fr !important; }
  .vorteil-col-1 { border-right: none !important; border-bottom: 1px solid #e6e6e6 !important; }
  .aktion-grid { grid-template-columns: 1fr !important; }
}

/* „Kopf frei"-Störer — auf schmalen Viewports einrücken bzw. in den Fluss holen,
   damit er nicht über die Seitenkante hinausragt oder die Überschrift verdeckt. */
@media (max-width: 1024px) {
  .reempf-page .reempf-stoerer { right: 24px; top: -58px; width: 156px; height: 156px; }
  .reempf-stoerer-l1 { font-size: 14px; }
  .reempf-stoerer-l2 { font-size: 11.5px; }
  .reempf-stoerer-l3 { font-size: 13px; }
}
@media (max-width: 640px) {
  .reempf-page .reempf-stoerer {
    position: static;
    margin: 0 auto 28px;
    transform: rotate(0);
    width: 170px;
    height: 170px;
    padding: 16px 16px 14px;
  }
  .reempf-page .reempf-stoerer:hover { transform: scale(1.04); }
}

/* Hero (vollflächiges Bild) — responsive */
@media (max-width: 900px) {
  .web-hero-inner { padding-top: 64px !important; padding-bottom: 64px !important; }
  .web-hero-img   { left: 0 !important; object-position: 72% center !important; }
  /* Verlauf stärker, damit der Text über dem Bild lesbar bleibt */
  .web-hero-overlay {
    background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 40%, rgba(255,255,255,.5) 70%, rgba(255,255,255,.2) 100%) !important;
  }
}
@media (max-width: 600px) {
  #hero-copy h1 { font-size: 44px !important; }
}


/* ==================================================================
   Scroll-Reveal — reines CSS-Einblenden beim Scrollen
   Ersetzt die frühere GSAP-Lösung, die Inline-Styles ins Markup
   geschrieben hat. Das JS setzt beim Sichtbarwerden nur die Klasse
   .is-visible; der Übergang selbst steckt hier im CSS.

   Der Startzustand (opacity:0) greift ausschließlich:
     • mit aktivem JS  → .js-reveal wird im <head> vor dem ersten Paint
       gesetzt; ohne JS bleibt die Seite vollständig sichtbar.
     • ohne reduzierte Bewegung → prefers-reduced-motion: no-preference.
   Dadurch bleibt nichts unsichtbar hängen, falls JS/Observer ausfällt.
   ================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  }
  .js-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  /* Dezenter Stagger für die direkten Kinder einer Reveal-Gruppe
     (Hero-Text, Aktions-Block, FAQ-Liste). */
  .js-reveal [data-reveal-group] > [data-reveal]:nth-child(2) { transition-delay: 80ms; }
  .js-reveal [data-reveal-group] > [data-reveal]:nth-child(3) { transition-delay: 160ms; }
  .js-reveal [data-reveal-group] > [data-reveal]:nth-child(4) { transition-delay: 240ms; }
  .js-reveal [data-reveal-group] > [data-reveal]:nth-child(5) { transition-delay: 320ms; }
}

/* ---------- AT-Variante (tomedo.at, template-weiterempfehlungsbonus-at.php) ---------- */
/* In AT entfällt der Kombi-Störer, der in DE mit margin-bottom: 80px den Abstand
   zur Rechner-Überschrift vorgibt. Abstand zur Vorteils-Karte wie in DE herstellen. */
.reempf-page--at .reempf-h2--rechner { margin-top: 80px; }
/* Rechenweg-Zeile unter dem Ergebnis (eine Monatsmiete verteilt auf 3 Monate). */
.reempf-page .vr-saving--formula {
  font-size: 14px;
  line-height: 1.6;
  color: #787878;
}