/* ==========================================================================
   808lab — Hacker Theme Override
   Monospace · Terminal · Deep Dark
   ========================================================================== */

/* --- Google Fonts: JetBrains Mono --- */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap");

/* --- CSS Variables --- */
:root {
  --hacker-bg:         #080c08;
  --hacker-bg-alt:     #0d120d;
  --hacker-bg-card:    #0f150f;
  --hacker-border:     #1a2e1a;
  --hacker-green:      #00ff41;
  --hacker-green-dim:  #39a846;
  --hacker-green-glow: rgba(0, 255, 65, 0.15);
  --hacker-text:       #b8d4b8;
  --hacker-text-bold:  #e0f0e0;
  --hacker-text-dim:   #5a7a5a;
  --hacker-font:       "JetBrains Mono", "Fira Code", "Source Code Pro", "Courier New", monospace;
  --hacker-scanline:   repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
}

/* --- Base & Body --- */
html, body {
  background-color: var(--hacker-bg) !important;
  color: var(--hacker-text) !important;
}

body, input, select, textarea, p, li, td, th, blockquote, label {
  font-family: var(--hacker-font) !important;
  font-size: 0.92rem !important;
  line-height: 1.9 !important;
  color: var(--hacker-text) !important;
}

/* --- Headings: Terminal Style --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hacker-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: var(--hacker-green) !important;
  text-transform: uppercase !important;
}

h1::before { content: "> "; color: var(--hacker-green-dim); }
h2::before { content: "## "; color: var(--hacker-green-dim); font-size: 0.75em; }
h3::before { content: "### "; color: var(--hacker-green-dim); font-size: 0.7em; }
h4::before, h5::before, h6::before { content: "$ "; color: var(--hacker-green-dim); font-size: 0.7em; }

/* --- Links --- */
a {
  color: var(--hacker-green) !important;
  border-bottom-color: var(--hacker-green-dim) !important;
  transition: all 0.15s ease !important;
}
a:hover {
  color: #fff !important;
  text-shadow: 0 0 8px var(--hacker-green), 0 0 20px var(--hacker-green) !important;
  border-bottom-color: transparent !important;
}

/* --- Wrapper / Background --- */
#wrapper {
  background-color: var(--hacker-bg) !important;
}

#wrapper > .bg {
  background-image:
    var(--hacker-scanline),
    linear-gradient(135deg, #050905 0%, #080c08 50%, #050905 100%) !important;
  opacity: 0.97 !important;
}

/* --- Intro Section (Hero) --- */
#intro {
  background: transparent !important;
  text-align: left !important;
  padding-left: 3rem !important;
}

#intro::before {
  content: "root@808lab:~# ./init --blog" !important;
  display: block !important;
  font-family: var(--hacker-font) !important;
  font-size: 0.85rem !important;
  color: var(--hacker-green-dim) !important;
  margin-bottom: 1.5rem !important;
  opacity: 0.8 !important;
  letter-spacing: 0.05em !important;
}

#intro h1 {
  font-family: var(--hacker-font) !important;
  font-size: 3.5rem !important;
  color: var(--hacker-green) !important;
  text-shadow: 0 0 20px rgba(0, 255, 65, 0.5), 0 0 60px rgba(0, 255, 65, 0.2) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.04em !important;
}

#intro h1::before { content: none !important; }

#intro h1::after {
  content: "_" !important;
  animation: blink 1.1s step-end infinite !important;
  color: var(--hacker-green) !important;
}

#intro p {
  font-family: var(--hacker-font) !important;
  font-size: 0.95rem !important;
  color: var(--hacker-text) !important;
  font-style: normal !important;
  text-align: left !important;
  opacity: 0.85 !important;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* --- Header (Logo/Nav Bar) --- */
#header {
  background: rgba(8, 12, 8, 0.97) !important;
  border-bottom: 1px solid var(--hacker-border) !important;
}

