/* Praxoria Startseite – v579: konkrete, leichte Lernreise ohne Box-in-Box-Optik. */

html body.home.homeRefinedV579 .whyStoryPanelV579{
  position:sticky !important;
  top:96px !important;
  align-self:start !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:clamp(430px, 39vw, 560px) !important;
  padding:clamp(14px, 2.3vw, 28px) !important;
  overflow:visible !important;
  border:0 !important;
  background:
    radial-gradient(420px 300px at 18% 18%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(460px 300px at 78% 80%, color-mix(in oklab, var(--accent2) 7%, transparent), transparent 72%),
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.42)) !important;
  box-shadow:none !important;
}
html body.home.homeRefinedV579 .whyStoryPanelV579::before,
html body.home.homeRefinedV579 .whyStoryPanelV579::after{
  display:none !important;
}

html body.home.homeRefinedV579 .learningStoryV579{
  --story-blue:#4aa9cc;
  --story-blue-deep:#347f9e;
  --story-green:#8fb45f;
  --story-green-deep:#6f9145;
  --story-gold:#d4a949;
  --story-gold-deep:#9f7931;
  --story-ink:rgba(24,34,50,.78);
  --story-line:rgba(24,34,50,.15);
  --story-active:var(--story-blue-deep);
  --token-x:13.7%;
  --token-y:67%;
  --story-offset:.73;
  position:relative !important;
  width:min(100%, 680px) !important;
  aspect-ratio:7 / 5 !important;
  pointer-events:none !important;
  isolation:isolate !important;
}
html body.home.homeRefinedV579 .learningStoryV579.is-transfer{
  --story-active:var(--story-gold-deep);
  --token-x:50.3%;
  --token-y:45.2%;
  --story-offset:.36;
}
html body.home.homeRefinedV579 .learningStoryV579.is-document{
  --story-active:var(--story-green-deep);
  --token-x:86.3%;
  --token-y:39%;
  --story-offset:0;
}

html body.home.homeRefinedV579 .storyGlowV579{
  position:absolute !important;
  inset:2% 3% 0 !important;
  border-radius:46% 54% 42% 58% / 44% 42% 58% 56% !important;
  background:
    radial-gradient(circle at var(--token-x) var(--token-y), color-mix(in oklab, var(--story-active) 17%, transparent), transparent 36%),
    radial-gradient(circle at 50% 58%, rgba(255,255,255,.74), transparent 58%) !important;
  filter:blur(18px) !important;
  opacity:.82 !important;
  transform:translate3d(0,0,0) !important;
  transition:background .8s ease, opacity .8s ease !important;
  animation:storyGlowV579 7.2s ease-in-out infinite !important;
}

html body.home.homeRefinedV579 .storyCanvasV579{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  width:100% !important;
  height:100% !important;
  overflow:visible !important;
}
html body.home.homeRefinedV579 .storyCanvasV579 *{
  vector-effect:non-scaling-stroke;
}

html body.home.homeRefinedV579 .storyWashV579{
  fill:color-mix(in oklab, var(--story-active) 7%, transparent) !important;
  opacity:.68 !important;
  transition:fill .75s ease, opacity .75s ease !important;
  animation:storyWashV579 8s ease-in-out infinite !important;
}
html body.home.homeRefinedV579 .washB{
  animation-delay:-3.1s !important;
  opacity:.52 !important;
}

