/* ════════════════════════════════════════
   ANGEBOTE NEU — ADDITIONAL CSS
   Loaded after main.css + angebote.css (en/angebote-neu.php).
   Holds only what is new on this page — offer grid, bullets,
   pricing box, momentum list etc. still come from angebote.css.
   ════════════════════════════════════════ */

/* ── Anchor targets: stay clear of the sticky nav ── */
[id^="section-"],
.momentum-list-item[id] { scroll-margin-top: 6rem; }

/* ── Section backgrounds: cream-base / cream-soft alternate ── */
.packages-head,
#section-kickstart,
#section-seo,
#section-momentum { background: var(--color-cream-soft); }
#section-reset,
#section-foundation-check,
#section-approach { background: var(--color-cream-base); }

/* Pricing box sits on cream-soft here → lift it to cream-base */
#section-kickstart .offer-pricing-box { background: var(--color-cream-base); }

/* ── Inline links take the size of the text around them ── */
.all-offer-sections p .link-underline-accent,
.all-offer-sections li .link-underline-accent { font-size: inherit; }

/* ── Bold lead-ins inside running text ── */
.offer-bullet-text strong,
.seo-more-item strong {
  font-weight: var(--weight-regular);
  color: var(--color-ink);
}

/* ── Labels used as headings: no browser bold ── */
h3.text-label,
h4.text-label { font-weight: var(--weight-light); }

/* ════════════════════════════════════════
   SHARED — card label (line + uppercase accent)
   used by the approach cards and the Reset / From Scratch cards
   ════════════════════════════════════════ */
.card-label {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}
.card-label::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 0.5px;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* ════════════════════════════════════════
   APPROACH — Attraction / Confidence & Trust
   ════════════════════════════════════════ */
.approach-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-section) var(--space-content-h);
}
.approach-head {
  max-width: 720px;
  margin-bottom: 3.5rem;
}
.approach-headline { margin-bottom: 1.6rem; }

.approach-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: stretch;
  margin-bottom: 4rem;
}
.approach-card {
  background: var(--color-cream-soft);
  padding: 3rem 2.8rem 3.2rem;
}
.approach-card-question {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-light);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.3;
  color: var(--color-ink);
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
  border-bottom: var(--border-line);
}
.approach-card-text {
  font-size: var(--size-small);
  line-height: 1.75;
  color: var(--color-ink-muted);
}
.approach-connector {
  align-self: center;
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-accent);
}

.approach-close {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: start;
}
.approach-more {
  border-left: var(--border-line);
  padding-left: 2.5rem;
}
.approach-more-question {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--size-quote);
  line-height: 1.5;
  color: var(--color-ink);
  margin-bottom: 0.8rem;
}
.approach-more-link {
  font-size: var(--size-small);
  line-height: 1.7;
}

/* ════════════════════════════════════════
   PACKAGES — section head + jump links
   ════════════════════════════════════════ */
.packages-head {
  padding: 5rem var(--space-content-h) 4.5rem;
  text-align: center;
}
.packages-eyebrow { justify-content: center; margin-bottom: 1.2rem; }
/* Centred eyebrow → mirror the line on the right */
.packages-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 0.5px;
  background: var(--color-accent);
  flex-shrink: 0;
}
.packages-headline { margin-bottom: 2.4rem; }

.packages-nav-list {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 0.6rem;
}
.packages-nav-item {
  display: flex;
  align-items: center;
}
.packages-nav-item + .packages-nav-item::before {
  content: '·';
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-accent);
  margin: 0 1.1rem;
}
.packages-nav-link {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-light);
  font-size: 1.35rem;
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color 0.2s;
}
@media (hover: hover) { .packages-nav-link:hover { color: var(--color-accent); } }

/* ════════════════════════════════════════
   OFFER PANELS — small additions
   ════════════════════════════════════════ */
.offer-lead {
  color: var(--color-ink);
  margin-bottom: 1.5rem;
}
.offer-block-label { margin: 2.2rem 0 0.9rem; }

/* "What it gives you" — sits in .reset-offer-danach-box */
.offer-gives-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2vw, 1.8rem);
  line-height: 1.3;
  color: var(--color-ink);
}

/* Second row inside .offer-pricing-box (timeframe) */
.offer-pricing-row {
  border-top: var(--border-line);
  margin-top: 1rem;
  padding-top: 1rem;
}
.offer-pricing-box .offer-pricing-sublabel { margin-top: 0.3rem; }

/* ════════════════════════════════════════
   ADD-ON BOX — Visual Direction Starter Kit, Freebie
   ════════════════════════════════════════ */
.offer-addon {
  background: var(--color-cream-base);
  border: 0.5px solid var(--color-cream-deep);
  padding: 1.2rem 1.5rem 1.3rem;
}
.offer-addon-tag {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.35rem;
}
.offer-addon-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.offer-addon-name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--color-ink);
}
.offer-addon-price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-ink);
  white-space: nowrap;
}
.offer-addon .momentum-list-desc { margin-top: 0.7rem; }
.momentum-list-body .offer-addon {
  margin-top: 1.5rem;
  max-width: 64ch;
}

/* ════════════════════════════════════════
   RESET OR FROM SCRATCH — full-width layout
   ════════════════════════════════════════ */
.offer-full-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-section) var(--space-content-h);
}
.reset-intro {
  max-width: 760px;
  margin-bottom: 3rem;
}
.reset-intro .offer-description { margin-bottom: 0; }

/* ── Two starting points ── */
.reset-start-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.8rem;
}
.reset-start-card {
  background: var(--color-cream-soft);
  padding: 2.8rem 2.6rem 3rem;
}
.reset-start-title {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(1.35rem, 1.9vw, 1.65rem);
  line-height: 1.3;
  color: var(--color-ink);
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: var(--border-line);
}
.reset-start-text {
  font-size: var(--size-small);
  line-height: 1.75;
  color: var(--color-ink-muted);
  margin-bottom: 1rem;
}
.reset-start-text:last-child { margin-bottom: 0; }

