/* Klassenportal · Endlevel Animationen · Global konsistent
 *
 * REGELN:
 * 1. NUR transform + opacity (kein Layout-Trigger!)
 * 2. ALLE Dauer < 800ms
 * 3. Easing AUSSCHLIESSLICH cubic-bezier(.2,.6,.2,1)
 * 4. 100% prefers-reduced-motion kompatibel (s. unten)
 * 5. Konsistenz mit design-tokens.css Navy/Gold
 */

/* ------------------------ GLOBALE KEYFRAMES ------------------------ */

/* Element kommt von unten leicht schwebend herein */
@keyframes kp-auftritt{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* Aufgabe erledigt: fliegt sanft nach rechts raus */
@keyframes kp-erledigt{
  to{opacity:0;transform:translateX(48px) scale(.98)}
}

/* Sanfter Atemzug-Puls (für aktive Elemente) */
@keyframes kp-puls{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--portal-primary,var(--brand)) 40%,transparent)}
  50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--portal-primary,var(--brand)) 0%,transparent)}
}

/* Gespeichert-Feedback: grüner Flash 400ms */
@keyframes kp-flash-gut{
  0%{background:var(--gut-hell)}
  100%{background:transparent}
}

/* Button Senden: kurz vergrößern → visuelles Feedback */
@keyframes kp-sende{
  0%{transform:scale(1)}
  40%{transform:scale(1.06)}
  100%{transform:scale(1)}
}

/* KI-Fortschritt: Balken atmet langsam */
@keyframes kp-atem{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.35)}
}

/* Goldene Rahmen-Glow Animation (Speichern/Laden) */
@keyframes kp-rahmen-glow{
  0%,100%{border-color:var(--linie);box-shadow:0 0 0 0 color-mix(in srgb,var(--marke-gold) 30%,transparent)}
  50%{border-color:var(--marke-gold);box-shadow:0 0 0 6px color-mix(in srgb,var(--marke-gold) 0%,transparent)}
}

/* 3 Punkte Laden: nacheinander ein/aus */
@keyframes kp-drei-punkte{
  0%,80%,100%{transform:scale(.6);opacity:.4}
  40%{transform:scale(1);opacity:1}
}

/* Crossfade Seitenwechsel (Dashboards) */
@keyframes kp-fade-cross{
  from{opacity:0;filter:blur(2px)}
  to{opacity:1;filter:none}
}

/* Gold Shine über Akzente (Siegel, Auszeichnungen) */
@keyframes kp-gold-shine{
  0%{background-position:200% center}
  100%{background-position:-200% center}
}

/* ------------------------ STUFEN / STAGGER ------------------------ */
.kp-stufe{opacity:0;animation:kp-auftritt .6s cubic-bezier(.2,.6,.2,1) both}
.kp-stufe.kp-da{opacity:1}
.kp-stufe-1{animation-delay:.00s}
.kp-stufe-2{animation-delay:.05s}
.kp-stufe-3{animation-delay:.10s}
.kp-stufe-4{animation-delay:.16s}
.kp-stufe-5{animation-delay:.22s}
.kp-stufe-6{animation-delay:.28s}

/* ------------------------ 3D TILT (Maus-Parallax) ------------------------ */
.kp-tilt3d{
  perspective:1000px;
  transform-style:preserve-3d;
  transition:transform .18s cubic-bezier(.2,.6,.2,1),box-shadow .18s;
  will-change:transform;
}
.kp-tilt3d:hover{z-index:2;box-shadow:0 24px 72px color-mix(in srgb,var(--marke-navy) 22%,transparent)}
.kp-tilt3d > .kp-tilt-ebene{transform:translateZ(24px)}
.kp-tilt3d > .kp-tilt-ebene-2{transform:translateZ(40px)}

/* ------------------------ GLOBALE HILFEN ------------------------ */

/* Alle Buttons: taktile Press-Rückmeldung */
button, .btn, [role="button"]{
  transition:transform .12s cubic-bezier(.2,.6,.2,1),background-color .15s,border-color .15s,opacity .15s,box-shadow .15s,color .15s;
}
button:active, .btn:active, [role="button"]:active{
  transform:scale(.97)!important;
}

/* Alle Karten: subtiler Hover-Lift */
.card, .kp2-card, .kp-hub-block, .kpc, .modal{
  transition:transform .18s cubic-bezier(.2,.6,.2,1),box-shadow .18s,border-color .18s;
}
.card:hover, .kp2-card:hover, .kp-hub-block:hover{
  transform:translateY(-2px);
  box-shadow:var(--schatten);
  border-color:color-mix(in srgb,var(--marke-gold) 24%,var(--linie));
}

/* Aktuelle Stunde: Puls-Glow */
.kp2-lesson.is-current{animation:kp-puls 2.6s ease-in-out infinite}

/* Fortschrittsbalken (Hero) */
.kp2-now-copy > i > b{
  transition:width .6s cubic-bezier(.2,.6,.2,1);
  background:linear-gradient(90deg,var(--marke-gold),var(--marke-gold-hell),var(--marke-gold))!important;
  background-size:200% 100%;
  animation:kp-gold-shine 3.4s linear infinite;
}