html body.home.homeRefinedV579 .storyPathBaseV579,
html body.home.homeRefinedV579 .storyPathActiveV579{
  fill:none !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
html body.home.homeRefinedV579 .storyPathBaseV579{
  stroke:rgba(24,34,50,.105) !important;
  stroke-width:3.2 !important;
}
html body.home.homeRefinedV579 .storyPathActiveV579{
  stroke:url(#storyPathGradientV579) !important;
  stroke-width:4.4 !important;
  stroke-dasharray:1 !important;
  stroke-dashoffset:var(--story-offset) !important;
  opacity:.70 !important;
  filter:drop-shadow(0 10px 18px color-mix(in oklab, var(--story-active) 13%, transparent)) !important;
  transition:stroke-dashoffset .95s cubic-bezier(.2,.7,.2,1), opacity .55s ease !important;
  animation:storyPathBreathV579 4.2s ease-in-out infinite !important;
}

html body.home.homeRefinedV579 .storySceneV579{
  opacity:0 !important;
  transform:translateY(14px) scale(.985) !important;
  transform-box:fill-box !important;
  transform-origin:center !important;
  transition:opacity .5s ease, transform .76s cubic-bezier(.2,.7,.2,1) !important;
}
html body.home.homeRefinedV579 .learningStoryV579.is-learn .storyLearnV579,
html body.home.homeRefinedV579 .learningStoryV579.is-transfer .storyTransferV579,
html body.home.homeRefinedV579 .learningStoryV579.is-document .storyDocumentV579{
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
}

/* Gemeinsame illustrative Materialität: Blätter, Laptop, Zertifikat – bewusst ohne verschachtelte Rahmen. */
html body.home.homeRefinedV579 .learnLaptopV579 > path:first-child,
html body.home.homeRefinedV579 .transferLaptopV579 > path:first-child,
html body.home.homeRefinedV579 .certificateV579 > path:first-child,
html body.home.homeRefinedV579 .transferNoteV579 > path:first-child{
  fill:url(#storyPaperV579) !important;
  stroke:rgba(24,34,50,.105) !important;
  stroke-width:1.2 !important;
}
html body.home.homeRefinedV579 .screenShade{
  fill:rgba(248,252,253,.78) !important;
  stroke:rgba(24,34,50,.07) !important;
  stroke-width:1 !important;
}
html body.home.homeRefinedV579 .laptopBase{
  fill:rgba(255,255,255,.78) !important;
  stroke:rgba(24,34,50,.105) !important;
  stroke-width:1.2 !important;
}
html body.home.homeRefinedV579 .laptopLine,
html body.home.homeRefinedV579 .certLine,
html body.home.homeRefinedV579 .noteLines{
  fill:none !important;
  stroke:rgba(24,34,50,.20) !important;
  stroke-width:6 !important;
  stroke-linecap:round !important;
}
html body.home.homeRefinedV579 .learnCheck{
  fill:color-mix(in oklab, var(--story-blue) 12%, #fff) !important;
  stroke:color-mix(in oklab, var(--story-blue) 42%, transparent) !important;
  stroke-width:1.4 !important;
}
html body.home.homeRefinedV579 .learnTick,
html body.home.homeRefinedV579 .nextArrow,
html body.home.homeRefinedV579 .sealV579 path{
  fill:none !important;
  stroke:var(--story-blue-deep) !important;
  stroke-width:5 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
html body.home.homeRefinedV579 .learnLaptopV579{
  animation:storyFloatV579 6.4s ease-in-out infinite !important;
  transform-origin:center !important;
  transform-box:fill-box !important;
}
html body.home.homeRefinedV579 .learnProgressV579,
html body.home.homeRefinedV579 .learnNextV579{
  animation:storyFloatSmallV579 6.8s ease-in-out infinite !important;
  transform-origin:center !important;
  transform-box:fill-box !important;
}
html body.home.homeRefinedV579 .learnNextV579{ animation-delay:-2.1s !important; }
html body.home.homeRefinedV579 .progressRing{
  fill:rgba(255,255,255,.72) !important;
  stroke:rgba(24,34,50,.10) !important;
  stroke-width:1.2 !important;
}
html body.home.homeRefinedV579 .progressArc{
  fill:none !important;
  stroke:var(--story-blue-deep) !important;
  stroke-width:7 !important;
  stroke-linecap:round !important;
  stroke-dasharray:186 !important;
  stroke-dashoffset:62 !important;
  animation:storyProgressV579 4.8s ease-in-out infinite !important;
}
html body.home.homeRefinedV579 .progressDot{
  fill:#fff !important;
  stroke:color-mix(in oklab, var(--story-blue) 46%, transparent) !important;
  stroke-width:2 !important;
}
html body.home.homeRefinedV579 .nextPath{
  fill:none !important;
  stroke:color-mix(in oklab, var(--story-blue-deep) 36%, transparent) !important;
  stroke-width:3 !important;
  stroke-linecap:round !important;
  stroke-dasharray:4 10 !important;
  animation:storyDashV579 2.6s linear infinite !important;
}
html body.home.homeRefinedV579 .nextCircle{
  fill:rgba(255,255,255,.78) !important;
  stroke:color-mix(in oklab, var(--story-blue) 40%, transparent) !important;
  stroke-width:1.4 !important;
  animation:storyPulseV579 3.6s ease-in-out infinite !important;
  transform-origin:center !important;
  transform-box:fill-box !important;
}

/* Transfer: vom Bildschirm in die pädagogische Praxis. */
html body.home.homeRefinedV579 .transferLaptopV579{
  animation:storyFloatV579 6.2s ease-in-out infinite !important;
  transform-origin:center !important;
  transform-box:fill-box !important;
}
html body.home.homeRefinedV579 .transferNoteV579{
  transform-origin:center !important;
  transform-box:fill-box !important;
  animation:storyNoteToPracticeV579 4.8s cubic-bezier(.25,.7,.22,1) infinite !important;
}
html body.home.homeRefinedV579 .transferNoteV579 > path:first-child{
  stroke:color-mix(in oklab, var(--story-gold) 35%, transparent) !important;
}
html body.home.homeRefinedV579 .transferFlightV579{
  fill:none !important;
  stroke:color-mix(in oklab, var(--story-gold-deep) 34%, transparent) !important;
  stroke-width:3 !important;
  stroke-linecap:round !important;
  stroke-dasharray:6 12 !important;
  animation:storyDashV579 2.4s linear infinite !important;
}
html body.home.homeRefinedV579 .kitaV579{
  animation:storyKitaArriveV579 5.4s ease-in-out infinite !important;
  transform-origin:center !important;
  transform-box:fill-box !important;
}
html body.home.homeRefinedV579 .kitaGround{
  fill:none !important;
  stroke:rgba(24,34,50,.12) !important;
  stroke-width:3 !important;
  stroke-linecap:round !important;
}
html body.home.homeRefinedV579 .kitaHouse{
  fill:color-mix(in oklab, var(--story-green) 11%, #fff) !important;
  stroke:rgba(24,34,50,.10) !important;
  stroke-width:1.4 !important;
}
html body.home.homeRefinedV579 .kitaRoof{
  fill:none !important;
  stroke:color-mix(in oklab, var(--story-green-deep) 52%, #fff) !important;
  stroke-width:11 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
html body.home.homeRefinedV579 .kitaDoor{
  fill:rgba(255,255,255,.70) !important;
  stroke:rgba(24,34,50,.10) !important;
  stroke-width:1.2 !important;
}
html body.home.homeRefinedV579 .kitaWindow{
  fill:rgba(255,255,255,.78) !important;
  stroke:rgba(24,34,50,.10) !important;
  stroke-width:1.2 !important;
}
html body.home.homeRefinedV579 .sunDot{
  fill:color-mix(in oklab, var(--story-gold) 28%, #fff) !important;
  stroke:color-mix(in oklab, var(--story-gold-deep) 20%, transparent) !important;
  stroke-width:1.2 !important;
  animation:storySunV579 4.8s ease-in-out infinite !important;
  transform-origin:center !important;
  transform-box:fill-box !important;
}
html body.home.homeRefinedV579 .playMat{
  fill:color-mix(in oklab, var(--story-gold) 16%, #fff) !important;
  stroke:color-mix(in oklab, var(--story-gold-deep) 16%, transparent) !important;
  stroke-width:1.2 !important;
}
html body.home.homeRefinedV579 .practicePeopleV579 circle{
  fill:color-mix(in oklab, var(--story-green-deep) 28%, #fff) !important;
  stroke:rgba(24,34,50,.10) !important;
  stroke-width:1 !important;
}
html body.home.homeRefinedV579 .practicePeopleV579 path{
  fill:none !important;
  stroke:color-mix(in oklab, var(--story-green-deep) 42%, #fff) !important;
  stroke-width:7 !important;
  stroke-linecap:round !important;
}
html body.home.homeRefinedV579 .practicePeopleV579{
  animation:storyPeopleV579 3.8s ease-in-out infinite !important;
  transform-origin:center !important;
  transform-box:fill-box !important;
}

/* Dokumentation: Nachweis wird als echtes Artefakt sichtbar. */
html body.home.homeRefinedV579 .folderBack{
  fill:color-mix(in oklab, var(--story-green) 9%, #fff) !important;
  stroke:rgba(24,34,50,.10) !important;
  stroke-width:1.2 !important;
}
html body.home.homeRefinedV579 .folderFront{
  fill:rgba(255,255,255,.78) !important;
  stroke:rgba(24,34,50,.105) !important;
  stroke-width:1.2 !important;
}
html body.home.homeRefinedV579 .documentFolderV579{
  opacity:.78 !important;
  animation:storyFolderV579 6.6s ease-in-out infinite !important;
  transform-origin:center !important;
  transform-box:fill-box !important;
}
html body.home.homeRefinedV579 .certificateV579{
  animation:storyCertificateV579 5.4s ease-in-out infinite !important;
  transform-origin:center !important;
  transform-box:fill-box !important;
}
html body.home.homeRefinedV579 .certificateV579 > path:first-child{
  stroke:color-mix(in oklab, var(--story-green) 32%, transparent) !important;
}
html body.home.homeRefinedV579 .qrV579 > path:first-child{
  fill:rgba(255,255,255,.72) !important;
  stroke:rgba(24,34,50,.10) !important;
  stroke-width:1.2 !important;
}
html body.home.homeRefinedV579 .qrV579 path:nth-child(2){
  fill:rgba(24,34,50,.35) !important;
  stroke:none !important;
  animation:storyQrV579 3s ease-in-out infinite !important;
}
html body.home.homeRefinedV579 .sealV579 circle{
  fill:color-mix(in oklab, var(--story-green) 14%, #fff) !important;
  stroke:color-mix(in oklab, var(--story-green-deep) 36%, transparent) !important;
  stroke-width:1.5 !important;
  animation:storySealV579 3.8s ease-in-out infinite !important;
  transform-origin:center !important;
  transform-box:fill-box !important;
}
html body.home.homeRefinedV579 .sealV579 path{
  stroke:var(--story-green-deep) !important;
}
html body.home.homeRefinedV579 .archiveSparkV579 circle{
  fill:color-mix(in oklab, var(--story-green) 34%, #fff) !important;
  opacity:.68 !important;
  animation:storySparkV579 3.8s ease-in-out infinite !important;
  transform-origin:center !important;
  transform-box:fill-box !important;
}
html body.home.homeRefinedV579 .archiveSparkV579 circle:nth-child(2){ animation-delay:.42s !important; }
html body.home.homeRefinedV579 .archiveSparkV579 circle:nth-child(3){ animation-delay:.84s !important; }

html body.home.homeRefinedV579 .storyTokenV579{
  position:absolute !important;
  z-index:4 !important;
  left:var(--token-x) !important;
  top:var(--token-y) !important;
  width:58px !important;
  height:58px !important;
  margin:-29px 0 0 -29px !important;
  border-radius:50% !important;
  background:linear-gradient(145deg, rgba(255,255,255,.98), color-mix(in oklab, var(--story-active) 10%, #fff)) !important;
  border:1px solid color-mix(in oklab, var(--story-active) 30%, transparent) !important;
  box-shadow:0 18px 38px rgba(18,32,48,.11), 0 0 0 12px color-mix(in oklab, var(--story-active) 6%, transparent) !important;
  transition:left .95s cubic-bezier(.2,.7,.2,1), top .95s cubic-bezier(.2,.7,.2,1), background .75s ease, border-color .75s ease, box-shadow .75s ease !important;
  animation:storyTokenV579 3.8s ease-in-out infinite !important;
}
html body.home.homeRefinedV579 .storyTokenV579 i{
  position:absolute !important;
  left:50% !important;
  top:14px !important;
  width:15px !important;
  height:15px !important;
  margin-left:-7.5px !important;
  border-radius:50% !important;
  background:color-mix(in oklab, var(--story-active) 45%, #fff) !important;
}
html body.home.homeRefinedV579 .storyTokenV579 b{
  position:absolute !important;
  left:50% !important;
  top:31px !important;
  width:25px !important;
  height:12px !important;
  margin-left:-12.5px !important;
  border-radius:999px 999px 13px 13px !important;
  background:color-mix(in oklab, var(--story-active) 31%, #fff) !important;
}

html body.home.homeRefinedV579 .storyStationsV579{
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
}
html body.home.homeRefinedV579 .stationV579{
  position:absolute !important;
  width:13px !important;
  height:13px !important;
  margin:-6.5px 0 0 -6.5px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(24,34,50,.12) !important;
  box-shadow:0 0 0 7px rgba(255,255,255,.36) !important;
  transition:background .55s ease, border-color .55s ease, transform .55s ease, box-shadow .55s ease !important;
}
html body.home.homeRefinedV579 .stationLearnV579{ left:13.7%; top:67%; }
html body.home.homeRefinedV579 .stationTransferV579{ left:50.3%; top:45.2%; }
html body.home.homeRefinedV579 .stationDocumentV579{ left:86.3%; top:39%; }
html body.home.homeRefinedV579 .learningStoryV579.is-learn .stationLearnV579,
html body.home.homeRefinedV579 .learningStoryV579.is-transfer .stationTransferV579,
html body.home.homeRefinedV579 .learningStoryV579.is-document .stationDocumentV579{
  background:color-mix(in oklab, var(--story-active) 34%, #fff) !important;
  border-color:color-mix(in oklab, var(--story-active) 34%, transparent) !important;
  box-shadow:0 0 0 10px color-mix(in oklab, var(--story-active) 7%, transparent) !important;
  transform:scale(1.17) !important;
}

html body.home.homeRefinedV579 .whyQualityNote{
  transition:opacity .32s ease, transform .32s ease !important;
}
html body.home.homeRefinedV579 .whyQualityNote:not(.isStoryActiveV579){
  opacity:.84 !important;
}
html body.home.homeRefinedV579 .whyQualityNote.isStoryActiveV579 .whyQualityMark{
  box-shadow:0 0 0 9px color-mix(in oklab, var(--pillar-accent) 7%, transparent), 0 8px 22px color-mix(in oklab, var(--pillar-accent) 13%, transparent) !important;
}

@keyframes storyGlowV579{
  0%,100%{ transform:scale(.985); opacity:.74; }
  50%{ transform:scale(1.025); opacity:.90; }
}
@keyframes storyWashV579{
  0%,100%{ transform:scale(.98); opacity:.50; }
  50%{ transform:scale(1.04); opacity:.72; }
}
@keyframes storyPathBreathV579{
  0%,100%{ opacity:.56; }
  50%{ opacity:.78; }
}
@keyframes storyFloatV579{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
@keyframes storyFloatSmallV579{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-6px) scale(1.018); }
}
@keyframes storyProgressV579{
  0%,100%{ stroke-dashoffset:76; }
  50%{ stroke-dashoffset:42; }
}
@keyframes storyDashV579{
  to{ stroke-dashoffset:-36; }
}
@keyframes storyPulseV579{
  0%,100%{ transform:scale(.98); opacity:.84; }
  50%{ transform:scale(1.06); opacity:1; }
}
@keyframes storyNoteToPracticeV579{
  0%,100%{ transform:translate(-18px, 10px) rotate(-5deg); opacity:.76; }
  42%{ transform:translate(18px, -8px) rotate(1deg); opacity:1; }
  68%{ transform:translate(42px, 4px) rotate(4deg); opacity:.86; }
}
@keyframes storyKitaArriveV579{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}
@keyframes storySunV579{
  0%,100%{ transform:scale(.94); opacity:.72; }
  50%{ transform:scale(1.08); opacity:.95; }
}
@keyframes storyPeopleV579{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}
@keyframes storyFolderV579{
  0%,100%{ transform:translateY(6px); opacity:.62; }
  50%{ transform:translateY(0); opacity:.80; }
}
@keyframes storyCertificateV579{
  0%,100%{ transform:translateY(0) rotate(-.8deg); }
  50%{ transform:translateY(-8px) rotate(.6deg); }
}
@keyframes storySealV579{
  0%,100%{ transform:scale(.96); }
  50%{ transform:scale(1.06); }
}
@keyframes storyQrV579{
  0%,100%{ opacity:.56; }
  50%{ opacity:.92; }
}
@keyframes storySparkV579{
  0%,100%{ transform:scale(.84); opacity:.42; }
  50%{ transform:scale(1.18); opacity:.78; }
}
@keyframes storyTokenV579{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-5px) scale(1.025); }
}

@media (max-width:1120px){
  html body.home.homeRefinedV579 .whyStoryPanelV579{
    position:relative !important;
    top:auto !important;
    min-height:0 !important;
    max-width:860px !important;
    margin-inline:auto !important;
  }
  html body.home.homeRefinedV579 .learningStoryV579{ width:min(100%, 760px) !important; }
}

@media (max-width:720px){
  html body.home.homeRefinedV579 .whyStoryPanelV579{
    padding:10px !important;
    border-radius:24px !important;
  }
  html body.home.homeRefinedV579 .learningStoryV579{
    width:min(100%, 620px) !important;
    aspect-ratio:7 / 5.25 !important;
  }
  html body.home.homeRefinedV579 .storyTokenV579{
    width:48px !important;
    height:48px !important;
    margin:-24px 0 0 -24px !important;
  }
  html body.home.homeRefinedV579 .storyTokenV579 i{
    top:12px !important;
    width:13px !important;
    height:13px !important;
    margin-left:-6.5px !important;
  }
  html body.home.homeRefinedV579 .storyTokenV579 b{
    top:27px !important;
    width:20px !important;
    margin-left:-10px !important;
  }
}

@media (max-width:430px){
  html body.home.homeRefinedV579 .learningStoryV579{
    aspect-ratio:7 / 5.6 !important;
  }
  html body.home.homeRefinedV579 .storyPathBaseV579,
  html body.home.homeRefinedV579 .storyPathActiveV579{
    stroke-width:3 !important;
  }
}

@media (prefers-reduced-motion: reduce){
  html body.home.homeRefinedV579 .storyGlowV579,
  html body.home.homeRefinedV579 .storyWashV579,
  html body.home.homeRefinedV579 .storyPathActiveV579,
  html body.home.homeRefinedV579 .learnLaptopV579,
  html body.home.homeRefinedV579 .learnProgressV579,
  html body.home.homeRefinedV579 .learnNextV579,
  html body.home.homeRefinedV579 .progressArc,
  html body.home.homeRefinedV579 .nextPath,
  html body.home.homeRefinedV579 .nextCircle,
  html body.home.homeRefinedV579 .transferLaptopV579,
  html body.home.homeRefinedV579 .transferNoteV579,
  html body.home.homeRefinedV579 .transferFlightV579,
  html body.home.homeRefinedV579 .kitaV579,
  html body.home.homeRefinedV579 .sunDot,
  html body.home.homeRefinedV579 .practicePeopleV579,
  html body.home.homeRefinedV579 .documentFolderV579,
  html body.home.homeRefinedV579 .certificateV579,
  html body.home.homeRefinedV579 .sealV579 circle,
  html body.home.homeRefinedV579 .qrV579 path:nth-child(2),
  html body.home.homeRefinedV579 .archiveSparkV579 circle,
  html body.home.homeRefinedV579 .storyTokenV579{
    animation:none !important;
  }
  html body.home.homeRefinedV579 .storySceneV579,
  html body.home.homeRefinedV579 .storyTokenV579,
  html body.home.homeRefinedV579 .storyPathActiveV579{
    transition:none !important;
  }
}