/* Praxoria Startseite – v567: v564 mit dezenter Lernfluss-Skizze.
   Nur die Animation aus v566 bleibt erhalten; übrige Gestaltung bleibt auf v564. */

html body.home.homeRefinedV567 .whyQualityNote.p1 .whyEvidenceLine{
  padding-bottom: clamp(10px, 1.2vw, 16px) !important;
}

html body.home.homeRefinedV567 .whyLearningSketch{
  width:min(100%, 330px) !important;
  margin: clamp(20px, 2.4vw, 30px) 0 clamp(10px, 1.2vw, 14px) !important;
  color: color-mix(in oklab, var(--accent) 58%, var(--ink)) !important;
  opacity:.82 !important;
  pointer-events:none !important;
}
html body.home.homeRefinedV567 .whyLearningSketch svg{
  display:block !important;
  width:100% !important;
  height:auto !important;
  overflow:visible !important;
}
html body.home.homeRefinedV567 .whyLearningSketch .sourceNote{
  stroke-width:1.55 !important;
  opacity:.30;
  transform-box:fill-box;
  transform-origin:center;
  animation: whySourceSettleV567 8.2s ease-in-out infinite;
}
html body.home.homeRefinedV567 .whyLearningSketch .sourceOne{ color:color-mix(in oklab, var(--accent) 74%, transparent); animation-delay:.05s; }
html body.home.homeRefinedV567 .whyLearningSketch .sourceTwo{ color:color-mix(in oklab, var(--accent3) 68%, transparent); animation-delay:.24s; }
html body.home.homeRefinedV567 .whyLearningSketch .sourceThree{ color:color-mix(in oklab, var(--accent2) 58%, transparent); animation-delay:.42s; }
html body.home.homeRefinedV567 .whyLearningSketch .learningPath,
html body.home.homeRefinedV567 .whyLearningSketch .learningPathGlow{
  fill:none !important;
  stroke:url(#whyLearningLineV567) !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1;
  pathLength:1;
}
html body.home.homeRefinedV567 .whyLearningSketch .learningPath{
  stroke-width:2.15 !important;
  opacity:.60;
  animation: whyPathDrawV567 8.2s cubic-bezier(.35,.04,.18,1) infinite;
}
html body.home.homeRefinedV567 .whyLearningSketch .learningPathGlow{
  stroke-width:7.5 !important;
  opacity:.055;
  filter:url(#whyLearningSoftV567);
  animation: whyPathDrawGlowV567 8.2s cubic-bezier(.35,.04,.18,1) infinite;
}
html body.home.homeRefinedV567 .whyLearningSketch .learner{
  stroke: color-mix(in oklab, var(--ink) 52%, var(--accent)) !important;
  stroke-width:1.7 !important;
  opacity:.0;
  animation: whyLearnerArriveV567 8.2s ease-in-out infinite;
}
html body.home.homeRefinedV567 .whyLearningSketch .desk{ opacity:.30; }
html body.home.homeRefinedV567 .whyLearningSketch .laptop{ stroke: color-mix(in oklab, var(--ink) 48%, var(--accent2)) !important; }
html body.home.homeRefinedV567 .whyLearningSketch .screenPulse{
  stroke: color-mix(in oklab, var(--accent2) 62%, var(--ink)) !important;
  stroke-width:1.65 !important;
  opacity:.38;
  stroke-dasharray:1 !important;
  stroke-dashoffset:1;
  pathLength:1;
  animation: whyScreenLineV567 8.2s ease-in-out infinite;
}
html body.home.homeRefinedV567 .whyLearningSketch .cockpitCue{
  stroke: color-mix(in oklab, var(--accent2) 58%, var(--ink)) !important;
  stroke-width:1.45 !important;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation: whyCockpitCueV567 8.2s ease-in-out infinite;
}

@keyframes whySourceSettleV567{
  0%, 8%{ opacity:.18; transform:translateY(2px); }
  18%, 42%{ opacity:.46; transform:translateY(0); }
  56%, 100%{ opacity:.24; transform:translateY(0); }
}
@keyframes whyPathDrawV567{
  0%, 16%{ stroke-dashoffset:1; opacity:.0; }
  28%{ opacity:.58; }
  54%, 72%{ stroke-dashoffset:0; opacity:.60; }
  92%,100%{ stroke-dashoffset:0; opacity:.22; }
}
@keyframes whyPathDrawGlowV567{
  0%, 16%{ stroke-dashoffset:1; opacity:0; }
  30%, 68%{ stroke-dashoffset:0; opacity:.07; }
  100%{ stroke-dashoffset:0; opacity:.02; }
}
@keyframes whyLearnerArriveV567{
  0%, 34%{ opacity:0; transform:translateX(-4px); }
  46%, 84%{ opacity:.62; transform:translateX(0); }
  100%{ opacity:.38; transform:translateX(0); }
}
@keyframes whyScreenLineV567{
  0%, 48%{ stroke-dashoffset:1; opacity:0; }
  60%, 82%{ stroke-dashoffset:0; opacity:.46; }
  100%{ stroke-dashoffset:0; opacity:.20; }
}
@keyframes whyCockpitCueV567{
  0%, 56%{ opacity:0; transform:translateX(-3px) scale(.985); }
  68%, 86%{ opacity:.62; transform:translateX(0) scale(1); }
  100%{ opacity:.34; transform:translateX(0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  html body.home.homeRefinedV567 .whyLearningSketch *,
  html body.home.homeRefinedV567 .whyLearningSketch *::before,
  html body.home.homeRefinedV567 .whyLearningSketch *::after{
    animation:none !important;
  }
  html body.home.homeRefinedV567 .whyLearningSketch .learningPath,
  html body.home.homeRefinedV567 .whyLearningSketch .learningPathGlow,
  html body.home.homeRefinedV567 .whyLearningSketch .screenPulse{
    stroke-dashoffset:0 !important;
  }
  html body.home.homeRefinedV567 .whyLearningSketch .sourceNote{ opacity:.34 !important; }
  html body.home.homeRefinedV567 .whyLearningSketch .learner{ opacity:.56 !important; }
  html body.home.homeRefinedV567 .whyLearningSketch .cockpitCue{ opacity:.46 !important; }
}

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