/* Praxoria Home Refinement v592
   Nur Sequenz 1: Zugangscode als Ticket unter dem Lern-Cockpit,
   Einlösung beim Öffnen des Cockpits, danach ein stärkerer Übergang in die Kurseinheit. */

html body.home.homeRefinedV592 .sceneLearnV588{
  overflow:hidden !important;
}

/* Mehr Luft in der ersten Szene: ein vertikaler Ablauf statt seitlicher Stapel. */
html body.home.homeRefinedV592 .sceneLearnV588 .learnerAtCodeV588{
  left:7.5% !important;
  top:37% !important;
  z-index:10 !important;
  animation:v592LearnerAtAccess 9.6s ease-in-out infinite !important;
}

html body.home.homeRefinedV592 .accessMomentV588{
  left:22% !important;
  top:39% !important;
  width:278px !important;
  padding:18px 22px !important;
  z-index:9 !important;
  border-radius:24px !important;
  border-color:rgba(69,168,204,.24) !important;
  box-shadow:0 22px 54px rgba(18,36,58,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
  transform-origin:74% 15% !important;
  animation:v592AccessRedeem 9.6s cubic-bezier(.22,.72,.18,1) infinite !important;
}

html body.home.homeRefinedV592 .codeFieldV588{
  height:46px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.78) !important;
}

/* Das Cockpit steht darüber und öffnet sich nach der Code-Eingabe sichtbar. */
html body.home.homeRefinedV592 .cockpitMomentV588{
  left:27% !important;
  top:8% !important;
  width:min(430px, 50%) !important;
  min-height:330px !important;
  padding:27px 31px 28px !important;
  z-index:6 !important;
  border-radius:28px !important;
  border-color:rgba(69,168,204,.20) !important;
  background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.66)) !important;
  box-shadow:0 30px 80px rgba(25,52,78,.075), inset 0 1px 0 rgba(255,255,255,.92) !important;
  transform-origin:center top !important;
  animation:v592CockpitOpen 9.6s cubic-bezier(.2,.72,.18,1) infinite !important;
}

html body.home.homeRefinedV592 .cockpitMomentV588::before{
  content:"Zugang aktiviert" !important;
  position:absolute !important;
  right:26px !important;
  top:25px !important;
  height:25px !important;
  padding:0 10px 0 25px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  background:rgba(69,168,204,.10) !important;
  border:1px solid rgba(69,168,204,.18) !important;
  color:rgba(23,33,52,.62) !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
  opacity:0 !important;
  transform:translateY(5px) scale(.96) !important;
  animation:v592AccessBadge 9.6s ease-in-out infinite !important;
}

html body.home.homeRefinedV592 .cockpitMomentV588::after{
  content:"" !important;
  position:absolute !important;
  right:calc(26px + 92px) !important;
  top:31px !important;
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  background:rgba(69,168,204,.74) !important;
  box-shadow:0 0 0 6px rgba(69,168,204,.08) !important;
  opacity:0 !important;
  transform:scale(.82) !important;
  animation:v592AccessBadgeDot 9.6s ease-in-out infinite !important;
}

html body.home.homeRefinedV592 .cockpitMomentV588 .sceneEyebrowV588,
html body.home.homeRefinedV592 .cockpitMomentV588 > strong{
  animation:v592CockpitHeader 9.6s ease-in-out infinite !important;
}

html body.home.homeRefinedV592 .courseFlowV588{
  display:grid !important;
  gap:13px !important;
  margin:22px 0 18px !important;
}

html body.home.homeRefinedV592 .courseFlowV588 .flowRowV588{
  opacity:0 !important;
  transform:translateY(8px) !important;
  animation:v592CockpitRow 9.6s ease-in-out infinite !important;
}
html body.home.homeRefinedV592 .courseFlowV588 .flowRowV588:nth-child(1){ animation-delay:.10s !important; }
html body.home.homeRefinedV592 .courseFlowV588 .flowRowV588:nth-child(2){ animation-delay:.28s !important; }
html body.home.homeRefinedV592 .courseFlowV588 .flowRowV588:nth-child(3){ animation-delay:.46s !important; }
html body.home.homeRefinedV592 .courseFlowV588 .flowRowV588.isQuietV588{
  animation-name:v592CockpitQuietRow !important;
}

