/* Praxoria Startseite – v570: Lernführung als kleine Erklärvideo-Sequenz.
   Kein zusätzlicher Text, keine zweite Navigation: verstreute Quellen → Arbeitsplatz → Lern-Cockpit → geführte Spur. */

html body.home.homeRefinedV570 .whyLearningStoryV570{
  width:min(100%, 430px) !important;
  margin: clamp(14px, 1.8vw, 22px) 0 0 !important;
  opacity:1 !important;
}

html body.home.homeRefinedV570 .whyLearningStoryV570 .learningStorySvgV570{
  display:block !important;
  width:100% !important;
  height:auto !important;
  overflow:visible !important;
}

html body.home.homeRefinedV570 .learningStorySvgV570 *{
  vector-effect:non-scaling-stroke;
}

html body.home.homeRefinedV570 .storyStageWashV570{
  fill:color-mix(in oklab, white 82%, var(--accent) 5%) !important;
  opacity:.50;
}

html body.home.homeRefinedV570 .storySourcesV570{
  stroke:color-mix(in oklab, var(--ink) 32%, var(--accent)) !important;
  stroke-width:1.25 !important;
}
html body.home.homeRefinedV570 .storyDoc{
  opacity:.80;
  transform-box:fill-box;
  transform-origin:center;
  filter:drop-shadow(0 12px 18px rgba(20,34,52,.045));
  animation: storySourceBreatheV570 7.2s cubic-bezier(.34,.02,.18,1) infinite;
}
html body.home.homeRefinedV570 .storyDocA{ transform:rotate(-6deg); animation-delay:0s; }
html body.home.homeRefinedV570 .storyDocB{ transform:rotate(4deg); animation-delay:.12s; }
html body.home.homeRefinedV570 .storyDocC{ transform:rotate(3deg); animation-delay:.24s; }
html body.home.homeRefinedV570 .storyNote{ transform:rotate(-4deg); animation-delay:.36s; }
html body.home.homeRefinedV570 .learningStorySvgV570 .fold{ stroke:color-mix(in oklab, var(--ink) 20%, var(--accent)) !important; fill:none !important; opacity:.46; }
html body.home.homeRefinedV570 .learningStorySvgV570 .fold.soft{ opacity:.28; }
html body.home.homeRefinedV570 .learningStorySvgV570 .paperLine{
  fill:none !important;
  stroke-width:1.45 !important;
  opacity:.62;
}
html body.home.homeRefinedV570 .learningStorySvgV570 .blue{ stroke:color-mix(in oklab, var(--accent) 68%, var(--ink)) !important; }
html body.home.homeRefinedV570 .learningStorySvgV570 .gold{ stroke:color-mix(in oklab, var(--accent3) 60%, var(--ink)) !important; }
html body.home.homeRefinedV570 .learningStorySvgV570 .green{ stroke:color-mix(in oklab, var(--accent2) 62%, var(--ink)) !important; }
html body.home.homeRefinedV570 .learningStorySvgV570 .blueFill{ fill:color-mix(in oklab, var(--accent) 42%, white) !important; stroke:none !important; opacity:.72; }
html body.home.homeRefinedV570 .learningStorySvgV570 .bookSpine{ stroke:color-mix(in oklab, var(--accent3) 46%, var(--ink)) !important; opacity:.34; }

html body.home.homeRefinedV570 .storyFunnelV570 .funnelLine{
  stroke-width:2.1 !important;
  stroke-dasharray:1 !important;
  stroke-dashoffset:1;
  opacity:0;
  animation: storyFunnelDrawV570 7.2s cubic-bezier(.32,.02,.18,1) infinite;
}
html body.home.homeRefinedV570 .storyFunnelV570 .f2{ animation-delay:.12s; }
html body.home.homeRefinedV570 .storyFunnelV570 .f3{ animation-delay:.24s; }
html body.home.homeRefinedV570 .storyFunnelV570 .funnelDot{
  fill:color-mix(in oklab, var(--accent3) 62%, white) !important;
  stroke:color-mix(in oklab, var(--accent3) 56%, var(--ink)) !important;
  stroke-width:1.2 !important;
  opacity:0;
  animation: storyGatherDotV570 7.2s ease-in-out infinite;
}

html body.home.homeRefinedV570 .storyWorkplaceV570{
  stroke:color-mix(in oklab, var(--ink) 42%, var(--accent2)) !important;
  stroke-width:1.45 !important;
}
html body.home.homeRefinedV570 .storyWorkplaceV570 .deskLine,
html body.home.homeRefinedV570 .storyWorkplaceV570 .deskLeg,
html body.home.homeRefinedV570 .storyWorkplaceV570 .chair{
  opacity:0;
  animation: storyDeskInV570 7.2s ease-in-out infinite;
}
html body.home.homeRefinedV570 .storyLearnerV570{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center bottom;
  animation: storyLearnerArrivesV570 7.2s cubic-bezier(.34,.02,.18,1) infinite;
}
html body.home.homeRefinedV570 .storyLearnerV570 .head{
  fill:color-mix(in oklab, white 72%, var(--accent3) 12%) !important;
  stroke:color-mix(in oklab, var(--ink) 38%, var(--accent3)) !important;
}
html body.home.homeRefinedV570 .storyLearnerV570 .hair{
  stroke:color-mix(in oklab, var(--ink) 46%, var(--accent3)) !important;
  opacity:.58;
}
html body.home.homeRefinedV570 .storyLearnerV570 .body{
  stroke:color-mix(in oklab, var(--ink) 48%, var(--accent)) !important;
}
html body.home.homeRefinedV570 .storyLearnerV570 .arm{
  stroke:color-mix(in oklab, var(--accent3) 58%, var(--ink)) !important;
  transform-box:fill-box;
  transform-origin:left center;
  animation: storyArmMovesV570 7.2s ease-in-out infinite;
}

