/* Praxoria Startseite – v518 process section refinement
   Scope: index.html only. Goal: make the “Vom Kurs zum Zertifikat” section calmer, less table-like and more intentional. */

body.homeRefinedV518{
  --home-v518-rule: color-mix(in oklab, var(--border) 64%, transparent);
  --home-v518-rule-soft: color-mix(in oklab, var(--border) 36%, transparent);
  --home-v518-muted: color-mix(in oklab, var(--text) 62%, var(--muted));
  --home-v518-soft-blue: color-mix(in oklab, var(--accent) 9%, transparent);
  --home-v518-soft-gold: color-mix(in oklab, var(--accent3) 8%, transparent);
  --home-v518-soft-green: color-mix(in oklab, var(--accent2) 8%, transparent);
}

/* Section shell: no tinted band crossing through the steps. */
body.homeRefinedV518 .band.startBand{
  display: grid !important;
  grid-template-columns: minmax(250px, 360px) minmax(0, 1fr) !important;
  gap: clamp(34px, 5vw, 74px) !important;
  align-items: start !important;
  margin-top: clamp(18px, 2.6vw, 34px) !important;
  padding-top: clamp(28px, 3.6vw, 48px) !important;
  padding-bottom: clamp(34px, 4.6vw, 64px) !important;
  border-top: 1px solid var(--home-v518-rule) !important;
  background: transparent !important;
  overflow: visible !important;
}

body.homeRefinedV518 .band.startBand::before,
body.homeRefinedV518 .band.startBand::after{
  content: none !important;
  display: none !important;
}

body.homeRefinedV518 .band.startBand .sectionTitle{
  margin: 0 !important;
  max-width: 330px !important;
}

body.homeRefinedV518 .band.startBand .sectionTitle h2{
  max-width: 9.8ch !important;
  margin: 0 !important;
  font-size: clamp(2.25rem, 3.6vw, 4.05rem) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}

body.homeRefinedV518 .band.startBand .sectionTitle h2::after,
body.homeRefinedV518 .band.startBand .headBlock::after{
  content: none !important;
  display: none !important;
}

body.homeRefinedV518 .band.startBand .sub{
  margin-top: clamp(14px, 1.7vw, 18px) !important;
  padding-top: clamp(14px, 1.7vw, 18px) !important;
  border-top: 2px solid transparent !important;
  border-image: linear-gradient(90deg, var(--accent), var(--accent3), transparent 78%) 1 !important;
  max-width: 25ch !important;
  font-size: clamp(1rem, 1.06vw, 1.12rem) !important;
  line-height: 1.52 !important;
  color: var(--home-v518-muted) !important;
}

/* Process: editorial rows rather than three large boxed columns. */
body.homeRefinedV518 .stepsStage{
  margin: 0 !important;
  position: relative !important;
}

body.homeRefinedV518 .stepsTrack{
  display: none !important;
}

body.homeRefinedV518 .steps{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-top: 1px solid var(--home-v518-rule) !important;
  border-bottom: 1px solid var(--home-v518-rule) !important;
}

body.homeRefinedV518 .step{
  --stepAccent: var(--accent);
  display: grid !important;
  grid-template-columns: minmax(190px, .38fr) minmax(250px, .8fr) minmax(190px, .36fr) !important;
  gap: clamp(20px, 3.2vw, 44px) !important;
  align-items: start !important;
  padding: clamp(22px, 2.35vw, 32px) 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.homeRefinedV518 .step + .step{
  border-top: 1px solid var(--home-v518-rule-soft) !important;
}

body.homeRefinedV518 .step::before,
body.homeRefinedV518 .step::after{
  content: none !important;
  display: none !important;
}

body.homeRefinedV518 .step.s1{ --stepAccent: var(--accent); }
body.homeRefinedV518 .step.s2{ --stepAccent: var(--accent3); }
body.homeRefinedV518 .step.s3{ --stepAccent: var(--accent2); }

body.homeRefinedV518 .stepHead{
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: clamp(14px, 1.6vw, 18px) !important;
  align-items: start !important;
}

body.homeRefinedV518 .stepNr{
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
  color: color-mix(in oklab, var(--stepAccent) 84%, var(--text)) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(2.55rem, 3.4vw, 4.05rem) !important;
  line-height: .82 !important;
  font-weight: 700 !important;
  letter-spacing: -.055em !important;
}

body.homeRefinedV518 .stepMeta h3{
  margin: 0 !important;
  color: var(--text) !important;
  font-size: clamp(1.14rem, 1.35vw, 1.38rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.026em !important;
  font-weight: 860 !important;
}

body.homeRefinedV518 .stepHint{
  display: block !important;
  width: auto !important;
  margin-top: .62rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: color-mix(in oklab, var(--text) 54%, var(--muted)) !important;
  font-size: .82rem !important;
  line-height: 1.32 !important;
  text-transform: none !important;
  letter-spacing: .018em !important;
  font-weight: 760 !important;
}

body.homeRefinedV518 .step p{
  max-width: 38rem !important;
  margin: .08rem 0 0 !important;
  color: var(--home-v518-muted) !important;
  font-size: clamp(1rem, 1.05vw, 1.12rem) !important;
  line-height: 1.56 !important;
}

body.homeRefinedV518 .stepActions{
  margin: .08rem 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: .68rem !important;
}

body.homeRefinedV518 .stepActions .btn,
body.homeRefinedV518 .stepActions .btn.stepLink,
body.homeRefinedV518 .stepActions .stepBtn{
  padding: 0 0 .18rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: .98rem !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  border-bottom: 1px solid color-mix(in oklab, var(--stepAccent) 42%, var(--border-strong)) !important;
}

body.homeRefinedV518 .stepActions .btn.stepLink{
  color: color-mix(in oklab, var(--text) 62%, var(--muted)) !important;
  border-bottom-color: color-mix(in oklab, var(--border-strong) 42%, transparent) !important;
}

body.homeRefinedV518 .stepActions .btn:hover,
body.homeRefinedV518 .stepActions .btn:focus-visible{
  color: color-mix(in oklab, var(--stepAccent) 72%, var(--text)) !important;
  background: transparent !important;
  border-bottom-color: color-mix(in oklab, var(--stepAccent) 74%, var(--border-strong)) !important;
  transform: none !important;
}

/* Responsive: keep the logic readable instead of squeezing the three columns. */
@media (max-width: 1120px){
  body.homeRefinedV518 .band.startBand{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body.homeRefinedV518 .band.startBand .sectionTitle{
    max-width: 680px !important;
  }

  body.homeRefinedV518 .band.startBand .sectionTitle h2{
    max-width: 18ch !important;
  }

  body.homeRefinedV518 .band.startBand .sub{
    max-width: 46ch !important;
  }
}

@media (max-width: 880px){
  body.homeRefinedV518 .step{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 22px 0 !important;
  }

  body.homeRefinedV518 .stepHead{
    grid-template-columns: 48px minmax(0,1fr) !important;
  }

  body.homeRefinedV518 .stepActions{
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: .7rem 1rem !important;
  }
}

@media (max-width: 620px){
  body.homeRefinedV518 .band.startBand{
    margin-top: 10px !important;
    padding-top: 24px !important;
  }

  body.homeRefinedV518 .band.startBand .sectionTitle h2{
    font-size: clamp(2.05rem, 11vw, 3.1rem) !important;
  }

  body.homeRefinedV518 .stepNr{
    font-size: 3rem !important;
  }
}