/* ================= Fenni – der Assistent als Dreh-Kipp-Fenster (public/fenni.js) ================= */
.fenni { width: 120px; height: 150px; overflow: visible; display: block; }
.fenni.mini { width: 22px; height: 28px; }
.fenni.klein { width: 40px; height: 50px; }
.fenni.mittel { width: 72px; height: 90px; }
.fenni.gross { width: 132px; height: 165px; }
.fenni * { transform-box: fill-box; transform-origin: center; }
.fe-schatten { fill: rgba(7, 27, 54, .18); }
.fe-rahmen { stroke: #c9d3e0; stroke-width: 1.5; }
.fe-falz { fill: #8fa2bb; }
.fe-fluegelrahmen { stroke: #d3dbe6; stroke-width: 1.2; }
.fe-fluegel { transform-origin: 50% 100%; }
.fe-reflex { fill: rgba(255, 255, 255, .5); }
.fe-reflex.klein { fill: rgba(255, 255, 255, .32); }
.fe-regen path { stroke: #f1faff; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.fe-regen, .fe-scan, .fe-wischer, .fe-sonne, .fe-mund-o, .fe-mund-traurig, .fe-zwinker, .fe-froh, .fe-brauen, .fe-schweiss, .fe-spalt, .fe-tasse,
.fe-zzz, .fe-note, .fe-herz, .fe-wind, .fe-punkte, .fe-funke.f2, .fe-funke.f3 { opacity: 0; }
.fe-scan { fill: rgba(245, 165, 36, .6); }
.fe-wischer rect { fill: #f5a524; } .fe-wischer rect:first-child { fill: #3a5f8f; width: 3px; }
.fe-sonne circle { fill: #ffd27a; filter: drop-shadow(0 0 4px #ffd27a); }
.fe-auge ellipse { fill: #a8650a; }
.fe-licht { fill: #fff; }
.fe-lid { fill: #b6e0fa; transform: scaleY(0); transform-origin: 50% 0; }
.fe-zwinker, .fe-froh, .fe-brauen path { stroke: #a8650a; stroke-width: 2.6; stroke-linecap: round; fill: none; }
.fe-wange { fill: #ff9a6b; opacity: .38; }
.fe-fuss { fill: #ffffff; stroke: #c9d3e0; stroke-width: 1.2; }
.fe-mund, .fe-mund-traurig { stroke: #c47d10; stroke-width: 3; stroke-linecap: round; fill: none; }
.fe-mund-o { fill: #a8650a; }
.fe-schweiss { fill: #a9dcfb; stroke: #fff; stroke-width: 1; }
.fe-griffrosette { fill: #f3f5f8; stroke: #c9d3e0; stroke-width: 1; }
.fe-griffhebel { fill: #fff; stroke: #c9d3e0; stroke-width: 1; transform-origin: 50% 8%; }
.fe-spalt { fill: #0b1f3a; }
.fe-tasse path { fill: #fff; stroke: #c9d3e0; stroke-width: 1.2; }
.fe-tasse .henkel, .fe-tasse .dampf { fill: none; }
.fe-tasse .dampf { stroke: #9fb7d4; stroke-linecap: round; }
.fe-funke { fill: #f5a524; }
.fe-zzz, .fe-note { fill: #f5a524; font: 700 15px/1 var(--titel, system-ui); }
.fe-herz { fill: #ff6b8a; }
.fe-wind path { stroke: #9fb7d4; stroke-width: 2; stroke-linecap: round; fill: none; }
.fe-punkte circle { fill: #f5a524; }

@media (prefers-reduced-motion: no-preference) {
  .fenni .fe-ganz { animation: fe-atmen 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
  .fenni .fe-funke.f1 { animation: fe-funkeln 3.4s ease-in-out infinite; }
  .fenni .fe-reflex { animation: fe-reflex 7s ease-in-out infinite; }

  /* --- Gags im Leerlauf --- */
  .fenni.m-blinzeln .fe-lid { animation: fe-blink .5s ease; }
  .fenni.m-umschauen .fe-augen { animation: fe-umschauen 1.8s ease-in-out; }
  .fenni.m-zwinkern .fe-auge.r { opacity: 0; } .fenni.m-zwinkern .fe-zwinker { opacity: 1; } .fenni.m-zwinkern .fe-mund { animation: fe-grinsen .9s ease; }
  .fenni.m-gaehnen .fe-mund { opacity: 0; } .fenni.m-gaehnen .fe-mund-o { animation: fe-gaehnen 2s ease; }
  .fenni.m-gaehnen .fe-auge { opacity: 0; } .fenni.m-gaehnen .fe-froh { opacity: 1; }
  .fenni.m-gaehnen .fe-ganz { animation: fe-strecken 2s ease; } .fenni.m-gaehnen .fe-zzz { animation: fe-aufsteigen 2s ease .5s; }
  .fenni.m-putzen .fe-wischer { animation: fe-wischen 2.2s ease-in-out; } .fenni.m-putzen .fe-funke.f3 { animation: fe-blitz 2.2s ease 1.2s; }
  .fenni.m-putzen .fe-auge { animation: fe-folgen 2.2s ease-in-out; }
  .fenni.m-lueften .fe-fluegel { animation: fe-kippen 2.6s ease-in-out; } .fenni.m-lueften .fe-spalt { animation: fe-spalt 2.6s ease-in-out; }
  .fenni.m-lueften .fe-wind { animation: fe-wind 2.6s ease-in-out; } .fenni.m-lueften .fe-auge { opacity: 0; } .fenni.m-lueften .fe-froh { animation: fe-ein 2.6s ease-in-out; }
  .fenni.m-regen .fe-regen { animation: fe-regen 2.6s linear; } .fenni.m-regen .fe-augen { animation: fe-hochschauen 2.6s ease-in-out; }
  .fenni.m-regen .fe-mund { opacity: 0; } .fenni.m-regen .fe-mund-o { animation: fe-ein 2.6s ease; transform: scale(.5); }
  .fenni.m-summen .fe-ganz { animation: fe-wippen 2.6s ease-in-out; } .fenni.m-summen .fe-note.n1 { animation: fe-aufsteigen 2.4s ease; } .fenni.m-summen .fe-note.n2 { animation: fe-aufsteigen 2.4s ease .6s; }
  .fenni.m-summen .fe-auge { opacity: 0; } .fenni.m-summen .fe-froh { opacity: 1; }
  .fenni.m-huepfen .fe-ganz, .fenni.m-jubeln .fe-ganz { animation: fe-huepfen 1.1s cubic-bezier(.3,.7,.4,1.4); }
  .fenni.m-huepfen .fe-schatten, .fenni.m-jubeln .fe-schatten { animation: fe-schatten 1.1s ease; }
  .fenni.m-strecken .fe-ganz { animation: fe-strecken 1.5s ease; } .fenni.m-strecken .fe-auge { opacity: 0; } .fenni.m-strecken .fe-froh { opacity: 1; }
  .fenni.m-kaffee .fe-tasse { animation: fe-tasse 2.6s ease; } .fenni.m-kaffee .fe-tasse .dampf { animation: fe-dampf 1s ease-in-out infinite; }
  .fenni.m-kaffee .fe-griffhebel { animation: fe-griff-halten 2.6s ease; } .fenni.m-kaffee .fe-auge { opacity: 0; } .fenni.m-kaffee .fe-froh { animation: fe-ein 2.6s ease; }
  .fenni.m-staunen .fe-mund { opacity: 0; } .fenni.m-staunen .fe-mund-o { animation: fe-ein 1.5s ease; } .fenni.m-staunen .fe-auge { animation: fe-gross 1.5s ease; }
  .fenni.m-staunen .fe-funke.f2, .fenni.m-staunen .fe-funke.f3 { animation: fe-blitz 1.5s ease; }
  .fenni.m-sonne .fe-sonne { animation: fe-sonne 2.4s ease; } .fenni.m-sonne .fe-auge { opacity: 0; } .fenni.m-sonne .fe-froh { opacity: 1; } .fenni.m-sonne .fe-wange { animation: fe-erroeten 2.4s ease; }
  .fenni.m-nicken .fe-koerper { animation: fe-nicken 1.2s ease; }

  /* --- Reaktionen --- */
  .fenni.m-winken .fe-griffhebel { animation: fe-winken 1.8s ease-in-out; } .fenni.m-winken .fe-mund { animation: fe-grinsen 1.8s ease; }
  .fenni.m-winken .fe-funke.f2 { animation: fe-blitz 1.8s ease .3s; }
  .fenni.m-fertig .fe-fluegel { animation: fe-drehen 2s ease-in-out; transform-origin: 0 50%; } .fenni.m-fertig .fe-ganz { animation: fe-huepfen 1.1s cubic-bezier(.3,.7,.4,1.4) .9s; }
  .fenni.m-fertig .fe-funke.f2, .fenni.m-fertig .fe-funke.f3, .fenni.m-jubeln .fe-funke.f2, .fenni.m-jubeln .fe-funke.f3 { animation: fe-blitz 1.4s ease .5s; }
  .fenni.m-fertig .fe-auge, .fenni.m-jubeln .fe-auge { opacity: 0; } .fenni.m-fertig .fe-froh, .fenni.m-jubeln .fe-froh { opacity: 1; }
  .fenni.m-fehler .fe-ganz { animation: fe-haengen 2.2s ease; } .fenni.m-fehler .fe-mund { opacity: 0; } .fenni.m-fehler .fe-mund-traurig { opacity: 1; }
  .fenni.m-fehler .fe-schweiss { animation: fe-schweiss 2.2s ease; } .fenni.m-fehler .fe-brauen { opacity: 1; transform: rotate(-6deg); }
  .fenni.m-herz .fe-herz { animation: fe-aufsteigen 1.8s ease; } .fenni.m-herz .fe-auge { opacity: 0; } .fenni.m-herz .fe-froh { opacity: 1; } .fenni.m-herz .fe-wange { animation: fe-erroeten 1.8s ease; }

  /* --- Dauerzustände --- */
  .fenni.z-denken .fe-fluegel { animation: fe-kippen-halten 1.6s ease-in-out infinite alternate; } .fenni.z-denken .fe-spalt { opacity: 1; }
  .fenni.z-denken .fe-augen { transform: translate(3px, -4px); transition: transform .3s; } .fenni.z-denken .fe-brauen { opacity: 1; }
  .fenni.z-denken .fe-punkte { opacity: 1; } .fenni.z-denken .fe-punkte circle { animation: fe-punkt 1.2s ease-in-out infinite; }
  .fenni.z-denken .fe-punkte circle:nth-child(2) { animation-delay: .2s; } .fenni.z-denken .fe-punkte circle:nth-child(3) { animation-delay: .4s; }
  .fenni.z-sprechen .fe-mund { opacity: 0; } .fenni.z-sprechen .fe-mund-o { opacity: 1; animation: fe-sprechen .32s ease-in-out infinite alternate; }
  .fenni.z-sprechen .fe-reflex { animation: fe-reflex 1.6s ease-in-out infinite; }
  .fenni.z-lesen .fe-scan { opacity: 1; animation: fe-scannen 1.6s ease-in-out infinite alternate; } .fenni.z-lesen .fe-augen { animation: fe-lesen 1.6s ease-in-out infinite; }
  .fenni.z-lesen .fe-funke.f2, .fenni.z-lesen .fe-funke.f3 { animation: fe-blitz 1.6s ease infinite; } .fenni.z-lesen .fe-funke.f3 { animation-delay: .8s; }
  .fenni.z-schlafen .fe-auge { opacity: 0; } .fenni.z-schlafen .fe-froh { opacity: 1; } .fenni.z-schlafen .fe-zzz { animation: fe-aufsteigen 2.4s ease infinite; }
}

@keyframes fe-atmen { 50% { transform: translateY(-1.5px) scaleY(1.012); } }
@keyframes fe-funkeln { 0%, 100% { transform: scale(.7) rotate(0); opacity: .55; } 50% { transform: scale(1.1) rotate(25deg); opacity: 1; } }
@keyframes fe-reflex { 0%, 55% { transform: translateX(-46px); } 85%, 100% { transform: translateX(70px); } }
@keyframes fe-blink { 0%, 100% { transform: scaleY(0); } 40%, 60% { transform: scaleY(1); } }
@keyframes fe-umschauen { 25%, 40% { transform: translateX(-4px); } 60%, 80% { transform: translateX(4px); } }
@keyframes fe-hochschauen { 15%, 85% { transform: translateY(-4px); } }
@keyframes fe-grinsen { 30%, 70% { transform: scale(1.25, 1.15); } }
@keyframes fe-gaehnen { 0% { opacity: 1; transform: scale(.4); } 40%, 70% { opacity: 1; transform: scale(1.25, 1.5); } 100% { opacity: 1; transform: scale(.4); } }
@keyframes fe-strecken { 40%, 60% { transform: scale(.98, 1.06); } }
@keyframes fe-aufsteigen { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px) scale(1.1); } }
@keyframes fe-wischen { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 45% { transform: translateX(66px); } 80% { transform: translateX(4px); opacity: 1; } 100% { opacity: 0; transform: translateX(0); } }
@keyframes fe-folgen { 45% { transform: translateX(3px); } 80% { transform: translateX(-3px); } }
@keyframes fe-kippen { 20%, 75% { transform: scale(.975, .93); } }
@keyframes fe-kippen-halten { from { transform: scale(.98, .95); } to { transform: scale(.975, .92); } }
@keyframes fe-spalt { 0%, 100% { opacity: 0; } 20%, 75% { opacity: 1; } }
@keyframes fe-wind { 0% { opacity: 0; transform: translateX(10px); } 30%, 65% { opacity: .9; } 100% { opacity: 0; transform: translateX(-14px); } }
@keyframes fe-ein { 0%, 100% { opacity: 0; } 15%, 85% { opacity: 1; } }
@keyframes fe-regen { 0% { opacity: 1; transform: translateY(0); } 50% { transform: translateY(70px); } 50.01% { transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(70px); } }
@keyframes fe-wippen { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes fe-huepfen { 0% { transform: scale(1.04, .95); } 35% { transform: translateY(-14px) scale(.97, 1.04); } 65% { transform: translateY(0) scale(1.05, .95); } 85% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes fe-schatten { 35% { transform: scale(.7); opacity: .5; } }
@keyframes fe-tasse { 0%, 100% { opacity: 0; transform: translateX(8px); } 15%, 85% { opacity: 1; transform: none; } 45% { transform: translateY(-3px) rotate(-8deg); } }
@keyframes fe-dampf { 50% { transform: translateY(-2px); opacity: .5; } }
@keyframes fe-griff-halten { 15%, 85% { transform: rotate(-40deg); } }
@keyframes fe-gross { 30%, 70% { transform: scale(1.22); } }
@keyframes fe-blitz { 0% { opacity: 0; transform: scale(.3) rotate(0); } 40% { opacity: 1; transform: scale(1.25) rotate(40deg); } 100% { opacity: 0; transform: scale(.5) rotate(90deg); } }
@keyframes fe-sonne { 0% { opacity: 0; transform: translate(14px, -8px); } 25%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(-10px, 6px); } }
@keyframes fe-erroeten { 20%, 80% { opacity: .65; transform: scale(1.2); } }
@keyframes fe-nicken { 20%, 60% { transform: translateY(2.5px); } 40%, 80% { transform: translateY(-1px); } }
@keyframes fe-winken { 15% { transform: rotate(-150deg); } 30% { transform: rotate(-115deg); } 45% { transform: rotate(-155deg); } 60% { transform: rotate(-115deg); } 75% { transform: rotate(-150deg); } 100% { transform: rotate(0); } }
@keyframes fe-drehen { 0%, 100% { transform: scaleX(1); filter: none; } 30%, 60% { transform: scaleX(.42) skewY(-6deg); filter: brightness(.92); } }
@keyframes fe-haengen { 20%, 80% { transform: translateY(3px) rotate(-4deg) scaleY(.97); } }
@keyframes fe-schweiss { 0% { opacity: 0; transform: translateY(-4px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }
@keyframes fe-punkt { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes fe-sprechen { from { transform: scale(.55, .35); } to { transform: scale(.9, .8); } }
@keyframes fe-scannen { from { transform: translateY(0); } to { transform: translateY(86px); } }
@keyframes fe-lesen { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
.fenni-konfetti { position: fixed; z-index: 10001; width: 7px; height: 11px; border-radius: 2px; pointer-events: none; animation: fenni-konfetti 1.3s ease-out forwards; }
@keyframes fenni-konfetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), 120px) rotate(540deg); opacity: 0; } }