/* BNB Admin — Login-Geruest. Baut auf core.css (V2-Designsystem) auf:
nutzt dessen Tokens (--red/--cyan/--panel/--font-display), Glass-Card-Look,
.btn-Komponenten und den geteilten bg-ensemble-Hintergrund. */
.admin-page { min-height: 100vh; }
.admin-shell { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 30px 18px 56px; }
/* Login-Gate / schmale Navigationskarten vertikal etwas absetzen (Modul-Ansichten bleiben oben) */
.admin-shell > #admin-app { width: 100%; display: flex; justify-content: center; }
.a-wrap { width: min(460px, 100%); }
/* Breite Ansichten nutzen den Bildschirm aus statt in der Mitte zu kleben.
Der Wert ist bewusst grosszuegig — die Adminzentrale ist ein Arbeitswerkzeug,
kein Lesetext, bei dem eine schmale Spalte hilft. */
.a-wrap-wide { width: min(1440px, calc(100% - 40px)); }
.a-wrap-xwide { width: min(1720px, calc(100% - 40px)); }
.a-card-wide { padding: 32px 34px 28px; }
/* Modul-Layout: breite, oben verankerte App-Karte. KEIN inneres Scroll-Fenster —
der Inhalt fließt, die ganze Seite scrollt normal. Feste Mindesthöhe = ruhiger
Rahmen ohne Springen (Shell ist oben verankert), aber nichts wird eingequetscht. */
.a-appwrap { width: min(1200px, 100%); }
.a-card-fixed { min-height: 600px; }
.a-modbody { margin-top: 2px; }
.a-card {
border-radius: var(--radius-xl);
border: 1px solid var(--line-soft);
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.014)), var(--panel);
box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.026);
backdrop-filter: blur(12px) saturate(1.05);
padding: 30px 28px 26px;
}
.a-foot { margin-top: 16px; text-align: center; color: var(--muted); font-size: 12px; letter-spacing: .02em; line-height: 1.5; }
/* Brand */
.a-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.a-brand img { height: 50px; width: auto; object-fit: contain; filter: drop-shadow(0 0 14px rgba(200, 163, 124,.4)); }
.a-brandtxt { display: flex; flex-direction: column; line-height: 1.25; }
.a-brandtxt strong { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .4px; color: #fff; }
.a-brandtxt strong .amp { color: var(--red-hot); margin: 0 1px; }
.a-brandtxt span { font-size: 12px; color: var(--muted); }
/* Text */
.a-h { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: .3px; margin: 12px 0 7px; }
.a-sub { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 18px; }
.a-caption { display: block; color: var(--cyan); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; margin-bottom: 9px; }
/* Inputs */
.a-lbl { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 13px; }
.a-in {
display: block; width: 100%; margin-top: 7px; padding: 12px 13px;
font: inherit; font-size: 15px; color: var(--text);
background: rgba(0,0,0,.34); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.a-in:focus { border-color: var(--red-hot); box-shadow: 0 0 0 3px rgba(200, 163, 124,.16); }
.a-otp { letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; font-size: 20px; padding-left: .5em; }
/* Buttons — nutzen core .btn; hier nur Voll-Breite + Zusatzvarianten */
.a-card form .btn, .btn.a-fullbtn { width: 100%; margin-top: 2px; }
.btn.a-discord { background: rgba(88,101,242,.14); border-color: rgba(88,101,242,.5); color: #cdd2fb; }
.btn.a-discord:hover { border-color: rgba(88,101,242,.85); background: rgba(88,101,242,.22); }
.btn.a-danger { background: rgba(255,80,98,.08); border-color: rgba(255,80,98,.42); color: var(--red-hot); }
.btn.a-danger:hover { background: rgba(255,80,98,.16); border-color: rgba(255,80,98,.7); }
.a-link { display: block; width: 100%; margin-top: 13px; background: none; border: 0; color: var(--cyan); font: inherit; font-size: 13px; cursor: pointer; text-align: center; }
.a-link:hover { text-decoration: underline; }
/* Feedback */
.a-err { background: rgba(255,80,98,.1); border: 1px solid rgba(255,80,98,.4); color: #ffd0d6; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 15px; }
.a-boot { color: var(--muted); text-align: center; padding: 20px 0; font-size: 14px; }
.a-spin { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--red-hot); border-radius: 50%; vertical-align: -2px; margin-right: 8px; animation: aspin .8s linear infinite; }
@keyframes aspin { to { transform: rotate(360deg); } }
/* TOTP-Enrollment */
.a-qr { display: flex; justify-content: center; margin: 8px 0 12px; }
.a-qr img { width: 176px; height: 176px; border-radius: var(--radius-sm); background: #fff; padding: 8px; }
.a-secret { text-align: center; font-size: 12.5px; color: var(--muted); margin-bottom: 15px; word-break: break-all; }
.a-secret code { color: var(--cyan); background: rgba(255,80,98,.08); padding: 2px 6px; border-radius: 6px; }
/* Konsole */
.a-authed { display: flex; gap: 8px; margin-bottom: 11px; flex-wrap: wrap; }
.a-badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line-soft); color: var(--text); }
.a-badge.a-ok { background: rgba(100,240,140,.12); border-color: rgba(100,240,140,.4); color: var(--green); }
.a-badge.a-owner { background: rgba(255,80,98,.14); border-color: rgba(255,80,98,.45); color: var(--gold); }
.a-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 17px 0; }
.a-meta > div { background: rgba(0,0,0,.26); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 11px 13px; }
.a-meta dt { font-size: 10.5px; color: var(--cyan); text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.a-meta dd { margin: 5px 0 0; font-size: 14px; font-variant-numeric: tabular-nums; word-break: break-all; }
.a-permwrap { margin: 8px 0 4px; }
.a-perms { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow: auto; }
.a-perm { font-size: 11.5px; padding: 3px 9px; border-radius: 8px; background: rgba(255,80,98,.08); border: 1px solid rgba(255,80,98,.22); color: #bdeeff; font-family: ui-monospace, Menlo, Consolas, monospace; }
.a-actions { display: flex; gap: 10px; margin-top: 20px; }
.a-actions .btn { flex: 1; }
.a-probe-wrap { margin: 16px 0 2px; }
.a-probe-wrap .a-fullbtn { margin-top: 4px; }
.a-probe { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.a-probe-item { border-radius: var(--radius-sm); background: rgba(0,0,0,.26); border: 1px solid var(--line-soft); overflow: hidden; }
.a-probe-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; }
.a-probe-detail { padding: 0 10px 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; line-height: 1.45; color: #ffd0d6; word-break: break-word; white-space: pre-wrap; }
.a-probe-status { font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 36px; text-align: center; padding: 3px 6px; border-radius: 6px; }
.a-probe-ok .a-probe-status { color: var(--green); background: rgba(100,240,140,.12); }
.a-probe-no .a-probe-status { color: var(--red-hot); background: rgba(255,80,98,.12); }
.a-probe-warn .a-probe-status { color: var(--gold); background: rgba(255,80,98,.12); }
.a-probe-path { min-width: 0; display: flex; flex-direction: column; }
.a-probe-path code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: #cfe9f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-probe-path em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.a-probe-note { font-size: 11px; color: var(--muted); text-align: right; max-width: 48%; white-space: normal; word-break: break-word; }
.a-debug { margin: 14px 0 2px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(0,0,0,.26); }
.a-debug summary { cursor: pointer; padding: 9px 12px; font-size: 12px; color: var(--muted); user-select: none; }
.a-debug summary:hover { color: var(--text); }
.a-debug pre { margin: 0; padding: 0 12px 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.5; color: #cfe9f5; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }
@media (max-width: 480px) { .a-meta { grid-template-columns: 1fr; } }
/* ---------- Authed shell: Tabs ---------- */
.a-tabs { display: flex; gap: 6px; margin: 4px 0 18px; border-bottom: 1px solid var(--line-soft); padding-bottom: 12px; flex-wrap: wrap; }
.a-tab { padding: 8px 14px; border-radius: 999px; border: 1px solid transparent; background: rgba(255,255,255,.04); color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.a-tab:hover { color: var(--text); background: rgba(255,255,255,.07); }
.a-tab.active { color: #16110c; background: linear-gradient(180deg, var(--cyan), #8d6f52); border-color: rgba(200, 163, 124,.5); }
.a-tab-logout { margin-left: auto; color: var(--red-hot); background: rgba(255,80,98,.06); border-color: rgba(255,80,98,.3); }
.a-tab-logout:hover { background: rgba(255,80,98,.14); color: var(--red-hot); }
/* ---------- Accounts/Rollen-Modul ---------- */
.az-subnav { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.az-subtab { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.az-subtab:hover { color: var(--text); }
.az-subtab.active { color: var(--text); border-color: var(--red-hot); background: rgba(200, 163, 124,.1); }
.az-reload { margin-left: auto; padding: 6px 12px; font-size: 15px; line-height: 1; }
.az-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.az-count { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: rgba(200, 163, 124,.1); border: 1px solid rgba(200, 163, 124,.24); color: #bdeeff; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.az-add { padding: 9px 15px; font-size: 13px; }
.az-tablewrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
.az-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.az-table thead th { text-align: left; padding: 10px 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--cyan); font-weight: 800; border-bottom: 1px solid var(--line-soft); background: rgba(0,0,0,.28); }
.az-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.az-table tr:last-child td { border-bottom: 0; }
.az-table tr:hover td { background: rgba(255,255,255,.02); }
.az-c-name strong { color: #fff; }
.az-mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.az-dim { color: var(--muted); font-size: 12px; }
.az-nowrap { white-space: nowrap; }
.az-c-act { text-align: right; white-space: nowrap; }
.az-role-sel, select.a-in { appearance: none; padding: 6px 10px; font-size: 12.5px; border-radius: 8px; background: rgba(0,0,0,.4); color: var(--text); border: 1px solid var(--line-soft); cursor: pointer; }
.az-role-sel:focus { border-color: var(--red-hot); outline: none; }
.az-mini { margin-left: 6px; padding: 5px 10px; font-size: 12px; font-weight: 600; border-radius: 8px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.04); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.az-mini:hover:not(:disabled) { border-color: var(--cyan); }
.az-mini:disabled { opacity: .35; cursor: not-allowed; }
.az-mini-danger { color: var(--red-hot); border-color: rgba(255,80,98,.3); }
.az-mini-danger:hover:not(:disabled) { border-color: var(--red-hot); background: rgba(255,80,98,.1); }
.az-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.az-tag-ok { color: var(--green); background: rgba(100,240,140,.1); }
.az-tag-pend { color: var(--gold); background: rgba(255,80,98,.12); }
.az-tag-block { color: var(--red-hot); background: rgba(255,80,98,.12); }
.az-tag-owner { color: var(--gold); background: rgba(255,80,98,.14); margin-left: 4px; }
.az-tag-sys { color: var(--cyan); background: rgba(255,80,98,.1); margin-left: 4px; }
.az-empty { padding: 22px; text-align: center; color: var(--muted); border: 1px dashed var(--line-soft); border-radius: var(--radius-md); }
.az-err { padding: 14px 16px; border-radius: var(--radius-md); background: rgba(255,80,98,.08); border: 1px solid rgba(255,80,98,.32); }
.az-err strong { color: var(--red-hot); }
.az-err-sub { margin-top: 6px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
/* ---------- Modal ---------- */
.az-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3,2,5,.72); backdrop-filter: blur(4px); }
.az-modal-card { width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; border-radius: var(--radius-lg); border: 1px solid var(--line-soft); background: var(--panel-strong); box-shadow: var(--shadow); }
.az-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); font-family: var(--font-display); font-size: 16px; }
.az-modal-x { background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; }
.az-modal-x:hover { color: #fff; }
.az-modal-body { padding: 18px; overflow-y: auto; }
.az-modal-msg { color: var(--text); font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
.az-modal-err { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: rgba(255,80,98,.1); border: 1px solid rgba(255,80,98,.4); color: #ffd0d6; font-size: 12.5px; }
.az-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.az-modal-actions .btn { flex: 0 0 auto; padding: 10px 18px; }
/* Permission-Auswahl */
.az-perms-scroll { max-height: 300px; overflow-y: auto; margin-top: 8px; padding-right: 4px; }
.az-permgroup { margin-bottom: 12px; }
.az-permgroup-h { border-bottom: 1px solid var(--line-soft); padding-bottom: 5px; margin-bottom: 7px; }
.az-permgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; }
.az-perm { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text); cursor: pointer; padding: 2px 0; }
.az-perm input { accent-color: var(--red-hot); width: 14px; height: 14px; }
.az-perm span { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; }
.az-perm-all span { font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; color: var(--cyan); }
@media (max-width: 520px) { .az-permgrid { grid-template-columns: 1fr; } }
/* ---------- Adminzentrale Hub ---------- */
.hub-areas { display: grid; gap: 12px; margin: 6px 0 14px;
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.hub-area { display: block; text-align: left; width: 100%; padding: 20px 50px 20px 22px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s, transform .05s; position: relative; }
.hub-area:hover { border-color: var(--red-hot); background: rgba(255,80,98,.07); }
.hub-area:active { transform: translateY(1px); }
.hub-area-h { display: flex; align-items: center; gap: 10px; }
.hub-area-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: #fff; }
.hub-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); background: rgba(255,80,98,.12); border: 1px solid rgba(255,80,98,.4); padding: 2px 8px; border-radius: 999px; }
.hub-area-desc { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.hub-area-go { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--red-hot); font-size: 20px; font-weight: 700; }
.hub-topbar { margin-bottom: 12px; }
.hub-topbar-float { position: fixed; top: 16px; left: 16px; z-index: 50; margin: 0; }
.hub-back { background: rgba(10,12,20,.72); border: 1px solid var(--line-soft); color: var(--text); font: inherit; font-size: 13px; padding: 7px 13px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px); }
.hub-back:hover { border-color: var(--cyan); color: #fff; }
.hub-guilds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 8px; }
.hub-guild { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); color: var(--text); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.hub-guild:hover { border-color: var(--red-hot); background: rgba(255,80,98,.07); }
.hub-guild-icon { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; flex: 0 0 auto; }
.hub-guild-ph { display: grid; place-items: center; background: linear-gradient(160deg, var(--red-hot), var(--red)); color: #fff; font-weight: 800; font-size: 13px; text-transform: uppercase; }
.hub-guild-meta { min-width: 0; display: flex; flex-direction: column; }
.hub-guild-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-guild-role { font-size: 11px; color: var(--muted); }
/* Persistenter Zurück-zur-Website-Link (immer sichtbar) */
.admin-exit { position: fixed; top: 16px; right: 16px; z-index: 60; background: rgba(10,12,20,.72); border: 1px solid var(--line-soft); color: var(--text); font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; text-decoration: none; backdrop-filter: blur(6px); transition: border-color .15s, color .15s; }
.admin-exit:hover { border-color: var(--cyan); color: #fff; }
/* ---------- Zugriffs-/Rechteverwaltung (Team) ---------- */
.tm-list { display: flex; flex-direction: column; gap: 8px; }
.tm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); }
.tm-main { min-width: 0; }
.tm-main strong { color: #fff; }
.tm-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.tm-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255,80,98,.1); border: 1px solid rgba(255,80,98,.24); color: #bdeeff; }
.tm-act { display: flex; gap: 6px; flex: 0 0 auto; }
.tm-members { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.tm-member { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: rgba(255,255,255,.03); color: var(--text); cursor: pointer; text-align: left; }
.tm-member:hover { border-color: var(--red-hot); background: rgba(255,80,98,.07); }
.tm-member img { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; }
.tm-member-name { font-size: 14px; font-weight: 600; }
.tm-modopts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0 4px; }
.tm-modopt { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); font-size: 14px; cursor: pointer; }
.tm-modopt input { accent-color: var(--red-hot); width: 16px; height: 16px; }
@media (max-width: 560px) { .tm-modopts { grid-template-columns: 1fr; } .tm-row { flex-wrap: wrap; } }
/* ---------- Ränge & Features ---------- */
.rk-list { display: flex; flex-direction: column; gap: 8px; }
.rk-row { display: grid; grid-template-columns: 44px minmax(150px, 1fr) minmax(190px, 1.1fr) 92px 34px;
gap: 8px; align-items: center; }
.rk-color { width: 44px; height: 40px; padding: 3px; border-radius: 8px; border: 1px solid var(--line-soft); background: rgba(0,0,0,.34); cursor: pointer; }
.rk-row .a-in { margin-top: 0; }
.rk-lvl { text-align: center; }
.rk-del { width: 34px; height: 40px; border-radius: 8px; border: 1px solid rgba(255,80,98,.3); background: rgba(255,80,98,.06); color: var(--red-hot); cursor: pointer; font-size: 13px; }
.rk-del:hover { background: rgba(255,80,98,.16); border-color: var(--red-hot); }
.rk-gates { display: flex; flex-direction: column; gap: 8px; }
.rk-gate { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); }
.rk-gate-l { font-size: 13.5px; color: var(--text); }
.rk-gate select { width: auto; margin-top: 0; min-width: 160px; }
@media (max-width: 620px) { .rk-row { grid-template-columns: 44px 1fr 74px 34px; } .rk-role { grid-column: 1 / -1; } .rk-gate { flex-direction: column; align-items: stretch; } .rk-gate select { width: 100%; } }
/* ---------- Streamtools ---------- */
.st-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); }
.st-item { padding: 13px 15px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); }
.st-item-head { display: flex; align-items: center; gap: 10px; }
.st-item-head strong { color: #fff; font-size: 15px; }
.st-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.st-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-soft); }
.st-pill svg { flex: 0 0 auto; }
.st-pill.st-tt { color: #ff5f7a; background: rgba(254,44,85,.1); border-color: rgba(254,44,85,.32); }
.st-pill.st-tw { color: #b98cff; background: rgba(145,70,255,.1); border-color: rgba(145,70,255,.32); }
.st-meta { margin-bottom: 9px; }
.st-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.st-actions .az-mini { margin-left: 0; }
/* Formular (Dialog) */
.st-modal-card { width: min(1040px, 100%); }
.st-modal-card .az-modal-body { padding: 22px 24px; }
.st-modal-card .a-lbl { margin-bottom: 18px; }
.st-tplrow { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.st-tplsel { margin-bottom: 10px; }
.st-tplbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.st-tplbtns .az-mini { margin-left: 0; padding: 9px 13px; }
.st-pblock { margin: 12px 0; padding: 16px 18px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: rgba(0,0,0,.2); }
.st-check { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.st-check input { accent-color: var(--red-hot); width: 16px; height: 16px; }
.st-check span { display: inline-flex; align-items: center; gap: 6px; }
.st-fields { margin-top: 12px; }
.st-fields[hidden] { display: none; }
.st-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-color { width: 100%; height: 42px; margin-top: 7px; padding: 3px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: rgba(0,0,0,.34); cursor: pointer; }
.st-ta { resize: vertical; min-height: 68px; line-height: 1.5; }
.st-note { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.st-note code { color: var(--cyan); background: rgba(200, 163, 124,.08); padding: 1px 5px; border-radius: 5px; font-size: 11px; }
.st-prev { display: flex; margin-top: 12px; border-radius: var(--radius-sm); overflow: hidden; background: rgba(0,0,0,.34); border: 1px solid var(--line-soft); }
.st-prev-bar { width: 4px; flex: 0 0 auto; background: var(--red-hot); }
.st-prev-body { padding: 10px 13px; min-width: 0; }
.st-prev-title { font-weight: 700; font-size: 14px; word-break: break-word; }
.st-prev-desc { margin-top: 5px; font-size: 13px; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
.st-pref[hidden] { display: none; }
@media (max-width: 560px) { .st-row2 { grid-template-columns: 1fr; } }
/* Statistik */
.st-statsbar, .st-days { display: flex; }
.st-statsbar { align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.st-days { width: auto; }
.st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.st-kpi { padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: rgba(0,0,0,.26); text-align: center; }
.st-kpi .v { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.st-kpi .l { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.st-chart { padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: rgba(0,0,0,.26); margin-bottom: 16px; }
.st-chart svg { display: block; }
.st-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.st-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.st-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.st-listcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.st-listcard { padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); }
.st-listcard h4 { margin: 0 0 8px; font-size: 12.5px; color: var(--cyan); font-weight: 700; }
.st-listrow { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.st-listrow:first-of-type { border-top: 0; }
.st-listrow .n { font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }
.st-lglist { display: flex; flex-direction: column; gap: 8px; }
.st-lg { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); }
.st-lg-name { font-weight: 600; }
.st-lg select { width: auto; }
/* Logos */
.st-upload { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.st-upload .a-in { flex: 1; min-width: 160px; margin-top: 0; }
.st-file { flex: 1; min-width: 200px; font-size: 13px; color: var(--muted); }
.st-file::file-selector-button { font: inherit; font-size: 13px; margin-right: 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.05); color: var(--text); cursor: pointer; }
.st-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.st-logo { border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); overflow: hidden; }
.st-logo-img { height: 96px; display: grid; place-items: center; background: rgba(0,0,0,.3); padding: 8px; }
.st-logo-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-logo-name { padding: 8px 10px 0; font-size: 12.5px; font-weight: 600; word-break: break-word; }
.st-logo-act { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 10px 10px; }
.st-logo-act .az-mini { margin-left: 0; }
/* ---------- Geteilte Modul-Zeilen (TempVoice, Ticket-Kategorien) ---------- */
.tv-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); }
.tv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); }
.tv-row-main { min-width: 0; }
.tv-row-title { font-weight: 600; color: #fff; }
.tv-row-sub { margin-top: 4px; font-size: 12.5px; }
.tv-row-act { display: flex; gap: 6px; flex: 0 0 auto; }
.tv-row-act .az-mini { margin-left: 0; }
.tv-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tv-add .a-in { flex: 1; min-width: 180px; margin-top: 0; }
.tv-flags { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
/* ---------- Message Embedder ---------- */
.em-saved { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.em-saved .az-mini { margin-left: 0; }
.em-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.em-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.em-chip.active { border-color: var(--red-hot); background: rgba(200, 163, 124,.1); }
.em-chip-x { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--muted); font-size: 11px; }
.em-chip-x:hover { background: rgba(255,80,98,.2); color: var(--red-hot); }
.em-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
.em-tight { margin-bottom: 10px; }
.em-fieldshead { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 8px; }
.em-fieldshead .az-mini { margin-left: 0; }
.em-fieldrow { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.em-fieldrow .a-in { margin-top: 0; }
.em-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.em-inline input { accent-color: var(--red-hot); }
.em-fdel { width: 34px; height: 38px; border-radius: 8px; border: 1px solid rgba(255,80,98,.3); background: rgba(255,80,98,.06); color: var(--red-hot); cursor: pointer; }
.em-fdel:hover { background: rgba(255,80,98,.16); }
.em-actions .btn { flex: 0 0 auto; }
.em-side { position: sticky; top: 0; }
.em-preview { border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: #313338; padding: 12px; }
.em-empty { color: #a7abb3; font-size: 13px; padding: 10px; }
.em-msg { display: flex; gap: 12px; }
.em-av { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(160deg,var(--red-hot),var(--red)); color: #fff; display: grid; place-items: center; font-weight: 700; overflow: hidden; }
.em-av img { width: 100%; height: 100%; object-fit: cover; }
.em-msgmain { min-width: 0; flex: 1; }
.em-msgname { color: #f2f3f5; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.em-bot { font-size: 9px; font-weight: 700; background: #5865f2; color: #fff; padding: 1px 4px; border-radius: 4px; letter-spacing: .04em; }
.em-box { background: #2b2d31; border-left: 4px solid var(--red-hot); border-radius: 4px; padding: 12px 14px; position: relative; }
.em-thumb { float: right; width: 56px; height: 56px; border-radius: 6px; object-fit: cover; margin-left: 10px; }
.em-author { display: flex; align-items: center; gap: 8px; color: #f2f3f5; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.em-author img { width: 22px; height: 22px; border-radius: 50%; }
.em-title { color: #00a8fc; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.em-title a { color: inherit; text-decoration: none; }
.em-desc { color: #dbdee1; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.em-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.em-f { flex: 1 1 100%; min-width: 0; }
.em-f-inline { flex: 1 1 40%; }
.em-fn { color: #f2f3f5; font-weight: 700; font-size: 12.5px; }
.em-fv { color: #dbdee1; font-size: 12.5px; white-space: pre-wrap; word-break: break-word; }
.em-image { display: block; max-width: 100%; border-radius: 6px; margin-top: 10px; }
.em-footer { display: flex; align-items: center; gap: 8px; color: #b5bac1; font-size: 11.5px; margin-top: 8px; }
.em-footer img { width: 18px; height: 18px; border-radius: 50%; }
@media (max-width: 720px) { .em-grid { grid-template-columns: 1fr; } .em-side { position: static; } .em-fieldrow { grid-template-columns: 1fr 1fr auto; } .em-inline { grid-column: 1 / -2; } }
/* ---------- Tickets ---------- */
.tk-filter { display: flex; gap: 10px; margin-bottom: 12px; }
.tk-filter .a-in { margin-top: 0; }
.tk-filter #tk_status { flex: 0 0 auto; width: auto; }
.tk-filter #tk_q { flex: 1; }
.tk-cols { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: start; }
.tk-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.tk-item { text-align: left; padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); color: var(--text); cursor: pointer; }
.tk-item:hover { border-color: var(--cyan); }
.tk-item.active { border-color: var(--red-hot); background: rgba(200, 163, 124,.08); }
.tk-item-top { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.tk-num { font-variant-numeric: tabular-nums; color: var(--cyan); font-weight: 700; }
.tk-item-subj { font-size: 13.5px; font-weight: 600; margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-detail { border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: rgba(0,0,0,.2); padding: 14px 16px; min-height: 200px; }
.tk-d-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tk-d-head strong { color: #fff; }
.tk-d-meta { margin-bottom: 12px; }
.tk-d-meta a { color: var(--cyan); }
.tk-intake { padding: 10px 12px; border-radius: 10px; background: rgba(255,80,98,.05); border: 1px solid rgba(255,80,98,.18); margin-bottom: 12px; font-size: 13px; line-height: 1.6; }
.tk-transcript { display: flex; flex-direction: column; gap: 8px; }
.tk-msg { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); }
.tk-msg-user { border-left: 3px solid var(--cyan); }
.tk-msg-staff, .tk-msg-mod { border-left: 3px solid var(--red-hot); }
.tk-msg-ai { border-left: 3px solid var(--gold); }
.tk-msg-meta { display: flex; gap: 10px; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.tk-msg-meta span:first-child { color: var(--text); font-weight: 600; }
.tk-msg-body { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.tk-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
gap: 3px 14px; max-height: 240px; overflow-y: auto; padding-right: 4px; }
.tk-rolechk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.tk-rolechk input { accent-color: var(--red-hot); }
.tk-qhead { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; }
.tk-qhead .az-mini { margin-left: 0; }
.tk-qedit { padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); margin-bottom: 8px; }
.tk-qopts { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.tk-qopts .a-in { margin-top: 0; width: auto; }
.tk-kb, .tk-sug { padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); margin-bottom: 8px; }
.tk-kb-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tk-kb-body { font-size: 13.5px; line-height: 1.55; word-break: break-word; }
.tk-kb-act { display: flex; gap: 6px; margin-top: 8px; }
.tk-kb-act .az-mini { margin-left: 0; }
.tk-kb-add { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.tk-kb-list { display: flex; flex-direction: column; margin-top: 8px; }
@media (max-width: 640px) { .tk-cols { grid-template-columns: 1fr; } .tk-list { max-height: 220px; } .tk-roles { grid-template-columns: 1fr; } }
/* ---- Rechtevergabe ----
Gestalt steht weiter unten im Abschnitt „Rechtevergabe". Hier stand früher
eine flache Zeilenliste mit Auswahlfeld; sie ist ersetzt. */
.tm-badge i { font-style: normal; opacity: .65; margin-left: 5px; font-size: .9em; }
.tm-badge-read { border-color: rgba(255, 255, 255, .14); }
.tm-badge-write { border-color: rgba(var(--cyan-rgb), .35); }
@media (max-width: 560px) {
.tm-permrow { flex-direction: column; align-items: stretch; gap: 7px; }
.tm-perm { width: 100%; }
}
/* ---- Inhalte-Editor: Kategorie -> Eintrag -> Formular ---- */
.ct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ct-meta { display: flex; gap: 6px; align-items: center; }
.ct-grid { display: grid; grid-template-columns: 268px 340px minmax(0, 1fr); gap: 20px;
align-items: start; margin-top: 14px; }
.ct-col { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ct-list { display: flex; flex-direction: column; gap: 3px; max-height: 58vh; overflow-y: auto; padding-right: 3px; }
.ct-list-items { max-height: 58vh; }
.ct-cat, .ct-item {
display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
padding: 9px 11px; font: inherit; border-radius: 9px;
border: 1px solid transparent; background: rgba(255, 255, 255, .025); color: inherit;
}
.ct-cat:hover, .ct-item:hover { background: rgba(255, 255, 255, .05); }
.ct-cat.on, .ct-item.on { border-color: rgba(200, 163, 124, .45); background: rgba(200, 163, 124, .1); }
.ct-cat-i { font-size: 15px; flex: none; }
.ct-cat-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ct-cat-t b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-cat-t small { font-size: 11px; opacity: .6; }
.ct-item-t { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ct-kind {
flex: none; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line-soft);
}
.ct-kind.rule { color: #ff8b98; border-color: rgba(255, 80, 98, .3); }
.ct-kind.faq { color: #8ec5ff; border-color: rgba(90, 200, 255, .3); }
.ct-form { max-height: 64vh; overflow-y: auto; padding-right: 6px; }
.ct-form .a-lab { margin-top: 9px; font-size: 11.5px; opacity: .75; }
.ct-form .a-ta { resize: vertical; min-height: 74px; line-height: 1.55; font-family: inherit; }
.ct-formact { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.ct-add { margin-top: 4px; }
@media (max-width: 900px) {
.ct-grid { grid-template-columns: 1fr; }
.ct-list, .ct-form { max-height: 300px; }
}
/* ---- Auswahlfelder im Seitenstil (siehe admin-select.js) ---- */
.a-dd-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.a-dd { position: relative; }
.a-dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; padding: 8px 11px; font: inherit; font-size: 12.5px; text-align: left;
color: var(--text); cursor: pointer; border-radius: 9px;
border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .04); }
.a-dd-btn:hover:not(:disabled) { border-color: rgba(255, 80, 98, .32); }
.a-dd-btn:disabled { cursor: default; opacity: .5; }
.a-dd.open .a-dd-btn { border-color: rgba(200, 163, 124, .5); background: rgba(200, 163, 124, .08); }
.a-dd-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-dd-c { flex: none; opacity: .55; transition: transform .16s ease; }
.a-dd.open .a-dd-c { transform: rotate(180deg); }
.a-dd-list { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; z-index: 200;
display: none; flex-direction: column; gap: 2px; padding: 6px; border-radius: 12px;
border: 1px solid var(--line-soft); background: var(--panel-strong);
backdrop-filter: blur(12px); box-shadow: var(--shadow); min-width: 148px; }
.a-dd.open .a-dd-list { display: flex; }
.a-dd-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
padding: 8px 10px; font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer;
border: 0; border-radius: 8px; background: none; line-height: 1.4; }
.a-dd-opt:hover { background: rgba(255, 255, 255, .06); }
.a-dd-opt.on { background: rgba(200, 163, 124, .13); }
.a-dd-opt::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
background: transparent; box-shadow: inset 0 0 0 1px var(--line-soft); }
.a-dd-opt.on::before { background: var(--red-hot); box-shadow: none; }
/* Formularfelder im Inhalte-Editor sind volle Breite */
.ct-form .a-dd { width: 100%; margin-bottom: 2px; }
@media (max-width: 560px) { .tm-permrow .a-dd { width: 100%; } }
/* Sprachpaare nebeneinander: DE und EN lassen sich so direkt vergleichen,
statt uebereinander zu liegen und den Blick springen zu lassen. */
.ct-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-pair > div { min-width: 0; display: flex; flex-direction: column; }
.ct-form .a-in { width: 100%; }
.ct-form .a-ta { min-height: 108px; }
.ct-row2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ct-row2 > div { min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 1200px) {
.ct-grid { grid-template-columns: 240px 300px minmax(0, 1fr); }
.ct-pair, .ct-row2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; } }
/* ---- Breitennutzung nachgezogen ----
Die Schale ist auf 1440 px gewachsen; einspaltige Listen wirkten darin
auseinandergezogen. Ab hier laufen sie mehrspaltig und Formulare bekommen
eine sinnvolle Obergrenze, statt Felder ueber die ganze Breite zu strecken. */
/* Zweispaltig: Raenge links, Feature-Gates rechts */
.rk-split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.rk-gates { gap: 9px; }
.rk-gate { padding: 11px 13px; border-radius: var(--radius-md);
border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .24); }
/* Eingabefelder in breiten Karten nicht ins Uferlose ziehen */
.a-card-wide .a-in:not(.rk-row .a-in):not(.ct-form .a-in):not(.em-grid .a-in) { max-width: 720px; }
.a-card-wide > .a-sub, .a-card-wide > p.a-sub { max-width: 900px; }
/* Leerzustaende: sichtbar gemeint, nicht wie ein Ladefehler */
.az-empty {
display: grid; place-items: center; gap: 6px; min-height: 132px; padding: 26px 20px;
text-align: center; font-size: 13px; color: var(--muted);
border-radius: var(--radius-md); border: 1px dashed rgba(255, 255, 255, .11);
background: rgba(255, 255, 255, .012);
}
/* Embedder: Vorschau bleibt beim Scrollen stehen */
.em-side { position: sticky; top: 18px; }
.em-preview { min-height: 132px; }
/* Ticket-Detail traegt die Hoehe, statt als leerer Kasten dazustehen */
.tk-detail { min-height: 420px; }
.tk-list { min-height: 420px; }
@media (max-width: 1100px) {
.rk-split { grid-template-columns: 1fr; gap: 20px; }
.em-grid { grid-template-columns: 1fr; }
.em-side { position: static; }
}
@media (max-width: 720px) {
.st-list, .tv-list, .hub-areas { grid-template-columns: 1fr; }
}
/* Ränge: Spaltenköpfe und Stufen-Trenner */
.rk-head { padding: 0 0 2px; }
.rk-head span { font-size: 10px; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); }
.rk-lvlsep { display: flex; align-items: center; gap: 10px; margin: 7px 0 3px; }
.rk-lvlsep span { font-size: 10px; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); flex: none; }
.rk-lvlsep::after { content: ''; height: 1px; flex: 1; background: var(--line-soft); }
/* Editor-Formular: benannte Abschnitte statt Feldkette */
.ct-grp { padding: 15px 16px; margin-bottom: 12px; border-radius: var(--radius-md);
border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .22); }
.ct-grp:last-child { margin-bottom: 0; }
.ct-grp h4 { margin: 0 0 3px; font-size: 11px; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: var(--cyan); }
.ct-grp-h { margin: 0 0 11px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.ct-grp .a-lab:first-of-type { margin-top: 0; }
.ct-grp-danger { border-color: rgba(255, 80, 98, .22); background: rgba(255, 80, 98, .05); }
.ct-grp-danger h4 { color: #ff8b98; }
.ct-row-icon { max-width: 120px; }
.ct-formact .az-mini { margin: 0; }
/* Ticket-Moderation: Antwortfeld unter dem Verlauf */
.tk-mod { margin-top: 14px; padding: 14px 15px; border-radius: var(--radius-md);
border: 1px solid rgba(255, 80, 98, .2); background: rgba(255, 80, 98, .04); }
.tk-mod-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.tk-mod-who { font-size: 11.5px; }
.tk-reply { width: 100%; resize: vertical; min-height: 84px; line-height: 1.55;
font-family: inherit; margin-top: 0; }
.tk-mod-bar { display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-top: 9px; flex-wrap: wrap; }
.tk-count { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tk-mod-act { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.tk-mod-act .btn { padding: 8px 15px; font-size: 13px; }
.tk-err { margin-top: 9px; }
.tk-closed { margin-top: 14px; padding: 13px 15px; border-radius: var(--radius-md);
font-size: 13px; color: var(--muted); text-align: center;
border: 1px dashed rgba(255, 255, 255, .11); background: rgba(255, 255, 255, .015); }
/* Auswahlfeld mit vielen Einträgen: Suche oben, Liste scrollt */
.a-dd-list.a-dd-big { padding: 0; }
.a-dd-search { padding: 7px; border-bottom: 1px solid var(--line-soft); }
.a-dd-search input {
width: 100%; padding: 8px 10px; font: inherit; font-size: 12.5px; color: var(--text);
border-radius: 8px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .05);
}
.a-dd-search input:focus { outline: none; border-color: rgba(200, 163, 124, .5); }
.a-dd-scroll { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.a-dd-big .a-dd-scroll { max-height: 232px; overflow-y: auto; overscroll-behavior: contain; }
.a-dd-big .a-dd-scroll::-webkit-scrollbar { width: 9px; }
.a-dd-big .a-dd-scroll::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .13); border-radius: 99px; border: 2px solid transparent;
background-clip: content-box;
}
.a-dd-none { padding: 14px 10px; text-align: center; font-size: 12.5px; color: var(--muted); }
/* Kanalfeld mit Senden-Knopf */
.a-chsend { display: flex; align-items: center; gap: 8px; }
.a-chsend > .a-dd { flex: 1; min-width: 0; }
.a-chsend-btn { flex: none; margin: 0; white-space: nowrap; }
.a-chsend-note { display: block; margin: 6px 0 0; font-size: 11.5px; color: var(--green); }
.a-chsend-note.bad { color: #ff8b98; }
/* Ticket-Öffnungszeiten */
.th-block { margin-top: 18px; padding: 16px 17px; border-radius: var(--radius-md);
border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .22); }
.th-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.th-head .a-sub { max-width: 620px; font-size: 12px; }
.th-toggle { display: inline-flex; align-items: center; gap: 8px; flex: none; cursor: pointer;
padding: 7px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600;
border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .04); }
.th-toggle input { accent-color: var(--red-hot); }
.th-list { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 4px; }
.th-row { display: grid; grid-template-columns: 168px 128px 34px 128px 1fr;
gap: 10px; align-items: center; padding: 7px 10px; border-radius: 9px; }
.th-row:nth-child(odd) { background: rgba(255, 255, 255, .022); }
.th-row.off { opacity: .55; }
.th-day { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; }
.th-day input { accent-color: var(--red-hot); }
.th-t { margin-top: 0 !important; text-align: center; font-variant-numeric: tabular-nums; }
.th-sep { text-align: center; font-size: 12px; color: var(--muted); }
.th-note { font-size: 11.5px; color: var(--muted); }
.th-msgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.th-hint { margin: 10px 0 0 !important; font-size: 11.5px; }
@media (max-width: 860px) {
.th-row { grid-template-columns: 1fr 1fr; }
.th-day { grid-column: 1 / -1; }
.th-sep, .th-note { display: none; }
.th-msgs { grid-template-columns: 1fr; }
.th-head { flex-direction: column; gap: 10px; }
}
/* Kategorie-Dialog: Rollenauswahl als eigener Block mit Suche */
.tk-rolebox { margin: 6px 0 4px; padding: 14px 15px; border-radius: var(--radius-md);
border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .24); }
.tk-rolehead { display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.tk-roletools { display: flex; align-items: center; gap: 8px; }
.tk-rolesearch { margin-top: 0 !important; width: 210px; padding: 7px 11px !important; font-size: 12.5px !important; }
.tk-roletools .az-mini { margin: 0; }
.tk-rolechk { padding: 4px 6px; border-radius: 7px; }
.tk-rolechk:hover { background: rgba(255, 255, 255, .04); }
.tk-rolecount { margin-top: 10px; padding-top: 9px; font-size: 11.5px;
border-top: 1px solid var(--line-soft); }
/* Vorab-Fragen: mehr Luft */
.tk-qedit { padding: 15px 16px !important; margin-bottom: 10px !important; }
.tk-qopts { gap: 14px; flex-wrap: wrap; }
@media (max-width: 700px) { .tk-rolesearch { width: 100%; } .tk-roletools { width: 100%; } }
.th-num { margin-top: 0 !important; width: 92px; text-align: center; flex: none;
font-variant-numeric: tabular-nums; }
/* ---- Ticket-Panels: Vorschau-Kacheln ---- */
.pn-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }
.pn-card { display: flex; flex-direction: column; gap: 12px; padding: 15px 16px;
border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .26); }
.pn-card-head { display: flex; flex-direction: column; gap: 3px; }
.pn-card-t { display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
.pn-card-t b { color: #fff; font-weight: 700; }
.pn-card-meta { font-size: 11.5px; color: var(--muted); }
.pn-warn { color: #ff8b98; }
.pn-card-act { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; }
.pn-card-act .az-mini { margin: 0; }
/* Discord-Nachbau der Panel-Nachricht */
.pv { border-radius: 10px; background: #2f3136; padding: 12px 14px; }
.pv-msg { display: flex; gap: 11px; align-items: flex-start; }
.pv-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #b82b3a, #ff5062); }
.pv-main { min-width: 0; flex: 1; }
.pv-name { font-size: 13.5px; font-weight: 600; color: #fff; margin-bottom: 5px; }
.pv-bot { margin-left: 5px; padding: 1px 4px; border-radius: 3px; font-size: 9px; font-weight: 700;
vertical-align: middle; background: #5865f2; color: #fff; }
.pv-embed { border-left: 4px solid var(--red-hot); border-radius: 4px; padding: 10px 12px;
background: #292b2f; }
.pv-title { font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 4px; line-height: 1.35; }
.pv-desc { font-size: 12.5px; color: #dcddde; line-height: 1.5; white-space: pre-wrap; }
.pv-img { margin-top: 7px; font-size: 11px; color: #a3a6aa; font-style: italic; }
.pv-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.pv-btn { padding: 6px 11px; border-radius: 4px; font-size: 12px; color: #fff; background: #4f545c; }
.pv-more { padding: 6px 9px; font-size: 12px; color: #a3a6aa; }
.pv-select { margin-top: 9px; padding: 9px 12px; border-radius: 4px; font-size: 12.5px;
color: #b9bbbe; background: #202225; border: 1px solid #40444b;
display: flex; align-items: center; justify-content: space-between; }
.pv-caret { opacity: .7; }
.pv-warn { margin-top: 9px; padding: 9px 12px; border-radius: 4px; font-size: 12px;
color: #ffb3bd; background: rgba(255, 80, 98, .12); border: 1px solid rgba(255, 80, 98, .3); }
/* Dialog: Formular links, Vorschau rechts */
.pn-edit { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.pn-edit-form { min-width: 0; }
.pn-edit-prev { position: sticky; top: 0; }
.pn-edit-prev .a-caption { display: block; margin-bottom: 9px; }
@media (max-width: 900px) {
.pn-grid { grid-template-columns: 1fr; }
.pn-edit { grid-template-columns: 1fr; }
.pn-edit-prev { position: static; }
}
/* ================= Anwendungsschale =================
Ersetzt den zentrierten Karten-Dialog: feste Seitenleiste links,
Inhalt nutzt den Rest der Fläche. */
.admin-page.has-shell .admin-shell {
display: block; max-width: none; width: 100%; padding: 0; margin: 0;
}
/* Die Grundregeln zentrieren per Flexbox — das laesst das Raster auf
Inhaltsbreite schrumpfen und in der Mitte stehen. Beides hier aufheben. */
.admin-page.has-shell .admin-shell > #admin-app { display: block; width: 100%; }
.ash { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; }
.ash-side { display: flex; flex-direction: column; gap: 4px; padding: 18px 14px;
border-right: 1px solid var(--line-soft); background: rgba(6, 5, 9, .82);
backdrop-filter: blur(10px); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.ash-brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 16px;
text-decoration: none; color: inherit; border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }
.ash-brand img { width: 38px; height: 38px; object-fit: contain; flex: none; }
.ash-brand span { display: flex; flex-direction: column; min-width: 0; }
.ash-brand b { font-family: var(--font-display); font-size: 15px; color: #fff; }
.ash-brand b i { color: var(--red-hot); font-style: normal; }
.ash-brand small { font-size: 11px; color: var(--muted); }
.ash-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ash-nav-cap { padding: 14px 10px 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); }
.ash-nav-i { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
padding: 10px 11px; font: inherit; cursor: pointer; color: var(--text);
border: 1px solid transparent; border-radius: 10px; background: none; }
.ash-nav-i:hover { background: rgba(255, 255, 255, .05); }
.ash-nav-i.on { border-color: rgba(200, 163, 124, .4); background: rgba(200, 163, 124, .12); }
.ash-nav-ico { flex: none; width: 20px; text-align: center; font-size: 15px; }
.ash-nav-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ash-nav-t b { font-size: 13px; font-weight: 600; }
.ash-nav-t small { font-size: 10.5px; color: var(--muted); overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.ash-user { display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.ash-user-n { font-size: 12.5px; color: var(--text); overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.ash-out { flex: none; padding: 6px 11px; font: inherit; font-size: 11.5px; cursor: pointer;
color: #ff8b98; border-radius: 99px; border: 1px solid var(--line-soft); background: none; }
.ash-out:hover { background: rgba(255, 80, 98, .1); }
.ash-main { padding: 26px 30px 60px; min-width: 0; }
/* Innerhalb der Schale: Karten flach, volle Breite, keine Doppelrahmen */
.ash-main .a-wrap, .ash-main .a-wrap-wide, .ash-main .a-wrap-xwide { width: 100%; max-width: none; }
.ash-main .a-card, .ash-main .a-card-wide { border: 0; background: none; box-shadow: none;
padding: 0; min-height: 0; }
/* Marke und Zurück-Knopf sind jetzt Aufgabe der Seitenleiste */
.ash-main .a-brand, .ash-main .a-foot { display: none; }
.ash-main .hub-topbar { margin-bottom: 14px; }
.ash-main .a-h { margin-top: 0; }
@media (max-width: 900px) {
.ash { grid-template-columns: 1fr; }
.ash-side { position: static; height: auto; flex-direction: column; }
.ash-nav { flex-direction: row; flex-wrap: wrap; }
.ash-nav-i { width: auto; }
.ash-nav-cap { width: 100%; }
.ash-main { padding: 18px 16px 40px; }
}
/* Innerhalb der Schale übernimmt die Seitenleiste die Navigation — nur die
modul-eigenen Zurück-Knöpfe verschwinden. Die ganze .hub-topbar zu
verstecken würde auch echte Bedienelemente darin treffen: die Reiter
Team/Rollen samt „Mitglied hinzufügen", den Neu-laden-Knopf der
Statistiken, den Sprachknopf des Handbuchs. */
.admin-page.has-shell .hub-back,
.admin-page.has-shell .admin-exit { display: none; }
/* Die sichtbaren Kopfzeilen als eine Zeile: Titel links, Aktionen rechts. */
.ash-main .hub-topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ash-main .hub-topbar h2 { margin: 0; }
.ash-main .hub-topbar > .az-mini:last-child { margin-left: auto; }
/* Formulare brauchen keine 1100 px. Eingabefelder und Aktionen begrenzen,
damit ein Login-Feld nicht quer über den Bildschirm läuft. */
.ash-main .a-card form,
.ash-main .a-lbl,
.ash-main .a-actions { max-width: 560px; }
.ash-main .a-in { max-width: 560px; }
/* Ausgenommen: Bereiche, die die Breite wirklich brauchen */
.ash-main .ct-form .a-in, .ash-main .rk-row .a-in, .ash-main .em-grid .a-in,
.ash-main .th-msgs .a-in, .ash-main .tk-reply, .ash-main .a-chsend .a-dd { max-width: none; }
.ash-main .ct-pair .a-lbl, .ash-main .ct-row2 .a-lbl { max-width: none; }
.ash-nav-i.is-soon { opacity: .45; cursor: default; }
.ash-nav-i.is-soon:hover { background: none; }
/* ---- Feinschliff der Schale ----
Die Seite scrollte waagerecht, wodurch Seitenleiste und Fußzeile links
angeschnitten wirkten. Nichts darf breiter werden als seine Spalte. */
.admin-page.has-shell { overflow-x: hidden; }
.ash { max-width: 100%; }
.ash-side, .ash-main { min-width: 0; }
.ash-side > * { max-width: 100%; }
.ash-brand span, .ash-nav-t { overflow: hidden; }
.ash-brand b, .ash-brand small,
.ash-nav-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ash-user { min-width: 0; }
.ash-user-n { min-width: 0; flex: 1; }
/* Anmeldemaske als Karte statt frei stehender Felder */
#gameArea { display: flex; justify-content: center; padding-top: 8px; }
#gameArea > * { width: 100%; max-width: 460px; }
#gameArea .a-card, #gameArea form {
padding: 26px 28px; border-radius: var(--radius-lg);
border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .3);
}
#gameArea .a-h { margin-top: 0; }
#gameArea .a-in, #gameArea .a-lbl, #gameArea .a-actions { max-width: none; }
#gameArea .btn { width: 100%; }
/* Der Konto-Wechsel gehört unter den Knopf, nicht daneben */
#gameArea .a-link { display: block; width: 100%; margin-top: 14px; text-align: center; }
/* ---- Changelog ---- */
.cl-list { display: flex; flex-direction: column; gap: 8px; }
.cl-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 13px 15px; border-radius: var(--radius-md);
border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .26); }
.cl-row-main { min-width: 0; }
.cl-row-t { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 14px; }
.cl-row-t b { color: #fff; }
.cl-ver { padding: 2px 8px; border-radius: 99px; font-size: 11.5px;
border: 1px solid rgba(255,80,98,.35); background: rgba(255,80,98,.1); color: #ff8b98 !important; }
.cl-row-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; font-size: 11.5px; }
.cl-row-act { display: flex; gap: 6px; flex: none; flex-wrap: wrap; }
.cl-row-act .az-mini, .cl-row-act .btn { margin: 0; }
.cl-chip { padding: 2px 8px; border-radius: 99px; font-size: 11px;
border: 1px solid var(--line-soft); background: rgba(255,255,255,.03); }
.cl-new { border-color: rgba(100,240,140,.3); }
.cl-improved { border-color: rgba(90,200,255,.3); }
.cl-fixed { border-color: rgba(240,180,90,.3); }
.cl-server { border-color: rgba(167,139,250,.3); }
.cl-items { display: flex; flex-direction: column; gap: 6px; }
.cl-item { display: grid; grid-template-columns: 168px minmax(0,1fr) minmax(0,1fr) auto;
gap: 8px; align-items: center; }
.cl-item .a-in { margin-top: 0 !important; max-width: none; }
.cl-item .a-dd { width: 168px; }
.cl-x { margin: 0 !important; }
@media (max-width: 900px) {
.cl-item { grid-template-columns: 1fr 1fr; }
.cl-item .a-dd { width: 100%; grid-column: 1 / -1; }
.cl-row { flex-direction: column; align-items: stretch; }
}
/* Changelog: Übersicht als Karten */
.cl-back { margin: 0 0 14px !important; }
.cl-sec { display: block; margin: 20px 0 9px; font-size: 10px; font-weight: 800;
letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.cl-sec:first-of-type { margin-top: 10px; }
.cl-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); }
.cl-card { display: flex; flex-direction: column; gap: 9px; padding: 15px 16px;
border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: rgba(0,0,0,.26); }
.cl-card.is-draft { border-style: dashed; border-color: rgba(255,255,255,.16); }
.cl-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cl-card-t { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 14.5px; }
.cl-card-t b { color: #fff; }
.cl-card-m { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.cl-intro { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.cl-prev { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
border-radius: 10px; background: rgba(255,255,255,.025); font-size: 12.5px; }
.cl-prev-i { display: flex; gap: 8px; line-height: 1.45; }
.cl-prev-i span { flex: none; }
.cl-prev-more { font-size: 11.5px; color: var(--muted); }
.cl-prev-empty { color: var(--muted); font-style: italic; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cl-card-f { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.cl-card-f .az-mini, .cl-card-f .btn { margin: 0; }
.cl-balance { border-color: rgba(90,200,255,.3); }
.cl-removed { border-color: rgba(255,255,255,.16); }
.cl-rules { border-color: rgba(215,170,65,.3); }
.cl-event { border-color: rgba(230,76,145,.32); }
.cl-important { border-color: rgba(255,80,98,.42); }
.cl-known { border-color: rgba(240,180,90,.3); }
@media (max-width: 900px) { .cl-list { grid-template-columns: 1fr; } }
/* Changelog-Editor */
.cl-edit { display: flex; flex-direction: column; gap: 14px; max-width: 1180px; }
.cl-edit .ct-grp { margin-bottom: 0; }
.cl-head-row { display: grid; grid-template-columns: 150px minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.cl-head-row .a-lbl { margin-bottom: 0; }
.cl-add { margin-top: 10px !important; }
.cl-actions { max-width: 1180px; }
.cl-item { background: rgba(255,255,255,.02); padding: 8px; border-radius: 10px; }
.cl-item + .cl-item { margin-top: 0; }
@media (max-width: 900px) { .cl-head-row { grid-template-columns: 1fr; } }
/* Nach oben klappen, wenn unten kein Platz ist */
.a-dd.drop-up .a-dd-list { top: auto; bottom: calc(100% + 6px); }
/* Solange eine Liste offen ist, darf der scrollende Container ueberlaufen —
sonst schneidet er sie ab. */
.has-open-dd { overflow: visible !important; }
/* Changelog: Zielkanäle */
.cl-targets { margin-bottom: 18px; }
.cl-tgs { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.cl-tg { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 9px; align-items: center;
padding: 7px 9px; border-radius: 9px; background: rgba(255,255,255,.022); }
.cl-tg .a-in { margin-top: 0 !important; max-width: none; }
.cl-tg .az-mini { margin: 0; }
.cl-tg-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cl-tg-add .a-dd { width: 260px; }
.cl-tg-add .az-mini, .cl-tg-add .btn { margin: 0; }
@media (max-width: 700px) { .cl-tg { grid-template-columns: 1fr auto; } .cl-tg-add .a-dd { width: 100%; } }
/* ---- Inhalts-Editor (Infohub / Dinodex / Mutationdex) ----
Zwei Spalten: links die Eintraege, rechts das Formular. Bei drei Bereichen
mit ganz unterschiedlichen Datenformen bleibt so wenigstens die Bedienung
ueberall gleich. */
.ce-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ce-head .a-h { margin: 0; }
.ce-badge {
padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid rgba(255,255,255,.1);
}
.ce-badge-db { background: rgba(229,57,53,.14); color: #ff8a8a; border-color: rgba(229,57,53,.3); }
.ce-badge-ro { background: rgba(255,190,60,.12); color: #ffcf7a; border-color: rgba(255,190,60,.28); }
.ce-groups { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 4px; }
.ce-grp {
padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
background: rgba(255,255,255,.04); color: var(--muted); border: 1px solid rgba(255,255,255,.09);
}
.ce-grp:hover { background: rgba(255,255,255,.08); color: #fff; }
.ce-grp.on { background: var(--red-hot); color: #fff; border-color: transparent; }
.ce-split { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; margin-top: 16px; }
.ce-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ce-search { font-size: 13px; }
.ce-items {
display: flex; flex-direction: column; gap: 3px;
/* An die Fensterhoehe koppeln statt feste 520px — sonst steht die Liste bei
45 Eintraegen im Nichts und bei 5 bleibt die Haelfte leer. */
max-height: min(60vh, 560px); overflow-y: auto; overscroll-behavior: contain;
padding-right: 6px;
}
.ce-item {
/* flex-shrink MUSS aus: sonst quetscht der Flex-Container die Zeilen unter
die Texthoehe, sobald mehr Eintraege da sind als Platz — die Namen wurden
dadurch oben und unten abgeschnitten. */
flex: 0 0 auto;
text-align: left; padding: 9px 12px; border-radius: 8px;
font-size: 13.5px; line-height: 1.45; cursor: pointer;
background: transparent; color: var(--muted); border: 1px solid transparent;
text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden;
}
.ce-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.ce-item.on { background: rgba(229,57,53,.16); color: #fff; border-color: rgba(229,57,53,.35); }
.ce-count { font-size: 11.5px; color: var(--muted); }
.ce-none { padding: 20px; text-align: center; font-size: 13px; color: var(--muted); }
.ce-main { min-width: 0; }
.ce-name { margin: 0 0 14px; font-size: 18px; font-weight: 800; color: #fff; }
/* Zwei Spalten: kurze Felder paaren sich, lange nehmen die volle Breite.
Sieben Felder streng untereinander waren bei vier Einzeilern Verschwendung. */
.ce-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.ce-f { display: flex; flex-direction: column; gap: 5px; grid-column: 1 / -1; min-width: 0; }
.ce-f-s { grid-column: span 1; }
.ce-f-l { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ce-f-h { font-size: 11.5px; color: var(--muted); opacity: .8; }
.ce-ta { font-family: inherit; line-height: 1.55; resize: vertical; }
.ce-ta-html { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.ce-bar {
display: flex; gap: 10px; align-items: center; margin-top: 20px; padding-top: 16px;
border-top: 1px solid rgba(255,255,255,.08);
}
.ce-note { flex: 1; }
.ce-err { margin-top: 14px; }
@media (max-width: 860px) {
.ce-split { grid-template-columns: 1fr; }
.ce-items { max-height: 220px; }
.ce-bar { flex-wrap: wrap; }
}
/* ---- Textfeld mit Auszeichnung ----
Sieht aus wie das Ergebnis auf der Website, nicht wie Quelltext. */
.ce-tools {
display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
padding: 6px; border-radius: 10px 10px 0 0;
background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-bottom: none;
}
.ce-tools button {
padding: 5px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer;
background: transparent; color: var(--muted); border: 1px solid transparent; line-height: 1.2;
}
.ce-tools button:hover { background: rgba(255,255,255,.09); color: #fff; }
.ce-tools button.on { background: var(--red-hot); color: #fff; }
.ce-tools-sep { flex: 1; }
.ce-tools-src { font-family: ui-monospace, Menlo, Consolas, monospace; }
.ce-rich {
min-height: 200px; max-height: 460px; overflow-y: auto;
border-radius: 0 0 10px 10px; padding: 14px 16px;
font-size: 14px; line-height: 1.65; cursor: text;
}
.ce-rich:focus { outline: none; border-color: rgba(229,57,53,.5); }
.ce-rich p { margin: 0 0 10px; }
.ce-rich p:last-child { margin-bottom: 0; }
.ce-rich ul { margin: 0 0 10px; padding-left: 22px; }
.ce-rich li { margin: 3px 0; }
.ce-rich b { color: #fff; font-weight: 700; }
.ce-rich:empty::before {
content: 'Text eingeben…'; color: var(--muted); opacity: .5;
}
/* Quelltextansicht schliesst buendig an die Leiste an */
.ce-f > .ce-ta-html { border-radius: 0 0 10px 10px; }
.ce-rich i { font-style: italic; }
.ce-rich a { color: var(--red-hot); text-decoration: underline; }
/* Schmale, unaufdringliche Bildlaufleiste — die breite Standardleiste lief
vorher quer durch die Eintragsnamen. */
.ce-items::-webkit-scrollbar { width: 8px; }
.ce-items::-webkit-scrollbar-track { background: transparent; }
.ce-items::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.14); border-radius: 999px;
}
.ce-items::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); }
.ce-items { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
/* Bei einspaltigem Formular (schmales Fenster) wieder alles volle Breite */
@media (max-width: 860px) {
.ce-form { grid-template-columns: 1fr; }
.ce-f-s { grid-column: 1 / -1; }
}
/* ---- Eintraege anlegen / entfernen ---- */
.ce-add {
display: flex; flex-direction: column; gap: 6px;
margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08);
}
.ce-add .a-in { font-size: 13px; }
.ce-add-btn { justify-content: center; font-size: 13px; padding: 8px 12px; }
.ce-add-wait { font-size: 12px; color: var(--muted); text-align: center; padding: 6px 0; }
.ce-mainhead {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-bottom: 14px;
}
.ce-mainhead .ce-name { margin: 0; }
.ce-del {
flex: 0 0 auto; padding: 6px 12px; border-radius: 8px; cursor: pointer;
font-size: 12.5px; font-weight: 600;
background: rgba(229,57,53,.1); color: #ff9a9a; border: 1px solid rgba(229,57,53,.3);
}
.ce-del:hover { background: rgba(229,57,53,.2); color: #fff; }
/* Bereichsleiste: Auswahl links, Werkzeuge rechts abgesetzt */
.ce-grp-sep { flex: 1 1 auto; min-width: 12px; }
.ce-grp-edit, .ce-grp-add {
background: rgba(255,255,255,.02); border-style: dashed; font-weight: 600;
}
.ce-grp-add { color: #9ad7a0; border-color: rgba(120,200,130,.3); }
.ce-grp-add:hover { background: rgba(120,200,130,.12); color: #fff; }
.ce-mainhead-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.ce-back2 {
padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 600;
background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid rgba(255,255,255,.1);
}
.ce-back2:hover { background: rgba(255,255,255,.1); color: #fff; }
.ce-grp-note { margin-top: 16px; font-size: 12.5px; color: var(--muted); }
/* Hinweiskasten in Formularen (z. B. auf Altbestände, die nicht mehr von hier
gepflegt werden). Gelb statt rot: es ist kein Fehler, nur etwas zu wissen. */
.a-note {
margin: 0 0 14px; padding: 11px 14px; border-radius: 10px;
font-size: 13px; line-height: 1.55; color: var(--muted);
background: rgba(255,190,60,.07); border-left: 3px solid rgba(255,190,60,.5);
}
.a-note b { color: #ffcf7a; }
.a-note code {
padding: 1px 5px; border-radius: 4px; font-size: 12px;
font-family: ui-monospace, Menlo, Consolas, monospace;
background: rgba(255,255,255,.07); color: #fff;
}
/* Bezugswerte über der Eintragsliste (gelten für alle Einträge) */
.ce-dochead {
margin: 16px 0 4px; padding: 14px 16px; border-radius: 12px;
background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08);
}
.ce-dochead h4 {
margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .07em;
text-transform: uppercase; color: var(--muted);
}
/* Haken statt ja/nein-Auswahl */
.ce-f-bool {
flex-direction: row; align-items: center; gap: 9px; flex-wrap: wrap;
padding: 9px 12px; border-radius: 9px; cursor: pointer;
background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
}
.ce-f-bool:hover { background: rgba(255,255,255,.05); }
.ce-f-bool input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--red-hot); cursor: pointer; flex: 0 0 auto; }
.ce-f-bool .ce-f-l { text-transform: none; letter-spacing: 0; font-size: 13.5px; color: #fff; }
.ce-f-bool .ce-f-h { flex-basis: 100%; margin-left: 26px; }
/* Farbe: Wähler und Hex-Feld nebeneinander */
.ce-color { display: flex; gap: 8px; align-items: center; }
.ce-color input[type="color"] {
width: 38px; height: 36px; padding: 2px; flex: 0 0 auto; cursor: pointer;
border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: transparent;
}
.ce-color .a-in { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; }
/* ---- Fassungsverlauf ---- */
.ce-hlist { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ce-hrow {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px;
align-items: center; padding: 12px 15px; border-radius: 11px;
background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
}
.ce-hrow:hover { background: rgba(255,255,255,.045); }
.ce-hrow.on { background: rgba(229,57,53,.07); border-color: rgba(229,57,53,.26); }
.ce-hmain { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.ce-hver { font-size: 13.5px; font-weight: 800; color: #fff; white-space: nowrap; }
.ce-hnote { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.ce-hnote i { opacity: .55; }
.ce-hmeta { grid-column: 1; font-size: 11.5px; color: var(--muted); opacity: .8; }
.ce-hrow .az-mini { grid-row: 1 / span 2; grid-column: 2; }
/* Schnellschalter über der Rechteliste */
/* ---- Spielserver-Verwaltung (nyors-mods) ----
Instrumententafel, keine Broschüre: dicht, tabellarisch, Zustand vor Zierde. */
.ny-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ny-head .a-h { margin: 0; }
.ny-tenant { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); }
.ny-duty {
margin-bottom: 18px; padding: 13px 16px; border-radius: 11px; font-size: 13.5px; line-height: 1.55;
color: var(--muted); background: rgba(255,190,60,.07); border-left: 3px solid rgba(255,190,60,.5);
}
.ny-duty b { color: #ffcf7a; }
.ny-duty code, .ny-perms code, .ny-block code {
font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,.07); color: #fff;
}
.ny-split { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px; align-items: start; }
.ny-nav { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; max-height: 78vh; overflow-y: auto; padding-right: 4px; }
.ny-navgrp { display: flex; flex-direction: column; gap: 2px; }
.ny-navgrp-t {
font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--muted); padding: 0 4px 5px;
}
.ny-navitem {
display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
padding: 8px 11px; border-radius: 8px; font-size: 13px; text-align: left; cursor: pointer;
background: transparent; color: var(--muted); border: 1px solid transparent;
}
.ny-navitem:hover { background: rgba(255,255,255,.05); color: #fff; }
.ny-navitem.on { background: rgba(229,57,53,.16); color: #fff; border-color: rgba(229,57,53,.35); }
.ny-navn { margin-left: auto; font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; }
.ny-main { min-width: 0; }
.ny-welcome h2 { margin: 0 0 8px; font-size: 19px; font-weight: 800; }
.ny-welcome p { margin: 0 0 10px; color: var(--muted); font-size: 14px; max-width: 62ch; }
.ny-note { font-size: 13px; opacity: .85; }
.ny-sechead { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; margin-bottom: 8px; }
.ny-sechead h2 { margin: 0; font-size: 18px; font-weight: 800; }
.ny-secid, .ny-secn { font-size: 11.5px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.ny-secn { margin-left: auto; }
.ny-perms { margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.ny-perms code.ok { background: rgba(90,200,120,.15); color: #9ad7a0; }
.ny-perms code.no { background: rgba(229,57,53,.15); color: #ff9a9a; }
.ny-h3 { margin: 22px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .07em;
text-transform: uppercase; color: var(--muted); }
.ny-calls { display: flex; flex-direction: column; gap: 9px; }
.ny-call { padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.07); }
.ny-call.ny-loeschen { border-color: rgba(229,57,53,.22); }
.ny-call-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ny-m { font-family: ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 800;
letter-spacing: .05em; padding: 3px 7px; border-radius: 5px; color: #fff; flex: none; }
.ny-m-GET { background: #4f7fd6; } .ny-m-POST { background: #4ea672; }
.ny-m-PUT { background: #cf9330; } .ny-m-DELETE { background: #c0453f; }
.ny-p { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: #fff;
overflow-wrap: anywhere; }
.ny-s { font-size: 12.5px; color: var(--muted); flex-basis: 100%; }
.ny-params { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 10px; }
.ny-params label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; }
.ny-params span, .ny-bodylbl span { font-size: 11px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--muted); }
.ny-bodylbl { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ny-body { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; resize: vertical; }
.ny-call-a { margin-top: 10px; }
.ny-out { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.08); }
.ny-status { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.ny-load { font-size: 13px; color: var(--muted); }
.ny-block { padding: 10px 13px; border-radius: 9px; font-size: 13px; color: var(--muted);
background: rgba(255,190,60,.07); border-left: 3px solid rgba(255,190,60,.45); }
.ny-block b { color: #ffcf7a; }
.ny-block-err { background: rgba(229,57,53,.08); border-left-color: rgba(229,57,53,.5); }
.ny-block-err b { color: #ff9a9a; }
.ny-empty { padding: 16px; text-align: center; font-size: 13px; color: var(--muted); }
.ny-raw { margin: 0; padding: 11px 13px; border-radius: 9px; overflow-x: auto;
font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5;
background: rgba(0,0,0,.3); color: var(--muted); }
.ny-tablewrap { overflow-x: auto; border-radius: 9px; border: 1px solid rgba(255,255,255,.08); }
.ny-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ny-table th, .ny-table td { padding: 7px 10px; text-align: left; white-space: nowrap;
border-bottom: 1px solid rgba(255,255,255,.06); }
.ny-table th { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
color: var(--muted); background: rgba(255,255,255,.03); position: sticky; top: 0; }
.ny-table tbody tr:hover { background: rgba(255,255,255,.03); }
.ny-table td { font-variant-numeric: tabular-nums; }
.ny-more { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.ny-null { opacity: .4; } .ny-ja { color: #9ad7a0; } .ny-nein { color: var(--muted); }
.ny-obj { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; opacity: .8; }
.ny-fields { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
gap: 6px 16px; margin: 0; font-size: 13px; }
.ny-fields dt { font-weight: 700; color: var(--muted); }
.ny-fields dd { margin: 0; overflow-wrap: anywhere; }
/* Umbruch nach der CONTAINER-Breite, nicht nach der Fensterbreite.
Das Modul sitzt hinter der 268px-Schale und drei Ebenen Innenabstand: bei
1000px Fenster bleiben der Arbeitsflaeche nur ~350px, bei 850px noch 200px.
Eine @media-Regel misst aber das Fenster und haette erst bei 900px gegriffen —
also viel zu spaet. @container misst, was wirklich da ist. */
.ny-root { container-type: inline-size; container-name: nyroot; }
@container nyroot (max-width: 820px) {
.ny-split { grid-template-columns: 1fr; }
.ny-nav { position: static; max-height: 260px; flex-direction: row; flex-wrap: wrap; }
.ny-navgrp { flex: 1 1 190px; }
}
/* Rueckfall fuer Browser ohne Container-Abfragen (Safari < 16, Firefox < 110):
dort greift wenigstens die Fensterregel. */
@supports not (container-type: inline-size) {
@media (max-width: 1200px) {
.ny-split { grid-template-columns: 1fr; }
.ny-nav { position: static; max-height: 260px; flex-direction: row; flex-wrap: wrap; }
.ny-navgrp { flex: 1 1 190px; }
}
}
/* Eingabefelder duerfen nie breiter werden als ihr Platz — 210px Mindestbreite
sprengt einen 150px-Container, genau das lief vorher rechts heraus. */
.ny-fs { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
/* #gameArea war für die LOGIN-Karte gestaltet: zentriert, max 460px, Knöpfe
voll breit. Der Login nutzt .a-wrap und behält das.
Die angemeldete Ansicht nutzt .a-wrap-wide und trägt die 29 Panel-Bereiche —
die brauchen die volle Breite, sonst bleiben dem Inhalt 150px und Pfade
brechen mitten im Wort. Deshalb hier ausgenommen. */
#gameArea > .a-wrap-wide { max-width: none; width: 100%; }
#gameArea .a-card-wide { max-width: none; }
#gameArea .ny-root { max-width: none; width: 100%; min-width: 0; }
#gameArea .ny-root .btn { width: auto; }
#gameArea .ny-root .a-in { max-width: none; }
/* Reiterleiste soll nicht auf Knopfbreite 100% laufen */
#gameArea .a-tabs .a-tab { width: auto; }
/* Eingaben je Aufruf — nach Herkunft gruppiert (Adresse / Filter / Daten) */
.ny-cols { margin-top: 9px; font-size: 11.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ny-cols code { font-family: ui-monospace, Menlo, monospace; font-size: 11px; padding: 2px 6px;
border-radius: 4px; background: rgba(255,255,255,.06); }
.ny-more-i { opacity: .6; }
.ny-fgrp { margin-top: 12px; }
.ny-fgrp-t { display: block; margin-bottom: 6px; font-size: 10.5px; font-weight: 800;
letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ny-fs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ny-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ny-f-l { font-size: 12px; font-weight: 600; color: #fff; }
.ny-req { color: var(--red-hot); font-style: normal; margin-left: 3px; }
.ny-f-h { font-size: 11px; color: var(--muted); opacity: .85; line-height: 1.4; }
.ny-f .a-in { font-size: 13px; }
.ny-dim { opacity: .7; font-size: 12px; }
.ny-fix { display: inline-block; margin-top: 4px; padding: 5px 9px; font-size: 11.5px;
font-family: ui-monospace, Menlo, Consolas, monospace; border-radius: 6px;
background: rgba(0,0,0,.35); color: #ffcf7a; overflow-wrap: anywhere; }
/* ---- Zeitplan für Embeds ---- */
.es-wrap { display: flex; flex-direction: column; gap: 14px; }
.es-list { display: flex; flex-direction: column; gap: 9px; }
.es-row {
padding: 13px 15px; border-radius: 11px;
background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08);
}
.es-row.es-off { opacity: .55; }
.es-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.es-main b { font-size: 14.5px; color: #fff; }
.es-when {
font-size: 12px; padding: 2px 9px; border-radius: 999px;
background: rgba(255,80,98,.14); color: #ff9aa5; font-weight: 600;
}
.es-badge {
font-size: 11px; padding: 2px 8px; border-radius: 999px;
background: rgba(255,255,255,.08); color: var(--muted);
}
.es-meta { margin-top: 5px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.es-err {
margin-top: 7px; padding: 6px 10px; border-radius: 7px; font-size: 12px;
background: rgba(229,57,53,.09); color: #ff9a9a; border-left: 2px solid rgba(229,57,53,.5);
}
.es-act { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.es-add { display: flex; }
.es-form {
margin-top: 4px; padding: 16px 18px; border-radius: 12px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1);
}
.es-form h4 { margin: 0 0 14px; font-size: 14px; font-weight: 800; color: #fff; }
.es-cond { margin-top: 2px; }
.es-days { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.es-day {
display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px;
border-radius: 9px; cursor: pointer; font-size: 13px;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
}
.es-day:hover { background: rgba(255,255,255,.08); }
.es-day input { accent-color: var(--red-hot); cursor: pointer; }
.es-day:has(input:checked) { background: rgba(229,57,53,.16); border-color: rgba(229,57,53,.4); color: #fff; }
.a-lbl-t { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.a-hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
/* ---- Reaktionsrollen ---- */
.rr-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.rr-card { padding: 14px 16px; border-radius: 11px;
background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); }
.rr-card.rr-off { opacity: .55; }
.rr-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rr-h b { font-size: 14.5px; color: #fff; }
.rr-kind { font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
background: rgba(255,255,255,.07); color: var(--muted); }
.rr-live { font-size: 11px; padding: 2px 8px; border-radius: 999px;
background: rgba(90,200,120,.15); color: #9ad7a0; font-weight: 700; }
.rr-draft { font-size: 11px; padding: 2px 8px; border-radius: 999px;
background: rgba(255,190,60,.14); color: #ffcf7a; font-weight: 700; }
.rr-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.rr-chip { font-size: 12px; padding: 3px 9px; border-radius: 7px;
background: rgba(229,57,53,.12); color: #ff9aa5; }
.rr-act { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.rr-add { display: flex; margin-bottom: 12px; }
.rr-form { margin-top: 6px; padding: 16px 18px; border-radius: 12px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); }
.rr-form h4 { margin: 0 0 14px; font-size: 14px; font-weight: 800; color: #fff; }
.rr-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px,100%), 1fr));
gap: 8px; margin-bottom: 14px; }
.rr-kindopt { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; cursor: pointer;
border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); }
.rr-kindopt:hover { background: rgba(255,255,255,.06); }
.rr-kindopt:has(input:checked) { background: rgba(229,57,53,.14); border-color: rgba(229,57,53,.4); }
.rr-kindopt input { display: none; }
.rr-kindopt b { font-size: 13.5px; color: #fff; }
.rr-kindopt small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.rr-src { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rr-srcopt { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; cursor: pointer;
border-radius: 9px; font-size: 13px; background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.09); }
.rr-srcopt:has(input:checked) { background: rgba(229,57,53,.14); border-color: rgba(229,57,53,.4); color: #fff; }
.rr-srcopt input { accent-color: var(--red-hot); }
.rr-warn { margin-bottom: 12px; padding: 11px 14px; border-radius: 10px; font-size: 12.5px;
line-height: 1.55; color: var(--muted);
background: rgba(255,190,60,.07); border-left: 3px solid rgba(255,190,60,.5); }
.rr-warn b { color: #ffcf7a; }
.rr-opts { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.rr-opt { display: grid; grid-template-columns: minmax(0,1.4fr) 74px minmax(0,1.4fr) 96px auto;
gap: 7px; align-items: center; }
.rr-opt .a-in { font-size: 13px; }
.rr-col .ce-color { max-width: 220px; }
@media (max-width: 720px) {
.rr-opt { grid-template-columns: 1fr 1fr; }
}
.em-lang { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
/* ---- Embed-Editor: Abschnitte ---- */
.em-sec { padding: 14px 15px; margin-bottom: 12px; border-radius: 11px;
background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); }
.em-sec-t { display: block; margin-bottom: 11px; font-size: 11px; font-weight: 800;
letter-spacing: .08em; text-transform: uppercase; color: var(--red-hot); }
.em-sec .a-lbl { margin-bottom: 10px; }
.em-sec .a-lbl:last-child, .em-sec .st-row2:last-child { margin-bottom: 0; }
.em-fieldshead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.em-fieldshead .em-sec-t { margin-bottom: 0; }
/* Knopf-Vorschau unter dem Embed */
.em-pvbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.em-pvbtn { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 8px;
font-size: 13px; font-weight: 600; color: #dbdee1; background: #4e5058; }
.em-pvbtn-link { background: #4e5058; }
/* ---- Embed-Editor: Vorschau oben, volle Breite ----
NICHT sticky: als klebendes Band lag sie beim Scrollen über den
Feld-Zeilen und alles wurde unleserlich. Sie steht jetzt ruhig oben und
scrollt normal mit — wer sie sehen will, scrollt hoch. */
.em-pvwrap { margin: 4px 0 18px; }
.em-grid-solo { grid-template-columns: 1fr !important; }
.em-grid-solo .em-side { display: none; }
.em-pvwrap .em-preview { max-height: 340px; overflow-y: auto; }
/* ---- Challenges-Verwaltung ---- */
.chx-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.chx-row { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 11px;
background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); }
.chx-row.chx-off { opacity: .55; }
.chx-ico { font-size: 20px; flex: none; }
.chx-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.chx-main b { font-size: 14.5px; color: #fff; }
.chx-rec { font-size: 12px; color: var(--muted); }
.chx-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px;
background: rgba(255,190,60,.14); color: #ffcf7a; font-weight: 700; }
.chx-act { display: flex; gap: 7px; flex: none; }
.chx-add { display: flex; margin-bottom: 12px; }
.chx-form { margin-top: 6px; padding: 16px 18px; border-radius: 12px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); }
.chx-form h4 { margin: 0 0 14px; font-size: 14px; font-weight: 800; color: #fff; }
.chx-sec { padding: 13px 15px; margin-bottom: 11px; border-radius: 10px;
background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); }
.chx-sec-t { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 800;
letter-spacing: .07em; text-transform: uppercase; color: var(--red-hot); }
.chx-sec .a-lbl:last-child { margin-bottom: 0; }
/* ---- Umfragen (admin-polls.js) ---- */
.pl-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.pl-row { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 11px;
background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); }
.pl-main { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; flex: 1; min-width: 0; }
.pl-main b { font-size: 14.5px; color: #fff; }
.pl-meta { font-size: 12.5px; color: var(--muted); width: 100%; }
.pl-meta2 { font-size: 11.5px; color: var(--muted); opacity: .8; width: 100%; }
.pl-act { display: flex; gap: 7px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.pl-badge { font-size: 10.5px; padding: 2px 9px; border-radius: 999px; font-weight: 800;
letter-spacing: .04em; text-transform: uppercase; flex: none; }
.pl-open { background: rgba(90,200,120,.16); color: #7fe0a0; }
.pl-closed { background: rgba(255,255,255,.08); color: var(--muted); }
.pl-draft { background: rgba(90,170,255,.15); color: #8ac0ff; }
.pl-add { display: flex; margin-bottom: 12px; }
.az-mini-go { color: #7fe0a0; border-color: rgba(90,200,120,.32); }
.az-mini-go:hover:not(:disabled) { border-color: #7fe0a0; background: rgba(90,200,120,.1); }
.pl-form { margin-top: 6px; padding: 16px 18px; border-radius: 12px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); }
.pl-form h4 { margin: 0 0 14px; font-size: 14px; font-weight: 800; color: #fff; }
.pl-sec { padding: 13px 15px; margin-bottom: 11px; border-radius: 10px;
background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); }
.pl-sec-t { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 800;
letter-spacing: .07em; text-transform: uppercase; color: var(--red-hot); }
.pl-optrow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.pl-optn { flex: none; width: 20px; text-align: center; font-weight: 800; font-size: 12px; color: var(--muted); }
.pl-optrow .a-in { margin: 0; flex: 1; min-width: 0; }
.pl-optrow .az-mini { margin: 0; flex: none; }
.pl-resrow { padding: 9px 0; border-top: 1px solid rgba(255,255,255,.05); }
.pl-resh { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.pl-resh b { color: #fff; }
.pl-resh span { color: var(--muted); flex: none; }
.pl-resbar { display: block; margin: 4px 0 2px; font-size: 13px; letter-spacing: 1px; color: var(--red-hot); }
.pl-resnames { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.pl-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pl-toolbar .a-in { margin: 0; width: auto; min-width: 200px; max-width: 280px; }
.pl-toolbar .az-mini { margin: 0; }
.pl-toolspace { flex: 1; }
.pl-tplsave { display: flex; gap: 8px; align-items: center; }
.pl-tplsave .a-in { margin: 0; flex: 1; min-width: 0; }
.pl-tplsave .az-mini { margin: 0; flex: none; }
.pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pl-stat { padding: 13px 15px; border-radius: 11px; background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 3px; }
.pl-stat-n { font-size: 24px; font-weight: 800; color: #fff; line-height: 1.1; }
.pl-stat-l { font-size: 11.5px; color: var(--muted); }
.pl-toprow { display: flex; align-items: baseline; gap: 9px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.05); }
.pl-toprow:first-child { border-top: 0; }
.pl-topi { flex: none; width: 20px; text-align: center; font-weight: 800; font-size: 12px; color: var(--red-hot); }
.pl-toprow b { color: #fff; font-size: 13.5px; }
.pl-topmeta { margin-left: auto; font-size: 11.5px; color: var(--muted); flex: none; }
/* ---- Auto-Antworten (admin-autoreply.js) ---- */
.ar-kw { display: inline-block; margin: 0 4px 3px 0; padding: 1px 8px; border-radius: 999px;
background: rgba(90,200,255,.13); color: #8ad4ff; font-size: 11.5px; font-weight: 600; }
.ar-chans { max-height: 190px; overflow-y: auto; display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px;
padding: 9px 11px; border-radius: 9px;
background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.07); }
/* ---- Streamer-Karte: gleiche Höhe, Aktionen unten bündig ----
Ohne die Trennung in .st-item-top + .st-actions haengen die Knopfreihen bei
unterschiedlich hohen Karten auf verschiedenen Hoehen — das sah unruhig aus. */
.st-item { display: flex; flex-direction: column; }
.st-item-top { flex: 1; }
.st-actions { margin-top: auto; padding-top: 10px; }
.st-actions .az-mini-danger { margin-left: auto; }
/* Einladungszeile: eine schmale Zeile statt Kasten — sie ist Zusatzinfo,
nicht der Hauptinhalt der Karte. */
.st-inv { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px;
padding: 6px 10px; border-radius: 9px; font-size: 12px;
background: rgba(90,200,255,.05); border: 1px solid rgba(90,200,255,.14); }
.st-inv-n { font-size: 14px; font-weight: 800; color: #8ad4ff; line-height: 1; flex: none; }
.st-inv-l { color: var(--muted); white-space: nowrap; flex: none; }
.st-inv-url { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-inv-b { flex: none; padding: 3px 8px; font-size: 11px; font-weight: 600; cursor: pointer;
border-radius: 6px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.05);
color: var(--text); font-family: inherit; }
.st-inv-b:hover { border-color: var(--cyan); }
.st-inv-x { color: var(--red-hot); border-color: rgba(255,80,98,.3); }
.st-inv-x:hover { border-color: var(--red-hot); background: rgba(255,80,98,.1); }
/* ---- Streamer-Dialog: zweispaltig, damit nichts scrollt ----
Eine Plattform bringt acht Felder plus Vorschau mit. Einspaltig ergibt das
eine Liste, die kein Bildschirm fasst — nebeneinander halbiert sich die Höhe.
Die Wrapper .st-col sind nötig: ohne sie koppelt das Raster die Zeilenhöhen
beider Spalten, und neben einem hohen Feld reisst eine Lücke auf. */
.st-modal-card { width: min(1220px, 100%); max-height: 94vh; }
.st-modal-card .az-modal-body { padding: 18px 22px; }
.st-modal-card .a-lbl { margin-bottom: 12px; }
.st-toprow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 0 20px; align-items: start; }
.st-toprow .st-tplapply { margin-top: 0; }
.st-panel .st-fields { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 0 22px; align-items: start; }
.st-col { min-width: 0; }
.st-col > .a-lbl:last-child, .st-col > .st-row2:last-child { margin-bottom: 0; }
.st-modal-card .st-prev { margin-top: 10px; }
.st-modal-card .st-ta { min-height: 96px; }
@media (max-width: 960px) {
.st-toprow, .st-panel .st-fields { grid-template-columns: 1fr; }
}
/* ---- Streamer-Dialog: Plattform-Reiter (admin-streamtools.js) ---- */
.st-seclabel { margin: 16px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .07em;
text-transform: uppercase; color: var(--red-hot); }
.st-ptabs { display: flex; gap: 6px; margin-bottom: -1px; position: relative; z-index: 1; }
.st-ptab { display: flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer;
font: inherit; font-size: 13.5px; font-weight: 700; color: var(--muted);
background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.09);
border-bottom-color: transparent; border-radius: 10px 10px 0 0; transition: color .15s, background .15s; }
.st-ptab:hover { color: var(--text); background: rgba(255,255,255,.05); }
.st-ptab.active { color: #fff; background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.14);
border-bottom-color: transparent; }
.st-dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
background: rgba(255,255,255,.18); transition: background .15s, box-shadow .15s; }
.st-dot.on { background: var(--green, #57ff8f); box-shadow: 0 0 0 3px rgba(87,255,143,.16); }
.st-panel { padding: 16px; border-radius: 0 11px 11px 11px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.14); }
.st-switch { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.st-switch input { margin-top: 3px; flex: none; accent-color: var(--red-hot); width: 16px; height: 16px; }
.st-switch-txt { display: flex; flex-direction: column; gap: 2px; }
.st-switch-txt b { font-size: 13.5px; color: #fff; }
.st-switch-txt small { font-size: 11.5px; color: var(--muted); }
.st-off { margin-top: 13px; padding: 14px; border-radius: 9px; font-size: 12.5px; color: var(--muted);
background: rgba(0,0,0,.22); border: 1px dashed rgba(255,255,255,.1); }
.st-panel .st-fields { margin-top: 14px; }
.st-tplapply { display: flex; align-items: flex-end; gap: 9px; margin-top: 12px; }
.st-tplapply .st-tplsel { flex: 1; min-width: 0; margin-bottom: 0; }
.st-tplapply .az-mini { margin: 0 0 3px; flex: none; }
.st-tplmanage { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); }
.st-tplmanage-t { font-size: 11px; font-weight: 800; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted); margin-right: auto; }
.st-tplmanage .az-mini { margin: 0; }
/* ---- Moderation (admin-automod.js) ---- */
.am-filter { margin-bottom: 11px; border-radius: 12px; background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.1); overflow: hidden; transition: opacity .15s; }
.am-filter.am-off { opacity: .5; }
.am-filter.am-off .am-body { display: none; }
.am-head { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px;
background: rgba(255,255,255,.02); border-bottom: 1px solid rgba(255,255,255,.06); }
.am-filter.am-off .am-head { border-bottom: 0; }
.am-ico { font-size: 19px; flex: none; line-height: 1.2; }
.am-headtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.am-headtxt b { font-size: 14px; color: #fff; }
.am-headtxt span { font-size: 12px; color: var(--muted); line-height: 1.45; }
.am-body { padding: 13px 15px; }
.am-body .a-lbl { margin-bottom: 9px; }
.am-act { margin-bottom: 0; }
.am-hits { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.am-hit { padding: 10px 13px; border-radius: 10px; background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.07); }
.am-hit-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.am-hit-h b { color: #fff; }
.am-hit-f { color: var(--muted); font-size: 12px; }
.am-hit-a { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
background: rgba(255,159,67,.15); color: #ffb46b; }
.am-hit-t { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.am-hit-x { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted);
white-space: pre-wrap; word-break: break-word; }
/* ---- Emoji-Picker (admin-emoji.js) ---- */
.a-emo-wrap { position: relative; display: block; }
.a-emo-wrap > .a-in { padding-right: 36px; }
.a-emo-btn { position: absolute; top: 0; right: 0; height: 100%; width: 34px; border: 0; background: none;
cursor: pointer; font-size: 16px; line-height: 1; opacity: .7; border-radius: 0 9px 9px 0;
display: flex; align-items: center; justify-content: center; transition: opacity .15s, background .15s; }
.a-emo-wrap.a-emo-ta .a-emo-btn { top: 6px; height: 30px; right: 4px; width: 30px; border-radius: 7px; }
.a-emo-btn:hover { opacity: 1; background: rgba(255,255,255,.06); }
.a-emo-pop { position: absolute; z-index: 4000; width: 300px; max-width: calc(100vw - 16px);
background: #16121a; border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
box-shadow: 0 18px 46px rgba(0,0,0,.6); padding: 9px; display: none; }
.a-emo-pop.open { display: block; }
.a-emo-search { margin-bottom: 8px; }
.a-emo-search input { width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: var(--text); }
.a-emo-tabs { display: flex; gap: 3px; margin-bottom: 7px; flex-wrap: wrap; }
.a-emo-tab { border: 1px solid transparent; background: rgba(255,255,255,.04); border-radius: 7px;
padding: 4px 7px; font-size: 15px; line-height: 1; cursor: pointer; }
.a-emo-tab:hover { background: rgba(255,255,255,.09); }
.a-emo-tab.active { border-color: var(--cyan); background: rgba(90,200,255,.12); }
.a-emo-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 210px; overflow-y: auto; }
.a-emo-i { border: 0; background: none; cursor: pointer; font-size: 19px; line-height: 1;
padding: 5px 0; border-radius: 7px; transition: background .1s; }
.a-emo-i:hover { background: rgba(255,255,255,.12); }
.a-emo-empty { grid-column: 1 / -1; padding: 18px; text-align: center; color: var(--muted); font-size: 12.5px; }
/* ---- Welcome-Tool (admin-welcome.js) ---- */
.wc-field { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.wc-f-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.wc-f-grid .a-in { margin: 0; }
.wc-field > .az-mini { margin: 0; flex: none; }
.wc-btn { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wc-btn .a-in { margin: 0; }
.wc-bemoji { flex: 0 0 64px; text-align: center; }
.wc-blabel, .wc-blabel-en { flex: 0 0 150px; }
.wc-burl { flex: 1; min-width: 0; }
.wc-btn .az-mini { margin: 0; flex: none; }
@media (max-width: 900px) {
.wc-f-grid { grid-template-columns: 1fr; }
.wc-btn { flex-wrap: wrap; }
.wc-blabel, .wc-blabel-en, .wc-burl { flex: 1 1 100%; }
}
/* ---------- Handbuch: Baum aus Kategorie / Thema / Abschnitt ---------- */
/* Die Einrückung kommt über einen linken Strich statt über Leerraum: bei drei
Ebenen verliert man sonst schnell, wozu eine Zeile gehört. */
.hb-kind { margin: 0 0 6px 16px; padding-left: 14px; border-left: 2px solid rgba(255, 255, 255, .09); }
.hb-kind .chx-row { padding: 9px 13px; }
.hb-l2 { background: rgba(255, 255, 255, .022); }
.hb-l3 { background: transparent; border-style: dashed; }
.hb-toggle {
flex: none; width: 24px; height: 24px; padding: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 12px; color: var(--muted); border-radius: 7px;
background: rgba(255, 255, 255, .05); border: 1px solid var(--line-soft);
transition: color .15s ease, background .15s ease;
}
.hb-toggle:hover { color: #fff; background: rgba(255, 80, 98, .16); }
.hb-link .hb-lemoji { flex: 0 0 62px; text-align: center; }
.hb-link .hb-llabel, .hb-link .hb-llabel-en { flex: 1 1 130px; min-width: 0; }
.hb-link .hb-lurl { flex: 2 1 220px; min-width: 0; }
/* Drei gleich breite Felder nebeneinander — für Emoji + Titel DE + Titel EN. */
.st-row3 { display: grid; grid-template-columns: 100px 1fr 1fr; gap: 12px; }
@media (max-width: 760px) {
.st-row3 { grid-template-columns: 1fr; }
.hb-kind { margin-left: 6px; padding-left: 10px; }
}
/* ---------- Handbuch: Leseansicht ---------- */
/* Zwei Spalten mit eigenem Bildlauf. Das Verzeichnis soll stehen bleiben,
während man rechts liest — bei 44 Abschnitten sonst ständiges Zurückrollen. */
.hbr { display: grid; grid-template-columns: 288px 1fr; gap: 22px; align-items: start; }
.hbr-side {
position: sticky; top: 14px; max-height: calc(100vh - 130px); overflow-y: auto;
padding: 10px; border-radius: 14px;
background: rgba(255, 255, 255, .022); border: 1px solid var(--line-soft);
}
.hbr-main { min-width: 0; }
.hbr-search { margin-bottom: 10px; }
.hbr-search .a-in { margin: 0; }
.hbr-sec {
margin: 14px 0 6px; padding: 0 6px; font-size: 10.5px; font-weight: 800;
letter-spacing: .1em; text-transform: uppercase; color: var(--muted); opacity: .8;
}
.hbr-sec:first-of-type { margin-top: 4px; }
.hbr-i {
display: block; width: 100%; text-align: left; cursor: pointer;
padding: 7px 10px; margin-bottom: 2px; border-radius: 9px;
font-size: 13px; line-height: 1.35; color: var(--muted);
background: none; border: 1px solid transparent;
transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.hbr-i:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.hbr-i.on { color: #fff; background: rgba(200, 163, 124, .14); border-color: rgba(200, 163, 124, .35); }
.hbr-i2 { font-weight: 700; color: rgba(255, 255, 255, .8); }
.hbr-i3 { padding-left: 18px; }
.hbr-i3 b { display: block; color: inherit; }
.hbr-i3 small { display: block; font-size: 11px; opacity: .65; margin-top: 1px; }
.hbr-i.hbr-off { opacity: .45; font-style: italic; }
.hbr-none { padding: 10px; font-size: 12.5px; color: var(--muted); }
/* Startseite der Leseansicht */
.hbr-start { text-align: center; padding: 34px 20px 44px; }
.hbr-start img { width: 68px; height: 68px; object-fit: contain; opacity: .9; }
.hbr-start h2 { margin: 14px 0 6px; font-family: var(--font-display); font-size: 30px; color: #fff; }
.hbr-start p { margin: 0 auto 26px; max-width: 52ch; font-size: 14px; color: var(--muted); }
.hbr-parts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.hbr-part {
display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer;
padding: 18px 18px 16px; border-radius: 14px;
background: rgba(255, 255, 255, .03); border: 1px solid var(--line-soft);
transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.hbr-part:hover { border-color: rgba(255, 80, 98, .4); transform: translateY(-2px); background: rgba(255, 255, 255, .05); }
.hbr-part-e { font-size: 24px; }
.hbr-part b { font-size: 15px; color: #fff; }
.hbr-part small { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.hbr-part-n { margin-top: 6px; font-size: 11px; color: #ff8d9c; font-weight: 700; }
/* Der gelesene Text */
.hbr-doc { max-width: 78ch; }
.hbr-crumb { font-size: 11.5px; letter-spacing: .04em; color: var(--muted); opacity: .75; margin-bottom: 6px; }
.hbr-doc h2 { margin: 0 0 12px; font-family: var(--font-display); font-size: 27px; line-height: 1.2; color: #fff; }
.hbr-lead { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.hbr-warn {
margin: 0 0 16px; padding: 9px 13px; border-radius: 10px; font-size: 12.5px;
color: #ffcf8d; background: rgba(255, 176, 80, .1); border: 1px solid rgba(255, 176, 80, .28);
}
.hbr-body { font-size: 14.5px; line-height: 1.72; color: rgba(255, 255, 255, .8); }
.hbr-body h3, .hbr-body h4, .hbr-body h5 {
margin: 26px 0 10px; color: #fff; font-weight: 800; letter-spacing: .01em;
padding-bottom: 7px; border-bottom: 1px solid var(--line-soft);
}
.hbr-body h3 { font-size: 19px; }
.hbr-body h4 { font-size: 16px; }
.hbr-body h5 { font-size: 14.5px; border-bottom: 0; padding-bottom: 0; }
.hbr-body p { margin: 0 0 13px; }
.hbr-body ul { margin: 0 0 14px; padding-left: 4px; list-style: none; }
.hbr-body li { position: relative; padding-left: 20px; margin-bottom: 5px; }
.hbr-body li::before {
content: ""; position: absolute; left: 5px; top: .68em;
width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 80, 98, .75);
}
.hbr-body blockquote {
margin: 0 0 14px; padding: 8px 0 8px 14px; color: var(--muted);
border-left: 3px solid rgba(255, 80, 98, .45);
}
.hbr-body strong { color: #fff; }
.hbr-body code { padding: 1px 6px; border-radius: 6px; font-size: .9em;
background: rgba(255, 255, 255, .08); color: #ffb3bd; }
.hbr-ref {
padding: 1px 7px; border-radius: 6px; font-size: .92em; white-space: nowrap;
color: #9fb4ff; background: rgba(120, 145, 255, .14);
}
.hbr-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.hbr-card {
display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
padding: 13px 15px; border-radius: 11px;
background: rgba(255, 255, 255, .028); border: 1px solid var(--line-soft);
transition: border-color .15s ease, background .15s ease;
}
.hbr-card:hover { border-color: rgba(255, 80, 98, .4); background: rgba(255, 255, 255, .05); }
.hbr-card b { font-size: 13.5px; color: #fff; }
.hbr-card small { font-size: 12px; color: var(--muted); line-height: 1.45; }
.hbr-links { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 26px; }
.hbr-nav {
display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line-soft);
}
.hbr-nav .btn { max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
.hbr { grid-template-columns: 1fr; }
.hbr-side { position: static; max-height: 320px; }
.hbr-nav .btn { max-width: 100%; }
}
/* Kopfzeile der Leseansicht: Zurück links, Sprachknopf rechts. .hub-topbar
selbst bleibt unangetastet — die Klasse teilen sich alle Module. */
.hbr-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hbr-top .az-mini { margin: 0; }
/* ---------- Handbuch: Spalte als Klappverzeichnis ---------- */
/* Ersetzt die frühere flache Liste. Drei Ebenen ohne Faltung sahen aus wie
eine einzige lange Aufzählung — die Faltung ist hier keine Spielerei,
sondern der Unterschied zwischen 3 und 44 sichtbaren Zeilen. */
.hbr-cat {
display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
padding: 10px 11px; margin-bottom: 3px; border-radius: 10px; text-align: left;
background: rgba(255, 255, 255, .035); border: 1px solid var(--line-soft);
transition: background .15s ease, border-color .15s ease;
}
.hbr-cat:hover { background: rgba(255, 255, 255, .07); }
.hbr-cat.auf { background: rgba(255, 80, 98, .1); border-color: rgba(255, 80, 98, .3); }
.hbr-cat-e { font-size: 15px; line-height: 1; flex: none; }
.hbr-cat-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #fff; line-height: 1.3; }
.hbr-cat-n {
flex: none; min-width: 22px; text-align: center; padding: 1px 6px; border-radius: 999px;
font-size: 10.5px; font-weight: 700; color: var(--muted); background: rgba(255, 255, 255, .07);
}
.hbr-cat-p { flex: none; font-size: 10px; color: var(--muted); }
/* Der senkrechte Strich zeigt die Zugehörigkeit, ohne Platz für Einrückung
zu verbrauchen — in einer 288px-Spalte ist jeder Pixel Text wertvoll. */
.hbr-zweig { margin: 2px 0 10px 15px; padding-left: 11px; border-left: 2px solid rgba(255, 80, 98, .22); }
.hbr-thema {
display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer; text-align: left;
padding: 6px 8px; margin: 8px 0 3px; border-radius: 7px;
font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
color: var(--muted); background: none; border: 0;
}
.hbr-thema:first-child { margin-top: 2px; }
.hbr-thema:hover, .hbr-thema.on { color: #ff8d9c; }
.hbr-thema .hbr-cat-n { letter-spacing: 0; text-transform: none; }
.hbr-e {
display: block; width: 100%; text-align: left; cursor: pointer;
padding: 6px 9px; margin-bottom: 1px; border-radius: 7px;
font-size: 12.5px; line-height: 1.4; color: var(--muted);
background: none; border: 0;
transition: color .14s ease, background .14s ease;
}
.hbr-e:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.hbr-e.on { color: #fff; background: rgba(200, 163, 124, .16); font-weight: 600; }
.hbr-e.hbr-off { opacity: .45; font-style: italic; }
/* ---------- Channel Purge ---------- */
.pg-warn {
margin: 4px 0 18px; padding: 13px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.55;
color: #ffd0d6; background: rgba(255, 80, 98, .09); border: 1px solid rgba(255, 80, 98, .32);
}
.pg-warn b { color: #ff8d9c; }
.pg-confirm { margin-top: 14px; }
.pg-confirm p { margin: 0 0 7px; font-size: 13px; color: var(--muted); }
.pg-confirm code {
padding: 2px 8px; border-radius: 6px; font-size: .95em;
background: rgba(255, 255, 255, .08); color: #fff; user-select: all;
}
.pg-run, .pg-done {
margin-top: 16px; padding: 11px 15px; border-radius: 11px; font-size: 13.5px;
display: flex; align-items: center; gap: 10px;
}
.pg-run { color: var(--muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-soft); }
.pg-done { color: #b9f6c4; background: rgba(80, 220, 130, .09); border: 1px solid rgba(80, 220, 130, .3); }
/* ---------- Hinweis bei blockierter Panel-Verbindung ---------- */
.a-block {
margin: 4px 0 16px; padding: 15px 17px; border-radius: 12px; text-align: left;
font-size: 13px; line-height: 1.6; color: #ffd8b0;
background: rgba(255, 168, 60, .08); border: 1px solid rgba(255, 168, 60, .32);
}
.a-block b { color: #ffc073; }
.a-block p { margin: 8px 0 0; }
.a-block ol { margin: 6px 0 0; padding-left: 20px; }
.a-block li { margin-bottom: 5px; }
.a-block code {
padding: 1px 6px; border-radius: 5px; font-size: .93em;
background: rgba(0, 0, 0, .35); color: #fff;
}
.a-block-note { color: var(--muted); font-size: 12px; }
/* ---------- Skin Contest (Verwaltung) ---------- */
.az-tag-warn { color: #ffcf8d; background: rgba(255, 176, 80, .12); border-color: rgba(255, 176, 80, .34); }
/* Partner-Vorschaubild in der Verwaltungsliste. Fehlte — ein ![]()
ohne
Größenangabe wird in Originalgröße gezeichnet, und ein Partnerlogo mit
1000 px sprengt damit die ganze Seite. */
.ptx-img {
flex: none; width: 46px; height: 46px; object-fit: cover; border-radius: 10px;
background: rgba(0, 0, 0, .4); border: 1px solid var(--line-soft);
}
.sc-wartet { border-color: rgba(255, 176, 80, .4); background: rgba(255, 176, 80, .05); }
/* ---------- Skin Contest: Ablauf statt Liste ---------- */
.sc-preise { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.sc-preis {
display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 12px; border-radius: 999px;
background: rgba(215, 170, 65, .1); border: 1px solid rgba(215, 170, 65, .28);
}
.sc-preis b { font-size: 12.5px; color: #ffdd9a; }
.sc-preis small { font-size: 11px; color: var(--muted); }
.sc-preis-note { font-size: 11.5px; color: var(--muted); flex: 1 1 240px; }
.sc-block { margin-bottom: 22px; padding: 18px 20px; border-radius: 15px;
background: rgba(255, 255, 255, .025); border: 1px solid var(--line-soft); }
.sc-block h3 { margin: 0 0 4px; font-size: 16px; color: #fff; display: flex; align-items: center; gap: 9px; }
.sc-block-sub { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
.sc-block-warn { border-color: rgba(255, 176, 80, .4); background: rgba(255, 176, 80, .05); }
.sc-zahl { padding: 1px 9px; border-radius: 999px; font-size: 12px;
background: rgba(255, 176, 80, .18); color: #ffcf8d; }
/* Fortschritt: vier Schritte, der aktuelle hervorgehoben */
.sc-flow { display: flex; gap: 6px; list-style: none; margin: 14px 0; padding: 0; flex-wrap: wrap; }
.sc-flow li { display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
font-size: 12px; color: var(--muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-soft); }
.sc-flow li span { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
font-size: 10px; font-weight: 800; background: rgba(255, 255, 255, .08); }
.sc-flow li.fertig { color: #9ff5b5; border-color: rgba(80, 220, 130, .3); }
.sc-flow li.fertig span { background: rgba(80, 220, 130, .25); color: #062; }
.sc-flow li.jetzt { color: #fff; background: rgba(255, 80, 98, .16); border-color: rgba(255, 80, 98, .45); }
.sc-flow li.jetzt span { background: var(--red-hot, #ff5062); color: #2a0508; }
.sc-aktiv { border-color: rgba(255, 80, 98, .3); }
.sc-aktiv-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sc-aktiv-h h3 { margin: 0; font-size: 18px; }
.sc-kpis { display: flex; gap: 22px; flex-wrap: wrap; margin: 4px 0 10px; }
.sc-kpis span { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); }
.sc-kpis b { font-family: var(--font-display); font-size: 20px; color: #fff; }
.sc-fristen { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.sc-aktiv-f { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sc-subs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.sc-sub { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin-bottom: 6px;
border-radius: 11px; background: rgba(0, 0, 0, .2); border: 1px solid var(--line-soft); }
.sc-sub.sc-wartet { border-color: rgba(255, 176, 80, .38); background: rgba(255, 176, 80, .06); }
.sc-thumb-leer { display: grid; place-items: center; font-size: 17px; }
.sc-sub-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-sub-txt b { font-size: 13.5px; color: #fff; }
.sc-sub-txt small { font-size: 11.5px; color: var(--muted); }
.sc-sub-akt { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-b-warten, .sc-b-ok, .sc-b-nein {
padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; margin-left: 6px;
}
.sc-b-warten { color: #ffcf8d; background: rgba(255, 176, 80, .16); }
.sc-b-ok { color: #9ff5b5; background: rgba(80, 220, 130, .14); }
.sc-b-nein { color: #ffb3bd; background: rgba(255, 80, 98, .14); }
.az-mini-ok { color: #9ff5b5; border-color: rgba(80, 220, 130, .4); }
.sc-alt { display: flex; align-items: center; gap: 12px; padding: 8px 4px; }
@media (max-width: 700px) {
.sc-aktiv-h { flex-direction: column; align-items: flex-start; }
.sc-sub { flex-wrap: wrap; }
.sc-sub-akt { width: 100%; }
}
/* ---------- Skin Contest: Prüfansicht ---------- */
/* In der Freigabeliste ist das Bild groß genug, um es wirklich zu beurteilen —
darum geht es bei der Freigabe. Ein Klick öffnet es formatfüllend. */
.sc-thumb { flex: none; position: relative; width: 62px; height: 40px; padding: 0; cursor: pointer;
overflow: hidden; display: block; border-radius: 8px;
background: rgba(0, 0, 0, .4); border: 1px solid var(--line-soft); }
.sc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-thumb-gross { width: 200px; height: 124px; border-radius: 10px; }
.sc-thumb .sc-lupe {
position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px;
opacity: 0; background: rgba(0, 0, 0, .55); transition: opacity .15s ease;
}
.sc-thumb:hover .sc-lupe { opacity: 1; }
.sc-sub-gross { align-items: flex-start; padding: 12px; }
.sc-lupe-bg {
position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px;
background: rgba(4, 2, 4, .88); backdrop-filter: blur(6px);
}
.sc-lupe-box {
width: min(1000px, 100%); max-height: calc(100vh - 48px); overflow: auto;
display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 16px;
background: var(--panel-strong, #14101a); border: 1px solid var(--line-soft);
box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.sc-lupe-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sc-lupe-kopf b { display: block; font-size: 16px; color: #fff; }
.sc-lupe-kopf small { font-size: 12px; color: var(--muted); }
.sc-lupe-bild {
width: 100%; max-height: 62vh; object-fit: contain; border-radius: 12px;
background: rgba(0, 0, 0, .5); border: 1px solid var(--line-soft);
}
.sc-lupe-leer { padding: 60px; text-align: center; color: var(--muted); border-radius: 12px;
background: rgba(0, 0, 0, .35); border: 1px dashed var(--line-soft); }
.sc-lupe-code {
display: block; padding: 8px 10px; border-radius: 8px; font-size: 11px; word-break: break-all;
max-height: 70px; overflow: auto; background: rgba(0, 0, 0, .45); color: #9fd8ff;
border: 1px solid var(--line-soft);
}
.sc-lupe-akt { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 700px) {
.sc-thumb-gross { width: 100%; height: 160px; }
.sc-lupe-bg { padding: 10px; }
}
.sc-warn {
margin-bottom: 14px; padding: 11px 15px; border-radius: 11px; font-size: 13px;
color: #ffcf8d; background: rgba(255, 176, 80, .1); border: 1px solid rgba(255, 176, 80, .34);
}
.sc-alt .sc-sub-akt { margin-left: auto; }
/* ---------- Skin Contest: Bilder-Ablage ---------- */
.sc-mgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sc-mcard {
margin: 0; display: flex; flex-direction: column; border-radius: 13px; overflow: hidden;
background: rgba(0, 0, 0, .22); border: 1px solid var(--line-soft);
}
.sc-mimg {
position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; cursor: pointer;
background: rgba(0, 0, 0, .4); border: 0; overflow: hidden;
}
.sc-mimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-mimg .sc-lupe {
position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px;
opacity: 0; background: rgba(0, 0, 0, .5); transition: opacity .15s ease;
}
.sc-mimg:hover .sc-lupe { opacity: 1; }
.sc-mcard figcaption { padding: 11px 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.sc-mcard figcaption b { font-size: 13px; color: #fff; }
.sc-mcard figcaption small { font-size: 11.5px; color: var(--muted); }
.sc-mfoot { opacity: .75; }
.sc-mact { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 12px; margin-top: auto; }
.sc-mact .az-mini { text-decoration: none; }
.sc-gemerkt { color: #9ff5b5; border-color: rgba(80, 220, 130, .4); opacity: .8; }
/* Feste Fußzeile im Streamer-Dialog: die Knöpfe bleiben sichtbar, egal wie
lang das Formular wird. Der Inhalt darüber scrollt. */
.st-modal-foot {
flex: none; margin: 0; padding: 14px 22px;
border-top: 1px solid var(--line-soft);
background: var(--panel-strong);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.st-modal-card .az-modal-body { flex: 1 1 auto; min-height: 0; }
/* Social-Links im Streamer-Dialog */
.st-socials { margin: 6px 0 14px; padding: 14px 16px; border-radius: 12px;
background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); }
.st-socials-t { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 800;
letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.st-soc { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.st-soc .a-in { margin: 0; }
.st-soc-e { flex: 0 0 68px; text-align: center; }
.st-soc-p { flex: 0 0 150px; }
.st-soc-l { flex: 1 1 150px; min-width: 0; }
.st-soc-u { flex: 2 1 240px; min-width: 0; }
.st-soc-x { flex: none; }
@media (max-width: 760px) { .st-soc { flex-wrap: wrap; } .st-soc-l, .st-soc-u { flex: 1 1 100%; } }
/* ==================== Spielerkartei ==================== */
.pl-topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pl-server { display: flex; gap: 6px; margin-left: auto; }
.pl-sv { padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 700;
border: 1px solid var(--line-soft); color: var(--muted); }
.pl-sv.on { color: #fff; background: rgba(200, 163, 124,.16); border-color: rgba(200, 163, 124,.4); }
.pl-sv.is-soon { opacity: .4; }
.pl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 18px 0; }
.pl-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; text-align: left;
border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(0,0,0,.24);
font: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.pl-kpi:hover { border-color: rgba(255,80,98,.35); }
.pl-kpi.on { border-color: rgba(200, 163, 124,.55); background: rgba(200, 163, 124,.09); }
.pl-kpi b { font-family: var(--font-display); font-size: 22px; color: #fff; }
.pl-kpi small { font-size: 11px; color: var(--muted); }
.pl-kpi.warn b { color: #ffb3bd; }
.pl-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pl-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pl-search { flex: 1; min-width: 220px; max-width: 380px; }
.pl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-chip { padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600;
color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line-soft); cursor: pointer; }
.pl-chip:hover { color: var(--text); }
.pl-chip.on { color: #fff; background: rgba(200, 163, 124,.16); border-color: rgba(200, 163, 124,.42); }
/* Tabelle als Gitter: die Spalten bleiben untereinander bündig, ohne dass ein
die Zeilen unklickbar macht. */
.pl-table { display: grid; gap: 4px; }
.pl-head, .pl-row { display: grid; gap: 12px; align-items: center;
grid-template-columns: minmax(150px, 1.4fr) minmax(180px, 1.3fr) minmax(120px, .9fr) 80px 80px; }
.pl-head { padding: 0 12px 6px; font-size: 10.5px; text-transform: uppercase;
letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.pl-row { padding: 10px 12px; text-align: left; font: inherit; cursor: pointer;
border-radius: 11px; border: 1px solid var(--line-soft); background: rgba(0,0,0,.22);
transition: border-color .15s ease, background .15s ease; }
.pl-row:hover { border-color: rgba(255,80,98,.32); background: rgba(255,80,98,.05); }
.pl-rname { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-rname b { color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-alias { font-size: 11px; color: var(--muted); }
.pl-rids { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pl-id { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-id-none { opacity: .5; }
.pl-rmarks { display: flex; gap: 5px; flex-wrap: wrap; }
.pl-rcases, .pl-rlast { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-rcases small { display: block; font-size: 10px; opacity: .8; }
.pl-more { margin-top: 12px; font-size: 12px; color: var(--muted); }
.pl-mark { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.pl-m-ban { color: #ffb3bd; background: rgba(255,80,98,.16); border: 1px solid rgba(255,80,98,.38); }
.pl-m-u18 { color: #ffd08a; background: rgba(255,180,80,.13); border: 1px solid rgba(255,180,80,.34); }
.pl-m-watch { color: #9fd8ff; background: rgba(120,190,255,.12); border: 1px solid rgba(120,190,255,.32); }
.pl-m-admin { color: #b7f5c0; background: rgba(120,230,150,.1); border: 1px solid rgba(120,230,150,.3); }
/* ---- Detail ---- */
.pl-dhead { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.pl-dhead h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 24px; color: #fff; }
.pl-dids { display: flex; gap: 12px; flex-wrap: wrap; }
.pl-dmarks { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.pl-flags { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pl-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); cursor: pointer; }
.pl-check input { accent-color: var(--red-hot); width: 15px; height: 15px; }
.pl-box { padding: 14px 16px; margin-bottom: 14px; border-radius: 13px;
border: 1px solid var(--line-soft); background: rgba(0,0,0,.2); }
.pl-box h4 { margin: 0 0 10px; font-size: 13px; color: #fff; display: flex; align-items: baseline; gap: 8px; }
.pl-box h4 small { font-size: 11px; color: var(--muted); font-weight: 400; }
.pl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.pl-cols .pl-box { margin-bottom: 0; }
.pl-garage { display: flex; gap: 7px; flex-wrap: wrap; }
.pl-tok { display: inline-flex; flex-direction: column; padding: 6px 11px; border-radius: 9px;
background: rgba(255,255,255,.05); }
.pl-tok b { font-size: 12.5px; color: #fff; }
.pl-tok small { font-size: 10.5px; color: var(--muted); }
.pl-panelmeta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 11px;
font-size: 12px; color: var(--muted); }
.pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.pl-stat { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 9px;
background: rgba(255,255,255,.04); }
.pl-stat b { font-family: var(--font-display); font-size: 16px; color: #fff; }
.pl-stat small { font-size: 10.5px; color: var(--muted); }
.pl-new { padding: 16px; margin: 18px 0; border-radius: 13px;
border: 1px solid rgba(255,80,98,.24); background: rgba(255,80,98,.045); }
.pl-new h4 { margin: 0 0 12px; font-size: 14px; color: #fff; }
.pl-new-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pl-hint { font-size: 11.5px; color: var(--muted); margin: 8px 0; }
.pl-vh { margin: 22px 0 12px; font-size: 14px; color: #fff; display: flex; align-items: baseline; gap: 8px; }
.pl-vh small { font-size: 11px; color: var(--muted); font-weight: 400; }
/* Ein Fall: der farbige Streifen links zeigt die Art auf einen Blick, ohne
dass man die Beschriftung lesen muss. */
.pl-case { padding: 12px 14px; margin-bottom: 9px; border-radius: 12px;
border: 1px solid var(--line-soft); border-left-width: 3px; background: rgba(0,0,0,.22); }
.pl-case header { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.pl-case-t { font-size: 12.5px; font-weight: 700; color: #fff; }
.pl-case-d { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-sanc { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
color: #ffb3bd; background: rgba(255,80,98,.13); border: 1px solid rgba(255,80,98,.3); }
.pl-open { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800;
text-transform: uppercase; letter-spacing: .06em; color: #2a0508;
background: linear-gradient(180deg, var(--gold, #d7aa41), #b8862f); }
.pl-reason { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: #e7dcde; }
.pl-case footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
font-size: 11.5px; color: var(--muted); }
.pl-case footer b { color: #e7dcde; }
.pl-src { color: var(--cyan); text-decoration: none; }
.pl-src:hover { text-decoration: underline; }
.pl-del { margin-left: auto; padding: 3px 9px; font: inherit; font-size: 11px; cursor: pointer;
color: var(--muted); background: none; border: 1px solid var(--line-soft); border-radius: 7px; }
.pl-del:hover { color: #ffb3bd; border-color: rgba(255,80,98,.4); }
.pl-decided { margin-top: 9px; padding: 8px 11px; border-radius: 9px; font-size: 12px;
color: #e7dcde; background: rgba(255,255,255,.04); }
.pl-decide { display: flex; gap: 8px; margin-top: 10px; }
.pl-case.is-open { border-color: rgba(255,180,80,.4); background: rgba(255,180,80,.05); }
.pl-t-ban { border-left-color: #ff5062; }
.pl-t-warn { border-left-color: #ffb45a; }
.pl-t-watch { border-left-color: #78beff; }
.pl-t-u18 { border-left-color: #ffd08a; }
.pl-t-restore { border-left-color: #8fe388; }
.pl-t-note { border-left-color: rgba(255,255,255,.2); }
/* Auf dem Handy wird aus der Gittertabelle eine Kartenliste — fünf Spalten
nebeneinander sind auf 380 px nicht lesbar. */
@media (max-width: 860px) {
.pl-head { display: none; }
.pl-row { grid-template-columns: 1fr auto; row-gap: 6px; }
.pl-rids { grid-column: 1 / -1; flex-direction: row; gap: 10px; }
.pl-rmarks { grid-column: 1 / -1; }
.pl-rlast { text-align: right; }
.pl-new-row { grid-template-columns: 1fr; }
.pl-dmarks { margin-left: 0; }
.pl-server { margin-left: 0; width: 100%; }
}
/* Supportverlauf in der Spielerkartei */
.pl-ticket { padding: 10px 12px; margin-bottom: 7px; border-radius: 10px;
border: 1px solid var(--line-soft); background: rgba(0,0,0,.22); }
.pl-ticket:last-child { margin-bottom: 0; }
.pl-tk-h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pl-tk-n { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #fff; }
.pl-tk-cat { font-size: 11.5px; color: var(--cyan); }
.pl-tk-d { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-tk-st { padding: 2px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 800;
letter-spacing: .06em; text-transform: uppercase; }
.pl-ts-open { color: #ffd08a; background: rgba(255,180,80,.13); border: 1px solid rgba(255,180,80,.34); }
.pl-ts-claimed { color: #9fd8ff; background: rgba(120,190,255,.12); border: 1px solid rgba(120,190,255,.32); }
.pl-ts-closed { color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line-soft); }
.pl-tk-sub { margin-top: 5px; font-size: 13px; color: #e7dcde; }
.pl-tk-meta { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.pl-tk-meta b { color: #e7dcde; }
.pl-ticket .pl-src { display: inline-block; margin-top: 6px; font-size: 11.5px; }
/* Reiter der Skin-Contest-Verwaltung. Vorher lag alles auf einer Seite —
Freigaben, Runde, Ablage und Archiv untereinander. */
.sc-reiter { display: flex; gap: 7px; flex-wrap: wrap; margin: 4px 0 18px;
padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.sc-rb { display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700;
color: var(--muted); background: rgba(255,255,255,.04);
border: 1px solid var(--line-soft); cursor: pointer;
transition: color .15s ease, background .15s ease, border-color .15s ease; }
.sc-rb:hover { color: var(--text); }
.sc-rb.on { color: #fff; background: rgba(200, 163, 124,.16); border-color: rgba(200, 163, 124,.45); }
/* Zähler am Reiter: ein Blick genügt, um zu sehen, wo Arbeit liegt. */
.sc-rb-z { display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
font-size: 11px; font-weight: 800; color: var(--muted);
background: rgba(255,255,255,.07); }
.sc-rb.on .sc-rb-z { color: #fff; background: rgba(200, 163, 124,.3); }
/* Offene Freigaben sind die einzige Zahl, die drängt — deshalb Gold statt Grau. */
.sc-rb.warn .sc-rb-z { color: #2a0508; background: linear-gradient(180deg, var(--gold, #d7aa41), #b8862f); }
@media (max-width: 620px) {
.sc-reiter { gap: 5px; }
.sc-rb { flex: 1 1 auto; justify-content: center; padding: 9px 11px; font-size: 12px; }
}
/* Nur die Spielerliste scrollt. Die Höhe rechnet sich aus dem Fenster, damit
der Rest der Seite (Kopfzahlen, Suche, Filter) immer sichtbar bleibt —
`min` deckelt sie nach unten, sonst wäre die Liste auf einem kleinen Fenster
nur noch zwei Zeilen hoch. */
.pl-scroll {
display: grid; gap: 4px;
max-height: calc(100vh - 430px);
min-height: 240px;
overflow-y: auto;
/* Hält das Scrollen in der Liste, statt am Ende die ganze Seite mitzuziehen. */
overscroll-behavior: contain;
padding-right: 4px;
}
.pl-scroll::-webkit-scrollbar { width: 9px; }
.pl-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.03); border-radius: 999px; }
.pl-scroll::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.13); border-radius: 999px;
border: 2px solid transparent; background-clip: content-box;
}
.pl-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,80,98,.45); background-clip: content-box; }
.pl-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
/* Der Spaltenkopf klebt oben im Scrollbereich. Er braucht einen
deckenden Hintergrund, sonst scrollen die Zeilen sichtbar unter ihm durch. */
.pl-head {
position: sticky; top: 0; z-index: 2;
padding: 6px 12px; margin-bottom: 2px;
background: #150c10;
border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 860px) {
/* Auf dem Handy ist jede Zeile eine Karte und damit dreimal so hoch —
ein fester Deckel würde die Liste auf zwei Einträge zusammenstauchen. */
.pl-scroll { max-height: calc(100vh - 300px); min-height: 320px; }
}
/* ==================== Spieler auf dem Spielserver ==================== */
.gp-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.gp-search { flex: 1; min-width: 220px; max-width: 400px; }
.gp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.gp-chip { padding: 6px 13px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600;
color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line-soft); cursor: pointer; }
.gp-chip:hover { color: var(--text); }
.gp-chip.on { color: #fff; background: rgba(200, 163, 124,.16); border-color: rgba(200, 163, 124,.42); }
.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.gp-card { display: flex; flex-direction: column; gap: 7px; padding: 13px 15px; text-align: left;
font: inherit; cursor: pointer; border-radius: 13px; border: 1px solid var(--line-soft);
background: rgba(0,0,0,.24); transition: border-color .15s ease, background .15s ease; }
.gp-card:hover { border-color: rgba(255,80,98,.35); background: rgba(255,80,98,.05); }
.gp-c-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.gp-c-h b { font-size: 14.5px; color: #fff; }
.gp-c-sid { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gp-c-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gp-dino { font-size: 12.5px; color: var(--cyan); }
.gp-dino.gp-none { color: var(--muted); opacity: .7; }
.gp-pts { font-size: 12.5px; color: var(--gold, #d7aa41); font-variant-numeric: tabular-nums; }
.gp-mark { padding: 2px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 800;
letter-spacing: .05em; text-transform: uppercase; }
.gp-on { color: #b7f5c0; background: rgba(120,230,150,.12); border: 1px solid rgba(120,230,150,.32); }
.gp-ban { color: #ffb3bd; background: rgba(255,80,98,.15); border: 1px solid rgba(255,80,98,.38); }
.gp-adm { color: #9fd8ff; background: rgba(120,190,255,.12); border: 1px solid rgba(120,190,255,.32); }
.gp-pager { display: flex; align-items: center; justify-content: center; gap: 14px;
margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.gp-pager b { color: #fff; }
/* ---- Spielerkarte ---- */
/* Breiter als das Standardfenster (560 px) — Garage und Werte brauchen Platz.
`width` mit !important, weil .az-modal-card seine Breite selbst setzt. */
.gp-modal { width: min(980px, 100%) !important; max-height: 88vh; }
.gp-titel { font-family: var(--font-display); font-size: 16px; color: #fff; }
.gp-tabs { display: flex; gap: 6px; padding: 14px 18px 0; }
.gp-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px;
font: inherit; font-size: 13px; font-weight: 700; color: var(--muted);
background: rgba(255,255,255,.04); border: 1px solid var(--line-soft); cursor: pointer; }
.gp-tab.on { color: #fff; background: rgba(200, 163, 124,.16); border-color: rgba(200, 163, 124,.45); }
.gp-tab span { padding: 1px 7px; border-radius: 999px; font-size: 11px;
background: rgba(255,255,255,.09); }
.gp-kvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 18px; }
.gp-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
padding: 8px 12px; border-radius: 9px; background: rgba(255,255,255,.04); font-size: 12.5px; }
.gp-kv span { color: var(--muted); }
.gp-kv b { color: #fff; text-align: right; word-break: break-word; }
.gp-vitals { display: grid; gap: 8px; margin-bottom: 16px; }
.gp-vital { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 11px; font-size: 12.5px; }
.gp-v-l { color: var(--muted); }
.gp-v-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.gp-v-bar i { display: block; height: 100%; border-radius: 999px; background: #8fe388; }
.gp-vital.warn .gp-v-bar i { background: var(--gold, #d7aa41); }
.gp-vital.krit .gp-v-bar i { background: #ff5062; }
.gp-v-n { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.gp-notes { padding: 12px 14px; border-radius: 11px; background: rgba(255,255,255,.04); }
.gp-notes h5 { margin: 0 0 6px; font-size: 12px; color: var(--cyan); text-transform: uppercase; letter-spacing: .07em; }
.gp-notes p { margin: 0; font-size: 13px; color: #e7dcde; white-space: pre-wrap; }
/* ---- Garage ---- */
.gp-gcount { margin-bottom: 14px; font-size: 12.5px; color: var(--muted); }
.gp-art { margin-bottom: 18px; }
.gp-art h5 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 9px;
font-size: 13px; color: #fff; }
.gp-art h5 span { padding: 1px 8px; border-radius: 999px; font-size: 11px;
color: var(--muted); background: rgba(255,255,255,.07); }
.gp-dinos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 9px; }
.gp-dino { padding: 11px 13px; border-radius: 11px; border: 1px solid var(--line-soft);
background: rgba(0,0,0,.24); }
.gp-dino header { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 7px; }
.gp-dino header b { font-size: 13px; color: #fff; }
.gp-dt { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold, #d7aa41); }
.gp-dg { font-size: 13px; color: var(--muted); }
.gp-did { margin-left: auto; font-size: 10.5px; color: var(--muted); }
.gp-dgrow { margin-bottom: 7px; font-size: 12px; color: var(--muted); }
.gp-dgrow b { color: #fff; }
.gp-dstats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.gp-ds { font-size: 11px; padding: 2px 7px; border-radius: 7px;
color: #e7dcde; background: rgba(255,255,255,.05); font-variant-numeric: tabular-nums; }
.gp-ds.warn { color: var(--gold, #d7aa41); }
.gp-ds.krit { color: #ffb3bd; background: rgba(255,80,98,.1); }
/* Prime als Punktreihe: zehn Bedingungen als Zahl zu lesen dauert länger als
ein Blick auf die gefüllten Punkte. */
.gp-prime { display: flex; align-items: center; gap: 4px; margin-bottom: 7px; font-size: 11px; color: var(--muted); }
.gp-prime span:first-child { margin-right: 4px; }
.gp-prime b { margin-left: 5px; color: #e7dcde; }
.gp-pd { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.12); }
.gp-pd.on { background: var(--gold, #d7aa41); }
.gp-slots { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; margin-top: 5px; font-size: 10.5px; }
.gp-slots > span { color: var(--muted); min-width: 42px; }
.gp-slots em { font-style: normal; padding: 1px 7px; border-radius: 999px;
color: #9fd8ff; background: rgba(120,190,255,.1); border: 1px solid rgba(120,190,255,.25); }
@media (max-width: 620px) {
.gp-grid, .gp-dinos { grid-template-columns: 1fr; }
.gp-vital { grid-template-columns: 100px 1fr 46px; gap: 8px; }
.gp-tabs { padding: 0 14px 12px; }
}
/* ==================== Rechtevergabe ====================
Vorher eine flache Reihe gleich aussehender Zeilen mit einem Auswahlfeld am
rechten Bildschirmrand. Jetzt Gruppen mit Kopfzeile und Zähler, und je Zeile
drei Knöpfe direkt neben dem Namen. */
.tm-perms { display: grid; gap: 14px; }
.tm-gruppe { border-radius: 14px; border: 1px solid var(--line-soft);
background: rgba(0,0,0,.2); overflow: hidden; }
/* Eine Gruppe ohne einen einzigen vergebenen Punkt tritt zurück — so springen
die Bereiche ins Auge, in denen tatsächlich etwas erlaubt ist. */
.tm-gruppe.leer { opacity: .62; }
.tm-gruppe.leer:hover { opacity: 1; }
.tm-g-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 16px; background: rgba(255,255,255,.04);
border-bottom: 1px solid var(--line-soft); }
.tm-g-t { display: flex; flex-direction: column; gap: 2px;
font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #fff; }
.tm-g-z { font-family: var(--font-body, inherit); font-size: 11px; font-weight: 400;
color: var(--muted); letter-spacing: 0; text-transform: none; }
.tm-g-akt { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.tm-permrow { display: flex; align-items: center; gap: 14px;
padding: 9px 16px; border-top: 1px solid rgba(255,255,255,.035); }
.tm-permrow:first-of-type { border-top: none; }
.tm-permrow.hat { background: rgba(255,80,98,.045); }
.tm-permname { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
font-size: 13.5px; font-weight: 600; color: #f0eaea; }
.tm-permname small { font-size: 11.5px; font-weight: 400; }
/* Einrückung als Linie statt als Leerraum: bei reinem Abstand sah man auf
dunklem Grund nicht, was zu wem gehört. */
.tm-d1 .tm-permname { padding-left: 14px; border-left: 2px solid rgba(255,255,255,.09); }
.tm-d2 .tm-permname { padding-left: 30px; border-left: 2px solid rgba(255,80,98,.22); }
.tm-d0 .tm-permname { font-size: 14px; color: #fff; }
/* Drei Knöpfe statt Auswahlfeld. */
.tm-seg { flex: 0 0 auto; display: inline-flex; border-radius: 10px; overflow: hidden;
border: 1px solid var(--line-soft); background: rgba(0,0,0,.3); }
.tm-sb { padding: 6px 13px; font: inherit; font-size: 11.5px; font-weight: 700;
color: var(--muted); background: none; border: none; cursor: pointer; white-space: nowrap;
transition: color .12s ease, background .12s ease; }
.tm-sb + .tm-sb { border-left: 1px solid var(--line-soft); }
.tm-sb:hover { color: var(--text); background: rgba(255,255,255,.05); }
.tm-sb.on.tm-sb-no { color: #ece2d5; background: rgba(255,255,255,.1); }
.tm-sb.on.tm-sb-read { color: #0a1a22; background: linear-gradient(180deg, #7fd4f0, #4aa8c8); }
.tm-sb.on.tm-sb-write { color: #fff; background: linear-gradient(180deg, #c8a37c, #c8283a); }
.tm-quick { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
margin-bottom: 16px; padding: 11px 15px; border-radius: 12px;
border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); }
.tm-quick-l { font-size: 11px; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) {
.tm-permrow { flex-direction: column; align-items: stretch; gap: 8px; }
.tm-seg { width: 100%; }
.tm-sb { flex: 1; padding: 8px 6px; }
.tm-g-akt { margin-left: 0; width: 100%; }
.tm-g-akt .az-mini { flex: 1; }
.tm-d1 .tm-permname { padding-left: 10px; }
.tm-d2 .tm-permname { padding-left: 20px; }
}
/* ---- Spieler bearbeiten ---- */
.gp-edit h5 { margin: 18px 0 9px; font-size: 11.5px; text-transform: uppercase;
letter-spacing: .08em; color: var(--cyan); }
.gp-edit h5:first-child { margin-top: 0; }
.gp-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.gp-f { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.gp-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
/* Eigene Haken statt Browser-Kaestchen: Karten-Optik, klarer An-Zustand.
Die nativen Checkboxen sahen je nach System billig aus. */
.gp-check { display: flex; align-items: center; gap: 10px; font-size: 12.5px;
color: var(--text); cursor: pointer; padding: 10px 13px; border-radius: 10px;
background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
transition: border-color .12s, background .12s; user-select: none; }
.gp-check:hover { border-color: rgba(255,80,98,.35); }
.gp-check input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px;
margin: 0; flex: 0 0 auto; position: relative; cursor: pointer;
border-radius: 6px; border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.05); transition: background .12s, border-color .12s; }
.gp-check input:checked { background: var(--red-hot, #ff5062); border-color: var(--red-hot, #ff5062); }
.gp-check input:checked::after { content: ''; position: absolute; left: 5px; top: 2px;
width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gp-check:has(input:checked) { border-color: rgba(255,80,98,.45); background: rgba(255,80,98,.07); }
.gp-check input:disabled { opacity: .3; cursor: default; }
.gp-check:has(input:disabled) { opacity: .55; cursor: default; }
.gp-check small { color: var(--muted); font-size: 11px; margin-left: auto; white-space: nowrap; }
.gp-edit textarea { width: 100%; resize: vertical; }
.gp-edit-f { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px;
padding-top: 14px; border-top: 1px solid var(--line-soft); }
.gp-hint { font-size: 11.5px; color: var(--muted); }
/* Aktionen an der Dinokarte. Löschen ist rot und steht ganz rechts — es ist
die einzige Aktion, die nichts zurückholt. */
.gp-dakt { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px;
padding-top: 9px; border-top: 1px solid rgba(255,255,255,.06); }
.gp-dakt .az-mini { flex: 1; text-align: center; }
/* Rohantwort des Panels im Fehlerfall — bei 403 steht im JSON meist nur
„Forbidden"; erst Rolle, Rechte und Rumpf zeigen, woran es liegt. */
.gp-diag { margin: 10px 0; padding: 11px 13px; border-radius: 10px;
font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.6;
color: #e7dcde; background: rgba(0,0,0,.35); border: 1px solid var(--line-soft);
white-space: pre-wrap; word-break: break-word; }
/* ---- Zugriffs-Übersicht: nach Bereich zusammengefasst ----
Statt dreißig Einzelchips je Person eine Blase je Oberbereich mit „N von M".
Löst die Wand aus gleich aussehenden Pillen auf, die vorher über die volle
Breite lief. */
.tm-row { align-items: flex-start; }
.tm-hint { font-size: 11px; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.tm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.tm-chip {
display: inline-flex; align-items: baseline; gap: 6px;
font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 9px;
color: #e7dcde; background: rgba(255,255,255,.05); border: 1px solid var(--line-soft);
}
.tm-chip i { font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--muted); }
/* Voll vergebene Bereiche kräftiger — das ist die Angabe, die zählt. */
.tm-chip.voll.tm-chip-write { color: #fff; background: rgba(255,80,98,.16); border-color: rgba(255,80,98,.4); }
.tm-chip.voll.tm-chip-write i { color: #ffb3bd; }
.tm-chip-read { border-style: dashed; }
/* ---- Action-/Audit-Log ---- */
.gp-logs { display: grid; gap: 7px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.gp-log { padding: 10px 13px; border-radius: 11px; border: 1px solid var(--line-soft);
border-left: 3px solid rgba(120,190,255,.5); background: rgba(0,0,0,.22); }
.gp-log-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gp-log-t { font-size: 12px; font-weight: 700; color: #9fd8ff; }
.gp-log-w { font-size: 11.5px; color: var(--muted); }
.gp-log-w + .gp-log-w { color: #e7dcde; }
.gp-log-d { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gp-log-x { margin-top: 5px; font-size: 12.5px; line-height: 1.55; color: #e7dcde; word-break: break-word; }
.gp-tab-link { margin-left: auto; border-style: dashed; }
/* ==================== Dashboard ==================== */
.dsh-grp { margin-bottom: 22px; }
.dsh-grp h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px;
font-size: 14px; color: #fff; }
.dsh-grp h4 small { font-size: 11px; font-weight: 400; color: var(--muted); }
.dsh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.dsh-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; text-align: left;
font: inherit; cursor: pointer; border-radius: 13px; border: 1px solid var(--line-soft);
background: rgba(0,0,0,.24); transition: border-color .15s ease, background .15s ease; }
.dsh-kpi:hover { border-color: rgba(255,80,98,.35); background: rgba(255,80,98,.05); }
.dsh-kpi b { font-family: var(--font-display); font-size: 26px; color: #fff; }
.dsh-kpi small { font-size: 11px; color: var(--muted); }
/* Wartende Arbeit in Gold — das ist der Grund, morgens hier reinzuschauen. */
.dsh-kpi.warn b { color: var(--gold, #d7aa41); }
.dsh-kpi.warn { border-color: rgba(215,170,65,.35); }
.dsh-auds { display: grid; gap: 6px; margin-bottom: 10px; }
.dsh-aud { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
padding: 8px 12px; border-radius: 9px; background: rgba(255,255,255,.04); font-size: 12px; }
.dsh-aud b { color: #9fd8ff; }
.dsh-aud span { color: var(--muted); }
.dsh-aud em { font-style: normal; color: #e7dcde; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.dsh-aud time { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.dsh-kath { margin: 26px 0 12px; font-size: 14px; color: #fff; }
.dsh-kats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.dsh-kat { padding: 15px 17px; border-radius: 14px; border: 1px solid var(--line-soft);
background: rgba(0,0,0,.22); }
.dsh-kat h4 { margin: 0 0 5px; font-size: 13.5px; color: #fff; }
.dsh-kat p { margin: 0 0 11px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.dsh-kat-l { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
/* ==================== Umbau Stufe 1: kräftige Karten ====================
Überschreibt die erste Dashboard-Fassung (steht weiter oben in der Datei).
Richtung: deutliche Karten mit Akzenträndern und Symbolflächen, große
klickbare Flächen statt kleiner Textknöpfe — im Stil der Website. */
/* --- Kennzahl-Kacheln: Symbolfläche links, Zahl groß, Pfeil bei klickbaren --- */
.dsh-kpi {
flex-direction: row; align-items: center; gap: 14px;
padding: 16px 18px; text-align: left;
border: 1px solid var(--line-soft); border-left: 3px solid rgba(255,80,98,.4);
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)), rgba(0,0,0,.24);
box-shadow: 0 10px 26px -18px rgba(0,0,0,.9);
}
.dsh-kpi[disabled] { cursor: default; }
.dsh-kpi:not([disabled]):hover {
border-color: rgba(255,80,98,.45); border-left-color: var(--red-hot, #ff5062);
background: linear-gradient(180deg, rgba(255,80,98,.07), rgba(255,80,98,.02)), rgba(0,0,0,.24);
transform: translateY(-2px);
}
.dsh-kpi { transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.dsh-ico {
flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
display: flex; align-items: center; justify-content: center; font-size: 21px;
background: rgba(255,80,98,.09); border: 1px solid rgba(255,80,98,.2);
}
.dsh-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dsh-go { margin-left: auto; font-size: 16px; color: var(--muted); opacity: 0;
transform: translateX(-6px); transition: opacity .16s ease, transform .16s ease; }
.dsh-kpi:not([disabled]):hover .dsh-go { opacity: 1; transform: none; color: var(--red-hot, #ff5062); }
/* Wartende Arbeit: goldener Akzent an Zahl UND Rand */
.dsh-kpi.warn { border-left-color: var(--gold, #d7aa41); }
.dsh-kpi.warn .dsh-ico { background: rgba(215,170,65,.1); border-color: rgba(215,170,65,.3); }
/* --- Bereichs-Karten: Kopf mit Fläche, Links als volle Zeilen --- */
.dsh-kat {
padding: 0; overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)), rgba(0,0,0,.22);
box-shadow: 0 10px 26px -18px rgba(0,0,0,.9);
transition: border-color .16s ease, transform .16s ease;
}
.dsh-kat:hover { border-color: rgba(255,80,98,.3); transform: translateY(-2px); }
.dsh-kat h4 { margin: 0; padding: 15px 17px 4px; font-size: 14px; }
.dsh-kat p { margin: 0; padding: 0 17px 12px; }
.dsh-kat-l { display: flex; flex-direction: column; gap: 0; align-items: stretch;
border-top: 1px solid rgba(255,255,255,.05); }
/* Ein Link = eine volle, klickbare Zeile. Kleine Pillen-Knöpfe gingen auf den
Karten unter — man wusste nicht, was klickbar ist. */
.dsh-link {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; padding: 11px 17px; font: inherit; font-size: 13px; font-weight: 600;
color: #e7dcde; background: none; border: none; cursor: pointer; text-align: left;
border-top: 1px solid rgba(255,255,255,.04);
transition: background .14s ease, color .14s ease, padding-left .14s ease;
}
.dsh-link:first-child { border-top: none; }
.dsh-link i { font-style: normal; color: var(--muted); transition: transform .14s ease, color .14s ease; }
.dsh-link:hover { background: rgba(255,80,98,.08); color: #fff; padding-left: 21px; }
.dsh-link:hover i { color: var(--red-hot, #ff5062); transform: translateX(3px); }
/* --- Zentrale Einstellungsseite --- */
.set-grp { margin-bottom: 24px; }
.set-grp h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px;
font-size: 14px; color: #fff; }
.set-grp h4 small { font-size: 11px; font-weight: 400; color: var(--muted); }
.set-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.set-e {
display: flex; align-items: center; gap: 13px; padding: 13px 15px; text-align: left;
font: inherit; cursor: pointer; border-radius: 13px;
border: 1px solid var(--line-soft); border-left: 3px solid rgba(255,80,98,.35);
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)), rgba(0,0,0,.24);
transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.set-e:hover { border-color: rgba(255,80,98,.45); transform: translateY(-2px);
background: linear-gradient(180deg, rgba(255,80,98,.07), rgba(255,80,98,.02)), rgba(0,0,0,.24); }
.set-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
display: flex; align-items: center; justify-content: center; font-size: 19px;
background: rgba(255,80,98,.09); border: 1px solid rgba(255,80,98,.2); }
.set-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-tx b { font-size: 13.5px; color: #fff; }
.set-tx small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.set-go { margin-left: auto; color: var(--muted); opacity: 0; transform: translateX(-6px);
transition: opacity .16s ease, transform .16s ease; }
.set-e:hover .set-go { opacity: 1; transform: none; color: var(--red-hot, #ff5062); }
@media (max-width: 620px) {
.set-liste { grid-template-columns: 1fr; }
.dsh-kpis { grid-template-columns: 1fr 1fr; }
}
/* ==================== Icon-Leiste ====================
Die Seitenleiste ist standardmäßig 68 px schmal und zeigt nur Symbole.
Beim Zeigen fährt sie ÜBER den Inhalt aus (der Inhalt springt nicht),
der Pin unten hält sie dauerhaft offen. */
.ash { grid-template-columns: 68px minmax(0, 1fr); }
.ash-side {
position: sticky; top: 0; height: 100vh; overflow: hidden;
width: 68px; padding: 14px 10px; z-index: 50;
transition: width .18s ease, box-shadow .18s ease;
}
.ash-side:hover, body.nav-offen .ash-side {
width: 252px;
box-shadow: 24px 0 60px -30px rgba(0,0,0,.9);
}
/* Beim Ausfahren überlagert die Leiste den Inhalt statt ihn zu verschieben. */
.ash-side:hover { position: fixed; }
body.nav-offen .ash { grid-template-columns: 252px minmax(0, 1fr); }
body.nav-offen .ash-side { position: sticky; }
/* Texte blenden erst ein, wenn Platz da ist — sonst quetschen sie sich. */
.ash-brand span, .ash-nav-t, .ash-nav-cap, .ash-user-n {
opacity: 0; white-space: nowrap; transition: opacity .14s ease .06s;
}
.ash-side:hover .ash-brand span, body.nav-offen .ash-brand span,
.ash-side:hover .ash-nav-t, body.nav-offen .ash-nav-t,
.ash-side:hover .ash-nav-cap, body.nav-offen .ash-nav-cap,
.ash-side:hover .ash-user-n, body.nav-offen .ash-user-n { opacity: 1; }
/* Hoehe muss Padding (14+5) PLUS Schriftzeile fassen — mit 26px blieben
7px fuer den Text und die Gruppentitel waren halb abgeschnitten. */
.ash-nav-cap { height: 33px; overflow: hidden; }
.ash-nav-i { padding: 10px 12px; }
.ash-nav-ico { width: 24px; font-size: 17px; }
.ash-brand { padding: 4px 4px 14px; }
.ash-brand img { width: 36px; height: 36px; }
.ash-user { margin-top: auto; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.ash-pin {
position: absolute; right: 10px; bottom: 12px;
width: 30px; height: 30px; border-radius: 9px; font-size: 13px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.05); border: 1px solid var(--line-soft);
cursor: pointer; opacity: 0; transition: opacity .14s ease;
}
.ash-side:hover .ash-pin, body.nav-offen .ash-pin { opacity: 1; }
.ash-pin.on { background: rgba(200, 163, 124,.16); border-color: rgba(200, 163, 124,.45); }
@media (max-width: 860px) {
/* Auf dem Handy bleibt die volle Leiste — Hover gibt es dort nicht. */
.ash { grid-template-columns: 1fr; }
.ash-side { position: static; width: auto; height: auto; overflow: visible; }
.ash-brand span, .ash-nav-t, .ash-nav-cap, .ash-user-n { opacity: 1; }
.ash-pin { display: none; }
}
/* ==================== Dashboard: zwei Spalten + Listen ==================== */
.dsh-kopf { margin-bottom: 20px; }
.dsh-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
.dsh-col { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.dsh-col .dsh-grp { margin-bottom: 0; }
@media (max-width: 1020px) { .dsh-cols { grid-template-columns: 1fr; } }
/* Vorgangs-/Fall-Zeilen: volle klickbare Zeilen mit Symbol */
.dsh-vs { display: grid; gap: 6px; max-height: 380px; overflow-y: auto; padding-right: 4px; }
.dsh-v {
display: flex; align-items: center; gap: 11px; width: 100%;
padding: 9px 12px; text-align: left; font: inherit; cursor: pointer;
border-radius: 11px; border: 1px solid var(--line-soft);
background: rgba(0,0,0,.22);
transition: border-color .14s ease, background .14s ease;
}
.dsh-v:hover { border-color: rgba(255,80,98,.4); background: rgba(255,80,98,.06); }
.dsh-v-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; font-size: 15px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.05); }
.dsh-v-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dsh-v-tx b { font-size: 13px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-v-tx b small { font-weight: 400; color: var(--muted); }
.dsh-v-tx small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-v i { margin-left: auto; font-style: normal; color: var(--muted); opacity: 0;
transform: translateX(-5px); transition: opacity .14s ease, transform .14s ease; }
.dsh-v:hover i { opacity: 1; transform: none; color: var(--red-hot, #ff5062); }
.dsh-sanc { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px;
border-radius: 999px; color: #ffb3bd; background: rgba(255,80,98,.13);
border: 1px solid rgba(255,80,98,.3); margin-left: 5px; }
.dsh-leer { padding: 14px; font-size: 12.5px; color: var(--muted);
border: 1px dashed var(--line-soft); border-radius: 11px; }
.dsh-mehr { margin-top: 9px; padding: 8px 13px; width: 100%; font: inherit; font-size: 12.5px;
font-weight: 600; color: var(--cyan); background: rgba(255,80,98,.05);
border: 1px solid var(--line-soft); border-radius: 10px; cursor: pointer; }
.dsh-mehr:hover { background: rgba(255,80,98,.12); }
/* Live-Feed: kompakte Zeilen, englische Spans aus dem Feed-HTML ausblenden */
.dsh-feed { display: grid; gap: 4px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.dsh-f { display: flex; align-items: baseline; gap: 9px; padding: 6px 10px;
border-radius: 9px; background: rgba(255,255,255,.03); font-size: 12px; }
.dsh-f-i { flex: 0 0 auto; }
.dsh-f-t { min-width: 0; flex: 1; color: #d9cfd2; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.dsh-f-t b { color: #fff; }
.dsh-f-t .en { display: none; }
.dsh-f time { flex: 0 0 auto; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Bereiche unten: vier kompakte Karten */
.dsh-kats { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Support-Modus am TempVoice-Hub */
.tv-sup { margin: 14px 0; padding: 12px 14px; border-radius: 12px;
border: 1px solid rgba(255,80,98,.28); background: rgba(255,80,98,.05); }
.tv-sup > b { font-size: 13px; color: #fff; }
.tv-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 4px; margin-top: 9px; max-height: 180px; overflow-y: auto; }
.tv-rolecheck { font-size: 12px; }
/* ---- Icon-Leiste: Nachbesserung ----
Der Grundstil gibt der Leiste einen halbtransparenten Hintergrund. In der
Spalte faellt das nicht auf — faehrt sie aber ueber den Inhalt aus,
scheinen die Karten durch und alles wirkt kaputt. Deshalb: deckend. */
.ash-side {
background: linear-gradient(180deg, #17090d, #0d0609);
backdrop-filter: none;
}
.ash-side:hover, body.nav-offen .ash-side {
border-right-color: rgba(255,80,98,.25);
box-shadow: 30px 0 70px -25px rgba(0,0,0,.95);
}
/* Navigation scrollt bei Platznot selbst — die Leiste bleibt geschlossen,
damit unten Nutzerzeile und Pin nie aus dem Bild rutschen. */
.ash-nav { overflow-y: auto; overflow-x: hidden; min-height: 0; }
.ash-nav::-webkit-scrollbar { width: 0; }
/* Nutzerzeile: fester Platz rechts fuer den Pin, Name mit Ellipse —
vorher schob sich der Abmelden-Knopf unter den Pin. */
.ash-user {
flex: none; padding: 10px 44px 4px 8px;
border-top: 1px solid rgba(255,255,255,.06);
}
.ash-user-n {
flex: 1; min-width: 0; font-size: 12px; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ash-out { flex: none; }
/* Eingeklappt verschwindet die Nutzerzeile ganz — auf 68 px hat sie keinen
sinnvollen Platz, der Pin reicht als unterstes Element. */
.ash-side:not(:hover) .ash-user { opacity: 0; pointer-events: none; }
body.nav-offen .ash-side .ash-user { opacity: 1; pointer-events: auto; }
.ash-pin { bottom: 14px; }
/* ---- Flacker-Fix der Icon-Leiste ----
Der Hover wechselte die Leiste von sticky auf fixed. Der Positionswechsel
veraendert mitten in der Bewegung die Trefferflaeche unter dem Mauszeiger:
Hover geht verloren -> Leiste klappt zu -> Hover greift wieder -> auf und
zu im Wechsel. Jetzt bleibt sie IMMER sticky und waechst nur in der Breite
ueber ihre 68-px-Spalte hinaus — sie ueberlagert den Inhalt genauso, aber
ohne Positionswechsel und damit ohne Flackern. */
.ash-side, .ash-side:hover { position: sticky; }
.ash-side { will-change: width; }
/* Die Nutzerzeile blendete per opacity um und liess die Leiste unten offen
wirken; sie faehrt jetzt einfach mit dem Overflow mit. */
.ash-side:not(:hover) .ash-user { opacity: 1; pointer-events: auto; }
/* ---- Handbuch: Startseite als Inhaltsverzeichnis ---- */
.hbr-toc { text-align: left; max-width: none; }
.hbr-toc h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px;
font-family: var(--font-display); font-size: 22px; color: #fff; }
.hbr-toc h2 small { font-size: 12px; font-weight: 400; color: var(--muted); }
.hbr-toc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px; align-items: start; }
.hbr-toc-col { display: flex; flex-direction: column; gap: 2px;
padding: 13px 14px; border-radius: 13px;
border: 1px solid var(--line-soft); border-top: 3px solid rgba(255,80,98,.4);
background: rgba(0,0,0,.22); }
.hbr-toc-h { display: flex; align-items: center; gap: 9px; padding: 4px 6px 10px;
font: inherit; font-size: 14.5px; cursor: pointer; text-align: left;
background: none; border: none; border-bottom: 1px solid rgba(255,255,255,.06);
margin-bottom: 6px; }
.hbr-toc-h b { color: #fff; }
.hbr-toc-h:hover b { color: var(--red-hot, #ff5062); }
.hbr-toc-t { padding: 7px 6px 2px; font: inherit; font-size: 10.5px; font-weight: 800;
letter-spacing: .09em; text-transform: uppercase; color: var(--cyan);
background: none; border: none; text-align: left; cursor: pointer; }
.hbr-toc-e { padding: 5px 8px; font: inherit; font-size: 13px; color: #d9cfd2;
background: none; border: none; border-radius: 7px; text-align: left; cursor: pointer;
transition: background .12s ease, color .12s ease, padding-left .12s ease; }
.hbr-toc-e:hover { background: rgba(255,80,98,.08); color: #fff; padding-left: 12px; }
.hbr-toc-e.hbr-off { opacity: .45; }
/* ---- Streamtools: Zeilen statt Karten ---- */
.st-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 14px; }
.st-search { flex: 1; min-width: 200px; max-width: 340px; }
.st-zeilen { display: grid; gap: 6px; }
.st-row {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 14px; border-radius: 12px;
border: 1px solid var(--line-soft); background: rgba(0,0,0,.22);
transition: border-color .14s ease, background .14s ease;
}
.st-row:hover { border-color: rgba(255,80,98,.32); }
.st-row.st-aus { opacity: .55; }
.st-r-status { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
background: rgba(255,255,255,.18); }
.st-r-status.an { background: #6fe08a; box-shadow: 0 0 8px rgba(111,224,138,.6); }
.st-r-name { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-r-name strong { font-size: 14px; color: #fff; }
.st-r-meta { flex: 0 0 auto; font-size: 11.5px; color: var(--muted);
font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-r-akt { flex: 0 0 auto; display: flex; gap: 5px; margin-left: auto; }
.st-r-akt .az-mini { padding: 5px 9px; }
.st-r-inv { flex-basis: 100%; padding-left: 21px; }
@media (max-width: 760px) {
.st-r-akt { margin-left: 0; width: 100%; }
.st-r-akt .az-mini:first-child { flex: 1; }
}
/* Symbolknöpfe der Streamer-Zeile: feste Größe, SVG statt Emoji — Emojis
rendern je System verschieden groß und machten die Leiste unruhig. */
.st-r-akt { align-items: stretch; }
.st-r-akt .az-mini { display: inline-flex; align-items: center; justify-content: center; }
.st-ib { width: 34px; padding: 5px 0 !important; }
.st-ib svg { width: 15px; height: 15px; display: block; }
.st-ib-tt { color: #ff5f7a; }
.st-ib-tw { color: #b98cff; }
.st-ib-tt:hover { border-color: rgba(255,95,122,.5); background: rgba(255,95,122,.1); }
.st-ib-tw:hover { border-color: rgba(185,140,255,.5); background: rgba(185,140,255,.1); }
.st-ib-del { color: var(--muted); }
.st-ib-del:hover { color: #ffb3bd; border-color: rgba(255,80,98,.45); background: rgba(255,80,98,.1); }
/* Meta rückt an die Aktionen heran statt in der Mitte zu schweben */
.st-r-meta { margin-left: auto; }
.st-r-akt { margin-left: 0; }
/* Kartei-Sprung im Ticket-Detail */
.tk-kartei { font: inherit; font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
color: var(--cyan); background: rgba(255,80,98,.06); border: 1px solid var(--line-soft); cursor: pointer; }
.tk-kartei:hover { background: rgba(255,80,98,.14); color: #fff; }
/* ---- Moderations-Reiter der Spielerkarte ---- */
.gp-modstat { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.gp-box { padding: 13px 15px; margin-bottom: 12px; border-radius: 12px;
border: 1px solid var(--line-soft); background: rgba(0,0,0,.2); }
.gp-box h5 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase;
letter-spacing: .07em; color: var(--cyan); }
.gp-banrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.gp-bandauer { width: 90px; }
.gp-banein { width: 130px; }
.gp-modakt { display: flex; gap: 8px; flex-wrap: wrap; }
.a-danger { background: linear-gradient(180deg, #ff5062, #c8283a); color: #fff; border-color: rgba(255,80,98,.6); }
/* Moderationsblock in der Kartei */
.pl-modbox { border-color: rgba(255,80,98,.3); background: rgba(255,80,98,.04); }
.pl-modbox h4 { display: flex; align-items: center; gap: 9px; }
/* ---- Server 1: Verwaltung im Einstellungs-Look + neue Spielerkarten ---- */
.ny-toc { margin-top: 6px; }
.ny-zurueck { margin-bottom: 14px; }
.gp-card { gap: 8px; padding: 13px 15px; border-left: 3px solid rgba(255,255,255,.08); }
.gp-card:hover { border-left-color: var(--red-hot, #ff5062); }
.gp-card-ban { border-left-color: rgba(255,80,98,.55); }
.gp-c-h { gap: 8px; }
.gp-c-sid { font-size: 10.5px; opacity: .8; }
.gp-c-f { margin-top: 2px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.05); }
/* Der Dino ist Auskunft, kein Knopf: neutraler Chip statt Warnrahmen. */
.gp-dchip { font-size: 12px; color: #e7dcde; padding: 3px 9px; border-radius: 8px;
background: rgba(255,255,255,.05); }
.gp-dchip.gp-none { color: var(--muted); background: none; padding-left: 0; }
.gp-pts { font-weight: 700; }
/* ---- Kartei über beide Server ---- */
.pl-sv { cursor: pointer; font: inherit; }
.pl-m-srv1 { color: #9fd8ff; background: rgba(120,190,255,.1); border: 1px solid rgba(120,190,255,.3); }
.pl-m-srv2 { color: #c9f0a8; background: rgba(150,220,120,.1); border: 1px solid rgba(150,220,120,.3); }
/* Geschwister-Banner: der andere Server meldet sich zuerst. */
.pl-gesch { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 10px;
padding: 11px 15px; font: inherit; font-size: 13px; text-align: left; cursor: pointer;
color: #e7dcde; border-radius: 12px; border: 1px solid var(--line-soft);
background: rgba(255,255,255,.04); transition: border-color .14s ease; }
.pl-gesch:hover { border-color: rgba(255,80,98,.4); }
.pl-gesch-ban { color: #ffd0d6; font-weight: 700; border-color: rgba(255,80,98,.5);
background: rgba(255,80,98,.12); }
/* Custom-Flächen Server 1 */
.nyc-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.nyc-kopf h3 { margin: 0; font-size: 16px; color: #fff; }
.nyc-srv { display: flex; align-items: center; gap: 12px; padding: 12px 15px; margin-bottom: 8px;
border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(0,0,0,.24); }
.nyc-srv-n { display: flex; flex-direction: column; gap: 1px; }
.nyc-srv-n b { font-size: 14px; color: #fff; }
.nyc-srv-n small { font-size: 11px; color: var(--muted); }
.nyc-srv-akt { margin-left: auto; display: flex; gap: 6px; }
.nyc-aus { opacity: .55; }
.az-mini-ok { color: #b7f5c0; border-color: rgba(120,230,150,.4); }
/* ---- Kartei-Detail: zwei Spalten ---- */
.pl-dcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 18px; align-items: start; }
.pl-dcol { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pl-dcol .pl-box, .pl-dcol .pl-new { margin: 0; }
.pl-dcol .pl-vh { margin: 8px 0 2px; }
/* Verlauf scrollt in der Spalte, statt die Seite endlos zu machen. */
.pl-vscroll { max-height: 60vh; overflow-y: auto; padding-right: 4px; display: flex;
flex-direction: column; gap: 9px; overscroll-behavior: contain; }
.pl-vscroll .pl-case { margin-bottom: 0; }
/* Statistik-Kacheln in der schmalen Spalte: drei nebeneinander reichen. */
.pl-dcol .pl-stats { grid-template-columns: repeat(3, 1fr); }
/* Moderationsblock kompakter in der Spalte */
.pl-dcol .pl-modbox .gp-banrow { gap: 7px; }
.pl-dcol .pl-modbox .gp-bandauer { width: 74px; }
.pl-dcol .pl-modbox .gp-banein { width: 110px; }
/* Unter 1500 px reichen zwei Spalten — die Spieler-Spalte rutscht nach unten
und darf dann die volle Breite nutzen. */
@media (max-width: 1500px) {
.pl-dcols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pl-dcols > .pl-dcol:nth-child(3) { grid-column: 1 / -1; }
.pl-dcols > .pl-dcol:nth-child(3) .pl-stats { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 1020px) {
.pl-dcols { grid-template-columns: 1fr; }
.pl-dcols > .pl-dcol:nth-child(3) .pl-stats { grid-template-columns: repeat(3, 1fr); }
.pl-vscroll { max-height: none; overflow: visible; }
}
/* ---- Spielerkarte: Werte v2 + lesbares Action-Log ---- */
.gp-wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
@media (max-width: 700px) { .gp-wgrid { grid-template-columns: 1fr; } }
.gp-box h5 { margin: 0 0 8px; font-size: 11.5px; text-transform: uppercase;
letter-spacing: .07em; color: var(--cyan); }
.gp-freis { display: flex; gap: 6px; flex-wrap: wrap; }
.gp-frei { font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line-soft); }
.gp-frei.an { color: #b7f5c0; border-color: rgba(120,230,150,.35); background: rgba(120,230,150,.07); }
.gp-pkt { margin-left: 8px; padding: 2px 8px !important; font-size: 10.5px !important; }
.gp-akte-z { font-size: 13px; color: #e7dcde; }
.gp-akte-z b { color: #fff; }
/* Log-Chips + aufklappbare Rohdaten */
.gp-lchip { display: inline-flex; align-items: baseline; gap: 5px; margin: 2px 4px 2px 0;
font-size: 11.5px; padding: 2px 8px; border-radius: 7px;
color: #e7dcde; background: rgba(255,255,255,.05); }
.gp-lchip i { font-style: normal; font-size: 10px; color: var(--muted); }
.gp-roh { margin-top: 6px; }
.gp-roh summary { font-size: 10.5px; color: var(--muted); cursor: pointer; }
.gp-roh pre { margin: 6px 0 0; padding: 9px 11px; border-radius: 8px; font-size: 10.5px;
line-height: 1.5; color: #d9cfd2; background: rgba(0,0,0,.4);
max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
/* ---------- Server 1 · Spielerliste als Arbeitszeilen ---------- */
.gp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 2px 0 14px; flex-wrap: wrap; }
.gp-h { margin: 0; font-size: 17px; color: #fff; display: flex; align-items: center; gap: 8px; }
.gp-count { font-size: 12px; font-weight: 700; color: var(--muted); background: rgba(255,255,255,.06); border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px 10px; font-variant-numeric: tabular-nums; }
.gp-sub { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.gp-rows { display: flex; flex-direction: column; gap: 5px; }
.gp-row { display: grid; grid-template-columns: 10px minmax(160px, 1.4fr) minmax(110px, 1fr) 105px 165px 16px;
align-items: center; gap: 12px; width: 100%; padding: 10px 14px; text-align: left; font: inherit; cursor: pointer;
color: var(--text); background: rgba(255,255,255,.025); border: 1px solid var(--line-soft);
border-left: 3px solid rgba(255,255,255,.08); border-radius: 10px;
transition: background .12s, border-color .12s; }
.gp-row:hover { background: rgba(255,80,98,.05); border-color: rgba(255,80,98,.3); border-left-color: var(--red-hot, #ff5062); }
.gp-row-ban { border-left-color: rgba(255,80,98,.55); background: rgba(255,80,98,.03); }
.gp-r-name { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap; }
.gp-r-name b { font-size: 13.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.gp-r-dc { font-size: 11px; opacity: .7; cursor: help; }
.gp-r-dino { font-size: 12.5px; color: #e7dcde; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-r-dino i { color: var(--muted); font-style: normal; opacity: .55; }
.gp-r-pts { font-size: 12.5px; font-weight: 700; color: var(--gold, #d7aa41); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.gp-r-sid { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; text-align: right; white-space: nowrap; opacity: .75; }
.gp-r-go { color: var(--muted); font-size: 16px; line-height: 1; opacity: .5; text-align: right; }
.gp-row:hover .gp-r-go { opacity: 1; color: var(--red-hot, #ff5062); }
@media (max-width: 820px) {
.gp-row { grid-template-columns: 10px 1fr auto; grid-auto-rows: auto; row-gap: 4px; }
.gp-r-name { grid-column: 2; }
.gp-r-pts { grid-column: 3; grid-row: 1; }
.gp-r-dino { grid-column: 2; grid-row: 2; }
.gp-r-sid { grid-column: 3; grid-row: 2; text-align: right; }
.gp-r-go { display: none; }
}
/* ---------- Server 1 · Fenster-Portal, Innen-Scroll, Mobile ---------- */
/* backdrop-filter macht .a-card zum Bezugsrahmen fuer position:fixed —
Fenster zentrierten sich dadurch in der ellenlangen Karte statt im
Sichtfeld. In der Schale ist die Karte transparent (Filter wirkungslos);
die getoente #gameArea-Karte bekommt statt des Blurs eine etwas
dichtere Toenung, damit der Hintergrund nicht scharf durchscheint. */
.ash-main .a-card, .ash-main .a-card-wide,
#gameArea .a-card, #gameArea .a-card-wide { backdrop-filter: none; }
#gameArea .a-card, #gameArea .a-card-wide { background: rgba(0, 0, 0, .45); }
body.gp-offen { overflow: hidden; }
.gp-scroll { overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.gp-scroll::-webkit-scrollbar { width: 8px; }
.gp-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); border-radius: 999px; }
.gp-scroll::-webkit-scrollbar-track { background: transparent; }
.gp-rows.gp-scroll { padding-right: 4px; }
.gp-pager { margin-top: 12px; }
/* Fenster-Kopf: Status + Name + Marken, darunter Steam-ID, Dino, Punkte */
.gp-mhead { gap: 12px; }
.gp-mh { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gp-mh-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.gp-mh-sub { flex-basis: 100%; font-size: 11.5px; color: var(--muted);
font-variant-numeric: tabular-nums; font-family: var(--font-ui); }
.gp-modal .gp-tabs { padding: 12px 18px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.gp-modal .az-modal-body { flex: 1 1 auto; min-height: 0; }
/* Mobile: Fenster als Bottom-Sheet, Reiter und Filter wischbar */
@media (max-width: 740px) {
/* Nur das Spielerkarten-Fenster wird zum Bottom-Sheet — die az-modal-
Dialoge der anderen Module (Tickets, TempVoice, Accounts, Streamer)
bleiben zentriert. */
#gpModal.az-modal { padding: 0; align-items: flex-end; }
.gp-modal { width: 100% !important; max-height: 96dvh; border-radius: 18px 18px 0 0; }
.gp-modal .gp-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 10px 12px;
scrollbar-width: none; }
.gp-modal .gp-tabs::-webkit-scrollbar { display: none; }
.gp-modal .gp-tab { flex: none; }
.gp-tab-link { margin-left: 0; }
.gp-modal .az-modal-body { padding: 14px; }
.gp-mhead { padding: 13px 14px; }
#gameArea .a-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#gameArea .a-tabs::-webkit-scrollbar { display: none; }
#gameArea .a-tab { flex: none; }
.gp-search { width: 100%; flex: 1 1 100%; }
.gp-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px;
scrollbar-width: none; }
.gp-chips::-webkit-scrollbar { display: none; }
.gp-chip { flex: none; }
.gp-head { align-items: center; }
}
/* ---------- Statistiken (Seitenaufrufe) ---------- */
.stx-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0 18px; }
.stx-k { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 12px;
background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); }
.stx-k-t { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.stx-k b { font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
.stx-k small { font-size: 11.5px; color: var(--muted); }
.stx-chart { margin: 0 0 16px; }
.stx-chart h4 { margin: 0 0 8px; font-size: 13px; color: var(--text); }
.stx-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 6px 8px;
border-radius: 10px; background: rgba(255,255,255,.025); border: 1px solid var(--line-soft); }
.stx-bars .stx-bar { flex: 1 1 0; min-width: 3px; border-radius: 3px 3px 0 0;
background: linear-gradient(180deg, rgba(255,80,98,.85), rgba(255,80,98,.35)); }
.stx-bars .stx-bar:hover { background: #ff5062; }
.stx-chart + .stx-chart .stx-bars { height: 64px; }
.stx-achse { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.stx-achse-alle { justify-content: space-around; }
.stx-bars.stx-breit { gap: 8px; padding: 6px 12px; }
.stx-sichten { display: flex; gap: 6px; margin: 4px 0 12px; flex-wrap: wrap; }
.stx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.stx-box { padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); }
.stx-box h4 { margin: 0 0 10px; font-size: 13px; }
.stx-seite { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr 60px; align-items: center;
gap: 10px; padding: 4px 0; font-size: 12.5px; }
.stx-s-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stx-s-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.stx-s-bar i { display: block; height: 100%; border-radius: 999px; background: rgba(255,80,98,.7); }
.stx-s-v { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.stx-pitch .stx-p-z { padding: 5px 0; font-size: 13px; color: var(--muted); }
.stx-pitch .stx-p-z b { color: var(--gold, #d7aa41); font-size: 15px; margin-right: 6px; font-variant-numeric: tabular-nums; }
/* ---------- Server 1 · Custom-Masken (Preise/Limits/Spawns) ---------- */
.nyc-suche { flex: 1 1 180px; max-width: 260px; }
.nyc-preise input.nyc-num { width: 92px; padding: 6px 8px; font-size: 12.5px; }
.nyc-preise td, .nyc-preise th { white-space: nowrap; }
.nyc-limits { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 10px; }
.nyc-limit { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px;
font-size: 12.5px; background: rgba(255,255,255,.05); border: 1px solid var(--line-soft); }
.nyc-limit b { color: #fff; }
.nyc-limit-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 2px; }
.nyc-limit-x:hover { color: var(--red-hot, #ff5062); }
.nyc-limit-neu { display: flex; gap: 8px; flex-wrap: wrap; }
.nyc-limit-neu .a-in { flex: 1 1 120px; max-width: 200px; }
.nyc-lgrid { grid-template-columns: 1fr; }
.nyc-tabs { margin-bottom: 12px; }
@media (max-width: 740px) {
.stx-seite { grid-template-columns: minmax(70px, 1fr) 1.2fr 52px; }
.nyc-preise input.nyc-num { width: 72px; }
}
/* .a-empty wird von fuenf Modulen benutzt, definiert war nur .az-empty —
Alias, damit Leerzustaende ueberall als Box statt nacktem Text erscheinen. */
.a-empty { padding: 22px 16px; border: 1px dashed var(--line-soft); border-radius: 12px;
text-align: center; color: var(--muted); font-size: 13px; }
/* ---------- Team & Rechte ---------- */
.tm2-spalten { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 16px; align-items: start; }
.tm2-liste { display: flex; flex-direction: column; gap: 6px; }
.tm2-m { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px;
font: inherit; color: var(--text); cursor: pointer; border-radius: 10px;
background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
transition: border-color .12s, background .12s; }
.tm2-m:hover { border-color: rgba(255,80,98,.35); }
.tm2-m.on { border-color: rgba(200, 163, 124,.45); background: rgba(200, 163, 124,.07); }
.tm2-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
background: rgba(255,80,98,.18); color: #fff; font-weight: 800; flex: none; }
.tm2-mt { min-width: 0; }
.tm2-mt b { display: block; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm2-mt small { color: var(--muted); font-size: 11px; }
.tm2-mt i { opacity: .6; font-style: normal; }
.tm2-chip { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700;
background: rgba(255,255,255,.07); margin-right: 3px; }
.tm2-detail { padding: 16px 18px; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid var(--line-soft); }
.tm2-kopf2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.tm2-kopf2 h3 { margin: 0; color: #fff; }
.tm2-block { margin: 14px 0; }
.tm2-block h4 { margin: 0 0 8px; font-size: 13px; color: var(--text); }
.tm2-zeile-grp { margin-top: 8px; }
.tm2-zeile-grp .tm2-zn { font-weight: 800; }
.tm2-grp { margin-top: 12px; padding: 6px 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-soft); }
.tm2-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0;
border-bottom: 1px solid rgba(255,255,255,.04); }
.tm2-zn { font-size: 13px; min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tm2-zn small { color: var(--muted); font-size: 10px; }
.tm2-eff { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; }
.tm2-eff.read { color: #ffd9a0; background: rgba(215,170,65,.14); }
.tm2-eff.write { color: #9af0a8; background: rgba(100,224,140,.12); }
.tm2-sr { display: inline-flex; gap: 4px; flex: none; }
.tm2-s { padding: 4px 9px; border-radius: 7px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line-soft); }
.tm2-s:hover { color: var(--text); }
.tm2-s.on { color: #fff; background: rgba(200, 163, 124,.18); border-color: rgba(200, 163, 124,.5); }
.tm2-rollen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.tm2-rolle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px;
border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); flex-wrap: wrap; }
.tm2-rn b { color: #fff; display: block; }
.tm2-rn small { color: var(--muted); font-size: 11px; }
@media (max-width: 860px) {
.tm2-spalten { grid-template-columns: 1fr; }
.tm2-zeile { flex-wrap: wrap; }
}
/* ---------- Server 1 · Masken Teil 2 (Perms/Config/Settings/…) ---------- */
.nyc-subtabs { margin-bottom: 14px; }
.nyc-mono { font-variant-numeric: tabular-nums; font-size: 11.5px; letter-spacing: .02em; }
.nyc-perms { font-size: 11px; color: var(--muted); max-width: 260px; }
.nyc-togs { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.nyc-tog { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); cursor: pointer; }
.nyc-tog input { width: 18px; height: 18px; flex: none; accent-color: var(--red-hot, #ff5062); }
.nyc-tog span { display: flex; flex-direction: column; }
.nyc-tog small { color: var(--muted); font-size: 11px; }
.nyc-inline { flex-direction: row; align-items: center; gap: 10px; margin-top: 10px; }
.nyc-inline span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.nyc-neuzeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 8px 0; }
.nyc-neuzeile .a-in { flex: 1 1 140px; }
.nyc-neuzeile .gp-f { flex: 0 1 auto; }
.nyc-neuzeile b { flex-basis: 100%; font-size: 12.5px; }
.nyc-lbl { color: var(--muted); font-size: 12px; align-self: center; }
.nyc-wide { flex: 2 1 240px; }
.nyc-mini { width: 92px; flex: 0 0 auto; }
.nyc-cfgrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; }
.nyc-cfgk { font-size: 12.5px; color: var(--text); font-family: var(--font-ui); }
.nyc-cfg { max-width: 220px; }
.nyc-tog-c { padding: 4px 8px; }
.nyc-krow { display: flex; align-items: center; gap: 10px; padding: 5px 0; flex-wrap: wrap; }
.nyc-krow > span { flex: 1 1 160px; font-size: 12.5px; }
.nyc-banbtns { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }
.nyc-tenants { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.nyc-tenant { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; cursor: pointer;
background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); }
.nyc-tenant.on { border-color: rgba(200, 163, 124,.45); background: rgba(200, 163, 124,.07); }
.nyc-ailist { display: flex; flex-wrap: wrap; gap: 7px; }
.nyc-aichip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
font-size: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line-soft); }
.nyc-aichip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; }
.nyc-aichip button:hover { color: var(--red-hot, #ff5062); }
/* ---------- Server 1 · Konten-Maske ---------- */
.nyc-kopf2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; }
.nyc-kopf2 h4 { margin: 0; color: #fff; font-size: 15px; }
.nyc-rollensel { min-width: 150px; padding: 5px 8px; font-size: 12.5px; }
.nyc-rowbtns { display: flex; gap: 5px; flex-wrap: wrap; }
.nyc-permgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px; max-height: 420px; overflow-y: auto; }
.nyc-permgrid .gp-check { font-size: 12px; padding: 5px 9px; }
.nyc-verweis { padding: 22px 20px; border-radius: 12px; text-align: center;
background: rgba(255,255,255,.03); border: 1px dashed var(--line-soft); }
.nyc-verweis p { color: var(--muted); font-size: 13.5px; line-height: 1.6; max-width: 640px; margin: 0 auto 16px; }
/* ---------- Panel-Konten & Rollen: kompakte Zeilen statt breiter Tabelle ---------- */
.acp-werkzeug { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.acp-suche { flex: 1 1 240px; max-width: 380px; }
.acp-neu > summary { cursor: pointer; list-style: none; padding: 8px 13px; border-radius: 999px; font-size: 12.5px;
font-weight: 700; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line-soft); }
.acp-neu > summary::-webkit-details-marker { display: none; }
.acp-neu[open] > summary { color: #fff; border-color: rgba(255,80,98,.4); }
.acp-neubox { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 12px;
border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); }
.acp-neubox .a-in { flex: 1 1 170px; }
.acp-liste { display: flex; flex-direction: column; gap: 6px; }
.acp-konto { display: grid; grid-template-columns: minmax(200px, 1.6fr) minmax(150px, 200px) auto;
align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px;
background: rgba(255,255,255,.025); border: 1px solid var(--line-soft);
border-left: 3px solid rgba(255,255,255,.08); }
.acp-konto:hover { background: rgba(255,255,255,.04); }
.acp-warn { border-left-color: rgba(255,80,98,.6); }
.acp-k-wer { display: flex; align-items: center; gap: 10px; min-width: 0; }
.acp-avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
font-weight: 800; color: #fff; background: rgba(255,80,98,.18); }
.acp-k-txt { min-width: 0; }
.acp-k-txt b { color: #fff; font-size: 13.5px; margin-right: 6px; }
.acp-k-txt small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acp-mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.acp-rollensel { width: 100%; padding: 6px 9px; font-size: 12.5px; }
.acp-ownerrolle { font-size: 12px; color: var(--gold, #d7aa41); }
.acp-k-akt { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.acp-rollen { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.acp-rolle { padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.025); border: 1px solid var(--line-soft); }
.acp-r-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acp-r-kopf b { color: #fff; font-size: 14px; }
.acp-r-n, .acp-r-p { font-size: 11.5px; color: var(--muted); }
.acp-r-p { padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.06); }
.acp-r-akt { margin-left: auto; display: flex; gap: 5px; flex: none; }
.acp-r-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.acp-chip { padding: 3px 9px; border-radius: 999px; font-size: 11px; color: #e7dcde;
background: rgba(255,255,255,.05); border: 1px solid var(--line-soft); }
.acp-chip i { font-style: normal; opacity: .75; }
.acp-mehr { color: var(--muted); }
.acp-leer { opacity: .5; }
.acp-editkopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 12px; }
.acp-editkopf h4 { margin: 0; color: #fff; font-size: 15px; }
.acp-namefeld { max-width: 320px; }
.acp-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 14px 0; }
.acp-pgrp { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.025); border: 1px solid var(--line-soft); }
.acp-pgrp-k { display: flex; align-items: center; gap: 7px; margin-bottom: 7px;
padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.acp-pgrp-k b { color: #fff; font-size: 12.5px; }
.acp-pgrp-k span { color: var(--muted); font-size: 11px; margin-right: auto; font-variant-numeric: tabular-nums; }
.acp-pgrp .gp-check { display: flex; font-size: 11.5px; padding: 3px 6px; }
@media (max-width: 900px) {
.acp-konto { grid-template-columns: 1fr; gap: 8px; }
.acp-k-akt { justify-content: flex-start; }
.acp-r-akt { margin-left: 0; }
}
/* ---------- Dashboard · Werkzeugkasten ---------- */
.dsh-wgrp { margin-bottom: 18px; }
.dsh-wgrp h4 { margin: 0 0 10px; font-size: 13px; color: var(--text); }
.dsh-wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.dsh-wkarte { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
padding: 13px 15px; font: inherit; color: var(--text); cursor: pointer; border-radius: 11px;
background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
transition: border-color .12s, background .12s, transform .05s; }
.dsh-wkarte:hover { border-color: rgba(255,80,98,.4); background: rgba(255,80,98,.06); }
.dsh-wkarte:active { transform: translateY(1px); }
.dsh-w-ico { font-size: 21px; flex: none; }
.dsh-w-tx { min-width: 0; }
.dsh-w-tx b { display: block; color: #fff; font-size: 13.5px; }
.dsh-w-tx small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nyc-ok { margin-top: 10px; padding: 10px 13px; border-radius: 10px; font-size: 12.5px;
color: #b9f0c4; background: rgba(100,224,140,.1); border: 1px solid rgba(100,224,140,.35); }
.nyc-ok small { color: var(--muted); }
.nyc-ok code { background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 5px; }
/* ---- S1-Übersicht: dichte Liste statt großer Kacheln ----
38 Bereiche müssen ohne Dauerscrollen erfassbar sein. Dazu Suchfeld und
je Gruppe ein Etikett, über welches Recht sie freigeschaltet ist. */
.ny-uebersicht { display: flex; gap: 10px; align-items: center; margin: 0 0 16px; flex-wrap: wrap; }
.ny-uebersicht .a-in { max-width: 340px; }
.ny-zahl { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.ny-grp { margin-bottom: 20px; }
.ny-grp-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.ny-grp-kopf h4 { margin: 0; font-size: 14.5px; }
.ny-grp-recht { font-size: 11px; color: var(--muted); border: 1px solid var(--line-soft);
border-radius: 999px; padding: 2px 9px; margin-left: auto; }
.ny-dicht { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 7px; }
.ny-e { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 9px 12px;
border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(0,0,0,.22);
color: var(--text); cursor: pointer; font: inherit; min-width: 0;
transition: border-color .15s, background .15s; }
.ny-e:hover { border-color: rgba(255,80,98,.45); background: rgba(255,80,98,.06); }
.ny-e b { font-size: 13px; }
.ny-e small { color: var(--muted); font-size: 11px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
.ny-dicht { grid-template-columns: 1fr 1fr; }
.ny-grp-recht { margin-left: 0; }
}
/* S1-Übersicht v2: Gruppen als Klappzeilen — Ruhe statt Kachelwand. */
.ny-gkopf { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line-soft);
background: rgba(0,0,0,.25); color: var(--text); cursor: pointer; font: inherit;
transition: border-color .15s, background .15s; }
.ny-gkopf:hover { border-color: rgba(255,80,98,.4); }
.ny-gname { font-weight: 700; font-size: 14.5px; }
.ny-gpfeil { color: var(--muted); width: 14px; flex: none; }
.ny-grp { margin-bottom: 10px; }
.ny-grp .ny-dicht { margin-top: 8px; }
.ny-zuletzt { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 16px; }
.ny-zuletzt-t { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
/* Panel-Rollen-Editor: gleiche Drei-Stufen-Zeilen wie Team & Rechte. */
.acp-pgrp2 { margin: 14px 0; border: 1px solid var(--line-soft); border-radius: 12px;
padding: 10px 14px; background: rgba(0,0,0,.18); }
.acp-pgrp2-k { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.acp-pgrp2-k b { font-size: 13.5px; }
.acp-pgrp2-akt { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.acp-pzeile .tm2-zn small { display: block; color: var(--muted); font-size: 10.5px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.acp-editkopf { display: flex; align-items: center; gap: 12px; }
.acp-editkopf .ny-zahl { margin-left: auto; }
/* Streamtools: Partner-Vorsprung-Zeile */
.st-parkzeile { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
margin: 0 0 14px; padding: 9px 12px; border: 1px solid var(--line-soft);
border-radius: 10px; background: rgba(0,0,0,.18); }
.st-parkzeile .th-num { width: 84px; }
.st-parkhint { font-size: 11.5px; }
/* ---------- Kartei: Konto (Punkte/Tokens) + Action-Log ---------- */
.pl-konto { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.pl-konto label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.pl-konto input { width: 130px; padding: 8px 11px; font: inherit; font-size: 14px; color: var(--text);
border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(255,255,255,.04); }
.pl-konto input:focus { outline: none; border-color: rgba(255,80,98,.5); }
.pl-logfilter { margin-bottom: 9px; padding: 7px 11px; font: inherit; font-size: 13px; color: var(--text);
border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(255,255,255,.04); }
.pl-log { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
.pl-logzeile { display: flex; align-items: baseline; gap: 9px; padding: 6px 2px;
border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.pl-logzeile:last-child { border-bottom: 0; }
.pl-logico { flex: none; width: 18px; text-align: center; }
.pl-logtxt { flex: 1; min-width: 0; }
.pl-logzeit { flex: none; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
/* ---- Audit-Log: Quellen-Marke, verweigerte Aktionen, Diagnose ---- */
.gp-qm { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .3px;
padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--muted); }
.gp-qm-i { color: #ffd08a; border-color: rgba(255,184,77,.45); background: rgba(255,184,77,.10); }
.gp-qm-p { color: #9fd8ff; border-color: rgba(120,190,255,.40); background: rgba(120,190,255,.10); }
.gp-log-deny { border-left-color: rgba(255,90,110,.75); background: rgba(255,60,80,.07); }
.gp-log-deny .gp-log-t { color: #ff9aa8; }
.gp-diag { margin-top: 12px; font-size: 12px; }
.gp-diag summary { cursor: pointer; color: var(--muted); padding: 6px 2px; }
.gp-diag summary:hover { color: #e7dcde; }
.gp-diag pre { margin: 6px 0 0; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line-soft);
background: rgba(0,0,0,.30); color: #cdbfc2; font-size: 11.5px; line-height: 1.6;
white-space: pre-wrap; word-break: break-word; }
.a-empty small { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
/* ---- Ingame-Rechte: gruppierte Klappbox (admin-ingameperms.js) ---- */
.ip-box { display: grid; gap: 8px; margin: 4px 0 14px; }
.ip-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ip-suche { flex: 1 1 220px; min-width: 180px; }
.ip-zahl { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ip-grp { border: 1px solid var(--line-soft); border-radius: 11px; background: rgba(0,0,0,.20); overflow: hidden; }
.ip-gkopf { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 13px;
font: inherit; color: #e7dcde; text-align: left; cursor: pointer;
background: transparent; border: 0; border-bottom: 1px solid transparent; }
.ip-gkopf:hover { background: rgba(255,255,255,.03); }
.ip-pfeil { flex: none; width: 12px; color: var(--muted); font-size: 11px; }
.ip-gname { font-weight: 700; font-size: 13px; }
.ip-gzahl { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ip-alle { flex: none; font-size: 11px; color: var(--muted); padding: 2px 8px; border-radius: 999px;
border: 1px dashed var(--line-soft); }
.ip-alle:hover { color: #fff; border-style: solid; }
.ip-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 10px;
padding: 8px 13px 12px; border-top: 1px solid var(--line-soft); }
.ip-chk { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 12.5px; cursor: pointer; }
.ip-chk:hover code { color: #fff; }
.ip-chk input { flex: none; }
.ip-chk code { font-size: 12px; color: #cdbfc2; word-break: break-all; }
.ip-frei { margin-top: 2px; }
/* ---- Dino-Limits: Wert direkt im Chip aendern ---- */
.nyc-limit-w { width: 58px; padding: 3px 6px; margin-left: 2px;
font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: center;
color: #fff; background: rgba(0,0,0,.35); border: 1px solid var(--line-soft); border-radius: 7px; }
.nyc-limit-w:focus { outline: none; border-color: rgba(120,190,255,.7); background: rgba(0,0,0,.55); }
.nyc-limit.geaendert { border-color: rgba(255,184,77,.75); background: rgba(255,184,77,.10); }
.nyc-limit.geaendert .nyc-limit-w { border-color: rgba(255,184,77,.75); color: #ffd08a; }
.nyc-limit-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
padding: 8px 12px; border-radius: 10px; font-size: 12.5px; color: #ffd08a;
border: 1px solid rgba(255,184,77,.45); background: rgba(255,184,77,.08); }
.nyc-limit-bar span { margin-right: auto; }
/* ---- Streamtools: YouTube als dritte Plattform ---- */
.st-pill.st-yt { color: #ff8080; border-color: rgba(255, 0, 0, .38); background: rgba(255, 0, 0, .10); }
.st-pill-x { margin-left: 6px; font-style: normal; font-size: 10px; opacity: .85; }
.st-ib-yt { color: #ff8080; }
.st-switch-s { margin: 6px 0 10px; }
.st-switch-s .st-switch-txt b { font-size: 12.5px; }
/* ---- Hinweis auf korrigierte Protokoll-Zeiten ---- */
.gp-zeithinweis { margin: 0 0 10px; padding: 7px 12px; border-radius: 9px; font-size: 12px;
color: #ffd08a; border: 1px solid rgba(255,184,77,.40); background: rgba(255,184,77,.08); }
/* ---- Streams-Statistik: bei uns vs. woanders ---- */
.st-bilanz {
display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
margin: 0 0 12px; padding: 10px 15px; border-radius: 11px; font-size: 13px;
border: 1px solid var(--line-soft); background: rgba(0,0,0,.22); color: var(--muted);
}
.st-bilanz b { color: #fff; font-size: 15px; margin-right: 4px; }
.st-b-uns b { color: #64f08c; }
.st-b-weg b { color: #ffd08a; }
.st-hinweis { margin: 2px 0 10px; font-size: 12.5px; line-height: 1.5; }
.st-z-uns { color: #64f08c; font-weight: 700; white-space: nowrap; }
.st-z-weg { color: #ffd08a; font-weight: 600; }
/* Schmaler Anteilsbalken hinter der Zahl — zeigt auf einen Blick, wie viel
vom Gesamten auf unseren Server entfiel. */
.st-anteil {
display: inline-block; vertical-align: middle; width: 46px; height: 5px; margin-left: 8px;
border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden;
}
.st-anteil i { display: block; height: 100%; background: #64f08c; border-radius: 999px; }