/* * FitStaff Global CSS * /assets/global.css * ───────────────────────────────────────────────────────────────────────── * Einbinden: * (als ERSTES Stylesheet im , vor allen seiten-eigenen CSS) * * Dieses File übernimmt ausschließlich globale, seitenübergreifende Regeln. * Keine Farben, keine Komponenten — nur strukturelle Sicherheit. * * Abgedeckt: * 1. Overflow-Prävention — verhindert horizontales Überlaufen auf Mobile * 2. Box-Sizing — konsistentes Modell überall * 3. Viewport-Sicherheit — verhindert Layout-Explosionen durch Kindelemente * 4. Bild-Sicherheit — Bilder überlaufen nie ihren Container * 5. Touch-Optimierung — sauberere Tap-Targets und Scroll-Verhalten */ /* ── 1. Box-Sizing ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* ── 2. Overflow-Prävention ───────────────────────────────────────────── */ /* Das Kernproblem: Ein einzelnes Element das breiter als der Viewport ist reicht aus um die gesamte Seite seitwärts scrollbar zu machen — auch wenn html/body selbst keine Breite definieren. Lösung: overflow-x auf beiden Ebenen + max-width als harte Grenze. (Nur html reicht oft nicht — body kann trotzdem überlaufen.) */ html { overflow-x: hidden; scroll-behavior: smooth; } body { overflow-x: hidden; /* max-width verhindert dass rogue Kindelemente den body aufziehen */ max-width: 100vw; /* Verhindert unsichtbaren horizontalen Scroll durch Margin-Kollaps */ min-height: 100%; } /* ── 3. Häufige Overflow-Quellen ──────────────────────────────────────── */ /* Container mit festen max-width-Werten (z.B. 1200px, 1080px) verursachen auf Mobile Overflow wenn kein explizites width: 100% gesetzt ist. width: 100% + max-width: 100% ist die sichere Kombination. */ .wrap, .page-wrap, .brand-bar, .brand-bar__inner, .page-header, .header-inner, [class*="-inner"], [class*="-wrap"], [class*="-container"] { max-width: 100%; } /* ── 4. Bild- und Medien-Sicherheit ──────────────────────────────────── */ img, video, svg, canvas, iframe { max-width: 100%; /* height: auto nur für img/video, nicht für iframe */ } img, video { height: auto; display: block; } /* ── 5. Touch-Optimierung ─────────────────────────────────────────────── */ /* Verhindert ungewolltes Text-Zoomen bei Orientierungswechsel (iOS) */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Sauberes Scroll-Verhalten auf Touch-Geräten */ * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* ── 6. Typografie-Sicherheit ─────────────────────────────────────────── */ /* Lange Wörter/URLs brechen um statt den Container aufzuziehen */ p, h1, h2, h3, h4, h5, h6, li, td, th { overflow-wrap: break-word; word-break: break-word; } /* ── 7. Tabellen ──────────────────────────────────────────────────────── */ table { width: 100%; table-layout: fixed; overflow-x: auto; display: block; }