/* =========================================================
   Dartfreunde24 - modernes Stylesheet
   Design-System über CSS-Variablen. Alle Klassennamen bleiben
   kompatibel zum bestehenden Markup.
   ========================================================= */

:root {
    /* Farben */
    --bg:            #f5f6fb;
    --surface:       #ffffff;
    --surface-2:     #f5f7fb;
    --border:        #e7e9f2;
    --text:          #1f2430;
    --text-soft:     #5b6472;
    --text-faint:    #8b94a4;

    --accent:        #5b6cff;   /* modernes Indigo */
    --accent-dark:   #4453e6;
    --accent-soft:   #eef0ff;
    --accent-softer: #f5f6ff;

    --danger:        #e5484d;
    --danger-dark:   #c13438;
    --danger-soft:   #fdecec;
    --ok:            #30a46c;
    --ok-soft:       #e7f6ee;
    --online:        #30c46c;

    /* Radien */
    --r-sm: 8px;
    --r:    12px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* Schatten */
    --shadow:    0 1px 2px rgba(20,24,40,.04), 0 8px 24px rgba(20,24,40,.06);
    --shadow-sm: 0 1px 2px rgba(20,24,40,.06);

    /* Abstände */
    --gap: 16px;
}

* { box-sizing: border-box; }

body {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    margin: 0;
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-dark); }

/* ---------- Layout ---------- */
.wrap {
    width: 100%;
    max-width: 860px;
    margin: 28px auto;
    padding: 0 18px;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.wrap--narrow { max-width: 380px; margin: 56px auto; }
.wrap--wide   { max-width: 680px; }

.login-box {
    max-width: 380px;
    margin: 32px auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
}

/* Startseite: Titel über beiden Spalten */
.home-title {
    text-align: center;
    font-size: 1.6rem;
    margin: 4px 0 4px;
}

/* Startseite: zweispaltig (links Feeds, rechts Login + Statistik) */
.home-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--gap);
    align-items: start;
}
.home-grid__main,
.home-grid__side {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-width: 0;
}
.home-grid__side h1.centered { margin: 0; }

@media (max-width: 760px) {
    .home-grid { grid-template-columns: 1fr; }
    /* Login/Statistik auf schmalen Screens zuerst zeigen */
    .home-grid__side { order: -1; }
}

/* ---------- Kopfzeile / Navigation ---------- */
header.topbar {
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border);
    padding: 12px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 50;
}

header.topbar .brand {
    font-weight: 800;
    color: var(--text);
    text-decoration: none;
    font-size: 1.15rem;
    letter-spacing: -.02em;
}

.mainnav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.mainnav a {
    padding: 8px 14px;
    border-radius: var(--r-pill);
    text-decoration: none;
    color: var(--text-soft);
    font-weight: 600;
    font-size: .92rem;
    transition: background .15s, color .15s;
}

.mainnav a:hover { background: var(--accent-soft); color: var(--accent-dark); }

.mainnav a.active {
    background: var(--accent);
    color: #fff;
}

.mainnav a.logout { color: var(--danger); }
.mainnav a.logout:hover { background: var(--danger-soft); color: var(--danger-dark); }

/* ---------- Überschriften ---------- */
h1 { font-size: 1.6rem; letter-spacing: -.02em; margin: 0 0 4px; }
h1.centered { text-align: center; font-size: 1.4rem; margin: 0 0 16px; }
h2 { font-size: 1.15rem; margin: 0 0 4px; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 16px 0 8px; }

/* ---------- Karten / Boxen ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 24px;
    box-shadow: var(--shadow);
}

.box {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 16px;
    margin: 12px 0;
    background: var(--surface-2);
}

.card--compact { padding: 16px 20px; }
.card__title { margin: 0 0 8px; font-size: 1rem; }
.card--compact .inline-names,
.card--compact .legend { margin-top: 6px; }

.box.ok  { background: var(--ok-soft);     border-color: #bfe6cf; }
.box.err { background: var(--danger-soft); border-color: #f4c3c4; }

/* ---------- Formulare ---------- */
label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: .92rem; color: var(--text-soft); }

input[type=text],
input[type=email],
input[type=password],
input[type=date],
input[type=number],
input[type=search],
select,
textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-size: .95rem;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea { resize: vertical; line-height: 1.5; }

input[type=file] {
    width: 100%;
    padding: 10px;
    border: 1px dashed #c4cad8;
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

/* Primär-Button */
button {
    margin-top: 16px;
    padding: 11px 18px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--accent);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .05s;
}

