/* MIA112 – Mobile-Korrekturen Ergänzt das eApp-Template und wird als letztes Stylesheet geladen. Alle Regeln hier überschreiben gezielt style.css bzw. responsive-1.css; am Template selbst wurde nichts geändert. Diese Datei lässt sich rückstandslos wieder entfernen. */ /*---------------------------------- --- 1. HORIZONTALER ÜBERLAUF ------- ----------------------------------*/ /* Sicherheitsnetz – die eigentliche Ursache behebt Abschnitt 2 */ html, body { overflow-x: hidden; } /* Deutsche Komposita ("Anwendungsplattform", "Einsatzunterstützung") brechen sonst aus ihrer Spalte heraus. hyphens wirkt über . */ h1, h2, h3, h4, .single-banner p, .single-feature-box li, .footer-contact ul li { overflow-wrap: break-word; hyphens: auto; } /*---------------------------------- --- 2. FLUIDE TYPOGRAFIE ----------- ----------------------------------*/ .banner-area h1 { font-size: clamp(1.5rem, 5.5vw, 2.25rem); line-height: 1.2; } .single-banner h3 { font-size: clamp(1.25rem, 4.5vw, 1.75rem); } .sec-title h2, .single-feature-box h2, .single-overview-box h2, .footer h2 { font-size: clamp(1.25rem, 4vw, 1.5rem); } /* Die Download-Sektion verwendet .single-feature-box und erbt daher max-width:360px und margin-top:-32px aus der Feature-Sektion. */ .download-area .single-feature-box h2 { max-width: none; margin-top: 0; } /*---------------------------------- --- 3. SICHTBARER TASTATURFOKUS ---- ----------------------------------*/ /* style.css setzt outline:0 für a/button – das nimmt Tastaturnutzern jede Orientierung. :focus-visible zeigt den Ring nur bei Tastaturbedienung. */ a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .contact-form-7 input:focus-visible, .contact-form-7 textarea:focus-visible { outline: 2px solid #bb1e10; outline-offset: 1px; } /*---------------------------------- --- 4. NAVIGATION BIS 991px -------- ----------------------------------*/ /* Das Template schaltet erst bei 767px auf das Mobilmenü um, die Bootstrap-Spalten aber bei 992px (col-lg). Dazwischen stand die Desktop-Navigation mit sechs Punkten in 13px-Versalien. */ @media only screen and (max-width: 991.98px) { .mainmenu { display: none; } .responsive-menu, .slicknav_menu { display: block; } .slicknav_btn { background: transparent; box-shadow: none; margin: 0; padding: 10px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .slicknav_menu .slicknav_menutxt { display: none; } .slicknav_menu .slicknav_icon { float: none; margin: 0; } /* Bootstrap-Spalten sind position:relative und wären sonst der Bezugsrahmen des Menüs – es blieb dadurch auf halbe Zeilenbreite eingesperrt. Ohne sie bezieht sich das Menü auf den fixen Header. */ .header .row > div { position: static; } /* Volle Breite statt 143px-Dropdown, das rechts aus dem Bild lief */ ul.slicknav_nav { position: absolute; top: 100%; left: 15px; right: 15px; z-index: 9; padding: 6px 0; background: #bb1e10; border: 2px solid #fff; border-radius: 6px; } /* Touch-Targets: vorher 33px, Richtwert sind 44px */ .slicknav_nav a { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 6px 18px; border-radius: 0; font-size: 1rem; text-transform: uppercase; } .slicknav_nav a:hover, .slicknav_nav a:focus { background: rgba(0, 0, 0, 0.15); color: #fff; } } /*---------------------------------- --- 5. ABSTÄNDE UNTER 768px -------- ----------------------------------*/ /* .ptb-100 (110/105px) und .ptb-80 sind Desktop-Werte und galten bisher unverändert auch auf dem Handy. */ @media only screen and (max-width: 767.98px) { .ptb-100 { padding-top: 56px; padding-bottom: 48px; } .ptb-80 { padding-top: 48px; padding-bottom: 48px; } .banner-area { padding-top: 96px; padding-bottom: 32px; } .feature-area { padding-top: 48px; padding-bottom: 40px; } .sec-title { margin-bottom: 24px; } .single-about-box { margin-top: 28px; } .single-banner p { margin: 20px 0; } .single-banner { margin-bottom: 24px; } /* Beide schwebenden Buttons lagen übereinander am selben rechten Rand und verdeckten Footer-Zeilen bzw. Überschriften. */ .scrolltotop, .calltoaction { width: 46px; height: 46px; line-height: 40px; font-size: 22px; right: 16px; } .scrolltotop { bottom: 16px; } .calltoaction { bottom: 74px; } .footer { padding-bottom: 80px; } }