/* Praxoria Startseite – v574: ruhige Erklärvideo-Miniatur für Lernführung.
   Aussage: Aufgabe, Lernstand und nächster Schritt bleiben gemeinsam sichtbar. */

html body.home.homeRefinedV574 .whyLearningExplainerV574{
  width:min(100%, 456px) !important;
  margin: clamp(18px, 2.1vw, 26px) 0 clamp(8px, 1vw, 12px) !important;
  opacity:1 !important;
  pointer-events:none !important;
  --guideT: 7.8s;
  --guideEase: cubic-bezier(.28,.06,.16,1);
  --guideInk: color-mix(in oklab, var(--ink) 70%, #314258);
  --guideMuted: color-mix(in oklab, var(--ink) 36%, white);
  --guideBlue: color-mix(in oklab, var(--accent) 72%, white);
  --guideBlueLine: color-mix(in oklab, var(--accent) 72%, var(--ink));
  --guideGold: color-mix(in oklab, var(--accent3) 72%, white);
  --guideGoldLine: color-mix(in oklab, var(--accent3) 70%, var(--ink));
  --guideGreen: color-mix(in oklab, var(--accent2) 74%, white);
  --guideGreenLine: color-mix(in oklab, var(--accent2) 66%, var(--ink));
}

html body.home.homeRefinedV574 .guidedStageV574{
  position:relative;
  height:clamp(208px, 18.5vw, 246px);
  border-radius:30px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 18% 22%, color-mix(in oklab, var(--accent) 11%, transparent) 0, transparent 38%),
    radial-gradient(circle at 82% 28%, color-mix(in oklab, var(--accent2) 11%, transparent) 0, transparent 39%),
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.58));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 18px 34px rgba(18,32,48,.038);
}

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

html body.home.homeRefinedV574 .guidedAmbientV574{
  position:absolute;
  inset:22px 22px 18px;
  border-radius:28px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.54), rgba(255,255,255,.18));
  opacity:.64;
  transform:translateX(-18%);
  animation:guidedAmbientV574 var(--guideT) ease-in-out infinite;
  z-index:0;
}

html body.home.homeRefinedV574 .guidedBoardV574{
  position:absolute;
  left:clamp(14px, 2.2vw, 24px);
  right:clamp(14px, 2.2vw, 24px);
  top:clamp(18px, 2vw, 24px);
  bottom:clamp(18px, 2vw, 24px);
  border:1px solid rgba(25,40,60,.105);
  border-radius:24px;
  background:linear-gradient(145deg, rgba(255,255,255,.96), color-mix(in oklab, var(--accent2) 5%, white));
  box-shadow:0 20px 38px rgba(20,34,52,.075), inset 0 1px 0 rgba(255,255,255,.92);
  overflow:hidden;
  z-index:1;
}

html body.home.homeRefinedV574 .guidedTopV574{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  border-bottom:1px solid rgba(25,40,60,.07);
  background:linear-gradient(90deg, color-mix(in oklab, var(--accent) 7%, white), rgba(255,255,255,.78));
  color:rgba(25,40,60,.70);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

html body.home.homeRefinedV574 .guidedTopV574 strong{
  font-weight:900;
}

html body.home.homeRefinedV574 .guidedTopV574 em{
  margin-left:auto;
  font-style:normal;
  letter-spacing:.08em;
  color:rgba(25,40,60,.48);
}

html body.home.homeRefinedV574 .guidedDotV574{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--guideGreenLine);
  box-shadow:12px 0 0 var(--guideGold), 24px 0 0 var(--guideBlue);
  opacity:.78;
  margin-right:24px;
}

html body.home.homeRefinedV574 .guidedTilesV574{
  position:absolute;
  left:16px;
  right:16px;
  top:58px;
  bottom:24px;
  display:grid;
  grid-template-columns:1fr .92fr 1fr;
  gap:14px;
  z-index:3;
}

html body.home.homeRefinedV574 .guideTileV574{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(25,40,60,.095);
  background:rgba(255,255,255,.76);
  box-shadow:0 14px 25px rgba(20,34,52,.045), inset 0 1px 0 rgba(255,255,255,.86);
  overflow:hidden;
  min-width:0;
  transform:translateY(0);
  animation:guideTilePresenceV574 var(--guideT) ease-in-out infinite;
}

html body.home.homeRefinedV574 .guideTileV574::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  opacity:0;
  background:linear-gradient(135deg, rgba(255,255,255,.72), transparent 58%);
  animation:guideTileGlowV574 var(--guideT) ease-in-out infinite;
}

