/* ============================================================
   Mobile Optimierungen
   Ergaenzt das Original-Design, aendert es nicht.
   ============================================================ */

/* ---------- A) bis 991px: Menue-Button (Breakpoint des Originals) ---------- */
@media screen and (max-width: 991px) {

  /* Der Menue-Button wird ausdruecklich sichtbar gehalten. Im Original
     versteckt ihn u.a. die Regel ".elementNavigation #navigationMainToggler". */
  #blockHeader #blockHeaderMain #navigationMain #navigationMainToggler,
  #navigationMain #navigationMainToggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Groessere Klickflaeche (Original: 32x32px, Empfehlung: 44x44px).
     Das Symbol selbst bleibt unveraendert an seinem Platz. */
  #navigationMainToggler::after {
    content: '';
    position: absolute;
    top: -8px; right: -8px; bottom: -8px; left: -8px;
  }
}

/* ---------- B) bis 767px: Layout und Bedienung ---------- */
@media (max-width: 767px) {

  /* 1) Feste iframe-Breiten (Google Maps: width="600") erzeugten einen
        waagerechten Ueberlauf von rund 210px. Dadurch wurde der Kopfbereich
        breiter als der Bildschirm und der Menue-Button (right:16px) rutschte
        aus dem sichtbaren Bereich - er schien zu fehlen.
        Betraf Training, Kontakt und die Meldung "Sommerfest 2023". */
  #blockContent iframe[width] {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 240px;
  }

  /* 2) Das Kalender-Widget bringt eigenes CSS mit, das global body
        ueberschreibt (margin:20px, grauer Hintergrund). Das kostet auf
        dem Handy rund 40px Breite - hier zurueckgenommen. */
  body {
    margin: 0 !important;
    background: none !important;
    line-height: 150% !important;
  }

  /* 3) Breite Tabellen (Ergebnisse, Ranglisten) nicht quetschen,
        sondern waagerecht scrollbar machen. */
  .elementTable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .elementTable > table {
    width: auto;
    min-width: 100%;
    font-size: 0.9rem;
  }
  .elementTable table th,
  .elementTable table td {
    padding: 6px 8px;
  }

  /* 4) Buttons des Terminkalenders und der Cookie-Hinweis:
        mindestens 44px hoch (Empfehlung fuer Touch-Ziele). */
  #accept-privacy,
  #prev,
  #next,
  #cookieNoticeCloser {
    min-height: 44px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* 5) Lange Woerter und Links duerfen den Rand nicht sprengen. */
  #blockContent,
  .listEntryTitle,
  .listEntryDescription,
  .elementHeadline {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* 6) Bilder nie breiter als der Bildschirm. */
  #blockContent img {
    max-width: 100%;
    height: auto;
  }
}