/* =========================================================
   QuantumV — Design Tokens
   ========================================================= */
:root{
  --bg:            #08050d;
  --bg-alt:        #0e0918;
  --bg-alt-2:      #120c20;
  --violet-deep:   #2c1257;
  --violet:        #7c3aed;
  --violet-mid:    #9d5cf5;
  --violet-bright: #c9a6ff;
  --white:         #f6f4fb;
  --grey:          #948da3;
  --grey-dim:      #5f5a6d;
  --line:          rgba(246,244,251,0.09);
  --line-strong:   rgba(246,244,251,0.16);

  --font-display: 'Rajdhani', sans-serif;
  --font-body:    'Manrope', sans-serif;

  --container: 1180px;
  --radius: 2px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.01em;
}

p{ margin: 0 0 1em; color: var(--grey); max-width: 62ch; }

a{ color: inherit; text-decoration: none; }

img{ max-width: 100%; display: block; }

.accent{ color: var(--violet-mid); }

.section-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* subtle grain so flat dark areas don't look banded */
.noise-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

:focus-visible{
  outline: 2px solid var(--violet-bright);
  outline-offset: 3px;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  background: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn-solid{
  background: var(--violet);
  color: var(--white);
}
.btn-solid:hover{ background: var(--violet-mid); }

.btn-outline{
  border-color: var(--line-strong);
  color: var(--white);
}
.btn-outline:hover{ border-color: var(--violet-mid); color: var(--violet-bright); }

.btn-ghost{
  border-color: var(--line);
  color: var(--grey);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
}
.btn-ghost:hover{ border-color: var(--violet-mid); color: var(--white); }

.btn-large{ padding: 15px 26px; font-size: 1.05rem; }

.btn .ip-copy-label{
  color: var(--violet-bright);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
}
.btn-ghost .ip-copy-label{ display: none; }
.btn-solid .ip-copy-label{ color: rgba(246,244,251,0.75); }

.btn.copied .ip-copy-label::before{ content: "Kopiert ✓ "; }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(8,5,13,0.9), rgba(8,5,13,0));
  backdrop-filter: blur(6px);
}

.header-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand-mark{ width: 30px; height: 30px; object-fit: contain; }
.brand-word{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.main-nav{
  display: flex;
  gap: 22px;
  flex: 1;
  min-width: 0;
}
.main-nav a{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--grey);
  transition: color 0.2s ease;
  position: relative;
  white-space: nowrap;
}
.main-nav a:hover{ color: var(--white); }

.header-actions{
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-left: auto;
}
.nav-toggle span{
  display: block;
  height: 2px;
  background: var(--white);
  width: 100%;
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #150a28 0%, var(--bg) 62%);
}

#warp-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-vignette{
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 30%, var(--bg) 88%);
  pointer-events: none;
}

.hero-content{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 140px 24px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-logo{
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 40px rgba(124,58,237,0.55));
  animation: hero-materialize 1.1s cubic-bezier(0.16,1,0.3,1) both;
}

.hero-title{
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  animation: hero-materialize 1.1s 0.12s cubic-bezier(0.16,1,0.3,1) both;
}

.hero-sub{
  max-width: 56ch;
  margin: 20px auto 36px;
  font-size: 1.05rem;
  color: var(--grey);
  animation: hero-materialize 1.1s 0.22s cubic-bezier(0.16,1,0.3,1) both;
}

