/* ============================================================
   VisaNerd Header -> Apple Look & Feel + .vh Stil.
   Geladen via mu-plugin 00-vn-header.php. Versteckt den alten .custom-header.
   Statische Datei -> live editierbar. NUR test.visanerd.com.
   ============================================================ */

:root{
  --vh-ink:#14181f; --vh-body:#33373d; --vh-mut:#6b7280; --vh-faint:#9aa1ac;
  --vh-blue:#0ea5e9; --vh-blue-ink:#0c93cf; --vh-blue-tint:#e8f6fd; --vh-or:#f97316;
  --vh-line:rgba(0,0,0,.08);
}

/* alten Theme-Header ausblenden (hohe Spezifitaet, schlaegt theme .custom-header{display:flex!important}) */
html body .custom-header{ display:none !important; }
/* Content-Offset an die neue 54px-Bar anpassen */
.site-content{ padding-top:66px !important; }
body.vnav-lock{ overflow:hidden; }
/* Kein Gummiband-Overscroll oben: man kann nicht mehr ueber den fixen Header hinausziehen, Seite sitzt oben fest */
html{ overscroll-behavior-y:none; }
body{ overscroll-behavior-y:none; }

/* Theme-Button-Styles in der Nav neutralisieren (Bar-Buttons + Burger) */
.vnav button, .vnav button:hover, .vnav button:focus, .vnav button:active{
  background:none !important; box-shadow:none !important; outline:none !important;
}

