/* Primary page sections, in page order. */

/* 03 Problem */
.problem-section {
  background: var(--cream);
}

.problem-heading {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.problem-list {
  max-width: 720px;
  margin: 2.8rem auto 0;
  padding: 0;
  list-style: none;
}

.problem-list li {
  position: relative;
  padding: 1.25rem 0 1.25rem 2.1rem;
  border-bottom: 1px solid var(--border);
  color: var(--green-soft);
  font-family: "Lora", Georgia, serif;
  font-size: clamp(1.12rem, 1.6vw, 1.45rem);
  line-height: 1.52;
}

.problem-list li:last-child {
  border-bottom: 0;
}

.problem-list li::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.95rem;
  height: 1px;
  transform: translateY(-50%);
  background: var(--warm);
  content: "";
}

.statement {
  position: relative;
  max-width: 780px;
  margin: 2.4rem auto 0;
  padding: 0.35rem 3.25rem;
  color: var(--warm);
  font-family: "Lora", Georgia, serif;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

.statement::before,
.statement::after {
  position: absolute;
  color: color-mix(in srgb, var(--warm) 62%, transparent);
  font-family: "Lora", Georgia, serif;
  font-size: clamp(3.2rem, 5.4vw, 5.3rem);
  font-style: normal;
  font-weight: 400;
  line-height: 0.7;
  pointer-events: none;
}

.statement::before {
  top: -0.3em;
  left: 0;
  content: '“';
}

.statement::after {
  right: 0;
  bottom: -0.3em;
  content: '”';
}

/* 04 About */
.about {
  background: #fff;
}

/* Three horizontal bands instead of one two-column block: the headline gets
   full width (no three-line wrap in a narrow column), portrait and text sit
   side by side, and the credentials read as their own strip. */
.about-intro {
  max-width: 900px;
}

.about-intro h2 {
  margin-top: 0.6rem;
}

.about-body {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.about-portrait {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
  box-shadow: var(--shadow-sm);
}

.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transition: transform var(--motion-slow) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
  .about-portrait:hover img {
    transform: scale(1.025);
  }
}

.about-text > p {
  max-width: 620px;
  color: var(--green-soft);
  font-size: 1.03rem;
}

.about-text > .about-lead {
  color: var(--green-deep);
  font-family: "Lora", Georgia, serif;
  font-size: clamp(1.15rem, 1.5vw, 1.38rem);
  line-height: 1.55;
}

.about-credentials {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2.2rem;
  border-top: 1px solid var(--border);
}

.credentials-label {
  align-self: center;
  margin: 0;
}

.credentials-ledger {
  margin: 0;
  padding: 0;
  list-style: none;
}

.credentials-ledger li {
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(0, 1fr) minmax(145px, auto);
  align-items: center;
  gap: 0.4rem 1.6rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.credentials-ledger li:first-child {
  padding-top: 0;
}

.credentials-ledger li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.credential-year {
  color: var(--warm);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.credential-title {
  font-family: "Lora", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
}

/* Detail sits under the title, in the title's column. */
.credential-detail {
  grid-column: 2;
  color: var(--green-soft);
  font-size: 0.88rem;
}

.credential-note {
  grid-row: 1;
  grid-column: 3;
  color: var(--green-soft);
  font-size: 0.78rem;
  opacity: 0.7;
}

.credentials-ledger a {
  grid-row: 1;
  grid-column: 3;
  color: var(--warm);
  font-size: 0.85rem;
  font-weight: 600;
}

.faq-list details {
  border-bottom: 1px solid var(--border);
}

.faq-list details:last-child {
  border-bottom: 0;
}

.faq-list summary {
  position: relative;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

/* Shared dark band */
.dark-section {
  background:
    radial-gradient(circle at 12% 0%, rgba(175, 193, 170, 0.1), transparent 30%),
    linear-gradient(135deg, var(--green-deep), var(--green));
  color: rgba(255, 255, 255, 0.84);
}

.dark-section h2,
.dark-section h3 {
  color: #fffaf1;
}

.dark-section .eyebrow {
  color: #e7bda5;
}

.section-heading-light > p:last-child {
  color: rgba(255, 255, 255, 0.8);
}

/* 05 ABEX: the initial letter IS the display element. A/B/E/X run at headline
   scale in apricot, the word ending joins them on the same baseline, so each
   item reads as one word (A + bnehmen) rather than a letter above a label.
   No rules, no numbers — the letters carry the section on their own. */
.abex-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.abex-steps li {
  padding-top: 0;
  border-top: 0;
  text-align: center;
}

/* Fixed rhythm high–low–high–low: A and E sit at the top edge, B and X drop
   by a full step. Deliberate, not a diagonal cascade. Desktop only, so the
   mobile stack stays clean. */
@media (min-width: 761px) {
  .abex-steps li:nth-child(even) {
    margin-top: clamp(3rem, 6.5vw, 6rem);
  }
}

.abex-step-heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  margin: 0 0 0.85rem;
  font-weight: 400;
  line-height: 1;
}

.abex-step-letter {
  /* Optischer statt metrischer Abstand: in Lora ragt die Tinte von A und X
     ueber die Laufweite hinaus (rechte Seitenlage -1.9px), B und E haben
     +4.6px Vorlauf. Ein einheitlicher gap ergaebe darum 6.5px Unterschied
     zwischen den vier Woertern. Das Padding gleicht das je Glyphe aus, in em,
     damit es beim Skalieren erhalten bleibt. */
  padding-right: 0.042em;
  color: var(--apricot);
  font-family: "Lora", Georgia, serif;
  font-size: clamp(5rem, 9vw, 10rem);
  font-weight: 400;
  line-height: 0.78;
}

/* A (1.) und X (4.) sind die Diagonalen und brauchen mehr Luft. */
.abex-steps li:nth-child(1) .abex-step-letter,
.abex-steps li:nth-child(4) .abex-step-letter {
  padding-right: 0.092em;
}

.abex-step-rest {
  color: #fff;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(1.3rem, 1.7vw, 1.75rem);
  font-weight: 400;
}

.abex-steps p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.94rem;
  line-height: 1.62;
}

/* 06 Process timeline */
.process {
  overflow: clip;
  /* Dreimal reduziert: erst gegen den doppelten Sektionsabstand (7.5rem→3.75rem),
     dann zweimal weiter auf Zuruf (3.75rem→1.875rem→0.75rem). */
  padding-bottom: clamp(0.5rem, 0.9vw, 0.75rem);
  background:
    radial-gradient(circle at 84% 13%, rgba(223, 173, 145, 0.07), transparent 24%),
    var(--cream-deep);
}

/* A narrower intro column than About's photo/text split (41:59) gives the
   timeline more room to breathe and stops the two 2-col sections from
   reading as the same layout reused. */
.process-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1.38fr);
  align-items: start;
  gap: clamp(3.5rem, 8vw, 8rem);
}

