/* =========================================================
   Mx2 Modern - Override fuer das DZCP-Template
   wird NACH stylesheet.css geladen
   ========================================================= */
:root {
  --bg: #08080c;
  --bg2: #101016;
  --surface: #14141c;
  --surface2: #1b1b25;
  --border: rgba(255,255,255,.08);
  --text: #e6e6ec;
  --muted: #9a9aa8;
  --accent: #f5b301;
  --accent2: #ff6a00;
  --radius: 14px;
  --head: "Rajdhani", system-ui, sans-serif;
}

html, body.mx2 {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: "Inter", system-ui, "Segoe UI", sans-serif !important;
  font-size: 14px;
}
body.mx2 * { font-family: inherit; }
body.mx2 td, body.mx2 div, body.mx2 p, body.mx2 span, body.mx2 li { color: inherit; }
body.mx2 { background-image: radial-gradient(900px 500px at 50% -150px, rgba(245,179,1,.12), transparent 70%) !important; background-repeat: no-repeat !important; }

/* Links */
body.mx2 a:link, body.mx2 a:visited { color: var(--text); text-decoration: none; transition: color .2s; }
body.mx2 a:hover, body.mx2 a:active { color: var(--accent); text-decoration: none; }
body.mx2 ::selection { background: var(--accent); color: #111; }

/* ---------- Topbar ---------- */
.mx2-top {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px;
  background: rgba(8,8,12,.8); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.mx2-logo { font-family: var(--head) !important; font-size: 1.8rem; font-weight: 700; color: var(--text) !important; letter-spacing: .02em; }
.mx2-logo span { color: var(--accent); }
.mx2-top-info { color: var(--muted); font-size: .85rem; margin-left: auto; }
.mx2-burger { display: none; background: none; border: 0; width: 30px; height: 22px; position: relative; cursor: pointer; }
.mx2-burger span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--text); transition: .3s; }
.mx2-burger span:nth-child(1) { top: 0; } .mx2-burger span:nth-child(2) { top: 10px; } .mx2-burger span:nth-child(3) { top: 20px; }
.mx2-nav-open .mx2-burger span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.mx2-nav-open .mx2-burger span:nth-child(2) { opacity: 0; }
.mx2-nav-open .mx2-burger span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* ---------- Layout ---------- */
body.mx2 div#wrapper { width: auto !important; max-width: 1360px; margin: 0 auto !important; padding: 0 16px; background: none !important; }
body.mx2 div#header {
  width: auto !important; height: auto !important; margin: 20px 0 !important; padding: 0 !important;
  border-radius: 20px; overflow: hidden; position: relative;
  background: linear-gradient(90deg, rgba(8,8,12,.92) 20%, rgba(8,8,12,.4)), var(--mx2-header, url("../images/clanlogo.png")) right center / cover no-repeat, var(--surface) !important;
  border: 1px solid var(--border);
}
.mx2-hero { padding: 44px 36px; }
.mx2-hero h1 { font-family: var(--head) !important; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; color: var(--text); margin: 8px 0 0; }
.mx2-hero h1 .mx2-thl { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mx2-kicker { color: var(--accent); text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; font-weight: 600; margin: 0; }

body.mx2 div#content {
  display: grid; grid-template-columns: 240px minmax(0, 1fr) 270px; gap: 18px; align-items: start;
  width: auto !important; background: none !important;
}
body.mx2 div.sideContent, body.mx2 div#middleContent { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; }
body.mx2 div#content > .clearFix { display: none; }

/* ---------- Boxen ---------- */
body.mx2 .box, body.mx2 .mainNavigation, body.mx2 .index {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important; box-shadow: none !important;
  margin: 0 0 18px !important; padding: 0 0 12px !important; overflow: hidden;
}
body.mx2 .index { padding: 0 !important; }
body.mx2 .index[style] { padding: 10px 16px !important; }
body.mx2 .headline, body.mx2 .box .headline, body.mx2 .mainNavigation h2.headline {
  font-family: var(--head) !important; font-size: 1.15rem !important; font-weight: 700; letter-spacing: .03em;
  color: var(--text) !important; background: none !important; text-shadow: none !important;
  padding: 14px 16px 10px !important; margin: 0 !important; height: auto !important; line-height: 1.2 !important;
  border-bottom: 1px solid var(--border) !important; text-transform: none;
}
body.mx2 .headline::before { content: ""; display: inline-block; width: 4px; height: 14px; margin-right: 8px; border-radius: 2px; background: var(--accent); vertical-align: -1px; }
body.mx2 .box > table, body.mx2 .box > div { margin: 0 12px; }