/* ── What I do: Foundation + Build/Rebuild ── */
.reset-process { margin-top: 4.5rem; }
.reset-block-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(1.6rem, 2.3vw, 2.2rem);
  line-height: 1.15;
  color: var(--color-ink);
  margin-bottom: 0.8rem;
}
.reset-process-intro {
  max-width: 720px;
  margin-bottom: 2.5rem;
}

.reset-stages {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.reset-stages-plus {
  align-self: center;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--color-accent);
}
.reset-stage-card {
  background: var(--color-cream-soft);
  padding: 2.6rem 2.4rem 2.4rem;
  display: flex;
  flex-direction: column;
}
.reset-stage-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.3rem;
  border-bottom: var(--border-line);
}
.reset-stage-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--color-accent);
}
.reset-stage-title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--color-ink);
}
.reset-stage-price {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--color-ink);
  white-space: nowrap;
}
.reset-stage-intro {
  font-size: var(--size-small);
  line-height: 1.75;
  color: var(--color-ink-muted);
  margin-bottom: 1.4rem;
}
.reset-stage-card .offer-block-label { margin-top: 0; }
.reset-stage-card .offer-bullet-list { margin-bottom: 1.6rem; }
.reset-stage-card .offer-bullet-item { padding: 0.65rem 0; }
.reset-stage-card .offer-bullet-text {
  font-size: var(--size-small);
  line-height: 1.65;
}
.reset-stage-card .offer-bullet-dot { height: calc(var(--size-small) * 1.65); }

.reset-stages + .offer-project-overview-note { margin: 1.8rem 0 0; }

.reset-stage-foot { margin-top: auto; }
.reset-stage-foot .offer-addon { margin-bottom: 1.2rem; }
.reset-stage-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-ink-muted);
}

/* ── What you leave with + investment ── */
.reset-outcome {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 4.5rem;
}
.reset-outcome .reset-offer-danach-box {
  margin-bottom: 0;
  padding: 2.2rem 2.4rem;
}
h4.reset-offer-danach-label { font-weight: var(--weight-light); }
.reset-outcome-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 1.9vw, 1.6rem);
  line-height: 1.45;
  color: var(--color-ink);
  margin-bottom: 1.2rem;
}
.reset-outcome .reset-offer-danach-text + .reset-offer-danach-text { margin-top: 1rem; }

/* ════════════════════════════════════════
   SEO, GEO & FUNNELS
   ════════════════════════════════════════ */
.seo-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-section) var(--space-content-h);
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 5rem;
  align-items: start;
}
.seo-headline { margin-bottom: 1.6rem; }
.seo-lead {
  color: var(--color-ink);
  margin-bottom: 1rem;
}
.seo-aim {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--color-ink-muted);
  border-top: var(--border-line);
  padding-top: 1.4rem;
}
.seo-more {
  border-left: var(--border-line);
  padding-left: 3rem;
  padding-top: 0.4rem;
}
.seo-more-label {
  font-weight: var(--weight-light);
  margin-bottom: 0.4rem;
}
.seo-more-item {
  font-size: var(--size-small);
  line-height: 1.75;
  color: var(--color-ink-muted);
  padding: 1.1rem 0;
  border-bottom: var(--border-line-mid);
}
.seo-more-item:last-child { border-bottom: none; }

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

  [id^="section-"],
  .momentum-list-item[id] { scroll-margin-top: 4.5rem; }

  /* CTA relocation: desktop buttons hide, .offer-mobile-cta shows */
  .offer-desktop-cta { display: none; }
  #section-reset .offer-title { font-size: 2.8rem; }
  .all-offer-sections .button-primary {
    line-height: 1.35;
    text-align: center;
  }

  /* Approach */
  .approach-inner { padding: var(--space-section-mobile) var(--space-content-h-mobile); }
  .approach-head { margin-bottom: 2.5rem; }
  .approach-headline { font-size: 2.4rem; }
  .approach-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-bottom: 3rem;
  }
  .approach-card { padding: 2.2rem 1.6rem 2.4rem; }
  .approach-connector {
    justify-self: center;
    transform: rotate(90deg);
  }
  .approach-close {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .approach-more {
    border-left: none;
    border-top: var(--border-line);
    padding: 1.8rem 0 0;
  }

  /* Packages head → stacked jump links */
  .packages-head { padding: var(--space-section-mobile) var(--space-content-h-mobile); }
  .packages-headline { font-size: 4.0625rem; }
  .packages-nav-list {
    flex-direction: column;
    max-width: 420px;
    margin: 0 auto;
  }
  .packages-nav-item {
    justify-content: center;
    padding: 0.85rem 0;
    border-top: 0.5px solid rgba(28,26,22,0.15);
  }
  .packages-nav-item:last-child { border-bottom: 0.5px solid rgba(28,26,22,0.15); }
  .packages-nav-item + .packages-nav-item::before { display: none; }

  /* Reset or From Scratch */
  .offer-full-inner { padding: var(--space-section-mobile) var(--space-content-h-mobile); }
  .reset-start-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .reset-start-card { padding: 2.2rem 1.6rem 2.4rem; }
  .reset-process { margin-top: 3.5rem; }
  .reset-stages {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .reset-stages-plus { justify-self: center; }
  .reset-stage-card { padding: 2.2rem 1.6rem; }
  .reset-stage-head { flex-wrap: wrap; row-gap: 0.2rem; }
  .reset-stage-price {
    flex-basis: 100%;
    margin-left: 0;
    font-size: 1.2rem;
    color: var(--color-accent);
  }
  .reset-outcome {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3.5rem;
  }
  .reset-outcome .reset-offer-danach-box { padding: 1.8rem 1.6rem; }

  /* SEO */
  .seo-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: var(--space-section-mobile) var(--space-content-h-mobile);
  }
  .seo-headline { font-size: 2.4rem; }
  .seo-more {
    border-left: none;
    border-top: var(--border-line);
    padding: 2rem 0 0;
  }
}

