/* aj-nav.css — Mobile-Navigation (Hamburger + Dropdown).
   Wird als LETZTES Stylesheet eingebunden, damit diese Regeln die
   Inline-/Basis-Styles der Navigation zuverlaessig ueberschreiben.
   Nutzt nur Variablen, die auf jeder Seite definiert sind. */

.navtoggle{
  display:none;
  -webkit-appearance:none; appearance:none;
  background:none; border:0; cursor:pointer;
  width:2.75rem; height:2.75rem; margin-right:-.6rem; padding:0;
  color:var(--aj-ink);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  z-index:60;
}
.navtoggle span{
  display:block; width:22px; height:2px; background:currentColor;
  transition:transform .25s ease, opacity .2s ease;
}

/* "Start a project" & Co.: Label horizontal mittig statt linksbuendig.
   Zuletzt geladen, daher greift es auf allen Seiten. */
.slidebtn i{ justify-content:center; }

@media (max-width:767px){
  .navtoggle{ display:inline-flex; }

  /* Navigation wird zum Dropdown-Panel unter der fixen Kopfleiste (72px hoch) */
  .top nav{
    position:fixed; left:0; right:0; top:72px;
    flex-direction:column; align-items:stretch; gap:0;
    padding:.25rem var(--pad) 1.5rem;
    background:var(--aj-surface);
    border-bottom:1px solid var(--line-14);
    box-shadow:0 24px 40px -28px rgba(0,0,0,.45);
    max-height:calc(100dvh - 72px); overflow-y:auto;
    transform:translateY(-10px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  body.nav-open .top nav{
    transform:none; opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity .22s ease, transform .22s ease, visibility 0s;
  }

  .top nav a{
    letter-spacing:.08em; font-size:12px;
    padding:1rem .1rem; border-bottom:1px solid var(--line-14);
  }

  /* CTA-Button im Dropdown: voll breit, nur das Label */
  .top .slidebtn{
    display:block; height:auto; overflow:visible; border-bottom:0;
    margin-top:1.1rem; padding:1rem 1.25rem; text-align:center;
  }
  .top .slidebtn > span{ transform:none !important; }
  .top .slidebtn i{ height:auto; justify-content:center; }
  .top .slidebtn i:last-child{ display:none; }

  /* Hamburger -> X */
  body.nav-open .navtoggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.nav-open .navtoggle span:nth-child(2){ opacity:0; }
  body.nav-open .navtoggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

@media (min-width:768px){ .navtoggle{ display:none !important; } }

/* ============================================================
   Seitenübergänge (View Transitions API)
   - sanfter Cross-Fade des Inhalts beim Menüwechsel
   - Header + Logo bleiben stehen und "gleiten durch"
   - Fallback (z. B. Firefox): sanftes Einblenden beim Laden
   ============================================================ */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration: .6s;                 /* Ein- UND Ausblenden identisch */
  animation-timing-function: ease-in-out;  /* sanfter Start, sanftes Ende */
}

/* Header/Logo als durchgleitendes Element: bleibt stabil, blitzt nicht neu auf */
.top{ view-transition-name: aj-header; }

/* Fallback-Blende (aj-nav.js): Firefox, file://, aeltere Safari.
   JS setzt html.aj-fade, dann .aj-fade-in; vor Navigation wird
   .aj-fade-in entfernt -> Inhalt blendet aus. Header/Menue (.top)
   bleibt stehen - wie bei der nativen Blende (view-transition-name). */
html.aj-fade main#top > :not(.top):not(.scrollcue),
html.aj-fade body > footer{ opacity:0; transition:opacity .35s ease-in-out; }
html.aj-fade.aj-fade-in main#top > :not(.top):not(.scrollcue),
html.aj-fade.aj-fade-in body > footer{ opacity:1; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation: none !important; }
}

/* ============================================================
   Leichte Bremse gegen Gelegenheits-Speichern von Bildern.
   Kein echter Schutz (Screenshots/DevTools bleiben moeglich),
   erschwert nur Ziehen und das lange Antippen (iOS) auf Bildern.
   ============================================================ */
img{
  -webkit-user-drag:none; -khtml-user-drag:none; -moz-user-drag:none;
  -o-user-drag:none; user-drag:none;
  -webkit-touch-callout:none;
}