/* ============================================================ NATIVE-APP.CSS V1.0 Korrekturen, die NUR in der Capacitor-App gelten. Wird ausschliesslich von js/native-bridge.js nachgeladen, und zwar nur wenn Capacitor.isNativePlatform() true ist. Im Browser wird diese Datei nie angefordert — die Web-Version bleibt unveraendert. Alle Regeln haengen zusaetzlich an .is-native / .is-ios / .is-android am , damit auch ein versehentliches direktes Einbinden folgenlos bliebe. ============================================================ */ /* ════════════════════════════════════════════════════════════ 1 · TOUCH-GRUNDVERHALTEN ════════════════════════════════════════════════════════════ */ /* Graue Blitz-Flaeche beim Antippen (Android/iOS Default) — sieht in einer nativen App nach Webseite aus. */ html.is-native, html.is-native * { -webkit-tap-highlight-color: transparent; } /* Killt die 300ms Verzoegerung, die WebViews vor dem Klick abwarten, um auf einen moeglichen Doppeltipp-Zoom zu pruefen. */ html.is-native button, html.is-native a, html.is-native [role="button"], html.is-native [onclick], html.is-native label, html.is-native summary { touch-action: manipulation; } /* Langes Antippen oeffnet sonst das iOS-Kontextmenue ("Kopieren", "Nachschlagen") auf Buttons und Icons. Fliesstext bleibt markierbar. */ html.is-ios button, html.is-ios a, html.is-ios [role="button"], html.is-ios img, html.is-ios svg { -webkit-touch-callout: none; } /* Rubber-Band-Effekt am Seitenende. In der App sieht der durchscheinende Hintergrund nach kaputtem Layout aus, im Browser ist er erwartetes Verhalten — deshalb nur hier abgeschaltet. */ html.is-native, html.is-native body { overscroll-behavior-y: none; } /* ════════════════════════════════════════════════════════════ 2 · FORMULARE — iOS Auto-Zoom ════════════════════════════════════════════════════════════ iOS zoomt beim Fokussieren automatisch in jedes Eingabefeld mit font-size < 16px hinein und zoomt danach NICHT von allein zurueck. Das Frontend hat 82 solcher Regeln (13px/14px Filter- und Suchfelder). Statt 82 Stellen anzufassen, hier eine gezielte Ausnahme fuer die App. 16px ist auf einem Telefon ohnehin die bessere Touch-Groesse. Der Browser behaelt seine kompakten 13/14px. ════════════════════════════════════════════════════════════ */ html.is-ios input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.is-ios textarea, html.is-ios select { font-size: 16px; } /* ════════════════════════════════════════════════════════════ 3 · TEAMBOARD-GANTT — Label-Spalte fixieren ════════════════════════════════════════════════════════════ Das Gantt scrollt horizontal (min-width 900px, Tagesbreite 24px auf dem Telefon). Die 240px breite Task-Spalte scrollt dabei mit weg — sobald man zu den Balken scrollt, sieht man nicht mehr, zu welchem Task ein Balken gehoert. Auf einem 375px-Screen bleiben ausserdem nur ~135px Zeitleiste uebrig. Fix: Label-Spalte per sticky an den linken Rand heften und auf schmalen Screens verkleinern. Die Breiten stehen als Inline-Styles im generierten Markup (js/tb-view-calendar.js), deshalb !important. ════════════════════════════════════════════════════════════ */ html.is-native #tbGanttScrollBody > div > div:first-child, html.is-native #tbGanttScrollHeader > div > div:first-child { position: sticky; left: 0; /* Ueber den Balken: die haben inline z-index bis 4, ihr Container bildet mangels eigenem z-index keinen Stapelkontext. Mit 2 lag die festgeklebte Spalte DARUNTER. */ z-index: 5; /* --tb-surface gibt es im Projekt nicht (customer-teamboard.css definiert --tb-gray-*, --tb-primary …) — die Spalte blieb im dunklen Schema weiss. */ background: var(--mb-surface, #fff); box-shadow: 2px 0 6px rgba(0, 0, 0, .06); } /* Gruppen-Kopfzeilen (Projekt) haben eigenen Hintergrund */ html.is-native #tbGanttScrollBody > div[style*="tb-gray-50"] > div:first-child { background: var(--tb-gray-50, #f9fafb); } @media (max-width: 640px) { html.is-native #tbGanttScrollBody > div > div:first-child, html.is-native #tbGanttScrollHeader > div > div:first-child { width: 132px !important; min-width: 132px !important; padding-left: 10px !important; padding-right: 8px !important; font-size: 11px !important; } } /* ════════════════════════════════════════════════════════════ 4 · HOVER-ZUSTAENDE ════════════════════════════════════════════════════════════ Auf Touch bleibt :hover nach dem Antippen "kleben", bis woanders hingetippt wird — Karten und Zeilen sehen dann dauerhaft aus wie angefasst. Betrifft nur Geraete ohne echten Zeiger. ════════════════════════════════════════════════════════════ */ @media (hover: none) { html.is-native [class*="-card"]:hover, html.is-native [class*="-row"]:hover, html.is-native [class*="-item"]:hover, html.is-native tr:hover { transform: none; } } /* ════════════════════════════════════════════════════════════ 6 · SICHERE BEREICHE — bewusst KEINE Regeln ════════════════════════════════════════════════════════════ Am 02.08.2026 stand hier ein Block, der Statusleiste und Home-Indikator per `env(safe-area-inset-*)` selbst ausgeglichen hat. Er war falsch und ist entfernt worden. Die Begruendung gehoert hierher, damit der Versuch nicht wiederkehrt: `ios.contentInset: 'always'` (capacitor.config.ts) laesst WebKit die sicheren Bereiche selbst abziehen — auch fuer `position: fixed`, das am „unobscured content rect" ausgerichtet wird. Kopfzeile, Sidebar, die rund 290 Slide-in-Panels und die untere Leiste sitzen dadurch von allein richtig, ganz ohne env(). Ein eigener Ausgleich braucht `viewport-fit=cover`. Das schaltet aber genau diese Eigenleistung ab — und dann muesste JEDES randfixierte Element seinen Abstand mitbringen. Es blieb bei body und Sidebar, also lag der Kopfzeileninhalt in der Uhrzeit und die untere Leiste hinter dem Home-Indikator. Entweder das eine oder das andere. Ein halber Umbau ist schlechter als keiner. Ein vollstaendiger braucht zusaetzlich `contentInset: 'never'` in der Capacitor-Config — und damit einen neuen Store-Build. ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ 7 · STATUSLEISTEN-STREIFEN — Versuch verworfen ════════════════════════════════════════════════════════════ Hier stand ein fixierter Balken, der per `transform: translateY(-100%)` ueber `top: 0` hinausragen und den Statusleisten-Streifen weiss faerben sollte. Im Simulator gegengeprueft (Balken testweise knallrot): der Streifen blieb in der Seitenhintergrundfarbe — **der Bereich oberhalb des Web-Viewports ist aus dem Inhalt heraus nicht bemalbar**, alles jenseits der Kante wird abgeschnitten. Ebenfalls gemessen (iPhone 17, sticky-Kopfzeile, vor UND nach dem Scrollen): die Kopfzeile haftet sauber an der Unterkante der Statusleiste, es scrollt nichts sichtbar darunter durch. Es gibt an dieser Stelle nichts abzudecken. Wer den Streifen doch einfaerben will, muss das nativ tun (`ios.backgroundColor` in capacitor.config.ts) — und das heisst neuer Build. ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ 8 · UNTERE LEISTE AUS DER HOME-INDIKATOR-ZONE HEBEN ════════════════════════════════════════════════════════════ Gegenstueck zur Messung in native-bridge.js. Warum das noetig ist, obwohl das Frontend an drei Stellen `env(safe-area-inset-bottom)` einsetzt: ohne `viewport-fit=cover` ist dieser Wert konstant 0 — die Ausgleiche greifen also nirgends. `--sm-safe-bottom` traegt den gemessenen Wert nach. Gemessen ohne diese Regeln (iPhone 17, Variante „glas"): Zone 778..812 · Leiste endet bei 802 -> 24 px drin · Beschriftung 3 px drin Tipper in diesem Streifen loesen ausserdem die Home-Geste aus statt des Seitenwechsels. Die Media-Query muss die aus mobile-bottom-nav.css spiegeln — darunter existiert die Leiste nicht. ════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Schwebende Variante: die ganze Leiste rutscht nach oben */ html.is-native[data-nav="glas"] #sm-bottom-nav { bottom: calc(10px + var(--sm-safe-bottom, 0px)); } /* Flaechige Variante: die Flaeche bleibt am Rand (sonst entstuende darunter ein heller Spalt), nur ihr INHALT rueckt hoch. Die Hoehe waechst mit, damit die Symbole nicht gestaucht werden. */ html.is-native[data-nav="solid"] #sm-bottom-nav { height: calc(62px + var(--sm-safe-bottom, 0px)); padding-bottom: var(--sm-safe-bottom, 0px); } /* Ohne gesetzte Variante (aeltere gespeicherte Einstellung) */ html.is-native #sm-bottom-nav:not([data-x]) { padding-bottom: var(--sm-safe-bottom, 0px); } /* Der Freiraum unter dem Inhalt muss um denselben Betrag wachsen, sonst verschwindet die letzte Kachel hinter der jetzt hoeheren Leiste. */ html.is-native .main-content, html.is-native .content-area, html.is-native .dashboard-container { padding-bottom: calc(68px + var(--sm-safe-bottom, 0px)) !important; } } /* ════════════════════════════════════════════════════════════ 9 · SIDEBAR UND ANDERE 100vh-FLAECHEN ════════════════════════════════════════════════════════════ `height: 100vh` (includes/sidebar-customer.html:433, css/dashboard.css:194) meint in WKWebView die volle Geraetehoehe — nicht den sichtbaren Bereich. Die unterste Menuezeile (Impressum/Datenschutz) landet dadurch hinter dem Home-Indikator. `top: 0; bottom: 0` steht bereits daneben, deshalb genuegt `height: auto`: dann spannt sich die Flaeche exakt ueber den sichtbaren Bereich. Der Innenabstand haelt zusaetzlich den Inhalt aus der Wischzone. ════════════════════════════════════════════════════════════ */ html.is-native .sm-sidebar, html.is-native .sidebar { height: auto; top: 0; bottom: 0; padding-bottom: var(--sm-safe-bottom, 0px); } /* ════════════════════════════════════════════════════════════ 10 · HEROAI-SPRACHASSISTENT — Einstiegspunkte in der App verbergen ════════════════════════════════════════════════════════════ Die Sprachunterhaltung (Mikro-Button im Chat-Panel + Kopfzeilen-Button) ist noch nicht in den nativen Apps (iOS/Android) ausgerollt — die Web-Version bleibt aber sofort nutzbar. Kein JS/isNative()-Zweig in hero-ai.js/header.html noetig: beide Buttons existieren dort weiterhin unveraendert, sie werden ausschliesslich hier per CSS ausgeblendet, und diese Datei laedt laut Kopfkommentar ohnehin nie im Browser. ════════════════════════════════════════════════════════════ */ html.is-native #heroVoiceBtn, html.is-native #hero-ai-mic { display: none !important; }