/* ═══════════════════════════════════════════════════════════════
   theme.css — Moritz Belli · Zentrale Farbvariablen + Nav
   Eingebunden von: index.html, shop.html, gear.html,
                    splitter.html, impressum.html
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Basis ── */
  --cream:  #f5f0e8;
  --dark:   #1a1710;
  --mid:    #3a3428;
  --muted:  #8a8070;

  /* ── Akzent ── */
  --accent:        #003333;
  --accent2:       #D4C5A9;
  --accent2-dark:  #b8aa90;
  --accent2-faint: rgba(212,197,169,0.07);

  /* ── Farbpalette (index.html map etc.) ── */
  --p1: #003333;
  --p2: #D4C5A9;
  --p3: #8a7a5f;
  --p4: #ede3d0;
  --p5: #6600B8;
  --p6: #BF5FFF;
  --p7: #1A003D;
  --p8: #E8CCFF;

  /* ── Borders ── */
  --border:     rgba(212,197,169,0.15);
  --border-dim: rgba(245,240,232,0.06);

  /* ── Cursor ── */
  --cursor-hex: #D4C5A9;
  --cursor-rgb: 212,197,169;
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP NAVIGATION
   Gilt für index.html, shop.html, gear.html, splitter.html, impressum.html
   Seiten-spezifische Abweichungen (z.B. engeres Mobile-Padding bei
   splitter/impressum) bleiben lokal im jeweiligen <style>-Block,
   da dieser nach theme.css geladen wird und somit übersteuert.
   ═══════════════════════════════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100; display: flex; align-items: center;
  justify-content: space-between; padding: 24px 48px;
}
nav::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(26,23,16,0.95), transparent);
  pointer-events: none;
}
.nav-name {
  font-family: 'Cormorant Garamond', serif; font-size: 1rem;
  font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream); text-decoration: none; position: relative;
  display: inline-flex; align-items: center; gap: 14px;
}
.nav-logo {
  width: 42px; height: 42px; display: block; flex-shrink: 0;
  border-radius: 50%; background: var(--dark);
}
.nav-links { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; position: relative; }
.nav-links a {
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,240,232,0.6); text-decoration: none; transition: color 0.3s;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent2); }

/* Instagram-Icon in der Desktop-Nav (als letztes Element in .nav-links) */
.nav-links a.nav-insta {
  display: inline-flex; align-items: center;
  color: rgba(245,240,232,0.6);
}
.nav-links a.nav-insta svg { width: 17px; height: 17px; display: block; }
.nav-links a.nav-insta:hover { color: var(--accent2); }

@media (max-width: 768px) {
  nav { padding: 20px 24px; }
  .nav-links { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BURGER BUTTON
   ═══════════════════════════════════════════════════════════════ */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px; height: 36px;
  background: none; border: none;
  padding: 4px;
  position: fixed;
  top: 20px; right: 24px;
  z-index: 200000;
}
.burger span {
  display: block; width: 24px; height: 2px; flex-shrink: 0;
  background: var(--cream);
  border-radius: 2px;
  margin: 3px 0;
  transition: transform 0.35s ease, opacity 0.25s ease,
              width 0.3s ease, background 0.25s ease;
  transform-origin: center;
}
/* X beim Öffnen — Striche in Akzentfarbe */
.burger.open span { background: var(--accent2); }
.burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; width: 0; }
.burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE MENU OVERLAY
   ═══════════════════════════════════════════════════════════════ */
.mobile-menu {
  display: none;
  position: fixed; inset: 0;
  background: rgba(26,23,16,0.98);
  z-index: 100000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.mobile-menu.open {
  display: flex;
  opacity: 1;
  pointer-events: all;
}
.mobile-menu a {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: rgba(245,240,232,0.6);
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--cursor-rgb),0.08);
  width: 70%;
  text-align: center;
  transition: color 0.2s;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover,
.mobile-menu a.active { color: var(--accent2); }
.mobile-menu a em { font-style: italic; color: var(--accent2); }

/* Feine Markierung der aktiven Seite */
.mobile-menu a.active::after {
  content: "";
  display: block;
  width: 26px; height: 1px;
  margin: 12px auto -2px;
  background: var(--accent2);
  opacity: 0.7;
}

/* Eleganter, gestaffelter Auftritt der Menüpunkte beim Öffnen */
.mobile-menu.open a {
  animation: mm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.mobile-menu.open a:nth-child(1) { animation-delay: 0.06s; }
.mobile-menu.open a:nth-child(2) { animation-delay: 0.12s; }
.mobile-menu.open a:nth-child(3) { animation-delay: 0.18s; }
.mobile-menu.open a:nth-child(4) { animation-delay: 0.24s; }
.mobile-menu.open a:nth-child(5) { animation-delay: 0.30s; }
@keyframes mm-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .burger { display: flex; }
  .mobile-menu { display: flex; pointer-events: none; }
  .mobile-menu.open { pointer-events: all; }
}