/* ================================================
   SAIL THE SEAS – MyBB Theme CSS
   Dunkel · Dramatisch · Piraten-Atmosphäre
   ================================================ */

@import url(https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap);

/* ── FARB-TOKENS ─────────────────────────────── */
:root {
  --ink:        #0d0b0a;
  --deep:       #13100f;
  --surface:    #1c1714;
  --panel:      #221e1a;
  --rim:        #2e2720;
  --gold:       #c8973a;
  --gold-dim:   #8a6520;
  --crimson:    #7a1c1c;
  --crimson-lt: #a02828;
  --salt:       #e8dcc8;
  --mist:       #9e9080;
  --anchor:     #c8973a;
}

/* ── RESET & BASE ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(122,28,28,0.18) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8973a' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: var(--salt);
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
}

a { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--salt); }

/* ── WRAPPER ─────────────────────────────────── */
#wrapper, .wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ── HEADER ──────────────────────────────────── */
#header {
  background: linear-gradient(180deg, #0d0b0a 0%, #1a1210 100%);
  border-bottom: none;
  padding: 0;
  padding-bottom: 24px;
  position: relative;
  overflow: hidden;
}

#header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent 0%, var(--ink) 100%);
  pointer-events: none;
}

#logo {
  padding: 0;
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

#logo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ── CUSTOM TOPBAR (Avatar/Name links, Icon-Links rechts) ── */
.custom-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: var(--deep);
  border-bottom: 1px solid var(--rim);
  padding: 10px 24px;
  gap: 16px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.custom-topbar-left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.custom-topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  object-fit: cover;
}

.custom-topbar-name {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--gold);
  text-transform: uppercase;
}

.custom-topbar-name:hover {
  color: var(--salt);
}

.custom-topbar-textlink {
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mist);
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}

.custom-topbar-textlink:hover {
  color: var(--gold);
  border-bottom-color: var(--gold-dim);
}

.custom-topbar-right {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.custom-topbar-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--mist);
  text-align: center;
  min-width: 48px;
}

.custom-topbar-icon .icon {
  font-size: 1.1rem;
  line-height: 1;
}

.custom-topbar-icon .label {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mist);
}

.custom-topbar-icon:hover .icon,
.custom-topbar-icon:hover .label {
  color: var(--gold);
}

@media (max-width: 768px) {
  .custom-topbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .custom-topbar-right {
    gap: 14px;
  }
}

/* ── NAVIGATION ──────────────────────────────── */
#nav, .navigation {
  background: var(--deep);
  border-bottom: 1px solid var(--rim);
  padding: 0;
}

/* MyBB Header-Nav (die Links ganz oben: Portal, Suche, etc.) */
#panel, #menu {
  background: var(--deep);
  border-bottom: 1px solid var(--rim);
  padding: 0 16px;
}

#menu ul, #nav ul, .navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 0;
}

#menu ul li, #nav ul li, .navigation ul li {
  list-style: none !important;
  display: inline-block;
}

/* MyBB top_links menu (Portal, Suche, Mitglieder, Kalender, Hilfe) */
ul.menu.top_links {
  list-style: none !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--deep);
  border-bottom: 1px solid var(--rim);
}

ul.menu.top_links li {
  display: inline-block;
  list-style: none !important;
  margin: 0 !important;
}

ul.menu.top_links li a {
  display: block;
  padding: 9px 18px;
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mist);
  border: 1px solid transparent;
  border-radius: 2px;
  transition: color .2s, border-color .2s, background .2s;
}

ul.menu.top_links li a:hover {
  color: var(--gold);
  border-color: var(--rim);
  background: var(--panel);
}

/* Generic fallback for any other MyBB nav lists */
#nav ul, .navigation ul, #menu ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
}

#nav ul li, .navigation ul li, #menu ul li {
  list-style: none !important;
  display: inline-block;
}

#nav ul li a, .navigation ul li a, #menu ul li a {
  display: block;
  padding: 9px 18px;
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mist);
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}

