/* ===== Faxe – dunkles Streamer-Theme (Child von Quark) ===== */
:root {
  --fx-bg: #0e0e10;
  --fx-bg-alt: #121216;
  --fx-surface: #18181b;
  --fx-surface-2: #1f1f23;
  --fx-border: #2c2c35;
  --fx-text: #efeff1;
  --fx-muted: #adadb8;
  --fx-accent: #9146ff;
  --fx-accent-2: #bf94ff;
  --fx-accent-dark: #772ce8;
  --fx-live: #eb0400;
  --fx-radius: 12px;
}
html, body { background: var(--fx-bg); color: var(--fx-text); }
body { font-size: 0.85rem; }
h1, h2, h3, h4, h5, h6 { color: var(--fx-text); font-weight: 700; letter-spacing: -0.01em; }
a { color: var(--fx-accent-2); }
a:hover, a:focus { color: #fff; }
hr { border-color: var(--fx-border); }
code { background: var(--fx-surface-2); color: var(--fx-accent-2); }
::selection { background: var(--fx-accent); color: #fff; }

/* Header */
body #header, body #header.scrolled, body.header-dark #header:not(.scrolled) { background: rgba(14, 14, 16, 0.92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid var(--fx-border); color: var(--fx-text); }
body #header a { color: var(--fx-muted) !important; }
body #header a:hover, body #header a.active, body #header a.selected { color: #fff !important; }
body #header .dropmenu ul ul { background: var(--fx-surface); border: 1px solid var(--fx-border); }
body #header .dropmenu ul ul a { color: var(--fx-text) !important; }
.faxe-logo { height: 36px; width: auto; display: block; }
.mobile-menu .button_container span { background: var(--fx-text); }
.mobile-container .overlay { background: rgba(14,14,16,0.97); }
.overlay-menu a { color: var(--fx-text); }

/* Sections */
#body-wrapper { padding-top: 4rem; }
.faxe-section { padding: 2.5rem 0; }
.faxe-section-alt { background: var(--fx-bg-alt); border-top: 1px solid var(--fx-border); border-bottom: 1px solid var(--fx-border); }
.faxe-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.faxe-section-head h2 { margin: 0; font-size: 1.4rem; }
.faxe-section-head h2 i { color: var(--fx-accent-2); margin-right: 0.3rem; }
.faxe-more { font-weight: 600; white-space: nowrap; }
.bg-gray { background: var(--fx-bg-alt) !important; }

/* Hero */
.faxe-hero { position: relative; overflow: hidden; padding: 6.5rem 0 3rem; background: radial-gradient(1200px 500px at 20% -10%, rgba(145,70,255,0.35), transparent 60%), linear-gradient(180deg, #121216 0%, var(--fx-bg) 100%); border-bottom: 1px solid var(--fx-border); }
.faxe-hero-glow { position: absolute; right: -10%; top: -30%; width: 55%; height: 160%; background: radial-gradient(closest-side, rgba(191,148,255,0.18), transparent); pointer-events: none; }
.faxe-hero .container { position: relative; }
.faxe-hero-text h1 { font-size: 2.6rem; line-height: 1.1; margin: 0.6rem 0 0.8rem; }
.faxe-hero-text h1 em { font-style: normal; color: var(--fx-accent-2); }
.faxe-hero-text p { font-size: 1rem; color: var(--fx-muted); max-width: 34rem; }
.faxe-hero-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.faxe-hero-media { display: flex; flex-direction: column; justify-content: center; }
.faxe-hero-game { margin-top: 0.5rem; }

/* Badge */
.faxe-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--fx-surface-2); color: var(--fx-muted); border: 1px solid var(--fx-border); }
.faxe-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fx-muted); }
.faxe-badge.is-live { background: rgba(235,4,0,0.15); color: #ff6b66; border-color: rgba(235,4,0,0.4); }
.faxe-badge.is-live .dot { background: var(--fx-live); box-shadow: 0 0 0 0 rgba(235,4,0,0.6); animation: fx-pulse 1.6s infinite; }
@keyframes fx-pulse { 0% { box-shadow: 0 0 0 0 rgba(235,4,0,0.6);} 70% { box-shadow: 0 0 0 8px rgba(235,4,0,0);} 100% { box-shadow: 0 0 0 0 rgba(235,4,0,0);} }
.faxe-chip { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fx-accent-2); background: rgba(145,70,255,0.15); border: 1px solid rgba(145,70,255,0.35); padding: 0.15rem 0.55rem; border-radius: 999px; margin-bottom: 0.5rem; }

