/* Kontrastkopf Twitch 0.2.3. Diffuser Farbnebel innerhalb der Originalkontur. */
.hero{position:relative;overflow:hidden;gap:24px;padding:32px 24px 260px;background:var(--night);text-align:center}
.hero-stage{position:relative;container-type:inline-size;width:min(340px,75vw);aspect-ratio:1;flex:none;isolation:isolate;overflow:hidden}
.hero-stage .hero-mark{position:absolute;width:100%;aspect-ratio:1;left:0;bottom:0}
.hero-stage .hero-mark{mask:url(bildmarke.svg) center/contain no-repeat;-webkit-mask:url(bildmarke.svg) center/contain no-repeat;background:var(--pink);z-index:3;isolation:isolate}
.hero-flow{position:absolute;inset:-30%;background:radial-gradient(ellipse at 24% 38%,#DFFF00e6 0%,#DFFF0060 19%,transparent 48%),radial-gradient(ellipse at 76% 62%,#DFFF00cc 0%,#DFFF0040 24%,transparent 52%),radial-gradient(ellipse at 55% 20%,#FF007F 0%,transparent 60%);filter:blur(16px);animation:kkt-fog-drift 17s ease-in-out infinite alternate}
.hero-flow:after{content:"";position:absolute;inset:-10%;background:radial-gradient(ellipse at 36% 65%,#FF007F 0%,#FF007F99 25%,transparent 58%),radial-gradient(ellipse at 72% 28%,#FF007Fe6 0%,transparent 48%);animation:kkt-fog-pink 13s ease-in-out infinite alternate}
.hero-sheen{position:absolute;inset:-25%;background:radial-gradient(ellipse at 38% 34%,#DFFF00cc 0%,#DFFF004d 20%,transparent 55%),radial-gradient(ellipse at 64% 75%,#DFFF0099 0%,transparent 48%);filter:blur(18px);animation:kkt-fog-bloom 11s ease-in-out -4s infinite alternate}
/* Diffuse Farbwolken: sanfte Drift und wechselnde Farbdichte, keine Rotation. */
@keyframes kkt-fog-drift{0%{transform:translate(-12%,8%) scale(1.05,1.15);opacity:.45}50%{transform:translate(8%,-6%) scale(1.18,.95);opacity:.95}100%{transform:translate(-3%,-12%) scale(.98,1.12);opacity:.65}}
@keyframes kkt-fog-pink{0%{transform:translate(10%,-8%) scale(1.1);opacity:.85}100%{transform:translate(-12%,10%) scale(.92,1.18);opacity:.3}}
@keyframes kkt-fog-bloom{0%{transform:translate(10%,8%) scale(.9,1.12);opacity:.12}50%{transform:translate(-8%,2%) scale(1.12,.96);opacity:.65}100%{transform:translate(4%,-10%) scale(1.18);opacity:.3}}
.hero-copy{max-width:720px}.hero-copy h1{font-size:clamp(40px,6vw,64px);margin:0 0 24px}.hero-copy p{margin:0 auto;font-size:clamp(16px,2vw,20px);color:var(--paper)}
.hero-controls{display:flex;gap:24px;flex-wrap:wrap;align-items:center;justify-content:center}.motion-control{appearance:none;background:transparent;color:var(--paper);border:0;font:400 14px/1.5 Inter,sans-serif;text-decoration:none;text-underline-offset:4px;cursor:pointer;min-height:48px;padding:12px}.motion-control:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.portrait-panel{display:flex;justify-content:center}.portrait-panel img{width:min(420px,100%);aspect-ratio:1;object-fit:cover;border-radius:24px}
/* Bildmarke und beide QUAKK-Ecken teilen sich Pause und Sichtbarkeitssteuerung. */
.hero-stage *,.hero-stage *:after,.hero-corners *{animation-play-state:paused}
.hero.motion-ready:not(.motion-paused):not(.motion-inactive) .hero-stage *,.hero.motion-ready:not(.motion-paused):not(.motion-inactive) .hero-stage *:after,.hero.motion-ready:not(.motion-paused):not(.motion-inactive) .hero-corners *{animation-play-state:running}
@media(max-width:560px){.hero{padding:24px 16px 215px}.hero-stage{width:min(260px,72vw)}.hero-controls{gap:8px}.hero-copy h1{font-size:40px}.hero-corners{height:205px}.hero-corner{width:150px;height:150px}.hero-speech{left:65%;width:min(240px,calc(100vw - 106px));padding:clamp(42px,11vw,48px) 16px 0}.hero-corner--right .hero-speech{left:auto;right:65%}.hero-speech strong{font-size:30px}.hero-speech span{font-size:18px}.portrait-panel img{width:min(360px,100%)}}
@media(prefers-reduced-motion:reduce){.hero-flow,.hero-flow:after,.hero-sheen,.hero-quakk-motion,.hero-quakk,.hero-speech{animation:none}.hero-quakk-motion{opacity:1}.hero-quakk--open{opacity:1}.hero-quakk--wink{opacity:0}.hero-speech{display:none}.motion-control{display:none}}
@media(forced-colors:active){.hero-mark{forced-color-adjust:none}.hero-speech{forced-color-adjust:none}}

/* QUAKK bleibt auf Mobil vollständig ausgeblendet. */
@media(max-width:767px){.hero-corners{display:none}.hero{padding-bottom:32px}}