.process .section-heading {
  width: 100%;
  max-width: 440px;
  margin: 0;
  text-align: left;
}

.process .section-heading > p:last-child {
  max-width: 420px;
  margin-inline: 0;
  line-height: 1.75;
}

/* Bewusst static, nicht sticky: Plan 001 (commit c3befec) hat sticky hier
   entfernt, weil die Einführung sonst am Viewport hängen blieb, während der
   Zeitstrahl daneben scrollt. Nicht wieder einführen. */
.process-intro {
  position: static;
}

.process-cta {
  margin-top: 2rem;
}

.process-cta .cta-note {
  max-width: 300px;
}

.process-timeline {
  --timeline-progress: 0;
  --timeline-left: 32px;
  --timeline-start: 32px;
  /* JS overwrites these two with the measured first/last marker centers,
     so track and fill run exactly from dot to dot. */
  --timeline-top: var(--timeline-start);
  --timeline-bottom: var(--timeline-start);
  --timeline-track: var(--cream-deep);
  --timeline-ease: var(--ease-smooth);
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: 0 0 0 auto;
  /* The extra tail gives the sticky intro enough room to remain fixed until
     the scroll-driven fill reaches marker 04. The measured line still ends
     exactly at the final marker. */
  padding: 0;
  padding-bottom: clamp(12rem, 20vh, 15rem);
  list-style: none;
}

/* Explicit paint order: track/fill (0) < progress dot (1) < items with markers (2).
   Without this, the reveal transforms flip the stacking order and the line
   draws across the circles instead of disappearing behind them. */
