/*
 * ============================================================
 *  GAMEWATCH — Asgaros Forum Custom CSS
 *  Design: Schwarz/Weiß, Modern, Zeitlos
 *  Einbinden: WordPress → Design → Customizer → Zusätzliches CSS
 *  Oder: WordPress → Design → CSS-Editor (falls vorhanden)
 * ============================================================
 *
 *  INHALTSVERZEICHNIS
 *  1. Google Font Import (DM Sans)
 *  2. CSS-Variablen (zentrale Steuerung)
 *  3. Wrapper & Grundlayout
 *  4. Kategorien & Forum-Header
 *  5. Forum-Tabelle & Zeilen
 *  6. Statistik-Spalten & Icons
 *  7. Thread-Liste (Topic-Übersicht)
 *  8. Thread-Detail & Posts
 *  9. Post-Autor-Block
 * 10. Breadcrumb & Navigation
 * 11. Pagination
 * 12. Buttons & Aktionen
 * 13. Texteditor / Reply-Formular
 * 14. Badges (Angeheftet, Gelöst, Wichtig)
 * 15. Benutzerprofile & Avatar
 * 16. Suchformular
 * 17. Online-Indikator & Status
 * 18. Responsive (Mobile)
 * ============================================================
 */


/* ============================================================
   1. GOOGLE FONT IMPORT
   Passend zum GameWatch-Look: DM Sans — modern, klar, zeitlos
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');


/* ============================================================
   2. CSS-VARIABLEN — hier alles zentral anpassen
   ============================================================ */

:root {
  --gw-font:          'DM Sans', system-ui, sans-serif;
  --gw-black:         #0a0a0a;
  --gw-white:         #ffffff;
  --gw-gray-50:       #f7f7f7;
  --gw-gray-100:      #f0f0f0;
  --gw-gray-200:      #e4e4e4;
  --gw-gray-400:      #a0a0a0;
  --gw-gray-600:      #6b6b6b;
  --gw-gray-800:      #2a2a2a;
  --gw-accent:        #0a0a0a;      /* Akzentfarbe — schwarz */
  --gw-accent-hover:  #2a2a2a;
  --gw-radius-sm:     4px;
  --gw-radius-md:     8px;
  --gw-radius-lg:     12px;
  --gw-border:        1px solid var(--gw-gray-200);
  --gw-transition:    all 0.18s ease;
}


/* ============================================================
   3. WRAPPER & GRUNDLAYOUT
   ============================================================ */

#asgaros-forum,
#asgaros-forum * {
  font-family: var(--gw-font) !important;
  box-sizing: border-box;
}

#asgaros-forum {
  color: var(--gw-black);
  background: transparent;
  line-height: 1.65;
  font-size: 15px;
  font-weight: 400;
}

/* Abstand zwischen Sektionen */
#asgaros-forum .forum-group {
  margin-bottom: 2rem;
}


/* ============================================================
   4. KATEGORIEN & FORUM-HEADER
   ============================================================ */

#asgaros-forum .category-header,
#asgaros-forum .forum-header {
  background: var(--gw-black) !important;
  color: var(--gw-white) !important;
  border: none !important;
  border-radius: var(--gw-radius-md) var(--gw-radius-md) 0 0 !important;
  padding: 12px 20px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#asgaros-forum .category-header a,
#asgaros-forum .forum-header a {
  color: var(--gw-white) !important;
  text-decoration: none !important;
}

/* Kategorie-Beschreibung */
#asgaros-forum .category-description {
  font-size: 13px;
  color: var(--gw-gray-400);
  margin-top: 2px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
}


/* ============================================================
   5. FORUM-TABELLE & ZEILEN
   ============================================================ */

#asgaros-forum table.forum-table {
  width: 100%;
  border-collapse: collapse;
  border: var(--gw-border);
  border-top: none;
  border-radius: 0 0 var(--gw-radius-md) var(--gw-radius-md);
  overflow: hidden;
  background: var(--gw-white);
}

#asgaros-forum table.forum-table thead th {
  background: var(--gw-gray-50) !important;
  color: var(--gw-gray-600) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
  border-bottom: var(--gw-border) !important;
  border-top: none !important;
}

#asgaros-forum table.forum-table tbody tr {
  border-bottom: var(--gw-border);
  transition: var(--gw-transition);
}

