/* ══════════════════════════════════════════════════════════════════════════════════════ TradeHub — Telefon-Ansicht im iOS-Stil Peter, 07.08.2026: „wenn man das so umbauen würde, dass es 100 % wie eine iPhone-App aussieht, wäre das super … die Ansicht soll nur für das Telefon sein, also nicht für das iPad, da funktioniert die Optimierung schon recht gut." ⚠️ GRENZE 520 px. Darunter liegen Telefone (iPhone 390–430 px, kleine Androiden). Das iPad fängt bei 768 px an und bleibt damit unberührt — genau wie Peter es wollte. Alles in dieser Datei steht deshalb in EINER Medienabfrage; ohne sie greift hier nichts. ⚠️ ROLLEN: Diese Datei kennt keine Rollen. Die Reiterleiste wird in index.html aus den Menüeinträgen gebaut, die für die angemeldete Rolle ohnehin sichtbar sind — dadurch gibt es kein zweites Rechtemodell, das auseinanderlaufen könnte. ⚠️ Der Akzent ist Peters App-Blau #2a87c8, nicht Apples Systemblau. Sonst sähe es aus wie eine Systemeinstellung statt nach TradeHub. ══════════════════════════════════════════════════════════════════════════════════════ */ /* ⚠️ ZWEI Bedingungen, nicht eine: Ein iPhone ist quer 844 px BREIT — mit `max-width` allein fiele die Telefon-Ansicht beim Drehen weg (gemessen). Maßgeblich ist die KÜRZERE Bildschirmseite: iPhone 390–430 px in beiden Lagen, iPad 768 px und mehr. Die Obergrenze 950 px verhindert, dass ein flach gezogenes Fenster am Rechner fälschlich als Telefon gilt (das längste iPhone misst 932 px). */ @media (max-width: 520px), (max-height: 520px) and (max-width: 950px) { :root{ --phBlau:#2a87c8; --phBlauDunkel:#1b4b7a; --phGrau:#8e8e93; /* iOS secondary label */ --phTrenner:#c7c7cc; --phGrund:#f2f2f7; /* iOS grouped background */ --phTinte:#1c1c1e; --phLeiste:rgba(249,249,249,.94); --phTabHoehe:56px; /* ohne den sicheren Rand darunter */ } /* ── Das Seitenmenü entfällt am Telefon ─────────────────────────────────────────── Ein Menü, das man erst aufklappen muss, kennt iOS nicht — die Hauptnavigation liegt unten und ist immer sichtbar. Burger und Verdunkler werden dadurch überflüssig. */ body.phone .sbNav, body.phone .sbScrim, body.phone #btnBurger, body.phone .sbBurger{ display:none !important; } body.phone{ background:var(--phGrund) !important; } /* Platz für die Reiterleiste schaffen — inklusive des Home-Balkens. */ body.phone #appShell, body.phone .container, body.phone #viewsWrap{ padding-bottom: calc(var(--phTabHoehe) + env(safe-area-inset-bottom, 0px)) !important; } /* ── Reiterleiste unten ─────────────────────────────────────────────────────────── ⚠️ `position:fixed` am body-Ende, NICHT in einer Ansicht: Ansichten tragen während ihrer Einblend-Animation eine `transform` und würden die Leiste an sich binden (derselbe Fehler wie beim Vollansicht-Fenster am 07.08.2026). */ /* ⚠️ Vor dem Anmelden hat unten NICHTS zu stehen (Peters Fund 07.08.2026). Die Leiste haengt an `document.body` und wird deshalb von `body.auth-lock #appShell{opacity:0}` NICHT erfasst — sie stand im Bild, samt der Namen der Bereiche. Dasselbe gilt fuer die Polsterung: ohne Leiste braucht die Anmeldemaske auch keinen Platz dafuer. ⚠️ Wer kuenftig etwas fest am Bildschirmrand an `document.body` haengt, muss es hier ebenfalls eintragen — die Huelle deckt es nicht ab. */ body.auth-lock .phTabs, body.auth-lock .phMehr{ display:none !important; } body.phone.auth-lock #appShell, body.phone.auth-lock .container, body.phone.auth-lock #viewsWrap{ padding-bottom:0 !important; } .phTabs{ position:fixed; left:0; right:0; bottom:0; z-index:300; display:flex; align-items:stretch; padding: 6px 0 env(safe-area-inset-bottom, 0px); background:var(--phLeiste); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-top:.5px solid rgba(0,0,0,.16); } .phTab{ flex:1 1 0; min-width:0; background:none; border:0; padding:2px 2px 6px; display:flex; flex-direction:column; align-items:center; gap:3px; font:inherit; font-size:10px; line-height:1.15; letter-spacing:-.1px; color:var(--phGrau); cursor:pointer; -webkit-tap-highlight-color:transparent; } .phTab svg{ width:25px; height:25px; flex:0 0 auto; } .phTab span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .phTab[aria-selected="true"]{ color:var(--phBlau); font-weight:500; } .phTab:active{ opacity:.55; } /* Zähler (offene Aufgaben, Fristen) wie in iOS am Symbol */ .phTabPunkt{ position:absolute; transform:translate(11px,-4px); min-width:17px; height:17px; padding:0 5px; border-radius:9px; background:#ff3b30; color:#fff; font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; } .phTabIkon{ position:relative; display:flex; } /* ── Große Titel ────────────────────────────────────────────────────────────────── Die vorhandene Abschnittsüberschrift der Ansicht wird zum iOS-Large-Title. Kein neues Markup — dadurch bleibt die Übersetzung und alles Weitere unverändert. */ /* ⚠️ NUR der erste je Ansicht: iOS zeigt einen Large Title je Bildschirm. In Bestellungen erschienen sonst zwei (,,Filter & Suche" und ,,Bestellliste"). */ body.phone #viewsWrap section > .secHd ~ .secHd, body.phone #viewsWrap .card .secHd{ font-size:13px !important; font-weight:600 !important; letter-spacing:0 !important; color:var(--phGrau) !important; text-transform:uppercase !important; } body.phone #viewsWrap > section > .secHd:first-of-type, body.phone #viewsWrap section > .secHd:first-of-type{ font-size:32px !important; font-weight:700 !important; letter-spacing:-.8px !important; color:var(--phTinte) !important; margin:4px 0 10px !important; padding:0 !important; } body.phone #viewsWrap .secHd::after{ display:none !important; } /* ── Karten im iOS-Stil ─────────────────────────────────────────────────────────── Runder, weißer, ohne Rahmenlinie — der Grund darunter ist grau, nicht weiß. */ body.phone #viewsWrap .card{ border-radius:14px !important; border:0 !important; box-shadow:none !important; background:#fff !important; margin-bottom:14px !important; } body.phone #viewsWrap .card.pad{ padding:14px !important; } /* ⚠️⚠️ KEIN `!important` auf `display` — das war ein DATENSCHUTZ-FEHLER (Peter, 08.08.2026: *„ich sehe die Umsätze nur bei Zeit und Aufgaben, wenn ich das beim Telefon öffne, ganz nach oben scrollen"*). Die Zeiterfassung verbirgt ihren Kennzahlen-Block für Mitarbeiter mit einem INLINE-Stil: kpiSection.style.display = emp ? 'none' : ''; // js/timetracking.js:5793 // „Employee: also hide the main KPI cards section (billing KPIs)" Ein `!important` in einer Stilvorlage **schlägt einen inline-Stil ohne `!important`**. Mit `display:grid !important` habe ich den Block also am Telefon wieder sichtbar gemacht — samt „Umsatz (Monat)" und „Umsatz gesamt" der Retainer-Kunden. Am Rechner blieb er verborgen, deshalb fiel es nur am Telefon auf. Ohne `!important` stimmt beides: Ist der Block erlaubt, setzt das Modul `display:''` (kein inline-Wert) und diese Regel greift. Ist er verboten, gewinnt das inline `none`. ⚠️ Merksatz für die ganze Datei: `display: … !important` niemals auf einen Behälter setzen, den irgendwer per JavaScript aus- und einblendet. Erst prüfen, ob es eine solche Stelle gibt. ⚠️ Umgesetzt mit `:not([style*="none"])`: Die Regel wirkt, wenn der Block erlaubt ist, und greift nachweislich NICHT, sobald das Modul ihn per inline-Stil verborgen hat. Damit bleibt das Zwei-Spalten-Layout verlässlich (mit `!important`), ohne je etwas zurückzuholen, das jemand absichtlich ausgeblendet hat. */ body.phone #viewsWrap .kpis:not([style*="none"]){ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; } body.phone #viewsWrap .kpi{ margin:0 !important; } /* Bedienelemente auf Fingergröße — 44 px ist Apples Mindestmaß. */ /* ⚠️ Auch die kleinen Knöpfe: Filter-Reset, Status-Chip, Bearbeiten und Kebab lagen bei 24–30 px (Nachkontrolle 07.08.2026). 44 px ist Apples Mindestmaß für alles Antippbare. */ body.phone #viewsWrap .ordFiltReset, body.phone #viewsWrap .stBtn, body.phone #viewsWrap .ib, body.phone #viewsWrap .orderEditBtn, body.phone #viewsWrap .orderDelBtn, body.phone #viewsWrap .ordMoreBtn{ min-width:44px !important; min-height:44px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } body.phone #viewsWrap .btn, body.phone #viewsWrap .ctl, body.phone #viewsWrap select, body.phone #viewsWrap input[type=text], body.phone #viewsWrap input[type=search]{ min-height:44px !important; font-size:16px !important; /* ⚠️ unter 16px zoomt Safari beim Antippen hinein */ border-radius:10px !important; } /* ⚠️ Die Regel darüber greift nur INNERHALB von `#viewsWrap` — und genau daran ist die Anmeldung vorbeigerutscht: `#mLogin` ist ein Fenster auf Ebene des Seitenkörpers, nicht Teil der Ansichten. Peter, 07.08.2026: *„wenn ich mich mit meinem iPhone anmelde und dann meinen namen eingebe dann zoomt es das fenster ran, das mag ich nicht."* Kein iPhone-Eigenleben, sondern eine feste Regel von Safari: Bekommt ein Eingabefeld den Fokus und ist seine Schrift kleiner als 16 px, zoomt Safari heran — und **zoomt danach nicht wieder heraus**. Gemessen: die Anmeldefelder standen auf 13,3 px, dem Vorgabewert des Browsers für Formularfelder (es war nie eine Größe gesetzt). ⚠️ NICHT über `maximum-scale=1, user-scalable=no` im Viewport lösen: das nimmt allen auch das absichtliche Aufziehen mit zwei Fingern, und neuere iOS-Fassungen ignorieren es ohnehin. 16 px ist die eigentliche Ursache und für ein Telefon ohnehin die bessere Größe. ⚠️ Gilt für JEDES Fenster, nicht nur die Anmeldung — sonst fällt beim nächsten neuen Dialog wieder eines durchs Raster. */ body.phone .modal input, body.phone .modal select, body.phone .modal textarea, body.phone .modal .ctl{ font-size:16px !important; } /* ── Alles Ändernde entfällt am Telefon ───────────────────────────────────────────── Peter, 07.08.2026: „nur anzeigen und gar keine eingaben." Die zweite Schicht (die Sperre in `open()`) sitzt in index.html — was man hier nicht sieht, tippt man erst gar nicht an, und was doch aufgeht, faengt die Sperre ab. ⚠️ Der Grundsatz: Bedienelemente, die eine Eingabemaske oeffnen oder Daten aendern. Alles zum ANSEHEN bleibt — Dateivorschau, Sendungsverfolgung, Vollansicht der Liste. */ body.phone #viewsWrap .orderEditBtn, /* Bearbeiten-Stift in der Bestellzeile */ body.phone #viewsWrap .orderDelBtn, /* Loeschen */ body.phone #viewsWrap .ordMoreBtn, /* Kebab: Kopieren/Loeschen */ body.phone #viewsWrap .stBtn, /* Status-Chip aendert den Status */ body.phone .dbCustFab, /* „Dashboard anpassen" aendert das Layout */ /* ⚠️ ALLE „Neu"-Knoepfe, je Modul einer. Die Nachkontrolle (08.08.2026) fand hier eine Luecke: `.ordNewBtn` stand zwar in dieser Liste, existiert aber an KEINEM Element — ein toter Selektor. „+ Neue Bestellung" (149x38 px) stand deshalb sichtbar oben links. Die echten Kennungen sind diese: */ body.phone #bNewOrder, body.phone #bNewSup, body.phone #bNewCus, body.phone #bNewHsc, body.phone #bNewComp, body.phone #bNewCalc, body.phone #bNewCusD, body.phone #bNewCbam, body.phone #bNewTtEntry, body.phone #bNewQcInsp, body.phone #bNewExpReport{ display:none !important; } /* ⚠️ Zwei Eingabemasken sind KEINE `.modal` und gehen deshalb an jedem Riegel vorbei, der auf diese Klasse schaut: · `#hscWizard` (HS-Klassifizierung) — `class="hsc-modal-overlay"`, wird ueber das Attribut `hidden` auf- und zugemacht, nicht ueber eine Klasse. · `#cbOvMan` (CBAM „Manuell erfassen"). Die Nachkontrolle hat beide am Telefon vollstaendig geoeffnet bekommen, samt beschreibbarem Feld. `display:none !important` schlaegt hier auch jede Zuweisung aus dem Modul heraus — das ist der einzige Riegel, den ein `style.display=''` nicht hebelt. */ html body.phone #hscWizard, html body.phone #cbOvMan{ display:none !important; } /* ── Nichts scrollt quer, nichts haengt hinaus ────────────────────────────────────── Peter, 07.08.2026: *„ich will nicht horizontal scrollen müssen, mach es wirklich wie eine richtige scheinbar echte iOS APP."* Gemessen bei 390x844 — zwei Stellen waren schuld: 1. `#ttSubTabs` (die Unterreiter der Zeiterfassung): `overflow-x:auto` mit `flex-wrap:nowrap` — sichtbar 308 px, Inhalt **835 px**. Man musste also quer schieben, um „Aufgaben" oder „Anwesenheit" ueberhaupt zu erreichen. ⚠️ Umbrechen statt schieben. Eine echte iOS-App legt so etwas um, sie versteckt nichts hinter einer Wischgeste, die man nicht sieht. 2. Der Filter-Reset ist 144 px breit (Symbol + „Alle Filter zuruecksetzen") und stand mit der grossen Ueberschrift in EINER Zeile von 308 px — er ragte bis 426 px hinaus und wurde abgeschnitten. Auch hier: umbrechen lassen. ⚠️ Der Riegel darunter (`max-width:100%` auf alles im Ansichtsbereich) ist die Rueckversicherung fuer alles, was ich noch nicht gemessen habe. Er zwingt nichts in eine Form, er verhindert nur das Hinausragen. */ /* ⚠️ Nach der KLASSE, nicht nach der Kennung. Der erste Anlauf traf nur `#ttSubTabs` — die Reisekosten benutzen dieselbe Klasse unter der Kennung `#expSubTabs` (views/expenses.view.html Z.84) und blieben unberuehrt: 789 px Inhalt in 308 px Kasten. Fund der Nachkontrolle 08.08.2026. */ body.phone .ttSubTabs{ flex-wrap:wrap !important; overflow-x:visible !important; gap:6px !important; } /* ⚠️ Die breiten Datentabellen scrollten ebenfalls quer — der `max-width:100%`-Riegel verhindert nur das Hinausragen der SEITE, nicht das Schieben INNERHALB eines Kastens. Gemessen (Nachkontrolle 08.08.2026): Compliance 912 px in 307, HS-Klassifizierung 1313 in 308, CBAM 960 in 335, Kalkulation 395 in 307, Auswertungen 756 in 307. Statt zu schieben werden die Tabellen jetzt in die Breite gezwungen: `table-layout:fixed` verteilt die Spalten auf die vorhandene Breite, lange Inhalte brechen um statt hinauszulaufen. Das ist der Weg, den eine echte iOS-App geht — sie versteckt nichts hinter einer Wischgeste, die man nicht sieht. ⚠️ Nur am Telefon. Am Rechner bleiben die Tabellen wie sie sind. */ body.phone #compTableWrap, body.phone .hsc-lv-tablewrap, body.phone .cbTblWrap, body.phone .table{ overflow-x:clip !important; } /* ⚠️ JEDE Tabelle im Ansichtsbereich, nicht nur die namentlich bekannten. Nach dem ersten Anlauf blieben noch `#viewCbam` (336/419) und eine Tabelle in der Kalkulation (307/395) uebrig — es lohnt nicht, sie einzeln zu jagen, wenn die Regel ohnehin fuer alle gilt. */ body.phone #viewsWrap table{ table-layout:fixed !important; width:100% !important; min-width:0 !important; } body.phone #viewsWrap section, body.phone #viewsWrap .card{ overflow-x:clip !important; } /* ⚠️ CBAM und Kalkulation sind KEINE echten ``, sondern Raster aus `
` — `table-layout` greift dort nicht, und sie ragten weiter hinaus (336/419 bzw. 307/395). Der uebliche Grund dafuer: Raster- und Flex-Kinder haben von Haus aus `min-width:auto` und schrumpfen deshalb NICHT unter ihren Inhalt. `min-width:0` hebt genau das auf, damit sie sich in die vorhandene Breite fuegen und der Text umbricht statt abgeschnitten zu werden. */ body.phone #viewCbam *, body.phone #viewCalc *{ min-width:0 !important; } body.phone #viewCbam .cbTbl > *, body.phone #viewCalc .table > *{ overflow-wrap:anywhere !important; } body.phone #compTableWrap td, body.phone #compTableWrap th, body.phone .hsc-lv-tablewrap td, body.phone .hsc-lv-tablewrap th, body.phone .cbTblWrap td, body.phone .cbTblWrap th, body.phone .table td, body.phone .table th{ overflow-wrap:anywhere !important; white-space:normal !important; } body.phone #viewsWrap .secHd{ flex-wrap:wrap !important; row-gap:8px !important; } body.phone #viewsWrap .ordFiltReset{ max-width:100% !important; } body.phone #viewsWrap, body.phone #viewsWrap > section{ overflow-x:clip !important; /* clip statt hidden: erzeugt keinen Scrollkontext */ } body.phone #viewsWrap *{ max-width:100% !important; } /* ── Detailseite statt Schublade ──────────────────────────────────────────────────── Die Bestellung ist der Bildschirm, den man am haeufigsten sieht. Als Schublade blieb oben ein toter Streifen stehen und der Inhalt hatte nur 92 % der Hoehe. iOS zeigt so etwas als ganze Seite mit Zurueck-Pfeil oben links. ⚠️ GEWICHTUNG: Die Schubladen-Regel oben ist `body.phone .modal:not(#mLogin) .dlg` — das sind 1 Kennung + 3 Klassen. Ein naives `body.phone #mDbDetail .dlg` hat nur 2 Klassen und VERLIERT, trotz `!important` (erster Anlauf am 07.08. scheiterte genau daran, gemessen: Eckenradius blieb 16px). Deshalb `#mDbDetail.modal` — gleiche Gewichtung — reichte aber NICHT: dieser Block steht in der Datei FRUEHER als die Schubladen-Regel, und bei gleicher Gewichtung gewinnt die spaetere. Nachgemessen: Eckenradius blieb 16px. Deshalb zusaetzlich `html` davor — das hebt die Gewichtung um ein Element an und macht sie damit unabhaengig von der Reihenfolge. ⚠️ Bewusst NUR die Detailseite. Kurze Rueckfragen (Loeschen bestaetigen, Konflikt) bleiben Schubladen — eine ganze Seite waere dafuer zu viel. */ html body.phone #mDbDetail.modal{ align-items:stretch !important; padding:0 !important; } html body.phone #mDbDetail.modal .dlg{ border-radius:0 !important; width:100% !important; max-width:100% !important; height:100% !important; max-height:100% !important; margin:0 !important; display:flex !important; flex-direction:column !important; } /* Das ✕ oben rechts weicht dem Pfeil — zwei Wege zurueck sind einer zu viel. */ html body.phone #mDbDetail.modal .dlg > .x{ display:none !important; } /* Der Inhalt bekommt den Rest der Seite und scrollt darin. */ html body.phone #mDbDetail.modal #dbDetailBody{ flex:1 1 auto; min-height:0; overflow-y:auto; } .phZurueckLeiste{ position:sticky; top:0; z-index:5; flex:0 0 auto; display:flex; align-items:center; min-height:44px; padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px; margin:0 -18px 8px; /* die Polsterung des Dialogs wieder ausgleichen */ background:var(--phLeiste); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:.5px solid rgba(0,0,0,.16); } .phZurueck{ display:inline-flex; align-items:center; gap:5px; min-height:44px; padding:0 10px 0 6px; /* 44 px Tippflaeche, Apples Mass */ background:none; border:0; cursor:pointer; color:var(--phBlau); font:inherit; font-size:17px; letter-spacing:-.4px; } .phZurueck svg{ width:12px; height:19px; flex:0 0 auto; } .phZurueck:active{ opacity:.5; } /* ── Kacheln der Übersicht im iOS-Widget-Stil ─────────────────────────────────────── Die Übersicht besteht bereits aus Kacheln (`.dbKitTile`), sie standen am Telefon aber einspaltig und breit-flach — jede fraß eine Bildschirmzeile, man scrollte an fünf Kacheln vorbei. iOS legt so etwas als **zwei Spalten** an: großes Symbol oben, Zahl groß darunter, Beschriftung klein und grau. ⚠️ `display` wird hier bewusst NICHT angefasst (auch nicht ohne `!important`). Das ist die Lehre aus dem Datenschutz-Fehler vom 08.08.2026: Eine Regel, die `display` erzwingt, kann einen Behälter zurückholen, den JavaScript aus gutem Grund verborgen hat. Geprüft: `.dbKitTiles` wird von keiner Stelle per JavaScript ein-/ausgeblendet — trotzdem bleibt es beim Grundsatz, nur die Spalten zu setzen. ⚠️ Das alte Kennzahlen-Raster `#dbKpis` ist am Telefon ohnehin nicht sichtbar; es musste also nichts ersetzt werden. */ body.phone #dbKitTiles{ grid-template-columns:1fr 1fr !important; gap:12px !important; margin-top:12px !important; } body.phone #dbKitTiles .dbKitTile{ flex-direction:column !important; align-items:flex-start !important; gap:9px !important; padding:14px !important; min-height:118px; justify-content:space-between; } /* Symbol etwas kleiner, damit Zahl und Text die Hauptrolle behalten. */ body.phone #dbKitTiles .dbKitTile .tic{ width:32px !important; height:32px !important; } /* Die Beschriftung darf umbrechen statt abgeschnitten zu werden — auf 2 Spalten ist schlicht weniger Breite als auf 5. */ body.phone #dbKitTiles .dbKitTile .ttx b{ white-space:normal !important; font-size:14px !important; } body.phone #dbKitTiles .dbKitTile .ttx span{ display:block !important; font-size:12px !important; } /* Die große Zahl bekommt iOS-Gewicht. */ body.phone #dbKitTiles .dbKitTile .tnum, body.phone #dbKitTiles .dbKitTile .dbKitNum{ font-size:28px !important; font-weight:700 !important; letter-spacing:-.6px !important; } /* ── Filterblock: Suche bleibt, der Rest klappt zu ────────────────────────────────── Gemessen: Die erste Bestellung begann erst bei 1208 px — anderthalb Bildschirme Filterfelder standen davor. iOS zeigt Suche oben und die Liste sofort darunter. ⚠️ Die Felder werden nur AUSGEBLENDET, nicht entfernt: ein gesetzter Filter bleibt wirksam, auch wenn er gerade nicht zu sehen ist (die Chips im Kopf zeigen ihn an). */ body.phone .phFilterKarte .grid > *{ display:none !important; } body.phone .phFilterKarte .grid > .phSuchKasten{ display:block !important; } body.phone .phFilterKarte.phFilterAuf .grid > *{ display:block !important; } body.phone .phFilterKarte .grid > .phSuchKasten label{ display:none !important; } /* Die grosse Ueberschrift „FILTER & SUCHE" braucht am Telefon niemand — der Bildschirm heisst ohnehin „Bestellungen". Der Knopf steht an ihrer Stelle. */ body.phone .phFilterKarte .secHdTxt{ display:none !important; } body.phone .phFilterKarte .secHd{ margin-bottom:8px !important; } .phFilterKnopf{ display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px; border-radius:9px; background:rgba(120,120,128,.12); border:0; cursor:pointer; color:var(--phBlau); font:inherit; font-size:15px; letter-spacing:-.2px; margin-left:auto; /* rechts neben die Chips */ } .phFilterKnopf svg{ width:16px; height:16px; } .phFilterKnopf:active{ opacity:.55; } .phFilterKnopf[aria-expanded="true"]{ background:var(--phBlau); color:#fff; } /* ── Status als Segment-Schalter (iOS) ────────────────────────────────────────────── Statt eines Auswahlfeldes, das man erst aufklappen muss: alle Zustaende nebeneinander. ⚠️ Bricht um statt quer zu scrollen. Das Auswahlfeld dahinter bleibt der Herr ueber den Filter (siehe _phSegBauen) — hier wird nur seine Anzeige ersetzt. */ body.phone .phFilterKarte .phSuchKasten ~ * .phSeg, body.phone .phSeg{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .phSegKnopf{ flex:0 1 auto; min-height:34px; padding:0 13px; border-radius:9px; background:rgba(120,120,128,.12); border:0; cursor:pointer; color:var(--phTinte); font:inherit; font-size:15px; letter-spacing:-.2px; -webkit-tap-highlight-color:transparent; } .phSegKnopf.an{ background:var(--phBlau); color:#fff; font-weight:500; } .phSegKnopf:active{ opacity:.6; } /* Das Auswahlfeld selbst tritt zurueck — der Schalter zeigt dasselbe. */ body.phone .phFilterKarte #fOrdStatus{ display:none !important; } /* Der kleine Hinweis, wenn doch etwas Aenderndes angetippt wurde. */ .phHinweis{ position:fixed; left:50%; transform:translateX(-50%) translateY(8px); bottom: calc(var(--phTabHoehe) + 12px + env(safe-area-inset-bottom, 0px)); z-index:320; /* ueber der Reiterleiste (300), unter Vollbildfenstern */ max-width:88vw; padding:11px 16px; border-radius:12px; background:rgba(28,28,30,.92); color:#fff; font-size:14px; line-height:1.35; text-align:center; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; } .phHinweis.auf{ opacity:1; transform:translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce){ .phHinweis{ transition:none; } } /* ── „Mehr" — Vollbildliste über allem ────────────────────────────────────────────── */ .phMehr{ position:fixed; inset:0; z-index:299; display:none; background:var(--phGrund); overflow-y:auto; padding: calc(env(safe-area-inset-top, 0px) + 8px) 0 calc(var(--phTabHoehe) + env(safe-area-inset-bottom, 0px) + 16px); } .phMehr.auf{ display:block; } .phMehrTitel{ font-size:32px; font-weight:700; letter-spacing:-.8px; color:var(--phTinte); margin:8px 20px 14px; } .phMehrGruppe{ margin:0 16px 18px; } .phMehrGruppe > p{ font-size:13px; color:var(--phGrau); text-transform:uppercase; letter-spacing:.4px; margin:0 0 7px 16px; font-weight:400; } .phMehrKarte{ background:#fff; border-radius:12px; overflow:hidden; } .phMehrZeile{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 14px; border:0; border-bottom:.5px solid var(--phTrenner); background:#fff; font:inherit; font-size:16px; color:var(--phTinte); text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; } .phMehrZeile:last-child{ border-bottom:0; } .phMehrZeile:active{ background:#e5e5ea; } .phMehrZeile .ph_i{ width:29px; height:29px; border-radius:7px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; } .phMehrZeile .ph_i svg{ width:17px; height:17px; } .phMehrZeile .ph_t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .phMehrZeile .ph_c{ width:8px; height:13px; opacity:.32; flex:0 0 auto; } /* ── Lindas Blase hat am Telefon nichts verloren ────────────────────────────────── Peter, 07.08.2026: „Linda brauchen wir da nicht." Sie liegt auf z-index 99990 und verdeckte damit die Reiter unten rechts — das waren die „fehlenden Menüpunkte". */ body.phone .aic-fab, body.phone .aic-panel, body.phone .aic-border-trail{ display:none !important; } /* ⚠️ DASSELBE MUSTER, zweiter Fall: `.tt-sync-toast` (z-index 10000, unten rechts) lag ebenfalls über der Reiterleiste — gemessen über „Zeit" und „Mehr". Anders als Lindas Blase wird die Meldung aber gebraucht, also wird sie hochgeschoben statt ausgeblendet. ⚠️ Wer künftig etwas fest unten rechts platziert, muss hier ebenfalls eintragen. */ body.phone .tt-sync-toast{ bottom: calc(var(--phTabHoehe) + env(safe-area-inset-bottom, 0px) + 12px) !important; left:12px !important; right:12px !important; width:auto !important; } /* ── Listen als Karten statt Tabelle ────────────────────────────────────────────── ⚠️ Rein aus dem vorhandenen Markup: `tr` wird zur Karte, `td` zum Block. Welche Spalten bleiben, entscheidet ihre POSITION im Tabellenkopf: 1 # · 2 Status · 3 Kunde · 4 Produkt · 5 Notiz · 6 Bild · 7 Lieferant · 8 Bestellt · 9 Fertig · 10 Transport · 11 Spediteur · 12 ETD · 13 ETA · 14 Tracking · 15 Menge · 16 Warenwert · 17 Dokumente · 18 Aktion ⚠️ Wer im Tabellenkopf eine Spalte einfügt, muss diese Liste mitziehen. */ body.phone #viewOrders .table, body.phone #viewSuppliers .table, body.phone #viewCustomers .table{ overflow:visible !important; border:0 !important; background:transparent !important; } body.phone #viewOrders table, body.phone #viewOrders tbody, body.phone #viewOrders tr, body.phone #viewSuppliers table, body.phone #viewSuppliers tbody, body.phone #viewSuppliers tr, body.phone #viewCustomers table, body.phone #viewCustomers tbody, body.phone #viewCustomers tr{ display:block !important; width:100% !important; } body.phone #viewOrders thead, body.phone #viewSuppliers thead, body.phone #viewCustomers thead{ display:none !important; } body.phone #viewOrders tbody tr, body.phone #viewSuppliers tbody tr, body.phone #viewCustomers tbody tr{ background:#fff !important; border-radius:12px !important; margin:0 0 10px !important; padding:12px 14px !important; border:0 !important; box-shadow:none !important; position:relative !important; } body.phone #viewOrders tbody td, body.phone #viewSuppliers tbody td, body.phone #viewCustomers tbody td{ display:block !important; border:0 !important; padding:0 !important; white-space:normal !important; font-size:14px !important; color:var(--phGrau) !important; background:transparent !important; } /* Bestellungen: Produkt groß, darunter Kunde, dann ETA und Warenwert. Der Rest fliegt raus. */ body.phone #viewOrders tbody td:not(:nth-child(4)):not(:nth-child(3)):not(:nth-child(2)):not(:nth-child(13)):not(:nth-child(16)):not(:nth-child(18)){ display:none !important; } body.phone #viewOrders tbody td:nth-child(4){ font-size:16px !important; font-weight:600 !important; color:var(--phTinte) !important; letter-spacing:-.2px !important; margin-bottom:2px !important; } body.phone #viewOrders tbody td:nth-child(2){ margin-top:8px !important; } body.phone #viewOrders tbody td:nth-child(13)::before{ content:'ETA '; opacity:.7; } body.phone #viewOrders tbody td:nth-child(16){ font-weight:600 !important; color:var(--phTinte) !important; } body.phone #viewOrders tbody td:nth-child(18){ position:absolute !important; top:10px !important; right:8px !important; display:block !important; width:auto !important; } /* Lieferanten und Kunden: Name groß, Rest knapp. */ body.phone #viewSuppliers tbody td:nth-child(2), body.phone #viewCustomers tbody td:nth-child(2){ font-size:16px !important; font-weight:600 !important; color:var(--phTinte) !important; } body.phone #viewSuppliers tbody td:nth-child(1), body.phone #viewCustomers tbody td:nth-child(1){ display:none !important; } /* ── Kopfleiste ausdünnen ───────────────────────────────────────────────────────── Peter, 07.08.2026: „Cloud Synchron kann weg, wer online ist kann weg, die Fahnen können weg, damit kann alles weiter hochrutschen." ⚠️ Gemessen waren es 218 px — ein Viertel des Bildschirms für Angaben, die unterwegs niemand braucht. Der Seitentitel geht mit: die Ansicht trägt darunter ihren eigenen großen Titel, oben stand er ein zweites Mal. */ body.phone #appShell header #sbPageTitle, body.phone #appShell header .sbTtl, body.phone #appShell header .metaTxt, body.phone #appShell header #langWrap{ display:none !important; } body.phone #appShell header{ padding-top:calc(env(safe-area-inset-top, 0px) + 4px) !important; padding-bottom:4px !important; min-height:0 !important; } body.phone #appShell header .container.row{ min-height:0 !important; gap:8px !important; } /* ── Fenster von unten hereinschieben, wie iOS-Sheets ─────────────────────────────── ⚠️ NICHT das Anmeldefenster: das gehört in die Mitte, nicht an den unteren Rand (Peter, 07.08.2026 — mein Fehler aus v4.386). */ body.phone .modal:not(#mLogin) .dlg{ border-radius:16px 16px 0 0 !important; max-height:92vh !important; margin-top:auto !important; width:100% !important; max-width:100% !important; } body.phone .modal:not(#mLogin){ align-items:flex-end !important; } body.phone #mLogin.modal{ align-items:center !important; } body.phone #mLogin .dlg{ border-radius:18px !important; width:92% !important; max-width:92% !important; margin:auto !important; } /* Nichts darf unter dem Home-Balken kleben. */ body.phone .listFoot, body.phone .intFoot{ padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important; } @media (prefers-reduced-motion: reduce){ .phTab, .phMehrZeile{ transition:none !important; } } } /* ══ Nur Hochformat ═══════════════════════════════════════════════════════════════════ Peter: „im Querformat soll es sich nicht drehen." ⚠️ Hart sperren könnte nur das Manifest (`"orientation":"portrait"`) — das gälte aber für JEDES Gerät, das die App installiert, also auch fürs iPad. Dort ist das Querformat ausdrücklich hergerichtet (eigener Umbruchpunkt bei 981 px). Das Manifest bleibt deshalb auf `any`, und stattdessen legt sich am Telefon im Querformat dieser Hinweis darüber. ⚠️ Die Bedingung trifft genau Telefone: ein iPhone quer ist 390–430 px hoch, ein iPad quer 768 px und mehr. `max-height` statt `max-width` — im Querformat ist die HÖHE das verräterische Maß. */ @media (orientation: landscape) and (max-height: 520px) and (max-width: 950px){ body.phone .phDrehen{ position:fixed; inset:0; z-index:400; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#f2f2f7; color:#1c1c1e; text-align:center; padding:24px; } body.phone .phDrehen svg{ width:56px; height:56px; color:#2a87c8; } body.phone .phDrehen b{ font-size:19px; font-weight:600; letter-spacing:-.3px; } body.phone .phDrehen span{ font-size:15px; color:#8e8e93; max-width:34ch; } /* Die Reiterleiste hat im Querformat nichts zu suchen. */ body.phone .phTabs, body.phone .phMehr{ display:none !important; } } @media not all and (orientation: landscape) and (max-height: 520px){ .phDrehen{ display:none; } } .phDrehen{ display:none; }