.process-timeline::before,
.process-timeline::after {
  position: absolute;
  top: var(--timeline-top);
  bottom: var(--timeline-bottom);
  left: var(--timeline-left);
  z-index: 0;
  width: 3px;
  border-radius: 999px;
  content: "";
}

.process-timeline::before {
  background: rgba(47, 81, 67, 0.14);
}

/* Filled portion grows with scroll progress. */
.process-timeline::after {
  transform: scaleY(var(--timeline-progress));
  transform-origin: top;
  background: linear-gradient(180deg, var(--apricot), var(--sage) 55%, var(--green));
  /* Keine CSS-Transition mehr: timeline.js nähert --timeline-progress jeden
     Frame per Lerp an (siehe animationLoop), das reicht für die Weichheit.
     Eine zusätzliche CSS-Transition darüber hat gegen die laufenden
     Scroll-Updates gekämpft und eher ruckelig gewirkt. */
}

/* Soft glowing dot riding the leading edge of the filled line. */
.process-progress-dot {
  position: absolute;
  left: calc(var(--timeline-left) + 1.5px);
  top: calc(var(--timeline-top) + var(--timeline-progress) * (100% - var(--timeline-top) - var(--timeline-bottom)));
  z-index: 1;
  width: 13px;
  height: 13px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--apricot);
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--apricot) 26%, transparent),
    0 0 16px 2px color-mix(in srgb, var(--apricot) 60%, transparent);
  opacity: 0;
  transition:
    top var(--motion-base) var(--timeline-ease),
    opacity var(--motion-fast) ease;
}

.process-timeline.is-enhanced .process-progress-dot {
  opacity: 1;
}

.process-timeline-item {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: clamp(1.35rem, 3vw, 2.25rem);
  min-height: clamp(10rem, 20vh, 14rem);
}

.process-timeline.is-enhanced .process-timeline-item,
.process-timeline.is-enhanced .process-timeline-item.is-revealed,
.process-timeline.is-enhanced .process-timeline-item.is-active,
.process-timeline.is-enhanced .process-timeline-item.is-complete {
  opacity: 1;
  transform: none;
}

.process-marker {
  position: relative;
  z-index: 2;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 2px solid var(--sage);
  border-radius: 50%;
  background: var(--cream-deep);
  color: var(--green);
  box-shadow: 0 0 0 7px var(--timeline-track);
  transition:
    border-color var(--motion-base) var(--ease-smooth),
    background-color var(--motion-base) var(--ease-smooth),
    color var(--motion-fast) ease,
    transform 460ms var(--ease-spring),
    box-shadow var(--motion-base) var(--ease-smooth);
}

/* Number and check share one grid cell and cross-fade. */
.process-marker-num,
.process-marker-check {
  grid-area: 1 / 1;
  transition:
    opacity var(--motion-base) var(--ease-smooth),
    transform 420ms var(--ease-spring);
}

.process-marker-num {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.process-marker-check {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.4);
}

/* Slightly dim upcoming markers so the active one leads the eye. */
.process-timeline.is-enhanced .process-timeline-item .process-marker {
  transform: scale(0.9);
}

.process-timeline.is-enhanced .process-timeline-item.is-revealed .process-marker {
  transform: scale(1);
}

.process-timeline-item.is-complete .process-marker {
  border-color: var(--apricot);
  background: var(--apricot);
  color: var(--green-deep);
  transform: scale(1);
}

.process-timeline-item.is-complete .process-marker-num {
  opacity: 1;
  transform: none;
}

.process-timeline-item.is-complete .process-marker-check {
  opacity: 0;
  transform: scale(0.4);
}

.process-timeline-item.is-approaching .process-marker {
  box-shadow: 0 0 0 5px rgba(47, 81, 67, 0.12);
  transition: box-shadow 400ms var(--ease-smooth);
}

.process-timeline-item.is-active .process-marker {
  border-color: var(--green);
  background: var(--sage-pale);
  color: var(--green-deep);
  transform: scale(1.08);
  box-shadow:
    0 0 0 7px var(--timeline-track),
    0 0 0 13px color-mix(in srgb, var(--sage) 26%, transparent),
    0 14px 30px rgba(47, 81, 67, 0.14);
}

