:root{--gate-warm:#f4d9a0;--gate-mint:#55d7d0;--gate-ink:#f4f4f5}

/* Solange das Gate offen ist, ruht die Seite dahinter. Nur JS setzt diese Klasse,
   ohne JS erscheint das Gate nie und die Seite bleibt vollständig lesbar. */
.gate-open,.gate-open body{overflow:hidden}
.gate-open body>:not(.gate){filter:blur(3px);pointer-events:none;user-select:none}
.gate-open body:before{
  content:"";position:fixed;inset:0;z-index:900;
  background:rgba(4,5,7,.68);pointer-events:none;
}

.gate{
  position:fixed;z-index:950;inset:0;
  display:grid;place-items:center;
  padding:clamp(16px,4vw,42px);
  color:var(--gate-ink);
  background:
    radial-gradient(ellipse 40rem 26rem at 50% 12%,rgba(244,217,160,.07),transparent 70%),
    radial-gradient(circle at 50% 62%,rgba(85,215,208,.05),transparent 30rem),
    #08090b;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow:auto;
}

.gate-panel{
  position:relative;
  width:min(660px,100%);
  padding:clamp(26px,5vw,46px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:linear-gradient(150deg,rgba(19,20,23,.97),rgba(9,10,12,.97));
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}

.gate-kicker,.gate-count,.gate-direct{
  font:700 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.11em;text-transform:uppercase;
}
.gate-kicker{margin:0;color:var(--gate-mint)}

.gate-intro{margin:22px 0 0;max-width:46ch;color:#b7b8be;font-size:16px;line-height:1.72}
.gate-intro strong{display:block;margin-bottom:10px;color:var(--gate-ink);font-weight:600}

.gate-meter{display:flex;align-items:center;gap:15px;margin:26px 0 34px}
.gate-count{color:#8c8d94;white-space:nowrap}
.gate-track{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
.gate-track i{height:2px;background:#34353b;border-radius:2px}
.gate-track i.on{background:var(--gate-warm)}

.gate-step h2{
  max-width:24ch;margin:0 0 24px;
  font-family:Georgia,"Iowan Old Style",serif;font-weight:400;
  font-size:clamp(24px,4vw,38px);line-height:1.2;letter-spacing:-.02em;
}
.gate-options{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.gate-option{
  width:100%;
  border:1px solid #383a40;border-radius:11px;
  background:rgba(255,255,255,.025);color:var(--gate-ink);
  padding:15px 17px;text-align:left;
  font:600 15px/1.4 inherit;cursor:pointer;
}
.gate-option:hover{border-color:#6c6e77;background:rgba(255,255,255,.055)}
.gate-option[aria-pressed=true]{border-color:var(--gate-warm);background:rgba(244,217,160,.08)}
.gate-option:focus-visible,.gate-next:focus-visible,.gate-direct:focus-visible,.gate-enter:focus-visible{
  outline:3px solid var(--gate-warm);outline-offset:3px;
}

/* Die Einordnung nach einer Antwort. Kein Urteil, keine Punkte. */
.gate-echo{
  min-height:26px;margin:22px 0 0;max-width:52ch;
  font-family:Georgia,serif;font-size:16px;line-height:1.6;color:var(--gate-warm);
}

.gate-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:30px 0 0}
.gate-next,.gate-enter{
  border:1px solid rgba(244,217,160,.55);border-radius:11px;
  background:var(--gate-warm);color:#12130f;
  padding:14px 22px;
  font:800 14px/1 inherit;cursor:pointer;
}
.gate-next[disabled]{opacity:.32;cursor:default}
.gate-direct{
  border:0;border-bottom:1px solid #4e5057;
  background:none;color:#a3a4aa;
  padding:3px 0;cursor:pointer;
}
.gate-direct:hover{color:#fff}

/* Der Übergang. Ein Wächter, der zur Seite tritt, kein Feuerwerk. */
.gate-close{text-align:left}
.gate-close .keeper{
  display:block;width:min(190px,44vw);margin:0 0 30px;
  filter:drop-shadow(0 0 24px rgba(244,217,160,.16));
}
.gate-close .keeper .cloak{fill:#101216;stroke:#41444d;stroke-width:1.2}
.gate-close .keeper .hood{fill:#08090b;stroke:#555963;stroke-width:1.1}
.gate-close .keeper .core{fill:var(--gate-mint)}
.gate-close .keeper .staff{stroke:#7b808a;stroke-width:5;stroke-linecap:round}
.gate-close .keeper .light{fill:var(--gate-warm)}
.gate-close p{
  max-width:38ch;margin:0 0 30px;
  font-family:Georgia,serif;font-size:clamp(19px,2.6vw,26px);line-height:1.45;
  color:var(--gate-ink);
}

.gate-step,.gate-close{animation:gate-in .34s ease both}
@keyframes gate-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

@media(max-width:560px){
  .gate-panel{padding:24px 20px}
  .gate-meter{margin-bottom:26px}
  .gate-actions{gap:16px}
  .gate-next,.gate-enter{width:100%;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  .gate-step,.gate-close{animation-duration:.01ms!important}
  .gate-open body>:not(.gate){filter:none}
}