/* Media Queries für mobile Geräte (Smartphones & kleine Tablets) */
@media screen and (max-width: 700px) {

  /* --- 2-Spalten-Layout (Side-by-Side) auch für Mobile --- */
  .grid-box {
    grid-template-columns: 36% 62%; /* Links 35% für Menü, Rechts 65% für Apps */
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "header header"
      "info info"
      "side content"; /* WICHTIG: Links 'side' (box-2), Rechts 'content' (box-3) */
    gap: 10px;
    padding: 0px;
  }

  /* Padding in Boxen reduzieren für mehr Platz auf dem Handy */
  .box-2, .box-3 {
    padding: 5px;
  }

  h1 { font-size: 1.4em; }
  h4 { font-size: 1.1em; margin-bottom: 6px; padding-bottom: 2px;}

  /* --- LINKE SPALTE (box-2: Navigation & Prüfungen) anpassen --- */
  .box-2 .DivSideBarButton, .box-2 .SideBarButton, .box-2 .ButtonAddEinsatz {
    padding: 5px 3px; /* Flacher und weniger Innenabstand */
    font-size: 0.8em; /* Kleinerer Text, damit er in die linke Spalte passt */
    margin-bottom: 6px;
    word-wrap: break-word;
  }

  /* --- RECHTE SPALTE (box-3: Apps & Fahrtenbücher) anpassen --- */
  .box-3 .divApps {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 App-Kacheln nebeneinander in der rechten Spalte */
    gap: 10px;
    justify-content: center;
    margin-top: 5px;
  }

  .box-3 .QuadButton {
    width: 100%; /* Nutzt die volle Grid-Spaltenbreite */
    height: auto;
    min-height: 90px; /* Kompaktere Kacheln für Mobile */
    border-radius: 12px;
    padding: 4px;
  }

  .box-3 .ImageButton {
    width: 45px; /* Bilder etwas verkleinern */
    height: 45px;
    margin-bottom: 4px;
  }

  .box-3 .QuadButton span, .box-3 .QuadButton p, .box-3 .Apps {
    font-size: 0.85em;
    margin-top: 5px;
    white-space: normal; /* Erlaubt bei sehr schmalen Kacheln einen Zeilenumbruch */
    line-height: 1.2;
  }

  /* --- Fahrtenbuch Buttons in der rechten Spalte --- */
  .DivFahrtenbuchButton {
    flex-direction: column; /* Text untereinander, da der Platz seitlich begrenzt ist */
    align-items: flex-start;
    padding: 10px;
  }

  .divFahrtInfo, .divFahrtKFZ, .divFahrtInfoLong {
    width: 100%;
    text-align: left;
    margin-bottom: 4px;
  }

  .pFahrtFRN { font-size: 1em; }
  .pFahrt { font-size: 0.85em; color: var(--color-text-muted); }
  .pFahrtLong { font-size: 0.8em; margin-top: 2px; text-align: left;}

  /* --- Formulare anpassen --- */
  input[type="text"], input[type="password"], input[type="email"], select, textarea {
    font-size: 16px; /* Wichtig für iOS, damit Safari nicht heranzoomt! */
    padding: 10px;
  }

  /* --- Scroll-Bereiche optimieren --- */
  .DivScroll, .DivScrollFahrtenbuch, .DivScrollUebungen, .DivScrollEinsaetze, .DivUserList {
    height: 50vh;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px;
    background-color: var(--color-bg-card);
  }

  /* Tabellen seitlich scrollbar machen */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .DivInfo { font-size: 1.2em; top: 10px; right: 10px; }
  .pSmall { font-size: 1em; }
  .pLarge { font-size: 1.3em; }

  .HausButton{width: 90px;}
}



/* Anpassungen fürs Querformat auf dem Handy */
@media only screen and (max-height: 500px) and (orientation: landscape) {
  .grid-box {
    grid-template-columns: 180px 1fr; /* Links etwas mehr Platz, da das Handy breit ist */
  }

  /* Info-Box im Querformat ausblenden, um vertikalen Platz zu sparen */
  .box-4 { display: none; }

  .box-3 .divApps {
    grid-template-columns: repeat(3, 1fr); /* 3 Apps nebeneinander, weil wir in der Breite Platz haben */
  }
}