/* mobile.css */
/* Gilt nur bis 768px, weil wir die Datei im <link> schon so begrenzen */

:root {
  --header-mobile-height: 54px; /* kleiner als Desktop (64px) */
}

/* Header kompakter machen */
.site-header {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
}

.header-inner {
  min-height: var(--header-mobile-height);
  padding: 0 0.85rem; /* weniger Seitenabstand */
  gap: 0.75rem;
}

/* Brand-Bereich */
.brand {
  gap: 6px; /* statt 10px */
  align-items: center;
}

.brand-abbr {
  padding: 4px 8px; /* kleineres Pill-Badge */
  font-size: 0.75rem;
}

.brand-full {
  font-size: 0.85rem; /* statt ~1rem */
  line-height: 1;
}

/* Falls rechts bei dir noch Buttons / Sprache / Presale sind: kleiner machen */
.header-actions {
  display: flex;
  gap: 0.5rem;
}

.header-actions .btn,
.header-actions button {
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  line-height: 1.1;
  border-radius: 999px;
}

/* Optional: damit der Header nicht „klobig“ wirkt beim Scrollen */
body {
  padding-top: var(--header-mobile-height);
}

/* ✅ Nur auf kleinen Screens ausblenden */
@media (max-width: 768px) {
  .site-nav {
    display: none;
  }
}