/* Tabs in Boxen */
body.mx2 .tabs span { background: none !important; color: var(--muted) !important; padding: 0 8px 0 0 !important; cursor: pointer; font-size: 1rem; }
body.mx2 .tabs span.current { color: var(--accent) !important; }
body.mx2 .headline.tabs::before { display: none; }

/* Hauptnavigation */
body.mx2 .mainNavigation ul { padding: 6px 8px !important; margin: 0 !important; }
body.mx2 .mainNavigation ul li { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; list-style: none; height: auto !important; }
body.mx2 .mainNavigation ul li a, body.mx2 a.navMain:link, body.mx2 a.navMain:visited {
  display: block; padding: 9px 12px !important; border-radius: 9px; color: var(--muted) !important;
  background: none !important; font-weight: 500; transition: .2s; text-indent: 0 !important;
}
body.mx2 .mainNavigation ul li a:hover, body.mx2 a.navMain:hover { background: var(--surface2) !important; color: var(--text) !important; }

/* Wo-bin-ich / Suche */
body.mx2 div#brackets {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface2) !important; border-bottom: 1px solid var(--border);
  padding: 12px 16px !important; height: auto !important; color: var(--muted); font-size: .9rem;
}
body.mx2 div#brackets div#search { float: none !important; position: static !important; margin: 0 !important; }
body.mx2 #searchpanel {
  background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 999px !important;
  color: var(--text) !important; padding: 8px 14px !important; width: 200px !important; height: auto !important;
}
body.mx2 input.searchSubmit { display: none; }
body.mx2 div#index { padding: 16px !important; width: auto !important; background: none !important; }

/* ---------- Inhalts-Tabellen ---------- */
body.mx2 table.mainContent { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: none !important; }
body.mx2 table.mainContent td { background: none; border: 0; }
body.mx2 td.contentHead {
  font-family: var(--head) !important; font-size: 1.5rem !important; font-weight: 700;
  background: none !important; color: var(--text) !important; padding: 4px 4px 14px !important; height: auto !important;
  border-bottom: 1px solid var(--border) !important; text-shadow: none !important;
}
body.mx2 td.contentMainTop, body.mx2 tr.contentMainTop td {
  background: var(--surface2) !important; color: var(--muted) !important; font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .06em; padding: 10px 12px !important; border: 0 !important;
}
body.mx2 td.contentMainFirst, body.mx2 td.contentMainSecond {
  background: transparent !important; color: var(--text) !important; padding: 10px 12px !important;
  border: 0 !important; border-bottom: 1px solid var(--border) !important;
}
body.mx2 td.contentMainSecond { background: rgba(255,255,255,.015) !important; }
body.mx2 td.contentBottom, body.mx2 td.contentBottomLeft { background: none !important; border: 0 !important; padding: 12px !important; }
body.mx2 td.navLastNewsContent, body.mx2 td.navFtopicsContent, body.mx2 td.navLregContent, body.mx2 td.navTeamspeakContent,
body.mx2 td.counterContentLeft, body.mx2 td.counterContentRight, body.mx2 td.navShoutContentFirst, body.mx2 td.navShoutContentSecond,
body.mx2 td.navEventsContent, body.mx2 td.navServerStatsContent {
  background: none !important; border: 0 !important; color: var(--text) !important; padding: 6px 4px !important;
}
body.mx2 td.navShoutContentFirst, body.mx2 td.navShoutContentSecond { border-bottom: 1px solid var(--border) !important; padding: 8px 4px !important; }

