/* =====================================================================
   WOW.CSS — Premium Apple-Style Polish-Layer
   Anwendung: <link rel="stylesheet" href="/assets/css/wow.css">
   Nach dem inline-CSS einbinden, damit Regeln greifen.
   ===================================================================== */

:root{
  --wow-ease-out: cubic-bezier(.16,1,.3,1);
  --wow-ease-in-out: cubic-bezier(.65,0,.35,1);
  --wow-spring: cubic-bezier(.34,1.56,.64,1);
  --wow-glass: rgba(255,255,255,0.72);
  --wow-shadow-soft: 0 4px 24px -8px rgba(20,30,55,.18);
  --wow-shadow-strong: 0 18px 50px -18px rgba(20,30,55,.35);
  --wow-shadow-glow: 0 0 0 1px rgba(58,90,140,.12), 0 12px 40px -12px rgba(58,90,140,.45);
}
html{scroll-behavior:smooth}
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ---------- Cinematic Hero ---------- */
.topic-hero{overflow:hidden;position:relative}
.topic-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(800px 400px at 20% 10%, rgba(120,170,255,.22), transparent 60%),
    radial-gradient(600px 360px at 85% 95%, rgba(255,200,140,.18), transparent 60%);
  animation: wow-hero-breathe 14s ease-in-out infinite alternate;
}
.topic-hero > *{position:relative;z-index:1}
@keyframes wow-hero-breathe{
  from{transform:translate3d(-2%,-1%,0) scale(1.02)}
  to{transform:translate3d(2%,1%,0) scale(1.08)}
}
.wow-hero-glyphs{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.wow-hero-glyphs span{
  position:absolute;font-family:inherit;font-style:normal;
  color:rgba(255,255,255,.10);font-size:clamp(60px,12vw,180px);font-weight:500;
  user-select:none;animation: wow-glyph-float 18s linear infinite;
  text-shadow:0 0 40px rgba(120,170,255,.35);
}
@keyframes wow-glyph-float{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  10%{opacity:.5} 90%{opacity:.5}
  100%{transform:translate3d(20px,-120px,0) rotate(8deg);opacity:0}
}
/* 2026-08-22: Shimmer/Gradient ueber der Hero-Ueberschrift entfernt */
.topic-hero h1{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:#fff;
  animation:none;
}
.topic-hero .subtitle,.topic-hero .untertitel{animation: wow-fade-up 1s var(--wow-ease-out) 1.1s both}
.topic-hero .breadcrumb{animation: wow-fade-up .9s var(--wow-ease-out) .3s both}
@keyframes wow-fade-up{from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)}}
.wow-scroll-cue{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  z-index:2;pointer-events:none;
  animation: wow-cue 2.4s var(--wow-ease-in-out) infinite, wow-fade-up 1s var(--wow-ease-out) 1.6s both;
}
.wow-scroll-cue::after{content:"";width:1px;height:24px;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent)}
@keyframes wow-cue{0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,6px)}}

/* ---------- Scroll-Reveal ---------- */
.wow-reveal{opacity:1;transform:none}
.wow-reveal.is-in{opacity:1;transform:none}
.wow-reveal[data-delay="1"]{transition-delay:.08s}
.wow-reveal[data-delay="2"]{transition-delay:.16s}
.wow-reveal[data-delay="3"]{transition-delay:.24s}
.wow-reveal[data-delay="4"]{transition-delay:.32s}

/* Phase-Reveal accent */
.phase-head h2{position:relative;overflow:hidden}
.phase.is-in-view .phase-head h2::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;
  background:linear-gradient(90deg,var(--mathe-strong,#3a5a8c),transparent 80%);
  width:0;animation: wow-underline 1.1s var(--wow-ease-out) .25s forwards;
}
@keyframes wow-underline{to{width:60%}}

/* ---------- Sticky Progress ---------- */
.progress-sticky{
  transition: box-shadow .3s, transform .4s var(--wow-spring);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: var(--wow-glass) !important;
}
.progress-sticky.pulse{transform:scale(1.03);box-shadow:var(--wow-shadow-glow)}
.progress-bar-fill{transition: width .9s var(--wow-spring) !important;position:relative;overflow:hidden}
.progress-bar-fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);
  animation: wow-bar-sheen 3s ease-in-out infinite;
}
@keyframes wow-bar-sheen{0%{transform:translateX(-120%)} 60%,100%{transform:translateX(220%)}}