#header .logo {
  font-family: var(--hacker-font) !important;
  font-weight: 700 !important;
  color: var(--hacker-green) !important;
  border-color: var(--hacker-green) !important;
  border-width: 2px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 12px rgba(0, 255, 65, 0.4) !important;
}

#header .logo:hover {
  color: #fff !important;
  border-color: #fff !important;
  text-shadow: 0 0 16px var(--hacker-green) !important;
}

/* --- Navigation --- */
#nav, nav {
  background: var(--hacker-bg-alt) !important;
  border-bottom: 1px solid var(--hacker-border) !important;
}

#nav ul li a, nav ul li a {
  font-family: var(--hacker-font) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--hacker-text-dim) !important;
  transition: all 0.15s ease !important;
}

#nav ul li a:hover, nav ul li a:hover,
#nav ul li a.active, nav ul li a.active {
  color: var(--hacker-green) !important;
  text-shadow: 0 0 8px var(--hacker-green-glow) !important;
}

/* --- Post / Article Cards --- */
.posts article, article.post {
  background: var(--hacker-bg-card) !important;
  border: 1px solid var(--hacker-border) !important;
  border-left: 3px solid var(--hacker-green-dim) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.posts article:hover, article.post:hover {
  border-left-color: var(--hacker-green) !important;
  box-shadow: 0 0 20px var(--hacker-green-glow) !important;
}

/* --- Post Header / Meta --- */
.post-meta, .post-info, .byline {
  font-family: var(--hacker-font) !important;
  font-size: 0.75rem !important;
  color: var(--hacker-text-dim) !important;
  letter-spacing: 0.05em !important;
}

.post-meta::before {
  content: "// " !important;
  color: var(--hacker-green-dim) !important;
}

/* --- Code Blocks --- */
code, pre, pre code {
  font-family: var(--hacker-font) !important;
  background: #030603 !important;
  color: var(--hacker-green) !important;
  border: 1px solid var(--hacker-border) !important;
  border-radius: 0 !important;
}

pre {
  border-left: 3px solid var(--hacker-green-dim) !important;
  padding: 1.2rem 1.5rem !important;
  position: relative !important;
}

pre::before {
  content: "$ " !important;
  color: var(--hacker-green-dim) !important;
  position: absolute !important;
  top: 0.4rem !important;
  right: 0.8rem !important;
  font-size: 0.7rem !important;
  opacity: 0.6 !important;
}

/* --- Blockquote --- */
blockquote {
  border-left: 3px solid var(--hacker-green-dim) !important;
  background: var(--hacker-bg-alt) !important;
  color: var(--hacker-text) !important;
  font-style: normal !important;
  padding: 0.75rem 1.5rem !important;
}

blockquote::before {
  content: "// " !important;
  color: var(--hacker-green-dim) !important;
  font-family: var(--hacker-font) !important;
}

/* --- Buttons --- */
.button, button, input[type="submit"] {
  font-family: var(--hacker-font) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--hacker-green) !important;
  border: 1px solid var(--hacker-green-dim) !important;
  border-radius: 0 !important;
  transition: all 0.15s ease !important;
}

.button:hover, button:hover, input[type="submit"]:hover {
  background: var(--hacker-green-glow) !important;
  border-color: var(--hacker-green) !important;
  color: #fff !important;
  box-shadow: 0 0 16px var(--hacker-green-glow) !important;
}

/* --- HR / Dividers --- */
hr {
  border-bottom: 1px solid var(--hacker-border) !important;
}

hr::before {
  content: "<!-- ==================== -->" !important;
  display: block !important;
  text-align: center !important;
  font-family: var(--hacker-font) !important;
  font-size: 0.65rem !important;
  color: var(--hacker-text-dim) !important;
  margin-bottom: 0.5rem !important;
  opacity: 0.5 !important;
}