html body.home.homeRefinedV574 .guideTaskV574{
  background:linear-gradient(145deg, color-mix(in oklab, var(--accent) 9%, white), rgba(255,255,255,.80));
  animation-delay:0s;
}
html body.home.homeRefinedV574 .guideStandV574{
  background:linear-gradient(145deg, color-mix(in oklab, var(--accent3) 10%, white), rgba(255,255,255,.82));
  animation-delay:.18s;
}
html body.home.homeRefinedV574 .guideNextV574{
  background:linear-gradient(145deg, color-mix(in oklab, var(--accent2) 10%, white), rgba(255,255,255,.82));
  animation-delay:.36s;
}

html body.home.homeRefinedV574 .guideLabelV574{
  position:absolute;
  left:13px;
  top:12px;
  z-index:2;
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(25,40,60,.66);
  white-space:nowrap;
}

html body.home.homeRefinedV574 .guideIconV574{
  position:absolute;
  left:14px;
  top:39px;
  width:38px;
  height:48px;
  border-radius:11px;
  border:1px solid rgba(25,40,60,.10);
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 18px rgba(20,34,52,.035);
  z-index:2;
}
html body.home.homeRefinedV574 .guideIconV574::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:12px;
  height:12px;
  border-top-right-radius:10px;
  background:linear-gradient(135deg, transparent 50%, color-mix(in oklab, var(--accent) 18%, white) 51%);
}
html body.home.homeRefinedV574 .guideIconV574 i,
html body.home.homeRefinedV574 .guideIconV574 b{
  position:absolute;
  left:9px;
  height:2px;
  border-radius:999px;
  background:var(--guideBlueLine);
  opacity:.76;
}
html body.home.homeRefinedV574 .guideIconV574 i{ top:20px; width:19px; }
html body.home.homeRefinedV574 .guideIconV574 b{ top:31px; width:25px; background:rgba(25,40,60,.22); }

html body.home.homeRefinedV574 .guideTitleV574,
html body.home.homeRefinedV574 .guideLineV574{
  position:absolute;
  display:block;
  left:62px;
  height:4px;
  border-radius:999px;
  background:rgba(25,40,60,.22);
  z-index:2;
}
html body.home.homeRefinedV574 .guideTitleV574{ top:43px; width:56px; height:6px; background:rgba(25,40,60,.42); }
html body.home.homeRefinedV574 .guideLineV574.w1{ top:61px; width:66px; }
html body.home.homeRefinedV574 .guideLineV574.w2{ top:75px; width:46px; background:rgba(25,40,60,.16); }
html body.home.homeRefinedV574 .guideLineV574.w3{ left:16px; top:77px; width:82px; background:rgba(25,40,60,.16); }

html body.home.homeRefinedV574 .progressRingV574{
  position:absolute;
  left:50%;
  top:38px;
  width:50px;
  height:50px;
  margin-left:-25px;
  border-radius:50%;
  background:conic-gradient(var(--guideGoldLine) 0deg, var(--guideGoldLine) 252deg, rgba(25,40,60,.08) 252deg 360deg);
  box-shadow:0 9px 18px rgba(20,34,52,.04);
  animation:progressRingV574 var(--guideT) ease-in-out infinite;
  z-index:2;
}
html body.home.homeRefinedV574 .progressRingV574 i{
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
html body.home.homeRefinedV574 .progressTextV574{
  position:absolute;
  left:0;
  right:0;
  top:54px;
  text-align:center;
  font-size:13px;
  font-weight:900;
  color:rgba(25,40,60,.68);
  z-index:3;
}
html body.home.homeRefinedV574 .guideStepBarsV574{
  position:absolute;
  left:22px;
  right:22px;
  bottom:18px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:5px;
  z-index:3;
}
html body.home.homeRefinedV574 .guideStepBarsV574 i{
  height:5px;
  border-radius:999px;
  background:rgba(25,40,60,.10);
  overflow:hidden;
  position:relative;
}
html body.home.homeRefinedV574 .guideStepBarsV574 i::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--guideBlue), var(--guideGold));
  transform:scaleX(0);
  transform-origin:left center;
  animation:stepBarFillV574 var(--guideT) ease-in-out infinite;
}
html body.home.homeRefinedV574 .guideStepBarsV574 i:nth-child(2)::after{ animation-delay:.12s; }
html body.home.homeRefinedV574 .guideStepBarsV574 i:nth-child(3)::after{ background:var(--guideGreen); animation-name:stepBarNextHintV574; animation-delay:.24s; }