#asgaros-forum table.forum-table tbody tr:last-child {
  border-bottom: none;
}

#asgaros-forum table.forum-table tbody tr:hover {
  background: var(--gw-gray-50);
}

#asgaros-forum table.forum-table td {
  padding: 16px 20px;
  vertical-align: middle;
  border: none;
}


/* ============================================================
   6. FORUM-NAME, BESCHREIBUNG & STATISTIK-SPALTEN
   ============================================================ */

#asgaros-forum .forum-name {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--gw-black) !important;
  text-decoration: none !important;
  transition: var(--gw-transition);
  display: block;
  margin-bottom: 3px;
}

#asgaros-forum .forum-name:hover {
  color: var(--gw-gray-600) !important;
}

#asgaros-forum .forum-description {
  font-size: 13px !important;
  color: var(--gw-gray-600) !important;
  font-weight: 300 !important;
  margin-top: 2px !important;
  line-height: 1.5 !important;
}

/* Statistik-Zahlen (Posts, Themen) */
#asgaros-forum .forum-topics,
#asgaros-forum .forum-posts,
#asgaros-forum td.topics,
#asgaros-forum td.posts,
#asgaros-forum td.replies {
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--gw-black) !important;
}

/* Letzter Beitrag */
#asgaros-forum .forum-lastpost,
#asgaros-forum td.lastpost {
  font-size: 12px !important;
  color: var(--gw-gray-600) !important;
  line-height: 1.5 !important;
}

#asgaros-forum .forum-lastpost a,
#asgaros-forum td.lastpost a {
  color: var(--gw-black) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: var(--gw-transition);
}

#asgaros-forum .forum-lastpost a:hover,
#asgaros-forum td.lastpost a:hover {
  color: var(--gw-gray-600) !important;
}


/* ============================================================
   7. THREAD-LISTE (TOPIC-ÜBERSICHT)
   ============================================================ */

#asgaros-forum .topic-head {
  background: var(--gw-gray-50) !important;
  border-bottom: var(--gw-border) !important;
}

#asgaros-forum .topic-name {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--gw-black) !important;
  text-decoration: none !important;
  transition: var(--gw-transition);
}

#asgaros-forum .topic-name:hover {
  color: var(--gw-gray-600) !important;
}

/* Starter-Info unter dem Threadtitel */
#asgaros-forum .topic-starter {
  font-size: 12px !important;
  color: var(--gw-gray-600) !important;
  margin-top: 3px !important;
}

#asgaros-forum .topic-starter a {
  color: var(--gw-gray-800) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

#asgaros-forum .topic-starter a:hover {
  color: var(--gw-black) !important;
}


/* ============================================================
   8. THREAD-DETAIL & POSTS
   ============================================================ */

#asgaros-forum .post {
  border: var(--gw-border) !important;
  border-radius: var(--gw-radius-md) !important;
  margin-bottom: 16px !important;
  background: var(--gw-white) !important;
  overflow: hidden !important;
  transition: var(--gw-transition);
}

#asgaros-forum .post:hover {
  border-color: var(--gw-gray-400) !important;
}

#asgaros-forum .post-head {
  background: var(--gw-gray-50) !important;
  border-bottom: var(--gw-border) !important;
  padding: 10px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  color: var(--gw-gray-600) !important;
}

#asgaros-forum .post-content {
  padding: 20px !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--gw-black) !important;
}

#asgaros-forum .post-content a {
  color: var(--gw-black) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

#asgaros-forum .post-content a:hover {
  color: var(--gw-gray-600) !important;
}

/* Zitat-Block */
#asgaros-forum .post-content blockquote {
  border-left: 3px solid var(--gw-gray-200) !important;
  margin: 16px 0 !important;
  padding: 12px 16px !important;
  background: var(--gw-gray-50) !important;
  border-radius: 0 var(--gw-radius-sm) var(--gw-radius-sm) 0 !important;
  color: var(--gw-gray-600) !important;
  font-size: 14px !important;
}

/* Code-Block */
#asgaros-forum .post-content code,
#asgaros-forum .post-content pre {
  font-family: 'DM Mono', 'Fira Code', monospace !important;
  background: var(--gw-gray-100) !important;
  border-radius: var(--gw-radius-sm) !important;
  padding: 2px 6px !important;
  font-size: 13px !important;
  color: var(--gw-black) !important;
}

