/* ═══════════════════════════════════════════════════════════════════════════
   FARBWELT UND KOPFBEREICH DER COMMUNITY

   Diese Datei gilt für Marktplatz, Forum und Angebotsseite gemeinsam.

   Vorher stand derselbe Block dreimal in drei Dateien. Genau deshalb sah das
   Forum nach der ersten Überarbeitung noch anders aus: Die Textur hatte ich
   nur im Marktplatz abgeschaltet, und die Überschrift des Forums war mit
   96 Pixeln fast doppelt so groß wie die des Marktplatzes mit 60 — was
   niemandem auffällt, solange man die Seiten einzeln ansieht.

   Wird hier etwas geändert, ändert es sich überall. Das ist der Punkt.

   Eingebunden NACH style.css, damit die dunklen Werte die hellen Vorgaben
   der übrigen Website überschreiben — aber nur auf diesen Seiten. Der
   Hell-Dunkel-Umschalter im Kopf bleibt unberührt.
   ═══════════════════════════════════════════════════════════════════════════ */

body.bc-community {
  --bg:        #0d130f;
  --bg-white:  #111a14;
  --card:      #161d19;
  --card-gray: #1b241f;
  --border:    rgba(255,255,255,0.06);
  --border-md: rgba(255,255,255,0.10);
  --green:     #4ade80;
  --green2:    #36c96a;
  --green-dim: rgba(74,222,128,.12);
  --text:      #f2f4f2;
  --muted:     rgba(255,255,255,0.42);
  --muted-lt:  rgba(255,255,255,0.26);
  --shadow:    0 2px 12px rgba(0,0,0,0.4);
  background: var(--bg);
  color: var(--text);
}

/* ── EINE FLUCHTLINIE ─────────────────────────────────────────────────────
   Das war der eigentliche Bruch. Nachgemessen bei 1920 Pixel Fensterbreite:

     Marktplatz-Titel     56 px von links   (comm-wide, max 2200)
     Marktplatz-Reiter    56 px, zusätzlich mittig gestellt
     Forum-Titel         384 px             (container, max 1140)
     Forum-Reiter         56 px
     Forum-Inhalt        284 px             (container, max 1400)

   Fünf Elemente, vier verschiedene Kanten — und keine davon traf das Logo
   im Seitenkopf, das bei 1140 zentriert sitzt. Der Marktplatz-Titel stand
   sogar weiter links als das Logo darüber.

   Jetzt richten sich Kopfzeile, Überschrift, Reiterleiste, Inhalt und
   Seitenfuß auf denselben Wert aus. 1600 statt 1140, weil der Marktplatz
   drei Spalten trägt — deshalb wandern Kopf und Fuß auf diesen Seiten
   mit. Alle anderen Seiten der Website bleiben unberührt. */
body.bc-community .container,
body.bc-community .comm-wide {
  max-width: 1600px !important;
  margin-left: auto; margin-right: auto;
  padding-left: clamp(20px, 3vw, 32px) !important;
  padding-right: clamp(20px, 3vw, 32px) !important;
}

/* ── WARUM DIE REITERLEISTE MITTIG STAND ─────────────────────────────────
   Die Leiste war als Flex-Behälter gesetzt und enthielt einen container.
   Ein container ist normalerweise so breit wie sein Elternteil — als
   Flex-Kind aber schrumpft er auf die Breite seines Inhalts, also auf die
   zwei Links. Und weil er "margin: 0 auto" trägt, rutschte er damit in
   die Mitte. Die Ausrichtung wirkte deshalb zufällig, obwohl die Breite
   überall gleich gesetzt war.

   Die Leiste ist jetzt ein gewöhnlicher Block. Das Nebeneinander besorgt
   der container darin, und der ist als Block-Kind wieder volle Breite. */