/* News */
body.mx2 table.news, body.mx2 table.article { background: var(--surface2) !important; border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
body.mx2 td.news h1, body.mx2 td.article h1 { font-family: var(--head) !important; font-size: 1.4rem; color: var(--text) !important; }
body.mx2 td.news img.newsImage, body.mx2 td.article img.newsImage { border-radius: 10px; }

/* ---------- Formulare ---------- */
body.mx2 input[type="text"], body.mx2 input[type="password"], body.mx2 input[type="email"], body.mx2 textarea, body.mx2 select,
body.mx2 input.inputField_en, body.mx2 input.inputField_dis, body.mx2 textarea.inputField_en, body.mx2 textarea.inputField_dis,
body.mx2 input.loginName_en, body.mx2 input.loginPwd_en, body.mx2 input.loginName_dis, body.mx2 input.loginPwd_dis,
body.mx2 textarea.shoutTextfield_en, body.mx2 textarea.shoutTextfield_dis, body.mx2 input.shoutNick_en, body.mx2 input.shoutEmail_en, body.mx2 select.dropdown {
  background: var(--bg) !important; color: var(--text) !important; border: 1px solid var(--border) !important;
  border-radius: 9px !important; padding: 8px 10px !important; height: auto !important; box-shadow: none !important;
  max-width: 100%; box-sizing: border-box; transition: border-color .2s;
}
body.mx2 input:focus, body.mx2 textarea:focus, body.mx2 select:focus { outline: none; border-color: var(--accent) !important; }
body.mx2 input[type="submit"], body.mx2 input.submit, body.mx2 input.loginSubmit, body.mx2 input.shoutSubmit, body.mx2 input.voteSubmit, body.mx2 button.submit {
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important; color: #111 !important;
  border: 0 !important; border-radius: 999px !important; padding: 9px 20px !important; height: auto !important; width: auto !important;
  font-weight: 600; cursor: pointer; text-indent: 0 !important; box-shadow: 0 6px 20px -8px rgba(245,179,1,.7); transition: transform .2s;
}
body.mx2 input[type="submit"]:hover, body.mx2 input.submit:hover { transform: translateY(-1px); }

/* Shoutbox */
body.mx2 textarea.shoutTextfield_en, body.mx2 textarea.shoutTextfield_dis { width: 100% !important; min-height: 70px; }
body.mx2 input.shoutLength { background: none !important; border: 0 !important; color: var(--muted) !important; width: 34px !important; }

/* Ergebnisse */
body.mx2 span.navCwWon, body.mx2 span.CwWon { color: #3ddc84 !important; }
body.mx2 span.navCwLost, body.mx2 span.CwLost { color: #ff5c5c !important; }
body.mx2 span.navCwDraw, body.mx2 span.CwDraw { color: var(--accent) !important; }
body.mx2 span.fontError, body.mx2 span.fontRed { color: #ff5c5c !important; }
body.mx2 span.fontWichtig, body.mx2 span.fontMarked { color: var(--accent) !important; }
body.mx2 .welcome:link, body.mx2 .welcome:visited { color: var(--accent) !important; }

/* Info-/Fehlermeldungen */
body.mx2 td.infoTop, body.mx2 td.error, body.mx2 div#infoInnerLayer, body.mx2 .msg {
  background: var(--surface2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 10px;
}

/* Admin-Menue */
body.mx2 .adminBarOuter, body.mx2 .adminBarInner, body.mx2 .adminMenuOuter, body.mx2 .adminMenuInner { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border) !important; }
body.mx2 .adminBarOuterOver, body.mx2 .adminBarInnerOver, body.mx2 .adminMenuOuterOver, body.mx2 .adminMenuInnerOver { background: rgba(245,179,1,.15) !important; }

/* Zitate & Code */
body.mx2 .quote { background: var(--surface2) !important; border-left: 3px solid var(--accent) !important; border-radius: 8px; color: var(--text) !important; }
body.mx2 .code, body.mx2 .codeHead, body.mx2 .codeContent { background: #0d0d12 !important; color: #ddd !important; border-color: var(--border) !important; }

/* ---------- Footer ---------- */
html, body.mx2 { overflow-x: hidden; }
.mx2-top .mx2-logo span, body.mx2 .mx2-logo span { color: var(--accent) !important; }
body.mx2 .scrollToTop { right: 20px !important; bottom: 20px !important; left: auto !important; }
body.mx2 div#footer { width: auto !important; min-width: 0 !important; background: var(--bg2) !important; border-top: 1px solid var(--border); margin-top: 30px; padding: 30px 0 10px !important; height: auto !important; }
body.mx2 div#footwrapper { width: auto !important; max-width: 1360px; margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 40px; }
body.mx2 div.footNavigation { float: none !important; width: auto !important; min-width: 180px; }
body.mx2 div.footNavigation h2 { font-family: var(--head) !important; color: var(--accent) !important; background: none !important; font-size: 1.05rem; text-shadow: none !important; }
body.mx2 div.footNavigation ul li { background: none !important; list-style: none; padding: 3px 0 !important; }
body.mx2 a.navMisc:link, body.mx2 a.navMisc:visited { color: var(--muted) !important; }
body.mx2 a.navMisc:hover { color: var(--accent) !important; }
.mx2-copy { text-align: center; color: var(--muted); font-size: .85rem; padding: 14px 16px 24px; background: var(--bg2); }

body.mx2 .scrollToTop {
  background: var(--accent) !important; border-radius: 50% !important; width: 44px !important; height: 44px !important;
  box-shadow: 0 8px 24px -8px rgba(245,179,1,.7);
}
body.mx2 .scrollToTop::after { content: "\2191"; display: block; text-align: center; line-height: 44px; color: #111; font-weight: 700; font-size: 18px; }

/* Lightbox */
body.mx2 #jquery-overlay { background: #000 !important; }
body.mx2 #lightbox-container-image-box, body.mx2 #lightbox-container-image-data-box { background: var(--surface) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1150px) {
  body.mx2 div#content { grid-template-columns: 220px minmax(0, 1fr); }
  body.mx2 div#content > .sideContent:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
  body.mx2 div#content > .sideContent:nth-child(3) .box { margin: 0 !important; }
}
@media (max-width: 800px) {
  .mx2-burger { display: block; }
  .mx2-top-info { display: none; }
  body.mx2 div#content { grid-template-columns: 1fr; }
  body.mx2 div#content > .sideContent:nth-child(1) { order: 2; }
  body.mx2 div#middleContent { order: 1; }
  body.mx2 div#content > .sideContent:nth-child(3) { order: 3; }
  body.mx2 .mainNavigation { display: none; }
  body.mx2.mx2-nav-open .mainNavigation { display: block; position: fixed; top: 58px; left: 0; right: 0; bottom: 0; z-index: 99; margin: 0 !important; border-radius: 0 !important; overflow: auto; }
  .mx2-hero { padding: 28px 20px; }
  body.mx2 div#brackets { flex-direction: column; align-items: stretch; }
  body.mx2 #searchpanel { width: 100% !important; }
  body.mx2 div#index { padding: 10px !important; overflow-x: auto; }
  body.mx2 table.mainContent img { max-width: 100%; height: auto; }
}

/* =========================================================
   Serverliste & TS3-Viewer
   ========================================================= */
body.mx2 td.mx2-page { padding: 4px !important; background: none !important; border: 0 !important; }
.mx2-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.mx2-pagehead h2 { font-family: var(--head) !important; font-size: 2rem; line-height: 1; margin: 4px 0 0; color: var(--text); }
.mx2-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.mx2-stats > div { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px; min-width: 86px; text-align: center; }
.mx2-stats strong { display: block; font-family: var(--head) !important; font-size: 1.5rem; color: var(--accent); line-height: 1.1; }
.mx2-stats strong.ok { color: #3ddc84; } .mx2-stats strong.off { color: #ff5c5c; }
.mx2-stats span { color: var(--muted); font-size: .78rem; }
.mx2-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
body.mx2 input.mx2-filter { flex: 1; min-width: 200px; border-radius: 999px !important; padding: 10px 16px !important; }
.mx2-check { color: var(--muted); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.mx2-note { color: var(--muted); font-size: .8rem; margin-top: 14px; }
.mx2-empty { text-align: center; color: var(--muted); padding: 30px 16px; }
.mx2-empty .fa { font-size: 2.2rem; color: var(--accent); margin-bottom: 10px; }

.mx2-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: .85rem; cursor: pointer; border: 1px solid var(--border); transition: .2s; line-height: 1.2; }
body.mx2 a.mx2-btn.primary, .mx2-btn.primary { background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #111 !important; border: 0; }
.mx2-btn.primary:hover { transform: translateY(-1px); }
.mx2-btn.ghost { background: var(--surface2); color: var(--text); }
.mx2-btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

.gs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.gs-grid.only-online .gs-card.is-offline { display: none !important; }
.gs-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: .2s; }
.gs-card:hover { border-color: rgba(245,179,1,.4); transform: translateY(-2px); }
.gs-card.is-offline { opacity: .65; }
.gs-head { display: flex; align-items: flex-start; gap: 10px; }
.gs-icon { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--accent); font-size: 20px; }
.gs-title { flex: 1; min-width: 0; }
.gs-title h3 { font-size: .95rem; font-weight: 600; margin: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gs-addr { color: var(--muted); font-size: .8rem; font-family: ui-monospace, Consolas, monospace !important; }
.gs-status { flex: none; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; }
.is-online .gs-status { background: rgba(61,220,132,.15); color: #3ddc84; }
.is-offline .gs-status { background: rgba(255,92,92,.12); color: #ff7a7a; }
.gs-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: .85rem; }
.gs-meta .fa { color: var(--accent); margin-right: 4px; }
.gs-bar { height: 6px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.gs-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 99px; }
.gs-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ts-connect { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.ts-connect code { display: block; font-family: ui-monospace, Consolas, monospace !important; font-size: 1.1rem; color: var(--text); margin-top: 2px; }
.ts-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.ts-tree, .ts-tree ul { list-style: none; margin: 0; padding: 0; }
.ts-tree ul { padding-left: 18px; border-left: 1px dashed var(--border); margin-left: 6px; }
.ts-tree li { padding: 3px 0; background: none !important; }
.ts-root > .ts-name { font-weight: 700; color: var(--accent); }
.ts-name .fa { color: var(--muted); width: 16px; }
.ts-spacer > .ts-name { display: block; text-align: center; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.ts-users { border-left: 0 !important; }
.ts-user { color: var(--text); }
.ts-user .fa { color: #3ddc84; }
.ts-user.away { color: var(--muted); } .ts-user.away .fa { color: var(--muted); }
.ts-user.talking .fa { color: var(--accent); }

/* Kleinigkeiten */
body.mx2 div#navTeamspeakContent, body.mx2 .switchs { overflow: hidden !important; }
body.mx2 .switchs table, body.mx2 .switchs div { max-width: 100%; }
body.mx2 .switchs * { white-space: normal !important; word-break: break-word; }
@media (max-width: 800px) {
  body.mx2 div#brackets div#search, body.mx2 div#brackets div#search form, body.mx2 div#brackets div#search table { width: 100% !important; }
  body.mx2 div#brackets div#search td:first-child { width: 100%; }
  body.mx2 #searchpanel { min-width: 0; width: 100% !important; display: block; }
  .mx2-stats > div { min-width: 0; flex: 1; }
}
body.mx2 .fa { font-family: FontAwesome !important; }
.ts-tree li, .ts-tree ul, .ts-tree { list-style: none !important; background-image: none !important; }
.ts-tree li::before, .ts-tree li::marker { content: none !important; }

/* Statistik-Box */
.mx2-counter { cursor: pointer; padding: 4px 2px; }
.mc-online { display: flex; align-items: center; gap: 14px; background: var(--surface2); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.mc-online strong { display: block; font-family: var(--head) !important; font-size: 1.3rem; line-height: 1; color: var(--text); }
.mc-online span { color: var(--muted); font-size: .75rem; }
.mc-dot { width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: mcpulse 2s infinite; flex: none; }
@keyframes mcpulse { 70% { box-shadow: 0 0 0 8px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mc-grid > div { background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; }
.mc-grid > div.wide { grid-column: 1 / -1; }
.mc-grid span { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.mc-grid strong { font-family: var(--head) !important; font-size: 1.15rem; color: var(--accent); }
.mc-grid > div.wide strong { font-size: 1.4rem; }
.mc-foot { color: var(--muted); font-size: .78rem; margin-top: 8px; text-align: center; }
.mc-foot b { color: var(--text); }
.mx2-counter:hover .mc-online { background: rgba(245,179,1,.1); }

/* ===== Animationen: G Hex-Waben im Kopfbereich ===== */
body.mx2 div#header::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 32L0 82V66l28 16 28-16v16L28 98z' fill='none' stroke='%23f5b301' stroke-opacity='.16' stroke-width='1.2'/%3E%3C/svg%3E");
  -webkit-mask: linear-gradient(90deg, #000 0%, #000 45%, transparent 85%); mask: linear-gradient(90deg, #000 0%, #000 45%, transparent 85%); }
body.mx2 div#header::after { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 420px; height: 420px; top: -150px; left: -200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,179,1,.28), transparent 65%); mix-blend-mode: screen; animation: mx2-hexsweep 9s ease-in-out infinite alternate; }
@keyframes mx2-hexsweep { from { transform: translate(0, 0); } to { transform: translate(55vw, 60px); } }
.mx2-hero { position: relative; z-index: 1; }
.mx2-e-headerbtn, .mx2e-headerbtn { z-index: 2; }

/* ===== Animationen: 6 Drei Punkte statt alter Lade-GIFs ===== */
body.mx2 img[src*="ajax_loading"], body.mx2 img[src*="ajax-loader"] { display: none !important; }
body.mx2 div:has(> img[src*="ajax_loading"]), body.mx2 div:has(> img[src*="ajax-loader"]) { min-height: 26px; position: relative; }
body.mx2 div:has(> img[src*="ajax_loading"])::after, body.mx2 div:has(> img[src*="ajax-loader"])::after {
  content: ""; display: block; width: 8px; height: 8px; margin: 9px auto; border-radius: 50%; color: var(--accent); background: currentColor;
  box-shadow: -16px 0 0 currentColor, 16px 0 0 currentColor; animation: mx2-dots 1.2s ease-in-out infinite; }
@keyframes mx2-dots { 0%,100% { box-shadow: -16px 0 0 rgba(245,179,1,.35), 16px 0 0 rgba(245,179,1,.35); background: rgba(245,179,1,1); }
  33% { box-shadow: -16px 0 0 rgba(245,179,1,1), 16px 0 0 rgba(245,179,1,.35); background: rgba(245,179,1,.35); }
  66% { box-shadow: -16px 0 0 rgba(245,179,1,.35), 16px 0 0 rgba(245,179,1,1); background: rgba(245,179,1,.35); } }

@media (prefers-reduced-motion: reduce) { body.mx2 div#header::after { animation: none; } }
.mx2-discord { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #5865f2; color: #fff !important; font-weight: 600; font-size: .85rem; transition: .2s; }
.mx2-discord:hover { background: #6b77ff; color: #fff !important; }
@media (max-width: 800px) { .mx2-discord { padding: 6px 10px; font-size: 0; } .mx2-discord .fa { font-size: 16px; } }

/* ===== Fix: Admin-Menue (Hover lesbar) ===== */
body.mx2 .adminMenuOuter, body.mx2 .adminMenuInner, body.mx2 .adminBarOuter, body.mx2 .adminBarInner { color: var(--text) !important; }
body.mx2 .adminMenuOuter, body.mx2 .adminMenuOuter:link, body.mx2 .adminMenuOuter:visited { background: #1b1b25 !important; border-color: rgba(255,255,255,.06) !important; }
body.mx2 .adminMenuOuterOver, body.mx2 .adminMenuOuterOver:link, body.mx2 .adminMenuOuterOver:visited,
body.mx2 .adminMenuInnerOver, body.mx2 .adminBarOuterOver, body.mx2 .adminBarInnerOver {
  background: var(--accent) !important; color: #111 !important; }
body.mx2 .adminMenuOuterOver *, body.mx2 .adminMenuInnerOver *, body.mx2 .adminBarOuterOver *, body.mx2 .adminBarInnerOver * { color: #111 !important; }

/* ===== Fix: Kalender nicht mehr zeichenweise umbrechen ===== */
body.mx2 table.navContent:has(> tbody > tr > td.navKalDays), body.mx2 table.navContent:has(> tbody > tr > td.navKalHeadDays) { width: 100% !important; table-layout: fixed; border-spacing: 2px; }
body.mx2 .box table.navContent { width: 100% !important; }
body.mx2 td.navKalLeft, body.mx2 td.navKalRight { display: none !important; }
body.mx2 .switchs td.navKalHead, body.mx2 .switchs td.navKalHeadDays, body.mx2 .switchs td.navKalDays,
body.mx2 .switchs td.navKalToday, body.mx2 .switchs td.navKalEmpty,
body.mx2 .switchs td.navKalHead *, body.mx2 .switchs td.navKalHeadDays *, body.mx2 .switchs td.navKalDays *, body.mx2 .switchs td.navKalToday * {
  white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; }
body.mx2 td.navKalHead { text-align: center; padding: 6px 0 !important; background: none !important; font-size: .85rem; }
body.mx2 td.navKalHeadDays { text-align: center; color: var(--muted) !important; font-size: .7rem; padding: 3px 0 !important; background: none !important; }
body.mx2 td.navKalDays, body.mx2 td.navKalToday, body.mx2 td.navKalEmpty { text-align: center; font-size: .78rem; padding: 5px 0 !important; border-radius: 6px; background: rgba(255,255,255,.025) !important; overflow: hidden; text-overflow: clip; }
body.mx2 td.navKalEmpty { background: none !important; }
body.mx2 td.navKalToday { background: var(--accent) !important; color: #111 !important; font-weight: 700; }
body.mx2 td.navKalToday * { color: #111 !important; }

/* ===== Fix: Tab-Bereiche (Kalender, Teamspeak, Forum) nutzen volle Boxbreite ===== */
body.mx2 .box > .switchs { width: auto !important; max-width: none !important; float: none !important; box-sizing: border-box; }
body.mx2 .box > .switchs > table, body.mx2 .box > .switchs > div { width: 100% !important; }
body.mx2 .headline.tabs { display: flow-root; }
body.mx2 .box > .switchs { clear: both; }

/* ===== Teamspeak-Box (Seitenleiste) ===== */
.mx2-tsbox { padding: 4px 2px; }
.tsb-head { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.tsb-head b { color: #3ddc84; }
.mx2-tsbox.off .tsb-head b { color: #ff7a7a; }
.tsb-dot { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: mcpulse 2s infinite; flex: none; }
.mx2-tsbox.off .tsb-dot { background: #ff5c5c; animation: none; }
.tsb-count { margin-left: auto; font-family: var(--head) !important; font-size: 1.1rem; color: var(--accent); }
.tsb-addr { color: var(--muted); font-size: .8rem; margin: 6px 0 8px; }
.tsb-addr .fa { color: var(--accent); }
.tsb-users { list-style: none !important; margin: 0 0 10px !important; padding: 0 !important; display: grid; gap: 4px; }
.tsb-users li { display: grid; grid-template-columns: 16px 1fr; gap: 0 6px; font-size: .82rem; background: rgba(255,255,255,.03) !important; border-radius: 8px; padding: 5px 8px !important; white-space: normal !important; }
.tsb-users li .fa { color: #3ddc84; grid-row: span 2; align-self: center; }
.tsb-users li.away { opacity: .55; } .tsb-users li.talk .fa { color: var(--accent); }
.tsb-users li .c { grid-column: 2; color: var(--muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }
.tsb-users li.empty, .tsb-users li.more { display: block; color: var(--muted); text-align: center; }
.tsb-note { color: var(--muted); font-size: .8rem; margin: 6px 0 10px; }
.tsb-actions { display: flex; gap: 6px; }
.tsb-btn { flex: 1; text-align: center; padding: 7px 8px; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid var(--border); background: var(--surface2); }
body.mx2 a.tsb-btn.primary, .tsb-btn.primary { background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #111 !important; border: 0; }

/* ===== Fix: Ausklappmenues (Admin) nicht abschneiden ===== */
body.mx2 #middleContent .index, body.mx2 div#index, body.mx2 table.mainContent, body.mx2 table.mainContent td { overflow: visible !important; }
body.mx2 #middleContent .index { position: relative; z-index: 5; }
body.mx2 .adminMenuOuter, body.mx2 .adminMenuOuterOver { position: relative; z-index: 50; }

/* Sicherheitscode gut sichtbar */
body.mx2 img.mx2-captcha, body.mx2 img[src*="antispam.php"] { height: 44px !important; width: auto !important; border-radius: 8px; vertical-align: middle; margin-right: 8px; }
body.mx2 input[name="secure"], body.mx2 input[name="confirm"], body.mx2 input[name="spam"] { width: 120px !important; text-transform: uppercase; letter-spacing: .15em; font-weight: 600; }
.gs-emoji { display: inline-grid; place-items: center; width: 26px; height: 26px; font-size: 18px; line-height: 1; background: rgba(245,179,1,.1); border-radius: 7px; }
.gs-game { font-size: .72rem; color: var(--accent); font-weight: 600; margin-right: 6px; }
.dc-name{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;background:rgba(88,101,242,.18);color:#c9ceff;font-weight:600;font-size:.85em}.dc-ico{display:inline-block;filter:saturate(1.2)}