/* ks-mobil-portal.css — Portal sandbox.kutego.ai auf dem Smartphone (06.11.2026, User: „bequem mobil per iPhone“).
 * Quelle cluster-docs/scripts/code-agent-abnahme/werkstatt/portal/ks-mobil-portal.css → VM801 /var/www/kutego-werkstatt/portal/. Nur Darstellung. */
@media (max-width: 760px) {
  /* iOS zoomt bei Eingabefeldern < 16 px */
  input, select, textarea { font-size: 16px !important; }
  body.app-view button, body.app-view a { touch-action: manipulation; }
  body.app-view .listenkopf { row-gap: 8px; }
  body.app-view #task-search { flex: 1 1 100%; min-width: 0; }
  /* Aufgabenliste kompakt (User 06.11. abends): Knöpfe als kleine Symbole rechts neben Titel/Status statt breiter Balken darunter */
  body.app-view .aufgabe { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding: 6px 8px 6px 8px; }
  body.app-view .aufgabe > :is(.kopf, .klein, .status-col) { grid-column: 1; }
  body.app-view .aufgabe .aktionen { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; flex-wrap: nowrap; gap: 4px; justify-content: flex-end; }
  body.app-view .aufgabe .aktionen button { flex: none; min-height: 0; width: 32px; height: 32px; padding: 0; font-size: 13px; }
  body.app-view .aufgabe > .status-col { margin-top: 3px; }
  /* Ansichts-Reiter einzeilig und flacher */
  body.app-view .ansicht { flex: 1 1 100%; min-width: 0; }
  body.app-view .ansicht button { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-content: center; font-size: 12px; padding: 5px 6px; gap: 4px; }
  body.app-view .ansicht .badge.zahl { padding: 0 5px; }
  body.app-view .listenkopf > button, body.app-view #glocke { width: 30px; height: 30px; }
  #ws-frame-wrap { bottom: auto; height: calc(100vh - var(--ws-tabbar-h)); height: calc(100dvh - var(--ws-tabbar-h)); }
  /* Reiter (10.11.): am Handy nur Übersicht, aktiver Reiter und die Liste aller Reiter */
  #ws-tab-items .ws-tab:not(.on) { display: none; }
  #ws-tabbar .ws-tab { max-width: none; flex: 1 1 auto; min-width: 0; }
  #ws-tab-items { flex: 1 1 auto; }   /* TABPLUS-1011: aktiver Reiter füllt, „+“ direkt dahinter */
  #ws-tabbar #ws-tab-home, #ws-tabbar #ws-tab-list-button, #ws-tabbar #ws-tab-new-button { flex: none; padding: 0 14px; }
  .ws-tab-close { width: 26px; height: 26px; }
}
/* ZOOM-1111 (User 11.11.: iPhone zoomt beim Antippen der Textarea bzw. beim Aufklappen von „Git Branches“ hinein):
 * iOS-Schriftvergrößerung (Text-Autosizing) aus; die 16-px-Regel gegen den Fokus-Zoom gilt auch für Handys im Querformat (> 760 px);
 * kein Doppeltipp-Zoom auf Bedienelementen. Pinch-Zoom bleibt erlaubt. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
  summary, button, a, label, select { touch-action: manipulation; }
}
/* HEADER-1111 (User 11.11.): Seit ZOOM-1111 ist das „Ansicht als …“-Dropdown mobil 16 px breit und schob „Abmelden“ rechts aus dem Bild.
 * Mobil: Dropdown schmal mit Auslassung, Kopf-Elemente dürfen schrumpfen. 16 px bleibt, sonst zoomt iOS beim Antippen. */
@media (max-width: 760px) {
  header { gap: 8px; min-width: 0; }
  header .marke-kopf { flex: none; }
  header .rechts { min-width: 0; flex: 1 1 auto; justify-content: flex-end; gap: 6px; }
  header .rechts > * { flex: none; }
  header #role-test-select { flex: 0 1 auto; width: 104px; min-width: 0; max-width: 30vw; height: 30px; padding: 0 2px; text-overflow: ellipsis; }
  header .role-test-badge { font-size: 10px; padding: 2px 5px; }
}
/* BREITE-1111 (User 11.11.): Seite war auf dem iPhone nach App-Neustart etwas breiter als der Bildschirm (in Chromium nicht nachstellbar).
 * Absicherung: kein seitliches Verschieben der Seite; Eingabefelder dürfen in Flex-Zeilen schrumpfen und nie breiter als ihr Container werden. */
@media (max-width: 760px) {
  html { overflow-x: hidden; } body { max-width: 100%; }
  /* sonst würde body.app-view (portal.css mobil overflow:auto) selbst Scroll-Container und der sticky Header klebte nicht mehr */
  body.app-view { overflow: visible; }
  input, select, textarea { min-width: 0; max-width: 100%; }
}
/* BREITE-1111b (Diagnose #breite vom iPhone 11.11.: Bildschirm 402, Seite 439 — #portal wuchs mit den aufgeklappten Optionen):
 * iOS gibt Auswahlfeldern die Breite ihres längsten Eintrags (bei 16 px Schrift breiter als der Bildschirm); als Flex-/Grid-Element mit
 * min-width:auto zog das #portal und damit die Seite mit. Mobil: Container dürfen schrumpfen, Optionen einspaltig, Felder höchstens 100 %. */
@media (max-width: 760px) {
  body.app-view main, body.app-view #portal, body.app-view .karte.neu, body.app-view .task-pane { min-width: 0; max-width: 100%; }
  .optionen-raster { grid-template-columns: minmax(0, 1fr); }
  .optionen-raster > *, .optionen-raster label, .optionen-raster .opt-inline, .optionen-raster .account-combo,
  .optionen-raster select, .optionen-raster input { min-width: 0; max-width: 100%; }
  .optionen-raster select { width: 100%; text-overflow: ellipsis; }
}