/* Praxoria Startseite – v520 Ablaufbereich: Rahmen, Rhythmus, Integration
   Ziel: kein weißer Fremdcontainer, keine auslaufenden Aktionsspalten,
   ruhiger Übergang zum Warum-Bereich. */

body.homeRefinedV520{
  --flow-rule: color-mix(in oklab, var(--border) 56%, transparent);
  --flow-rule-soft: color-mix(in oklab, var(--border) 34%, transparent);
  --flow-text: color-mix(in oklab, var(--text) 70%, var(--muted));
}

/* Alte Ablauf-Inszenierung vollständig neutralisieren. */
html body.home.homeRefinedV520 .band.startBand.certFlowSection{
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: minmax(250px, 342px) minmax(0, 1fr) !important;
  gap: clamp(38px, 5vw, 76px) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: clamp(24px, 3vw, 38px) 0 0 !important;
  padding: clamp(38px, 4.2vw, 58px) 0 clamp(38px, 4vw, 56px) !important;
  border-top: 1px solid var(--flow-rule) !important;
  border-bottom: 1px solid var(--flow-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: clip !important;
  transform: none !important;
}

html body.home.homeRefinedV520 .band.startBand.certFlowSection::before,
html body.home.homeRefinedV520 .band.startBand.certFlowSection::after,
html.js body.home.homeRefinedV520 .band.startBand.certFlowSection::before,
html.js body.home.homeRefinedV520 .band.startBand.certFlowSection::after{
  content: none !important;
  display: none !important;
}

html body.home.homeRefinedV520 .certFlowIntro{
  position: sticky !important;
  top: 94px !important;
  align-self: start !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.home.homeRefinedV520 .certFlowEyebrow{
  margin: 0 0 .92rem !important;
  color: color-mix(in oklab, var(--accent) 72%, var(--text)) !important;
  font-size: .78rem !important;
  line-height: 1 !important;
  font-weight: 860 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

html body.home.homeRefinedV520 .certFlowIntro h2{
  margin: 0 !important;
  max-width: 9.6ch !important;
  color: var(--text) !important;
  font-size: clamp(3rem, 4.85vw, 5rem) !important;
  line-height: .94 !important;
  letter-spacing: -.068em !important;
  text-wrap: balance !important;
}

html body.home.homeRefinedV520 .certFlowIntro h2::after{
  content: "" !important;
  display: block !important;
  width: min(100%, 15.5rem) !important;
  height: 2px !important;
  margin: clamp(18px, 2vw, 24px) 0 0 !important;
  background: linear-gradient(90deg, var(--accent), var(--accent3), transparent 88%) !important;
  border-radius: 999px !important;
}

html body.home.homeRefinedV520 .certFlowIntro p{
  max-width: 26ch !important;
  margin: clamp(18px, 2.1vw, 26px) 0 0 !important;
  color: var(--flow-text) !important;
  font-size: clamp(1.02rem, 1.12vw, 1.18rem) !important;
  line-height: 1.55 !important;
}

html body.home.homeRefinedV520 .certFlowList{
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border-top: 1px solid var(--flow-rule) !important;
  border-bottom: 1px solid var(--flow-rule) !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body.home.homeRefinedV520 .certFlowItem{
  --flow-accent: var(--accent);
  position: relative !important;
  display: grid !important;
  grid-template-columns: clamp(56px, 5vw, 76px) minmax(0, 1fr) minmax(150px, 184px) !important;
  gap: clamp(20px, 3vw, 44px) !important;
  align-items: start !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(25px, 3vw, 38px) 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body.home.homeRefinedV520 .certFlowItem + .certFlowItem{
  border-top: 1px solid var(--flow-rule-soft) !important;
}

html body.home.homeRefinedV520 .certFlowItem.is-one{ --flow-accent: var(--accent); }
html body.home.homeRefinedV520 .certFlowItem.is-two{ --flow-accent: var(--accent3); }
html body.home.homeRefinedV520 .certFlowItem.is-three{ --flow-accent: var(--accent2); }

html body.home.homeRefinedV520 .certFlowNr{
  min-width: 0 !important;
  margin: -.02em 0 0 !important;
  color: color-mix(in oklab, var(--flow-accent) 86%, var(--text)) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(2.75rem, 4.3vw, 4.5rem) !important;
  line-height: .74 !important;
  font-weight: 700 !important;
  letter-spacing: -.07em !important;
}

html body.home.homeRefinedV520 .certFlowCopy{
  min-width: 0 !important;
  max-width: 56rem !important;
  display: grid !important;
  grid-template-columns: minmax(176px, 230px) minmax(0, 1fr) !important;
  gap: clamp(18px, 2.5vw, 36px) !important;
  align-items: start !important;
}

html body.home.homeRefinedV520 .certFlowMeta{
  grid-column: 1 !important;
  grid-row: 2 !important;
  max-width: 18ch !important;
  margin: .64rem 0 0 !important;
  color: color-mix(in oklab, var(--text) 63%, var(--muted)) !important;
  font-size: .83rem !important;
  line-height: 1.33 !important;
  font-weight: 780 !important;
  letter-spacing: .01em !important;
}

html body.home.homeRefinedV520 .certFlowCopy h3{
  grid-column: 1 !important;
  grid-row: 1 !important;
  max-width: 15ch !important;
  margin: 0 !important;
  color: var(--text) !important;
  font-size: clamp(1.1rem, 1.3vw, 1.38rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.028em !important;
  font-weight: 860 !important;
  text-wrap: balance !important;
}

html body.home.homeRefinedV520 .certFlowCopy p{
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  max-width: 42rem !important;
  margin: 0 !important;
  color: var(--flow-text) !important;
  font-size: clamp(1.02rem, 1.12vw, 1.18rem) !important;
  line-height: 1.52 !important;
}

html body.home.homeRefinedV520 .certFlowActions{
  min-width: 0 !important;
  width: 100% !important;
  margin: .1rem 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: .66rem !important;
}

html body.home.homeRefinedV520 .certFlowActions a,
html body.home.homeRefinedV520 .certFlowActions button{
  appearance: none !important;
  display: inline !important;
  max-width: 100% !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 .22rem !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in oklab, var(--flow-accent) 46%, var(--border-strong)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font: inherit !important;
  font-size: clamp(.95rem, .98vw, 1.02rem) !important;
  line-height: 1.24 !important;
  font-weight: 820 !important;
  letter-spacing: -.016em !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: normal !important;
  cursor: pointer !important;
}

html body.home.homeRefinedV520 .certFlowActions a + a,
html body.home.homeRefinedV520 .certFlowActions a + button,
html body.home.homeRefinedV520 .certFlowActions button + a{
  color: color-mix(in oklab, var(--text) 68%, var(--muted)) !important;
  border-bottom-color: color-mix(in oklab, var(--border-strong) 42%, transparent) !important;
}

html body.home.homeRefinedV520 .certFlowActions a:hover,
html body.home.homeRefinedV520 .certFlowActions a:focus-visible,
html body.home.homeRefinedV520 .certFlowActions button:hover,
html body.home.homeRefinedV520 .certFlowActions button:focus-visible{
  color: color-mix(in oklab, var(--flow-accent) 78%, var(--text)) !important;
  border-bottom-color: color-mix(in oklab, var(--flow-accent) 72%, var(--border-strong)) !important;
  outline: none !important;
}

html body.home.homeRefinedV520 .certFlowActions a:focus-visible,
html body.home.homeRefinedV520 .certFlowActions button:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--flow-accent) 30%, transparent) !important;
  outline-offset: 4px !important;
}

/* Anschluss an den folgenden Qualitätsbereich: keine große weiße Zwischenfläche. */
html body.home.homeRefinedV520 .whyBand{
  margin-top: clamp(34px, 4.5vw, 62px) !important;
}

@media (min-width: 1220px){
  html body.home.homeRefinedV520 .certFlowItem:hover{
    background: linear-gradient(90deg,
      color-mix(in oklab, var(--flow-accent) 4%, transparent),
      transparent 36%) !important;
  }
}

@media (max-width: 1320px){
  html body.home.homeRefinedV520 .band.startBand.certFlowSection{
    grid-template-columns: minmax(230px, 310px) minmax(0, 1fr) !important;
    gap: clamp(28px, 4vw, 54px) !important;
  }
  html body.home.homeRefinedV520 .certFlowItem{
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 22px !important;
  }
  html body.home.homeRefinedV520 .certFlowActions{
    grid-column: 2 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: .62rem 1.1rem !important;
  }
}

@media (max-width: 1040px){
  html body.home.homeRefinedV520 .band.startBand.certFlowSection{
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  html body.home.homeRefinedV520 .certFlowIntro{
    position: static !important;
    max-width: 760px !important;
  }
  html body.home.homeRefinedV520 .certFlowIntro h2{
    max-width: 16ch !important;
    font-size: clamp(2.45rem, 6vw, 3.8rem) !important;
  }
  html body.home.homeRefinedV520 .certFlowIntro p{
    max-width: 52ch !important;
  }
}

@media (max-width: 760px){
  html body.home.homeRefinedV520 .band.startBand.certFlowSection{
    margin-top: 20px !important;
    padding: 30px 0 38px !important;
    overflow: visible !important;
  }
  html body.home.homeRefinedV520 .certFlowIntro h2{
    max-width: 12ch !important;
    font-size: clamp(2.25rem, 10vw, 3rem) !important;
  }
  html body.home.homeRefinedV520 .certFlowList{
    overflow: visible !important;
  }
  html body.home.homeRefinedV520 .certFlowItem{
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 22px 0 !important;
    overflow: visible !important;
  }
  html body.home.homeRefinedV520 .certFlowNr{
    font-size: 3rem !important;
  }
  html body.home.homeRefinedV520 .certFlowCopy{
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  html body.home.homeRefinedV520 .certFlowMeta,
  html body.home.homeRefinedV520 .certFlowCopy h3,
  html body.home.homeRefinedV520 .certFlowCopy p{
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  html body.home.homeRefinedV520 .certFlowCopy p{
    margin-top: .72rem !important;
  }
  html body.home.homeRefinedV520 .certFlowActions{
    grid-column: 2 !important;
  }
}