/* Prof. Sky – der Begleiter, der beim Scrollen von Baustein zu Baustein springt.
   Posen werden über data-pose am Element .professor gesteuert; die Bewegung (Sprünge, Position)
   kommt aus professor.js. Alles ist reines CSS und Vektorgrafik, ohne Fremddienste. */

.p-wurzel {
  --feder: cubic-bezier(0.34, 1.56, 0.64, 1);
  --p-breite: 7.6rem;
  position: fixed; inset: 0; z-index: 45;
  pointer-events: none; overflow: hidden;
}

.professor {
  --ar: 3deg; --al: -3deg;      /* Schulter rechts (Stab) / links (Klemmbrett); negativ = nach außen/oben */
  --er: 0deg; --el: 0deg;       /* Ellbogen; positiv = Unterarm zum Körper hin */
  --sr: 1; --sl: 1;             /* Arm dehnen */
  --bl: 0deg; --br: 0deg;       /* Beine */
  --kw: 0deg; --ky: 0px;        /* Kopf neigen / heben */
  --lid: 0;                     /* Lider: 0 offen, 1 zu */
  --ax: 0px; --ay: 0px;         /* Blickrichtung */
  position: absolute; left: 0; top: 0;
  width: var(--p-breite); aspect-ratio: 240 / 370;
  transform-origin: 0 0;
  opacity: 0; will-change: transform;
}
.p-wurzel[data-bereit] .professor { opacity: 1; transition: opacity 0.5s ease; }
.p-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }

/* Ganze Figur: Drehung (Salto), Quetschen und Strecken, Blickrichtung */
.p-flug { rotate: var(--dreh, 0deg); transform-origin: 120px 190px; }
.p-ganz { scale: var(--sx, 1) var(--sy, 1); transform-origin: 120px 319px; }

/* Körperteile: Pose über individuelle Eigenschaften, Animationen über transform */
.p-arm { transform-origin: 161px 189px; transition: rotate 0.45s var(--feder); }
.p-arm-r { rotate: var(--ar); }
.p-arm-l { rotate: var(--al); }
.p-streck { transform-origin: 161px 189px; transition: scale 0.4s var(--feder); }
.p-arm-r .p-streck { scale: 1 var(--sr); }
.p-arm-l .p-streck { scale: 1 var(--sl); }
.p-hand { transform-box: fill-box; transform-origin: 50% 50%; }
.p-arm-r .p-hand { scale: 1 calc(1 / var(--sr)); }
.p-arm-l .p-hand { scale: 1 calc(1 / var(--sl)); }
.p-unterarm { transform-origin: 161px 222px; transition: rotate 0.45s var(--feder); }
.p-arm-r .p-unterarm { rotate: var(--er); }
.p-arm-l .p-unterarm { rotate: var(--el); }
.p-bein { transform-origin: 98px 248px; transition: rotate 0.45s var(--feder); }
.p-bein-l { rotate: var(--bl); }
.p-bein-r { rotate: var(--br); }
.p-kopf { transform-origin: 120px 165px; rotate: var(--kw); translate: 0 var(--ky); transition: rotate 0.45s var(--feder), translate 0.45s var(--feder); }
.p-rumpf { transform-origin: 120px 272px; animation: p-atmen 3.4s ease-in-out infinite; }

/* Gegenstände: im Poof verschwinden, wenn die Hand frei sein soll */
.p-stab, .p-brett { transition: scale 0.28s var(--feder), opacity 0.2s ease; transform-box: fill-box; transform-origin: 50% 8%; }
.p-brett { transform-origin: 50% 50%; rotate: calc((var(--al) + var(--el)) * -0.9); }
.professor[data-pose="winken"] .p-stab,
.professor[data-pose="luegen"] .p-stab, .professor[data-pose="luegen"] .p-brett,
.professor[data-pose="jubeln"] .p-stab, .professor[data-pose="jubeln"] .p-brett,
.professor[data-pose="flug"] .p-stab, .professor[data-pose="flug"] .p-brett,
.professor[data-pose="idee"] .p-brett, .professor[data-pose="idee"] .p-stab,
.professor[data-pose="denken"] .p-stab,
.professor[data-pose="staunen"] .p-stab, .professor[data-pose="staunen"] .p-brett { scale: 0; opacity: 0; }