/* ---------- Buttons ---------- */
.check-btn,.hilfe-btn,.vw-opt,.path-btn,.loesung-btn,.vw-result button,.work-step.fade-input .check{
  transition: transform .18s var(--wow-spring), background-color .18s, color .18s, box-shadow .25s, border-color .2s !important;
  will-change: transform;
}
.check-btn:hover,.path-btn:hover,.loesung-btn:hover,.vw-result button:hover{box-shadow: var(--wow-shadow-glow)}
.check-btn:active,.hilfe-btn:active,.vw-opt:active,.path-btn:active,.loesung-btn:active,.vw-result button:active{transform: scale(.96)}
.check-btn,.path-btn,.loesung-btn,.vw-result button{position:relative;overflow:hidden}
.check-btn::after,.path-btn::after,.loesung-btn::after,.vw-result button::after{
  content:"";position:absolute;left:50%;top:50%;
  width:0;height:0;border-radius:50%;background:rgba(255,255,255,.4);
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;
  transition:width .6s var(--wow-ease-out),height .6s var(--wow-ease-out),opacity .6s;
}
.check-btn:active::after,.path-btn:active::after,.loesung-btn:active::after,.vw-result button:active::after{
  width:300px;height:300px;opacity:1;transition:0s;
}

/* ---------- Aufgaben ---------- */
.aufgabe{transition: transform .35s var(--wow-spring), border-color .25s, box-shadow .35s, background .4s !important;will-change:transform}
.aufgabe:hover{transform: translateY(-2px); box-shadow: var(--wow-shadow-soft) !important}
.aufgabe.solved{animation: wow-solved-flash 1.2s var(--wow-ease-out) 1}
@keyframes wow-solved-flash{
  0%{box-shadow:0 0 0 0 rgba(74,117,48,0)}
  30%{box-shadow:0 0 0 14px rgba(74,117,48,.22)}
  100%{box-shadow:0 0 0 0 rgba(74,117,48,0)}
}
.aufgabe.solved .aufgabe-num{animation: wow-pop .55s var(--wow-spring) 1}
@keyframes wow-pop{0%{transform:scale(1)} 45%{transform:scale(1.28) rotate(-4deg)} 100%{transform:scale(1)}}

/* ---------- Worked Example ---------- */
.work-step{transition: transform .25s var(--wow-ease-out), border-color .2s, background .3s !important}
.work-step:hover{transform: translateX(3px)}
.work-step.fade-input input.ok{animation: wow-input-ok .6s var(--wow-spring) 1}
@keyframes wow-input-ok{0%{transform:scale(1)} 40%{transform:scale(1.12)} 100%{transform:scale(1)}}

/* ---------- Formel-Box ---------- */
@property --wow-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.formel-box{position:relative}
/* Outer running border — only on the edge, never crosses the text */
.formel-box::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  padding:2px;
  background: conic-gradient(from var(--wow-ang,0deg),
    transparent 0deg, transparent 250deg,
    rgba(58,90,140,.55) 300deg, rgba(58,90,140,.8) 320deg,
    rgba(58,90,140,.55) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:0;transition:opacity .5s;
}
.formel-box:hover::after,.formel-box.is-in-view::after{opacity:1;animation: wow-conic 7s linear infinite}
@keyframes wow-conic{to{--wow-ang:360deg}}
.formel-box > *{position:relative;z-index:1}
.formel-box .formel{transition: transform .5s var(--wow-spring), letter-spacing .5s}
.formel-box:hover .formel{transform: scale(1.04); letter-spacing:-0.005em}

/* ---------- Glossar ---------- */
.gloss{transition: color .2s}
.gloss::after,.gloss::before{transition: opacity .25s var(--wow-ease-out), transform .35s var(--wow-spring) !important}
.gloss:hover::after,.gloss:focus::after{transform: translateX(-50%) translateY(-2px) !important}

/* ---------- TOC ---------- */
.toc-list a{transition: transform .35s var(--wow-spring), border-bottom-color .2s !important}
.toc-list a:hover .toc-num{animation: wow-num-bounce .8s var(--wow-spring) 1}
@keyframes wow-num-bounce{
  0%{transform:translateY(0)} 35%{transform:translateY(-4px) rotate(-3deg)}
  70%{transform:translateY(1px) rotate(2deg)} 100%{transform:translateY(0)}
}

/* ---------- Applet-Handles ---------- */
.tri-handle,[data-drag-handle],.drag-handle{
  transition: r .2s var(--wow-spring), filter .2s, transform .2s var(--wow-spring) !important;
  filter: drop-shadow(0 2px 4px rgba(20,30,55,.25));
}
.tri-handle:hover,[data-drag-handle]:hover,.drag-handle:hover{
  filter: drop-shadow(0 4px 10px rgba(58,90,140,.55));
}
.applet,.geogebra-wrap,[data-applet]{position:relative;overflow:hidden}
.applet::before,[data-applet]::before{
  content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  animation: wow-applet-shimmer 6s ease-in-out 1s infinite;pointer-events:none;
}
@keyframes wow-applet-shimmer{
  0%,60%,100%{left:-100%;opacity:0}
  65%{opacity:1} 100%{left:120%}
}