/* Der nächste Schritt öffnet die Einheit, statt nur als statische Pille stehen zu bleiben. */
html body.home.homeRefinedV592 .nextPillV588{
  position:relative !important;
  display:grid !important;
  grid-template-columns:1fr 32px !important;
  grid-template-rows:auto auto !important;
  column-gap:14px !important;
  align-items:center !important;
  width:min(265px, 100%) !important;
  min-height:64px !important;
  padding:12px 14px 12px 17px !important;
  margin-top:6px !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:linear-gradient(135deg, rgba(69,168,204,.15), rgba(255,255,255,.84)) !important;
  border:1px solid rgba(69,168,204,.24) !important;
  box-shadow:0 18px 42px rgba(69,168,204,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
  opacity:0 !important;
  transform:translateY(10px) scale(.98) !important;
  animation:v592NextStepOpens 9.6s cubic-bezier(.2,.72,.18,1) infinite !important;
}
html body.home.homeRefinedV592 .nextPillV588::before{
  content:"" !important;
  position:absolute !important;
  inset:-1px !important;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.75) 42%, transparent 74%) !important;
  transform:translateX(-115%) !important;
  opacity:.0 !important;
  animation:v592NextShine 9.6s ease-in-out infinite !important;
}
html body.home.homeRefinedV592 .nextEyebrowV592{
  grid-column:1 !important;
  grid-row:1 !important;
  font-size:9px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:rgba(23,33,52,.55) !important;
}
html body.home.homeRefinedV592 .nextPillV588 > strong{
  grid-column:1 !important;
  grid-row:2 !important;
  display:block !important;
  font-size:15px !important;
  line-height:1.12 !important;
  letter-spacing:-.025em !important;
  color:#172134 !important;
}
html body.home.homeRefinedV592 .nextArrowV592{
  grid-column:2 !important;
  grid-row:1 / span 2 !important;
  position:relative !important;
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(69,168,204,.28) !important;
  box-shadow:0 0 0 7px rgba(69,168,204,.06) !important;
}
html body.home.homeRefinedV592 .nextArrowV592::before{
  content:"" !important;
  position:absolute !important;
  left:10px !important;
  top:9px !important;
  width:10px !important;
  height:10px !important;
  border-top:3px solid rgba(69,168,204,.86) !important;
  border-right:3px solid rgba(69,168,204,.86) !important;
  transform:rotate(45deg) !important;
}
html body.home.homeRefinedV592 .nextArrowV592::after{
  content:"" !important;
  position:absolute !important;
  left:9px !important;
  top:15px !important;
  width:13px !important;
  height:3px !important;
  border-radius:99px !important;
  background:rgba(69,168,204,.86) !important;
}

html body.home.homeRefinedV592 .unitMomentV588{
  left:36% !important;
  top:67% !important;
  bottom:auto !important;
  width:min(390px, 50%) !important;
  min-height:118px !important;
  padding:22px 26px !important;
  z-index:8 !important;
  border-radius:24px !important;
  border-color:rgba(210,165,78,.25) !important;
  background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,250,241,.72)) !important;
  box-shadow:0 28px 70px rgba(98,71,24,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
  transform-origin:32% 0 !important;
  animation:v592UnitOpens 9.6s cubic-bezier(.2,.72,.18,1) infinite !important;
}
html body.home.homeRefinedV592 .unitMomentV588::before{
  content:"" !important;
  position:absolute !important;
  top:-18px !important;
  left:52px !important;
  width:74px !important;
  height:3px !important;
  border-radius:99px !important;
  background:linear-gradient(90deg, rgba(210,165,78,0), rgba(210,165,78,.50), rgba(210,165,78,0)) !important;
  opacity:0 !important;
  transform:scaleX(.2) !important;
  transform-origin:left center !important;
  animation:v592OpenBeam 9.6s ease-in-out infinite !important;
}