#nav ul li a:hover, .navigation ul li a:hover, #menu ul li a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ── BREADCRUMB ──────────────────────────────── */
.navigation_breadcrumb, .breadcrumb {
  background: transparent;
  padding: 10px 0;
  font-size: .82rem;
  color: var(--mist);
}

.navigation_breadcrumb a, .breadcrumb a { color: var(--gold-dim); }
.navigation_breadcrumb a:hover, .breadcrumb a:hover { color: var(--gold); }

/* ── FORUM CATEGORY HEADERS ──────────────────── */
.thead, table.tborder thead tr td,
.category_header, .forum_category .thead {
  background: linear-gradient(90deg, var(--crimson) 0%, #4a1010 100%);
  border: 1px solid var(--crimson-lt);
  color: var(--salt) !important;
  font-family: 'Cinzel', serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 14px;
}

/* ── FORUM TABLE ─────────────────────────────── */
table.tborder {
  border: 1px solid var(--rim);
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
  background: var(--surface);
}

.trow1, tr.trow1 td {
  background: var(--surface);
  border-bottom: 1px solid var(--rim);
}

.trow2, tr.trow2 td {
  background: var(--panel);
  border-bottom: 1px solid var(--rim);
}

.trow1:hover, .trow2:hover {
  background: rgba(200,151,58,.05);
}

table.tborder td {
  padding: 11px 14px;
  vertical-align: middle;
  color: var(--salt);
}

/* Forum name links */
.forumtitle a, .subject_new a, .subject_old a {
  font-family: 'Cinzel', serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--gold) !important;
  letter-spacing: .04em;
}

.forumtitle a:hover, .subject_new a:hover { color: var(--salt) !important; }

/* Forum description */
.forumdescription, .forum_description {
  color: var(--mist);
  font-size: .9rem;
  margin-top: 3px;
}

/* Stats columns */
.trow1 .smalltext, .trow2 .smalltext,
.lastpost, .forum_lastpost {
  color: var(--mist);
  font-size: .82rem;
}

/* ── TFOOT / TABLE FOOTER ────────────────────── */
.tfoot, table.tborder tfoot tr td {
  background: var(--deep);
  border-top: 1px solid var(--rim);
  color: var(--mist);
  font-size: .82rem;
  padding: 8px 14px;
}

/* ── THREAD / POST AREA ──────────────────────── */
.post_body, .post-content {
  background: var(--surface);
  border: 1px solid var(--rim);
  border-radius: 2px;
  padding: 20px;
  margin-bottom: 16px;
}

