/* =======================================================
   layout.css
   Seitenlayout – FINAL & STABIL
   ======================================================= */

/* -----------------------
   Header
   ----------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-height);
  background: var(--bg, #fff);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
}

/* 🔑 ZENTRALER FIX: Header ist GRID, nicht flex */
.header__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--page-padding);

  display: grid;
  grid-template-columns: auto 1fr auto; /* Brand | Nav | Actions */
  align-items: center;
  height: 100%;
}

/* -----------------------
   Brand
   ----------------------- */
.brand {
  display: inline-grid;
  gap: 2px;
  text-decoration: none;
  color: inherit;
  font-weight: 200;
  letter-spacing: 0.03em;
}

.brand__mark {
  font-weight: 500;
  letter-spacing: 0.04em;
}

.brand__text {
  font-size: 0.75rem;
  opacity: 0.65;
}

/* -----------------------
   Desktop Navigation
   ----------------------- */
.nav-desktop {
  display: none;
  gap: 24px;
  justify-self: end;     /* ✅ sitzt rechts in der MITTLEREN Spalte */
  margin-right: 16px;   /* Luft zur Button-Gruppe */
}

/* -----------------------
   Header Actions (Theme + Burger)
   ----------------------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-self: end;     /* ✅ GANZ RECHTS */
}

/* -----------------------
   Burger Button (Mobile)
   ----------------------- */
.nav-toggle {
  background: none;
  border: none;
  cursor: pointer;

  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;
}

/* -----------------------
   Mobile Navigation
   ----------------------- */
.nav-mobile {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--bg, #fff);
  padding: 24px;

  display: grid;
  gap: 16px;

  transform: translateY(-8px);
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav-mobile:not([hidden]) {
  transform: translateY(0);
  opacity: 1;
}

.nav-mobile[hidden] {
  display: none;
}


/* -----------------------
   Main / Sections
   ----------------------- */
main {
  max-width: 100%;
  z-index: 2;
}

.hero {
  max-width: var(--max-width);
    margin-inline: auto;
    padding: var(--section-spacing) var(--page-padding);
    background: var(--bg);
}

.section {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--section-spacing) var(--page-padding);
  background:var(--bg);
}

.section-legal {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-top: calc(var(--header-height) + var(--header-height));
  padding-left: var(--page-padding);
  padding-right:  var(--page-padding);
  background:var(--bg);
}

/* Anker-Ziele unter Fix-Header korrekt */
section[id] {
  scroll-margin-top: var(--header-height);
}

.section-overlap {
  margin-top: -100px;   /* ✅ Content scrollt über Hero */
  position: relative;
  z-index: 2;
  background: var(--bg);
}



/* =======================================================
   Desktop Erweiterungen
   ======================================================= */
@media (min-width: 1024px) {

  /* Desktop Navigation sichtbar */
  .nav-desktop {
    display: flex;
  }

  /* Burger aus */
  .nav-toggle {
    display: none;
    pointer-events: none;
  }

  /* Mobile Nav komplett deaktivieren */
  .nav-mobile {
    display: none !important;
  }
  .section-overlap {
  margin-top: 0;
  }
}