/* Die alten Spuren werden zum sachlogischen Übergang: Code -> Cockpit -> Einheit. */
html body.home.homeRefinedV592 .traceLearnOneV588{
  left:35% !important;
  top:41% !important;
  width:20% !important;
  height:2px !important;
  transform:rotate(-60deg) !important;
  animation:v592CodeToCockpitTrace 9.6s ease-in-out infinite !important;
}
html body.home.homeRefinedV592 .traceLearnTwoV588{
  left:50% !important;
  top:60% !important;
  width:17% !important;
  height:2px !important;
  transform:rotate(60deg) !important;
  background:linear-gradient(90deg, rgba(210,165,78,0), rgba(210,165,78,.46), rgba(210,165,78,0)) !important;
  animation:v592CockpitToUnitTrace 9.6s ease-in-out infinite !important;
}

@keyframes v592LearnerAtAccess{
  0%,28%{ opacity:1; transform:translate(0,0) scale(1); }
  38%,66%{ opacity:.78; transform:translate(22px,-12px) scale(.98); }
  78%,100%{ opacity:.56; transform:translate(34px,-18px) scale(.96); }
}
@keyframes v592AccessRedeem{
  0%,24%{ opacity:1; transform:translate(0,0) scale(1); filter:none; }
  31%{ opacity:1; transform:translate(28px,-10px) scale(.96); filter:none; }
  42%{ opacity:0; transform:translate(126px,-118px) scale(.46); filter:blur(.7px); }
  43%,100%{ opacity:0; transform:translate(126px,-118px) scale(.46); filter:blur(.7px); }
}
@keyframes v592CockpitOpen{
  0%,22%{ opacity:.86; transform:translateY(8px) scale(.965); clip-path:inset(0 0 42% 0 round 28px); filter:blur(.15px); }
  34%,88%{ opacity:1; transform:translateY(0) scale(1); clip-path:inset(0 0 0 0 round 28px); filter:none; }
  100%{ opacity:.96; transform:translateY(-1px) scale(.996); clip-path:inset(0 0 0 0 round 28px); filter:none; }
}
@keyframes v592AccessBadge{
  0%,28%{ opacity:0; transform:translateY(5px) scale(.96); }
  40%,72%{ opacity:1; transform:translateY(0) scale(1); }
  88%,100%{ opacity:.62; transform:translateY(-1px) scale(.985); }
}
@keyframes v592AccessBadgeDot{
  0%,28%{ opacity:0; transform:scale(.72); }
  40%,72%{ opacity:1; transform:scale(1); }
  88%,100%{ opacity:.72; transform:scale(.92); }
}
@keyframes v592CockpitHeader{
  0%,18%{ opacity:.72; transform:translateY(2px); }
  32%,100%{ opacity:1; transform:translateY(0); }
}
@keyframes v592CockpitRow{
  0%,31%{ opacity:0; transform:translateY(8px); }
  42%,88%{ opacity:1; transform:translateY(0); }
  100%{ opacity:.78; transform:translateY(-1px); }
}
@keyframes v592CockpitQuietRow{
  0%,31%{ opacity:0; transform:translateY(8px); }
  42%,88%{ opacity:.60; transform:translateY(0); }
  100%{ opacity:.48; transform:translateY(-1px); }
}
@keyframes v592NextStepOpens{
  0%,48%{ opacity:0; transform:translateY(10px) scale(.98); }
  58%,72%{ opacity:1; transform:translateY(0) scale(1); box-shadow:0 18px 42px rgba(69,168,204,.08), inset 0 1px 0 rgba(255,255,255,.92); }
  80%,90%{ opacity:1; transform:translateY(-2px) scale(1.025); box-shadow:0 24px 58px rgba(69,168,204,.15), inset 0 1px 0 rgba(255,255,255,.94); }
  100%{ opacity:.86; transform:translateY(-2px) scale(.998); }
}
@keyframes v592NextShine{
  0%,60%{ opacity:0; transform:translateX(-115%); }
  72%{ opacity:.75; }
  84%,100%{ opacity:0; transform:translateX(118%); }
}
@keyframes v592UnitOpens{
  0%,66%{ opacity:0; transform:translateY(-12px) scale(.96); clip-path:inset(0 0 100% 0 round 24px); filter:blur(.6px); }
  78%,92%{ opacity:1; transform:translateY(0) scale(1); clip-path:inset(0 0 0 0 round 24px); filter:none; }
  100%{ opacity:.92; transform:translateY(-1px) scale(.996); clip-path:inset(0 0 0 0 round 24px); filter:none; }
}
@keyframes v592OpenBeam{
  0%,66%{ opacity:0; transform:scaleX(.2); }
  76%,88%{ opacity:.72; transform:scaleX(1); }
  100%{ opacity:0; transform:scaleX(1); }
}
@keyframes v592CodeToCockpitTrace{
  0%,24%{ opacity:0; transform:scaleX(.2) rotate(-60deg); }
  32%,43%{ opacity:.48; transform:scaleX(1) rotate(-60deg); }
  54%,100%{ opacity:0; transform:scaleX(1) rotate(-60deg); }
}
@keyframes v592CockpitToUnitTrace{
  0%,55%{ opacity:0; transform:scaleX(.18) rotate(60deg); }
  68%,82%{ opacity:.48; transform:scaleX(1) rotate(60deg); }
  95%,100%{ opacity:.12; transform:scaleX(1) rotate(60deg); }
}

