/* =====================================================================
   Poisn – neue Gestaltung (Update 59)
   Gemeinsame Design-Ebene für ALLE Seiten. Wird als letztes Stylesheet geladen
   (nach neon.css und ruhig.css) und ersetzt deren Optik: ruhiges Dunkel, EINE
   Akzentfarbe (Violett), flache Karten ohne Leuchten, neue Schriften.
   Die Schriften liegen auf unserem Server (/schrift, SIL Open Font License) –
   es wird nichts von Google oder anderen Anbietern geladen.
   Nur Bildschirm – Drucken bleibt unverändert.
   ===================================================================== */

/* Überschriften: Bricolage Grotesque · Text: Figtree · Zahlen und Etiketten: JetBrains Mono */
@font-face { font-family: "Poisn Titel"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/schrift/bricolage-latin-wght.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 Titel"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/schrift/bricolage-latin-ext-wght.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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 Text"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/schrift/figtree-latin-wght.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poisn Text"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/schrift/figtree-latin-ext-wght.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poisn Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/schrift/jetbrains-mono-latin-500.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poisn Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/schrift/jetbrains-mono-latin-ext-500.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: #0d0c13;
  --bg-card: #15141d;
  --bg-field: #1c1a27;
  --border: #2a2736;
  --fg-text: #f1eef9;
  --fg-muted: #aaa4bd;
  --accent: #7c4dff;
  --accent-dark: #6a3df0;
  --accent-light: #b9a2ff;
  --bg: #0d0c13; --card: #15141d; --field: #1c1a27; --text: #f1eef9; --muted: #aaa4bd;
  --neon: #7c4dff;
  --neon-hell: #b9a2ff;
  --neon-cyan: #3b82f6;
  --neon-gruen: #5fd38d;
  --neon-rot: #ff7a8a;
  --rand-neon: #3a3550;
  --ruhig-rand: #2a2736;
  --glow-klein: 0 0 0 rgba(0,0,0,0);
  --glow: 0 0 0 rgba(0,0,0,0);
  --schatten: 0 8px 24px rgba(0, 0, 0, .28);
  --verlauf: linear-gradient(135deg, #7c4dff 0%, #6a3df0 100%);
  --verlauf-hell: linear-gradient(135deg, #8d63ff 0%, #7c4dff 100%);
  --karte-licht: none;
  --display: "Poisn Titel", "Segoe UI", system-ui, sans-serif;
  --text-font: "Poisn Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Poisn Mono", ui-monospace, Consolas, monospace;
  --ok: #5fd38d; --warn: #ffc766; --fehler: #ff7a8a; --info-bg: #2d2450;
}

html { background-color: #0d0c13 !important; background-image: none !important; }
body { font-family: var(--text-font) !important; }
button, input, select, textarea { font-family: inherit; }
::selection { background: rgba(124, 77, 255, .55); color: #fff; }
* { scrollbar-color: #3a3550 transparent; }
::-webkit-scrollbar-thumb { background: #3a3550; }
::-webkit-scrollbar-thumb:hover { background: #5a4a9a; background-clip: padding-box; }

/* ---------------------------------------------------------------- Hintergrund (bewegt, aber ruhig) */
.neu-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.neu-bg .nb-grid { position: absolute; inset: -64px 0 0 0;
  background-image: linear-gradient(rgba(124, 77, 255, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 77, 255, .10) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 25%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 25%, #000 15%, transparent 78%);
  animation: nb-grid 16s linear infinite; }
.neu-bg .nb-blob { position: absolute; border-radius: 99px; filter: blur(80px); will-change: transform; }
.neu-bg .nb-1 { width: 520px; height: 520px; left: 4%; top: -60px; background: #7c4dff; opacity: .34; animation: nb-d1 24s ease-in-out infinite alternate; }
.neu-bg .nb-2 { width: 460px; height: 460px; right: 2%; top: 140px; background: #3b82f6; opacity: .20; animation: nb-d2 28s ease-in-out infinite alternate; }
.neu-bg .nb-3 { width: 380px; height: 380px; left: 42%; top: 55vh; background: #c026d3; opacity: .12; animation: nb-d1 32s ease-in-out infinite alternate-reverse; }
@keyframes nb-grid { from { background-position: 0 0, 0 0; } to { background-position: 0 64px, 0 0; } }
@keyframes nb-d1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(90px, 60px) scale(1.15); } }
@keyframes nb-d2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-100px, 50px) scale(.9); } }
/* Arbeitsbereiche (Team, Anmeldung): Hintergrund steht still – nichts lenkt beim Arbeiten ab */
.neu-bg.nb-still .nb-grid, .neu-bg.nb-still .nb-blob { animation: none; }
.neu-bg.nb-still .nb-1 { opacity: .16; } .neu-bg.nb-still .nb-2 { opacity: .08; } .neu-bg.nb-still .nb-3 { display: none; }
#particle-canvas { opacity: .55 !important; }

/* ---------------------------------------------------------------- Überschriften und Etiketten */
h1, h2, h3, 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, .ue-kachel .ue-wert, .ue-heute-kopf b {
  font-family: var(--display) !important;
}
h1, h2 { letter-spacing: -.02em; text-shadow: none !important; font-weight: 700; }
h3 { letter-spacing: -.01em; }
.sec-eyebrow, .eyebrow, .v-block h4, .naechste-titel, .lobby-wahl-titel, .mt-zahlen, .karte > h2 {
  font-family: var(--mono) !important; font-weight: 500; letter-spacing: .12em !important; text-transform: uppercase;
  color: var(--accent-light) !important; text-shadow: none !important; font-size: 12.5px;
}
.karte > h2 { font-size: 13px !important; }
.sec-eyebrow::before, .sec-eyebrow::after { display: none !important; }
.hl, .claim .hl { text-shadow: none !important; color: var(--accent-light); }
.ue-kachel .ue-titel, .mt-zahlen { font-family: var(--mono); letter-spacing: .08em; }

/* ---------------------------------------------------------------- Menü */
.nav-shell, .nav-shell.offen {
  background: rgba(21, 20, 29, .78) !important;
  border: 1px solid #2a2736 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.menu-toggle { color: var(--accent-light) !important; font-family: var(--display) !important; letter-spacing: .08em !important; border-radius: 10px !important; }
.nav-shell.offen .menu-toggle, .site-nav a.active { background: #2d2450 !important; color: #f1eef9 !important; box-shadow: none !important; }
.site-nav a { font-family: var(--text-font); font-weight: 500; letter-spacing: 0; font-size: 14.5px !important; border-radius: 10px !important; }
.site-nav a:hover { color: #fff !important; background: rgba(124, 77, 255, .16) !important; }
.site-nav a.nav-discord { background: #5865f2 !important; color: #fff !important; margin-left: 4px; }
.site-nav a.nav-discord:hover { background: #6b77ff !important; }
/* Update 60: sechster Menüpunkt (Esport) – das Menü braucht etwas mehr Platz */
@media (min-width: 781px) { .nav-shell.offen .site-nav { max-width: 900px; } }
@media (min-width: 781px) and (max-width: 899px) { .site-nav a { padding: 8px 10px !important; font-size: 14px !important; } }
/* 641–780 px: zu schmal für alle Einträge in einer Zeile – dann wie am Handy als Liste unter dem Knopf */
@media (min-width: 641px) and (max-width: 780px) {
  header.site-header { padding: 14px 12px 0; }
  .site-nav { position: absolute !important; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-8px); flex-direction: column;
    gap: 2px; min-width: 200px; max-width: none !important; max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; margin-left: 0 !important; padding: 7px;
    background: #15141d !important; border: 1px solid #2a2736 !important; border-radius: 14px !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .6) !important; }
  .nav-shell.offen .site-nav { max-width: none !important; max-height: 460px !important; opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
  .site-nav a { padding: 12px 18px !important; text-align: center; }
  .site-nav a.nav-discord { margin: 4px 0 0; }
}
@media (max-width: 640px) { .nav-shell.offen .site-nav { max-height: 460px !important; } }
@media (max-width: 640px) {
  .site-nav { background: #15141d !important; border-color: #2a2736 !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .6) !important; border-radius: 14px !important; }
  .site-nav a.nav-discord { margin: 4px 0 0; }
}

/* ---------------------------------------------------------------- Karten: flach, eine Linie */
.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, .zeiten-karte, .live-karte, .t-karte, .turnier-karte, .s-karte, .streamer-karte, form#formular,
.bw-karte, .mt-zeile, .quick-karte, .login-karte {
  background-image: none !important;
  background-color: #15141d;
  border-color: #2a2736 !important;
  border-radius: 20px;
  box-shadow: none !important;
}
.verwaltung > summary, .v-inhalt { border-color: #2a2736 !important; box-shadow: none !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: #7c4dff !important; box-shadow: none !important; transform: translateY(-2px);
}
.tier-card.partner { border-color: #7c4dff !important; background-image: linear-gradient(135deg, rgba(124, 77, 255, .18), transparent 70%) !important; box-shadow: none !important; }
.kontakt-box::before { display: none; }
.ue-kachel.gut, .ue-kachel.hinweis, .ue-kachel.warnung, .ue-kachel.live { border-left-width: 1px !important; box-shadow: none !important; }
.ue-kachel.gut { border-color: rgba(95, 211, 141, .45) !important; }
.ue-kachel.hinweis { border-color: rgba(185, 162, 255, .45) !important; }
.ue-kachel.warnung, .ue-kachel.live { border-color: rgba(255, 122, 138, .55) !important; }
.ue-gruss { text-shadow: none !important; font-weight: 700; }

/* ---------------------------------------------------------------- Knöpfe */
.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: #7c4dff !important; background-image: none !important;
  border-color: #7c4dff !important; color: #fff !important;
  border-radius: 12px; box-shadow: none !important; text-shadow: none !important; font-weight: 600;
}
.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: #8d63ff !important; box-shadow: none !important; transform: none;
}
.v-knopf:disabled, .knopf:disabled, .mt-k:disabled, #submitBtn:disabled, .absenden:disabled, button.primaer:disabled { background: #2a2736 !important; color: #7f7894 !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: #7c4dff !important; background: rgba(124, 77, 255, .12) !important; box-shadow: none !important;
}
.mt-k.gruen { background: #1f7a45 !important; box-shadow: none !important; }
.v-knopf.live-rot, .knopf.rot { box-shadow: none !important; }
.kontakt-knopf, .hero-knopf, .mk-knopf { font-family: var(--text-font); letter-spacing: 0; font-weight: 600; }
.hero-knopf { border-radius: 12px !important; }
.hero-knopf:not(.haupt) { border-color: #3a3550 !important; box-shadow: none !important; background: rgba(21, 20, 29, .6) !important; }
.hero-knopf.haupt { background: #5865f2 !important; box-shadow: none !important; }

/* ---------------------------------------------------------------- Eingaben */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus, textarea:focus, select:focus {
  border-color: #7c4dff !important; box-shadow: 0 0 0 3px rgba(124, 77, 255, .28) !important;
}
:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }

/* ---------------------------------------------------------------- Status, Live, Abzeichen */
.status.open, .status.offen, .status.closed, .mt-status.an, .live-zustand.an, .rolle-plakette, .bw-marke, .closing .tag { box-shadow: none !important; }
.status { font-family: var(--mono); letter-spacing: .04em; }
.reiter-zahl, .ar-zahl { box-shadow: none !important; background: #ff7a8a !important; color: #2b0710 !important; font-weight: 700; }
.zf-warnung { box-shadow: none !important; }

/* ---------------------------------------------------------------- Team-Bereich und Handy-App */
.reiter-leiste { background: rgba(17, 15, 24, .9) !important; border-color: #2a2736 !important; border-radius: 14px !important; box-shadow: none !important; }
.reiter-knopf { letter-spacing: 0; font-family: var(--text-font) !important; font-weight: 600; border-radius: 10px !important; }
.reiter-knopf.aktiv { background: #7c4dff !important; border-color: #7c4dff !important; box-shadow: none !important; }
.v-block h4 { letter-spacing: .12em !important; }
.app-leiste { background: rgba(17, 15, 24, .94) !important; border-top: 1px solid #2a2736 !important; box-shadow: none !important; }
.app-reiter.aktiv { background: #2d2450 !important; box-shadow: none !important; }
.app-reiter.aktiv .ar-symbol { filter: none !important; }
.sprung { border-color: #2a2736 !important; box-shadow: none !important; border-radius: 14px !important; }
.sprung a.aktiv { background: #7c4dff !important; box-shadow: none !important; }
table tr.t-kopf th { font-family: var(--mono); letter-spacing: .06em; }
footer a:hover, .seiten-fuss a:hover { color: var(--accent-light) !important; text-shadow: none !important; }
.hero-logo, .logo, .kopf-logo, .login-karte img { filter: none; }

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

/* Team-Bereich (Update 59): Unter-Reiter in der Verwaltung */
@media screen {
  .unter-leiste { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 4px; width: fit-content; max-width: 100%; border: 1px solid #2a2736; border-radius: 14px; background: rgba(21,20,29,.7); }
  .unter-knopf { font: inherit; font-weight: 600; font-size: 14px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--fg-muted, #aaa4bd); cursor: pointer; width: auto; margin: 0; }
  .unter-knopf:hover { color: #fff; }
  .unter-knopf.aktiv { background: #2d2450; color: #fff; }
  .unter-panel[hidden] { display: none; }
}
@media screen { body:not(.reiter-start) .zf-nur-start { display: none; } }