/* Schatten unter den Füßen */
.p-schatten { opacity: 0.55; transition: opacity 0.3s; }
.professor[data-pose="luegen"] .p-schatten, .professor[data-pose="flug"] .p-schatten, .professor[data-pose="sitzen"] .p-schatten { opacity: 0; }

/* Gesicht */
.p-lid { transform-box: fill-box; transform-origin: 50% 0; animation: p-blinzeln 5.4s infinite; }
.p-pupillen { translate: var(--ax) var(--ay); transition: translate 0.14s linear; }
.p-braue { transition: translate 0.35s var(--feder), rotate 0.35s var(--feder); transform-box: fill-box; transform-origin: 50% 100%; }
.p-mund-auf, .p-mund-o { opacity: 0; transform-origin: 120px 146px; }
.p-mund-zu { transition: opacity 0.15s; }
.professor[data-mund="auf"] .p-mund-auf, .professor[data-mund="o"] .p-mund-o { opacity: 1; }
.professor[data-mund="auf"] .p-mund-zu, .professor[data-mund="o"] .p-mund-zu { opacity: 0; }
.professor[data-spricht] .p-mund-auf { opacity: 1; animation: p-reden 0.2s ease-in-out infinite alternate; }
.professor[data-spricht] .p-mund-o { opacity: 0; }
.professor[data-spricht] .p-mund-zu { opacity: 0; }

/* Glühbirne: nur bei Ideen */
.p-idee { opacity: 0; scale: 0.3; translate: 0 18px; transform-origin: 120px 21px; transition: opacity 0.25s, scale 0.45s var(--feder), translate 0.45s var(--feder); }
.professor[data-idee] .p-idee, .professor[data-pose="idee"] .p-idee { opacity: 1; scale: 1; translate: 0 0; }
.p-strahlen { animation: p-puls 0.7s ease-in-out infinite alternate; transform-origin: 120px -6px; }

/* ===== Posen ===== */
/* steht: Grundhaltung (Stab am Boden, Klemmbrett locker) */
.professor[data-pose="steht"] { --ar: 5deg; --al: -5deg; --el: 6deg; }

/* winken: rechter Arm hoch, Hand schwenkt */
.professor[data-pose="winken"] { --ar: -148deg; --er: -16deg; --al: -6deg; --kw: 5deg; --lid: 0.18; }
.professor[data-pose="winken"] .p-arm-r .p-streck { animation: p-winken 0.46s ease-in-out infinite alternate; }

/* zeigen: Stab waagerecht Richtung Inhalt */
.professor[data-pose="zeigen"] { --ar: -96deg; --er: -6deg; --al: -6deg; --kw: -4deg; --ay: 0px; }

/* lesen: Klemmbrett vor der Brust, Blick nach unten */
.professor[data-pose="lesen"] { --al: 12deg; --el: 128deg; --ar: 10deg; --kw: 4deg; --ky: 3px; --ay: 5px; --lid: 0.28; }

/* denken: Hand ans Gesicht, Brauen schief, Blick nach oben */
.professor[data-pose="denken"] { --ar: -138deg; --er: -84deg; --sr: 1.05; --al: -6deg; --kw: -7deg; --ax: -3px; --ay: -4px; }
.professor[data-pose="denken"] .p-braue-l { translate: 0 -4px; rotate: -8deg; }

/* idee: Finger hoch, Glühbirne */
.professor[data-pose="idee"] { --ar: -168deg; --er: 0deg; --al: -5deg; --kw: 3deg; --sr: 1.08; }

