/*
 * ============================================================
 *  GAMEWATCH — Asgaros Forum Style
 *  Dunkles Design — passend zur Spielesuche (/spiele/)
 *  Schwarz / Weiß · modern · DSGVO-konform (keine externen Fonts)
 * ============================================================
 */

/* Schmalen Theme-Content auf der Forum-Seite aufweiten,
   damit das Forum zentriert über die Seite laufen kann. */
.gw-forum-page .entry-content,
.gw-forum-page .page-content,
.gw-forum-page .site-main,
.gw-forum-page .content-area,
.gw-forum-page main,
.gw-forum-page article,
.gw-forum-page .wp-block-post-content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: clamp(16px, 3vw, 48px) !important;
  padding-right: clamp(16px, 3vw, 48px) !important;
}

#af-wrapper {
  --gw-bg:     #050505;   /* Seitenhintergrund tiefschwarz */
  --gw-bg2:    #0d0d0d;   /* Karten / Boxen                */
  --gw-bg3:    #161616;   /* hellere Box / Hover           */
  --gw-bdr:    #262626;   /* Rahmen                        */
  --gw-fg:     #f2f2f2;   /* Haupttext hell                */
  --gw-muted:  #9a9a9a;   /* Sekundärtext                  */
  --gw-muted2: #5a5a5a;   /* sehr dezent                   */
  --gw-font-display: 'Space Grotesk', system-ui, sans-serif;
  --gw-font-sans:    'Inter', system-ui, sans-serif;
  --gw-font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ============================================================
   GRUNDLAYOUT
   ============================================================ */
#af-wrapper {
  font-family: var(--gw-font-sans) !important;
  color: var(--gw-fg) !important;
  background: var(--gw-bg) !important;
  line-height: 1.6 !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 0 28px !important;
  border-radius: 12px !important;
  border: 1px solid var(--gw-bdr) !important;
  overflow: hidden !important;
}
#af-wrapper * { box-sizing: border-box !important; }

#af-wrapper a { color: var(--gw-fg) !important; text-decoration: none !important; transition: opacity .15s ease !important; }
#af-wrapper a:hover { opacity: .6 !important; }

#af-wrapper h1, #af-wrapper h2, #af-wrapper h3 {
  font-family: var(--gw-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: var(--gw-fg) !important;
}

/* ============================================================
   NAVIGATIONSLEISTE — echte Asgaros-IDs (#forum-header etc.)
   ============================================================ */
#af-wrapper #forum-header,
#forum-header {
  background: var(--gw-bg2) !important;
  background-color: var(--gw-bg2) !important;
  border: none !important;
  border-bottom: 1px solid var(--gw-bdr) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}
#af-wrapper #forum-navigation,
#forum-navigation {
  background: transparent !important;
  display: flex !important;
  flex-wrap: wrap !important;
  flex: 1 1 auto !important;
}
#af-wrapper #forum-navigation a,
#forum-navigation a {
  background: transparent !important;
  color: var(--gw-fg) !important;
  font-family: var(--gw-font-mono) !important;
  font-size: .75rem !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 16px 18px !important;
  border: none !important;
  border-right: 1px solid var(--gw-bdr) !important;
  white-space: nowrap !important;
}
#af-wrapper #forum-navigation a:hover,
#forum-navigation a:hover {
  background: var(--gw-fg) !important;
  color: var(--gw-bg) !important;
  opacity: 1 !important;
}
/* Suchfeld in der Navi */
#af-wrapper #forum-search,
#forum-search {
  background: var(--gw-bg3) !important;
  border: none !important;
  border-left: 1px solid var(--gw-bdr) !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
}
#af-wrapper #forum-search input,
#forum-search input {
  background: transparent !important;
  border: none !important;
  color: var(--gw-fg) !important;
  padding: 10px !important;
}
#af-wrapper #forum-search .search-icon,
#forum-search .search-icon { color: var(--gw-fg) !important; }
/* Mobiles Menü-Button */
#af-wrapper #forum-navigation-mobile,
#forum-navigation-mobile {
  background: var(--gw-bg2) !important;
  border-bottom: 1px solid var(--gw-bdr) !important;
}
#af-wrapper #forum-navigation-mobile a,
#forum-navigation-mobile a {
  color: var(--gw-fg) !important;
  font-family: var(--gw-font-mono) !important;
  text-transform: uppercase !important;
  padding: 14px 18px !important;
}

