/* Praxoria Startseite – v568: narrative Lernführung-Skizze.
   Basis bleibt v564/v567; nur die SVG-Story unter Lernführung wird neu inszeniert. */

html body.home.homeRefinedV568 .whyLearningStory{
  width:min(100%, 386px) !important;
  margin: clamp(18px, 2vw, 26px) 0 clamp(6px, 1vw, 10px) !important;
  opacity:.96 !important;
  color: color-mix(in oklab, var(--ink) 64%, var(--accent)) !important;
}
html body.home.homeRefinedV568 .whyLearningStory svg{
  display:block !important;
  width:100% !important;
  height:auto !important;
  overflow:visible !important;
}

html body.home.homeRefinedV568 .whyLearningStory .storySources{
  color: color-mix(in oklab, var(--ink) 48%, var(--accent)) !important;
}
html body.home.homeRefinedV568 .whyLearningStory .storySource{
  stroke-width:1.35 !important;
  opacity:.22;
  transform-box:fill-box;
  transform-origin:center;
  animation: storySourceV568 9.6s cubic-bezier(.42,0,.18,1) infinite;
}
html body.home.homeRefinedV568 .whyLearningStory .sourceA{ stroke: color-mix(in oklab, var(--accent) 72%, var(--ink)) !important; animation-delay:0s; }
html body.home.homeRefinedV568 .whyLearningStory .sourceB{ stroke: color-mix(in oklab, var(--accent3) 68%, var(--ink)) !important; animation-delay:.12s; }
html body.home.homeRefinedV568 .whyLearningStory .sourceC{ stroke: color-mix(in oklab, var(--accent2) 62%, var(--ink)) !important; animation-delay:.24s; }
html body.home.homeRefinedV568 .whyLearningStory .looseLine{
  stroke: color-mix(in oklab, var(--ink) 30%, transparent) !important;
  stroke-width:1.2 !important;
  opacity:.14;
  animation: storyLooseV568 9.6s ease-in-out infinite;
}