.post_head {
  background: var(--panel);
  border-bottom: 1px solid var(--rim);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post_author a {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: var(--gold) !important;
}

/* ── POSTBIT ─────────────────────────────────── */
.postbit, .post {
  display: grid !important;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto auto;
  background: var(--surface);
  border: 1px solid var(--rim);
  margin-bottom: 14px;
}

.post_author {
  grid-column: 1;
  grid-row: 1 / 3;
  background: var(--panel);
  border-right: 1px solid var(--rim);
  padding: 16px;
  text-align: center;
  overflow: hidden;
}

.post_author img.avatar, .post_author .author_avatar img, .author_avatar img {
  max-width: 240px !important;
  max-height: 240px !important;
  width: 240px !important;
  height: 240px !important;
  object-fit: cover;
  border: 1px solid var(--rim);
  margin-bottom: 4px;
}

.post_content {
  grid-column: 2;
  grid-row: 1;
  padding: 16px 20px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.author_information {
  margin-top: 10px;
}

.author_statistics {
  margin-top: 12px;
  text-align: left;
  font-size: .8rem;
  color: var(--mist);
}

.post_controls {
  grid-column: 1 / 3;
  grid-row: 2;
  padding: 10px 20px;
  border-top: 1px solid var(--rim);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── USERGROUPS / RANKS ──────────────────────── */
.usergroup_pirat, .group_pirat    { color: var(--gold); }
.usergroup_marine, .group_marine  { color: #4a90d9; }
.usergroup_admin                  { color: var(--crimson-lt); }

/* ── BUTTONS ─────────────────────────────────── */
input[type="submit"], input[type="button"], button,
.button, .btn {
  background: linear-gradient(180deg, #b8832a 0%, #8a6020 100%);
  border: 1px solid var(--gold-dim);
  color: var(--ink);
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 20px;
  cursor: pointer;
  transition: all .2s;
  border-radius: 1px;
}

input[type="submit"]:hover, button:hover, .button:hover, .btn:hover {
  background: linear-gradient(180deg, #d4a040 0%, #b8832a 100%);
  box-shadow: 0 0 12px rgba(200,151,58,.3);
}

/* ── FORMS ───────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
textarea, select {
  background: var(--deep);
  border: 1px solid var(--rim);
  color: var(--salt);
  font-family: 'Crimson Text', serif;
  font-size: 1rem;
  padding: 8px 12px;
  width: 100%;
  transition: border-color .2s;
  border-radius: 1px;
}

input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, textarea:focus, select:focus {
  border-color: var(--gold-dim);
  outline: none;
  box-shadow: 0 0 0 2px rgba(200,151,58,.12);
}

select option { background: var(--deep); }

/* ── QUICK REPLY / EDITOR ────────────────────── */
#quick_reply_form, .editor-wrapper {
  background: var(--surface);
  border: 1px solid var(--rim);
  padding: 16px;
  margin-top: 20px;
}

/* ── PAGINATION ──────────────────────────────── */
.pagination {
  color: var(--mist);
  font-size: .85rem;
  margin: 12px 0;
}

.pagination a {
  background: var(--panel);
  border: 1px solid var(--rim);
  color: var(--gold-dim);
  display: inline-block;
  padding: 4px 10px;
  margin: 0 2px;
  transition: all .2s;
}

.pagination a:hover, .pagination .active {
  background: var(--crimson);
  border-color: var(--crimson-lt);
  color: var(--salt);
}

/* ── ONLINE / STATUS LEGEND ──────────────────── */
.online_legend { color: var(--mist); font-size: .82rem; }
.online  { color: #5a9e5a; }
.offline { color: var(--mist); }

/* ── PORTAL / WELCOME BOX ────────────────────── */
.portal_block, .welcomeblock {
  background: var(--surface);
  border: 1px solid var(--rim);
  border-top: 2px solid var(--crimson);
  padding: 16px;
  margin-bottom: 16px;
}

/* Welcome block link lists (Benutzer-CP, Mod-CP, Admin-CP, etc.) */
.welcomeblock ul, #panel ul {
  list-style: none !important;
  margin: 8px 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.welcomeblock ul li, #panel ul li {
  list-style: none !important;
  display: inline-block;
}

.welcomeblock ul li a, #panel ul li a {
  color: var(--gold-dim);
  font-size: .9rem;
}

.welcomeblock ul li a:hover, #panel ul li a:hover {
  color: var(--gold);
}

/* ── ALERTS / PM BOX ─────────────────────────── */
.pm_alert, .alert {
  background: rgba(122,28,28,.25);
  border: 1px solid var(--crimson);
  color: var(--salt);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: .9rem;
}

/* ── FOOTER ──────────────────────────────────── */
#footer, .footer {
  background: var(--deep);
  border-top: 1px solid var(--rim);
  color: var(--mist);
  font-size: .8rem;
  padding: 20px 0;
  text-align: center;
  margin-top: 30px;
  position: relative;
}

#footer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 200px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

#footer a { color: var(--gold-dim); }
#footer a:hover { color: var(--gold); }

/* ── FORUM LEGEND (Status-Icons-Erklärung) ──── */
.forum_legend, dl.forum_legend {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 28px;
  list-style: none !important;
  margin: 16px 0 !important;
  padding: 0 !important;
  color: var(--mist);
  font-size: .85rem;
}

.forum_legend dt, .forum_legend dd {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
}

.forum_legend dt {
  margin-right: 6px !important;
}

.forum_status {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rim);
}

.forum_status.forum_on { background: var(--gold); }
.forum_status.forum_off { background: var(--mist); }
.forum_status.forum_offclose { background: var(--crimson-lt); }
.forum_status.forum_offlink { background: var(--gold-dim); }

/* ── FOOTER BOTTOM LINKS (Foren-Team, Kontakt, etc.) ── */
.footer .lower {
  padding: 14px 0;
}

ul.menu.bottom_links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
}

