/* ── Das Menü auf dem Telefon ───────────────────────────────────────────────
   Gilt für Startseite, Galerie, Ausfahrten und FAQ (index.html ist die Vorlage,
   tools/sync-nav.mjs hält die Punkte gleich). Wer die Regeln ändert, ändert sie
   nur hier: die Seiten tragen keine eigene Fassung mehr.

   Was vorher falsch war
   – Das Blatt lag über der Leiste und deckte den Knopf zu: einmal geöffnet, gab
     es kein sichtbares Kreuz mehr.
   – Zehn Zeilen in 2.2rem mit 1.5rem Abstand sind höher als ein kleines Telefon
     (320 × 568) oder ein Telefon quer: «Members» am Ende lag ausserhalb des
     Bildschirms, ohne dass sich etwas scrollen liess.

   Jetzt: die Leiste mit Logo und Kreuz bleibt über dem Blatt, die Haupteinträge
   sind kleiner, Reglement, FAQ und Kontakt stehen in einer Zeile, «Mitglied
   werden» und «Members» sind zwei gleich grosse Knöpfe, und was trotzdem nicht
   passt, scrollt. ── */
@media (max-width: 1299px) {
  /* Der Knopf löst die Menüzeile früher ab als bis 900px: zehn Einträge samt
     «Beitreten» und «Members» brauchen auf Deutsch und Französisch etwa 1300px.
     Darunter brach «Über uns» um, und die beiden Knöpfe rechts lagen ausserhalb
     des Bildschirms (Tablet quer, Telefon quer, schmales Fenster). */
  .nav-links { display: none; }
  .burger { display: block; }

  /* Die Leiste über das Blatt, mit eigenem Grund, in der Farbe des Hauses. */
  body:has(.mobile-menu.open) nav {
    z-index: 103;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  body:has(.mobile-menu.open) nav .logo,
  body:has(.mobile-menu.open) nav .logo em { color: var(--burgundy); text-shadow: none; }
  body:has(.mobile-menu.open) nav .logo svg circle,
  body:has(.mobile-menu.open) nav .logo svg line { stroke: var(--burgundy); }
  body:has(.mobile-menu.open) nav .logo svg .hub { fill: var(--burgundy); }

  .mobile-menu {
    top: 0;
    z-index: 102;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    /* 40px Sprachleiste + die Leiste mit Logo und Kreuz (bis 81px hoch) + Luft */
    padding: calc(40px + 5.5rem) 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: opacity 0.3s ease;
  }

  /* Sechs Spalten: ein Haupteintrag nimmt alle sechs, Reglement, FAQ und Kontakt
     je zwei (also immer eine Zeile), die beiden Knöpfe je drei. */
  .mobile-menu ul {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-content: start;
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    padding: 0;
    text-align: left;
  }

  .mobile-menu ul li {
    grid-column: 1 / -1;
    margin: 0;
    border-bottom: 1px solid var(--line);
    transform: none;
    transition: opacity 0.35s ease;
  }

  .mobile-menu ul li a {
    display: block;
    padding: 0.7rem 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  /* Reglement | FAQ | Kontakt: leiser, links in einer Zeile, getrennt durch
     einen feinen senkrechten Strich. Ein Listenpunkt, drei Verweise. */
  .mobile-menu ul li.mm-sek {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.95rem 0;
    border-bottom: 0;
  }
  .mobile-menu ul li.mm-sek a {
    padding: 0.2rem 0.9rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .mobile-menu ul li.mm-sek a:first-child { padding-left: 0; }
  .mobile-menu ul li.mm-sek a + a { border-left: 1px solid var(--ink-soft, #8a7f78); }

  /* Mitglied werden und Members: zwei gleich grosse Knöpfe. */
  .mobile-menu ul li.mm-cta {
    grid-column: span 3;
    margin-top: 0.8rem;
    border-bottom: 0;
  }
  .mobile-menu ul li.mm-sek + li.mm-cta { padding-right: 0.3rem; }
  .mobile-menu ul li.mm-cta + li.mm-cta { padding-left: 0.3rem; }
  .mobile-menu ul li.mm-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0 0.5rem;
    border: 1.5px solid var(--burgundy);
    border-radius: 50px;
    background: transparent;
    color: var(--burgundy) !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    font-style: normal !important;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .mobile-menu ul li.mm-cta a.mobile-members-btn {
    margin: 0;
    background: var(--burgundy);
    color: #fff !important;
  }
  .mobile-menu ul li.mm-cta a:active,
  .mobile-menu ul li.mm-cta a:hover { background: var(--ink); border-color: var(--ink); color: #fff !important; }
}

/* Kleines Telefon (320 × 568) und Telefon quer: die Zeilen werden enger. */
@media (max-width: 1299px) and (max-height: 640px) {
  .mobile-menu ul li a { padding: 0.5rem 0; font-size: 1.35rem; }
  .mobile-menu ul li.mm-sek { padding: 0.7rem 0; }
  .mobile-menu ul li.mm-cta { margin-top: 0.4rem; }
  .mobile-menu ul li.mm-cta a { min-height: 2.8rem; }
}

/* Die Leiste der Unterseiten (Galerie, Ausfahrten, FAQ) ist auf dem Telefon
   zwei Dinge falsch: «body.subpage nav» setzt 3rem Rand an den Seiten und
   überstimmt damit die 1.5rem der Telefonregel, sodass Logo und Knopf eingerückt
   stehen; und «← Startseite» beginnt bei 6.5rem, also unter der Leiste, die bis
   etwa 113px reicht, und ist halb verdeckt. */
@media (max-width: 900px) {
  body.subpage nav,
  body.subpage nav.scrolled { padding: 1rem 1.5rem; }
  .subpage-top { padding: 8rem 1.5rem 0; }
}
@media (max-width: 400px) {
  body.subpage nav,
  body.subpage nav.scrolled { padding: 1rem 1.25rem; }
  .subpage-top { padding-left: 1.25rem; padding-right: 1.25rem; }
}