/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION v3 „Liquid Glass Depth" — Umsetzung von
   „Navigation Bergstrasse Digital v3.dc.html" (Claude Design), 05.08.2026

   Ersetzt die bisherige .hdr-pill-Navigation. Läuft auf allen Seiten.

   Bewusst uebernommen aus dem Bestand:
   · Logo (images/logo.png) statt assets/logo-mark-white.png
   · #hdr, .scrolled und .hdr-hidden — die Scroll-Steuerung inkl.
     Auto-Hide steht bereits in footer.php und bleibt unangetastet
   · IDs mob-toggle / mob-menu / bar1-3, damit das vorhandene
     Menue-JS in footer.php weiterlaeuft
   ═══════════════════════════════════════════════════════════════════ */

#hdr {
  --bdn-gold:    #E9B44C;
  --bdn-gold-hi: #F5CE85;
  --bdn-top:     #F3C468;
  --bdn-ink:     #07080A;
  --bdn-text:    #E9ECF2;

  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center;
  padding: 16px 24px 0;
  perspective: 1600px;
  pointer-events: none;
  background: none !important;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
/* Auto-Hide: footer.php setzt die Klasse beim Runterscrollen */
#hdr.hdr-hidden { transform: translateY(-130%); }

/* ── Desktop-Pille ──────────────────────────────────────────────── */
.bd-nav {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; gap: 8px;
  width: 100%; max-width: 1240px;
  border-radius: 24px;
  padding: 13px 18px;
  transform-style: preserve-3d;
  transform: rotateX(var(--bdn-tx, 0deg)) rotateY(var(--bdn-ty, 0deg));
  transition: padding .4s ease;
  /* backwards statt both — mit "both" hielte der Animations-Origin sein
     eigenes transform dauerhaft fest und die Maus-Kippung wäre wirkungslos
     (Deklarationen aus Animationen stehen über dem style-Attribut). */
  animation: bdnIn 1s cubic-bezier(.2,.8,.25,1) .1s backwards;
}
#hdr.scrolled .bd-nav { padding: 7px 12px; }

/* Glasschicht — eigene Ebene, damit der Rand sauber clippt */
.bd-nav-glass {
  position: absolute; inset: 0; border-radius: 24px;
  overflow: hidden; pointer-events: none;
  background: rgba(14,17,23,0.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
          backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 28px 70px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4),
              inset 0 1px 0 rgba(255,255,255,0.14),
              inset 0 -8px 22px rgba(0,0,0,0.35),
              inset 0 -1px 0 rgba(255,255,255,0.05);
  transition: background .4s ease;
}
#hdr.scrolled .bd-nav-glass { background: rgba(10,12,17,0.74); }

.bd-nav-tint {
  position: absolute; inset: -1px; opacity: .5; mix-blend-mode: screen;
  background: linear-gradient(115deg, rgba(255,120,120,0.1), rgba(233,180,76,0.14) 22%,
              rgba(120,255,190,0.08) 45%, rgba(110,150,255,0.12) 70%, transparent 90%);
}
.bd-nav-aur { position: absolute; border-radius: 50%; opacity: .6; }
.bd-nav-aur--gold {
  width: 460px; height: 200px; left: -80px; top: -80px;
  background: radial-gradient(closest-side, rgba(233,180,76,0.3), transparent 70%);
  filter: blur(28px); animation: bdnAur1 11s ease-in-out infinite alternate;
}
.bd-nav-aur--blue {
  width: 420px; height: 200px; right: -70px; top: -70px;
  background: radial-gradient(closest-side, rgba(96,140,255,0.2), transparent 70%);
  filter: blur(30px); animation: bdnAur2 13s ease-in-out infinite alternate;
}
/* Cursor-Licht und die zwei wandernden Lichtkanten */
.bd-nav-glow {
  position: absolute; inset: 0;
  background: radial-gradient(340px circle at var(--bdn-gx, 50%) var(--bdn-gy, 30%),
              rgba(255,255,255,0.13), transparent 65%);
}
.bd-nav-glint-t {
  position: absolute; top: 0; height: 1.5px; width: 140px;
  left: calc(var(--bdn-gx, 50%) - 70px);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
  transition: left .25s ease-out;
}
.bd-nav-glint-b {
  position: absolute; bottom: 0; height: 1px; width: 180px;
  left: calc(100% - var(--bdn-gx, 50%) - 90px);
  background: linear-gradient(90deg, transparent, rgba(233,180,76,0.5), transparent);
  transition: left .3s ease-out;
}
.bd-nav-sweep {
  position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.14), transparent);
  animation: bdnSweep 1.8s ease-out 1s backwards;
}