html body.home.homeRefinedV574 .guideNextPillV574{
  position:absolute;
  left:15px;
  right:15px;
  top:42px;
  height:24px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(25,40,60,.08);
  box-shadow:0 10px 18px rgba(20,34,52,.035);
  z-index:2;
}
html body.home.homeRefinedV574 .guideNextPillV574 i,
html body.home.homeRefinedV574 .guideNextPillV574 b{
  position:absolute;
  top:10px;
  height:3px;
  border-radius:999px;
  background:var(--guideGreenLine);
}
html body.home.homeRefinedV574 .guideNextPillV574 i{ left:13px; width:32px; opacity:.78; }
html body.home.homeRefinedV574 .guideNextPillV574 b{ left:51px; width:18px; opacity:.28; }
html body.home.homeRefinedV574 .guideArrowV574{
  position:absolute;
  right:17px;
  bottom:18px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--guideGreen);
  border:1px solid rgba(25,40,60,.08);
  box-shadow:0 10px 18px rgba(20,34,52,.045);
  z-index:2;
  animation:nextArrowV574 var(--guideT) ease-in-out infinite;
}
html body.home.homeRefinedV574 .guideArrowV574::before{
  content:"";
  position:absolute;
  left:10px;
  top:9px;
  width:8px;
  height:8px;
  border-right:2px solid rgba(25,40,60,.54);
  border-top:2px solid rgba(25,40,60,.54);
  transform:rotate(45deg);
}