.process-timeline-copy {
  padding: 0.18rem 0 2.7rem;
  opacity: 1;
  transform: none;
  transition: none;
}

.process-timeline-item.is-revealed .process-timeline-copy,
.process-timeline-item.is-active .process-timeline-copy,
.process-timeline-item.is-complete .process-timeline-copy {
  opacity: 1;
  transform: none;
}

.process-timeline-item:last-child .process-timeline-copy {
  padding-bottom: 0;
}

.process-meta {
  margin: 0 0 0.5rem;
  color: var(--warm);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.process-timeline h3 {
  max-width: 620px;
  margin-bottom: 0.5rem;
  font-size: clamp(1.4rem, 1.9vw, 1.75rem);
  line-height: 1.22;
}

.process-timeline-copy > p:last-child {
  max-width: 620px;
  margin: 0;
  color: var(--green-soft);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* 07 Main offer: personal letter paired with a clear details panel. */
.offer-section {
  border-top: 2px solid var(--border);
  background: var(--cream);
}

.primary-offer {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  background: var(--green-deep);
  box-shadow: 0 34px 80px rgba(37, 68, 56, 0.22);
}

.offer-letter {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.75rem);
  background:
    radial-gradient(circle at 12% 8%, rgba(223, 173, 145, 0.2), transparent 32%),
    #fff7eb;
  color: #254438;
}

.offer-letter-copy {
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.62;
}

.offer-quote-mark {
  height: 0.58em;
  color: color-mix(in srgb, var(--warm) 78%, #fff7eb);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4.8rem, 7vw, 7.5rem);
  font-style: normal;
  line-height: 0.82;
  pointer-events: none;
  user-select: none;
}

.offer-quote-mark-open {
  align-self: flex-start;
  margin: 0 0 0.55rem -0.08em;
}

.offer-quote-mark-close {
  align-self: flex-end;
  margin: 0.65rem -0.04em -0.18em 0;
}

.offer-signature {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.2rem 0 0;
  color: var(--warm);
  font-family: "Lora", Georgia, serif;
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 400;
}

.offer-signature-wave {
  flex-shrink: 0;
  width: 26px;
  height: 10px;
}

.offer-details {
  padding: clamp(2rem, 4vw, 3.75rem);
  background:
    radial-gradient(circle at 100% 0%, rgba(223, 173, 145, 0.07), transparent 28%),
    linear-gradient(145deg, var(--green-deep), color-mix(in srgb, var(--green-deep) 55%, var(--green)));
  color: rgba(255, 255, 255, 0.84);
}

.offer-details .eyebrow {
  color: #e7bda5;
}

.offer-details h2 {
  max-width: 680px;
  color: #fffaf1;
}

.offer-details > p:not(.eyebrow) {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--font-lead);
  line-height: 1.72;
}

.offer-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 2.4rem 0 2.6rem;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  list-style: none;
}

.offer-steps li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.98rem;
  line-height: 1.5;
}

.offer-steps li span {
  flex-shrink: 0;
  color: var(--apricot);
  font-family: "Lora", Georgia, serif;
  font-size: 0.95rem;
}

.offer-actions .cta-note {
  max-width: 460px;
  color: rgba(255, 255, 255, 0.66);
}

/* 08 Results: open editorial split with numbered rows. */
.results-section {
  background: #fff;
  padding-top: clamp(2rem, 4vw, 3rem);
}

.results-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 8rem);
}

.results-intro {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
}

.results-intro h2 {
  margin-bottom: 1rem;
}

.results-intro > p:last-child {
  max-width: 420px;
  margin: 0;
  color: var(--green-soft);
}

.results-list {
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0;
}

.results-list li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  color: var(--green-soft);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-family: "Lora", Georgia, serif;
  line-height: 1.5;
}

.results-list li:last-child {
  border-bottom: 1px solid var(--border);
}