/* Logo */
#hdr .bd-nav-brand {
  display: flex; align-items: center; gap: 11px; flex: none;
  text-decoration: none; padding: 2px 6px 2px 4px;
  transform: translateZ(34px); transform-style: preserve-3d;
  animation: bdnItem .6s ease .5s backwards;
}
/* Reine Bildmarke (435×220, weiß auf transparent) — deshalb KEIN
   mix-blend-mode und keine Aufhellung nötig: beides hatte die alte
   Wortmarke nur weiter verwaschen. */
/* Bewusst OHNE 3D-Drehung und OHNE filter: der Entwurf kippt das Logo
   dauerhaft (bdnSway) und legt einen drop-shadow darüber. Beides zwingt
   den Browser, das Bitmap jeden Frame neu zu rastern — genau davon wurde
   es unscharf. Ohne beides rendert es pixelgenau. */
.bd-nav-brand img {
  height: 40px; width: auto; display: block;
  transform: translateZ(0);   /* eigene Ebene, aber ohne Verzerrung */
}
#hdr.scrolled .bd-nav-brand img { height: 34px; }
.bd-nav-brand span { display: flex; flex-direction: column; line-height: 1.12; }
.bd-nav-brand b {
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em; color: #F4F6FA;
}
.bd-nav-brand i {
  font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  color: rgba(233,180,76,0.9); text-transform: uppercase;
}

/* Menüpunkte mit Dock-Effekt */
.bd-nav-links {
  position: relative; display: flex; flex: 1; justify-content: center;
  gap: 2px; min-width: 0; padding: 4px 0;
  transform: translateZ(26px);
}
#hdr .bd-nav-link {
  position: relative; padding: 10px 13px;
  font-size: 14.5px; font-weight: 500; letter-spacing: 0.01em;
  color: rgba(233,236,242,0.72); text-decoration: none;
  border-radius: 12px; white-space: nowrap;
  /* kein transform mehr im Hover — der Dock-Zoom ist raus */
  transition: color .2s, text-shadow .2s;
  animation: bdnItem .55s ease backwards;
}
#hdr .bd-nav-link:hover,
#hdr .bd-nav-link[aria-current="page"] {
  color: #FFFFFF; text-shadow: 0 0 18px rgba(233,180,76,0.65);
}
#hdr .bd-nav-link:focus-visible { outline: 2px solid var(--bdn-gold); outline-offset: 2px; }
.bd-nav-links a:nth-child(1) { animation-delay: .45s; }
.bd-nav-links a:nth-child(2) { animation-delay: .51s; }
.bd-nav-links a:nth-child(3) { animation-delay: .56s; }
.bd-nav-links a:nth-child(4) { animation-delay: .62s; }
.bd-nav-links a:nth-child(5) { animation-delay: .67s; }
.bd-nav-links a:nth-child(6) { animation-delay: .73s; }
.bd-nav-links a:nth-child(7) { animation-delay: .78s; }

#hdr .bd-nav-tel {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 10px; border-radius: 12px;
  color: rgba(233,236,242,0.82); text-decoration: none;
  font-weight: 600; font-size: 14px;
  transform: translateZ(24px);
  transition: color .25s;
  animation: bdnItem .55s ease .85s backwards;
}
#hdr .bd-nav-tel:hover { color: var(--bdn-gold-hi); }
.bd-nav-tel svg { flex: none; }