/* KI-Progress atmet */
.ki-fortschritt, .af-fortschritt, progress[value]{
  animation:kp-atem 1.8s ease-in-out infinite;
}

/* ------------------------ KONFETTI + TOAST (Hilfsklassen) ------------------------ */
#kp-konfetti{position:fixed;inset:0;pointer-events:none;z-index:2147483000;overflow:hidden}
#kp-toasts{position:fixed;top:18px;left:18px;display:flex;flex-direction:column;gap:8px;z-index:2147483050;max-width:min(460px,92vw)}
.kp-toast{
  padding:12px 14px;border-radius:12px;color:#fff;font-weight:600;font-size:.88rem;
  box-shadow:0 16px 48px rgba(15,23,42,.22);border:1px solid transparent;
  animation:kp-auftritt .24s cubic-bezier(.2,.6,.2,1) both;
  display:flex;align-items:center;gap:10px;backdrop-filter:blur(6px);
}
.kp-toast.gut{background:linear-gradient(135deg,var(--gut),color-mix(in srgb,var(--gut) 80%,#000));border-color:color-mix(in srgb,#fff 20%,transparent)}
.kp-toast.info{background:linear-gradient(135deg,var(--brand),var(--marke-navy));border-color:color-mix(in srgb,#fff 16%,transparent)}
.kp-toast.warnung{background:linear-gradient(135deg,var(--warnung),color-mix(in srgb,var(--warnung) 80%,#000));border-color:color-mix(in srgb,#fff 20%,transparent)}
.kp-toast.schlecht{background:linear-gradient(135deg,var(--schlecht),color-mix(in srgb,var(--schlecht) 80%,#000));border-color:color-mix(in srgb,#fff 20%,transparent)}
.kp-toast.weg{animation:kp-erledigt .22s ease-in both}

/* ------------------------ LOADER (3 Gold-Punkte) ------------------------ */
.kp-loader{display:inline-flex;align-items:center;gap:6px}
.kp-loader i{width:8px;height:8px;border-radius:50%;background:var(--marke-gold);display:block;animation:kp-drei-punkte 1.2s ease-in-out infinite both}
.kp-loader i:nth-child(2){animation-delay:.15s;background:var(--marke-gold-hell)}
.kp-loader i:nth-child(3){animation-delay:.3s}

/* ------------------------ GOLD-SHIELD SIEGEL (für Auszeichnungen) ------------------------ */
.kp-gold-siegel{
  background:linear-gradient(110deg,var(--marke-gold-tief) 0%,var(--marke-gold-hell) 45%,#fff 50%,var(--marke-gold-hell) 55%,var(--marke-gold-tief) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:kp-gold-shine 3.8s linear infinite;
  font-weight:900;
}

/* ------------------------ SEITEN-AUFRÄUMEN & HIERARCHIE (BRAND ALIGN) ------------------------ */

/* Nav Hierarchie: Aktiver Button Goldener Unterstrich + Navy/Gold */
.side .nav.active{
  position:relative;
  background:linear-gradient(90deg,color-mix(in srgb,var(--marke-gold) 14%,transparent),transparent 70%);
  color:#fff!important;
  border-left:3px solid var(--marke-gold)!important;
  font-weight:700;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--marke-gold) 30%,transparent)!important;
}
.side .nav:not(.active):hover{
  background:linear-gradient(90deg,color-mix(in srgb,var(--marke-navy-linie) 70%,#ffffff10),transparent 80%)!important;
  color:#fff!important;
  transform:translateX(2px);
}

/* Dashboard Grid: Bessere Abstände für Cards + Goldener Akzent Header */
.grid > .card,
.grid > section.card{
  border-top:3px solid var(--marke-gold);
}
.grid > .card h3,
.content .top h2{
  color:var(--marke-navy);
  letter-spacing:-.01em;
}
.content .top h2{
  font-weight:850;
  position:relative;
  padding-bottom:6px;
}
.content .top h2::after{
  content:'';
  position:absolute;left:0;bottom:0;height:3px;width:64px;border-radius:99px;
  background:linear-gradient(90deg,var(--marke-gold),transparent);
}

/* Brand Footer für .login und öffentliche Seiten */
body > .center::after{
  content:"© 2026 Klassenportal · Education Operating System · BILDUNG. EINFACH. VERNETZT.";
  display:block;
  margin-top:20px;
  text-align:center;
  color:color-mix(in srgb,#fff 70%,transparent);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.75;
}

/* Bento Layout: Kantenradius Header-Elemente konsistent mit Design Tokens */
.top,.portal-head{
  border-radius:var(--radius-sehr-gross);
}

/* ------------------------ PREFERS-REDUCED-MOTION (FAIL-SAFE) ------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .kp-stufe{opacity:1!important;animation:none!important}
  #kp-konfetti{display:none!important}
  .kp-tilt3d{transform:none!important}
  .kp-tilt3d > *{transform:none!important}
}