/* Inkrement 7: Smartphone-Optimierung.
   Zentrale, templateuebergreifende Regeln - ergaenzen die bestehenden
   Inline-Styles je Template, ersetzen sie nicht. Wird in jedes <head> per
   <link rel="stylesheet" href="/static/mobile.css"> eingebunden, NACH dem
   Inline-<style>-Block, damit diese Regeln bei gleicher Spezifitaet gewinnen. */

/* iOS zoomt bei Fokus auf Formularfelder unter 16px automatisch hinein -
   deshalb unabhaengig von Viewport-Breite hart auf 16px gesetzt. */
input, textarea, select {
  font-size: 16px;
}

@media (max-width: 600px) {
  /* Fliesstext-Untergrenze. */
  body {
    font-size: 16px;
  }

  /* Tap-Ziele: mindestens 44px hohe Klickflaeche (Apple/Google-Empfehlung). */
  button,
  .btn-primaer, .btn-primaer-link, .btn-sekundaer,
  .weiterlernen, .test-starten, .nochmal-ansehen, .glossartest-btn,
  .faellig-btn-primaer, .faellig-btn-sekundaer, .neustart-btn,
  .stufe-neustart-btn, .loeschen-btn, .archiv-wiederherstellen,
  button.option, .karte-neu, .nav-link {
    min-height: 44px;
  }

  a.zurueck-link, a.zurueck, .test-ergebnis-link, .glossartest-ergebnis-link,
  .lektion-oeffnen, a.chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .menue-knopf {
    width: 44px !important;
    height: 44px !important;
  }

  /* Aufklapp-Trigger fuer Lektionszeilen (projekt.html): knapp unter 44px,
     etwas mehr vertikales Innenpolster reicht. */
  .lektion-zeile {
    min-height: 44px;
    padding: 6px 0;
  }
}
