/* ============================================================
RMH Knowledgebase – Admin
Light-first; [data-theme="dark"] optional auf
Sidebar ist in beiden Modi dunkel.
Stand: 09/2026
============================================================ */
/* ── Design Tokens (Light default) ───── */
:root {
--bg: #f0f2f5;
--bg-2: #ebebea;
--surface: #ffffff;
--surface-2: #f6f6f4;
--surface-3: #eeeeeb;
--sidebar-bg: #33353a; /* Sidebar immer dunkel */
--line: rgba(24,26,30,.10);
--line-strong: rgba(24,26,30,.20);
--text: #22262d;
--text-strong: #0f1117;
--muted: #5f6570;
--faint: #8b909a;
--fainter: #c5cad2;
--accent: #f9423a;
--accent-weak: rgba(249,66,58,.12);
--accent-line: rgba(249,66,58,.35);
--ok: #10b981;
--ok-weak: rgba(16,185,129,.12);
--ok-line: rgba(16,185,129,.35);
--err-weak: rgba(249,66,58,.07);
--shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px -4px rgba(0,0,0,.08);
--radius: 10px;
--radius-sm: 8px;
--radius-xs: 7px;
--sans: 'Metropolis', system-ui, -apple-system, sans-serif;
}
/* ── Dark Mode Override ──────────────── */
[data-theme="dark"] {
--bg: #37393f;
--bg-2: #2f3138;
--surface: #3f424a;
--surface-2: #474a53;
--surface-3: #50535d;
--sidebar-bg: #2a2c33; /* Sidebar in Dark etwas dunkler */
--line: rgba(255,255,255,.09);
--line-strong: rgba(255,255,255,.18);
--text: #f0f1f3;
--text-strong: #ffffff;
--muted: #9aa0ab;
--faint: #6b717d;
--fainter: #4d535e;
--err-weak: rgba(249,66,58,.10);
--shadow: 0 20px 46px -26px rgba(0,0,0,.7);
}
/* ── Reset ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: var(--sans);
font-weight: 400;
font-size: 14px;
line-height: 1.6;
background: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
}
a { color: var(--text); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ── Shell / Layout ─────────────────── */
.shell { display: flex; min-height: 100vh; }
.main { flex: 1; padding: 32px 36px; min-width: 0; }
/* ── Sidebar ────────────────────────── */
.sidebar {
width: 220px;
flex-shrink: 0;
background: var(--sidebar-bg);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.sidebar-brand {
padding: 18px 16px 14px;
border-bottom: 1px solid rgba(255,255,255,.09);
position: relative;
}
.sidebar-brand::after {
content: '';
position: absolute;
left: 0; bottom: -1px;
width: 56px; height: 2px;
background: var(--accent);
}
.sidebar-brand img { height: 20px; width: auto; display: block; margin-bottom: 6px; }
.sidebar-brand-sub {
font-size: 10.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.35);
display: flex;
align-items: center;
gap: 7px;
}
/* Animierter Status-Punkt – in .sidebar-brand-sub */
.brand-mark {
width: 7px; height: 7px;
border-radius: 2px;
background: var(--accent);
flex-shrink: 0;
box-shadow: 0 0 0 3px var(--accent-weak);
animation: pulse 2.8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 3px var(--accent-weak); }
50% { box-shadow: 0 0 0 7px rgba(249,66,58,0); }
}
.sidebar-nav { flex: 1; padding: 10px 8px; overflow-y: auto; }
.nav-section {
font-size: 10px; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: rgba(255,255,255,.28);
padding: 14px 8px 5px;
}
.nav-link {
display: flex; align-items: center; gap: 9px;
padding: 8px 9px; border-radius: var(--radius-xs); margin-bottom: 1px;
font-size: 13.5px; font-weight: 400; color: rgba(255,255,255,.60);
text-decoration: none;
transition: background .12s, color .12s;
}
.nav-link:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.92); text-decoration: none; }
.nav-link.active { background: var(--accent-weak); color: var(--accent); font-weight: 500; }
.nav-link svg { flex-shrink: 0; opacity: .7; }
.nav-link.active svg { opacity: 1; }
.nav-sep { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 8px 4px; }
.sidebar-footer {
padding: 10px 14px;
border-top: 1px solid rgba(255,255,255,.08);
font-size: 12px; color: rgba(255,255,255,.35);
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sidebar-footer a,
.sidebar-footer button {
background: none; border: none; color: rgba(255,255,255,.35);
font-size: 12px; cursor: pointer; font-family: var(--sans);
text-decoration: none;
}
.sidebar-footer a:hover,
.sidebar-footer button:hover { color: var(--accent); }
/* ── Flash / Notices ────────────────── */
.flash-ok {
background: var(--ok-weak); border: 1px solid var(--ok-line);
border-left: 4px solid var(--ok);
color: #065f46; /* immer dunkelgrün – lesbar auf hellem wie dunklem Bg */
border-radius: var(--radius-sm); padding: 12px 16px;
font-size: 13.5px; margin-bottom: 20px;
}
[data-theme="dark"] .flash-ok { color: #a7f3d0; }
.flash-err {
background: var(--err-weak); border: 1px solid var(--accent-line);
border-left: 4px solid var(--accent);
color: #991b1b; /* immer dunkelrot – lesbar auf hellem wie dunklem Bg */
border-radius: var(--radius-sm); padding: 12px 16px;
font-size: 13.5px; margin-bottom: 20px;
}
[data-theme="dark"] .flash-err { color: #fca5a5; }
.notice { border-radius: var(--radius-xs); padding: 11px 15px; font-size: 13.5px; margin-bottom: 18px; border: 1px solid var(--line); }
.notice-ok { background: var(--ok-weak); border-color: var(--ok-line); }
.notice-danger { background: var(--err-weak); border-color: var(--accent-line); }
.notice-warn { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.35); }
/* ── Card ───────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
/* ── Formularelemente ───────────────── */
label {
display: block; font-size: 12.5px; font-weight: 600;
color: var(--muted); margin-bottom: 5px; letter-spacing: .01em;
}
input, select, textarea {
width: 100%; border: 1px solid var(--line); border-radius: var(--radius-xs);
padding: 9px 12px; font-size: 14px;
color: var(--text); background: var(--surface-2);
font-family: var(--sans); outline: none;
transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
border-color: var(--accent-line);
box-shadow: 0 0 0 3px var(--accent-weak);
}
input::placeholder, textarea::placeholder { color: var(--fainter); }
input[type="file"] { background: var(--surface-2); border: 1.5px dashed var(--line-strong); padding: 10px; }
input[type="color"] { padding: 2px; height: 40px; width: 56px; background: var(--surface-2); }
input[type="number"] { appearance: textfield; }
select option { background: var(--surface); color: var(--text); }
/* ── Buttons ────────────────────────── */
.btn {
font: inherit; font-weight: 600; font-size: 13px; letter-spacing: .015em;
border-radius: var(--radius-xs); padding: 9px 17px; cursor: pointer;
border: 1px solid var(--line-strong); background: transparent; color: var(--text);
transition: .15s; white-space: nowrap;
display: inline-flex; align-items: center; gap: 7px;
text-decoration: none;
}
.btn:hover { border-color: var(--text); background: var(--surface-2); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-sm { padding: 6px 13px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }
.btn-primary { border: 1px solid var(--accent); background: var(--accent); color: #fff; letter-spacing: .02em; }
.btn-primary:hover { filter: brightness(1.05); background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-ghost:hover { border-color: var(--line-strong); background: transparent; }
.btn-danger { color: var(--muted); border-color: var(--line); background: transparent; }
.btn-danger:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-weak); }
/* Alias für ältere Views */
.btn-danger-ghost { color: var(--faint); border-color: transparent; background: transparent; }
.btn-danger-ghost:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-weak); }
/* Icon-Button (quadratisch, 38×38) */
.iconbtn {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
border: 1px solid var(--line); background: var(--surface); color: var(--text);
border-radius: var(--radius-xs); cursor: pointer; transition: .15s;
flex-shrink: 0;
}
.iconbtn:hover { border-color: var(--line-strong); background: var(--surface-2); }
/* Icon-Button für dunkle Sidebar (immer dunkel, theme-unabhängig) */
.sidebar-iconbtn {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 5px;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.45); cursor: pointer; transition: .15s; flex-shrink: 0;
}
.sidebar-iconbtn:hover { background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); }
/* ── Badges ─────────────────────────── */
.badge-public { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 11.5px; font-weight: 600; background: var(--ok-weak); color: #059669; }
.badge-internal { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 11.5px; font-weight: 600; background: rgba(139,92,246,.12); color: #7c3aed; }
.badge-draft { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 11.5px; font-weight: 600; background: var(--surface-3); color: var(--faint); }
[data-theme="dark"] .badge-public { color: #4ade80; }
[data-theme="dark"] .badge-internal { color: #c4b5fd; }
/* ── Filter-Tabs & Tabs – identisches Visual (Pill-Container) ── */
/* filter-tabs: -Links, URL-Navigation */
.filter-tabs { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xs); overflow: hidden; margin-bottom: 20px; }
.filter-tab { padding: 9px 18px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; transition: color .15s; }
.filter-tab:hover { color: var(--text); text-decoration: none; }
.filter-tab.active { background: var(--surface-3); color: var(--text); border-bottom-color: var(--accent); }
/* Tabs – JS-gesteuert, aktiver Tab mit Unterstrich + leichtem Bg */
.tabs { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xs); overflow: hidden; }
.tabs button {
font: inherit; font-size: 13px; font-weight: 600; padding: 9px 18px;
background: none; border: none; color: var(--muted);
cursor: pointer; transition: .15s;
display: inline-flex; align-items: center; gap: 8px;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { background: var(--surface-3); color: var(--text); border-bottom: 2px solid var(--accent); }
/* Segmented Control – kompakt, aktiv mit Akzentfarbe */
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xs); overflow: hidden; }
.seg button {
font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 15px;
background: none; border: none; color: var(--muted);
cursor: pointer; transition: .15s;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--accent); color: #fff; }
.seg-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); margin-right: 8px; align-self: center; }
/* ── Accordion-Rows ─────────────────── */
.rows { display: flex; flex-direction: column; gap: 8px; }
.row {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden; transition: border-color .15s;
}
.row:hover { border-color: var(--line-strong); }
.row.open { border-color: var(--accent-line); }
.row-main {
display: grid; grid-template-columns: 1fr auto auto auto;
gap: 16px; align-items: center;
padding: 15px 18px; cursor: pointer; user-select: none;
}
.row-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.row-sub { font-size: 12.5px; color: var(--faint); margin-top: 3px; }
.row-count { font-size: 12px; color: var(--faint); }
.row-count b { color: var(--text); font-weight: 600; }
.row-chev { transition: transform .25s ease; color: var(--faint); flex-shrink: 0; }
.row.open .row-chev { transform: rotate(180deg); }
.row-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; border-top: 1px solid transparent; }
.row.open .row-detail { grid-template-rows: 1fr; border-top-color: var(--line); }
.row-detail-inner { overflow: hidden; }
.row-detail-pad { padding: 18px 18px 22px; }
/* ── Artikel-Zeilen ─────────────────── */
.article-row {
display: flex; align-items: center; gap: 20px;
padding: 18px 24px; border-bottom: 1px solid var(--line);
transition: background .1s;
}
.article-row:hover { background: var(--surface-2); }
.article-row:last-child { border-bottom: none; }
.article-row-title { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.article-row-meta { font-size: 13px; color: var(--faint); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.article-row-metric { text-align: right; min-width: 60px; flex-shrink: 0; }
.article-row-metric-val { font-size: 19px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.article-row-metric-lbl { font-size: 10.5px; color: var(--faint); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
/* ── Page-Header ────────────────────── */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.page-title { font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.page-sub { font-size: 13.5px; color: var(--faint); margin-top: 3px; }
.section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: 14px; }
/* ── Drag Handle ────────────────────── */
.drag-handle { cursor: grab; color: var(--faint); font-size: 18px; flex-shrink: 0; user-select: none; line-height: 1; }
.drag-handle:hover { color: var(--muted); }
/* ── Toast Notification ─────────────── */
.admin-toast {
position: fixed; bottom: 24px; right: 24px;
background: #2f3138; color: #fff; /* immer dunkel, theme-unabhängig */
border: none;
padding: 11px 18px; border-radius: var(--radius-sm);
font-size: 13px; z-index: 999;
opacity: 0; transform: translateY(8px);
transition: opacity .2s, transform .2s;
pointer-events: none;
}
.admin-toast.show { opacity: 1; transform: translateY(0); }
.admin-toast.err { background: var(--accent); }
/* ── Editor-Split (Artikel erstellen/bearbeiten) */
.editor-split { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.editor-panel {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden;
}
.editor-title {
width: 100%; border: none; border-bottom: 1px solid var(--line);
border-radius: 0; padding: 18px 20px;
font-size: 19px; font-weight: 600; color: var(--text-strong);
background: var(--surface); box-shadow: none; font-family: var(--sans);
}
.editor-title:focus { box-shadow: none; border-color: var(--line); }
.editor-settings { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 20px; }
.settings-card {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); padding: 18px;
display: flex; flex-direction: column; gap: 14px;
}
.settings-hint { font-size: 12px; color: var(--faint); margin-top: 4px; line-height: 1.5; }
.danger-zone {
padding: 14px 16px; border-radius: var(--radius-sm);
border: 1px solid var(--accent-line); background: var(--err-weak);
}
.danger-zone p { font-size: 12px; color: var(--faint); margin-bottom: 10px; }
/* ── Toast UI Editor Override ───────── */
.toastui-editor-defaultUI { border: none !important; }
.toastui-editor-toolbar {
border-bottom: 1px solid var(--line) !important;
background: var(--surface-2) !important;
padding: 4px 8px !important;
}
.toastui-editor-contents,
.toastui-editor-contents p,
.toastui-editor-contents li,
.ProseMirror,
.ProseMirror p {
font-family: var(--sans) !important;
font-size: 15.5px !important;
font-weight: 400 !important;
line-height: 1.75 !important;
color: var(--text) !important;
}
.toastui-editor-contents h1 { font-size: 1.9rem !important; font-weight: 700 !important; }
.toastui-editor-contents h2 { font-size: 1.4rem !important; font-weight: 700 !important; }
.toastui-editor-contents h3 { font-size: 1.15rem !important; font-weight: 600 !important; }
.toastui-editor-ww-container,
.toastui-editor-md-container { background: var(--surface) !important; }
.toastui-editor-toolbar-icons button { color: var(--muted) !important; }
.toastui-editor-toolbar-icons button:hover { color: var(--text) !important; }
/* ── Statistiken / KPI ──────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.kpi-card {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); padding: 20px 22px;
position: relative; overflow: hidden;
}
.kpi-card.accent { border-color: var(--accent-line); }
.kpi-label {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: .11em; color: var(--muted); margin-bottom: 8px;
}
.kpi-card.accent .kpi-label { color: var(--accent); }
.kpi-value { font-size: 36px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.kpi-card.accent .kpi-value { font-size: 42px; }
/* Animierter Ring im Highlight-KPI – in .kpi-card.accent */
.kpi-ring {
position: absolute; right: -28px; bottom: -28px;
width: 108px; height: 108px; border-radius: 50%;
border: 2px solid var(--accent-line);
animation: kpi-ring 3.6s ease-out infinite;
pointer-events: none;
}
@keyframes kpi-ring {
0% { transform: scale(.6); opacity: .6; }
100% { transform: scale(1.25); opacity: 0; }
}
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.chart-label { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 16px; }
/* ── Profil ─────────────────────────── */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; }
.slug-prefix-group { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-xs); overflow: hidden; background: var(--surface); }
.slug-prefix { padding: 9px 12px; background: var(--surface-2); border-right: 1px solid var(--line); font-size: 13px; color: var(--faint); white-space: nowrap; flex-shrink: 0; }
.slug-prefix + input { border: none; border-radius: 0; flex: 1; background: var(--surface); }
.slug-prefix + input:focus { box-shadow: none; border: none; }
/* ── Kategorien (Admin Drag-Drop) ───── */
.cat-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius-sm); transition: background .1s; }
.cat-row:hover { background: var(--surface-2); }
.cat-row.sub { padding: 9px 12px; }
.cat-row.sub:hover { background: var(--surface-3); }
.cat-title { font-size: 14.5px; font-weight: 600; color: var(--text); flex: 1; }
.cat-title.sub { font-size: 14px; font-weight: 500; color: var(--muted); }
.cat-count { font-size: 12px; color: var(--faint); flex-shrink: 0; }
/* ── Login-Seite (Breeze) ───────────── */
.login-body {
display: flex; align-items: center; justify-content: center;
min-height: 100vh; padding: 20px; background: var(--bg);
background-image: radial-gradient(760px 380px at 94% -12%, rgba(249,66,58,.07), transparent 62%);
}
.login-wrap { width: 100%; max-width: 380px; }
.login-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 24px; }
.login-brand img { height: 24px; width: auto; }
.login-card {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow);
}
.login-card h1 { font-size: 22px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.02em; }
.login-card > p { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.login-field { margin-bottom: 14px; }
/* ── Reduced Motion ─────────────────── */
@media (prefers-reduced-motion: reduce) {
.brand-mark, .kpi-ring { animation: none; }
* { transition-duration: .01ms !important; }
}
/* ── Form-Layout Helfer ─────────────── */
.card-pad { padding: 22px; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 14px; }
.form-footer {
display: flex; justify-content: flex-end; gap: 10px;
padding-top: 16px; border-top: 1px solid var(--line); margin-top: 8px;
}
.cat-form { max-width: 640px; }
.color-row { display: flex; align-items: center; gap: 12px; }
.color-hint { font-size: 12px; color: var(--faint); }
.error-msg { font-size: 12px; color: var(--accent); margin-top: 4px; }
.page-link { font-size: 13.5px; color: var(--muted); transition: color .12s; }
.page-link:hover { color: var(--text); text-decoration: none; }
.btn-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
/* ── Autorenbox-Vorschau (Profil) ───── */
.author-preview { display: flex; gap: 20px; align-items: flex-start; }
.author-preview img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--line); }
.author-preview-name { font-size: 17px; font-weight: 700; margin-bottom: 3px; }
.author-preview-title { font-size: 14px; color: var(--muted); margin-bottom: 10px; font-weight: 400; }
.author-preview-bio { font-size: 14px; color: var(--muted); line-height: 1.65; max-width: 560px; font-weight: 400; }
/* ── Statistiken-Tabelle ────────────── */
.stats-table-head {
display: grid; grid-template-columns: 40px 1fr 120px;
border-bottom: 1px solid var(--line); padding: 10px 20px;
}
.stats-table-head span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.stats-table-head .right { text-align: right; }
.stats-table-row {
display: grid; grid-template-columns: 40px 1fr 120px;
padding: 13px 20px; border-bottom: 1px solid var(--line);
align-items: start; transition: background .1s;
}
.stats-table-row:hover { background: var(--surface-2); }
.stats-table-row:last-child { border-bottom: none; }
.stats-rank { font-size: 13px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.stats-title a { font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; }
.stats-title a:hover { color: var(--accent); }
.stats-count { text-align: right; }
.stats-count-val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stats-bar-wrap { height: 3px; background: var(--surface-3); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.stats-bar { height: 3px; background: var(--accent); border-radius: 3px; }
.stats-empty { padding: 48px; text-align: center; color: var(--faint); font-size: 14px; }
/* ── Kategorie-Dot (Farbpunkt, dynamisches bg bleibt inline) */
.cat-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.cat-dot.sub { width: 8px; height: 8px; border-radius: 2px; }
/* ── Utilities ──────────────────────── */
.card-clip { overflow: hidden; }
.btn-group { display: flex; align-items: center; gap: 8px; }
.empty-state { padding: 48px; text-align: center; color: var(--faint); font-size: 14.5px; font-weight: 500; }
.sortable-ghost { opacity: .4; }
/* ── Artikel-Zeilen Hilfsklassen ────── */
.article-row-info { flex: 1; min-width: 0; }
.article-row-info-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.meta-sep { opacity: .35; line-height: 1; }
/* ── Pagination (Laravel Tailwind-Komponente) ── */
.pagination-wrap { margin-top: 16px; }
.pagination-wrap nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pagination-wrap nav span span,
.pagination-wrap nav a {
display: inline-flex; align-items: center; justify-content: center;
min-width: 34px; height: 34px; padding: 0 8px;
border: 1px solid var(--line); border-radius: var(--radius-xs);
font-size: 13px; font-weight: 500; color: var(--muted);
background: var(--surface); text-decoration: none; transition: .12s;
}
.pagination-wrap nav a:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-2); }
.pagination-wrap nav span[aria-current="page"] > span {
background: var(--accent); color: #fff; border-color: var(--accent);
}
.pagination-wrap .pagination-info { font-size: 13px; color: var(--faint); margin-bottom: 8px; }
/* ── Checkbox-Fix: globales input{width:100%} überschreiben ── */
input[type="checkbox"],
input[type="radio"] { width: auto; flex-shrink: 0; }
/* ── Artikel/Kurs Auswahliste ───────────────────────────────── */
.related-search { margin-bottom: 8px; }
.related-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-2); }
.related-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 13px; color: var(--text); transition: background .1s; font-weight: 400; }
.related-item:hover { background: var(--surface-3); }
.related-item input[type="checkbox"] { accent-color: var(--accent); }
.related-item.hidden { display: none; }
.related-count { font-size: 11.5px; color: var(--accent); margin-top: 6px; font-weight: 600; min-height: 16px; }
/* ── Kurs-Admin ─────────────────────────────────────────────── */
.course-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.course-order-list { list-style: none; display: flex; flex-direction: column; gap: 4px; min-height: 40px; }
.course-order-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-xs); font-size: 13px; color: var(--text); }
.course-order-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }