/* Praxoria Startseite – v572: konkrete Premium-Erklärvideo-Miniatur.
   Keine Labels, keine abstrakte Deko: Quellen ordnen sich, eine Person arbeitet am Laptop,
   die Lernoberfläche wird sichtbar. */

html body.home.homeRefinedV572 .whyLearningSceneV571{
  display:none !important;
}

html body.home.homeRefinedV572 .whyLearningExplainerV572{
  width:min(100%, 455px) !important;
  margin: clamp(16px, 1.9vw, 24px) 0 0 !important;
  opacity:1 !important;
  --sceneT: 7.4s;
  --easePremium: cubic-bezier(.28,.04,.16,1);
  --blueSoft: color-mix(in oklab, var(--accent) 64%, white);
  --blueLine: color-mix(in oklab, var(--accent) 66%, var(--ink));
  --goldSoft: color-mix(in oklab, var(--accent3) 64%, white);
  --goldLine: color-mix(in oklab, var(--accent3) 66%, var(--ink));
  --greenSoft: color-mix(in oklab, var(--accent2) 64%, white);
  --greenLine: color-mix(in oklab, var(--accent2) 62%, var(--ink));
}

html body.home.homeRefinedV572 .explainStageV572{
  position:relative;
  height: clamp(178px, 17vw, 215px);
  border-radius: 28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 26%, color-mix(in oklab, var(--accent2) 7%, transparent) 0, transparent 38%),
    radial-gradient(circle at 12% 30%, color-mix(in oklab, var(--accent) 8%, transparent) 0, transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.52));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  isolation:isolate;
}

html body.home.homeRefinedV572 .explainStageV572::after{
  content:"";
  position:absolute;
  inset:auto 26px 18px 26px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(25,40,60,.08), transparent);
  z-index:0;
}

/* Quellen: konkrete Dokumente, die sich ordnen */
html body.home.homeRefinedV572 .sourceGroupV572,
html body.home.homeRefinedV572 .deskSceneV572,
html body.home.homeRefinedV572 .guideFlowV572,
html body.home.homeRefinedV572 .calmSignalsV572{
  position:absolute;
  inset:0;
}

html body.home.homeRefinedV572 .sourceGroupV572{ z-index:2; }

html body.home.homeRefinedV572 .sourceGroupV572 > span:not(.questionMark){
  position:absolute;
  display:block;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(25,40,60,.10);
  box-shadow:0 12px 24px rgba(20,34,52,.055);
  transform-origin:center;
  animation: sourceOrderV572 var(--sceneT) var(--easePremium) infinite;
}

html body.home.homeRefinedV572 .sourceGroupV572 > span i,
html body.home.homeRefinedV572 .sourceGroupV572 > span b,
html body.home.homeRefinedV572 .sourceGroupV572 > span em{
  position:absolute;
  display:block;
  height:2px;
  border-radius:999px;
  opacity:.72;
}

html body.home.homeRefinedV572 .srcDoc{
  width:56px; height:70px; left:34px; top:32px; border-radius:9px;
  --sx: 0px; --sy: 0px; --ex: 72px; --ey: 44px; --rot: 4deg;
}
html body.home.homeRefinedV572 .srcDoc::after{
  content:""; position:absolute; right:0; top:0; width:17px; height:17px;
  background:linear-gradient(135deg, rgba(255,255,255,0) 50%, color-mix(in oklab, var(--accent) 12%, white) 51%);
  border-top-right-radius:8px;
}
html body.home.homeRefinedV572 .srcDoc i{ left:12px; top:22px; width:26px; background:var(--blueLine); }
html body.home.homeRefinedV572 .srcDoc b{ left:12px; top:36px; width:34px; background:rgba(25,40,60,.28); }
html body.home.homeRefinedV572 .srcDoc em{ left:12px; top:50px; width:22px; background:rgba(25,40,60,.20); }

