/* ═══════════════════════════════════════════════════════════════════════════
   ARVELA · MICROPAGE-KOPFZEILE (.nav)
   ═══════════════════════════════════════════════════════════════════════════
   EINZIGE Quelle der Kopfzeilen-Regeln fuer jede Flaeche, die den Micropage-
   Header traegt. Bis 08/2026 standen sie inline im grossen <style> von
   admin-tools/aurelis-micropage-template.html (Zeilen 95 bis 299) und sind von
   dort UNVERAENDERT hierher gewandert, damit die Anfrage-Seite (/demand,
   views/demand.hbs) dieselbe Kopfzeile tragen kann, ohne Regeln zu kopieren.
   Gegenstueck fuer das Markup: views/partials/header-micropage.hbs.

   Voraussetzung der einbindenden Seite: die Marken-Variablen --creme --ink
   --ink-soft --stone --gold --bronze --border --creme-deep --serif-display
   --serif-body --mono sowie --page-gutter (Seitenrand der Fluchtachse).

   Einbindung:  <link rel="stylesheet" href="/nav-micropage.css">
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════ */
/* Kopfzeile optisch identisch zur Landing (aurelis-landing-v2.html), #nav→.nav
   damit Seite (.nav#nav) UND Galerie (.nav.scrolled) dieselben Regeln teilen. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  /* Seiten-Padding = Fluchtachse: der Domizilname sitzt exakt über der linken
     Kante jeder Content-Sektion (früher fixe 56px = 8px daneben bzw. beliebig
     weit daneben, sobald die Sektionen ab 1296px zentriert liefen). */
  padding: 0 var(--page-gutter); height: 88px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: transparent;
  transition: background 0.4s ease, height 0.3s ease;
}
.nav .nav-left { justify-self: start; min-width: 0; overflow: hidden; }
.nav .nav-logo { justify-self: center; }
.nav .nav-right { justify-self: end; display: flex; align-items: center; gap: 20px; }
.nav.scrolled {
  background: var(--creme);
  border-bottom: 1px solid var(--border);
}
/* Doppel-Goldlinie vermeiden: sobald die Sticky-Mini-Nav sichtbar ist (Body
   trägt dann .mininav-shown, gesetzt vom selben IntersectionObserver, der auch
   .is-visible toggelt), verschwindet die untere Header-Linie — es bleibt nur
   die Linie der Mini-Nav. Border-BREITE bleibt (Farbe → transparent), also
   kein Layout-Sprung. Im Ruhezustand (Mini-Nav aus) unverändert sichtbar. */
body.mininav-shown .nav.scrolled { border-bottom-color: transparent; }

/* Mitte: Marke + Locator (durch Grid-Symmetrie zentriert, vom linken Namen unbeeinflusst) */
.nav-logo {
  display: inline-flex; flex-direction: column; align-items: center; width: fit-content; gap: 4px;
  text-decoration: none; transition: opacity 0.3s ease; position: relative; z-index: 10;
}
.nav-logo img { height: 44px; width: auto; display: block; }
.nav-logo:hover { opacity: 0.8; }
/* Locator wie Landing: Box = Wortmarke ARVELA, nicht Logokante.
   viewBox "188 300 1406 285", Wortmarke x 544–1579 => 25.32 %..98.93 % der Logobreite
   (= H * 4.933). Breite = H * 3.631, Linkskante = H * 1.249. H_desktop = 44px. */
