.growth {
  --scouting-bg-amber: rgb(253 184 19 / 5%);
  --scouting-bg-blue: rgb(227 242 246 / 54%);
}

.scouting-section {
  box-sizing: border-box;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 1rem 45px 2rem;
}

.scouting-section--strength {
  background-color: var(--scouting-bg-amber);
}

.scouting-section--diversity {
  background-color: var(--scouting-bg-blue);
}

.scouting-section--flower {
  background-color: var(--scouting-bg-amber);
}

/* ── Section dividers ─────────────────────────────────────── */
.section-divider {
  --divider-bg-before: transparent;
  --divider-bg-after: transparent;
  --divider-color: #FDB813;
  --divider-size: 60px;
  --divider-space-before: 8rem;
  --divider-space-after: 3rem;
  --divider-line-y: calc(var(--divider-space-before) + 30px);
  position: relative;
  height: calc(var(--divider-space-before) + var(--divider-size) + var(--divider-space-after));
  display: flex;
  justify-content: center;
  background: linear-gradient(to bottom, var(--divider-bg-before) 0 var(--divider-line-y), var(--divider-bg-after) var(--divider-line-y) 100%);
  scroll-margin-top: 1rem;
  /* Break out to full viewport width regardless of parent padding */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.section-divider__line {
  position: absolute;
  top: var(--divider-line-y);
  transform: translateY(-50%);
  left: 0;
  right: 50%;
  height: 17px;
}

.section-divider__circle {
  position: absolute;
  top: var(--divider-space-before);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: var(--divider-size);
  height: var(--divider-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.5rem;
}

/* 1 – Amber (Stärkematrix) */
.section-divider--1 {
  --divider-bg-after: var(--scouting-bg-amber);
}

/* 2 – Blue (Diversifikationsmatrix) */
.section-divider--2 {
  --divider-bg-before: var(--scouting-bg-amber);
  --divider-bg-after: var(--scouting-bg-blue);
  --divider-color: #84E5FF;
}

/* 3 – Green (Blumenwiese) */
.section-divider--3 {
  --divider-bg-before: var(--scouting-bg-blue);
  --divider-bg-after: var(--scouting-bg-amber);
}

.section-divider__line  { background-color: var(--divider-color); }
.section-divider__circle { background-color: var(--divider-color); color: #fff; }