/* Suchfeld in der Navi */
#af-wrapper .forum-search,
#af-wrapper #forum-search {
  background: var(--gw-bg3) !important;
  border: 1px solid var(--gw-bdr) !important;
  border-radius: 8px !important;
}

/* ============================================================
   KATEGORIE-HEADER — abgeschnittene Schrift fixen
   ============================================================ */
/* Abstand zwischen Kategorien: Header bekommt oben Luft */
#af-wrapper .title-element,
#af-wrapper .category,
#af-wrapper .forum-categenter,
#af-wrapper .category-title {
  background: var(--gw-bg2) !important;
  color: var(--gw-fg) !important;
  border: 1px solid var(--gw-bdr) !important;
  border-bottom: none !important;
  /* oben abgerundet — wie die Filterbox der Spieleübersicht */
  border-radius: 12px 12px 0 0 !important;
  margin: 36px 28px 0 !important;
  width: auto !important;
  font-family: var(--gw-font-mono) !important;
  font-size: .72rem !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  /* WICHTIG: genug Höhe + Zeilenhöhe, damit nichts abgeschnitten wird */
  line-height: 1.5 !important;
  padding: 16px 18px !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  white-space: normal !important;
  overflow: visible !important;
}
#af-wrapper .title-element *,
#af-wrapper .category * {
  line-height: 1.5 !important;
  overflow: visible !important;
}
#af-wrapper .title-element a,
#af-wrapper .category a { color: var(--gw-fg) !important; }
/* "Letzter Beitrag"-Label rechts */
#af-wrapper .title-element .lastpost-title,
#af-wrapper .title-element em { font-style: normal !important; color: var(--gw-muted) !important; }

/* ============================================================
   FORUM-/THEMEN-ZEILEN
   ============================================================ */
/* Innere Elemente: keine eigenen Außenrahmen mehr (verhindert
   überlappende Doppel-Rahmen / "Absätze" an den Kanten) */
#af-wrapper .content,
#af-wrapper .content-container {
  border: 1px solid var(--gw-bdr) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  background: var(--gw-bg2) !important;
  overflow: hidden !important;
  margin: 0 28px !important;
  width: auto !important;
}
#af-wrapper .content-element,
#af-wrapper .forum-element,
#af-wrapper .content-element.forum,
#af-wrapper .content-element.topic {
  background: var(--gw-bg2) !important;
  border: none !important;
  border-bottom: 1px solid var(--gw-bdr) !important;
  border-radius: 0 !important;
  padding: 20px 24px !important;
  margin: 0 !important;
  width: 100% !important;
  transition: background .15s ease !important;
}
/* letzte Zeile: unten rund, keine Trennlinie */
#af-wrapper .content-element:last-child,
#af-wrapper .forum-element:last-child {
  border-bottom: none !important;
  border-radius: 0 0 12px 12px !important;
}
/* Themen-Texte hell */
#af-wrapper .topic-name a,
#af-wrapper .topic-name {
  color: var(--gw-fg) !important;
  font-family: var(--gw-font-display) !important;
  font-weight: 600 !important;
}
#af-wrapper .topic-name small,
#af-wrapper .topic-stats,
#af-wrapper .topic-lastpost-small {
  color: var(--gw-muted) !important;
}
#af-wrapper .topic-status i,
#af-wrapper .forum-status i { color: var(--gw-fg) !important; }
#af-wrapper .forum-poster-summary,
#af-wrapper .topic-poster { color: var(--gw-muted) !important; }
#af-wrapper .forum-poster-summary a,
#af-wrapper .topic-poster a { color: var(--gw-muted) !important; }
/* letzte Zeile einer Kategorie: unten abgerundet, keine Trennlinie */
#af-wrapper .content-element:last-child,
#af-wrapper .forum-element:last-child {
  border-bottom: none !important;
  border-radius: 0 0 12px 12px !important;
}
#af-wrapper .content-element:nth-child(even) { background: var(--gw-bg3) !important; }
#af-wrapper .content-element:hover { background: var(--gw-bg3) !important; }

#af-wrapper .forum-name,
#af-wrapper .topic-name,
#af-wrapper .content-element .name a {
  font-family: var(--gw-font-display) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  color: var(--gw-fg) !important;
}
#af-wrapper .forum-description,
#af-wrapper .topic-subtext,
#af-wrapper .description {
  color: var(--gw-muted) !important;
  font-size: .85rem !important;
  line-height: 1.5 !important;
}

