/* DARK CITY — V13 visual color system.
   The geometry and breakpoints live in site-v12.css, which is deliberately untouched.
   The vivid purple/indigo palette is sourced from the supplied geometric D mark. */
:root {
  --dc-bg: #101020;
  --dc-ink: #17132c;
  --dc-indigo: #36137f;
  --dc-violet: #781cf2;
  --dc-purple: #6417e4;
  --dc-bright: #a56aff;
  --dc-lavender: #d6c0ff;
  --dc-border: rgba(163,119,255,.28);
  --dc-glass: rgba(41,31,82,.40);
  --dc-gradient: linear-gradient(108deg,#4c20bc 0%,#7119e6 46%,#9b59ff 100%);
  --primary-color: rgba(113,25,230,.85);
  --secondary-color: rgba(89,47,218,.88);
  --accent-color: rgba(165,106,255,.88);
  --orange-bright: #ad84ff;
  --orange-glow: rgba(113,25,230,.28);
  --glass-bg: rgba(41,31,82,.40);
  --glass-border: rgba(163,119,255,.28);
  --card-bg: rgba(41,31,82,.38);
  --dark-bg: #101020;
  --text-color:#f3efff;
  --text-secondary:#bdafd9;
}
body {
  color: var(--text-color);
  background: radial-gradient(ellipse 62% 64% at 48% 22%, rgba(74,35,142,.30), transparent 79%),
              radial-gradient(ellipse 57% 45% at 4% 62%, rgba(69,27,146,.30), transparent 80%),
              radial-gradient(ellipse 58% 45% at 96% 78%, rgba(77,43,165,.25), transparent 80%),
              #101020 !important;
}
/* Keep a soft GTA photo behind the content, without the original orange/pink wash. */
body::after {
  filter: blur(11px) grayscale(1) brightness(.79) !important;
  opacity:.15!important;
  mix-blend-mode: luminosity;
}
body::before {
  background: radial-gradient(ellipse 48% 42% at 22% 28%, rgba(111,36,232,.19),transparent 88%),
              radial-gradient(ellipse 58% 48% at 82% 60%, rgba(94,56,231,.16),transparent 82%),
              radial-gradient(ellipse 46% 34% at 55% 95%,rgba(122,73,244,.12),transparent 83%) !important;
}
.grid-background {
  background-image: linear-gradient(rgba(137,93,248,.027) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(137,93,248,.027) 1px,transparent 1px) !important;
}
.orb1 {background:radial-gradient(circle,rgba(111,25,233,.27),transparent 70%)!important;}
.orb2 {background:radial-gradient(circle,rgba(88,71,235,.19),transparent 70%)!important;}
.orb3 {background:radial-gradient(circle,rgba(151,89,249,.13),transparent 70%)!important;}
.hero::before {
  background: radial-gradient(49% 35% at 50% 30%,rgba(106,43,214,.17),transparent 100%),
              radial-gradient(35% 28% at 16% 34%,rgba(84,39,192,.09),transparent 100%),
              radial-gradient(35% 32% at 84% 38%,rgba(84,62,216,.10),transparent 100%)!important;
}
.hdr,.hdr.hdr-scrolled {
  background: rgba(20,14,43,.85)!important;
  border-bottom-color:rgba(151,103,252,.17)!important;
  box-shadow:0 7px 30px rgba(11,8,30,.17)!important;
  backdrop-filter:blur(18px) saturate(124%)!important;
}
.hdr .dc-brand-type,.dc-hero-type {
  background:linear-gradient(105deg,#8d4cff 0%,#ad70ff 49%,#e0d1ff 100%)!important;
  background-clip:text!important;-webkit-background-clip:text!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important;
}
.hdr .dc-brand-type small,.dc-hero-type small {color:#e0d1ff!important;-webkit-text-fill-color:#e0d1ff!important;}
.dc-hero-logo img,.dc-brand-logo {filter:drop-shadow(0 0 14px rgba(111,21,239,.48))!important;}
.hdr .hdr-link {color:rgba(220,212,243,.68)!important;}
.hdr .hdr-link:hover {color:#faf8ff!important;background:rgba(124,74,245,.09)!important;}
.hdr .hdr-link-active,.hdr .hdr-link[aria-current="page"] {color:#f8f3ff!important;}
.hdr .hdr-link i,.hdr .hdr-link-active i,.hdr .hdr-link[aria-current="page"] i {color:#aa76ff!important;}
.hdr .hdr-indicator {background:linear-gradient(90deg,#651dff,#ab78ff)!important;box-shadow:0 0 11px rgba(111,28,242,.40)!important;opacity:1!important;}
.hdr .hdr-wiki,.hdr .hdr-wiki.hdr-wiki-aktiv {
  color:#ccafff!important;background:rgba(91,39,204,.12)!important;
  border-color:rgba(136,71,244,.30)!important;
}
.hdr .hdr-wiki:hover {background:rgba(103,42,224,.23)!important;border-color:rgba(158,97,252,.5)!important;color:#efe6ff!important;}
.hdr .hdr-wiki::before {background:linear-gradient(90deg,transparent,rgba(143,84,251,.18),transparent)!important;}
.hdr .hdr-right .hdr-discord:not(.hdr-unban) {
  background:rgba(56,45,114,.18)!important;
  border-color:rgba(139,104,247,.27)!important;
}
.hdr .hdr-right .hdr-discord.hdr-unban {
  background:rgba(72,36,138,.16)!important;
  border-color:rgba(153,104,247,.26)!important;
}
.hdr .hdr-discord-icon,.hdr .hdr-unban-icon {background:rgba(113,66,233,.20)!important;border-color:rgba(160,111,255,.27)!important;color:#c09aff!important;}
.hdr .hdr-discord-count,.hdr .hdr-unban-label {color:#f3edff!important;}
.hero .subtitle,.si-tagline-text,.verlauf,.promo-banner-title .grad {
  background:linear-gradient(100deg,#b18bff 0%,#e5d8ff 48%,#b78cf9 100%)!important;
  background-clip:text!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
.hero .btn:not(.btn-secondary),.btn:not(.btn-secondary),.schritt .nr,.phi-wert .w-ico,.team-bewerben .w-ico,
.info-card .icon.icon-3d.sc-kachel,.tl-btn,.streamer-offline a,.promo-banner-tag,.promo-banner:hover .promo-banner-btn {
  background:var(--dc-gradient)!important;
  color:#fff!important;
  border-color:rgba(172,125,255,.25)!important;
  box-shadow:0 9px 28px rgba(84,35,190,.25)!important;
}
.btn:not(.btn-secondary):hover,.streamer-offline a:hover,.promo-banner:hover .promo-banner-btn {
  background:linear-gradient(105deg,#6326df 0%,#872afa 56%,#b77eff 100%)!important;
  box-shadow:0 12px 34px rgba(92,31,212,.34)!important;
}
.btn-secondary,.hero .btn-secondary {
  background:rgba(57,36,113,.13)!important;
  border-color:rgba(156,100,253,.65)!important;
  color:#f4efff!important;
  box-shadow:inset 0 1px 0 rgba(212,185,255,.06)!important;
}
.btn-secondary:hover,.hero .btn-secondary:hover {background:rgba(87,46,176,.26)!important;border-color:#ac73ff!important;box-shadow:0 8px 26px rgba(90,34,201,.21)!important;}
.glas,.rw-regel,.schritt,.mitglied,.recht-karte,.info-card,.textkarte,.phi-zitat,.kontakt-feld,.glass-card,
.promo-banner,.dc-live-card,.streamer-offline,.dc-live-section .streamer-offline,.rw-suche input {
  background:var(--dc-glass)!important;
  border-color:var(--dc-border)!important;
  backdrop-filter:blur(15px) saturate(108%)!important;
  -webkit-backdrop-filter:blur(15px) saturate(108%)!important;
  box-shadow:inset 0 1px 0 rgba(224,209,255,.045),0 11px 35px rgba(9,5,26,.15)!important;
}
.glas:hover,.rw-regel:hover,.schritt:hover,.mitglied:hover,.glass-card:hover,.dc-live-card:hover {
  border-color:rgba(177,125,255,.48)!important;
}
.rw-tabs.glas {background:rgba(34,24,72,.44)!important;}
.rw-tab.aktiv {background:linear-gradient(135deg,rgba(105,24,220,.54),rgba(69,37,167,.32))!important;border-color:rgba(154,83,252,.64)!important;box-shadow:0 7px 24px rgba(96,30,218,.18)!important;}
.rw-tab.aktiv i.ic,.rh-titel i.ic,.rk-ico,.recht-karte h3,.recht-karte a,.kontakt-feld i.ic,.textkarte a,.schritt a,.phi-text h2 span,.phi-zitat b,.rw-hinweis b,
.rw-eintrag>summary,.dc-rule-sub h4,.orange-link,footer a {color:#b692ff!important;}
.rw-hinweis b {border-color:rgba(166,111,255,.36)!important;background:rgba(101,44,205,.16)!important;}
.rw-suche input:focus {border-color:rgba(169,113,255,.7)!important;outline:0!important;box-shadow:0 0 0 3px rgba(119,55,229,.12)!important;}
.rw-regel:not(.k-gruen):not(.k-rot):not(.k-blau) {--f:165,106,255!important;}
.rw-regel .r-ico {background:rgba(131,62,232,.17)!important;border-color:rgba(161,94,249,.33)!important;color:#c49cff!important;}
.rw-kat:not(.aktiv) {background:rgba(34,25,71,.35)!important;border-color:rgba(161,113,247,.19)!important;}
.rw-kat.k-gruen.aktiv {background:linear-gradient(150deg,rgba(31,95,77,.30),rgba(32,31,77,.39))!important;}
.rw-kat.k-rot.aktiv {background:linear-gradient(150deg,rgba(120,39,75,.29),rgba(50,28,81,.35))!important;}
.rw-kat.k-blau.aktiv {background:linear-gradient(150deg,rgba(47,80,125,.28),rgba(40,34,92,.35))!important;}
.seite-kopf .strich {background:linear-gradient(90deg,#5c1bdb,#a56aff,#d6b7ff)!important;box-shadow:0 0 16px rgba(126,57,236,.22)!important;}
.dc-live-heading .live-heading-icon,.streamer-offline .streamer-icon,.dc-live-section .streamer-offline .streamer-icon {
  color:#c49aff!important;background:rgba(98,53,211,.19)!important;
}
.dc-live-card,.dc-live-section .streamer-offline {border-color:rgba(165,113,255,.27)!important;}
.dc-live-count {background:rgba(95,38,191,.27)!important;border-color:rgba(173,119,255,.32)!important;}
.dc-live-preview {background:linear-gradient(125deg,rgba(88,39,176,.40),rgba(22,20,65,.70))!important;}
.dc-live-pill {background:#6817d9!important;}
.promo-banner {background:linear-gradient(120deg,rgba(33,30,74,.40),rgba(48,35,91,.46))!important;}
.promo-gg::after {background:linear-gradient(110deg,rgba(28,20,68,.24),rgba(35,24,72,.45))!important;}
.promo-banner-btn {color:#cba9ff!important;background:rgba(101,60,214,.16)!important;border-color:rgba(152,99,248,.32)!important;}
.promo-banner-tag,.promo-gg .promo-banner-tag,.promo-wm .promo-banner-tag {background:var(--dc-gradient)!important;}
.promo-banner-title .grad,.promo-gg .promo-banner-title .grad {background:linear-gradient(100deg,#a66bff,#e0cdff)!important;background-clip:text!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;}
footer {border-color:rgba(155,114,248,.16)!important;}
footer a:hover,.orange-link:hover {color:#dbc7ff!important;}
#pageLoader {background:rgba(16,12,41,.38)!important;}
/* Recolor only; no widths, positions, paddings, type scales or breakpoints here. */


/* --- V14: saubere Zentrierung + transparenterer Hintergrund --- */
body[data-page="index.html"] .container > .hero,
body[data-page="index.html"] .container > .dc-live-section,
body[data-page="index.html"] .container > .promo-banner-section,
body[data-page="index.html"] .container > .info-grid,
body[data-page="index.html"] .container > .twitch-section {
  left:auto !important;
  right:auto !important;
  translate:0 0 !important;
  transform:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body[data-page="index.html"] .hero {
  width:min(100%, 760px) !important;
  text-align:center !important;
  align-items:center !important;
}
body[data-page="index.html"] .dc-live-section,
body[data-page="index.html"] .twitch-section {
  width:min(100%, 760px) !important;
}
body[data-page="index.html"] .promo-banner-section {width:min(100%, 1080px) !important;}
body[data-page="index.html"] .info-grid {width:min(100%, 1180px) !important;}
body[data-page="index.html"] .hero .dc-hero-logo,
body[data-page="index.html"] .hero .subtitle,
body[data-page="index.html"] .hero .action-buttons,
body[data-page="index.html"] .dc-live-heading,
body[data-page="index.html"] .streamer-offline,
body[data-page="index.html"] .dc-live-list,
body[data-page="index.html"] .promo-banner-section,
body[data-page="index.html"] .info-grid {
  margin-left:auto !important;
  margin-right:auto !important;
}
body[data-page="index.html"] .hero .action-buttons {
  justify-content:center !important;
}
/* Hintergrundbild etwas sichtbarer / Gesamtlook transparenter */
body {
  background:
    radial-gradient(ellipse 62% 64% at 48% 22%, rgba(74,35,142,.18), transparent 79%),
    radial-gradient(ellipse 57% 45% at 4% 62%, rgba(69,27,146,.16), transparent 80%),
    radial-gradient(ellipse 58% 45% at 96% 78%, rgba(77,43,165,.14), transparent 80%),
    #0d0b19 !important;
}
body::after {
  filter: blur(8px) grayscale(.45) brightness(.92) !important;
  opacity:.25 !important;
  mix-blend-mode: luminosity;
}
body::before {
  background:
    radial-gradient(ellipse 48% 42% at 22% 28%, rgba(111,36,232,.10),transparent 88%),
    radial-gradient(ellipse 58% 48% at 82% 60%, rgba(94,56,231,.10),transparent 82%),
    radial-gradient(ellipse 46% 34% at 55% 95%,rgba(122,73,244,.08),transparent 83%) !important;
}
.hdr,.hdr.hdr-scrolled {background:rgba(18,14,38,.78)!important;}
.glas,.rw-regel,.schritt,.mitglied,.recht-karte,.info-card,.textkarte,.phi-zitat,.kontakt-feld,.glass-card,
.promo-banner,.dc-live-card,.streamer-offline,.dc-live-section .streamer-offline,.rw-suche input {
  background:rgba(41,31,82,.30)!important;
}
.dc-live-card,.dc-live-section .streamer-offline,.promo-banner,.info-card,.glass-card {
  box-shadow:inset 0 1px 0 rgba(224,209,255,.035),0 10px 28px rgba(9,5,26,.12)!important;
}
@media (max-width: 900px) {
  body[data-page="index.html"] .hero,
  body[data-page="index.html"] .dc-live-section,
  body[data-page="index.html"] .twitch-section,
  body[data-page="index.html"] .promo-banner-section,
  body[data-page="index.html"] .info-grid {width:100% !important;}
}