/* Live-Bereich der Startseite */
.live-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.live-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 16px; transition: border-color .3s; }
.live-card:hover { border-color: rgba(245,179,1,.4); }
.live-head { display: flex; align-items: center; gap: 12px; }
.live-head h3 { font-family: var(--font-head); font-size: 1.35rem; line-height: 1.1; }
.live-sub { color: var(--muted); font-size: .85rem; }
.live-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: rgba(245,179,1,.1); font-size: 1.4rem; flex: none; }
.pill { margin-left: auto; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.pill.on { background: rgba(61,220,132,.15); color: #3ddc84; border-color: transparent; }
.pill.off { background: rgba(255,92,92,.12); color: #ff7a7a; border-color: transparent; }
.live-big strong { display: block; font-family: var(--font-head); font-size: 2.6rem; line-height: 1; color: var(--accent); }
.live-big span { color: var(--muted); font-size: .9rem; }
.meter { height: 6px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 99px; transition: width 1s ease; }
.srv-list { list-style: none; display: grid; gap: 8px; font-size: .88rem; }
.srv-list li { display: flex; align-items: center; gap: 8px; color: #c8c8d2; min-width: 0; }
.srv-list li span.n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.srv-list li em { font-style: normal; color: var(--muted); flex: none; }
.srv-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5c5c; flex: none; }
.srv-dot.on { background: #3ddc84; }
.muted { color: var(--muted); font-size: .9rem; }
.live-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.btn.small { padding: 9px 16px; font-size: .88rem; }

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; margin-bottom: 24px; }
.news-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 10px; color: var(--text); text-decoration: none; transition: .3s; min-height: 180px; }
a.news-card:hover { border-color: rgba(245,179,1,.4); transform: translateY(-3px); }
.news-card time { color: var(--accent); font-size: .8rem; font-weight: 600; letter-spacing: .04em; }
.news-card h3 { font-family: var(--font-head); font-size: 1.35rem; line-height: 1.15; }
.news-card p { color: var(--muted); font-size: .92rem; flex: 1; }
.news-card .by { color: var(--muted); font-size: .8rem; }
.news-card.skeleton { background: linear-gradient(90deg, var(--surface) 25%, rgba(255,255,255,.06) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.news-empty { grid-column: 1 / -1; color: var(--muted); text-align: center; padding: 30px; }

@media (max-width: 900px) {
  .live-grid, .news-grid { grid-template-columns: 1fr; }
}

/* Statistik */
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.stile .sl { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.stile strong { font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; }
.stile .sd { color: var(--muted); font-size: .85rem; }
.stile .sd .up { color: #3ddc84; } .stile .sd .down { color: #ff7a7a; }
.stile:first-child strong { color: var(--accent); }

.stat-chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 22px 14px; text-align: left; margin-bottom: 18px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.chart-head h3 { font-family: var(--font-head); font-size: 1.3rem; }
.chart-meta { color: var(--muted); font-size: .85rem; }
.bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; align-items: end; height: 200px; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; min-width: 0; }
.bar-fill { width: 100%; max-width: 38px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent), rgba(255,106,0,.55)); min-height: 3px; height: 0; transition: height .9s cubic-bezier(.2,.8,.2,1); position: relative; }
.bar.today .bar-fill { background: linear-gradient(180deg, #fff3c4, var(--accent)); box-shadow: 0 0 20px rgba(245,179,1,.4); }
.bar-fill::after { content: attr(data-v); position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); font-size: .7rem; color: var(--muted); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.bar:hover .bar-fill::after { opacity: 1; color: var(--text); }
.bar-lbl { font-size: .68rem; color: var(--muted); line-height: 1.2; text-align: center; white-space: nowrap; }
.bar-lbl b { display: block; color: #c8c8d2; font-weight: 600; }

.stat-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-mini > div { border: 1px solid var(--border); border-radius: 12px; padding: 14px; text-align: center; }
.stat-mini strong { display: block; font-family: var(--font-head); font-size: 1.6rem; color: var(--accent); line-height: 1.1; }
.stat-mini span { color: var(--muted); font-size: .8rem; }

@media (max-width: 900px) {
  .stat-tiles, .stat-mini { grid-template-columns: repeat(2, 1fr); }
  .bars { gap: 3px; height: 160px; }
  .bar-lbl { font-size: .58rem; }
  .bar:nth-child(odd) .bar-lbl { visibility: hidden; }
}

/* Erdkugel */
.globe-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: center; text-align: left; }
.globe { position: relative; aspect-ratio: 1; max-height: 640px; width: 100%; margin: 0 auto; cursor: grab; touch-action: pan-y; }
.globe.grab { cursor: grabbing; }
.globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; }
.globe.ready canvas { opacity: 1; }
.globe-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.globe.ready .globe-loading { display: none; }
.globe-tip { position: absolute; left: 0; top: 0; pointer-events: none; background: rgba(12,12,18,.92); border: 1px solid rgba(245,179,1,.45); border-radius: 10px; padding: 8px 12px; font-size: .85rem; white-space: nowrap; backdrop-filter: blur(6px); z-index: 2; }
.globe-tip b { display: block; color: var(--accent); }
.globe-tip span { color: var(--muted); }
.globe-reset { position: absolute; right: 8px; bottom: 8px; z-index: 2; }
.globe-side { display: grid; gap: 12px; }
.gstat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.gstat strong { display: block; font-family: var(--font-head); font-size: 2rem; line-height: 1; color: var(--accent); }
.gstat span { color: var(--muted); font-size: .85rem; }
.glegend { list-style: none; display: grid; gap: 8px; color: #c8c8d2; font-size: .88rem; margin-top: 4px; }
.glegend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; }
.lg-gold { background: radial-gradient(circle, #fff6d6 30%, #f5b301 60%, rgba(245,179,1,.3)); box-shadow: 0 0 8px rgba(245,179,1,.8); }
.lg-green { background: #3ddc84; box-shadow: 0 0 8px rgba(61,220,132,.8); }
.lg-line { height: 2px !important; width: 18px !important; border-radius: 2px !important; background: rgba(255,140,0,.7); }
.gnote { color: var(--muted); font-size: .8rem; }
@media (max-width: 900px) { .globe-wrap { grid-template-columns: 1fr; } .globe-side { grid-template-columns: repeat(3, 1fr); } .glegend, .gnote { grid-column: 1 / -1; } }

/* Erdkugel: Live-Anzeige & Zoom */
.globe canvas { touch-action: pan-y; }
.globe-live { position: absolute; left: 8px; top: 8px; z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(10,10,16,.75); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: #ff5c5c; backdrop-filter: blur(6px); }
.gl-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 0 rgba(255,59,59,.7); animation: gl-pulse 1.6s infinite; }
@keyframes gl-pulse { 70% { box-shadow: 0 0 0 7px rgba(255,59,59,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,59,0); } }
.gl-time { color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.gl-dn { color: var(--muted); font-weight: 500; letter-spacing: 0; }
.globe-zoom { position: absolute; right: 8px; top: 8px; z-index: 2; display: grid; gap: 6px; }
.globe-zoom button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: rgba(10,10,16,.75); color: var(--text); font-size: 1.25rem; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); transition: .2s; }
.globe-zoom button:hover { border-color: var(--accent); color: var(--accent); }

/* Erdkugel: Schalter Echt / Stilisiert */
.globe-switch { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 2; display: inline-flex; padding: 4px; gap: 4px;
  background: rgba(10,10,16,.8); border: 1px solid var(--border); border-radius: 999px; backdrop-filter: blur(6px); }
.gs-btn { border: 0; background: none; color: var(--muted); font: 600 .82rem Inter, system-ui, sans-serif; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: .2s; white-space: nowrap; }
.gs-btn:hover { color: var(--text); }
.gs-btn.on { background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #111; }
.globe.tex-loading::after { content: "Satellitenbild wird geladen …"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  background: rgba(10,10,16,.85); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; font-size: .85rem; color: var(--text); }
.globe-reset { bottom: 54px !important; }
@media (max-width: 520px) { .gs-btn { padding: 6px 10px; font-size: .76rem; } .globe-live .gl-dn { display: none; } }

/* Discord-Button */
.btn.discord { background: #5865f2; color: #fff; border: 0; box-shadow: 0 8px 24px -10px rgba(88,101,242,.8); }
.btn.discord:hover { background: #6b77ff; color: #fff; transform: translateY(-2px); }