/* Praxoria Startseite – v573: konkrete Erklärvideo-Miniatur für Lernführung.
   Ziel: sofort lesbare Szene statt abstrakter Linien: viele Quellen → Person am Laptop → Lern-Cockpit. */

html body.home.homeRefinedV573 .whyLearningExplainerV573{
  width:min(100%, 440px) !important;
  margin: clamp(18px, 2.1vw, 26px) 0 clamp(8px, 1vw, 12px) !important;
  opacity:1 !important;
  pointer-events:none !important;
  --storyT: 8.8s;
  --storyEase: cubic-bezier(.28,.06,.16,1);
  --storyInk: color-mix(in oklab, var(--ink) 70%, #334255);
  --storySoftInk: color-mix(in oklab, var(--ink) 24%, white);
  --storyBlue: color-mix(in oklab, var(--accent) 70%, white);
  --storyBlueLine: color-mix(in oklab, var(--accent) 70%, var(--ink));
  --storyGold: color-mix(in oklab, var(--accent3) 72%, white);
  --storyGoldLine: color-mix(in oklab, var(--accent3) 70%, var(--ink));
  --storyGreen: color-mix(in oklab, var(--accent2) 72%, white);
  --storyGreenLine: color-mix(in oklab, var(--accent2) 64%, var(--ink));
}

html body.home.homeRefinedV573 .explainerStageV573{
  position:relative;
  height: clamp(212px, 19vw, 248px);
  border-radius: 30px;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 24%, color-mix(in oklab, var(--accent2) 10%, transparent) 0, transparent 35%),
    radial-gradient(circle at 20% 42%, color-mix(in oklab, var(--accent) 10%, transparent) 0, transparent 39%),
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.56));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 18px 34px rgba(18,32,48,.035);
  isolation:isolate;
}

html body.home.homeRefinedV573 .explainerStageV573::after{
  content:"";
  position:absolute;
  left:26px;
  right:26px;
  bottom:22px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(25,40,60,.075), transparent);
  z-index:0;
}

html body.home.homeRefinedV573 .sourceDeskV573,
html body.home.homeRefinedV573 .sourceToCockpitV573,
html body.home.homeRefinedV573 .workSceneV573,
html body.home.homeRefinedV573 .calmPathV573{
  position:absolute;
  inset:0;
}

/* Viele Quellen links: Dokument, Buch, Notiz, Karte */
html body.home.homeRefinedV573 .sourceDeskV573{ z-index:3; }
html body.home.homeRefinedV573 .sourceDeskV573 > span{
  position:absolute;
  display:block;
  border:1px solid rgba(25,40,60,.12);
  background:rgba(255,255,255,.90);
  box-shadow:0 13px 26px rgba(20,34,52,.070);
  transform-origin:center;
  animation: sourceGatherV573 var(--storyT) var(--storyEase) infinite;
}
html body.home.homeRefinedV573 .sourceDeskV573 > span i,
html body.home.homeRefinedV573 .sourceDeskV573 > span b,
html body.home.homeRefinedV573 .sourceDeskV573 > span em{
  position:absolute;
  display:block;
  height:2px;
  border-radius:999px;
}
html body.home.homeRefinedV573 .sourceSheetV573{
  width:54px; height:70px; left:36px; top:38px; border-radius:10px;
  --gx: 98px; --gy: 36px; --gr: 5deg;
}
html body.home.homeRefinedV573 .sourceSheetV573::after{
  content:""; position:absolute; right:0; top:0; width:16px; height:16px;
  border-top-right-radius:9px;
  background:linear-gradient(135deg, rgba(255,255,255,0) 50%, color-mix(in oklab, var(--accent) 16%, white) 51%);
}
html body.home.homeRefinedV573 .sourceSheetV573 i{ left:12px; top:23px; width:28px; background:var(--storyBlueLine); opacity:.72; }
html body.home.homeRefinedV573 .sourceSheetV573 b{ left:12px; top:38px; width:34px; background:rgba(25,40,60,.24); }
html body.home.homeRefinedV573 .sourceSheetV573 em{ left:12px; top:52px; width:22px; background:rgba(25,40,60,.17); }

