/*
  ================================================================
  layout.css — Seiten-Struktur
  ================================================================
  Diese Datei steuert das "große Bild": wo die Blöcke sitzen,
  wie Sektionen aufgebaut sind, die Navigation.

  Denk daran wie Architektur: reset.css = Fundament,
  variables.css = Materialien, layout.css = Grundriss.
  ================================================================
*/

/* ---------------------------------------------------------------
   BODY & GLOBALE EINSTELLUNGEN
--------------------------------------------------------------- */
body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  overflow-x: hidden;     /* Kein horizontales Scrollen */
  cursor: none;           /* Standard-Cursor verstecken (custom cursor in cursor.js) */
}

/* Auf Touch-Geräten: Standard-Cursor wiederherstellen (kein Custom Cursor) */
@media (pointer: coarse) {
  body        { cursor: auto; }
  #cursor-dot { display: none; }
  #bh-toggle  { cursor: pointer; }
}

/* ---------------------------------------------------------------
   CANVAS (Weltraum-Hintergrund)
   position: fixed = bleibt IMMER im Sichtbereich, scrollt nicht mit.
   z-index: 0 = hinter allem anderen.
--------------------------------------------------------------- */
#bg-canvas {
  position: fixed;
  inset: 0;               /* Kurzform: top:0, right:0, bottom:0, left:0 */
  z-index: 0;
  pointer-events: none;   /* Maus-Events "fallen durch" den Canvas */
}

/* ---------------------------------------------------------------
   PAGE WRAPPER
   Alle sichtbaren Inhalte liegen im page-wrapper, der ÜBER dem
   Canvas liegt (z-index: 1).
--------------------------------------------------------------- */
#page-wrapper {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------
   NAVIGATION
   position: fixed = immer oben sichtbar, auch beim Scrollen.
--------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 100;            /* Über allem anderen */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-10);

  /* Glasmorphismus-Effekt:
     backdrop-filter blur() macht alles HINTER dem Element unscharf.
     Das gibt den "Mattglas über dem Weltall"-Look. */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); /* Safari braucht das Präfix */
  background: rgba(7, 8, 24, 0.7);
  border-bottom: 1px solid var(--color-border);
}

.nav__logo {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

/* ::after = ein Pseudo-Element NACH dem Text — hier ein leuchtender Punkt */
.nav__logo::after {
  content: '.';
  color: var(--color-accent);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__link {
  font-family: var(--font-mono);
  font-size: 0.8125rem;           /* 13px */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.nav__link:hover {
  color: var(--color-accent);
}

/* ---------------------------------------------------------------
   HAMBURGER-BUTTON — standardmäßig versteckt, nur Mobile
--------------------------------------------------------------- */
.nav__burger {
  display: none;                  /* Desktop: unsichtbar */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 101;
  flex-shrink: 0;
}

.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* X-Icon wenn Menü offen */
.nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------
   SECTION CONTAINER
   Jede Sektion benutzt diese Klasse für konsistente Abstände.
   padding-top: nav-height + extra = damit Inhalt nicht unter
   der fixierten Nav verschwindet.
--------------------------------------------------------------- */
.section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-height) + var(--space-16));
  padding-bottom: var(--space-16);
  padding-left: var(--space-10);
  padding-right: var(--space-10);
}

/* Zentrierter Content-Block mit max-width */
.section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

/* ---------------------------------------------------------------
   HERO SEKTION
--------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 0 var(--space-10);
  position: relative;
  overflow: hidden;
}

.hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  padding-top: var(--nav-height);
}

/* ---------------------------------------------------------------
   GRID-SYSTEME
   CSS Grid macht komplexe Layouts mit wenig Code möglich.
--------------------------------------------------------------- */

/* 3-Spalten-Grid — bricht bei schmalem Viewport auf 1 Spalte */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 gleich breite Spalten */
  gap: var(--space-6);
}

/* 2-Spalten-Grid */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

/* ---------------------------------------------------------------
   DIVIDER — Trennlinie zwischen Sektionen
--------------------------------------------------------------- */
.divider {
  max-width: var(--max-width);
  margin: 0 auto;
  border: none;
  border-top: 1px solid var(--color-border);
  padding: 0 var(--space-10);
}

/* ---------------------------------------------------------------
   FOOTER
--------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) var(--space-10);
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer__copy {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.footer__links {
  display: flex;
  gap: var(--space-6);
}

.footer__link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------
   RESPONSIVE — Mobile Anpassungen
   @media-Queries: Regeln gelten nur bei bestimmten Viewport-Breiten.
   max-width: 768px = alles bis Tablet-Breite.
--------------------------------------------------------------- */
@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nav {
    padding: 0 var(--space-5);
  }

  .section {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  .hero {
    padding: 0 var(--space-5);
  }

  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;  /* 1 Spalte auf Mobile */
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-6) var(--space-5);
  }
}

/* ---------------------------------------------------------------
   MOBILE NAV — Hamburger-Menü ab 640px Breite
--------------------------------------------------------------- */

/*
  .mobile-nav ist ein direktes Kind von <body> — NICHT von <nav>.
  Dadurch gibt es keine backdrop-filter-Stacking-Context-Probleme.
  position: fixed bezieht sich immer korrekt auf das Viewport.
*/
.mobile-nav {
  /* Standard: komplett versteckt (auch auf Desktop) */
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  background: rgba(4, 5, 14, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 150;             /* Über der Nav (100) */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  pointer-events: none;
}

.mobile-nav__link {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.mobile-nav__link:hover,
.mobile-nav__link--active {
  color: var(--color-accent);
}

@media (max-width: 640px) {
  /* Desktop-Links auf Mobile ausblenden */
  .nav__links {
    display: none;
  }

  /* Hamburger-Button einblenden */
  .nav__burger {
    display: flex;
  }

  /* Mobile-Overlay: Flexbox aktivieren (war display:none) */
  .mobile-nav {
    display: flex;
  }

  /* Geöffneter Zustand */
  .mobile-nav--open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}