/* ------------------------------------------------------------------
   Verèa Aesthetics — gemeinsamer Header (Top-Tape + Nav)
   Eine Quelle für alle Seiten. Nie pro Seite kopieren, hier ändern.

   Design-Regel Verèa: ALLES eckig (border-radius max 2px).
   Keine Pills, keine runden Buttons. Der Indikator unter den
   Nav-Punkten ist eine eckige Platte mit goldenem Leuchtstrich.
   ------------------------------------------------------------------ */

/* Umschaltpunkt Desktop-Nav <-> Burger.
   1180px, weil das Verèa-Logo bewusst groß ist und 5 Nav-Punkte
   plus CTA darunter sonst umbrechen. */

/* --- Top tape ---------------------------------------------------- */
.v-tape{
  border-bottom:1px solid var(--line);
  background:var(--bone);
}
.v-tape__inner{
  max-width:1400px;margin-inline:auto;
  padding:.625rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);
}
@media (min-width:768px){
  .v-tape__inner{padding-inline:2.5rem;font-size:11px;letter-spacing:.32em;}
}
.v-tape__ig{margin-left:auto;}
@media (max-width:639px){ .v-tape__estd{display:none;} }
@media (max-width:767px){ .v-tape__loc{display:none;} }

/* --- Header shell ------------------------------------------------- */
.v-header{
  position:sticky;top:0;z-index:100;
  background:rgba(239,233,225,.85);
  backdrop-filter:saturate(1.1) blur(14px);
  -webkit-backdrop-filter:saturate(1.1) blur(14px);
  border-bottom:1px solid var(--line);
}
.v-header__inner{
  max-width:1400px;margin-inline:auto;
  padding-inline:1.25rem;
  height:80px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
@media (min-width:768px){
  .v-header__inner{padding-inline:2.5rem;height:128px;}
}
/* Logo ist freigestellt (transparent, beschnitten), daher deutlich
   kleinere Höhenwerte als beim alten Logo im weißen Kasten. */
.v-header__logo{display:flex;align-items:center;flex-shrink:0;}
.v-header__logo img{height:42px;width:auto;display:block;user-select:none;}
@media (min-width:768px){ .v-header__logo img{height:62px;} }

/* --- Nav ---------------------------------------------------------- */
.v-nav{display:flex;align-items:center;gap:2px;position:relative;}
.v-nav a{
  font-family:'Jost',sans-serif;font-weight:500;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-2);
  position:relative;z-index:2;
  padding:10px 14px;border-radius:2px;
  transition:color .35s ease;
  white-space:nowrap;
}
.v-nav a:hover{color:var(--ink);}
.v-nav a[aria-current="page"]{color:var(--gold);}

/* Indikator, gleitet unter den aktiven/gehoverten Punkt.
   Eckig (2px), goldener Leuchtstrich oben. */
.v-lamp{
  position:absolute;top:50%;left:0;width:0;height:34px;
  transform:translateY(-50%);
  background:var(--ivory-2);
  border:1px solid rgba(201,191,178,.7);
  border-radius:2px;
  opacity:0;z-index:1;pointer-events:none;
  transition:left .38s cubic-bezier(.2,.7,.2,1),
             width .38s cubic-bezier(.2,.7,.2,1),
             opacity .3s ease;
}
.v-lamp.show{opacity:1;}
.v-lamp::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:44%;height:2px;background:var(--gold);
  box-shadow:0 0 12px 2px rgba(163,138,106,.45), 0 7px 16px rgba(163,138,106,.3);
}

/* --- Actions rechts ----------------------------------------------- */
.v-header__actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}

.v-burger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;padding:8px;cursor:pointer;
}
.v-burger span{
  display:block;width:22px;height:1.5px;background:var(--ink);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.v-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.v-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.v-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* CTA innerhalb des aufgeklappten Mobil-Menüs (Desktop: unsichtbar).
   !important, weil das seiteneigene Inline-<style> nach dieser Datei
   geladen wird und .btn/.v-nav a sonst bei gleicher Spezifität gewinnen. */
.v-nav__cta{display:none !important;}

/* --- Mobil / Tablet ------------------------------------------------ */
@media (max-width:1179px){
  .v-nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ivory);
    border-bottom:1px solid var(--line);
    padding-inline:1.5rem;
    max-height:0;overflow:hidden;
    transition:max-height .4s cubic-bezier(.2,.7,.2,1);
  }
  .v-nav.is-open{max-height:85vh;padding-block:6px;}
  .v-nav a{
    font-family:'Cormorant Garamond',serif;
    font-size:1.4rem;letter-spacing:.01em;text-transform:none;
    color:var(--ink);
    padding:15px 2px;border-radius:0;
    border-bottom:1px solid rgba(201,191,178,.55);
  }
  .v-nav a:last-child{border-bottom:none;}
  .v-lamp{display:none;}

  /* a.v-nav__cta statt .v-nav__cta: muss die .v-nav-a-Regel oben schlagen,
     sonst erbt der Button deren Schrift und Textfarbe (schwarz auf schwarz). */
  .v-nav a.v-nav__cta{
    display:block !important;margin:18px 0 10px;text-align:center;
    background:var(--ink);color:var(--bone);
    border:1px solid var(--ink);border-radius:2px;
    padding:16px 20px;
    font-family:'Jost',sans-serif;
    font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 6px 16px rgba(22,17,14,.14);
  }
  .v-nav a.v-nav__cta:hover{background:var(--ink-2);color:var(--bone);}

  .v-burger{display:flex;}
  .v-header__cta{display:none !important;}
}