html body.home.homeRefinedV573 .sourceBookV573{
  width:72px; height:52px; left:132px; top:28px; border-radius:11px;
  background:linear-gradient(90deg, color-mix(in oklab, var(--accent3) 18%, white), rgba(255,255,255,.92));
  --gx: -6px; --gy: 56px; --gr: -6deg;
}
html body.home.homeRefinedV573 .sourceBookV573::before{
  content:""; position:absolute; left:13px; top:7px; bottom:7px; width:2px; border-radius:999px; background:var(--storyGoldLine); opacity:.42;
}
html body.home.homeRefinedV573 .sourceBookV573 i{ left:26px; top:17px; width:32px; background:var(--storyGoldLine); opacity:.72; }
html body.home.homeRefinedV573 .sourceBookV573 b{ left:26px; top:32px; width:24px; background:rgba(25,40,60,.21); }

html body.home.homeRefinedV573 .sourceNoteV573{
  width:82px; height:54px; left:48px; top:134px; border-radius:12px;
  background:linear-gradient(135deg, color-mix(in oklab, var(--accent2) 12%, white), rgba(255,255,255,.93));
  --gx: 78px; --gy: -40px; --gr: -3deg;
}
html body.home.homeRefinedV573 .sourceNoteV573::before{
  content:""; position:absolute; right:12px; top:-5px; width:13px; height:13px; border-radius:50%; background:var(--storyGreen); border:1px solid rgba(25,40,60,.08);
}
html body.home.homeRefinedV573 .sourceNoteV573 i{ left:14px; top:19px; width:40px; background:var(--storyGreenLine); opacity:.74; }
html body.home.homeRefinedV573 .sourceNoteV573 b{ left:14px; top:34px; width:27px; background:rgba(25,40,60,.21); }

html body.home.homeRefinedV573 .sourceCardV573{
  width:56px; height:44px; left:168px; top:132px; border-radius:13px;
  --gx: -36px; --gy: -31px; --gr: 5deg;
}
html body.home.homeRefinedV573 .sourceCardV573 i{ left:12px; top:16px; width:26px; background:var(--storyBlueLine); opacity:.58; }
html body.home.homeRefinedV573 .sourceCardV573 b{ left:12px; top:30px; width:19px; background:rgba(25,40,60,.18); }

/* Sichtbarer Fluss: Quellen werden in eine Arbeitssituation überführt. */
html body.home.homeRefinedV573 .sourceToCockpitV573{
  z-index:2;
  width:100%; height:100%;
  overflow:visible;
}
html body.home.homeRefinedV573 .sourceToCockpitV573 .flowSource{
  fill:none;
  stroke:url(#sourceToCockpitGradientV573);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2.2;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:0;
  vector-effect:non-scaling-stroke;
  animation: drawSourceFlowV573 var(--storyT) var(--storyEase) infinite;
}
html body.home.homeRefinedV573 .sourceToCockpitV573 .two{ animation-delay:.10s; }
html body.home.homeRefinedV573 .sourceToCockpitV573 .three{ animation-delay:.20s; }

/* Konkrete Arbeitssituation: Person + Laptop mit Lern-Cockpit. */
html body.home.homeRefinedV573 .workSceneV573{ z-index:4; }
html body.home.homeRefinedV573 .deskV573{
  position:absolute; left:232px; right:28px; bottom:48px; height:8px; border-radius:999px;
  background:linear-gradient(90deg, rgba(25,40,60,.18), rgba(25,40,60,.07));
  box-shadow:0 8px 16px rgba(20,34,52,.035);
}
html body.home.homeRefinedV573 .deskV573::before,
html body.home.homeRefinedV573 .deskV573::after{
  content:""; position:absolute; top:8px; width:2px; height:34px; border-radius:999px; background:rgba(25,40,60,.12);
}
html body.home.homeRefinedV573 .deskV573::before{ left:34px; }
html body.home.homeRefinedV573 .deskV573::after{ right:46px; }
html body.home.homeRefinedV573 .chairV573{
  position:absolute; left:226px; bottom:54px; width:58px; height:46px;
  border-left:2px solid rgba(25,40,60,.13);
  border-bottom:2px solid rgba(25,40,60,.15);
  border-radius:17px 17px 5px 5px;
  opacity:.72;
  animation: chairSettleV573 var(--storyT) ease-in-out infinite;
}
html body.home.homeRefinedV573 .learnerV573{
  position:absolute; left:230px; top:80px; width:90px; height:104px;
  transform-origin:50% 92%;
  animation: learnerSitV573 var(--storyT) var(--storyEase) infinite;
}
html body.home.homeRefinedV573 .learnerHeadV573{
  position:absolute; left:32px; top:0; width:30px; height:30px; border-radius:50%;
  background:color-mix(in oklab, var(--accent3) 18%, white);
  border:1px solid rgba(25,40,60,.14);
  box-shadow:0 5px 12px rgba(20,34,52,.04);
}
html body.home.homeRefinedV573 .learnerHairV573{
  position:absolute; left:28px; top:1px; width:37px; height:18px; border-radius:22px 22px 8px 8px;
  border-top:4px solid color-mix(in oklab, var(--ink) 56%, var(--accent3));
  opacity:.50;
}
html body.home.homeRefinedV573 .learnerTorsoV573{
  position:absolute; left:24px; top:36px; width:44px; height:52px; border-radius:24px 24px 17px 17px;
  background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 14%, white), color-mix(in oklab, var(--accent2) 10%, white));
  border:1px solid rgba(25,40,60,.12);
}
html body.home.homeRefinedV573 .learnerArmV573{
  position:absolute; height:3px; border-radius:999px; background:rgba(25,40,60,.36); transform-origin:left center;
}
html body.home.homeRefinedV573 .learnerArmV573.armLeft{ left:55px; top:55px; width:55px; transform:rotate(22deg); animation: learnerArmV573 var(--storyT) ease-in-out infinite; }
html body.home.homeRefinedV573 .learnerArmV573.armRight{ left:22px; top:56px; width:34px; transform:rotate(130deg); opacity:.52; }

