/* ============================================================ mobil-fix.css · gut-versichert.de Behebt den horizontalen Ueberlauf auf Smartphones. Hintergrund: Waren Elemente breiter als der Bildschirm, hat der Browser die GANZE Seite herunterskaliert, damit sie hineinpasst. Aus 19px Grundtext wurden dadurch teils 7px - unlesbar. Diese Datei wird NACH dem Seiten-CSS geladen und aendert nur, was fuer den Umbruch noetig ist. Farben, Schriften und Layout auf dem Desktop bleiben unberuehrt. ============================================================ */ /* ---------- 1) Navigation darf umbrechen ------------------- */ @media (max-width: 860px) { nav { flex-wrap: wrap; height: auto; min-height: 0; row-gap: .5rem; padding-top: .65rem; padding-bottom: .65rem; } /* Rechte Nav-Gruppen: umbrechen statt hinausschieben */ .nav-actions, .nav-right { flex-wrap: wrap; row-gap: .45rem; } } @media (max-width: 620px) { /* Logo (612x31 px, Verhaeltnis 19,7:1) belegt sonst 257px allein */ .logo-img { height: 12px; } /* Zeile 1: Logo · Zeile 2: Buttons bzw. Zurueck-Link */ nav > .logo { flex: 1 0 100%; } .nav-actions, .nav-right { flex: 1 0 100%; justify-content: center; } .nav-back, .nav-cta { flex: 0 1 auto; } /* Buttons teilen sich die Zeile gleichmaessig */ .nav-actions > a { flex: 1 1 0; justify-content: center; min-width: 0; } .nav-vertrag, .nav-schaden { font-size: .8rem; padding-left: .5rem; padding-right: .5rem; } } /* ---------- 2) Fusszeilen-Links umbrechen ------------------ */ /* Hauptverursacher: bis zu 901px breite Linkreihe */ @media (max-width: 860px) { .fl { flex-wrap: wrap; justify-content: center; row-gap: .55rem; text-align: center; } footer .fl a { white-space: normal; } } /* ---------- 3) Feste Breiten in Seitenleisten aufheben ----- */ @media (max-width: 860px) { aside.sidebar, aside.toc, .form-card, .sidebar, .toc { max-width: 100%; width: auto; min-width: 0; } } /* ---------- 4) Lange Zeichenketten umbrechen --------------- */ /* Registernummern, URLs und E-Mail-Adressen im Impressum, in der Erstinformation und in der Datenschutzerklaerung. */ @media (max-width: 860px) { .val, dd, td, th, p, li, address, .kv, .kv * { overflow-wrap: break-word; word-break: normal; } a[href^="mailto"], a[href^="http"], a[href^="www"], .val a { overflow-wrap: anywhere; } } /* ---------- 5) Raster nie schmaler als der Bildschirm ------ */ @media (max-width: 860px) { [class*="grid"], [class*="-cards"], [class*="cols"] { min-width: 0; } img, svg, video, iframe, table { max-width: 100%; } } /* ---------- 6) Lange deutsche Komposita in Ueberschriften --- */ /* "Privathaftpflichtversicherung" ist ein einzelnes Wort und passt bei 390px nicht in eine Zeile. Da gesetzt ist, trennt der Browser korrekt nach Silben. */ @media (max-width: 860px) { h1, h2, h3, .kicker, .hero h1 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } } /* ---------- 7) Fortschrittsanzeige im Schadenformular ------- */ @media (max-width: 860px) { .prog, .progress, .steps-bar, [id^="ps"] { min-width: 0; flex-wrap: wrap; } [id^="ps"] { max-width: 100%; } } /* ---------- 8) Wertespalten in den Pflichtseiten ------------ */ /* Registernummern und Paragrafenangaben im Impressum */ @media (max-width: 860px) { .val, .kv .val { overflow-wrap: anywhere; } } /* ---------- 9) Silbentrennung generell auf schmalen Geraeten -- */ /* Deutsche Komposita ("Nachhaltigkeitsauswirkungen", "Beteiligungen an Versicherungsunternehmen") sprengen sonst jeden Kasten. hyphens:auto greift nur dort, wo ein Wort nicht in die Zeile passt - sonst bleibt der Satz unveraendert. */ @media (max-width: 860px) { body { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } /* Formularfelder und Buttons nicht trennen */ input, select, textarea, button, .btn, [class*="btn"] { hyphens: manual; } } /* ---------- 10) Zweispaltige Layouts frueher umbrechen ------- */ /* mein-vertrag.html bricht erst bei 760px um und laeuft dadurch auf dem iPad im Hochformat (768px) ueber. */ @media (max-width: 900px) { .main, .sv-grid, .panel-grid { grid-template-columns: 1fr !important; } .panel { max-width: 100%; min-width: 0; } } /* ---------- 11) Lange Beschriftungen auf Buttons ------------- */ /* "Übernommene Police prüfen lassen" u. ä. sprengen auf sehr schmalen Geraeten die Zeile. */ @media (max-width: 400px) { a[class*="btn"], a[class*="cta"], button, .hero-cta { min-width: 0; max-width: 100%; padding-left: .9rem; padding-right: .9rem; white-space: normal; text-align: center; } } /* ---------- 12) Verweis-Buttons in Fliesstext-Abschnitten ---- */ /* Als Flex-Element gesetzte Links werden sonst breiter als ihr Elternelement (min-width steht bei Flex-Kindern auf auto). Bei rein inline gesetzten Links bleibt die Regel wirkungslos. */ @media (max-width: 860px) { a { max-width: 100%; min-width: 0; } }