@media (prefers-reduced-motion: reduce){
  html body.home.homeRefinedV592 .sceneLearnV588 .learnerAtCodeV588,
  html body.home.homeRefinedV592 .accessMomentV588,
  html body.home.homeRefinedV592 .cockpitMomentV588,
  html body.home.homeRefinedV592 .cockpitMomentV588::before,
  html body.home.homeRefinedV592 .cockpitMomentV588::after,
  html body.home.homeRefinedV592 .cockpitMomentV588 .sceneEyebrowV588,
  html body.home.homeRefinedV592 .cockpitMomentV588 > strong,
  html body.home.homeRefinedV592 .courseFlowV588 .flowRowV588,
  html body.home.homeRefinedV592 .nextPillV588,
  html body.home.homeRefinedV592 .nextPillV588::before,
  html body.home.homeRefinedV592 .unitMomentV588,
  html body.home.homeRefinedV592 .unitMomentV588::before,
  html body.home.homeRefinedV592 .traceLearnOneV588,
  html body.home.homeRefinedV592 .traceLearnTwoV588{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    filter:none !important;
  }
  html body.home.homeRefinedV592 .accessMomentV588{
    opacity:0 !important;
  }
  html body.home.homeRefinedV592 .courseFlowV588 .flowRowV588.isQuietV588{
    opacity:.60 !important;
  }
}

@media (max-width: 1220px){
  html body.home.homeRefinedV592 .cockpitMomentV588{ left:24% !important; width:min(410px, 54%) !important; }
  html body.home.homeRefinedV592 .accessMomentV588{ left:18% !important; }
  html body.home.homeRefinedV592 .unitMomentV588{ left:31% !important; width:min(370px, 56%) !important; }
}

@media (max-width: 680px){
  html body.home.homeRefinedV592 .cockpitMomentV588{ left:9% !important; top:9% !important; width:82% !important; min-height:305px !important; }
  html body.home.homeRefinedV592 .accessMomentV588{ left:15% !important; top:43% !important; width:68% !important; }
  html body.home.homeRefinedV592 .unitMomentV588{ left:12% !important; top:70% !important; width:76% !important; }
}