/* Shared header/nav styles — the single source of truth for the site nav,
   used by both the React app (src/index.html) and the standalone legal
   pages (public/datenschutz.html, public/impressum.html). Edit here only;
   do not re-duplicate nav-exclusive rules elsewhere, or the two will drift
   apart again. Markup using these classes must match src/components/Nav.jsx.

   .container and .btn/.btn-primary are also defined in src/index.css,
   since those are used site-wide (every section, Hero/Reserve/Contact
   CTAs), not just the nav — too broad to remove from there. They're
   mirrored here (identical rules) purely so the standalone legal pages,
   which don't load index.css, have what the nav markup needs.

   Deliberately does NOT define a --sans custom property, even though
   the nav's own font differs from index.css's --sans (Breve News vs.
   Manrope-first on the legal pages). :root variables are page-global —
   defining --sans here would leak into the legal pages' body text too.
   The nav's font is hardcoded directly in each rule below instead. */

@font-face {
  font-family: "Breve News";
  src: url("/assets/BreveNewsMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Breve News";
  src: url("/assets/BreveNewsBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink:        #17110D;
  --ink-soft:   #3A241A;
  --paper:      #F5E9D6;
  --paper-deep: #E6D2B0;
  --red:        #A81F30;
  --red-deep:   #6B1320;
  --line:       rgba(27,16,10,.18);
  --line-soft:  rgba(27,16,10,.10);
  --pad: clamp(20px, 4vw, 64px);
  --max: 1320px;
}

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 1; }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 26px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--red);
  color: #FBEFD8;
  box-shadow: 0 10px 30px -10px rgba(168,32,26,.6), inset 0 0 0 1px rgba(255,255,255,.08);
}
.btn-primary:hover { background: var(--red-deep); }
.btn .arrow { width: 18px; height: 10px; }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245,233,214,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  /* Not a --sans custom property — see file header comment. Every nav
     element (links, lang switcher, CTA button, mobile drawer) inherits
     this, since they're all DOM descendants of .nav. */
  font-family: "Breve News", "Source Han Serif CN", "Manrope", -apple-system, system-ui, sans-serif;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.logo {
  display: flex; align-items: center;
  text-decoration: none;
}
.logo-img {
  height: 52px; width: auto; display: block;
}

.nav-links { display: flex; gap: 36px; }
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
}
.nav-links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }
@media (max-width: 860px) { .nav-links { display: none; } }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-sep {
  display: block;
  width: 1px;
  height: 20px;
  background: var(--line);
  flex-shrink: 0;
}

.lang-switcher {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(245,233,214,.5);
  flex-shrink: 0;
}
.lang-opt {
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background .15s, color .15s;
  line-height: 1;
  white-space: nowrap;
}
.lang-opt + .lang-opt {
  border-left: 1px solid var(--line);
}
.lang-opt.active {
  background: var(--ink);
  color: var(--paper);
}
.lang-opt:not(.active):hover {
  background: var(--paper-deep);
  color: var(--ink);
}
.lang-switcher-mobile {
  margin: 16px 0 4px;
  align-self: flex-start;
  border-color: var(--line);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: rgba(245,233,214,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  padding: 8px var(--pad) 24px;
  display: flex;
  flex-direction: column;
  z-index: 49;
  box-shadow: 0 12px 32px -8px rgba(27,16,10,.18);
}
/* React conditionally renders .nav-mobile only when open, so it's never
   in the DOM otherwise — the standalone legal pages instead keep it in
   the DOM and toggle the `hidden` attribute via JS (see legal-lang.js).
   [hidden] and .nav-mobile have equal specificity, so without this rule
   the display:flex above would silently win and the drawer would show
   at any viewport width, even collapsed/hidden. */
.nav-mobile[hidden] {
  display: none;
}
.nav-mobile a {
  font-size: 16px;
  font-weight: 500;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  letter-spacing: .01em;
  text-decoration: none;
}
.nav-mobile-cta {
  margin-top: 16px;
  border-bottom: none !important;
  padding: 16px 26px !important;
  justify-content: center;
}

@media (max-width: 860px) {
  .nav-hamburger { display: flex; }
  /* Descendant selectors (not plain .nav-cta / .nav-sep) so this reliably
     beats src/index.css's unconditional .btn { display: inline-flex },
     which is also needed site-wide (Hero/Reserve/Contact CTAs) so it
     can't be removed from there. .btn is a single-class selector, same
     specificity as .nav-cta alone — and since Vite injects index.css's
     bundle *after* this file's <link> in index.html, .btn's unconditional
     rule would otherwise win the tie and keep the button visible here. */
  .nav-actions .nav-cta { display: none; }
  .nav-actions .nav-sep { display: none; }
  .nav-actions .lang-switcher { display: none; }
}