/* ══════════════════════════════════════════════════════════════
   SEKTOR ROLEPLAY — Docs Theme
   Look angelehnt an sektorrp.tebex.io: Near-Black + Maroon-Glow,
   Gold-Akzent, Techno-Display-Font.
   ══════════════════════════════════════════════════════════════ */

/* ── Farb-Tokens (Slate-Scheme überschreiben) ── */
[data-md-color-scheme="slate"] {
  --sektor-gold:        #e2a84b;
  --sektor-gold-bright: #f3c878;
  --sektor-maroon:      #3a0c1c;
  --sektor-magenta:     #d4406f;
  --sektor-teal:        #1fa6b8;

  --md-default-bg-color:        #0b0608;
  --md-default-fg-color:        #ece6e1;
  --md-default-fg-color--light: #b9b0ab;
  --md-default-fg-color--lighter: #7d736e;

  --md-primary-fg-color:        #0b0608;
  --md-primary-bg-color:        #ece6e1;
  --md-accent-fg-color:         var(--sektor-gold-bright);

  --md-typeset-a-color:         var(--sektor-gold);

  --md-code-bg-color:           #150e11;
  --md-code-fg-color:           #ece6e1;
}

/* ── Hintergrund wie Bild 2: eigener fixierter Layer hinter allem ── */
[data-md-color-scheme="slate"] body { background-color: #0a0610; }
[data-md-color-scheme="slate"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #0c0712;
  background-image:
    radial-gradient(1050px 1050px at 6% 44%, rgba(168, 40, 94, .78), transparent 64%),
    radial-gradient(1100px 1100px at 94% 58%, rgba(152, 34, 84, .70), transparent 64%),
    radial-gradient(660px 540px at 95% 2%, rgba(36, 140, 160, .24), transparent 55%),
    radial-gradient(1150px 800px at 50% 112%, rgba(128, 30, 70, .52), transparent 62%);
}

/* ── Content/Main/Footer transparent → Maroon-Verlauf über ganze Seite ── */
[data-md-color-scheme="slate"] .md-main,
[data-md-color-scheme="slate"] .md-container,
[data-md-color-scheme="slate"] .md-content,
[data-md-color-scheme="slate"] .md-content__inner,
[data-md-color-scheme="slate"] .md-sidebar,
[data-md-color-scheme="slate"] .md-footer,
[data-md-color-scheme="slate"] .md-footer-meta {
  background-color: transparent !important;
}

/* ── Header transparent über dem Glow ── */
[data-md-color-scheme="slate"] .md-header {
  background-color: rgba(11, 6, 8, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226, 168, 75, .14);
}
[data-md-color-scheme="slate"] .md-tabs {
  background-color: transparent;
  border-bottom: 1px solid rgba(226, 168, 75, .10);
}

/* ── Techno-Font für Logo, Titel, Überschriften ── */
.md-header__title,
.md-ellipsis,
.md-typeset h1,
.md-typeset h2 {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: .01em;
}
.md-typeset h1 {
  color: var(--sektor-gold);
  text-transform: uppercase;
  font-size: 1.7rem;
  text-shadow: 0 2px 18px rgba(226, 168, 75, .25);
}
.md-typeset h2 {
  color: var(--sektor-gold-bright);
  border-bottom: 1px solid rgba(226, 168, 75, .15);
  padding-bottom: .25em;
}
.md-typeset h3 { color: #f0e9e3; }

/* Body-Schrift */
body, .md-typeset,
:root {
  --md-text-font-family: Arial, Helvetica, sans-serif;
}
body, .md-typeset { font-family: Arial, Helvetica, sans-serif; }

/* ── Navigation: aktiver Link gold ── */
.md-tabs__link--active,
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--sektor-gold) !important;
}
.md-tabs__link:hover { color: var(--sektor-gold-bright); }

/* ── Links + Hover ── */
.md-typeset a:hover { color: var(--sektor-gold-bright); }

/* ── Such-Feld ── */
[data-md-color-scheme="slate"] .md-search__input {
  background-color: rgba(255, 255, 255, .04);
  border: 1px solid rgba(226, 168, 75, .18);
}
[data-md-color-scheme="slate"] .md-search__input::placeholder { color: #8a7f79; }

/* ── Cards (grid cards auf der Startseite) ── */
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li,
[data-md-color-scheme="slate"] .md-typeset .grid > .card {
  background: linear-gradient(160deg, rgba(40, 20, 26, .55), rgba(17, 10, 13, .85));
  border: 1px solid rgba(226, 168, 75, .16);
  border-radius: 12px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover {
  border-color: rgba(226, 168, 75, .5);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards .twemoji,
[data-md-color-scheme="slate"] .md-typeset .grid.cards svg { color: var(--sektor-gold); }

/* ── Tabellen ── */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: rgba(226, 168, 75, .10);
  color: var(--sektor-gold-bright);
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .05em;
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border: 1px solid rgba(226, 168, 75, .14);
}

/* ── Buttons / Admonitions Akzent ── */
[data-md-color-scheme="slate"] .md-typeset .admonition.tip,
[data-md-color-scheme="slate"] .md-typeset details.tip {
  border-color: var(--sektor-gold);
}
.md-typeset .admonition.tip > .admonition-title,
.md-typeset details.tip > summary {
  background-color: rgba(226, 168, 75, .12);
}

/* ── Footer ── */
[data-md-color-scheme="slate"] .md-footer { background-color: #080406; }
[data-md-color-scheme="slate"] .md-footer-meta { background-color: #060304; }

/* ── Logo im Header etwas größer + Rundung ── */
.md-header__button.md-logo img,
.md-header__button.md-logo svg { height: 34px; width: auto; border-radius: 7px; }

/* ── Linke Sidebar: Ressourcen-Nav als Card (Store-Stil) ── */
@media screen and (min-width: 76.25em) {
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-sidebar__scrollwrap {
    background: linear-gradient(160deg, rgba(44, 22, 28, .55), rgba(15, 9, 12, .92));
    border: 1px solid rgba(226, 168, 75, .18);
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
    padding: 10px 6px 10px 12px;
    margin-right: 6px;
  }
  /* Section-Header „Ressourcen" gold + Trennlinie */
  [data-md-color-scheme="slate"] .md-nav--primary > .md-nav__list > .md-nav__item--section
    > .md-nav__link,
  [data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--section > label.md-nav__link {
    color: var(--sektor-gold) !important;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .08em;
    font-weight: 700;
  }
  /* Aufklappbare Produkt-Items leicht abgesetzt */
  [data-md-color-scheme="slate"] .md-nav--primary .md-nav__item .md-nav__item > .md-nav__link {
    border-radius: 6px;
    padding-left: 8px;
  }
  [data-md-color-scheme="slate"] .md-nav--primary .md-nav__link:hover {
    color: var(--sektor-gold-bright);
  }
}

/* ── Scrollbar (Webkit) ── */
[data-md-color-scheme="slate"] ::-webkit-scrollbar { width: 11px; height: 11px; }
[data-md-color-scheme="slate"] ::-webkit-scrollbar-track { background: #0b0608; }
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--sektor-maroon), #1a0a10); border-radius: 6px;
}