/* Bedienbarkeit auf Telefonen.
 *
 * Diese Datei enthaelt ausschliesslich Regeln innerhalb von
 * @media (max-width: 768px). Am Desktop aendert sie damit nichts -- keine
 * einzige Regel greift dort. Eingebunden wird sie in base.html als letztes
 * Stylesheet, damit sie ohne !important gegen die Seiten-Stylesheets
 * gewinnt.
 *
 * Gemessen wurde mit einem Audit bei 390px Breite (iPhone 12/13/14) ueber
 * alle 30 direkt erreichbaren Seiten. Kein horizontaler Ueberlauf, aber
 * durchgehend zu kleine Tippziele: die Fusszeilen-Knoepfe waren 23px hoch,
 * die Leiste oben 36-38px, Kontrollkaestchen 13px. Richtwert sind 44px
 * (WCAG 2.5.5 "Target Size", zugleich Apples Human Interface Guidelines).
 */

@media (max-width: 768px) {

  /* ── Leiste oben ───────────────────────────────────────────────── */
  /* Waren 36-38px hoch. Die Leiste waechst dadurch etwas, was auf dem
     Telefon vertretbar ist -- danebengreifen ist teurer als 8px Hoehe. */
  .top-bar-link,
  .top-bar-brand,
  .verwalten-trigger {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ── Fusszeile ─────────────────────────────────────────────────── */
  /* Der schlimmste Fund: 56x23px. Die bestehende Mobil-Regel verkleinert
     die Knoepfe zusaetzlich (padding: 4px 3px), damit sie in eine Zeile
     passen. Statt sie noch enger zu setzen, duerfen sie hier umbrechen. */
  .site-footer-link {
    min-height: 44px;
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
    white-space: normal;
  }

  .site-footer-inner {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2px;
    column-gap: 4px;
  }

  /* Die Trennpunkte fallen weg, sobald umbrochen wird: sonst steht in der
     zweiten Zeile ein fuehrendes "·" vor dem ersten Eintrag. Der Abstand
     uebernimmt ihre Aufgabe. Sie tragen aria-hidden, es geht also nichts
     Vorgelesenes verloren. */
  .site-footer-sep {
    display: none;
  }

  /* ── Schwebender Knopf fuer Rueckmeldungen ─────────────────────── */
  .feedback-fab {
    min-width: 48px;
    min-height: 48px;
  }

  /* ── Formularfelder ────────────────────────────────────────────── */
  /* 16px ist kein Schoenheitswert: faellt die Schriftgroesse eines Feldes
     darunter, zoomt iOS Safari beim Antippen automatisch in die Seite
     hinein und der Rest der Ansicht rutscht aus dem Bild.
     Nachgemessen: die vorhandenen Stylesheets halten das bereits ein und
     gewinnen hier auch die Spezifitaet. Die Regel ist damit ein Boden fuer
     Felder, die eine Seite nicht selbst formatiert -- nicht das, was den
     heutigen Zustand herstellt. Abgesichert ist der Zustand ohnehin nicht
     hier, sondern in e2e/test_mobile.py. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }

  /* ── Kontrollkaestchen und Auswahlknoepfe ──────────────────────── */
  /* Waren 13x13px -- mit dem Finger kaum zu treffen. */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
  }

  /* ── Schieberegler ─────────────────────────────────────────────── */
  /* Die Preisregler waren 18px hoch. Die Bahn bleibt schmal, nur der
     greifbare Bereich waechst. */
  input[type="range"] {
    min-height: 44px;
  }

  /* ── Schaltflaechen ────────────────────────────────────────────── */
  button,
  .btn,
  a.book-btn,
  a.btn {
    min-height: 44px;
  }

  /* Knoepfe, die nur ein Sinnbild tragen (Stift, Muelleimer), sind sonst
     schmaler als der Finger breit ist -- der Stift neben dem Gruppennamen
     mass 22px. Die Hoehe allein genuegt hier nicht. */
  button.btn-edit-class,
  button[class*="icon-btn"],
  .action-btns button,
  .action-btns a {
    min-width: 44px;
  }

  /* Verweise, die wie Schaltflaechen aussehen, zaehlen als solche --
     .btn allein trifft sie nicht, die Klassen heissen etwa
     "btn-edit-profile". */
  a[class*="btn-"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Nur-Text-Verweise mitten im Fliesstext bekommen Luft statt Hoehe --
     eine Mindesthoehe wuerde dort den Zeilenfall zerreissen. */
  a.custom-plan-link,
  a#open-feedback-modal,
  a.pw-forgot-link {
    display: inline-block;
    padding: 8px 2px;
  }

  /* ── Hinweistexte ──────────────────────────────────────────────── */
  /* Die Sortier- und Aufklapp-Pfeile bleiben bewusst klein: sie tragen
     aria-hidden="true", sind also reine Verzierung neben einer bereits
     beschrifteten Schaltflaeche. Groesser gesetzt wuerden sie nur die
     Zeile sprengen, ohne dass jemand mehr lesen kann. */
  .price-hint {
    font-size: 12px;
  }

  /* ── Gruppen-Tabelle (Schueler:innen) ──────────────────────────── */
  /* Die Tabelle steht auf table-layout: fixed mit width: 100%. Bei 390px
     bleiben fuer die fuenf Datenspalten je rund 20px -- der Text bricht
     dann nach jedem Buchstaben um ("F/i/s/c/h/e/r" untereinander), und
     weil Kopf- und Datentabelle getrennte Kaesten sind, standen die
     Spalten zusaetzlich versetzt. Der Kopf war ausserdem abgeschnitten,
     weil sein Kasten overflow: hidden traegt.
     Statt Spalten zu verstecken -- die Ansicht soll dieselbe sein wie am
     Rechner -- bekommt die Tabelle ihre natuerliche Breite zurueck und der
     gemeinsame Kasten laesst sich waagerecht schieben. */
  .student-table-mobile-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .student-table-mobile-scroll .student-table {
    min-width: 700px;
  }

  /* Der Kopf darf nicht mehr beschneiden, sonst fehlt die letzte Spalte. */
  .student-table-headhost {
    overflow: visible;
  }

  /* Zellen brechen nur noch an Leerzeichen, nicht mitten im Wort. */
  .student-table th,
  .student-table td {
    white-space: nowrap;
  }

  /* Die E-Mail-Spalte darf umbrechen -- Adressen sind sonst endlos breit,
     und ohne Leerzeichen greift nowrap dort ohnehin nicht sinnvoll. */
  .student-table td.email-cell,
  .student-table th.col-email-th {
    white-space: normal;
    word-break: break-word;
  }

  /* ── Platzhalter in Eingabefeldern ─────────────────────────────── */
  /* "E-Mail-Adresse (optional)" wurde am rechten Rand abgeschnitten. Der
     Platzhalter darf kleiner sein als der eingegebene Text: das
     Hineinzoomen von iOS haengt an der Schriftgroesse des Feldes, nicht an
     der des Platzhalters. */
  input::placeholder,
  textarea::placeholder {
    font-size: 14px;
  }
}