.results-number {
  color: var(--warm);
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* 09 Other offers: editorial storyboard – four full-width rows instead of a
   card grid. No borders, no card shadow; a divider line and a large faded
   number carry the structure that a card's outline used to carry. */
/* sage-taupe (#dfdccd hell / #2b3227 dunkel): der Zeitstrahl direkt darueber
   ist cream-deep, die ABEX-Sektion darunter dunkelgruen. Dieser warme
   Salbei-Taupe-Ton (wie ungebleichtes Leinen) sitzt farblich genau
   dazwischen – trennt die Sektionen sichtbar und leitet ins Dunkelgruen ueber,
   ohne den kuehlen Mint-Stich des frueheren sage-pale. Token in beiden Themes
   definiert. */
.other-offers {
  background:
    radial-gradient(circle at 88% 8%, rgba(223, 173, 145, 0.09), transparent 26%),
    var(--sage-taupe);
}

.offer-storyboard {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.offer-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition:
    background-color var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}

.offer-storyboard > .offer-row:last-child {
  border-bottom: 1px solid var(--border);
}

@media (hover: hover) and (pointer: fine) {
  .offer-row:hover,
  .offer-row:focus-within {
    background: var(--sage-pale);
    box-shadow: var(--shadow-sm);
    transform: translateY(-4px);
  }

  .offer-row:hover .offer-row-media img,
  .offer-row:focus-within .offer-row-media img {
    transform: scale(1.03);
  }

  .offer-row:hover .offer-row-link span,
  .offer-row:focus-within .offer-row-link span {
    transform: translateX(6px);
  }
}

/* Media sits in column 2 by source order (content first) on odd rows –
   01 and 03 read image-right. --media-left pulls it back to column 1 for
   02 and 04, without touching DOM order (content stays screen-reader-first
   either way, the image is supporting, not the primary information). */
.offer-row--media-left .offer-row-media {
  order: -1;
}

.offer-row-content {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  min-width: 0;
}

/* The large faded numeral replaces the card outline as the thing that
   separates one offer from the next – present, but deliberately quiet. */
.offer-row-number {
  flex: 0 0 auto;
  color: var(--apricot);
  opacity: 0.4;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(3.25rem, 3vw + 2rem, 5.5rem);
  font-weight: 500;
  line-height: 1;
}

.offer-row-text {
  min-width: 0;
}

.offer-row-meta {
  margin: 0 0 0.9rem;
  color: var(--warm);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.offer-row-text h3 {
  margin-bottom: 0.65rem;
  font-size: clamp(1.4rem, 1.1rem + 0.6vw, 1.85rem);
}

.offer-row-text > p {
  max-width: 46ch;
  margin: 0;
  color: var(--green-soft);
  font-size: 0.98rem;
  line-height: 1.65;
}

.offer-row-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.5rem;
  color: var(--warm);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
}

.offer-row-link span {
  transition: transform var(--motion-base) var(--ease-out);
}

.offer-row-link:hover span,
.offer-row-link:focus-visible span {
  transform: translateX(6px);
}

/* No card, no border, no hard shadow – just a soft-radius photograph sitting
   directly on the section's own surface. A faint inward shade at the edges
   is what "eingebunden" does instead of a mask/vignette hack. */
.offer-row-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.offer-row-media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 2.5rem rgba(24, 34, 28, 0.12);
  content: "";
}

.offer-row-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-out);
}

/* 11 Instagram: light supporting section */
.instagram-section {
  background: #fff;
}

.instagram-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}

.instagram-copy h2 {
  max-width: 560px;
}

.instagram-copy p:not(.eyebrow) {
  max-width: 520px;
  color: var(--green-soft);
}

.instagram-handle {
  overflow-wrap: anywhere;
}

.qr-card {
  display: grid;
  width: 252px;
  place-items: center;
  padding: 1.2rem 1.25rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(251, 247, 239, 0.96)),
    var(--cream);
  text-decoration: none;
  transition:
    transform var(--motion-base) var(--ease-smooth),
    box-shadow var(--motion-base) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
  .qr-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm);
  }
}

