/* Startscreen: animierter 3D-Hintergrund (eigener Läufer vor wechselnden Zonen) unter einem Schleier, Logo mit Tempolinien. */
.screen-menu { display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #1d2762, #070a18 70%); }
.menu-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.menu-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,10,24,.86) 0%, rgba(7,10,24,.55) 38%, rgba(7,10,24,.1) 62%, rgba(7,10,24,.25) 100%), linear-gradient(180deg, rgba(7,10,24,.5), transparent 30%, transparent 72%, rgba(7,10,24,.85)); }
.menu-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(12px, 3vh, 34px); padding: 12px clamp(18px, 7vw, 110px) 58px; width: 100%; height: 100%; }
.menu-foot { position: absolute; z-index: 6; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

.logo { display: flex; flex-direction: column; align-items: flex-start; }
.logo-kicker { font: 700 clamp(11px, 1.8vh, 15px) var(--font-ui); letter-spacing: .5em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; text-shadow: 0 0 12px rgba(45,226,255,.6); }
.logo-title { display: flex; align-items: baseline; margin: 0; font: 400 clamp(46px, min(12vh, 11vw), 138px)/1 var(--font-display); letter-spacing: .02em; transform: skewX(-9deg); transform-origin: left bottom; }
.lt { display: inline-block; filter: drop-shadow(0 4px 0 rgba(10,6,30,.9)) drop-shadow(0 0 26px rgba(255,138,42,.4)); animation: ltIn .8s var(--ease) both; }
.lt-run { background: linear-gradient(180deg, #fff3b0 0%, #ffc21a 42%, #ff6a1a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lt-a { background: linear-gradient(180deg, #ffd0f0 0%, #ff3d8b 55%, #b3125e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: .8em; animation-delay: .1s; margin: 0 .02em; }
.lt-way { background: linear-gradient(180deg, #d0fbff 0%, #2de2ff 48%, #1778e0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation-delay: .2s; }
.lt-dash { color: #f2f5ff; font-size: .55em; animation-delay: .05s; margin: 0 .02em; align-self: center; transform: translateY(-.08em); }
@keyframes ltIn { from { opacity: 0; transform: translateX(-.6em); filter: blur(8px); } }
.logo-speed { position: relative; width: min(60vw, 520px); height: 22px; margin-top: 6px; transform: skewX(-9deg); transform-origin: left; }
.logo-speed i { position: absolute; left: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--amber), var(--hot)); opacity: .9; animation: speedLine 1.6s linear infinite; }
.logo-speed i:nth-child(1) { top: 2px; width: 70%; animation-delay: 0s; } .logo-speed i:nth-child(2) { top: 8px; width: 48%; animation-delay: -.4s; background: linear-gradient(90deg, transparent, var(--cyan)); }
.logo-speed i:nth-child(3) { top: 14px; width: 62%; animation-delay: -.9s; background: linear-gradient(90deg, transparent, var(--magenta)); } .logo-speed i:nth-child(4) { top: 19px; width: 30%; animation-delay: -1.2s; }
@keyframes speedLine { from { transform: translateX(-30%); opacity: 0; } 25% { opacity: 1; } to { transform: translateX(40%); opacity: 0; } }
.tagline { margin-top: clamp(8px, 1.6vh, 16px); color: var(--text-2); font: 600 clamp(14px, 2.2vh, 19px) var(--font-ui); letter-spacing: .1em; text-transform: uppercase; max-width: min(92vw, 560px); text-shadow: 0 2px 10px #000; }

.menu-card { width: min(92vw, 470px); display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(22,30,72,.82), rgba(9,13,34,.9)); border: 1px solid var(--line-3); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 30px 70px -30px rgba(0,0,0,.9), 0 0 60px rgba(45,226,255,.1), inset 0 1px 0 rgba(255,255,255,.07); }
.menu-secondary { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.join-row { display: flex; gap: 8px; }
@media (max-width: 820px) { .menu-inner { align-items: center; padding-inline: 16px; } .logo { align-items: center; text-align: center; } .logo-title { transform-origin: center; } .menu-shade { background: linear-gradient(180deg, rgba(7,10,24,.7), rgba(7,10,24,.45) 40%, rgba(7,10,24,.85)); } }
@media (max-height: 700px) { .menu-card { padding: 14px; gap: 10px; } .input-lg { height: 46px; } .btn-xl { height: 50px; } }
@media (max-height: 560px) { .tagline { display: none; } .menu-card { flex-direction: row; flex-wrap: wrap; } }

.touch-note { margin-top: 10px; max-width: min(92vw, 520px); padding: 8px 14px; border-radius: 12px; background: rgba(255,61,139,.2); border: 1px solid var(--magenta); color: #ffdbe9; font: 600 15px var(--font-ui); }