/* ───────────────────────────────────────────────────────────────────────── fbg-responsive.css – Zentrale Mobil-/Tablet-Anpassungen des Portals --------------------------------------------------------------------------- WICHTIG: Diese Datei enthaelt AUSSCHLIESSLICH `@media (max-width: …)`-Regeln. Die Desktop-/Webansicht (ab 768 px bzw. 1024 px) bleibt damit voellig unveraendert – gewuenscht war nur die Verbesserung auf Handy & Tablet. Eingebunden auf JEDER Portalseite im (nach dem Seiten-CSS, vor ). Cache-Busting laeuft ueber tools\cachebust.ps1 (kennt diese Datei). Bei Aenderungen hier: `powershell -File tools\cachebust.ps1 -Ver `. Warum eine gemeinsame Datei statt Edits in 30 Seiten: – EINE Quelle fuer alle Seiten (analog fbg-print.css), driftet nicht auseinander. – Media-Query-gekapselt → kein Risiko fuer die Desktop-Ansicht. ───────────────────────────────────────────────────────────────────────── */ /* =========================================================================== SMARTPHONE / kleines Tablet-Hochformat (< 768 px) =========================================================================== */ @media (max-width: 767px){ /* --- Kein horizontales Wackeln der Gesamtseite ------------------------- */ html, body{ overflow-x: hidden; } /* --- Enge Spalten-Grids brechen zusammen ------------------------------- * * Betrifft NUR „nackte" Tailwind-Grids (grid-cols-3 …). Die responsiven * Varianten heissen anders (sm:grid-cols-*, md:grid-cols-* …) und bleiben * unberuehrt – dort ist das mobile Verhalten bereits gewollt gesetzt. * KPI-/Kachelreihen mit `grid-cols-2` bleiben absichtlich 2-spaltig * (kompakt und gut lesbar); erst < 430 px (s.u.) werden auch sie 1-spaltig. */ .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-7, .grid-cols-8, .grid-cols-9, .grid-cols-10, .grid-cols-11, .grid-cols-12{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* --- Medien nie breiter als der Bildschirm ----------------------------- */ main img, main canvas, main svg, main video, main iframe{ max-width: 100%; } main img{ height: auto; } /* --- Lange, nicht umbrechbare Zeichenketten (IBAN, Beleg-Nr., E-Mail, URLs) duerfen im Inhalt umbrechen statt ueberzulaufen ------------- */ main .font-mono, main .break-anywhere{ overflow-wrap: anywhere; word-break: break-word; } /* --- Tabellen ohne eigenen Scroll-Container: horizontal scrollbar statt Layout-Sprengung. Der Druckbereich (#print-view / .pv) liegt als direktes -Kind ausserhalb von

und ist somit ausgenommen. */ main table{ display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* thead/tbody/tr wieder als Tabellenzeilen rendern, damit die Spalten trotz `display:block` an der Tabelle korrekt ausgerichtet bleiben. */ main table > thead{ display: table-header-group; } main table > tbody{ display: table-row-group; } main table > tfoot{ display: table-footer-group; } main table tr{ display: table-row; } main table th, main table td{ display: table-cell; } } /* =========================================================================== KLEINE SMARTPHONES (< 430 px) – jetzt auch 2-spaltige Grids einspaltig, damit nichts mehr quetscht. =========================================================================== */ @media (max-width: 429px){ .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-7, .grid-cols-8, .grid-cols-9, .grid-cols-10, .grid-cols-11, .grid-cols-12{ grid-template-columns: 1fr !important; } }