/* ════════════════════════════════════════
   🖼 IMAGE PATHS — CMD+F → IMAGE PATHS
   ════════════════════════════════════════ */
:root {
  /* 🖼 Desktop Hero Background → angebot-header-full-width */
  --img-angebot-header-full-width:  url('img/cococrema-website-und-branding-studio-cta-anfrage.jpg');
  /* 🖼 Mobile Hero Image → angebot-header-mobile-img */
  --img-angebot-header-mobile-img:  url('img/cococrema-website-und-branding-studio-cta-anfrage-mobile.jpg');
  /* 🖼 Final CTA Desktop → final-cta-image-panel */
  --img-final-cta-panel:            url('img/cococrema-website-und-branding-studio-anfrage-senden-image-blick.jpg');
  /* 🖼 Final CTA Mobile → final-cta-image-mobile */
  --img-final-cta-mobile:           url('img/cococrema-website-und-branding-studio-anfrage-senden-image-blick-mobile.jpg');
}

/* ════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════ */
:root {
  /* ── FONT FAMILIES ── */
  --font-display:        'Cormorant Garamond', Georgia, serif;
  --font-body:           'DM Sans', Helvetica, sans-serif;

  /* ── FONT SIZES ── */
  --size-hero:           clamp(3rem, 5vw, 5rem);
  --size-headline:       clamp(1.8rem, 2.8vw, 2.8rem);
  --size-subline:        clamp(1.2rem, 2vw, 1.6rem);
  --size-quote:          clamp(1.1rem, 1.8vw, 1.35rem);
  --size-body:           1.3rem;
  --size-small:          1.1rem;
  --size-eyebrow:        1.0rem;
  --size-label:          0.88rem;
  --size-nav-logo:       1.5rem;
  --size-nav-link:       0.95rem;
  --size-nav-meta:       0.8rem;
  --size-footer:         0.72rem;

  /* ── FONT WEIGHTS ── */
  --weight-light:        300;
  --weight-regular:      400;

  /* ── LINE HEIGHTS ── */
  --leading-tight:       1.08;
  --leading-normal:      1.75;
  --leading-loose:       1.9;

  /* ── LETTER SPACING ── */
  --tracking-wide:       0.22em;
  --tracking-mid:        0.15em;
  --tracking-narrow:     0.08em;

  /* ── COLORS ── */
  --color-accent-light:  #E8D9C4;

  /* ── SPACING ── */
  --space-section:       6rem;
  --space-section-mobile: 3.5rem;
  --space-content-h:     4rem;
  --space-content-h-mobile: 1.5rem;
  --max-width:           1100px;

  /* ── BORDERS ── */
  --border-hairline:     0.5px solid rgba(28,26,22,0.1);
  --border-hairline-mid: 0.5px solid rgba(28,26,22,0.08);

  /* ── ALIASES for main.css compatibility ── */
  --space-h:             var(--space-content-h);
  --space-h-mobile:      var(--space-content-h-mobile);
  --border-line:         var(--border-hairline);
  --border-line-mid:     var(--border-hairline-mid);
}

/* ════════════════════════════════════════
   HERO SECTION — FULL BLEED
   🖼 CMD+F → angebot-header-full-width
   ════════════════════════════════════════ */
.angebot-header-full-width {
  width: 100%;
  aspect-ratio: 16/9;
  background-image: var(--img-angebot-header-full-width);
  background-size: cover;
  background-position: center;
  background-color: var(--color-cream-mid);
  display: flex;
  align-items: stretch;
  position: relative;
}
.angebot-header-full-width::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(245,240,232,0.98) 0%,
    rgba(245,240,232,0.94) 38%,
    rgba(245,240,232,0.35) 58%,
    rgba(245,240,232,0) 100%
  );
  z-index: 1;
}
.angebot-header-text {
  width: 46%;
  min-width: 420px;
  padding: 0 var(--space-content-h) 5rem;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: none;
  animation: fadeUpIn 0.7s 0.1s ease both;
}
.angebot-header-mobile-img { display: none; }