/* Themen/Beiträge-Zähler-Leiste (im Screenshot der schwarze Balken) */
#af-wrapper .forum-statistics,
#af-wrapper .topic-statistics,
#af-wrapper .statistics {
  background: var(--gw-bg) !important;
  color: var(--gw-muted) !important;
  font-family: var(--gw-font-mono) !important;
  font-size: .72rem !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  border: 1px solid var(--gw-bdr) !important;
  padding: 6px 12px !important;
  display: inline-block !important;
}

#af-wrapper .fas, #af-wrapper .far, #af-wrapper .fa { color: var(--gw-fg) !important; }

/* "Letzter Beitrag"-Spalte / "Noch keine Themen!" */
#af-wrapper .lastpost,
#af-wrapper .forum-lastpost,
#af-wrapper .no-topics {
  color: var(--gw-muted) !important;
  font-size: .85rem !important;
}

/* ============================================================
   THREAD-DETAIL & POSTS
   ============================================================ */
#af-wrapper .post-element {
  background: var(--gw-bg2) !important;
  border: 1px solid var(--gw-bdr) !important;
  border-radius: 0 !important;
  margin-bottom: 18px !important;
  overflow: hidden !important;
}
#af-wrapper .forum-post-header-container { background: var(--gw-bg3) !important; color: var(--gw-fg) !important; }
/* Beitragstext-Bereich dunkel + helle, gut lesbare Schrift.
   Asgaros setzt hier teils einen weißen Hintergrund — robust überschreiben. */
#af-wrapper .post-content,
#af-wrapper .post-text,
#af-wrapper .post-body,
#af-wrapper .forum-post-content,
#af-wrapper .post-element .post-content {
  padding: 20px !important;
  background: var(--gw-bg2) !important;
  background-color: var(--gw-bg2) !important;
  color: var(--gw-fg) !important;
  font-size: .98rem !important;
}
/* alle Textauszeichnungen im Beitrag hell, damit nichts grau-auf-hell bleibt */
#af-wrapper .post-content *,
#af-wrapper .post-text *,
#af-wrapper .forum-post-content * {
  color: var(--gw-fg) !important;
  background-color: transparent !important;
}
#af-wrapper .post-content a,
#af-wrapper .post-text a { color: #6ea8fe !important; text-decoration: underline !important; }
/* Fußzeile des Beitrags (Datum, Bearbeiten, Zitat, Reaktionen) */
#af-wrapper .post-footer,
#af-wrapper .post-meta,
#af-wrapper .post-date,
#af-wrapper .post-reactions,
#af-wrapper .post-content-footer {
  background: var(--gw-bg2) !important;
  color: var(--gw-muted) !important;
}

/* ============================================================
   POST-AUTOR-BLOCK
   ============================================================ */
#af-wrapper .post-author { background: var(--gw-bg3) !important; color: var(--gw-fg) !important; padding: 16px !important; }
#af-wrapper .post-author a,
#af-wrapper .post-author-block-name,
#af-wrapper .post-author .author-name {
  color: var(--gw-fg) !important;
  font-family: var(--gw-font-display) !important;
  font-weight: 600 !important;
}
#af-wrapper .post-author-block-subtext,
#af-wrapper .author-role {
  color: var(--gw-muted) !important;
  font-family: var(--gw-font-mono) !important;
  font-size: .68rem !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}
#af-wrapper .post-author img.avatar {
  border-radius: 0 !important;
  border: 1px solid var(--gw-bdr) !important;
  filter: grayscale(100%) !important;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
#af-wrapper .breadcrumbs,
#af-wrapper #breadcrumbs {
  font-family: var(--gw-font-mono) !important;
  font-size: .72rem !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--gw-muted) !important;
  padding: 16px 28px !important;
  border-bottom: 1px solid var(--gw-bdr) !important;
  margin-bottom: 0 !important;
  background: var(--gw-bg2) !important;
}
#af-wrapper .breadcrumbs a { color: var(--gw-muted) !important; }
#af-wrapper .breadcrumbs a:hover { color: var(--gw-fg) !important; }

/* "Forum"-Überschrift / Titelbereich unter dem Breadcrumb */
#af-wrapper > h1,
#af-wrapper .forum-title-main,
#af-wrapper #forum-title {
  padding: 22px 28px !important;
  margin: 0 !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