.qr-card img {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1;
  padding: 0.6rem;
  border: 1px solid rgba(47, 81, 67, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(47, 81, 67, 0.1);
  object-fit: contain;
}

.qr-card span {
  margin-top: 0.9rem;
  color: var(--green-soft);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* 11 FAQ */
.faq-section {
  background: var(--cream);
}

.faq-wrap {
  width: min(calc(100% - 48px), 850px);
}

.faq-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.faq-list summary {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.25rem 1rem 1.7rem;
  color: var(--green-deep);
  font-family: "Lora", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  transition:
    background-color var(--motion-base) var(--ease-smooth),
    color var(--motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .faq-list summary:hover {
    background: color-mix(in srgb, var(--sage-pale) 42%, transparent);
  }
}

.faq-chevron {
  display: grid;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--sage) 28%, transparent);
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--sage-pale) 76%, transparent);
  color: var(--green-soft);
  transition:
    transform 460ms var(--ease-smooth),
    background-color var(--motion-base) var(--ease-smooth),
    color var(--motion-fast) ease;
}

.faq-chevron svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.faq-list summary[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg) translateY(-1px);
  background: var(--sage-pale);
  color: var(--green-deep);
}

.faq-answer {
  overflow: hidden;
  overflow: clip;
  will-change: height;
}

.faq-answer-inner {
  padding: 0 4.75rem 1.45rem 1.7rem;
  transform-origin: top left;
  will-change: opacity, transform;
}

.faq-answer-inner p {
  margin: 0;
  color: var(--green-soft);
}

/* 12 Final CTA: a warm, self-contained closing stage. */
.final-cta {
  padding-block: clamp(4.5rem, 8vw, 7rem);
  background: var(--cream-deep);
}

.final-cta-stage {
  width: min(calc(100% - 48px), 920px);
  padding: clamp(2.5rem, 6vw, 5rem);
  border: 1px solid color-mix(in srgb, var(--warm) 30%, var(--border));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 14% 12%, rgba(223, 173, 145, 0.28), transparent 34%),
    linear-gradient(145deg, #fff5e7, #f3dfcf);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.final-cta-stage h2 {
  max-width: 14ch;
  margin-inline: auto;
}

.final-cta-stage > p:not(.eyebrow) {
  max-width: 640px;
  margin: 0 auto 1.7rem;
  color: var(--green-soft);
  font-size: var(--font-lead);
}

.final-actions {
  justify-content: center;
}

/* Desktop only: the scroll logic stays intact, but the visual language is
   deliberately quieter. One fine track fills in apricot; the numbers remain
   visible and the marker itself never jumps or grows. */
@media (min-width: 761px) {
  .process-timeline::before,
  .process-timeline::after {
    width: 2px;
  }

  .process-timeline::before {
    background: color-mix(in srgb, var(--sage) 48%, transparent);
  }

  .process-timeline::after {
    background: var(--apricot);
  }

  .process-progress-dot {
    display: none;
  }

  .process-marker-check {
    display: none;
  }

  .process-marker {
    border: 1px solid color-mix(in srgb, var(--sage) 78%, var(--cream-deep));
    background: var(--cream-deep);
    box-shadow: none;
    transition:
      border-color 380ms var(--ease-smooth),
      color 260ms ease;
  }

  .process-timeline.is-enhanced .process-timeline-item .process-marker,
  .process-timeline.is-enhanced .process-timeline-item.is-revealed .process-marker,
  .process-timeline-item.is-complete .process-marker,
  .process-timeline-item.is-active .process-marker {
    transform: none;
  }

  .process-timeline-item.is-complete .process-marker,
  .process-timeline-item.is-active .process-marker {
    border-color: var(--apricot);
    background: var(--cream-deep);
    color: var(--warm);
  }

  .process-timeline-item.is-active .process-marker {
    box-shadow: none;
  }
}

/* Desktop refinement pass: compact vertical rhythm, grouped certificates,
   visible ABEX imagery and a clear filled-state timeline. */