.hero-divider-line {
  width: 40px;
  height: 0.5px;
  background: var(--color-accent);
  margin-bottom: 1.5rem;
}
.hero-headline { margin-bottom: 1.8rem; }
.hero-body-text { margin-bottom: 1.8rem; }
.hero-mobile-layout { display: none; }
.hero-image-mobile { display: none; }

.hero-offer-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 480px;
}
.hero-offer-item {
  padding: 1rem 0;
  border-top: 0.5px solid rgba(28,26,22,0.15);
}
.hero-offer-item:last-child { border-bottom: 0.5px solid rgba(28,26,22,0.15); }
.hero-offer-title {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-light);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--color-ink);
  margin-bottom: 0.25rem;
}
.hero-offer-text {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: var(--weight-light);
  line-height: 1.5;
  color: var(--color-ink-muted);
}

/* ════════════════════════════════════════
   ALL OFFER SECTIONS — SHARED GRID
   ════════════════════════════════════════ */
.offer-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  padding: var(--space-section) var(--space-content-h);
  max-width: var(--max-width);
  margin: 0 auto;
  align-items: start;
}

/* ── SECTION BACKGROUNDS ── */
#section-reset { background: var(--color-cream-soft); }

/* ── LEFT PANEL ── */
.offer-left-panel {}
.offer-eyebrow { margin-bottom: 1.2rem; }
.offer-title { margin-bottom: 0.4rem; }
.offer-price-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: var(--tracking-narrow);
  color: var(--color-ink-faint);
  display: block;
  margin-bottom: 1.5rem;
}
.offer-description { margin-bottom: 1.5rem; }

/* ── BULLET LIST ── */
.offer-bullet-list {
  list-style: none;
  margin-bottom: 2rem;
}
.offer-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: var(--border-hairline-mid);
}
.offer-bullet-item:last-child { border-bottom: none; }
.offer-bullet-dot {
  --dot-color: var(--color-accent);
  flex-shrink: 0;
  width: 4px;
  height: calc(var(--size-body) * 1.7);
  display: flex;
  align-items: center;
  background: none;
}
.offer-bullet-dot::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dot-color);
}
.offer-bullet-text {
  font-size: var(--size-body);
  line-height: 1.7;
  color: var(--color-ink-muted);
}

/* ── RESET STEPS ── */
.reset-offer-steps-list {
  list-style: none;
  margin-bottom: 2rem;
}
.reset-offer-step-item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1rem 0;
  border-bottom: var(--border-hairline-mid);
}
.reset-offer-step-item:last-child { border-bottom: none; }
.reset-offer-step-number {
  font-family: var(--font-display);
  font-size: var(--size-small);
  color: var(--color-accent);
  flex-shrink: 0;
  width: 18px;
  padding-top: 0.15rem;
}
.reset-offer-step-content {}
.reset-offer-step-title {
  font-family: var(--font-body);
  font-size: var(--size-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.25rem;
}
.reset-offer-step-description {
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--color-ink-muted);
}

/* ── PROJECT OVERVIEW LINK ── */
.offer-project-overview-note {
  font-size: var(--size-small);
  color: var(--color-ink-faint);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.reset-schon-gewusst {
  background: rgba(196,168,130,0.07);
  border: 0.5px solid var(--color-cream-deep);
  padding: 1.4rem 1.6rem;
  margin: 1.8rem 0;
}
.reset-schon-gewusst-text {
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-light);
  color: var(--color-ink-muted);
  line-height: 1.7;
  margin: 0;
}

.reset-traffic-footnote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  font-weight: var(--weight-light);
  color: var(--color-ink-faint);
  line-height: 1.65;
  padding: 1.2rem 0;
  border-top: 0.5px solid rgba(28,26,22,0.1);
  margin-bottom: 1.5rem;
}

/* ── RIGHT PANEL ── */
.offer-right-panel {}
.offer-right-section-label {
  margin-bottom: 0.8rem;
  margin-top: 0;
}

/* Arrow list for "Besonders dann wenn" */
.offer-right-arrow-list {
  list-style: none;
  margin-bottom: 2rem;
}
.offer-right-arrow-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0;
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--color-ink-muted);
}
.offer-right-arrow-icon {
  color: var(--color-accent);
  flex-shrink: 0;
  font-size: 0.75rem;
  height: calc(var(--size-body) * 1.65);
  display: flex;
  align-items: center;
}

