/* Trommelfell (Andy 20.10.2026: «einen Button, den Menschen ablecken wollen»)
   Licht antwortet auf Handlung, nie Dauerdeko. Ruhe: Glut unter dem Fell. Erscheinen, Hover, Fokus: Licht läuft einmal um den Rand.
   Druck: Fell sinkt, Blitz an der Druckstelle, Kante leuchtet, drei Ringe klingen aus. Loslassen: federt zurück.
   Gilt für volle .kn ausserhalb von Kopf und Menü; fell.js setzt .fell und die Ebenen. */
.kn.fell{--d:0;--fx:50%;--fy:50%;position:relative;isolation:isolate;background:transparent!important;color:#F3E7E1!important;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
 transform:translateY(calc(var(--d)*2px)) scale(calc(1 - var(--d)*.02))!important;transition:transform .55s cubic-bezier(.34,1.56,.64,1)!important}
.fell>.f-glut{position:absolute;inset:10px 12% -16px;border-radius:999px;z-index:-3;pointer-events:none;background:#E39A86;filter:blur(24px);opacity:.45;transition:opacity .5s cubic-bezier(.23,1,.32,1),transform .5s cubic-bezier(.23,1,.32,1)}
.fell.f-hell>.f-glut{background:#A24F5A;opacity:.18}
.fell>.f-fell{position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;overflow:hidden;
 background:linear-gradient(180deg,rgba(243,231,225,.06),rgba(243,231,225,0) 50%,rgba(61,52,56,.22)),#A24F5A;
 box-shadow:inset 0 1px 0 rgba(243,231,225,.22),0 calc(10px - var(--d)*8px) calc(24px - var(--d)*18px) -10px rgba(34,45,68,.6);transition:box-shadow .55s cubic-bezier(.34,1.56,.64,1)}
.fell>.f-fell::after{content:"";position:absolute;inset:0;background:radial-gradient(55px 34px at var(--fx) var(--fy),#E39A86,rgba(227,154,134,0) 100%);opacity:0;transition:opacity .6s cubic-bezier(.23,1,.32,1)}
.fell.f-unten>.f-fell::after{animation:f-blitz .12s linear forwards}
@keyframes f-blitz{0%{opacity:.75}100%{opacity:.18}}
.fell>.f-kante{position:absolute;inset:-2px;border-radius:999px;z-index:-1;pointer-events:none;filter:drop-shadow(0 0 5px rgba(227,154,134,1)) drop-shadow(0 0 14px rgba(227,154,134,.7))}
.fell>.f-kante>i,.fell>.f-kante>b{position:absolute;inset:0;border-radius:inherit;padding:2.5px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fell>.f-kante>i{background:rgba(227,154,134,.18);overflow:hidden;opacity:.35;transition:opacity .6s cubic-bezier(.23,1,.32,1)}
/* Lauf als Drehung (läuft in Safari, ohne @property) */
.fell>.f-kante>i::before{content:"";position:absolute;left:50%;top:50%;width:640px;height:640px;
 background:conic-gradient(rgba(227,154,134,0) 0 35%,rgba(227,154,134,.8) 60%,#F3E7E1 76%,#F3E7E1 86%,rgba(227,154,134,.8) 93%,rgba(227,154,134,0) 100%);transform:translate(-50%,-50%) rotate(200deg)}
.fell>.f-kante>b{background:rgba(227,154,134,.9);opacity:0;transition:opacity .7s cubic-bezier(.23,1,.32,1)}
.fell.f-lauf>.f-kante>i{opacity:1}
.fell.f-lauf>.f-glut{opacity:.7}
.fell.f-lauf>.f-kante>i::before{animation:f-umlauf 3.2s cubic-bezier(.45,0,.2,1) forwards}
@keyframes f-umlauf{from{transform:translate(-50%,-50%) rotate(200deg)}to{transform:translate(-50%,-50%) rotate(920deg)}}
.kn.fell.f-unten{--d:1;transition:transform .09s ease-out!important}
.fell.f-unten>.f-fell{transition:box-shadow .09s ease-out}
.fell.f-unten>.f-kante>b{opacity:.85;transition:opacity .06s linear}
.fell.f-unten>.f-glut{opacity:.85;transform:scale(1.08);transition:opacity .08s linear,transform .08s linear}
.fell.f-unten .pf{transform:scale(.94)}
@media (hover:hover){.fell:hover>.f-glut{opacity:.62}.fell.f-hell:hover>.f-glut{opacity:.3}}
.kn.fell:focus-visible{outline:2px solid #E39A86;outline-offset:6px}
.kn.fell.f-hell:focus-visible{outline-color:#A24F5A}
.fell>.f-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;outline:1.5px solid rgba(243,231,225,.7);outline-offset:0;filter:drop-shadow(0 0 6px rgba(227,154,134,.55));opacity:0;animation:f-schlag .9s cubic-bezier(.23,1,.32,1) forwards}
.fell>.f-ring+.f-ring{animation-delay:.12s}.fell>.f-ring+.f-ring+.f-ring{animation-delay:.24s}
.fell.f-hell>.f-ring{outline-color:rgba(162,79,90,.45);filter:drop-shadow(0 0 6px rgba(162,79,90,.3))}
@keyframes f-schlag{0%{opacity:1;outline-offset:0}100%{opacity:0;outline-offset:16px}}
@media (prefers-reduced-motion:reduce){.kn.fell,.kn.fell.f-unten,.fell>*,.fell>.f-fell::after,.fell>.f-kante>*,.fell>.f-kante>i::before,.fell .pf{transition:none!important;animation:none!important}.fell.f-unten>.f-fell::after{opacity:.18}.fell>.f-ring{display:none}}
.hell a.kn:not(.kn-linie),.hell2 a.kn:not(.kn-linie){color:#F3E7E1}
.kn.fell:not(:has(>.f-fell)){background:#A24F5A!important}
.kn.fell:disabled>.f-glut{opacity:.15}
@media (forced-colors:active){.kn.fell{border:1px solid LinkText}}