#af-wrapper .pagination a,
#af-wrapper .pagination span {
  border: 1px solid var(--gw-bdr) !important;
  border-radius: 0 !important;
  color: var(--gw-fg) !important;
  font-family: var(--gw-font-mono) !important;
  padding: 6px 12px !important;
  background: var(--gw-bg2) !important;
}
#af-wrapper .pagination .current { background: var(--gw-fg) !important; color: var(--gw-bg) !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
#af-wrapper .button,
#af-wrapper input[type="submit"],
#af-wrapper button,
#af-wrapper .af-button {
  background: var(--gw-fg) !important;
  color: var(--gw-bg) !important;
  border: 1px solid var(--gw-fg) !important;
  border-radius: 8px !important;
  font-family: var(--gw-font-mono) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  transition: opacity .15s ease !important;
}
#af-wrapper .button:hover,
#af-wrapper input[type="submit"]:hover,
#af-wrapper button:hover,
#af-wrapper .af-button:hover { opacity: .8 !important; }

/* ============================================================
   EDITOR / FORMULARE
   ============================================================ */
#af-wrapper .editor-element { background: var(--gw-bg2) !important; border: 1px solid var(--gw-bdr) !important; border-radius: 0 !important; }
/* "Neues Thema"-Kopf + Betreff-Zeile + Editor-Container dunkel */
#af-wrapper #editor,
#af-wrapper .editor,
#af-wrapper #editorform,
#af-wrapper .editor-title,
#af-wrapper .editor-subject,
#af-wrapper .subject-container,
#af-wrapper .form-row,
#af-wrapper .bbcode-editor,
#af-wrapper .wp-editor-container,
#af-wrapper .wp-editor-wrap,
#af-wrapper .mce-panel,
#af-wrapper .mce-toolbar-grp,
#af-wrapper .mce-statusbar,
#af-wrapper .quicktags-toolbar {
  background: var(--gw-bg2) !important;
  background-color: var(--gw-bg2) !important;
  border-color: var(--gw-bdr) !important;
  color: var(--gw-fg) !important;
}
#af-wrapper label,
#af-wrapper .editor-label { color: var(--gw-fg) !important; }
/* eigentliches Schreibfeld bleibt hell (gute Lesbarkeit beim Tippen) */
#af-wrapper .mce-edit-area,
#af-wrapper .mce-content-body,
#af-wrapper textarea#message,
#af-wrapper .editor-textarea {
  background: #ffffff !important;
  color: #111111 !important;
}
#af-wrapper input[type="text"],
#af-wrapper input[type="email"],
#af-wrapper input[type="search"],
#af-wrapper input[type="password"],
#af-wrapper textarea,
#af-wrapper select {
  background: var(--gw-bg3) !important;
  border: 1px solid var(--gw-bdr) !important;
  border-radius: 8px !important;
  color: var(--gw-fg) !important;
  font-family: var(--gw-font-sans) !important;
  padding: 10px 12px !important;
}
#af-wrapper input::placeholder, #af-wrapper textarea::placeholder { color: var(--gw-muted2) !important; }
#af-wrapper input:focus, #af-wrapper textarea:focus, #af-wrapper select:focus {
  outline: 2px solid var(--gw-fg) !important;
  outline-offset: 0 !important;
}
/* Betreff-Feld gezielt: exakter Selektor + umgebendes span,
   damit beim Anklicken/Tippen keine weißen Ränder erscheinen */
#af-wrapper input.editor-subject-input,
#af-wrapper input#subject,
#af-wrapper .editor-subject-input {
  background: var(--gw-bg3) !important;
  background-color: var(--gw-bg3) !important;
  border: 1px solid var(--gw-bdr) !important;
  border-radius: 8px !important;
  color: var(--gw-fg) !important;
  width: 100% !important;
  box-shadow: none !important;
}
#af-wrapper input.editor-subject-input:focus,
#af-wrapper input#subject:focus,
#af-wrapper .editor-subject-input:focus {
  background: var(--gw-bg3) !important;
  background-color: var(--gw-bg3) !important;
  outline: 2px solid var(--gw-fg) !important;
  box-shadow: none !important;
}
/* das umgebende <span> der Betreff-Zeile darf nicht weiß sein */
#af-wrapper .editor-subject,
#af-wrapper .editor-subject span,
#af-wrapper span:has(> input.editor-subject-input) {
  background: var(--gw-bg2) !important;
  background-color: var(--gw-bg2) !important;
}