/* Pricing box */
.offer-pricing-box {
  background: var(--color-cream-soft);
  border: 0.5px solid var(--color-cream-deep);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
}
.offer-pricing-box-label {
  font-family: var(--font-body);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.4rem;
}
.offer-pricing-amount {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  color: var(--color-ink);
  display: block;
}
.offer-pricing-sublabel {
  font-size: var(--size-small);
  color: var(--color-ink-faint);
  display: block;
  margin-top: 0.2rem;
}

/* Or deeper link */
.offer-deeper-block {
  border-top: var(--border-hairline);
  padding-top: 1.4rem;
  margin-top: 1.4rem;
}
.offer-deeper-block-label { margin-bottom: 0.5rem; }

/* Danach box (Reset) */
.reset-offer-danach-box {
  background: rgba(196,168,130,0.07);
  border: 0.5px solid var(--color-cream-deep);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
}
.reset-offer-danach-label {
  font-family: var(--font-body);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.8rem;
}
.reset-offer-danach-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--size-body);
  line-height: 1.8;
  color: var(--color-ink-muted);
}

/* Momentum quote + note */
.momentum-offer-quote { margin-bottom: 1.5rem; }
.momentum-offer-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-ink-faint);
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* ════════════════════════════════════════
   FINAL CTA SECTION — FULL BLEED
   🖼 CMD+F → final-cta-image-panel
   ════════════════════════════════════════ */
.section-final-cta {
  border-top: var(--border-hairline);
  width: 100%;
  aspect-ratio: 16/9;
  background-image: var(--img-final-cta-panel);
  background-size: cover;
  background-position: center;
  background-color: var(--color-cream-mid);
  display: flex;
  align-items: stretch;
  position: relative;
}
.section-final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(245,240,232,0.48) 0%,
    rgba(245,240,232,0.44) 35%,
    rgba(245,240,232,0) 55%,
    rgba(245,240,232,0) 100%
  );
  z-index: 1;
}
.final-cta-text-panel {
  width: 55%;
  min-width: 340px;
  padding: var(--space-section) var(--space-content-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
  background: none;
}
.final-cta-body-text { margin-bottom: 2rem; }
.final-cta-text-panel .button-primary { align-self: flex-start; }
.final-cta-turn-text {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--color-ink);
  margin-bottom: 0.3rem;
}
.final-cta-invite-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--color-accent);
  margin-bottom: 2.5rem;
}
.final-cta-image-panel { display: none; }
.final-cta-image-mobile { display: none; }

/* ════════════════════════════════════════
   SOFT CTA SECTION
   ════════════════════════════════════════ */
.section-soft-cta {
  border-top: var(--border-hairline);
  padding: 4rem var(--space-content-h);
  text-align: center;
  background: var(--color-cream-base);
}
.soft-cta-question {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--color-ink-muted);
  margin-bottom: 0.6rem;
}
.soft-cta-body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--color-ink-muted);
  margin-bottom: 2rem;
  line-height: var(--leading-normal);
}
.soft-cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.soft-cta-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--size-small);
  color: var(--color-ink-faint);
  display: block;
}

/* Mobile CTA duplicates: hidden on desktop */
.offer-mobile-cta { display: none; }

/* ════════════════════════════════════════
   MOBILE — Page-specific
   ════════════════════════════════════════ */
