/* Mobiles Menü: Hamburger im Kopf, Vollbild-Liste mit Haupt- und Unterpunkten. Nur unter 1024px sichtbar. */

.kopf__burger, .mobil { display: none; }

@media (max-width: 1023px) {
  .kopf__burger {
    position: relative; display: inline-block; flex: none;
    width: 2.5rem; height: 2.5rem; border: 1px solid var(--tinte); border-radius: 50%;
    transition: background 0.2s;
  }
  .kopf__burger i {
    position: absolute; left: 50%; top: 50%; width: 1rem; height: 1.5px; margin-left: -0.5rem;
    background: var(--tinte); transition: transform 0.25s ease;
  }
  .kopf__burger i:first-child { transform: translateY(-3.5px); }
  .kopf__burger i:last-child { transform: translateY(3.5px); }
  body.menue-offen .kopf__burger { background: var(--gelb); }
  body.menue-offen .kopf__burger i:first-child { transform: rotate(45deg); }
  body.menue-offen .kopf__burger i:last-child { transform: rotate(-45deg); }

  .mobil {
    position: fixed; top: var(--kopf-hoehe); left: 0; right: 0; bottom: 0; z-index: 31;
    display: block; overflow-y: auto; overscroll-behavior: contain;
    padding: 0.5rem var(--rand) 3rem; background: var(--papier); border-top: 1px solid var(--linie-hell);
    transition: opacity 0.2s, visibility 0s;
  }
  body:not(.menue-offen) .mobil { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
  body.menue-offen { overflow: hidden; }
  body.menue-offen .kopf { transform: none; }
  body.menue-offen .unter { opacity: 0; visibility: hidden; }

  .mobil__punkt { border-bottom: 1px solid var(--linie-hell); }
  .mobil__zeile { display: flex; align-items: center; gap: 1rem; }
  .mobil__zeile > a { flex: 1; padding: 1rem 0; font-size: 1.45rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
  .mobil__zeile sup { display: inline-block; min-width: 1.6rem; margin-right: 0.5rem; font-size: 0.7rem; font-weight: 500; opacity: 0.55; }
  .mobil__punkt.aktiv > .mobil__zeile > a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
  .mobil__auf {
    position: relative; flex: none; width: 2.2rem; height: 2.2rem;
    border: 1px solid var(--linie); border-radius: 50%;
  }
  .mobil__auf::before, .mobil__auf::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 0.75rem; height: 1.5px;
    margin: -0.75px 0 0 -0.375rem; background: var(--tinte); transition: transform 0.25s ease;
  }
  .mobil__auf::after { transform: rotate(90deg); }
  .mobil__auf[aria-expanded="true"]::after { transform: rotate(0deg); }
  .mobil__unter { display: none; padding: 0 0 1.1rem 2.1rem; }
  .mobil__punkt.offen .mobil__unter { display: block; }
  .mobil__unter a { display: block; padding: 0.45rem 0; font-size: 1rem; font-weight: 500; line-height: 1.3; }
  .mobil__unter a sup { margin-right: 0.5rem; font-size: 0.65rem; opacity: 0.55; }
  .mobil__unter a[aria-current="true"] span { background: var(--gelb); box-shadow: 0 0 0 0.25rem var(--gelb); }
}