/* ============================================================================
   Hausverwaltung Clauser · layout.css — Navigation (hell/Blueprint) + Mobile
   ========================================================================== */

.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:var(--nav-h); padding-inline:clamp(20px,5vw,48px);
  background:rgba(241,237,228,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .brand-mark{ height:40px; width:auto; display:block; flex-shrink:0; }
.brand img{ height:42px; width:auto; }
.brand .brand-name{ line-height:1; }
.brand .brand-name b{ display:block; font-family:var(--font-display); font-weight:400; font-size:23px; letter-spacing:.06em; color:var(--ink); }
.brand .brand-name span{ display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-deep); margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--text); position:relative; }
/* scaleX statt width: eine Breiten-Animation rechnet pro Frame Layout. */
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-5px; width:100%; height:1px; background:var(--accent-deep); transform:scaleX(0); transform-origin:left center; transition:transform .3s var(--ease); }
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); }

.burger{ display:none; background:none; border:none; width:44px; height:44px; padding:10px; cursor:pointer; }
/* Der globale a:hover greift beim <button> nicht — der Burger hatte keinerlei
   Hover-Rückmeldung, das X ist Zustand und kein Feedback. */
.burger:hover span{ background:var(--accent-deep); }
.burger span{ display:block; height:2px; background:var(--ink); margin:5px 0; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  /* Scrollbar für kleine Höhen, Scroll-Kette zum Body unterbunden (der Lock
     hing allein an body.style.overflow), und Platz für Notch/Home-Indicator. */
  padding:max(0px,env(safe-area-inset-top)) clamp(24px,8vw,60px) max(0px,env(safe-area-inset-bottom));
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:none; }
/* :not(.btn) ist hier nicht kosmetisch: Der CTA im Mobilmenü ist ebenfalls ein
   <a> und hat sonst die komplette Menü-Typografie geerbt — 52px Bebas, Tinte
   statt Weiß, padding:8px 0 statt der Pillenmaße und eine Trennlinie quer
   durch die Pille. Der Text lief dadurch über den Rand hinaus. */
.mobile-menu a:not(.btn){ font-family:var(--font-display); font-weight:400; font-size:clamp(34px,10vw,52px); letter-spacing:.03em; color:var(--ink); padding:8px 0; border-bottom:1px solid var(--line); }
/* Der CTA ist die Hauptaktion im offenen Menü: volle Breite, damit er als
   Fläche und nicht als sechster Menüpunkt gelesen wird. */
.mobile-menu .btn{ margin-top:26px; align-self:stretch; justify-content:center; font-size:16px; }

@media (max-width: 860px){
  .nav-links, .nav .btn-ink{ display:none; }
  .burger{ display:block; }
}