:root{
  --overlay-w: min(780px, calc(92vw - 24px));           /* spiegelt Fragen-Overlay */
  --gate-accent:#1ee6b2; --gate-accent2:#12c7a1;
  --gate-bg: radial-gradient(1200px 520px at 50% -140px, rgba(30,230,178,.18), transparent 62%), #0a0f14;
}
.memoriii-gate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--gate-bg);backdrop-filter:blur(8px);animation:gateFadeIn .35s both}
.memoriii-gate.closing{pointer-events:none;animation:gateFadeOut .42s ease both}
@keyframes gateFadeIn{from{opacity:0}to{opacity:1}} @keyframes gateFadeOut{from{opacity:1}to{opacity:0}}

.gate-card{position:relative;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;padding:14px}
.gate-aura{position:absolute;inset:-18%;background:radial-gradient(260px 260px at 50% 50%, rgba(30,230,178,.28), transparent 62%),radial-gradient(420px 420px at 50% 110%, rgba(30,230,178,.12), transparent 72%);filter:blur(20px);animation:auraPulse 4.6s ease-in-out infinite;opacity:.95;z-index:0}
@keyframes auraPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

.gate-btn{position:relative;z-index:2;display:grid;place-items:center;width:var(--overlay-w);height:var(--overlay-w);max-width:100%;aspect-ratio:1;border-radius:24px;border:1px solid color-mix(in oklab,var(--gate-accent) 70%, transparent);background:linear-gradient(180deg, rgba(17,192,177,.55), rgba(12,16,24,.78));cursor:pointer;transition:transform .18s,box-shadow .28s,border-color .28s,filter .28s;box-shadow:0 16px 36px rgba(0,0,0,.55);animation:breathe 2.8s ease-in-out infinite;overflow:hidden}
.gate-btn::before{content:"";position:absolute;inset:10px;border-radius:18px;border:1px solid color-mix(in oklab,var(--gate-accent) 55%, transparent);box-shadow:inset 0 0 24px 2px color-mix(in oklab,var(--gate-accent) 22%, transparent);pointer-events:none}
.gate-btn:hover{transform:translateY(-3px);border-color:var(--gate-accent);box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 28px 6px color-mix(in oklab,var(--gate-accent) 18%, transparent);filter:drop-shadow(0 0 18px color-mix(in oklab,var(--gate-accent) 25%, transparent))}
@keyframes breathe{0%,100%{box-shadow:0 16px 36px rgba(0,0,0,.55)}50%{box-shadow:0 26px 60px rgba(0,0,0,.65),0 0 26px 6px color-mix(in oklab,var(--gate-accent) 20%, transparent)}}

.gate-btn img{width:84%;height:auto;display:block;user-select:none;pointer-events:none;filter:drop-shadow(0 10px 24px rgba(0,0,0,.55)) drop-shadow(0 0 18px color-mix(in oklab,var(--gate-accent) 28%, transparent));animation:softFloat 5.6s ease-in-out infinite}
@keyframes softFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.01)}}

.gate-btn::after{content:"";position:absolute;inset:-10px;border-radius:28px;border:3px solid transparent;opacity:0;pointer-events:none}
.gate-btn.pulse::after{animation:ring 950ms ease-out}
@keyframes ring{0%{opacity:1;border-color:var(--gate-accent);box-shadow:0 0 0 0 color-mix(in oklab,var(--gate-accent) 45%, transparent)}60%{opacity:.6;border-color:var(--gate-accent2);box-shadow:0 0 22px 10px color-mix(in oklab,var(--gate-accent) 28%, transparent)}100%{opacity:0;border-color:transparent;box-shadow:0 0 40px 16px rgba(0,0,0,0)}}

.gate-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#9fb0c2;font-size:12px;letter-spacing:.3px;text-shadow:0 0 10px color-mix(in oklab,var(--gate-accent) 25%, transparent)}
/* wichtig: dekorative Aura darf keine Clicks blocken */
.gate-aura { pointer-events: none; z-index: 0; }

/* Button muss über der Aura liegen */
.gate-btn  { position: relative; z-index: 1; }

/* Overlay liegt sicher vor allem anderen */
.memoriii-gate { z-index: 9999; }