/* NORDIX — Ablauf als Infoboxen (Vergleichsvariante a3)

   Dieselben drei Schritte wie in a2, aber als abgerundete Karten statt als
   Zeilen zwischen Trennlinien. Die Formensprache ist die der Leistungskarten
   (`.dienst`): gleicher Radius, gleicher Rahmen, gleicher Verlauf aus der
   oberen rechten Ecke. Eine zweite Kartenform hätte die Seite auseinander-
   gezogen — es gibt genau eine.

   Der Unterschied zu den Leistungskarten ist die Reihenfolge: Dort ist die
   Reihenfolge egal, hier ist sie die Aussage. Deshalb bleiben die Karten in
   einer Spalte untereinander und bekommen zwischen sich eine Verbindung —
   drei nebeneinander stehende Kacheln würden gleichzeitig statt nacheinander
   gelesen. */

.steps[data-form="box"]{
  --ab-r:16px;
  --ab-pad:clamp(22px,2.4vw,32px);
  margin-top:34px;
  position:relative;
  display:flex;flex-direction:column;gap:14px;
}

/* Die Verbindung ist EINE durchgehende Leiterbahn hinter den Karten. Sichtbar
   bleibt nur, was in den Lücken zwischen ihnen steht — die Karten sind deckend.

   Der naheliegende Weg, je Karte ein `::after` oberhalb ihres Randes, geht
   nicht: Die Karten brauchen `overflow:hidden`, damit der Verlauf an der
   abgerundeten Ecke abgeschnitten wird, und dasselbe `overflow` verschluckt
   auch alles, was über die Kante hinausragt. */
.steps[data-form="box"]::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:calc(var(--ab-pad) + 12px);top:0;bottom:0;width:2px;
  background:var(--orange);opacity:.55;
}
.steps[data-form="box"] .st{z-index:1}

/* Die Trennlinien der Zeilenfassung müssen weg — sonst hat jede Karte oben
   einen Strich, der nirgendwohin führt. */
.steps[data-form="box"] .st{
  display:grid;grid-template-columns:96px 1fr;gap:24px;
  padding:var(--ab-pad);
  border:1px solid var(--line);
  border-top:1px solid var(--line);
  border-radius:var(--ab-r);
  background:var(--panel);
  position:relative;isolation:isolate;overflow:hidden;
  transition:border-color .35s ease;
}
.steps[data-form="box"] .st:last-child{border-bottom:1px solid var(--line)}

.steps[data-form="box"] .st::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%,
    color-mix(in srgb,var(--orange) 9%,transparent) 0%,transparent 62%);
  opacity:.85;transition:opacity .45s ease;
}
.steps[data-form="box"] .st:hover{border-color:color-mix(in srgb,var(--orange) 55%,var(--line))}
.steps[data-form="box"] .st:hover::before{opacity:1}

@media(max-width:1000px){
  .steps[data-form="box"] .st{grid-template-columns:1fr;gap:10px}
  .steps[data-form="box"]::before{left:calc(var(--ab-pad) + 2px)}
}
@media(prefers-reduced-motion:reduce){
  .steps[data-form="box"] .st,
  .steps[data-form="box"] .st::before{transition:none}
}

/* Der Kostenvoranschlag-Hinweis in Schritt 01 (seit 23.08.2026).

   Er steht INNERHALB von Schritt 01 und nicht als vierte Karte: Der
   Kostenvoranschlag ist kein weiterer Schritt, den man geht, sondern das,
   was auf die Anfrage folgt. Eine vierte Karte hätte aus drei Schritten
   vier gemacht — und die Randspalte sagt daneben „3 Schritte".

   Der Strich links ist dieselbe Leiterbahn, die die Karten verbindet:
   gleiche Breite, gleiche Farbe, keine neue Formensprache.

   Beide Selektoren müssen über `.steps[data-form="box"]` laufen. Die
   Grundregeln `.steps p` und `.steps b` stehen im `<style>`-Block von
   final/index.html und haben dieselbe Spezifität wie ein bloßes `.kv2 b`;
   welche gewinnt, hinge dann an der Ladereihenfolge. Das ist zu dünn. */
.steps[data-form="box"] .kv2{
  margin-top:14px;padding-left:14px;
  border-left:2px solid var(--orange);
  font-size:13px;line-height:1.7;color:var(--ink-2);
}
.steps[data-form="box"] .kv2 b{
  display:inline;margin:0;
  font-family:var(--font-body);font-size:13px;
  text-transform:none;letter-spacing:0;color:var(--orange);
}