.hero-actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  animation: hero-materialize 1.1s 0.32s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes hero-materialize{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

.hero-stats{
  display: flex;
  gap: 44px;
  margin: 52px 0 0;
  animation: hero-materialize 1.1s 0.42s cubic-bezier(0.16,1,0.3,1) both;
}
.stat{ text-align: center; }
.stat dt{
  font-size: 0.72rem;
  color: var(--grey-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}
.stat dd{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
}
.status-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ee08a;
  box-shadow: 0 0 8px #4ee08a;
}

.scroll-cue{
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  z-index: 2;
}
.scroll-cue span{
  position: absolute;
  top: 7px; left: 50%;
  width: 3px; height: 8px;
  margin-left: -1.5px;
  background: var(--violet-bright);
  border-radius: 2px;
  animation: scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot{
  0%{ opacity: 1; transform: translateY(0); }
  70%{ opacity: 0; transform: translateY(10px); }
  100%{ opacity: 0; transform: translateY(0); }
}

/* =========================================================
   Generic section rhythm
   ========================================================= */
.section{
  padding: 120px 0;
  border-top: 1px solid var(--line);
}
.section:nth-of-type(even){ background: var(--bg-alt); }

.section h2{
  font-size: clamp(2rem, 4vw, 2.8rem);
}

.section-lead{
  margin-top: 10px;
  font-size: 1.05rem;
}

/* =========================================================
   Regeln
   ========================================================= */
.rules-grid{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
}

.rules-intro h2{ margin-bottom: 18px; }
.rules-intro{ position: sticky; top: 120px; align-self: start; }
.rules-note{ color: var(--grey-dim); font-size: 0.92rem; }

.rules-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.rule{
  display: flex;
  gap: 22px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.rule:first-child{ border-top: none; padding-top: 0; }

.rule-index{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--violet-mid);
  flex-shrink: 0;
  width: 34px;
}

.rule-body h3{
  font-size: 1.15rem;
  margin-bottom: 6px;
  color: var(--white);
}
.rule-body p{ margin: 0; font-size: 0.96rem; }

/* =========================================================
   Team / Partner / Streamer — card systems
   ========================================================= */
.team-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}

.team-card{
  background: var(--bg-alt-2);
  padding: 34px 24px;
  text-align: center;
  border-top: 2px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.team-card:hover{ border-top-color: var(--violet); background: #150e26; }

.team-avatar{
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--violet-bright);
}

.team-card h3{ font-size: 1.05rem; margin-bottom: 4px; }
.team-role{
  font-size: 0.8rem;
  color: var(--grey-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.team-card.placeholder{ opacity: 0.55; }
.team-card.placeholder .team-avatar{ color: var(--grey-dim); }

.partner-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.partner-card{
  background: var(--bg-alt-2);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-dim);
  font-family: var(--font-display);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.2s ease, background 0.2s ease;
}
.partner-card:hover{ color: var(--violet-bright); background: #150e26; }

.streamer-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.streamer-card{
  background: var(--bg-alt-2);
  padding: 30px 24px;
  border-left: 2px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.streamer-card:hover{ border-left-color: var(--violet); background: #150e26; }
.streamer-platform{
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--violet-mid);
  margin-bottom: 10px;
}
.streamer-card h3{ font-size: 1.05rem; color: var(--grey); }

/* =========================================================
   Galerie
   ========================================================= */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  gap: 10px;
  margin-top: 48px;
}
.gallery-tile{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-dim);
  font-size: 0.85rem;
  background: linear-gradient(135deg, #150e26, #0e0918);
  border: 1px solid var(--line);
}
.tile-a{ grid-column: span 2; grid-row: span 2; }
.tile-b{ grid-column: span 2; }
.tile-c{ grid-column: span 1; }
.tile-d{ grid-column: span 1; }
.tile-e{ grid-column: span 2; }

/* =========================================================
   Impressum
   ========================================================= */
.impressum-inner{ max-width: 720px; }
.impressum-block{ margin-bottom: 30px; }
.impressum-block h3{
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 8px;
}
.impressum-block p{ font-size: 0.95rem; }
.impressum-note{
  font-size: 0.85rem;
  color: var(--grey-dim);
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 10px;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 40px 0;
  background: var(--bg);
}
.footer-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-nav{ display: flex; gap: 20px; flex-wrap: wrap; }
.footer-nav a{ font-size: 0.85rem; color: var(--grey-dim); }
.footer-nav a:hover{ color: var(--white); }
.footer-copy{ margin: 0; font-size: 0.82rem; color: var(--grey-dim); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .main-nav{ display: none; }
  .nav-toggle{ display: flex; }
  .header-actions .btn-ghost{ display: none; }

  .rules-grid{ grid-template-columns: 1fr; gap: 32px; }
  .rules-intro{ position: static; }

  .team-grid, .streamer-grid{ grid-template-columns: repeat(2, 1fr); }
  .partner-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .tile-a{ grid-column: span 2; }
}

@media (max-width: 560px){
  .header-inner{ padding: 16px 20px; }
  .brand-word{ display: none; }
  .section{ padding: 80px 0; }
  .section-inner{ padding: 0 20px; }
  .hero-stats{ gap: 28px; }
  .team-grid, .streamer-grid, .partner-grid{ grid-template-columns: 1fr; }
  .footer-inner{ flex-direction: column; align-items: flex-start; }
}

/* Mobile nav drawer */
body.nav-open .main-nav{
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 68px; left: 0; right: 0;
  background: var(--bg-alt);
  padding: 20px 24px 28px;
  border-bottom: 1px solid var(--line);
  gap: 4px;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
}
body.nav-open .main-nav a{ padding: 10px 0; border-bottom: 1px solid var(--line); }
body.nav-open .nav-dropdown{ position: static; box-shadow: none; border: none; background: none; padding: 0 0 0 14px; margin-top: 4px; }
body.nav-open .nav-item.has-dropdown > a::after{ content: none; }

/* =========================================================
   Nav dropdown (Regelwerk hub)
   ========================================================= */
.nav-item{ position: relative; }
.nav-item.has-dropdown > a{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-item.has-dropdown > a::after{
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: 0.7;
}
.nav-dropdown{
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  min-width: 240px;
  background: var(--bg-alt-2);
  border: 1px solid var(--line-strong);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 50;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a{
  display: block;
  padding: 10px 12px;
  font-size: 0.88rem;
  color: var(--grey);
  border-radius: 1px;
}
.nav-dropdown a:hover{ background: rgba(124,58,237,0.12); color: var(--white); }

/* =========================================================
   Inner page hero (rules, team, etc.)
   ========================================================= */
.page-hero{
  padding: 168px 0 64px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 0%, #150a28 0%, var(--bg) 70%);
}
.page-hero .eyebrow-link{
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--violet-mid);
}
.page-hero h1{
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  margin-top: 10px;
}
.page-hero p{ margin-top: 14px; font-size: 1.02rem; }

.page-body{ padding: 80px 0 120px; }
.page-body .section-inner{ max-width: 880px; }

/* =========================================================
   Rule categories (accordion)
   ========================================================= */
.rule-cat{
  border: 1px solid var(--line);
  margin-bottom: 14px;
  background: var(--bg-alt-2);
}
.rule-cat > summary{
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rule-cat > summary::-webkit-details-marker{ display: none; }
.rule-cat > summary::after{
  content: "+";
  font-size: 1.3rem;
  color: var(--violet-mid);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.rule-cat[open] > summary::after{ transform: rotate(45deg); }
.rule-cat .rules-list{ padding: 0 24px 20px; }
.rule-cat .rule{ border-top: 1px solid var(--line); }
.rule-cat .rule:first-child{ border-top: 1px solid var(--line); padding-top: 26px; }
.rule-cat .rule-index{ font-size: 0.95rem; width: 56px; }

.rule-cat-intro{
  padding: 0 24px 18px;
  margin: 0;
  font-size: 0.92rem;
}

/* Plain bullet content (discord rules, roleplay guide, graphics tips) */
.quantum-list{
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
}
.quantum-list li{
  position: relative;
  padding-left: 22px;
  margin-bottom: 14px;
  color: var(--grey);
  font-size: 0.97rem;
}
.quantum-list li::before{
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 2px;
  background: var(--violet-mid);
}
.quantum-list.sub{ margin: 10px 0 18px; }

.page-body h2{
  font-size: 1.5rem;
  margin: 44px 0 16px;
}
.page-body h2:first-child{ margin-top: 0; }
.page-body h3{
  font-size: 1.1rem;
  color: var(--white);
  margin: 30px 0 10px;
}

.callout{
  border-left: 2px solid var(--violet);
  background: var(--bg-alt-2);
  padding: 18px 22px;
  margin: 24px 0;
  font-size: 0.95rem;
}
.callout p{ margin: 0; color: var(--grey); }

.spec-table{
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.92rem;
}
.spec-table td{
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--grey);
}
.spec-table td:first-child{ color: var(--white); width: 45%; }

/* =========================================================
   Quick-links grid (homepage)
   ========================================================= */
.quick-links-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  margin-top: 40px;
  border: 1px solid var(--line);
}
.quick-links-grid a{
  flex: 1 1 170px;
  background: var(--bg-alt-2);
  text-align: center;
  padding: 26px 14px;
  color: var(--grey);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  transition: color 0.2s ease, background 0.2s ease;
}
.quick-links-grid a:hover{ color: var(--violet-bright); background: #150e26; }

@media (max-width: 980px){
  .nav-dropdown{ display: none; }
}


/* =========================================================================
   MOTION & POLISH LAYER
   Bildsprache aus dem QuantumV-Intro: diagonale Lichtströme, Lichtstrahl,
   Chrom-Schriftzug, kurzer Glitch. Alles Bewegte respektiert
   prefers-reduced-motion (siehe Ende der Datei).
   ========================================================================= */

:root{
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --violet-glow: rgba(124,58,237,.45);
}
::selection{ background: rgba(124,58,237,.5); color: #fff; }
html{ scrollbar-color: #3b1a78 var(--bg); }

@keyframes fade-up{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: none; }
}
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes ping{
  0%{ transform: scale(1); opacity:.7; }
  100%{ transform: scale(3.4); opacity:0; }
}

/* ---------- Lichtstrom-Canvas ---------- */
.flow-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}

/* ---------- Seitenübergang ---------- */
.page-wipe{
  position:fixed; top:0; bottom:0; left:-200px;
  width: calc(100vw + 400px);
  z-index:2000;
  pointer-events:none;
  background: linear-gradient(90deg,
    #fff 0, #9d5cf5 4px, #3b1a78 42px, var(--bg) 110px,
    var(--bg) calc(100% - 110px), #3b1a78 calc(100% - 42px), #9d5cf5 calc(100% - 4px), #fff 100%);
  transform: translateX(0);
  animation: wipe-out .7s .04s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes wipe-out{
  from{ transform: translateX(0); }
  to{ transform: translateX(100%); }
}

/* ---------- Fortschrittsbalken & Toast ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:300;
  transform-origin:0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--violet), var(--violet-bright));
  box-shadow: 0 0 12px var(--violet);
  pointer-events:none;
}
.toast{
  position:fixed; left:50%; bottom:28px;
  z-index:400;
  transform: translate(-50%, 20px);
  opacity:0;
  padding: 12px 20px;
  background: rgba(18,12,32,.94);
  border: 1px solid rgba(157,92,245,.5);
  box-shadow: 0 12px 40px -10px var(--violet-glow);
  color: var(--white);
  font-size:.9rem;
  pointer-events:none;
  transition: opacity .3s ease, transform .4s var(--ease-out);
}
.toast.show{ opacity:1; transform: translate(-50%, 0); }

/* ---------- Header ---------- */
.site-header{
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;          /* sonst zeigt sich eine harte Kante über den Lichtströmen */
  transition: background .35s ease, border-color .35s ease;
}
.site-header.scrolled{
  background: rgba(8,5,13,.82);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.main-nav > a{
  padding-bottom: 4px;
  background: linear-gradient(var(--violet-mid), var(--violet-mid)) 0 100% / 0 2px no-repeat;
  transition: background-size .35s var(--ease-out), color .2s ease;
}
.main-nav > a:hover,
.main-nav > a[aria-current]{ background-size: 100% 2px; color: var(--white); }
.nav-item > a[aria-current]{ color: var(--white); }
.nav-dropdown a[aria-current]{ color: var(--violet-bright); }
.brand-mark{ transition: transform .5s var(--ease-out), filter .4s ease; }
.brand:hover .brand-mark{ transform: rotate(-8deg) scale(1.1); filter: drop-shadow(0 0 10px var(--violet-glow)); }

/* ---------- Buttons ---------- */
.btn{ position:relative; overflow:hidden; isolation:isolate; transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .3s ease, transform .2s ease; }
.btn-solid::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease-out);
}
.btn-solid:hover::before{ transform: translateX(120%); }
.btn-solid:hover{ box-shadow: 0 10px 34px -8px rgba(124,58,237,.8); transform: translateY(-1px); }
.btn-outline:hover{ box-shadow: 0 0 24px -6px var(--violet-glow); }
.btn:active{ transform: translateY(0) scale(.98); }

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(ellipse 70% 60% at 50% 22%, #1d0c38 0%, transparent 70%),
    var(--bg);
}
.hero-vignette{
  background:
    radial-gradient(ellipse 36% 46% at 50% 63%, rgba(8,5,13,.9) 0%, rgba(8,5,13,.74) 52%, transparent 100%),
    radial-gradient(ellipse 30% 30% at 50% 24%, rgba(8,5,13,.55) 0%, transparent 100%),
    radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(8,5,13,.82) 100%);
}

/* Lichtstrahl, in dem das V landet */
.hero-beam{
  position:absolute; top:0; left:0; right:0; height:78%;
  pointer-events:none;
  background:
    radial-gradient(ellipse 22% 16% at 50% 0%, rgba(255,255,255,.85), transparent 100%),
    conic-gradient(from 163deg at 50% 0%, transparent 0deg, rgba(235,224,255,.9) 17deg, transparent 34deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 28%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 28%, transparent 100%);
  filter: blur(5px);
  mix-blend-mode: screen;
  transform-origin: 50% 0;
  opacity:0;
  animation: beam 2.1s .45s var(--ease-out) forwards;
}
@keyframes beam{
  0%{ opacity:0; transform: scaleY(.15); }
  16%{ opacity:1; transform: scaleY(1); }
  100%{ opacity:.14; transform: scaleY(1); }
}

.hero-content{ padding-top: 128px; }

/* Logo + Orbit */
.logo-stack{
  position:relative;
  width: clamp(116px, 15vw, 164px);
  aspect-ratio: 1;
  margin: 0 auto 58px;
}
.logo-stack img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
}
.hero-logo{ animation:none; }  /* alter Einzel-Logo-Stil nicht mehr genutzt */
.logo-main{
  filter: drop-shadow(0 0 36px rgba(124,58,237,.55)) blur(0);
  animation:
    logo-drop 1.15s .78s var(--ease-out) both,
    logo-jitter .7s 2s steps(1,end) 1;
}
@keyframes logo-drop{
  0%{ opacity:0; transform: translateY(-84px) scale(1.2); filter: drop-shadow(0 0 90px rgba(255,255,255,.95)) blur(7px); }
  55%{ opacity:1; }
  100%{ opacity:1; transform:none; filter: drop-shadow(0 0 36px rgba(124,58,237,.55)) blur(0); }
}
@keyframes logo-jitter{
  0%{ transform: translate(3px,0) skewX(-5deg); }
  22%{ transform: translate(-4px,0); }
  44%{ transform: translate(2px,0) skewX(3deg); }
  66%{ transform: translate(-1px,0); }
  100%{ transform:none; }
}
.logo-ghost{ opacity:0; mix-blend-mode: screen; pointer-events:none; }
.logo-ghost.g1{ filter: hue-rotate(-40deg) saturate(2.2); animation: glitch-a .7s 2s steps(1,end) 1; }
.logo-ghost.g2{ filter: hue-rotate(70deg) saturate(2); animation: glitch-b .7s 2.03s steps(1,end) 1; }
@keyframes glitch-a{
  0%{ opacity:.95; transform: translate(-9px,0); clip-path: inset(8% 0 58% 0); }
  20%{ opacity:.95; transform: translate(7px,0); clip-path: inset(52% 0 14% 0); }
  40%{ opacity:.9; transform: translate(-5px,0); clip-path: inset(28% 0 40% 0); }
  60%{ opacity:.7; transform: translate(4px,0); clip-path: inset(66% 0 4% 0); }
  80%{ opacity:.45; transform: translate(-2px,0); clip-path: inset(0 0 70% 0); }
  100%{ opacity:0; }
}
@keyframes glitch-b{
  0%{ opacity:.85; transform: translate(8px,0); clip-path: inset(60% 0 8% 0); }
  25%{ opacity:.85; transform: translate(-7px,0); clip-path: inset(14% 0 52% 0); }
  50%{ opacity:.8; transform: translate(5px,0); clip-path: inset(40% 0 30% 0); }
  75%{ opacity:.5; transform: translate(-3px,0); clip-path: inset(2% 0 74% 0); }
  100%{ opacity:0; }
}

.orbit{
  position:absolute; left:50%; top:50%;
  width:178%; height:178%;
  margin: -89% 0 0 -89%;
  overflow:visible;
  opacity:0;
  animation: fade-in 1.6s 1.7s ease forwards;
  pointer-events:none;
}
.orbit circle, .orbit ellipse{
  fill:none;
  stroke: rgba(157,92,245,.3);
  stroke-width:1;
  vector-effect: non-scaling-stroke;
}
.orbit .electron{
  fill:#d9c2ff; stroke:none;
  filter: drop-shadow(0 0 6px #9d5cf5);
  vector-effect: none;
}
.orbit-a{ transform-origin:200px 200px; animation: spin 44s linear infinite; }
.orbit-b{ transform-origin:200px 200px; animation: spin 28s linear infinite reverse; }

/* Chrom-Schriftzug wie im Video */
.wordmark{
  display:flex; justify-content:center; flex-wrap:nowrap;
  margin:0;
  font-family:'Michroma', var(--font-display), sans-serif;
  font-weight:400;
  font-size: clamp(1.5rem, 8.2vw, 4.4rem);
  line-height:1.1;
  letter-spacing:.06em;
  white-space:nowrap;
  animation:none;
}
.wordmark span{
  display:inline-block;
  background: linear-gradient(180deg, #ffffff 6%, #dcd4f0 42%, #8c7fb3 52%, #eee9ff 76%, #ffffff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter: drop-shadow(0 4px 22px rgba(124,58,237,.45));
  opacity:0;
  animation: letter-in .95s calc(1.2s + var(--i) * .065s) var(--ease-out) both;
}
.wordmark .dash{
  background:none;
  -webkit-text-fill-color: var(--violet-mid); color: var(--violet-mid);
  filter:none;
}
@keyframes letter-in{
  from{ opacity:0; transform: translateY(18px) scale(1.14); filter: blur(10px); }
  to{ opacity:1; transform:none; filter: blur(0); }
}

.wordmark-tag{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin: 16px 0 0;
  max-width:none;
  font-family: var(--font-display);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.9em;
  text-transform:uppercase;
  color: var(--grey);
  opacity:0;
  animation: fade-up .9s 2.05s var(--ease-out) both;
}
.wordmark-tag span{ margin-right:-.9em; }
.wordmark-tag::before, .wordmark-tag::after{
  content:""; height:1px; width: clamp(28px, 8vw, 92px);
  transform: scaleX(0);
  animation: line-grow 1s 2.15s var(--ease-out) forwards;
}
.wordmark-tag::before{ background: linear-gradient(90deg, transparent, var(--violet-mid)); transform-origin: 100% 50%; }
.wordmark-tag::after{ background: linear-gradient(270deg, transparent, var(--violet-mid)); transform-origin: 0 50%; }
@keyframes line-grow{ to{ transform: scaleX(1); } }

.hero .hero-sub{ animation: fade-up .9s 2.3s var(--ease-out) both; margin-top:26px; }
.hero .hero-actions{ animation: fade-up .9s 2.45s var(--ease-out) both; }
.hero .hero-stats{ animation: fade-up .9s 2.6s var(--ease-out) both; }

/* Wiederholte Besuche: Intro überspringen (nur Endzustand) */
.intro-fast .hero *,
.intro-fast .hero-beam{
  animation-duration:.01s !important;
  animation-delay:0s !important;
}
.intro-fast .hero .orbit-a, .intro-fast .hero .orbit-b{ animation-duration:44s !important; }
.intro-fast .hero .orbit-b{ animation-duration:28s !important; }
.intro-fast .logo-ghost{ display:none; }

.status-dot{ position:relative; flex-shrink:0; }
.status-dot::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: inherit;
  animation: ping 2.2s ease-out infinite;
}
.scroll-cue{ transition: border-color .3s ease; }
.scroll-cue:hover{ border-color: var(--violet-mid); }

/* ---------- Sektionen ---------- */
.section h2{ position:relative; }
.news-section{ background: var(--bg-alt); }
.news-grid{
  display:grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 64px;
  align-items:start;
}
.news-card{
  position:relative;
  padding: 38px 40px;
  border:1px solid var(--line);
  border-left: 2px solid var(--violet);
  background: var(--bg-alt-2);
}
.news-card p{ max-width:60ch; }
.news-card p:last-child{ margin-bottom:0; }
.news-lead{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height:1.35;
  color: var(--white);
}

/* Schnellzugriff */
.quick-links{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:1px;
  margin-top:44px;
  background: var(--line);
  border:1px solid var(--line);
}
.ql{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:150px;
  padding: 26px 24px;
  background: var(--bg-alt-2);
  overflow:hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.ql-feature{ grid-column: span 2; min-height:190px; }
.ql strong{
  display:block;
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color: var(--white);
}
.ql-feature strong{ font-size:1.6rem; }
.ql span{ display:block; margin-top:6px; color: var(--grey); font-size:.9rem; max-width:34ch; }
.ql::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, var(--violet), var(--violet-bright));
  transform: scaleX(0); transform-origin:0 50%;
  transition: transform .45s var(--ease-out);
}
.ql:hover::after, .ql:focus-visible::after{ transform: scaleX(1); }

/* CTA-Band */
.cta-band{
  position:relative; overflow:hidden;
  padding: 120px 0;
  border-top:1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 90% at 50% 100%, #1d0c38 0%, transparent 70%),
    var(--bg);
}
.cta-band .flow-canvas{
  opacity:.75;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 0%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 0%, transparent 100%);
}
.cta-inner{ position:relative; z-index:2; text-align:center; }
.cta-inner h2{ font-size: clamp(2rem, 5vw, 3.4rem); }
.cta-inner p{ margin: 16px auto 34px; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ---------- Unterseiten-Header ---------- */
.page-hero{ position:relative; overflow:hidden; }
.page-hero .flow-canvas{
  opacity:.8;
  -webkit-mask-image: radial-gradient(ellipse 75% 130% at 88% 10%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 75% 130% at 88% 10%, #000 0%, transparent 72%);
}
.page-hero .section-inner{ position:relative; z-index:2; }
.page-hero h1{ text-shadow: 0 0 40px rgba(124,58,237,.35); }
.eyebrow-link{ display:inline-flex; align-items:center; gap:10px; }
.eyebrow-link::before{
  content:""; width:28px; height:1px; background: var(--violet-mid);
  transform-origin:0 50%;
  animation: line-grow-x .9s .2s var(--ease-out) both;
}
@keyframes line-grow-x{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

/* ---------- Karten: Spotlight + Hover ---------- */
.spot, .spot:hover{
  background:
    radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgba(124,58,237,.17), transparent 70%),
    var(--bg-alt-2);
}
.spot{ transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .25s ease; }
.spot:hover{
  box-shadow: 0 0 0 1px rgba(157,92,245,.28), 0 18px 44px -18px var(--violet-glow);
}
.team-card.spot:hover, .streamer-card.spot:hover, .ql.spot:hover, .partner-card.spot:hover{ transform: translateY(-3px); }
.ql-feature.spot, .ql-feature.spot:hover{
  background:
    radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgba(124,58,237,.2), transparent 70%),
    linear-gradient(135deg, #1a0e33 0%, var(--bg-alt-2) 70%);
}
.rule-cat.spot:hover{ transform:none; }
.callout.spot, .callout.spot:hover{
  background:
    radial-gradient(300px circle at var(--mx, -999px) var(--my, -999px), rgba(124,58,237,.15), transparent 70%),
    var(--bg-alt-2);
}

/* Akkordeon */
.rule-cat[open] > .rules-list,
.rule-cat[open] > .rule-cat-intro,
.rule-cat[open] > .quantum-list{
  animation: acc-open .45s var(--ease-out);
}
@keyframes acc-open{
  from{ opacity:0; transform: translateY(-10px); }
  to{ opacity:1; transform:none; }
}
.rule-cat > summary{ transition: color .2s ease, background .2s ease; }
.rule-cat > summary:hover{ color: var(--violet-bright); }
.rule-cat[open]{ border-color: rgba(157,92,245,.35); }

/* Team-Avatar mit rotierendem Ring */
.team-avatar{ position:relative; }
.team-card:not(.placeholder) .team-avatar{ border-color: transparent; }
.team-card:not(.placeholder) .team-avatar::before{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  background: conic-gradient(from 0deg, transparent 0 25%, var(--violet-mid) 70%, var(--violet-bright) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: spin 3.6s linear infinite;
}
.team-card:not(.placeholder) .team-avatar{ box-shadow: 0 0 24px -4px var(--violet-glow); }

/* Platzhalter: ruhiges Schimmern statt toter Fläche */
.placeholder{ position:relative; overflow:hidden; }
.partner-card.placeholder::after, .streamer-card.placeholder::after, .team-card.placeholder::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(105deg, transparent 38%, rgba(157,92,245,.08) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: shimmer 5.5s ease-in-out infinite;
}
@keyframes shimmer{
  0%, 55%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}

/* Galerie */
.gallery-tile{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.gallery-tile.placeholder{
  background:
    repeating-linear-gradient(118deg, rgba(124,58,237,.12) 0 2px, transparent 2px 15px),
    linear-gradient(135deg, #1a0e33, #0e0918);
  background-size: auto, auto;
  animation: streaks 14s linear infinite;
}
@keyframes streaks{ to{ background-position: 150px 0, 0 0; } }
.gallery-tile.spot.placeholder, .gallery-tile.spot.placeholder:hover{
  background:
    radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgba(157,92,245,.22), transparent 70%),
    repeating-linear-gradient(118deg, rgba(124,58,237,.12) 0 2px, transparent 2px 15px),
    linear-gradient(135deg, #1a0e33, #0e0918);
}
.gallery-tile img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transition: transform .8s var(--ease-out), filter .4s ease;
}
a.gallery-tile{ cursor: zoom-in; }
a.gallery-tile:hover img{ transform: scale(1.06); filter: brightness(1.08); }

.lightbox{
  position:fixed; inset:0; z-index:1500;
  display:grid; place-items:center;
  background: rgba(5,3,9,.93);
  opacity:0; pointer-events:none;
  transition: opacity .3s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{
  max-width: min(92vw, 1400px); max-height: 86vh;
  border:1px solid var(--line-strong);
  box-shadow: 0 30px 120px rgba(124,58,237,.35);
  transform: scale(.96);
  transition: transform .4s var(--ease-out);
}
.lightbox.open img{ transform:none; }
.lightbox-close{
  position:absolute; top:18px; right:22px;
  width:44px; height:44px;
  background:none; border:1px solid var(--line-strong);
  color: var(--white); font-size:1.8rem; line-height:1; cursor:pointer;
}
.lightbox-close:hover{ border-color: var(--violet-mid); color: var(--violet-bright); }

/* Impressum / Text-Seiten */
.impressum-block{ border-left:2px solid var(--line); padding-left:20px; transition: border-color .3s ease; }
.impressum-block:hover{ border-left-color: var(--violet); }
.page-body a:not([class]){
  color: var(--violet-bright);
  background: linear-gradient(var(--violet-mid), var(--violet-mid)) 0 100% / 100% 1px no-repeat;
  transition: background-size .3s var(--ease-out), color .2s ease;
}
.page-body a:not([class]):hover{ color:#fff; background-size: 100% 100%; }

/* ---------- Einblenden beim Scrollen ---------- */
.reveal{
  opacity:0;
  transform: translateY(20px);
  filter: blur(4px);
  transition: opacity .8s ease, transform .8s var(--ease-out), filter .8s ease;
}
.reveal.in{ opacity:1; transform:none; filter: blur(0); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .quick-links{ grid-template-columns: repeat(2, 1fr); }
  .ql-feature{ grid-column: span 2; }
  .news-grid{ grid-template-columns: 1fr; gap:28px; }
}
@media (max-width: 640px){
  .quick-links{ grid-template-columns: 1fr; }
  .ql-feature{ grid-column: auto; }
  .ql, .ql-feature{ min-height: 0; }
  .news-card{ padding: 26px 22px; }
  .hero-content{ padding-top: 112px; }
  .wordmark-tag{ letter-spacing:.6em; }
  .wordmark-tag span{ margin-right:-.6em; }
  .cta-band{ padding: 84px 0; }
  .toast{ width: calc(100vw - 32px); text-align:center; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-delay:0s !important; }
  .page-wipe{ display:none; }
  .hero-beam{ opacity:.14; }
  .logo-ghost{ display:none; }
  .reveal{ opacity:1; transform:none; filter:none; }
  .scroll-progress{ display:none; }
}

/* ---------- Feinschliff nach Sichtprüfung ---------- */
.ql, .ql-feature{ justify-content: flex-start; }
.ql strong{ margin-top:auto; }              /* Titel bündig am unteren Block */
.ql{ justify-content: flex-end; }
.ql span{ min-height: 2.8em; }              /* gleiche Höhe → Titel stehen auf einer Linie */
.ql-feature span{ min-height:0; }
.btn-outline{ background: rgba(8,5,13,.6); }
.cta-band .flow-canvas{
  opacity:.7;
  -webkit-mask-image: radial-gradient(ellipse 95% 70% at 50% 108%, #000 0%, transparent 100%);
          mask-image: radial-gradient(ellipse 95% 70% at 50% 108%, #000 0%, transparent 100%);
}

/* Team: keine graue Restkachel bei 5 Karten */
.team-grid{ background:none; border:none; gap:14px; }
.team-grid .team-card{ border:1px solid var(--line); border-top:2px solid var(--line); }
.team-grid .team-card:hover{ border-top-color: var(--violet); }
.ql span{ min-height: 3.3em; }
.ql-feature span{ min-height:0; }

/* Galerie-Platzhalter: nahtlos laufende Lichtstreifen */
.gallery-tile.placeholder, .gallery-tile.spot.placeholder, .gallery-tile.spot.placeholder:hover{
  animation:none;
  background:
    radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgba(157,92,245,.22), transparent 70%),
    linear-gradient(135deg, #1a0e33, #0e0918);
}
.gallery-tile.placeholder::before{
  content:""; position:absolute; inset:-30% -30%;
  pointer-events:none;
  background: repeating-linear-gradient(118deg, rgba(124,58,237,.13) 0 2px, transparent 2px 15px);
  animation: streaks-move 16s linear infinite;
}
@keyframes streaks-move{ to{ transform: translateX(169.9px); } }

/* ---------- Baustellen-Banner ("Seite in Bearbeitung") ---------- */
:root{ --wip-h: 34px; }
.wip-banner{
  position:fixed; top:0; left:0; right:0; height:var(--wip-h);
  z-index:150; overflow:hidden;
  display:flex; align-items:center;
  background: linear-gradient(90deg,#2a1257,#4b1f9e 50%,#2a1257);
  border-bottom:1px solid rgba(201,166,255,.35);
  color:var(--white);
  font-family:'Rajdhani',sans-serif; font-weight:600;
  font-size:.82rem; letter-spacing:.2em; text-transform:uppercase;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.wip-track{ display:flex; flex:none; white-space:nowrap; animation: wip-scroll 38s linear infinite; }
.wip-track span{ display:inline-flex; align-items:center; gap:2.2rem; padding-right:2.2rem; }
.wip-track i{ width:6px; height:6px; background:var(--violet-bright); transform:rotate(45deg); box-shadow:0 0 8px var(--violet-bright); }
.wip-banner:hover .wip-track{ animation-play-state:paused; }
@keyframes wip-scroll{ to{ transform:translateX(-50%); } }

.site-header{ top: var(--wip-h); }
.page-hero{ padding-top: calc(168px + var(--wip-h)); }
.hero{ padding-top: var(--wip-h); }
.scroll-progress{ top:var(--wip-h); }

@media (prefers-reduced-motion: reduce){
  .wip-track{ animation:none; }
  .wip-banner{ -webkit-mask-image:none; mask-image:none; justify-content:center; }
  .wip-track span:not(:first-child){ display:none; }
}
body.nav-open .main-nav{ top: calc(68px + var(--wip-h)); max-height: calc(100vh - 68px - var(--wip-h)); }

/* Regelwerk-Reiter auf gleiche Höhe wie die übrigen Reiter */
.main-nav{ align-items: flex-start; }
.nav-item.has-dropdown > a{ padding-bottom: 4px; line-height: 1.5; }
.main-nav > a{ line-height: 1.5; }
.nav-item{ display:flex; }

/* Partner-Karte mit echtem Eintrag */
.partner-card.partner-real{ flex-direction:column; gap:6px; text-align:center; padding:20px; color:var(--white); }
.partner-card.partner-real strong{ font-size:1.5rem; letter-spacing:.14em; color:var(--white); }
.partner-card.partner-real span{ font-size:.72rem; letter-spacing:.14em; color:var(--grey); }
.partner-card.partner-real:hover strong{ color:var(--violet-bright); }

/* Partner-Karte (anklickbar) */
a.partner-card.partner-real{ padding:26px 22px; gap:8px; min-height:210px; }
a.partner-card.partner-real img{ width:52px; height:52px; object-fit:contain; margin-bottom:4px; transition: transform .4s var(--ease-out); }
a.partner-card.partner-real:hover img{ transform:scale(1.1) rotate(-4deg); }
a.partner-card.partner-real em{ font-style:normal; font-family:'Manrope',sans-serif; text-transform:none; letter-spacing:0; font-size:.82rem; line-height:1.5; color:var(--grey); max-width:24ch; }

/* Bewerbungs-/Kontaktband */
.apply-band{ padding: 24px 0 96px; }
.apply-inner{
  display:flex; align-items:center; justify-content:space-between; gap:28px 40px; flex-wrap:wrap;
  padding: 36px 40px;
  border:1px solid var(--line-strong);
  background: linear-gradient(120deg, rgba(124,58,237,.16), rgba(18,12,32,.9) 60%);
}
.apply-copy{ flex:1 1 360px; min-width:0; }
.apply-copy h2{ margin:6px 0 10px; font-size:clamp(1.5rem,3vw,2rem); }
.apply-copy p{ max-width:56ch; color:var(--grey); }
.apply-actions{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:640px){ .apply-inner{ padding:26px 20px; } .apply-actions, .apply-actions .btn{ width:100%; } }

.join-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px; }
@media (max-width:760px){ .join-grid{ grid-template-columns:1fr; } }

/* Live-Spielerzahl */
.hero-stats dd b{ font-weight:inherit; font-variant-numeric:tabular-nums; }
.hero-stats .slot-max{ color:var(--grey); font-weight:500; }
#srv-status[data-state="offline"] .status-dot{ background:#ef4444; box-shadow:0 0 10px #ef4444; }
#srv-status[data-state="offline"] .status-dot::after{ display:none; }

/* =========================================================
   GLAS-DESIGN  (angelehnt an die Ingame-UI: dunkles Glas,
   feine Linien, Mini-Labels in Versalien, violette Akzente)
   ========================================================= */
:root{
  --glass-fill: linear-gradient(160deg, rgba(124,58,237,.11), rgba(16,10,28,.52) 58%);
  --glass-fill-hover: linear-gradient(160deg, rgba(124,58,237,.2), rgba(20,12,36,.6) 58%);
  --glass-line: rgba(246,244,251,.12);
  --glass-line-hi: rgba(157,92,245,.55);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 40px -22px rgba(0,0,0,.8);
  --glass-r: 8px;
}

/* ruhiger Hintergrund hinter dem Glas, damit die Unschärfe etwas zeigt */
body::before{
  content:""; position:fixed; inset:-20vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38vmax 30vmax at 12% 18%, rgba(124,58,237,.20), transparent 70%),
    radial-gradient(34vmax 28vmax at 88% 46%, rgba(157,92,245,.14), transparent 70%),
    radial-gradient(40vmax 30vmax at 30% 92%, rgba(88,40,190,.18), transparent 70%);
  animation: ambient-drift 38s ease-in-out infinite alternate;
}
@keyframes ambient-drift{ to{ transform: translate3d(4vmax,-3vmax,0) scale(1.06); } }
.news-section{ background: transparent; }

/* gemeinsame Glasfläche */
.ql, .ql-feature, .news-card, .team-card, .streamer-card, .partner-card, .rule-cat, .callout,
.apply-inner, .gallery-tile, .impressum-block, .stat, .nav-dropdown, .toast{
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  border-radius: var(--glass-r);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
          backdrop-filter: blur(14px) saturate(1.15);
}
.impressum-block{ padding:20px 24px; }
.news-card{ border-left:1px solid var(--glass-line); }
.callout{ border-left:1px solid var(--glass-line); position:relative; }
.callout::before, .news-card::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--violet);
}

/* Spotlight bleibt, jetzt auf Glas */
.spot, .spot:hover, .ql-feature.spot, .ql-feature.spot:hover, .callout.spot, .callout.spot:hover{
  background:
    radial-gradient(280px circle at var(--mx, -999px) var(--my, -999px), rgba(157,92,245,.2), transparent 70%),
    var(--glass-fill);
}
.spot:hover{ border-color: var(--glass-line-hi); box-shadow: var(--glass-shadow), 0 18px 44px -20px var(--violet-glow); }

/* Raster ohne 1px-Trennlinien, stattdessen Abstände */
.streamer-grid, .partner-grid, .gallery-grid{ background:none; border:none; gap:14px; }
.streamer-card{ border-left:1px solid var(--glass-line); }
.team-grid .team-card, .team-card{ border:1px solid var(--glass-line); border-top:1px solid var(--glass-line); }
.team-card:hover{ border-color: var(--glass-line-hi); }
.streamer-card:hover{ border-left-color: var(--glass-line-hi); }
.partner-card:hover, .team-card:hover, .streamer-card:hover{ background: var(--glass-fill-hover); }
.rule-cat{ margin-bottom:12px; overflow:hidden; }
.rule-cat[open]{ border-color: var(--glass-line-hi); }

/* Buttons */
.btn{ border-radius:6px; }
.btn-outline, .btn-ghost{
  background: linear-gradient(160deg, rgba(124,58,237,.12), rgba(16,10,28,.55));
  border:1px solid var(--glass-line-hi);
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn-ghost{ border-color: var(--glass-line); color: var(--grey); }
.btn-outline:hover, .btn-ghost:hover{
  background: linear-gradient(160deg, rgba(124,58,237,.3), rgba(24,14,44,.65));
  border-color: var(--violet-mid); color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 26px -8px var(--violet-glow);
}
.btn-solid{
  background: linear-gradient(180deg, #8b4df0, #6d2fe0);
  border:1px solid rgba(201,166,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 28px -12px var(--violet-glow);
}
.btn-solid:hover{ background: linear-gradient(180deg, #9d5cf5, #7c3aed); }
.apply-inner, .cta-band .btn{ position:relative; }
.apply-inner{ background: linear-gradient(120deg, rgba(124,58,237,.2), rgba(16,10,28,.5) 62%); }

/* Mini-Labels wie in der UI */
.streamer-platform, .stat dt, .team-role, .eyebrow-link{
  font-family: var(--font-body); font-weight:600;
  text-transform:uppercase; letter-spacing:.2em; font-size:.68rem;
}
.eyebrow-link{ color: var(--violet-bright); }
.team-role{ color: var(--grey); }

/* Hero-Kennzahlen als Glas-Leiste */
.hero-stats{ gap:12px; }
.stat{ padding:12px 22px; min-width:120px; }

/* Nav + Dropdown */
.nav-dropdown{ padding:8px; background: linear-gradient(160deg, rgba(30,16,56,.92), rgba(12,8,22,.94)); }
.nav-dropdown a{ border-radius:6px; }
.site-header.scrolled{ border-bottom-color: var(--glass-line); }

/* Partner-Karte: stabiler Hover, Text bleibt lesbar */
a.partner-card.partner-real, a.partner-card.partner-real:hover{ color: var(--white); }
a.partner-card.partner-real:hover{ background: var(--glass-fill-hover); border-color: var(--glass-line-hi); box-shadow: var(--glass-shadow), 0 18px 44px -20px var(--violet-glow); }
a.partner-card.partner-real strong{ color: var(--white); }
a.partner-card.partner-real:hover strong{ color: var(--violet-bright); }
a.partner-card.partner-real span, a.partner-card.partner-real em{ color: var(--grey); }
a.partner-card.partner-real:hover span, a.partner-card.partner-real:hover em{ color: #cfc8dd; }
.partner-card.placeholder{ opacity:.6; }

/* Streamer mit echten Links */
.streamer-card.streamer-real h3{ color: var(--white); font-size:1.25rem; margin-bottom:16px; }
.streamer-links{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:6px;
  font-family: var(--font-body); font-weight:600; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--white);
  background: linear-gradient(160deg, rgba(124,58,237,.16), rgba(16,10,28,.55));
  border:1px solid var(--glass-line-hi);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: background .2s ease, box-shadow .3s ease, transform .2s ease;
}
.chip::after{ content:"↗"; color: var(--violet-bright); }
.chip:hover{ background: linear-gradient(160deg, rgba(124,58,237,.34), rgba(24,14,44,.65)); box-shadow: 0 0 22px -6px var(--violet-glow); transform: translateY(-1px); }
.chip:focus-visible{ outline:2px solid var(--violet-bright); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){ body::before{ animation:none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root{ --glass-fill: linear-gradient(160deg, rgba(34,18,64,.95), rgba(14,9,24,.95)); }
}

/* Feinschliff Glas */
.quick-links{ gap:14px; background:none; border:none; }
.section, .links-section, .join-section{ background: transparent; }
.page-body{ background: transparent; }
@media (max-width:980px){ .quick-links{ grid-template-columns: repeat(2,1fr); } .ql-feature{ grid-column: span 2; } }
.cta-band{ background: transparent; border-top:1px solid var(--glass-line); }

/* =========================================================
   INTERAKTIVE EXTRAS
   ========================================================= */
.ql, .team-card, .partner-real, .streamer-real, .path-panel, .news-card{ transform-style:preserve-3d; will-change:transform; }

/* Laufband */
.qv-marquee{ padding:22px 0; border-block:1px solid var(--glass-line); overflow:hidden; background:linear-gradient(90deg, rgba(124,58,237,.10), transparent 40%, rgba(124,58,237,.10)); }
.qm-row{ overflow:hidden; }
.qm-row + .qm-row{ margin-top:8px; }
.qm-track{ display:flex; width:max-content; animation: qm 44s linear infinite; }
.qm-row.rev .qm-track{ animation-direction:reverse; animation-duration:56s; }
.qm-track span{
  display:inline-flex; align-items:center; gap:30px; padding-right:30px; white-space:nowrap;
  font-family:'Michroma','Rajdhani',sans-serif; text-transform:uppercase; letter-spacing:.12em;
  font-size:clamp(1.1rem, 2.6vw, 2rem); color:var(--white);
}
.qm-row.rev .qm-track span{ color:transparent; -webkit-text-stroke:1px rgba(201,166,255,.55); }
.qm-track i{ width:9px; height:9px; flex:none; background:var(--violet-mid); transform:rotate(45deg); box-shadow:0 0 12px var(--violet); }
.qv-marquee:hover .qm-track{ animation-play-state:paused; }
@keyframes qm{ to{ transform:translateX(-50%); } }

/* Leitsatz */
.say-section{ padding-block: clamp(70px, 9vw, 130px); }
.say{
  margin:0; max-width:22ch;
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(1.9rem, 5vw, 4rem); line-height:1.1; letter-spacing:-.01em;
}
.say .w{ color: rgba(246,244,251,.16); transition: color .35s ease, text-shadow .35s ease; }
.say .w.on{ color: var(--white); text-shadow: 0 0 26px rgba(157,92,245,.45); }

/* Wähle deinen Weg */
.paths{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:14px; margin-top:36px; }
.path-tabs{ display:grid; gap:10px; align-content:start; }
.path-tab{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left; cursor:pointer;
  padding:18px 20px; border-radius:var(--glass-r);
  font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--grey);
  background:var(--glass-fill); border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s var(--ease-out);
}
.path-tab small{ font:600 .68rem var(--font-body); letter-spacing:.2em; color:var(--violet-mid); }
.path-tab:hover{ color:var(--white); border-color:var(--glass-line-hi); }
.path-tab[aria-selected="true"]{
  color:var(--white); border-color:var(--violet-mid);
  background:linear-gradient(120deg, rgba(124,58,237,.42), rgba(24,14,44,.6));
  box-shadow:var(--glass-shadow), inset 3px 0 0 var(--violet-bright), 0 0 30px -10px var(--violet-glow);
}
.path-tab:focus-visible, .bp-task:focus-visible{ outline:2px solid var(--violet-bright); outline-offset:3px; }
.path-panel{
  position:relative; overflow:hidden; min-height:340px;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:clamp(26px,4vw,48px); border-radius:var(--glass-r);
  background:linear-gradient(150deg, rgba(124,58,237,.2), rgba(16,10,28,.55) 60%);
  border:1px solid var(--glass-line-hi); box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.path-mark{ position:absolute; right:-6%; bottom:-22%; width:min(58%,360px); opacity:.09; pointer-events:none; transform:rotate(-10deg); }
.path-label{ font:600 .68rem var(--font-body); letter-spacing:.22em; text-transform:uppercase; color:var(--violet-bright); }
.path-panel h3{ margin:0; font-size:clamp(1.8rem,4vw,3rem); line-height:1.05; }
.path-panel p{ margin:0; max-width:48ch; color:var(--grey); font-size:1.05rem; }
.path-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.path-tags span{ padding:6px 12px; border-radius:6px; border:1px solid var(--glass-line); font:600 .7rem var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--white); background:rgba(8,5,13,.4); }
.path-panel .btn{ margin-top:auto; }
.path-panel.swap > *:not(.path-mark){ animation: path-in .5s var(--ease-out) backwards; }
.path-panel.swap > *:nth-child(3){ animation-delay:.05s; } .path-panel.swap > *:nth-child(4){ animation-delay:.1s; }
.path-panel.swap > *:nth-child(5){ animation-delay:.15s; } .path-panel.swap > *:nth-child(6){ animation-delay:.2s; }
@keyframes path-in{ from{ opacity:0; transform:translateY(18px); } }
@media (max-width:820px){
  .paths{ grid-template-columns:1fr; }
  .path-tabs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .path-tab{ padding:14px; font-size:1.05rem; gap:10px; }
}

/* Battlepass-Demo */
.bp{
  margin-top:36px; padding:clamp(14px,2vw,22px); border-radius:12px; display:grid; gap:12px;
  background:linear-gradient(160deg, rgba(60,30,120,.22), rgba(12,8,22,.6) 50%);
  border:1px solid var(--glass-line); box-shadow:var(--glass-shadow), 0 40px 90px -50px var(--violet-glow);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.bp-head, .bp-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.bp-title{ display:flex; align-items:center; gap:12px; }
.bp-title i{ width:3px; height:18px; background:var(--violet-mid); border-radius:2px; }
.bp-title strong{ font-family:var(--font-display); font-size:1.2rem; letter-spacing:.14em; text-transform:uppercase; }
.bp-chip{ padding:5px 10px; border-radius:5px; border:1px solid var(--glass-line-hi); font:600 .64rem var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--violet-bright); background:rgba(124,58,237,.14); }
.bp-chip.ghost{ border-color:var(--glass-line); color:var(--grey); background:none; }
.bp-stats{ display:flex; gap:12px; flex-wrap:wrap; }
.bp-box{ padding:14px 18px; border-radius:8px; border:1px solid var(--glass-line); background:rgba(8,5,13,.35); min-width:0; }
.bp-box.accent{ box-shadow: inset 3px 0 0 var(--violet-mid); flex:0 1 240px; }
.bp-box.grow{ flex:1 1 320px; display:grid; gap:8px; }
.bp-box small, .bp-card small{ display:block; font:600 .62rem var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--grey); }
.bp-level{ margin-top:6px; color:var(--violet-bright); font-family:var(--font-display); font-weight:600; }
.bp-level b{ font-size:1.8rem; color:var(--white); font-variant-numeric:tabular-nums; }
.bp-level span{ color:var(--grey); }
.bp-row{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:baseline; }
.bp-row.dim{ color:var(--grey); font-size:.85rem; }
.bp-xp{ color:var(--violet-bright); font-family:var(--font-display); font-variant-numeric:tabular-nums; }
.bp-bar{ height:8px; border-radius:6px; background:rgba(246,244,251,.08); overflow:hidden; }
.bp-fill{ height:100%; width:0; border-radius:6px; background:linear-gradient(90deg, var(--violet), var(--violet-bright)); box-shadow:0 0 14px var(--violet); transition: width .7s var(--ease-out); }
.bp-rewards{ display:flex; gap:10px; overflow-x:auto; padding:6px 2px 12px; scrollbar-width:thin; scrollbar-color:var(--violet) transparent; }
.bp-card{
  flex:0 0 118px; display:grid; justify-items:center; gap:8px; text-align:center; padding:12px 8px;
  border-radius:8px; border:1px solid var(--glass-line); background:rgba(8,5,13,.35);
  opacity:.45; transition: opacity .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s var(--ease-out);
}
.bp-ico{ width:46px; height:46px; border-radius:50%; border:1px solid var(--glass-line); position:relative; }
.bp-ico::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:10px; margin:-3px 0 0 -6px; border-radius:2px; background:var(--grey-dim); box-shadow:0 -6px 0 -3px transparent, 0 -5px 0 -1px var(--grey-dim) inset; }
.bp-card b{ font-family:var(--font-display); font-size:1.02rem; }
.bp-card em{ font-style:normal; font:600 .58rem var(--font-body); letter-spacing:.18em; text-transform:uppercase; color:var(--grey); }
.bp-state{ width:100%; padding:6px 4px; border-radius:5px; border:1px solid var(--glass-line); font:600 .68rem var(--font-body); color:var(--grey); }
.bp-card.next{ opacity:.85; border-color:var(--glass-line-hi); }
.bp-card.got{ opacity:1; border-color:var(--violet-mid); box-shadow: inset 0 2px 0 var(--violet-mid), 0 0 26px -12px var(--violet-glow); }
.bp-card.got .bp-ico{ border-color:#34d399; }
.bp-card.got .bp-ico::after{ width:14px; height:8px; margin:-6px 0 0 -7px; background:none; border-radius:0; border-left:2.5px solid #34d399; border-bottom:2.5px solid #34d399; transform:rotate(-45deg); box-shadow:none; }
.bp-card.got .bp-state{ color:#34d399; border-color:rgba(52,211,153,.5); }
.bp-card.pop{ animation: bp-pop .8s var(--ease-out); }
@keyframes bp-pop{ 0%{ transform:scale(.86); } 45%{ transform:scale(1.1); box-shadow:0 0 50px -6px var(--violet-bright); } 100%{ transform:none; } }
.bp-tasks{ display:grid; gap:8px; }
.bp-task{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  padding:12px 14px; border-radius:8px; color:var(--white); font:inherit;
  border:1px solid var(--glass-line); background:rgba(8,5,13,.35);
  transition: border-color .25s ease, background .25s ease, transform .2s ease;
}
.bp-task:hover{ border-color:var(--glass-line-hi); background:rgba(124,58,237,.14); }
.bp-task:active{ transform:scale(.99); }
.bp-tick{ width:34px; height:34px; border-radius:7px; border:1px solid var(--glass-line-hi); position:relative; flex:none; }
.bp-tick::after{ content:""; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; border:2px solid var(--violet-mid); }
.bp-tname{ display:grid; gap:3px; min-width:0; }
.bp-tname b{ font-family:var(--font-display); font-size:1rem; }
.bp-tname em{ font-style:normal; font:600 .58rem var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--grey); }
.bp-tbar{ display:block; height:3px; border-radius:3px; background:rgba(246,244,251,.08); overflow:hidden; margin-top:4px; }
.bp-tbar u{ display:block; height:100%; width:0; background:#34d399; }
.bp-task.busy{ border-color:rgba(52,211,153,.6); pointer-events:none; }
.bp-task.busy .bp-tbar u{ width:100%; transition: width .62s linear; }
.bp-task.busy .bp-tick{ border-color:#34d399; }
.bp-task.busy .bp-tick::after{ width:13px; height:7px; margin:-6px 0 0 -7px; border-radius:0; border:0; border-left:2.5px solid #34d399; border-bottom:2.5px solid #34d399; transform:rotate(-45deg); }
.bp-reward{ padding:6px 10px; border-radius:5px; border:1px solid var(--glass-line-hi); font:700 .78rem var(--font-display); color:var(--violet-bright); white-space:nowrap; }
.bp-foot{ color:var(--grey); font-size:.85rem; }
@media (max-width:520px){ .bp-task{ grid-template-columns:auto minmax(0,1fr); } .bp-reward{ grid-column:2; justify-self:start; } }

/* So startest du */
.flow{ position:relative; list-style:none; margin:44px 0 36px; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; --p:0; }
.flow::before, .flow::after{ content:""; position:absolute; top:25px; left:26px; height:2px; border-radius:2px; }
.flow::before{ right:26px; background:var(--glass-line); }
.flow::after{ width:calc((100% - 52px) * var(--p)); background:linear-gradient(90deg, var(--violet), var(--violet-bright)); box-shadow:0 0 14px var(--violet); }
.fstep{ position:relative; z-index:1; display:grid; gap:8px; align-content:start; }
.fnum{
  width:52px; height:52px; border-radius:10px; display:grid; place-items:center;
  font:700 1.1rem var(--font-display); color:var(--grey);
  background:#120c20; border:1px solid var(--glass-line);
  transition: color .4s ease, border-color .4s ease, box-shadow .4s ease, transform .5s var(--ease-out), background .4s ease;
}
.fstep h3{ margin:8px 0 0; font-size:1.15rem; color:var(--grey); transition:color .4s ease; }
.fstep p{ margin:0; color:var(--grey-dim); font-size:.92rem; transition:color .4s ease; }
.fstep.on .fnum{ color:var(--white); border-color:var(--violet-bright); background:linear-gradient(180deg,#8b4df0,#6d2fe0); box-shadow:0 0 28px -6px var(--violet); transform:translateY(-3px) scale(1.06); }
.fstep.on h3{ color:var(--white); } .fstep.on p{ color:var(--grey); }
@media (max-width:860px){
  .flow{ grid-template-columns:1fr; gap:22px; }
  .flow::before, .flow::after{ top:26px; left:25px; width:2px; right:auto; }
  .flow::before{ bottom:26px; height:auto; }
  .flow::after{ height:calc((100% - 52px) * var(--p)); background:linear-gradient(180deg, var(--violet), var(--violet-bright)); }
  .fstep{ grid-template-columns:52px minmax(0,1fr); column-gap:18px; }
  .fnum{ grid-row:1 / 3; } .fstep h3{ margin:4px 0 0; }
}

@media (prefers-reduced-motion: reduce){
  .qm-track{ animation:none; }
}
.bp-card{ flex:1 0 118px; }

/* =========================================================
   RUHIGER DURCHGANG (Frontend-Design-Regeln)
   Bewegung nur noch bei Intro, Partikel-Logo, Battlepass.
   ========================================================= */
.team-card.spot:hover, .streamer-card.spot:hover, .ql.spot:hover, .partner-card.spot:hover,
.ql, .team-card, .partner-real, .streamer-real, .path-panel, .news-card{ transform:none; will-change:auto; }
.ql::after{ display:none; }
.wordmark .dash{ color:inherit; -webkit-text-fill-color:inherit; }
.foot-sep{ display:inline-block; width:1px; height:.9em; margin:0 .6em; vertical-align:-.1em; background:var(--glass-line); }
.page-hero h1{ margin-top:0; }
.path-tab{ font-size:1.3rem; }
.qv-marquee{ padding:18px 0; }
.say-section{ padding-block: clamp(80px, 11vw, 150px); }
.team-grid{ grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Team: nach Ebenen gruppiert */
.team-group + .team-group{ margin-top:56px; }
.team-group-title{ font-size:1.35rem; margin:0 0 18px; color:var(--grey); font-weight:600; }
.team-grid.team-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:0; }
.team-grid.team-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:0; }
.team-roles{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.team-roles .team-role{ padding:5px 10px; border-radius:5px; border:1px solid var(--glass-line); background:rgba(8,5,13,.35); }
.team-card h3{ overflow-wrap:anywhere; }
@media (max-width:980px){ .team-grid.team-grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .team-grid.team-grid-3, .team-grid.team-grid-4{ grid-template-columns:1fr; } }

/* =========================================================
   REGEL-SUCHE
   ========================================================= */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.rule-search{
  position:sticky; top:calc(var(--wip-h) + 82px); z-index:20;
  display:flex; align-items:center; gap:12px; margin:0 0 18px; padding:8px 8px 8px 16px;
  border-radius:var(--glass-r); border:1px solid var(--glass-line-hi);
  background:linear-gradient(160deg, rgba(40,20,80,.85), rgba(14,9,26,.9));
  box-shadow:var(--glass-shadow), 0 18px 40px -24px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.rule-search::before{ content:""; width:16px; height:16px; flex:none; border:2px solid var(--violet-bright); border-radius:50%; box-shadow:5px 5px 0 -3px var(--violet-bright); transform:translate(-1px,-1px); opacity:.9; }
.rule-search input{
  flex:1; min-width:0; height:42px; border:0; outline:0; background:none; color:var(--white);
  font:500 1rem var(--font-body);
}
.rule-search input::placeholder{ color:var(--grey); }
.rule-search:focus-within{ border-color:var(--violet-bright); box-shadow:var(--glass-shadow), 0 0 0 3px rgba(157,92,245,.25); }
.rule-count{ flex:none; padding:6px 10px; border-radius:5px; font:600 .78rem var(--font-body); color:var(--violet-bright); background:rgba(124,58,237,.16); }
.rule-count:empty{ display:none; }
.rule-empty{ padding:22px; border-radius:var(--glass-r); border:1px dashed var(--glass-line-hi); color:var(--grey); text-align:center; }
.rule mark{ background:rgba(157,92,245,.35); color:var(--white); border-radius:3px; padding:0 2px; }
a.rule-index{ color:var(--violet-mid); text-decoration:none; border-radius:4px; transition:color .2s ease, background .2s ease; }
a.rule-index:hover, a.rule-index:focus-visible{ color:var(--white); background:rgba(124,58,237,.25); }
.rule{ scroll-margin-top:200px; }
.rule.flash{ animation: rule-flash 2.2s ease; }
@keyframes rule-flash{ 0%,40%{ background:rgba(124,58,237,.22); box-shadow: inset 3px 0 0 var(--violet-bright); } 100%{ background:transparent; box-shadow:none; } }
@media (max-width:640px){ .rule-search{ top:calc(var(--wip-h) + 72px); } }

/* =========================================================
   WISSENSTEST
   ========================================================= */
.quiz-wrap{ max-width:820px; }
.quiz{
  position:relative; overflow:hidden; padding:clamp(24px,4vw,44px); border-radius:12px;
  background:linear-gradient(160deg, rgba(60,30,120,.24), rgba(12,8,22,.6) 55%);
  border:1px solid var(--glass-line-hi); box-shadow:var(--glass-shadow), 0 40px 90px -50px var(--violet-glow);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.quiz h2{ margin:0 0 12px; font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.2; }
.quiz p{ color:var(--grey); max-width:56ch; }
.quiz-start{ text-align:center; display:grid; justify-items:center; gap:6px; }
.quiz-start p{ margin:0 0 18px; }
.quiz-mark{ width:84px; margin-bottom:10px; filter:drop-shadow(0 0 24px var(--violet-glow)); }
.quiz-top{ display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; color:var(--grey); font-size:.9rem; font-variant-numeric:tabular-nums; }
.quiz-score{ color:var(--violet-bright); }
.quiz-bar{ margin-bottom:26px; }
.quiz-q{ min-height:2.4em; }
.quiz-opts{ display:grid; gap:10px; margin-top:18px; }
.quiz-opt{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  padding:14px 16px; border-radius:8px; font:500 1rem var(--font-body); color:var(--white);
  background:rgba(8,5,13,.4); border:1px solid var(--glass-line);
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
.quiz-opt span{ display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:6px; border:1px solid var(--glass-line-hi); font:700 .85rem var(--font-display); color:var(--violet-bright); }
.quiz-opt:hover:not(:disabled){ border-color:var(--glass-line-hi); background:rgba(124,58,237,.16); }
.quiz-opt:active:not(:disabled){ transform:scale(.99); }
.quiz-opt:focus-visible{ outline:2px solid var(--violet-bright); outline-offset:2px; }
.quiz-opt:disabled{ cursor:default; opacity:.55; }
.quiz-opt.right{ opacity:1; border-color:rgba(52,211,153,.7); background:rgba(52,211,153,.12); }
.quiz-opt.right span{ border-color:#34d399; color:#34d399; }
.quiz-opt.wrong{ opacity:1; border-color:rgba(239,68,68,.7); background:rgba(239,68,68,.1); }
.quiz-opt.wrong span{ border-color:#ef4444; color:#ef4444; }
.quiz-feedback{ margin-top:16px; padding:14px 16px; border-radius:8px; color:var(--grey); border:1px solid var(--glass-line); background:rgba(8,5,13,.35); animation: path-in .35s var(--ease-out); }
.quiz-feedback b{ color:var(--white); }
.quiz-feedback.ok{ box-shadow: inset 3px 0 0 #34d399; }
.quiz-feedback.no{ box-shadow: inset 3px 0 0 #ef4444; }
.quiz-feedback a{ color:var(--violet-bright); white-space:nowrap; }
.quiz-next{ display:flex; justify-content:flex-end; margin-top:16px; min-height:46px; }
.quiz-end{ text-align:center; display:grid; justify-items:center; gap:4px; }
.quiz-result{ font-family:var(--font-display); color:var(--grey); }
.quiz-result b{ font-size:clamp(4rem,12vw,6rem); line-height:1; color:var(--white); text-shadow:0 0 40px var(--violet-glow); font-variant-numeric:tabular-nums; }
.quiz-result span{ font-size:1.6rem; margin-left:6px; }
.quiz.perfect .quiz-result b{ color:#34d399; text-shadow:0 0 40px rgba(52,211,153,.5); }
.quiz-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:14px; }

/* =========================================================
   FRAKTIONEN
   ========================================================= */
.frak-filter, .map-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.frak-chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:6px; cursor:pointer;
  font:600 .9rem var(--font-display); color:var(--grey);
  background:var(--glass-fill); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.frak-chip:hover{ color:var(--white); border-color:var(--glass-line-hi); }
.frak-chip[aria-selected="true"], .frak-chip[aria-pressed="true"]{ color:var(--white); border-color:var(--violet-mid); background:linear-gradient(160deg, rgba(124,58,237,.4), rgba(24,14,44,.6)); }
.frak-chip:focus-visible{ outline:2px solid var(--violet-bright); outline-offset:2px; }
.frak-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.frak-card{
  display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:var(--glass-r);
  background:var(--glass-fill); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.frak-card.placeholder{ opacity:.55; border-style:dashed; }
.frak-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.frak-badge{ display:grid; place-items:center; min-width:46px; height:46px; padding:0 8px; border-radius:8px; font:700 .9rem var(--font-display); letter-spacing:.06em; color:var(--white); border:1px solid var(--glass-line-hi); background:rgba(124,58,237,.22); }
.frak-badge.staat{ background:rgba(77,150,255,.18); border-color:rgba(77,150,255,.5); }
.frak-badge.crime{ background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.45); }
.frak-badge.neutral{ background:rgba(245,177,74,.14); border-color:rgba(245,177,74,.45); }
.frak-typ{ color:var(--grey); font-size:.85rem; }
.frak-status{ margin-left:auto; padding:4px 9px; border-radius:5px; font:600 .72rem var(--font-body); }
.frak-status.offen{ color:#34d399; border:1px solid rgba(52,211,153,.5); background:rgba(52,211,153,.1); }
.frak-status.geschlossen{ color:var(--grey); border:1px solid var(--glass-line); }
.frak-card h3{ margin:4px 0 0; font-size:1.2rem; }
.frak-card p{ margin:0; color:var(--grey); font-size:.95rem; }
.frak-rules{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:auto; padding-top:8px; }
.frak-rules span{ color:var(--grey-dim); font-size:.8rem; margin-right:4px; }
.frak-rules a{ padding:3px 8px; border-radius:5px; border:1px solid var(--glass-line-hi); color:var(--violet-bright); text-decoration:none; font:600 .78rem var(--font-body); }
.frak-rules a:hover{ background:rgba(124,58,237,.2); color:var(--white); }
.frak-info{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 40px; align-items:center;
  margin-top:48px; padding:clamp(24px,4vw,40px); border-radius:12px;
  background:linear-gradient(120deg, rgba(124,58,237,.2), rgba(16,10,28,.5) 62%); border:1px solid var(--glass-line-hi); box-shadow:var(--glass-shadow);
}
.frak-info h2{ margin:0 0 10px; }
.frak-info p{ margin:0; color:var(--grey); }
.frak-facts{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.frak-facts li{ display:flex; align-items:baseline; gap:14px; }
.frak-facts b{ flex:none; min-width:84px; font:700 1.5rem var(--font-display); color:var(--white); font-variant-numeric:tabular-nums; }
.frak-facts span{ color:var(--grey); font-size:.92rem; }
.frak-info-actions{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:900px){ .frak-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .frak-info{ grid-template-columns:1fr; } }
@media (max-width:600px){ .frak-grid{ grid-template-columns:1fr; } }

/* =========================================================
   STADTKARTE
   ========================================================= */
.dot{ display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; }
.dot.staat{ background:#4d96ff; } .dot.medizin{ background:#34d399; } .dot.sperrzone{ background:#ef4444; } .dot.stadt{ background:var(--violet-bright); }
.map-layout{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:16px; align-items:start; }
.map-frame{ border-radius:12px; overflow:hidden; border:1px solid var(--glass-line-hi); box-shadow:var(--glass-shadow), 0 40px 90px -50px var(--violet-glow); background:#0a0614; }
.map-svg{ display:block; width:100%; height:auto; max-height:78vh; }
.map-region{ fill:rgba(246,244,251,.32); font:600 26px var(--font-display); letter-spacing:.2em; text-transform:uppercase; text-anchor:middle; pointer-events:none; }
.map-region.small{ font-size:16px; fill:rgba(246,244,251,.25); }
.map-note{ margin:0; padding:10px 14px; font-size:.8rem; color:var(--grey-dim); border-top:1px solid var(--glass-line); }
.pin{ cursor:pointer; outline:none; transition:opacity .3s ease; }
.pin .pin-dot{ stroke:#0a0614; stroke-width:3; transition: r .2s ease; }
.pin .pin-pulse{ fill:none; stroke-width:2; opacity:.0; transform-origin:center; transform-box:fill-box; }
.pin.staat .pin-dot{ fill:#4d96ff; } .pin.staat .pin-pulse{ stroke:#4d96ff; }
.pin.medizin .pin-dot{ fill:#34d399; } .pin.medizin .pin-pulse{ stroke:#34d399; }
.pin.sperrzone .pin-dot{ fill:#ef4444; } .pin.sperrzone .pin-pulse{ stroke:#ef4444; }
.pin.stadt .pin-dot{ fill:#c9a6ff; } .pin.stadt .pin-pulse{ stroke:#c9a6ff; }
.pin-label{ fill:var(--white); font:600 17px var(--font-display); text-anchor:middle; paint-order:stroke; stroke:#0a0614; stroke-width:5px; stroke-linejoin:round; opacity:.8; pointer-events:none; }
.pin:hover .pin-dot, .pin:focus-visible .pin-dot, .pin.active .pin-dot{ r:12; }
.pin:hover .pin-label, .pin.active .pin-label{ opacity:1; }
.pin.active .pin-pulse, .pin:focus-visible .pin-pulse{ animation: pin-pulse 1.6s ease-out infinite; }
@keyframes pin-pulse{ 0%{ opacity:.9; transform:scale(.6); } 100%{ opacity:0; transform:scale(2.2); } }
.pin.dim{ opacity:.15; }
.map-panel{
  position:sticky; top:calc(var(--wip-h) + 96px); min-height:260px; padding:clamp(22px,3vw,32px); border-radius:12px;
  background:linear-gradient(150deg, rgba(124,58,237,.18), rgba(16,10,28,.55) 60%); border:1px solid var(--glass-line-hi); box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.map-hint{ margin:0; color:var(--grey); }
.map-info{ display:grid; gap:10px; animation: path-in .4s var(--ease-out); }
.map-info h2{ margin:0; font-size:clamp(1.4rem,3vw,1.9rem); }
.map-info p{ margin:0; color:var(--grey); }
.map-cats{ display:flex; flex-wrap:wrap; gap:6px; }
.map-cat{ display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border-radius:5px; border:1px solid var(--glass-line); font:600 .78rem var(--font-body); color:var(--white); background:rgba(8,5,13,.35); }
@media (max-width:860px){ .map-layout{ grid-template-columns:1fr; } .map-panel{ position:static; min-height:0; } }
@media (prefers-reduced-motion: reduce){ .pin.active .pin-pulse{ animation:none; opacity:.6; } }
.pin-hit{ fill:transparent; }
.pin .pin-pulse, .pin .pin-label{ pointer-events:none; }
[hidden]{ display:none !important; }
.pin-label{ font-size:26px; stroke-width:7px; }
.map-region{ font-size:34px; }
.map-region.small{ font-size:22px; }
.pin .pin-dot{ r:12; } .pin:hover .pin-dot, .pin:focus-visible .pin-dot, .pin.active .pin-dot{ r:16; }
.pin .pin-pulse{ r:20; }
@media (max-width:640px){ .pin-label{ opacity:0; } .pin.active .pin-label{ opacity:1; } }
.flow-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.rule-cat-title{ display:inline; margin:0; font:inherit; letter-spacing:inherit; color:inherit; }
.impressum-block h2{ font-size:1rem; margin:0 0 8px; color:var(--white); font-family:var(--font-display); letter-spacing:.02em; }
.skip-link{ position:fixed; left:16px; top:calc(var(--wip-h) + 10px); z-index:3000; padding:10px 16px; border-radius:6px; background:var(--violet); color:var(--white); font:600 .95rem var(--font-display); text-decoration:none; transform:translateY(calc(-100% - 80px)); transition:transform .2s ease; }
.skip-link:focus{ transform:none; outline:2px solid var(--violet-bright); outline-offset:2px; }
main:focus{ outline:none; }

/* =========================================================
   CHARAKTER-STECKBRIEF
   ========================================================= */
.sb-layout{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:24px; align-items:start; }
.sb-form{ display:grid; gap:18px; padding:clamp(22px,3vw,34px); border-radius:12px; background:var(--glass-fill); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.sb-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sb-field{ display:grid; gap:6px; min-width:0; border:0; margin:0; padding:0; }
.sb-field label, .sb-field legend{ font:600 .9rem var(--font-display); letter-spacing:.02em; color:var(--white); padding:0; }
.sb-hint{ color:var(--grey); font-weight:500; margin-left:6px; }
.sb-field input, .sb-field select, .sb-field textarea{
  width:100%; padding:11px 14px; border-radius:7px; font:500 1rem var(--font-body); color:var(--white);
  background:rgba(8,5,13,.55); border:1px solid var(--glass-line); color-scheme:dark;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.sb-field textarea{ resize:vertical; line-height:1.55; }
.sb-field input::placeholder, .sb-field textarea::placeholder{ color:var(--grey-dim); }
.sb-field input:focus, .sb-field select:focus, .sb-field textarea:focus{ outline:none; border-color:var(--violet-bright); box-shadow:0 0 0 3px rgba(157,92,245,.25); }
.sb-field [aria-invalid="true"]{ border-color:#ef4444; }
.sb-err{ min-height:1.1em; color:#f87171; font-size:.82rem; }
.sb-err:empty{ min-height:0; }
.sb-count{ color:var(--grey); font-size:.82rem; }
.sb-count.ok{ color:#34d399; }
.trait-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.trait{ position:relative; cursor:pointer; }
.trait input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.trait span{ display:inline-block; padding:7px 12px; border-radius:6px; font:600 .86rem var(--font-body); color:var(--grey); border:1px solid var(--glass-line); background:rgba(8,5,13,.4); transition:all .2s ease; }
.trait input:checked + span{ color:var(--white); border-color:var(--violet-mid); background:rgba(124,58,237,.3); }
.trait input:focus-visible + span{ outline:2px solid var(--violet-bright); outline-offset:2px; }
.trait input:disabled + span{ opacity:.4; cursor:not-allowed; }
.sb-privacy{ margin:0; color:var(--grey-dim); font-size:.85rem; }
.sb-side{ position:sticky; top:calc(var(--wip-h) + 96px); display:grid; gap:16px; }
.sb-card{
  position:relative; overflow:hidden; padding:24px; border-radius:14px; display:grid; gap:14px;
  background:linear-gradient(135deg, rgba(124,58,237,.38), rgba(30,16,56,.75) 45%, rgba(12,8,22,.85));
  border:1px solid var(--glass-line-hi); box-shadow:var(--glass-shadow), 0 30px 70px -40px var(--violet-glow);
  transition:border-color .4s ease, box-shadow .4s ease;
}
.sb-card::after{ content:""; position:absolute; right:-18%; bottom:-30%; width:60%; aspect-ratio:1; background:url(assets/qv-logo.png) center/contain no-repeat; opacity:.08; transform:rotate(-12deg); pointer-events:none; }
.sb-card.complete{ border-color:rgba(52,211,153,.6); box-shadow:var(--glass-shadow), 0 30px 70px -40px rgba(52,211,153,.5); }
.sb-card-head{ display:flex; align-items:center; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--glass-line); }
.sb-card-head img{ width:38px; height:38px; object-fit:contain; }
.sb-card-head strong{ display:block; font:700 1rem var(--font-display); letter-spacing:.08em; text-transform:uppercase; }
.sb-card-head span{ color:var(--grey); font-size:.82rem; }
.sb-card-name{ font:700 clamp(1.5rem,3vw,2rem)/1.1 var(--font-display); overflow-wrap:anywhere; }
.sb-card-data{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0; }
.sb-card-data dt{ color:var(--grey); font-size:.75rem; }
.sb-card-data dd{ margin:2px 0 0; font-weight:600; overflow-wrap:anywhere; }
.sb-card-traits{ display:flex; flex-wrap:wrap; gap:6px; min-height:28px; }
.sb-card-traits span{ padding:4px 10px; border-radius:5px; font-size:.8rem; font-weight:600; background:rgba(8,5,13,.45); border:1px solid var(--glass-line); }
.sb-card-fivem{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding-top:12px; border-top:1px dashed var(--glass-line); font-size:.88rem; }
.sb-card-fivem span{ color:var(--grey); }
.sb-card-fivem b{ font-family:var(--font-display); overflow-wrap:anywhere; text-align:right; }
.sb-checks{ list-style:none; margin:0; padding:16px 18px; display:grid; gap:8px; border-radius:10px; border:1px solid var(--glass-line); background:rgba(8,5,13,.35); }
.sb-checks li{ display:flex; gap:10px; align-items:flex-start; color:var(--grey); font-size:.9rem; }
.sb-checks li::before{ content:""; flex:none; width:16px; height:16px; margin-top:3px; border-radius:50%; border:1.5px solid var(--grey-dim); }
.sb-checks li.ok{ color:var(--white); }
.sb-checks li.ok::before{ border-color:#34d399; background:#34d399 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230a0614' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.sb-actions{ display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:900px){ .sb-layout{ grid-template-columns:1fr; } .sb-side{ position:static; order:-1; } }
@media (max-width:560px){ .sb-row{ grid-template-columns:1fr; } .sb-card-data{ grid-template-columns:1fr 1fr; } }

/* =========================================================
   SPIELER-VERLAUF
   ========================================================= */
.vl-note{ margin:-6px 0 18px; padding:10px 14px; border-radius:7px; border:1px dashed var(--glass-line-hi); color:var(--violet-bright); font-size:.88rem; }
.vl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; }
.vl-card{ margin:0; padding:18px 18px 12px; border-radius:var(--glass-r); background:var(--glass-fill); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); min-width:0; }
.vl-card figcaption{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:baseline; margin-bottom:10px; }
.vl-card figcaption span{ font:600 1rem var(--font-display); }
.vl-card figcaption b{ font-weight:600; font-size:.88rem; color:var(--violet-bright); font-variant-numeric:tabular-nums; }
.vl-chart{ position:relative; }
.vl-svg{ display:block; width:100%; height:auto; overflow:visible; touch-action:pan-y; }
.vl-gl{ stroke:rgba(246,244,251,.07); stroke-width:1; }
.vl-axis{ fill:var(--grey); font:500 11px var(--font-body); font-variant-numeric:tabular-nums; }
.vl-line{ fill:none; stroke:#9d5cf5; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.vl-end{ fill:#c9a6ff; stroke:#120c20; stroke-width:2; }
.vl-cross{ stroke:rgba(246,244,251,.35); stroke-width:1; stroke-dasharray:3 3; }
.vl-bar{ fill:#7c3aed; transition:fill .2s ease; }
.vl-bar.best{ fill:#c9a6ff; }
.vl-bar.none{ fill:rgba(246,244,251,.08); }
.vl-tip{ position:absolute; z-index:5; pointer-events:none; padding:7px 10px; border-radius:6px; white-space:nowrap; background:rgba(18,12,32,.96); border:1px solid var(--glass-line-hi); box-shadow:0 10px 26px -10px rgba(0,0,0,.8); display:grid; gap:1px; font-size:.82rem; }
.vl-tip b{ color:var(--white); font-variant-numeric:tabular-nums; }
.vl-tip span{ color:var(--grey); }
.vl-empty{ margin:0; padding:40px 12px; text-align:center; color:var(--grey); font-size:.92rem; }
.vl-table{ margin-top:14px; }
.vl-table summary{ cursor:pointer; color:var(--grey); font-size:.9rem; width:max-content; }
.vl-table summary:hover{ color:var(--white); }
.vl-table-wrap{ overflow-x:auto; margin-top:10px; max-height:280px; overflow-y:auto; border-radius:8px; border:1px solid var(--glass-line); }
.vl-table table{ width:100%; border-collapse:collapse; font-size:.88rem; font-variant-numeric:tabular-nums; }
.vl-table th, .vl-table td{ padding:7px 14px; text-align:left; border-bottom:1px solid var(--glass-line); }
.vl-table th{ color:var(--grey); font-weight:600; position:sticky; top:0; background:#120c20; }
@media (max-width:860px){ .vl-grid{ grid-template-columns:1fr; } }
.news-link{ display:inline-block; margin-top:6px; color:var(--violet-bright); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(201,166,255,.35); }
.news-link:hover{ color:var(--white); border-color:var(--white); }

/* =========================================================
   TWITCH LIVE
   ========================================================= */
.live-badge{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; padding:3px 8px; border-radius:4px; background:#e11d48; color:#fff; font:700 .68rem var(--font-body); letter-spacing:.12em; vertical-align:middle; }
.live-badge i{ width:7px; height:7px; border-radius:50%; background:#fff; animation:blink 1.4s ease-in-out infinite; }
@keyframes blink{ 50%{ opacity:.3; } }
.streamer-card.is-live{ border-color:rgba(225,29,72,.6); box-shadow:var(--glass-shadow), 0 0 40px -14px rgba(225,29,72,.6); }
.live-info{ margin:-6px 0 14px; color:var(--grey); font-size:.88rem; }
.main-nav a.has-live{ position:relative; }
.main-nav a.has-live::before{ content:""; position:absolute; right:-9px; top:2px; width:7px; height:7px; border-radius:50%; background:#e11d48; box-shadow:0 0 8px #e11d48; animation:blink 1.4s ease-in-out infinite; }

/* =========================================================
   PATCHNOTES
   ========================================================= */
.pn-wrap{ max-width:860px; }
.dot.neu{ background:#34d399; } .dot.geaendert{ background:#c9a6ff; } .dot.behoben{ background:#f5b14a; }
.pn-list{ position:relative; display:grid; gap:18px; padding-left:26px; }
.pn-list::before{ content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--violet-mid), rgba(157,92,245,.1)); border-radius:2px; }
.pn-entry{ position:relative; padding:22px 24px; border-radius:var(--glass-r); background:var(--glass-fill); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.pn-entry::before{ content:""; position:absolute; left:-26px; top:28px; width:14px; height:14px; border-radius:50%; background:#120c20; border:2px solid var(--violet-mid); }
.pn-entry.latest{ border-color:var(--glass-line-hi); }
.pn-entry.latest::before{ background:var(--violet-bright); box-shadow:0 0 14px var(--violet); }
.pn-head{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:var(--grey); font-size:.88rem; }
.pn-version{ padding:4px 9px; border-radius:5px; border:1px solid var(--glass-line-hi); color:var(--violet-bright); font:700 .8rem var(--font-display); letter-spacing:.04em; }
.pn-new{ margin-left:auto; padding:3px 9px; border-radius:5px; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.45); color:#34d399; font-size:.75rem; font-weight:600; }
.pn-entry h2{ margin:12px 0 12px; font-size:1.35rem; }
.pn-entry ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.pn-entry li{ display:flex; gap:12px; align-items:baseline; }
.pn-tag{ flex:none; min-width:76px; text-align:center; padding:2px 8px; border-radius:4px; font-size:.74rem; font-weight:700; }
.pn-tag.neu{ color:#34d399; background:rgba(52,211,153,.12); }
.pn-tag.geaendert{ color:#c9a6ff; background:rgba(157,92,245,.16); }
.pn-tag.behoben{ color:#f5b14a; background:rgba(245,177,74,.12); }
@media (prefers-reduced-motion: reduce){ .live-badge i, .main-nav a.has-live::before{ animation:none; } }

/* =========================================================
   HUD-BUTTONS  (Vorgabe „Tactical Glassmorphism“, in QuantumV-Violett)
   Akzent ändern: nur --hud-accent / --hud-accent-rgb anpassen
   (z. B. Orange: #f59a23 / 245,154,35, hell: #ffb347).
   ========================================================= */
:root{
  --hud-accent: #9d5cf5;
  --hud-accent-light: #c9a6ff;
  --hud-accent-rgb: 157,92,245;
  --hud-bg: rgba(16,12,24,.72);
  --hud-bg-hover: rgba(30,22,46,.82);
  --hud-line: rgba(255,255,255,.12);
  --hud-r: 6px;
}

/* Grundform für alle Buttons */
.btn, .btn-solid, .btn-outline, .btn-ghost{
  position:relative; isolation:isolate;
  border-radius:var(--hud-r);
  font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing:.09em;
  color:var(--white);
  background:var(--hud-bg);
  border:1px solid var(--hud-line);
  box-shadow: inset 2px 0 0 rgba(var(--hud-accent-rgb),.75), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transform:none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .15s ease;
}
.btn .ip-text{ text-transform:none; letter-spacing:.02em; }
.btn .ip-copy-label{ text-transform:none; letter-spacing:.02em; }

/* Eckmarken oben rechts und unten links */
.btn::before, .btn::after{
  content:""; position:absolute; width:9px; height:9px; pointer-events:none;
  border:0 solid var(--hud-accent); opacity:.55; transition:opacity .2s ease, width .2s ease, height .2s ease;
  transform:none; background:none; inset:auto; z-index:1;
}
.btn::before{ top:-1px; right:-1px; border-top-width:2px; border-right-width:2px; border-top-right-radius:var(--hud-r); }
.btn::after{ bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px; border-bottom-left-radius:var(--hud-r); opacity:0; }

.btn:hover{
  background:var(--hud-bg-hover);
  border-color:rgba(var(--hud-accent-rgb),.5);
  color:var(--white);
  box-shadow: inset 3px 0 0 var(--hud-accent-light), inset 0 1px 0 rgba(255,255,255,.07), 0 0 20px -8px rgba(var(--hud-accent-rgb),.8);
  transform:none;
}
.btn:hover::before, .btn:hover::after{ opacity:1; width:12px; height:12px; }
.btn:active{
  background:rgba(var(--hud-accent-rgb),.24);
  border-color:var(--hud-accent);
  transform:translateY(1px);
}
.btn:focus-visible{ outline:2px solid var(--hud-accent-light); outline-offset:3px; }

/* Wichtige Aktion */
.btn-solid{
  background:linear-gradient(90deg, rgba(var(--hud-accent-rgb),.34), rgba(var(--hud-accent-rgb),.12) 85%), var(--hud-bg);
  border-color:rgba(var(--hud-accent-rgb),.6);
  box-shadow: inset 3px 0 0 var(--hud-accent-light), inset 0 1px 0 rgba(255,255,255,.1), 0 8px 24px -14px rgba(var(--hud-accent-rgb),.9);
}
.btn-solid::before, .btn-solid::after{ opacity:.9; border-color:var(--hud-accent-light); }
.btn-solid:hover{
  background:linear-gradient(90deg, rgba(var(--hud-accent-rgb),.5), rgba(var(--hud-accent-rgb),.2) 85%), var(--hud-bg);
  border-color:var(--hud-accent-light);
  box-shadow: inset 4px 0 0 var(--hud-accent-light), inset 0 1px 0 rgba(255,255,255,.12), 0 0 26px -6px rgba(var(--hud-accent-rgb),.85);
}
.btn-solid .ip-copy-label{ color:rgba(246,244,251,.7); }

/* Zurückhaltende Aktion */
.btn-ghost{ color:var(--grey); box-shadow: inset 2px 0 0 rgba(var(--hud-accent-rgb),.35), inset 0 1px 0 rgba(255,255,255,.04); }
.btn-ghost::before{ opacity:.3; }
.btn-ghost:hover{ color:var(--white); }

/* Kleine Buttons: Chips, Filter, Merkmale */
.chip, .frak-chip, .trait span{
  border-radius:5px; font-family:var(--font-display); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem;
  background:var(--hud-bg); border:1px solid var(--hud-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.chip{ color:var(--white); box-shadow: inset 2px 0 0 rgba(var(--hud-accent-rgb),.7), inset 0 1px 0 rgba(255,255,255,.05); transform:none; }
.chip:hover, .frak-chip:hover, .trait:hover span{
  background:var(--hud-bg-hover); border-color:rgba(var(--hud-accent-rgb),.5); color:var(--white);
  box-shadow: inset 2px 0 0 var(--hud-accent-light), 0 0 16px -8px rgba(var(--hud-accent-rgb),.9); transform:none;
}
.frak-chip[aria-selected="true"], .frak-chip[aria-pressed="true"], .trait input:checked + span{
  color:var(--white); border-color:var(--hud-accent);
  background:linear-gradient(90deg, rgba(var(--hud-accent-rgb),.32), rgba(var(--hud-accent-rgb),.1)), var(--hud-bg);
  box-shadow: inset 3px 0 0 var(--hud-accent-light), 0 0 18px -8px rgba(var(--hud-accent-rgb),.9);
}

/* Große Auswahl-Tabs (Wähle deinen Weg) */
.path-tab{ border-radius:var(--hud-r); background:var(--hud-bg); border-color:var(--hud-line); text-transform:uppercase; letter-spacing:.06em; }
.path-tab:hover{ background:var(--hud-bg-hover); border-color:rgba(var(--hud-accent-rgb),.5); box-shadow: inset 2px 0 0 var(--hud-accent-light), 0 0 18px -8px rgba(var(--hud-accent-rgb),.9); }
.path-tab[aria-selected="true"]{
  background:linear-gradient(90deg, rgba(var(--hud-accent-rgb),.36), rgba(var(--hud-accent-rgb),.1)), var(--hud-bg);
  border-color:var(--hud-accent);
  box-shadow: inset 3px 0 0 var(--hud-accent-light), 0 0 24px -10px rgba(var(--hud-accent-rgb),.9);
}

@media (prefers-reduced-motion: reduce){ .btn, .chip, .frak-chip, .path-tab{ transition:none; } }

/* Eckmarken an Buttons entfernt */
.btn::before, .btn::after{ content:none; display:none; }
/* Partner-Karte: kein violetter Glow-Strich beim Hover */
a.partner-card.partner-real:hover{ box-shadow: var(--glass-shadow); }

/* Streamer: Live-Vorschau */
.stream-preview{ position:relative; display:block; aspect-ratio:16/9; max-width:100%; margin:-6px -6px 18px; border-radius:8px; overflow:hidden; border:1px solid var(--glass-line); background:#0c0816; text-decoration:none; }
.stream-off{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:4px; text-align:center; padding:16px;
  background: radial-gradient(ellipse at 50% 40%, rgba(124,58,237,.22), transparent 70%), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px); }
.stream-off img{ width:44px; opacity:.55; filter:grayscale(.4); margin-bottom:6px; }
.stream-off b{ font:700 .95rem var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--grey); }
.stream-off small{ color:var(--grey-dim); font-size:.78rem; }
.stream-on{ position:absolute; inset:0; }
.stream-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.stream-preview:hover .stream-img{ transform:scale(1.03); }
.stream-tag{ position:absolute; left:10px; top:10px; display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:4px; background:#e11d48; color:#fff; font:700 .7rem var(--font-body); letter-spacing:.12em; text-transform:uppercase; }
.stream-tag i{ width:7px; height:7px; border-radius:50%; background:#fff; animation:blink 1.4s ease-in-out infinite; }
.stream-viewers{ position:absolute; left:10px; bottom:10px; padding:4px 9px; border-radius:4px; background:rgba(8,5,13,.78); color:#fff; font-size:.78rem; font-weight:600; }
.stream-preview:focus-visible{ outline:2px solid var(--violet-bright); outline-offset:3px; }

/* =========================================================
   STADTKARTE 2.0 (taktische Karte)
   ========================================================= */
.map-frame{ position:relative; background:#07050f; }
.map-svg{ max-height:none; aspect-ratio:1000/1200; cursor:default; }
.map-hud{ position:absolute; left:0; right:0; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; pointer-events:none;
  background:linear-gradient(rgba(7,5,15,.85), rgba(7,5,15,0)); }
.map-hud-title{ font:600 .72rem var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--grey); }
.map-hud-title b{ color:var(--violet-bright); margin-left:6px; }
.map-reset{ pointer-events:auto; cursor:pointer; padding:7px 12px; border-radius:5px; font:700 .72rem var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--white);
  background:var(--hud-bg); border:1px solid rgba(var(--hud-accent-rgb),.5); box-shadow: inset 2px 0 0 var(--hud-accent-light); }
.map-reset:hover{ background:var(--hud-bg-hover); box-shadow: inset 3px 0 0 var(--hud-accent-light), 0 0 18px -8px rgba(var(--hud-accent-rgb),.9); }
.map-reset:focus-visible{ outline:2px solid var(--violet-bright); outline-offset:2px; }

.ct{ stroke:rgba(201,166,255,.10); stroke-width:1; }
.ct3, .ct4{ stroke:rgba(201,166,255,.16); }
.ct5, .ct6, .ct7{ stroke:rgba(201,166,255,.24); }
.rd.hwy{ stroke:rgba(246,226,255,.22); stroke-width:3.2; stroke-linecap:round; }
.rd.main{ stroke:rgba(246,226,255,.14); stroke-width:2; stroke-linecap:round; stroke-dasharray:1 0; }
.co{ fill:rgba(201,166,255,.45); font:600 13px var(--font-display); letter-spacing:.1em; text-anchor:middle; }
.map-region{ fill:rgba(246,244,251,.38); font:700 30px var(--font-display); letter-spacing:.32em; text-transform:uppercase; text-anchor:middle; pointer-events:none; }
.map-region.small{ font-size:15px; letter-spacing:.24em; fill:rgba(246,244,251,.3); font-weight:600; }
.sweep{ transform-origin:500px 600px; transform-box:view-box; animation: sweep 9s linear infinite; pointer-events:none; }
@keyframes sweep{ to{ transform:rotate(360deg); } }

/* Marker */
.pin{ cursor:pointer; outline:none; transition:opacity .3s ease; }
.pin-hit{ fill:transparent; }
.pin .pin-mark{ fill:rgba(7,5,15,.85); stroke-width:2.5; transition: fill .2s ease; }
.pin .pin-core{ transition: r .2s ease; }
.pin .pin-pulse{ fill:none; stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; pointer-events:none; }
.pin.staat{ --pc:#4d96ff; } .pin.medizin{ --pc:#34d399; } .pin.sperrzone{ --pc:#ef4444; } .pin.stadt{ --pc:#c9a6ff; }
.pin .pin-mark{ stroke:var(--pc); } .pin .pin-core{ fill:var(--pc); } .pin .pin-pulse{ stroke:var(--pc); }
.pin:hover .pin-mark, .pin:focus-visible .pin-mark, .pin.active .pin-mark{ fill:var(--pc); }
.pin:hover .pin-core, .pin:focus-visible .pin-core, .pin.active .pin-core{ fill:#07050f; }
.pin.active .pin-pulse, .pin:focus-visible .pin-pulse{ animation: pin-pulse 1.6s ease-out infinite; }
.pin-tag{ pointer-events:none; transition:opacity .2s ease; }
.pin-tag rect{ fill:rgba(13,8,26,.92); stroke:var(--pc); stroke-opacity:.6; }
.pin-tag text{ fill:var(--white); font:700 13px var(--font-display); letter-spacing:.06em; }
.pin-lead{ stroke:var(--pc); stroke-opacity:.6; stroke-width:1.5; fill:none; }
.pin.dicht .pin-tag{ opacity:0; }
.map-frame.zoomed .pin.dicht .pin-tag, .pin:hover .pin-tag, .pin:focus-visible .pin-tag, .pin.active .pin-tag{ opacity:1; }
.pin.active .pin-tag rect{ fill:var(--pc); fill-opacity:.25; stroke-opacity:1; }
.pin.dim{ opacity:.15; }
.map-coord{ margin-top:4px; font:600 .78rem var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--grey-dim); }
@media (max-width:640px){ .pin .pin-tag{ opacity:0; } .pin.active .pin-tag, .map-frame.zoomed .pin .pin-tag{ opacity:1; } .map-region{ font-size:36px; } }
@media (prefers-reduced-motion: reduce){ .sweep{ animation:none; display:none; } }
.map-svg > :not(#map-pins){ pointer-events:none; }
.map-layout{ grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); }
.pin-tag text{ font-size:15px; }
@media (max-width:860px){ .map-layout{ grid-template-columns:1fr; } .map-hud-title b{ display:block; margin:2px 0 0; } }

/* Buttons einheitlich: keine Akzentlinie links, gleiche Kante rundum */
.btn, .btn-solid, .btn-outline, .btn-ghost{ box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.btn-solid{ box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 24px -14px rgba(var(--hud-accent-rgb),.9); }
.btn:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 20px -8px rgba(var(--hud-accent-rgb),.8); }
.btn-solid:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 26px -6px rgba(var(--hud-accent-rgb),.85); }
.btn-ghost{ box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.chip{ box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.chip:hover, .frak-chip:hover, .trait:hover span, .path-tab:hover{ box-shadow: 0 0 16px -8px rgba(var(--hud-accent-rgb),.9); }
.frak-chip[aria-selected="true"], .frak-chip[aria-pressed="true"], .trait input:checked + span{ box-shadow: 0 0 18px -8px rgba(var(--hud-accent-rgb),.9); }
.path-tab[aria-selected="true"]{ box-shadow: 0 0 24px -10px rgba(var(--hud-accent-rgb),.9); }
.map-reset, .map-reset:hover{ box-shadow: 0 0 18px -10px rgba(var(--hud-accent-rgb),.9); }
.btn-solid{ background:linear-gradient(rgba(var(--hud-accent-rgb),.26), rgba(var(--hud-accent-rgb),.26)), var(--hud-bg); }
.btn-solid:hover{ background:linear-gradient(rgba(var(--hud-accent-rgb),.4), rgba(var(--hud-accent-rgb),.4)), var(--hud-bg); }
.frak-chip[aria-selected="true"], .frak-chip[aria-pressed="true"], .trait input:checked + span, .path-tab[aria-selected="true"]{
  background:linear-gradient(rgba(var(--hud-accent-rgb),.24), rgba(var(--hud-accent-rgb),.24)), var(--hud-bg);
}
.map-svg{ aspect-ratio:1000/1500; }
.map-hud-actions{ display:flex; gap:8px; pointer-events:auto; }
.map-frame.orig .map-region{ fill:rgba(20,20,30,.55); }
.map-frame.orig .sweep, .map-frame.orig .mapgrid{ display:none; }
.map-frame.orig .co{ fill:rgba(20,20,40,.6); }
.sweep{ transform-origin:500px 750px; }
.map-region{ paint-order:stroke; stroke:rgba(7,5,15,.7); stroke-width:6px; stroke-linejoin:round; }
.map-frame.orig .map-region{ stroke:rgba(255,255,255,.5); }
.map-svg{ display:block; width:100%; height:min(82vh, 1080px); aspect-ratio:auto; }
.regions, .coords{ transition:opacity .3s ease; }
.map-frame.zoomed .regions, .map-frame.zoomed .coords{ opacity:0; }
@media (max-width:860px){ .map-svg{ height:auto; aspect-ratio:1000/1500; } }
@media (min-width:861px){
  .map-layout{ grid-template-columns:auto minmax(0,1fr); }
  .map-svg{ height:min(82vh, 1080px); width:calc(min(82vh, 1080px) * 2 / 3); }
  .map-frame{ width:max-content; max-width:100%; }
  .map-note{ max-width:calc(min(82vh, 1080px) * 2 / 3); }
}
.map-reset{ white-space:nowrap; padding:6px 10px; font-size:.68rem; }
.map-hud-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }