/* ============================================================
   navigation.css – Globale Navigation + mobiles Overlay-Menü
   Verwendet in: header.php
   Abhängig von: tokens.css, base.css
   ============================================================ */

/* ---------- Fixierte Top-Navigation (header.php) ---------- */
/* .ht-nav – die fixierte Leiste (JS verkleinert padding/box-shadow beim Scrollen). */
.ht-nav{position:fixed;top:0;left:0;right:0;z-index:80;background:#fff;border-bottom:1px solid transparent;transition:padding .3s ease,box-shadow .3s ease;padding:1.375rem 0}
/* .ht-nav__inner – Flex-Zeile innerhalb der Leiste. */
.ht-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%;padding:0 1.5rem;box-sizing:border-box;position:relative}
/* .ht-nav__brand – Logo-Link links. */
.ht-nav__brand{text-decoration:none;display:flex;align-items:center;gap:0.75rem}
/* .ht-nav__logo – Logobild. */
.ht-nav__logo{height:2.75rem;width:auto;display:block}
/* .ht-nav__tag – Zusatz „Asbestgutachter" neben dem Logo. */
.ht-nav__tag{font-size:0.625rem;letter-spacing:.16em;text-transform:uppercase;color:#6B7280;font-weight:600;border-left:1px solid #E5E7EB;padding-left:0.75rem;max-width:7.5rem;line-height:1.3}
/* .ht-nav__right – rechte Gruppe (Links + Aktionen). */
.ht-nav__right{display:flex;align-items:center;gap:2.75rem}
/* .ht-nav__links – Desktop-Linkliste. */
.ht-nav__links{display:flex;align-items:center;gap:2.375rem}
/* .ht-nav__actions – CTA + Hamburger. */
.ht-nav__actions{display:flex;align-items:center;gap:0.875rem}
/* .ht-nav__cta – „Termin anfragen"-Button (zusätzlich .btn-orange). */
.ht-nav__cta{display:inline-flex;align-items:center;height:2.75rem;padding:0 1.375rem;background:var(--orange);color:#fff;text-decoration:none;font-size:0.875rem;font-weight:600;border-radius:0}

/* .navlink – Desktop-Navigationslink mit Unterstrich-Animation + aktivem Zustand. */
.navlink{position:relative;color:#1A1A1A;text-decoration:none;font-size:0.9375rem;font-weight:600;letter-spacing:.01em}
.navlink::after{content:"";position:absolute;left:0;bottom:-0.25rem;height:0.125rem;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.navlink:hover::after,.navlink[aria-current="page"]::after{transform:scaleX(1)}
.navlink:hover{color:var(--orange)}

/* .hamb – Hamburger-Button (nur mobil sichtbar, siehe Media-Query). */
.hamb{display:none;flex-direction:column;justify-content:center;gap:0.3125rem;width:2.875rem;height:2.875rem;background:transparent;border:none;border-radius:0;cursor:pointer}
/* .hamb__bar – die drei Balken. */
.hamb__bar{display:block;width:1.25rem;height:0.125rem;background:#1A1A1A;margin:0 auto}

/* ---------- Mobiles Overlay-Menü (header.php) ---------- */
/* .ht-menu – Vollbild-Overlay; [hidden] schließt es, JS schaltet display. */
.ht-menu{position:fixed;inset:0;z-index:90;background:rgba(10,10,10,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;padding:1.75rem 2rem}
.ht-menu[hidden]{display:none}
/* .ht-menu__head – Kopfzeile (Wortmarke + Schließen). */
.ht-menu__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:3rem}
/* .ht-menu__wordmark – Wortmarke „HERTING". */
.ht-menu__wordmark{font-weight:800;font-size:1.3125rem;letter-spacing:.14em}
/* .ht-menu__rule – orange Linie unter der Wortmarke. */
.ht-menu__rule{display:block;width:1.875rem;height:0.1875rem;background:var(--orange);margin-top:0.3125rem;border-radius:0}
/* .ht-menu__close – Schließen-Button. */
.ht-menu__close{width:2.875rem;height:2.875rem;background:transparent;border:1px solid var(--line-dark);border-radius:0;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1}
/* .ht-menu__link – großer Menüeintrag. */
.ht-menu__link{color:#fff;text-decoration:none;font-size:1.875rem;font-weight:700;padding:1.125rem 0;border-bottom:1px solid var(--line-dark)}
/* .ht-menu__cta – „Termin anfragen" im Menü (zusätzlich .btn-orange). */
.ht-menu__cta{margin-top:2.25rem;display:inline-flex;align-items:center;justify-content:center;height:3.375rem;background:var(--orange);color:#fff;text-decoration:none;font-size:1.0625rem;font-weight:600;border-radius:0}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  /* Ab Tablet: Desktop-Navigation aus, Hamburger an. */
  .desk-nav{display:none!important}
  .hamb{display:flex!important}
}