ul.menu.bottom_links li {
  list-style: none !important;
  display: inline-block;
}

ul.menu.bottom_links li a {
  color: var(--gold-dim);
  font-size: .82rem;
  letter-spacing: .04em;
}

ul.menu.bottom_links li a:hover {
  color: var(--gold);
}

#footer .language {
  text-align: center;
  margin-bottom: 14px;
}

#footer select {
  width: auto;
  display: inline-block;
  margin-right: 8px;
}

#current_time, #copyright {
  display: block;
  text-align: center;
  font-size: .78rem;
  color: var(--mist);
  margin-top: 6px;
}

/* ── FRAKTIONS-LEGENDE IM FOOTER ─────────────── */
.faction-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 32px;
  padding: 16px 0;
  margin: 0 0 14px;
  border-top: 1px solid var(--rim);
  border-bottom: 1px solid var(--rim);
}

.faction-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mist);
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.faction-legend-item .faction-icon {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.1rem;
  line-height: 1;
}

/* ── CHARAKTERBOGEN / PROFIL ─────────────────── */
.charsheet {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin: 20px 0;
  flex-wrap: wrap;
}

.charsheet-left {
  flex: 0 0 280px;
  background: var(--surface);
  border: 1px solid var(--rim);
  border-top: 2px solid var(--gold-dim);
  padding: 20px;
}

.charsheet-image {
  text-align: center;
  margin-bottom: 16px;
}

.charsheet-image img {
  max-width: 300px;
  max-height: 300px;
  width: 100%;
  height: auto;
  border: 1px solid var(--rim);
  border-radius: 2px;
  object-fit: cover;
}

.charsheet-name {
  text-align: center;
  margin-bottom: 6px;
}

.charsheet-name strong {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--gold);
  letter-spacing: .05em;
}

.charsheet-title {
  display: block;
  font-size: .8rem;
  color: var(--mist);
  margin-top: 2px;
}

.charsheet-meta {
  text-align: center;
  margin-bottom: 16px;
  font-size: .82rem;
  color: var(--mist);
}

.charsheet-infotable {
  width: 100%;
  font-size: .82rem;
  border-top: 1px solid var(--rim);
  padding-top: 12px;
}

.charsheet-infotable td {
  padding: 5px 0;
  color: var(--mist);
}

.charsheet-infotable td:first-child {
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-dim);
  width: 50%;
}

.charsheet-infotable td:last-child {
  color: var(--salt);
  text-align: right;
}

.charsheet-right {
  flex: 1;
  min-width: 320px;
}

.charsheet-section {
  background: var(--surface);
  border: 1px solid var(--rim);
  margin-bottom: 16px;
}

.charsheet-section h3 {
  margin: 0;
  padding: 10px 16px;
  background: linear-gradient(90deg, var(--crimson) 0%, #4a1010 100%);
  border-bottom: 1px solid var(--crimson-lt);
  font-family: 'Cinzel', serif;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--salt);
}

.charsheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  padding: 16px;
}

.charsheet-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.charsheet-field-full {
  padding: 0 16px 16px;
}

.charsheet-label {
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.charsheet-value {
  color: var(--salt);
  font-size: .95rem;
}

.charsheet-field-full p {
  margin: 4px 0 0;
  color: var(--salt);
  line-height: 1.6;
  font-size: .92rem;
}

.charsheet-quote {
  font-style: italic;
  color: var(--gold) !important;
}

.charsheet-profilefields {
  padding: 16px;
  color: var(--salt);
  line-height: 1.8;
}

/* ── PROFIL-TABS ──────────────────────────────── */
.charsheet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--rim);
  margin-bottom: 0;
}

.charsheet-tab {
  background: var(--surface);
  border: 1px solid var(--rim);
  border-bottom: none;
  color: var(--mist);
  font-family: 'Cinzel', serif;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  transition: color .2s, background .2s;
}

.charsheet-tab:hover {
  color: var(--gold);
}