@media (max-width: 600px) {
  .offer-addon { padding: 1.1rem 1.2rem 1.2rem; }
  .offer-addon-head {
    flex-direction: column;
    gap: 0.1rem;
  }
  .offer-addon-price {
    font-size: 1.15rem;
    color: var(--color-accent);
  }
}

/* Header subline under the headline */
.angebot-header-text .hero-headline { margin-bottom: 1rem; }
.hero-subline-place {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-light);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.35;
  color: var(--color-ink-muted);
  margin: 0 0 1.8rem;
}

/* Price / duration next to each offer name in the header list */
.hero-offer-meta { font-weight: var(--weight-light); color: var(--color-ink-muted); white-space: nowrap; }

/* ════════════════════════════════════════
   METHOD — Clarity / Resonance / Trust (short, centred version)
   ════════════════════════════════════════ */
.section-approach { --method-ink: #9A7B55; } /* darker caramel, readable on cream */
.method-head { max-width: 1040px; margin: 0 auto 5rem; text-align: center; }
.method-head .text-eyebrow { justify-content: center; color: var(--method-ink); }
.method-head .text-eyebrow::before,
.method-head .text-eyebrow::after { background: var(--method-ink); }
.method-head .text-eyebrow::after { content: ''; display: inline-block; width: 24px; height: 0.5px; flex-shrink: 0; }
.method-headline { margin-bottom: 2.2rem; }
.method-headline em { font-style: italic; color: var(--method-ink); }
.method-sub {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: 1.1rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-ink-muted);
}
.method-sub em { font-family: var(--font-body); color: var(--color-ink); }

.method-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  max-width: 1080px;
  margin: 0 auto 5.5rem;
  text-align: center;
}
.method-num {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: var(--method-ink);
  font-variant-numeric: lining-nums;
  padding-bottom: 1rem;
  margin-bottom: 1.8rem;
  position: relative;
}
.method-num::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 2.6rem; height: 1px;
  transform: translateX(-50%);
  background: var(--method-ink);
  opacity: 0.7;
}
.method-label {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(1.8rem, 2.4vw, 2.2rem);
  line-height: 1.2;
  color: var(--color-ink);
}
.method-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-light);
  font-size: clamp(1.8rem, 2.4vw, 2.2rem);
  line-height: 1.2;
  color: var(--method-ink);
  margin: 0.8rem 0 0;
}

.method-close { max-width: 1080px; margin: 0 auto; }
.method-close-text p {
  font-size: var(--size-small);
  line-height: 1.8;
  color: var(--color-ink-muted);
}
.method-close-text p + p { margin-top: 1.6rem; }
.method-more { margin-top: 4rem; text-align: center; }
.method-more-question {
  font-family: var(--font-body);
  font-size: var(--size-small);
  line-height: 1.6;
  color: var(--color-ink);
  margin-bottom: 0.8rem;
}
.method-more-link { font-size: var(--size-small); line-height: 1.7; color: var(--method-ink); text-decoration-color: var(--method-ink); }

@media (max-width: 1100px) {
  .method-head { margin-bottom: 3.5rem; }
  .method-headline { font-size: 2.2rem; }
  .method-sub br { display: none; }
  .method-cols { grid-template-columns: 1fr; gap: 3rem; margin-bottom: 3.5rem; }
  .method-more { margin-top: 3rem; }
}

/* Method — big title replaces eyebrow + headline */
/* same size as "The services" headline (text-headline-display default) */
.method-title { margin-bottom: 2.4rem; }
@media (max-width: 1100px) {
  .method-title { font-size: 4.0625rem; margin-bottom: 1.8rem; }
}

/* ── Compass section ── */
.cmp { --cmp-ink: #9A7B55; }
.cmp-inner { max-width: var(--max-width); margin: 0 auto; padding: var(--space-section) var(--space-content-h); }
.cmp-rule { display: block; width: 3rem; height: 1px; background: var(--cmp-ink); margin-bottom: 2rem; }
.cmp-head { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.cmp-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(4rem, 6vw, 5.6rem); line-height: 1; text-transform: uppercase; color: var(--color-ink); margin: 0 0 1.2rem; }
/* Kleine Marken-Eyebrow im Paket-Titel („Cococrema“ über „Website“) */
.cmp-brand { display: block; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.18em; line-height: 1.4; color: var(--cmp-ink); margin-bottom: 0.8rem; }
.cmp-price, .cmp-foot-price { font-family: var(--font-display); font-size: 2.2rem; color: var(--cmp-ink); }
.cmp-eyebrow { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cmp-ink); margin: 0.4rem 0 1.4rem; }
.cmp-gives { font-family: var(--font-display); font-style: italic; font-size: clamp(2.4rem, 3.6vw, 3.3rem); line-height: 1.15; color: var(--color-ink); margin: 0 0 1.6rem; }
.cmp-lead { font-family: var(--font-body); font-size: var(--size-body); line-height: 1.6; color: var(--color-ink); margin: 0; max-width: 30em; }
.cmp-credit { font-family: var(--font-body); font-size: var(--size-body); line-height: 1.65; margin: 3.5rem 0 0; padding-bottom: 3.5rem; border-bottom: 1px solid var(--cmp-ink); }
.cmp-body { display: grid; grid-template-columns: 1.7fr 1fr; gap: 5rem; padding: 4rem 0 3.5rem; border-bottom: 1px solid var(--cmp-ink); }
.cmp-h { font-family: var(--font-display); font-weight: 400; font-size: 2.8rem; line-height: 1.1; color: var(--color-ink); margin: 0 0 1.8rem; text-transform: none; letter-spacing: 0; }
.cmp-text { font-family: var(--font-body); font-size: var(--size-body); line-height: 1.7; max-width: 32em; margin: 0 0 1.5rem; }
.cmp-h--gap { margin-top: 3.5rem; }
.cmp-receive { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 3rem; }
.cmp-receive li { display: flex; flex-direction: column; }
.cmp-num { font-family: var(--font-body); font-size: 0.95rem; letter-spacing: 0.15em; color: var(--cmp-ink); }
.cmp-num::after { content: ''; display: block; width: 1.6rem; height: 1px; background: var(--cmp-ink); margin: 1rem 0 1.3rem; }
.cmp-receive strong { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.2; color: var(--color-ink); margin-bottom: 1rem; }
.cmp-receive li > span:last-child { font-family: var(--font-body); font-size: var(--size-body); line-height: 1.6; }
.cmp-for { list-style: none; padding: 0; margin: 0; }
.cmp-for li { position: relative; padding-left: 2.6rem; font-family: var(--font-body); font-size: var(--size-body); line-height: 1.6; margin-bottom: 2rem; }
.cmp-for li::before { content: '→'; position: absolute; left: 0; top: 0; color: var(--cmp-ink); }
.cmp-for--check li::before { content: ''; left: 0.35rem; top: 0.2em; width: 0.5rem; height: 0.95rem; border-right: 1.5px solid var(--cmp-ink); border-bottom: 1.5px solid var(--cmp-ink); transform: rotate(45deg); }
.cmp-for-smallprint { margin: 0.4rem 0 0; font-family: var(--font-body); font-weight: var(--weight-light); font-size: 0.85rem; line-height: 1.55; color: var(--color-ink-muted); }
.cmp-foot { display: flex; align-items: center; gap: 2.5rem; padding-top: 2.5rem; }
.cmp-foot-price { font-size: 1.7rem; padding-left: 2.5rem; border-left: 1px solid var(--cmp-ink); line-height: 1.6; }

@media (max-width: 1100px) {
  .cmp-inner { padding: 4.5rem 1.5rem; }
  .cmp-head, .cmp-body { grid-template-columns: 1fr; gap: 3rem; }
  .cmp-title { font-size: 3.6rem; }
  .cmp-price { font-size: 1.8rem; }
  .cmp-gives { font-size: 2.3rem; }
  .cmp-gives br, .cmp-receive strong br { display: none; }
  .cmp-credit { margin-top: 2.5rem; padding-bottom: 2.5rem; }
  .cmp-body { padding: 3rem 0; gap: 3.5rem; }
  .cmp-h { font-size: 2.3rem; margin-bottom: 1.4rem; }
  .cmp-receive { grid-template-columns: 1fr; gap: 0; }
  .cmp-receive li { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding: 1.6rem 0; border-top: 1px solid rgba(154,123,85,.3); }
  .cmp-receive li:first-child { border-top: 0; padding-top: 0.4rem; }
  .cmp-num { grid-row: span 2; padding-top: 0.4rem; }
  .cmp-num::after { display: none; }
  .cmp-receive strong { font-size: 1.5rem; margin-bottom: 0.5rem; }
  .cmp-for li { padding-left: 2.2rem; margin-bottom: 1.4rem; }
  .cmp-foot { flex-direction: column; align-items: stretch; gap: 1rem; padding-top: 2.5rem; text-align: center; }
  .cmp-foot-price { border-left: 0; padding-left: 0; font-size: 1.5rem; }
}