html body.home.homeRefinedV568 .whyLearningStory .storyThread{
  stroke-width:1.55 !important;
  stroke-dasharray:1 !important;
  stroke-dashoffset:1;
  opacity:0;
  filter:url(#whyStoryGlowV568);
  animation: storyThreadV568 9.6s cubic-bezier(.35,.04,.18,1) infinite;
}
html body.home.homeRefinedV568 .whyLearningStory .t1{ animation-delay:.05s; }
html body.home.homeRefinedV568 .whyLearningStory .t2{ animation-delay:.22s; }
html body.home.homeRefinedV568 .whyLearningStory .t3{ animation-delay:.38s; }

html body.home.homeRefinedV568 .whyLearningStory .storyLearner{
  stroke: color-mix(in oklab, var(--ink) 58%, var(--accent)) !important;
  stroke-width:1.65 !important;
  opacity:0;
  animation: storyLearnerV568 9.6s cubic-bezier(.32,.04,.2,1) infinite;
}
html body.home.homeRefinedV568 .whyLearningStory .desk,
html body.home.homeRefinedV568 .whyLearningStory .chair{
  opacity:.34;
}
html body.home.homeRefinedV568 .whyLearningStory .hair{
  stroke: color-mix(in oklab, var(--ink) 46%, var(--accent3)) !important;
  opacity:.38;
}
html body.home.homeRefinedV568 .whyLearningStory .arm{
  stroke: color-mix(in oklab, var(--ink) 54%, var(--accent3)) !important;
  animation: storyArmV568 9.6s ease-in-out infinite;
}

html body.home.homeRefinedV568 .whyLearningStory .storyLaptop{
  stroke: color-mix(in oklab, var(--ink) 50%, var(--accent2)) !important;
  stroke-width:1.5 !important;
  opacity:0;
  animation: storyLaptopV568 9.6s ease-in-out infinite;
}
html body.home.homeRefinedV568 .whyLearningStory .screenLine,
html body.home.homeRefinedV568 .whyLearningStory .screenProgress{
  stroke: color-mix(in oklab, var(--accent2) 66%, var(--ink)) !important;
  stroke-dasharray:1 !important;
  stroke-dashoffset:1;
  opacity:.62;
  animation: storyScreenLineV568 9.6s cubic-bezier(.28,.02,.18,1) infinite;
}
html body.home.homeRefinedV568 .whyLearningStory .s2{ animation-delay:.12s; }
html body.home.homeRefinedV568 .whyLearningStory .screenProgress{ stroke-width:2.2 !important; animation-delay:.24s; }

html body.home.homeRefinedV568 .whyLearningStory .storyCockpit{
  stroke: color-mix(in oklab, var(--accent2) 60%, var(--ink)) !important;
  stroke-width:1.4 !important;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation: storyCockpitV568 9.6s cubic-bezier(.32,.02,.18,1) infinite;
}
html body.home.homeRefinedV568 .whyLearningStory .cockpitStep,
html body.home.homeRefinedV568 .whyLearningStory .cockpitHead{
  stroke-dasharray:1 !important;
  stroke-dashoffset:1;
  pathLength:1;
  animation: storyCockpitLinesV568 9.6s cubic-bezier(.3,.02,.18,1) infinite;
}
html body.home.homeRefinedV568 .whyLearningStory .cockpitStep.b{ animation-delay:.18s; }
html body.home.homeRefinedV568 .whyLearningStory .cockpitDot{
  fill: color-mix(in oklab, var(--accent2) 70%, white) !important;
  stroke: color-mix(in oklab, var(--accent2) 58%, var(--ink)) !important;
  animation: storyDotPulseV568 9.6s ease-in-out infinite;
}

html body.home.homeRefinedV568 .whyLearningStory .guidedLine{
  stroke-width:1.8 !important;
  stroke-dasharray:1 !important;
  stroke-dashoffset:1;
  opacity:0;
  animation: storyGuideLineV568 9.6s cubic-bezier(.28,.02,.16,1) infinite;
}
html body.home.homeRefinedV568 .whyLearningStory .guideDot{
  fill: color-mix(in oklab, var(--accent2) 68%, white) !important;
  stroke: color-mix(in oklab, var(--accent2) 58%, var(--ink)) !important;
  opacity:0;
  animation: storyGuideDotV568 9.6s ease-in-out infinite;
}
html body.home.homeRefinedV568 .whyLearningStory .d1{ animation-delay:0s; }
html body.home.homeRefinedV568 .whyLearningStory .d2{ animation-delay:.18s; }
html body.home.homeRefinedV568 .whyLearningStory .d3{ animation-delay:.36s; }

html body.home.homeRefinedV568 .whyLearningStory .storyLabel{
  font-family: var(--sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:8px !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
  fill: color-mix(in oklab, var(--ink) 62%, transparent) !important;
  opacity:0;
}
html body.home.homeRefinedV568 .whyLearningStory .cockpitLabel{
  animation: storyCockpitLabelV568 9.6s ease-in-out infinite;
}
html body.home.homeRefinedV568 .whyLearningStory .guideLabel{
  font-size:8.5px !important;
  fill: color-mix(in oklab, var(--accent2) 60%, var(--ink)) !important;
  animation: storyGuideLabelV568 9.6s ease-in-out infinite;
}

@keyframes storySourceV568{
  0%, 8%{ opacity:.16; transform:translate(0,0) rotate(0deg); }
  14%, 28%{ opacity:.48; transform:translate(0,0) rotate(0deg); }
  42%, 66%{ opacity:.24; transform:translate(5px,-3px) scale(.985); }
  86%,100%{ opacity:.18; transform:translate(5px,-3px) scale(.985); }
}
@keyframes storyLooseV568{
  0%, 30%{ opacity:.18; }
  48%,100%{ opacity:.04; }
}
@keyframes storyThreadV568{
  0%, 16%{ stroke-dashoffset:1; opacity:0; }
  25%{ opacity:.66; }
  42%, 78%{ stroke-dashoffset:0; opacity:.52; }
  100%{ stroke-dashoffset:0; opacity:.18; }
}
@keyframes storyLearnerV568{
  0%, 30%{ opacity:0; transform:translateX(-7px) translateY(2px); }
  44%, 82%{ opacity:.72; transform:translateX(0) translateY(0); }
  100%{ opacity:.44; transform:translateX(0) translateY(0); }
}
@keyframes storyArmV568{
  0%, 44%{ transform:translateX(-2px) translateY(1px); }
  56%,100%{ transform:translateX(0) translateY(0); }
}
@keyframes storyLaptopV568{
  0%, 34%{ opacity:0; transform:translateY(3px); }
  48%, 84%{ opacity:.72; transform:translateY(0); }
  100%{ opacity:.42; transform:translateY(0); }
}
@keyframes storyScreenLineV568{
  0%, 50%{ stroke-dashoffset:1; opacity:0; }
  63%, 85%{ stroke-dashoffset:0; opacity:.58; }
  100%{ stroke-dashoffset:0; opacity:.22; }
}
@keyframes storyCockpitV568{
  0%, 56%{ opacity:0; transform:translateY(3px) scale(.982); }
  68%, 86%{ opacity:.68; transform:translateY(0) scale(1); }
  100%{ opacity:.34; transform:translateY(0) scale(1); }
}
@keyframes storyCockpitLinesV568{
  0%, 62%{ stroke-dashoffset:1; }
  74%, 100%{ stroke-dashoffset:0; }
}
@keyframes storyDotPulseV568{
  0%, 66%{ opacity:0; transform:scale(.82); }
  76%, 88%{ opacity:.78; transform:scale(1.08); }
  100%{ opacity:.42; transform:scale(1); }
}
@keyframes storyGuideLineV568{
  0%, 68%{ stroke-dashoffset:1; opacity:0; }
  82%, 94%{ stroke-dashoffset:0; opacity:.72; }
  100%{ stroke-dashoffset:0; opacity:.34; }
}
@keyframes storyGuideDotV568{
  0%, 74%{ opacity:0; transform:scale(.7); }
  84%, 94%{ opacity:.88; transform:scale(1.06); }
  100%{ opacity:.42; transform:scale(1); }
}
@keyframes storyCockpitLabelV568{
  0%, 66%{ opacity:0; }
  76%, 90%{ opacity:.58; }
  100%{ opacity:.28; }
}
@keyframes storyGuideLabelV568{
  0%, 76%{ opacity:0; transform:translateY(2px); }
  88%, 96%{ opacity:.70; transform:translateY(0); }
  100%{ opacity:.34; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  html body.home.homeRefinedV568 .whyLearningStory *,
  html body.home.homeRefinedV568 .whyLearningStory *::before,
  html body.home.homeRefinedV568 .whyLearningStory *::after{
    animation:none !important;
  }
  html body.home.homeRefinedV568 .whyLearningStory .storySource{ opacity:.30 !important; }
  html body.home.homeRefinedV568 .whyLearningStory .storyThread,
  html body.home.homeRefinedV568 .whyLearningStory .screenLine,
  html body.home.homeRefinedV568 .whyLearningStory .screenProgress,
  html body.home.homeRefinedV568 .whyLearningStory .guidedLine,
  html body.home.homeRefinedV568 .whyLearningStory .cockpitStep,
  html body.home.homeRefinedV568 .whyLearningStory .cockpitHead{
    stroke-dashoffset:0 !important;
  }
  html body.home.homeRefinedV568 .whyLearningStory .storyLearner,
  html body.home.homeRefinedV568 .whyLearningStory .storyLaptop,
  html body.home.homeRefinedV568 .whyLearningStory .storyCockpit{ opacity:.56 !important; }
  html body.home.homeRefinedV568 .whyLearningStory .guideDot{ opacity:.42 !important; }
  html body.home.homeRefinedV568 .whyLearningStory .storyLabel{ opacity:.42 !important; }
}

@media (max-width: 820px){
  html body.home.homeRefinedV568 .whyLearningStory{
    width:min(100%, 330px) !important;
    margin-top:16px !important;
  }
}