/* Project Legend V0.46.42 — Q1/Q2: Hauptmenü und Start-Intro

   Der Aufbau steht in `v0486-main-menu.js`. Hier steht nur, wie es aussieht.
   Zwei Grundsätze: Das Menü verdeckt die bestehende Landeseite vollständig,
   damit nichts durchscheint, und es ist mit der Tastatur bedienbar - ein
   Startmenü, das man mit der Maus suchen muss, ist keines. */

body.pl486-open{overflow:hidden}

/* ------------------------------------------------------------------- Intro */

#pl486Intro{
  position:fixed;inset:0;z-index:12000;
  display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 22%,#101a28 0%,#070b12 52%,#04060b 100%);
  animation:pl486-auf .5s ease both;
}
#pl486Intro.is-going{animation:pl486-zu .24s ease both}
.pl486-intro-inner{display:grid;justify-items:center;gap:14px;text-align:center;padding:24px}
.pl486-intro-inner img{
  width:min(420px,64vw);height:auto;
  /* Wie im Menü: der schwarze Kasten der Bilddatei fällt weg. */
  mix-blend-mode:screen;
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.7));
  animation:pl486-heran 1.5s cubic-bezier(.2,.7,.2,1) both;
}
.pl486-intro-inner p{
  margin:0;letter-spacing:.42em;text-transform:uppercase;
  font-size:clamp(10px,.82vw,13px);color:#c8a766;
  animation:pl486-auf 1.1s ease .55s both;
}
.pl486-intro-skip{
  margin-top:20px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(232,238,246,.34);
  animation:pl486-auf .8s ease 1.5s both;
}

@keyframes pl486-auf{from{opacity:0}to{opacity:1}}
@keyframes pl486-zu{from{opacity:1}to{opacity:0}}
@keyframes pl486-heran{
  from{opacity:0;transform:scale(1.06) translateY(8px);filter:blur(6px) drop-shadow(0 18px 44px rgba(0,0,0,.7))}
  to{opacity:1;transform:none;filter:blur(0) drop-shadow(0 18px 44px rgba(0,0,0,.7))}
}

/* -------------------------------------------------------------------- Menü */

#pl486Menu{position:fixed;inset:0;z-index:11500;animation:pl486-auf .34s ease both}
#pl486Menu.is-going{animation:pl486-zu .26s ease both}

.pl486-backdrop{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 22% 12%,rgba(233,185,73,.10),transparent 58%),
    radial-gradient(120% 100% at 78% 96%,rgba(46,86,140,.16),transparent 62%),
    linear-gradient(155deg,#080d16 0%,#050810 56%,#03060c 100%);
}

.pl486-shell{
  position:relative;height:100%;
  display:grid;grid-template-rows:auto 1fr auto;
  gap:clamp(14px,2vh,32px);
  padding:clamp(20px,4vh,54px) clamp(20px,5vw,80px);
  max-width:1180px;margin:0 auto;
}

.pl486-brand{display:grid;justify-items:start;gap:8px}

/* Die Logo-Datei hat KEINEN transparenten Hintergrund - sie bringt einen
   nahezu schwarzen Kasten mit, der auf dem Menühintergrund als Rechteck
   sichtbar war. `screen` lässt Schwarz verschwinden und behält das Gold:
   Bei dieser Rechenart bleibt heller Bildinhalt stehen, während Schwarz
   vollständig durchlässig wird. Damit braucht es keine neue Bilddatei. */
.pl486-logo{
  width:min(300px,42vw);height:auto;
  mix-blend-mode:screen;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.6));
}
.pl486-tagline{
  margin:0;letter-spacing:.38em;text-transform:uppercase;
  font-size:clamp(9px,.7vw,11px);color:rgba(200,167,102,.72);
}

/* C221 Punkt 14 (Auftraggeber 15.09.): "Steuerungshinweise ueberlagern den Quit-Bereich". Gemessen bei 1280x760:
   die Buehne braucht 372 Bildpunkte und hat 332 - der letzte Eintrag "Beenden" lief 25 Bildpunkte in die Fusszeile.
   Die Buehne rollt jetzt, statt ueberzulaufen. "safe center" haelt die Mitte, solange alles passt, und faellt beim
   Ueberlauf auf den Anfang zurueck - sonst schnitte die Zentrierung oben ab, was schlimmer waere als unten zu rollen. */
