/* ============================================================
   YAPEAL SHARED CSS
   Design language: waar.ch structure · YAPEAL blue palette
   --bx: #2D3EE0 (YAPEAL Logo-Blau)
   ============================================================ */

/* NAV */
.site-nav{position:fixed;top:0;left:0;right:0;height:54px;z-index:1000;background:var(--nav);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:.5px solid var(--line2);display:flex;align-items:center;}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 48px;display:flex;align-items:center;width:100%;gap:0;}
/* NAV LOGO — image version */
.nav-logo{font-family:'Montserrat',sans-serif;font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:var(--text);text-decoration:none;margin-right:32px;display:flex;align-items:center;gap:10px;}
.nav-logo span{color:var(--bx);}
.nav-logo-img{height:26px;width:auto;display:block;}
/* Light mode: show colour logo, hide white version */
.nav-logo-light{display:block;}
.nav-logo-dark{display:none;}
[data-theme="dark"] .nav-logo-light{display:none;}
[data-theme="dark"] .nav-logo-dark{display:block;}

/* FOOTER LOGO — image version */
.footer-logo{text-decoration:none;display:inline-block;}
.footer-logo-img{height:28px;width:auto;display:block;}
.footer-logo-light{display:block;}
.footer-logo-dark{display:none;}
[data-theme="dark"] .footer-logo-light{display:none;}
[data-theme="dark"] .footer-logo-dark{display:block;}
.nav-links{display:flex;align-items:center;gap:4px;flex:1;}
.nav-link{font-size:14px;font-weight:400;color:var(--text2);text-decoration:none;padding:8px 14px;border-radius:980px;transition:color .2s,background .2s;white-space:nowrap;}
.nav-link:hover{color:var(--text);background:var(--bg3);}
.nav-link.active{color:var(--bx);font-weight:500;}
.nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}
.btn-nav{font-family:'Open Sans',sans-serif;font-size:14px;font-weight:600;padding:8px 20px;border-radius:980px;text-decoration:none;transition:all .2s;white-space:nowrap;}
.btn-nav.ghost{color:var(--text2);border:.5px solid var(--line2);background:transparent;}
.btn-nav.ghost:hover{color:var(--text);border-color:var(--text2);}
.btn-nav.primary{background:var(--bx);color:#fff;border:.5px solid transparent;}
.btn-nav.primary:hover{background:var(--bx2);}
.btn-nav.secondary{background:var(--bx2-light);color:var(--bx);border:.5px solid var(--bx-pale-border);}
.btn-nav.secondary:hover{background:var(--bx-pale);color:var(--bx2);}

/* DROPDOWN */
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{cursor:pointer;display:flex;align-items:center;gap:5px;}
.nav-dropdown-toggle::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s;}
.nav-dropdown:hover .nav-dropdown-toggle::after{transform:rotate(-135deg) translateY(-2px);}
/* Menu sitzt direkt unter dem Toggle, kein Gap — Lücke via padding-top überbrückt */
.nav-dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  padding:12px 8px 8px; /* padding-top überbrückt den visuellen Abstand */
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .18s,transform .18s;
}
/* Sichtbarer Box-Rahmen als separates Pseudo-Element damit padding-top nicht sichtbar ist */
.nav-dropdown-menu::before{
  content:'';
  position:absolute;
  top:8px; left:0; right:0; bottom:0;
  background:var(--bg2);
  border:.5px solid var(--line2);
  border-radius:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.1);
  z-index:-1;
}
[data-theme="dark"] .nav-dropdown-menu::before{box-shadow:0 8px 32px rgba(0,0,0,.4);}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;pointer-events:auto;transform:translateY(0);}
.nav-dropdown-item{position:relative;z-index:1;display:block;font-size:14px;font-weight:400;color:var(--text2);text-decoration:none;padding:10px 14px;border-radius:8px;transition:background .15s,color .15s;}
.nav-dropdown-item:hover{background:var(--bx-pale);color:var(--bx);}
.nav-dropdown-divider{position:relative;z-index:1;height:.5px;background:var(--line2);margin:6px 0;}

/* HAMBURGER */
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;margin-left:auto;}
.nav-hamburger span{width:22px;height:1.5px;background:var(--text);transition:all .3s;}
.mob-menu{display:none;position:fixed;top:54px;left:0;right:0;bottom:0;background:var(--bg2);z-index:999;overflow-y:auto;padding:24px 24px 40px;}
.mob-menu.open{display:block;}
.mob-section{margin-bottom:28px;}
.mob-section-title{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin-bottom:10px;padding-bottom:8px;border-bottom:.5px solid var(--line2);}
.mob-link{display:block;font-size:16px;font-weight:400;color:var(--text);text-decoration:none;padding:10px 0;border-bottom:.5px solid var(--line);}
.mob-actions{margin-top:24px;display:flex;flex-direction:column;gap:10px;}
.mob-actions .btn-nav{text-align:center;display:block;padding:14px 20px;}

/* FOOTER */
.site-footer{background:var(--bg2);border-top:.5px solid var(--line2);padding:64px 0 32px;}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 48px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;}
.footer-brand{display:flex;flex-direction:column;gap:16px;}
.footer-logo{font-family:'Montserrat',sans-serif;font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);text-decoration:none;}
.footer-logo span{color:var(--bx);}
.footer-tagline{font-size:14px;font-weight:300;color:var(--text2);line-height:1.6;max-width:280px;}
.footer-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.footer-badge{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);border:.5px solid var(--line2);border-radius:980px;padding:5px 12px;}
.footer-col-title{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin-bottom:16px;}
.footer-link{display:block;font-size:14px;font-weight:400;color:var(--text2);text-decoration:none;padding:5px 0;transition:color .2s;}
.footer-link:hover{color:var(--bx);}
.footer-bottom{border-top:.5px solid var(--line2);padding-top:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.footer-copy{font-size:13px;color:var(--text3);}
.footer-legal{display:flex;gap:20px;}
.footer-legal a{font-size:13px;color:var(--text3);text-decoration:none;transition:color .2s;}
.footer-legal a:hover{color:var(--bx);}

/* DARK MODE TOGGLE */
.dark-toggle{background:transparent;border:.5px solid var(--line2);border-radius:980px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:border-color .2s,background .2s;}
.dark-toggle:hover{background:var(--bg3);}

/* REVEAL ANIMATION */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.08s;}
.reveal-delay-2{transition-delay:.16s;}
.reveal-delay-3{transition-delay:.24s;}
.reveal-delay-4{transition-delay:.32s;}
.reveal-delay-5{transition-delay:.40s;}
.reveal-delay-6{transition-delay:.48s;}

/* CURSOR GLOW — injected via JS */
#cursor-glow{position:fixed;pointer-events:none;width:380px;height:380px;border-radius:50%;transform:translate(-50%,-50%);z-index:0;transition:opacity .4s;}

/* MOBILE */
@media(max-width:900px){
  .nav-links,.nav-actions .btn-nav:not(.primary){display:none;}
  .nav-hamburger{display:flex;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .footer-inner{padding:0 24px;}
  .nav-inner{padding:0 24px;}
}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}