/* Hamburger-Menü unter 1024 px, gemeinsam für alle Seiten von wanderwegewarte.de (Duke MO19OKT26).
   Der Button wird von menue.js erzeugt, das auch die Klasse mit-menue an die Navigation setzt.
   Nur mit dieser Klasse werden die Menüpunkte ausgeblendet; ohne Skript bleibt die Kopfleiste wie vorher.
   :is(#kopf, body) hebt die Regeln über die Regeln der Startseite, die mit #kopf beginnen.
   Auf den Unterseiten gibt es kein #kopf, dort greift body. */
.menue{ display:none; }
/* Aktueller Menüpunkt in Limette, Fokus der Textlinks wie beim Hamburger-Menü-Button */
:is(#kopf, body) .nav .navliste a[aria-current]:not(.button){ color:var(--accent); }
:is(#kopf, body) .nav .marke:focus-visible,
:is(#kopf, body) .nav .navliste a:not(.button):focus-visible{ outline:3px solid var(--accent); outline-offset:4px; border-radius:4px; }
@media (max-width:1023px){
  :is(#kopf, body) .nav.mit-menue .navliste{ display:none; }
  .menue{ display:flex; align-items:center; justify-content:center; flex:0 0 auto;
    width:48px; height:48px; margin:0 -12px 0 0; padding:0; border:0; border-radius:8px;
    background:none; color:var(--seite); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .menue:focus-visible{ outline:3px solid var(--accent); outline-offset:0; }
  /* Drei Striche, beim Öffnen werden daraus zwei gekreuzte */
  .menue .striche, .menue .striche::before, .menue .striche::after{ display:block; width:24px; height:2px;
    border-radius:1px; background:currentColor; }
  .menue .striche{ position:relative; transition:background-color 0s linear 140ms; }
  .menue .striche::before, .menue .striche::after{ content:""; position:absolute; left:0;
    transition:top 140ms ease 140ms, transform 140ms ease; }
  .menue .striche::before{ top:-7px; }
  .menue .striche::after{ top:7px; }
  .nav.offen .menue .striche{ background-color:transparent; transition-delay:0s; }
  .nav.offen .menue .striche::before, .nav.offen .menue .striche::after{ top:0; transition:top 140ms ease, transform 140ms ease 140ms; }
  .nav.offen .menue .striche::before{ transform:rotate(45deg); }
  .nav.offen .menue .striche::after{ transform:rotate(-45deg); }

  /* Geöffnet: Leiste deckend, die Menüpunkte hängen in voller Breite darunter */
  :is(#kopf, body) .nav.offen{ background:rgb(29,122,62); }
  :is(#kopf, body) .nav.offen .navliste{ display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; margin:0; padding:8px var(--rand) 32px var(--rand);
    max-height:calc(100vh - 100%); max-height:calc(100dvh - 100%); overflow-y:auto;
    background:rgb(29,122,62); box-shadow:inset 0 1px 0 rgba(238,243,236,0.16), 0 16px 40px rgba(10,26,18,0.35); }
  :is(#kopf, body) .nav.offen .navliste li{ display:block; height:auto; border-top:1px solid rgba(238,243,236,0.16); }
  :is(#kopf, body) .nav.offen .navliste li:first-child{ border-top:0; }
  :is(#kopf, body) .nav.offen .navliste a{ padding:14px 0; font-size:18px; line-height:28px; }
  :is(#kopf, body) .nav.offen .navliste a:not(.button):focus-visible{ outline-offset:0; }
  :is(#kopf, body) .nav.offen .navliste li.navblock{ margin:16px 0 0 0; border-top:0; }
  :is(#kopf, body) .nav.offen .navliste a.button{ display:inline-flex; padding:12px 24px; font-size:18px; line-height:28px; }
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){
  .menue .striche, .menue .striche::before, .menue .striche::after{ transition:none; }
}