.pl486-stage{display:grid;align-content:safe center;min-height:0;overflow-y:auto}
.pl486-layer{display:grid;gap:clamp(12px,2vh,22px);animation:pl486-quer .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes pl486-quer{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

.pl486-layer-head{display:grid;gap:4px;justify-items:start}
.pl486-kicker{
  letter-spacing:.24em;text-transform:uppercase;
  font-size:clamp(9px,.66vw,11px);color:#c8a766;
}
.pl486-layer-head h2{
  margin:0;font-size:clamp(24px,2.6vw,42px);line-height:1.05;
  color:#f2f6fc;font-weight:800;letter-spacing:-.01em;
}

.pl486-back{
  border:0;background:none;cursor:pointer;padding:0 0 6px;
  color:rgba(232,238,246,.62);font:inherit;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;
}
.pl486-back:hover,.pl486-back:focus-visible{color:#e9b949;outline:none}

/* Die Einträge selbst. Bewusst groß und flach - ein Startmenü liest man aus
   zwei Metern Abstand, nicht aus dreißig Zentimetern. */
.pl486-items{display:grid;gap:8px;max-width:640px}
.pl486-item{
  display:grid;gap:2px;justify-items:start;text-align:left;
  padding:clamp(11px,1.3vh,17px) clamp(14px,1.4vw,22px);
  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid rgba(255,255,255,.10);
  background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  color:#eef3fa;cursor:pointer;font:inherit;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.pl486-item b{font-size:clamp(15px,1.25vw,20px);font-weight:700;letter-spacing:.005em}
.pl486-item small{font-size:clamp(11px,.74vw,13px);color:rgba(206,216,229,.66)}

.pl486-item:hover:not([disabled]),
.pl486-item:focus-visible:not([disabled]){
  outline:none;
  border-color:rgba(233,185,73,.42);
  border-left-color:#e9b949;
  background:linear-gradient(90deg,rgba(233,185,73,.13),rgba(233,185,73,.02));
  transform:translateX(3px);
}
.pl486-item--gold{border-left-color:rgba(233,185,73,.62)}
.pl486-item--gold b{color:#f6dfa8}

.pl486-item[disabled]{
  opacity:.42;cursor:not-allowed;
  border-left-color:rgba(255,255,255,.06);
}

.pl486-note{
  max-width:640px;padding:12px 16px;
  border:1px solid rgba(120,160,210,.22);
  background:rgba(38,60,90,.20);
}
.pl486-note b{display:block;color:#a8c6ea;font-size:13px;margin-bottom:4px}
.pl486-note p{margin:0;font-size:12.5px;line-height:1.55;color:rgba(206,216,229,.76)}

.pl486-foot{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(232,238,246,.28);
}

/* Kleine Fenster: Logo und Fußzeile treten zurück, die Einträge bleiben groß. */
/* C221 Punkt 14 (Auftraggeber 15.09.): gemessen bei 1280x760 lief der Eintrag "Beenden" 25 Bildpunkte in die
   Fusszeile. Die Regel griff erst bei 640 und versteckte dabei die Fusszeile - damit waeren die Steuerungshinweise
   ganz weg, die der Auftraggeber lesen soll. Ab 820 wird stattdessen das Wappen kleiner und die Eintraege ruecken
   zusammen; erst unter 640 verschwindet die Fusszeile. */
@media (max-height:820px){
  .pl486-logo{width:min(200px,32vw)}
  .pl486-brand{gap:4px}
  .pl486-item{padding:9px 14px}
}
@media (max-height:640px){
  .pl486-foot{display:none}
}
@media (max-width:560px){
  .pl486-items{max-width:none}
  .pl486-shell{padding:18px}
}

@media (prefers-reduced-motion:reduce){
  #pl486Menu,#pl486Intro,.pl486-layer,.pl486-intro-inner img,
  .pl486-intro-inner p,.pl486-intro-skip{animation:none}
  .pl486-item{transition:none}
  .pl486-item:hover:not([disabled]),
  .pl486-item:focus-visible:not([disabled]){transform:none}
}

/* Nachtrag zum Logo. `screen` lässt Schwarz verschwinden, der Hintergrund der
   Bilddatei ist aber kein reines Schwarz, sondern ein dunkles Marineblau -
   davon blieb ein schwach sichtbares Quadrat stehen. Die äußeren zwölf Prozent
   werden deshalb ausgefedert. Das Wappen selbst reicht nicht so weit nach
   außen, es wird also nicht angeschnitten; aus der harten Kante wird ein
   Schimmer.
   Saubere Alternative für später: die Bilddatei einmalig mit transparentem
   Hintergrund erzeugen. Dann kann beides hier entfallen. */
.pl486-logo,.pl486-intro-inner img{
  -webkit-mask-image:radial-gradient(closest-side,#000 86%,rgba(0,0,0,.45) 95%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 86%,rgba(0,0,0,.45) 95%,transparent 100%);
}