/* ------------------------------------------------------------------
   Handy- und Tablet-Darstellung

   Eigene Datei, wird NACH style.css und dunkelmodus.css geladen.
   An den bestehenden Dateien wird nichts geändert.

   Behoben werden drei Dinge, die auf schmalen Bildschirmen auffielen:
     1. "Abmelden" in der Kopfzeile war abgeschnitten
     2. Dateinamen liefen in den Herunterladen-Knopf hinein
     3. Besuchte Verweise wurden violett statt blau
   ------------------------------------------------------------------ */

/* Besuchte Verweise behalten die Farbe der Anwendung.
   Gilt auf allen Bildschirmgroessen, nicht nur auf dem Handy. */
a:visited{ color:inherit; }
.hint a:visited,
.crumb a:visited,
.verwaltung-zeile a:visited,
.anleitung-karte:visited{ color:var(--link, #0E6BA8); }
.mainnav a:visited{ color:#CFE0EC; }
.fname:visited{ color:inherit; }

/* Lange Datei- und Ordnernamen duerfen umbrechen statt ueberzulaufen. */
.fname, .crumb, .anleitung-karte h2{ overflow-wrap:anywhere; }

@media (max-width:820px){

  /* --- Kopfzeile --------------------------------------------------
     Feste Hoehe raus, damit die Leiste in zwei Zeilen umbrechen darf.
     Sonst rutscht der letzte Eintrag aus dem sichtbaren Bereich. */
  .topbar{
    height:auto; padding:10px 14px; row-gap:8px;
    align-items:flex-start;
  }
  .mainnav{ flex-wrap:wrap; gap:14px 16px; }
  .mainnav a{ font-size:14px; padding:2px 0; }
  .thema-schalter{ padding:3px 8px; }

  /* --- Seiteninhalt ---------------------------------------------- */
  .page{ padding:16px 12px; }

  /* --- Dateiliste -------------------------------------------------
     Name und Knopf untereinander statt nebeneinander. Der Knopf wird
     linksbuendig gesetzt und bekommt eine fingertaugliche Hoehe. */
  .tree-item{
    flex-direction:column; align-items:flex-start; gap:8px;
    padding:12px 14px;
  }
  .tree-item .fname{ width:100%; }
  .btn-load{
    font-size:13px; padding:8px 14px; align-self:flex-start;
  }

  /* --- Tabellen ---------------------------------------------------
     Breite Tabellen duerfen seitlich scrollen, statt die Seite
     auseinanderzuziehen. */
  table{ display:block; overflow-x:auto; white-space:normal; }

  /* --- Formulare --------------------------------------------------
     Schriftgroesse 16px verhindert, dass Handys beim Antippen eines
     Eingabefeldes automatisch hineinzoomen. */
  input, select, textarea, button{ font-size:16px; }
  .login-box{ margin:16px 12px; padding:18px 16px; }
}

@media (max-width:420px){
  .brand-text{ font-size:14px; }
  .brand-sub{ display:none; }
  .mainnav{ gap:12px 14px; }
}