/* ==================================================================
   MOBILE-ABSTÄNDE — vereinheitlichter Vertikal-Rhythmus für Handys.
   ------------------------------------------------------------------
   Auf Desktop trennen 6–7rem die Sektionen (plus 3.5rem unter jedem
   Sektions-Header) — auf einem Handybildschirm sind das über zwei
   Daumenlängen Leerfläche. Diese Datei lädt als LETZTE und zieht den
   Rhythmus mobil einheitlich zusammen:

     ≤800px:  4rem zwischen Sektionen, 2.2rem unter Headern
     ≤520px:  3.2rem zwischen Sektionen, 1.8rem unter Headern

   Außerdem: hero min-height entfällt mobil (das 75vh-Minimum erzeugte
   je nach Gerätehöhe eine große Leerfläche unter dem Hero-Inhalt),
   und die Finder-Wall (die als einzige mit Padding statt Margin
   arbeitet, weil sie einen eigenen Hintergrund hat) wird auf denselben
   optischen Abstand gebracht.
   ================================================================== */
@media (max-width: 800px) {
  .hero {
    min-height: auto;
    padding: 3rem 1.2rem 1.2rem;
  }
  .hero-meta-top { margin-bottom: 1.8rem; }

  .current-clue-section,
  .dossier-section,
  .process-section,
  .tickets-section,
  .komplizen-section,
  .rules-section {
    margin-top: 4rem;
  }
  .finder-wall-section {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
  }
  .rm-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .section-header { margin-bottom: 2.2rem; }
}

@media (max-width: 520px) {
  .current-clue-section,
  .dossier-section,
  .process-section,
  .tickets-section,
  .komplizen-section,
  .rules-section {
    margin-top: 3.2rem;
  }
  .finder-wall-section {
    padding-top: 2.4rem;
    padding-bottom: 2.8rem;
  }
  .section-header { margin-bottom: 1.8rem; }
}