/* Fingerfreundlich - nur dort, wo mit dem Finger getippt wird.
 *
 * Auf iPad und Handy braucht eine Tippfläche mindestens 44 Pixel Kantenlänge,
 * sonst trifft ein Kind daneben. Am Laptop mit Maus ist das unnötig, deshalb
 * greift alles hier ausschliesslich bei (pointer: coarse) - also bei Touch.
 *
 * Absichtlich zurückhaltend: nur Mindestmasse und etwas Abstand. Das Aussehen
 * der Spiele bleibt, wie Paul es gebaut hat. */

/* Zwei Bedingungen mit ODER: echtes Touch-Gerät ODER schmaler Bildschirm.
 * Das zweite ist Absicht - manche Tablets melden ihren Zeigertyp nicht
 * verlässlich, und auf einem schmalen Fenster schaden grössere Knöpfe nie. */
@media (pointer: coarse), (max-width: 1024px) {

  button,
  a[class*="btn"], a[class*="knopf"], a.zurueck, a.home, a.back,
  [role="button"],
  .opt, .ans, .choice, .knopf, .thema, .key, .iconbtn, .pill-btn {
    min-height: 44px;
    /* Waagrecht nur dort erzwingen, wo es nicht die Anordnung sprengt. */
  }

  /* Zurück-Links tragen oft gar keine Klasse - sie sind aber daran zu
     erkennen, wohin sie zeigen. */
  a[href$="index.html"], a[href="/"], a[href="../"], a[href="./"],
  a[href^="/paul/"], a[href^="/leon/"], a[href^="/helena/"],
  a.chip, a.home, a.zurueck {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Zahlenwahl im Beethoven-Quiz und ähnliche schmale Knöpfchen. */
  .goal-opt, .num, .zahl-opt, .pick, a.chip, .chip {
    min-width: 44px;
    justify-content: center;
  }

  /* Kleine, runde Knöpfe (Ton, Zurück, Zahlen) brauchen auch Breite. */
  button.iconbtn, .iconbtn, .rundknopf, .num, .zahlknopf,
  button[class*="icon"], button[class*="sound"], button[class*="ton"] {
    min-width: 44px;
  }

  /* Eingabefelder: gross genug zum Treffen, und 16px Schrift verhindert,
     dass iOS beim Antippen hineinzoomt. */
  input[type="text"], input[type="number"], input:not([type]), textarea, select {
    min-height: 44px;
    font-size: max(16px, 1em);
  }

  /* Nebeneinanderliegende Knöpfe nicht kleben lassen - sonst trifft man
     bei schnellem Tippen den falschen. */
  .opt + .opt, .ans + .ans, .knopf + .knopf { margin-top: 2px; }

  /* Aufklappzeilen sind Knöpfe, auch wenn sie nicht so aussehen. In Helenas
     Trainer war "Neue Einheit aus Foto" 15 Pixel hoch - genau der Weg, den
     sie mit dem Buch in der Hand treffen soll. */
  summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  summary::-webkit-details-marker { display: none; }
}