/* ============================================================
   site-nav.css — gemeinsame Navigation für ALLE Seiten
   (identisch zur Hauptseite). Wird von site-nav.js injiziert.
   Erwartet die Farb-/Font-Variablen (:root) der jeweiligen Seite.
   ============================================================ */

.skip-link{position:fixed;top:.5rem;inset-inline-start:.5rem;transform:translateY(-200%);
  background:var(--gold);color:var(--deep);padding:.6rem 1rem;border-radius:2px;z-index:200;transition:transform .25s}
.skip-link:focus{transform:translateY(0)}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(.9rem,2.5vw,1.6rem) var(--pad);
  background:transparent;
  pointer-events:none;transition:background .45s ease, backdrop-filter .45s ease, padding .45s ease}
.site-header > *{pointer-events:auto}
.site-header.scrolled{background:rgba(12,7,22,.30);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  padding-top:clamp(.65rem,1.7vw,1.05rem);padding-bottom:clamp(.65rem,1.7vw,1.05rem);
  -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent);mask-image:linear-gradient(180deg,#000 68%,transparent)}

.site-header .brand{font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2.35rem);letter-spacing:.02em;line-height:1.02;color:var(--ink)}
.site-header .brand small{display:block;font-family:var(--sans);font-size:clamp(.78rem,1.5vw,.98rem);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);opacity:.9;margin-top:.4rem}

.header-right{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.8rem)}
.lang{display:flex;align-items:center;gap:0;font-family:var(--sans);font-size:1.02rem;letter-spacing:.06em}
.lang button{background:none;border:none;color:var(--ink);opacity:.55;cursor:pointer;padding:.28rem .28rem;font:inherit;font-weight:500;line-height:1;display:inline-flex;align-items:center;transition:opacity .3s}
.lang button:hover{opacity:.9}
.lang button[aria-pressed="true"]{opacity:1;color:var(--gold-bright)}
.lang button[lang="ar"]{font-size:1.05em}
.lang .sep{opacity:.3;align-self:center;line-height:1}

.burger{width:2.6rem;height:2.6rem;background:none;border:none;cursor:pointer;position:relative;display:grid;place-items:center}
.burger span{display:block;width:26px;height:1.5px;background:var(--ink);position:relative;transition:transform .4s,opacity .3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:26px;height:1.5px;background:var(--ink);transition:transform .4s,opacity .3s}
.burger span::before{top:-8px}.burger span::after{top:8px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{transform:translateY(8px) rotate(45deg)}
body.nav-open .burger span::after{transform:translateY(-8px) rotate(-45deg)}

/* Overlay-Nav */
.nav-overlay{position:fixed;inset:0;z-index:90;
  background:
    radial-gradient(130% 100% at 12% 18%, rgba(42,23,70,.5), transparent 55%),
    linear-gradient(100deg, rgba(6,3,12,0) 28%, rgba(4,2,9,.82)),
    linear-gradient(160deg, var(--deep), #160c25);
  display:flex;flex-direction:column;justify-content:center;padding:6rem var(--pad) 2rem;
  opacity:0;visibility:hidden;transform:translateY(-2%);transition:opacity .5s,transform .5s,visibility .5s}
body.nav-open .nav-overlay{opacity:1;visibility:visible;transform:none}
.nav-overlay nav{display:flex;flex-direction:column;gap:clamp(.6rem,2vw,1.1rem)}
.nav-overlay .main-link{font-family:var(--serif);font-size:clamp(2rem,7vw,4rem);line-height:1.05;color:var(--ink);width:max-content;max-width:100%;opacity:.85;transition:opacity .3s,color .3s}
.nav-overlay .main-link:hover{opacity:1;color:var(--gold-bright)}
.nav-foot{margin-top:clamp(2rem,6vh,4rem);display:flex;flex-direction:column;gap:1.2rem;font-size:.9rem}
.nav-phone{font-family:var(--serif);font-size:clamp(1.4rem,4vw,2rem);color:var(--gold-bright);display:inline-flex;align-items:center;gap:.5rem}
.nav-phone .ico{width:.78em;height:.78em}
.nav-ci{display:inline-flex;gap:1.1rem;align-items:center}
.nav-ci a{color:var(--gold);display:inline-grid;place-items:center;transition:color .3s,transform .3s}
.nav-ci a svg{width:1.4rem;height:1.4rem}
.nav-ci a:hover{color:var(--gold-bright);transform:translateY(-2px)}
.nav-foot .legal{opacity:.6;letter-spacing:.04em}
.nav-foot .legal a{transition:color .3s}
.nav-foot .legal a:hover{color:var(--gold-bright)}

/* Menü: Unterwasser-Lichteffekt */
.nav-sparkles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.nav-sparkles::before,.nav-sparkles::after{content:"";position:absolute;inset:-25%;mix-blend-mode:screen;filter:blur(26px);
  background:
    radial-gradient(closest-side,rgba(230,201,135,.12),transparent) 22% 8%/48% 60% no-repeat,
    radial-gradient(closest-side,rgba(170,205,240,.12),transparent) 74% 26%/54% 66% no-repeat,
    radial-gradient(closest-side,rgba(230,201,135,.09),transparent) 48% 82%/60% 55% no-repeat;
  animation:navcaustic 18s ease-in-out infinite alternate}
/* weiche, bewegte Lichtstrahlen (God-Rays) – vor allem rechts */
.nav-sparkles::after{inset:-12% -5% -12% 22%;filter:blur(24px);opacity:.9;
  background:repeating-linear-gradient(76deg, transparent 0 72px, rgba(232,224,192,.055) 72px 112px, transparent 112px 184px);
  -webkit-mask-image:radial-gradient(135% 115% at 92% -8%, #000, transparent 66%);
          mask-image:radial-gradient(135% 115% at 92% -8%, #000, transparent 66%);
  animation:navray 17s ease-in-out infinite alternate}
@keyframes navcaustic{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.08)}100%{transform:translate3d(-2%,3%,0) scale(1.05)}}
@keyframes navray{0%{transform:translate3d(-3%,0,0)}100%{transform:translate3d(4%,0,0)}}
.nav-overlay nav,.nav-overlay .nav-foot{position:relative;z-index:1}

.tel{unicode-bidi:embed;direction:ltr}

/* To-Top-Button */
.to-top{position:fixed;bottom:1.4rem;inset-inline-end:1.4rem;z-index:95;
  width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(12,7,22,.5);border:1px solid rgba(201,162,75,.5);color:var(--gold-bright);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s,transform .3s,visibility .3s,background .3s,color .3s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--gold);color:var(--deep)}
.to-top svg{width:1.3rem;height:1.3rem}

@media(prefers-reduced-motion:reduce){
  .nav-sparkles{display:none}
  .site-header,.burger span,.burger span::before,.burger span::after,.nav-overlay,.main-link{transition-duration:.001ms!important}
}