/* ── Body text = same size as EN home (var(--size-body)) ── */
.hero-offer-text,
.method-sub,
.method-more-question,
.method-more-link { font-size: var(--size-body); }
.hero-offer-title { font-size: 1.5rem; }
.method-hiw-link { display: inline-block; padding: 0.7rem 1.4rem; border: 0.5px solid rgba(28,26,22,0.45); font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: var(--color-ink); text-decoration: none; transition: background 0.2s, border-color 0.2s; }
@media (hover: hover) { .method-hiw-link:hover { background: var(--color-cream-mid); border-color: var(--color-ink); } }
.hero-offer-aside { display: block; margin-top: 0.3rem; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: #9A7B55; }

/* ── Website section (reuses .cmp-*) ── */
.cmp-stage + .cmp-stage { margin-top: 3.5rem; }
.cmp-stage .cmp-h { margin-top: 0; }
.cmp-tags { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.5; color: var(--cmp-ink); max-width: 30em; margin: 0 0 1.5rem; padding: 1.2rem 0; border-top: 1px solid rgba(154,123,85,.3); border-bottom: 1px solid rgba(154,123,85,.3); }
.cmp-get { display: grid; grid-template-columns: 1fr 1.7fr; gap: 5rem; padding: 4rem 0 3.5rem; border-bottom: 1px solid var(--cmp-ink); }
.cmp-get .cmp-h { margin: 0; }
.cmp-get-list { list-style: none; padding: 0; margin: 0; }
.cmp-get-list li { position: relative; padding: 1.1rem 0 1.1rem 3.4rem; border-top: 1px solid rgba(154,123,85,.3); font-family: var(--font-body); font-style: italic; font-size: var(--size-small); line-height: 1.55; color: var(--color-ink-muted); }
.cmp-get-list li:first-child { border-top: 0; padding-top: 0.3rem; }
.cmp-get-list li:last-child { padding-bottom: 0; }
.cmp-get-list li::before { content: ''; position: absolute; left: 0; top: 1.15rem; width: 1.7rem; height: 1.7rem; border: 1px solid var(--cmp-ink); border-radius: 50%; }
.cmp-get-list li::after { content: ''; position: absolute; left: 0.62rem; top: 1.45rem; width: 0.4rem; height: 0.75rem; border: solid var(--cmp-ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.cmp-get-list li:first-child::before { top: 0.35rem; }
.cmp-get-list li:first-child::after { top: 0.65rem; }
.cmp-get-list strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.25; color: var(--color-ink); margin-bottom: 0.2rem; font-style: normal; }
.cmp-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; padding: 3.5rem 0; border-bottom: 1px solid var(--cmp-ink); }
.cmp-addon + .cmp-addon { margin-top: 1.8rem; }
.cmp-addon-title { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.25; color: var(--color-ink); margin: 0 0 0.5rem; }
.cmp-addon-title span { color: var(--cmp-ink); }
.cmp-addon .cmp-text { margin: 0; }
.cmp-excl { font-family: var(--font-body); font-size: var(--size-small); line-height: 1.6; color: var(--color-ink-muted); margin: 0; padding: 1.8rem 0; border-bottom: 1px solid var(--cmp-ink); }
.cmp-excl span { color: var(--cmp-ink); }
@media (max-width: 1100px) {
  .cmp-extras { grid-template-columns: 1fr; gap: 3rem; padding: 3rem 0; }
  .cmp-get { grid-template-columns: 1fr; gap: 1.6rem; padding: 3rem 0; }
  .cmp-get-list li { padding-left: 2.8rem; }
  .cmp-get-list strong { font-size: 1.5rem; }
  .cmp-tags { font-size: 1.3rem; }
  .cmp-addon-title { font-size: 1.5rem; }
}

/* ── Kickstart section (reuses .cmp-*) ── */
.cmp-lead strong, .cmp-for strong { font-weight: 500; }
.cmp-lead--more { margin-top: 1.2rem; }
.cmp-extra .cmp-gives { margin-bottom: 1rem; }

/* ── Momentum section (reuses .cmp-*) ── */
.cmp--mom .cmp-price { display: block; font-size: 1.7rem; font-style: italic; line-height: 1.3; max-width: 14em; }
.mom-list { margin-top: 3.5rem; border-top: 1px solid var(--cmp-ink); border-bottom: 1px solid var(--cmp-ink); }
.mom-item { display: grid; grid-template-columns: 5rem 1fr; gap: 2rem; padding: 3rem 0; }
.mom-item + .mom-item { border-top: 1px solid rgba(154,123,85,.3); }
.mom-item > .cmp-num { padding-top: 0.9rem; }
.mom-body { max-width: 52rem; }
.mom-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-bottom: 1.2rem; }
.mom-title { font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; line-height: 1.15; color: var(--color-ink); margin: 0; text-transform: none; letter-spacing: 0; }
.mom-price { font-family: var(--font-display); font-size: 1.9rem; color: var(--cmp-ink); white-space: nowrap; }
.mom-body .cmp-text { max-width: none; }
.mom-inc { font-family: var(--font-body); font-size: var(--size-small); font-style: italic; line-height: 1.7; color: var(--color-ink-muted); margin: 0; }
.mom-inc span { color: var(--cmp-ink); }
.mom-note { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.45; color: var(--cmp-ink); margin: 1.5rem 0 0; }
.mom-addon { margin-top: 2.5rem; padding: 2rem 2.2rem; border: 1px solid rgba(154,123,85,.35); }
.mom-addon .cmp-eyebrow { margin-top: 0; margin-bottom: 0.8rem; }
.mom-addon .mom-title { font-size: 2rem; }
@media (max-width: 1100px) {
  .cmp--mom .cmp-price { font-size: 1.45rem; }
  .mom-item { grid-template-columns: 1fr; gap: 0.6rem; padding: 2.5rem 0; }
  .mom-item > .cmp-num { padding-top: 0; }
  .mom-item > .cmp-num::after { margin-bottom: 0.4rem; }
  .mom-head { flex-direction: column; gap: 0.3rem; }
  .mom-title { font-size: 2rem; }
  .mom-price { font-size: 1.6rem; }
  .mom-addon { padding: 1.6rem 1.4rem; }
  .mom-addon .mom-title { font-size: 1.7rem; }
  .mom-note { font-size: 1.3rem; }
}

/* ── SEO, GEO & customer journey section (reuses .cmp-*) ── */
.cmp--seo .cmp-title { font-size: clamp(3rem, 4.2vw, 4rem); line-height: 1.05; }
.cmp--seo .cmp-side .cmp-h { margin-top: 2.4rem; }
.cmp--seo .cmp-extras { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 1100px) {
  .cmp--seo .cmp-title { font-size: 2.8rem; }
  .cmp--seo .cmp-side .cmp-h { margin-top: 0; }
}
.cmp--seo .cmp-head { grid-template-columns: 1fr; }
.cmp--seo .cmp-title { max-width: 16em; margin-bottom: 1.8rem; }

/* ── Hero: let it grow with its text instead of a fixed 16:9 crop ── */
@media (min-width: 1101px) {
  .angebot-header-full-width { aspect-ratio: auto; min-height: calc(100vw * 9 / 16); }
  .angebot-header-text { padding-top: 7rem; padding-bottom: 6rem; }
}