/* ROBUST: Der GESAMTE Editor-Bereich + alle Tabellen/Zeilen/Zellen/
   Container darin werden dunkel. Fängt die weiße Betreff-Zeile
   unabhängig von der genauen Verschachtelung ab. */
#af-wrapper .editor-element,
#af-wrapper .editor-element *:not(input):not(textarea):not(a):not(.mce-content-body):not(.mce-edit-area),
#af-wrapper #editor-fields,
#af-wrapper #editor-fields *,
#af-wrapper .editor-row,
#af-wrapper .editor-row *,
#af-wrapper form table,
#af-wrapper form tr,
#af-wrapper form td,
#af-wrapper form th,
#af-wrapper form tbody,
#af-wrapper .subject {
  background-color: var(--gw-bg2) !important;
  border-color: var(--gw-bdr) !important;
}
/* Eingabefelder darin behalten ihren etwas helleren Feld-Ton */
#af-wrapper .editor-element input[type="text"],
#af-wrapper .editor-element input.editor-subject-input,
#af-wrapper #editor-fields input[type="text"],
#af-wrapper form input.editor-subject-input {
  background-color: var(--gw-bg3) !important;
  color: var(--gw-fg) !important;
}

/* ENTSCHEIDEND: Der weiße Rand beim Tippen ist der Fokus-Schatten/Glow
   des Betreff-Feldes. Alle Schatten/Outlines/Rahmen-Aufheller killen. */
#af-wrapper input.editor-subject-input,
#af-wrapper input#subject,
#af-wrapper input.editor-subject-input:focus,
#af-wrapper input.editor-subject-input:active,
#af-wrapper input.editor-subject-input:hover,
#af-wrapper input#subject:focus {
  background: var(--gw-bg3) !important;
  background-color: var(--gw-bg3) !important;
  color: var(--gw-fg) !important;
  border: 1px solid var(--gw-bdr) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* manche Browser zeichnen einen weißen autofill-Hintergrund */
#af-wrapper input.editor-subject-input:-webkit-autofill,
#af-wrapper input#subject:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--gw-bg3) inset !important;
  -webkit-text-fill-color: var(--gw-fg) !important;
}
#af-wrapper .editor-toolbar,
#af-wrapper .bbcode-toolbar { background: var(--gw-bg3) !important; border-radius: 0 !important; }
#af-wrapper .editor-toolbar a,
#af-wrapper .bbcode-toolbar a { color: var(--gw-fg) !important; }

/* ============================================================
   BADGES
   ============================================================ */
#af-wrapper .topic-sticky,
#af-wrapper .sticky-badge,
#af-wrapper .badge,
#af-wrapper .label {
  background: var(--gw-fg) !important;
  color: var(--gw-bg) !important;
  border-radius: 6px !important;
  font-family: var(--gw-font-mono) !important;
  font-size: .65rem !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 3px 8px !important;
}

/* ============================================================
   PROFILE
   ============================================================ */
#af-wrapper #profile-layer,
#af-wrapper #profile-content {
  background: var(--gw-bg2) !important;
  border: 1px solid var(--gw-bdr) !important;
  border-radius: 0 !important;
  color: var(--gw-fg) !important;
}
#af-wrapper img.avatar { border-radius: 0 !important; }

/* ============================================================
   ONLINE-STATISTIK
   ============================================================ */
#af-wrapper #statistics-online-users {
  background: var(--gw-bg2) !important;
  border: 1px solid var(--gw-bdr) !important;
  border-radius: 0 !important;
  font-family: var(--gw-font-mono) !important;
  font-size: .75rem !important;
  color: var(--gw-muted) !important;
}
#af-wrapper .user-online .avatar { border: 1px solid #1e8e3e !important; }
#af-wrapper .user-offline .avatar { opacity: .6 !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  #af-wrapper { margin: 0 !important; border-radius: 0 !important; }
  #af-wrapper .forum-post-header-container { flex-direction: column !important; }
  #af-wrapper .post-author { width: 100% !important; }
  #af-wrapper .content-element { padding: 14px 16px !important; }
  #af-wrapper .forum-menu a,
  #af-wrapper .top-menu a { padding: 12px 14px !important; font-size: .72rem !important; }
}