#asgaros-forum .post-content pre {
  padding: 16px !important;
  overflow-x: auto !important;
}

/* Spoiler */
#asgaros-forum .post-content .spoiler {
  background: var(--gw-gray-100) !important;
  border: var(--gw-border) !important;
  border-radius: var(--gw-radius-sm) !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: var(--gw-gray-600) !important;
}


/* ============================================================
   9. POST-AUTOR-BLOCK
   ============================================================ */

#asgaros-forum .post-author {
  padding: 16px 20px !important;
  border-right: var(--gw-border) !important;
  background: var(--gw-gray-50) !important;
  text-align: center !important;
  min-width: 130px !important;
}

#asgaros-forum .post-author .author-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gw-black) !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 4px !important;
}

#asgaros-forum .post-author .author-name:hover {
  color: var(--gw-gray-600) !important;
}

/* Avatar */
#asgaros-forum .post-author img.avatar {
  border-radius: 50% !important;
  border: 2px solid var(--gw-gray-200) !important;
  display: block !important;
  margin: 0 auto 10px !important;
  transition: var(--gw-transition);
}

#asgaros-forum .post-author img.avatar:hover {
  border-color: var(--gw-gray-400) !important;
}

/* Benutzerrolle / Rang */
#asgaros-forum .post-author .author-role,
#asgaros-forum .post-author .user-rank {
  font-size: 11px !important;
  color: var(--gw-gray-400) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 500 !important;
}

/* Post-Zähler */
#asgaros-forum .post-author .post-count {
  font-size: 11px !important;
  color: var(--gw-gray-400) !important;
  margin-top: 4px !important;
}


/* ============================================================
   10. BREADCRUMB & NAVIGATION
   ============================================================ */

#asgaros-forum .forum-breadcrumb,
#asgaros-forum .breadcrumbs {
  font-size: 12px !important;
  color: var(--gw-gray-600) !important;
  margin-bottom: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

#asgaros-forum .forum-breadcrumb a,
#asgaros-forum .breadcrumbs a {
  color: var(--gw-gray-600) !important;
  text-decoration: none !important;
  transition: var(--gw-transition);
}

#asgaros-forum .forum-breadcrumb a:hover,
#asgaros-forum .breadcrumbs a:hover {
  color: var(--gw-black) !important;
}

#asgaros-forum .forum-breadcrumb .separator,
#asgaros-forum .breadcrumbs .separator {
  color: var(--gw-gray-400) !important;
  margin: 0 2px !important;
}


/* ============================================================
   11. PAGINATION
   ============================================================ */

#asgaros-forum .pagination,
#asgaros-forum .forum-pagination {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin: 1.25rem 0 !important;
}

#asgaros-forum .pagination a,
#asgaros-forum .pagination span,
#asgaros-forum .forum-pagination a,
#asgaros-forum .forum-pagination span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border: var(--gw-border) !important;
  border-radius: var(--gw-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  color: var(--gw-black) !important;
  background: var(--gw-white) !important;
  transition: var(--gw-transition);
}

#asgaros-forum .pagination a:hover,
#asgaros-forum .forum-pagination a:hover {
  background: var(--gw-gray-100) !important;
  border-color: var(--gw-gray-400) !important;
}

#asgaros-forum .pagination .current,
#asgaros-forum .pagination span.current,
#asgaros-forum .forum-pagination .current {
  background: var(--gw-black) !important;
  color: var(--gw-white) !important;
  border-color: var(--gw-black) !important;
}


/* ============================================================
   12. BUTTONS & AKTIONEN
   ============================================================ */

#asgaros-forum .button,
#asgaros-forum input[type="submit"],
#asgaros-forum button,
#asgaros-forum .submit-button,
#asgaros-forum .new-topic-button,
#asgaros-forum .reply-button {
  font-family: var(--gw-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 20px !important;
  border-radius: var(--gw-radius-sm) !important;
  cursor: pointer !important;
  transition: var(--gw-transition) !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Primärer Button (Neues Thema, Antworten, Absenden) */
#asgaros-forum .new-topic-button,
#asgaros-forum .reply-button,
#asgaros-forum input[type="submit"],
#asgaros-forum .submit-button {
  background: var(--gw-black) !important;
  color: var(--gw-white) !important;
  border: 1px solid var(--gw-black) !important;
}