/* ── Compass: questions, included checklist, guide, credit box ── */
.cmp-q-label { margin: 3rem 0 1.4rem; }
.cmp-questions { list-style: none; padding: 0; margin: 0; }
.cmp-questions li { font-family: var(--font-display); font-style: italic; font-size: 1.9rem; line-height: 1.3; color: var(--color-ink); padding: 1.3rem 0 1.3rem 1.6rem; border-left: 1px solid var(--cmp-ink); max-width: 26em; }
.cmp-questions li + li { margin-top: 1.2rem; }
.cmp-questions--bullets { border-left: 1px solid var(--cmp-ink); padding: 1.3rem 0 1.3rem 1.6rem; }
.cmp-questions.cmp-questions--bullets li { border-left: 0; padding: 0 0 0 1.1em; position: relative; }
.cmp-questions--bullets li::before { content: "•"; position: absolute; left: 0; color: var(--cmp-ink); font-style: normal; }
.cmp-questions.cmp-questions--bullets li + li { margin-top: 0.7rem; }
.cmp-questions.cmp-questions--small li { font-size: 1.5rem; line-height: 1.45; opacity: .8; }
.cmp-questions.cmp-questions--small li + li { margin-top: 0.4rem; }
.cmp-incl { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5rem; padding: 4rem 0; }
.cmp-check, .cmp-dots { list-style: none; padding: 0; margin: 0; }
.cmp-check li, .cmp-dots li { position: relative; font-family: var(--font-body); font-size: var(--size-body); line-height: 1.6; }
.cmp-check li { padding: 1.1rem 0 1.1rem 2.6rem; border-bottom: 1px solid rgba(154,123,85,.25); }
.cmp-check li:first-child { padding-top: 0; }
.cmp-check li::before { content: '✓'; position: absolute; left: 0; color: var(--cmp-ink); }
.cmp-guide { background: var(--color-cream-soft); padding: 3rem 3rem 2.6rem; align-self: start; }
.cmp-guide .cmp-eyebrow { margin-top: 0; margin-bottom: 0.8rem; }
.cmp-guide .cmp-h { font-size: 2.2rem; }
.cmp-guide-list { margin: 0; padding-left: 1.6rem; font-family: var(--font-body); font-size: var(--size-small); line-height: 1.6; }
.cmp-guide-list li { padding-left: 0.3rem; }
.cmp-guide-list li + li { margin-top: 0.7rem; }
.cmp-guide-list li::marker { color: var(--cmp-ink); }
.cmp-dots li { padding-left: 1.6rem; }
.cmp-dots li + li { margin-top: 0.9rem; }
.cmp-dots li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 6px; height: 6px; border-radius: 50%; background: var(--cmp-ink); }
.cmp-creditbox { display: flex; align-items: center; gap: 3rem; margin: 3.5rem 0 1rem; padding: 3rem 3.5rem; border: 1px solid var(--cmp-ink); }
.cmp-creditbox-price { font-family: var(--font-display); font-size: clamp(3.5rem, 5vw, 4.8rem); line-height: 1; color: var(--cmp-ink); padding-right: 3rem; border-right: 1px solid rgba(154,123,85,.4); white-space: nowrap; flex-shrink: 0; }
.cmp-creditbox-text { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; line-height: 1.4; margin: 0; max-width: 28em; }
@media (max-width: 1100px) {
  .cmp-questions li { font-size: 1.55rem; }
  .cmp-incl { grid-template-columns: 1fr; gap: 3rem; padding: 3rem 0; }
  .cmp-guide { padding: 2.2rem 1.6rem; }
  .cmp-guide .cmp-h { font-size: 1.9rem; }
  .cmp-creditbox { flex-direction: column; align-items: flex-start; gap: 1.4rem; padding: 2.2rem 1.6rem; }
  .cmp-creditbox-price { padding-right: 0; border-right: 0; }
  .cmp-creditbox-text { font-size: 1.5rem; }
}

