/* Farb-Variablen */
:root {
  --bg: #10141A;
  --panel: #141C26;
  --border: #22303C;
  --primary: #0AF2FF;
  --accent: #FF005C;
  --text: #E9EEF2;
  --muted: #8293A1;
}
html,body { margin:0; padding:0; font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); }
* { box-sizing: border-box; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Intro */
.intro-body { min-height:100dvh; display:grid; place-items:center; overflow:hidden; }
.skip-link { position:fixed; top:.5rem; left:.5rem; background:var(--panel); padding:.4rem .7rem; font-size:.7rem; border:1px solid var(--border); border-radius:6px; }
.intro-stage { position:relative; text-align:center; padding:2rem; }
.intro-text { font-size:clamp(1.9rem,6vw,3.8rem); font-weight:600; line-height:1.1; transform:scale(.2); animation:scaleIn .9s cubic-bezier(.25,.9,.35,1) forwards; position:relative; color:transparent; font-variant-ligatures:none; }
.intro-text.outline { animation:none; transform:scale(1); }
.intro-text span { color: inherit; }
@keyframes scaleIn { to { transform:scale(1); } }
.intro-text::before, .intro-text::after { content:attr(data-text); position:absolute; inset:0; pointer-events:none; white-space:nowrap; overflow:visible; display:inline-block; width:100%; }
.intro-text::before { color:var(--text); mix-blend-mode:normal; left:0; border-right:2px solid var(--primary); clip-path:inset(0 100% 0 0); animation:introTypeClip 2.4s steps(30, end) .1s forwards, caret .9s step-end infinite, stopCaret 0s 2.5s forwards; }
.intro-text::after { display:none; }
@keyframes introTypeClip { to { clip-path:inset(0 0 0 0); } }
@keyframes stopCaret { to { border-right:none; } }
/* Umriss nach Klick */
.intro-text.outline::before { border-right-color: transparent; text-shadow: 0 0 0 #0AF2FF, 1px 0 0 #0AF2FF, -1px 0 0 #0AF2FF, 0 1px 0 #0AF2FF, 0 -1px 0 #0AF2FF; }
/* Textwechsel-Animationen */
.intro-text.text-static { opacity:1; transform:none; }
.intro-text.text-fade { animation: fadeInText .6s ease !important; opacity:1; }
@keyframes fadeInText { from { opacity:.2; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes glitch { 0%,95%,100% { clip-path:inset(0); } 15% { clip-path:inset(40% 0 5% 0); } 25% { clip-path:inset(10% 0 50% 0); } 35% { clip-path:inset(80% 0 2% 0); } 45% { clip-path:inset(50% 0 20% 0); } }
.cursor-bubble { opacity:0; margin-top:2.2rem; background:var(--panel); border:1px solid var(--border); color:var(--text); font-size:1.1rem; padding:.65rem 1.2rem; border-radius:11px; box-shadow:0 0 16px #0AF2FF55; cursor:pointer; transform:scale(.85); transition:background .25s, transform .25s; }
.cursor-bubble.show { animation:fadeIn .45s ease forwards; }
.cursor-bubble:hover { background:#182231; transform:scale(.9); }
@keyframes fadeIn { to { opacity:1; transform:scale(1); } }

/* Layout */
.site-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem; background:var(--panel); border-bottom:1px solid var(--border); }
.logo-wrap { display:flex; align-items:center; gap:.6rem; }
.logo-img { height:40px; width:auto; }
.logo { margin:0; font-size:1.2rem; letter-spacing:.05em; }
.nav { list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
.nav a { font-size:.9rem; text-transform:uppercase; letter-spacing:.05em; }
.content { max-width:1280px; margin:2rem auto; padding:0 1.25rem 3rem; }
.wide-panel { margin-left:calc(-1.25rem); margin-right:calc(-1.25rem); padding-left:1.6rem; padding-right:1.6rem; }
.layout { display:grid; grid-template-columns: minmax(0,1fr) 300px; gap:2rem; align-items:start; }
.main-col { display:flex; flex-direction:column; gap:2.2rem; }
.sidebar { position:relative; background:var(--panel); border:1px solid var(--border); padding:1.1rem 1rem 1.4rem; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.4); display:flex; flex-direction:column; gap:1.2rem; }
.sidebar h2 { margin:0 0 .5rem; font-size:1.15rem; letter-spacing:.05em; }
.staff-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; font-size:.8rem; line-height:1.35; }
.staff-list li { background:#121a23; border:1px solid #1d2a34; padding:.55rem .6rem; border-radius:8px; }
.staff-list strong { color:var(--primary); font-weight:600; }
.sidebar-cta { margin-top:auto; }
.open-tag { display:inline-block; font-size:.55rem; padding:.15rem .45rem; background:#0b1822; border:1px solid #173544; color:#0AF2FF; border-radius:6px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; box-shadow:0 0 0 0 rgba(10,242,255,.25); }
/* Optional: sanfter, einmaliger Glow beim ersten Sichtbarwerden */
.reveal-visible .open-tag { animation: tagPulse 2.2s ease-in-out 1 forwards; will-change: box-shadow; }
@keyframes tagPulse { 0% { box-shadow:0 0 0 0 rgba(10,242,255,.25);} 60% { box-shadow:0 0 10px 4px rgba(10,242,255,.35);} 100% { box-shadow:0 0 0 0 rgba(10,242,255,.25);} }
@media (prefers-reduced-motion: reduce){ .reveal-visible .open-tag { animation:none; } }
.hero { position:relative; background:linear-gradient(135deg,#182231,#10141A 60%); padding:2.5rem 1.5rem; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.hero-text h2 { margin:0 0 .5rem; font-size:2rem; }
.hero-text p { margin:.25rem 0 0; color:var(--muted); }
#home-title { margin-top:.35rem; }
.welcome-typing { margin:0 0 .35rem; color:var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space:nowrap; overflow:hidden; border-right:2px solid var(--primary); width:0; letter-spacing:.02em; animation: typing 2.6s steps(32, end) .2s forwards, caret .9s step-end infinite; }
@keyframes typing { to { width:32ch; } }
@keyframes caret { 50% { border-color: transparent; } }
#boostTrail { position:absolute; inset:0; width:100%; height:100%; }
.contacts { margin-top:2.5rem; }
.cta-row { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem; }
.btn { display:inline-block; background:var(--panel); color:var(--text); border:1px solid var(--border); padding:.65rem 1rem; border-radius:10px; font-weight:600; letter-spacing:.02em; box-shadow:0 6px 16px rgba(0,0,0,.35); transition:transform .2s ease, background .2s ease, box-shadow .2s ease; }
.btn:hover { background:#182231; transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.4); }
.btn.primary { background:linear-gradient(135deg, #0AF2FF, #00B8D9); color:#001015; border-color:transparent; box-shadow:0 10px 30px rgba(10,242,255,.25); }
.btn.primary:hover { filter:saturate(1.05); }
.link-list { list-style:none; margin:0; padding:0; display:flex; gap:1.2rem; flex-wrap:wrap; }
.link-list a { background:var(--panel); padding:.6rem .9rem; border:1px solid var(--border); border-radius:8px; font-size:.85rem; letter-spacing:.04em; box-shadow:0 4px 14px rgba(0,0,0,0.4); }
.link-list a:hover { background:#182231; }
.site-footer { text-align:center; padding:1.5rem; font-size:.7rem; color:var(--muted); }

/* Hinweis/Callout */
.callout.notice { position:relative; background:linear-gradient(180deg,#141C26,#10141A); border:1px solid var(--border); border-radius:14px; padding:1rem 1.25rem; margin:0 0 1.5rem; overflow:hidden; }
.badge { display:inline-block; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; padding:.2rem .5rem; border-radius:6px; border:1px solid var(--border); background:#0e1621; color:var(--muted); }
.badge.pulse { border-color:#0AF2FF66; color:#0AF2FF; animation:pulseGlow 1.8s ease-in-out infinite; }
@keyframes pulseGlow { 0%,100% { box-shadow:0 0 0 0 rgba(10,242,255,.25);} 50% { box-shadow:0 0 10px 4px rgba(10,242,255,.35);} }

/* Feature Cards */
.grid-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1rem; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:1rem; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.35); border-color:#1f3a4a; }

/* Ranks */
.ranks { background:var(--panel); border:1px solid var(--border); padding:1.4rem 2.2rem 1.6rem; border-radius:18px; max-width:unset; width:100%; box-sizing:border-box; }
.ranks h2 { margin:0 0 .4rem; font-size:1.4rem; }
.ranks-sub { margin:.2rem 0 1rem; color:var(--muted); font-size:.85rem; letter-spacing:.03em; }
.ranks-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:1rem; margin-left:-1.2rem; margin-right:-1.2rem; }
.rank-item { background:linear-gradient(180deg,#141c26,#10141a); border:1px solid #233444; border-radius:22px; padding:1.1rem 1.2rem 1.2rem; text-align:center; position:relative; font-size:.8rem; letter-spacing:.03em; display:flex; flex-direction:column; align-items:center; gap:.55rem; min-height:120px; max-width:180px; width:100%; box-sizing:border-box; }
.rank-item::before { content:""; position:absolute; inset:8px 8px 8px 8px; border-radius:18px; background:radial-gradient(circle at 50% 40%, rgba(10,242,255,.18), transparent 70%); opacity:.38; pointer-events:none; }
.rank-item img { width:72px; height:72px; object-fit:contain; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)); transition:transform .35s cubic-bezier(.25,.9,.35,1), filter .35s ease; }
.rank-item:hover img { transform:translateY(-4px) scale(1.06); filter:drop-shadow(0 8px 18px rgba(0,0,0,.65)); }
.rank-item figcaption { color:var(--text); font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.rank-item.img-missing { background:#2a0d14; border-color:#5c1220; }
.rank-item.img-missing figcaption { color:#ffb3c7; }

/* Icon Grids (Rewards & Titles) */
.icon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:1rem; }
.icon-item { background:#121a23; border:1px solid #263848; border-radius:12px; padding:.6rem .5rem .75rem; text-align:center; font-size:.65rem; display:flex; flex-direction:column; align-items:center; gap:.45rem; min-height:150px; position:relative; }
.icon-item::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 50% 18%, rgba(255,0,92,.14), transparent 65%); opacity:.45; pointer-events:none; }
.icon-item img { width:70px; height:70px; object-fit:contain; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)); transition:transform .35s cubic-bezier(.25,.9,.35,1), filter .35s ease; }
.icon-item:hover img { transform:translateY(-4px) scale(1.06); filter:drop-shadow(0 8px 18px rgba(0,0,0,.65)); }
.icon-item figcaption { color:var(--text); font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.rewards, .tournaments { background:var(--panel); border:1px solid var(--border); padding:1.4rem 1.2rem 1.6rem; border-radius:14px; }
.rewards h2, .tournaments h2 { margin:0 0 .4rem; font-size:1.25rem; }

/* Scrims */
.scrim-wrap { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:1.4rem 1.3rem 1.8rem; margin:0 0 2rem; }
.scrim-wrap h1 { margin:0 0 .6rem; font-size:1.55rem; }
.scrim-form { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:.8rem; }
.scrim-form .field { display:flex; flex-direction:column; gap:.35rem; }
.scrim-form label { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.scrim-form input[type=text], .scrim-form input[type=datetime-local], .scrim-form select, .scrim-form textarea { background:#121a23; border:1px solid #1d2a34; color:var(--text); padding:.55rem .6rem; border-radius:8px; font-size:.8rem; font-family:inherit; resize:vertical; min-height:42px; }
.scrim-form textarea { min-height:92px; }
.scrim-actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.5rem; }
.scrim-actions .btn { font-size:.75rem; }
.scrim-filter { background:#121a23; border:1px solid #1d2a34; padding:.75rem .9rem; border-radius:10px; display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin:1.2rem 0 1.4rem; }
.scrim-filter label { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); display:block; margin-bottom:.25rem; }
.scrim-list { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.scrim-card { background:#141e29; border:1px solid #233444; border-radius:14px; padding:.85rem .85rem 1rem; display:flex; flex-direction:column; gap:.55rem; position:relative; overflow:hidden; }
.scrim-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%, rgba(10,242,255,.18), transparent 70%); pointer-events:none; }
.scrim-meta { display:flex; flex-wrap:wrap; gap:.35rem .6rem; font-size:.6rem; letter-spacing:.05em; }
.scrim-tag { background:#0e1621; border:1px solid #1d3644; padding:.25rem .5rem; border-radius:6px; font-weight:600; font-size:.55rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.scrim-rank { color:var(--primary); font-weight:600; font-size:.7rem; }
.scrim-contact { font-size:.7rem; word-break:break-all; }
.scrim-notes { font-size:.65rem; color:var(--muted); line-height:1.4; }
.empty-note { font-size:.7rem; opacity:.6; }
.export-box { margin-top:1.2rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.export-box .btn { font-size:.65rem; }
.danger-btn { background:#311018; border-color:#5c1428; color:#ff477e; }
.danger-btn:hover { background:#421623; }
.scrim-hint { font-size:.6rem; color:var(--muted); margin-top:.4rem; }
.scrim-warning { font-size:.6rem; background:#2a0d14; border:1px solid #5c1220; padding:.5rem .6rem; border-radius:8px; color:#ffb3c7; margin-top:1rem; }
@media (max-width:780px){ .scrim-list { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .scrim-list { grid-template-columns:1fr; } }

/* Legal Shared */
.impressum, .templated { animation:fadeLegal .5s ease; }
@keyframes fadeLegal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Reveal on scroll */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.reveal-visible { opacity:1; transform:translateY(0); }

/* Responsive */
@media (max-width: 780px) {
  .nav { flex-wrap:wrap; }
  .hero { padding:2rem 1.1rem; }
  .intro-text { font-size:clamp(1.8rem,10vw,3.2rem); }
  .logo-img { height:34px; }
  .grid-cards { grid-template-columns:1fr 1fr; }
  .layout { grid-template-columns:1fr; }
  .sidebar { order:2; }
  .ranks-grid { grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); }
  .icon-grid { grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); }
  .welcome-typing { animation: typing-sm 2.4s steps(28, end) .2s forwards, caret .9s step-end infinite; }
  @keyframes typing-sm { to { width:28ch; } }
}
@media (max-width: 480px) {
  .nav { gap:.6rem; }
  .link-list { flex-direction:column; }
  .cursor-bubble { font-size:1rem; }
  .grid-cards { grid-template-columns:1fr; }
  .ranks-grid { grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); }
  .ranks-grid { grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); }
  .icon-grid { grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); }
}