/* navi.css — die Hauptnavigation im Kopf, auf allen Seiten von design.ma-ki.io gleich.
   Sie ergänzt die bestehende Kopfzeile (header.kopf), sie ersetzt sie nicht: Marke links,
   Navigation in der Mitte, Platzanzeige und „Ich bewerbe mich" rechts.
   Auf dem Handy wird aus der Navigation ein Menü, das sich aufklappt. */

.kopf { gap: 12px; }

/* ---------- Navigation am Rechner ---------- */
.haupt {
  display: flex; align-items: center; gap: clamp(10px, 2vw, 26px);
  margin-inline: auto;                      /* schiebt sich in die Mitte zwischen Marke und rechte Seite */
}
.haupt a {
  position: relative; padding: 6px 2px;
  font-family: var(--schrift); font-size: .95rem; font-weight: 500;
  color: var(--leise); text-decoration: none; white-space: nowrap;
  transition: color .2s ease;
}
.haupt a:hover { color: var(--text); }
/* Der Strich wächst von links, damit er sich nicht wie ein Schalter an- und ausknipst. */
.haupt a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.haupt a:hover::after { transform: scaleX(1); }
.haupt a[aria-current="page"] { color: var(--text); }
.haupt a[aria-current="page"]::after { transform: scaleX(1); }
/* Die Platzanzeige im Menü gehört nur ins aufgeklappte Handy-Menü; am Rechner steht sie rechts als Pille. */
.haupt .menue-platz { display: none; }

/* ---------- Knopf fürs Menü, nur am Handy ---------- */
.menue-knopf {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: rgba(20, 17, 14, .6); color: var(--text);
  border: 1px solid var(--linie); border-radius: 12px; cursor: pointer;
}
.menue-knopf span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: background .2s ease; }
.menue-knopf span::before,
.menue-knopf span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, top .2s ease; }
.menue-knopf span::before { top: -6px; }
.menue-knopf span::after { top: 6px; }
.menue-knopf[aria-expanded="true"] span { background: transparent; }
.menue-knopf[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Handy und schmales Fenster ---------- */
@media (max-width: 860px) {
  .menue-knopf { display: inline-flex; }
  .kopf-rechts .platz-pille { display: none; }   /* die Zahl steht im aufgeklappten Menü */

  .haupt {
    position: fixed; inset: var(--kopf-h) 0 auto 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--rand-seite) 20px;
    background: #14110e; border-bottom: 1px solid var(--linie);
    /* zu statt weg: ausgeklappt wird gemessen, nicht geraten, damit es ohne feste Höhe geht */
    display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
    transition: grid-template-rows .28s ease, opacity .2s ease, visibility .28s;
  }
  .haupt > * { min-height: 0; }
  .kopf.offen .haupt { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
  .haupt a {
    font-family: var(--titel); font-size: 1.5rem; letter-spacing: .01em;
    padding: 12px 0; border-bottom: 1px solid var(--linie);
  }
  .haupt a:last-of-type { border-bottom: 0; }
  .haupt a::after { display: none; }
  .haupt a[aria-current="page"] { color: var(--gold); }
  .haupt .menue-platz { display: block; margin: 10px 0 0; font-size: .9rem; color: var(--leise); }
}

/* Am schmalen Handy stehen Marke, Knopf und Menü sonst zu dritt in einer Zeile, die nicht reicht:
   die Marke bricht dann auf zwei Zeilen und schiebt die Kopfzeile auseinander (375 px geprüft). */
@media (max-width: 460px) {
  .kopf { padding-inline: 14px; gap: 8px; }
  .kopf .marke { font-size: 1.12rem; white-space: nowrap; }
  .kopf-rechts { gap: 8px; }
  .kopf-knopf { padding: 0 12px; font-size: .84rem; min-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .haupt, .haupt a::after, .menue-knopf span, .menue-knopf span::before, .menue-knopf span::after { transition: none; }
}