#asgaros-forum .new-topic-button:hover,
#asgaros-forum .reply-button:hover,
#asgaros-forum input[type="submit"]:hover,
#asgaros-forum .submit-button:hover {
  background: var(--gw-gray-800) !important;
  border-color: var(--gw-gray-800) !important;
  color: var(--gw-white) !important;
}

/* Sekundärer Button */
#asgaros-forum .button:not(.new-topic-button):not(.reply-button):not(.submit-button) {
  background: var(--gw-white) !important;
  color: var(--gw-black) !important;
  border: var(--gw-border) !important;
}

#asgaros-forum .button:not(.new-topic-button):not(.reply-button):not(.submit-button):hover {
  background: var(--gw-gray-100) !important;
}

/* Moderations-Aktionen (Schließen, Löschen, Verschieben) */
#asgaros-forum .moderation-actions a,
#asgaros-forum .post-actions a {
  font-size: 12px !important;
  color: var(--gw-gray-600) !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
  border-radius: var(--gw-radius-sm) !important;
  transition: var(--gw-transition);
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

#asgaros-forum .moderation-actions a:hover,
#asgaros-forum .post-actions a:hover {
  background: var(--gw-gray-100) !important;
  color: var(--gw-black) !important;
}


/* ============================================================
   13. TEXTEDITOR / REPLY-FORMULAR
   ============================================================ */

#asgaros-forum .forum-reply,
#asgaros-forum .reply-form,
#asgaros-forum form.forum-form {
  background: var(--gw-white) !important;
  border: var(--gw-border) !important;
  border-radius: var(--gw-radius-md) !important;
  padding: 24px !important;
  margin-top: 1.5rem !important;
}

#asgaros-forum .forum-form label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--gw-gray-600) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 6px !important;
}

#asgaros-forum .forum-form input[type="text"],
#asgaros-forum .forum-form input[type="email"],
#asgaros-forum .forum-form textarea,
#asgaros-forum .forum-form select {
  font-family: var(--gw-font) !important;
  font-size: 14px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border: var(--gw-border) !important;
  border-radius: var(--gw-radius-sm) !important;
  background: var(--gw-gray-50) !important;
  color: var(--gw-black) !important;
  transition: var(--gw-transition) !important;
  outline: none !important;
  margin-bottom: 14px !important;
}

#asgaros-forum .forum-form input[type="text"]:focus,
#asgaros-forum .forum-form input[type="email"]:focus,
#asgaros-forum .forum-form textarea:focus,
#asgaros-forum .forum-form select:focus {
  border-color: var(--gw-gray-800) !important;
  background: var(--gw-white) !important;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06) !important;
}

#asgaros-forum .forum-form textarea {
  min-height: 160px !important;
  resize: vertical !important;
  line-height: 1.65 !important;
}

/* Editor-Toolbar */
#asgaros-forum .bbp-the-content-wrapper .quicktags-toolbar,
#asgaros-forum .editor-toolbar {
  background: var(--gw-gray-50) !important;
  border: var(--gw-border) !important;
  border-bottom: none !important;
  border-radius: var(--gw-radius-sm) var(--gw-radius-sm) 0 0 !important;
  padding: 6px 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

#asgaros-forum .editor-toolbar button,
#asgaros-forum .quicktags-toolbar input[type="button"] {
  font-size: 12px !important;
  padding: 4px 8px !important;
  background: var(--gw-white) !important;
  border: var(--gw-border) !important;
  border-radius: var(--gw-radius-sm) !important;
  color: var(--gw-gray-800) !important;
  cursor: pointer !important;
}

#asgaros-forum .editor-toolbar button:hover,
#asgaros-forum .quicktags-toolbar input[type="button"]:hover {
  background: var(--gw-gray-100) !important;
  color: var(--gw-black) !important;
}


/* ============================================================
   14. BADGES (Angeheftet, Gelöst, Wichtig, Geschlossen)
   ============================================================ */

#asgaros-forum .topic-status,
#asgaros-forum .label,
#asgaros-forum .badge,
#asgaros-forum .status-label {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}

/* Angeheftet */
#asgaros-forum .topic-status.sticky,
#asgaros-forum .label-sticky,
#asgaros-forum .sticky-label {
  background: var(--gw-black) !important;
  color: var(--gw-white) !important;
  border: 1px solid var(--gw-black) !important;
}