/* --- Footer --- */
#footer {
  background: var(--hacker-bg-alt) !important;
  border-top: 1px solid var(--hacker-border) !important;
  color: var(--hacker-text-dim) !important;
}

#footer::before {
  content: "EOF" !important;
  display: block !important;
  font-family: var(--hacker-font) !important;
  font-size: 0.7rem !important;
  color: var(--hacker-green-dim) !important;
  text-align: center !important;
  padding-top: 1rem !important;
  opacity: 0.5 !important;
}

/* --- Images --- */
img {
  filter: brightness(0.88) contrast(1.05) saturate(0.7) !important;
  border: 1px solid var(--hacker-border) !important;
}

/* --- Selection --- */
::selection {
  background: var(--hacker-green) !important;
  color: var(--hacker-bg) !important;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; background: var(--hacker-bg); }
::-webkit-scrollbar-thumb { background: var(--hacker-green-dim); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--hacker-green); }



/* ==========================================================================
   FIXES v2 — Intro zentriert, Posts dunkel
   ========================================================================== */

/* FIX 1: Intro-Inhalt zentrieren statt unten kleben */
#intro {
  justify-content: center !important;
  padding-top: 6rem !important;
  padding-bottom: 2rem !important;
}

/* FIX 1b: Hintergrund-Layer — overlay.png entfernen, nur sauberer Dark-Gradient */
#wrapper > .bg,
.bg {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, 0.06) 3px,
      rgba(0, 0, 0, 0.06) 4px
    ),
    linear-gradient(160deg, #060a06 0%, #0a0f0a 60%, #060a06 100%) !important;
  background-color: #080c08 !important;
}

/* FIX 2: Posts / Main-Content-Bereich — weg von #fff */
#main,
#main > .inner,
.inner {
  background-color: var(--hacker-bg) !important;
  color: var(--hacker-text) !important;
}

/* FIX 2b: Artikel-Karten und Post-Inhalt */
.posts > article,
article.post,
.post-full,
.post-full-content,
.gh-content,
.post-content,
.content-body,
section.posts {
  background-color: var(--hacker-bg) !important;
  color: var(--hacker-text) !important;
}

/* FIX 2c: Trennlinien und Alt-Bereiche */
.alt,
.split,
footer.alt,
section.alt,
div.alt {
  background-color: var(--hacker-bg-alt) !important;
}

/* FIX 2d: Pagination-Bereich */
.pagination,
.pagination a {
  background-color: var(--hacker-bg) !important;
  color: var(--hacker-text-dim) !important;
  border-color: var(--hacker-border) !important;
}

/* FIX 2e: Sicherstellen dass kein weisser Rest bleibt */
*:not(a):not(button):not(.button):not(input):not(code):not(pre) {
  background-color: inherit;
}


/* ==========================================================================
   FIXES v3 — Hero höher, BG-Farbe vereinheitlicht
   ========================================================================== */

/* FIX 3a: Hero-Inhalt weiter nach oben */
#intro {
  justify-content: flex-start !important;
  padding-top: 22vh !important;
  padding-bottom: 4rem !important;
  min-height: 100vh !important;
}

/* FIX 3b: Alle Hintergründe auf einheitliches dunkles Grün statt Schwarz */
html, body {
  background-color: #0a0f0a !important;
}

#wrapper,
#wrapper > .bg,
.bg {
  background-color: #0a0f0a !important;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, 0.05) 3px,
      rgba(0, 0, 0, 0.05) 4px
    ),
    linear-gradient(160deg, #080d08 0%, #0a0f0a 60%, #080d08 100%) !important;
}

#main,
#main > .inner,
.inner {
  background-color: #0a0f0a !important;
}

.posts > article,
article.post,
.post-full,
.post-full-content,
.gh-content,
.post-content,
.content-body,
section.posts {
  background-color: #0d140d !important;
}

#footer {
  background-color: #0a0f0a !important;
}


/* ==========================================================================
   FIXES v4 — Navigation Active-State
   ========================================================================== */

