/* ============================================================
   CLUB BOLIVIA - PORTAL.CSS  (Design-System "Skelett")
   Zentrale Tokens + Komponenten-Bibliothek.
   Seiten-spezifische <style>-Bloecke in Templates haben
   Vorrang (dokumentspaeter) - portal.css fuellt die Basis.
   ============================================================ */

:root {
  --cb-bg: #0a0f0d;
  --cb-bg2: #0e1513;
  --cb-panel: #10171a;
  --cb-border: #2a4a35;
  --cb-border-dim: #1b2f23;
  --cb-green: #8fd6a3;
  --cb-green-dim: #5f8a70;
  --cb-silver: #c9ced6;
  --cb-text: #d6e2da;
  --cb-muted: #8fa396;
  --cb-gold: #d9c9a3;
  --cb-red: #d98a8a;
  --cb-blue: #8ab8d9;
  --cb-mono: 'Courier New', Courier, monospace;
}

/* ---------- Globale Basis (konservativ) ---------- */
body { background: var(--cb-bg); color: var(--cb-text); }
a { color: var(--cb-green); }
a:hover { color: var(--cb-silver); }
h1, h2, h3, h4 { font-family: var(--cb-mono); color: var(--cb-silver); }
code, pre { font-family: var(--cb-mono); color: var(--cb-green); }

table { border-collapse: collapse; width: 100%; }
th { font-family: var(--cb-mono); font-size: .68rem; letter-spacing: .22em;
     text-transform: uppercase; color: var(--cb-green-dim);
     text-align: left; padding: .55rem .8rem;
     border-bottom: 1px solid var(--cb-border); }
td { padding: .6rem .8rem; border-bottom: 1px solid var(--cb-border-dim); }
tr:hover td { background: rgba(143, 214, 163, .05); }
hr { border: 0; border-top: 1px solid var(--cb-border-dim); }

/* ---------- Komponenten-Bibliothek (cb-Präfix) ---------- */

/* Buttons */
.cb-btn { display: inline-block; font-family: var(--cb-mono);
  font-size: .78rem; letter-spacing: .28em; text-transform: uppercase;
  text-decoration: none; padding: .78rem 1.5rem;
  border: 1px solid var(--cb-border); color: var(--cb-text);
  background: rgba(16, 23, 26, .7); transition: all .2s; }
.cb-btn:hover { border-color: var(--cb-green); color: var(--cb-green);
  box-shadow: 0 0 22px rgba(143, 214, 163, .25); transform: translateY(-1px); }
.cb-btn.cb-primary { border-color: var(--cb-green); color: var(--cb-green); }
.cb-btn.cb-primary:hover { background: rgba(143, 214, 163, .12);
  box-shadow: 0 0 30px rgba(143, 214, 163, .35); }

/* Karten-Grid (Spiele etc.) */
.cb-grid { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.cb-card { border: 1px solid var(--cb-border-dim);
  background: linear-gradient(160deg, rgba(16, 23, 26, .9), rgba(10, 15, 13, .9));
  padding: 1.15rem 1.2rem 1rem; transition: all .2s;
  position: relative; overflow: hidden; }
.cb-card::before { content: ''; position: absolute; top: 0; left: 0;
  right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cb-green), transparent);
  opacity: 0; transition: opacity .2s; }
.cb-card:hover { border-color: var(--cb-border);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(143, 214, 163, .08); }
.cb-card:hover::before { opacity: 1; }
.cb-card .cb-name { font-family: var(--cb-mono); font-weight: 700;
  color: var(--cb-text); letter-spacing: .06em; }
.cb-card .cb-cat { font-family: var(--cb-mono); font-size: .6rem;
  letter-spacing: .25em; color: var(--cb-green-dim);
  text-transform: uppercase; margin-top: .15rem; }
.cb-card .cb-num { font-family: var(--cb-mono); font-size: 1.9rem;
  font-weight: 700; color: var(--cb-green); margin: .8rem 0 .1rem;
  text-shadow: 0 0 18px rgba(143, 214, 163, .3); }
.cb-card .cb-lbl { font-family: var(--cb-mono); font-size: .6rem;
  letter-spacing: .25em; color: var(--cb-muted); text-transform: uppercase; }

/* Sektions-Kopf */
.cb-sec-head { display: flex; align-items: baseline; gap: 1rem;
  margin-bottom: 1.5rem; }
.cb-sec-head h2 { font-size: 1.05rem; letter-spacing: .3em;
  text-transform: uppercase; }
.cb-sec-head .cb-line { flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--cb-border), transparent); }
.cb-sec-head .cb-hint { font-family: var(--cb-mono); font-size: .68rem;
  color: var(--cb-green-dim); letter-spacing: .2em; }

/* Status-Badge / Punkte */
.cb-pill { font-family: var(--cb-mono); font-size: .6rem;
  letter-spacing: .15em; padding: .12rem .5rem;
  border: 1px solid var(--cb-border); color: var(--cb-green); }
.cb-dot { display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--cb-green);
  box-shadow: 0 0 10px var(--cb-green); }

/* Hero-Vortex (fuer Home-Ausbau) */
.cb-hero { position: relative; padding: 4.2rem 0 3.4rem;
  text-align: center; overflow: hidden; }
.cb-vortex { position: absolute; left: 50%; top: 50%; width: 640px;
  height: 640px; transform: translate(-50%, -58%); z-index: -1; opacity: .5;
  background:
    conic-gradient(from 0deg, transparent 0 12%, rgba(143, 214, 163, .16) 18%, transparent 30% 52%, rgba(143, 214, 163, .13) 60%, transparent 72%),
    radial-gradient(circle, transparent 26%, rgba(143, 214, 163, .10) 27% 28%, transparent 30% 48%, rgba(143, 214, 163, .08) 49% 50%, transparent 54%),
    radial-gradient(circle, #05070a 0 22%, transparent 60%);
  border-radius: 50%;
  animation: cb-spin 60s linear infinite; }
@keyframes cb-spin { to { transform: translate(-50%, -58%) rotate(360deg); } }
.cb-kicker { font-family: var(--cb-mono); font-size: .72rem;
  letter-spacing: .5em; color: var(--cb-green);
  text-transform: uppercase; margin-bottom: .9rem; }

/* ---------- Nav-Luft: Abstand zwischen Top-Level-Menuepunkten ---------- */
#header .dropmenu > ul > li { margin: 0 .45rem; }
/* Matrix-Krypto: Content-Sektion transparent fuer die Glyphen-Zonen */
#body-wrapper { background: transparent; }
.cb-card { color: var(--cb-text); text-decoration: none; }
.cb-card h3 { margin: .3rem 0 .5rem; font-size: 1.02rem; }
.cb-num { font-size: 1.5rem; font-weight: 700; color: var(--cb-green); letter-spacing: .02em; }
.cb-num-label { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: #6f8a7c; margin-top: .15rem; }
.cb-stand { font-size: .66rem; color: #5f8a70; margin-top: .55rem; }
.cb-num-dim { color: #6f8a7c; }
.cb-card:hover { border-color: #3a6b48; }
.cb-card-ghost { background: none; text-shadow: 0 0 8px #0c110d; }
.cb-card-ghost .cb-num-label, .cb-card-ghost .cb-stand, .cb-card-ghost .cb-badge { text-shadow: 0 0 8px #0c110d; }