/* ITC Lucke v3.4 · einheitliche Kopfnavigation auf jeder Seite: Leistungen, Portfolio, Kontakt.
   Maßgebliche Regel: PROJEKTREGELN.md im Projektstamm, Regel R-01 „Kopfnavigation“, Version 2.
   style.css und pages.css bleiben bytegleich mit v3.1. Diese Datei wird auf jeder Seite zuletzt geladen
   und ist die einzige Stelle mit Gestaltungsregeln, die den Kopf ergänzen. Das Verhalten steht in nav.js. */

/* Ab 760 px: drei Einträge in einer Zeile (style.css). Darunter gilt einer der beiden Blöcke weiter unten. */
.site-nav a:not(.nav-cta) { display: inline-flex; }

/* Menüknopf. Im HTML trägt er das Attribut hidden; sichtbar wird er nur unter 760 px und nur, wenn nav.js
   läuft (Klasse nav-js am html-Element). Ohne Skript oder ohne Stylesheet bleibt er verborgen. */
.nav-toggle {
  display: none; align-items: center; gap: .6rem; min-height: 2.75rem; margin: 0; padding: 0 .9rem;
  border: 1px solid var(--control-line); border-radius: 0; background: none; color: inherit;
  font: inherit; font-size: 1rem; line-height: 1; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .2s, color .2s, border-color .2s;
}
.nav-toggle .icon path { transform-box: view-box; transform-origin: 50% 50%; transition: transform .3s var(--ease-out); }
.nav-toggle[aria-expanded="true"] { background: #fff; color: var(--cobalt); border-color: #fff; }
.nav-toggle[aria-expanded="true"] .icon path:first-child { transform: rotate(45deg) translateY(3px); }
.nav-toggle[aria-expanded="true"] .icon path:last-child { transform: rotate(-45deg) translateY(-3px); }
@media (hover: hover) { .nav-toggle:hover { background: #fff; color: var(--cobalt); border-color: #fff; } }

/* Unter 760 px mit Skript: Marke links, Menüknopf ganz rechts. Die drei Einträge stehen nicht im Kopf,
   sondern klappen unter der Kopfzeile auf, jeder als eigene Zeile über die ganze Breite. */
@media (max-width: 759.98px) {
  .nav-js .site-header { flex-wrap: wrap; row-gap: 0; }
  .nav-js .nav-toggle { display: inline-flex; }
  .nav-js .site-nav { display: none; flex: 0 0 100%; flex-direction: column; align-items: stretch; gap: 0; margin-top: 1rem; border-bottom: 1px solid var(--line); font-size: 1.375rem; letter-spacing: -.01em; }
  .nav-js .nav-toggle[aria-expanded="true"] + .site-nav { display: flex; }
  .nav-js .site-nav a, .nav-js .site-nav a.nav-cta { justify-content: space-between; gap: 1rem; min-height: 3.75rem; padding: 0; border: 0; border-top: 1px solid var(--line); white-space: normal; }
  .nav-js .site-nav a.nav-cta:hover { background: none; color: inherit; }
  .nav-js .site-nav a.nav-cta .icon { margin-right: -.2em; }
  .nav-js .site-nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
  .nav-js .site-nav a[aria-current="page"] { text-underline-offset: .3em; }
}
@media (max-width: 759.98px) and (prefers-reduced-motion: no-preference) {
  .nav-js .nav-toggle[aria-expanded="true"] + .site-nav a { animation: nav-in .45s var(--ease-out) backwards; }
  .nav-js .nav-toggle[aria-expanded="true"] + .site-nav a:nth-child(2) { animation-delay: .05s; }
  .nav-js .nav-toggle[aria-expanded="true"] + .site-nav a:nth-child(3) { animation-delay: .1s; }
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-.5rem); } }

/* Unter 480 px ohne Skript (Rückfall, Stand v3.3): Marke in der ersten Zeile, darunter die drei Einträge,
   Leistungen und Portfolio links, Kontakt rechts. Zwischen 480 und 760 px passen sie in eine Zeile. */
@media (max-width: 479.98px) {
  html:not(.nav-js) .site-header { flex-wrap: wrap; row-gap: .5rem; padding-bottom: .5rem; }
  html:not(.nav-js) .site-nav { flex: 0 0 100%; flex-wrap: wrap; gap: 0 1rem; padding-top: .5rem; border-top: 1px solid var(--line); font-size: .9375rem; }
  html:not(.nav-js) .site-nav .nav-cta { margin-left: auto; gap: .4rem; padding-inline: .7rem; }
}

@media print { .nav-toggle { display: none !important; } }