:root { --primary: #ffffff; --secondary: #2DA7BA; --white: #fff; --black: #333333; --dark: #7F8285; --bg-light: #f3f3f3; } /* ========================================================================= GLOBALE OVERFLOW-SCHUTZSCHICHT Verhindert horizontalen Overflow am Handy (zu lange Wörter/URLs, Padding, zu breite Medien). Gilt projektweit, da root.css überall eingebunden ist. ========================================================================= */ /* border-box für ALLE Elemente: width:100% + Padding/Border laufen nicht mehr über */ *, *::before, *::after { box-sizing: border-box; } /* WICHTIG: overflow-x NICHT auf setzen – das bricht position:sticky (der Header scrollt sonst weg). Nur Breite begrenzen. */ html { width: 100%; max-width: 100%; } body { width: 100%; max-width: 100%; /* Horizontalen Overflow verhindern, aber sticky-Header NICHT brechen: 'clip' erzeugt – anders als 'hidden' – KEINEN Scroll-Container. 'hidden' bleibt als Fallback für sehr alte Browser stehen. */ overflow-x: hidden; overflow-x: clip; margin:0; padding:0; font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } /* Lange Wörter, E-Mail-Adressen, URLs etc. brechen um statt überzulaufen */ h1, h2, h3, h4, h5, h6, p, span, a, li, label, div, blockquote, figcaption, dt, dd, th, td { overflow-wrap: break-word; word-wrap: break-word; } /* Überschriften: lange Wörter SAUBER per Silbentrennung umbrechen statt sie hart mitten im Wort zu zerschneiden (z. B. "VERSICHERUNGSSCHUT|Z"). Greift dank mit deutscher Worttrennung; overflow-wrap oben bleibt nur das allerletzte Sicherheitsnetz. */ h1, h2, h3, h4, h5, h6 { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /* Medien & Tabellen nie breiter als ihr Container */ img, svg, video, canvas, iframe, table { max-width: 100%; } img, svg, video { height: auto; }