/* ============================================================================ mobile.css — Mobile-Override-Layer für BudBorn Erzeugt: 2026-06-03 · Mobile-Audit (Playwright-getrieben) ---------------------------------------------------------------------------- REGELN (hart): - Wird als LETZTES Stylesheet in templates/header.php geladen. - NUR @media(max-width:…)-Overrides. KEIN min-width. KEIN Eingriff in Desktop. - Bestehende Mobile-Infra (Welle M) wird RESPEKTIERT, nicht ersetzt: .mobile-menu-btn ↔ .nav-links.show (app.js) · .mobile-bottom-nav (footer) .admin-layout→1fr / .admin-sidebar static (style.css Z.724/728) - Diese Datei füllt nur die per Sweep gemessenen Lücken (Overflow @390px). Außerhalb jeder Media-Query steht ausschließlich die display:contents-Basis für .table-scroll, damit der JS-Tabellen-Wrapper auf dem Desktop 0 Effekt hat. ========================================================================== */ /* Tabellen-Wrapper (von mobile-enhance.js erzeugt): auf Desktop unsichtbar im Layout — table verhält sich, als läge sie direkt im Elternknoten. */ .table-scroll{display:contents} /* ===================== Tablet-Korridor (≤1024px) ========================== */ @media (max-width:1024px){ /* Sehr breite inline-Grids (3+ Spalten) auf Tablets auf max. 2 Spalten. */ [style*="grid-template-columns"][style*="repeat(3"], [style*="grid-template-columns"][style*="repeat(4"], [style*="grid-template-columns"][style*="repeat(5"], [style*="grid-template-columns"][style*="repeat(6"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } /* ======================= Haupt-Mobile (≤767px) ============================ */ @media (max-width:767px){ /* --- 1. Globaler Overflow-Riegel --------------------------------------- overflow-x:clip (nicht hidden!) etabliert KEINEN Scroll-Container und bricht daher position:sticky NICHT. Killt den universellen +2px-Overflow und verhindert horizontales Wegscrollen durch blow-out-Elemente. */ html{overflow-x:clip} body{overflow-x:clip;max-width:100vw} /* --- 2. Medien nie breiter als der Viewport ---------------------------- Leaflet-Kacheln/Marker ausgenommen (würde die Karte zerstören); stattdessen den Karten-Container kappen. Wave C4-Handyfix (2026-08-25): PhotoSwipe's .pswp__img ausgenommen — der Editor positioniert das Bild in einem .pswp__zoom-wrap ohne Bezugsrahmen-Breite, `max-width:100%` rechnet dort auf 0 (dasselbe Muster wie beim Leaflet-Canvas). Dennis sah Zaehler+Thumbs, aber das Hauptbild war 0x0 -> unsichtbar. */ img:not(.leaflet-tile):not(.leaflet-marker-icon):not(.leaflet-image-layer):not(.pswp__img), video, canvas, iframe, embed, object, svg:not(.pswp__icn){max-width:100%;height:auto} .leaflet-container,[class*="-map"],[class*="map-"],[id*="map"]{max-width:100%} /* --- 2c. PhotoSwipe-Innenleben komplett aus der Kappung nehmen ------- Notnagel: PhotoSwipe setzt Groessen per style-Attribut auf .pswp__img UND auf .pswp__zoom-wrap. Damit die :not()-Ausnahme oben nicht durch zukuenftige Regeln unterlaufen wird, hier hart. */ .pswp img, .pswp .pswp__img, .pswp .pswp__zoom-wrap img{ max-width:none!important; max-height:none!important; height:auto; } /* --- 2b. Leaflets Zeichenflaeche ausnehmen ---------------------------- ⚠️ Die Zeile darueber nimmt Kacheln und Marker aus, `canvas` aber nicht. Genau daran ist die Respektkarte am Handy gestorben: Karte und Suche liefen, aber es war KEIN einziger Kreis zu sehen und auch nicht der eigene Standort — waehrend am Desktop alles stimmte, weil diese Media Query dort gar nicht greift. Warum es so hart trifft: Leaflet zeichnet Vektoren mit `preferCanvas` in ein , das in einem `.leaflet-pane` liegt. Der Pane ist `position:absolute` OHNE Breite (leaflet.css: `.leaflet-pane{z-index:400}` plus `position:absolute;left:0;top:0`). Ein Prozentwert bezieht sich auf den Bezugsrahmen — und der ist damit 0. `max-width:100%` heisst auf dem Canvas also `max-width:0`, und es wird schlicht nichts gemalt. Leaflet selbst kennt dieses Problem und schuetzt seine Bilder und SVGs mit `max-width:none!important` (siehe leaflet.min.css). Fuer fehlt dieser Schutz — die Canvas-Darstellung kam spaeter dazu. Wir holen ihn hier nach, mit derselben Begruendung und derselben Haerte. Gilt fuer JEDE Karte im Projekt, nicht nur die Respektkarte: RootsBorn und Geocaching benutzen dieselbe Bibliothek. */ .leaflet-pane > canvas, .leaflet-container canvas{max-width:none!important;max-height:none!important} /* --- 3. Grid-Blowout-Riegel -------------------------------------------- Grid-/Flex-Kinder haben default min-width:auto → breite Inhalte (Tabellen!) sprengen die Spur. min-width:0 erlaubt Schrumpfen. Das ist der #1-Admin-Fix (admin-users: +638px → 0). */ .admin-layout, .admin-main, .admin-main > *, .seller-layout, .seller-main, .dash-grid > *, main, .container, .page-content, .card{min-width:0} /* --- 3b. Admin-Sidebar/Main: Grid-Items dürfen schrumpfen --------------- .admin-layout ist auf Mobil 1-spaltig (style.css:724), aber die Grid-Items .admin-sidebar/.admin-main behalten min-width:auto → blähen sich auf min-content auf (admin-settings/raffles: Sidebar 502/488px) und sprengen die Spur. min-width:0 lässt die Spur auf Viewport-Breite schrumpfen; die langen Nav-Link-Labels dürfen umbrechen statt zu überlaufen. */ .admin-sidebar, .admin-main{min-width:0;max-width:100%} .admin-nav-link{min-width:0;overflow-wrap:anywhere} /* Kern des Fixes: die Grid-SPUR explizit auf min 0 setzen. 1fr ist minmax(auto,1fr) → die auto-Untergrenze friert die Spur auf die min-content der breitesten Nav-Link-Box (502px) ein, obwohl der Container nur 362px hat. minmax(0,1fr) hebt diese Untergrenze auf → Spur schrumpft auf Viewport. */ .admin-layout{grid-template-columns:minmax(0,1fr) !important} /* --- 4. Tabellen horizontal scrollbar ---------------------------------- mobile-enhance.js wrappt jede in .table-scroll und misst, ob die Tabelle tatsächlich überläuft. Nur dann setzt es .is-overflow → der Wrapper wird zum Scroll-Container. Schmale Tabellen, die passen, bleiben display:contents (Basisregel) → KEIN überflüssiger Scrollbalken. (Fix für admin-settings/broadcast-templates/forum-prefixes: Subpixel-Artefakt) */ .table-scroll.is-overflow{ display:block;width:100%;min-width:0;max-width:100vw;overflow-x:auto; -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; } /* No-JS-Fallback: nackte Tabellen wenigstens kappen statt Seite sprengen. */ table{max-width:100%} /* --- 4b. Karten mit Tabelle: scrollen statt clippen (JS-unabhängig) ----- .card hat global overflow:hidden (style.css:372). Sitzt eine zu breite Tabelle direkt darin (Admin-Dashboard: .admin-table 821px), wird sie hart abgeschnitten — Spalten unerreichbar, selbst wenn der JS-Wrapper mal nicht greift. :has() macht GENAU solche Karten zum horizontalen Scroll-Container. overflow-y bleibt hidden (aus dem Shorthand) → vertikal kein Effekt. */ .card:has(table){ overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; } /* --- 5. Filter-/Toolbar-Leisten umbrechen statt überlaufen -------------- */ .filter-bar{flex-direction:column;align-items:stretch} .filter-group, .arena-filter-group, [class*="filter-group"], [class*="-toolbar"],[class*="toolbar-"], [class*="-actions"]{flex-wrap:wrap} .filter-search,.filter-search-orange{min-width:0;width:100%} /* --- 6. Inline-gestylte feste Grids → 1 Spalte ------------------------- Häufigster Karten-/Dashboard-Killer (120 Seiten). Auf 390px ist 1-spaltig fast immer korrekt. */ [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important} /* --- 7. Inline feste px-/vw-Breiten kappen ----------------------------- */ [style*="width:"]{max-width:100%} [style*="min-width:"]{min-width:0 !important} /* --- 8. iOS: kein Auto-Zoom auf Eingabefeldern (Schrift ≥16px) ---------- */ input:not([type=checkbox]):not([type=radio]), select, textarea{font-size:16px !important} /* --- 8b. Eingabefelder dürfen schrumpfen ------------------------------- hat eine intrinsische Wunschbreite (size-Attr) → als Grid-/Flex- Item friert min-width:auto die Spur ein (admin-raffles: .form-group 446px). min-width:0 + max-width:100% lässt das Feld auf Containerbreite schrumpfen. */ input:not([type=checkbox]):not([type=radio]), select, textarea, .form-input, .form-textarea, .form-select{ min-width:0;max-width:100%; } /* --- 8c. Inline-Flex-Label-Reihen (Settings-Toggles) ------------------