/* Battlefield-like: grey, flat, square UI (Rajdhani, PNG-Backgrounds, NO gradients) */
:root{
  --bg:#0d0f12;
  --bg-2:#111418;
  --panel:#121417;
  --line:#1b1f24;
  --line-2:#23282e;
  --text:#e1e4e8;
  --muted:#aeb6bf;
  --accent:#cfd4d9;
  --accent-2:#b8bec4;
  --card:#14181c;
  --shadow:none;
  --topbar-h: 68px;
  --footer-h:56px;

/* === NEU: Gold-Akzentfarben === */
  --gold:#d7b76b;       /* Primär-Gold (Text/Leiste) */
  --gold-2:#a7863f;     /* dunklerer Goldton für Strich/Details */
  --gold-hover: rgba(215,183,107,.10); /* zarte Goldfläche für Hover */

  /* Battlefield-6 "Phantom Red" (anpassbar) */
  --phantom-red:#ff3b3f;
  --phantom-red-2:#b52a2e; /* dunkler Rand */
  --phantom-red-bg: rgba(255,59,63,.12);  /* aktive Fläche */
  --phantom-red-bg-hover: rgba(255,59,63,.18);

  --sidebar-w:300px;
  
  /* zentrale Breite & Innenabstand des Inhalts */
  --content-max: 1680px;  /* z.B. 1200–1400 feinjustieren */
  --content-pad: 20px;    /* Innenabstand links/rechts */  
  
  --section-gap: 24px;   /* Abstand zwischen Trennlinie & Inhalt */
  --card-gap: 16px;      /* Abstand zwischen Cards */  

  /* Scrollbar Colors (Sidebar) */
  --scroll-track:#0e1216;
  --scroll-thumb:#2a3036;
  --scroll-thumb-hover:#3a424a;
}

/* ===== Full-width Topbar ===== */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  z-index: 1000; /* Sidebar liegt davor (1002), wie gewünscht */
}
.topbar-inner{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* Brand mittig */
  padding: 0 20px;
}
/* Brand: groß, gold, HUD-Typo, zentriert */
.topbar .brand{
  font-family: var(--hud-font);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  pointer-events: none; /* wirkt rein als Label */
  text-align: center;
  position: relative;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  --bg-image: url('/assets/img/bg/bg-default.png');
  position:relative;
}

/* Rajdhani für Headings & Menüs */
:root { --hud-font:'Rajdhani', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, sans-serif; }

h1,h2,h3,h4{
  margin:0 0 .6rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-family:var(--hud-font);
}