html body.home.homeRefinedV574 .guideFlowV574{
  position:absolute;
  inset:38px 10px 8px;
  z-index:2;
  overflow:visible;
}
html body.home.homeRefinedV574 .guideFlowBaseV574,
html body.home.homeRefinedV574 .guideFlowActiveV574{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
html body.home.homeRefinedV574 .guideFlowBaseV574{
  stroke:rgba(25,40,60,.10);
  stroke-width:2;
}
html body.home.homeRefinedV574 .guideFlowActiveV574{
  stroke:url(#guideFlowGradientV574);
  stroke-width:3;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:.92;
  filter:drop-shadow(0 3px 5px rgba(20,34,52,.08));
  animation:guideFlowDrawV574 var(--guideT) var(--guideEase) infinite;
}

html body.home.homeRefinedV574 .guidePulseV574{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  z-index:4;
  opacity:0;
  transform:scale(.72);
  background:var(--guideBlueLine);
  box-shadow:0 0 0 7px color-mix(in oklab, var(--accent) 10%, transparent);
  animation:guidePulseV574 var(--guideT) ease-in-out infinite;
}
html body.home.homeRefinedV574 .pulseTaskV574{ left:113px; top:114px; }
html body.home.homeRefinedV574 .pulseStandV574{ left:50%; top:111px; margin-left:-5px; background:var(--guideGoldLine); box-shadow:0 0 0 7px color-mix(in oklab, var(--accent3) 10%, transparent); animation-delay:.28s; }
html body.home.homeRefinedV574 .pulseNextV574{ right:110px; top:112px; background:var(--guideGreenLine); box-shadow:0 0 0 7px color-mix(in oklab, var(--accent2) 10%, transparent); animation-delay:.56s; }

@keyframes guidedAmbientV574{
  0%, 22%{ opacity:.46; transform:translateX(-18%); }
  50%{ opacity:.72; transform:translateX(0); }
  78%, 100%{ opacity:.54; transform:translateX(14%); }
}
@keyframes guideTilePresenceV574{
  0%, 100%{ transform:translateY(0); }
  38%, 56%{ transform:translateY(-2px); }
}
@keyframes guideTileGlowV574{
  0%, 22%{ opacity:0; }
  36%, 58%{ opacity:.42; }
  74%, 100%{ opacity:.12; }
}
@keyframes guideFlowDrawV574{
  0%, 20%{ stroke-dashoffset:1; opacity:.24; }
  44%, 70%{ stroke-dashoffset:0; opacity:.94; }
  100%{ stroke-dashoffset:0; opacity:.38; }
}
@keyframes guidePulseV574{
  0%, 24%{ opacity:0; transform:scale(.72); }
  34%, 45%{ opacity:.82; transform:scale(1); }
  62%, 100%{ opacity:0; transform:scale(1.18); }
}
@keyframes progressRingV574{
  0%, 30%{ filter:saturate(.84); transform:scale(.96); }
  46%, 78%{ filter:saturate(1.08); transform:scale(1); }
  100%{ filter:saturate(.96); transform:scale(.98); }
}
@keyframes stepBarFillV574{
  0%, 30%{ transform:scaleX(0); opacity:.38; }
  48%, 76%{ transform:scaleX(1); opacity:1; }
  100%{ transform:scaleX(1); opacity:.74; }
}
@keyframes stepBarNextHintV574{
  0%, 42%{ transform:scaleX(0); opacity:.22; }
  58%, 78%{ transform:scaleX(.38); opacity:.58; }
  100%{ transform:scaleX(.38); opacity:.38; }
}
@keyframes nextArrowV574{
  0%, 58%{ transform:translateX(0); filter:saturate(.95); }
  70%{ transform:translateX(4px); filter:saturate(1.1); }
  84%, 100%{ transform:translateX(0); filter:saturate(1); }
}

@media (max-width: 760px){
  html body.home.homeRefinedV574 .whyLearningExplainerV574{ width:100% !important; }
  html body.home.homeRefinedV574 .guidedStageV574{ height:226px; }
  html body.home.homeRefinedV574 .guidedTilesV574{
    left:12px;
    right:12px;
    gap:9px;
  }
  html body.home.homeRefinedV574 .guideLabelV574{ font-size:7.4px; letter-spacing:.08em; left:10px; }
  html body.home.homeRefinedV574 .guideTitleV574,
  html body.home.homeRefinedV574 .guideLineV574{ left:52px; }
  html body.home.homeRefinedV574 .guideIconV574{ left:10px; width:34px; }
  html body.home.homeRefinedV574 .guideLineV574.w3{ left:12px; width:58px; }
  html body.home.homeRefinedV574 .guideStepBarsV574{ left:14px; right:14px; }
  html body.home.homeRefinedV574 .guidedTopV574 em{ display:none; }
}

@media (max-width: 480px){
  html body.home.homeRefinedV574 .guidedStageV574{ height:246px; }
  html body.home.homeRefinedV574 .guidedTilesV574{
    grid-template-columns:1fr;
    top:50px;
    bottom:14px;
  }
  html body.home.homeRefinedV574 .guideTileV574{ min-height:48px; }
  html body.home.homeRefinedV574 .guideIconV574,
  html body.home.homeRefinedV574 .progressRingV574,
  html body.home.homeRefinedV574 .progressTextV574,
  html body.home.homeRefinedV574 .guideNextPillV574,
  html body.home.homeRefinedV574 .guideArrowV574,
  html body.home.homeRefinedV574 .guideFlowV574,
  html body.home.homeRefinedV574 .guidePulseV574{ display:none; }
  html body.home.homeRefinedV574 .guideLabelV574{ top:11px; }
  html body.home.homeRefinedV574 .guideTitleV574,
  html body.home.homeRefinedV574 .guideLineV574{
    left:16px;
    top:30px;
  }
  html body.home.homeRefinedV574 .guideLineV574.w1{ top:30px; width:78px; }
  html body.home.homeRefinedV574 .guideLineV574.w2{ display:none; }
  html body.home.homeRefinedV574 .guideStepBarsV574{
    display:grid;
    left:16px;
    right:16px;
    bottom:12px;
  }
}

@media (prefers-reduced-motion: reduce){
  html body.home.homeRefinedV574 .whyLearningExplainerV574 *,
  html body.home.homeRefinedV574 .whyLearningExplainerV574 *::before,
  html body.home.homeRefinedV574 .whyLearningExplainerV574 *::after{
    animation:none !important;
    transition:none !important;
  }
  html body.home.homeRefinedV574 .guidedAmbientV574{ opacity:.58 !important; transform:none !important; }
  html body.home.homeRefinedV574 .guideTileV574{ transform:none !important; }
  html body.home.homeRefinedV574 .guideTileV574::before{ opacity:.18 !important; }
  html body.home.homeRefinedV574 .guideFlowActiveV574{ stroke-dashoffset:0 !important; opacity:.44 !important; }
  html body.home.homeRefinedV574 .guidePulseV574{ opacity:.25 !important; transform:scale(.9) !important; }
  html body.home.homeRefinedV574 .guideStepBarsV574 i::after{ transform:scaleX(1) !important; opacity:.74 !important; }
}