/* ---------- Confetti ---------- */
.wow-confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:9999}

/* ---------- Toasts ---------- */
.wow-toast-stack{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:9998;pointer-events:none}
.wow-toast{
  background:linear-gradient(135deg,#fff 0%,#faf6ee 100%);
  border:1px solid #c9bb9a;border-left:4px solid #3a5a8c;border-radius:12px;
  padding:12px 18px 12px 16px;min-width:260px;
  box-shadow: var(--wow-shadow-strong);
  font:14px/1.4 Inter,sans-serif;color:#1a1612;
  display:flex;gap:12px;align-items:center;pointer-events:auto;
  transform:translateX(120%);opacity:0;
  animation: wow-toast-in .55s var(--wow-spring) forwards, wow-toast-out .5s var(--wow-ease-in-out) 4.5s forwards;
}
.wow-toast.gold{border-left-color:#b88a2c}
.wow-toast.green{border-left-color:#4a7530}
.wow-toast .icon{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#3a5a8c,#15294a);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.wow-toast.gold .icon{background:linear-gradient(135deg,#d4a44a,#8a6418)}
.wow-toast.green .icon{background:linear-gradient(135deg,#6ba045,#2e5e1f)}
.wow-toast strong{display:block;font-weight:600;margin-bottom:2px}
.wow-toast .sub{font-size:12px;color:#5b4f43}
@keyframes wow-toast-in{to{transform:translateX(0);opacity:1}}
@keyframes wow-toast-out{to{transform:translateX(120%);opacity:0}}


/* ---------- Cursor Spotlight ---------- */
/* 2026-09-11: deaktiviert (kein Leuchteffekt/Flair mehr um den Mauszeiger) */
body.wow-spotlight::after,body.wow-spotlight.cursor-active::after{display:none!important;content:none!important}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .wow-reveal{opacity:1;transform:none}
}

/* ---------- Print ---------- */
@media print{
  .wow-toast-stack,.wow-scroll-cue,.wow-hero-glyphs,.wow-confetti-canvas,.wow-sound-toggle{display:none !important}
  .wow-reveal{opacity:1 !important;transform:none !important}
  .topic-hero::before,.applet::before,[data-applet]::before,.formel-box::after{display:none !important}
}

/* ---------- Quick-Quiz Pop ---------- */
.vw-opt{position:relative;overflow:hidden}
.vw-opt.correct{animation: wow-correct-flash .8s var(--wow-spring) 1}
.vw-opt.wrong{animation: wow-shake .5s ease 1}
@keyframes wow-correct-flash{0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)}}
@keyframes wow-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)} 40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}

/* ---------- Mini-Game Card ---------- */
.wow-game{
  background: linear-gradient(135deg,#15294a,#3a5a8c);color:#fff;
  border-radius:20px;padding:28px 32px;margin:36px 0;
  position:relative;overflow:hidden;box-shadow:var(--wow-shadow-strong);
}
.wow-game::before{
  content:"";position:absolute;inset:0;
  background: radial-gradient(circle at 80% 10%,rgba(255,255,255,.18),transparent 50%);
  pointer-events:none;
}
.wow-game h3{
  color:#fff !important;font-family:'Fredoka',sans-serif;
  font-style:normal;font-weight:500;font-size:26px;margin-bottom:6px;position:relative;
}
.wow-game .wow-game-sub{color:rgba(255,255,255,.85);font-size:14px;margin-bottom:20px;position:relative}
.wow-game-canvas{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:14px;position:relative;overflow:hidden;
}
.wow-game-stats{display:flex;gap:16px;margin-top:14px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.85);position:relative}
.wow-game-stats b{color:#fff}
.wow-game-btn{
  background:#fff;color:#15294a;border:0;border-radius:999px;padding:10px 24px;
  font:600 14px Inter,sans-serif;cursor:pointer;margin-top:14px;position:relative;
  transition: transform .2s var(--wow-spring), box-shadow .25s;
}
.wow-game-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(0,0,0,.35)}
.wow-game-btn:active{transform:scale(.96)}

/* ---------- Sound Toggle ---------- */
.wow-sound-toggle{
  position:fixed;bottom:18px;left:18px;z-index:50;
  width:38px;height:38px;border-radius:50%;
  background:var(--wow-glass);backdrop-filter:blur(12px);
  border:1px solid rgba(0,0,0,.08);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:15px;
  box-shadow: var(--wow-shadow-soft);
  transition: transform .25s var(--wow-spring);
}
.wow-sound-toggle:hover{transform:scale(1.1)}
.wow-sound-toggle.muted{opacity:.55}
@media print{.wow-sound-toggle{display:none}}