/* Vorstellungsseite und Konto-Seite. Grundfarben, Knöpfe und Glas-Flächen kommen aus theme.css. */
body{line-height:1.5}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
section{scroll-margin-top:80px}

/* Navigation */
.nav{position:sticky;top:0;z-index:10;padding-top:env(safe-area-inset-top,0px);
  background:linear-gradient(180deg,rgba(10,8,34,.85),rgba(10,8,34,.55));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--stroke)}
.nav .wrap{display:flex;align-items:center;gap:8px;height:64px}
.nav .logo{margin-right:auto;font-size:24px}
.nav-links{display:flex;gap:4px}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:800;font-size:14px;padding:8px 10px;border-radius:10px}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.nav .btn{flex:none;font-size:16px;padding:11px 16px 9px}

/* Hero */
.hero{padding:56px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(46px,8vw,92px)}
.hero .lede{font-size:18px;margin-top:18px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.cta .btn{flex:0 0 auto;font-size:20px;padding:16px 26px 13px}
.facts{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;color:var(--muted);font-weight:800;font-size:14px}
.facts span{display:inline-flex;align-items:center;gap:6px}
.facts b{color:var(--ink);font-family:var(--f-display);font-weight:400;font-size:20px;letter-spacing:.02em}
.stage{position:relative;aspect-ratio:1;border-radius:32px;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,#3a2f96,#1b1650 60%,#100d2e);box-shadow:0 0 0 1px var(--stroke),0 40px 100px -40px rgba(0,0,0,.9),0 0 140px -40px rgba(178,139,255,.55)}
.stage svg.wheel{position:absolute;inset:0;width:100%;height:100%}
.stage .wheel-rot{transform-origin:200px 170px;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.crew{position:absolute;left:0;right:0;bottom:7%;display:flex;justify-content:center;gap:4%}
.crew span{display:block;width:17%;animation:bounce 2.4s ease-in-out infinite}
.crew span:nth-child(2){animation-delay:.3s}.crew span:nth-child(3){animation-delay:.6s}.crew span:nth-child(4){animation-delay:.9s}
.crew svg{width:100%;height:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10%)}}

/* Abschnitte */
.sec{padding:64px 0}
.sec-head{max-width:640px;margin-bottom:28px}
.sec-head h2{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,5vw,44px);line-height:1;margin:8px 0 10px;color:var(--ink)}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.tile{padding:20px;border-radius:var(--r-lg)}
.tile h3{font-family:var(--f-display);font-weight:400;font-size:21px;letter-spacing:.02em;margin:12px 0 6px;line-height:1.1}
.tile p{margin:0;color:var(--muted);font-size:14.5px}
.num{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-family:var(--f-display);font-size:20px;color:var(--night);background:linear-gradient(180deg,var(--lantern-2),var(--lantern))}
.dot{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-size:20px;color:var(--night);box-shadow:0 0 22px -2px currentColor}
.dot svg{width:24px;height:24px}
.tag{display:inline-block;margin-top:10px;font-size:12px;font-weight:900;letter-spacing:.06em;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--ink)}
.crew-card{text-align:center;padding:22px 16px;position:relative;overflow:hidden}
.crew-card::before{content:"";position:absolute;inset:auto -20% 55% -20%;height:70%;background:radial-gradient(closest-side,var(--cc),transparent);opacity:.28}
.crew-card svg{width:96px;height:96px;position:relative;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}
.crew-card h3{color:var(--cc)}
.events{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ev{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md)}
.ev b{display:block;font-weight:900}
.ev span{color:var(--muted);font-size:14px}
.ev i{font-style:normal;font-size:22px;line-height:1}
.finale{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.callout{padding:28px;border-radius:var(--r-lg);display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(255,201,74,.18),rgba(178,139,255,.14) 50%,rgba(60,208,180,.14));border:1px solid rgba(255,201,74,.3)}
.callout h2{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,4vw,38px);margin:0;line-height:1.05}
.callout .btn{flex:0 0 auto}

