/* Praxoria Startseite – v569: Lernführung-Animation als klare, gegenständliche Mini-Story.
   Basis v564/v567; nur die Animation unter dem Lernführungs-Nachweis wird ersetzt. */

html body.home.homeRefinedV569 .whyLearningStory{
  width:min(100%, 392px) !important;
  margin: clamp(16px, 2vw, 24px) 0 clamp(4px, 1vw, 8px) !important;
  opacity:.98 !important;
}

html body.home.homeRefinedV569 .whyLearningStory .learningStorySvgV569{
  display:block !important;
  width:100% !important;
  height:auto !important;
  overflow:visible !important;
}

html body.home.homeRefinedV569 .learningStorySvgV569 *{
  vector-effect:non-scaling-stroke;
}

html body.home.homeRefinedV569 .sourceCardV569{
  stroke-width:1.35 !important;
  opacity:.42;
  transform-box:fill-box;
  transform-origin:center;
  animation: sourcesSettleV569 8.6s cubic-bezier(.38,0,.18,1) infinite;
}
html body.home.homeRefinedV569 .sourceDocV569{
  stroke:color-mix(in oklab, var(--accent) 72%, var(--ink)) !important;
}
html body.home.homeRefinedV569 .sourceBookV569{
  stroke:color-mix(in oklab, var(--accent3) 68%, var(--ink)) !important;
  animation-delay:.10s;
}
html body.home.homeRefinedV569 .sourceStickyV569{
  stroke:color-mix(in oklab, var(--accent2) 62%, var(--ink)) !important;
  animation-delay:.20s;
}
html body.home.homeRefinedV569 .sourcePebbleV569{
  fill:color-mix(in oklab, var(--accent) 48%, white) !important;
  opacity:.34;
  animation: pebbleQuietV569 8.6s ease-in-out infinite;
}
html body.home.homeRefinedV569 .sourcePebbleV569.pA{ fill:color-mix(in oklab, var(--accent3) 44%, white) !important; animation-delay:.12s; }
html body.home.homeRefinedV569 .sourcePebbleV569.pB{ fill:color-mix(in oklab, var(--accent2) 42%, white) !important; animation-delay:.24s; }

html body.home.homeRefinedV569 .gatherLineV569{
  stroke-width:1.7 !important;
  stroke-dasharray:1 !important;
  stroke-dashoffset:1;
  opacity:0;
  animation: gatherToDeskV569 8.6s cubic-bezier(.32,.02,.18,1) infinite;
}
html body.home.homeRefinedV569 .gatherLineV569.gl2{ animation-delay:.14s; }
html body.home.homeRefinedV569 .gatherLineV569.gl3{ animation-delay:.28s; }

html body.home.homeRefinedV569 .workplaceV569{
  stroke:color-mix(in oklab, var(--ink) 46%, var(--accent)) !important;
  stroke-width:1.55 !important;
}
html body.home.homeRefinedV569 .deskV569,
html body.home.homeRefinedV569 .chairV569{
  opacity:.20;
  animation: furnitureInV569 8.6s ease-in-out infinite;
}
html body.home.homeRefinedV569 .learnerV569{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center bottom;
  animation: learnerSitsV569 8.6s cubic-bezier(.33,.02,.2,1) infinite;
}
html body.home.homeRefinedV569 .learnerHeadV569,
html body.home.homeRefinedV569 .learnerBackV569{
  stroke:color-mix(in oklab, var(--ink) 56%, var(--accent)) !important;
}
html body.home.homeRefinedV569 .learnerHairV569{
  stroke:color-mix(in oklab, var(--ink) 42%, var(--accent3)) !important;
  opacity:.48;
}
html body.home.homeRefinedV569 .learnerArmV569{
  stroke:color-mix(in oklab, var(--ink) 52%, var(--accent3)) !important;
  transform-box:fill-box;
  transform-origin:left center;
  animation: handToKeyboardV569 8.6s ease-in-out infinite;
}