button:hover { background: var(--accent-dark); }
button:active { transform: translateY(1px); }
button.block { width: 100%; }

button.btn-danger { background: var(--danger); }
button.btn-danger:hover { background: var(--danger-dark); }

/* ---------- Meldungen ---------- */
.error {
    background: var(--danger-soft);
    border: 1px solid #f4c3c4;
    color: var(--danger-dark);
    padding: 11px 14px;
    border-radius: var(--r-sm);
    margin-bottom: 12px;
    font-size: .92rem;
}

.hint { color: var(--text-faint); font-size: .9rem; }

code {
    background: var(--surface-2);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: .88rem;
}

/* ---------- Rang-Badge ---------- */
.rolebadge {
    display: inline-block;
    align-self: flex-start;
    width: auto;
    padding: 3px 12px;
    border-radius: var(--r-pill);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.5;
    background: var(--role-color, var(--accent));
}

/* ---------- Statistik-Box (Startseite) ---------- */
.card.stats { padding: 18px 22px; }
.stats__title { margin: 0 0 10px; font-size: 1rem; color: var(--text); }

.stats__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.stats__row:first-of-type { border-top: 0; }
.stats__label { color: var(--text-soft); font-size: .92rem; }
.stats__value { font-weight: 700; }

/* ---------- Feld + Sichtbarkeits-Auswahl ---------- */
.field-row { display: flex; gap: 10px; align-items: center; }
.field-row__label { flex: 1; }
.field-row > input,
.field-row > select:first-child { flex: 1 1 auto; }

.vis-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 200px;
    background: var(--surface-2);
    font-size: .9rem;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin: 14px 0 4px;
    color: var(--text-soft);
}
.checkbox-row input[type=checkbox] { width: auto; margin: 0; }

.datalist--flush { padding-top: 0; }
.input-narrow { max-width: 90px; }

/* Honeypot */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Avatar-Vorschau ---------- */
.avatar-preview { margin: 6px 0; }
.avatar-img {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--surface);
    box-shadow: var(--shadow-sm);
}

/* ---------- Profilkarte ---------- */
.profile-card { padding: 0; overflow: hidden; }