html body.home.homeRefinedV573 .laptopV573{
  position:absolute; left:326px; top:62px; width:156px; height:126px;
  transform-origin:50% 85%;
  animation: laptopFocusV573 var(--storyT) var(--storyEase) infinite;
}
html body.home.homeRefinedV573 .screenV573{
  position:absolute; left:14px; top:0; width:128px; height:88px; border-radius:13px 13px 9px 9px;
  background:linear-gradient(135deg, rgba(255,255,255,.98), color-mix(in oklab, var(--accent2) 8%, white));
  border:1px solid rgba(25,40,60,.16);
  box-shadow:0 16px 30px rgba(20,34,52,.095);
  overflow:hidden;
}
html body.home.homeRefinedV573 .screenV573::after{
  content:""; position:absolute; inset:0; opacity:0;
  background:linear-gradient(120deg, transparent 0 34%, rgba(255,255,255,.76) 45%, transparent 58%);
  transform:translateX(-90%);
  animation: cockpitLightSweepV573 var(--storyT) ease-in-out infinite;
}
html body.home.homeRefinedV573 .screenTopV573{
  position:absolute; left:0; right:0; top:0; height:22px;
  display:flex; align-items:center; gap:6px; padding:0 10px;
  background:linear-gradient(90deg, color-mix(in oklab, var(--accent) 9%, white), rgba(255,255,255,.78));
  border-bottom:1px solid rgba(25,40,60,.07);
}
html body.home.homeRefinedV573 .screenTopV573 span{
  width:6px; height:6px; border-radius:50%; background:var(--storyGreenLine); box-shadow:10px 0 0 var(--storyGold), 20px 0 0 var(--storyBlue); opacity:.8;
}
html body.home.homeRefinedV573 .screenTopV573 strong{
  display:block; margin-left:24px; font-size:8px; line-height:1; letter-spacing:.10em; text-transform:uppercase; color:rgba(25,40,60,.72); font-weight:900;
}
html body.home.homeRefinedV573 .screenBodyV573{ position:absolute; inset:22px 0 0 0; }
html body.home.homeRefinedV573 .screenBodyV573 span{ position:absolute; display:block; opacity:0; animation: cockpitUiInV573 var(--storyT) ease-in-out infinite; }
html body.home.homeRefinedV573 .screenRailV573{ left:10px; top:11px; width:3px; height:48px; border-radius:999px; background:var(--storyBlueLine); }
html body.home.homeRefinedV573 .screenTitleV573{ left:20px; top:11px; width:55px; height:6px; border-radius:999px; background:rgba(25,40,60,.42); }
html body.home.homeRefinedV573 .screenLineV573{ left:20px; height:4px; border-radius:999px; background:rgba(25,40,60,.21); }
html body.home.homeRefinedV573 .screenLineV573.lineA{ top:27px; width:76px; animation-delay:.05s; }
html body.home.homeRefinedV573 .screenLineV573.lineB{ top:39px; width:58px; animation-delay:.10s; }
html body.home.homeRefinedV573 .screenCardV573{ top:53px; width:27px; height:12px; border-radius:5px; background:color-mix(in oklab, var(--accent3) 17%, white); border:1px solid rgba(25,40,60,.06); animation-name: cockpitCardInV573 !important; }
html body.home.homeRefinedV573 .screenCardV573.cardA{ left:20px; }
html body.home.homeRefinedV573 .screenCardV573.cardB{ left:52px; background:color-mix(in oklab, var(--accent2) 17%, white); animation-delay:.08s; }
html body.home.homeRefinedV573 .screenNextV573{ left:84px; top:53px; width:30px; height:12px; border-radius:999px; background:color-mix(in oklab, var(--accent) 14%, white); border:1px solid color-mix(in oklab, var(--accent) 20%, white); animation-name: cockpitCardInV573 !important; animation-delay:.15s; }
html body.home.homeRefinedV573 .screenProgressV573{ right:12px; top:11px; width:7px; height:42px; border-radius:999px; background:rgba(25,40,60,.065); overflow:hidden; }
html body.home.homeRefinedV573 .screenProgressV573 i{ position:absolute; left:0; right:0; bottom:0; height:0; border-radius:999px; background:linear-gradient(180deg, var(--storyBlue), var(--storyGreen)); animation: cockpitProgressV573 var(--storyT) ease-in-out infinite; }
html body.home.homeRefinedV573 .laptopBaseV573{
  position:absolute; left:0; bottom:10px; width:156px; height:28px;
  border:1px solid rgba(25,40,60,.13);
  border-radius:7px 7px 18px 18px;
  background:linear-gradient(180deg, color-mix(in oklab, white 91%, var(--accent2) 4%), color-mix(in oklab, white 82%, var(--ink) 5%));
  transform:skewX(-17deg);
  box-shadow:0 12px 22px rgba(20,34,52,.055);
}

