/* Einheitliche Mobil-Regeln für alle Seiten (bis 767px). Wird als letztes Stylesheet im <head> geladen.
   Hintergrund: Jede Seite hat eigene Inline-Styles; am Handy liefen Überschriften (21 bis 36px),
   Abschnittsabstände (56 bis 96px) und Seitenränder (20 bzw. 24px) auseinander.
   Doku: docs/reference/design-system.md, Abschnitt „Mobil“. !important nur, weil Tailwind (Play-Script)
   seine Klassen zur Laufzeit nach diesem Stylesheet einfügt bzw. Abschnitte Inline-Paddings tragen. */
@media (max-width: 767px) {
  /* Abschnitts-Überschriften: eine Größe */
  main h2, body > section h2, body > div > section h2 { font-size: 1.625rem !important; line-height: 1.18 !important; letter-spacing: -0.02em; }
  /* Hinweisbox bleibt eine Stufe kleiner */
  .ub-note h2 { font-size: 1.3rem !important; }

  /* Abschnitts-Abstände: oben und unten 56px */
  #feiern, #firmenevents, .wf-section, #veranstaltungen, #anfahrt, #bewertungen,
  .ub-sec, .kr-sec, #faq, #kommende, #vergangene, .hf-section {
    padding-top: 56px !important; padding-bottom: 56px !important;
  }

  /* Seitenrand: 20px wie Hero und Leistungsseiten */
  .max-w-7xl.px-6, .wf-inner, .hf-wrap { padding-left: 20px !important; padding-right: 20px !important; }

  /* Footer: größere Tippflächen (vorher 16px hoch), Abstand optisch gleich */
  footer ul { gap: 0 !important; }
  footer ul a { display: inline-block; padding: 6px 0; }
  footer a[href^="mailto:"], footer [data-cookie-settings], footer a[href="impressum.html"], footer a[href="datenschutz.html"] { display: inline-block; padding-top: 6px; padding-bottom: 6px; }
}

/* Einklappen am Handy (Skript /assets/js/mobile.js) */
.m-hidden { display: none !important; }
.m-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 11px 20px;
  font: 500 13px/1.2 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.02em; color: #1A1C18;
  background: transparent; border: 1px solid #1A1C18; border-radius: var(--bi-r, 2px); cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.m-more[hidden] { display: none; }
.m-more svg { transition: transform 0.2s ease; }
.m-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-more:hover { background: #2D4628; border-color: #2D4628; color: #FDF2F2; }
.m-more:active { transform: scale(0.98); }
.m-more:focus-visible { outline: 2px solid rgba(45,70,40,0.45); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .m-more, .m-more svg { transition: none; } }