/* staunen: Arme weit, Mund rund, Brauen hoch */
.professor[data-pose="staunen"] { --ar: -58deg; --al: -58deg; --er: -14deg; --el: -14deg; --ky: -3px; }
.professor[data-pose="staunen"] .p-braue { translate: 0 -6px; }
.professor[data-pose="staunen"] .p-mund-o { opacity: 1; }
.professor[data-pose="staunen"] .p-mund-zu { opacity: 0; }
.professor[data-pose="winken"] .p-mund-auf, .professor[data-pose="jubeln"] .p-mund-auf, .professor[data-pose="idee"] .p-mund-auf { opacity: 1; }
.professor[data-pose="winken"] .p-mund-zu, .professor[data-pose="jubeln"] .p-mund-zu, .professor[data-pose="idee"] .p-mund-zu { opacity: 0; }

/* jubeln: beide Arme hoch */
.professor[data-pose="jubeln"] { --ar: -128deg; --al: -128deg; --sr: 1.24; --sl: 1.24; --er: -12deg; --el: -12deg; --ky: -4px; --lid: 0.3; }
.professor[data-pose="jubeln"] .p-braue { translate: 0 -5px; }

/* sitzen: Beine baumeln, Hände stützen sich ab */
.professor[data-pose="sitzen"] { --ar: 20deg; --al: -16deg; --el: 4deg; --bl: 8deg; --br: -8deg; }
.professor[data-pose="sitzen"] .p-bein { scale: 1 1.12; }
.professor[data-pose="sitzen"] .p-bein-l { animation: p-baumeln 1.5s ease-in-out infinite alternate; }
.professor[data-pose="sitzen"] .p-bein-r { animation: p-baumeln 1.5s ease-in-out -0.75s infinite alternate; }

/* luegen: guckt von unten über den Rand, Hände hoch */
.professor[data-pose="luegen"] { --ar: -158deg; --al: -158deg; --sr: 1.7; --sl: 1.7; --bl: 6deg; --br: -6deg; --ay: 4px; --ky: 2px; }
.professor[data-pose="luegen"] .p-bein-l { animation: p-pendeln 1.3s ease-in-out infinite alternate; }
.professor[data-pose="luegen"] .p-bein-r { animation: p-pendeln 1.3s ease-in-out -0.65s infinite alternate; }