html body.home.homeRefinedV573 .calmPathV573{
  z-index:5;
  pointer-events:none;
}
html body.home.homeRefinedV573 .calmPathV573::before{
  content:""; position:absolute; left:286px; right:38px; bottom:33px; height:2px; border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--storyBlue), var(--storyGold), var(--storyGreen));
  opacity:0; transform:scaleX(.55); transform-origin:left center;
  animation: finalGuideV573 var(--storyT) var(--storyEase) infinite;
}
html body.home.homeRefinedV573 .stepDotV573{
  position:absolute; bottom:29px; width:8px; height:8px; border-radius:50%; opacity:0; transform:scale(.65);
  background:var(--storyBlue); box-shadow:0 0 0 6px color-mix(in oklab, var(--accent) 8%, transparent);
  animation: finalDotV573 var(--storyT) ease-in-out infinite;
}
html body.home.homeRefinedV573 .stepDotV573.d1{ left:320px; }
html body.home.homeRefinedV573 .stepDotV573.d2{ left:384px; background:var(--storyGold); box-shadow:0 0 0 6px color-mix(in oklab, var(--accent3) 8%, transparent); animation-delay:.08s; }
html body.home.homeRefinedV573 .stepDotV573.d3{ left:452px; background:var(--storyGreen); box-shadow:0 0 0 6px color-mix(in oklab, var(--accent2) 8%, transparent); animation-delay:.16s; }