/* Nav-Bar Hintergrund: weg vom hellen rgba-Weiß */
nav {
  background: rgba(10, 15, 10, 0.92) !important;
  border-bottom: 1px solid #1a2e1a !important;
  backdrop-filter: blur(4px) !important;
}

/* Nav Links: Basis-Stil */
nav ul.links li a {
  font-family: var(--hacker-font) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  color: #5a7a5a !important;
  transition: color 0.15s ease, border-bottom 0.15s ease !important;
}

nav ul.links li a:hover {
  color: #b8d4b8 !important;
  background-color: transparent !important;
}

/* Active: Terminal Underline — kein weißer Kasten */
nav ul.links li.active {
  background-color: transparent !important;
  border-bottom: 2px solid #00ff41 !important;
  position: relative !important;
}

nav ul.links li.active a {
  color: #00ff41 !important;
  background-color: transparent !important;
}

nav ul.links li.active a:hover {
  color: #fff !important;
}

/* Optional: kleines Terminal-Symbol vor aktivem Link */
nav ul.links li.active a::before {
  content: '> ' !important;
  color: #39a846 !important;
  font-family: var(--hacker-font) !important;
}


/* ==========================================================================
   FIXES v5 — Karten-Rand: dunkel + Hover-Glow
   ========================================================================== */

.posts article,
article.post,
.post-full {
  border: 1px solid #1a2e1a !important;
  border-left: 1px solid #1a2e1a !important;
  box-shadow: none !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.posts article:hover,
article.post:hover,
.post-full:hover {
  border-color: #2a4a2a !important;
  border-left-color: #2a4a2a !important;
  box-shadow:
    0 0 12px rgba(0, 255, 65, 0.12),
    0 0 30px rgba(0, 255, 65, 0.05),
    inset 0 0 0 1px rgba(0, 255, 65, 0.08) !important;
}


/* ==========================================================================
   TOOLS PAGE — Kachel-Grid
   ========================================================================== */

.tools-page {
  padding: 3rem 2rem 4rem;
  max-width: 900px;
  margin: 0 auto;
}

.tools-header {
  margin-bottom: 3rem;
  border-bottom: 1px solid #1a2e1a;
  padding-bottom: 2rem;
}

.tools-prompt {
  display: block;
  font-family: var(--hacker-font);
  font-size: 0.78rem;
  color: var(--hacker-green-dim);
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
}

.tools-header h1 {
  font-size: 2rem !important;
  margin-bottom: 0.5rem !important;
}

.tools-header h1::before { content: '> ' !important; }

.tools-subtitle {
  font-size: 0.85rem !important;
  color: var(--hacker-text-dim) !important;
  font-style: normal !important;
  text-align: left !important;
  margin: 0 !important;
}

/* Grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* Kachel */
.tool-tile {
  display: block;
  border: 1px solid #1a2e1a;
  background: #0d140d;
  text-decoration: none !important;
  border-bottom: none !important;
  color: var(--hacker-text) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
}

.tool-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: #1a2e1a;
  transition: background 0.2s ease;
}

.tool-tile:hover {
  border-color: #2a4a2a !important;
  background: #0f1a0f !important;
  box-shadow:
    0 0 18px rgba(0, 255, 65, 0.1),
    0 0 40px rgba(0, 255, 65, 0.04);
}

.tool-tile:hover::before {
  background: #00ff41;
}

.tool-tile-inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.25rem;
}

.tool-tile-icon {
  font-size: 1.5rem;
  color: #39a846;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1rem;
  transition: color 0.2s ease;
}

.tool-tile:hover .tool-tile-icon {
  color: #00ff41;
}

.tool-tile-body {
  flex: 1;
}

.tool-tile-body h3 {
  font-size: 0.9rem !important;
  color: #b8d4b8 !important;
  margin-bottom: 0.4rem !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
}

.tool-tile-body h3::before { content: none !important; }

