/* TELACY ESPORTS — Lore, Ankuendigungsseite (05.10.2026)
   Eigene Seite ohne Kopfleiste und Footer: eine Galaxie fuellt das Fenster
   (Canvas, assets/lore.js), darauf Zeichen, Wort und ein Satz. */
html:has(body.lore){background:#08070d}
body.lore{margin:0;min-height:100vh;min-height:100dvh;background:#08070d;color:#fff;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
#lore-himmel{position:fixed;inset:0;width:100%;height:100%;display:block}
/* Schleier: Mitte abdunkeln, damit der Text immer lesbar bleibt, Rand ins Schwarze. */
.lore-schleier{position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 40% 30% at 50% 52%,rgba(8,7,13,.2),rgba(8,7,13,.08) 60%,transparent 100%),
    radial-gradient(ellipse 130% 110% at 50% 50%,transparent 62%,rgba(8,7,13,.8) 100%)}

/* Der Sprachschalter von i18n.js (oben rechts) entfaellt, unten steht ein eigener. */
body.lore .langsw{display:none!important}
.lore-zurueck{position:fixed;top:22px;left:24px;z-index:3;width:40px;height:40px;display:block;opacity:.6;transition:opacity .25s,transform .25s}
.lore-zurueck:hover,.lore-zurueck:focus-visible{opacity:1;transform:scale(1.06)}
.lore-zurueck img{width:100%;height:100%;display:block}

.lore-mitte{position:relative;z-index:2;text-align:center;padding:96px 24px;max-width:860px;
  display:flex;flex-direction:column;align-items:center}
.lore-zeichen{width:112px;height:112px;filter:drop-shadow(0 0 34px rgba(120,64,224,.75)) drop-shadow(0 0 90px rgba(120,64,224,.35));
  animation:lore-schweben 7s ease-in-out infinite}
.lore-kicker{margin:0;font:600 12px/1 'Chakra Petch',sans-serif;letter-spacing:.42em;text-transform:uppercase;
  color:#C9CED6;padding-left:.42em}
body.lore h1{margin:18px 0 0;font:700 clamp(4.2rem,17vw,11.5rem)/.9 'Chakra Petch',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;padding-left:.14em;color:#fff;
  background:linear-gradient(180deg,#fff 20%,#d9c9ff 62%,#7840E0 118%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 42px rgba(120,64,224,.45))}
.lore-satz{margin:30px 0 0;max-width:34ch;font:400 clamp(1.05rem,2.3vw,1.4rem)/1.55 Barlow,sans-serif;color:rgba(255,255,255,.82);text-wrap:balance}

.lore-mitte > *{opacity:0;transform:translateY(14px);animation:lore-auf 1.4s cubic-bezier(.2,.7,.2,1) forwards}
.lore-mitte > .lore-zeichen{animation:lore-auf 1.6s cubic-bezier(.2,.7,.2,1) forwards,lore-schweben 7s ease-in-out 1.6s infinite}
.lore-mitte > .lore-kicker{animation-delay:.5s}
.lore-mitte > h1{animation-delay:.8s}
.lore-mitte > .lore-satz{animation-delay:1.5s}
@keyframes lore-auf{to{opacity:1;transform:none}}
@keyframes lore-schweben{0%,100%{translate:0 0}50%{translate:0 -8px}}

.lore-fuss{position:fixed;left:0;right:0;bottom:14px;z-index:3;display:flex;gap:18px;justify-content:center;align-items:center;
  font:400 11px/1 Barlow,sans-serif;letter-spacing:.06em;color:rgba(255,255,255,.4)}
.lore-fuss a{color:inherit;text-decoration:none;padding:6px 2px}
.lore-fuss a:hover,.lore-fuss a:focus-visible{color:#fff}
.lore-sprache{display:inline-flex;gap:2px}
.lore-sprache button{appearance:none;background:none;border:0;color:inherit;font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;
  padding:6px 5px;cursor:pointer}
.lore-sprache button:hover,.lore-sprache button:focus-visible{color:#fff}
.lore-sprache button[aria-pressed="true"]{color:#C9CED6}

@media (max-width:560px){
  .lore-zurueck{top:16px;left:16px;width:34px;height:34px}
  .lore-zeichen{width:84px;height:84px}
  .lore-kicker{font-size:10.5px;letter-spacing:.3em;padding-left:.3em}
  .lore-mitte{padding:80px 20px}
}
/* Niedrige Fenster (Handy quer): alles enger, damit nichts hinter dem Fuss liegt. */
@media (max-height:560px){
  body.lore{overflow-y:auto}
  .lore-zeichen{width:60px;height:60px}
  .lore-kicker{margin-top:16px}
  body.lore h1{font-size:clamp(3rem,22vh,6rem)}
  .lore-satz{margin-top:14px;font-size:1rem}
  .lore-mitte{padding:56px 20px 48px}
}
@media (prefers-reduced-motion:reduce){
  .lore-mitte > *,.lore-mitte > .lore-zeichen{animation:none;opacity:1;transform:none}
}