@keyframes sourceGatherV573{
  0%, 16%{ opacity:1; transform:translate(0,0) rotate(0deg) scale(1); }
  36%, 52%{ opacity:.86; transform:translate(var(--gx), var(--gy)) rotate(var(--gr)) scale(.84); }
  70%, 100%{ opacity:.32; transform:translate(var(--gx), var(--gy)) rotate(var(--gr)) scale(.78); }
}
@keyframes drawSourceFlowV573{
  0%, 14%{ opacity:0; stroke-dashoffset:1; }
  28%{ opacity:.58; }
  48%, 58%{ opacity:.44; stroke-dashoffset:0; }
  76%, 100%{ opacity:.10; stroke-dashoffset:0; }
}
@keyframes chairSettleV573{
  0%, 18%{ opacity:.48; transform:translateX(-12px); }
  36%, 100%{ opacity:.72; transform:translateX(0); }
}
@keyframes learnerSitV573{
  0%, 16%{ opacity:.56; transform:translateX(-26px) translateY(4px) scale(.96); }
  34%{ opacity:.92; transform:translateX(-6px) translateY(0) scale(1); }
  52%, 100%{ opacity:.94; transform:translateX(0) translateY(0) scale(1); }
}
@keyframes learnerArmV573{
  0%, 40%{ transform:rotate(25deg); opacity:.54; }
  56%, 100%{ transform:rotate(12deg); opacity:.78; }
}
@keyframes laptopFocusV573{
  0%, 34%{ transform:translateY(3px) scale(.985); filter:saturate(.92); }
  54%, 100%{ transform:translateY(0) scale(1); filter:saturate(1); }
}
@keyframes cockpitLightSweepV573{
  0%, 50%{ opacity:0; transform:translateX(-90%); }
  61%{ opacity:.66; transform:translateX(30%); }
  74%, 100%{ opacity:0; transform:translateX(86%); }
}
@keyframes cockpitUiInV573{
  0%, 40%{ opacity:0; transform:translateY(4px); }
  56%, 86%{ opacity:1; transform:translateY(0); }
  100%{ opacity:.72; transform:translateY(0); }
}
@keyframes cockpitCardInV573{
  0%, 48%{ opacity:0; transform:translateY(5px) scale(.92); }
  64%, 88%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:.72; transform:translateY(0) scale(1); }
}
@keyframes cockpitProgressV573{
  0%, 52%{ height:0; }
  78%, 100%{ height:76%; }
}
@keyframes finalGuideV573{
  0%, 64%{ opacity:0; transform:scaleX(.55); }
  76%, 90%{ opacity:.38; transform:scaleX(1); }
  100%{ opacity:.18; transform:scaleX(1); }
}
@keyframes finalDotV573{
  0%, 70%{ opacity:0; transform:scale(.65); }
  84%, 94%{ opacity:.80; transform:scale(1); }
  100%{ opacity:.36; transform:scale(.88); }
}

@media (max-width: 760px){
  html body.home.homeRefinedV573 .whyLearningExplainerV573{ width:100% !important; }
  html body.home.homeRefinedV573 .explainerStageV573{ height:216px; }
  html body.home.homeRefinedV573 .laptopV573{ left:300px; transform:scale(.92); }
  html body.home.homeRefinedV573 .learnerV573{ left:214px; }
}

@media (prefers-reduced-motion: reduce){
  html body.home.homeRefinedV573 .whyLearningExplainerV573 *,
  html body.home.homeRefinedV573 .whyLearningExplainerV573 *::before,
  html body.home.homeRefinedV573 .whyLearningExplainerV573 *::after{
    animation:none !important;
    transition:none !important;
  }
  html body.home.homeRefinedV573 .sourceDeskV573 > span{ opacity:.32 !important; transform:translate(var(--gx), var(--gy)) rotate(var(--gr)) scale(.78) !important; }
  html body.home.homeRefinedV573 .sourceToCockpitV573 .flowSource{ opacity:.12 !important; stroke-dashoffset:0 !important; }
  html body.home.homeRefinedV573 .learnerV573{ opacity:.94 !important; transform:none !important; }
  html body.home.homeRefinedV573 .screenBodyV573 span{ opacity:.72 !important; transform:none !important; }
  html body.home.homeRefinedV573 .screenProgressV573 i{ height:76% !important; }
  html body.home.homeRefinedV573 .calmPathV573::before{ opacity:.18 !important; transform:scaleX(1) !important; }
  html body.home.homeRefinedV573 .stepDotV573{ opacity:.36 !important; transform:scale(.88) !important; }
}