/* =====================================================================
   Poisn Neon-Gaming-Design (Update 46)
   Eine gemeinsame Design-Ebene für ALLE Seiten (öffentlich, Management,
   Team-Bereich, Handy-App). Wird als letztes Stylesheet geladen und
   verfeinert die bestehenden Seiten – Aufbau und Funktionen bleiben gleich.
   Lila + Partikel bleiben der Blickfang. Nur Bildschirm – Drucken unverändert.
   ===================================================================== */

/* Überschriften-Schrift (Chakra Petch, SIL Open Font License – siehe /schrift/OFL.txt) */
@font-face { font-family: "Poisn Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/schrift/chakra-petch-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poisn Display"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/schrift/chakra-petch-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poisn Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/schrift/chakra-petch-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poisn Display"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/schrift/chakra-petch-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@media screen {

/* ---------------------------------------------------------------- Farben */
:root {
  --bg-dark: #0f0c17;
  --bg-card: #1b1626;
  --bg-field: #262036;
  --border: #382d52;
  --fg-text: #eeeaf7;
  --fg-muted: #a9a3bd;
  --accent: #a855f7;
  --accent-dark: #7c3aed;
  --accent-light: #c084fc;
  /* unterschreiben.html nutzt andere Namen */
  --bg: #0f0c17; --card: #1b1626; --field: #262036; --text: #eeeaf7; --muted: #a9a3bd;
  /* neu */
  --neon: #a855f7;
  --neon-hell: #d8b4fe;
  --neon-cyan: #22d3ee;
  --neon-gruen: #4ade80;
  --neon-rot: #f43f5e;
  --rand-neon: rgba(168, 85, 247, .38);
  --glow-klein: 0 0 14px rgba(168, 85, 247, .28);
  --glow: 0 0 26px rgba(168, 85, 247, .32);
  --schatten: 0 10px 30px rgba(0, 0, 0, .40);
  --verlauf: linear-gradient(135deg, #6d28d9 0%, #9333ea 48%, #c026d3 100%);
  --verlauf-hell: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #d946ef 100%);
  --karte-licht: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 42%);
  --display: "Poisn Display", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

/* Hintergrund: tiefes Violett mit Lichtflecken – die Partikel liegen darüber */
html {
  background-color: #0f0c17 !important;
  background-image:
    radial-gradient(1100px 600px at 50% -10%, rgba(124, 58, 237, .26), transparent 62%),
    radial-gradient(760px 520px at 105% 105%, rgba(34, 211, 238, .06), transparent 60%),
    radial-gradient(720px 520px at -5% 80%, rgba(192, 38, 211, .08), transparent 60%) !important;
  background-attachment: fixed !important;
  min-height: 100%;
  font-variant-ligatures: none;   /* sonst Lücken in „Waffencodes“ bei Sperrschrift */
}
body { background: transparent !important; }
::selection { background: rgba(168, 85, 247, .5); color: #fff; }
* { scrollbar-color: rgba(168, 85, 247, .5) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, .45); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(192, 132, 252, .7); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
#particle-canvas { opacity: .9; }

/* ---------------------------------------------------------------- Überschriften */
h1, h2, legend, .sec-head h2, .s-titel, .tier-name, .offer-title, .numbered-title, .sl-titel, .ue-gruss,
.verwaltung > summary, .reiter-knopf, .app-reiter .ar-titel, .karte > h2, .kontakt-box h2, .mk-titel, .t-name {
  font-family: var(--display);
  letter-spacing: .2px;
}
h1, h2 { text-shadow: 0 0 22px rgba(168, 85, 247, .28); }
.sec-eyebrow, .eyebrow, .v-block h4, .naechste-titel, .lobby-wahl-titel, .mt-zahlen {
  text-shadow: 0 0 12px rgba(168, 85, 247, .35);
}
.sec-eyebrow, .eyebrow { color: var(--neon-hell) !important; font-family: var(--display); letter-spacing: 2.5px; }
/* kleine Neon-Striche links und rechts an den Abschnitts-Überschriften */
.sec-eyebrow { display: inline-flex !important; align-items: center; gap: 10px; }
.sec-eyebrow::before, .sec-eyebrow::after {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-light)); box-shadow: 0 0 8px rgba(192, 132, 252, .8);
}
.sec-eyebrow::after { background: linear-gradient(90deg, var(--accent-light), transparent); }
.hl, .claim .hl { text-shadow: 0 0 26px rgba(192, 132, 252, .55); }

/* ---------------------------------------------------------------- Menü (öffentliche Seiten) */
.nav-shell {
  background: rgba(20, 15, 32, .72) !important;
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--rand-neon) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 8px 30px rgba(0, 0, 0, .45), var(--glow-klein);
}
.nav-shell.offen { box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 8px 30px rgba(0, 0, 0, .45), 0 0 30px rgba(168, 85, 247, .32) !important; }
.menu-toggle { color: var(--neon-hell) !important; font-family: var(--display) !important; letter-spacing: 2px !important; }
.nav-shell.offen .menu-toggle, .site-nav a.active {
  background: var(--verlauf) !important; color: #fff !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, .45), 0 0 0 1px rgba(216, 180, 254, .25) inset;
}
.site-nav a { font-family: var(--display); letter-spacing: .4px; font-size: 13.5px !important; }
.site-nav a:hover { color: #fff !important; background: rgba(168, 85, 247, .16) !important; }
@media (max-width: 640px) {
  .site-nav { background: rgba(18, 14, 28, .97) !important; border-color: var(--rand-neon) !important;
              box-shadow: 0 16px 40px rgba(0, 0, 0, .6), var(--glow) !important; }
}

/* ---------------------------------------------------------------- Karten */
.card, .karte, .kontakt-box, .tier-card, .build, .meta-woche, .g-spiele, .s-cta, .s-ordner, .faq, .mk-karte,
.ref-karte, .streamer-link, .ue-kachel, .ue-heute, .page > .kopf:not(:has(h1)), .verwaltung > summary, .v-inhalt, .numbered-item,
.zeiten-karte, .live-karte, .t-karte, .turnier-karte, .s-karte, .streamer-karte, form#formular, .bw-karte, .mt-zeile {
  background-image: var(--karte-licht);
}
.card, .karte, .kontakt-box, .tier-card, .build, .meta-woche, .s-cta, .s-ordner, .faq, .mk-karte,
.ref-karte, .streamer-link, .ue-heute, .page > .kopf:not(:has(h1)), .zeiten-karte, .t-karte, .turnier-karte, .s-karte, .streamer-karte, form#formular {
  border-color: rgba(168, 85, 247, .26) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .025) inset, var(--schatten);
}
/* Karten, die man anklicken kann: leuchten beim Drüberfahren */
.build, .s-ordner, .streamer-link, .ue-kachel, .faq, .tier-card, .ref-karte, .bw-karte, .quick-karte {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.build:hover, .s-ordner:hover, .streamer-link:hover, .ue-kachel:hover, .faq:hover, .tier-card:hover, .ref-karte:hover, .bw-karte:hover, .quick-karte:hover {
  border-color: rgba(192, 132, 252, .6) !important;
  box-shadow: 0 0 0 1px rgba(216, 180, 254, .10) inset, var(--schatten), var(--glow) !important;
}
.tier-card.partner { box-shadow: 0 0 0 1px rgba(216, 180, 254, .12) inset, var(--schatten), 0 0 40px rgba(168, 85, 247, .22) !important; }
.kontakt-box { position: relative; overflow: hidden; }
.kontakt-box::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 220px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(168, 85, 247, .22), transparent); filter: blur(6px);
}
.kontakt-box > * { position: relative; }

