:root {
    --bg: #262f37;
    --bg-2: #1e262c;
    --panel: #2e3942;
    --border: #3d4a55;
    --text: #ffffff;
    --muted: #aab6c0;
    --accent: #50fcea;
    --accent-dark: #2bc4b3;
    --danger: #f87171;
    --warn: #fbbf24;
    --radius: 12px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }

.container { max-width: 1000px; margin: 0 auto; padding: 32px 20px 64px; }

/* ---------- Topbar ---------- */
.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 24px; background: var(--bg-2); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); font-size: 18px; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 22px; height: 22px; background: var(--accent); border-radius: 5px; box-shadow: inset -4px -4px 0 var(--accent-dark); }
.topbar nav { display: flex; gap: 6px; flex-wrap: wrap; }
.topbar nav a { color: var(--muted); padding: 6px 12px; border-radius: 8px; }
.topbar nav a:hover, .topbar nav a.active { color: var(--text); background: var(--panel); text-decoration: none; }
.topbar nav .nav-admin { border: 1px solid var(--border); }

/* ---------- Buttons & Formulare ---------- */
.btn {
    display: inline-block; cursor: pointer; font: inherit; font-weight: 600;
    background: var(--accent); color: #062b27; border: 0; border-radius: 8px; padding: 9px 16px;
}
.btn:hover { background: #7dfff0; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn.ghost:hover { background: var(--panel); }
.btn.danger { background: var(--danger); color: #2b0707; }
.btn.danger:hover { background: #fca5a5; }
.btn.small { padding: 4px 10px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

input[type=text], input[type=password], input[type=search], input[type=time], input[type=number] {
    width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 12px; font: inherit;
}
input:focus { outline: 2px solid var(--accent-dark); border-color: transparent; }
label { display: block; margin: 14px 0 6px; color: var(--muted); font-size: 14px; }

/* ---------- Öffentliche Seite ---------- */
.hero { text-align: center; padding: 40px 0 24px; }
.hero h1 { font-size: clamp(32px, 6vw, 52px); margin: 0 0 8px; }
.lead { color: var(--muted); font-size: 18px; max-width: 620px; margin: 0 auto 28px; }

.status-card {
    max-width: 460px; margin: 0 auto; text-align: left;
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
}
.status-row { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 14px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); }
.dot.on { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.dot.off { background: var(--danger); }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.status-grid .label { display: block; color: var(--muted); font-size: 13px; }
.status-grid .value { font-weight: 600; }
.ip-box { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 8px 8px 14px; }
.ip-box code { color: var(--accent); overflow-wrap: anywhere; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 36px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.card h3 { margin: 0 0 8px; }
.card p { color: var(--muted); margin: 0 0 12px; }

.page h1 { margin-top: 0; }
.rules { list-style: none; counter-reset: r; padding: 0; display: grid; gap: 12px; }
.rules li { counter-increment: r; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px 16px 60px; position: relative; }
.rules li::before { content: counter(r); position: absolute; left: 18px; top: 14px; width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: #062b27; font-weight: 700; display: grid; place-items: center; }
.rules strong { display: block; }
.rules span { color: var(--muted); }

.footer { text-align: center; color: var(--muted); font-size: 13px; padding: 24px; border-top: 1px solid var(--border); }

/* ---------- Admin ---------- */
body.admin { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar { background: var(--bg-2); border-right: 1px solid var(--border); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; }
.sidebar .brand { margin-bottom: 18px; padding: 0 8px; }
.sidebar a.nav { display: flex; align-items: center; gap: 14px; color: var(--text); font-weight: 500; padding: 10px 12px; border-radius: 8px; }
.sidebar a.nav svg { width: 18px; height: 18px; flex: none; color: #8aa4bd; }
.sidebar a.nav:hover { background: rgba(255,255,255,.05); text-decoration: none; }
.sidebar a.nav.active { background: rgba(255,255,255,.09); text-decoration: none; }
.sidebar a.nav.active svg { color: var(--accent); }
.nav-heading { color: var(--text); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 16px 12px 8px; }
.sidebar .spacer { flex: 1; }
.sidebar .who { color: var(--muted); font-size: 13px; padding: 8px 12px; }
.admin-main { padding: 28px 32px 64px; max-width: 1100px; width: 100%; }
.admin-main h1 { margin: 0 0 20px; font-size: 26px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.stat .label { color: var(--muted); font-size: 13px; display: block; }
.stat .value { font-size: 24px; font-weight: 700; }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 20px; }
.panel h2 { margin: 0 0 12px; font-size: 18px; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { color: var(--muted); font-weight: 600; }

.console-out {
    background: #1a2025; border: 1px solid var(--border); border-radius: 8px; padding: 12px;
    height: 420px; overflow-y: auto; font: 14px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: pre-wrap; word-break: break-word;
}
.console-out .cmd { color: var(--accent); }
.console-out .err { color: var(--danger); }
.console-out .log { color: #aab7c3; }
.console-out .warn { color: var(--warn); }
.console-form { display: flex; gap: 10px; margin-top: 12px; }

.player-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 14px; }
.chip .btn { border-radius: 999px; }
.row-form { display: flex; gap: 10px; flex-wrap: wrap; }
.row-form input { flex: 1 1 200px; width: auto; }
.empty { color: var(--muted); }

.badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.badge.admin { color: var(--warn); border-color: var(--warn); }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-box { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.login-box h1 { margin: 0 0 4px; font-size: 22px; }
.login-box .btn { width: 100%; margin-top: 18px; }
.select-small { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font: inherit; }
.user-actions { white-space: nowrap; }
.user-actions .btn { margin-right: 6px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.badge.st-pending { color: var(--warn); border-color: var(--warn); }
.badge.st-active { color: var(--accent); border-color: var(--accent-dark); }
.badge.st-blocked { color: var(--danger); border-color: var(--danger); }
.alert.ok { background: rgba(80,252,234,.1); border-color: var(--accent-dark); color: var(--text); margin-bottom: 18px; }
.alert { background: rgba(248,113,113,.12); border: 1px solid var(--danger); color: var(--danger); border-radius: 8px; padding: 10px 12px; margin: 14px 0 0; font-size: 14px; }

#toast { position: fixed; right: 20px; bottom: 20px; background: var(--panel); border: 1px solid var(--accent); color: var(--text); padding: 12px 16px; border-radius: 10px; opacity: 0; transform: translateY(8px); transition: .2s; pointer-events: none; max-width: 340px; }
#toast.show { opacity: 1; transform: none; }
#toast.err { border-color: var(--danger); }

/* ---------- Logo ---------- */
.brand-logo { height: 34px; width: auto; display: block; }
.sidebar .brand-logo { height: 30px; }
.hero-logo { display: block; width: min(400px, 82%); height: auto; margin: 0 auto 14px; filter: drop-shadow(0 10px 28px rgba(0,0,0,.35)); }
.login-logo { display: block; width: 140px; height: auto; margin: 0 auto 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Server-Leiste oben ---------- */
.admin-content { min-width: 0; }
.server-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px;
    min-height: 78px; padding: 14px 32px; border-bottom: 1px solid rgba(255,255,255,.06);
    background-color: #2b3a40;
    background-image:
        linear-gradient(90deg, rgba(80,252,234,.05) 50%, transparent 50%),
        linear-gradient(rgba(255,255,255,.035) 50%, transparent 50%),
        linear-gradient(100deg, #2e4a45 0%, #3a3f59 55%, #4e3a50 100%);
    background-size: 48px 48px, 48px 48px, 100% 100%;
}
/* Eigenes Minecraft-Bild: Datei assets/header-bg.jpg ablegen */
.server-bar.has-bg {
    background-image: linear-gradient(rgba(38,47,55,.72), rgba(38,47,55,.9)), var(--bar-img);
    background-size: cover; background-position: center;
}
.sb-item { white-space: nowrap; }
.sb-item strong { font-weight: 700; }
.sb-spacer { flex: 1; }
.sb-status { display: flex; align-items: center; gap: 14px; }
.btn.caps { text-transform: uppercase; letter-spacing: .05em; font-weight: 800; font-size: 13px; border-radius: 4px; padding: 10px 14px; }
.switch { position: relative; display: inline-block; width: 46px; height: 24px; padding: 0; border-radius: 999px; border: 2px solid var(--accent-dark); background: #26343c; transition: background .2s, border-color .2s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fecaca; transition: left .2s, background .2s; }
.switch.off { border-color: #f87171; background: #b91c1c; }
.switch.on i { left: 25px; background: #5ef08a; }
button.switch { cursor: pointer; }
button.switch:hover { filter: brightness(1.15); }
button.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.switch.busy { opacity: .6; cursor: progress; pointer-events: none; animation: sw-pulse 1s ease-in-out infinite; }
@keyframes sw-pulse { 50% { opacity: .35; } }

.dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 28px; width: min(460px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(10, 15, 20, .65); }
.dialog h2 { margin: 0 0 14px; font-size: 20px; }
.dialog .btn { margin-top: 8px; }
.steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 10px; }
.steps .ip-box { margin-top: 8px; }

/* ---------- Karte "Gameserverauslastung" (schlicht wie die anderen Karten) ---------- */
.load-panel .load-sub { margin: -4px 0 16px; color: var(--muted); font-size: 14px; }
.load-body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.load-body h3 { margin: 0 0 10px; font-size: 15px; }
.bar { position: relative; height: 54px; border-radius: 6px; background: #262d35; overflow: hidden; display: grid; place-items: center; }
.bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(80,252,234,.38); transition: width .6s ease; }
.bar-text { position: relative; font-weight: 700; font-size: 15px; }
.ram { font-size: 30px; font-weight: 800; line-height: 54px; }
.ram-sub { color: var(--muted); font-size: 13px; margin-top: -6px; }

/* ---------- Neustart-Zeitpläne ---------- */
.notice { border-radius: 10px; padding: 12px 14px; margin-bottom: 20px; font-size: 14px; border: 1px solid var(--border); background: var(--panel); }
.notice.ok { border-color: var(--accent-dark); }
.notice.warn { border-color: var(--warn); color: var(--warn); }
.form-grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 14px; }
.days { display: flex; gap: 8px; flex-wrap: wrap; }
.day { margin: 0; cursor: pointer; }
.day input { position: absolute; opacity: 0; pointer-events: none; }
.day span { display: block; min-width: 46px; text-align: center; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); font-weight: 600; }
.day input:checked + span { background: rgba(80,252,234,.15); border-color: var(--accent); color: var(--accent); }
.day input:focus-visible + span { outline: 2px solid var(--accent-dark); }
.sched { display: flex; align-items: center; gap: 22px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.sched:last-child { border-bottom: 0; }
.sched.paused { opacity: .55; }
.sched-time { font-size: 28px; font-weight: 800; min-width: 84px; color: var(--accent); }
.sched-info { flex: 1; display: grid; gap: 4px; }
.sched-days { display: flex; gap: 4px; flex-wrap: wrap; }
.dchip { font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.dchip.on { color: var(--text); border-color: var(--accent-dark); background: rgba(80,252,234,.1); }
.sched-actions { display: flex; gap: 8px; }

@media (max-width: 800px) {
    .nav-heading { display: none; }
    .load-body { grid-template-columns: 1fr; gap: 20px; }
    .form-grid { grid-template-columns: 1fr; }
    .sched { flex-wrap: wrap; }
    body.admin { grid-template-columns: 1fr; }
    .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--border); }
    .sidebar .brand { margin: 0 10px 0 0; }
    .sidebar .spacer { display: none; }
    .admin-main { padding: 20px 16px 48px; }
}

/* ---------- Backups ---------- */
.bk-storage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.bk-storage .label { margin: 0; }
.bk-val { font-size: 26px; font-weight: 800; margin: 4px 0 2px; }
.bk-storage .ram-sub { margin-top: 2px; word-break: break-all; }
.bar.thin { height: 10px; margin-top: 8px; border-radius: 999px; }
.bar.thin .bar-fill { background: rgba(80,252,234,.6); }
#bk-job { margin-top: 14px; }
label.check { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 15px; margin: 0 0 4px; cursor: pointer; }
label.check input { width: 18px; height: 18px; accent-color: var(--accent); }
@media (max-width: 800px) { .bk-storage { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- FTP-Zugang ---------- */
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 14px 18px; align-items: center; margin: 0; }
.kv dt { font-weight: 700; margin: 0; }
.kv dd { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; word-break: break-all; }
.kv .mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { background: rgba(255,255,255,.07); color: var(--accent); }
pre.code { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin: 0; overflow-x: auto; font: 13px/1.5 ui-monospace, Consolas, monospace; }
@media (max-width: 800px) { .kv { grid-template-columns: 1fr; gap: 4px; } .kv dd { margin-bottom: 12px; } }

/* Spieler- und Weltverwaltung */
.prow-list { display: flex; flex-direction: column; gap: 8px; }
.prow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; }
.prow .pname { font-weight: 600; min-width: 120px; }
.prow .pmeta { color: var(--muted); font-size: 13px; flex: 1 1 160px; overflow-wrap: anywhere; }
.prow .pact { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.prow select { width: auto; padding: 4px 8px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; }
.badge.op { color: var(--accent); border-color: var(--accent-dark); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.ghost.active { border-color: var(--accent); color: var(--accent); }
.rule-list { display: flex; flex-direction: column; }
.rule { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.rule:first-child { border-top: 0; }
.rule .rname.unknown { color: var(--muted); }

.muted { color: var(--muted); }

.prow-list.scroll { max-height: 440px; overflow-y: auto; padding-right: 4px; }
.filter { margin-bottom: 10px; }

/* Monitoring */
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.mon-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.mon-tile { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.mon-val { font-size: 24px; font-weight: 700; margin: 4px 0 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mon-val .badge { font-size: 12px; font-weight: 600; }
#mon-body { transition: opacity .2s; }
#mon-body.loading { opacity: .6; }
.chart-card { margin-bottom: 16px; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.chart-head h2 { margin: 0; }
.chart-now { color: var(--muted); font-size: 14px; }
.chart-note { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.chart { position: relative; }
.ch { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.ch:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; border-radius: 6px; }
.ch-grid { stroke: var(--border); stroke-width: 1; }
.ch-axis { fill: var(--muted); font-size: 11px; }
.ch-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch-area { fill: var(--accent); fill-opacity: .1; stroke: none; }
.ch-dot { fill: var(--accent); }
.ch-ref { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; }
.ch-off { fill: var(--danger); fill-opacity: .18; }
.ch-cross { stroke: var(--muted); stroke-width: 1; }
.ch-hover-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.ch-tip { position: absolute; pointer-events: none; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 13px; z-index: 5; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.ch-tip .tip-time { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.ch-tip .tip-row { display: flex; align-items: center; gap: 8px; }
.ch-tip .tip-row strong { font-size: 15px; }
.ch-tip .tip-key { width: 14px; height: 2px; background: var(--accent); border-radius: 2px; }
.ch-tip .tip-label, .ch-tip .tip-extra { color: var(--muted); font-size: 12px; }
.ch-tip .tip-off { color: var(--danger); }
.mon-table summary { cursor: pointer; font-weight: 600; }
.mon-table .table-wrap { max-height: 420px; overflow: auto; margin-top: 12px; }
#mon-hints .notice { margin-bottom: 10px; }

/* Rollen */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }
.role-card { border: 1px solid var(--border); background: var(--bg); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.role-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.role-perms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.perm-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); }
.perm-chip.off { color: var(--muted); }
.role-actions { display: flex; gap: 8px; margin-top: 10px; }
.dialog.wide { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; }
.perm-group { border: 1px solid var(--border); border-radius: 10px; margin: 12px 0 0; padding: 4px 14px 10px; }
.perm-group legend { color: var(--muted); font-size: 13px; padding: 0 6px; }
.perm-group label.check { margin: 8px 0 0; display: block; }
.dialog-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }


/* ---------- Startseite: Hero, Features, Schritte ---------- */
.hero-banner {
    position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--border);
    padding: 48px 20px 40px; margin-top: 4px;
    background:
        radial-gradient(900px 340px at 15% -10%, rgba(80,252,234,.16), transparent 60%),
        radial-gradient(700px 320px at 95% 0%, rgba(150,70,140,.28), transparent 60%),
        linear-gradient(135deg, #2f3d49 0%, #262f37 55%, #2d2837 100%);
}
.hero-tagline { margin: 0 auto 22px; max-width: 640px; font-size: clamp(19px, 3.2vw, 26px); font-weight: 600; line-height: 1.3; }
.hero-status {
    display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; margin-bottom: 22px;
    background: rgba(20,26,31,.55); border: 1px solid var(--border); border-radius: 999px; font-size: 15px;
}
.hero-status .sep { color: var(--muted); margin: 0 4px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: stretch; }
.ip-copy {
    display: inline-flex; align-items: center; gap: 16px; padding: 8px 8px 8px 20px; cursor: pointer;
    background: var(--bg-2); color: var(--text); border: 2px solid var(--accent); border-radius: 12px; font: inherit;
    transition: background .15s, transform .1s;
}
.ip-copy:hover { background: #172025; }
.ip-copy:active { transform: translateY(1px); }
.ip-copy:focus-visible, .hero-cta .btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ip-copy code { color: var(--accent); font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.ip-copy-label { background: var(--accent); color: #062b27; font-weight: 700; padding: 9px 16px; border-radius: 8px; white-space: nowrap; }
.ip-copy.copied .ip-copy-label { background: #fff; }
.hero-cta .btn { display: inline-flex; align-items: center; padding: 0 20px; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: 28px; }
.feature { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px; }
.feature-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(80,252,234,.12); color: var(--accent); margin-bottom: 14px; }
.feature h3 { margin: 0 0 6px; font-size: 18px; }
.feature p { margin: 0; color: var(--muted); font-size: 15px; }

.steps { margin-top: 44px; }
.steps h2 { text-align: center; margin: 0 0 20px; }
.steps ol { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.steps li { counter-increment: s; position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 18px 64px; }
.steps li::before { content: counter(s); position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #062b27; font-weight: 700; display: grid; place-items: center; }
.steps li strong { display: block; margin-bottom: 2px; }
.steps li span { color: var(--muted); font-size: 15px; }
.steps code { color: var(--accent); overflow-wrap: anywhere; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ip-copy { transition: none; } }
@media (max-width: 520px) {
    .hero-banner { padding: 32px 14px 28px; }
    .ip-copy { width: 100%; justify-content: space-between; padding-left: 14px; }
    .ip-copy code { font-size: 16px; }
    .hero-cta .btn { width: 100%; justify-content: center; padding: 10px; }
}

/* ---------- Startseite: weitere Bereiche ---------- */
.gallery, .faq, .team, .stats, .final-cta { margin-top: 56px; }
.gallery h2, .faq h2, .team h2, .final-cta h2 { text-align: center; margin: 0 0 20px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--panel); }
.gallery img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gallery figcaption { padding: 12px 14px; color: var(--muted); font-size: 14px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.stat { text-align: center; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 12px; }
.stat-value { display: block; font-size: clamp(30px, 5vw, 42px); font-weight: 700; color: var(--accent); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }

.faq { max-width: 760px; margin-left: auto; margin-right: auto; }
.faq details { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--accent); }
.faq details[open] summary::after { content: '–'; }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
.faq details p { margin: 0; padding: 0 18px 18px; color: var(--muted); }

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.member { text-align: center; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 16px; }
.member img, .member-initial { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: block; }
.member-initial { display: grid; place-items: center; font-size: 32px; font-weight: 700; background: rgba(80,252,234,.14); color: var(--accent); }
.member h3 { margin: 0; font-size: 18px; }
.member-role { display: inline-block; margin: 4px 0 8px; font-size: 13px; color: var(--accent); }
.member p { margin: 0; color: var(--muted); font-size: 14px; }

.final-cta { text-align: center; padding: 40px 20px; border-radius: 20px; border: 1px solid var(--border); background: radial-gradient(700px 260px at 50% 0%, rgba(80,252,234,.12), transparent 65%), var(--panel); }
.final-cta p { color: var(--muted); margin: 0 0 20px; }
.socials { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin: 22px 0 0 !important; }

.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin-bottom: 8px; }
.legal { max-width: 760px; }
.legal h2 { font-size: 19px; margin: 28px 0 6px; }
.legal p { color: var(--muted); margin: 0 0 10px; }
.legal .notice { border: 1px solid var(--warn); color: var(--warn) !important; border-radius: 8px; padding: 10px 14px; }
@media (max-width: 640px) { .topbar nav { flex-wrap: wrap; } }

/* =====================================================================
   Öffentliche Seite: Minecraft-Biom & Pride
   Basis dunkel (#1E1E24), Gras-Grün = online/Zahlen, Lapis = Info/Team,
   Redstone = offline, dazu ein Regenbogen-Streifen als Pride-Akzent.
   Gilt nur für body.site, das Admin-Panel bleibt unverändert.
   ===================================================================== */
body.site {
    --bg: #1e1e24;
    --bg-2: #17171c;
    --panel: #272730;
    --border: #3b3b48;
    --muted: #b4b4c2;
    --accent: #2ecc71;          /* Gras */
    --accent-dark: #1e8449;
    --lapis: #2980b9;
    --lapis-text: #6cb4e4;      /* helleres Lapis für Text auf dunklem Grund */
    --redstone: #e74c3c;
    --radius: 8px;
    --pride: linear-gradient(90deg, #e74c3c 0 16.66%, #f39c12 0 33.33%, #f4d03f 0 50%, #2ecc71 0 66.66%, #2980b9 0 83.33%, #8e44ad 0);
    background:
        linear-gradient(rgba(30,30,36,.0), rgba(30,30,36,.0)),
        var(--bg);
}
body.site a { color: var(--lapis-text); }
body.site .topbar { background: var(--bg-2); border-bottom: 0; box-shadow: 0 4px 0 -1px rgba(0,0,0,.35); position: sticky; }
body.site .topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--pride); }
body.site .topbar { padding-bottom: 18px; }
body.site .topbar nav a { color: var(--muted); border-radius: 6px; }
body.site .topbar nav a:hover, body.site .topbar nav a.active { background: var(--panel); color: #fff; }
body.site .topbar nav .nav-admin { border-color: var(--border); }

/* Knöpfe im Minecraft-Look: eckig mit dicker Unterkante */
body.site .btn { background: var(--accent); color: #082414; border-radius: 6px; border-bottom: 4px solid var(--accent-dark); padding: 9px 18px 7px; }
body.site .btn:hover { background: #43dd84; }
body.site .btn.ghost { background: #34343f; color: #fff; border: 0; border-bottom: 4px solid #17171c; }
body.site .btn.ghost:hover { background: #3f3f4c; }

/* Hero */
body.site .hero-banner {
    border-radius: 14px; border: 1px solid var(--border);
    background:
        radial-gradient(800px 300px at 12% -10%, rgba(46,204,113,.18), transparent 62%),
        radial-gradient(700px 300px at 95% 0%, rgba(41,128,185,.22), transparent 62%),
        linear-gradient(180deg, #2a2a34 0%, #1e1e24 100%);
}
body.site .hero-banner::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--pride); }
body.site .hero-status { background: rgba(23,23,28,.7); border-radius: 6px; border-color: var(--border); }
body.site .dot.on { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
body.site .dot.off { background: var(--redstone); box-shadow: 0 0 8px rgba(231,76,60,.6); }
body.site .hero-status strong { color: var(--accent); }
body.site .ip-copy { border-radius: 8px; border: 2px solid var(--accent); border-bottom-width: 5px; background: var(--bg-2); }
body.site .ip-copy code { color: var(--accent); }
body.site .ip-copy:hover { background: #121216; }
body.site .ip-copy-label { background: var(--accent); color: #082414; border-radius: 5px; }
body.site .ip-copy.copied .ip-copy-label { background: #fff; }

/* Karten */
body.site .feature, body.site .steps li, body.site .stat, body.site .faq details, body.site .member { border-radius: 8px; border-color: var(--border); }
body.site .feature { border-top: 4px solid var(--lapis); }
body.site .feature-icon { background: rgba(41,128,185,.2); color: var(--lapis-text); border-radius: 8px; }
body.site .steps li::before { background: var(--accent); color: #082414; border-radius: 6px; box-shadow: inset 0 -3px 0 var(--accent-dark); }
body.site .steps code { color: var(--accent); }
body.site .stat { border-top: 4px solid var(--accent); }
body.site .stat-value { color: var(--accent); }
body.site .faq summary::after { color: var(--accent); }
body.site .faq summary:focus-visible { outline-color: var(--accent); }
body.site .member { border-top: 4px solid var(--lapis); }
body.site .member-initial { background: rgba(41,128,185,.22); color: var(--lapis-text); border-radius: 8px; }
body.site .member-role { color: var(--lapis-text); }
body.site .final-cta { border-radius: 14px; background: radial-gradient(700px 240px at 50% 0%, rgba(46,204,113,.14), transparent 65%), var(--panel); position: relative; overflow: hidden; }
body.site .final-cta::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--pride); }

/* Regelseite */
body.site .rules li { border-radius: 8px; border-left: 4px solid var(--lapis); }
body.site .rules li::before { background: var(--accent); color: #082414; border-radius: 6px; box-shadow: inset 0 -3px 0 var(--accent-dark); }

body.site .footer { border-top: 0; position: relative; background: var(--bg-2); }
body.site .footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--pride); }
body.site .legal .notice { border-color: var(--warn); }
body.site .brand { color: #fff; }
body.site .topbar nav a { color: var(--muted); }
body.site .topbar nav a:hover, body.site .topbar nav a.active { color: #fff; }
body.site .page .lead { margin-left: 0; }
body.site .btn, body.site .btn:hover { text-decoration: none; }
body.site a.btn { color: #082414; }
body.site a.btn.ghost { color: #fff; }

/* =====================================================================
   Admin-Panel: Farbkonzept "PrideCraft"
   Jede Farbe hat eine feste Bedeutung. Alle Textfarben erreichen auf den
   Kartenflächen mindestens Kontrast 4,5:1.
   ===================================================================== */
body.admin {
    /* Flächen */
    --bg: #1a1d24;
    --bg-2: #13151b;           /* Sidebar, Navigation */
    --panel: #222732;          /* Karten */
    --panel-2: #2a3040;        /* erhöhte Flächen, Hover */
    --border: #2d3444;
    /* Text */
    --text: #eceff4;
    --muted: #9aa4b5;
    /* Funktionsfarben */
    --accent: #50fcea;         /* Primär: Aktionen, aktiver Menüpunkt, Speichern, Hinzufügen */
    --accent-dark: #1fb5a6;
    --success: #2ecc71;        /* Online, Whitelist aktiv, erfolgreich */
    --danger: #ff5c6c;         /* Stoppen, Bannen, Löschen, Fehler */
    --warn: #ffb703;           /* Neustart, Warnung, Vorwarnung */
    --info: #b58cf2;           /* Operator-Rechte, System, Konsole */
    /* Rollen */
    --role-admin: #ff5fa8;
    --role-mod: #4cc9ff;
    --role-vip: #ffd84d;
    --role-player: #2ecc71;
    /* Pride-Akzent: sparsam einsetzen (Logo, aktive Navigation, dünne Linien) */
    --pride: linear-gradient(135deg, #ff2a85 0%, #9d4edd 50%, #00e5ff 100%);
    --pride-flag: linear-gradient(90deg, #e74c3c 0 16.66%, #f39c12 0 33.33%, #f4d03f 0 50%, #2ecc71 0 66.66%, #2980b9 0 83.33%, #8e44ad 0);
    --glow-accent: 0 0 0 1px rgba(80,252,234,.35), 0 0 18px rgba(80,252,234,.25);
    --glow-danger: 0 0 0 1px rgba(255,92,108,.4), 0 0 18px rgba(255,92,108,.28);
    background: var(--bg);
    color: var(--text);
}

/* Logo-Schriftzug mit Verlauf */
body.admin .sidebar .brand { font-weight: 800; letter-spacing: .02em; }
body.admin .sidebar .brand { background: var(--pride); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
body.admin .sidebar .brand img { -webkit-text-fill-color: initial; }

/* Sidebar: dünne Pride-Linie, aktiver Punkt mit Verlaufs-Balken */
body.admin .sidebar { background: var(--bg-2); border-right: 1px solid var(--border); position: relative; }
body.admin .sidebar::after { content: ''; position: absolute; top: 0; right: -1px; bottom: 0; width: 1px; background: linear-gradient(180deg, #ff2a85, #9d4edd 50%, #00e5ff); opacity: .35; pointer-events: none; }
body.admin .sidebar a.nav { position: relative; color: var(--muted); transition: background .15s, color .15s; }
body.admin .sidebar a.nav svg { color: #7f8aa0; transition: color .15s; }
body.admin .sidebar a.nav:hover { background: var(--panel); color: var(--text); }
body.admin .sidebar a.nav:hover svg { color: var(--accent); }
body.admin .sidebar a.nav.active { background: linear-gradient(90deg, rgba(80,252,234,.14), rgba(80,252,234,0) 85%); color: #fff; }
body.admin .sidebar a.nav.active::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pride); }
body.admin .sidebar a.nav:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
body.admin .nav-heading { color: #c9cfdb; }

/* Karten */
body.admin .panel, body.admin .card { background: var(--panel); border-color: var(--border); }

/* Buttons: Farbe = Funktion, Glow nur beim Darüberfahren */
body.admin .btn { color: #04231f; transition: box-shadow .18s, background .18s, transform .1s; }
body.admin .btn:hover { background: #7dfff0; box-shadow: var(--glow-accent); }
body.admin .btn:active { transform: translateY(1px); }
body.admin .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
body.admin .btn.ghost:hover { background: var(--panel-2); border-color: #3b4560; box-shadow: none; }
body.admin .btn.danger { background: var(--danger); color: #2b0707; }
body.admin .btn.danger:hover { background: #ff7683; box-shadow: var(--glow-danger); }
body.admin .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Status und Rollen */
body.admin .dot.on { background: var(--success); box-shadow: 0 0 10px var(--success); }
body.admin .dot.off { background: var(--danger); }
body.admin .badge.st-active { color: var(--success); border-color: rgba(46,204,113,.5); }
body.admin .badge.st-pending { color: var(--warn); border-color: rgba(255,183,3,.5); }
body.admin .badge.st-blocked { color: var(--danger); border-color: rgba(255,92,108,.5); }
body.admin .badge.admin { color: var(--role-admin); border-color: rgba(255,95,168,.55); }
body.admin .badge.op { color: var(--info); border-color: rgba(181,140,242,.5); }
body.admin .badge.role-mod { color: var(--role-mod); border-color: rgba(76,201,255,.5); }
body.admin .badge.role-vip { color: var(--role-vip); border-color: rgba(255,216,77,.5); }
body.admin .badge.role-player { color: var(--role-player); border-color: rgba(46,204,113,.5); }
body.admin .alert.ok { background: rgba(46,204,113,.1); border-color: rgba(46,204,113,.5); }
body.admin .switch.on { border-color: var(--success); }
body.admin .switch.off { border-color: var(--danger); background: #5a1c25; }
body.admin .switch.off i { background: #ffc2c8; }
body.admin button.switch:hover { filter: none; box-shadow: var(--glow-accent); }
body.admin input:focus, body.admin select:focus, body.admin textarea:focus { outline: 2px solid var(--accent-dark); border-color: transparent; }

/* Tabellen dürfen auf schmalen Bildschirmen für sich scrollen, statt die ganze Seite zu verbreitern */
@media (max-width: 760px) {
    .admin-main .table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-main .table th, .admin-main .table td { white-space: nowrap; }
}

/* =====================================================================
   PrideCraft "Network"-Look (Webseite und Admin-Panel)
   Fast schwarzer Grund, scharfe Kanten, feine Rahmen, Karten mit Tiefe,
   kräftige Buttons. Pride erscheint nur als Verlauf in Logo, primären
   Buttons, aktiver Navigation und einer dünnen Linie.
   Dieser Block steht bewusst am Ende und überschreibt die Werte darüber.
   ===================================================================== */
body.site, body.admin {
    --bg: #0b0d12;
    --bg-2: #07080c;
    --panel: #12151c;
    --panel-2: #181c26;
    --border: #232938;
    --border-hi: #323a52;
    --text: #f2f4f8;
    --muted: #98a2b8;

    --accent: #50fcea;
    --accent-dark: #1fb5a6;
    --success: #2ecc71;
    --danger: #ff4d5e;
    --warn: #ffb703;
    --info: #b58cf2;
    --lapis: #4c8dff;
    --lapis-text: #8db4ff;
    --redstone: #ff4d5e;

    --pride: linear-gradient(100deg, #ff2a85 0%, #ff8a3d 22%, #ffd84d 40%, #2ee59d 58%, #4cc9ff 78%, #9d6bff 100%);
    --pride-soft: linear-gradient(100deg, #50fcea 0%, #8fd8ff 50%, #c9a6ff 100%);
    --pride-flag: linear-gradient(90deg, #e74c3c 0 16.66%, #f39c12 0 33.33%, #f4d03f 0 50%, #2ecc71 0 66.66%, #2980b9 0 83.33%, #8e44ad 0);

    --radius: 6px;
    --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 28px rgba(0,0,0,.5);
    --font-display: Bahnschrift, "DIN Alternate", "Barlow Condensed", "Segoe UI Semibold", system-ui, sans-serif;
    --font-body: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
}

/* ---- Typografie ---- */
body.site h1, body.site h2, body.admin h1, body.admin h2,
.nav-heading, .stat-value, .btn, .ip-copy-label, .hero-tagline, .wordmark {
    font-family: var(--font-display);
}
body.admin .admin-main h1, body.site .page h1 { font-size: 30px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
body.site .steps h2, body.site .faq h2, body.site .team h2, body.site .gallery h2, body.site .final-cta h2 {
    font-size: 26px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; position: relative; padding-bottom: 14px;
}
body.site .steps h2::after, body.site .faq h2::after, body.site .team h2::after, body.site .gallery h2::after, body.site .final-cta h2::after {
    content: ''; position: absolute; left: 50%; bottom: 0; width: 64px; height: 3px; margin-left: -32px; background: var(--pride); border-radius: 2px;
}
body.admin .panel h2, body.admin .panel h3 { font-family: var(--font-display); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }
.nav-heading { color: #6f7a92 !important; font-size: 12px; letter-spacing: .14em; }
.stat-value { letter-spacing: .02em; }

/* ---- Logo / Wortmarke ---- */
.wordmark {
    font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
    background: var(--pride); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.brand { gap: 10px; }
.topbar .wordmark { font-size: 21px; }
.sidebar .wordmark { font-size: 18px; }
.brand-tag { font-family: var(--font-display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border-hi); border-radius: 3px; padding: 2px 6px; -webkit-text-fill-color: initial; }
body.admin .sidebar .brand { background: none; -webkit-text-fill-color: initial; color: #fff; flex-wrap: wrap; }
body.admin .sidebar .brand img { -webkit-text-fill-color: initial; }

/* ---- Topbar (Webseite) ---- */
body.site .topbar { background: rgba(7,8,12,.92); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0,0,0,.45); }
body.site .topbar nav a { font-family: var(--font-display); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; border-radius: 4px; position: relative; }
body.site .topbar nav a.active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 2px; background: var(--pride); }
body.site .topbar nav a.active { background: transparent; }
body.site .topbar nav a:hover { background: var(--panel-2); }

/* ---- Sidebar & Navigation (Admin) ---- */
body.admin .sidebar { background: linear-gradient(180deg, #090b10 0%, #07080c 100%); border-right: 1px solid var(--border); }
body.admin .sidebar::after { opacity: .5; }
body.admin .sidebar a.nav { border-radius: 4px; font-weight: 600; letter-spacing: .01em; }
body.admin .sidebar a.nav:hover { background: var(--panel-2); }
body.admin .sidebar a.nav.active {
    background: linear-gradient(90deg, rgba(80,252,234,.16), rgba(157,107,255,.05) 60%, transparent);
    box-shadow: inset 0 0 0 1px rgba(80,252,234,.14);
    color: #fff;
}
body.admin .sidebar a.nav.active::before { width: 4px; background: var(--pride); box-shadow: 0 0 12px rgba(255,42,133,.5); }

/* ---- Karten ---- */
body.admin .panel, body.admin .card, body.site .feature, body.site .stat, body.site .steps li, body.site .faq details, body.site .member, body.site .rules li, body.site .gallery figure {
    background: linear-gradient(180deg, #151925 0%, var(--panel) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
body.site .feature, body.site .stat, body.site .member { border-top: 1px solid var(--border); position: relative; overflow: hidden; }
body.site .feature::before, body.site .stat::before, body.site .member::before {
    content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--pride); opacity: .0; transition: opacity .2s;
}
body.site .feature:hover, body.site .stat:hover, body.site .member:hover { border-color: var(--border-hi); transform: translateY(-2px); }
body.site .feature:hover::before, body.site .stat:hover::before, body.site .member:hover::before { opacity: 1; }
body.site .feature, body.site .stat, body.site .member { transition: transform .18s, border-color .18s; }
body.site .feature-icon, body.site .member-initial { background: rgba(80,252,234,.1); color: var(--accent); border-radius: 4px; border: 1px solid rgba(80,252,234,.25); }
body.site .member-role { color: var(--accent); }
body.site .rules li { border-left: 3px solid var(--accent); }
body.site .steps li::before, body.site .rules li::before { background: var(--pride-soft); color: #06141a; border-radius: 4px; box-shadow: none; }
body.site .stat { border-top: 1px solid var(--border); }
body.site .stat-value { color: var(--success); font-size: clamp(34px, 5vw, 48px); }
body.admin .panel { padding-top: 20px; }

/* ---- Hero (Webseite) ---- */
body.site .hero-banner {
    border-radius: 10px; border: 1px solid var(--border-hi);
    background:
        radial-gradient(900px 320px at 50% -20%, rgba(157,107,255,.22), transparent 65%),
        radial-gradient(600px 260px at 0% 100%, rgba(80,252,234,.12), transparent 65%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 40px),
        #0d1017;
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
body.site .hero-tagline { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: clamp(18px, 3vw, 26px); }
body.site .hero-status { border-radius: 4px; background: rgba(7,8,12,.8); border-color: var(--border-hi); font-family: var(--font-display); letter-spacing: .04em; }
body.site .final-cta { border-radius: 10px; border-color: var(--border-hi); background: radial-gradient(700px 240px at 50% 0%, rgba(157,107,255,.18), transparent 65%), var(--panel); box-shadow: var(--shadow-card); }

/* ---- Buttons ---- */
body.site .btn, body.admin .btn {
    border: 0; border-radius: 4px; padding: 10px 20px; font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
    background: var(--pride-soft); color: #06141a; position: relative;
    box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -3px 0 rgba(0,0,0,.25) inset, 0 6px 16px rgba(80,252,234,.15);
    transition: transform .12s, box-shadow .18s, filter .18s;
}
body.site .btn:hover, body.admin .btn:hover { background: var(--pride-soft); filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 -3px 0 rgba(0,0,0,.25) inset, 0 10px 26px rgba(80,252,234,.32); }
body.site .btn:active, body.admin .btn:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0,0,0,.35) inset; }
body.site .btn:focus-visible, body.admin .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Sekundär */
body.site .btn.ghost, body.admin .btn.ghost {
    background: var(--panel-2); color: var(--text); border: 1px solid var(--border-hi); box-shadow: none; text-transform: none; letter-spacing: .02em; font-weight: 700;
}
body.site .btn.ghost:hover, body.admin .btn.ghost:hover { background: #20263a; border-color: #46507a; box-shadow: none; filter: none; }
/* Gefahr */
body.site .btn.danger, body.admin .btn.danger {
    background: linear-gradient(180deg, #ff6a78, var(--danger)); color: #2b0509; text-transform: none; letter-spacing: .02em;
    box-shadow: 0 -3px 0 rgba(0,0,0,.25) inset, 0 6px 16px rgba(255,77,94,.15);
}
body.site .btn.danger:hover, body.admin .btn.danger:hover { filter: brightness(1.08); box-shadow: 0 -3px 0 rgba(0,0,0,.25) inset, 0 10px 26px rgba(255,77,94,.38); }
/* Erfolg / Online (zusätzlich mit class="btn success" nutzbar) */
.btn.success { background: linear-gradient(180deg, #4fe08c, var(--success)); color: #04210f; box-shadow: 0 -3px 0 rgba(0,0,0,.25) inset, 0 6px 16px rgba(46,204,113,.15); }
.btn.success:hover { background: linear-gradient(180deg, #4fe08c, var(--success)); box-shadow: 0 -3px 0 rgba(0,0,0,.25) inset, 0 10px 26px rgba(46,204,113,.38); }
/* kleine Buttons in Listen etwas ruhiger */
body.admin .btn.small, body.admin .prow .btn { text-transform: none; letter-spacing: .01em; font-size: 14px; padding: 5px 11px; font-weight: 700; }

/* IP-Knopf */
body.site .ip-copy { border-radius: 6px; border: 1px solid var(--accent); border-bottom-width: 1px; background: #0a0c11; box-shadow: 0 0 0 1px rgba(80,252,234,.15), 0 10px 30px rgba(80,252,234,.12); }
body.site .ip-copy:hover { box-shadow: 0 0 0 1px rgba(80,252,234,.4), 0 12px 34px rgba(80,252,234,.28); background: #0a0c11; }
body.site .ip-copy-label { background: var(--pride-soft); color: #06141a; border-radius: 3px; letter-spacing: .06em; text-transform: uppercase; }

/* ---- Formulare, Badges ---- */
body.admin input[type=text], body.admin input[type=password], body.admin input[type=search], body.admin input[type=number], body.admin input[type=time], body.admin select, body.admin textarea {
    background: #0b0d12; border: 1px solid var(--border-hi); border-radius: 4px;
}
body.admin .badge { border-radius: 3px; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; }
body.site .footer { background: var(--bg-2); }
body.site .footer::before, body.site .hero-banner::before, body.site .final-cta::before, body.site .topbar::after { background: var(--pride); }
body.admin .server-bar { border-bottom: 1px solid var(--border); }

@media (prefers-reduced-motion: reduce) {
    body.site .feature, body.site .stat, body.site .member, body.site .btn, body.admin .btn { transition: none; }
}

/* Feinschliff Sidebar */
@media (min-width: 901px) { body.admin { grid-template-columns: 244px 1fr; } }
.sidebar .wordmark { font-size: 17px; letter-spacing: .06em; }
.sidebar .brand-logo { height: 28px; }
body.admin .sidebar .brand .brand-tag { flex-basis: auto; margin-left: 38px; margin-top: -4px; }
body.admin .sidebar a.nav span { white-space: nowrap; }
@media (max-width: 900px) { body.admin .sidebar .brand .brand-tag { margin: 0; } }

/* =====================================================================
   GG-Look: dunkle Netzwerk-Seite mit Hero-Bild, roten Knöpfen, petrol-
   blauen Panels, Karten mit farbiger Kopffläche und mehrspaltigem Footer.
   Pride: Logo-Schriftzug, bunte Kartenköpfe, Konfetti-Pixel, Knopfkante.
   ===================================================================== */
body.site {
    --red: #e5121f;
    --red-hi: #ff2f3c;
    --petrol: #0f4a66;
    --petrol-2: #0b2f42;
    --petrol-3: #082231;
    --blue: #2b8fc4;
    --ink: #0a0c0f;
    --bg: #0a0c0f;
    --bg-2: #050607;
    --panel: #0d2a3a;
    --border: #1c3f53;
    --text: #fff;
    --muted: #a9bcc8;
    --accent: #ff2f3c;
    --lapis-text: #7fc6ee;
    --font-body: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
    --font-display: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
    --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .6  0 0 0 0 .6  0 0 0 0 .6  0 0 0 .09 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
    background: var(--noise), #101316;
    font-size: 17px;
}
body.site a { color: #ff6a74; }

/* Konfetti-Pixel an den Rändern (Pride-Farben) */
body.site .pixels { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
body.site .pixels::before, body.site .pixels::after {
    content: ''; position: absolute; width: 14px; height: 14px; opacity: .85;
}
body.site .pixels::before { left: 3%; top: 38%; background: #ff2a85; box-shadow: 40px 90px 0 #4cc9ff, 110px -60px 0 #ffd84d, 18px 260px 0 #9d6bff, 90px 380px 0 #2ee59d, 60px 520px 0 #ff8a3d; }
body.site .pixels::after { right: 4%; top: 28%; background: #2ee59d; box-shadow: -50px 120px 0 #ff2a85, -20px 300px 0 #4cc9ff, -90px 430px 0 #ffd84d, -30px 560px 0 #9d6bff; }
body.site .topbar, body.site main, body.site .footer { position: relative; z-index: 1; }

/* Topbar: transparent über dem Hero */
body.site .topbar {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
    padding: 16px 48px; background: rgba(5,6,7,.86); box-shadow: none; backdrop-filter: blur(6px); position: sticky;
}
body.site .topbar::after { height: 3px; }
body.site .topbar nav { justify-content: center; gap: 4px; }
body.site .topbar nav a { color: #fff; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; padding: 8px 14px; border-radius: 3px; }
body.site .topbar nav a:hover { background: transparent; color: var(--red-hi); text-decoration: none; }
body.site .topbar nav a.active { color: var(--red-hi); background: transparent; }
body.site .topbar nav a.active::after { display: none; }
body.site.home .topbar { position: absolute; left: 0; right: 0; top: 0; background: linear-gradient(180deg, rgba(5,6,7,.8), rgba(5,6,7,0)); backdrop-filter: none; box-shadow: none; }
body.site.home .topbar::after { display: none; }
body.site .brand .wordmark { font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif; font-weight: 400; font-size: 26px; letter-spacing: .04em; }
body.site .brand-logo { height: 40px; }

/* Knöpfe: rot mit dünner Pride-Kante */
body.site .btn {
    background: var(--red); color: #fff; border-radius: 3px; border: 0; padding: 11px 22px 10px;
    font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 15px;
    box-shadow: 0 3px 0 0 transparent, 0 8px 20px rgba(229,18,31,.25); position: relative; transition: background .15s, transform .12s, box-shadow .15s;
}
body.site .btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pride); border-radius: 0 0 3px 3px; }
body.site .btn:hover { background: var(--red-hi); filter: none; transform: translateY(-1px); text-decoration: none; box-shadow: 0 10px 26px rgba(229,18,31,.45); }
body.site .btn:active { transform: translateY(1px); box-shadow: none; }
body.site a.btn { color: #fff; }
body.site .nav-cta { padding: 10px 20px 9px; }

/* ---------- Hero ---------- */
body.site.home main.home { padding: 0; max-width: none; margin: 0; }
.gg-hero {
    position: relative; min-height: 700px; padding: 150px 48px 140px; display: flex; align-items: flex-start;
    background:
        linear-gradient(90deg, rgba(5,6,7,.94) 0%, rgba(5,6,7,.72) 38%, rgba(5,6,7,.15) 78%, rgba(5,6,7,.1) 100%),
        linear-gradient(0deg, #0e1114 0%, rgba(14,17,20,0) 22%),
        var(--hero, radial-gradient(900px 500px at 80% 30%, rgba(157,107,255,.35), transparent 60%)),
        radial-gradient(700px 420px at 70% 80%, rgba(43,143,196,.30), transparent 60%),
        #0b1218;
    background-size: auto, auto, cover, auto, auto; background-position: center;
}
.gg-hero-inner { max-width: 560px; margin-left: max(0px, calc((100vw - 1200px) / 2)); }
.gg-title { font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif; font-weight: 400; font-size: clamp(54px, 8vw, 92px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; margin: 0 0 6px; text-shadow: 0 4px 24px rgba(0,0,0,.6); position: relative; display: inline-block; padding-bottom: 14px; }
.gg-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; background: var(--pride); }
.gg-lead { font-size: 18px; line-height: 1.45; max-width: 520px; margin: 22px 0 34px; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.gg-label { text-transform: uppercase; letter-spacing: .04em; font-size: 18px; margin-bottom: 8px; }
.ip-copy { display: flex; width: 100%; max-width: 500px; padding: 0; gap: 0; border: 0; border-radius: 3px; overflow: hidden; background: none; box-shadow: none; cursor: pointer; font: inherit; color: #fff; align-items: stretch; }
.ip-copy:hover { background: none; box-shadow: 0 8px 26px rgba(229,18,31,.35); }
body.site .ip-copy { border: 0; box-shadow: none; background: none; }
body.site .ip-copy code { flex: 1; text-align: left; background: #4a4d52; color: #fff; padding: 12px 16px; font-size: 18px; font-family: inherit; font-weight: 400; overflow-wrap: anywhere; }
body.site .ip-copy .ip-copy-label { background: var(--red); color: #fff; border-radius: 0; padding: 12px 24px; font-family: inherit; text-transform: none; letter-spacing: 0; font-weight: 700; display: grid; place-items: center; min-width: 116px; }
body.site .ip-copy:hover .ip-copy-label { background: var(--red-hi); }
body.site .ip-copy.copied .ip-copy-label { background: #fff; color: #111; }
body.site .ip-copy:hover { background: none; box-shadow: 0 8px 26px rgba(229,18,31,.35); }
body.site .ip-copy:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.gg-online { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 16px; }
.gg-online strong { color: #fff; }
.gg-online .sep { opacity: .5; margin: 0 4px; }
body.site .dot.on { background: var(--success); box-shadow: 0 0 10px var(--success); }
body.site .dot.off { background: var(--red-hi); box-shadow: 0 0 10px rgba(255,47,60,.6); }

/* Zwei große Link-Karten am unteren Rand des Heros */
.gg-links { position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%); width: min(1040px, calc(100% - 32px)); display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; z-index: 2; }
.gg-link { display: flex; align-items: center; gap: 22px; min-height: 100px; padding: 0 34px; background: rgba(18,48,64,.94); border-radius: 6px; color: #fff !important; font-size: 30px; font-weight: 400; box-shadow: 0 14px 34px rgba(0,0,0,.55); transition: transform .15s, background .15s; text-decoration: none !important; border-bottom: 3px solid transparent; border-image: var(--pride) 1; border-image-slice: 1; }
.gg-link:hover { transform: translateY(-3px); background: rgba(24,66,88,.98); }
.gg-link svg { width: 38px; height: 38px; flex: none; }
.gg-link .chev { margin-left: auto; font-style: normal; color: var(--red-hi); font-size: 42px; line-height: 1; letter-spacing: -6px; }

/* ---------- Inhalt ---------- */
.gg-body { position: relative; z-index: 1; padding: 110px 20px 40px; }
.gg-wrap { max-width: 1040px; margin: 0 auto; }
.gg-h { font-size: 24px; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 8px; }
.gg-steps { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; }
.gg-steplist { list-style: none; counter-reset: gg; margin: 0; padding: 22px 24px; background: var(--petrol-2); border-radius: 6px; display: grid; gap: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.gg-steplist li { counter-increment: gg; position: relative; padding-left: 46px; min-height: 30px; display: flex; align-items: center; font-size: 17px; }
.gg-steplist li::before { content: counter(gg); position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; font-weight: 600; }
.gg-steplist code { color: #ffd84d; background: rgba(0,0,0,.25); padding: 1px 6px; border-radius: 3px; margin: 0 4px; font-size: 15px; }
.gg-info { background: var(--petrol-2); border: 3px solid #3d7e9b; border-radius: 6px; padding: 22px 24px; box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.gg-info ul { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); }
.gg-info strong { color: #fff; }

.gg-section { margin-top: 70px; }
.gg-title2 { text-align: center; font-weight: 400; font-size: 40px; margin: 0; letter-spacing: .01em; }
.gg-sub { text-align: center; color: #e4eef4; margin: 4px 0 28px; font-size: 17px; }
.gg-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.gg-cards.cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 780px; margin: 0 auto; }
.gg-card { border-radius: 6px; overflow: hidden; background: var(--petrol-3); box-shadow: 0 12px 28px rgba(0,0,0,.5); transition: transform .18s; }
.gg-card:hover { transform: translateY(-4px); }
.gg-card-top { height: 128px; display: grid; place-items: center; color: rgba(10,12,15,.78); }
.gg-card-top svg { width: 64px; height: 64px; stroke-width: 1.4; }
.tint-pink { background: linear-gradient(135deg, #ffb3d9, #ff7ab8); }
.tint-purple { background: linear-gradient(135deg, #d9bcff, #a97bf2); }
.tint-green { background: linear-gradient(135deg, #9af7bd, #4fe08c); }
.tint-cyan { background: linear-gradient(135deg, #9bf3fb, #4cd0e8); }
.tint-yellow { background: linear-gradient(135deg, #ffe9a0, #ffcb45); }
.tint-blue { background: linear-gradient(135deg, #a9ccff, #5c97f5); }
.gg-card-body { padding: 18px 18px 22px; background: linear-gradient(180deg, #0c3144, #082231); }
.gg-card-body.center { text-align: center; }
.gg-card-body h3 { margin: 0 0 6px; font-size: 22px; font-weight: 600; }
.gg-card-body p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.gg-num { display: block; font-size: 30px; font-weight: 600; }
.gg-numlabel { display: block; color: #8fb6cb; font-size: 15px; }
.gg-card .member-img, .gg-card .member-initial { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 36px; font-weight: 700; background: rgba(255,255,255,.4); color: #0a0c0f; margin: 0; }

body.site .faq { max-width: 760px; margin-left: auto; margin-right: auto; }
body.site .faq details { background: var(--petrol-2); border: 0; border-left: 3px solid var(--blue); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
body.site .faq summary { font-weight: 600; font-size: 18px; }
body.site .faq summary::after { color: var(--red-hi); }
body.site .faq details p { color: #c4d4dd; }
body.site .gallery-grid figure { border: 0; border-radius: 6px; background: var(--petrol-3); box-shadow: 0 12px 28px rgba(0,0,0,.5); }

.gg-cta { margin: 80px auto 0; text-align: center; padding: 44px 20px 50px; background: linear-gradient(180deg, rgba(15,74,102,.55), rgba(8,34,49,.7)); border-radius: 8px; border-top: 4px solid transparent; border-image: var(--pride) 1; box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.gg-cta .ip-copy { margin: 0 auto; }

/* ---------- Unterseiten (Regeln, Impressum, Datenschutz) ---------- */
body.site main.container { padding-top: 40px; }
body.site .page h1 { font-weight: 400; font-size: 40px; letter-spacing: .01em; text-transform: uppercase; }
body.site .rules li { background: var(--petrol-2); border: 0; border-left: 3px solid var(--blue); border-radius: 4px; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
body.site .rules li::before { background: var(--blue); color: #fff; border-radius: 50%; box-shadow: none; }
body.site .legal h2 { text-transform: uppercase; font-weight: 400; letter-spacing: .02em; }
body.site .legal p { color: #c4d4dd; }

/* ---------- Footer ---------- */
body.site .footer { background: linear-gradient(180deg, #0c2733 0%, #07131a 70%, #050607 100%); border-top: 0; padding: 50px 20px 0; text-align: left; color: #c4d4dd; font-size: 16px; margin-top: 70px; }
body.site .footer::before { height: 4px; background: var(--pride); }
.footer-cols { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 50px; align-items: start; padding-bottom: 36px; }
.footer-brand img { width: min(240px, 100%); height: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
.footer h3 { font-weight: 400; font-size: 22px; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.footer p { margin: 0 0 12px; }
.footer a { color: #ff6a74; }
.footer-social { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-social a { color: #fff; }
.footer-social a:hover { color: #ff6a74; }
.footer-bar { background: #000; display: flex; flex-wrap: wrap; gap: 8px 30px; justify-content: center; padding: 16px 20px; margin: 0 -20px; }
.footer-bar a { color: #fff; }
.footer-note { background: #000; margin: 0 -20px; padding: 0 20px 18px; text-align: center; font-size: 13px; color: #7f95a2; }

@media (max-width: 900px) {
    body.site .topbar { grid-template-columns: 1fr auto; padding: 12px 16px; gap: 10px; }
    body.site .topbar nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
    body.site .topbar nav a { white-space: nowrap; font-size: 15px; padding: 6px 10px; }
    .gg-hero { padding: 150px 20px 120px; min-height: 0; }
    .gg-hero-inner { margin-left: 0; }
    .gg-links { grid-template-columns: 1fr; gap: 14px; bottom: -120px; }
    .gg-link { min-height: 78px; font-size: 24px; padding: 0 22px; }
    .gg-body { padding-top: 160px; }
    .gg-steps { grid-template-columns: 1fr; }
    .gg-cards, .gg-cards.cols-3 { grid-template-columns: repeat(2, 1fr); }
    .footer-cols { grid-template-columns: 1fr; gap: 28px; }
    .gg-title2 { font-size: 32px; }
}
@media (max-width: 520px) {
    .gg-cards, .gg-cards.cols-3 { grid-template-columns: 1fr; }
    body.site .ip-copy .ip-copy-label { min-width: 96px; padding: 12px 14px; }
    body.site .ip-copy code { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .gg-card, .gg-link { transition: none; } .gg-card:hover, .gg-link:hover { transform: none; } }
body.site .topbar { z-index: 20; }
.gg-link:only-child { grid-column: 1 / -1; justify-self: center; width: min(520px, 100%); }
body.site { overflow-x: clip; }

/* =====================================================================
   Admin-Panel im GG-Look: schwarzer Grund, petrolblaue Panels, rote
   Akzente (aktive Navigation, Gefahr). Hauptknöpfe in kräftigem Blau,
   damit „Bannen“ und „Löschen“ in Rot nie mit normalen Aktionen
   verwechselt werden.
   ===================================================================== */
body.admin {
    --bg: #0a0c0f;
    --bg-2: #050607;
    --panel: #0c2433;
    --panel-2: #123448;
    --border: #1c4057;
    --border-hi: #2b6485;
    --text: #ffffff;
    --muted: #9fb7c5;
    --accent: #4cc2f0;
    --accent-dark: #2b8fc4;
    --danger: #ff4d5e;
    --font-display: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
    --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .6  0 0 0 0 .6  0 0 0 0 .6  0 0 0 .08 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}
body.admin .admin-content { background: var(--noise), #0f1317; }
body.admin .sidebar { background: linear-gradient(180deg, #06090c, #050607); }
body.admin .sidebar a.nav { text-transform: uppercase; letter-spacing: .04em; font-size: 15px; font-weight: 600; color: #cfdde6; }
body.admin .sidebar a.nav:hover { background: var(--panel); color: #fff; }
body.admin .sidebar a.nav:hover svg { color: #ff6a74; }
body.admin .sidebar a.nav.active { background: linear-gradient(90deg, rgba(229,18,31,.22), rgba(229,18,31,0) 85%); box-shadow: none; color: #fff; }
body.admin .sidebar a.nav.active svg { color: #ff6a74; }
body.admin .sidebar a.nav.active::before { background: linear-gradient(180deg, #ff2a85, #e5121f, #ff8a3d); box-shadow: 0 0 12px rgba(229,18,31,.6); }
body.admin .nav-heading { color: #6f93a8 !important; }
body.admin .admin-main h1, body.admin .panel h2, body.admin .panel h3 { font-weight: 400; text-transform: uppercase; letter-spacing: .03em; }
body.admin .admin-main h1 { font-size: 32px; }
body.admin .panel, body.admin .card { background: linear-gradient(180deg, #0e2a3b, #0b2231); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 12px 28px rgba(0,0,0,.45); }
body.admin .prow, body.admin .role-card { background: #081a26; border-color: var(--border); }

/* Hauptknopf: kräftiges Blau mit dünner Pride-Kante unten */
body.admin .btn {
    background: #1b78a8; color: #fff; border-radius: 3px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
    box-shadow: 0 8px 18px rgba(27,120,168,.25); position: relative; filter: none;
}
body.admin .btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pride); border-radius: 0 0 3px 3px; }
body.admin .btn:hover { background: #2490c6; filter: none; box-shadow: 0 10px 26px rgba(43,143,196,.45); }
body.admin .btn.ghost { background: #123448; color: #fff; border: 1px solid var(--border-hi); box-shadow: none; text-transform: none; letter-spacing: .01em; }
body.admin .btn.ghost::after, body.admin .btn.small::after, body.admin .prow .btn::after, body.admin .btn.danger::after { display: none; }
body.admin .btn.ghost:hover { background: #1a4a66; box-shadow: none; }
body.admin .btn.danger { background: linear-gradient(180deg, #ff6a78, #ff4d5e); color: #2b0509; text-transform: none; letter-spacing: .01em; box-shadow: none; }
body.admin .btn.danger:hover { box-shadow: 0 8px 22px rgba(255,77,94,.4); }
body.admin .btn.small, body.admin .prow .btn { text-transform: none; letter-spacing: .01em; }
body.admin input[type=text], body.admin input[type=password], body.admin input[type=search], body.admin input[type=number], body.admin input[type=time], body.admin select, body.admin textarea { background: #06121a; border-color: var(--border-hi); }
body.admin .server-bar { border-bottom: 3px solid transparent; border-image: var(--pride) 1; }

/* ---------- Spielerkonten: Navigation, Anmelden, Registrieren ---------- */
.nav-auth { display: flex; align-items: stretch; gap: 0; }
.nav-auth form { margin: 0; display: flex; }
.glass { font: inherit; font-size: 16px; color: #fff !important; text-decoration: none !important; padding: 9px 20px; background: rgba(255,255,255,.07); border: 0; border-left: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); cursor: pointer; transition: background .15s; }
.nav-auth > :first-child { border-left: 0; border-radius: 4px 0 0 4px; }
.nav-auth > :last-child, .nav-auth form:last-child .glass { border-radius: 0 4px 4px 0; }
.glass:hover { background: rgba(255,255,255,.16); }
.glass:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.auth { max-width: 520px; margin: 0 auto; padding: 10px 0 20px; }
.auth-head { text-align: center; padding: 22px 16px 18px; background: rgba(255,255,255,.04); border-radius: 4px; margin-bottom: 26px; }
.auth-head h1 { margin: 0; font-size: 36px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.auth-head p { margin: 4px 0 0; color: var(--muted); }
.auth-head a { color: #fff; font-weight: 600; }
.auth-card { display: block; }
.auth-card label { display: block; margin: 22px 0 8px; color: #b5bfc6; font-size: 17px; }
.auth-card .req, .req-note .req { color: #e5121f; }
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=date] {
    width: 100%; background: #2a3138; color: #fff; border: 1px solid #36404a; border-radius: 3px; padding: 14px 14px; font: inherit; font-size: 17px; color-scheme: dark;
}
.auth-card input:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: transparent; }
.field-hint { margin: 8px 0 0; font-size: 14px; color: #98a6b0; }
.field-hint.center { text-align: center; margin-top: 22px; }
.pw-row { display: grid; grid-template-columns: 1fr 58px; gap: 10px; align-items: stretch; }
.pw-row .strength { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-top: 2px; font-size: 14px; }
.eye { background: #2a3138; border: 1px solid #36404a; border-radius: 3px; color: #fff; cursor: pointer; display: grid; place-items: center; }
.eye:hover { background: #343d46; }
.eye[aria-pressed="true"] { color: var(--accent); }
.meter { flex: 1; height: 8px; border-radius: 4px; background: #2a3138; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .25s, background .25s; }
.strength small { min-width: 78px; color: #b5bfc6; }
.captcha-label { margin: 24px 0 8px; color: #b5bfc6; font-size: 17px; }
.captcha { display: flex !important; align-items: center; gap: 16px; margin: 0 !important; padding: 20px; background: #2a3138; border-radius: 3px; color: #fff !important; cursor: pointer; font-size: 17px !important; }
.captcha input { width: 26px; height: 26px; accent-color: var(--red); flex: none; }
.auth-submit { display: block; width: 100%; margin-top: 30px; padding: 14px; font-size: 17px; }
.auth-cancel { display: block; text-align: center; margin-top: 18px; color: #fff !important; font-weight: 600; }
.req-note { margin: 28px 0 0; color: #98a6b0; font-size: 14px; }
.auth-error { margin-top: 20px; padding: 12px 14px; background: rgba(229,18,31,.14); border: 1px solid var(--red); border-radius: 4px; color: #ffb3b8; }
.auth-ok { margin: 0 0 20px; padding: 14px 16px; background: rgba(46,204,113,.1); border: 1px solid rgba(46,204,113,.5); border-radius: 4px; }
.auth-card .btn { text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) {
    .glass { padding: 8px 12px; font-size: 14px; }
}
@media (max-width: 520px) { .auth-head h1 { font-size: 30px; } }
@media (max-width: 520px) {
    body.site .brand .wordmark { display: none; }
    .glass { padding: 8px 10px; font-size: 14px; }
    body.site .topbar { padding: 10px 12px; }
}

/* Tickets & Ankündigungen (Admin) */
body.admin .tk-msgs { display: grid; gap: 10px; max-height: 42vh; overflow-y: auto; margin-bottom: 14px; }
body.admin .tk-msg { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,.03); }
body.admin .tk-msg.staff { border-left: 3px solid #2ecc71; }
body.admin .tk-msg.player { border-left: 3px solid #4cc9f0; }
body.admin .tk-msg-h { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; opacity: .85; margin-bottom: 4px; }
body.admin .tk-msg-b { white-space: pre-wrap; word-break: break-word; }
body.admin textarea { width: 100%; resize: vertical; font: inherit; padding: 10px 12px; border-radius: 8px; }
body.admin .nw-item { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-top: 12px; background: rgba(255,255,255,.02); }
body.admin .nw-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.admin .nw-head small { margin-left: auto; opacity: .7; }
body.admin .nw-body { white-space: pre-wrap; margin: 8px 0 10px; opacity: .9; }

/* Rollen-Vorschau und Rechte-Übersicht */
body.admin .preview-bar { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 20px; background: linear-gradient(90deg, #7a2bd6, #e0408f); color: #fff; font-size: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.4); }
body.admin .preview-bar form { margin: 0; }
body.admin .preview-bar .btn { background: #fff; color: #2a1040; border-color: #fff; }
body.admin table.matrix { min-width: 520px; }
body.admin .matrix th.mx-col { text-align: center; vertical-align: bottom; white-space: nowrap; }
body.admin .matrix th.mx-col .btn { margin-top: 6px; }
body.admin .matrix tr.mx-group td { background: rgba(255,255,255,.05); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
body.admin .matrix .mx-perm { min-width: 260px; }
body.admin .matrix .mx-cell { text-align: center; font-weight: 700; }
body.admin .matrix .mx-cell.yes { color: #2ecc71; }
body.admin .matrix .mx-cell.no { color: #6b7686; }

/* Aufklappbare Bereiche */
body.admin .collapse-head { cursor: pointer; user-select: none; }
body.admin .collapse-head:hover h2 { color: #fff; }
body.admin .collapse-head h2 { display: flex; align-items: center; gap: 8px; }
body.admin .collapse-head .chev { display: inline-block; font-size: 14px; opacity: .8; transition: transform .2s; }
body.admin .panel.is-collapsed .chev { transform: rotate(-90deg); }
body.admin .panel.is-collapsed { padding-bottom: 14px; }
body.admin .panel.is-collapsed .collapse-head, body.admin .panel.is-collapsed > h2 { margin-bottom: 0; }
body.admin .collapse-body { margin-top: 12px; }
body.admin .collapse-body[hidden] { display: none; }
body.admin h2.collapse-head { display: flex; align-items: center; gap: 8px; }
body.admin h2.collapse-head:hover { color: #fff; }

/* Aufklapp-Pfeil (Chevron) rechts in der Überschrift */
body.admin .collapse-head { display: flex; align-items: center; gap: 12px; }
body.admin .collapse-head > h2 { margin-right: auto; }
body.admin h2.collapse-head { justify-content: flex-start; }
body.admin .collapse-head .chev { margin-left: auto; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px; color: #5ab0e0; opacity: .9; transition: transform .2s, background .2s; flex: none; }
body.admin .collapse-head:hover .chev { background: rgba(90,176,224,.14); opacity: 1; }
body.admin .panel.is-collapsed .chev { transform: rotate(180deg); }
body.admin .panel-head.collapse-head { justify-content: flex-start; }
body.admin .panel-head.collapse-head > .chev { margin-left: 0; }

/* Anmelden: Knopf während der Anfrage */
.auth-submit.is-busy { opacity: .75; cursor: progress; pointer-events: none; }

/* Protokoll-Tabelle: lange Details umbrechen statt über den Rand zu laufen */
body.admin .log-table { table-layout: auto; width: 100%; }
body.admin .log-table td:last-child { overflow-wrap: anywhere; word-break: break-word; min-width: 180px; }
body.admin .log-table td:first-child { white-space: nowrap; }

/* Hero mit Bild: linke Seite stärker abdunkeln, damit Überschrift und Text gut lesbar bleiben
   und die Schrift im Bild nicht hinter der Überschrift durchscheint */
.gg-hero {
    background:
        linear-gradient(90deg, rgba(5,6,7,.97) 0%, rgba(5,6,7,.94) 34%, rgba(5,6,7,.62) 54%, rgba(5,6,7,.14) 80%, rgba(5,6,7,.08) 100%),
        linear-gradient(0deg, #0e1114 0%, rgba(14,17,20,0) 22%),
        var(--hero, radial-gradient(900px 500px at 80% 30%, rgba(157,107,255,.35), transparent 60%)),
        radial-gradient(700px 420px at 70% 80%, rgba(43,143,196,.30), transparent 60%),
        #0b1218;
    background-size: auto, auto, cover, auto, auto;
    background-position: center, center, 70% center, center, center;
}
@media (max-width: 760px) {
    .gg-hero { background-position: center, center, 78% center, center, center; }
}

/* Hinweisleiste im Admin, wenn der Wartungsmodus aktiv ist */
body.admin .maint-bar { padding: 9px 20px; background: #ff9f1c; color: #2b1800; font-size: 14px; }
body.admin .maint-bar a { color: #2b1800; font-weight: 700; text-decoration: underline; margin-left: 8px; }