.tool-tile:hover .tool-tile-body h3 {
  color: #00ff41 !important;
}

.tool-tile-body p {
  font-size: 0.78rem !important;
  color: var(--hacker-text-dim) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  text-align: left !important;
}

.tool-tile-arrow {
  font-size: 1rem;
  color: #1a2e1a;
  flex-shrink: 0;
  align-self: center;
  transition: color 0.2s ease, transform 0.2s ease;
}

.tool-tile:hover .tool-tile-arrow {
  color: #00ff41;
  transform: translateX(4px);
}


/* ==========================================================================
   MOBILE NAV PANEL — Dark Theme
   ========================================================================== */

/* Toggle-Button (Hamburger) */
#navPanelToggle {
  font-family: var(--hacker-font) !important;
  color: var(--hacker-green) !important;
  background: rgba(10, 15, 10, 0.92) !important;
  letter-spacing: 0.1em !important;
  font-size: 0.72rem !important;
  border: 1px solid #1a2e1a !important;
}

#navPanelToggle.alt {
  background-color: rgba(10, 15, 10, 0.95) !important;
  box-shadow: 0 0 12px rgba(0, 255, 65, 0.08) !important;
  color: var(--hacker-green) !important;
}

#navPanelToggle.alt:hover,
#navPanelToggle:hover {
  background-color: #0d140d !important;
  color: #fff !important;
  border-color: #2a4a2a !important;
}

/* Slide-in Panel */
#navPanel {
  background: #0a0f0a !important;
  color: var(--hacker-text) !important;
  border-left: 1px solid #1a2e1a !important;
  box-shadow: -4px 0 30px rgba(0, 255, 65, 0.06) !important;
}

/* Nav-Links im Panel */
#navPanel .links li {
  border-top: 1px solid #1a2e1a !important;
}

#navPanel .links li a {
  font-family: var(--hacker-font) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
  color: var(--hacker-text-dim) !important;
  transition: color 0.15s ease !important;
}

#navPanel .links li a:hover {
  color: var(--hacker-green) !important;
}

#navPanel .links li.active a {
  color: var(--hacker-green) !important;
}

#navPanel .links li.active a::before {
  content: '> ' !important;
  color: #39a846 !important;
}

/* Close-Button */
#navPanel .close {
  color: var(--hacker-text-dim) !important;
  font-family: var(--hacker-font) !important;
}

#navPanel .close:hover {
  color: var(--hacker-green) !important;
}


/* ==========================================================================
   FIXES v6 — Einheitlicher Hintergrund + RSS-Button
   ========================================================================== */

/* FIX 1: Einheitliche Hintergrundfarbe überall — ein Wert, keine Abstufungen */
html, body,
#wrapper,
#wrapper > .bg,
.bg,
#main,
#main > .inner,
.inner,
#footer,
#nav, nav,
#navPanel,
.posts,
.posts > article,
article.post {
  background-color: #090e09 !important;
}

/* Gradient nur noch eine minimale Tiefe, Start = Ende = gleiche Farbe */
#wrapper > .bg,
.bg {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.04) 3px,
      rgba(0,0,0,0.04) 4px
    ),
    linear-gradient(180deg, #090e09 0%, #090e09 100%) !important;
}

/* Post-Karten minimal abgesetzt — aber nur 1 Stufe */
.posts > article,
article.post {
  background-color: #0c130c !important;
}

/* FIX 2: RSS / Icons.alt — weißen Inset-Ring entfernen */
ul.icons.alt li .icon:before,
nav ul.icons.alt li .icon:before,
#navPanel ul.icons.alt li .icon:before,
.icons.alt li .icon:before {
  box-shadow: none !important;
}

ul.icons.alt li a.icon:hover:before,
nav ul.icons.alt li a.icon:hover:before,
#navPanel ul.icons.alt li a.icon:hover:before {
  box-shadow: none !important;
  color: var(--hacker-green) !important;
}