.charsheet-tab.active {
  background: var(--panel);
  color: var(--gold);
  border-color: var(--gold-dim);
  position: relative;
  top: 1px;
}

.charsheet-tabpanel {
  display: none;
  background: var(--surface);
  border: 1px solid var(--rim);
  border-top: 1px solid var(--gold-dim);
  margin-bottom: 16px;
}

.charsheet-tabpanel.active {
  display: block;
}

/* ── THEMENBEWERTUNG (STERNE) AUSBLENDEN ──────── */
.rating_stars, .star-rating, span.rating,
.rate_thread, #rating, .threadrate,
.inline_rating {
  display: none !important;
}

/* ── ANZEIGEMODUS-WECHSLER AUSBLENDEN ─────────── */
.modethread, #modethread, .display_mode,
table.modethread {
  display: none !important;
}

a[href*="mode=threaded"], a[href*="mode=linear"] {
  display: none !important;
}

/* ── FRAKTIONS-GRUPPENFARBEN ───────────────────── */
.group-piraten, .faction-legend-item.group-piraten {
    color:#d46a4a !important;
    font-weight:bold;
    border-bottom:2px solid #d46a4a;
    padding-bottom:1px;
}
.group-marine, .faction-legend-item.group-marine {
    color:#5f9fd6 !important;
    font-weight:bold;
    border-bottom:2px solid #5f9fd6;
    padding-bottom:1px;
}
.group-gelehrte, .faction-legend-item.group-gelehrte {
    color:#d8b45d !important;
    font-weight:bold;
    border-bottom:2px solid #d8b45d;
    padding-bottom:1px;
}
.group-zivilisten, .faction-legend-item.group-zivilisten {
    color:#8db36d !important;
    font-weight:bold;
    border-bottom:2px solid #8db36d;
    padding-bottom:1px;
}

/* ── POSTBIT CHARAKTERFELDER ──────────────────── */
.postbit-charfields {
  margin: 12px 0;
  padding-top: 12px;
  border-top: 1px solid var(--rim);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.postbit-charfield {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: .78rem;
}

.postbit-charlabel {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.postbit-charvalue {
  color: var(--salt);
  text-align: right;
}

.postbit-charquote {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rim);
  font-style: italic;
  font-size: .82rem;
  color: var(--gold);
  text-align: center;
}

@media (max-width: 768px) {
  .charsheet {
    flex-direction: column;
  }
  .charsheet-left {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ── UNTERFOREN-LISTE AUSBLENDEN ──────────────── */
.subforums, .sub_forums, .forumbit .subforums {
  display: none !important;
}

/* ── CODE / SCROLLBARER CODEBLOCK ─────────────── */
/* <code>...</code> wird immer zur eigenen, scrollbaren Box statt Inline-Text */
.codeblock, code, pre {
  background: var(--deep);
  border: 1px solid var(--rim);
  border-radius: 2px;
  padding: 12px 16px;
  font-family: 'Courier New', Consolas, monospace;
  font-size: .82rem;
  color: var(--salt);
}
.codeblock, pre, code {
  max-height: 260px;
  overflow: auto;
  white-space: pre;
}
code {
  display: block;
  margin: 10px 0;
  line-height: 1.5;
}
.codeblock::-webkit-scrollbar, pre::-webkit-scrollbar, code::-webkit-scrollbar {
  width: 6px; height: 6px;
}
.codeblock::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb, code::-webkit-scrollbar-thumb {
  background: var(--rim);
  border-radius: 3px;
}
.codeblock::-webkit-scrollbar-thumb:hover, pre::-webkit-scrollbar-thumb:hover, code::-webkit-scrollbar-thumb:hover {
  background: var(--gold-dim);
}

/* ── SCROLLBAR ───────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--rim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* ── SELECTION ───────────────────────────────── */
::selection { background: rgba(200,151,58,.3); color: var(--salt); }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 768px) {
  #logo a { font-size: 1.6rem; }
  #nav ul { flex-wrap: wrap; }
  .postbit .postbit-wrapper { flex-direction: column; }
  .postbit_author { border-right: none; border-bottom: 1px solid var(--rim); min-width: unset; }
  table.tborder { font-size: .88rem; }
}