/* clairr · Warum clairr — seitenspezifische Ergänzungen.
   Basis-Vokabular kommt aus style.css + begleitung.css (hero--lite,
   station, big-par, guarantees, team, cta). Hier nur, was neu ist. */

/* ── Dreischritt: Erst Klarheit → dann Struktur → dann Entlastung ── */
.creed {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px clamp(16px, 3vw, 34px);
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid var(--line);
}
.creed__step {
  font-size: clamp(.82rem, 1.4vw, 1rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--offwhite);
  white-space: nowrap;
}
.creed__step:first-child { color: var(--lumiere); }
.creed__sep {
  flex: 1 1 40px;
  min-width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), var(--line));
  position: relative;
}
.creed__sep::after {
  content: "";
  position: absolute;
  right: -1px; top: 50%;
  width: 5px; height: 5px;
  transform: translateY(-50%) rotate(45deg);
  border-top: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
}
@media (max-width: 560px) {
  .creed { flex-direction: column; align-items: flex-start; gap: 14px; }
  .creed__sep { display: none; }
}

/* ── Werte: 2×2-Raster aus den Garantie-Karten, Nummern durchlaufend ── */
.values .guarantee p { max-width: 52ch; }

/* Werte-Cards beim Mouseover in Lumière einfärben — wie die Modul-Cards.
   Scoped auf .values, damit die Garantie-Cards auf index.html bleiben. */
.values .guarantee { transition: border-color .4s, transform .4s, background-color .4s, box-shadow .4s; }
html[data-theme="light"] .values .guarantee:hover {
  background: rgba(11, 110, 240, .10);
  border-color: rgba(11, 110, 240, .5);
  box-shadow: 0 18px 50px -26px rgba(11, 110, 240, .45);
}
html:not([data-theme="light"]) .values .guarantee:hover {
  background: color-mix(in srgb, var(--void-2) 84%, var(--lumiere));
  border-color: rgba(11, 110, 240, .55);
  box-shadow: 0 20px 55px -24px rgba(11, 110, 240, .6);
}