/* ==========================================================================
   Touch-Breite (< 768 px): Trefferflächen ≥ 44 px – WCAG 2.5.5, DESIGN_SYSTEM §7, TASKS B5.4.
   Bewusst die zuletzt geladene Datei: gewinnt gegen die Grössen aus Komponenten- und Seiten-CSS,
   ohne dass jede Seite ihre eigene Handy-Ausnahme pflegen muss. Links im Fliesstext bleiben aussen vor
   (WCAG 2.5.8 „inline“). Geprüft in test/system/mobile_test.rb über alle Hauptseiten.
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Bedienelemente */
  .btn, .btn--sm, .btn--lg { height: var(--s-touch); }
  .btn--icon, .btn--icon.btn--sm { width: var(--s-touch); }
  .input, .input--lg,
  input[type="text"], input[type="email"], input[type="password"], input[type="search"],
  input[type="url"], input[type="number"], input[type="date"], select { min-height: var(--s-touch); }
  a.chip, button.chip { height: var(--s-touch); padding: 0 var(--s-space-4); }
  .checkbox, .choices .checkbox, .token-form .checkbox { min-height: var(--s-touch); padding-right: var(--s-space-2); }
  .segmented__btn { height: var(--s-touch); min-width: var(--s-touch); }
  .menu__item { min-height: var(--s-touch); }
  summary { min-height: var(--s-touch); }

  /* Navigation und Kopf */
  .topbar .brand { min-height: var(--s-touch); }
  .crumbs__back { min-height: var(--s-touch); }
  .legal-links a, .auth-card__links a { min-height: var(--s-touch); min-width: var(--s-touch); display: inline-flex; align-items: center; justify-content: center; }
  .viewer__open { min-height: var(--s-touch); }

  /* Suche: Feld volle Breite, Hilfe im Feld, Suchen als Lupe (Enter sucht ohnehin) */
  .search-field input { min-height: 48px; }
  .search-field--with-help .search-help .search-help__toggle { width: var(--s-touch); height: var(--s-touch); right: 2px; }
  .search-form--home .search__submit, .search__submit { width: 48px; min-width: 48px; height: 48px; padding: 0; flex: none; }
  /* 16 px statt 18 px und schmalerer Rand links: der Platzhalter passt ganz ins Feld */
  .search-form--home .search-field input { min-height: 52px; font-size: var(--s-text-base); padding-left: var(--s-space-6); }
  .search-form--home .search-field__icon { left: 12px; }
  .search-form--home .search__submit { width: 52px; height: 52px; }

  /* Tags auf der Detailseite */
  .quick-tags__chip { height: auto; }
  .quick-tags__link { min-height: var(--s-touch); min-width: var(--s-touch); }
  .quick-tags__remove { width: var(--s-touch); min-height: var(--s-touch); }
  .quick-tags__add { max-width: none; }

  /* Auswahl-Checkbox der Karten: 44 × 44 px Trefferfläche, gezeichnet bleibt ein 24-px-Kästchen
     (transparenter Rand = Trefferfläche, inset-Schatten = Rahmen) */
  .doc-item__select {
    top: 0; left: 0; width: var(--s-touch); height: var(--s-touch);
    appearance: none; border: 10px solid transparent; border-radius: var(--s-radius);
    background: var(--s-surface) padding-box; box-shadow: inset 0 0 0 2px var(--s-control-border);
  }
  .doc-item__select:checked { background: var(--s-accent) padding-box; box-shadow: inset 0 0 0 2px var(--s-accent), inset 0 0 0 6px var(--s-surface); }
  .doc-item__select:focus-visible { outline: 2px solid var(--s-accent); outline-offset: -8px; }
  :root[data-view="list"] .doc-item__select { left: 14px; }
}