html body.home.homeRefinedV569 .laptopV569{
  opacity:0;
  stroke:color-mix(in oklab, var(--ink) 42%, var(--accent2)) !important;
  stroke-width:1.48 !important;
  transform-box:fill-box;
  transform-origin:center bottom;
  animation: laptopOpensV569 8.6s cubic-bezier(.34,.02,.18,1) infinite;
}
html body.home.homeRefinedV569 .screenWashV569{
  fill:url(#screenWashV569) !important;
  stroke:color-mix(in oklab, var(--accent2) 20%, transparent) !important;
  opacity:.84;
}

html body.home.homeRefinedV569 .cockpitUiV569{
  stroke:color-mix(in oklab, var(--accent2) 62%, var(--ink)) !important;
  stroke-width:1.65 !important;
  opacity:.88;
}
html body.home.homeRefinedV569 .uiRailV569{
  opacity:0;
  stroke:color-mix(in oklab, var(--accent) 64%, var(--ink)) !important;
  animation: uiRailInV569 8.6s ease-in-out infinite;
}
html body.home.homeRefinedV569 .uiTopV569,
html body.home.homeRefinedV569 .uiLineV569,
html body.home.homeRefinedV569 .uiProgressV569{
  stroke-dasharray:1 !important;
  stroke-dashoffset:1;
  opacity:0;
  animation: uiDrawV569 8.6s cubic-bezier(.28,.02,.16,1) infinite;
}
html body.home.homeRefinedV569 .uiTopV569{ stroke:color-mix(in oklab, var(--ink) 44%, var(--accent2)) !important; animation-delay:.02s; }
html body.home.homeRefinedV569 .uiLineV569.u1{ animation-delay:.14s; }
html body.home.homeRefinedV569 .uiLineV569.u2{ animation-delay:.26s; }
html body.home.homeRefinedV569 .uiProgressV569{ stroke:color-mix(in oklab, var(--accent2) 70%, var(--ink)) !important; stroke-width:2.3 !important; animation-delay:.38s; }
html body.home.homeRefinedV569 .uiStepV569{
  fill:color-mix(in oklab, var(--accent2) 62%, white) !important;
  stroke:color-mix(in oklab, var(--accent2) 52%, var(--ink)) !important;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation: uiDotsV569 8.6s ease-in-out infinite;
}
html body.home.homeRefinedV569 .uiStepV569.sA{ animation-delay:.02s; fill:color-mix(in oklab, var(--accent) 50%, white) !important; }
html body.home.homeRefinedV569 .uiStepV569.sB{ animation-delay:.18s; fill:color-mix(in oklab, var(--accent3) 42%, white) !important; }
html body.home.homeRefinedV569 .uiStepV569.sC{ animation-delay:.34s; }

html body.home.homeRefinedV569 .finalThreadV569{
  stroke-width:1.7 !important;
  stroke-dasharray:1 !important;
  stroke-dashoffset:1;
  opacity:0;
  animation: finalGuidanceV569 8.6s cubic-bezier(.28,.02,.16,1) infinite;
}
html body.home.homeRefinedV569 .finalDotV569{
  fill:color-mix(in oklab, var(--accent2) 66%, white) !important;
  stroke:color-mix(in oklab, var(--accent2) 50%, var(--ink)) !important;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation: finalDotsV569 8.6s ease-in-out infinite;
}
html body.home.homeRefinedV569 .finalDotV569.f1{ fill:color-mix(in oklab, var(--accent) 52%, white) !important; }
html body.home.homeRefinedV569 .finalDotV569.f2{ fill:color-mix(in oklab, var(--accent3) 46%, white) !important; animation-delay:.12s; }
html body.home.homeRefinedV569 .finalDotV569.f3{ animation-delay:.24s; }

@keyframes sourcesSettleV569{
  0%,10%{ opacity:.26; transform:translate(0,0) rotate(0deg); }
  16%,30%{ opacity:.62; transform:translate(0,0) rotate(0deg); }
  42%,70%{ opacity:.18; transform:translate(6px,-2px) scale(.985); }
  100%{ opacity:.22; transform:translate(6px,-2px) scale(.985); }
}
@keyframes pebbleQuietV569{
  0%,22%{ opacity:.34; transform:scale(1); }
  46%,100%{ opacity:.12; transform:scale(.9); }
}
@keyframes gatherToDeskV569{
  0%,18%{ stroke-dashoffset:1; opacity:0; }
  28%{ opacity:.64; }
  44%,74%{ stroke-dashoffset:0; opacity:.48; }
  100%{ stroke-dashoffset:0; opacity:.14; }
}
@keyframes furnitureInV569{
  0%,24%{ opacity:0; }
  36%,100%{ opacity:.24; }
}
@keyframes learnerSitsV569{
  0%,28%{ opacity:0; transform:translateX(-18px) translateY(5px); }
  42%,74%{ opacity:.76; transform:translateX(0) translateY(0); }
  100%{ opacity:.48; transform:translateX(0) translateY(0); }
}
@keyframes handToKeyboardV569{
  0%,42%{ transform:translateX(-3px) translateY(2px) rotate(-2deg); }
  55%,100%{ transform:translateX(0) translateY(0) rotate(0deg); }
}
@keyframes laptopOpensV569{
  0%,34%{ opacity:0; transform:translateY(5px) scaleY(.96); }
  48%,78%{ opacity:.74; transform:translateY(0) scaleY(1); }
  100%{ opacity:.50; transform:translateY(0) scaleY(1); }
}
@keyframes uiRailInV569{
  0%,52%{ opacity:0; transform:translateX(-2px); }
  64%,92%{ opacity:.72; transform:translateX(0); }
  100%{ opacity:.36; transform:translateX(0); }
}
@keyframes uiDrawV569{
  0%,54%{ stroke-dashoffset:1; opacity:0; }
  68%,88%{ stroke-dashoffset:0; opacity:.74; }
  100%{ stroke-dashoffset:0; opacity:.32; }
}
@keyframes uiDotsV569{
  0%,58%{ opacity:0; transform:scale(.7); }
  68%,84%{ opacity:.86; transform:scale(1.07); }
  100%{ opacity:.38; transform:scale(1); }
}
@keyframes finalGuidanceV569{
  0%,68%{ stroke-dashoffset:1; opacity:0; }
  82%,94%{ stroke-dashoffset:0; opacity:.66; }
  100%{ stroke-dashoffset:0; opacity:.28; }
}
@keyframes finalDotsV569{
  0%,73%{ opacity:0; transform:scale(.66); }
  84%,94%{ opacity:.78; transform:scale(1.08); }
  100%{ opacity:.34; transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
  html body.home.homeRefinedV569 .whyLearningStory *,
  html body.home.homeRefinedV569 .whyLearningStory *::before,
  html body.home.homeRefinedV569 .whyLearningStory *::after{
    animation:none !important;
  }
  html body.home.homeRefinedV569 .sourceCardV569{ opacity:.22 !important; }
  html body.home.homeRefinedV569 .gatherLineV569,
  html body.home.homeRefinedV569 .uiTopV569,
  html body.home.homeRefinedV569 .uiLineV569,
  html body.home.homeRefinedV569 .uiProgressV569,
  html body.home.homeRefinedV569 .finalThreadV569{
    stroke-dashoffset:0 !important;
    opacity:.34 !important;
  }
  html body.home.homeRefinedV569 .learnerV569,
  html body.home.homeRefinedV569 .laptopV569,
  html body.home.homeRefinedV569 .uiRailV569,
  html body.home.homeRefinedV569 .uiStepV569,
  html body.home.homeRefinedV569 .finalDotV569{
    opacity:.50 !important;
  }
}

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