/* ============================================================
   madone group — Refine Layer (rein visuell, additiv)
   Keine Änderung an Inhalt, Struktur, Farbwelt, Schriftgrössen.
   ============================================================ */

:root {
  --rf-marine: #102D45;
  --rf-marine-2: #1E4666;
  --rf-bronze: #7A4626;
  --rf-sand: #F2F1ED;
}

/* ---------------------------------------------------------
   1 — HERO: Kette „Kapital → Immobilie → Umsetzung"
   --------------------------------------------------------- */
.hero__strips { position: relative; }

.rf-chain {
  position: absolute;
  top: clamp(74px, 8vh, 98px); left: 0; right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 22px);
  padding: 14px clamp(12px, 2vw, 26px) 26px;
  background: linear-gradient(to bottom, rgba(6, 24, 39, 0.82), rgba(6, 24, 39, 0.42) 55%, rgba(6, 24, 39, 0));
  text-shadow: 0 1px 6px rgba(6, 24, 39, 0.55);
  pointer-events: none;
  font-family: "Montserrat", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.rf-chain__step { opacity: 0; animation: rfChainIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; white-space: nowrap; }
.rf-chain__step:nth-child(1) { animation-delay: 0.5s; }
.rf-chain__step:nth-child(2) { animation-delay: 0.75s; }
.rf-chain__step:nth-child(3) { animation-delay: 1s; }
.rf-chain__step:nth-child(4) { animation-delay: 1.25s; }
.rf-chain__step:nth-child(5) { animation-delay: 1.5s; }
.rf-chain__arrow { color: #E2C6A8; opacity: 0; animation: rfChainIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes rfChainIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 0.95; transform: none; } }

/* Streifen nacheinander einblenden — liest sich als eine Kette, nicht als 6 Angebote */
.hero__strip { animation: rfStripIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero__strip:nth-child(1) { animation-delay: 0.05s; }
.hero__strip:nth-child(2) { animation-delay: 0.14s; }
.hero__strip:nth-child(3) { animation-delay: 0.23s; }
.hero__strip:nth-child(4) { animation-delay: 0.32s; }
.hero__strip:nth-child(5) { animation-delay: 0.41s; }
.hero__strip:nth-child(6) { animation-delay: 0.5s; }
@keyframes rfStripIn { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

@media (max-width: 900px) {
  .rf-chain { font-size: 9px; letter-spacing: 0.14em; gap: 8px; padding: 9px 10px; }
}

/* ---------------------------------------------------------
   2 — „In einem Satz" — Laien-Einstieg zwischen Hero und Kreis
   --------------------------------------------------------- */
.rf-oneline {
  background: var(--rf-sand);
  border-top: 1px solid rgba(31, 31, 34, 0.12);
  border-bottom: 1px solid rgba(31, 31, 34, 0.12);
  padding: clamp(34px, 4.6vw, 62px) 0;
}
.rf-oneline__inner {
  width: 100%;
  max-width: var(--maxw, 1280px);
  margin: 0 auto;
  padding: 0 var(--pad, 32px);
}
.rf-oneline__label {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rf-bronze);
  margin-bottom: clamp(18px, 2.2vw, 28px);
}
.rf-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: clamp(12px, 2vw, 28px);
}
.rf-step { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rf-step__icon { width: 46px; height: 46px; display: block; color: var(--rf-marine); }
.rf-step__icon svg { width: 100%; height: 100%; display: block; }
.rf-step__t {
  font-family: "Montserrat", sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--rf-marine);
  letter-spacing: -0.01em;
}
.rf-step__d { font-size: 16px; line-height: 1.5; color: #5E5C57; margin: 0; max-width: 34ch; }
.rf-steps__link {
  align-self: center;
  color: #B6A98F;
  font-size: 22px;
  line-height: 1;
  padding-top: 12px;
}
@media (max-width: 860px) {
  .rf-steps { grid-template-columns: 1fr; gap: 22px; }
  .rf-steps__link { display: none; }
}

/* ---------------------------------------------------------
   3 — REGELKREIS: Kreislauf sichtbar machen + Schrittanzeige
   --------------------------------------------------------- */
.rf-orbit {
  fill: none;
  stroke: var(--rf-bronze);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 90 590;
  opacity: 0.55;
  transform-origin: 300px 300px;
  animation: rfOrbit 9s linear infinite;
  pointer-events: none;
}
@keyframes rfOrbit { to { transform: rotate(360deg); } }
.cycle.rf-paused .rf-orbit { animation-play-state: paused; opacity: 0.28; }

/* Nachbarsegmente bleiben mitgedacht */
.cycle .seg { transition: opacity 0.4s ease; }
.cycle.rf-picked .seg:not(.is-active) { opacity: 0.62; }
.cycle.rf-picked .seg:not(.is-active):hover { opacity: 1; }

/* Schrittanzeige über dem Kreis */
.rf-cyclesteps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.rf-cyclesteps__hint {
  font-family: "Montserrat", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #98948A;
  margin-right: 4px;
}
.rf-dot {
  appearance: none;
  border: 1px solid rgba(16, 45, 69, 0.28);
  background: transparent;
  color: var(--rf-marine);
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  min-width: 32px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.rf-dot:hover { border-color: var(--rf-bronze); color: var(--rf-bronze); }
.rf-dot.is-on { background: var(--rf-marine); border-color: var(--rf-marine); color: #FFFFFF; }

/* Bullets im Panel gestaffelt + ruhiger */
.disc__bullets li { animation: rfFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.disc__bullets li:nth-child(1) { animation-delay: 0.02s; }
.disc__bullets li:nth-child(2) { animation-delay: 0.07s; }
.disc__bullets li:nth-child(3) { animation-delay: 0.12s; }
.disc__bullets li:nth-child(4) { animation-delay: 0.17s; }
.disc__bullets li:nth-child(5) { animation-delay: 0.22s; }
.disc__bullets li:nth-child(6) { animation-delay: 0.27s; }
.disc__bullets li:nth-child(7) { animation-delay: 0.32s; }
.disc__bullets li:nth-child(8) { animation-delay: 0.37s; }
.disc__bullets li:nth-child(9) { animation-delay: 0.42s; }
@keyframes rfFadeUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------
   4 — „Alle Teile, ein Zentrum" — Grafik im Warum-Abschnitt
   --------------------------------------------------------- */
.rf-hub { margin-top: clamp(30px, 4vw, 52px); max-width: 100%; }
.rf-hub svg { width: 100%; height: auto; display: block; }
.rf-hub__cap {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #5E5C57;
}
.rf-hub__spoke { stroke: rgba(16, 45, 69, 0.3); stroke-width: 1; fill: none; }
.rf-hub__node { fill: #FFFFFF; stroke: rgba(16, 45, 69, 0.4); stroke-width: 1; }
.rf-hub__txt {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: #5E5C57;
}
.rf-hub__core { fill: var(--rf-marine); }
.rf-hub__core-txt {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  fill: #FFFFFF;
}
.rf-hub__out { stroke: var(--rf-bronze); stroke-width: 2; fill: none; stroke-linecap: round; }
.rf-hub__out-txt {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--rf-bronze);
}
@media (prefers-reduced-motion: no-preference) {
  .rf-hub__spoke { stroke-dasharray: 200; stroke-dashoffset: 200; }
  .rf-hub.is-in .rf-hub__spoke { animation: rfDraw 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .rf-hub.is-in .rf-hub__spoke:nth-of-type(2) { animation-delay: 0.08s; }
  .rf-hub.is-in .rf-hub__spoke:nth-of-type(3) { animation-delay: 0.16s; }
  .rf-hub.is-in .rf-hub__spoke:nth-of-type(4) { animation-delay: 0.24s; }
  .rf-hub.is-in .rf-hub__spoke:nth-of-type(5) { animation-delay: 0.32s; }
  .rf-hub__out { stroke-dasharray: 200; stroke-dashoffset: 200; }
  .rf-hub.is-in .rf-hub__out { animation: rfDraw 0.9s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
}
@keyframes rfDraw { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------
   5 — MARKTKACHELN: nacheinander, Zahl gewichtiger
   --------------------------------------------------------- */
.mk__group + .mk__group { border-top: 1px solid rgba(31, 31, 34, 0.1); padding-top: clamp(22px, 2.6vw, 34px); }
.mk__no { color: var(--rf-marine); }
.mk__note { color: #6E6B64; line-height: 1.5; }
html.uxr .mk__tile:nth-child(1) { transition-delay: 0.02s; }
html.uxr .mk__tile:nth-child(2) { transition-delay: 0.1s; }
html.uxr .mk__tile:nth-child(3) { transition-delay: 0.18s; }
html.uxr .mk__tile:nth-child(4) { transition-delay: 0.26s; }

/* ---------------------------------------------------------
   6 — Kapitel-Fortschritt am rechten Rand
   --------------------------------------------------------- */
.rf-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.rf-rail__item {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #98948A;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.rf-rail__txt {
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}
.rf-rail:hover .rf-rail__txt,
.rf-rail__item.is-on .rf-rail__txt { opacity: 1; transform: none; }
.rf-rail__bar {
  width: 16px;
  height: 2px;
  background: rgba(31, 31, 34, 0.22);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}
.rf-rail__item.is-on { color: var(--rf-marine); }
.rf-rail__item.is-on .rf-rail__bar { width: 30px; background: var(--rf-bronze); }
.rf-rail--dark .rf-rail__item { color: rgba(255, 255, 255, 0.6); }
.rf-rail--dark .rf-rail__bar { background: rgba(255, 255, 255, 0.3); }
.rf-rail--dark .rf-rail__item.is-on { color: #FFFFFF; }
@media (max-width: 1180px) { .rf-rail { display: none; } }

/* ---------------------------------------------------------
   7 — Kontakt: die drei Wörter schliessen den Kreis
   --------------------------------------------------------- */
.rf-echo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-family: "Montserrat", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rf-bronze);
}
.rf-echo span:nth-child(even) { opacity: 0.5; }

/* ---------------------------------------------------------
   Reduced motion — alles statisch
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rf-chain__step,
  .rf-chain__arrow,
  .hero__strip,
  .disc__bullets li { animation: none !important; opacity: 1 !important; clip-path: none !important; transform: none !important; }
  .rf-orbit { animation: none; }
}