/* ═══════════════════════════════════════════════════════════════════════════
   ALMAS Doku — Berührungs-Schicht (v1)  ·  2026-07-31
   ───────────────────────────────────────────────────────────────────────────
   Warum es diese Datei gibt:
   Die Messung im Aktivitätslog (17.–30.07.) zeigt, dass die Techniker die
   Formulare am Handy ausfüllen — in dieser Desktop-Oberfläche. 71 % aller
   mobilen API-Aufrufe sind Wizard-Arbeit, sämtliche Tastatureingaben am Handy
   fanden hier statt. Die eigens gebaute Handy-Ansicht wurde nie benutzt.

   Statt einen zweiten Wizard danebenzustellen (zwei Feldrenderer für dasselbe
   rechtsverbindliche Dokument = zwei Wahrheiten), machen wir den vorhandenen
   fingertauglich. Ein Code, eine Semantik.

   Diese Datei wird ZULETZT geladen und ändert ausschließlich Darstellung —
   keine Struktur, kein Verhalten, kein JavaScript.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px), (hover: none) and (pointer: coarse) {

  /* ── 1. Der teuerste Einzelfehler: Schrift unter 16px ──────────────────────
     iOS zoomt beim Fokus in jedes Feld hinein, das kleiner als 16px ist.
     Bei einem Formular mit dreißig Feldern heißt das dreißig Mal reinzoomen
     und wieder herauswischen. Nichts verrät eine Webseite schneller.        */
  .field input[type=text],
  .field input[type=date],
  .field input[type=time],
  .field input[type=number],
  .field input[type=email],
  .field input[type=tel],
  .field textarea,
  .field select,
  input[type=text], input[type=search], input[type=email],
  input[type=tel], input[type=number], textarea, select {
    font-size: 16px;
  }

  /* ── 2. Finger statt Mauszeiger ───────────────────────────────────────────
     Apple und Google nennen beide 44 px als Mindestmaß für Bedienelemente.
     Die Felder lagen bei rund 38 px.                                        */
  .field input[type=text],
  .field input[type=date],
  .field input[type=time],
  .field input[type=number],
  .field select {
    min-height: 48px;
    padding: 12px 14px;
  }
  .field textarea {
    min-height: 96px;
    padding: 12px 14px;
    line-height: 1.5;
  }
  .field label {
    font-size: 14px;
    margin-bottom: 8px;
  }
  .field { margin-bottom: 20px; }

  /* Ankreuzfelder waren 18 px — deutlich unter dem, was ein Daumen trifft. */
  .field-inline { min-height: 44px; padding: 4px 0; gap: 12px; }
  .field-inline input[type=checkbox],
  .field-inline input[type=radio],
  input[type=checkbox], input[type=radio] {
    width: 24px; height: 24px;
    flex: 0 0 auto;
  }
  .field-inline label { font-size: 15px; line-height: 1.35; }

  /* ── 3. Auswahlgruppen untereinander statt nebeneinander ──────────────────
     Nebeneinander stehende Optionen werden auf schmalen Geräten zu Zielen
     von wenigen Millimetern Breite.                                         */
  .radio-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .radio-group label,
  .radio-group .field-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--almas-border, #e7e1e2);
    margin: 0;
  }
  .radio-group label:last-child,
  .radio-group .field-inline:last-child { border-bottom: none; }

  /* ── 4. Abschnitte bekommen Luft und klare Kanten ─────────────────────── */
  .card-section { padding: 16px 14px; margin-bottom: 16px; border-radius: 14px; }
  .card-section > h2 { font-size: 16px; margin-bottom: 14px; }
  .form-section { margin-bottom: 20px; }
  .field-block-grid { grid-template-columns: 1fr; gap: 0; }

  /* ── 5. Schaltflächen in Daumenreichweite und -größe ──────────────────── */
  .btn { min-height: 46px; font-size: 15px; padding: 12px 16px; }
  .btn-sm { min-height: 40px; font-size: 14px; }
  .btn-large,
  .wizard-final .btn-primary {
    min-height: 56px;
    font-size: 17px;
    width: 100%;
    border-radius: 14px;
  }
  /* Gefahrlose Aktionen nicht neben gefährliche quetschen */
  .wizard-final .btn + .btn { margin-top: 10px; }

  /* ── 6. Der Speicher-Hinweis muss lesbar sein ─────────────────────────────
     Er sagt seit v1.2.5 die Wahrheit („auf diesem Gerät gesichert · noch
     nicht hochgeladen") — dann soll man ihn auch entziffern können.        */
  #saveIndicator {
    font-weight: 600;
    font-size: 13px;
    color: var(--almas-text, #1a1718);
  }
  .wizard-tip { font-size: 12.5px; line-height: 1.45; }

  /* ── 7. Unterschrift: so groß wie das Gerät hergibt ───────────────────── */
  #sigCanvas { min-height: 190px; }
  .wizard-sig-block { padding: 14px; border-radius: 14px; }

  /* ── 8. Kopfzeile des Wizards kompakt halten ──────────────────────────── */
  .tab-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .tab-header h1 { font-size: 19px; line-height: 1.25; }
  .tab-header > div:last-child .btn { width: 100%; }

  /* ── 9. Fokus sichtbar lassen (Barrierefreiheit, auch am Finger) ──────── */
  .field input:focus, .field textarea:focus, .field select:focus {
    box-shadow: 0 0 0 3px rgba(216, 16, 32, .18);
  }

  /* ── 10. Breite Inhalte scrollen in sich, nie die Seite ───────────────── */
  table:not(.alarm-matrix) { display: block; overflow-x: auto; max-width: 100%; }
  .card-section, .field { min-width: 0; }
}

/* Sehr schmale Geräte: Textgröße halten, nur Abstände kürzen.
   NIEMALS die Schrift unter 16px drücken — sonst zoomt iOS wieder. */
@media (max-width: 380px) {
  .card-section { padding: 14px 11px; }
  .field { margin-bottom: 17px; }
  .btn-large, .wizard-final .btn-primary { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .field input, .field textarea, .field select { transition: none; }
}

/* ── 11. Beim Ausfüllen zählt nur das Formular ─────────────────────────────
   Solange der Wizard offen ist, braucht niemand die Seitennavigation — der
   Wizard hat oben seinen eigenen „← Zurück"-Knopf. Auf dem Handy gibt das
   die Breite und rund 130 Pixel Höhe zurück, die sonst Menü sind.
   `:has()` gibt es ab Safari 16.4; wo es fehlt, greift die Regel einfach
   nicht — dann sieht es aus wie vorher, nichts geht kaputt.              */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  body:has(#tab-editor:not(.hidden)) .sidebar { display: none; }
  /* Sidebar ist beim offenen Wizard weg — sonst rutscht der Inhalt auf breiten
     Touch-Tablets (>900px) in die 260px-Grid-Spalte und wird zur schmalen Leiste
     links (Joshua 2026-08-06). Grid auf eine Spalte, damit der Wizard voll breit wird. */
  body:has(#tab-editor:not(.hidden)) .view-app { grid-template-columns: 1fr; }
  body:has(#tab-editor:not(.hidden)) .content { padding: 10px 12px 30px; }
  body:has(#tab-editor:not(.hidden)) .tab-header { padding-top: 4px; }
}