/* * native-app.css — App-spezifische Anpassungen NUR für die native iOS-App. * * Wird in functions.php ausschließlich geladen, wenn der User-Agent * "TaxtasticApp" enthält (Capacitor appendUserAgent). Browser/Desktop bleiben * unberührt. Issue #897. * * Safe-Area oben: Die App nutzt `contentInset: 'always'` + weißen WebView- * Hintergrund + dunkle Statusbar-Icons (siehe capacitor.config.ts + * BridgeViewController). Der WebView-Inhalt startet damit UNTER der Statusbar * (Non-Overlay), der Statusbar-Streifen ist weiß. Deshalb sind hier KEINE * env(safe-area-inset-top)-Header-/Höhen-Tricks mehr nötig — der Header rendert * wie im Browser unter der Statusbar (kein Inhalts-Clip auf Tool-Pages). * * Es bleibt nur die untere Safe-Area für fixierte Overlays (Home-Indicator), * da diese als position:fixed NICHT vom contentInset erfasst werden. */ /* Untere Safe-Area für fixierte Footer/CTA-Leisten (Home-Indicator). */ .tx-loggedout-mobile__panel { padding-bottom: env(safe-area-inset-bottom, 0px); } /* * Obere Safe-Area NUR in der Android-App (body.tx-app-android). Drei Fälle, die * Capacitors SystemBars-Core-Plugin produziert: * 1. Android 15+, WebView ≥ 140: Insets-Passthrough → env(safe-area-inset-top) > 0. * 2. Android 15+, älterer WebView: natives Parent-Padding, env() = 0 — SystemBars * injiziert dafür --safe-area-inset-top (meist 0, da nativ schon insettet). * 3. Android ≤ 14: klassisches Non-Overlay-Layout, env() = 0. * * --tx-app-inset-extra = Δ, um das der Header über sein Web-Maß hinauswachsen muss * (Statusbar-Inset + 8px Luft − 16px Web-Padding; nie negativ). Damit wächst die * ZENTRALE Theme-Variable --header-height mit — Drawer, Scrim, Sticky-Panels und * alle `calc(100vh - var(--header-height))`-Höhen folgen automatisch (Pixel-8-Pro- * Lernfall: nur das Header-Padding zu erhöhen ließ die 80px-Box unverändert, die * Toolbar ragte per overflow:visible über Drawer/Inhalte). Issue #897. * iOS ist ausgenommen — dort macht das die native Schicht (contentInset). */ html body.tx-app-android { --tx-app-inset-extra: max( 0px, env(safe-area-inset-top, 0px) - 8px, var(--safe-area-inset-top, 0px) - 8px ); --header-height: calc(80px + var(--tx-app-inset-extra)); } html body.tx-app-android #header { padding-top: calc(16px + var(--tx-app-inset-extra)) !important; background-color: #fff !important; } /* Toolbar-INHALT bleibt 64px hoch wie im Web (80px Box − 16px Padding) — sonst würde min-height: var(--header-height) sie mit aufblasen und sie ragte wieder aus der Header-Box (overflow:visible ist dort gewollt für Dropdowns). */ html body.tx-app-android #header .toolbar { min-height: 64px !important; } /* Hartkodierte 80px-Offsets unter dem fixed Header (nutzen NICHT die Variable) um Δ mitwachsen lassen. Selektoren spiegeln _bp-profile-layout/_profile-layout inkl. der spezifischsten Variante (html body.profile-edit.xprofile …). */ html body.tx-app-android #wrapper .app-container, html body.tx-app-android .buddypress-wrap .app-container, html body.tx-app-android .app-container, html body.tx-app-android .profile-app-container, html body.tx-app-android.profile-edit .profile-app-container, html body.tx-app-android.profile-edit.xprofile .profile-app-container { margin-top: calc(80px + var(--tx-app-inset-extra)) !important; } html body.tx-app-android.page-template-steuererklaerungpruefen-php, html body.tx-app-android.page-template-steuer-profil-berechnung-php { padding-top: calc(80px + var(--tx-app-inset-extra)) !important; } /* Untere Safe-Area für den scrollbaren Seiten-Container in der App. Auf Seiten wie * der Steuerprofil-Übersicht lag der letzte Inhalt (CTA „Jetzt ausfüllen & * einreichen") unter der System-Navigationsleiste (Samsung 3-Button-Nav ~48px / * Gesten-Bar) und war nicht mehr antippbar. main.main ist der overflow:auto-Scroll- * Container mit nur 32px padding-bottom — am Button-Element selbst zu padden bringt * nichts, da der Inhalt scrollt. Entscheidend ist der Scroll-Container. Robuste * max()-Formel mit der nativ injizierten --safe-area-inset-bottom (env() ist in der * Android-WebView je nach Version 0; gleiches Muster wie die Modal-Footer). App-gated, * null Browser-Effekt. Am Pixel 8 Pro (env=24px) und für die 48px-Samsung-Nav verifiziert. */ html body.tx-app-android main.main { padding-bottom: calc( max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px)) + var(--spacing-xl, 32px) ) !important; } /* * Steuerformular-Popups (mein-konto) in der App — als schwebende KARTE statt * randlos Vollbild (User-Wunsch 2026-06-10). Die Modals sind position:fixed; * inset:0; z-index > Header und gehen auf <=768px per Inline-Plugin-CSS fullscreen * (width 100%, height 100%, border-radius 0) → dabei lag der Schließen-× unter der * Statusbar (nicht antippbar) und das Popup wirkte zu groß. * * Strategie: NICHT die einzelnen Header padden, sondern den Modal-CONTAINER * (der Flex-Wrapper, der die Karte zentriert) rundum aus der Safe-Area + von den * Screen-Rändern einrücken. Die Karte selbst bekommt ihre runden Ecken + max-width * zurück und füllt nur die eingerückte Box. Dadurch sitzen Header (mit ×) und * Footer (Abbrechen) automatisch innerhalb der sichtbaren, antippbaren Fläche. * EINE Stelle für alle 5 Modal-Familien; überschreibt die Inline-Fullscreen-Regeln * per Spezifität + !important. env()/var() = 0 im Browser → null Web-Effekt. * iOS-/Desktop-/Mobile-Web unberührt (nicht body.tx-app-android). Issue #897. */ @media (max-width: 768px) { /* Container: Karte aus Statusbar/Gestenleiste + 12px Seitenrand einrücken. */ html body.tx-app-android .ustva-modal, html body.tx-app-android .vz-modal, html body.tx-app-android .einspruch-modal, html body.tx-app-android .fristverlaengerung-modal, html body.tx-app-android .eric-nachricht-modal { box-sizing: border-box !important; padding: calc(8px + max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px))) 12px calc(8px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px))) 12px !important; } /* Karte: runde Ecken zurück, max-Breite, füllt die eingerückte Box, scrollt intern. */ html body.tx-app-android .ustva-modal-content, html body.tx-app-android .vz-modal-content, html body.tx-app-android .einspruch-modal-content, html body.tx-app-android .fristverlaengerung-modal-content { width: 100% !important; max-width: 560px !important; height: 100% !important; max-height: 100% !important; border-radius: 16px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } /* eric-nachricht: __content scrollt selbst (kein Header/Body/Footer-Split) → overflow auto. */ html body.tx-app-android .eric-nachricht-modal__content { width: 100% !important; max-width: 560px !important; max-height: 100% !important; border-radius: 16px !important; overflow-y: auto !important; } /* Header/Footer brauchen jetzt KEINE eigene Safe-Area mehr (Container macht das). Inline-USt-Header hatte sie noch baked-in → auf normales Maß zurücksetzen. */ html body.tx-app-android .ustva-modal-header { padding-top: 12px !important; } html body.tx-app-android .ustva-modal-body { padding-bottom: 12px !important; } } /* * Interview-Seiten (single-dialogue + Dialog-Start/-Ende): Frage nicht mehr * unter der Header-Toolbar (2026-06-11, Pixel-8-Pro-Report). * * Ursache: _header.scss deklariert --header-height: 80px LOKAL auf .header und * setzt height: var(--header-height) → die Header-BOX bleibt 80px, auch wenn * native-app.css die Variable am body um Δ anhebt. Mit padding-top 16px+Δ bleibt * der 64px-Toolbar nur 80px−(16px+Δ) Resthöhe — sie ragt per overflow:visible um * Δ aus der Box. Die Profil-Seiten schieben ihren Inhalt deshalb per Offset frei * (.app-container-Regeln oben); den Interview-Seiten fehlte dieser Offset, ihr * main begann direkt an der 80px-Box-Kante → Fragetitel lag unter der Toolbar. * * Fix nach demselben Muster: Inhalt um Δ nach unten. (Header sticky & in-flow — * die 80px nimmt die Box selbst ein, es fehlt nur das Δ.) */ html body.tx-app-android.single-dialogue main, html body.tx-app-android.page-template-dialog-start main, html body.tx-app-android.page-template-dialog-ende main { margin-top: var(--tx-app-inset-extra, 0px) !important; }