/* =========================================================================== Trefferflaechen fuer Touch-Geraete --------------------------------------------------------------------------- Diese Datei existiert fuer genau eine Regel: auf Finger-Geraeten ist jedes antippbare Element mindestens 48 x 48 px gross. 48 ist Materials Minimum und deckt Apples 44pt mit ab - Details, Quellen und die Messmethode stehen in docs/MOBILE_UI_STANDARDS.md, Abschnitt 2. WARUM EINE EIGENE DATEI: Die Verstoesse verteilten sich ueber ~10 Feature-CSS-Dateien. Sie dort einzeln zu korrigieren haette bedeutet, in jeder Datei gegen die jeweils eigenen Media-Bloecke anzukaempfen. Diese Datei wird als LETZTE geladen, damit ihre Regeln bei gleicher Spezifitaet gewinnen - dadurch bleibt jede Feature-Datei unveraendert und man sieht an einer Stelle, was die 48px erzwingt. ALLES hier haengt an `@media (pointer: coarse)`. Am Desktop mit Maus passiert nichts - dort sind kompakte Bedienelemente richtig. Grundlage: Audit vom 09.09.2026 ueber 9 Ansichten und alle 78 Fenster bei 375px Breite. Gefunden wurden 49 betroffene Komponenten. WARUM `!important`: Ohne es verlieren die Regeln gegen aeltere Feature-Regeln, die Groessen fest verdrahten (teils selbst mit `!important`). Gemessen: `.modal-close` blieb trotz korrekt geladener Regel bei `min-width: 38px`. Hier ist es vertretbar, weil die Datei eine Untergrenze erzwingt und keine Gestaltung vorgibt: `min-width`/`min-height` klemmen nur nach unten, jede groessere Gestaltung aus den Feature-Dateien bleibt erhalten. BEWUSST NICHT ENTHALTEN: - Fliesstext-Links (`.privacy-link` und Links im Satz, ~16-18px hoch). WCAG 2.2 nimmt "inline" Ziele ausdruecklich aus: ihre Groesse wird von der Zeilenhoehe des umgebenden Textes bestimmt. Sie aufzublasen wuerde den Textfluss zerreissen. - Versteckte Felder (1x1-Datei-Inputs, zusammengeklappte Selects). =========================================================================== */ @media (pointer: coarse) { /* ---------------------------------------------------------------------- 1. Schliessen- und Icon-Knoepfe (haeufigste Gruppe, ~88 Fundstellen) `min-width` + `flex-shrink: 0` sind Pflicht: diese Knoepfe sitzen in Flex-Kopfzeilen und wuerden von einer reinen `width` weggeschrumpft. ---------------------------------------------------------------------- */ .modal-close, .btn-icon, .btn-icon-only, .password-toggle-btn, .location-map-trigger, .settings-help-btn-inline, .help-btn-premium, .workspace-mobile-menu-toggle, .band-workspace-close { min-width: 48px !important; min-height: 48px !important; flex-shrink: 0 !important; } /* Die doppelte Klasse hebt nur die Spezifitaet auf (0,3,0) an - sonst gewinnt `css/settings_modal.css`, das `.modal .modal-close:not(.news-modal-close)` auf `38px !important` festnagelt. Gleiche Spezifitaet reicht, weil diese Datei spaeter laedt. Auch die dortigen Attribut-Varianten sind hier mit aufgefuehrt. */ .modal .modal-close.modal-close, .modal .btn-icon.btn-icon, .modal .btn-icon[title="Schließen"], .modal .btn-icon[aria-label="Schließen"] { width: auto !important; height: auto !important; min-width: 48px !important; min-height: 48px !important; flex-shrink: 0 !important; } /* ---------------------------------------------------------------------- 2. Eingabefelder (~40 Fundstellen, lagen bei 45-46px) Nur `min-height` - Breite und Padding bleiben wie gestaltet. ---------------------------------------------------------------------- */ .form-control, .form-input, .form-select, .profile-form-input, .assistant-input, select { min-height: 48px !important; } /* Mehrzeilige Felder brauchen mehr als die Mindesthoehe - drei Zeilen sind der uebliche Startwert (siehe Abschnitt 6.2). */ textarea.form-control, textarea.form-input, textarea.profile-form-input { min-height: 88px !important; } /* ---------------------------------------------------------------------- 3. Schaltflaechen (~45 Fundstellen; .btn-secondary lag bei nur 30px) ---------------------------------------------------------------------- */ .btn, .btn-primary, .btn-secondary, .btn-danger, .btn-text, .btn-sm { min-height: 48px !important; } /* ---------------------------------------------------------------------- 4. Segment-, Tab- und Navigationsknoepfe innerhalb von Fenstern ---------------------------------------------------------------------- */ .scheduler-section-nav-item, .org-mobile-segment-btn, .bandrider-mobile-view-btn, .invoice-mobile-view-btn, .absence-quick-btn, .toggle-switch { min-height: 48px !important; } /* ---------------------------------------------------------------------- 5. Aufklappbare Kopfzeilen - die ganze Zeile ist das Ziel ---------------------------------------------------------------------- */ .invoice-panel-header, .app-collapsible-header, .settings-collapsible-summary { min-height: 48px !important; } /* ---------------------------------------------------------------------- 6. Rich-Text-Werkzeugleiste (Quill, News-Editor) Die Knoepfe lagen bei 38x38. Eine Werkzeugleiste ist dicht gesetzt, aber 38px sind auf dem Handy zu klein zum sicheren Treffen - mobile Editoren wie Google Docs nutzen ebenfalls volle Trefferflaechen. ---------------------------------------------------------------------- */ .ql-toolbar button, .ql-toolbar .ql-picker-label { min-width: 48px !important; min-height: 48px !important; /* Quill setzt seine Icons per `float` und rechnet mit ~24px hohen Knoepfen. In einem 48px-Knopf haengen sie sonst oben und die Zeilen wirken abgeschnitten - deshalb hier explizit zentrieren. */ display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Der Auswahl-Knopf ("Normal") sitzt in einem eigenen Wrapper, der die neue Hoehe mitbekommen muss, sonst ueberlappt er die Zeile darunter. */ .ql-toolbar .ql-picker { min-height: 48px !important; display: inline-flex !important; align-items: center !important; } /* ---------------------------------------------------------------------- 7. Kontrollkaestchen und Radios Das Kaestchen selbst bleibt klein (20px sind richtig, ein 48px-Haken saehe absurd aus) - stattdessen wird die zugehoerige LABEL-ZEILE zum Ziel. Genau so loesen es iOS und Material: man tippt die Zeile, nicht das Kaestchen. Siehe docs/MOBILE_UI_STANDARDS.md, Abschnitt 6.3. ---------------------------------------------------------------------- */ label:has(> input[type="checkbox"]), label:has(> input[type="radio"]), .checkbox-row, .radio-row { display: flex; align-items: center; min-height: 48px !important; } /* ---------------------------------------------------------------------- 8. Restliche Segment-/Umschaltknoepfe in Fenstern, die keine eigene Klasse tragen (z. B. die Reiter im "Mitglied hinzufuegen"-Fenster). ---------------------------------------------------------------------- */ .modal .segment-btn, .modal [role="tab"], #addMemberModal .active, #addMemberModal button:not(.modal-close):not(.btn-icon) { min-height: 48px !important; } /* ---------------------------------------------------------------------- 9. Fenster, die ihre Groessen mit ID-Spezifitaet festnageln `css/settings_modal.css` u. a. setzen z. B. `#settingsModal .settings-help-btn-inline { height: 30px !important }`. Das ist (1,1,0) und schlaegt jede reine Klassenregel - auch mit `!important`. Hier wird dieselbe Spezifitaet gespiegelt; weil diese Datei spaeter laedt, genuegt Gleichstand. `height: auto` ist noetig, weil dort feste `height`-Werte stehen, die eine blosse `min-height` nicht aufloesen wuerde. ---------------------------------------------------------------------- */ #settingsModal .btn, #settingsModal .btn-icon, #settingsModal .settings-help-btn-inline, #bandDetailsModal .btn-icon, #orgDetailsModal .btn-icon, #confirmRehearsalModal .btn, #orgTaskModal .btn, #createRehearsalModal .btn { width: auto !important; height: auto !important; min-width: 48px !important; min-height: 48px !important; } /* Umschalter und Auswahlfelder: nur die zu kurze Kante nachziehen, die Gestaltung (Spurbreite, Pfeil) bleibt unangetastet. */ #settingsModal .toggle-switch { min-width: 48px !important; } .role-edit-select, #confirmRehearsalModal .form-select { min-width: 48px !important; min-height: 48px !important; } /* ---------------------------------------------------------------------- 10. Letzte Einzelfaelle Knoepfe, die ueber ihren Eltern-Container klein gehalten werden. Die doppelte `.btn.btn` hebt nur die Spezifitaet an, damit die jeweilige Container-Regel nicht gewinnt. Ermittelt durch Nachmessen der noch verbliebenen 14 Verstoesse - keine Vermutungen. ---------------------------------------------------------------------- */ #settingsModal .profile-image-actions .btn.btn, .confirm-notify-actions .btn.btn, .invoice-modal-actions .btn.btn, .modal-actions-right .btn.btn, .scheduler-subpanel-title-row .btn.btn, .rundown-dropdown-wrapper .btn.btn, .finance-add-activity-actions .btn.btn, .org-workspace-editor-modal-actions .btn.btn { width: auto !important; height: auto !important; min-width: 48px !important; min-height: 48px !important; } /* Fenster, in denen auch die Container-Regeln oben noch verloren haben. Bewusst grob: in diesen vier Fenstern soll KEIN Knopf unter 48px liegen, egal welche Feature-Regel ihn sonst klein haelt. Die vierfache `.btn` ist kein Tippfehler, sondern hebt die Spezifitaet auf (1,4,0). Noetig wegen z. B. `#invoiceModal .invoice-create-actions > .modal-actions-right > .btn` in `css/finances.css` - das ist (1,3,0) mit `!important` und haette eine kuerzere Regel geschlagen. */ #confirmRehearsalModal .btn.btn.btn.btn, #invoiceModal .btn.btn.btn.btn, #createEventModal .btn.btn.btn.btn, #orgProjectModal .btn.btn.btn.btn, #orgChoiceModal .btn.btn.btn.btn, .song-pool-modal-actions .btn.btn.btn { width: auto !important; height: auto !important; min-width: 48px !important; min-height: 48px !important; } } /* =========================================================================== Abstand zwischen Trefferflaechen (Nachzug 09.09.2026) --------------------------------------------------------------------------- Direkte Folge der Vergroesserung auf 48px: mehrere Knopfgruppen hatten Abstaende von 4-7px, die fuer 44px-Knoepfe ausgelegt waren. Zwei benachbarte Ziele brauchen mindestens 8px Luft, sonst trifft der Finger das falsche. Gemessen wurden u. a. 4px in den Fenster-Kopfzeilen und 6px bei der Abwesenheits-Schnellauswahl. Siehe docs/MOBILE_UI_STANDARDS.md, Abschnitt 2. BEWUSST AUSGENOMMEN (dichte Leisten sind ein eigenes, anerkanntes Muster, bei dem Segmente bzw. Werkzeuge direkt aneinander liegen duerfen): - `.schedule-status-switch` (Offen/Abgestimmt/Fest) - ein Segmented Control; mehr Luft wuerde die drei Pillen ausserdem ueber die Bildschirmbreite schieben. - `.ql-toolbar` - Werkzeugleiste des Rich-Text-Editors. Beide erfuellen WCAG 2.5.8, weil jedes Ziel fuer sich >= 24px ist. =========================================================================== */ @media (pointer: coarse) { .org-workspace-title-group, .band-workspace-title-group, .absence-quick-select-actions, .scheduler-section-nav, .stats-header-actions, .modal-actions, .modal-actions-right, .invoice-template-actions, .event-rundown-actions-secondary { gap: 8px !important; } /* Segmented Controls behalten ihre enge Teilung - dort sind die Segmente Teil EINES Bedienelements, nicht zwei getrennte Ziele. Gilt fuer `.schedule-status-switch` und `.band-entry-mode-toggle`; hier nur als Merkposten, es wird bewusst nichts geaendert. */ }