body.bc-community .comm-tabs,
body.bc-community .forum-tabs {
  display: block !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.bc-community .comm-tabs > .container,
body.bc-community .forum-tabs > .container {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

/* ── HINTERGRUNDTEXTUR ────────────────────────────────────────────────────
   Über der ganzen Website liegt ein Karomuster aus zwei diagonalen
   Linienrastern. Auf dem hellen Grund, für den es gemacht wurde, ist es
   kaum zu sehen; auf dunklem Grund legt es sich als Gitter über jede leere
   Fläche. Hier bleiben nur zwei schwache Lichtflecken. */
body.bc-community::before {
  background-image:
    radial-gradient(ellipse 420px 420px at 15% 12%, rgba(74,222,128,.05) 0%, transparent 62%),
    radial-gradient(ellipse 340px 340px at 85% 82%, rgba(74,222,128,.025) 0%, transparent 62%) !important;
  background-size: 100% 100%, 100% 100% !important;
}
body.bc-community::after { opacity: .3 !important; }

/* ── KOPFBEREICH ──────────────────────────────────────────────────────────
   Beide Seiten benutzen dieselben Maße. Vorher war der Forum-Kopf so hoch,
   dass die Beiträge darunter erst nach dem Scrollen anfingen. */
body.bc-community .page-hero,
body.bc-community .forum-hero {
  background: #0d130f;
  padding: 34px 0 0;
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
body.bc-community .page-hero::before,
body.bc-community .page-hero::after,
body.bc-community .forum-hero::before,
body.bc-community .forum-hero::after { display: none !important; }

/* Die große Überschrift. 60 Pixel als Obergrenze statt 96 — bei 96 füllte
   allein die Überschrift den halben Bildschirm. */
body.bc-community .hero-title,
body.bc-community .bc-hero-titel {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: clamp(34px, 6vw, 60px) !important;
  color: #f2f4f2 !important;
  line-height: .95 !important;
  letter-spacing: 1px;
  margin-bottom: 12px !important;
}
/* Der zweite Teil der Überschrift stand grün. Ohne Farbe ist die Zeile
   ruhiger, und Grün bleibt Preis und Aktion vorbehalten. */
body.bc-community .hero-title em,
body.bc-community .bc-hero-titel span { color: #f2f4f2 !important; font-style: normal; }

/* Die Zahl neben der Überschrift — beim Forum die Beitragszahl. */
body.bc-community .bc-hero-zahl {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: clamp(34px, 5vw, 54px) !important;
  color: var(--green);
  line-height: 1;
}
body.bc-community .bc-hero-zahl-text {
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

body.bc-community .hero-tag,
body.bc-community .bc-hero-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.38); margin-bottom: 12px;
  background: none !important; border: none !important; padding: 0 !important;
}
body.bc-community .hero-tag::before,
body.bc-community .bc-hero-tag::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--green); flex-shrink: 0; animation: none;
}

body.bc-community .hero-desc,
body.bc-community .bc-hero-text {
  font-size: 14px; color: rgba(255,255,255,.42);
  max-width: 520px; line-height: 1.6;
}

/* ── REITERLEISTE ─────────────────────────────────────────────────────────
   Marktplatz und Forum hatten getrennte Klassen (.comm-tab und .ftab).
   Beide sehen jetzt gleich aus, egal welche im Markup steht. */
body.bc-community .comm-tabs,
body.bc-community .forum-tabs {
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: #0d130f;
  display: flex; justify-content: flex-start; gap: 4px;
}
body.bc-community .comm-tab,
body.bc-community .ftab {
  padding: 14px 18px;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 13px; font-weight: 500; letter-spacing: .2px;
  color: rgba(255,255,255,.38); text-decoration: none;
  border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 8px;
  transition: color .18s; text-transform: none;
}
body.bc-community .comm-tab:hover,
body.bc-community .ftab:hover { color: rgba(255,255,255,.75); }
body.bc-community .comm-tab.is-aktiv,
body.bc-community .ftab.active { color: var(--text); border-bottom-color: var(--green); }