/* ── Mobile "you are here" bar ── */
.here-bar { display: none; }
@media (max-width: 1100px) {
  .here-bar {
    display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 140;
    background: var(--color-cream-base); border-bottom: 1px solid rgba(154,123,85,.35);
    transform: translateY(-120%); opacity: 0; pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
  }
  .here-bar.is-visible { transform: none; opacity: 1; pointer-events: auto; }
  .here-toggle {
    display: flex; align-items: center; gap: 0.9rem; width: 100%; height: 44px;
    padding: 0 1.5rem; background: none; border: 0; cursor: pointer; text-align: left; color: var(--color-ink);
  }
  .here-label { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: #9A7B55; white-space: nowrap; }
  .here-current { flex: 1; font-family: var(--font-display); font-style: italic; font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .15s ease; }
  .here-current.is-fading { opacity: 0; }
  .here-arrow { color: #9A7B55; transition: transform .25s ease; }
  .here-bar.is-open .here-arrow { transform: rotate(180deg); }
  .here-menu {
    display: grid; max-height: 0; overflow: hidden; padding: 0 1.5rem;
    transition: max-height .3s ease, padding .3s ease;
  }
  .here-bar.is-open .here-menu { max-height: 30rem; padding-bottom: 0.8rem; }
  .here-menu a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: 0.85rem 0 0.85rem 1rem; border-top: 1px solid rgba(154,123,85,.2);
    font-family: var(--font-display); font-size: 1.35rem; color: var(--color-ink); text-decoration: none;
    border-left: 2px solid transparent;
  }
  .here-menu a span { font-family: var(--font-body); font-size: 0.9rem; color: var(--color-ink-muted); }
  .here-menu a.is-active { color: #9A7B55; border-left-color: #9A7B55; }
}

/* ── "You are here" bar: more presence (deep beige, taller, darker accents) ── */
@media (max-width: 1100px) {
  .here-bar { background: var(--color-cream-deep); border-bottom: 1px solid rgba(110,85,54,.35); box-shadow: 0 6px 14px -10px rgba(28,26,22,.35); }
  .here-toggle { height: 58px; padding: 0 1.5rem; }
  .here-label { color: #6E5536; font-weight: 500; }
  .here-current { color: var(--color-ink); font-size: 1.3rem; }
  .here-arrow { color: var(--color-ink); font-size: 1.1rem; }
  .here-menu a { border-top-color: rgba(110,85,54,.25); }
  .here-menu a span { color: var(--color-ink-dark); }
  .here-menu a.is-active { color: #6E5536; border-left-color: #6E5536; }
  .here-bar.is-open .here-menu { padding-bottom: 1.2rem; }
}

/* ── "You are here" bar: shared baseline + bigger arrow ── */
@media (max-width: 1100px) {
  .here-toggle { height: auto; min-height: 58px; padding: 1.05rem 1.5rem; align-items: baseline; }
  .here-label { line-height: 1; }
  .here-current { line-height: 1.2; }
  .here-arrow { align-self: center; font-size: 1.7rem; line-height: 1; color: var(--color-ink); }
}

/* Hero offer list → jump links */
a.hero-offer-item { display: block; color: inherit; text-decoration: none; }
@media (hover: hover) { a.hero-offer-item:hover .hero-offer-title { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.5px; } }
.all-offer-sections > section[id] { scroll-margin-top: 6rem; }
@media (max-width: 1100px) {
  .all-offer-sections > section[id] { scroll-margin-top: calc(4.5rem + 58px); }
}

/* FAQ hint under Website / Kickstart enquiry */
.cmp-faqnote { margin: 2.2rem 0 0; padding-top: 1.4rem; border-top: 0.5px solid rgba(28,26,22,0.15); font-family: var(--font-body); font-weight: var(--weight-light); font-size: var(--size-small); line-height: 1.6; color: var(--color-ink-muted); }
.cmp-faqnote-q { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--color-ink); margin-right: 0.35rem; }
@media (max-width: 1100px) { .cmp-faqnote { text-align: center; } .cmp-faqnote-q { display: block; margin: 0 0 0.3rem; } }

/* ── Objections: compact section between Kickstart and Compass ── */
#section-alternatives { background: var(--color-cream-mid); }
#section-alternatives .cmp-inner { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.cmp-alt-head .cmp-rule { margin-bottom: 1.4rem; }
.cmp-alt-intro { font-family: var(--font-display); font-style: italic; font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1.25; color: var(--color-ink); margin: 0; max-width: 26em; }
.cmp-alt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem; margin-top: 2.5rem; border-top: 1px solid var(--cmp-ink); }
.cmp-alt-item { padding: 2rem 0; border-bottom: 1px solid rgba(154,123,85,.3); }
.cmp-alt-h { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.25; color: var(--color-ink); margin: 0 0 0.9rem; }
.cmp-alt-num { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.15em; color: var(--cmp-ink); margin-right: 0.8rem; vertical-align: 0.25em; }
.cmp-alt-text, .cmp-alt-add { font-family: var(--font-body); font-size: var(--size-small); line-height: 1.6; color: var(--color-ink); margin: 0; }
.cmp-alt-add { margin-top: 0.8rem; padding-left: 1rem; border-left: 2px solid var(--color-accent); }
.cmp-alt-maths { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.4; color: var(--cmp-ink); margin: 1.8rem 0 0; }
.cmp-alt-close { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: baseline; margin-top: 1.8rem; }
.cmp-alt-q { font-family: var(--font-display); font-style: italic; font-size: 2rem; line-height: 1.2; color: var(--color-ink); margin: 0; }
@media (max-width: 1100px) {
  #section-alternatives .cmp-inner { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .cmp-alt-intro { font-size: 2.8rem; line-height: 1.1; }
  .cmp-alt-grid { grid-template-columns: 1fr; margin-top: 2rem; }
  .cmp-alt-item { padding: 1.6rem 0; }
  .cmp-alt-h { font-size: 1.5rem; }
  .cmp-alt-close { grid-template-columns: 1fr; gap: 0.8rem; }
  .cmp-alt-q { font-size: 1.7rem; }
}

/* ── Final CTA: "However big your little place gets" checklist ── */
.final-cta-built-head { font-family: var(--font-display); font-style: italic; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.2; color: var(--color-ink); margin: 0 0 1.6rem; }
.final-cta-checks { list-style: none; padding: 0; margin: 0 0 2.5rem; max-width: 30em; }
.final-cta-checks li { position: relative; padding-left: 2rem; font-family: var(--font-body); font-size: var(--size-body); line-height: 1.5; color: var(--color-ink); margin-bottom: 0.7rem; }
.final-cta-checks li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--cmp-ink, #9A7B55); }
@media (max-width: 1100px) {
  .final-cta-built-head { color: var(--color-cream-base); font-size: 1.9rem; }
  .final-cta-checks li { color: rgba(245,240,232,0.85); }
  .final-cta-checks li::before { color: var(--color-accent); }
}

/* Small italic footnote under a package (e.g. "*Diese zusätzlichen Seiten …") */
.cmp-footnote {
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-style: italic;
  color: var(--color-ink-muted);
  margin-top: 1.2rem;
  line-height: 1.6;
}

/* Website package: "Wenn du mehr brauchst" / "Gut zu wissen" as quiet footnote-size block */
.cmp-extras--small { gap: 3rem; padding: 2.2rem 0; }
.cmp-extras--small .cmp-eyebrow { font-size: 0.7rem; margin-bottom: 0.9rem; }
.cmp-extras--small .cmp-addon + .cmp-addon { margin-top: 1.1rem; }
.cmp-extras--small .cmp-addon-title { font-family: var(--font-body); font-size: var(--size-small); font-weight: 500; line-height: 1.5; margin: 0 0 0.2rem; }
.cmp-extras--small .cmp-text { font-size: var(--size-small); line-height: 1.6; color: var(--color-ink-muted); margin: 0; }
.cmp-extras--italic .cmp-addon-title,
.cmp-extras--italic .cmp-text { font-style: italic; }
@media (max-width: 1100px) {
  .cmp-extras--small { gap: 2rem; padding: 2rem 0; }
  .cmp-extras--small .cmp-addon-title { font-size: var(--size-small); }
}

/* FAQ footnote (small, italic) */
.faq-answer-inner p.faq-footnote { font-size: 0.92rem; font-style: italic; line-height: 1.6; }

/* Micro-Caption unter CTAs */
.cta-steps { margin: 0.9rem 0 0; font-family: var(--font-body); font-weight: var(--weight-light); font-size: 0.78rem; line-height: 1.6; letter-spacing: 0.01em; color: var(--color-ink-muted); max-width: 34rem; }
.cta-steps-dot { display: inline-block; margin: 0 0.5em; vertical-align: middle; line-height: 1; }
.final-cta-text-panel .cta-steps { margin-left: 0; margin-right: 0; }
@media (max-width: 1100px) { .final-cta-text-panel .cta-steps { margin-left: auto; margin-right: auto; } }

/* ── Mobile Hero (Leistungen DE): 9:16, Inhalt in den oberen 80 %, Bild mit Verlauf ──
   Bild: img/leistungen-header-mobile.jpg
   Variante über Klasse am .angebot-header-full-width:
   .hero-m-v1 = Bild beginnt unter dem Button, kurzer Verlauf, Gesicht frei
   .hero-m-v2 = Bild liegt höher hinter dem Text, längerer weicher Verlauf */
.hero-subline-mobile, .hero-mobile-cta { display: none; }
@media (max-width: 1100px) {
  .angebot-header-full-width.hero-m-v1,
  .angebot-header-full-width.hero-m-v2 {
    position: relative;
    display: block;
    height: calc(100vw * 16 / 9);
    max-height: 100svh;
    min-height: 34rem;
    overflow: hidden;
    background-color: var(--color-cream-base);
  }
  .hero-m-v1 .angebot-header-mobile-img,
  .hero-m-v2 .angebot-header-mobile-img {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    aspect-ratio: auto;
    background-image: url('img/leistungen-header-mobile.jpg');
    background-size: cover;
    background-position: center bottom;
  }
  .hero-m-v1 .angebot-header-mobile-img { top: 44%; }
  .hero-m-v2 .angebot-header-mobile-img { top: 30%; }
  .hero-m-v1 .angebot-header-mobile-img::after,
  .hero-m-v2 .angebot-header-mobile-img::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
  }
  /* V1: kurzer Verlauf – nur der Bildrand blendet weich ein */
  .hero-m-v1 .angebot-header-mobile-img::after {
    background: linear-gradient(to bottom,
      var(--color-cream-base) 0%,
      rgba(253, 252, 250, 0.6) 7%,
      rgba(253, 252, 250, 0) 18%);
  }
  /* V2: langer Verlauf hinter dem Text, endet an der Stirn */
  .hero-m-v2 .angebot-header-mobile-img::after {
    background: linear-gradient(to bottom,
      var(--color-cream-base) 0%,
      rgba(253, 252, 250, 0.85) 14%,
      rgba(253, 252, 250, 0.35) 26%,
      rgba(253, 252, 250, 0) 36%);
  }
  .hero-m-v1 .angebot-header-text,
  .hero-m-v2 .angebot-header-text {
    position: relative;
    z-index: 1;
    padding-top: 1.75rem;
    padding-bottom: 0;
  }
  .hero-m-v1 .hero-headline,
  .hero-m-v2 .hero-headline { font-size: clamp(2.8rem, 13vw, 4.2rem); line-height: 1.02; margin-bottom: 1.2rem; }
  .hero-m-v1 .hero-subline-mobile,
  .hero-m-v2 .hero-subline-mobile {
    display: block;
    margin: 0 0 1.8rem;
    font-size: 1.05rem;
    line-height: 1.6;
  }
  .hero-m-v1 .hero-mobile-cta,
  .hero-m-v2 .hero-mobile-cta {
    display: inline-block;
    align-self: flex-start;
    width: auto;
    padding: 0.85rem 1.5rem;
    font-size: 0.72rem;
  }
  .hero-m-v1 .hero-subline-place,
  .hero-m-v1 .hero-offer-list,
  .hero-m-v2 .hero-subline-place,
  .hero-m-v2 .hero-offer-list { display: none; }
}

/* ── Mobile: Angebotsübersicht unter dem Hero statt "Die Leistungen"-Kopf ── */
.offers-mobile { display: none; }
@media (max-width: 1100px) {
  .offers-mobile {
    display: block;
    padding: 2.5rem var(--space-content-h-mobile) 3rem;
    scroll-margin-top: 5rem;
  }
  .offers-mobile .hero-offer-list { margin-top: 0; }
  .offers-mobile ~ .packages-head { display: none; }
}

/* ── Mobile "Du bist hier"-Leiste: goldbraun wie die gescrollte Home-Nav, Schrift weiß ── */
@media (max-width: 1100px) {
  .here-bar { background: #A88B66; border-bottom: none; box-shadow: 0 6px 14px -10px rgba(28,26,22,.45); }
  .here-label { color: rgba(255,255,255,.75); }
  .here-current,
  .here-arrow { color: #fff; }
  .here-menu a { color: #fff; border-top-color: rgba(255,255,255,.25); }
  .here-menu a span { color: rgba(255,255,255,.75); }
  .here-menu a.is-active { color: #fff; border-left-color: #fff; }
}

/* Final CTA mobil: Goldbraun wie die „Du bist hier“-Leiste */
@media (max-width: 1100px) {
  .section-final-cta { background-color: #A88B66; }
  .final-cta-built-head { color: #fff; }
  .final-cta-checks li { color: rgba(255,255,255,.92); }
  .final-cta-checks li::before { color: #fff; }
  .final-cta-text-panel .cta-steps { color: rgba(255,255,255,.8); }
}

/* Unter 1100px: Bild aufs Gesicht ausrichten statt unten verankern,
   damit das Gesicht bei jedem Fensterformat sichtbar bleibt (Gesicht sitzt bei ca. 57 % Bildhöhe) */
@media (max-width: 1100px) {
  .hero-m-v1 .angebot-header-mobile-img,
  .hero-m-v2 .angebot-header-mobile-img { background-position: center 60%; }
}
/* Handy hochkant: Gesicht ca. 1 cm höher im Bild */
@media (max-width: 1100px) and (max-aspect-ratio: 3/4) {
  .hero-m-v1 .angebot-header-mobile-img,
  .hero-m-v2 .angebot-header-mobile-img { background-position: center 72%; }
}