/* Basetrain vor Ort — Abschlusskasten der Netzwerk-Strecke.

   Kein eigener Vollbreiten-Abschnitt mehr, sondern ein umrandeter Kasten im
   selben Grund wie das Netzwerk darueber. Er beantwortet die Frage, die bei
   den Netzwerkzahlen entsteht — woher weiss ich, dass die etwas taugen — und
   gehoert deshalb sichtbar zu diesem Block, nicht daneben.

   Kartenaufbau wie die Reihe in "Unser Service" (Icon, nummerierter Titel,
   Text, Flaeche am Fuss). Zwischen den Karten sitzt ein Pfeil, damit die Reihe
   als Ablauf liest und nicht als drei gleichrangige Angebote. */

/* Panelmasse wie .pl — das Panel steht in der Buehne und muss sich wie die
   Nachbarn verhalten. */
.rv {
  background: var(--ink-800);
  padding: 120px 64px 128px;
}

.rv-inner { width: 100%; max-width: 1400px; margin: 0 auto; }

.rv-head { max-width: 780px; margin-bottom: 56px; }

.rv-eyebrow {
  margin: 0 0 20px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mint);
}

.rv-h2 {
  margin: 0 0 20px;
  font-family: Syncopate, Manrope, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.1vw, 32px);
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pale);
}

.rv-lead {
  margin: 0;
  max-width: 40em;
  font-size: 17px;
  line-height: 28px;
  color: var(--tx-2);
}

/* Die drei Schritte ---------------------------------------------------- */
.rv-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 46px;
}

.rv-step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--ink-500);
  border-radius: var(--r-panel);
  background: var(--ink-700);
}

/* Pfeil zwischen den Karten — er trägt die Abfolge. */
.rv-step + .rv-step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -33px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: var(--mint);
  opacity: .85;
  -webkit-mask: var(--rv-arrow) center / contain no-repeat;
  mask: var(--rv-arrow) center / contain no-repeat;
}

.rv-steps {
  --rv-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.rv-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--mint-800);
  border-radius: var(--r-card);
  background: var(--ink-800);
  color: var(--mint);
}

.rv-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rv-step-title {
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--tx-1);
}

.rv-num { color: var(--tx-3); font-weight: 500; }

.rv-step-text {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--tx-1);
}




/* Fuß ------------------------------------------------------------------ */
.rv-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 44px;
}

.rv-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid var(--mint);
  border-radius: 999px;
  background: var(--mint-800);
  color: var(--tx-1);
  font-size: 15px;
  font-weight: 600;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease),
              transform .25s var(--ease);
}

.rv-btn:hover { border-color: var(--mint-300); box-shadow: 0 0 0 3px rgba(var(--akzent-rgb), .18); transform: translateY(-2px); }
.rv-btn:focus-visible { outline: 2px solid var(--mint-300); outline-offset: 3px; }

.rv-foot-note {
  margin: 0;
  max-width: 34em;
  font-size: 12.5px;
  line-height: 20px;
  color: var(--tx-2);
}

/* Responsive ----------------------------------------------------------- */
@media (max-width: 1500px) {
  .rv { padding: 104px 40px 112px; }
  .rv-steps { gap: 40px; }
  .rv-step + .rv-step::before { left: -30px; }
}

@media (max-width: 1000px) {
  .rv-steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Der Pfeil dreht sich mit dem Umbruch nach unten. */
  .rv-step + .rv-step::before {
    top: -30px;
    left: 50%;
    margin: 0 0 0 -10px;
    transform: rotate(90deg);
  }
}

@media (max-width: 768px) {
  .rv { padding: 80px 24px 88px; }
  .rv-head { margin-bottom: 40px; }
  .rv-lead { font-size: 16px; line-height: 26px; }
  .rv-step { padding: 24px 20px; }
}

@media (max-width: 480px) {
  .rv { padding: 64px 20px 72px; }
  .rv-btn { width: 100%; justify-content: center; }
}