/* ---------------------------------------------------------------- Knöpfe */
/* Hauptknöpfe: Verlauf + Neon-Glow */
.v-knopf:not(.grau):not(.gefahr):not(.live-rot), .knopf:not(.grau):not(.rot):not(.aus), .mt-k:not(.grau):not(.gruen),
.kontakt-knopf.haupt, .absenden, #submitBtn, .tb-pfeil, .mk-knopf:not(.zweit), button.primaer, button.gross, a.haupt:not(.hero-knopf), .knopf.haupt,
.login-karte button, .card > form button[type=submit], .card form button#btn, form#loginForm button, form#einladungForm button {
  background: var(--verlauf) !important;
  border-color: rgba(216, 180, 254, .35) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 6px 20px rgba(124, 58, 237, .35);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
.v-knopf:not(.grau):not(.gefahr):not(.live-rot):hover, .knopf:not(.grau):not(.rot):not(.aus):hover, .mt-k:not(.grau):not(.gruen):hover,
.kontakt-knopf.haupt:hover, .absenden:hover:not(:disabled), #submitBtn:hover:not(:disabled), .tb-pfeil:hover, .mk-knopf:not(.zweit):hover,
button.primaer:hover, button.gross:hover, a.haupt:not(.hero-knopf):hover, .knopf.haupt:hover, .login-karte button:hover {
  background: var(--verlauf-hell) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 8px 26px rgba(124, 58, 237, .45), 0 0 22px rgba(192, 132, 252, .45);
  transform: translateY(-1px);
}
.v-knopf:disabled, .knopf:disabled, .mt-k:disabled, #submitBtn:disabled, .absenden:disabled, button.primaer:disabled {
  background: #3a334b !important; box-shadow: none !important; transform: none !important; filter: grayscale(.4);
}
/* Nebenknöpfe: dunkel mit Neon-Rand beim Drüberfahren */
.v-knopf.grau, .knopf.grau, .mt-k.grau, .kontakt-knopf.neben, .mk-knopf.zweit, .abmelden, .app-knopf, .kopf button:not(.knopf) {
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease, background .15s ease !important;
}
.v-knopf.grau:hover, .knopf.grau:hover, .mt-k.grau:hover, .kontakt-knopf.neben:hover, .mk-knopf.zweit:hover, .app-knopf:hover, .kopf button:not(.knopf):not(.abmelden):hover {
  border-color: var(--accent-light) !important; color: #fff !important; box-shadow: var(--glow-klein);
  background: rgba(168, 85, 247, .12) !important;
}
.mt-k.gruen { box-shadow: 0 6px 20px rgba(22, 163, 74, .35), 0 0 18px rgba(74, 222, 128, .25); }
.v-knopf.live-rot, .knopf.rot { box-shadow: 0 6px 20px rgba(220, 38, 38, .35), 0 0 16px rgba(244, 63, 94, .3); }
.kontakt-knopf, .hero-knopf, .mk-knopf { font-family: var(--display); letter-spacing: .4px; }
.hero-knopf:not(.haupt) { border-color: var(--rand-neon) !important; box-shadow: var(--glow-klein); }
.hero-knopf.haupt { box-shadow: 0 8px 26px rgba(88, 101, 242, .38), 0 0 22px rgba(88, 101, 242, .35) !important; }

