/*
 * Gatelio-Startseite — mobile Fassung.
 *
 * Die Seite kam aus dem Entwurf ohne eine einzige @media-Regel: 19 feste
 * Spaltenraster, Innenabstände von 48 bis 72 px, Ueberschriften mit 44 px.
 * Bei 414 px Fensterbreite war das Dokument 561 px breit — man schob auf jedem
 * Handy seitlich hin und her.
 *
 * ⚡ Die Klassen `gl-m-*` stehen nicht im Entwurf. Sie werden beim Bauen
 * vergeben (tools/startseite_bauen.php, Abschnitt 3b), anhand der Maße im
 * style-Attribut. Wer hier eine Klasse ergänzt, muss sie dort eintragen.
 *
 * ⚡ Warum überall !important: der Entwurf setzt alle Maße als style="..."
 * direkt am Element. Inline-Angaben schlagen jede Regel aus einer Datei —
 * außer sie ist als !important markiert.
 *
 * ⚡ Diese Datei wird nach assets/startseite/mobil.css kopiert.
 *    Dort NICHT bearbeiten.
 */

@media (max-width: 900px) {

  /* Mehrspaltige Raster untereinander */
  .gl-m-1sp { grid-template-columns: 1fr !important; }

  /* Nummer + Text der Funktionsliste bleibt zweispaltig, nur schmaler */
  .gl-m-nummer { grid-template-columns: 26px 1fr !important; }

  /* Volle Bildschirmhöhe erzwingen ist auf dem Handy sinnlos */
  .gl-m-hoehe { min-height: 0 !important; }

  /* Innenabstände */
  .gl-m-pad    { padding: 28px 20px !important; }
  .gl-m-padkopf{ padding: 0 20px 14px !important; }

  /* Schriftgrößen */
  .gl-m-f44 { font-size: 30px !important; line-height: 34px !important; }
  .gl-m-f40 { font-size: 27px !important; line-height: 31px !important; }
  .gl-m-f34 { font-size: 24px !important; line-height: 29px !important; }
  .gl-m-f32 { font-size: 22px !important; line-height: 27px !important; }

  /* Äußere Begrenzung */
  .gl-m-breit { max-width: 100% !important; }

  /* Die nachgebaute Verladebüro-Tabelle: vier Spalten müssen vier bleiben,
     sonst rutschen Zeit und Status auseinander. Nur schmaler und kleiner. */
  .gl-m-tabelle {
    grid-template-columns: 40px 1fr 16px 80px !important;
    gap: 0 7px !important;
    font-size: 11px !important;
    letter-spacing: .02em !important;
  }
  /* Das längste Status-Wort ist „Angemeldet". Passt es nicht, wird es
     abgeschnitten statt umgebrochen — dann sieht man „Angemelde". */
  .gl-m-tabelle > * { min-width: 0 !important; }
  .gl-m-tabelle span { padding-left: 5px !important; padding-right: 5px !important; }

  /* Das Art-Kürzel (LKW/GAST/TERMIN) fluchtet am Rechner über eine feste
     Breite von 52 px. Auf 360 px Bildschirm ist die mittlere Spalte selbst nur
     rund 200 px breit — dort wäre ein Viertel davon leerer Vorlauf. Also
     automatische Breite und kleiner; die Namen stehen dann leicht versetzt,
     was in einer schmalen Liste ohnehin niemandem auffällt. */
  .gl-art {
    width: auto !important;
    font-size: 8px !important;
    letter-spacing: .05em !important;
    padding-left: 0 !important;
    padding-right: 4px !important;
  }

  /* Die isometrische Werksansicht ist quadratisch gezeichnet. Ohne feste
     Höhe bekäme sie auf dem Handy keine oder eine unsinnige zugewiesen. */
  gatelio-scene {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
  gatelio-scene svg { height: 100% !important; }

  /* Kopfzeile: Marke in die erste Zeile, Bedienelemente geschlossen in die
     zweite. Ohne das bricht die innere Gruppe auf und jeder Knopf bekommt
     eine eigene Zeile — drei Zeilen für drei Knöpfe. */
  .gl-m-padkopf { flex-wrap: wrap !important; gap: 14px !important; }
  .gl-m-padkopf > div { flex-wrap: nowrap !important; }

  /* Nichts darf breiter sein als der Bildschirm */
  html, body { overflow-x: hidden !important; }
  img, svg, pre, table { max-width: 100% !important; }
  pre, code { white-space: pre-wrap !important; word-break: break-word !important; }
}

/* Sehr schmale Geräte (iPhone SE und ähnliche) */
@media (max-width: 380px) {
  .gl-m-f44 { font-size: 26px !important; line-height: 30px !important; }
  .gl-m-f40 { font-size: 24px !important; line-height: 28px !important; }
  .gl-m-f34 { font-size: 21px !important; line-height: 26px !important; }
  .gl-m-pad { padding: 22px 14px !important; }
  .gl-m-padkopf { padding: 0 14px 12px !important; }
  .gl-m-tabelle {
    grid-template-columns: 34px 1fr 14px 72px !important;
    gap: 0 5px !important;
    font-size: 10px !important;
  }
  .gl-m-tabelle span { padding-left: 3px !important; padding-right: 3px !important; }
}