.nav-locator {
  font-family: var(--serif-display); text-transform: uppercase;
  color: var(--gold); line-height: 1;
  transition: color 0.4s ease, text-shadow 0.4s ease;
  display: flex; align-items: center; justify-content: center;
  width: 159.8px; margin-left: 55.0px; align-self: flex-start;
}
/* margin-right kompensiert den Sperrungs-Nachlauf hinter dem letzten Versal */
.locator-text {
  font-size: 13px; letter-spacing: 0.30em; margin-right: -0.30em; white-space: nowrap;
}
.nav:not(.scrolled) .nav-locator { color: var(--creme); text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
/* Segel-Signet: ersetzt mobil das ausgeblendete Lockup, ganz rechts außen */
.nav-seal-mobile { display: none; }
.nav-seal-mobile img { height: 24px; width: auto; display: block; }

/* Links (NUR Micropage): Domizilname + Ort. Klick → Seitenanfang. Über Hero hell, gescrollt dunkel. */
/* Hierarchie: der Domizilname trägt die Hauptrolle, das zentrale Arvela-Lockup
   ordnet sich unter. line-height 1.08 statt 1, damit Unterlängen (p, g, j) in
   längeren Namen nicht am overflow:hidden abgeschnitten werden. */
.nav-residence { display:inline-flex; flex-direction:column; gap:3px; text-decoration:none; cursor:pointer; min-width:0; }
.nav-residence-name {
  font-family: var(--serif-display); font-size:36px; font-weight:400; line-height:1.08;
  color: var(--creme); text-shadow: 0 1px 6px rgba(0,0,0,0.45);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.nav-residence-loc {
  font-family: var(--mono); font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
  color: var(--creme); text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.nav.scrolled .nav-residence-name { color: var(--ink); text-shadow: none; }
.nav.scrolled .nav-residence-loc { color: var(--stone); text-shadow: none; }

/* Hamburger (rechts) — Linienfarbe via currentColor an die Nav-Textfarbe (DE)
   gekoppelt: über Hero hell, gescrollt stone, Hover gold. Immer sichtbar wie DE. */
.nav-hamburger {
  background: none; border: none; cursor: pointer; padding: 8px;
  display: flex; flex-direction: column; gap: 5px; width: 32px; align-items: flex-end;
  color: rgba(253,250,245,0.7); transition: color 0.3s ease;
}
.nav.scrolled .nav-hamburger { color: var(--stone); }
.nav-hamburger:hover { color: var(--gold); }
.nav-hamburger span { display: block; height: 1.5px; background: currentColor; transition: background 0.3s ease; }
.nav-hamburger span:nth-child(1) { width: 24px; }
.nav-hamburger span:nth-child(2) { width: 18px; }
.nav-hamburger span:nth-child(3) { width: 24px; }

/* "Erleben"-CTA */
.nav-erleben {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 128px; height: 39px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--ink); color: white; text-decoration: none;
  padding: 0 28px; border: 1px solid rgba(255,255,255,0.18);
  transition: background 0.3s ease;
}
.nav-erleben:hover { background: var(--ink-soft); }

/* Sprach-Dropdown (DE) */
.nav-lang { position: relative; display: inline-flex; align-items: center; }
.nav-lang-trigger {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  background: none; border: none; padding: 6px 4px; cursor: pointer;
  color: rgba(253,250,245,0.7); transition: color 0.3s ease;
}
.nav-lang-trigger:hover { color: var(--creme); }
.nav.scrolled .nav-lang-trigger { color: var(--stone); }
.nav.scrolled .nav-lang-trigger:hover { color: var(--ink); }
.nav-lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 132px;
  background: var(--creme); border: 1px solid var(--border);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; z-index: 120;
}
.nav-lang.is-open .nav-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-lang-option {
  font-family: var(--serif-body); font-size: 14px; text-align: left;
  background: none; border: none; color: var(--ink-soft); padding: 11px 18px;
  cursor: pointer; transition: color 0.2s ease, background 0.2s ease;
}
.nav-lang-option:hover { background: var(--creme-deep); color: var(--ink); }
.nav-lang-option.active { color: var(--gold); }

/* Overlay-Menü (Hamburger) */
.nav-overlay {
  position: fixed; inset: 0; z-index: 200; background: var(--creme);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  display: flex; align-items: center; justify-content: center;
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }
.overlay-close {
  position: absolute; top: 24px; right: 56px;
  background: none; border: none; cursor: pointer;
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
/* × DAUERHAFT sichtbar: Literal-Fallback statt nackter Variable (war die
   Unsichtbarkeits-Ursache), Strichstärke wie der Hamburger (1.5px). */
.overlay-close span {
  position: absolute; width: 24px; height: 1.5px;
  background: var(--bronze, #3D2F1A);
  transition: background 0.3s ease;
}
.overlay-close span:nth-child(1) { transform: rotate(45deg); }
.overlay-close span:nth-child(2) { transform: rotate(-45deg); }
.overlay-close:hover span { background: var(--gold, #B8975A); }
.overlay-inner { text-align: center; padding: 40px; }
.overlay-links { list-style: none; padding: 0; margin: 0; }
.overlay-links li { margin: 16px 0; }
.overlay-links a {
  font-family: var(--serif-display); font-size: 36px; font-weight: 400; font-style: normal;
  color: var(--bronze); text-decoration: none; letter-spacing: 0;
  transition: color 0.4s ease; display: inline-block; padding: 6px 16px;
}
.overlay-links a:hover { color: var(--gold); }
.overlay-links a.overlay-cta { font-style: italic; color: var(--gold); }
.overlay-links a.overlay-cta:hover { color: var(--bronze); }
.overlay-divider { height: 1px; width: 60px; margin: 28px auto; background: var(--border); list-style: none; }
.overlay-footer {
  position: absolute; bottom: 48px; left: 56px; right: 56px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.15em;
}
.overlay-owner {
  color: var(--stone); text-decoration: none; text-transform: lowercase;
  font-size: 14px; letter-spacing: 0.05em; transition: color 0.3s ease;
}
.overlay-owner:hover { color: var(--bronze); }
body.overlay-open { overflow: hidden; }

/* Tablet-Zwischenstufe 769–960px: die Landing kennt hier KEINE eigene Nav-Regel,
   behält also Nav-Höhe 88px und Lockup 44px. Die frühere Zwischenstufe (88px Nav
   bei 104px Desktop, Logo 38px, Locator 138.0/47.5) war die Ursache des Lockup-
   Sprungs an der 960er-Kante — sie ist ersatzlos entfallen. Nav-Höhe, Lockup und
   Locator erben jetzt durchgehend die Desktop-/Landing-Werte.
   Nur der Domizilname bleibt hier gestaffelt (micropage-only, kein Sprung-Anteil). */
@media (min-width: 769px) and (max-width: 960px) {
  .nav-residence-name { font-size: 28px; }
  .nav-residence-loc { font-size: 10px; }
}

@media (max-width: 768px) {
  /* Padding kommt aus --page-gutter (folgt --page-pad = 24px), nur die Höhe ist mobil eigen */
  .nav { height: 76px; }
  /* Mobil: Name links, rechts nur DE + Segel. Mitte entfällt, damit nichts kollidiert;
     Grid daher zweispaltig, sonst bliebe rechts eine tote 1fr-Spalte stehen. */
  .nav { grid-template-columns: 1fr auto; column-gap: 16px; }
  .nav-logo { display: none; }
  .nav-hamburger { display: none; }
  .nav-seal-mobile { display: inline-flex; }
  /* Ellipsis-Falle: der Name wird nicht mehr beschnitten */
  .nav .nav-left { overflow: visible; }
  .nav-residence-name { font-size: 23px; overflow: visible; text-overflow: clip; }
  .nav-residence-loc { font-size: 9.5px; overflow: visible; text-overflow: clip; }
  .nav-erleben { display: none; }
  .overlay-close { top: 16px; right: 24px; }
  .overlay-links a { font-size: 28px; }
  .overlay-footer { bottom: 32px; left: 24px; right: 24px; flex-direction: column; gap: 24px; }
}