/* crm-handy.css — das CRM am Handy (Exitstrategy #501, 30.09.2026). Alles haengt an html.handy, das crm-handy.js nur unterhalb der Seitenleisten-Grenze setzt. Am Rechner greift hier nichts. */ #hbSchublade, #hbTitel, #schublade, #schubSchatten { display: none; } /* ── S4: Raender — nichts unter Statusleiste und Android-Knoepfen ───────────────────────────── */ /* backdrop-filter macht den Kopf zum Anker jeder festen Leiste darin (dieselbe Falle wie die Seitenleiste am Rechner, crm.html) — die Schublade muss am Bildschirm haengen, nicht am Kopf. */ html.handy header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); padding-top: env(safe-area-inset-top); } html.handy.schubauf header { z-index: 64; } /* ueber Fussleiste (60) und Werkzeugleiste (22), unter jedem Fenster (65+) */ html.handy #toast { bottom: calc(18px + env(safe-area-inset-bottom)); } /* Chrome deutet ein Wischen vom linken Rand als „Seite zurueck" (history.back → crm-zurueck.js springt einen Reiter zurueck) — gemessen im Pruefstand; die Schublade bekam die Beruehrung nie. Die App (WebView) kennt die Geste nicht, der Browser am Handy schon. Die System-Geste von Android bleibt. */ html.handy, html.handy body { overscroll-behavior-x: none; } /* ── S2: kompakte Kopfzeile: ☰ · Reiter · 💬 · ⋯ ─────────────────────────────────────────── */ html.handy .hbar { flex-wrap: nowrap; overflow: visible; gap: 6px; padding: 6px 8px; max-width: none; } html.handy .hbar > * { flex: 0 0 auto; } html.handy #hbSchublade { display: inline-flex; align-items: center; justify-content: center; font-size: 22px; border-color: var(--acc); color: var(--txt); } html.handy #hbTitel { display: block; flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 16.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } html.handy #hbMehrBox { right: 0; max-width: calc(100vw - 16px); } html.handy #hbAnruf { display: none; } /* 07.10.2026: am Handy ruft „Anrufen“ unten in der Fußleiste an */ /* ── S1: die Schublade ───────────────────────────────────────────────────────────────────── */ html.handy #schublade { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: min(84vw, 320px); z-index: 2; background: var(--card2); border-right: 1px solid var(--line); padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); transform: translateX(-102%); transition: transform .2s ease; visibility: hidden; /* EIN Rollbereich fuer alles: am Geraet gemessen fraß die Knopfliste unten sonst den Platz, und von 30 Reitern war genau einer zu sehen. */ overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } html.handy.schubauf #schublade { transform: none; visibility: visible; box-shadow: 8px 0 28px var(--schatten); } html.handy #schubSchatten { position: fixed; inset: 0; z-index: 1; background: var(--scrim); } html.handy.schubauf #schubSchatten { display: block; } /* Die 💬-Blase (fbFabInit, z-index 2147483000) lag am Geraet ueber der offenen Schublade. */ html.handy.schubauf #fbFab { display: none !important; } @media (prefers-reduced-motion: reduce) { html.handy #schublade { transition: none; } } html.handy #schubKopf { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 12px 10px; border-bottom: 1px solid var(--line); } html.handy #schubKopf .who { margin: 0; text-align: left; max-width: 100%; white-space: normal; } /* Die Reiter selbst: senkrecht, wie die Seitenleiste am Rechner. */ html.handy #schublade .tabs { position: relative; flex: 0 0 auto; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 3px; overflow: visible; max-width: none; margin: 0; padding: 8px 10px; } html.handy #schublade .tabs button { justify-content: flex-start; text-align: left; border-radius: 10px; min-height: 48px; padding: 10px 12px; font-size: 15.5px; background: transparent; border-color: transparent; } html.handy #schublade .tabs button.on { background: var(--accflaeche); color: #fff; border-color: var(--acc); } html.handy #schublade .tablbl { white-space: normal; } html.handy #schubKopf, html.handy #schubHinweis { flex: 0 0 auto; } html.handy #schubFuss { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-top: 1px solid var(--line); } html.handy #schubFuss button { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 46px; border: 0; background: transparent; font-size: 15px; text-align: left; gap: 10px; } html.handy #schubFuss button[data-schub]::after { content: attr(data-schub); color: var(--txt); font-weight: 600; } html.handy #schubFuss #appver { padding: 4px 12px 0; margin: 0; min-height: 44px; display: flex; align-items: center; } /* antippbar: oeffnet den Versionsverlauf (crm-versionen.js) */ /* S3: der Hinweis beim ersten Start. */ html.handy #schubHinweis { margin: 10px 10px 2px; padding: 12px; border-radius: 12px; border: 1px solid var(--acc); background: var(--card); font-size: 14.5px; line-height: 1.45; } html.handy #schubHinweis[hidden] { display: none; } html.handy #schubHinweis div { margin: 6px 0 10px; color: var(--mut2); } html.handy #schubHinweis button { width: 100%; } /* ── S6: Fenster bildschirmfuellend, ✕ bleibt oben ───────────────────────────────────────── */ /* Der Abstand zur Statusleiste haengt an der FESTEN ✕-Zeile, nicht am rollenden Fenster: am Geraet gemessen rollte ein Innenabstand des Fensters mit, und der Inhalt lief unter die Uhrzeit. */ html.handy .ov-handy { padding: 0 !important; background: var(--card) !important; } html.handy .ov-handy > .ovbox-full { width: 100% !important; max-width: none !important; margin: 0 !important; min-height: 100vh; border-radius: 0 !important; border-left: 0; border-right: 0; border-top: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); } html.handy .ov-handy > .ovbox-full:not(:has(.ov-kopf)) { padding-top: calc(14px + env(safe-area-inset-top)); } html.handy .ov-kopf { position: sticky; top: 0; z-index: 6; background: var(--card); padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; } html.handy .ovfullbtn { display: none !important; } /* Vollbild ist am Handy immer an */ /* ── Die Erklaerkarte oben auf jeder Seite (guideZeigen, crm-app.js) ────────────────────── Hagen, 30.09.2026: „mach die Verstanden-Knoepfe immer unter den ersten Erklaertext, am Handy sieht das besser aus." Am Rechner steht der Knopf rechts daneben (unveraendert); am Handy quetschte er den Text in eine schmale Spalte. Hier: erst der ganze Text, darunter die Knoepfe. */ html.handy [id^="guide_"] { flex-wrap: wrap; } html.handy [id^="guide_"] > div { flex: 1 1 100% !important; } html.handy [id^="guide_"] > button.btn { flex: 1 1 auto !important; } /* ── S7: Fingergroesse 44 px (WCAG 2.5.5, dieselbe Zahl wie die Reiter, crm.html) ──────────── */ html.handy button { min-height: 44px; min-width: 44px; } /* Bewusst NICHT angefasst: Links mitten im Fliesstext („… einen Klick entfernt") — WCAG 2.5.8 nimmt Inline-Ziele aus; sie groesser zu machen, risse den Satz auseinander. */ /* ── Akten am Handy (Hagen 30.09.2026 „das CRM haerten", zu #501) ────────────────────────────── Gemessen mit handy-akten-lokal-e2e.cjs bei 360 px und Beispieldaten, wie sie im Alltag vorkommen (Firmenwortlaut, lange E-Mail-Adresse, Dateinamen mit Unterstrichen, viele Dokumente): in allen sechs Akten ragten Zeilen aus dem Bildschirm, das ✕ lag ausserhalb oder rollte mit weg, und die Kopfknoepfe der Partnerakte waren 36 px hoch. Die Ursachen, jede an ihrer Wurzel: */ /* 1. Lange Woerter (E-Mail, URL, Dateiname, Firmenwortlaut) brechen um, statt die Zeile zu sprengen. `anywhere` statt `break-word`: nur so zaehlt das Wort nicht mehr als Mindestbreite eines Flex-Elements — sonst blieb die Zeile trotzdem zu breit. */ html.handy #view, html.handy .ov-handy { overflow-wrap: anywhere; } /* Ausgenommen Tabellen: sie rollen in ihrem eigenen Bereich — sonst zoege eine Spalte „1.234.567,89 €" in zwei Zeilen auseinander, statt dass die Tabelle seitlich rollt. */ html.handy #view table, html.handy .ov-handy table { overflow-wrap: normal; } /* 2. Zeilen aus Text und Knoepfen brechen um, statt seitlich hinauszulaufen. Die Zeilen sind im Hausmuster Inline-Stile ohne Klasse (Dokumente, Ordner, Produkte, Provisionen …); gemeint ist jede Flex-Zeile in einem Fenster. Umgebrochen wird nur, was nicht passt. */ html.handy .ov-handy [style*="display:flex"], html.handy .ov-handy [style*="display: flex"] { flex-wrap: wrap; } /* 3. Innenabstand: das Fenster fuellt den Schirm, der Inhalt klebt trotzdem nicht am Rand (die Kundenakte hatte gar keinen). Der Akten-Kopf reicht wie am Rechner bis an die Kante. */ html.handy .ov-handy > .ovbox-full { padding-left: 12px !important; padding-right: 12px !important; } html.handy .ov-handy .akteKopf { margin: 0 -12px 10px; padding-left: 12px; padding-right: 12px; } /* Rollt der Kasten selbst (Partnerakte: max-height + overflow), klebt der Kopf an seinem Innenrand — sein oberer Innenabstand wurde zu einem Streifen, durch den der Inhalt ueber dem ✕ durchlief. */ html.handy .ov-handy > .ovbox-full:has(> .ov-kopf) { padding-top: 0 !important; } /* 4. Die ✕-Zeile (crm-handy.js markiert Titel und ✕): Titel und ✕ in der ersten Zeile, alle weiteren Knoepfe darunter. Vorher stand ✕ hinter den anderen Knoepfen — rechts ausserhalb des Bildschirms (Kunde, Produkt) — und ein langer Name machte die Zeile so hoch, dass sie nicht mehr als Kopf galt und wegrollte. Der Titel steht hoechstens zweizeilig; der volle Name steht im Feld darunter. */ html.handy .ov-kopf { flex-wrap: wrap !important; row-gap: 6px; } html.handy .ov-kopf:not(.akteKopf) { box-shadow: 0 1px 0 var(--line); } /* der Akten-Kopf hat seine Linie schon */ html.handy .ov-kopf > .ov-titel { order: -2; flex: 1 1 0 !important; min-width: 0 !important; margin: 0; font-size: 17px !important; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } html.handy .ov-kopf > .ov-x { order: -1; } /* Exitstrategy #768 (06.10.2026): Fenster mit eigenem Inline-Kopf („Hilfe & Feedback": top:-16px, margin:-16px, padding:16px) schlugen den Abstand zur Statusleiste — „Schließen" lag unter der Uhrzeit. */ html.handy .ov-kopf { top: 0 !important; margin-top: 0 !important; padding-top: calc(6px + env(safe-area-inset-top)) !important; } /* Der Zeilenumbruch hinter dem ✕: ein leeres Flex-Element ueber die volle Breite. */ html.handy .ov-kopf::after { content: ''; order: -1; flex: 0 0 100%; height: 0; margin-top: -6px; } /* 5. 44 px auch dort, wo ein Fenster die Hoehe selbst setzt (.akteKopf 36 px, „📊 Grafik" 24 px inline) — und fuer die Auswahl-Chips der Partnerakte (label.pill mit verstecktem Haken). */ html.handy .ov-handy button { min-height: 44px !important; min-width: 44px !important; } html.handy .ov-handy label.pill { display: inline-flex; align-items: center; min-height: 44px; } /* ── Geraetetest 01.10.2026 (App 1.4.0, Galaxy S23, per USB) ────────────────────────────────── Die Nummern F… sind die Befunde aus diesem Test; was Verhalten braucht, steht in crm-handy.js. */ /* F3/F7: `overflow-wrap: anywhere` (oben, 1.) macht die Mindestbreite jedes Textes zu EINEM Zeichen. Ein Flex-Element mit flex:1 schrumpfte deshalb auf eine 50 px schmale Spalte, statt in die naechste Zeile zu gehen („Servic/e-/Partn/er" in der Partnerkarte), und Knopftexte brachen mitten im Wort („Kar/ten", „Tab/elle"). Jetzt: ein Knopf bricht ein Wort nur noch, wenn es allein nicht in die Zeile passt (anders als `anywhere` macht `break-word` die Mindestbreite nicht kleiner als das laengste Wort; `max-width` haelt den Knopf im Bildschirm — „💾 Änderungen speichern („")" ragte mit `normal` hinaus, gemessen in handy-akten-lokal-e2e); dehnbarer Text hat eine Mindestbreite und rutscht lieber in die naechste Zeile; Knopfzeilen duerfen umbrechen. */ html.handy #view button, html.handy .ov-handy button { overflow-wrap: break-word; max-width: 100%; } html.handy #view [style*="flex:1"]:not(input):not(select):not(textarea), html.handy .ov-handy [style*="flex:1"]:not(input):not(select):not(textarea) { min-width: min(100%, 9em); } html.handy #view div:has(> button.sm) { flex-wrap: wrap; } /* F17: eine Tabelle im Inhalt (Team › Stundensaetze: 385 px in einer 356 px breiten Karte) machte die ganze Seite 414 px breit — und damit jedes Fenster darueber, dessen ✕ und ▼ rechts abgeschnitten waren. Eine zu breite Tabelle rollt jetzt in ihrem eigenen Kasten. */ html.handy #view :has(> table), html.handy .ov-handy :has(> table) { overflow-x: auto; max-width: 100%; } /* F6: die Auswahl-Pillen (Heute › „Zeigen: …") sind