/* Website-only: Hero-Legende + Sektion „Woher. Womit. Wohin.“
   Farben nur über bos-states.css Tokens. Marketing-Site bleibt hell. */
html {
  color-scheme: light;
}
:root,
:root.dark,
:root[data-theme="dark"] {
  --bos-raupe: #2E8B62;
  --bos-raupe-text: #24704F;
  --bos-raupe-tint: #E3F3EA;
  --bos-kokon: #A8741A;
  --bos-kokon-text: #8F6214;
  --bos-kokon-tint: #FAF0DC;
  --bos-schmetterling: #3B93C8;
  --bos-schmetterling-text: #1F6E9E;
  --bos-schmetterling-tint: #E4F0F8;
  --bos-dna: #D9A93F;
}

.lf__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
  margin-top: 10px;
  padding: 4px 4px 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: #FFFFFF;
}
.lf__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lf__legend svg { flex: none; }

.lf__item .bos-state-badge,
.lf__agents .bos-state-badge {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
}
.lf__item--chips .bos-state-badge { grid-row: 1 / span 3; }
.lf__item .lf__hint,
.lf__agents .lf__hint { display: none; }

.lf__item,
.lf__agents {
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

@media (max-width: 420px) {
  .lf__item .bos-state-badge,
  .lf__agents .bos-state-badge {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
    margin-top: 4px;
  }
  .lf__item--chips .bos-state-badge { grid-row: auto; }
  .lf__legend { font-size: 11.5px; gap: 8px 12px; }
}

/* ---- Sektion Woher / Womit / Wohin ---- */
.bos-www {
  --bos-www-gap: clamp(1.5rem, 4vw, 3.5rem);
}
.bos-www__intro {
  max-width: 42rem;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.bos-www__intro .eyebrow { margin: 0; }
.bos-www__lead {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--text-3);
  max-width: 40rem;
}
.bos-www__cols {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bos-www-gap);
  margin-top: var(--s-8);
  align-items: start;
}
.bos-www__dna {
  position: absolute;
  z-index: 0;
  left: 36px;
  right: calc(33.333% - 36px);
  top: 35px;
  height: 2px;
  background: var(--bos-dna);
  opacity: 0.6;
  pointer-events: none;
}
.bos-www__col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.bos-www__col .bos-state-tile {
  width: 72px;
  height: 72px;
  border-radius: 16px;
}
.bos-www__frage {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bos-www__col[data-state="raupe"] .bos-www__frage { color: var(--bos-raupe-text); }
.bos-www__col[data-state="kokon"] .bos-www__frage { color: var(--bos-kokon-text); }
.bos-www__col[data-state="schmetterling"] .bos-www__frage { color: var(--bos-schmetterling-text); }
.bos-www__col h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.bos-www__col > p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-3);
}
.bos-www__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 0.975rem;
}
.bos-www__list li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  color: var(--text);
}
.bos-www__list svg { flex: none; color: inherit; }
.bos-www__col[data-state="raupe"] .bos-www__list svg { color: var(--bos-raupe); }
.bos-www__col[data-state="kokon"] .bos-www__list svg { color: var(--bos-kokon); }
.bos-www__col[data-state="schmetterling"] .bos-www__list svg { color: var(--bos-schmetterling); }

@media (max-width: 768px) {
  .bos-www__cols { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .bos-www__dna { display: none; }
}

/* State-Badges in SAP-Activate-Phasen */
.phase__state {
  margin: var(--s-3) var(--s-5) 0;
  width: max-content;
  max-width: calc(100% - 2 * var(--s-5));
}