/* flug: im Sprung, Arme hoch, Beine angezogen */
.professor[data-pose="flug"] { --ar: -138deg; --al: -138deg; --er: -10deg; --el: -10deg; --bl: -24deg; --br: 24deg; --ky: -3px; --lid: 0.1; }
/* ===== Sprechblase: klein, durchscheinend, damit die Seite dahinter sichtbar bleibt ===== */
.p-blase {
  position: absolute; left: 0; top: 0; width: max-content; max-width: min(15.5rem, 62vw);
  padding: 0.5rem 0.75rem 0.55rem; border-radius: 0.85rem;
  background: rgba(13, 21, 17, 0.74); color: #f1f6ed;
  border: 1px solid rgba(140, 198, 63, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.3);
  font-size: 0.86rem; line-height: 1.36; font-weight: 500;
  opacity: 0; scale: 0.6; transform-origin: var(--ursprung, 100% 50%);
  transition: opacity 0.2s ease, scale 0.35s var(--feder);
}
.p-blase[data-sichtbar] { opacity: 1; scale: 1; }
.p-blase::before {
  content: ""; position: absolute; width: 0.5rem; height: 0.8rem; background: rgba(13, 21, 17, 0.74);
  top: calc(var(--schwanz, 2rem) - 0.4rem); right: -0.46rem; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.p-blase[data-schwanz="links"]::before { right: auto; left: -0.46rem; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.p-blase[data-schwanz="unten"]::before { top: auto; bottom: -0.46rem; right: auto; left: calc(var(--schwanz, 2rem) - 0.4rem); width: 0.8rem; height: 0.5rem; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.p-blase[data-schwanz="oben"]::before { top: -0.46rem; right: auto; left: calc(var(--schwanz, 2rem) - 0.4rem); width: 0.8rem; height: 0.5rem; clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.p-name { display: block; margin-bottom: 0.1rem; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: #a7d66b; }
.p-rest { visibility: hidden; }
.p-blase a { color: #a7d66b; font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; pointer-events: auto; }

/* ===== Schalter ===== */
.p-schalter {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 58;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; padding: 0; border-radius: 50%;
  background: rgba(15, 23, 19, 0.9); color: #e8eee9; border: 1px solid #2d3c33;
  font: inherit; cursor: pointer; opacity: 0.82;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 0.2s, border-color 0.2s, translate 0.2s, opacity 0.2s;
}
.p-schalter:hover { background: #19241e; border-color: #8cc63f; translate: 0 -1px; opacity: 1; }
.p-schalter:focus-visible { outline: 3px solid #8cc63f; outline-offset: 3px; }
.p-schalter-bild { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: #fffdf4; overflow: hidden; }
.p-schalter-bild svg { width: 2rem; height: 2rem; }
.p-schalter-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.p-schalter::after { content: attr(data-hinweis); position: absolute; left: 3.4rem; top: 50%; translate: 0 -50%; padding: 0.35rem 0.7rem; border-radius: 0.6rem; background: #0f1713; color: #e8eee9; border: 1px solid #2d3c33; font-size: 0.82rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.p-schalter:hover::after, .p-schalter:focus-visible::after { opacity: 1; }
.p-schalter[aria-pressed="false"] .p-schalter-bild { filter: grayscale(1); opacity: 0.7; }

@media (min-width: 100rem) { .p-wurzel { --p-breite: 8.8rem; } }
@media (max-width: 64rem) { .p-wurzel { --p-breite: 6.6rem; } }
@media (max-width: 40rem) {
  .p-wurzel { --p-breite: 4.9rem; }
  .p-blase { font-size: 0.8rem; padding: 0.42rem 0.62rem 0.46rem; max-width: min(12.5rem, 60vw); border-radius: 0.75rem; }
  .p-schalter { bottom: 5.4rem; width: 2.6rem; height: 2.6rem; }
  .p-schalter::after { display: none; }
}

/* ===== Animationen ===== */
@keyframes p-atmen { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.018); } }
@keyframes p-blinzeln { 0%, 93%, 100% { transform: scaleY(var(--lid)); } 96% { transform: scaleY(1); } }
@keyframes p-reden { from { transform: scaleY(0.28); } to { transform: scaleY(1); } }
@keyframes p-puls { from { opacity: 0.55; scale: 0.92; } to { opacity: 1; scale: 1.08; } }
@keyframes p-winken { from { transform: rotate(-13deg); } to { transform: rotate(15deg); } }
@keyframes p-baumeln { from { transform: rotate(-17deg); } to { transform: rotate(19deg); } }
@keyframes p-pendeln { from { transform: rotate(-9deg); } to { transform: rotate(10deg); } }

@media (prefers-reduced-motion: reduce) {
  .p-rumpf, .p-lid, .p-strahlen,
  .professor[data-pose] .p-bein, .professor[data-pose] .p-arm-r .p-streck { animation: none !important; }
  .p-arm, .p-unterarm, .p-bein, .p-kopf, .p-blase { transition: none; }
}
@media print { .p-wurzel, .p-schalter { display: none !important; } }

/* ===== Staubwölkchen bei der Landung ===== */
.p-staub {
  position: absolute; width: 0.9rem; height: 0.9rem; margin: -0.45rem 0 0 -0.45rem; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.9), rgba(214, 226, 208, 0.55));
  animation: p-staub 0.62s ease-out forwards; pointer-events: none;
}
@keyframes p-staub { from { opacity: 0.9; transform: translate(0, 0) scale(0.4); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.7); } }
.p-schalter-bild { --lid: 0; --ax: 0px; --ay: 0px; }

/* Nur der Kopf nimmt Klicks an (kleiner Spaß); alles andere lässt Klicks zur Seite durch */
.p-kopf { pointer-events: auto; cursor: pointer; }