html body.home.homeRefinedV570 .storyLaptopV570{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center bottom;
  animation: storyLaptopOpenV570 7.2s cubic-bezier(.34,.02,.18,1) infinite;
}
html body.home.homeRefinedV570 .storyLaptopV570 .screenOuter{
  fill:color-mix(in oklab, white 88%, var(--accent2) 5%) !important;
  stroke:color-mix(in oklab, var(--ink) 24%, var(--accent2)) !important;
}
html body.home.homeRefinedV570 .storyLaptopV570 .screenInner{
  fill:url(#storyScreenV570) !important;
  stroke:color-mix(in oklab, var(--accent2) 22%, var(--ink)) !important;
  opacity:.94;
}
html body.home.homeRefinedV570 .storyLaptopV570 .base{
  fill:color-mix(in oklab, white 74%, var(--accent2) 7%) !important;
  stroke:color-mix(in oklab, var(--ink) 22%, var(--accent2)) !important;
}

html body.home.homeRefinedV570 .screenUiV570{
  stroke-width:1.75 !important;
  opacity:.95;
}
html body.home.homeRefinedV570 .screenUiV570 .uiSide{
  stroke:color-mix(in oklab, var(--accent) 66%, var(--ink)) !important;
  opacity:0;
  animation: storyUiSideV570 7.2s ease-in-out infinite;
}
html body.home.homeRefinedV570 .screenUiV570 .uiTitle,
html body.home.homeRefinedV570 .screenUiV570 .uiRow,
html body.home.homeRefinedV570 .screenUiV570 .uiProgress{
  stroke-dasharray:1 !important;
  stroke-dashoffset:1;
  opacity:0;
  animation: storyUiDrawV570 7.2s cubic-bezier(.28,.02,.16,1) infinite;
}
html body.home.homeRefinedV570 .screenUiV570 .uiTitle{ stroke:color-mix(in oklab, var(--ink) 42%, var(--accent2)) !important; }
html body.home.homeRefinedV570 .screenUiV570 .uiRow{ stroke:color-mix(in oklab, var(--ink) 32%, var(--accent2)) !important; }
html body.home.homeRefinedV570 .screenUiV570 .uiProgress{ stroke:color-mix(in oklab, var(--accent2) 72%, var(--ink)) !important; stroke-width:2.5 !important; }
html body.home.homeRefinedV570 .screenUiV570 .uA{ animation-delay:.08s; }
html body.home.homeRefinedV570 .screenUiV570 .uB{ animation-delay:.16s; }
html body.home.homeRefinedV570 .screenUiV570 .uiProgress{ animation-delay:.24s; }
html body.home.homeRefinedV570 .screenUiV570 .uiNode{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  fill:color-mix(in oklab, var(--accent2) 58%, white) !important;
  stroke:color-mix(in oklab, var(--accent2) 56%, var(--ink)) !important;
  animation: storyUiNodeV570 7.2s ease-in-out infinite;
}
html body.home.homeRefinedV570 .screenUiV570 .nA{ fill:color-mix(in oklab, var(--accent) 50%, white) !important; }
html body.home.homeRefinedV570 .screenUiV570 .nB{ fill:color-mix(in oklab, var(--accent3) 46%, white) !important; animation-delay:.08s; }
html body.home.homeRefinedV570 .screenUiV570 .nC{ animation-delay:.16s; }

html body.home.homeRefinedV570 .storySettleV570 .settleLine{
  stroke-width:2 !important;
  stroke-dasharray:1 !important;
  stroke-dashoffset:1;
  opacity:0;
  animation: storySettleLineV570 7.2s cubic-bezier(.28,.02,.16,1) infinite;
}
html body.home.homeRefinedV570 .storySettleV570 .settleDot{
  fill:color-mix(in oklab, var(--accent2) 65%, white) !important;
  stroke:color-mix(in oklab, var(--accent2) 50%, var(--ink)) !important;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation: storySettleDotV570 7.2s ease-in-out infinite;
}
html body.home.homeRefinedV570 .storySettleV570 .sd1{ fill:color-mix(in oklab, var(--accent) 54%, white) !important; }
html body.home.homeRefinedV570 .storySettleV570 .sd2{ fill:color-mix(in oklab, var(--accent3) 48%, white) !important; animation-delay:.08s; }
html body.home.homeRefinedV570 .storySettleV570 .sd3{ animation-delay:.16s; }

@keyframes storySourceBreatheV570{
  0%,10%{ opacity:.26; transform:translateY(2px) rotate(var(--r, 0deg)) scale(.985); }
  18%,34%{ opacity:.86; transform:translateY(0) rotate(var(--r, 0deg)) scale(1); }
  50%,88%{ opacity:.25; transform:translate(12px,-3px) rotate(0deg) scale(.94); }
  100%{ opacity:.26; transform:translateY(2px) rotate(var(--r, 0deg)) scale(.985); }
}
html body.home.homeRefinedV570 .storyDocA{ --r:-6deg; }
html body.home.homeRefinedV570 .storyDocB{ --r:4deg; }
html body.home.homeRefinedV570 .storyDocC{ --r:3deg; }
html body.home.homeRefinedV570 .storyNote{ --r:-4deg; }

@keyframes storyFunnelDrawV570{
  0%,18%{ stroke-dashoffset:1; opacity:0; }
  30%{ opacity:.70; }
  46%,62%{ stroke-dashoffset:0; opacity:.54; }
  76%,100%{ stroke-dashoffset:0; opacity:.12; }
}
@keyframes storyGatherDotV570{
  0%,36%{ opacity:0; transform:scale(.75); }
  46%,62%{ opacity:.80; transform:scale(1.08); }
  76%,100%{ opacity:.18; transform:scale(.9); }
}
@keyframes storyDeskInV570{
  0%,27%{ opacity:0; }
  36%,100%{ opacity:.24; }
}
@keyframes storyLearnerArrivesV570{
  0%,28%{ opacity:0; transform:translateX(-18px) translateY(7px); }
  40%,72%{ opacity:.84; transform:translateX(0) translateY(0); }
  100%{ opacity:.60; transform:translateX(0) translateY(0); }
}
@keyframes storyArmMovesV570{
  0%,45%{ transform:translate(-4px,2px) rotate(-3deg); }
  58%,100%{ transform:translate(0,0) rotate(0deg); }
}
@keyframes storyLaptopOpenV570{
  0%,34%{ opacity:0; transform:translateY(7px) scaleY(.92); }
  48%,82%{ opacity:.90; transform:translateY(0) scaleY(1); }
  100%{ opacity:.64; transform:translateY(0) scaleY(1); }
}
@keyframes storyUiSideV570{
  0%,48%{ opacity:0; transform:translateX(-3px); }
  60%,90%{ opacity:.82; transform:translateX(0); }
  100%{ opacity:.44; transform:translateX(0); }
}
@keyframes storyUiDrawV570{
  0%,50%{ stroke-dashoffset:1; opacity:0; }
  66%,88%{ stroke-dashoffset:0; opacity:.80; }
  100%{ stroke-dashoffset:0; opacity:.42; }
}
@keyframes storyUiNodeV570{
  0%,54%{ opacity:0; transform:scale(.75); }
  68%,88%{ opacity:.88; transform:scale(1.08); }
  100%{ opacity:.46; transform:scale(1); }
}
@keyframes storySettleLineV570{
  0%,66%{ stroke-dashoffset:1; opacity:0; }
  80%,94%{ stroke-dashoffset:0; opacity:.62; }
  100%{ stroke-dashoffset:0; opacity:.30; }
}
@keyframes storySettleDotV570{
  0%,72%{ opacity:0; transform:scale(.72); }
  84%,94%{ opacity:.80; transform:scale(1.08); }
  100%{ opacity:.38; transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
  html body.home.homeRefinedV570 .whyLearningStoryV570 *,
  html body.home.homeRefinedV570 .whyLearningStoryV570 *::before,
  html body.home.homeRefinedV570 .whyLearningStoryV570 *::after{
    animation:none !important;
  }
  html body.home.homeRefinedV570 .storyDoc{ opacity:.28 !important; transform:none !important; }
  html body.home.homeRefinedV570 .funnelLine,
  html body.home.homeRefinedV570 .settleLine,
  html body.home.homeRefinedV570 .uiTitle,
  html body.home.homeRefinedV570 .uiRow,
  html body.home.homeRefinedV570 .uiProgress{
    stroke-dashoffset:0 !important;
    opacity:.36 !important;
  }
  html body.home.homeRefinedV570 .storyLearnerV570,
  html body.home.homeRefinedV570 .storyLaptopV570,
  html body.home.homeRefinedV570 .uiSide,
  html body.home.homeRefinedV570 .uiNode,
  html body.home.homeRefinedV570 .settleDot{
    opacity:.60 !important;
  }
}

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