@media (max-width: 1100px) {

  /* Typography */
  .offer-title { font-size: 3.4375rem; }
  .hero-headline { font-size: 4.0625rem; }
  .text-eyebrow { opacity: 0.6; }
  .soft-cta-question { font-size: 1.875rem; }
  .soft-cta-body { font-size: 1rem; }

  /* Hero */
  .hero-desktop-layout { display: none; }
  .angebot-header-full-width {
    background-image: none;
    background-color: var(--color-cream-base);
    flex-direction: column;
    align-items: stretch;
    aspect-ratio: auto;
  }
  .angebot-header-full-width::before { display: none; }
  .angebot-header-mobile-img {
    display: block;
    width: 100%;
    aspect-ratio: 5/4;
    background-image: var(--img-angebot-header-mobile-img);
    background-size: cover;
    background-position: center;
    background-color: var(--color-cream-mid);
  }
  .angebot-header-text {
    width: 100%;
    min-width: unset;
    padding: 2.5rem var(--space-content-h-mobile);
    background: none;
  }
  .hero-mobile-layout { display: none; }

  /* Offer grid → single column */
  .offer-section-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: var(--space-section-mobile) var(--space-content-h-mobile) 1.5rem;
  }

  /* Button relocation: hide originals, show mobile duplicates at section end */
  #btn-review-cta,
  #btn-reset-cta,
  #btn-momentum-cta { display: none; }
  .offer-mobile-cta {
    display: block;
    padding: 0 var(--space-content-h-mobile) var(--space-section-mobile);
  }

  /* Final CTA → dark bg, image first, text centered */
  .section-final-cta {
    background-image: none;
    background-color: var(--color-ink-dark);
    flex-direction: column;
    align-items: stretch;
    aspect-ratio: auto;
  }
  .section-final-cta::before { display: none; }
  .final-cta-body-text { color: rgba(245,240,232,0.72); }
  .final-cta-turn-text { color: var(--color-cream-base); }
  .final-cta-invite-text { color: var(--color-accent); }
  .section-final-cta .button-primary {
    background: var(--color-cream-base);
    color: var(--color-ink-dark);
    align-self: center;
  }
  .section-final-cta .button-primary:hover { opacity: 0.85; }
  .final-cta-image-mobile {
    display: block;
    width: 100%;
    aspect-ratio: 5/4;
    background-image: var(--img-final-cta-mobile);
    background-size: cover;
    background-position: center;
    background-color: var(--color-cream-mid);
    order: 1;
  }
  .final-cta-text-panel {
    width: 100%;
    min-width: unset;
    padding: var(--space-section-mobile) var(--space-content-h-mobile);
    order: 2;
    text-align: center;
    align-items: center;
  }
}

/* ── FAQ more link */
.faq-more-link {
  margin-top: 3rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-ink-faint);
  line-height: 1.7;
}
.faq-more-link a {
  color: var(--color-ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
  transition: color 0.2s;
}
.faq-more-link a:hover { color: var(--color-ink); }

/* ════════════════════════════════════════
   MOMENTUM — head, two-col intro, priced list
   ════════════════════════════════════════ */

/* Wrapper restores the padding/max-width the old .offer-section-grid gave */
.momentum-inner {
  padding: var(--space-section) var(--space-content-h);
  max-width: var(--max-width);
  margin: 0 auto;
}

.momentum-head { margin-bottom: 3rem; }

.momentum-intro-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
}
.momentum-intro-col .offer-description:last-child { margin-bottom: 0; }
.momentum-intro-col .momentum-offer-quote { margin-bottom: 1.2rem; }
.momentum-intro-col .momentum-offer-note { margin-bottom: 0; }

.momentum-list { border-top: var(--border-line); }

.momentum-list-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.5rem;
  padding: 2.2rem 0;
  border-bottom: var(--border-line);
}

.momentum-list-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--color-accent);
  line-height: 1.2;
}

.momentum-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.7rem;
}

.momentum-list-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--color-ink);
  margin: 0;
}

.momentum-list-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-ink);
  white-space: nowrap;
}

.momentum-list-desc {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--color-ink-muted);
  margin: 0 0 0.8rem;
  max-width: 60ch;
}

.momentum-list-includes {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-ink-faint);
  margin: 0;
  max-width: 60ch;
}
.momentum-list-includes span { color: var(--color-ink-muted); font-weight: 500; }

.momentum-list-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-ink-faint);
  margin: 0.7rem 0 0;
}

.momentum-cta { margin-top: 3rem; }

@media (max-width: 900px) {
  .momentum-inner {
    padding: var(--space-section-mobile) var(--space-content-h-mobile);
  }
  .momentum-intro-cols { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; }
  .momentum-list-item { grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.8rem 0; }
  .momentum-list-num { font-size: 1.2rem; }
  .momentum-list-head { flex-direction: column; gap: 0.2rem; margin-bottom: 0.5rem; }
  .momentum-list-title { font-size: 1.35rem; }
  .momentum-list-price { font-size: 1.2rem; color: var(--color-accent); }
}