/* ---------------------------------------------------------------
   Gemeinsame Teile aller Seiten: Handy-Menue, Anruf-Knopf, Social-Links.
   Nutzt dieselben Farb-Variablen wie index.html und ueber.css.
   --------------------------------------------------------------- */

/* Kopfzeile immer ueber dem Menue, auch auf Unterseiten (dort sticky) */
.nav{z-index:60}

/* Anruf- und Menue-Knopf, nur auf kleinen Bildschirmen */
.navcall,.burger{display:none;align-items:center;justify-content:center;flex:0 0 auto;
  width:44px;height:44px;border-radius:10px;border:1px solid var(--line-strong);
  background:rgba(14,20,23,.55);color:var(--text-primary);cursor:pointer;padding:0;
  text-decoration:none;transition:border-color .3s var(--ease),background .3s var(--ease)}
.navcall:hover,.burger:hover{border-color:var(--accent)}
.navcall svg{width:19px;height:19px}
.burger{margin-left:0}
.burger span{position:relative;display:block;width:18px;height:1.8px;background:currentColor;
  transition:background .25s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.8px;
  background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1279px){.nav .navtel{display:none !important}}
@media (max-width:1099px){
  .nav .navlinks{display:none !important}
  .burger{display:inline-flex}
  .nav .btn{margin-left:auto}
}
@media (max-width:760px){.navcall{display:inline-flex}}
/* Handy: Marke, Anrufen, Menue. "Beratung anfragen" steht im Menue und im Seitenkopf. */
@media (max-width:560px){
  .nav .btn{display:none}
  .navcall{margin-left:auto}
  .nav .shell{gap:.6rem}
}

/* Das Menue selbst */
.menu{position:fixed;inset:0;z-index:59;background:rgba(10,15,18,.97);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:calc(env(safe-area-inset-top,0px) + 5.4rem) 0 calc(env(safe-area-inset-bottom,0px) + 2rem);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.menu.open{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
.menu .shell{display:grid;gap:1.6rem}
.menu ul{list-style:none;margin:0;padding:0;display:grid}
.menu li{border-bottom:1px solid var(--line)}
.menu li a{display:flex;align-items:center;justify-content:space-between;min-height:56px;
  font-family:'Archivo',system-ui,sans-serif;font-weight:600;font-size:1.3rem;letter-spacing:-.015em;
  color:var(--text-primary);text-decoration:none}
.menu li a::after{content:"";width:8px;height:8px;border-right:1.6px solid var(--accent);
  border-top:1.6px solid var(--accent);transform:rotate(45deg);margin-right:.3rem}
.menu li a[aria-current="page"]{color:var(--accent)}
.menu .menucta{display:grid;gap:.7rem}
.menu .menucta .btn{display:flex !important;width:100%;min-height:50px;font-size:1rem}
.menu .social{display:flex;gap:.7rem;flex-wrap:wrap}
@media (min-width:1100px){.menu{display:none}}
body.menu-open{overflow:hidden}

/* Social-Links (Fusszeile und Kontakt) */
.social{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.social a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .9rem;
  border:1px solid var(--line-strong);border-radius:9px;color:var(--text-secondary);
  text-decoration:none;font-size:.92rem;transition:border-color .3s var(--ease),color .3s var(--ease)}
.social a:hover{border-color:var(--accent);color:var(--text-primary)}
.social svg{width:18px;height:18px;flex:0 0 auto}