/* ============================ BAR ============================ */
.vnav{
  position:fixed; top:0; left:0; width:100%; z-index:2147483647;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.vnav::before{                       /* frosted Hintergrund, volle Breite */
  content:''; position:absolute; top:0; left:0; right:0; height:54px;
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--vh-line);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* gescrollt: solide & "schwer", kein Durchscheinen/Wobble */
.vnav.scrolled::before{
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 6px 24px rgba(15,23,42,.07);
  border-bottom-color:rgba(0,0,0,.1);
}
.vnav-bar{
  position:relative; display:flex; align-items:center; gap:22px; height:54px;
  max-width:1280px; margin:0 auto; padding:0 22px;
}

/* Logo */
.vnav-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.vnav-logo-img{ height:30px; width:auto; border-radius:7px; display:block; }
.vnav-logo-text{ display:flex; flex-direction:column; justify-content:center; line-height:1.05; }
.vnav-logo-word{ font-weight:800; font-size:1.06rem; letter-spacing:-.02em; color:var(--vh-ink); }
.vnav-logo-sub{ font-size:.58rem; font-weight:700; letter-spacing:.04em; color:var(--vh-blue); margin-top:3px; }

/* Mittige Link-Liste */
.vnav-list{ display:flex; align-items:center; gap:1px; margin:0 auto; padding:0; list-style:none; }
.vnav-item{ position:static; }
.vnav-link{
  display:inline-flex; align-items:center; gap:5px;
  font-family:inherit; font-size:.84rem; font-weight:500; line-height:1; letter-spacing:0;
  color:var(--vh-body); background:none; border:0; cursor:pointer; text-decoration:none;
  padding:9px 13px; border-radius:8px; white-space:nowrap;
  transition:color .15s ease;
}
.vnav-link:hover{ color:var(--vh-blue); }
.vnav-chev{ width:8px; height:8px; flex:none; opacity:.45; transition:transform .25s ease, opacity .15s; }
.vnav-item.flyout-active .vnav-chev{ transform:rotate(180deg); opacity:.85; }
.vnav-item.flyout-active .vnav-link{ color:var(--vh-blue); }

/* Rechte Actions */
.vnav-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:auto; }
/* Aktionsblock kompakter: injizierte Icon-Links (Sprachumschalter, Portal-Login) etwas schmaler */
.vnav-actions .vn-lsw-trigger, .vnav-actions .vn-portal-link{ padding-left:10px; padding-right:10px; }
.vnav-cta{
  font-family:inherit; font-size:.84rem; font-weight:700; line-height:1; color:#fff; background:var(--vh-blue);
  text-decoration:none; padding:9px 16px; border-radius:999px; white-space:nowrap;
  transition:background .15s ease, transform .15s ease;
}
.vnav-cta:hover{ background:var(--vh-blue-ink); color:#fff !important; transform:translateY(-1px); }
/* nirgends ein schwarzer Hover in der Nav */
.vnav a:hover, .vnav button:hover{ color:var(--vh-blue) !important; }
.vnav .vnav-cta:hover{ color:#fff !important; }

/* ====== FLYOUT (ein geteiltes Panel, Apple-Verhalten: bleibt offen, Hoehe+Inhalt transitionieren) ====== */
.vnav-flyout{
  position:fixed; left:0; right:0; top:54px; overflow:hidden;
  height:0; opacity:0; visibility:hidden; pointer-events:none;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid var(--vh-line); box-shadow:0 30px 60px -24px rgba(15,23,42,.16);
  transition:height .34s cubic-bezier(.4,0,0,1), opacity .26s ease, visibility .34s;
}
.vnav.flyout-open .vnav-flyout{ opacity:1; visibility:visible; pointer-events:auto; }
.vnav-flyout-stage{ position:relative; }
.vnav-pane{
  position:absolute; top:0; left:0; right:0;
  opacity:0; visibility:hidden; transform:translateY(5px);
  transition:opacity .2s ease, transform .22s ease, visibility .2s;
}
.vnav-pane.active{ opacity:1; visibility:visible; transform:none; }
.vnav-flyout-inner{
  max-width:1000px; margin:0 auto; padding:36px 22px 44px;
  display:grid; gap:24px 52px; grid-template-columns:repeat(3,1fr);
}
.vnav-pane[data-cols="2"] .vnav-flyout-inner{ grid-template-columns:repeat(2,1fr); max-width:720px; }
.vnav-fly-head{
  font-size:.82rem; font-weight:700; letter-spacing:-.005em; color:var(--vh-ink);
  margin:0 0 13px; padding:0 0 9px; border-bottom:1px solid var(--vh-line);
}
.vnav-fly-link{
  display:block; font-size:.96rem; font-weight:600; letter-spacing:-.01em; color:var(--vh-ink);
  text-decoration:none; padding:6px 0; transition:color .14s ease, transform .14s ease;
}
.vnav-fly-link:hover{ color:var(--vh-blue); transform:translateX(3px); }
.vnav-fly-link .sub{ display:block; font-size:.78rem; font-weight:500; color:var(--vh-mut); margin-top:1px; }

/* Feature-Zeile (Funnel-CTA) - schlicht, kein Kasten/kein Blau */
.vnav-feature{
  grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:12px; padding:16px 2px 0; border-top:1px solid var(--vh-line);
  text-decoration:none; background:none;
}
.vnav-feature-txt strong{ display:block; font-size:.96rem; font-weight:700; letter-spacing:-.015em; color:var(--vh-ink); }
.vnav-feature-txt span{ display:block; font-size:.82rem; font-weight:500; color:var(--vh-mut); margin-top:2px; }
.vnav-feature-cta{ flex:none; font-size:.88rem; font-weight:700; color:var(--vh-blue-ink); white-space:nowrap; transition:color .14s ease, transform .14s ease; }
.vnav-feature:hover .vnav-feature-cta{ color:var(--vh-blue); transform:translateX(2px); }

/* ============================ BURGER ============================ */
.vnav-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; margin-left:auto; padding:0; background:none; border:0; cursor:pointer;
}
.vnav-burger span{ display:block; width:20px; height:2px; border-radius:2px; background:var(--vh-ink); transition:transform .25s ease, opacity .2s ease; }
.vnav.open .vnav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.vnav.open .vnav-burger span:nth-child(2){ opacity:0; }
.vnav.open .vnav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================ MOBILE PANEL ============================ */
.vnav-mobile{
  position:fixed; top:54px; left:0; width:100%; height:calc(100vh - 54px);
  background:rgba(255,255,255,.98);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  overflow-y:auto; padding:8px 22px 60px;
  opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.vnav.open .vnav-mobile{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.vnav-macc{ border-bottom:1px solid var(--vh-line); }
.vnav-macc>summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:18px 2px; font-size:1.12rem; font-weight:700; letter-spacing:-.02em; color:var(--vh-ink);
}
.vnav-macc>summary::-webkit-details-marker{ display:none; }
.vnav-macc>summary::after{
  content:''; width:9px; height:9px; border-right:2px solid var(--vh-faint); border-bottom:2px solid var(--vh-faint);
  transform:rotate(45deg); transition:transform .2s ease;
}
.vnav-macc[open]>summary::after{ transform:rotate(225deg); }
.vnav-macc-body{ padding:0 2px 18px; }
.vnav-macc-body .vnav-fly-head{ margin:14px 0 6px; }
.vnav-macc-body a{
  display:block; font-size:1.0625rem; font-weight:500; color:var(--vh-body); text-decoration:none; padding:8px 0;
}
.vnav-macc-body a:hover{ color:var(--vh-blue); }
.vnav-mlink{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 2px; font-size:1.12rem; font-weight:700; letter-spacing:-.02em; color:var(--vh-ink);
  text-decoration:none; border-bottom:1px solid var(--vh-line);
}
.vnav-mcta{
  display:block; text-align:center; margin-top:26px; background:var(--vh-blue); color:#fff;
  font-size:1.05rem; font-weight:700; text-decoration:none; padding:16px; border-radius:999px;
}

@media (max-width:1024px){
  .vnav-list, .vnav-actions{ display:none; }
  .vnav-burger{ display:flex; }
}
@media (min-width:1025px){
  .vnav-mobile{ display:none; }
  /* Desktop: Hauptnav echt in der Bar-Mitte (symmetrische 1fr-Seitenspalten) */
  .vnav-bar{ display:grid; grid-template-columns:1fr auto 1fr; }
  .vnav-logo{ justify-self:start; }
  .vnav-list{ margin:0; justify-self:center; }
  .vnav-actions{ margin-left:0; justify-self:end; }
}