#hdr .bd-nav-cta {
  position: relative; display: inline-flex; align-items: center; flex: none;
  padding: 11px 22px; border-radius: 14px;
  background: linear-gradient(180deg, var(--bdn-top), var(--bdn-gold));
  color: var(--bdn-ink); text-decoration: none; white-space: nowrap;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14.5px;
  box-shadow: 0 12px 30px rgba(233,180,76,0.4),
              inset 0 1px 0 rgba(255,255,255,0.55),
              inset 0 -2px 4px rgba(120,80,10,0.45);
  transform: translateZ(42px);
  transition: transform .25s, box-shadow .25s;
  animation: bdnItem .55s ease .95s backwards;
  overflow: hidden;
}
#hdr .bd-nav-cta:hover {
  color: var(--bdn-ink);
  transform: translateZ(42px) translateY(-2px) scale(1.04);
  box-shadow: 0 18px 40px rgba(233,180,76,0.55),
              inset 0 1px 0 rgba(255,255,255,0.65),
              inset 0 -2px 4px rgba(120,80,10,0.45);
}
#hdr .bd-nav-cta:active { transform: translateZ(42px) scale(.96); }
.bd-nav-shine {
  position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: bdnShine 3.8s ease-in-out infinite;
}

/* ── Mobil ──────────────────────────────────────────────────────── */
.bd-nav-mob { display: none; }
/* Auch hier, nicht nur im Critical CSS von header.php — damit die Datei
   für sich allein funktioniert. */
@media (min-width: 1024px) { #mob-menu { display: none !important; } }

@media (max-width: 1023px) {
  #hdr { padding: 12px 12px 0; perspective: none; }
  .bd-nav { display: none; }

  .bd-nav-mob {
    pointer-events: auto;
    position: relative; width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    border-radius: 18px; padding: 9px 8px 9px 14px;
    background: rgba(14,17,23,0.55);
    -webkit-backdrop-filter: blur(22px) saturate(1.7);
            backdrop-filter: blur(22px) saturate(1.7);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 18px 50px rgba(0,0,0,0.55);
    animation: bdnIn .9s cubic-bezier(.2,.8,.25,1) .1s backwards;
  }
  #hdr.scrolled .bd-nav-mob { background: rgba(10,12,17,0.74); }
  .bd-nav-mob-deco {
    position: absolute; inset: 0; border-radius: 18px;
    overflow: hidden; pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  }
  .bd-nav-mob-deco i {
    position: absolute; width: 300px; height: 130px; left: -50px; top: -50px;
    border-radius: 50%; opacity: .6;
    background: radial-gradient(closest-side, rgba(233,180,76,0.28), transparent 70%);
    filter: blur(24px); animation: bdnAur1 11s ease-in-out infinite alternate;
  }
  #hdr .bd-nav-mob-brand { position: relative; display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .bd-nav-mob-brand img { height: 32px; width: auto; display: block; }
  .bd-nav-mob-brand span { display: flex; flex-direction: column; line-height: 1.1; }
  .bd-nav-mob-brand b { font-size: 12.5px; font-weight: 700; color: #F4F6FA; }
  .bd-nav-mob-brand i { font-style: normal; font-size: 10px; font-weight: 600;
                        letter-spacing: 0.13em; color: rgba(233,180,76,0.9); text-transform: uppercase; }

  .bd-nav-mob-act { position: relative; display: flex; align-items: center; gap: 6px; }
  #hdr .bd-nav-mob-tel,
  #hdr #mob-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 13px;
    color: rgba(233,236,242,0.85);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer; padding: 0;
  }
  #hdr .bd-nav-mob-tel:hover { color: var(--bdn-gold-hi); }
  /* gap:4px → Balken liegen bei 0/6/12 px, Mitte bei 6. footer.php
     verschiebt bar1/bar3 um genau ±6 px, dadurch entsteht ein sauberes X. */
  #hdr #mob-toggle { flex-direction: column; gap: 4px; z-index: 102; }
  #hdr #mob-toggle span {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: #E9ECF2;
    transition: transform .4s cubic-bezier(.3,.8,.3,1.1), opacity .3s;
  }

  /* Vollflächiges Menü */
  #mob-menu {
    position: fixed; inset: 0; z-index: 101;
    display: flex; flex-direction: column;
    background: rgba(7,8,10,0.93);
    -webkit-backdrop-filter: blur(22px) saturate(1.7);
            backdrop-filter: blur(22px) saturate(1.7);
    padding: 88px 28px 28px;
    border: 0; border-radius: 0;
    transform-origin: top center;
    transform: perspective(1200px) rotateX(-7deg) scale(1.04);
    opacity: 0; pointer-events: none;
    transition: transform .55s cubic-bezier(.32,.72,.25,1), opacity .4s;
  }
  #mob-menu[aria-hidden="false"] {
    display: flex !important;
    transform: perspective(1200px) rotateX(0deg) scale(1);
    opacity: 1; pointer-events: auto;
  }
  .bd-nav-menu-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .bd-nav-menu-deco i { position: absolute; display: block; }
  .bd-nav-menu-deco i:nth-child(1) {
    width: 120vw; height: 120vw; left: -45vw; top: -35vw;
    background: radial-gradient(closest-side, rgba(233,180,76,0.16), transparent);
    filter: blur(36px); animation: bdnDrift 24s ease-in-out infinite;
  }
  .bd-nav-menu-deco i:nth-child(2) {
    width: 110vw; height: 110vw; right: -50vw; bottom: -30vw;
    background: radial-gradient(closest-side, rgba(90,150,255,0.13), transparent);
    filter: blur(40px); animation: bdnDrift2 30s ease-in-out infinite;
  }
  .bd-nav-menu-deco i:nth-child(3) {
    inset: 0;
    background-image: linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 78px 100%;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
            mask-image: linear-gradient(180deg, #000, transparent 70%);
  }
  .bd-nav-menu-deco i:nth-child(4) {
    left: 0; right: 0; top: 0; height: 1px; opacity: .5;
    background: linear-gradient(90deg, transparent 4%, rgba(233,180,76,0.55) 30%,
                rgba(255,255,255,0.25) 50%, rgba(233,180,76,0.55) 70%, transparent 96%);
  }
  .bd-nav-menu-deco i:nth-child(5) {
    left: -30%; bottom: 0; width: 150%; height: 34%;
    clip-path: polygon(0% 100%, 27% 30%, 39% 52%, 52% 5%, 68% 44%, 79% 26%, 100% 100%);
    background: linear-gradient(180deg, rgba(233,180,76,0.3) 0px, rgba(233,180,76,0.05) 2px,
                rgba(233,180,76,0.012) 40%, transparent 78%);
  }
  .bd-nav-menu-deco i:nth-child(6) {
    left: 28%; bottom: 0; width: 110%; height: 20%;
    clip-path: polygon(0% 100%, 33% 18%, 48% 58%, 61% 32%, 100% 100%);
    background: linear-gradient(180deg, rgba(255,255,255,0.14) 0px, rgba(255,255,255,0.028) 2px, transparent 80%);
  }

  #mob-menu nav {
    position: relative; display: flex; flex-direction: column; gap: 2px;
    perspective: 900px; max-width: none; margin: 0; padding: 0;
  }
  /* NUR ein ID-Selektor: "#hdr ~ #mob-menu ..." hätte zwei IDs und würde
     die Sichtbar-Regel unten (aria-hidden="false") dauerhaft schlagen —
     die Menüpunkte blieben unsichtbar. */
  #mob-menu .bd-nav-mitem {
    display: flex; align-items: baseline; gap: 16px;
    padding: 13px 2px;
    font-size: 27px; font-weight: 700; letter-spacing: -0.01em;
    color: #EEF1F6; text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    opacity: 0; transform: translateX(-28px) rotateY(9deg);
    transform-origin: left center;
    transition: opacity .5s ease, transform .55s cubic-bezier(.25,.9,.3,1.1);
  }
  #mob-menu .bd-nav-mitem:hover { color: var(--bdn-gold-hi); }
  #mob-menu[aria-hidden="false"] .bd-nav-mitem { opacity: 1; transform: translateX(0) rotateY(0deg); }
  #mob-menu .bd-nav-mitem:nth-child(1) { transition-delay: 50ms; }
  #mob-menu .bd-nav-mitem:nth-child(2) { transition-delay: 95ms; }
  #mob-menu .bd-nav-mitem:nth-child(3) { transition-delay: 140ms; }
  #mob-menu .bd-nav-mitem:nth-child(4) { transition-delay: 185ms; }
  #mob-menu .bd-nav-mitem:nth-child(5) { transition-delay: 230ms; }
  #mob-menu .bd-nav-mitem:nth-child(6) { transition-delay: 275ms; }
  #mob-menu .bd-nav-mitem:nth-child(7) { transition-delay: 320ms; }

  .bd-nav-menu-foot {
    position: relative; margin-top: auto;
    display: flex; flex-direction: column; gap: 14px;
  }
  #mob-menu .bd-nav-menu-foot > * {
    opacity: 0; transform: translateX(-28px);
    transition: opacity .5s ease .44s, transform .55s cubic-bezier(.25,.9,.3,1.1) .44s;
  }
  #mob-menu[aria-hidden="false"] .bd-nav-menu-foot > * { opacity: 1; transform: translateX(0); }
  #mob-menu .bd-nav-menu-tel {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px; border-radius: 16px;
    font-size: 16px; font-weight: 600;
    color: rgba(233,236,242,0.88); text-decoration: none;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
  }
  #mob-menu .bd-nav-menu-cta {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; border-radius: 16px;
    background: linear-gradient(180deg, var(--bdn-top), var(--bdn-gold));
    color: var(--bdn-ink); text-decoration: none;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16.5px;
    box-shadow: 0 14px 34px rgba(233,180,76,0.45), inset 0 1px 0 rgba(255,255,255,0.55);
    transition-delay: .5s;
  }
}

/* ── Keyframes ──────────────────────────────────────────────────── */
@keyframes bdnIn    { 0%   { transform: translateY(-90px) rotateX(30deg); opacity: 0; }
                      60%  { transform: translateY(7px) rotateX(-4deg); opacity: 1; }
                      100% { transform: translateY(0) rotateX(0deg); opacity: 1; } }
@keyframes bdnItem  { from { opacity: 0; transform: translateY(-16px); }
                      to   { opacity: 1; transform: translateY(0); } }
@keyframes bdnShine { 0%, 55% { transform: translateX(-160%) skewX(-18deg); }
                      100%    { transform: translateX(360%) skewX(-18deg); } }
@keyframes bdnSweep { 0%   { transform: translateX(-130%) skewX(-16deg); opacity: 0; }
                      25%  { opacity: 1; }
                      100% { transform: translateX(340%) skewX(-16deg); opacity: 0; } }
@keyframes bdnSway  { 0%   { transform: rotateY(-14deg) rotateX(4deg); }
                      100% { transform: rotateY(14deg) rotateX(-4deg); } }
@keyframes bdnAur1  { 0%   { transform: translate3d(-8%,-12%,0) scale(1); }
                      50%  { transform: translate3d(26%,14%,0) scale(1.25); }
                      100% { transform: translate3d(-4%,6%,0) scale(1.05); } }
@keyframes bdnAur2  { 0%   { transform: translate3d(6%,10%,0) scale(1.1); }
                      50%  { transform: translate3d(-20%,-10%,0) scale(1); }
                      100% { transform: translate3d(10%,-4%,0) scale(1.2); } }
@keyframes bdnDrift { 0%, 100% { transform: translate3d(0,0,0) scale(1); }
                      33%      { transform: translate3d(60px,-40px,0) scale(1.12); }
                      66%      { transform: translate3d(-50px,30px,0) scale(.94); } }
@keyframes bdnDrift2{ 0%, 100% { transform: translate3d(0,0,0) scale(1.05); }
                      50%      { transform: translate3d(-80px,40px,0) scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  #hdr, #hdr *, #hdr *::before, #hdr *::after,
  #mob-menu, #mob-menu * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .bd-nav { transform: none !important; }
}