/* ---------------------------------------------------------------- Eingabefelder */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), textarea, select {
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .22), 0 0 18px rgba(168, 85, 247, .22) !important;
  outline: none;
}
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
::placeholder { color: #7f7894; }

/* ---------------------------------------------------------------- Status, Live, Abzeichen */
@keyframes poisnPuls {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
@keyframes poisnPulsRot {
  0%   { box-shadow: 0 0 0 0 rgba(244, 63, 94, .6); }
  70%  { box-shadow: 0 0 0 9px rgba(244, 63, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}
.mt-status.an .mt-punkt { animation: poisnPuls 2s infinite; }
.live-zustand.an .live-punkt, .sl-live, .live-punkt.an, .punkt-live { animation: poisnPulsRot 2s infinite; }
.status { font-family: var(--display); letter-spacing: .5px; }
.status.open, .status.offen { box-shadow: 0 0 0 1px rgba(74, 222, 128, .35) inset, 0 0 18px rgba(74, 222, 128, .22); }
.status.closed { box-shadow: 0 0 0 1px rgba(248, 113, 113, .3) inset; }
.mt-status.an, .live-zustand.an { box-shadow: 0 0 22px rgba(74, 222, 128, .14); }
.rolle-plakette, .bw-marke, .closing .tag { box-shadow: 0 0 12px rgba(168, 85, 247, .22); }
.closing .tag { font-family: var(--display); }

/* ---------------------------------------------------------------- Team-Bereich (/videos) */
@media (min-width: 1120px) { body:has(.reiter-leiste) .page { max-width: 1060px; } }
.page > .kopf:not(:has(h1)) { border-radius: 16px !important; }
.reiter-leiste {
  background: rgba(17, 13, 27, .82) !important;
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-color: var(--rand-neon) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), var(--glow-klein);
}
.reiter-knopf { letter-spacing: .3px; transition: background .15s ease, color .15s ease, box-shadow .15s ease !important; }
.reiter-knopf.aktiv {
  background: var(--verlauf) !important; border-color: rgba(216, 180, 254, .35) !important;
  box-shadow: 0 0 18px rgba(168, 85, 247, .5), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}
.reiter-zahl { box-shadow: 0 0 10px rgba(244, 63, 94, .55); }
.verwaltung > summary { border-color: rgba(168, 85, 247, .24) !important; font-size: 14.5px !important; transition: border-color .15s, box-shadow .15s; }
.verwaltung > summary:hover, .verwaltung[open] > summary { border-color: rgba(192, 132, 252, .55) !important; box-shadow: var(--glow-klein); }
.verwaltung[open] > summary { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.v-inhalt { border-color: rgba(168, 85, 247, .24) !important; }
.v-block h4 { color: var(--neon-hell) !important; font-family: var(--display); letter-spacing: 2px !important; }
.ue-gruss { font-size: 22px !important; text-shadow: 0 0 20px rgba(168, 85, 247, .4); }
.ue-kachel { border-color: rgba(168, 85, 247, .22) !important; }
.ue-kachel .ue-wert { font-family: var(--display); font-size: 20px; letter-spacing: .2px; }
.ue-kachel .ue-titel { letter-spacing: 1.4px; }
.ue-kachel.gut     { border-left-color: var(--neon-gruen) !important; box-shadow: -6px 0 18px -10px rgba(74, 222, 128, .9); }
.ue-kachel.hinweis { border-left-color: var(--accent-light) !important; box-shadow: -6px 0 18px -10px rgba(192, 132, 252, .95); }
.ue-kachel.warnung { border-left-color: var(--neon-rot) !important; box-shadow: -6px 0 18px -10px rgba(244, 63, 94, .95); }
.ue-kachel.live    { border-left-color: var(--neon-rot) !important; box-shadow: -6px 0 22px -8px rgba(244, 63, 94, 1); }
.ue-heute-kopf b { font-family: var(--display); font-size: 15px; letter-spacing: .3px; }
.ue-zeile { transition: border-color .15s, box-shadow .15s; }
.ue-zeile:hover { box-shadow: var(--glow-klein); }
.zf-warnung { box-shadow: 0 0 22px rgba(251, 191, 36, .12); }

/* ---------------------------------------------------------------- Handy-App (/app) */
.app-leiste {
  background: rgba(15, 12, 24, .9) !important;
  backdrop-filter: blur(14px) saturate(150%) !important; -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  border-top: 1px solid var(--rand-neon) !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .5), 0 -1px 18px rgba(168, 85, 247, .18);
}
.app-reiter.aktiv { background: rgba(168, 85, 247, .16) !important; box-shadow: 0 0 0 1px rgba(192, 132, 252, .35) inset, 0 0 18px rgba(168, 85, 247, .35); }
.app-reiter.aktiv .ar-symbol { filter: drop-shadow(0 0 8px rgba(192, 132, 252, .8)) !important; }
.app-reiter.aktiv .ar-titel { color: #fff; }
.ar-zahl { box-shadow: 0 0 10px rgba(244, 63, 94, .6); }
.karte > h2 { color: var(--neon-hell) !important; letter-spacing: 1.6px !important; text-shadow: 0 0 12px rgba(168, 85, 247, .35); }
.login-karte { box-shadow: 0 0 0 1px rgba(255, 255, 255, .03) inset, var(--schatten), var(--glow) !important; }

/* ---------------------------------------------------------------- Öffentliche Seiten */
.hero-logo, .logo, .kopf-logo, .login-karte img { filter: drop-shadow(0 6px 28px rgba(168, 85, 247, .42)); }
.quick-karte { border-color: rgba(168, 85, 247, .26) !important; }
.lobby { transition: border-color .15s, box-shadow .15s; }
.lobby:hover:not(.voll) { border-color: rgba(192, 132, 252, .55); }
.lobby:has(input:checked) { box-shadow: 0 0 20px rgba(168, 85, 247, .35); }
.sprung { border-color: var(--rand-neon) !important; box-shadow: 0 8px 26px rgba(0, 0, 0, .4), var(--glow-klein); }
.sprung a.aktiv { background: var(--verlauf) !important; box-shadow: 0 0 14px rgba(168, 85, 247, .5); }
table tr.t-kopf th { font-family: var(--display); letter-spacing: .5px; }
footer a:hover, .seiten-fuss a:hover { color: var(--neon-hell) !important; text-shadow: 0 0 10px rgba(168, 85, 247, .6); }

/* ---------------------------------------------------------------- Ruhig, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
}