html body.home.homeRefinedV572 .srcBook{
  width:72px; height:52px; left:118px; top:26px; border-radius:10px;
  background:linear-gradient(90deg, color-mix(in oklab, var(--accent3) 14%, white), rgba(255,255,255,.9));
  --ex: -12px; --ey: 52px; --rot: -5deg;
}
html body.home.homeRefinedV572 .srcBook::before{
  content:""; position:absolute; left:12px; top:7px; bottom:7px; width:2px; border-radius:999px; background:var(--goldLine); opacity:.5;
}
html body.home.homeRefinedV572 .srcBook i{ left:25px; top:18px; width:32px; background:var(--goldLine); }
html body.home.homeRefinedV572 .srcBook b{ left:25px; top:32px; width:24px; background:rgba(25,40,60,.22); }

html body.home.homeRefinedV572 .srcNote{
  width:74px; height:50px; left:52px; top:128px; border-radius:10px;
  background:linear-gradient(135deg, color-mix(in oklab, var(--accent2) 10%, white), rgba(255,255,255,.92));
  --ex: 58px; --ey: -34px; --rot: -3deg;
}
html body.home.homeRefinedV572 .srcNote::before{
  content:""; position:absolute; right:12px; top:-5px; width:13px; height:13px; border-radius:50%; background:var(--greenSoft); border:1px solid rgba(25,40,60,.08);
}
html body.home.homeRefinedV572 .srcNote i{ left:14px; top:18px; width:38px; background:var(--greenLine); }
html body.home.homeRefinedV572 .srcNote b{ left:14px; top:32px; width:25px; background:rgba(25,40,60,.22); }

html body.home.homeRefinedV572 .srcCard{
  width:54px; height:44px; left:154px; top:126px; border-radius:12px;
  --ex: -36px; --ey: -25px; --rot: 5deg;
}
html body.home.homeRefinedV572 .srcCard i{ left:11px; top:16px; width:25px; background:var(--blueLine); }
html body.home.homeRefinedV572 .srcCard b{ left:11px; top:29px; width:18px; background:rgba(25,40,60,.18); }

html body.home.homeRefinedV572 .questionMark{
  position:absolute;
  width:7px; height:7px; border-radius:50%;
  background:color-mix(in oklab, var(--accent3) 62%, white);
  box-shadow:0 0 0 8px color-mix(in oklab, var(--accent3) 9%, transparent);
  opacity:.55;
  animation: questionsFadeV572 var(--sceneT) ease-in-out infinite;
}
html body.home.homeRefinedV572 .q1{ left:205px; top:66px; }
html body.home.homeRefinedV572 .q2{ left:21px; top:118px; background:color-mix(in oklab, var(--accent) 60%, white); box-shadow:0 0 0 8px color-mix(in oklab, var(--accent) 9%, transparent); animation-delay:.12s; }

/* Arbeitsplatz mit Person und Laptop */
html body.home.homeRefinedV572 .deskSceneV572{ z-index:3; }
html body.home.homeRefinedV572 .deskV572{
  position:absolute; left:238px; right:26px; bottom:36px; height:6px; border-radius:999px;
  background:linear-gradient(90deg, rgba(25,40,60,.16), rgba(25,40,60,.07));
  opacity:0;
  animation: deskInV572 var(--sceneT) ease-in-out infinite;
}
html body.home.homeRefinedV572 .deskV572::before,
html body.home.homeRefinedV572 .deskV572::after{
  content:""; position:absolute; top:6px; width:2px; height:28px; border-radius:999px; background:rgba(25,40,60,.12);
}
html body.home.homeRefinedV572 .deskV572::before{ left:30px; }
html body.home.homeRefinedV572 .deskV572::after{ right:40px; }

html body.home.homeRefinedV572 .chairV572{
  position:absolute; left:234px; bottom:42px; width:56px; height:42px; opacity:0;
  border-bottom:2px solid rgba(25,40,60,.16);
  border-left:2px solid rgba(25,40,60,.12);
  border-radius:16px 16px 4px 4px;
  animation: deskInV572 var(--sceneT) ease-in-out infinite;
}

html body.home.homeRefinedV572 .learnerV572{
  position:absolute; left:244px; top:72px; width:84px; height:100px; opacity:0;
  transform:translateX(-36px) translateY(9px) scale(.96);
  transform-origin:50% 90%;
  animation: learnerArrivesV572 var(--sceneT) var(--easePremium) infinite;
}
html body.home.homeRefinedV572 .learnerV572 .head{
  position:absolute; left:30px; top:0; width:28px; height:28px; border-radius:50%;
  background:color-mix(in oklab, var(--accent3) 18%, white);
  border:1px solid rgba(25,40,60,.13);
}
html body.home.homeRefinedV572 .learnerV572 .hair{
  position:absolute; left:27px; top:0; width:33px; height:18px; border-radius:20px 20px 8px 8px;
  border-top:3px solid color-mix(in oklab, var(--ink) 52%, var(--accent3));
  opacity:.52;
}
html body.home.homeRefinedV572 .learnerV572 .body{
  position:absolute; left:22px; top:34px; width:42px; height:48px; border-radius:24px 24px 16px 16px;
  background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 14%, white), color-mix(in oklab, var(--accent2) 8%, white));
  border:1px solid rgba(25,40,60,.12);
}
html body.home.homeRefinedV572 .learnerV572 .arm{
  position:absolute; height:3px; border-radius:999px; background:rgba(25,40,60,.32); transform-origin:left center;
}
html body.home.homeRefinedV572 .learnerV572 .armA{ left:53px; top:52px; width:50px; transform:rotate(20deg); animation: armToLaptopV572 var(--sceneT) ease-in-out infinite; }
html body.home.homeRefinedV572 .learnerV572 .armB{ left:20px; top:54px; width:32px; transform:rotate(128deg); opacity:.55; }

html body.home.homeRefinedV572 .laptopV572{
  position:absolute; left:326px; bottom:42px; width:150px; height:106px; opacity:0;
  transform:translateY(12px) scale(.96);
  animation:laptopWakeV572 var(--sceneT) var(--easePremium) infinite;
}
html body.home.homeRefinedV572 .screenV572{
  position:absolute; left:16px; top:0; width:118px; height:78px; border-radius:12px 12px 8px 8px;
  background:linear-gradient(135deg, rgba(255,255,255,.98), color-mix(in oklab, var(--accent2) 8%, white));
  border:1px solid rgba(25,40,60,.14);
  box-shadow:0 14px 26px rgba(20,34,52,.08);
  overflow:hidden;
}
html body.home.homeRefinedV572 .screenV572::after{
  content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.78) 45%, transparent 56%); opacity:0; animation:screenSweepV572 var(--sceneT) ease-in-out infinite;
}
html body.home.homeRefinedV572 .baseV572{
  position:absolute; left:0; bottom:0; width:150px; height:26px;
  background:linear-gradient(180deg, color-mix(in oklab, white 90%, var(--accent2) 5%), color-mix(in oklab, white 80%, var(--ink) 5%));
  border:1px solid rgba(25,40,60,.12);
  border-radius:6px 6px 18px 18px;
  transform:skewX(-18deg);
}

html body.home.homeRefinedV572 .screenV572 span{ position:absolute; display:block; opacity:0; }
html body.home.homeRefinedV572 .uiRail{ left:11px; top:14px; width:3px; height:46px; border-radius:999px; background:var(--blueLine); animation: uiInV572 var(--sceneT) ease-in-out infinite; }
html body.home.homeRefinedV572 .uiTitle{ left:23px; top:15px; width:52px; height:5px; border-radius:999px; background:rgba(25,40,60,.40); animation: uiInV572 var(--sceneT) ease-in-out infinite; }
html body.home.homeRefinedV572 .uiLine{ left:23px; height:4px; border-radius:999px; background:rgba(25,40,60,.20); animation: uiInV572 var(--sceneT) ease-in-out infinite; }
html body.home.homeRefinedV572 .uiLine.l1{ top:30px; width:72px; animation-delay:.05s; }
html body.home.homeRefinedV572 .uiLine.l2{ top:42px; width:58px; animation-delay:.10s; }
html body.home.homeRefinedV572 .uiCard{ top:56px; width:28px; height:12px; border-radius:5px; background:color-mix(in oklab, var(--accent3) 16%, white); border:1px solid rgba(25,40,60,.06); animation: uiCardInV572 var(--sceneT) ease-in-out infinite; }
html body.home.homeRefinedV572 .uiCard.c1{ left:23px; }
html body.home.homeRefinedV572 .uiCard.c2{ left:56px; background:color-mix(in oklab, var(--accent2) 16%, white); animation-delay:.06s; }
html body.home.homeRefinedV572 .uiProgress{ left:88px; top:17px; width:18px; height:48px; border-radius:999px; background:rgba(25,40,60,.06); animation: uiInV572 var(--sceneT) ease-in-out infinite; overflow:hidden; }
html body.home.homeRefinedV572 .uiProgress i{ position:absolute; left:0; right:0; bottom:0; height:0; background:linear-gradient(180deg, var(--blueSoft), var(--greenSoft)); border-radius:999px; animation: progressFillV572 var(--sceneT) ease-in-out infinite; }
html body.home.homeRefinedV572 .uiDot{ width:6px; height:6px; border-radius:50%; right:15px; background:var(--blueSoft); animation: dotInV572 var(--sceneT) ease-in-out infinite; }
html body.home.homeRefinedV572 .uiDot.d1{ top:31px; background:var(--blueSoft); }
html body.home.homeRefinedV572 .uiDot.d2{ top:43px; background:var(--goldSoft); animation-delay:.07s; }
html body.home.homeRefinedV572 .uiDot.d3{ top:55px; background:var(--greenSoft); animation-delay:.14s; }

html body.home.homeRefinedV572 .guideFlowV572{
  z-index:1;
  width:100%; height:100%;
  overflow:visible;
}
html body.home.homeRefinedV572 .guideFlowV572 path{
  fill:none; stroke:url(#guideFlowGradientV572); stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
html body.home.homeRefinedV572 .guideMain{
  stroke-width:2.6; stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
  animation: flowDrawV572 var(--sceneT) var(--easePremium) infinite;
}
html body.home.homeRefinedV572 .guideCalm{
  stroke-width:2.1; stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
  animation: calmLineV572 var(--sceneT) var(--easePremium) infinite;
}

html body.home.homeRefinedV572 .calmSignalsV572{ z-index:4; pointer-events:none; }
html body.home.homeRefinedV572 .signal{
  position:absolute; width:8px; height:8px; border-radius:50%; opacity:0; transform:scale(.7);
  background:var(--blueSoft); box-shadow:0 0 0 7px color-mix(in oklab, var(--accent) 8%, transparent);
  animation: signalInV572 var(--sceneT) ease-in-out infinite;
}
html body.home.homeRefinedV572 .signal.s1{ left:338px; top:166px; }
html body.home.homeRefinedV572 .signal.s2{ left:400px; top:155px; background:var(--goldSoft); box-shadow:0 0 0 7px color-mix(in oklab, var(--accent3) 8%, transparent); animation-delay:.08s; }
html body.home.homeRefinedV572 .signal.s3{ left:470px; top:126px; background:var(--greenSoft); box-shadow:0 0 0 7px color-mix(in oklab, var(--accent2) 8%, transparent); animation-delay:.16s; }

@keyframes sourceOrderV572{
  0%,15%{ opacity:.98; transform:translate(0,0) rotate(0deg) scale(1); }
  33%,47%{ opacity:.82; transform:translate(var(--ex), var(--ey)) rotate(var(--rot)) scale(.86); }
  64%,82%{ opacity:.30; transform:translate(var(--ex), var(--ey)) rotate(var(--rot)) scale(.78); }
  100%{ opacity:.98; transform:translate(0,0) rotate(0deg) scale(1); }
}
@keyframes questionsFadeV572{
  0%,18%{ opacity:.55; transform:scale(1); }
  32%,100%{ opacity:0; transform:scale(.6); }
}
@keyframes deskInV572{
  0%,22%{ opacity:0; transform:translateY(6px); }
  36%,100%{ opacity:1; transform:translateY(0); }
}
@keyframes learnerArrivesV572{
  0%,24%{ opacity:0; transform:translateX(-38px) translateY(10px) scale(.96); }
  37%{ opacity:.92; transform:translateX(-10px) translateY(2px) scale(1); }
  50%,86%{ opacity:.92; transform:translateX(0) translateY(0) scale(1); }
  100%{ opacity:.70; transform:translateX(0) translateY(0) scale(1); }
}
@keyframes armToLaptopV572{
  0%,42%{ transform:rotate(26deg); opacity:.55; }
  55%,100%{ transform:rotate(14deg); opacity:.76; }
}
@keyframes laptopWakeV572{
  0%,37%{ opacity:0; transform:translateY(12px) scale(.95); }
  50%,87%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:.76; transform:translateY(0) scale(1); }
}
@keyframes screenSweepV572{
  0%,54%{ opacity:0; transform:translateX(-80%); }
  64%{ opacity:.68; transform:translateX(40%); }
  78%,100%{ opacity:0; transform:translateX(82%); }
}
@keyframes flowDrawV572{
  0%,24%{ stroke-dashoffset:1; opacity:0; }
  42%{ opacity:.54; }
  57%,74%{ stroke-dashoffset:0; opacity:.38; }
  100%{ stroke-dashoffset:0; opacity:.12; }
}
@keyframes uiInV572{
  0%,50%{ opacity:0; transform:translateY(4px); }
  62%,86%{ opacity:1; transform:translateY(0); }
  100%{ opacity:.62; transform:translateY(0); }
}
@keyframes uiCardInV572{
  0%,56%{ opacity:0; transform:translateY(5px) scale(.92); }
  68%,86%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:.58; transform:translateY(0) scale(1); }
}
@keyframes progressFillV572{
  0%,58%{ height:0; }
  76%,100%{ height:72%; }
}
@keyframes dotInV572{
  0%,60%{ opacity:0; transform:scale(.55); }
  73%,90%{ opacity:.9; transform:scale(1); }
  100%{ opacity:.52; transform:scale(.9); }
}
@keyframes calmLineV572{
  0%,64%{ stroke-dashoffset:1; opacity:0; }
  78%,88%{ stroke-dashoffset:0; opacity:.35; }
  100%{ stroke-dashoffset:0; opacity:.12; }
}
@keyframes signalInV572{
  0%,70%{ opacity:0; transform:scale(.65); }
  83%,92%{ opacity:.72; transform:scale(1); }
  100%{ opacity:.30; transform:scale(.9); }
}

@media (max-width: 760px){
  html body.home.homeRefinedV572 .whyLearningExplainerV572{ width:100% !important; }
  html body.home.homeRefinedV572 .explainStageV572{ height:190px; }
}

@media (prefers-reduced-motion: reduce){
  html body.home.homeRefinedV572 .whyLearningExplainerV572 *{
    animation:none !important;
    transition:none !important;
  }
  html body.home.homeRefinedV572 .sourceGroupV572 > span:not(.questionMark){ opacity:.28; transform:translate(var(--ex), var(--ey)) rotate(var(--rot)) scale(.78); }
  html body.home.homeRefinedV572 .questionMark{ opacity:0; }
  html body.home.homeRefinedV572 .deskV572,
  html body.home.homeRefinedV572 .chairV572,
  html body.home.homeRefinedV572 .learnerV572,
  html body.home.homeRefinedV572 .laptopV572{ opacity:.9; transform:none; }
  html body.home.homeRefinedV572 .uiRail,
  html body.home.homeRefinedV572 .uiTitle,
  html body.home.homeRefinedV572 .uiLine,
  html body.home.homeRefinedV572 .uiCard,
  html body.home.homeRefinedV572 .uiProgress,
  html body.home.homeRefinedV572 .uiDot,
  html body.home.homeRefinedV572 .signal{ opacity:.72; }
  html body.home.homeRefinedV572 .uiProgress i{ height:72%; }
  html body.home.homeRefinedV572 .guideMain,
  html body.home.homeRefinedV572 .guideCalm{ stroke-dashoffset:0; opacity:.18; }
}