/* RSS Icon Farbe im Panel */
#navPanel .icons li a,
#navPanel .icons li a.icon {
  color: var(--hacker-text-dim) !important;
  border-bottom: none !important;
}

#navPanel .icons li a:hover,
#navPanel .icons li a.icon:hover {
  color: var(--hacker-green) !important;
}








/* ==========================================================================
   FIXES v7 — Post/Page Links: maximale Spezifität
   ========================================================================== */

/* Nuklear-Selektor: gewinnt gegen alles */
html body #main section.post div.content a,
html body #main section.post div.content p a,
html body #main section.post div.content li a,
html body #main section.post div.content h1 a,
html body #main section.post div.content h2 a,
html body #main section.post div.content h3 a,
html body #main section.post div.content blockquote a,
html body #main article.post a,
html body #main article a {
  color: #e0e0e0 !important;
  border-bottom: 1px dotted rgba(224,224,224,0.4) !important;
  text-shadow: none !important;
}

html body #main section.post div.content a:hover,
html body #main section.post div.content p a:hover,
html body #main section.post div.content li a:hover,
html body #main article.post a:hover,
html body #main article a:hover {
  color: #00ff41 !important;
  border-bottom-color: transparent !important;
  text-shadow: 0 0 8px rgba(0,255,65,0.4) !important;
}

/* Nav explizit sichern — soll NICHT weiß werden */
html body nav a,
html body #nav a,
html body #navPanel a {
  color: #5a7a5a !important;
}
html body nav ul.links li.active a,
html body #nav ul.links li.active a {
  color: #00ff41 !important;
}


/* ==========================================================================
   FIXES v8 — strong/b im Post-Content weiß
   ========================================================================== */

/* strong + b in Post-Content: weiß (erbt sonst #212931 aus main.css) */
html body #main section.post div.content strong,
html body #main section.post div.content b,
html body #main section.post div.content p strong,
html body #main section.post div.content p b,
html body #main section.post div.content li strong,
html body #main section.post div.content li b {
  color: #ffffff !important;
}

/* Link der strong enthält: auch weiß */
html body #main section.post div.content a strong,
html body #main section.post div.content a b {
  color: #e0e0e0 !important;
}

html body #main section.post div.content a:hover strong,
html body #main section.post div.content a:hover b {
  color: #00ff41 !important;
}




/* ==========================================================================
   NEURAL NETWORK CANVAS BACKGROUND
   ========================================================================== */

/* Canvas: fixed, volle Fläche, über dem Body-BG aber unter dem Content */
#hacker-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Body: Hintergrundfarbe bleibt, Canvas zeichnet darüber */
html, body {
  background-color: #090e09 !important;
}

/* Wrapper + .bg transparent — damit Canvas durchscheint */
#wrapper,
#wrapper > .bg,
.bg {
  background-color: transparent !important;
  background-image: none !important;
}

/* Wrapper über Canvas */
#wrapper {
  position: relative !important;
  z-index: 1 !important;
}

/* Main + Footer bleiben leicht getönt damit Text lesbar bleibt */
#main,
#main > .inner,
.inner,
#footer,
#nav, nav {
  background-color: rgba(9, 14, 9, 0.82) !important;
}

.posts > article,
article.post {
  background-color: rgba(13, 20, 13, 0.88) !important;
}


/* ==========================================================================
   FIXES — Header + Nav transparent
   ========================================================================== */

#header,
nav,
#nav {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid rgba(0, 255, 65, 0.08) !important;
}

/* NavPanel (mobile Slide-in) bleibt leicht getönt — sonst unlesbar */
#navPanel {
  background: rgba(9, 14, 9, 0.92) !important;
}

/* NavPanelToggle (Hamburger) transparent */
#navPanelToggle,
#navPanelToggle.alt {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 1px solid rgba(0, 255, 65, 0.2) !important;
}