/* Bestenliste */
.board-list{padding:8px;border-radius:var(--r-lg)}
.lb-row{display:grid;grid-template-columns:36px 34px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r-sm);font-weight:900;font-variant-numeric:tabular-nums}
.lb-row+.lb-row{border-top:1px solid var(--stroke)}
.lb-row .pl{font-family:var(--f-display);font-size:20px;color:var(--muted)}
.lb-row:first-child .pl{color:var(--lantern)}
.lb-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row > span:not(.nm){display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.lb-row small{color:var(--muted);font-weight:800}
.lb-empty{padding:18px;color:var(--muted);text-align:center;margin:0}

footer{padding:40px 0 calc(env(safe-area-inset-bottom,0px) + 40px);color:var(--faint);font-size:13px;border-top:1px solid var(--stroke);margin-top:30px}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

/* Konto-Seite */
.acc-main{max-width:560px;margin:0 auto;padding:36px 16px 60px;display:flex;flex-direction:column;gap:16px}
.acc-card{padding:24px 20px;display:flex;flex-direction:column;gap:16px}
.tabs{display:flex;background:rgba(10,8,34,.5);border:1px solid var(--stroke);border-radius:14px;padding:4px;gap:4px}
.tabs button{flex:1;border:0;background:transparent;border-radius:10px;padding:10px 6px;font-weight:900;color:var(--muted)}
.tabs button[aria-selected="true"]{background:linear-gradient(180deg,var(--lantern-2),var(--lantern));color:var(--night)}
form{display:flex;flex-direction:column;gap:12px;margin:0}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:900;color:var(--muted)}
.msg{margin:0;padding:10px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:800}
.msg.err{background:rgba(255,107,94,.14);border:1px solid rgba(255,107,94,.4);color:#ffb3aa}
.msg.ok{background:rgba(60,208,180,.12);border:1px solid rgba(60,208,180,.4);color:#9df0dc}
.pick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pick button{background:rgba(10,8,34,.45);border:1.5px solid var(--stroke);border-radius:var(--r-md);padding:8px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:900;font-size:13px}
.pick button[aria-pressed="true"]{border-color:var(--lantern);box-shadow:0 0 0 3px rgba(255,201,74,.2)}
.pick svg{width:46px;height:46px}
.me{display:flex;align-items:center;gap:14px}
.me svg{width:68px;height:68px;flex:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.me h1{font-family:var(--f-display);font-weight:400;font-size:30px;margin:0;line-height:1}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stat{background:rgba(10,8,34,.45);border:1px solid var(--stroke);border-radius:var(--r-md);padding:12px 8px;text-align:center}
.stat b{display:block;font-family:var(--f-display);font-weight:400;font-size:26px;color:var(--lantern);line-height:1.1}
.stat span{font-size:12px;color:var(--muted);font-weight:800}
.hist{display:flex;flex-direction:column;gap:6px;font-size:14px}
.hist div{display:flex;justify-content:space-between;gap:10px;background:rgba(10,8,34,.4);border-radius:10px;padding:8px 12px}
.row-btns{display:flex;gap:8px;flex-wrap:wrap}
details summary{cursor:pointer;font-weight:900;color:var(--muted)}
details[open] summary{margin-bottom:12px}
.avatar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.avatar-row .btn{flex:0 0 auto;font-size:15px;padding:11px 16px 9px}
.file-btn{display:inline-flex;flex-direction:row;color:var(--ink);font-size:15px;cursor:pointer}
.btn.danger{background:var(--coral);box-shadow:0 4px 0 #b53d33;color:var(--night)}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .stage{max-width:460px;width:100%;margin:0 auto}
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.events{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-links{display:none}
}
@media (max-width:560px){
  .hero{padding-top:32px}
  .g3,.g4,.events,.finale{grid-template-columns:1fr}
  .g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav .wrap{gap:6px}
  .nav .logo{font-size:18px;gap:5px}
  .nav .logo svg{width:22px;height:22px}
  .nav .btn{font-size:14px;padding:10px 12px 8px}
  .nav .tbtn{padding:6px 10px;max-width:96px;overflow:hidden;text-overflow:ellipsis}
  .sec{padding:44px 0}
  .lb-row{grid-template-columns:28px 30px minmax(0,1fr) auto;gap:8px}
  .lb-row .st{display:none}
}
@media (prefers-reduced-motion:reduce){ .stage .wheel-rot,.crew span{animation:none} }
/* Textseiten (Datenschutz, Impressum) und kleine Links unter Formularen */
.legal{max-width:760px;margin:0 auto;padding:36px 16px 60px}
.legal h1{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,6vw,48px);line-height:1;margin:8px 0 18px}
.legal h2{font-family:var(--f-display);font-weight:400;font-size:22px;letter-spacing:.02em;margin:30px 0 8px;color:var(--lantern)}
.legal p,.legal li{color:var(--muted)}
.legal a{color:var(--ink)}
.legal .ph{background:rgba(255,201,74,.18);color:var(--ink);border-radius:6px;padding:0 4px}
.acc-lnk{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;font-weight:800;text-decoration:underline;cursor:pointer;padding:4px 0;align-self:flex-start}
.acc-fine{margin:0;color:var(--faint);font-size:12.5px}
.acc-fine a{color:var(--muted)}