/* Größer & mit Fluid-Skala */
h1{ font-size:clamp(28px, 3.2vw, 42px); font-weight:800; }
h2{ font-size:clamp(22px, 2.6vw, 30px); font-weight:700; }
h3{ font-size:clamp(18px, 2.2vw, 24px); font-weight:700; }
h4{ font-size:18px;                     font-weight:700; }
p{margin:.5rem 0 1rem}
small{color:var(--muted)}



    :root{
      --topbar-h: 64px;
      --footer-h: 48px;
      --sidebar-w: 280px;
      --content-max: 1560px;
      --content-pad: 10px;
      --line: #1d242c;
      --text: #e2e8f0;
      --phantom-red:#ff3b3f;
      --phantom-red-bg: rgba(255,59,63,.08);
    }

    /* Headbar / Footbar */
    .headbar{
      position:fixed; left:0; right:0; top:0; height:var(--topbar-h);
      display:flex; align-items:center; justify-content:space-between;
      padding:0 14px; background:rgba(11,15,19,.88); border-bottom:1px solid var(--line); z-index:40;
      backdrop-filter:saturate(120%) blur(2px);
    }
    .footbar{
      position:fixed; left:0; right:0; bottom:0; height:var(--footer-h);
      display:flex; align-items:center; justify-content:center;
      background:rgba(11,15,19,.88); border-top:1px solid var(--line); z-index:40;
      backdrop-filter:saturate(120%) blur(2px);
    }

    /* Sidebar: fix zwischen den Bars, simpler Link-Stack */
    .sidebar{
      position:fixed; left:0; top:var(--topbar-h); bottom:var(--footer-h);
      width:var(--sidebar-w);
      background:rgba(15,19,23,.50);    /* halbtransparent, BG scheint durch */
      border-right:1px solid var(--line);
      overflow:auto; z-index:30;
      backdrop-filter:saturate(120%) blur(2px);
    }
    .sidebar-inner{ padding:10px; }

    .nav-simple{ display:flex; flex-direction:column; gap:6px; }
    .nav-link{
      display:flex; align-items:center; justify-content:space-between;
      padding:8px 10px; border:1px solid var(--line);
      background:#0c1116; color:inherit; text-decoration:none; font-size:15px;
    }
    .nav-link:hover{ background:#10161c; }
    .nav-link.active{ background:var(--phantom-red-bg); border-color:#5a2a2c; }
    .active-notch{ width:4px; height:16px; border-radius:1px; background:var(--phantom-red); margin-left:16px; }

    .nav-section-title{
      margin:10px 2px 6px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#c9d0d6;
    }

    /* Main: transparent, kein eigener Hintergrund */
    .main{
      margin-left:var(--sidebar-w);
      padding-top:calc(var(--topbar-h) + 12px);
      padding-bottom:calc(var(--footer-h) + 12px);
      min-height:100vh;
      background:transparent !important; /* sicherstellen, dass nix deckt */
      position:relative; z-index:1;      /* über dem BG-Bild */
    }
    .main-inner{
      max-width:var(--content-max);
      margin:0 auto;
      padding:0 var(--content-pad);
      background:transparent !important; /* HINTERGRUND ENTFERNT */
      border:none !important;            /* auch keine Kante mehr */
    }

    .brand{ display:flex; align-items:center; gap:8px; font-weight:700; }
    .muted{ color:#9fb0bf; font-size:12px; }

/* ===== Seitenhintergrund (ohne Gradients) ===== */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background: center / cover no-repeat var(--bg-image);
  opacity:.22; pointer-events:none;
}
.bg-default   { --bg-image: url('/assets/img/bg/bg-default.png'); }
.bg-vehicles  { --bg-image: url('/assets/img/bg/bg-vehicles.png'); }
.bg-classes   { --bg-image: url('/assets/img/bg/bg-classes.png'); }
.bg-weapons   { --bg-image: url('/assets/img/bg/bg-weapons.png'); }
.bg-challenges{ --bg-image: url('/assets/img/bg/bg-challenges.png'); }
.bg-maps   { --bg-image: url('/assets/img/bg/bg-maps.png'); }
.bg-modes{ --bg-image: url('/assets/img/bg/bg-modes.png'); }
.bg-portal{ --bg-image: url('/assets/img/bg/bg-portal.png'); }

/* ===== Sidebar: zwischen den Bars, NICHT darunter ===== */
.sidebar{
  position: fixed;
  left: 0;
  top: var(--topbar-h);                 /* Abstand zur Topbar */
  bottom: var(--footer-h);              /* Abstand zur Footbar */
  width: var(--sidebar-w);
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  z-index: 1002;                        /* vor Topbar/Footbar */
}
.sidebar-top{display:flex; align-items:center; gap:10px; padding:12px 12px 8px 12px; border-bottom:1px solid var(--line)}
.brand{
  font-family:var(--hud-font); font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); user-select:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Basis: unsichtbar */
.sidebar-scroll{
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;                 /* Firefox */
}
.sidebar-scroll::-webkit-scrollbar{ width: 0; height: 0; }

/* Hover: dezent anzeigen */
.sidebar-scroll:hover{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.sidebar-scroll:hover::-webkit-scrollbar{ width: 6px; height: 6px; }
.sidebar-scroll:hover::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.sidebar-scroll:hover::-webkit-scrollbar-track{ background: transparent; }

.sidebar-foot{padding:12px 14px; border-top:1px solid var(--line)}
.sidebar-foot .ext{display:flex; gap:10px; align-items:center; color:var(--accent); text-decoration:none}

/* Navigation */
.nav{display:flex; flex-direction:column; gap:4px}

/* Hauptpunkte: größer + heller Label */
.nav-item{
  position:relative; display:flex; align-items:center; justify-content:flex-start;
  padding:12px 14px;                  /* vorher 10px 12px */
  border:1px solid transparent; background:transparent; color:var(--text);
  text-decoration:none; cursor:pointer; border-radius:0; font-family:var(--hud-font); letter-spacing:.04em;
  font-size:18px;                      /* vorher 16px */
}
.nav-item:hover{
  background:var(--gold-hover);            /* statt Unterstreichen */
  border-color:var(--gold-2);
  text-decoration:none;
}
.nav-item.active{
  background: var(--gold-hover);
  border-color: var(--gold-2);
  color: #ffffff;
}
.nav-item.active:hover{
  background: var(--gold-hover);                    /* kein Shadow/Underline */
  text-decoration:none;
}
.label{transform:translateY(.5px); color:#eef2f6;}


/* Collapsible groups (details/summary) */
.nav-group{border:1px solid transparent}
.nav-group[open]{background:#0e1216; border-color:var(--line)}
.nav-item-summary{list-style:none}
.nav-group>summary::-webkit-details-marker{display:none}
.chev{margin-left:auto; width:10px; height:10px; position:relative; display:inline-block}
.chev::before{
  content:""; position:absolute; inset:0;
  border-left:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(-45deg) translateY(-1px);
}
.nav-group[open] .chev::before{transform:rotate(135deg) translateY(-1px); border-color:var(--muted)}

/* Subnav: größer + heller Grundfarbe */
.nav-sub{display:flex; flex-direction:column; padding:9px 10px 12px 28px; gap:4px}
.sub-item{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:0;
  color:#dfe5ea; text-decoration:none; border:1px solid transparent; font-family:var(--hud-font);
  font-size:17px;                          /* vorher 16px */
}
.sub-item:hover{
  background:var(--gold-hover);            /* statt Unterstreichen */
  border-color:var(--gold-2);
  color:#ffffff;
  text-decoration:none;
}
.sub-item.active{
  background: var(--gold-hover);
  border-color: var(--gold-2);
  color: #ffffff;
}
.sub-item.active .sq{ background:var(--gold); }

/* Optional: Summary-Zeilen (aufklappbare Gruppen) im aktiven Zustand */
.nav-item-summary.active{
  background: var(--gold-hover);
  border-color: var(--gold-2);
  color: #ffffff;
}

/* Abschnitts-Labels (Subtitles) – Gold + größer */
.sub-section{
  margin:14px 0 6px; padding:9px 12px;
  color:var(--gold); font-family:var(--hud-font); text-transform:uppercase;
  letter-spacing:.10em; font-size:15px;    /* vorher 14px */
  background:#0e1216;
  border-left:3px solid var(--gold-2);
}
.nav-sub .sub-section + .sub-item { margin-top:2px; }

/* Sidebar-spezifisch: nie Unterstreichen bei Hover */
.sidebar a:hover{ text-decoration:none; }

/* Optional: Hover bei aktiven Einträgen etwas „glow“ */
.nav-item.active:hover,
.sub-item.active:hover{
  box-shadow:inset 0 0 0 1px var(--line);
  background: var(--gold-hover);
  text-decoration: none;
}

/* ===== Main-Content: neben Sidebar und unter Topbar, über Footbar ===== */
.main{
  margin-left: var(--sidebar-w);
  padding-top: calc(var(--topbar-h) + 16px);
  padding-bottom: calc(var(--footer-h) + 16px);
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* Zentrierter Container für Seiteninhalte */
.main-inner{
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;                          /* zentrieren */
  padding: 0 var(--content-pad);
}

/* Optional: schmalere Lesebreite für lange Textseiten (kannst du punktuell nutzen)
   <div class="main-inner narrow">… */
.main-inner.narrow{
  max-width: 900px;
}

/* Optional: Full-bleed-Utility, falls mal etwas absichtlich randlos laufen soll:
   <section class="bleed">… */
.bleed{
  margin-left: calc(-1 * var(--content-pad));
  margin-right: calc(-1 * var(--content-pad));
}

.section,.grid{padding:28px}

/* === Cards & Card-Headings === */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:0; padding:16px;
}
/* Größer, Goldfarbe, mehr Tracking; eigene kleine Gold-Leiste darunter */
.card h3{
  font-size:22px;                 /* vorher 20px */
  letter-spacing:.10em;           /* etwas mehr HUD-Feeling */
  margin:0 0 10px;
  color:var(--gold);
  text-transform:uppercase;
  font-family:var(--hud-font);
  position:relative;
}
.card h3::after{
  content:"";
  display:block;
  width:54px; height:3px;
  background:var(--gold);
  margin-top:6px;
  box-shadow:0 0 0 1px var(--gold-2) inset; /* feine Kante */
}

/* Sekundärüberschrift ebenfalls Gold, aber minimal kleiner */
.card h4{
  font-size:19px;                 /* vorher 18px */
  letter-spacing:.08em;
  margin:0 0 8px;
  color:var(--gold);
  text-transform:uppercase;
  font-family:var(--hud-font);
  position:relative;
}
.card h4::after{
  content:"";
  display:block;
  width:40px; height:2px;
  background:var(--gold);
  margin-top:5px;
  box-shadow:0 0 0 1px var(--gold-2) inset;
}

.grid{display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.grid{grid-template-columns:1fr}}

/* === Badges / Pills (deutlicher & größer) === */
.badges{display:flex; flex-wrap:wrap; gap:8px}              /* + gap */
.badge{
  font-size:14px;                                            /* + */
  font-weight:700;                                           /* + */
  padding:6px 10px;                                          /* + */
  border-radius:0;
  background:#171c22;                                        /* etwas helleres BG */
  border:2px solid var(--line-2);                            /* 2px Rahmen */
  color:#e6ebf0;                                             /* heller Text */
  letter-spacing:.08em;
  text-transform:uppercase;
  font-family:var(--hud-font)
}

/* Links / Lists */
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.list{margin:0; padding-left:18px}
.list li{margin:.35rem 0}

/* Footbar Layout */
.foot{
  position:fixed; left:0; right:0; bottom:0;
  height:var(--footer-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:0 28px;
  background:var(--panel); color:var(--muted);
  border-top:1px solid var(--line); z-index:1000;
}
.foot-left{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.foot-right{opacity:.95}

/* Footbar Links (Buttons) */
.foot-link{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; padding:0 12px; border:1px solid var(--line);
  font-family:var(--hud-font); text-transform:uppercase; letter-spacing:.08em;
  font-size:13px; border-radius:0; text-decoration:none;
  color:var(--text); background:#0f1317;
}
.foot-link:hover{ text-decoration:none; background:#12171c; }

/* Phantom Red (Builder) */
.foot-link--phantom{
  background:var(--phantom-red-bg); color:#fff; border-color:var(--phantom-red-2);
}
.foot-link--phantom:hover{
  background:var(--phantom-red-bg-hover); border-color:var(--phantom-red-2);
}

/* Gold (Informationen) */
.foot-link--gold{
  color:var(--gold); border-color:var(--gold-2); background:#0f1317;
}
.foot-link--gold:hover{
  background:rgba(215,183,107,.10); border-color:var(--gold-2); color:#fff;
}
@media (max-width: 900px){ .foot{ left:0; } }

/* Detailseiten & Tabellen */
.kv{display:flex; gap:24px; flex-wrap:wrap}
.kv .kv-item{min-width:200px}
.cols{display:grid; gap:16px; grid-template-columns:1.2fr .8fr}
@media (max-width:1100px){.cols{grid-template-columns:1fr}}
.category{margin-top:8px}
.item{padding:12px; border-radius:0; border:1px solid var(--line); background:#12161b; margin-top:8px}
.item h4{margin:0 0 6px}

table{width:100%; border-collapse:collapse; border:1px solid var(--line); background:var(--card)}
th,td{padding:10px 12px; border-top:1px solid var(--line)}
th{text-align:left; color:#cfd5da; text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-family:var(--hud-font)}

/* Schlichte Abschnittsheader */
.section-head{margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--gold-2);   /* vorher: var(--line-2) */
.section-sub{margin-top:4px; color:var(--muted); font-size:14px}

.section-head h2{
  color:var(--gold);
  letter-spacing:.10em;
  text-transform:uppercase;
  font-family:var(--hud-font);
}
.section-head::after{
  content:"";
  display:block;
  width:84px; height:3px;
  background:var(--gold);
  margin-top:8px;
  box-shadow:0 0 0 1px var(--gold-2) inset; /* feiner Rand für HUD-Look */
}

/* News-Liste: untereinander statt Grid */
.news-list{
  display:flex !important;
  flex-direction:column;
  row-gap:28px;                 /* moderne Browser */
  gap:28px;
}

/* Optional: auf großen Screens noch luftiger */
@media (min-width: 1200px){
  .news-list{ gap:32px; }
}

/* News-Card: etwas mehr Luft für längere Texte */
.card--news{
  padding:18px 20px;         /* minimal größer als Standard */
  line-height:1.6;           /* bessere Lesbarkeit bei langen Texten */
}

/* Optional: größere Grundschrift im News-Body */
.card--news p{ font-size:16px; }

/* Zusammenfassung dezent absetzen */
.news-summary{
  margin-bottom:6px;
}

/* eigener roter Menüpunkt */
.nav-item--phantom{
  background: var(--phantom-red-bg) !important;
  border: 1px solid var(--phantom-red-2) !important;
  color: #ffffff !important;
}
.nav-item--phantom:hover{
  background: var(--phantom-red-bg-hover) !important;
  text-decoration: none;
  border-color: var(--phantom-red-2) !important;
}

@keyframes focusPulseSoft {
  0%   { box-shadow: 0 0 0 0 rgba(255,59,63,.35); }
  100% { box-shadow: 0 0 0 8px rgba(255,59,63,0); }
}
.sub-item.active.active-flash,
.nav-item.active.active-flash {
  animation: focusPulseSoft .6s ease-out 1;
}


/* Section-Header: Linie bleibt, kein zusätzliches margin-bottom nötig */
.section .section-head{
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

/* Inhalt unter dem Header: einheitlicher Abstand */
.section .section-body{
  margin-top: var(--section-gap);
}

/* Karten sauber stapeln – unabhängig von Grid/Flex */
.section .stack-cards > * + *{
  margin-top: var(--card-gap) !important;
}

/* Optionale Größen für andere Abschnitte */
.section .stack-cards.lg   > * + *{ margin-top: 24px !important; }
.section .stack-cards.xl   > * + *{ margin-top: 32px !important; }
.section .section-body.lg  { margin-top: 28px; }
.section .section-body.xl  { margin-top: 32px; }

/* Einheitliche Badge-Basis: zentriert & ohne Unterstreichung */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;              /* Übersicht: leicht größer */
  padding:0 12px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  font-family:'Rajdhani', system-ui, sans-serif;
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;            /* verhindert vertikales Verrutschen */
  text-decoration:none;
  white-space:nowrap;       /* einzeilig (optional); entfernen, wenn Wrapping gewünscht ist */
}

/* Gold-Variante wie in der Übersicht */
.badge--gold{
  border-color:var(--gold-2);
  color:var(--gold);
}

/* Hover (dezent) */
.badge:hover{ background:rgba(215,183,107,.08); }

/* Leaf/Detail: noch größer, bleibt zentriert */
.section-head--map .badge{
  height:34px;
  padding:0 14px;
  font-size:14.5px;
}

/* Falls du auch die Badges unter den Bildern im Leaf größer willst: */
.card--map .map-actions .badge{
  height:34px;
  padding:0 14px;
  font-size:14.5px;
}

/* Headerzeile ausrichten (Titel links, Badges rechts) */
.section-head--map{
  display:flex;
  align-items:center;       /* sorgt für gleiche Höhe */
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.detail-title{ margin:0; line-height:1.1; }

/* ===== HCG PATCH BLOCK ===== */

/* =========================
   FINAL BG + LAYOUT OVERRIDES (safe, non-breaking)
   ========================= */

/* 0) Global typography bump */
html{ font-size:17px !important; }
body{ line-height:1.45 !important; }

/* 1) Background via body::before using --bg-image variable */
:root{ --bg-image: url('/assets/img/bg/bg-default.png'); }

/* Map body classes -> variable */
body.bg-default   { --bg-image: url('/assets/img/bg/bg-default.png'); }
body.bg-maps      { --bg-image: url('/assets/img/bg/bg-maps.png'); }
body.bg-modes     { --bg-image: url('/assets/img/bg/bg-modes.png'); }
body.bg-vehicles  { --bg-image: url('/assets/img/bg/bg-vehicles.png'); }
body.bg-weapons   { --bg-image: url('/assets/img/bg/bg-weapons.png'); }
body.bg-classes   { --bg-image: url('/assets/img/bg/bg-classes.png'); }
body.bg-challenges{ --bg-image: url('/assets/img/bg/bg-challenges.png'); }
body.bg-news      { --bg-image: url('/assets/img/bg/bg-news.png'); }
body.bg-faq       { --bg-image: url('/assets/img/bg/bg-faq.png'); }

/* Disable any DOM bg-layer to avoid conflicts */
.bg-layer{ display:none !important; }

/* ==== Globaler Seitenhintergrund – robust & ohne Shorthand ==== */
html, body{ height:100%; }

body{
  position: relative;
  background-color: #000;            /* nur Fallback – KEIN !important */
  overflow-x: hidden;
}

/* Hintergrundbild sitzt auf body::before und liest var(--bg-image) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* einzelne Properties (keine Shorthand) */
  background-image: var(--bg-image);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;

  opacity: .30;
}

/* sichtbare Ebenen liegen darüber */
.headbar, .footbar, .sidebar, .main{
  position: relative;
  z-index: 1;
}

/* große Wrapper transparent lassen, damit nichts das Bild überdeckt */
.main,
.main-inner,
.section,
.content,
.page,
.wrapper,
.maps-view,
.maps-wrap{
  background: transparent !important;
  border: none !important;
}

/* Make sure all big wrappers are transparent so BG is visible */
.main,
.main-inner,
.section,
.content,
.page,
.wrapper,
.maps-view,
.maps-wrap{
  background: transparent !important;
  border: none !important;
}

/* Bars and sidebar on top of bg */
.headbar, .footbar, .sidebar, .main{ position:relative; z-index:1; }
.sidebar{
  background: rgba(15,19,23,.50) !important;
  backdrop-filter: saturate(120%) blur(2px);
}

/* Lightbox above everything */
.lb{ z-index: 9999 !important; }
.main{ z-index:auto !important; } /* avoid creating a stacking context */

/* Maps overview: enforce 2-column grid */
.maps-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

/* Section title: line above, gold color, larger top margin */
.sub-section-title{
  margin:32px 0 8px !important;
  padding-top:12px !important;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#e9d47a !important;
  position:relative;
}
.sub-section-title::before{
  content:"";
  display:block;
  height:0;
  border-top:1px solid var(--line);
  margin-bottom:12px;
}

/* Lightbox muss über ALLEM liegen */
.lb{
  position: fixed;
  inset: 0;
  z-index: 2147483000 !important; /* sehr hoch, sicher über Sidebar/Headbar */
  isolation: isolate;  /* eigener Stack, falls ein transform-Ahn existiert */
}
.lb-dialog{ z-index: 1; }
.lb-backdrop{ z-index: 0; }

/* Sidebar/Headbar nicht über Lightbox stapeln */
.sidebar{ z-index: 100 !important; }
.headbar, .footbar{ z-index: 100 !important; }

/* Während die LB offen ist: Scroll & Klicks auf UI blocken */
.lb-open{ overflow: hidden; }
.lb-open .sidebar,
.lb-open .headbar,
.lb-open .footbar{ pointer-events: none; }

/* Einheitlicher Bild-Platzhalter wie bei Weapons */
.card-img--ph {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:180px;              /* für Grid-Karten */
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  color: var(--muted);
  font-style: italic;
  text-align:center;
  padding: 12px;
}

/* Aspect-Ratio Hilfen für Header/Overview */
.ph-16x3 { aspect-ratio: 16 / 3; }
.ph-16x9 { aspect-ratio: 16 / 9; }

.header-figure .card-img--ph { width:100%; }   /* volle Breite im Header */
.overview-figure .card-img--ph { width:100%; } /* volle Breite im Overview */

/* Optional: Rahmen wie bei Weapons-Karten */
.with-frame .card-img--ph {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Cropping für Übersichtskarten (16:9) */
.card-img-wrap--16x9 { aspect-ratio: 16 / 9; }

.card-img-wrap--16x9 > img,
.card-img-wrap--16x9 > .card-img--ph {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* echtes Cropping */
  display: block;
}

/* Übersicht: Kartenbilder auf 16:3 croppen (nur header_img) */
.card-img-wrap--16x3 { aspect-ratio: 16 / 3; }

.card-img-wrap--16x3 > img,
.card-img-wrap--16x3 > .card-img--ph {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* echtes Cropping, kein Verzerren */
  display: block;
}

/* falls noch nicht vorhanden */
.ph-16x3 { aspect-ratio: 16 / 3; }
.img-cover { object-fit: cover; }

/* --- Einheitliches Cropping für alle Übersichtskarten --- */
.maps-view .card-img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
}

/* 16:3 für Übersichtskarten (Header-Bilder) */
.maps-view .card-img-wrap--16x3 {
  aspect-ratio: 16 / 3;
}

/* 16:9 falls irgendwo Overview-Karten genutzt werden */
.maps-view .card-img-wrap--16x9 {
  aspect-ratio: 16 / 9;
}

/* IMG & Platzhalter immer vollflächig, sauber gecroppt */
.maps-view .card-img-wrap > img,
.maps-view .card-img-wrap > .card-img--ph {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* wichtig: Cropping statt Strecken */
  display: block;
}

/* Sicherheitsnetz gegen ältere Regeln */
.maps-view .card-img-wrap img {
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* --- Kartenbild: allgemeiner Wrapper + 16:9 Crop --- */
.card-img-wrap {
  position: relative;
  overflow: hidden;
  background: #000;           /* keine weißen Ränder, falls Bild kurz lädt */
}

.card-img-wrap--16x9 {
  width: 100%;
  aspect-ratio: 16/9;         /* erzwingt Höhe im Raster */
}

/* Zentriertes Cropping für alle Kartenbilder */
.card-img-wrap--16x9 > img.img-cover,
.card-img-wrap--16x3 > img.img-cover,
.header-figure .img-cover {
  position: absolute;          /* falls nicht bereits so */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* beschneiden */
  object-position: center;     /* zentrieren */
  display: block;
}

/* --- YouTube/Thumbnail Crop: garantiert zentriert + vollflächig --- */
.card-img-wrap--16x9 {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.card-img-wrap--16x9 > img.img-cover {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  /* immer die kleinere Dimension füllen & Lücken vermeiden */
  width: auto !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;
  display: block;
}

/* Titel rechtsbündig im Feld */
.result-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
}

.result-meta{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  min-width:180px;     /* links bleibt Platz für Badges */
}

.result-title--right{
  margin-left:auto;    /* schiebt den Titel ganz nach rechts */
  text-align:right;    /* Text im Titel rechtsbündig */
  max-width:100%;
}

.result-title__text{
  white-space:nowrap;  /* optional: einzeilig */
  overflow:hidden;     /* bei langen Namen ... */
  text-overflow:ellipsis;
}

/* BF Maps History: Titel rechts im Feld */
.bfmh .result-row{
  display: grid !important;
  grid-template-columns: auto 1fr; /* links Badges (auto), rechts Titel (1fr) */
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.bfmh .result-meta{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 180px;  /* Platz für Badges links */
}

.bfmh .result-title{
  justify-self: end;      /* ganz nach rechts */
  text-align: right;      /* Text rechtsbündig */
  max-width: 100%;
}

.bfmh .result-title__text{
  white-space: nowrap;    /* einzeilig */
  overflow: hidden;       /* bei langen Namen … */
  text-overflow: ellipsis;
}

/* Erzwinge Flex-Layout der Zeile */
.result-item .result-row{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:10px 12px;
}

/* Links: Badges bleiben normal */
.result-item .result-meta{
  display:flex !important;
  gap:6px !important;
  flex-wrap:wrap !important;
  min-width:180px;
}

/* Spacer dehnt sich – schiebt den Titel nach rechts */
.result-item .result-spacer{
  flex:1 1 auto !important;
  min-width:12px; /* ein Hauch Luft */
}

/* Titelbox rechtsbündig */
.result-item .result-title{
  text-align:right !important;
  max-width:60vw;              /* optional: Zeile begrenzen */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Falls irgendwo Grid/Flex querfunkt, absichern */
.result-list, .result-item, .result-row, .result-title{
  box-sizing:border-box !important;
}