.profile-head {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 24px;
    background: linear-gradient(135deg, var(--accent-softer), #eaf0ff);
    border-bottom: 1px solid var(--border);
}

.profile-head__info { display: flex; flex-direction: column; gap: 8px; }
.profile-name { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }

/* ---------- Avatar ---------- */
.avatar {
    position: relative;
    flex: 0 0 auto;
    width: 68px; height: 68px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; font-weight: 700; color: #fff;
    background: var(--role-color, var(--accent));
    box-shadow: 0 4px 12px rgba(20,24,40,.15);
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar--sm { width: 44px; height: 44px; font-size: 1rem; box-shadow: var(--shadow-sm); }

/* Online-Indikator */
.online-dot {
    position: absolute; right: -1px; bottom: -1px;
    width: 13px; height: 13px;
    background: var(--online);
    border: 2px solid var(--surface);
    border-radius: 50%;
}
.online-dot--lg { width: 17px; height: 17px; border-width: 3px; }
.status-online { color: var(--online); font-weight: 700; }

/* ---------- Datenliste ---------- */
.datalist { padding: 10px 24px 22px; }
.datalist__row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; padding: 13px 0;
    border-bottom: 1px solid var(--border);
}
.datalist__row:last-child { border-bottom: 0; }
.datalist__label { color: var(--text-soft); font-size: .92rem; }
.datalist__value { font-weight: 600; text-align: right; word-break: break-word; }

.datalist--actions { display: flex; flex-wrap: wrap; gap: 10px; }
.datalist--spaced { margin-top: 12px; }

/* ---------- Buttons (Link-Style) ---------- */
.btn-link {
    display: inline-block;
    padding: 10px 18px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: .92rem;
    transition: background .15s;
}
.btn-link:hover { background: var(--accent-dark); }

.btn-link--ghost { background: var(--accent-soft); color: var(--accent-dark); }
.btn-link--ghost:hover { background: #e2e6ff; }

.btn-link--danger { background: var(--danger); color: #fff; }
.btn-link--danger:hover { background: var(--danger-dark); }

/* Kleiner, dezenter Button */
.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 7px 13px;
    font-size: .84rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-soft);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    transition: background .15s, border-color .15s, color .15s;
}
.btn-sm:hover { background: var(--accent-soft); border-color: #c7cdff; color: var(--accent-dark); }
.btn-sm--danger { color: var(--danger); border-color: #f2c6c7; background: var(--danger-soft); }
.btn-sm--danger:hover { background: #fbdcdc; border-color: #e6a9aa; color: var(--danger-dark); }

/* ---------- Präsenz-Listen ---------- */
.presence-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.presence-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    text-decoration: none; color: var(--text);
    font-weight: 600; font-size: .9rem;
}
.presence-chip:hover { background: var(--accent-soft); border-color: #c7cdff; }
.presence-chip__name { white-space: nowrap; }

.online-names { list-style: none; margin: 12px 0 0; padding: 0; }
.online-names__item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--border);
}
.online-names__item:last-child { border-bottom: 0; }
.online-names__dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #cbd2e0; }
.online-names__dot.is-on { background: var(--online); box-shadow: 0 0 0 3px rgba(48,196,108,.15); }
.online-names__name { flex: 1 1 auto; text-decoration: none; color: var(--text); font-weight: 600; }
.online-names__name:hover { color: var(--accent-dark); }
.online-names__time { flex: 0 0 auto; color: var(--text-faint); font-size: .85rem; }

/* Namen inline */
.inline-names { margin: 8px 0 0; line-height: 2; color: var(--text-soft); }
.inline-name { text-decoration: none; font-weight: 600; }
.inline-name:hover { text-decoration: underline; }
.inline-entry { white-space: nowrap; }
.inline-name__time { color: var(--text-faint); font-weight: 400; font-size: .88rem; }

/* Feed-Listen (neueste Themen/Beiträge auf der Startseite) */
.feed-list { list-style: none; margin: 8px 0 0; padding: 0; }
.feed-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.feed-item:last-child { border-bottom: 0; }
.feed-item__title {
    display: block;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.feed-item__title:hover { color: var(--accent-dark); }
.feed-item__meta { display: block; color: var(--text-faint); font-size: .82rem; margin-top: 2px; }

/* Top-Poster-Liste */
.top-posters {
    list-style: none;
    counter-reset: tp;
    margin: 8px 0 0;
    padding: 0;
}
.top-posters__item {
    counter-increment: tp;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.top-posters__item:last-child { border-bottom: 0; }
.top-posters__item::before {
    content: counter(tp);
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-dark);
    border-radius: 50%;
    font-size: .78rem; font-weight: 700;
}
.top-posters__item .inline-name { flex: 1 1 auto; }
.top-posters__count {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--text);
    background: var(--surface-2);
    border-radius: var(--r-pill);
    padding: 2px 10px;
    font-size: .82rem;
}

/* Rang-Legende */
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.legend__item { display: inline-flex; align-items: center; gap: 8px; }
.legend__dot { width: 13px; height: 13px; border-radius: 50%; background: var(--role-color, var(--accent)); flex: 0 0 auto; }
.legend__name { font-weight: 700; font-size: .9rem; }

/* =========================================================
   FORUM (modern, karten-/feed-basiert)
   ========================================================= */
.breadcrumb { color: var(--text-faint); font-size: .9rem; margin: 0 0 10px; }
.breadcrumb a { color: var(--accent-dark); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.forum-cat__title {
    margin: 0 0 12px;
    font-size: 1.05rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
}

.forum-list { display: flex; flex-direction: column; gap: 10px; }

.forum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .08s, box-shadow .15s;
}
.forum-row:hover {
    border-color: #c7cdff;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.forum-row__main { flex: 1 1 auto; min-width: 0; }
.forum-row__name { font-weight: 700; font-size: 1.02rem; }
.forum-row__desc { display: block; color: var(--text-soft); font-size: .9rem; margin-top: 2px; }
.forum-row__stats {
    flex: 0 0 auto;
    display: flex; gap: 16px;
    color: var(--text-faint); font-size: .82rem;
}
.forum-row__stats span { display: flex; flex-direction: column; align-items: center; }

/* Themen-Flags */
.topic-flag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: .7rem; font-weight: 700;
    vertical-align: middle;
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.topic-flag--lock { background: var(--danger-soft); color: var(--danger-dark); }

/* Moderations-Leiste */
.mod-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Zitat-Hinweis im Antwortformular */
.reply-quote-info {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; margin-bottom: 12px;
    background: var(--accent-soft);
    border: 1px solid #c7cdff;
    border-radius: var(--r-sm);
    color: var(--accent-dark);
    font-size: .9rem;
}

/* Beiträge als moderne Karten */
.post {
    display: flex;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.post__side {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 22px 16px;
    background: linear-gradient(180deg, var(--accent-softer), var(--surface-2));
    border-right: 1px solid var(--border);
}
.post__role { font-size: .76rem; color: var(--text-faint); }

.post__body { flex: 1 1 auto; min-width: 0; padding: 20px 22px; }
.post__meta { font-size: .82rem; color: var(--text-faint); margin-bottom: 10px; }
.post__content { line-height: 1.65; color: var(--text); word-wrap: break-word; overflow-wrap: anywhere; }

.post__actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--border);
    align-items: center;
}

/* BBCode-Ausgabe */
.bb-u { text-decoration: underline; }
.bb-s { text-decoration: line-through; }
.bb-quote {
    margin: 10px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--accent);
    background: var(--surface-2);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--text-soft);
}
.bb-quote cite { display: block; font-size: .8rem; color: var(--text-faint); font-style: normal; margin-bottom: 4px; }
.bb-code {
    background: #1b2130; color: #e6edf3;
    padding: 14px; border-radius: var(--r-sm);
    overflow-x: auto;
    font-family: ui-monospace, "SF Mono", "Courier New", monospace;
    font-size: .88rem;
}
.bb-img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.bb-list { margin: 8px 0; padding-left: 22px; }

