|
|
| Zeile 1: |
Zeile 1: |
| :root {
| |
| --bg: #050509 !important;
| |
| --bg-elevated: #0c0c12 !important;
| |
| --accent: #7c5cff !important;
| |
| --accent-soft: rgba(124, 92, 255, 0.16) !important;
| |
| --accent-strong: #00ff85 !important;
| |
| --text-main: #f5f5ff !important;
| |
| --text-muted: #9b9bb5 !important;
| |
| --border-subtle: #1c1c2a !important;
| |
| --danger: #ff4f6e !important;
| |
| --radius-lg: 18px !important;
| |
| --radius-pill: 999px !important;
| |
| --shadow-soft: 0 22px 60px rgba(0, 0, 0, 0.65) !important;
| |
| --blur-bg: blur(16px) !important;
| |
| }
| |
|
| |
|
| * {
| |
| box-sizing: border-box !important;
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| }
| |
|
| |
| body {
| |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
| |
| background: radial-gradient(circle at top left, #181827 0, #050509 45%) !important;
| |
| color: var(--text-main) !important;
| |
| min-height: 100vh !important;
| |
| display: flex !important;
| |
| flex-direction: column !important;
| |
| justify-content: flex-start !important;
| |
| padding: 32px 16px !important;
| |
| }
| |
|
| |
| .page {
| |
| width: 100% !important;
| |
| max-width: 1100px !important;
| |
| display: grid !important;
| |
| grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
| |
| gap: 28px !important;
| |
| align-items: stretch !important;
| |
| margin: 0 auto !important;
| |
| }
| |
|
| |
| @media (max-width: 860px) {
| |
| .page {
| |
| grid-template-columns: minmax(0, 1fr) !important;
| |
| }
| |
| }
| |
|
| |
| .glass {
| |
| background: linear-gradient(145deg, rgba(12, 12, 18, 0.95), rgba(8, 8, 14, 0.96)) !important;
| |
| border-radius: 24px !important;
| |
| border: 1px solid rgba(255, 255, 255, 0.04) !important;
| |
| box-shadow: var(--shadow-soft) !important;
| |
| backdrop-filter: var(--blur-bg) !important;
| |
| -webkit-backdrop-filter: var(--blur-bg) !important;
| |
| position: relative !important;
| |
| overflow: hidden !important;
| |
| }
| |
|
| |
| /* Linke Spalte: Hero / Content */
| |
| .hero {
| |
| padding: 26px 26px 24px !important;
| |
| display: flex !important;
| |
| flex-direction: column !important;
| |
| gap: 20px !important;
| |
| }
| |
|
| |
| .hero-top-row {
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| justify-content: space-between !important;
| |
| gap: 16px !important;
| |
| }
| |
|
| |
| .brand-pill {
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| gap: 8px !important;
| |
| padding: 6px 12px !important;
| |
| border-radius: var(--radius-pill) !important;
| |
| background: radial-gradient(circle at top left, rgba(124, 92, 255, 0.22), rgba(12, 12, 18, 0.9)) !important;
| |
| border: 1px solid rgba(124, 92, 255, 0.5) !important;
| |
| font-size: 12px !important;
| |
| color: var(--text-muted) !important;
| |
| }
| |
|
| |
| .brand-dot {
| |
| width: 8px !important;
| |
| height: 8px !important;
| |
| border-radius: 999px !important;
| |
| background: var(--accent-strong) !important;
| |
| box-shadow: 0 0 14px rgba(0, 255, 133, 0.9) !important;
| |
| }
| |
|
| |
| .live-tag {
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| gap: 6px !important;
| |
| padding: 4px 10px !important;
| |
| border-radius: var(--radius-pill) !important;
| |
| background: rgba(255, 79, 110, 0.12) !important;
| |
| border: 1px solid rgba(255, 79, 110, 0.6) !important;
| |
| font-size: 11px !important;
| |
| text-transform: uppercase !important;
| |
| letter-spacing: 0.09em !important;
| |
| color: #ffc4cf !important;
| |
| }
| |
|
| |
| .live-dot {
| |
| width: 7px !important;
| |
| height: 7px !important;
| |
| border-radius: 999px !important;
| |
| background: var(--danger) !important;
| |
| box-shadow: 0 0 14px rgba(255, 79, 110, 0.9) !important;
| |
| }
| |
|
| |
| .hero-main {
| |
| display: flex !important;
| |
| flex-direction: column !important;
| |
| gap: 10px !important;
| |
| }
| |
|
| |
| .eyebrow {
| |
| font-size: 12px !important;
| |
| text-transform: uppercase !important;
| |
| letter-spacing: 0.16em !important;
| |
| color: var(--text-muted) !important;
| |
| }
| |
|
| |
| h1 {
| |
| font-size: clamp(32px, 4vw, 40px) !important;
| |
| line-height: 1.1 !important;
| |
| letter-spacing: 0.02em !important;
| |
| }
| |
|
| |
| .gradient-text {
| |
| background: linear-gradient(90deg, #ffffff, #c7b9ff, #7c5cff) !important;
| |
| -webkit-background-clip: text !important;
| |
| background-clip: text !important;
| |
| color: transparent !important;
| |
| }
| |
|
| |
| .hero-sub {
| |
| font-size: 14px !important;
| |
| color: var(--text-muted) !important;
| |
| max-width: 520px !important;
| |
| }
| |
|
| |
| .hero-sub strong {
| |
| color: #d2d2ff !important;
| |
| font-weight: 500 !important;
| |
| }
| |
|
| |
| .hero-cta-row {
| |
| display: flex !important;
| |
| flex-wrap: wrap !important;
| |
| gap: 12px !important;
| |
| margin-top: 6px !important;
| |
| }
| |
|
| |
| .btn-primary {
| |
| border: none !important;
| |
| outline: none !important;
| |
| padding: 10px 18px !important;
| |
| border-radius: var(--radius-pill) !important;
| |
| background: linear-gradient(120deg, var(--accent), var(--accent-strong)) !important;
| |
| color: #050509 !important;
| |
| font-weight: 600 !important;
| |
| font-size: 14px !important;
| |
| cursor: pointer !important;
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| gap: 8px !important;
| |
| box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7) !important;
| |
| }
| |
|
| |
| .btn-primary span {
| |
| font-size: 18px !important;
| |
| }
| |
|
| |
| .btn-ghost {
| |
| border-radius: var(--radius-pill) !important;
| |
| padding: 10px 16px !important;
| |
| font-size: 13px !important;
| |
| border: 1px solid var(--border-subtle) !important;
| |
| background: rgba(5, 5, 10, 0.9) !important;
| |
| color: var(--text-muted) !important;
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| gap: 8px !important;
| |
| cursor: pointer !important;
| |
| }
| |
|
| |
| .btn-ghost-dot {
| |
| width: 8px !important;
| |
| height: 8px !important;
| |
| border-radius: 999px !important;
| |
| background: var(--accent) !important;
| |
| box-shadow: 0 0 12px rgba(124, 92, 255, 0.9) !important;
| |
| }
| |
|
| |
| .meta-grid {
| |
| display: grid !important;
| |
| grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
| |
| gap: 12px !important;
| |
| margin-top: 12px !important;
| |
| }
| |
|
| |
| .meta-card {
| |
| padding: 10px 12px !important;
| |
| border-radius: 14px !important;
| |
| background: radial-gradient(circle at top, rgba(124, 92, 255, 0.12), rgba(5, 5, 9, 0.95)) !important;
| |
| border: 1px solid rgba(255, 255, 255, 0.04) !important;
| |
| }
| |
|
| |
| .meta-label {
| |
| font-size: 11px !important;
| |
| text-transform: uppercase !important;
| |
| letter-spacing: 0.16em !important;
| |
| color: var(--text-muted) !important;
| |
| margin-bottom: 4px !important;
| |
| }
| |
|
| |
| .meta-value {
| |
| font-size: 14px !important;
| |
| }
| |
|
| |
| .meta-pill {
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| gap: 6px !important;
| |
| padding: 3px 9px !important;
| |
| border-radius: 999px !important;
| |
| background: rgba(5, 5, 9, 0.9) !important;
| |
| border: 1px solid rgba(255, 255, 255, 0.08) !important;
| |
| font-size: 11px !important;
| |
| color: var(--text-muted) !important;
| |
| margin-top: 6px !important;
| |
| }
| |
|
| |
| .meta-pill-dot {
| |
| width: 6px !important;
| |
| height: 6px !important;
| |
| border-radius: 999px !important;
| |
| background: var(--accent-strong) !important;
| |
| }
| |
|
| |
| /* Sektion: Panels / Content */
| |
| .sections {
| |
| display: grid !important;
| |
| grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) !important;
| |
| gap: 12px !important;
| |
| margin-top: 10px !important;
| |
| }
| |
|
| |
| @media (max-width: 960px) {
| |
| .sections {
| |
| grid-template-columns: minmax(0, 1fr) !important;
| |
| }
| |
| }
| |
|
| |
| .panel {
| |
| background: radial-gradient(circle at top left, rgba(124, 92, 255, 0.12), rgba(5, 5, 9, 0.98)) !important;
| |
| border-radius: 18px !important;
| |
| border: 1px solid rgba(255, 255, 255, 0.04) !important;
| |
| padding: 13px 14px 12px !important;
| |
| }
| |
|
| |
| .panel-header {
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| justify-content: space-between !important;
| |
| gap: 8px !important;
| |
| margin-bottom: 8px !important;
| |
| }
| |
|
| |
| .panel-title {
| |
| font-size: 12px !important;
| |
| text-transform: uppercase !important;
| |
| letter-spacing: 0.16em !important;
| |
| color: var(--text-muted) !important;
| |
| }
| |
|
| |
| .panel-tag {
| |
| font-size: 11px !important;
| |
| padding: 4px 9px !important;
| |
| border-radius: 999px !important;
| |
| background: rgba(5, 5, 9, 0.9) !important;
| |
| border: 1px solid var(--border-subtle) !important;
| |
| color: var(--text-muted) !important;
| |
| }
| |
|
| |
| .panel-content {
| |
| font-size: 13px !important;
| |
| color: #c6c6dd !important;
| |
| line-height: 1.4 !important;
| |
| }
| |
|
| |
| .chips {
| |
| display: flex !important;
| |
| flex-wrap: wrap !important;
| |
| gap: 6px !important;
| |
| margin-top: 8px !important;
| |
| }
| |
|
| |
| .chip {
| |
| padding: 4px 10px !important;
| |
| font-size: 11px !important;
| |
| border-radius: 999px !important;
| |
| background: rgba(5, 5, 9, 0.95) !important;
| |
| border: 1px solid var(--border-subtle) !important;
| |
| color: var(--text-muted) !important;
| |
| }
| |
|
| |
| .social-row {
| |
| display: flex !important;
| |
| flex-wrap: wrap !important;
| |
| gap: 8px !important;
| |
| margin-top: 10px !important;
| |
| }
| |
|
| |
| .social-pill {
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| gap: 8px !important;
| |
| padding: 7px 11px !important;
| |
| border-radius: var(--radius-pill) !important;
| |
| background: rgba(5, 5, 9, 0.94) !important;
| |
| border: 1px solid var(--border-subtle) !important;
| |
| font-size: 12px !important;
| |
| color: var(--text-muted) !important;
| |
| text-decoration: none !important;
| |
| }
| |
|
| |
| .social-icon {
| |
| width: 16px !important;
| |
| height: 16px !important;
| |
| border-radius: 5px !important;
| |
| background: linear-gradient(135deg, #8b5cff, #00ffb3) !important;
| |
| }
| |
|
| |
| /* Rechte Spalte: Card / Spotlight */
| |
| .side-card {
| |
| padding: 20px 18px 16px !important;
| |
| display: flex !important;
| |
| flex-direction: column !important;
| |
| gap: 14px !important;
| |
| }
| |
|
| |
| .side-badge-row {
| |
| display: flex !important;
| |
| justify-content: space-between !important;
| |
| align-items: center !important;
| |
| gap: 8px !important;
| |
| }
| |
|
| |
| .side-badge {
| |
| font-size: 11px !important;
| |
| padding: 4px 10px !important;
| |
| border-radius: 999px !important;
| |
| border: 1px solid rgba(255, 255, 255, 0.04) !important;
| |
| color: var(--text-muted) !important;
| |
| background: rgba(5, 5, 9, 0.9) !important;
| |
| }
| |
|
| |
| .avatar-row {
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| gap: 12px !important;
| |
| }
| |
|
| |
| .avatar {
| |
| width: 52px !important;
| |
| height: 52px !important;
| |
| border-radius: 18px !important;
| |
| background: radial-gradient(circle at top left, #ff4f6e, #7c5cff) !important;
| |
| position: relative !important;
| |
| overflow: hidden !important;
| |
| }
| |
|
| |
| .avatar-inner {
| |
| position: absolute !important;
| |
| inset: 8px !important;
| |
| border-radius: inherit !important;
| |
| background: radial-gradient(circle at top, #222235, #06060a) !important;
| |
| border: 1px solid rgba(255, 255, 255, 0.06) !important;
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| justify-content: center !important;
| |
| font-size: 20px !important;
| |
| overflow: hidden !important;
| |
| }
| |
|
| |
| .avatar-inner img {
| |
| width: 100% !important;
| |
| height: 100% !important;
| |
| object-fit: cover !important;
| |
| border-radius: inherit !important;
| |
| }
| |
|
| |
| .avatar-name {
| |
| font-size: 15px !important;
| |
| font-weight: 600 !important;
| |
| }
| |
|
| |
| .avatar-sub {
| |
| font-size: 12px !important;
| |
| color: var(--text-muted) !important;
| |
| }
| |
|
| |
| .side-main {
| |
| font-size: 13px !important;
| |
| color: #d0d0e8 !important;
| |
| line-height: 1.45 !important;
| |
| }
| |
|
| |
| .side-main strong {
| |
| color: #ffffff !important;
| |
| }
| |
|
| |
| .pill-row {
| |
| display: flex !important;
| |
| flex-wrap: wrap !important;
| |
| gap: 6px !important;
| |
| }
| |
|
| |
| .pill {
| |
| padding: 4px 9px !important;
| |
| font-size: 11px !important;
| |
| border-radius: 999px !important;
| |
| background: rgba(5, 5, 9, 0.95) !important;
| |
| border: 1px solid var(--border-subtle) !important;
| |
| color: var(--text-muted) !important;
| |
| }
| |
|
| |
| .Server {
| |
| margin-top: 6px !important;
| |
| padding: 10px 11px !important;
| |
| border-radius: 14px !important;
| |
| background: radial-gradient(circle at top, rgba(0, 255, 133, 0.12), rgba(5, 5, 9, 0.98)) !important;
| |
| border: 1px solid rgba(0, 255, 133, 0.4) !important;
| |
| font-size: 12px !important;
| |
| color: #31f5f2 !important;
| |
| }
| |
|
| |
| .schedule {
| |
| margin-top: 6px !important;
| |
| padding: 10px 11px !important;
| |
| border-radius: 14px !important;
| |
| background: radial-gradient(circle at top, rgba(0, 255, 133, 0.12), rgba(5, 5, 9, 0.98)) !important;
| |
| border: 1px solid rgba(0, 255, 133, 0.4) !important;
| |
| font-size: 12px !important;
| |
| color: #d8ffe8 !important;
| |
| }
| |
|
| |
| .schedule-title {
| |
| text-transform: uppercase !important;
| |
| letter-spacing: 0.16em !important;
| |
| font-size: 11px !important;
| |
| margin-bottom: 4px !important;
| |
| opacity: 0.9 !important;
| |
| }
| |
|
| |
| .schedule-grid {
| |
| display: flex !important;
| |
| flex-wrap: wrap !important;
| |
| gap: 6px !important;
| |
| margin-top: 6px !important;
| |
| }
| |
|
| |
| .schedule-pill {
| |
| padding: 3px 9px !important;
| |
| border-radius: 999px !important;
| |
| border: 1px solid rgba(216, 255, 232, 0.5) !important;
| |
| font-size: 11px !important;
| |
| color: #e9ffee !important;
| |
| }
| |
|
| |
| .side-footer {
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| justify-content: space-between !important;
| |
| gap: 8px !important;
| |
| margin-top: 6px !important;
| |
| }
| |
|
| |
| .small-note {
| |
| font-size: 11px !important;
| |
| color: var(--text-muted) !important;
| |
| }
| |
|
| |
| .side-cta {
| |
| padding: 7px 12px !important;
| |
| border-radius: var(--radius-pill) !important;
| |
| border: 1px solid rgba(124, 92, 255, 0.7) !important;
| |
| background: radial-gradient(circle at top left, rgba(124, 92, 255, 0.4), rgba(5, 5, 9, 0.96)) !important;
| |
| font-size: 12px !important;
| |
| color: #f5f5ff !important;
| |
| text-decoration: none !important;
| |
| }
| |
|
| |
| /* Footer */
| |
| footer {
| |
| margin-top: 26px !important;
| |
| width: 100% !important;
| |
| max-width: 1100px !important;
| |
| margin-inline: auto !important;
| |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
| |
| }
| |
|
| |
| footer .footer-inner {
| |
| border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
| |
| padding: 14px 4px 0 !important;
| |
| display: flex !important;
| |
| flex-wrap: wrap !important;
| |
| justify-content: space-between !important;
| |
| gap: 8px !important;
| |
| font-size: 11px !important;
| |
| color: #9b9bb5 !important;
| |
| }
| |
|
| |
| footer a {
| |
| color: #c9c5ff !important;
| |
| text-decoration: none !important;
| |
| padding: 4px 10px !important;
| |
| border-radius: 999px !important;
| |
| border: 1px solid #1c1c2a !important;
| |
| background: rgba(5, 5, 9, 0.92) !important;
| |
| }
| |
|
| |
| footer a:hover {
| |
| text-decoration: underline !important;
| |
| }
| |