/* Buttons */
.btn { border-radius: 8px; font-weight: 600; border: 1px solid var(--fx-border); background: var(--fx-surface-2); color: var(--fx-text); height: auto; padding: 0.45rem 1rem; transition: all .15s ease; }
.btn:hover, .btn:focus { background: var(--fx-surface); color: #fff; border-color: var(--fx-accent-2); }
.btn.btn-primary, .btn.btn-primary:focus { background: var(--fx-accent); border-color: var(--fx-accent); color: #fff; }
.btn.btn-primary:hover { background: var(--fx-accent-dark); border-color: var(--fx-accent-dark); color: #fff; }
.btn.btn-link { background: transparent; border-color: transparent; color: var(--fx-accent-2); }

/* Cards */
.faxe-card { background: var(--fx-surface); border: 1px solid var(--fx-border); border-radius: var(--fx-radius); padding: 1rem 1.1rem; margin-bottom: 1rem; transition: border-color .15s ease, transform .15s ease; }
.faxe-card:hover { border-color: #3d3d49; }
.faxe-card h3, .faxe-card h4, .faxe-card h5 { margin-top: 0.2rem; }
.faxe-card h4 i, .faxe-card h5 i { color: var(--fx-accent-2); }
.faxe-muted { color: var(--fx-muted); }
.faxe-offline-card { text-align: center; padding: 1.8rem 1.2rem; }
.faxe-offline-icon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 0.8rem; display: grid; place-items: center; background: var(--fx-surface-2); border: 1px solid var(--fx-border); font-size: 1.6rem; color: var(--fx-accent-2); }
.faxe-offline-card p { margin-bottom: 0.4rem; }
.faxe-offline-card strong { color: var(--fx-accent-2); font-size: 1.05rem; }

/* Schedule */
.faxe-day { display: flex; flex-direction: column; gap: 0.15rem; min-height: 7.2rem; border-left: 3px solid var(--fx-accent); }
.faxe-day.is-off { border-left-color: var(--fx-border); opacity: 0.7; }
.faxe-day-name { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fx-muted); font-weight: 700; }
.faxe-day-time { font-size: 1.05rem; font-weight: 800; color: var(--fx-text); }
.faxe-day-title { color: var(--fx-text); }
.faxe-day-note { font-size: 0.7rem; color: var(--fx-muted); }

/* Clips */
.faxe-thumb { border-radius: 8px; overflow: hidden; position: relative; display: grid; place-items: center; color: #fff; }
.faxe-thumb-placeholder { background: linear-gradient(135deg, #3b1d7a, #9146ff); }
.faxe-thumb-placeholder.hue-1 { background: linear-gradient(135deg, #1d3a7a, #4687ff); }
.faxe-thumb-placeholder.hue-2 { background: linear-gradient(135deg, #7a1d4f, #ff46a1); }
.faxe-thumb-placeholder.hue-3 { background: linear-gradient(135deg, #1d7a5a, #46ffb0); }
.faxe-thumb-placeholder.hue-4 { background: linear-gradient(135deg, #7a4f1d, #ffb046); }
.faxe-thumb-placeholder i { font-size: 2.6rem; opacity: 0.9; text-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.faxe-thumb-placeholder span { position: absolute; bottom: 0.5rem; right: 0.6rem; font-size: 0.6rem; opacity: 0.7; }
.faxe-clip h5 { margin: 0.7rem 0 0.2rem; font-size: 0.85rem; }
.faxe-clip p { margin: 0; font-size: 0.72rem; }
.faxe-featured { padding: 1.2rem; background: linear-gradient(135deg, rgba(145,70,255,0.12), var(--fx-surface) 60%); }
.faxe-featured h3 { margin: 0.3rem 0 0.5rem; }

/* Ratio boxes + embeds */
.ratio-16-9, .ratio-4-5 { position: relative; width: 100%; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.faxe-embed { border-radius: 8px; overflow: hidden; background: var(--fx-surface-2); border: 1px solid var(--fx-border); }
.faxe-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.faxe-embed-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.4rem; padding: 1rem; }
.faxe-embed-placeholder > i { font-size: 2.4rem; color: var(--fx-accent-2); }
.faxe-embed-title { margin: 0; font-weight: 600; }
.faxe-embed-placeholder small { color: var(--fx-muted); font-size: 0.62rem; max-width: 22rem; }

/* Stats */
.faxe-stat { text-align: center; padding: 1.1rem 0.6rem; }
.faxe-stat i { font-size: 1.4rem; color: var(--fx-accent-2); display: block; margin-bottom: 0.3rem; }
.faxe-stat-value { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.faxe-stat-label { display: block; font-size: 0.68rem; color: var(--fx-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.2rem; }
.faxe-news h5 { margin-bottom: 0.3rem; }
.faxe-news p { margin: 0; color: var(--fx-muted); }

/* Page heads + prose */
.faxe-page-head { padding: 1rem 0 1.4rem; border-bottom: 1px solid var(--fx-border); margin-bottom: 1.6rem; }
.faxe-page-head h1 { margin: 0; font-size: 2.2rem; }
.faxe-lead { color: var(--fx-muted); font-size: 1rem; margin: 0.4rem 0 0; }
.faxe-prose h2, .faxe-prose h3 { margin-top: 1.8rem; }
.faxe-prose h3 { font-size: 1.1rem; color: var(--fx-accent-2); }
.faxe-prose table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; background: var(--fx-surface); border: 1px solid var(--fx-border); border-radius: var(--fx-radius); overflow: hidden; }
.faxe-prose th, .faxe-prose td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--fx-border); text-align: left; vertical-align: top; }
.faxe-prose th { background: var(--fx-surface-2); color: var(--fx-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }
.faxe-prose tr:last-child td { border-bottom: 0; }
.faxe-prose blockquote { border-left: 3px solid var(--fx-accent); color: var(--fx-muted); }

/* markdown-notices dunkel */
.notices { border-radius: 8px; background: var(--fx-surface) !important; color: var(--fx-text) !important; }
.notices p { color: var(--fx-text) !important; }
.notices.yellow { border-left-color: #ffb046; } .notices.red { border-left-color: #ff6b66; } .notices.blue { border-left-color: #4687ff; } .notices.green { border-left-color: #46ffb0; }

/* Forms */
.faxe-form-card { padding: 1.3rem; }
.form-label { color: var(--fx-muted); font-weight: 600; font-size: 0.72rem; }
.form-input, .form-select, textarea.form-input { background: var(--fx-bg) !important; color: var(--fx-text) !important; border: 1px solid var(--fx-border) !important; border-radius: 8px; height: auto; padding: 0.5rem 0.7rem; }
.form-input:focus, textarea.form-input:focus { border-color: var(--fx-accent) !important; box-shadow: 0 0 0 3px rgba(145,70,255,0.25) !important; }
.form-input::placeholder { color: #6b6b78; }
.form-group { margin-bottom: 1rem; }
.form-input-addon img { border-radius: 6px; background: #fff; }
.form-data.basic-captcha { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.form-data.basic-captcha .form-input { max-width: 14rem; }
.reload-captcha-button { background: var(--fx-surface-2); color: var(--fx-accent-2); border: 1px solid var(--fx-border); border-radius: 6px; padding: 0.4rem 0.6rem; cursor: pointer; }
.reload-captcha-button svg { width: 16px; height: 16px; }
.button-wrapper { margin-top: 0.8rem; display: flex; gap: 0.5rem; }
.button-wrapper .btn[type=submit] { background: var(--fx-accent); border-color: var(--fx-accent); color: #fff; }
.button-wrapper .btn[type=reset] { background: var(--fx-surface-2); }
.form-messages, .alert { background: var(--fx-surface); border: 1px solid var(--fx-accent); border-radius: 8px; padding: 0.7rem 1rem; margin-bottom: 1rem; color: var(--fx-text); }
.form-errors { color: #ff6b66; }

/* Footer */
.faxe-footer { background: var(--fx-bg-alt); border-top: 1px solid var(--fx-border); padding: 1.6rem 0; color: var(--fx-muted); font-size: 0.72rem; }
.faxe-footer p { margin: 0; }
.faxe-footer-links { display: flex; gap: 1.1rem; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.faxe-footer-links a { color: var(--fx-muted); font-weight: 600; }
.faxe-footer-links a:hover { color: #fff; }
@media (max-width: 840px) {
  .faxe-hero { padding: 5.5rem 0 2rem; }
  .faxe-hero-text h1 { font-size: 2rem; }
  .faxe-footer-links { justify-content: flex-start; margin-top: 0.8rem; }
  .faxe-page-head h1 { font-size: 1.7rem; }
}

/* Mobile-Overlay-Menü */
.mobile-container .overlay { background: rgba(14,14,16,0.985); }
.overlay-menu { padding-top: 1rem; }
.overlay-menu ul, .overlay-menu ul li { list-style: none; }
.overlay-menu ul.tree > li > a, .overlay-menu a { display: block; padding: 0.7rem 1rem; font-size: 1.05rem; font-weight: 600; color: var(--fx-text) !important; border-bottom: 1px solid var(--fx-border); }
.overlay-menu a.active, .overlay-menu a.selected { color: var(--fx-accent-2) !important; }
.overlay-menu li.has-children > a::after, .overlay-menu .tree li::before { color: var(--fx-muted); }