/* ============================================================
   GLOBALE SITE-NAVIGATION — EINE Quelle fuer ALLE Seiten
   (index + speisekarte + franchise + impressum + datenschutz).
   Verhalten: js/nav.js. Identisch ueberall:
   - position: fixed, oben transparent -> dunkler Balken ab Scroll (.scrolled)
   - grosses Maskottchen-Logo (192px) mittig, schrumpft beim Scrollen auf 64px
   - Speisekarte + Franchise links, Socials rechts
   - < 1024px: Hamburger -> Dropdown-Panel-Menue (seit 19.08., vorher Vollbild;
     seit 19.08. abends inkl. Tablet portrait — Touch-Erlebnis wie Mobile,
     Tablet landscape/1024px+ bekommt Desktop)
   Der Intro-Fade (nur index) liegt als @keyframes navIn in index.html.
   ============================================================ */

.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  overflow: visible;
  transition: background .3s ease, border-color .3s ease;
}
.site-nav.scrolled {
  background: rgba(13, 11, 8, .94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #2E1E14;
}
.site-nav__inner {
  position: relative;
  max-width: 80rem; margin: 0 auto;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 24px;
}
@media (min-width: 1024px) { .site-nav__inner { padding: 16px 40px; } }

/* ---- Textlinks (links) ---- */
.nav-links { display: flex; align-items: center; gap: 28px; flex: 1 1 0; }
.nav-link {
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: 1.5px;
  text-transform: uppercase; color: #A89880; text-decoration: none;
  white-space: nowrap; transition: color .2s ease;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: #FFD700; transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
/* Hover nur auf Hover-Geraeten — auf Touch klebte der Zustand nach dem Tap
   (Mobile-Audit 2026-08-19). Gilt fuer alle :hover-Regeln dieser Datei. */
@media (hover: hover) {
  .nav-link:hover { color: #F5EDE0; }
  .nav-link:hover::after { transform: scaleX(1); }
}
.nav-link[aria-current="page"] { color: #F5EDE0; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); background: rgba(255, 215, 0, .45); }
.nav-link:focus-visible { outline: 2px solid #FFD700; outline-offset: 3px; border-radius: 2px; }

/* ---- Logo (mittig, gross -> schrumpft beim Scrollen) ----
   Perf-Umbau 2026-08-18: Der Shrink lief vorher als height-Transition (192->64px)
   = Layout + Re-Rasterung des Bitmaps in jedem Frame, auf allen Seiten. Jetzt:
   Layout-Box konstant klein (64px, mobil 56px), der grosse Zustand kommt per
   transform: scale() auf dem Anchor — compositor-only, Hit-Target + Fokusring
   skalieren mit. Optik identisch: 64x3=192 (Desktop), 56x16/7=128 (Mobile). */
.nav-logo {
  position: absolute; left: 50%; top: 8px;
  transform: translateX(-50%) scale(3);
  transform-origin: top center;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
  z-index: 100; display: block; line-height: 0;
}
.nav-logo img { height: 64px; width: auto; display: block; }
.site-nav.scrolled .nav-logo { transform: translateX(-50%) scale(1); }
.nav-logo:focus-visible { outline: 2px solid #FFD700; outline-offset: 3px; border-radius: 8px; }

/* ---- Socials (rechts) ---- */
.nav-social { display: flex; align-items: center; gap: 16px; flex: 1 1 0; justify-content: flex-end; }
.nav-social a { display: inline-flex; color: #A89880; transition: color .2s ease; }
@media (hover: hover) { .nav-social a:hover { color: #FFD700; } }
.nav-social a:active { color: #FFD700; }
.nav-social a:focus-visible { outline: 2px solid #FFD700; outline-offset: 3px; border-radius: 4px; }

/* ---- Hamburger (nur Mobile) ---- */
.nav-burger {
  display: none; flex-direction: column; gap: 5px;
  /* 44x44-Touch-Target (Audit 2026-08-19): Padding vergroessert die Hitbox
     (24px-Spans + 2x10 = 44 breit, 16px Inhalt + 2x14 = 44 hoch), die
     negativen Margins geben den Platz zurueck — Icon-Position unveraendert. */
  padding: 14px 10px; margin: -8px -4px -8px auto;
  background: none; border: 0; cursor: pointer; position: relative; z-index: 120;
}
.nav-burger:active { opacity: .6; }
.nav-burger span {
  display: block; width: 24px; height: 2px; background: #F5EDE0;
  transform-origin: center; transition: transform .2s ease, opacity .2s ease;
}
.nav-burger span:nth-child(3) { width: 16px; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 24px; }
.nav-burger:focus-visible { outline: 2px solid #FFD700; outline-offset: 3px; border-radius: 4px; }

/* ---- Menue (Mobile): kompaktes Dropdown-Panel unter der Leiste ----
   Feedback 19.08.: das Vollbild-Overlay war fuer 2 Links ueberdimensioniert
   ("mach es einfach simpler"). Jetzt: Scrim ueber der Seite (Tap schliesst,
   js/nav.js), oben ein dunkles Panel mit zwei Link-Zeilen in der Typo der
   Desktop-Nav-Links. Loest nebenbei den alten 48px-Archivo-Overflow
   ("Speisekarte" war bei 48px = 376px breiter als der 375er-Viewport). */
.nav-menu {
  display: none;
  position: fixed; inset: 0; z-index: 40;
  background: rgba(10, 8, 6, .55);
  overflow-y: auto;
}
.nav-menu.open { display: block; animation: navMenuScrim .25s ease-out; }
/* Eingangsanimation (User 19.08.): Scrim faded ein, Panel gleitet von oben rein.
   Keyframes statt Transition, weil das Menue per display none->block schaltet. */
@keyframes navMenuScrim { from { opacity: 0; } }
@keyframes navMenuPanel { from { opacity: 0; transform: translateY(-14px); } }
.nav-menu.open .nav-menu__panel { animation: navMenuPanel .32s cubic-bezier(.22, 1, .36, 1); }
/* Offenes Menue sperrt den Hintergrund-Scroll (js/nav.js toggelt .menu-lock auf <html>) */
html.menu-lock, html.menu-lock body { overflow: hidden; }
.nav-menu__panel {
  background: rgba(13, 11, 8, .96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #2E1E14;
  padding: 84px 20px 10px;               /* oben Platz fuer Leiste + geschrumpftes Logo */
}
.nav-menu__links { display: flex; flex-direction: column; }
.nav-menu__links a {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 15px; font-weight: 500; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #F5EDE0; text-decoration: none;
  padding: 15px 8px;                     /* 48px-Zeilen, Touch-Target */
  border-top: 1px solid rgba(255, 215, 0, .08);
  transition: color .2s ease;
}
/* Erste Zeile ohne Linie: direkt darueber sitzt schon die border-bottom der
   .scrolled-Leiste — sonst doppelter Rand (User-Screenshot 19.08.) */
.nav-menu__links a:first-child { border-top: 0; }
@media (hover: hover) { .nav-menu__links a:hover { color: #FFD700; } }
.nav-menu__links a:active { color: #FFD700; }
.nav-menu__links a:focus-visible { outline: 2px solid #FFD700; outline-offset: -2px; }
/* Socials nur an EINEM Ort (Feedback 19.08.: standen doppelt — Leiste + Menue):
   ab 360px leben sie in der Nav-Leiste, das Menue zeigt sie NICHT mehr.
   Unter 360px (kein Platz neben der Logo-Hitbox) faellt die Leisten-Reihe weg
   und das Panel uebernimmt — siehe Media-Query unten.
   gap 0: die a-Boxen sind 44px breit (Icon zentriert), optischer Abstand ~22px. */
.nav-menu__social {
  display: none; align-items: center; gap: 0;
  padding: 4px 0 6px;
  border-top: 1px solid rgba(255, 215, 0, .08);
}
.nav-menu__social a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;     /* Touch-Target (Audit 2026-08-19) */
  color: #A89880; transition: color .2s ease;
}
@media (hover: hover) { .nav-menu__social a:hover { color: #FFD700; } }
.nav-menu__social a:active { color: #FFD700; }
.nav-menu__social a:focus-visible { outline: 2px solid #FFD700; outline-offset: 3px; border-radius: 4px; }

/* Mobile + Tablet (<1024, Tablet seit 19.08.): Textlinks -> Hamburger, Logo
   etwas kleiner (56px x 16/7 = 128px).
   Social-Quicklinks (Insta/TikTok) bleiben seit 2026-08-18 sichtbar: LINKS in
   der Leiste — rechts neben dem Hamburger wuerden sie auf 320-375px mit dem
   grossen Center-Logo kollidieren (Logo-Hitbox reicht bis ~x231). */
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .site-nav__inner { padding: 16px 12px; }       /* Platz fuer 3 Quicklinks */
  .nav-social { order: -1; justify-content: flex-start; gap: 0; }
  .nav-social a {
    min-width: 44px; min-height: 44px;           /* Touch-Target-Regel */
    align-items: center; justify-content: center;
  }
  .nav-logo { transform: translateX(-50%) scale(2.28571); }
  .nav-logo img { height: 56px; }
  .site-nav.scrolled .nav-logo { transform: translateX(-50%) scale(1); }
}

/* Tablet-Leiste: mehr Seitenluft als die 12px der Phone-Leiste (die sind dort
   nur noetig, damit 3 Quicklinks neben die Logo-Hitbox passen) */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-nav__inner { padding: 16px 28px; }
}

/* Unter 360px kollidieren die Quicklinks mit der Logo-Hitbox — dort wandern
   ALLE Socials aus der Leiste ins Menue-Panel (ein Ort, keine Dopplung;
   ersetzt die fruehere Nur-YouTube-Ausblendung). */
@media (max-width: 359px) {
  .nav-social { display: none; }
  .nav-menu__social { display: flex; }
}

/* Bei offenem Menue Logo klein, damit es die Menue-Links nicht ueberlagert */
.site-nav.menu-open .nav-logo { transform: translateX(-50%) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .nav-link::after, .nav-burger span, .nav-logo { transition: none; }
  .nav-menu.open, .nav-menu.open .nav-menu__panel { animation: none; }
}

/* Inhalt der Unterseiten beginnt unter dem grossen, fixed positionierten Nav-Logo.
   Klasse auf die erste Section / den Content-Wrapper setzen; ueberschreibt deren
   Top-Padding (nav.css laedt nach dem inline <style>, gleiche Spezifitaet -> gewinnt). */
.nav-clear { padding-top: 200px; }
@media (max-width: 1023px) { .nav-clear { padding-top: 150px; } }