/* Montaro - Responsive Notfallkorrekturen * * TEMPORAER. Diese Datei behebt, was Solvent und die Demo-Module auf * Tablet und Handy falsch machen, damit der Stand fuer die Kundenpraesentation * traegt. Sie ist KEINE Dauerloesung: Was sich in Elementor selbst einstellen * laesst, gehoert dorthin - pro Modul und pro Breakpoint. Wenn das geschehen * ist, wird diese Datei Regel fuer Regel wieder abgebaut. * * Deshalb hier bewusst grob und mit hoher Durchschlagskraft gearbeitet. * Jede Regel nennt den gemessenen Grund. * * Gemessen am 2026-09-16 auf /main-home-mod/ bei 390px und 768px Breite. * * @package Solvent_Child_Montaro */ /* =================================================================== * BEIDE BREAKPOINTS bis 1024px * =================================================================== */ @media (max-width: 1024px) { /* Ablauf-Abschnitt: Die beiden Spalten - Parallaxbild links, Schritte * rechts - bleiben nebeneinander und werden zu schmal. Gemessen bei * 739px: Process-Widget 269px in einem 659px-Container. * * Die Regel zielt bewusst NUR auf diesen Abschnitt. Ein pauschales * width:100% auf alle verschachtelten Container hat 480px waagerechten * Ueberlauf erzeugt: Bei Spalten-Containern legt flex-wrap neue SPALTEN * daneben statt neuer Zeilen, und der Ueber-Montaro-Abschnitt ist so * gebaut. */ .elementor > .e-con:has(.elementor-widget-solvent_core_process) .e-con { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; } .elementor > .e-con:has(.elementor-widget-solvent_core_process) > .e-con { flex-direction: column !important; } /* Leere Container tragen Parallax-Hintergruende und haben keinen Inhalt, * der ihnen Hoehe gibt - sie fallen sonst auf 0 zusammen. */ .elementor .e-con:not(:has(.elementor-widget)) { min-height: 280px !important; } } /* =================================================================== * TABLET 600 bis 1024px * * Die Grenze liegt bewusst bei 600 und nicht bei 768: Ab etwa 600px * Bildschirmbreite wirken 26px Seitenrand gedraengt, waehrend 40px ruhig * sitzen. Darunter zaehlt jeder Pixel Inhaltsbreite mehr als der Rand. * =================================================================== */ @media (min-width: 600px) and (max-width: 1024px) { /* Gemessen bei 810px Viewport. * * Ausgangslage: alle Abschnitte 80px Polster oben und unten - auch die * vier Anker-Abschnitte, die keinen Inhalt haben. Das waren 800px * Leerraum. Seitenraender standen auf dreierlei Werten: 32, 57 und 89. */ /* Seitenraender und Inhaltsbreite kommen aus Elementor - 40px auf * Tablet, am Container gesetzt. Die frueheren Regeln hier haben das * ueberschrieben und sind entfallen. */ /* Anker-Abschnitte ohne Inhalt */ .elementor > .e-con:has(> .elementor-widget-menu-anchor), .elementor > .e-con:has(> .e-con-inner > .elementor-widget-menu-anchor) { padding-top: 0 !important; padding-bottom: 0 !important; } /* Slider randlos */ .elementor > .e-con:has(.elementor-widget-slider_revolution) { padding: 0 !important; } .elementor > .e-con:has(.elementor-widget-slider_revolution) > .e-con-inner { padding-left: 0 !important; padding-right: 0 !important; } /* Einleitung: das Section-Title-Widget bringt eigenen Einzug mit */ .elementor > .e-con:has(.elementor-widget-solvent_core_section_title):not(:has(.elementor-widget-solvent_core_services)):not(:has(.elementor-widget-solvent_core_process)):not(:has(.elementor-widget-solvent_core_counter)):not(:has(.elementor-widget-solvent_core_button)) > .e-con-inner { padding-left: 40px !important; padding-right: 40px !important; } /* Zielgruppen: Polster kommt aus Elementor. */ /* Ueber Montaro: Der Portraet-Container faellt auf 102px zusammen. */ .elementor > .e-con:has(.elementor-widget-solvent_core_counter) > .e-con { min-height: 420px !important; } /* Footer buendig zum Inhalt. * * Gemessen: Footer-Spalten bei 57px, Inhalt bei 40. Die Differenz kam * nicht von einem Polster, sondern von der zentrierten Rasterbreite - * .qodef-grid hat eine Maximalbreite und zentriert sich. Deshalb erst * Raster und Innenraster auf volle Breite, dann greift das Polster. * * Senkrecht: 131/133 im oberen Bereich auf 40/40, damit der Footer * denselben Rhythmus hat wie die Abschnitte darueber. */ #qodef-page-footer .qodef-grid, #qodef-page-footer .qodef-grid-inner { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } #qodef-page-footer .qodef-grid-item { padding-left: 0 !important; padding-right: 0 !important; } #qodef-page-footer-top-area-inner, #qodef-page-footer-bottom-area-inner { padding-left: 40px !important; padding-right: 40px !important; } #qodef-page-footer-top-area-inner { padding-top: 40px !important; padding-bottom: 40px !important; } #qodef-page-footer-bottom-area-inner { padding-top: 16px !important; padding-bottom: 16px !important; } /* KEINE max-width auf Slider-Textebenen. * * Der Slider arbeitet bewusst mit ueberbreiten Ebenen und zentriert den * Text darin: gemessen bei 794px Viewport eine Ebene von 939px Breite * mit left:-72px - ihr Mittelpunkt liegt damit genau in der * Bildschirmmitte. Eine Kappung auf 92vw kuerzt die Breite, laesst das * negative left aber stehen, und die Headline rutscht um 105px nach * links. * * Der Ueberlauf, den die Regel verhindern sollte, tritt ohnehin nicht * auf: Das Modul schneidet ab, scrollWidth bleibt bei der Viewportbreite. */ } /* =================================================================== * HANDY bis 599px * =================================================================== */ @media (max-width: 599px) { /* Seitenraender kommen jetzt aus Elementor: 10% Desktop, 40px Tablet, * 26px Handy, am Container gesetzt. Die frueheren Regeln hier haben das * Polster auf 0 gezogen und aufs Widget verlagert - gemessen 0 statt 26. * Sie sind entfallen; was bleibt, ist nur noch der Slider. */ /* Slider randlos - ein Hero mit Rand sieht nach Fehler aus. */ .elementor > .e-con:has(.elementor-widget-slider_revolution) > .elementor-element, .elementor > .e-con:has(.elementor-widget-slider_revolution) > .e-con-inner > .elementor-element { padding-left: 0 !important; padding-right: 0 !important; } .elementor > .e-con { padding-top: 60px !important; padding-bottom: 60px !important; } /* Anker-Abschnitte: Die vier Sprungmarken sitzen in eigenen Containern, * die je 120px Polster unten tragen - bei null Inhalt. Gemessen waren * das 360px Leerraum, die niemand als Abstand erkennt. */ .elementor > .e-con:has(> .elementor-widget-menu-anchor), .elementor > .e-con:has(> .e-con-inner > .elementor-widget-menu-anchor) { padding-top: 0 !important; padding-bottom: 0 !important; } /* Einleitung: Polster kommt aus Elementor. */ /* Zielgruppen, Ablauf und Kontakt: 120px oben und unten sind auf dem * Handy eine halbe Bildschirmhoehe pro Abschnitt. */ .elementor > .e-con:has(.elementor-widget-solvent_core_services), .elementor > .e-con:has(.elementor-widget-solvent_core_process), .elementor > .e-con:has(.elementor-widget-solvent_core_button):not(:has(.elementor-widget-solvent_core_process)) { padding-top: 40px !important; padding-bottom: 40px !important; } /* Ueber Montaro: Der Container mit dem Portraet faellt auf 45px * zusammen, weil sein Inhalt ein Hintergrundbild ist und keine eigene * Hoehe hat. */ .elementor > .e-con:has(.elementor-widget-solvent_core_counter) > .e-con { min-height: 320px !important; } /* Slider Revolution: Modul auf volle Breite zwingen * * Der Slider rechnet seine Groesse per JavaScript aus einem festen * Raster und skaliert es herunter. Bleibt das Raster breiter als der * Bildschirm, beansprucht das Modul weniger Flaeche als seine Sektion - * sichtbar als heller Streifen rechts und unter dem Slider. * * Gemessen bei 344px: Sektion 344x592, Modul davor 0x956. * Danach beide 344x592, Luecke 0. * * Die saubere Loesung liegt im Slider selbst (Layerbereich-Groessen pro * Breakpoint, "Haltepunkthoehen behalten" auf ON). Diese Regeln sind die * Absicherung, falls die JS-Rechnung daneben greift. */ sr7-module, rs-module, .rev_slider, .wp-block-themepunch-revslider, rs-module-wrap, sr7-module-wrap { width: 100% !important; max-width: 100% !important; left: 0 !important; margin-left: 0 !important; } .elementor > .e-con:has(.elementor-widget-slider_revolution) { padding-top: 0 !important; padding-bottom: 0 !important; } .elementor > .e-con:has(.elementor-widget-slider_revolution) > * { width: 100% !important; } /* Slide-Hintergrund: Slider Revolution zeichnet ihn in ein und * setzt dessen Maße per Inline-Style beim Initialisieren - berechnet aus * dem Raster, nicht aus der tatsaechlichen Modulbreite. Gemessen stand * dort width:319px in einem 344px breiten Modul, daher der helle * Streifen rechts neben dem Bild. * * Inline-Styles schlaegt nur !important. Der Slider rechnet bei jeder * Groessenaenderung neu, deshalb muessen beide Ebenen erfasst werden - * sr7-bg selbst und das canvas darin. * * NEBENWIRKUNG: Das canvas kennt kein "cover". Es wird gestreckt, nicht * beschnitten - bei 319 auf 344 sind das 8 Prozent, an einem Bergmotiv * unauffaellig. Sauber loest es nur der Slider selbst, wenn seine * Rasterwerte zur Geraetebreite passen. */ sr7-bg, sr7-sbg, sr7-sbg-px, rs-sbg-wrap, rs-sbg { width: 100% !important; max-width: 100% !important; left: 0 !important; } sr7-bg canvas, sr7-sbg canvas, rs-sbg-wrap canvas { width: 100% !important; height: 100% !important; left: 0 !important; } /* Header und Footer buendig zum Inhalt. * * Gemessen bei 333px: Der aeussere Raster-Container des Footers bringt * bereits 23px mit - dieselben, die der Seiteninhalt hat. Jedes weitere * Polster an .qodef-grid-inner oder .qodef-grid-item addiert sich darauf * und rueckt die Spalten weiter ein als den Inhalt darueber. Beide * deshalb auf 0. */ #qodef-page-footer .qodef-grid, #qodef-page-footer .qodef-grid-inner, #qodef-page-footer .qodef-grid-item { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Footer-Seitenraender: Solvent rechnet auch hier in Prozent - gemessen * 37.7px bei 538px Viewport. Fester Wert, damit der Footer buendig zum * Inhalt steht. */ #qodef-page-footer-top-area-inner, #qodef-page-footer-bottom-area-inner { padding-left: 26px !important; padding-right: 26px !important; } /* Footer-Hoehe: Gemessen trug #qodef-page-footer-top-area-inner * 131px oben und 133px unten - bei 626px Spalteninhalt waren das * ueber 260px Leerraum in einem Bereich, den man auf dem Handy * ohnehin nur scrollend erreicht. */ #qodef-page-footer-top-area-inner { padding-top: 48px !important; padding-bottom: 40px !important; } #qodef-page-footer-bottom-area-inner { padding-top: 16px !important; padding-bottom: 16px !important; } #qodef-page-header-inner, #qodef-page-header .qodef-grid-inner { padding-left: 16px !important; padding-right: 16px !important; } /* Ueberschriften: gemessen 45px bei 370px Viewport. Eine Zeile mit * "Versicherungsmakler" braucht dabei allein 2,5 Zeilen. * clamp() haelt die Groesse zwischen 26 und 34px, abhaengig von der * Viewportbreite - kein fester Wert, der beim naechsten Geraet wieder * unpassend ist. */ .elementor h1, .qodef-m-title, h1.qodef-m-title { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.15 !important; } .elementor h2, h2.qodef-m-title { font-size: clamp(26px, 7.2vw, 32px) !important; line-height: 1.2 !important; } .elementor h3, h3.qodef-m-title, .elementor h4 { font-size: clamp(22px, 6vw, 27px) !important; line-height: 1.25 !important; } /* KEINE max-width auf Slider-Textebenen - siehe Begruendung im * Tablet-Block. Der Slider zentriert den Text in einer ueberbreiten * Ebene; eine Kappung verschiebt ihn nach links. */ /* Footer-Fusszeile: gemessen 376px bei 370px Viewport - die vier * Rechtslinks passen nicht nebeneinander. Umbrechen statt ueberlaufen. */ .some-bottom, .some-bottom .wp-block-group__inner-container { gap: 6px 18px !important; } .some-bottom .widget_nav_menu ul { flex-wrap: wrap !important; justify-content: center !important; gap: 6px 18px !important; } /* Social-Icons: 64px Kacheln plus 24px Abstand ergeben 264px in einer * Reihe - das passt, aber der Rand des letzten Icons schiebt die Gruppe * aus der Mitte. */ .some-icon { margin-right: 16px !important; } .some-icon a { width: 52px !important; height: 52px !important; } .some-icon .qodef-icon { font-size: 22px !important; } /* Process-Modul: die Zahlenkacheln sind 98px breit und stehen neben dem * Text. Auf dem Handy bleibt fuer den Text zu wenig uebrig. */ .qodef-process .qodef-e-icon { width: 64px !important; height: 64px !important; } .qodef-process .qodef-e-item-icon-text { font-size: 22px !important; } /* Counter: drei Spalten nebeneinander werden auf 370px unlesbar. */ .qodef-counter .qodef-m-digit, .qodef-e-digit { font-size: clamp(32px, 11vw, 44px) !important; } /* Waagerechter Ueberlauf abfangen. Letzte Instanz - wenn ein Modul * trotz allem breiter baut, soll die Seite nicht seitlich scrollen. */ html, body { overflow-x: hidden !important; } }