@media (min-width: 761px) {
  .problem-section {
    padding-block: clamp(4.25rem, 6vw, 6rem);
  }

  .problem-list {
    margin-top: 2rem;
  }

  .problem-list li {
    padding-block: 0.95rem;
  }

  .about-credentials {
    display: block;
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
  }

  .credentials-label {
    margin-bottom: 1.15rem;
  }

  .credentials-ledger {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .credentials-ledger li,
  .credentials-ledger li:first-child,
  .credentials-ledger li:last-child {
    display: flex;
    min-height: 156px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 1.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--paper) 84%, var(--cream-deep));
  }

  .credential-detail {
    grid-column: auto;
  }

  .credential-note,
  .credential-links {
    margin-top: auto;
  }

  .credential-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .credentials-ledger a {
    grid-row: auto;
    grid-column: auto;
  }

  /* Zertifikate gehören zur persönlichen Einordnung und stehen deshalb
     direkt unter ihrem Textblock – als ruhiges, kompaktes Ledger statt
     einer zweiten großen Kartenreihe. */
  .about-text .about-credentials {
    margin-top: 1.8rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--border);
  }

  .about-text .credentials-label {
    margin-bottom: 0.75rem;
    font-size: 0.64rem;
  }

  .about-text .credentials-ledger {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .about-text .credentials-ledger li,
  .about-text .credentials-ledger li:first-child,
  .about-text .credentials-ledger li:last-child {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(4.75rem, 5.75rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.18rem 0.7rem;
    padding: 0.68rem 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
  }

  .about-text .credentials-ledger li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .about-text .credential-year {
    grid-row: 1 / span 2;
    font-size: 0.62rem;
  }

  .about-text .credential-title {
    grid-column: 2;
    font-size: 0.91rem;
    line-height: 1.25;
  }

  .about-text .credential-detail {
    grid-column: 2;
    font-size: 0.75rem;
    line-height: 1.35;
  }

  .about-text .credential-note,
  .about-text .credential-links {
    grid-row: 1;
    grid-column: 3;
    margin-top: 0;
    font-size: 0.68rem;
    white-space: nowrap;
  }

  .about-text .credential-links {
    display: inline-flex;
    gap: 0.45rem;
  }

  .about-text .credentials-ledger a {
    font-size: 0.7rem;
  }

  .process-timeline {
    --timeline-left: 27px;
    --timeline-start: 27px;
    padding-bottom: clamp(4.5rem, 8vw, 6.5rem);
  }

  .process-timeline-item {
    grid-template-columns: 56px minmax(0, 1fr);
    min-height: clamp(8rem, 14vh, 10rem);
    gap: clamp(1.1rem, 2vw, 1.7rem);
  }

  .process-marker {
    width: 54px;
    height: 54px;
    border-width: 1px;
  }

  .process-timeline-item.is-complete .process-marker,
  .process-timeline-item.is-active .process-marker {
    border-color: var(--apricot);
    background: var(--apricot);
    color: var(--green-deep);
  }

  .process-timeline-item.is-active .process-marker {
    box-shadow: none;
  }

  .faq-section {
    padding-block: clamp(4.25rem, 6vw, 5.5rem);
  }

  .faq-wrap {
    max-width: 760px;
  }

  .faq-list summary {
    min-height: 64px;
    padding: 1rem 1.15rem;
    font-size: 1rem;
  }

  .faq-answer-inner {
    padding: 0 4.2rem 1.1rem 1.15rem;
    font-size: 0.95rem;
  }
}

/* Thermomix recipe section */
.thermomix-page-header {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--cream-deep);
  border-bottom: 1px solid var(--border);
}

.thermomix-section {
  background: var(--cream);
}

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.recipe-card {
  --card-pad: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--card-pad);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow var(--motion-base) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
  .recipe-card:hover {
    box-shadow: var(--shadow-sm);
  }
}

.recipe-image {
  /* max-width: none hebt die globale img-Regel (max-width: 100%) auf – sonst
     wird die volle Randlos-Breite gekappt und rechts in der Kachel bleibt
     ein Streifen frei. */
  width: calc(100% + 2 * var(--card-pad));
  max-width: none;
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0;
  aspect-ratio: 584 / 480;
  object-fit: cover;
}

.recipe-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm);
}

.recipe-card h3 {
  margin: 0.2rem 0 0;
  color: var(--green-deep);
  font-family: "Lora", Georgia, serif;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  font-weight: 600;
  line-height: 1.3;
}

.recipe-card > p {
  flex: 1;
  margin: 0;
  color: var(--green-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

.recipe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--green-soft);
  font-size: 0.82rem;
}

.recipe-meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.recipe-meta-item svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thermomix-cta-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 760px) {
  .recipe-grid {
    grid-template-columns: 1fr;
  }
}