/* Gelöst */
#asgaros-forum .topic-status.solved,
#asgaros-forum .label-solved,
#asgaros-forum .solved-label {
  background: var(--gw-white) !important;
  color: var(--gw-black) !important;
  border: 1px solid var(--gw-gray-800) !important;
}

/* Geschlossen */
#asgaros-forum .topic-status.closed,
#asgaros-forum .label-closed,
#asgaros-forum .closed-label {
  background: var(--gw-gray-100) !important;
  color: var(--gw-gray-600) !important;
  border: 1px solid var(--gw-gray-200) !important;
}

/* Wichtig */
#asgaros-forum .topic-status.important,
#asgaros-forum .label-important {
  background: var(--gw-black) !important;
  color: var(--gw-white) !important;
  border: 1px solid var(--gw-black) !important;
}


/* ============================================================
   15. BENUTZERPROFILE & AVATAR
   ============================================================ */

#asgaros-forum .profile-header {
  background: var(--gw-gray-50) !important;
  border: var(--gw-border) !important;
  border-radius: var(--gw-radius-md) !important;
  padding: 24px !important;
  margin-bottom: 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

#asgaros-forum .profile-header img.avatar {
  border-radius: 50% !important;
  border: 2px solid var(--gw-gray-200) !important;
}

#asgaros-forum .profile-username {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--gw-black) !important;
}

#asgaros-forum .profile-info {
  font-size: 13px !important;
  color: var(--gw-gray-600) !important;
}


/* ============================================================
   16. SUCHFORMULAR
   ============================================================ */

#asgaros-forum .forum-search,
#asgaros-forum .search-form {
  margin-bottom: 1.5rem !important;
}

#asgaros-forum .forum-search input[type="text"],
#asgaros-forum .search-form input[type="text"] {
  font-family: var(--gw-font) !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
  border: var(--gw-border) !important;
  border-radius: var(--gw-radius-sm) !important;
  background: var(--gw-gray-50) !important;
  color: var(--gw-black) !important;
  width: 100% !important;
  outline: none !important;
  transition: var(--gw-transition) !important;
}

#asgaros-forum .forum-search input[type="text"]:focus,
#asgaros-forum .search-form input[type="text"]:focus {
  border-color: var(--gw-black) !important;
  background: var(--gw-white) !important;
  box-shadow: 0 0 0 3px rgba(10,10,10,0.06) !important;
}


/* ============================================================
   17. ONLINE-INDIKATOR & STATUS
   ============================================================ */

#asgaros-forum .user-online::after {
  content: '' !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--gw-black) !important;
  margin-left: 5px !important;
  vertical-align: middle !important;
}

#asgaros-forum .user-offline::after {
  content: '' !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--gw-gray-300) !important;
  margin-left: 5px !important;
  vertical-align: middle !important;
}


/* ============================================================
   18. RESPONSIVE — Mobile Optimierungen
   ============================================================ */

@media (max-width: 768px) {

  #asgaros-forum table.forum-table thead th:nth-child(n+3),
  #asgaros-forum table.forum-table td:nth-child(n+3) {
    display: none !important;
  }

  #asgaros-forum table.forum-table td {
    padding: 12px 14px !important;
  }

  #asgaros-forum .post-author {
    min-width: 90px !important;
    padding: 12px 10px !important;
  }

  #asgaros-forum .post-content {
    padding: 14px !important;
    font-size: 14px !important;
  }

  #asgaros-forum .forum-reply,
  #asgaros-forum form.forum-form {
    padding: 16px !important;
  }

  #asgaros-forum .forum-form textarea {
    min-height: 120px !important;
  }

  #asgaros-forum .new-topic-button,
  #asgaros-forum .reply-button {
    width: 100% !important;
    justify-content: center !important;
  }

  #asgaros-forum .pagination,
  #asgaros-forum .forum-pagination {
    justify-content: center !important;
  }
}

@media (max-width: 480px) {

  #asgaros-forum .category-header,
  #asgaros-forum .forum-header {
    font-size: 11px !important;
    padding: 10px 14px !important;
  }

  #asgaros-forum .forum-name {
    font-size: 14px !important;
  }

  #asgaros-forum table.forum-table td {
    padding: 10px 12px !important;
  }
}


/* ============================================================
   ENDE — gamewatch-forum.css
   ============================================================ */