/* ---------- Fehlerseite ---------- */
.error-page { text-align: center; padding: 48px 24px; }
.error-page__code {
    font-size: 4.5rem; font-weight: 800; line-height: 1;
    background: linear-gradient(135deg, var(--accent), #8b5bff);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.error-page__title { margin: 10px 0 6px; font-size: 1.5rem; }
.error-page__text { color: var(--text-soft); margin-bottom: 20px; }

/* ---------- Mitglieder-Toolbar ---------- */
.member-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.member-toolbar__search { flex: 1 1 220px; }
.member-toolbar__sort { flex: 0 0 auto; width: auto; min-width: 180px; }

/* ---------- Mitgliederliste ---------- */
.member-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.member-table thead th {
    text-align: left; padding: 10px; color: var(--text-faint);
    font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
    border-bottom: 1px solid var(--border);
}
.member-table tbody td { padding: 12px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.member-table tbody tr:last-child td { border-bottom: 0; }
.member-row:hover td { background: var(--surface-2); }
.member-row__link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.member-row__name { font-weight: 600; }
.member-row__location { color: var(--text-soft); font-size: .92rem; }
.member-table tbody.is-loading,
.member-list.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }

/* ---------- Admin ---------- */
.admin-grid { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0; }
.admin-stat { flex: 1 1 140px; text-align: center; padding: 20px; }
.admin-stat__num {
    display: block; font-size: 2.1rem; font-weight: 800;
    background: linear-gradient(135deg, var(--accent), #8b5bff);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.admin-stat__label { color: var(--text-soft); font-size: .9rem; }

.admin-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.admin-table th, .admin-table td {
    text-align: left; padding: 11px 8px;
    border-bottom: 1px solid var(--border); vertical-align: middle;
}
.admin-table th { color: var(--text-faint); font-size: .82rem; text-transform: uppercase; letter-spacing: .02em; }
.admin-table input[type=text], .admin-table input[type=number] { padding: 7px 9px; }
.admin-table__actions { display: flex; gap: 8px; align-items: center; }
.inline-form { display: inline; margin: 0; }

.table-scroll { overflow-x: auto; }
.caps-table th { font-size: .8rem; white-space: nowrap; text-transform: none; }
.caps-table__check { text-align: center; }
.caps-table__check input[type=checkbox] { width: auto; margin: 0; }

details { margin: 12px 0; }
details > summary {
    cursor: pointer; font-weight: 600; color: var(--accent-dark);
    padding: 8px 0; list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸ "; }
details[open] > summary::before { content: "▾ "; }

.stack-form {
    margin: 8px 0 16px; padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.perms-form { margin: 8px 0 16px; }

/* Status-Badges */
.status-badge { display: inline-block; padding: 3px 11px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 700; }
.status-badge--active { background: var(--ok-soft); color: var(--ok); }
.status-badge--banned { background: var(--danger-soft); color: var(--danger-dark); }

/* ---------- Rechtsseiten ---------- */
.legal h2 { font-size: 1.1rem; margin-top: 1.8rem; }
.legal p, .legal li { line-height: 1.7; color: var(--text); }
.legal ul { padding-left: 22px; }

/* ---------- Statistik: Tabellen/Diagramme ---------- */
.stats-guests .ip-cell {
    font-family: ui-monospace, "Courier New", monospace;
    font-size: .8rem; color: var(--text-faint);
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stats-guests td { font-size: .9rem; }

.stats-two { display: flex; flex-wrap: wrap; gap: 16px; }
.stats-two > .card { flex: 1 1 300px; }

.chart { display: flex; align-items: flex-end; gap: 6px; height: 170px; margin-top: 14px; padding-bottom: 22px; }
.chart--hours { gap: 3px; }
.chart__col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.chart__bar {
    width: 72%; min-height: 3px;
    background: linear-gradient(180deg, #7c88ff, var(--accent));
    border-radius: 5px 5px 0 0; transition: height .2s;
}
.chart__col:hover .chart__bar { background: linear-gradient(180deg, #9aa4ff, var(--accent-dark)); }
.chart__x { position: absolute; bottom: -18px; font-size: .7rem; color: var(--text-faint); white-space: nowrap; }

.barlist { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.barlist__row { display: flex; align-items: center; gap: 10px; }
.barlist__label { flex: 0 0 90px; font-size: .9rem; color: var(--text-soft); }
.barlist__track { flex: 1 1 auto; height: 12px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.barlist__fill { display: block; height: 100%; background: linear-gradient(90deg, #7c88ff, var(--accent)); border-radius: var(--r-pill); }
.barlist__val { flex: 0 0 auto; font-weight: 700; font-size: .88rem; min-width: 32px; text-align: right; }

/* ---------- Pager ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.pager__page, .pager__arrow {
    margin: 0; min-width: 40px; height: 40px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--text-soft);
    border: 1px solid var(--border); border-radius: var(--r-sm);
    cursor: pointer; font-weight: 600; font-size: .95rem;
    transition: background .15s, color .15s, border-color .15s, transform .08s;
}
.pager__page:hover:not(.pager__page--active),
.pager__arrow:hover:not(:disabled) { background: var(--accent-soft); border-color: #c7cdff; color: var(--accent-dark); }
.pager__page:active, .pager__arrow:active:not(:disabled) { transform: translateY(1px); }
.pager__page--active {
    background: var(--accent); border-color: var(--accent); color: #fff; cursor: default;
    box-shadow: 0 4px 12px rgba(91,108,255,.35);
}
.pager__arrow { font-size: 1.3rem; line-height: 1; }
.pager__arrow:disabled { opacity: .4; cursor: default; }
.pager__dots { min-width: 24px; text-align: center; color: var(--text-faint); user-select: none; }

/* Admin-Buttons (kompatibel) */
.pager__btn {
    margin: 0; padding: 8px 16px;
    background: var(--accent); color: #fff; border: 0;
    border-radius: var(--r-sm); cursor: pointer; font-weight: 600;
}
.pager__btn:hover:not(:disabled) { background: var(--accent-dark); }
.pager__btn:disabled { background: #cbd2e0; cursor: default; }
.pager__btn--danger { background: var(--danger); }
.pager__btn--danger:hover:not(:disabled) { background: var(--danger-dark); }
.pager__info { color: var(--text-soft); font-size: .92rem; }

/* ---------- Seitenfuß ---------- */
.sitefooter {
    flex-shrink: 0;
    margin-top: 40px;
    padding: 24px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    text-align: center;
    color: var(--text-soft);
    font-size: .9rem;
}
.sitefooter__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 10px; }
.sitefooter__links a { color: var(--text-soft); text-decoration: none; font-weight: 600; }
.sitefooter__links a:hover { color: var(--accent-dark); }
.sitefooter__copy { color: var(--text-faint); }

/* ---------- Links ---------- */
a.logout { color: var(--danger); text-decoration: none; font-weight: 600; }
a.logout:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .post { flex-direction: column; }
    .post__side {
        flex-direction: row;
        flex: 1 1 auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        justify-content: flex-start;
        gap: 12px;
        padding: 14px 18px;
    }
    .post__body { padding: 16px 18px; }
    .forum-row { flex-direction: column; align-items: flex-start; }
    .forum-row__stats { flex-direction: row; gap: 16px; }
}

/* =========================================================
   Forum-Erweiterungen: Neues-Thema-Button, Pager,
   Ungelesen-Badge, Beitragszähler, Mehrfach-Zitieren
   ========================================================= */

/* "Neues Thema"-Aufklapper als Button */
.new-topic { border: 0; }
.new-topic__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .15s;
}
.new-topic__toggle::-webkit-details-marker { display: none; }
.new-topic__toggle::before { content: "+"; font-size: 1.1rem; line-height: 1; }
.new-topic__toggle:hover { background: var(--accent-dark); }
.new-topic[open] .new-topic__toggle { background: var(--accent-dark); }
.new-topic[open] .new-topic__toggle::before { content: "\2212"; } /* − */
.new-topic__form { margin-top: 16px; }

/* Seitennummerierung (Pager) */
.pager {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 16px;
}
.pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-soft);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    transition: background .15s, border-color .15s, color .15s;
}
.pager__link:hover { background: var(--accent-soft); border-color: #c7cdff; color: var(--accent-dark); }
.pager__link--active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    cursor: default;
}

/* Ungelesen-Markierung in der Themenliste */
.topic-flag--new { background: var(--ok-soft); color: var(--ok); }
.topic-row--unread td:first-child a { font-weight: 700; }
.topic-row--unread { background: var(--accent-softer); }
.last-post-link { color: var(--text-faint); text-decoration: none; }
.last-post-link:hover { color: var(--accent-dark); text-decoration: underline; }

/* Beitragszähler unter Avatar/Rang */
.post__count { font-size: .74rem; color: var(--text-faint); }

/* Aktiver Zitieren-Button (Beitrag ausgewählt) */
.df-quote-btn.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.df-quote-btn.is-active:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

/* Liste der gesammelten Zitate im Antwortformular */
.reply-quote-info { flex-wrap: wrap; }
.reply-quote-info__label { font-weight: 700; }

/* =========================================================
   Forum-Index: letzter Beitrag je Forum
   ========================================================= */
.forum-row__last {
    flex: 0 0 auto;
    max-width: 220px;
    text-align: right;
    font-size: .82rem;
    overflow: hidden;
}
.forum-row__last-topic {
    display: block;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.forum-row__last-meta { display: block; color: var(--text-faint); margin-top: 2px; }

/* =========================================================
   AJAX-Themen-Pager (Buttons statt Links)
   ========================================================= */
.pager button.pager__link {
    font-family: inherit;
    cursor: pointer;
}
#topics-card.is-loading { opacity: .55; pointer-events: none; transition: opacity .15s; }

@media (max-width: 720px) {
    .forum-row__last { max-width: none; text-align: left; width: 100%; }
}

/* =========================================================
   Admin: Forum-Verwaltung (Übersicht + Bearbeiten-Seiten)
   ========================================================= */

/* Kopfzeile einer Kategorie in der Übersicht */
.admin-cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.admin-cat-head__title { margin: 0; }
.admin-cat-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Liste der Foren einer Kategorie */
.admin-forum-list { display: flex; flex-direction: column; gap: 10px; }
.admin-forum-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.admin-forum-row__main { flex: 1 1 auto; min-width: 0; }
.admin-forum-row__name { font-weight: 700; }
.admin-forum-row__desc { display: block; color: var(--text-soft); font-size: .88rem; margin-top: 2px; }
.admin-forum-row__stats { flex: 0 0 auto; display: flex; gap: 14px; font-size: .82rem; }
.admin-forum-row__actions { flex: 0 0 auto; }

/* Bearbeiten-Seiten: Formulare */
.admin-form .card { margin-bottom: 16px; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    margin-top: 8px;
}
.form-field { display: flex; flex-direction: column; }
.form-field--wide { grid-column: 1 / -1; }
.form-field label { margin-bottom: 6px; font-weight: 600; font-size: .92rem; }
.field-hint { color: var(--text-faint); font-size: .8rem; margin-top: 4px; font-weight: 400; }

.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Große Aktions-Buttons */
.btn-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: .98rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}
.btn-lg:hover { background: var(--accent-dark); }
.btn-lg--danger { background: var(--danger); }
.btn-lg--danger:hover { background: var(--danger-dark); }

/* Gefahren-Karte (Löschen) */
.card--danger { border-color: #f4c3c4; }
.card--danger h2 { color: var(--danger-dark); }

@media (max-width: 720px) {
    .form-grid { grid-template-columns: 1fr; }
    .admin-forum-row { flex-direction: column; align-items: flex-start; }
    .admin-forum-row__stats { flex-direction: row; }
}