/* ============================================================================ common/portal-mobile-talent.css · fs96 ---------------------------------------------------------------------------- ZWECK Mobil-Nacharbeit AUSSCHLIESSLICH fuer das TALENT-Portal. Ergaenzt die grosse, gewachsene common/portal-mobile.css — sie widerspricht ihr nicht, sondern raeumt auf, was dort fehlt oder danebengeht. Alles ist auf `.talent-shell` bzw. auf eindeutig talent-eigene Bauteile gescoped, damit nichts ins Admin-Portal leckt (Lehre aus dem Header-Glass-Leak). LADEREIHENFOLGE (wichtig!) Diese Datei muss als LETZTE CSS-Datei geladen werden — NACH portal-mobile.css, calendar.css, chat.css, invoice-overview.css und portal-dna.css. Nur dann gewinnt sie bei Spezifitaets-Gleichstand ueber die Position. BREITEN-MODELL DES PROJEKTS ≤768px Handy-Schicht (Hamburger-Drawer) — portal-mobile.css 769–900 KAPUTT im Bestand (siehe §1) — hier repariert 901+ fixe Seitenleiste, funktioniert Die beruechtigte Totzone 761–768px wurde auf 760/764/768/769px im Simulator nachgemessen: bis 768 greift die Handy-Schicht sauber, das Loch liegt in Wahrheit DIREKT DARUEBER (§1). GEMESSEN AUF (echte Geraete, Safari im Simulator, Xcode 26.6): iPhone 17 (402pt) · iPhone 17 Pro Max · iPad mini A17 Hochformat (744pt) iPad Pro 11" Hochformat (834pt) · Breiten-Rahmen 760/764/768/769/950/1024 NICHT ENTHALTEN: der Insights-Reiter (wird gerade umgebaut). ============================================================================ */ /* ============================================================================ §1 TABLET-BAND 769–900px — die Seitenleiste liegt UEBER dem Inhalt ---------------------------------------------------------------------------- BEFUND (iPad Pro 11" Hochformat, 834pt, gemessen): nav.dashboard-tabs → position:fixed, left:0, breit 25px, Inhalt 72px .talent-panel → margin-left:0 (statt 64px) Ursache: portal-v93-professional.css setzt die Leiste unbedingt auf `position:fixed; left:0`, waehrend im Block `@media (max-width:900px)` die Regel `html body #dashboard-view .card, ... .talent-panel { margin-left:0 }` den Seitenversatz wieder wegnimmt. Ergebnis: die Navigation ist ein 25px breiter Splitter, ihre Symbole sind abgeschnitten, und der Inhalt laeuft links darunter ("Dashboard" liest sich als "ashboard"). Betrifft JEDES Standard-iPad im Hochformat (820/834pt) auf ALLEN Seiten. Einen Hamburger gibt es hier nicht — der ist erst ≤768px sichtbar. BEHEBUNG: sauberer 64px-Symbolstreifen wie oberhalb von 900px, Inhalt daneben statt darunter, Tippziele ≥44pt. ============================================================================ */ @media (min-width: 769px) and (max-width: 900px) { /* Leiste: echte 64px, volle Hoehe, eigener Scroll, ueber dem Inhalt liegend */ html body #dashboard-view#dashboard-view.talent-shell .talent-main > nav.dashboard-tabs, html body #dashboard-view#dashboard-view.talent-shell .dashboard-tabs { position: fixed !important; top: var(--tt-header-h, 64px) !important; left: 0 !important; right: auto !important; bottom: 0 !important; width: 64px !important; min-width: 64px !important; max-width: 64px !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; margin: 0 !important; padding: 10px 6px calc(10px + env(safe-area-inset-bottom, 0px)) !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; z-index: 900 !important; } /* Inhalt daneben statt darunter — schlaegt die margin-left:0-Regel aus v93 */ html body #dashboard-view#dashboard-view.talent-shell .talent-main > .talent-panel, html body #dashboard-view#dashboard-view.talent-shell .talent-main > section, html body #dashboard-view#dashboard-view.talent-shell .talent-main > .talent-global-alerts { margin-left: 64px !important; width: calc(100vw - 64px) !important; max-width: calc(100vw - 64px) !important; min-width: 0 !important; box-sizing: border-box !important; } /* Reiter: 48x48 Symbolflaeche (Apple-Mindestmass mit Rand) */ html body #dashboard-view#dashboard-view.talent-shell .dashboard-tabs .dashboard-tab, html body #dashboard-view#dashboard-view.talent-shell .dashboard-tabs .dashboard-subtab { width: 50px !important; min-width: 50px !important; max-width: 50px !important; height: 46px !important; min-height: 46px !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border-radius: 11px !important; } html body #dashboard-view#dashboard-view.talent-shell .dashboard-tabs .nav-icon, html body #dashboard-view#dashboard-view.talent-shell .dashboard-tabs .nav-icon svg { width: 22px !important; height: 22px !important; flex: 0 0 auto !important; } html body #dashboard-view#dashboard-view.talent-shell .dashboard-tabs .dashboard-tab.hidden { display: none !important; } /* Rechnungs-Unterpunkte: im Bestand nur mit .is-active-parent sichtbar (die Klasse setzt talent.js). Zusaetzlich per :has() absichern, damit die drei Unterpunkte auf dem iPad garantiert erreichbar sind — sonst kommt man an "Rechnung erstellen"/"Brand-Ordner" hier gar nicht heran. */ html body #dashboard-view#dashboard-view.talent-shell .dashboard-tabs:has(#dashboard-invoices-tab.active) .dashboard-subgroup { display: flex !important; position: static !important; flex-direction: column !important; align-items: center !important; gap: 3px !important; width: auto !important; max-height: none !important; margin: 2px 0 0 !important; padding: 5px 0 0 !important; background: transparent !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, .16) !important; box-shadow: none !important; overflow: visible !important; } html body #dashboard-view#dashboard-view.talent-shell .dashboard-tabs .dashboard-subgroup .nav-label, html body #dashboard-view#dashboard-view.talent-shell .dashboard-tabs .dashboard-subgroup .nav-label-mini { display: none !important; } /* Fenster/Overlays duerfen nicht hinter der fixen Leiste kleben. fs96-Nachtrag: `.talent-modal-overlay` gibt es AUCH im Admin-Portal — die frueher hier stehende ungescopte Fassung htte dorthin geleckt. Die Fenster liegen ausserhalb von #dashboard-view, deshalb ueber :has() am body festgemacht statt als Nachfahre. */ html body:has(#dashboard-view.talent-shell) .talent-modal-overlay:not(.hidden) { z-index: 1400 !important; } } /* ============================================================================ §2 KOPFZEILE + wiederkehrende Bedienelemente (bis 900px) ---------------------------------------------------------------------------- BEFUND (402pt und 744pt gemessen): ☰ Hamburger 42 x 24 ← das Haupt-Navigationsziel! Glocke #tt-notif-toggle-btn 40 x 32 Profil- 36 x 32 Profil-Menuepunkte 266 x 33 Ursache der zu geringen Hoehe: `html body .talent-shell .talent-header > * { height:auto !important }` aus portal-v87-fixes.css schlaegt jede Hoehenangabe. Wir kontern mit 2 IDs (1,4,3) statt 0,3,3. ============================================================================ */ @media (max-width: 900px) { html body #dashboard-view#dashboard-view.talent-shell .talent-header > .tt-navburger { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 2px 0 -2px !important; flex: 0 0 auto !important; } html body #dashboard-view#dashboard-view.talent-shell .talent-header .tt-notif-toggle-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; flex: 0 0 auto !important; } html body #dashboard-view#dashboard-view.talent-shell .talent-header .talent-profile-menu > summary { height: 44px !important; min-height: 44px !important; min-width: 44px !important; padding: 0 4px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Kuerzel im Kreis war 11px — knapp unter der Lesbarkeitsgrenze */ html body #dashboard-view#dashboard-view.talent-shell .talent-header .talent-profile-avatar { width: 34px !important; height: 34px !important; font-size: 12.5px !important; } /* Profil-Klappmenue: Eintraege waren 33px hoch */ html body #dashboard-view#dashboard-view.talent-shell .talent-profile-dropdown > button { min-height: 46px !important; display: flex !important; align-items: center !important; } /* Runde Symbol-Knoepfe in den Panel-Koepfen (Aktualisieren) bleiben BEWUSST 32px gross (V228o: "Refresh-Icon war 42px zu gross"). Statt sie optisch aufzublasen bekommen sie eine unsichtbare 44x44-Trefferflaeche. */ html body #dashboard-view#dashboard-view.talent-shell .talent-panel-header-row .btn-icon, html body #dashboard-view#dashboard-view.talent-shell .talent-panel-header .btn-icon { position: relative !important; } html body #dashboard-view#dashboard-view.talent-shell .talent-panel-header-row .btn-icon::after, html body #dashboard-view#dashboard-view.talent-shell .talent-panel-header .btn-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); /* fs102: kein border-radius. Die Flaeche ist unsichtbar, der Kreis brachte nichts — er nahm nur die vier Ecken aus der Trefferflaeche heraus (am Geraet geprueft: +-21px treffen, die Ecke bei +-20/+-20 nicht). */ } /* Benachrichtigungs-Panel: Schliessen 28x28, "Alle gelesen" 34px hoch */ html body #dashboard-view#dashboard-view.talent-shell #tt-notif-panel .tt-notif-close { width: 44px !important; height: 44px !important; min-width: 44px !important; font-size: 24px !important; } html body #dashboard-view.talent-shell #tt-notif-panel .tt-notif-panel-footer .btn-secondary, html body #dashboard-view.talent-shell #tt-notif-panel #tt-notif-mark-all-btn { min-height: 46px !important; padding-top: 0 !important; padding-bottom: 0 !important; } html body #dashboard-view.talent-shell #tt-notif-panel .tt-notif-panel-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; } } /* ============================================================================ §3 DIE PWA-EINLADUNG VERDECKT DIE ANMELDUNG (echter Blocker) ---------------------------------------------------------------------------- BEFUND (iPhone 17, 402x714, gemessen): Banner .tt-pwa-banner y=506 h=196 (fix, z-index 2147483000) .tt-captcha y=466 h=65 → unteres Drittel verdeckt #talent-login-btn y=559 h=46 → KOMPLETT verdeckt #talent-forgot-btn y=633 h=37 → KOMPLETT verdeckt Wer sich zum ersten Mal anmeldet, kommt nicht an "Anmelden" heran; das Banner ist position:fixed, Scrollen half nicht, weil die Anmeldeseite unten keinen Freiraum hat. BEHEBUNG: Solange das Banner im DOM ist, bekommt die Anmeldeflaeche unten so viel Reserve, dass Captcha + Knopf ueber das Banner gescrollt werden koennen. pwa-install.js bleibt unangetastet. Streng auf das TALENT-Login gescoped (#talent-login-form) — das Manager- Login (#signin) bleibt unberuehrt. ============================================================================ */ @media (max-width: 1024px) { /* Auf der ANMELDESEITE verlaesst das Banner die fixe Ebene und stellt sich unter das Formular. Damit kann es grundsaetzlich nichts mehr verdecken — Reserve allein haette nicht gereicht: das Formular ist ~600px hoch, ueber dem Banner bleiben nur ~506px, der Knopf laege also auch nach dem Scrollen wieder darunter. Die Einladung bleibt sichtbar und schliessbar, sie steht nur hinter dem, wofuer die Seite da ist. pwa-install.js setzt seine Werte ohne !important — deshalb genuegt das. */ html body.tt-auth-dark:has(#talent-login-form) > .tt-pwa-banner { position: static !important; transform: none !important; opacity: 1 !important; margin: 18px auto calc(18px + env(safe-area-inset-bottom, 0px)) !important; max-width: min(440px, calc(100% - 24px)) !important; } html body.tt-auth-dark:has(#talent-login-form):has(> .tt-pwa-banner) #auth-view.tt-auth-shell { padding-bottom: 8px !important; } html body.tt-auth-dark:has(#talent-login-form):has(> .tt-pwa-banner) #auth-view.tt-auth-shell .tt-auth-main { padding-bottom: 24px !important; } /* Gleiches Problem, kleinere Wirkung: im Dashboard legt sich das Banner ueber die letzten Zeilen jeder Seite (auf dem iPad ueber "Korrigieren" in der Rechnungsliste, ueber Termin-Pillen im Kalender). Bodenluft dazu. */ html body:has(> .tt-pwa-banner) #dashboard-view.talent-shell .talent-main > .talent-panel, html body:has(> .tt-pwa-banner) #dashboard-view.talent-shell .talent-main > section { padding-bottom: calc(236px + env(safe-area-inset-bottom, 0px)) !important; } } /* Der Schliessen-Knopf des Banners ist 36–46 x 38 — auf 44x44 anheben. Global (Banner haengt am ), aber ausschliesslich dieses eine Element. */ @media (max-width: 1024px) { html body .tt-pwa-banner .tt-pwa-x { width: 44px !important; height: 44px !important; top: 6px !important; right: 6px !important; } html body .tt-pwa-banner .tt-pwa-num { width: 22px !important; height: 22px !important; font-size: 12px !important; } } /* ============================================================================ §4 UEBERSICHT — Kennzahlen waren zu klein zum Lesen ---------------------------------------------------------------------------- BEFUND (402pt): .dash-kpi-period 8.5px (enthaelt BETRAEGE: "brutto [Betrag]"), Kachel-Beschriftung 9.5px, .dash-kpi-sub 10.5px, .dash-kpi-group-head 10px. Alles unter der 12px-Grenze. ============================================================================ */ @media (max-width: 900px) { html body #dashboard-view#dashboard-view.talent-shell #overview-panel .dash-kpi .dash-kpi-period { font-size: 12px !important; line-height: 1.3 !important; } html body #dashboard-view#dashboard-view.talent-shell #overview-panel .dash-kpi .dash-kpi-label, html body #dashboard-view#dashboard-view.talent-shell #overview-panel .dash-kpi .dash-kpi-label > span { font-size: 12px !important; line-height: 1.3 !important; } html body #dashboard-view#dashboard-view.talent-shell #overview-panel .dash-kpi .dash-kpi-sub { font-size: 12px !important; line-height: 1.4 !important; } html body #dashboard-view#dashboard-view.talent-shell #overview-panel .dash-kpi-group-head { font-size: 12px !important; } html body #dashboard-view#dashboard-view.talent-shell #overview-panel .dash-chart-header h3, html body #dashboard-view#dashboard-view.talent-shell #overview-panel .dash-footnote { font-size: 12.5px !important; } /* Waehrung/Zeitraum: 40px (Handy) bzw. 32px (Tablet) hoch → 44 */ html body #dashboard-view#dashboard-view.talent-shell #overview-panel .dash-toolbar select { height: 44px !important; min-height: 44px !important; font-size: 13.5px !important; } html body #dashboard-view#dashboard-view.talent-shell #overview-panel .dash-toolbar .dash-control > span { font-size: 12px !important; } } /* ============================================================================ §5 KOOPERATIONEN ---------------------------------------------------------------------------- BEFUND (402pt): Statuspille .cooperation-status 8.4px (die WICHTIGSTE Information der Karte), "Rechnungsdaten"-Etikett 10px, Feldnamen 11px. "Rechnung stellen" 328x34, "Kampagnen-Link" 99x17, "Tabelle" 91x34. Zusaetzlich: lange Rechnungsadressen/E-Mails brauchen einen Wortumbruch, sonst reissen sie die Karte auf. ============================================================================ */ @media (max-width: 900px) { html body #dashboard-view#dashboard-view.talent-shell .cooperation-card .cooperation-status { font-size: 12px !important; line-height: 1.35 !important; padding: 5px 10px !important; white-space: normal !important; } html body #dashboard-view#dashboard-view.talent-shell .cooperation-card .coop-billing-label, html body #dashboard-view#dashboard-view.talent-shell .cooperation-card .cooperation-field > span, html body #dashboard-view#dashboard-view.talent-shell .cooperation-card .coop-budget > span, html body #dashboard-view#dashboard-view.talent-shell .cooperation-card-footer > span { font-size: 12px !important; } /* Primaeraktion und Detail-Link auf Fingergroesse */ html body #dashboard-view#dashboard-view.talent-shell .cooperation-card .cooperation-invoice-cta .btn-primary { min-height: 46px !important; height: auto !important; font-size: 14px !important; } html body #dashboard-view#dashboard-view.talent-shell .cooperation-card .coop-details-btn { min-height: 44px !important; font-size: 13px !important; padding: 8px 14px !important; } html body #dashboard-view#dashboard-view.talent-shell .cooperation-card-footer a { display: inline-flex !important; align-items: center !important; min-height: 44px !important; font-size: 12.5px !important; } html body #dashboard-view#dashboard-view.talent-shell #cooperation-status-panel .talent-panel-actions .btn-secondary { min-height: 44px !important; height: auto !important; } /* Lange Firmennamen / Mailadressen: umbrechen statt die Karte sprengen — kein Trennstrich mitten im Wort erzwingen, aber ueberall brechen duerfen. */ html body #dashboard-view#dashboard-view.talent-shell .cooperation-card .cooperation-field > strong, html body #dashboard-view#dashboard-view.talent-shell .cooperation-card .coop-billing-grid strong, html body #dashboard-view#dashboard-view.talent-shell .cooperation-card h3 { min-width: 0 !important; overflow-wrap: anywhere !important; word-break: normal !important; hyphens: none !important; } } /* ============================================================================ §6 VERTRAEGE ---------------------------------------------------------------------------- BEFUND: .contract-status 8.4px (402pt UND 744pt). Filter-Zaehler 10.5px. Auf dem iPad (834pt) stehen vier gleichrangige Knoepfe ("Pruefen & unterschreiben / Vorschau / PDF oeffnen / PDF herunterladen") in EINER 34px hohen Zeile (510px fuer vier Knoepfe). ============================================================================ */ @media (max-width: 1024px) { html body #dashboard-view#dashboard-view.talent-shell #contracts-panel .contract-status { font-size: 12px !important; line-height: 1.35 !important; padding: 4px 10px !important; } html body #dashboard-view#dashboard-view.talent-shell #contracts-panel .contract-meta > span { font-size: 12.5px !important; } html body #dashboard-view#dashboard-view.talent-shell #contracts-panel .talent-tab-count { font-size: 12px !important; } html body #dashboard-view#dashboard-view.talent-shell #contracts-panel .talent-tabs .talent-tab { min-height: 46px !important; } html body #dashboard-view#dashboard-view.talent-shell #contracts-list .contract-row .contract-title { overflow-wrap: anywhere !important; } } /* Tablet: die vier Aktionen umbrechen lassen und auf 44pt Hoehe bringen (auf dem Handy erledigt das bereits portal-mobile.css). */ @media (min-width: 769px) and (max-width: 1024px) { html body #dashboard-view#dashboard-view.talent-shell #contracts-list .contract-row .contract-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: flex-end !important; } html body #dashboard-view#dashboard-view.talent-shell #contracts-list .contract-row .contract-actions > button { min-height: 46px !important; height: auto !important; } } /* ============================================================================ §7 RECHNUNGEN ---------------------------------------------------------------------------- 7a) TABLET (769–1024px): die Kartenansicht fehlt. Gemessen auf dem iPad Pro 11" Hochformat (834pt): die Tabelle ist 1756px breit, die Aktionsspalte ("Korrigieren", "Mehr") beginnt bei x=1416 — man muss ~1400px waagerecht IN der Tabelle scrollen, um die Hauptaktion einer Rechnung zu erreichen. Die Kartenansicht aus portal-mobile.css (V127) endet bei 768px. Sie wird hier fuer das Talent-Portal auf 1024px verlaengert (nur .talent-shell — das Admin-Portal, das dieselbe .inv-table nutzt, bleibt unberuehrt). 7b) Schriftgroessen und Tippziele der Liste (beide Breiten). ============================================================================ */ @media (min-width: 769px) and (max-width: 1024px) { html body #dashboard-view.talent-shell .inv-table-wrap { overflow-x: visible !important; } html body #dashboard-view.talent-shell .inv-table { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; table-layout: auto !important; border-collapse: collapse !important; } html body #dashboard-view.talent-shell .inv-table colgroup, html body #dashboard-view.talent-shell .inv-table thead { display: none !important; } html body #dashboard-view.talent-shell .inv-table tbody { display: block !important; } html body #dashboard-view.talent-shell .inv-table tbody tr { display: block !important; position: relative !important; border: 1px solid #e6e9ef !important; border-radius: 14px !important; background: #fff !important; padding: 14px 16px 12px !important; margin: 0 0 12px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important; } html body #dashboard-view.talent-shell .inv-table tbody td { display: flex !important; width: auto !important; border: 0 !important; padding: 5px 0 !important; min-height: 0 !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; text-align: right !important; font-size: 14px !important; white-space: normal !important; } html body #dashboard-view.talent-shell .inv-table tbody td[data-label]::before { content: attr(data-label); flex: 0 0 auto; color: #8a94a3; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; text-align: left; } html body #dashboard-view.talent-shell .inv-table tbody td.sticky { position: static !important; left: auto !important; z-index: auto !important; box-shadow: none !important; background: transparent !important; } /* 20.08.2026 — DIE RECHNUNGSNUMMER LIEF UNTER DAS STATUS-ABZEICHEN. GEMESSEN bei 360x800: die Zelle ist 282 px breit, ihr Inhalt braucht 336 px, overflow steht auf hidden — und das Abzeichen liegt absolut bei right:16px. Ergebnis: 83,5 px Ueberlappung, "[Rechnung]-LANG-0000042" und "Entwurf" standen sichtbar uebereinander gedruckt. Bei 430 px trat es nicht auf. Die Nummer darf jetzt umbrechen statt unter das Abzeichen zu laufen. */ html body #dashboard-view.talent-shell .inv-table tbody td.sticky-num { justify-content: flex-start !important; padding: 0 110px 2px 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; overflow: visible !important; height: auto !important; } html body #dashboard-view.talent-shell .inv-table tbody td.sticky-stat { position: absolute !important; top: 14px !important; right: 16px !important; width: auto !important; padding: 0 !important; } html body #dashboard-view.talent-shell .inv-table tbody td.inv-customer-cell { flex-direction: column !important; align-items: flex-start !important; text-align: left !important; gap: 2px !important; padding: 2px 0 10px !important; margin-bottom: 8px !important; border-bottom: 1px solid #f0f2f6 !important; max-width: 100% !important; overflow-wrap: anywhere !important; /* 20.08.2026 — LANGE FIRMENNAMEN WURDEN MITTEN IM WORT DURCHGESCHNITTEN. GEMESSEN bei 360x800: die Zelle behielt die feste Tabellenzeilenhoehe von 44 px (clientHeight 43, scrollHeight 63). Ein Name wie "Internationale Handelsgesellschaft fuer Nahrungsergaenzungsmittel und Sportnahrung mbH & Co. KG" braucht drei Zeilen, es passten zweieinhalb — die dritte war waagerecht in der Buchstabenmitte gekappt. In einer Karte gibt es kein Zeilenraster, die Hoehe folgt dem Inhalt. */ height: auto !important; min-height: 0 !important; overflow: visible !important; } html body #dashboard-view.talent-shell .inv-table tbody td.inv-actions-cell { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; box-sizing: border-box !important; padding: 10px 0 2px !important; flex-wrap: nowrap !important; } html body #dashboard-view.talent-shell .inv-table tbody td.inv-actions-cell .inv-btn.small { flex: 1 1 auto !important; height: 46px !important; font-size: 13.5px !important; justify-content: center !important; border-radius: 10px !important; } html body #dashboard-view.talent-shell .inv-table tbody td.inv-actions-cell .inv-kebab { height: 46px !important; border-radius: 10px !important; } } /* 7b) Lesbarkeit + Tippziele der Rechnungsliste (Handy UND Tablet) */ @media (max-width: 1024px) { /* Filter-Chips waren 30px hoch, Zaehler 9px */ html body #dashboard-view#dashboard-view.talent-shell .inv-shell .inv-chip { min-height: 44px !important; font-size: 12.5px !important; padding: 0 10px !important; display: inline-flex !important; align-items: center !important; } html body #dashboard-view#dashboard-view.talent-shell .inv-shell .inv-chip b { font-size: 12px !important; min-width: 20px !important; height: 20px !important; } html body #dashboard-view#dashboard-view.talent-shell .inv-shell .inv-summary, html body #dashboard-view#dashboard-view.talent-shell .inv-shell .inv-summary strong, html body #dashboard-view#dashboard-view.talent-shell .inv-shell .inv-summary span { font-size: 12.5px !important; } html body #dashboard-view#dashboard-view.talent-shell .inv-shell .search-box input, html body #dashboard-view#dashboard-view.talent-shell .inv-shell .card-header-actions input { height: 46px !important; min-height: 46px !important; } html body #dashboard-view#dashboard-view.talent-shell .inv-shell .card-header-actions .btn-icon-action { width: 46px !important; height: 46px !important; min-width: 46px !important; } html body #dashboard-view#dashboard-view.talent-shell .inv-shell .card-header-actions .btn-primary { min-height: 46px !important; } /* Kartenkopf: Nummer + Status waren 30px hohe Knoepfe mit 11px Schrift */ html body #dashboard-view#dashboard-view.talent-shell .inv-shell .inv-table .inv-num { min-height: 44px !important; font-size: 15.5px !important; } html body #dashboard-view#dashboard-view.talent-shell .inv-shell .inv-table .inv-status-btn { min-height: 44px !important; } html body #dashboard-view#dashboard-view.talent-shell .inv-shell .inv-table .inv-status-label { font-size: 12.5px !important; } html body #dashboard-view#dashboard-view.talent-shell .inv-shell .inv-table .inv-cell-sub, html body #dashboard-view#dashboard-view.talent-shell .inv-shell .inv-table .inv-event-meta, html body #dashboard-view#dashboard-view.talent-shell .inv-shell .inv-table .inv-event-main { font-size: 12.5px !important; } /* Rechnungs-Unterreiter (Uebersicht/Erstellen/Brand-Ordner) waren 40px hoch. Die Bestandsregel in portal-mobile.css haengt an `nav.dashboard-tabs:has(#dashboard-invoices-tab.active) … .dashboard-subtab` — das :has() bringt eine weitere ID mit (2 IDs / 4 Klassen). Wir matchen mit drei IDs, sonst bleibt es bei 40px. */ html body #dashboard-view#dashboard-view#dashboard-view.talent-shell .dashboard-subgroup .dashboard-subtab, html body #dashboard-view#dashboard-view#dashboard-view.talent-shell .invoice-subtabs .invoice-subtab { min-height: 46px !important; height: auto !important; } html body #dashboard-view#dashboard-view#dashboard-view.talent-shell .dashboard-subgroup .nav-label-mini { font-size: 12.5px !important; } /* Aktionszeile der Rechnungskarte: portal-mobile.css (V228aa) klemmt `.inv-btn.small` und `.inv-kebab` auf 38px Hoehe — das ist die Hauptaktion je Rechnung ("Korrigieren", "Zahlung melden"). */ html body #dashboard-view#dashboard-view#dashboard-view.talent-shell .inv-shell .inv-table td.inv-actions-cell .inv-btn.small, html body #dashboard-view#dashboard-view#dashboard-view.talent-shell .inv-shell .inv-table td.inv-actions-cell .inv-kebab { height: 46px !important; min-height: 46px !important; font-size: 13.5px !important; } /* Rechnungsnummer als Kartentitel: 40px breit war zu schmal zum Treffen */ html body #dashboard-view#dashboard-view#dashboard-view.talent-shell .inv-shell .inv-table .inv-num { min-width: 56px !important; text-align: left !important; } } /* Die feste Segmentleiste oben wird durch die 46px-Reiter etwas hoeher — die Platzreserve des Panels mitziehen, sonst rutscht der Titel darunter. */ @media (max-width: 768px) { html body #dashboard-view.talent-shell:not(.talent-auth-view):has(#dashboard-invoices-tab.active) > .talent-main > .talent-panel, html body #dashboard-view.talent-shell:not(.talent-auth-view):has(#dashboard-invoices-tab.active) > .talent-main > section { padding-top: 70px !important; } } /* Brand-Ordner: Kacheln als vollwertige Tippziele */ @media (max-width: 1024px) { html body #dashboard-view#dashboard-view.talent-shell #brand-folders-grid .brand-folder-card { min-height: 64px !important; } html body #dashboard-view#dashboard-view.talent-shell #brand-folders-grid .brand-folder-card-name { overflow-wrap: anywhere !important; } html body #dashboard-view#dashboard-view.talent-shell #brand-folders-grid .brand-folder-card-meta { font-size: 12.5px !important; } html body #dashboard-view#dashboard-view.talent-shell #brand-folders-back-btn { min-height: 44px !important; } } /* ============================================================================ §8 HUB — lange Kampagnennamen sprengen die gestapelte Ansicht ---------------------------------------------------------------------------- BEFUND (402pt): Panel scrollWidth 597 bei clientWidth 402, der Hub-Scroller 575 bei 358 — also 217px unerreichbarer Inhalt. Auslöser ist eine echte Kampagne mit sehr langem Namen aus dem Umsatz-Import. portal-mobile.css (V124d) stapelt die Zeile mit `grid-template-columns: 1fr`. `1fr` ist `minmax(auto,1fr)` — die Spur waechst also bis zur Mindestbreite des Inhalts, und die Kartentitel stehen auf `white-space:nowrap`. Richtig ist `minmax(0, 1fr)`. ============================================================================ */ @media (max-width: 900px) { /* Ab 769px greift die Stapelung aus portal-mobile.css (V124d) nicht mehr — auf dem iPad im Hochformat bleibt der Hub deshalb ein 1026px breiter Waagerecht-Scroller in einem 770px breiten Panel. Dieselbe Stapelung hier fuer das Tablet-Band wiederholen (Spaltenkopf weg, Marke oben, Kette darunter), dann passt der Hub auch dort in die Breite. */ html body #dashboard-view.talent-shell #network-panel #talent-network-mount > div[style*="overflow-x:auto"] { overflow-x: visible !important; padding-bottom: 0 !important; } html body #dashboard-view.talent-shell #network-panel #talent-network-mount > div[style*="overflow-x:auto"] > div { min-width: 0 !important; } html body #dashboard-view.talent-shell #network-panel #talent-network-mount div[style*="margin-bottom:14px"] { display: none !important; } html body #dashboard-view.talent-shell #network-panel #talent-network-mount div[style*="align-items:stretch"][style*="margin-bottom:16px"] { flex-direction: column !important; align-items: stretch !important; } html body #dashboard-view.talent-shell #network-panel #talent-network-mount div[style*="margin-bottom:16px"] > div:first-child { flex: 1 1 auto !important; width: 100% !important; margin-bottom: 10px !important; } html body #dashboard-view.talent-shell #network-panel #talent-network-mount div[style*="border-left:2px solid #e2e8f0"] { border-left: 0 !important; gap: 14px !important; } html body #dashboard-view.talent-shell #network-panel #talent-network-mount div[style*="flex:0 0 24px"] { display: none !important; } html body #dashboard-view.talent-shell #network-panel #talent-network-mount div[style*="grid-template-columns:24px"] { gap: 8px !important; padding: 10px !important; border: 1px solid #eef0f4 !important; border-radius: 12px !important; background: #fafbfc !important; } html body #dashboard-view.talent-shell #network-panel #talent-network-mount div[style*="grid-template-columns:24px"] { grid-template-columns: minmax(0, 1fr) !important; } /* Die Karten selbst duerfen ebenfalls nicht ueber ihren Platz hinauswachsen */ html body #dashboard-view.talent-shell #network-panel #talent-network-mount div[style*="grid-template-columns:24px"] > div, html body #dashboard-view.talent-shell #network-panel #talent-network-mount div[style*="margin-bottom:16px"] > div:first-child > div { min-width: 0 !important; max-width: 100% !important; } /* Titel duerfen umbrechen statt die Spur aufzublasen */ html body #dashboard-view.talent-shell #network-panel #talent-network-mount span[style*="text-overflow:ellipsis"] { white-space: normal !important; overflow: hidden !important; overflow-wrap: anywhere !important; } /* Suchfeld + Umschalter auf Fingergroesse (waren 36 bzw. 34px) */ html body #dashboard-view#dashboard-view.talent-shell #talent-network-search { height: 46px !important; font-size: 16px !important; } html body #dashboard-view#dashboard-view.talent-shell #talent-network-toggle-done { min-height: 46px !important; height: auto !important; } /* Kartentyp-Etiketten ("KAMPAGNEN", "VERTRAG" …) waren 9.5px */ html body #dashboard-view.talent-shell #talent-network-mount .tt-hub-kind { font-size: 12px !important; } /* Der Hub ist vollstaendig inline gestylt (talent.js). Die Kleinschriften 9.5 / 10.5 / 11 px lassen sich nur ueber das style-Attribut greifen — das ist im Projekt fuer den Hub bereits die etablierte Technik (V124d). Betrifft: Kampagnen-Zaehler der Marke, Plattform/Budget-Zeile, die Status-Pille der Rechnung ("Ausstehend"/"Ueberfaellig"/"Zahlung erhalten"). */ html body #dashboard-view.talent-shell #talent-network-mount span[style*="font-size:9.5px"], html body #dashboard-view.talent-shell #talent-network-mount span[style*="font-size:10px"], html body #dashboard-view.talent-shell #talent-network-mount span[style*="font-size:10.5px"], html body #dashboard-view.talent-shell #talent-network-mount span[style*="font-size:11px"], html body #dashboard-view.talent-shell #talent-network-mount span[style*="font-size:11.5px"] { font-size: 12px !important; } } @media (min-width: 769px) and (max-width: 1024px) { html body #dashboard-view#dashboard-view.talent-shell #talent-network-search { height: 46px !important; } html body #dashboard-view#dashboard-view.talent-shell #talent-network-toggle-done { min-height: 46px !important; height: auto !important; } } /* ============================================================================ §9 KALENDER ---------------------------------------------------------------------------- BEFUND (iPhone 17, 402pt): Das Monatsraster hat 7 Spalten zu je ~51px. Die Termin-Pillen sind 44x22 gross und ihr Text wird von 183px auf 34px abgeschnitten — auf dem Bildschirm steht "09:0…", "Sund…", "Fälli…". Man sieht also, DASS an einem Tag etwas ist, aber nie WAS. Gleichzeitig sind die Zellen durch `grid-auto-rows:1fr` bis zu 250px hoch und fast leer. BEHEBUNG auf dem Handy (≤560px): Der Monat wird eine Tagesliste. Tage OHNE Termin bleiben eine schmale Zeile, Tage MIT Termin zeigen jeden Termin als volle, 44pt hohe, vollstaendig lesbare Zeile. Das Antippen bleibt exakt wie bisher (Pille = Termin oeffnen, Tag = neuer Termin) — es wird kein Verhalten umgebaut, nur die Darstellung. Auf Tablets (561–900px) bleibt das Raster; dort sind die Zellen 100–113px breit, die Pillen bekommen nur mehr Hoehe und zwei Textzeilen. ============================================================================ */ @media (max-width: 560px) { html body #dashboard-view.talent-shell #calendar-panel .ttcal-dowrow { display: none !important; } html body #dashboard-view.talent-shell #calendar-panel .ttcal-cells { display: block !important; grid-auto-rows: auto !important; min-width: 0 !important; } html body #dashboard-view.talent-shell #calendar-panel .ttcal-cell { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) !important; align-items: start !important; gap: 10px !important; min-height: 46px !important; min-width: 0 !important; padding: 8px 12px !important; border-right: 0 !important; border-bottom: 1px solid #eef0f4 !important; overflow: visible !important; } html body #dashboard-view.talent-shell #calendar-panel .ttcal-daynum { width: 34px !important; height: 34px !important; font-size: 14px !important; align-self: center !important; } /* Tage ohne Termin: schmale, ruhige Zeile */ html body #dashboard-view.talent-shell #calendar-panel .ttcal-cell:not(:has(.ttcal-pill)):not(:has(.ttcal-more)) { min-height: 0 !important; padding: 3px 12px !important; opacity: .55 !important; } html body #dashboard-view.talent-shell #calendar-panel .ttcal-cell:not(:has(.ttcal-pill)) .ttcal-daynum { width: 26px !important; height: 26px !important; font-size: 12.5px !important; } html body #dashboard-view.talent-shell #calendar-panel .ttcal-daylist { gap: 6px !important; min-width: 0 !important; } html body #dashboard-view.talent-shell #calendar-panel .ttcal-pill { display: flex !important; align-items: center !important; width: 100% !important; min-height: 44px !important; max-width: 100% !important; padding: 9px 12px !important; border-radius: 10px !important; font-size: 13px !important; line-height: 1.3 !important; overflow: hidden !important; } html body #dashboard-view.talent-shell #calendar-panel .ttcal-pill-txt { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; } html body #dashboard-view.talent-shell #calendar-panel .ttcal-more { min-height: 44px !important; font-size: 12.5px !important; } /* Die Fuellzellen vor dem Monatsersten haben in der Listenansicht keinen Sinn. MUSS nach der .ttcal-cell-Regel stehen — gleiche Spezifitaet, sonst gewinnt dort display:grid. */ html body #dashboard-view.talent-shell #calendar-panel .ttcal-cell.ttcal-cell-empty { display: none !important; } } @media (min-width: 561px) and (max-width: 900px) { html body #dashboard-view.talent-shell #calendar-panel .ttcal-cell { min-height: 104px !important; } html body #dashboard-view.talent-shell #calendar-panel .ttcal-pill { min-height: 44px !important; display: flex !important; align-items: center !important; font-size: 12px !important; padding: 5px 7px !important; line-height: 1.25 !important; } html body #dashboard-view.talent-shell #calendar-panel .ttcal-more { min-height: 44px !important; font-size: 12px !important; } html body #dashboard-view.talent-shell #calendar-panel .ttcal-pill-txt { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; } html body #dashboard-view.talent-shell #calendar-panel .ttcal-dow { font-size: 12px !important; } html body #dashboard-view.talent-shell #calendar-panel .ttcal-daynum { font-size: 12.5px !important; } } /* Kalender-Werkzeugleiste: alle Knoepfe waren 36px hoch */ @media (max-width: 900px) { html body #dashboard-view#dashboard-view.talent-shell #calendar-panel .ttcal-navbtn, html body #dashboard-view#dashboard-view.talent-shell #calendar-panel .ttcal-todaybtn, html body #dashboard-view#dashboard-view.talent-shell #calendar-panel .ttcal-viewbtn, html body #dashboard-view#dashboard-view.talent-shell #calendar-panel .ttcal-addbtn { min-height: 44px !important; height: auto !important; } html body #dashboard-view#dashboard-view.talent-shell #calendar-panel .ttcal-navbtn { min-width: 44px !important; } } /* ============================================================================ §10 CHAT ---------------------------------------------------------------------------- BEFUND (402pt): Anhaengen-Knopf 34x34, Senden 40x40, Uhrzeit 10px, Tagestrenner 10.5px, Karten-Unterzeile 11.5px. ============================================================================ */ @media (max-width: 900px) { html body #dashboard-view#dashboard-view.talent-shell #chat-panel .ttchat-attach-btn, html body #dashboard-view#dashboard-view.talent-shell #chat-panel .ttchat-file-btn { width: 44px !important; height: 44px !important; flex: 0 0 auto !important; } html body #dashboard-view#dashboard-view.talent-shell #chat-panel .ttchat-send { width: 44px !important; height: 44px !important; flex: 0 0 auto !important; } html body #dashboard-view#dashboard-view.talent-shell #chat-panel .ttchat-input textarea { min-height: 44px !important; } html body #dashboard-view.talent-shell #chat-panel .ttchat-msg-time { font-size: 12px !important; } html body #dashboard-view.talent-shell #chat-panel .ttchat-day { font-size: 12px !important; } html body #dashboard-view.talent-shell #chat-panel .ttchat-head-sub { font-size: 12px !important; } html body #dashboard-view.talent-shell #chat-panel .ttchat-card-sub, html body #dashboard-view.talent-shell #chat-panel .ttchat-card-pill { font-size: 12px !important; } /* Objektkarte in der Blase: lange Rechnungs-/Markennamen umbrechen lassen, statt sie auf halber Strecke abzuschneiden. */ html body #dashboard-view.talent-shell #chat-panel .ttchat-card-title, html body #dashboard-view.talent-shell #chat-panel .ttchat-card-sub { white-space: normal !important; overflow-wrap: anywhere !important; } } /* ============================================================================ §11 PROFIL-FENSTER + Dialoge ---------------------------------------------------------------------------- Ergaenzt portal-mobile.css: dort sind Layout und Abstaende schon geregelt, die Tippziele der Fussleiste und der Abschnittsschalter aber nicht durchweg. ============================================================================ */ @media (max-width: 1024px) { html body #talent-profile-modal .talent-modal-actions button, html body #talent-settings-modal .talent-modal-actions button, html body #signature-template-modal .talent-modal-actions button { min-height: 46px !important; } html body #talent-profile-modal .talent-modal-close, html body #talent-settings-modal .talent-modal-close, html body #signature-template-modal .talent-modal-close { width: 44px !important; height: 44px !important; min-width: 44px !important; } /* Fussleiste eines Fensters darf nicht unter der Home-Leiste liegen */ html body #talent-profile-modal .talent-modal-actions, html body #talent-settings-modal .talent-modal-actions { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; } /* Vertrags-PDF-Fenster: Schliessen-Knopf sicher ueber der Home-Leiste */ html body .talent-pdf-modal-actions button { min-height: 46px !important; } /* Eingabefelder im Profil-Fenster waren 34px hoch (Strasse/PLZ/Ort/Land/USt-ID, Bankdaten). Die Schriftgroesse regelt portal-mobile.css bereits auf 16px (iOS-Zoom-Schutz) — nur die Hoehe fehlte. Drei IDs, weil portal-dna.css und portal-settings.css hier mit doppelter Fenster-ID arbeiten. */ html body #talent-profile-modal#talent-profile-modal#talent-profile-modal .tt-profile-grid input, html body #talent-profile-modal#talent-profile-modal#talent-profile-modal .tt-profile-grid select, html body #talent-profile-modal#talent-profile-modal#talent-profile-modal .tt-profile-grid textarea, html body #talent-settings-modal#talent-settings-modal#talent-settings-modal input, html body #talent-settings-modal#talent-settings-modal#talent-settings-modal select { min-height: 46px !important; height: auto !important; padding-top: 10px !important; padding-bottom: 10px !important; box-sizing: border-box !important; } html body #talent-profile-modal #close-talent-profile-btn, html body #talent-profile-modal .talent-modal-header button { width: 44px !important; height: 44px !important; min-width: 44px !important; } /* Kleinunternehmer-Haken war ein 16px-Kaestchen; Etiketten/Hinweise 9.5–11.5px */ html body #talent-profile-modal#talent-profile-modal input[type="checkbox"] { width: 24px !important; height: 24px !important; min-width: 24px !important; margin-right: 8px !important; } html body #talent-profile-modal#talent-profile-modal label, html body #talent-profile-modal#talent-profile-modal .tt-field-label, html body #talent-profile-modal#talent-profile-modal .tt-profile-hint, html body #talent-profile-modal#talent-profile-modal .talent-muted, html body #talent-profile-modal#talent-profile-modal .tt-profile-grid label > span:first-child, html body #talent-profile-modal#talent-profile-modal #tt-profile-vat-label { font-size: 12px !important; line-height: 1.4 !important; } /* fs102: Das EINSTELLUNGEN-Fenster fehlte hier. portal-settings.css setzt seine Beschriftungen mit !important auf 9,5px — „Sprache", „Datumsformat", „Chat-Benachrichtigungen" und „Portal-Rundgang" blieben deshalb winzig. */ html body #talent-settings-modal#talent-settings-modal label, html body #talent-settings-modal#talent-settings-modal .tt-settings-body label, html body #talent-settings-modal#talent-settings-modal .tt-settings-body p.talent-muted, html body #talent-settings-modal#talent-settings-modal .tt-field-label { font-size: 12px !important; line-height: 1.4 !important; } html body #talent-profile-modal#talent-profile-modal #open-profile-signature-btn, html body #talent-profile-modal#talent-profile-modal .talent-signature-row button { min-height: 46px !important; height: auto !important; font-size: 13px !important; } } /* ============================================================================ §12 ANMELDUNG (nur Talent) ---------------------------------------------------------------------------- BEFUND (402pt): "Zurueck" 108x36, Auge-Umschalter 36x32, "Passwort vergessen?" 167x37. Das Captcha selbst ist in Ordnung. Scope: body:has(#talent-login-form) — das Manager-Login bleibt unberuehrt. ============================================================================ */ @media (max-width: 1024px) { html body.tt-auth-dark:has(#talent-login-form) #auth-view .tt-auth-back-btn { min-height: 44px !important; display: inline-flex !important; align-items: center !important; } html body.tt-auth-dark:has(#talent-login-form) #auth-view .tt-auth-password-toggle { width: 44px !important; height: 44px !important; min-width: 44px !important; top: 50% !important; transform: translateY(-50%) !important; } html body.tt-auth-dark:has(#talent-login-form) #auth-view #talent-forgot-btn { min-height: 44px !important; padding: 0 12px !important; font-size: 13.5px !important; } html body.tt-auth-dark:has(#talent-login-form) #auth-view .tt-auth-submit { min-height: 48px !important; } /* Sprachumschalter war exakt 42px hoch */ html body.tt-auth-dark:has(#talent-login-form) #auth-view .tt-auth-lang-toggle { height: 44px !important; min-height: 44px !important; } } /* ============================================================================ §13 SICHERHEITSABSTAENDE in der installierten App (PWA) ---------------------------------------------------------------------------- Im Browser schuetzt Safaris eigene Leiste die Kopfzeile. In der installierten App (display-mode: standalone) liegt .talent-header bei y=0 — also unter der Dynamic Island. Unten gilt dasselbe fuer die Home-Leiste. Das Portal ist seit 2026-07-07 als PWA live, deshalb hier ausdruecklich abgesichert. ============================================================================ */ @media (display-mode: standalone) and (max-width: 900px) { html body #dashboard-view.talent-shell .talent-header { padding-top: env(safe-area-inset-top, 0px) !important; height: auto !important; min-height: calc(var(--tt-header-h, 64px) + env(safe-area-inset-top, 0px)) !important; box-sizing: border-box !important; } /* Der Drawer und die Rechnungs-Segmentleiste haengen an --tt-header-h und muessen um denselben Betrag nach unten. */ html body #dashboard-view.talent-shell .talent-main > nav.dashboard-tabs, html body #dashboard-view.talent-shell .dashboard-subgroup { top: calc(var(--tt-header-h, 64px) + env(safe-area-inset-top, 0px)) !important; } html body.tt-auth-dark:has(#talent-login-form) #auth-view.tt-auth-shell { padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important; } } /* ============================================================================ §14 LETZTE KLAMMER — kein waagerechtes Scrollen der GANZEN Seite ---------------------------------------------------------------------------- portal-mobile.css klammert bereits bis 768px. Der Tablet-Bereich hatte keine solche Klammer; nach §1 sitzt der Inhalt zwar richtig, die Absicherung bleibt trotzdem sinnvoll (lange Betreffzeilen, Hub-Karten). ============================================================================ */ @media (min-width: 769px) and (max-width: 1024px) { html body:has(#dashboard-view.talent-shell) { max-width: 100vw !important; overflow-x: hidden !important; } html body #dashboard-view.talent-shell { overflow-x: hidden !important; } } /* ============================================================================ §15 GROSSES TABLET IM QUERFORMAT — Finger statt Maus ---------------------------------------------------------------------------- Ab 901px uebernimmt die Desktop-Schicht (248px-Seitenleiste). Der Aufbau ist dort in Ordnung — gemessen auf 1194px (iPad Pro 11" quer): kein Ueberlauf, nichts abgeschnitten. ABER es wird weiter mit dem Finger bedient, und die Ziele sind Maus-Groesse: Reiter der Seitenleiste 223 x 36 Profil-Menuepunkte 226 x 33 Glocke 36 x 36 Waehrung/Zeitraum 138/178 x 32 Rechnungs-Filterchips 76–160 x 30 Deshalb NUR bei grobem Zeiger (Touch) die Hoehen anheben. Am Layout, an den Farben und an der Maus-Bedienung aendert sich nichts — ein Mac mit Trackpad meldet `pointer: fine` und faellt hier gar nicht hinein. ============================================================================ */ @media (min-width: 901px) and (pointer: coarse) { html body #dashboard-view#dashboard-view.talent-shell .talent-main > .dashboard-tabs .dashboard-tab, html body #dashboard-view#dashboard-view.talent-shell .talent-main > .dashboard-tabs .dashboard-subtab { min-height: 46px !important; height: auto !important; } html body #dashboard-view#dashboard-view.talent-shell .talent-header .tt-notif-toggle-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } html body #dashboard-view#dashboard-view.talent-shell .talent-header .talent-profile-menu > summary { height: 44px !important; min-height: 44px !important; } html body #dashboard-view#dashboard-view.talent-shell .talent-profile-dropdown > button { min-height: 46px !important; display: flex !important; align-items: center !important; } html body #dashboard-view#dashboard-view.talent-shell #overview-panel .dash-toolbar select { height: 44px !important; min-height: 44px !important; } html body #dashboard-view#dashboard-view.talent-shell .inv-shell .inv-chip { min-height: 44px !important; display: inline-flex !important; align-items: center !important; } html body #dashboard-view#dashboard-view.talent-shell .talent-header .talent-profile-avatar { width: 34px !important; height: 34px !important; font-size: 12.5px !important; } /* Werkzeugleiste der Rechnungsliste (Suche, Aktualisieren, CSV, Neue Rechnung) */ html body #dashboard-view#dashboard-view.talent-shell .inv-shell .card-header-actions input, html body #dashboard-view#dashboard-view.talent-shell .inv-shell .search-box input { height: 44px !important; min-height: 44px !important; } html body #dashboard-view#dashboard-view.talent-shell .inv-shell .card-header-actions .btn-icon-action { width: 44px !important; height: 44px !important; min-width: 44px !important; } html body #dashboard-view#dashboard-view.talent-shell .inv-shell .card-header-actions .btn-primary { min-height: 44px !important; height: auto !important; } /* Aktionen in der Zeile: Hauptaktion + "Mehr" muessen mit dem Finger treffbar sein; Nummer/Status oeffnen dieselbe Detail-Ansicht wie die ganze Zeile. */ html body #dashboard-view#dashboard-view#dashboard-view.talent-shell .inv-shell .inv-table .inv-btn.small, html body #dashboard-view#dashboard-view#dashboard-view.talent-shell .inv-shell .inv-table .inv-kebab, html body #dashboard-view#dashboard-view#dashboard-view.talent-shell .inv-shell .inv-table .inv-num, html body #dashboard-view#dashboard-view#dashboard-view.talent-shell .inv-shell .inv-table .inv-status-btn { height: 44px !important; min-height: 44px !important; } /* Tabellenkoepfe standen auf 10.5px — portal-dna.css setzt das mit drei IDs */ html body #dashboard-view#dashboard-view#dashboard-view.talent-shell .inv-shell .inv-table thead th { font-size: 12px !important; } /* Aktualisieren-Knopf bleibt optisch 32px, bekommt aber 44x44 Trefferflaeche */ html body #dashboard-view#dashboard-view.talent-shell .talent-panel-header-row .btn-icon, html body #dashboard-view#dashboard-view.talent-shell .talent-panel-header .btn-icon { position: relative !important; } html body #dashboard-view#dashboard-view.talent-shell .talent-panel-header-row .btn-icon::after, html body #dashboard-view#dashboard-view.talent-shell .talent-panel-header .btn-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); /* fs102: kein border-radius. Die Flaeche ist unsichtbar, der Kreis brachte nichts — er nahm nur die vier Ecken aus der Trefferflaeche heraus (am Geraet geprueft: +-21px treffen, die Ecke bei +-20/+-20 nicht). */ } } /* ============================================================================ §16 KALENDER — die Tagesliste war ab dem 14. nicht mehr erreichbar ---------------------------------------------------------------------------- BEFUND (iPhone 17, 402pt, gemessen im Simulator): .ttcal-grid 358 x 423 overflow:hidden .ttcal-cells 356 x 421 (display:block durch §9) letzte Zelle (31.) liegt bei top = 1544 WICHTIG (fs102, aus der Gegenpruefung): Dieser Zustand ist NICHT der Bestand. Mit dieser ganzen Datei AUS ist der Kalender in Ordnung (.ttcal-section 537 sichtbar = 537 gesamt, der 31. steht im Bild). Der oben beschriebene Zustand entsteht ERST durch §9 dieser Datei — §16 raeumt also hinter §9 auf, nicht hinter calendar.css. Netto bleibt es eine Verbesserung (Termin-Pillen 44x22 bei 9,5px -> 282x44 bei 13px), aber der Befund las sich falsch. §9 macht aus dem Monatsraster eine Tagesliste — richtig. Nur bleiben die beiden Behaelter aus calendar.css auf `flex:1 1 auto; min-height:0` stehen. Ein Flex-Kind mit `flex:1 1 auto` waechst NICHT ueber den freien Platz hinaus; die Liste ist ~1550px hoch, der Kasten bekommt 423px, und `.ttcal-grid{overflow:hidden}` (calendar.css) schneidet den Rest weg. Die Scroll-Flaeche darueber (.ttcal-section) hat dadurch nichts zu scrollen — die Tage 14 bis 31 sind schlicht nicht erreichbar. Genau der Fall, den §9 eigentlich verbessern wollte. BEHEBUNG: In der Listen-Darstellung duerfen Raster und Zellen ihre natuerliche Hoehe haben; gescrollt wird eine Ebene hoeher in .ttcal-section (die hat overflow-y:auto aus calendar.css). NACHHER gemessen: letzte Zelle erreichbar, Panel scrollt bis zum 31. ============================================================================ */ @media (max-width: 560px) { html body #dashboard-view.talent-shell #calendar-panel .ttcal-grid { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; } html body #dashboard-view.talent-shell #calendar-panel .ttcal-cells { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; grid-auto-rows: auto !important; } /* Unten Luft, damit die letzte Zeile nicht an der Home-Leiste klebt. */ html body #dashboard-view.talent-shell #calendar-panel .ttcal-section { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; } } /* ============================================================================ §17 VERTRAGS-VORSCHAU — die Verguetungstabelle wurde abgeschnitten ---------------------------------------------------------------------------- BEFUND (iPhone 17, 402pt, gemessen): .preview-a4-page 342px breit Tabelle darin 760px breit (min-width: 760px) .preview-inline-wrapper 358px, overflow-x: hidden → 430px fehlen Ursache ist eine NACKTE Element-Regel in portal-v93-professional.css (Zeile 5081, im Block `@media (max-width: 900px)`): html body #dashboard-view .admin-data-table, html body #dashboard-view table { min-width: 760px !important; } Gemeint sind die Datentabellen des Admin-Portals. Getroffen wird JEDE Tabelle unterhalb von #dashboard-view — im Talent-Portal also auch die Tabelle im Vertrag. Der Behaelter klippt statt zu scrollen: die Betragsspalte ist auf dem Handy weder sichtbar noch erreichbar. Wer den Vertrag unterschreiben soll, sieht die Zahlen nicht. (Das ist die im Projekt bekannte Falle „nackte globale Element-Regeln lecken in fremde Bauteile".) BEHEBUNG: Fuer die Vertrags-Vorschau des Talent-Portals die Fremdvorgabe zuruecknehmen — Tabelle fuellt die Seitenbreite, lange Zellen brechen um. Die Rechnungstabelle (.inv-table) und echte Datentabellen bleiben ausdruecklich unberuehrt; sie haben ihre eigene Mobil-Behandlung. NACHHER: Tabelle 342px, nichts abgeschnitten. ============================================================================ */ @media (max-width: 900px) { html body #dashboard-view.talent-shell #preview-inline-section table:not(.inv-table):not(.admin-data-table), html body #dashboard-view.talent-shell .preview-a4-page table:not(.inv-table):not(.admin-data-table), html body #dashboard-view.talent-shell .preview-inline-wrapper table:not(.inv-table):not(.admin-data-table) { min-width: 0 !important; width: 100% !important; max-width: 100% !important; table-layout: auto !important; } html body #dashboard-view.talent-shell .preview-a4-page table th, html body #dashboard-view.talent-shell .preview-a4-page table td { overflow-wrap: anywhere !important; word-break: normal !important; } /* Sicherheitsnetz: sollte eine sehr spaltenreiche Tabelle trotzdem breiter bleiben, scrollt sie IN ihrem Behaelter statt abgeschnitten zu werden. Nur die waagerechte Achse — senkrecht scrollt weiter die Seite. */ html body #dashboard-view.talent-shell .preview-inline-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* Die Kopfzeile der Vorschau: "← Zurueck" war 84 x 32. */ html body #dashboard-view.talent-shell #preview-inline-section .preview-header-actions .btn-secondary, html body #dashboard-view.talent-shell #sign-embed-section .preview-header-actions .btn-secondary { min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 16px !important; } } /* ============================================================================ §18 KOOPERATIONEN — die Monatsleiste war zu klein zum Treffen und zu klein zum Lesen ---------------------------------------------------------------------------- BEFUND (iPhone 17 402pt / iPhone 17 Pro Max 440pt / iPad mini 744pt): Monats-Chip (klickbar, "Apr 2026") 62 x 23 Schrift 10px Monatszeile (klickbar) 325 x 23 Schrift 11,5px Zeile "Bitte abrechnen: …" Schrift 11,5px Diese beiden Knoepfe sind der EINZIGE Weg vom Monat in den Rechnungsgenerator ("Rechnung stellen" fuer genau diesen Monat). Sie sind halb so hoch wie Apples Mindestmass. Die Leiste wird in talent/talent.js mit Inline-Stilen erzeugt (gesperrte Datei) — es gibt keine Klassen. Deshalb wird sie ueber ihre eindeutigen Inline-Merkmale angesprochen: das Chip-Raster ist das einzige Element mit `minmax(58px`, die Zeilenliste das einzige mit `gap:2px`. Inline-Stil schlaegt jede Klasse — daher durchgehend !important. Nur KLICKBARE Monate (im Markup